:root{--bg: #07070a;--panel: #121218;--edge: #26262e;--text: #e8e8ec;--dim: #8b8b96;--accent: #ff5a1f;--accent-soft: rgba(255, 90, 31, .55);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box;scrollbar-width:none}::-webkit-scrollbar{display:none}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100%;min-height:100%;overflow:hidden}.gate{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#050508eb;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer}.gate-button{font-size:1.6rem;font-weight:600;padding:18px 44px;border-radius:999px;border:1px solid var(--accent);background:linear-gradient(180deg,#1a1112,#120b0c);color:var(--text);cursor:pointer;box-shadow:0 0 28px var(--accent-soft)}.gate-button:hover{box-shadow:0 0 44px var(--accent)}.preload{width:min(320px,72%);height:6px;border-radius:999px;background:var(--panel);border:1px solid var(--edge);overflow:hidden}.preload-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#ff8448);transition:width .2s ease}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--edge)}.brand h1{font-size:1.1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0}.status{display:block;font-size:.68rem;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--edge);background:transparent;color:var(--text);border-radius:50%;cursor:pointer;padding:0;font-family:inherit}.icon-btn:hover{border-color:var(--accent-soft);color:var(--accent)}.select-wrap{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--edge);border-radius:999px;padding:4px 6px 4px 13px;background:transparent}.select-wrap:hover{border-color:var(--accent-soft)}.select-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}.select-wrap select{appearance:none;-webkit-appearance:none;background:var(--panel);color:var(--text);border:none;border-radius:999px;font-size:.78rem;padding:4px 22px 4px 10px;cursor:pointer;font-family:inherit;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b8b96' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 8px center}.select-wrap select:focus{outline:none;box-shadow:0 0 0 1px var(--accent-soft)}.select-wrap option{background:var(--panel);color:var(--text)}.mode-switch{display:inline-flex;padding:3px;border:1px solid var(--edge);border-radius:999px;background:#121218e0}.mode-switch button{border:0;border-radius:999px;padding:6px 12px;background:transparent;color:var(--dim);font:inherit;font-size:.72rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.mode-switch button.active{color:#17120c;background:#ffd166;box-shadow:0 0 18px #ffd1663d}.mode-switch button:focus-visible{outline:2px solid #ffd166;outline-offset:2px}.flash{margin:0;padding:6px 22px;font-size:.75rem;color:var(--accent);background:#ff5a1f14}.stage{position:relative;flex:1;min-height:200px}.viz-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.play-row{position:absolute;right:26px;bottom:22px;z-index:2;display:flex}.play-btn{width:68px;height:68px;border-radius:50%;border:1px solid var(--edge);background:var(--panel);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .12s ease,border-color .12s ease}.play-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 24px var(--accent-soft)}.play-btn:focus-visible{outline:none;border-color:var(--accent)}.teach-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid rgba(255,209,102,.18);background:radial-gradient(circle at 10% 0%,rgba(255,209,102,.09),transparent 32%),linear-gradient(180deg,#121218fa,#09090dfa)}.teach-title{min-width:0}.teach-title h1{margin:2px 0 0;overflow:hidden;color:#fff7df;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:650;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}.teach-actions,.teach-metrics{display:flex;align-items:center}.teach-actions{gap:12px}.teach-metrics{gap:14px;color:var(--dim);font-size:.68rem;white-space:nowrap}.teach-metrics span{display:grid;gap:1px;text-align:center}.teach-metrics strong{color:var(--text);font-size:.92rem}.teach-start{min-width:112px;border:1px solid rgba(255,209,102,.5);border-radius:999px;padding:9px 16px;background:linear-gradient(180deg,#2b2417,#17130d);color:#ffe6a7;font:inherit;font-size:.78rem;font-weight:650;cursor:pointer}.teach-start:hover:not(:disabled),.teach-start:focus-visible{border-color:#ffd166;box-shadow:0 0 20px #ffd16633}.teach-start:disabled{cursor:not-allowed;opacity:.38}.teach-stage{min-height:300px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) 0 0 / 100% 48px,radial-gradient(circle at 50% 100%,rgba(255,209,102,.07),transparent 46%)}.teach-empty,.count-in{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.teach-empty{flex-direction:column;color:#fff2ca;text-align:center}.teach-empty span{font-size:clamp(1.4rem,4vw,2.6rem);font-weight:600;letter-spacing:-.04em}.count-in{color:#fff4cf;font-size:clamp(6rem,20vw,14rem);font-weight:700;line-height:1;text-shadow:0 0 48px rgba(255,209,102,.42);animation:count-pulse .42s ease-out}.teach-keyboard-shell{border-top:1px solid rgba(255,209,102,.16);box-shadow:0 -20px 60px #00000057}.teach-keyboard-shell .keyboard{height:clamp(190px,30vh,310px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes count-pulse{0%{opacity:.25;transform:scale(.86)}to{opacity:1;transform:scale(1)}}.keyboard{position:relative;width:100%;height:clamp(250px,38vh,400px);user-select:none;-webkit-user-select:none;touch-action:none}.white-row{display:flex;width:100%;height:100%;gap:1px}.key{border:none;cursor:pointer;display:flex;min-width:0;align-items:flex-end;justify-content:center;padding-bottom:14px;font-family:inherit}.key:focus-visible{outline:3px solid var(--accent);outline-offset:-4px;z-index:3}.key.white{flex:1 1 0;background:linear-gradient(180deg,#f4f2ee,#d8d5cf);border-radius:0 0 6px 6px;color:#333;border-left:1px solid #a8a49c;transition:background 60ms linear}.key.white:first-child{border-left:none}.key.white.active{background:linear-gradient(180deg,#ffb08a,#ff6a2a);box-shadow:inset 0 -6px 14px #78140059,0 0 22px var(--accent);transform:translateY(2px)}.key.black{position:absolute;top:0;height:62%;background:linear-gradient(180deg,#2a2a30,#0d0d11);border:1px solid #000;border-top:none;border-radius:0 0 5px 5px;color:#c9c9d2;z-index:2;transition:background 60ms linear}.key.black.active{background:linear-gradient(180deg,#ff7c3f,#b63810);box-shadow:0 0 18px var(--accent);transform:translateY(2px);color:#fff}.key-label{display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;line-height:1.1}.key.white .western{font-size:.72rem;color:#55503f;font-weight:600}.key.white .sargam{font-size:.8rem;color:#222;font-weight:700}.key.black .western{font-size:.6rem;color:#7d7d88}.key.black .sargam{font-size:.66rem;color:#d5d5de;font-weight:600}@media(max-width:900px){.topbar{padding:10px 14px;row-gap:8px}.select-label{display:none}.select-wrap{padding-left:8px}.select-wrap select{padding:4px 20px 4px 8px}.status{max-width:100%}.teach-header{align-items:flex-start;flex-direction:column;gap:10px;padding:12px 14px}.teach-actions{flex-wrap:wrap;justify-content:space-between;width:100%}}@media(max-width:720px){.keyboard{height:clamp(180px,30vh,260px)}.key.white .western,.key.black .western{display:none}.key-label{gap:2px}.key{overflow:hidden}.key.white .sargam{font-size:.7rem}.play-btn{width:54px;height:54px}.play-row{right:14px;bottom:14px}.gate-button{font-size:1.2rem;padding:14px 32px}.topbar-actions{gap:8px}.teach-metrics{display:grid;grid-template-columns:repeat(2,auto);gap:5px 12px;order:1;width:100%}.teach-metrics span{display:flex;gap:4px}.teach-start{order:2;min-width:94px;padding-inline:12px}.teach-actions .mode-switch{order:2}.teach-keyboard-shell .keyboard{height:clamp(170px,27vh,230px)}.teach-keyboard-shell .key-label{display:none}}