:root{--paper:#f7f4ee;--paper-2:#efeadf;--ink:#1d1d1f;--ink-60:#1d1d1f99;--ink-40:#1d1d1f66;--ink-15:#1d1d1f26;--ink-08:#1d1d1f14;--accent:#e0603f;--accent-ink:#fff;--accent-soft:#e0603f24;--sev-block:#c23b3b;--sev-block-soft:#c23b3b24;--sev-warn:#b8862a;--sev-warn-soft:#b8862a29;--sev-info:#4a7a8c;--sev-info-soft:#4a7a8c24;--glass-bg:#ffffffa8;--glass-border:#ffffff80;--glass-blur:blur(18px);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;--shadow-1:0 1px 2px #1d1d1f0f;--shadow-2:0 4px 12px #1d1d1f14;--shadow-3:0 10px 30px #1d1d1f24;--ease-out:cubic-bezier(.16,1,.3,1);--dur-sm:.15s;--dur-md:.22s;--font:-apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{height:100%}body{font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}button,input,textarea,select{color:inherit;font-family:inherit}button{cursor:pointer;background:0 0;border:none}svg{fill:none;stroke:currentColor;stroke-width:1.6px;vertical-align:-3px;flex-shrink:0;width:16px;height:16px}input:focus-visible,select:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}#app{width:100vw;height:100vh;position:relative}.screen{flex-direction:column;display:flex;position:absolute;inset:0}.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--shadow-2)}.stepper{top:var(--sp-4);z-index:30;gap:var(--sp-2);border-radius:var(--radius-pill);padding:6px 10px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.stepper .step{border-radius:var(--radius-pill);color:var(--ink-40);align-items:center;gap:6px;padding:4px 10px;font-size:12px;display:flex}.stepper .step .dot{background:var(--ink-15);border-radius:50%;width:6px;height:6px}.stepper .step.active{color:var(--ink);background:var(--accent-soft)}.stepper .step.active .dot{background:var(--accent)}.stepper .step.done{color:var(--ink-60)}.top-right{top:var(--sp-4);right:var(--sp-4);z-index:30;gap:var(--sp-2);display:flex;position:absolute}.icon-btn{border-radius:var(--radius-pill);background:var(--glass-bg);width:36px;height:36px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--shadow-1);transition:transform var(--dur-sm) var(--ease-out);justify-content:center;align-items:center;display:flex}.icon-btn:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}.icon-btn svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.6px}.top-left{top:var(--sp-4);left:var(--sp-4);z-index:30;position:absolute}.demo-screen{justify-content:center;align-items:center;gap:var(--sp-4);padding:70px var(--sp-3) var(--sp-4);overflow-y:auto}.demo-stage{aspect-ratio:4/3;border-radius:var(--radius-lg);width:min(560px,92vw);box-shadow:var(--shadow-3);background:#111;position:relative;overflow:hidden}.demo-stage video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.demo-stage canvas.skeleton{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.demo-stage .no-cam{justify-content:center;align-items:center;gap:var(--sp-3);color:#fff;text-align:center;padding:var(--sp-6);flex-direction:column;display:flex;position:absolute;inset:0}.demo-stage .countdown{color:#fff;background:#00000040;justify-content:center;align-items:center;font-size:64px;font-weight:700;display:none;position:absolute;inset:0}.demo-stage .countdown.show{display:flex}.demo-stage .hint{top:var(--sp-3);border-radius:var(--radius-pill);color:#fff;background:#0006;padding:6px 14px;font-size:13px;position:absolute;left:50%;transform:translate(-50%)}.demo-stage .rec-dot{top:var(--sp-3);right:var(--sp-3);background:var(--sev-block);border-radius:50%;width:12px;height:12px;display:none;position:absolute}.demo-stage .rec-dot.on{animation:1s ease-in-out infinite rec-pulse;display:block}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}.choice-row{gap:var(--sp-3);flex-wrap:wrap;justify-content:center;display:flex}.choice-tile{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-1);transition:transform var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);flex-direction:column;align-items:center;gap:6px;font-size:13px;display:flex}.choice-tile:hover{transform:translateY(-2px)}.choice-tile.active{border-color:var(--accent);background:var(--accent-soft)}.choice-tile .sil{border-radius:var(--radius-sm);background:var(--ink-08);justify-content:center;align-items:center;width:40px;height:40px;display:flex}.choice-tile .sil svg{width:20px;height:20px;stroke:var(--ink-60);fill:none;stroke-width:1.6px}.choice-tile .sil.cup{position:relative}.choice-tile .sil.cup:after{content:"";background:var(--ink-40);border-radius:50%;width:8px;height:8px;position:absolute;bottom:4px;right:4px}.mode-toggle{border-radius:var(--radius-pill);gap:4px;padding:4px;display:flex}.mode-toggle button{border-radius:var(--radius-pill);color:var(--ink-60);padding:6px 14px;font-size:12px}.mode-toggle button.active{background:var(--ink);color:var(--paper)}.record-btn{background:var(--accent);width:76px;height:76px;box-shadow:var(--shadow-2);transition:transform var(--dur-sm) var(--ease-out);border-radius:50%;justify-content:center;align-items:center;display:flex}.record-btn:hover{transform:scale(1.04)}.record-btn.recording{background:var(--sev-block)}.record-btn svg{width:26px;height:26px;fill:var(--accent-ink);stroke:none}.synthetic-row{gap:var(--sp-2);flex-wrap:wrap;justify-content:center;max-width:640px;display:flex}.synthetic-btn{border-radius:var(--radius-pill);background:var(--ink-08);padding:8px 14px;font-size:13px}.synthetic-btn:hover{background:var(--accent-soft)}.pick-screen{justify-content:flex-start;align-items:center;gap:var(--sp-6);padding:88px var(--sp-3) var(--sp-6);overflow-y:auto}.pick-cards{gap:var(--sp-4);flex-wrap:wrap;justify-content:center;max-width:1040px;display:flex}.pick-card{gap:var(--sp-2);width:300px;padding:var(--sp-3);border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-2);transition:transform var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);flex-direction:column;display:flex}.pick-card:hover{transform:translateY(-3px)}.pick-card.selected{border-color:var(--accent)}.pick-card canvas{border-radius:var(--radius-md);background:var(--paper-2);width:100%;height:230px}.pick-card .label{font-size:16px;font-weight:600}.pick-card .note{color:var(--ink);font-size:13px;font-weight:500;line-height:1.5}.pick-card .stat{color:var(--ink-40);margin-top:-4px;font-size:11px}.pick-card .fidelity{color:var(--ink-40);align-items:center;gap:6px;font-size:11px;display:flex}.pick-card .fidelity .bar{background:var(--ink-08);border-radius:2px;flex:1;height:4px;overflow:hidden}.pick-card .fidelity .bar>span{background:var(--accent);height:100%;display:block}.pick-card .card-status{align-items:center;gap:6px;font-size:12px;display:flex}.pick-card .status-dot{border-radius:50%;width:7px;height:7px}.pick-card .status-dot.ok{background:#3a8a4b}.pick-card .status-dot.warn{background:var(--sev-warn)}.pick-card .actions{gap:var(--sp-2);margin-top:2px;display:flex}.pick-card .pick-btn{border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);text-align:center;flex:1;padding:8px;font-size:12px}.pick-empty{align-items:center;gap:var(--sp-2);width:min(420px,92vw);padding:var(--sp-6) var(--sp-5);border-radius:var(--radius-lg);text-align:center;flex-direction:column;display:flex}.pick-empty .empty-title{width:100%;font-size:17px;font-weight:600}.pick-empty .hint-text{width:100%;color:var(--ink-60);font-size:13px}.pick-empty button{margin-top:var(--sp-3);border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);padding:10px 22px;font-size:13px;font-weight:600}.pick-card.selected .pick-btn{background:var(--accent)}.pick-card .again-btn{border-radius:var(--radius-pill);background:var(--ink-08);padding:8px 10px;font-size:11px}#stage-canvas{outline:none;display:block;position:absolute;inset:0}.pins-layer{pointer-events:none;z-index:5;position:absolute;inset:0}.status-line{z-index:20;border-radius:var(--radius-pill);padding:6px 14px;font-size:12px;position:absolute;top:60px;left:50%;transform:translate(-50%)}.status-line.warn{color:var(--sev-warn)}.status-line.ok{color:#3a8a4b}.adjust-controls{left:50%;bottom:var(--sp-6);z-index:24;align-items:center;gap:var(--sp-3);flex-direction:column;max-width:calc(100vw - 24px);display:flex;position:absolute;transform:translate(-50%)}.dial-row{align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);display:flex}.dial-row span{color:var(--ink-60);font-size:12px}.dial-row input[type=range]{appearance:none;border-radius:var(--radius-pill);background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct,100%), var(--ink-15) var(--pct,100%), var(--ink-15) 100%);cursor:pointer;width:160px;height:4px}.dial-row input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);width:16px;height:16px;box-shadow:var(--shadow-1);cursor:pointer;border:2px solid #fff;border-radius:50%;margin-top:0}.dial-row input[type=range]::-moz-range-track{background:var(--ink-15);border-radius:var(--radius-pill);border:none;height:4px}.dial-row input[type=range]::-moz-range-progress{background:var(--accent);border-radius:var(--radius-pill);height:4px}.dial-row input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px}.swatch-row{padding:var(--sp-2);border-radius:var(--radius-pill);gap:6px;display:flex}.swatch{border:2px solid #0000;border-radius:50%;width:22px;height:22px}.swatch.active{border-color:var(--ink)}.shell-row{padding:var(--sp-2);border-radius:var(--radius-pill);gap:6px;display:flex}.shell-tile{border-radius:var(--radius-pill);background:var(--ink-08);padding:6px 10px;font-size:12px}.shell-tile.active{background:var(--accent);color:var(--accent-ink)}.fix-me-btn{border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);align-items:center;gap:6px;padding:9px 16px;font-size:13px;display:flex}.fix-me-btn svg{width:14px;height:14px;stroke:var(--paper);fill:none}.fix-me-btn.hidden{display:none}.pin{cursor:pointer;pointer-events:auto;width:18px;height:18px;box-shadow:var(--shadow-1);border:2px solid #ffffffd9;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.pin.block{background:var(--sev-block)}.pin.warn{background:var(--sev-warn)}.pin.info{background:var(--sev-info)}.pin .dot{background:#fff;border-radius:50%;width:5px;height:5px}.pin-tooltip{border-radius:var(--radius-sm);background:var(--ink);color:var(--paper);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-sm) var(--ease-out);padding:6px 10px;font-size:12px;position:absolute;transform:translate(-50%,calc(-100% - 10px))}.pin-tooltip.visible{opacity:1}.fixes-overlay{z-index:60;background:#1d1d1f2e;justify-content:center;align-items:flex-end;display:none;position:absolute;inset:0}.fixes-overlay.open{display:flex}.fixes-panel{border-radius:var(--radius-lg);width:min(640px,92vw);max-height:60vh;padding:var(--sp-4);gap:var(--sp-3);flex-direction:column;margin-bottom:120px;display:flex;overflow-y:auto}.fixes-panel h3{justify-content:space-between;align-items:center;margin:0;font-size:14px;display:flex}.fix-card{border-radius:var(--radius-md);padding:var(--sp-3);border:1px solid var(--ink-08);background:#fff9;flex-direction:column;gap:6px;display:flex}.fix-card .fix-title{font-size:13px;font-weight:600}.fix-card .fix-rationale{color:var(--ink-60);font-size:12px}.fix-card .fix-actions{gap:var(--sp-2);display:flex}.fix-card .apply-btn{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-pill);border:none;padding:6px 14px;font-size:12px}.fixes-empty{gap:var(--sp-2);padding:var(--sp-4) var(--sp-2);text-align:center;flex-direction:column;align-items:center;display:flex}.fixes-empty-msg{color:var(--ink-60);font-size:13px}.fixes-empty-actions{gap:var(--sp-2);flex-wrap:wrap;justify-content:center;display:flex}.fixes-empty-actions button{border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);transition:transform var(--dur-sm) var(--ease-out);padding:8px 16px;font-size:12px}.fixes-empty-actions button:hover{transform:translateY(-1px)}.expert-toggle{bottom:var(--sp-4);right:var(--sp-4);z-index:26;color:var(--ink-40);border-radius:var(--radius-pill);padding:6px 12px;font-size:12px;position:absolute}.expert-drawer{bottom:50px;right:var(--sp-4);z-index:26;border-radius:var(--radius-md);width:260px;max-height:50vh;padding:var(--sp-3);color:var(--ink-60);font-size:11px;line-height:1.6;display:none;position:absolute;overflow-y:auto}.expert-drawer.open{display:block}.print-screen{padding:76px var(--sp-4) var(--sp-6);align-items:center;gap:var(--sp-4);position:relative;overflow-y:auto}.print-hero{border-radius:var(--radius-lg);flex-shrink:0;width:min(640px,92vw);height:260px;overflow:hidden}.print-hero canvas{width:100%;height:100%;display:block}.print-banner{width:min(640px,92vw);padding:var(--sp-4);border-radius:var(--radius-lg);text-align:center;flex-direction:column;gap:6px;display:flex}.print-banner .headline{font-size:18px;font-weight:700}.print-banner .honesty{color:var(--ink-40);font-size:11px}.parts-list{flex-direction:column;gap:6px;width:min(640px,92vw);display:flex}.part-row{align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);background:#ffffff8c;display:flex}.part-row .thumb{border-radius:var(--radius-sm);background:var(--paper-2);width:36px;height:36px}.part-row .name{flex:1;font-size:13px}.part-row .badge{border-radius:var(--radius-pill);background:var(--sev-info-soft);color:var(--sev-info);padding:2px 8px;font-size:10px}.part-row .time{color:var(--ink-40);white-space:nowrap;font-size:11px}.print-actions{gap:var(--sp-3);flex-wrap:wrap;justify-content:center;display:flex}.print-actions button{border-radius:var(--radius-pill);align-items:center;gap:6px;padding:10px 18px;font-size:13px;display:flex}.print-actions .primary{background:var(--accent);color:var(--accent-ink)}.print-actions .secondary{background:var(--ink-08)}.print-actions button[disabled]{opacity:.5;cursor:not-allowed}.guide-steps{gap:var(--sp-2);flex-direction:column;width:min(640px,92vw);display:flex}.guide-step{padding:var(--sp-3);border-radius:var(--radius-md);background:#ffffff8c;font-size:13px}.guide-step b{color:var(--accent)}.drawer-toggle{z-index:45;writing-mode:vertical-rl;padding:var(--sp-3) 6px;border-radius:var(--radius-md) 0 0 var(--radius-md);border:1px solid var(--glass-border);color:var(--ink-60);border-right:none;font-size:12px;position:absolute;top:50%;right:0;transform:translateY(-50%)}.side-drawer{z-index:40;width:300px;transition:transform var(--dur-md) var(--ease-out);padding:var(--sp-6) var(--sp-4);gap:var(--sp-3);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.side-drawer.open{transform:translate(0)}.side-drawer h3{margin:0;font-size:14px}.lib-card{border-radius:var(--radius-md);padding:var(--sp-2);gap:var(--sp-2);background:#ffffff8c;align-items:center;display:flex}.lib-card img,.lib-card .ph{border-radius:var(--radius-sm);background:var(--paper-2);width:48px;height:48px}.lib-card .meta{flex-direction:column;flex:1;gap:2px;display:flex}.lib-card .meta .t{font-size:12px;font-weight:600}.lib-card .meta button{background:var(--ink-08);border-radius:var(--radius-pill);align-self:flex-start;padding:3px 8px;font-size:11px}.settings-panel label{color:var(--ink-60);flex-direction:column;gap:4px;font-size:12px;display:flex}.settings-panel input,.settings-panel select{border:1px solid var(--ink-15);border-radius:var(--radius-sm);background:#ffffffb3;padding:6px 8px;font-size:13px}.hint-text{color:var(--ink-40);text-align:center;font-size:11px}@media (width<=480px){.demo-stage{aspect-ratio:3/4}.pick-cards{flex-direction:column;align-items:center}.pick-card{width:min(320px,88vw)}.side-drawer{width:86vw}.stepper{font-size:11px}.status-line{text-align:center;max-width:calc(100vw - 24px);top:108px}}