:root{color:#181510;background:#efe8dc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,select{font:inherit}button{align-items:center;background:#181510;border:1px solid #181510;border-radius:8px;color:#fffaf0;cursor:pointer;display:inline-flex;gap:8px;min-height:40px;padding:0 14px}button:disabled{background:#cfc5b6;border-color:#cfc5b6;color:#786f62;cursor:not-allowed}select{background:#fffaf0;border:1px solid #c8baa7;border-radius:8px;color:#181510;min-height:40px;padding:0 12px}.app-shell{display:grid;grid-template-rows:auto 1fr;min-height:100vh;padding:18px;row-gap:14px}.topbar{align-items:center;display:flex;gap:18px;justify-content:space-between}.topbar h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(26px,3vw,42px);font-weight:700;letter-spacing:0;line-height:1;margin:0}.topbar-controls{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.instrument{display:grid;grid-template-rows:minmax(430px,1fr) auto;gap:12px;min-height:0}.camera-stage{background:#11100e;border:1px solid #241f19;border-radius:8px;min-height:430px;overflow:hidden;position:relative}.camera-stage:after{background:radial-gradient(circle at 50% 42%,#fffaf029,#fffaf008 34%,#11100e00 70%),linear-gradient(180deg,rgba(255,250,240,.06),transparent);content:"";inset:0;pointer-events:none;position:absolute}.camera-video,.hand-overlay{height:100%;inset:0;object-fit:cover;position:absolute;transform:scaleX(-1);width:100%}.hand-overlay{z-index:2}.velocity-rail{align-items:center;background:linear-gradient(180deg,#ffe29a,#b6d6e9 52%,#263241);bottom:0;color:#17130e;display:flex;flex-direction:column;font-size:10px;font-weight:800;justify-content:space-between;left:0;letter-spacing:.04em;padding:14px 0;position:absolute;top:0;width:34px;z-index:4}.velocity-rail span{writing-mode:vertical-rl}.velocity-rail span:last-child{color:#fffaf0;transform:rotate(180deg)}.pitch-rail{align-items:stretch;background:#161412;bottom:0;color:#17130e;display:flex;left:34px;padding:0;position:absolute;right:0;height:56px;z-index:4}.piano-roll{display:grid;grid-template-columns:repeat(46,minmax(3px,1fr));height:100%;width:100%}.piano-key{border-left:1px solid rgba(24,21,16,.42);min-width:0;position:relative}.piano-key.white{background:linear-gradient(180deg,#fffaf0eb,#d6cfc1e0)}.piano-key.black{background:linear-gradient(180deg,#171410fa,#302b24fa);border-left-color:#fffaf02e}.piano-key.labeled:after{bottom:4px;color:#181510c7;content:attr(data-label);font-size:9px;font-weight:800;left:50%;letter-spacing:0;line-height:1;position:absolute;transform:translate(-50%);white-space:nowrap}.piano-key.black.labeled:after{color:#fffaf0e6}.piano-cursor{background:#ffe29a;border:2px solid rgba(17,16,14,.88);border-radius:999px;bottom:9px;box-shadow:0 0 0 4px #ffe29a38,0 8px 20px #00000061;height:20px;pointer-events:none;position:absolute;transform:translate(-50%);transition:left 90ms linear,opacity .12s ease;width:20px;z-index:7}.piano-cursor:before{background:linear-gradient(90deg,#ffe29a00,#ffe29a80);border-radius:999px;content:"";height:7px;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:48px}.piano-cursor.muted{opacity:.64}.stage-hud{align-items:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffaf01f;border:1px solid rgba(255,250,240,.22);border-radius:8px;color:#fffaf0;display:flex;font-size:13px;gap:9px;line-height:1;padding:10px 12px;position:absolute;z-index:6}.stage-hud.left{left:50px;top:18px}.stage-hud.right{right:18px;top:18px}.stage-hud span{align-items:center;display:inline-flex;gap:5px;white-space:nowrap}.status-dot{background:#9b9488;border-radius:999px;height:9px;width:9px}.status-dot.live{background:#35d07f;box-shadow:0 0 0 5px #35d07f24}.camera-start{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:7}.count-in{color:#fffaf0;font-family:Georgia,Times New Roman,serif;font-size:140px;font-weight:700;left:50%;line-height:1;position:absolute;text-shadow:0 14px 40px rgba(0,0,0,.45);top:50%;transform:translate(-50%,-50%);z-index:8}.stage-error{background:#fff0d6;border:1px solid #d48a2a;border-radius:8px;bottom:42px;color:#5b3200;left:50px;max-width:min(520px,calc(100% - 68px));padding:10px 12px;position:absolute;z-index:8}.chord-strip{background:#fffaf0;border:1px solid #c8baa7;border-radius:8px;display:grid;gap:8px;padding:10px}.strip-meta{color:#6f6659;display:flex;font-size:13px;justify-content:space-between}.bars{display:grid;gap:6px;grid-auto-columns:minmax(102px,1fr);grid-auto-flow:column;overflow-x:auto;padding-bottom:4px}.bar{background:#f5eddf;border:1px solid #d6c9b9;border-radius:6px;display:grid;gap:4px;min-height:74px;min-width:102px;padding:7px}.bar.active{background:#ffe9a8;border-color:#c7761b;box-shadow:0 0 0 2px #c7761b2e}.bar-number{color:#7f7466;font-size:11px;line-height:1}.bar-chords{align-items:center;display:flex;flex-wrap:wrap;gap:5px}.chord{color:#181510;font-family:Georgia,Times New Roman,serif;font-size:21px;font-weight:700;letter-spacing:0;line-height:1}.chord.active{color:#9f4f00}.song-progress{background:#e7ddce;border-radius:999px;height:6px;overflow:hidden}.song-progress div{background:linear-gradient(90deg,#c7761b,#1f73a8);height:100%}@media(max-width:820px){.app-shell{padding:10px}.topbar{align-items:flex-start;flex-direction:column}.topbar-controls{justify-content:flex-start}.instrument{grid-template-rows:minmax(360px,58vh) auto}.stage-hud.right{align-items:flex-end;flex-direction:column;gap:8px}.stage-hud{font-size:12px}.count-in{font-size:96px}}