:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;color:#26333d;background:#f5f7f8;font-synthesis:none;color-scheme:light;--rose:#b56b7c;--line:#d8dfe5;--muted:#596772}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #338c99;outline-offset:4px}button{touch-action:manipulation}button:disabled{cursor:wait;opacity:.45}[hidden]{display:none!important}
.product{max-width:1160px;padding:30px 32px 20px;margin:auto}.heading{display:flex;align-items:center;gap:28px;padding-bottom:24px}.wordmark{font:46px Georgia,"Times New Roman",serif;letter-spacing:1px;color:#495a64;white-space:nowrap}.wordmark sup{font:14px -apple-system,BlinkMacSystemFont,sans-serif;vertical-align:top;display:inline-block;margin:5px 0 0 3px;letter-spacing:0}.title-group{border-left:1px solid var(--line);padding-left:28px;flex:1;min-width:0}h1{font-size:23px;letter-spacing:.1em;font-weight:500;margin:0 0 6px;line-height:1.5}.title-group p{margin:0;font:15px Georgia,"Times New Roman",serif;letter-spacing:.03em;color:var(--muted);line-height:1.5}.volume{font-size:14px;white-space:nowrap;color:var(--muted)}
.view-tabs{display:flex;border-bottom:1px solid var(--line);gap:28px;margin-bottom:22px}.view-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:12px 1px 15px;font-size:16px}.view-tab.active{border-color:var(--rose);color:#26333d}
.stage{position:relative;overflow:hidden;border-radius:4px;background:radial-gradient(ellipse at 50% 25%,#fff 0%,#f1f4f7 62%,#e4eaf0 100%);height:clamp(340px,52vw,570px)}#canvas-host{position:absolute;inset:0;touch-action:none;cursor:grab}#canvas-host:active{cursor:grabbing}#canvas-host canvas{display:block;width:100%;height:100%}.stage-corner{position:absolute;left:24px;top:24px;display:grid;gap:7px;pointer-events:none;font-size:14px;color:#51616b}.small-label{font-size:12px;letter-spacing:.14em;color:#68757f}.stage-tools{display:flex;flex-direction:column;gap:8px;position:absolute;right:20px;bottom:22px}.round-tool{border:1px solid #ced7df;background:#ffffffde;width:40px;height:40px;border-radius:50%;color:#3d4a55;font-size:24px;font-weight:400;line-height:1}.drag-hint{position:absolute;bottom:23px;left:24px;color:#5b6c76;font-size:13px;pointer-events:none;letter-spacing:.035em}.load-status{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#f1f4f7f5;z-index:2;font-size:16px;padding:32px}.load-status.error{color:#9d4456}
.control-strip{display:flex;align-items:center;gap:35px;padding:23px 0 14px}.box-controls{display:flex;padding:4px;border:1px solid #d5dce2;border-radius:6px;background:#e9eef1;flex-shrink:0}.state-button{border:0;border-radius:4px;background:transparent;color:#61717e;font-size:15px;min-width:80px;padding:10px 18px}.state-button.selected{background:white;color:#243541;box-shadow:0 1px 4px #20344712}.rotation-control{max-width:370px;flex:1;min-width:100px}.rotation-control label{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#5c6b76;gap:20px}.rotation-control output{font-variant-numeric:tabular-nums;color:#253742}.rotation-control input{width:100%;height:24px;accent-color:#a65e71;display:block;cursor:pointer;margin:4px 0 0}.auto-button{margin-left:auto;border:1px solid #d1d9e0;background:transparent;color:#435765;border-radius:5px;font-size:14px;padding:11px 15px;white-space:nowrap}.auto-button[aria-pressed=true]{background:#e6ecef;border-color:#78919d}.auto-button span{font-size:18px;margin-right:5px}.model-note,.photo-note{color:#68757f;font-size:12px;line-height:1.8;margin:0 0 18px}
.photo-stage{position:relative;background:#edf1f4;min-height:340px;height:clamp(340px,54vw,585px);display:grid;place-items:center;border-radius:4px;overflow:hidden}.photo-frame{position:relative;width:min(100%,680px);height:100%;overflow:hidden;display:grid;place-items:center}.photo-frame>img.generated{width:100%;height:100%;object-fit:contain}.photo-label{position:absolute;left:18px;bottom:18px;background:#fffffff0;padding:7px 11px;font-size:13px;color:#4e606d;border-radius:3px}.photo-thumbnails{display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:10px;padding:18px 0}.photo-thumb{padding:0;background:transparent;border:1px solid #d5dce2;border-radius:5px;overflow:hidden;color:#5f6d76;min-width:0}.photo-thumb[aria-pressed=true]{border:2px solid #a25e72;color:#8b4056}.thumb-picture{display:block;aspect-ratio:1.25;overflow:hidden;background:#e4e9ed;position:relative}.thumb-picture img{width:100%;height:100%;object-fit:cover}.photo-thumb>span:last-child{display:block;padding:8px 3px;font-size:13px;line-height:1.45}.photo-note{min-height:22px}
footer{border-top:1px solid var(--line);padding-top:17px;color:#75828b;font-size:12px;display:flex;justify-content:space-between;gap:12px;line-height:1.5}
@media(max-width:700px){.product{padding:22px 16px 16px}.heading{gap:18px;flex-wrap:wrap;padding-bottom:17px}.wordmark{font-size:33px}.wordmark sup{font-size:11px}.title-group{padding-left:17px}h1{font-size:18px;letter-spacing:.06em}.title-group p{font-size:12px}.volume{width:100%;font-size:12px;margin-top:-5px}.view-tabs{gap:22px;margin-bottom:14px}.view-tab{font-size:15px;padding:10px 0 13px}.stage{height:410px}.stage-corner{top:18px;left:18px;font-size:12px}.stage-tools{right:12px;bottom:17px}.round-tool{width:42px;height:42px}.drag-hint{left:18px;bottom:20px;font-size:12px}.control-strip{gap:14px;flex-wrap:wrap;padding:17px 0 12px}.box-controls{order:1}.auto-button{order:2;font-size:13px;padding:11px}.rotation-control{order:3;flex-basis:100%;max-width:none}.state-button{padding:10px 18px;min-width:74px}.rotation-control label{font-size:13px}.rotation-control input{height:32px}.photo-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.photo-stage{height:430px}.photo-thumb>span:last-child{font-size:12px}.model-note,.photo-note{font-size:12px}footer{font-size:11px;flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}