:root{--bg:#121316;--surface:#1b1d21;--surface-2:#25282e;--surface-3:#2f333a;--line:#363a42;--text:#ecebe7;--muted:#a6a39b;--accent:#f2b84b;--accent-ink:#1c1405;--ok:#3ecf8e;--wrong:#ff5c9a;--radius:10px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;accent-color:var(--accent);caret-color:var(--accent);scrollbar-color:var(--surface-3) var(--bg);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}::selection{background:var(--accent);color:var(--accent-ink)}body{background:var(--bg);color:var(--text);margin:0}.app{flex-direction:column;max-width:1480px;min-height:100dvh;margin:0 auto;padding:0 1.25rem;display:flex}header{flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 0;display:flex}h1{letter-spacing:-.01em;margin:0 auto 0 0;font-size:1.15rem;font-weight:650}.modes{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 3px);gap:2px;padding:3px;display:flex}.modes button{background:0 0;border-color:#0000}.modes button:hover{background:var(--surface-2)}.modes button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}#fps{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:4.5em;font-size:.85rem}button,input,select,label.button{font:inherit;color:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);min-height:2.5rem;padding:.5rem .9rem}button,label.button{cursor:pointer;justify-content:center;align-items:center;gap:.4rem;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-flex}button:hover,label.button:hover{background:var(--surface-3)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}button.primary:hover:not(:disabled){background:#f6c66a}button.quiet{color:var(--muted);background:0 0;border-color:#0000;min-height:2rem;padding:.25rem .5rem}button.quiet:hover{color:var(--text);background:var(--surface-2)}button.danger{color:var(--wrong);background:0 0}button.danger:hover{border-color:var(--wrong);background:#ff5c9a1a}input,select{width:100%;transition:border-color .15s ease-out}input::placeholder{color:#8a877f}input:focus,select:focus{border-color:var(--accent);outline:none}:focus-visible,label.button:focus-within{outline:2px solid var(--accent);outline-offset:2px}main{flex:1;grid-template-columns:minmax(0,1fr) 23rem;align-items:start;gap:1.25rem;display:grid}.viewer{flex-direction:column;gap:.75rem;min-width:0;display:flex}.stage{border-radius:var(--radius);background:#000;position:relative;overflow:hidden}.stage video,.stage canvas{object-fit:contain;width:100%;max-height:calc(100dvh - 9.5rem);display:block;transform:scaleX(-1)}.stage.file video,.stage.file canvas{transform:none}.stage canvas{pointer-events:none;height:100%;position:absolute;inset:0}.hud{display:none}#status{background:#121316d1;border:1px solid #ffffff14;border-radius:8px;max-width:calc(100% - 1.5rem);margin:0;padding:.35rem .75rem;font-size:.9rem;position:absolute;top:.75rem;left:.75rem}.source{flex-wrap:wrap;gap:.5rem;display:flex}.panel{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);flex-direction:column;gap:1.5rem;padding:1.25rem;display:flex;position:sticky;top:1rem}.panel section{flex-direction:column;gap:1.25rem;display:flex}.group{flex-direction:column;gap:.5rem;min-width:0;display:flex}.group-head{justify-content:space-between;align-items:center;display:flex}h2,label{color:var(--muted);margin:0;font-size:.8rem;font-weight:600}.hint{color:var(--muted);margin:0;font-size:.9rem}.field-row{grid-template-columns:1fr 6rem;gap:.75rem;display:grid}.input-row{gap:.5rem;display:flex}.input-row input{text-transform:uppercase;letter-spacing:.06em;flex:1;min-width:0}.input-row button{flex-shrink:0}.actions{flex-wrap:wrap;gap:.5rem;display:flex}.actions button{white-space:nowrap;flex:auto}details{background:var(--surface-2);border-radius:var(--radius);padding:.6rem .9rem}summary{cursor:pointer;font-size:.9rem}details[open] summary{margin-bottom:.4rem}code{background:var(--surface-3);border-radius:4px;padding:.05rem .3rem;font-size:.85em}.readout{background:var(--surface-2);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1rem 1rem;display:flex}.letter{color:var(--accent);min-height:1em;font-size:6.5rem;font-weight:700;line-height:1}.letter.empty{color:#7d7a73;font-weight:300}.tape{background:var(--surface-2);border-radius:var(--radius);letter-spacing:.12em;overflow-wrap:anywhere;min-height:3rem;padding:.6rem .9rem;font-size:1.5rem;font-weight:700;display:block}.sign-row{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.hand3d{background:var(--surface-3);border-radius:var(--radius);cursor:grab}.sign{border-radius:var(--radius);background:#fff;width:auto;height:160px;padding:.5rem}.word{letter-spacing:.12em;overflow-wrap:anywhere;font-size:2.6rem;font-weight:700;line-height:1.2}.word .done{color:var(--ok)}.word .current{color:var(--accent);text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:3px}.grid{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.grid span{background:var(--surface-2);text-align:center;border:1px solid #0000;border-radius:6px;padding:.3rem 0 .2rem;font-weight:600;line-height:1.2}.grid span.done{background:#3ecf8e1a;border-color:#3ecf8e8c}.grid small{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.7rem;font-weight:400;display:block}.fingers{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.fingers li{border-radius:6px;align-items:center;gap:.6rem;padding:.3rem .5rem;display:flex}.fingers li:before{content:"";border:2px solid #565b65;border-radius:50%;flex-shrink:0;width:.65rem;height:.65rem}.fingers li:after{color:var(--muted);margin-left:auto;font-size:.8rem}.fingers li.ok:before{background:var(--ok);border-color:var(--ok)}.fingers li.ok:after{content:"passt"}.fingers li.wrong{background:#ff5c9a1a}.fingers li.wrong:before{border-color:var(--wrong)}.fingers li.wrong:after{content:"anpassen";color:var(--wrong)}footer{color:var(--muted);border-top:1px solid var(--line);margin-top:1.5rem;padding:1.5rem 0;font-size:.8rem}@media (width<=900px){main{grid-template-columns:1fr}.panel{position:static}.stage video,.stage canvas{object-fit:cover;max-height:58dvh}#status{max-width:calc(100% - 8.5rem)}.hud{border-radius:var(--radius);background:#121316d1;border:1px solid #ffffff14;flex-direction:column;align-items:center;gap:.35rem;min-width:6rem;padding:.5rem .75rem .65rem;display:flex;position:absolute;top:.75rem;right:.75rem}.hud-label{color:var(--muted);font-size:.7rem;font-weight:600}.hud-letter{color:var(--accent);font-size:2.75rem;font-weight:700;line-height:1}.hud-letter.empty{color:#7d7a73;font-weight:300}.hud-fingers{gap:.3rem;display:flex}.hud-fingers span{border:2px solid #565b65;border-radius:50%;width:.7rem;height:.7rem}.hud-fingers .ok{background:var(--ok);border-color:var(--ok)}.hud-fingers .wrong{border-color:var(--wrong)}}@media (pointer:coarse){button,input,select,label.button,button.quiet{min-height:44px}input,select{font-size:16px}summary{padding-block:.4rem}}@media (width<=480px){.app{padding:0 .75rem}header{gap:.75rem}h1{flex-basis:100%}.modes{flex:1}.modes button{flex:1;padding-inline:.5rem}.panel{padding:1rem}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}