: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:#ffffff9e;--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;--sp-12:48px;--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}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}#app{width:100vw;height:100vh;position:relative}#stage-canvas{outline:none;display:block;position:absolute;inset:0}#pins-layer{pointer-events:none;z-index:5;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)}.wordmark{top:var(--sp-6);left:var(--sp-6);z-index:10;pointer-events:none;flex-direction:column;gap:2px;display:flex;position:absolute}.wordmark .title{letter-spacing:.02em;font-size:16px;font-weight:600}.wordmark .status{color:var(--ink-60);gap:var(--sp-3);font-size:12px;display:flex}.wordmark .status span.bad{color:var(--sev-block)}@media (width<=480px){.wordmark .status{flex-wrap:wrap;row-gap:2px;max-width:calc(100vw - 180px)}}.top-right{top:var(--sp-6);right:var(--sp-6);z-index:20;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);border:1px solid var(--glass-border);box-shadow:var(--shadow-1);transition:transform var(--dur-sm) var(--ease-out), box-shadow 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}.menu-popover{border-radius:var(--radius-md);min-width:200px;padding:var(--sp-2);z-index:30;flex-direction:column;gap:2px;display:none;position:absolute;top:44px;right:0}.menu-popover.open{display:flex}.menu-popover button{text-align:left;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);color:var(--ink);transition:background var(--dur-sm) var(--ease-out);background:0 0;border:none;font-size:13px}.menu-popover button:hover{background:var(--ink-08)}.settings-panel{width:280px;padding:var(--sp-4);gap:var(--sp-3);flex-direction:column}.settings-panel h3{margin:0 0 var(--sp-1);font-size:13px;font-weight:600}.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}.bottom-stack{left:50%;bottom:var(--sp-6);z-index:24;align-items:center;gap:var(--sp-3);flex-direction:column-reverse;max-width:calc(100vw - 24px);display:flex;position:absolute;transform:translate(-50%)}.capsule-wrap{align-items:center;gap:var(--sp-2);border-radius:var(--radius-pill);padding:6px 6px 6px var(--sp-4);width:min(420px,100vw - 24px);display:flex}.capsule-wrap input{color:var(--ink);background:0 0;border:none;outline:none;flex:1;padding:8px 0;font-size:14px}.capsule-wrap input::placeholder{color:var(--ink-40)}.capsule-mic,.capsule-send{border-radius:var(--radius-pill);background:var(--ink-08);width:34px;height:34px;transition:background var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);border:none;justify-content:center;align-items:center;display:flex}.capsule-mic svg,.capsule-send svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7px}.capsule-mic:hover,.capsule-send:hover{background:var(--accent-soft)}.capsule-mic.listening{background:var(--accent);animation:1.2s ease-out infinite pulse-ring}.capsule-mic.listening svg{stroke:var(--accent-ink)}.capsule-send{background:var(--accent)}.capsule-send svg{stroke:var(--accent-ink)}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 10px #e0603f00}to{box-shadow:0 0 #e0603f00}}.variants-strip{gap:var(--sp-3);padding:var(--sp-2);scrollbar-width:none;max-width:calc(100vw - 24px);display:none;overflow-x:auto}.variants-strip::-webkit-scrollbar{display:none}.variants-strip.visible{display:flex}.variant-card{width:92px;padding:var(--sp-2);border-radius:var(--radius-md);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--shadow-1);transition:transform var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);flex-direction:column;flex:none;align-items:center;gap:6px;display:flex}.variant-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}.variant-card.active{border-color:var(--accent)}.variant-card canvas{border-radius:var(--radius-sm);background:var(--paper-2);width:100%;height:56px}.variant-card .name{color:var(--ink-60);text-align:center;font-size:11px}.timeline{border-radius:var(--radius-lg);width:min(680px,100vw - 24px);padding:var(--sp-2) var(--sp-4);flex-direction:column;gap:6px;display:flex}.timeline-row{align-items:center;gap:var(--sp-3);display:flex}.timeline-actions{flex:none;align-items:center;display:flex}.timeline-track{border-radius:var(--radius-sm);background:var(--paper-2);cursor:pointer;flex:1;height:28px;position:relative;overflow:visible}.timeline-sparkline{width:100%;height:100%;position:absolute;inset:0}.timeline-playhead{background:var(--accent);pointer-events:none;width:2px;position:absolute;top:-3px;bottom:-3px;transform:translate(-1px)}.timeline-kf{background:var(--ink);cursor:grab;border:2px solid var(--paper);border-radius:50%;width:9px;height:9px;position:absolute;top:50%;transform:translate(-50%,-50%)}.timeline-kf:hover{background:var(--accent)}.timeline-trigger-chip{border-radius:var(--radius-pill);background:var(--ink-08);color:var(--ink-60);white-space:nowrap;border:none;padding:4px 10px;font-size:11px}.timeline-trigger-chip:hover{background:var(--accent-soft);color:var(--ink)}.timeline-playbtn{background:var(--ink);border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.timeline-playbtn svg{width:12px;height:12px;fill:var(--paper);stroke:none}.kf-popover{z-index:40;padding:var(--sp-3);border-radius:var(--radius-md);flex-direction:column;gap:6px;width:160px;display:flex;position:absolute}.kf-popover label{color:var(--ink-60);justify-content:space-between;font-size:11px;display:flex}.kf-popover input[type=range]{width:100%}.rationalize-btn{border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);transition:background var(--dur-sm) var(--ease-out);white-space:nowrap;border:none;flex:none;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:500;display:flex}.rationalize-btn svg{width:13px;height:13px;stroke:var(--paper);fill:none;stroke-width:1.8px}.rationalize-btn:hover{background:var(--accent)}.rationalize-btn.hidden{display:none}.rationalize-btn .badge{background:var(--sev-block);color:#fff;border-radius:var(--radius-pill);margin-left:2px;padding:1px 6px;font-size:10px}.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(680px,90vw);max-height:60vh;padding:var(--sp-4);gap:var(--sp-3);flex-direction:column;display:flex;overflow-y:auto}.fixes-panel h3{justify-content:space-between;align-items:center;margin:0;font-size:14px;display:flex}.fixes-panel .close-x{color:var(--ink-40);background:0 0;border:none;font-size:18px;line-height:1}.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{align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.fix-card .fix-tag{border-radius:var(--radius-pill);background:var(--sev-info-soft);color:var(--sev-info);padding:2px 8px;font-size:10px}.fix-card .fix-rationale{color:var(--ink-60);font-size:12px}.fix-card .fix-actions{gap:var(--sp-2);margin-top:2px;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}.fix-card .preview-btn{background:var(--ink-08);color:var(--ink);border-radius:var(--radius-pill);border:none;padding:6px 14px;font-size:12px}.fixes-empty{color:var(--ink-60);text-align:center;padding:var(--sp-6) 0;font-size:13px}.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}.part-chip{z-index:15;border-radius:var(--radius-pill);pointer-events:none;align-items:center;gap:6px;padding:4px 8px;font-size:11px;display:flex;position:absolute;transform:translate(-50%,-100%)}.part-chip .more-btn{color:var(--accent);pointer-events:auto;background:0 0;border:none;padding:0 2px;font-size:11px}.part-more-popover{z-index:40;padding:var(--sp-3);border-radius:var(--radius-md);gap:var(--sp-2);flex-direction:column;width:220px;display:none;position:absolute}.part-more-popover.open{display:flex}.part-more-popover .row{flex-direction:column;gap:2px;display:flex}.part-more-popover label{color:var(--ink-60);justify-content:space-between;font-size:11px;display:flex}.part-more-popover input[type=range]{width:100%}.teach-pip{bottom:var(--sp-6);left:var(--sp-6);z-index:30;border-radius:var(--radius-lg);flex-direction:column;width:220px;display:none;position:absolute;overflow:hidden}.teach-pip.open{display:flex}.teach-pip video{object-fit:cover;background:#000;width:100%;height:150px;display:block;transform:scaleX(-1)}.teach-pip canvas.skeleton{pointer-events:none;width:220px;height:150px;position:absolute;top:0;left:0;transform:scaleX(-1)}.teach-pip .legend{color:var(--ink-60);padding:8px 10px;font-size:11px;line-height:1.6}.teach-pip .rec-ring{background:var(--sev-block);border-radius:50%;width:14px;height:14px;display:none;position:absolute;top:10px;right:10px}.teach-pip .rec-ring.active{animation:1s ease-in-out infinite rec-pulse;display:block}.teach-pip .cam-error{color:var(--sev-block);padding:10px;font-size:12px}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}.log-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);transition:right var(--dur-md) var(--ease-out);border-right:none;font-size:12px;position:absolute;top:50%;right:0;transform:translateY(-50%)}.log-toggle.drawer-open{right:320px}.log-drawer{z-index:40;width:320px;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%)}.log-drawer.open{transform:translate(0)}.log-drawer h3{margin:0;font-size:14px}.version-card{border-radius:var(--radius-md);padding:var(--sp-2);gap:var(--sp-2);background:#ffffff8c;display:flex}.version-card img{border-radius:var(--radius-sm);object-fit:cover;background:var(--paper-2);width:56px;height:56px}.version-card .meta{flex-direction:column;flex:1;gap:4px;display:flex}.version-card .meta .label{font-size:12px;font-weight:600}.version-card .meta .time{color:var(--ink-40);font-size:10px}.version-card .meta button{background:var(--ink-08);border-radius:var(--radius-pill);border:none;align-self:flex-start;padding:3px 8px;font-size:11px}.version-notes{flex-direction:column;gap:4px;margin-top:4px;display:flex}.version-notes textarea{border-radius:var(--radius-sm);border:1px solid var(--ink-15);resize:vertical;background:#ffffffb3;width:100%;min-height:34px;padding:4px 6px;font-size:11px}.version-notes .n-label{color:var(--ink-40);font-size:10px}.hint-text{color:var(--ink-40);font-size:11px}.severity-dot{border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.severity-dot.block{background:var(--sev-block)}.severity-dot.warn{background:var(--sev-warn)}.severity-dot.info{background:var(--sev-info)}