*,*:before,*:after{box-sizing:border-box}body{margin:0}.vk-board{display:flex;flex-direction:column;gap:.45rem;padding:1.25rem;border-radius:14px;background:linear-gradient(165deg,#1c2133,#12151f);box-shadow:0 24px 48px #00000073,inset 0 1px #ffffff0f;width:100%;max-width:none;margin:0;box-sizing:border-box}.vk-row{display:flex;gap:.35rem}.vk-key{min-height:46px;min-width:0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:#c8ceda;background:linear-gradient(180deg,#2a3145,#222838);border:1px solid rgba(255,255,255,.08);box-shadow:0 2px #00000059,inset 0 1px #ffffff0d;transition:background .08s ease,color .08s ease,box-shadow .08s ease,transform .06s ease;-webkit-user-select:none;user-select:none}.vk-key--active{color:#0b0d12;background:linear-gradient(180deg,#7ee8c5,#3dd4a8);border-color:#0000001f;box-shadow:0 0 0 2px #3dd4a859,0 3px 12px #3dd4a840;transform:translateY(1px)}.vk-key-label{padding:0 .2rem;text-align:center;line-height:1.1}.app{min-height:100vh;padding:2rem 1.25rem 3rem;background:radial-gradient(1200px 600px at 50% -10%,#2a3350,#0e1018 55%);color:#e8ecf4;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app-header{text-align:center;margin-bottom:1.75rem}.app-title{margin:0 0 .5rem;font-size:1.65rem;font-weight:700;letter-spacing:-.02em}.app-sub{margin:0 auto;max-width:520px;font-size:.9rem;line-height:1.5;color:#9aa3b5}.app-sub code{font-size:.82em;padding:.12em .35em;border-radius:4px;background:#ffffff0f}.panel{max-width:920px;margin:0 auto 1.5rem;padding:1.25rem 1.35rem;border-radius:12px;background:#12151fb8;border:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.label{font-size:.88rem;color:#aeb6c8}.select{flex:1;min-width:200px;padding:.45rem .65rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#151823;color:#e8ecf4;font-size:.9rem}.select--inline{min-width:0;flex:0;margin-left:.35rem}.banner{max-width:920px;margin:0 auto 1rem;padding:.65rem 1rem;border-radius:8px;font-size:.88rem}.banner--warn{background:#eab3081f;border:1px solid rgba(234,179,8,.35);color:#fde68a}.banner--err{background:#ef44441f;border:1px solid rgba(239,68,68,.35);color:#fecaca}.meta{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;margin:1rem 0 0;font-size:.88rem}.meta dt{margin:0;color:#8b95a8}.meta dd{margin:0}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;margin-top:1.1rem}.btn{padding:.45rem 1rem;border-radius:8px;border:none;font-weight:600;font-size:.88rem;cursor:pointer;background:linear-gradient(180deg,#4f8cff,#3b6fd9);color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--ghost{background:#ffffff14;color:#e8ecf4}.speed{display:flex;align-items:center;font-size:.88rem;color:#aeb6c8}.time{font-variant-numeric:tabular-nums;font-size:.88rem;color:#9aa3b5}.scrub-wrap{margin-top:.85rem}.scrub-stack{position:relative}.scrub-overlays{position:absolute;left:0;right:0;top:50%;height:14px;transform:translateY(-50%);pointer-events:none}.scrub-marker{position:absolute;top:0;bottom:0;width:10px;transform:translate(-50%);border:none;border-radius:999px;cursor:pointer;pointer-events:auto;opacity:.85;box-shadow:0 0 0 1px #00000038}.scrub-marker--bug{background:#ef44448c}.scrub-marker--feeling{background:#eab30880}.scrub-marker:hover{opacity:1}.scrub-marker:focus-visible{outline:2px solid rgba(126,200,255,.9);outline-offset:2px}.camera-offset-panel{margin-top:.9rem;padding:.85rem 1rem;border-radius:12px;background:#12151f9e;border:1px solid rgba(255,255,255,.08)}.camera-offset-label{display:block;margin-bottom:.55rem;font-size:.84rem;color:#c7cfe0}.camera-offset-help{margin-top:.5rem;font-size:.82rem;color:#9aa3b5}.metrics-panel{margin-top:.85rem;padding:.85rem 1rem;border-radius:12px;background:#12151f9e;border:1px solid rgba(255,255,255,.08)}.metrics-panel__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#7a8499;margin-bottom:.65rem}.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.metrics-item{padding:.65rem .75rem;border-radius:10px;background:#0000002e;border:1px solid rgba(255,255,255,.08)}.metrics-k{font-size:.76rem;color:#9aa3b5;margin-bottom:.25rem}.metrics-v{font-variant-numeric:tabular-nums;font-weight:700;color:#e8ecf4}@media(max-width:760px){.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.scrub{width:100%;accent-color:#3dd4a8}.key-strip{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)}.key-strip-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#7a8499;margin-bottom:.45rem}.key-chips{display:flex;flex-wrap:wrap;gap:.35rem}.kbd{font-family:ui-monospace,monospace;font-size:.78rem;padding:.25rem .5rem;border-radius:6px;background:#ffffff14;border:1px solid rgba(255,255,255,.1)}.kbd--warn{border-color:#eab30873;background:#eab3081a}.muted{font-size:.85rem;color:#6b7289}.key-strip--hint{padding-top:.85rem;margin-top:.5rem;border-top:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.drop-zone{margin-top:1rem;padding:1rem 1.1rem;border-radius:10px;border:1px dashed rgba(255,255,255,.2);background:#00000026;font-size:.88rem;color:#9aa3b5;text-align:center;transition:border-color .15s ease,background .15s ease,color .15s ease}.drop-zone--active{border-color:#3dd4a88c;background:#3dd4a814;color:#d1fae5}.source-hint{margin:.85rem 0 0;font-size:.86rem;color:#aeb6c8;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.source-hint strong{color:#e8ecf4;font-weight:600}.linkish{border:none;background:none;color:#7ec8ff;text-decoration:underline;cursor:pointer;font-size:inherit;padding:0}.linkish:hover{color:#b8ddff}.keyboard-stage{width:100%;margin:0}.timeline-legend{margin-top:.85rem;padding:.75rem .9rem;border-radius:12px;background:#12151f9e;border:1px solid rgba(255,255,255,.08)}.timeline-legend__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#7a8499;margin-bottom:.55rem}.timeline-legend__items{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;color:#c7cfe0;font-size:.86rem}.timeline-legend__item{display:inline-flex;align-items:center;gap:.45rem}.timeline-legend__swatch{width:14px;height:10px;border-radius:999px;box-shadow:0 0 0 1px #00000038}.timeline-legend__swatch--bug{background:#ef44448c}.timeline-legend__swatch--feeling{background:#eab30880}.timeline-legend__hint{color:#9aa3b5;font-size:.84rem}.recommend-cards{margin-top:.75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.recommend-col{min-width:0;padding:.75rem .9rem;border-radius:12px;background:#12151f73;border:1px solid rgba(255,255,255,.08)}.recommend-col__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#7a8499;margin-bottom:.6rem}.recommend-list{display:flex;flex-direction:column;gap:.6rem}.recommend-card{text-align:left;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:#dbe4f0;border-radius:12px;padding:.75rem .8rem;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.recommend-card:hover{transform:translateY(-1px);background:#ffffff0f}.recommend-card:focus-visible{outline:2px solid rgba(126,200,255,.9);outline-offset:2px}.recommend-card--bug:hover{border-color:#ef444473}.recommend-card--feeling:hover{border-color:#eab30873}.recommend-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}.recommend-card__name{font-weight:700;color:#f8fafc;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recommend-card__time{font-variant-numeric:tabular-nums;font-size:.82rem;color:#9aa3b5;white-space:nowrap}.recommend-card__meta{margin-top:.35rem;font-size:.84rem;color:#fde68a}.recommend-card__desc{margin-top:.45rem;font-size:.88rem;color:#c7cfe0;line-height:1.45}.recommend-empty{font-size:.86rem;color:#9aa3b5;padding:.4rem .1rem}@media(max-width:980px){.recommend-cards{grid-template-columns:1fr}}.key-hud{margin-bottom:1rem;padding:1rem 1.15rem 1.1rem;border-radius:12px;background:#12151fd9;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px #00000059}.key-hud-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#7a8499;margin-bottom:.55rem}.key-hud-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;min-height:2.75rem}.key-hud-chip{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;padding:.45rem .85rem;border-radius:10px;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#0b0d12;background:linear-gradient(180deg,#7ee8c5,#3dd4a8);border:1px solid rgba(0,0,0,.1);box-shadow:0 0 0 1px #3dd4a840,0 4px 14px #3dd4a833}.key-hud-chip--raw{background:linear-gradient(180deg,#fde68a,#f59e0b);color:#1a1408;box-shadow:0 0 0 1px #f59e0b59,0 4px 14px #f59e0b2e}.key-hud-empty{font-size:1.5rem;font-weight:300;color:#4b5569}.inputs-row{display:flex;align-items:stretch;gap:1rem;margin-top:1rem}.keyboard-col{flex:1;min-width:0;display:flex}.mouse-col{flex:0 0 260px;display:flex}.mouse-col--aligned{align-items:center}.mouse-visual{padding:1.05rem 1.05rem 1rem;border-radius:12px;background:#12151fd9;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px #00000059;height:100%}.mouse-visual-title{font-size:.82rem;font-weight:700;color:#c7cfe0;margin-bottom:.75rem}.mouse-shell{border-radius:18px;background:linear-gradient(165deg,#2a3145,#12151f);border:1px solid rgba(255,255,255,.08);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:1rem .75rem .95rem;height:100%}.mouse-single{width:100%;display:flex;align-items:center;justify-content:center}.mouse-single svg{width:165px;height:auto;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25))}.mouse-single .outer{fill:transparent;stroke:currentColor;stroke-width:6;stroke-linejoin:round}.mouse-single .inner{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round}.mouse-single .wheel{fill:transparent;stroke:currentColor;stroke-width:6}.mouse-single{color:#fffc}.mouse-single--left-active{color:#ff6aa6}.mouse-single--right-active{color:#7ee8c5}.mouse-single--left-active .outer{fill:currentColor}.mouse-single--left-active .inner,.mouse-single--right-active .inner{stroke:#0b0d12}.mouse-single--right-active .outer{fill:currentColor}.mouse-cursor{fill:#ffffff59;opacity:.35;transition:opacity .12s ease,fill .12s ease}.mouse-cursor--active{opacity:1;fill:#0b0d12}.mouse-cursor--left.mouse-cursor--active{fill:#ff6aa6}.mouse-cursor--right.mouse-cursor--active{fill:#7ee8c5}.mouse-visual-hint{margin-top:.7rem;font-size:.78rem;color:#9aa3b5;text-align:center}.mouse-split-row{display:flex;align-items:center;justify-content:center;gap:.35rem;width:100%;-webkit-user-select:none;user-select:none}.mouse-bracket{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:120px;font-weight:900;line-height:1;color:#ffffff52;text-shadow:0 6px 22px rgba(0,0,0,.35)}.mouse-bracket--active-left{color:#ff6aa6}.mouse-bracket--active-right{color:#7ee8c5}.mouse-bracket-sep{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:120px;font-weight:900;line-height:1;color:#ffffff61;text-shadow:0 6px 22px rgba(0,0,0,.35)}.replay-layout{width:100%;max-width:none;margin:0 auto;display:flex;flex-direction:column;gap:1rem;align-items:stretch}.replay-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,620px) 320px;gap:1rem;align-items:start}.keyboard-stage--full{grid-column:1 / -1}.replay-main,.replay-side{min-width:0;display:flex;flex-direction:column;gap:1rem}.video-stage,.camera-stage{width:100%;border-radius:14px;overflow:hidden;background:#00000040;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px #00000059,inset 0 1px #ffffff0f}.replay-video,.camera-video{width:100%;height:100%;display:block;background:#000;object-fit:contain}.video-wrap{position:relative}.scrub-footer{margin-top:.35rem;display:flex;justify-content:flex-end;align-items:center}.scrub-time{font-variant-numeric:tabular-nums;font-size:.82rem;color:#9aa3b5;padding:.12rem .45rem;border-radius:10px;background:#0000002e;border:1px solid rgba(255,255,255,.08)}.ra{width:100%;display:flex;justify-content:center;align-items:start;padding:.75rem .75rem .85rem}.ra__outer{position:relative;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 18px 40px #00000059,inset 0 1px #ffffff0d;border:1px solid rgba(255,255,255,.08);max-width:100%}.ra__inner{width:100%;height:100%}.ra__handle{position:absolute;width:16px;height:16px;right:8px;bottom:8px;border-radius:4px;background:#ffffff38;border:1px solid rgba(255,255,255,.28);cursor:nwse-resize;touch-action:none}.ra__handle:hover{background:#ffffff59}.ra__handle:active{background:#7ec8ff8c;border-color:#7ec8ffbf}.transcript-panel{width:100%;min-width:0;height:100%;max-height:min(78vh,980px);border-radius:14px;padding:1rem 1rem 1.05rem;background:linear-gradient(180deg,#12151fe0,#0b0e16eb);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px #00000047,inset 0 1px #ffffff0d;display:flex;flex-direction:column}.transcript-panel__header{margin-bottom:.8rem}.transcript-panel__title{font-size:.9rem;font-weight:700;color:#f8fafc}.transcript-panel__sub{margin-top:.22rem;font-size:.8rem;color:#9aa3b5}.transcript-window-list{display:flex;flex-direction:column;gap:.8rem;overflow-y:auto;padding-right:.2rem}.transcript-window{text-align:left;width:100%;padding:.9rem .95rem;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:#dbe4f0;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease}.transcript-window:hover{border-color:#7ec8ff73;background:#7ec8ff14;transform:translateY(-1px)}.transcript-window--active{border-color:#3dd4a8bf;background:linear-gradient(180deg,#3dd4a82e,#3dd4a814);box-shadow:0 0 0 2px #3dd4a82e,0 12px 28px #3dd4a81f;transform:translateY(-1px)}.transcript-window__time{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7ee8c5}.transcript-window--active .transcript-window__time{color:#d1fae5}.transcript-window__body{margin-top:.55rem;font-size:.9rem;line-height:1.55;color:#e8ecf4}.video-status{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-size:.92rem;color:#c7cfe0;background:#00000040}.video-status--error{color:#fecaca;background:#ef444424}.video-debug code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85em;padding:.1em .35em;border-radius:6px;background:#ffffff14;border:1px solid rgba(255,255,255,.12)}.video-hint{margin-top:.65rem;max-width:52rem;font-size:.82rem;line-height:1.45;color:#d1d5db}.video-hint code{font-size:.9em;padding:.08em .3em;border-radius:4px;background:#ffffff14}.video-hint--mono{margin-top:.45rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;word-break:break-all;color:#9ca3af}.video-placeholder{padding:1.1rem 1.25rem;text-align:center;color:#aeb6c8;font-size:.92rem}@media(max-width:980px){.replay-shell{grid-template-columns:1fr}.keyboard-stage--full{grid-column:auto}.camera-video{max-height:360px}.transcript-panel{max-height:none}}