:root{color-scheme:dark;--bg:#020617;--panel:#0f172a;--muted:#94a3b8;--border:#ffffff12;--text:#e2e8f0;--purple:#d946ef}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 6% 0%,#30204440,transparent 50%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #34d399;outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.shell{max-width:1440px;margin:auto;padding:0 48px}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{display:flex;gap:12px;align-items:center;font-weight:750;font-size:27px;letter-spacing:-1px}.brand-symbol{display:grid;place-items:center;width:43px;height:47px;border:1px solid #d946ef45;border-radius:13px;color:var(--purple);background:#d946ef0c;font-size:29px;transform:rotate(-7deg)}.light{font-weight:350}.brand small{display:block;font-size:8px;font-weight:600;letter-spacing:2px;color:var(--muted);margin-top:3px}nav{display:flex;gap:28px;font-size:12px;color:#a3a6bb}nav a:hover{color:var(--purple)}nav a span{margin-left:8px}main{padding-top:36px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:8px}.eyebrow>span,.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--purple)}h1{font-size:clamp(27px,3vw,42px);letter-spacing:-1.8px;font-weight:550;margin:0}em{color:var(--purple);font-style:normal}.heading>p{font-size:12px;line-height:1.9;color:var(--muted);margin:0;text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:28px;align-items:start}.instrument{background:var(--panel);border:1px solid #ffffff16;border-radius:18px;overflow:hidden;box-shadow:0 25px 70px #0003}.stage-bar{min-height:52px;padding:10px 19px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);gap:10px}.stage-title{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.25px;color:#a4a8bc}.dot.live{background:#34d399;box-shadow:0 0 10px #34d39955}.stage-bar>div{display:flex;gap:8px}.small-button{background:#ffffff05;border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:#b1b4c7;font-size:10px}.small-button:hover{background:#ffffff0c}.stage{position:relative;isolation:isolate;aspect-ratio:1.6;background:radial-gradient(ellipse at 50% 80%,#34214550,transparent 65%),#020617;overflow:hidden}.stage:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#b1bed626 .8px,transparent .8px);background-size:25px 25px;mask-image:linear-gradient(#0002,#000)}video,#visual,.camera-shade{position:absolute;width:100%;height:100%;inset:0}video{object-fit:contain;transform:scaleX(-1);opacity:.85}.camera-shade{pointer-events:none;background:linear-gradient(180deg,#0206174d,transparent 35%,transparent 65%,#020617b3);z-index:1}#visual{z-index:2;pointer-events:none}.welcome{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:radial-gradient(ellipse at 50% 45%,#020617c9,transparent 80%)}.pill{color:#b3a5d3;font-size:8px;letter-spacing:1.8px;padding:7px 11px;border:1px solid #d946ef30;border-radius:20px;background:#d946ef08;margin-bottom:16px}.welcome h2{font-size:clamp(28px,3vw,45px);font-weight:550;letter-spacing:-1.5px;line-height:1.13;margin:0 0 14px}.welcome h2 span{color:var(--purple)}.welcome p{color:#9b9eb6;font-size:12px;line-height:1.75;margin:0 0 22px}.primary{display:flex;gap:24px;align-items:center;border:0;border-radius:9px;background:#c3a5ff;padding:13px 21px;font-size:12px;font-weight:700;color:#201331;box-shadow:0 8px 28px #b898f522}.primary:hover{background:#d2bbff;transform:translateY(-1px)}.text-button{border:0;background:none;color:#aaa2bd;padding:13px 0;font-size:10px}.text-button:hover{color:#e6d6ff}.welcome small{color:#6d748c;font-size:8px;letter-spacing:.3px}.stage-watermark{position:absolute;bottom:16px;left:20px;font-size:8px;letter-spacing:1.4px;color:#9998b76b;z-index:3;pointer-events:none}.stage-watermark span{padding:0 6px}.live-help{position:absolute;top:15px;left:15px;right:15px;text-align:center;font-size:11px;color:#efebff;background:#121527b3;border:1px solid #ffffff12;backdrop-filter:blur(8px);border-radius:20px;padding:8px 12px;z-index:3;pointer-events:none}.note-display{position:absolute;bottom:18px;right:20px;z-index:3;font-weight:700;font-size:20px;letter-spacing:2px;pointer-events:none;color:#e6dbff;text-shadow:0 0 20px #d946ef}.notice{position:absolute;z-index:5;left:5%;right:5%;bottom:50px;padding:13px 16px;background:#1b1832f0;border:1px solid #b19be966;border-radius:10px;font-size:12px;line-height:1.5;text-align:center;color:#f0e9ff}.note-keys{padding:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border-top:1px solid var(--border);background:#111320}.note-key{touch-action:none;user-select:none;position:relative;overflow:hidden;min-width:0;padding:12px 5px 10px;border:1px solid color-mix(in srgb,var(--note) 22%,transparent);border-radius:10px;background:color-mix(in srgb,var(--note) 4%,#10131f);color:var(--note);transition:background .12s,box-shadow .12s,transform .12s}.note-key:after{content:"";position:absolute;height:2px;bottom:0;left:20%;right:20%;border-radius:5px;background:var(--note);opacity:.35}.note-key.active{background:color-mix(in srgb,var(--note) 20%,#171826);box-shadow:inset 0 0 20px color-mix(in srgb,var(--note) 9%,transparent),0 0 18px color-mix(in srgb,var(--note) 12%,transparent);transform:translateY(-2px)}.note-key.active:after{opacity:1;box-shadow:0 0 12px var(--note)}.key-top{display:flex;justify-content:space-between;align-items:center;margin:0 7px 6px;color:#888da8;font-size:9px}.key-top kbd{font:9px inherit;border:1px solid #ffffff14;border-radius:3px;padding:1px 4px}.note-key strong{font-size:24px;font-weight:600;letter-spacing:-.6px;display:block}.note-key small{font-size:9px;color:#9296ac;display:block;margin-top:4px}.instrument-footer{display:flex;justify-content:space-between;gap:15px;padding:11px 18px;font-size:9px;color:#7b809b;border-top:1px solid var(--border)}.instrument-footer>span:last-child{font-size:8px;letter-spacing:1px}.instrument-footer kbd,.session kbd{font-family:inherit;color:#adb0c5}.guide-top{display:flex;align-items:center;justify-content:space-between;padding:6px 0 22px}.guide-top .eyebrow{margin:0}.spark{color:var(--purple);font-size:20px}aside h2{font-size:30px;line-height:1.15;letter-spacing:-1px;font-weight:550;margin:0 0 12px}.intro{font-size:12px;line-height:1.7;color:var(--muted);margin:0}ol{list-style:none;padding:0;margin:26px 0}li{display:flex;gap:12px;margin:0 0 20px}li>span{font-size:9px;font-weight:600;border:1px solid #b99ce72b;color:#bc9be8;width:25px;height:25px;border-radius:7px;display:grid;place-items:center;flex-shrink:0}li strong{font-size:11px;font-weight:600}li p{font-size:10px;line-height:1.7;color:#94a3b8;margin:5px 0 0}.settings{padding:17px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.settings label{display:block;color:#9da1ba;font-size:8px;letter-spacing:1.3px}.settings select{display:block;width:100%;background:#171926;border:1px solid #ffffff13;color:#d0cce0;border-radius:7px;padding:10px;font-size:11px;margin-top:8px}.volume-label{margin-top:18px}.volume-label>span{display:flex;justify-content:space-between}.volume-label output{font-size:9px;letter-spacing:0}.volume-label input{width:100%;height:4px;accent-color:#d946ef;margin:14px 0 4px}.session{display:flex;flex-direction:column;align-items:stretch;padding-top:15px}.secondary{background:#d946ef0a;border:1px solid #d946ef35;border-radius:8px;padding:11px;color:#d0b9f5;font-size:11px}.privacy{display:flex;gap:10px;margin-top:11px;padding-top:15px;color:#737b94}.privacy>span{color:#7eacb5;font-size:20px}.privacy p{font-size:9px;line-height:1.7;margin:0}.privacy strong{font-weight:500;color:#a4a8bb}footer{display:flex;justify-content:space-between;gap:20px;color:#555f78;font-size:9px;margin:28px 0}footer>span:last-child{font-size:8px;letter-spacing:1px}footer .spark{font-size:12px;padding:0 8px}.stage:fullscreen,.stage.theater{aspect-ratio:auto;width:100vw;height:100dvh;background-color:#080c16}.stage.theater{position:fixed;inset:0;z-index:100;border-radius:0}.stage:fullscreen .stage-watermark,.stage.theater .stage-watermark{font-size:12px}.stage:fullscreen .live-help,.stage.theater .live-help{left:25%;right:25%}.stage:fullscreen .note-display,.stage.theater .note-display{font-size:34px;right:30px;bottom:30px}body.theater-mode{overflow:hidden}.stage.theater{cursor:default}@media(min-width:1600px){.stage{aspect-ratio:1.5}.workspace{grid-template-columns:minmax(0,1fr) 270px;gap:35px}}@media(max-width:1050px){.shell{padding:0 25px}.workspace{grid-template-columns:minmax(0,1fr) 210px;gap:22px}.stage{aspect-ratio:1.3}.welcome h2{font-size:33px}.welcome p{font-size:11px}.stage-title{font-size:8px;letter-spacing:.7px}.small-button{padding:6px}.small-button span{display:none}.stage-bar{padding:10px 12px}aside h2{font-size:27px}.note-key strong{font-size:22px}.key-top{margin:0 2px 6px}}@media(max-width:760px){.shell{padding:0 16px}header{height:82px}.brand{font-size:23px}.brand small{font-size:6px;letter-spacing:1.5px}.brand-symbol{width:36px;height:40px}nav{font-size:10px;gap:14px}nav a:first-child{display:none}main{padding-top:26px}.heading{margin-bottom:22px}.heading>p{display:none}h1{font-size:32px}.eyebrow{font-size:8px;letter-spacing:1.5px}.workspace{grid-template-columns:1fr;gap:26px}.stage{aspect-ratio:1/.96;min-height:330px}.welcome h2{font-size:35px}.welcome p{font-size:12px;margin-bottom:21px}.welcome .pill{font-size:7px}.note-keys{padding:10px;gap:6px}.note-key{padding:11px 2px}.note-key small{font-size:8px}.key-top{font-size:8px;margin:0 4px 5px}.note-key strong{font-size:24px}.instrument-footer{font-size:8px;padding:11px 12px}.instrument-footer>span:last-child{font-size:7px}.stage-watermark{font-size:7px;left:14px}.live-help{font-size:10px;top:11px}aside{padding:0 5px}.guide-top{padding-bottom:14px}aside h2{font-size:28px;line-height:1.1}aside h2 br{display:none}aside .intro{margin-top:8px}ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:23px 0}li{display:block;margin:0}li>span{margin-bottom:9px}li strong{font-size:10px}li p{font-size:9px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:20px}.volume-label{margin-top:0}.volume-label input{margin-top:25px}.session{display:grid;grid-template-columns:1fr 1fr;gap:12px}.session .text-button{padding:11px 0}.privacy{margin-top:12px}.privacy p br{display:none}footer{font-size:8px;line-height:1.6;margin:24px 0}footer>span:last-child{max-width:120px;text-align:right;font-size:7px}.stage:fullscreen .live-help,.stage.theater .live-help{left:10%;right:10%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:360px){.shell{padding:0 10px}.welcome h2{font-size:29px}.stage-bar{padding:9px}.stage-title{font-size:7px}.note-key small{font-size:7px}.live-help{font-size:9px}}
.exit-fullscreen{display:none;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:10;background:#171526e6;border-color:#d946ef55;color:#e9dfff;padding:10px 15px}.stage:fullscreen .exit-fullscreen,.stage.theater .exit-fullscreen{display:block}
/* AirSong: studio paper, dark monitor, tactile keys. */
:root{color-scheme:light;--bg:#f0efe9;--panel:#f9f8f3;--muted:#6d716a;--border:#252a2526;--text:#20251e;--purple:#535d39}body{background:var(--bg);font-family:"Arial", "Helvetica Neue",sans-serif;font-size:14px}.shell{max-width:1450px;padding:0 52px}header{height:100px;border-color:#272c2330}.brand{font-size:29px;letter-spacing:-1.6px;font-weight:800;gap:11px}.brand-symbol{background:#20251e;border:0;color:#dafa79;transform:none;border-radius:8px;width:42px;height:44px;display:flex;align-items:center;justify-content:center;gap:3px}.brand-symbol i{width:3px;background:currentColor;border-radius:3px;height:15px}.brand-symbol i:nth-child(2){height:25px}.brand-symbol i:nth-child(3){height:32px}.brand-symbol i:nth-child(4){height:21px}.brand-symbol i:nth-child(5){height:11px}.brand small{color:#72786c;font-family:monospace;font-size:8px;letter-spacing:1.2px}.light{font-weight:400}.brand-symbol+span{line-height:1}.brand-symbol+span small{margin-top:7px}nav{color:#4b5346;font-size:11px;gap:30px}nav a:last-child{border-bottom:1px solid #798170;padding-bottom:5px}nav a:hover{color:#161d11}main{padding-top:33px}.heading{margin-bottom:29px;align-items:end}.eyebrow{font-family:monospace;font-weight:400;font-size:9px;letter-spacing:1.2px;color:#69715f;margin-bottom:16px}.eyebrow>span{height:5px;width:5px;background:#5f6b4b;border-radius:0}h1{font-size:clamp(38px,4vw,58px);font-weight:600;letter-spacing:-2.7px;line-height:.97}h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:#53613b;letter-spacing:-2px}.heading>p{font-size:12px;color:#777e6f;line-height:1.65;text-align:left;padding:0 0 3px 25px;border-left:1px solid #252a2526;max-width:250px}.workspace{grid-template-columns:minmax(0,1fr) 238px;gap:32px}.instrument{border:1px solid #20261c;border-radius:12px;box-shadow:0 3px 0 #20261c0d;background:#181e1c}.stage-bar{background:#202622;border-bottom:1px solid #ffffff16;padding:10px 17px;min-height:50px}.stage-title{font-family:monospace;font-size:9px;letter-spacing:1px;color:#b9c0b4}.dot{background:#77816f;width:5px;height:5px}.dot.live{background:#dcf59c;box-shadow:none}.small-button{color:#c5ccbe;background:transparent;border-color:#ffffff26;border-radius:5px;font-size:10px;padding:6px 9px}.small-button:hover{background:#ffffff10}.stage{aspect-ratio:1.6;background:#0b1120;isolation:isolate}.stage:before{background-image:linear-gradient(#aabb9d08 1px,transparent 1px),linear-gradient(90deg,#aabb9d08 1px,transparent 1px);background-size:48px 48px;mask-image:none;z-index:0}video{opacity:.8}.camera-shade{background:linear-gradient(0deg,#0b1120b0,transparent 25%,transparent 80%,#0b112060);z-index:1}.welcome{background:radial-gradient(ellipse at 50% 45%,#0b1120e6,#0b112050 75%);color:#f2f4e9;padding:25px}.pill{font-family:monospace;font-size:8px;color:#a3b194;letter-spacing:1.6px;border:0;border-radius:0;background:none;padding:0;margin-bottom:20px}.welcome h2{font-size:clamp(30px,3vw,46px);font-weight:500;line-height:1.12;letter-spacing:-1.8px;margin-bottom:17px}.welcome h2 span{color:#d7efad;font-family:Georgia,serif;font-weight:400;font-style:italic}.welcome p{color:#a7b09f;font-size:12px;line-height:1.75;margin-bottom:25px}.primary{background:#dcf59c;color:#252d1d;border-radius:6px;padding:13px 22px;box-shadow:0 3px 0 #0a1008;font-size:12px;font-weight:600;gap:28px}.primary:hover{background:#e6ffad;transform:none}.text-button{color:#5e684f;font-size:10px}.text-button:hover{color:#20251e}.welcome .text-button{color:#c5cebc;margin-top:2px}.welcome .text-button:hover{color:white}.welcome small{color:#737f6c;font-family:monospace;font-size:8px;letter-spacing:0}.stage-watermark{font-family:monospace;color:#b8c8a66b;font-size:8px;letter-spacing:1px}.live-help{border-radius:5px;left:18%;right:18%;font-family:monospace;font-size:10px;background:#1b241dd9;border-color:#c8dcb322;color:#dae5cd;backdrop-filter:blur(8px)}.note-display{font-family:monospace;color:#e2efca;text-shadow:none;font-size:19px;letter-spacing:1px}.notice{color:#ecf2dd;background:#263121f5;border-color:#a7bc89;border-radius:6px;font-size:12px}.note-keys{background:#eceee5;gap:8px;padding:13px;border-top:1px solid #20261c}.note-key{color:#263026;background:#fafbf5;border:1px solid #aeb6a1;border-radius:7px;padding:10px 5px 13px;box-shadow:0 3px 0 #b6bfaa;transition:transform .09s,background .09s,box-shadow .09s}.note-key:after{height:3px;left:12%;right:12%;bottom:5px;background:var(--note);opacity:1;border:1px solid #0000000a;box-shadow:none}.note-key.active{background:var(--note);box-shadow:0 1px 0 #8c9a80;transform:translateY(2px);border-color:#536747}.note-key.active:after{background:#25301d;box-shadow:none}.key-top{color:#8a9281;font-family:monospace;font-size:9px;margin-bottom:8px}.key-top kbd{border:1px solid #c0c8b5;color:#667459;border-radius:3px;padding:1px 4px}.note-key.active .key-top{color:#31432b}.note-key strong{font-size:26px;font-weight:500;letter-spacing:-1px}.note-key small{color:#737e67;font-size:9px;margin-top:3px}.note-key.active small{color:#35432e}.instrument-footer{background:#e5e8db;border-color:#c5ccb9;color:#647057;font-family:monospace;font-size:8px;padding:12px 15px}.instrument-footer kbd,.session kbd{color:#50613d}aside{padding:0}.guide-top{padding:5px 0 24px;border-bottom:1px solid #222c1b30;margin-bottom:22px}.guide-top .eyebrow{color:#707764;font-size:9px;margin:0}.spark{color:#637246;font-size:18px}aside h2{font-size:32px;letter-spacing:-1.4px;font-weight:500;line-height:1.08;margin-bottom:12px}aside h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#56663b}.intro{color:#78816d;font-size:11px;line-height:1.7}ol{margin:24px 0 20px}li{gap:12px;margin-bottom:19px}li>span{border:0;border-radius:0;width:18px;height:20px;font-family:monospace;font-size:10px;display:block;color:#97a188;padding-top:2px}li strong{font-size:11px;font-weight:600}li p{font-size:10px;color:#78816e;line-height:1.65;margin-top:5px}.settings{border-color:#252a252b;padding:16px 0}.settings label{color:#727d62;font-family:monospace;font-size:8px;letter-spacing:1px}.settings select{color:#35422b;background:#e6e9de;border-color:#b7c1a7;border-radius:5px;font-size:11px;padding:10px}.volume-label{margin-top:16px}.volume-label input{accent-color:#4a6031;margin-top:15px;height:3px}.secondary{border-radius:5px;background:#e4e9d8;color:#465934;border-color:#b0bf9c;font-size:10px;padding:11px}.secondary:hover{background:#dce4cb}.session{padding-top:12px}.session .text-button{font-size:9px}.privacy{border-top:1px solid #252a2526;margin-top:7px;padding-top:16px;gap:10px}.privacy>span{color:#879575}.privacy p{color:#89917f;font-size:9px}.privacy strong{color:#59694a}footer{color:#89927e;font-family:monospace;font-size:8px;margin:24px 0}footer>span:last-child{font-size:8px;letter-spacing:.5px}footer .spark{font-size:12px}.exit-fullscreen{color:#e7eedc;background:#202b1ef2;border-color:#a1b38666;border-radius:5px}.stage:fullscreen,.stage.theater{background:#0b1120}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 260px;gap:36px}.stage{aspect-ratio:1.55}}
@media(max-width:1100px){.shell{padding:0 28px}.workspace{grid-template-columns:minmax(0,1fr) 210px;gap:24px}.stage{aspect-ratio:1.32}.welcome h2{font-size:36px}.live-help{left:5%;right:5%;font-size:9px}.stage-title{font-size:8px;letter-spacing:.4px}.small-button{font-size:9px;padding:6px}.small-button span{display:none}.stage-bar{padding:10px 12px}aside h2{font-size:29px}.note-key strong{font-size:24px}.key-top{margin:0 3px 7px}}
@media(max-width:760px){.shell{padding:0 16px}header{height:83px}.brand{font-size:26px}.brand-symbol{width:36px;height:40px}.brand small{font-size:7px;letter-spacing:.8px}nav{font-size:10px}main{padding-top:27px}.heading{margin-bottom:24px}.heading>p{display:none}h1{font-size:43px;letter-spacing:-2px}.eyebrow{font-size:8px;margin-bottom:14px}.workspace{grid-template-columns:1fr;gap:27px}.stage{aspect-ratio:1/.98;min-height:330px}.welcome h2{font-size:36px;letter-spacing:-1.5px}.welcome .pill{font-size:7px;margin-bottom:21px}.welcome p{font-size:11px}.note-keys{padding:11px 9px 13px;gap:6px}.note-key{padding:10px 2px 12px}.note-key strong{font-size:24px}.note-key small{font-size:8px}.key-top{font-size:8px;margin:0 4px 7px}.instrument-footer{font-size:7px;padding:12px 10px;gap:7px}.instrument-footer>span:last-child{font-size:7px;letter-spacing:0;white-space:nowrap}.stage-watermark{font-size:7px;left:13px;bottom:14px}.live-help{font-size:9px;left:4%;right:4%;top:12px}.note-display{font-size:15px;right:13px;bottom:15px}aside{padding:0 5px}.guide-top{padding-bottom:13px;margin-bottom:17px}.guide-top .eyebrow{font-size:8px}aside h2{font-size:29px}aside h2 br{display:none}.intro{font-size:11px;margin-top:8px}ol{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:22px 0}li{display:block;margin:0}li>span{margin-bottom:7px}li strong{font-size:10px}li p{font-size:9px;line-height:1.6}.settings{display:grid;grid-template-columns:1fr 1fr;gap:20px}.volume-label{margin-top:0}.volume-label input{margin-top:25px}.session{display:grid;grid-template-columns:1fr 1fr;gap:12px}.session .text-button{padding:11px 0}.privacy{margin-top:12px}.privacy p br{display:none}footer{font-size:7px;line-height:1.6;margin:22px 0}footer>span:last-child{max-width:120px;text-align:right;font-size:7px}.stage:fullscreen .live-help,.stage.theater .live-help{left:5%;right:5%}}
@media(max-width:360px){.shell{padding:0 11px}.welcome h2{font-size:30px}.note-key small{font-size:7px}.stage-bar{padding:9px}.stage-title{font-size:7px}.instrument-footer{font-size:6px}.instrument-footer>span:last-child{font-size:6px}}
.hand-bank-labels{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:13px 15px 0;background:#eceee5;border-top:1px solid #20261c;font:8px monospace;letter-spacing:.7px;color:#738163}.note-keys{grid-template-columns:repeat(10,minmax(0,1fr));border-top:0;gap:5px;padding-top:9px}.note-key:nth-child(6){margin-left:5px}.note-key strong{font-size:21px}.note-key small{font-size:8px}.key-top{font-size:7px;margin:0 2px 6px}.key-top kbd{padding:0 3px}.note-key{padding:8px 2px 13px}.piano-details{background:#e5e8db;color:#4d6040;border-top:1px solid #c5ccb9}.piano-details summary{cursor:pointer;padding:13px 15px;font-size:10px;list-style-position:inside}.piano-details summary span{float:right;color:#7a896c;font:8px monospace;padding-top:2px}.piano-details p{font:8px monospace;color:#7a896c;padding:0 15px 10px;margin:0}.piano-scroll{overflow-x:auto;margin:0 12px 10px;padding:8px 0;background:#c6ceba;scrollbar-color:#7f9464 #d5deca;scrollbar-width:thin}.piano{position:relative;min-width:660px;height:128px}.piano-key{position:absolute;top:0;touch-action:none;user-select:none;cursor:pointer;border-radius:0 0 5px 5px;font:10px monospace;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding-bottom:10px}.piano-key.white{height:100%;width:6.6667%;border:1px solid #99a78b;background:#fafcf4;color:#566548;box-shadow:inset 0 -5px #e1e7d8;z-index:1}.piano-key.black{height:63%;width:4.1%;border:1px solid #10180f;background:#263120;color:#d0dfbf;box-shadow:inset 0 -4px #152010;z-index:2;font-size:8px}.piano-key kbd{font:8px monospace;color:inherit;opacity:.65}.piano-key.active{background:var(--note);box-shadow:inset 0 -2px #62714e;color:#24321b}.settings>label+label{margin-top:14px}.note-display{max-width:80%;font-size:16px;text-align:right}.settings{padding-top:14px}@media(max-width:1100px){.note-key strong{font-size:17px}.note-key small{font-size:6px}.key-top{font-size:6px}.key-top kbd{font-size:7px}.hand-bank-labels{font-size:7px;letter-spacing:0}.note-keys{gap:3px;padding:9px}.note-display{font-size:13px}}@media(max-width:760px){.hand-bank-labels{display:none}.note-keys{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:11px 10px 14px}.note-key:nth-child(6){margin-left:0}.note-key:nth-child(n+6){border-top:2px solid #6d7d59}.note-key strong{font-size:23px}.note-key small{font-size:8px}.key-top{font-size:8px;margin:0 4px 6px}.note-key{padding:8px 2px 12px}.settings{grid-template-columns:1fr 1fr;gap:14px}.settings>label+label{margin-top:0}.volume-label{grid-column:1/-1}.volume-label input{margin-top:15px}.piano-details summary{font-size:9px}.piano-details summary span{font-size:7px}.piano-details p{font-size:7px;line-height:1.6}.note-display{font-size:12px}}
/* mobile: centralização, sem rolagem lateral, botão da câmera no topo */
.mobile-start{display:none}
@media (max-width:760px){
html,body{overflow-x:hidden;max-width:100%}
.shell{padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right))}
main{padding-top:18px}
.heading{flex-direction:column;align-items:center;text-align:center;margin-bottom:14px}.heading>p{display:none}.heading .eyebrow{justify-content:center}
.workspace{display:flex;flex-direction:column;gap:20px;width:100%}
.instrument,aside{width:100%;min-width:0;max-width:100%;margin:0 auto}
.stage-bar{flex-wrap:wrap;justify-content:center;padding:10px 12px}.stage-bar>div{flex-wrap:wrap;justify-content:center}
.stage{aspect-ratio:3/4;width:100%}
video{object-fit:cover;object-position:center}
.welcome{padding:16px}.welcome #start{display:none}
.note-keys{padding:10px;gap:6px;justify-content:center}.note-key strong{font-size:19px}.key-top{margin:0 3px 4px}
.instrument-footer{flex-wrap:wrap;justify-content:center;text-align:center}
.mobile-start{display:flex;justify-content:center;width:100%;margin:0 0 16px;padding:16px;font-size:15px}
body.cam-on .mobile-start{display:none}
}
@media (max-width:760px){ol{display:block!important}li{width:auto!important}}
/* aurora boreal animada: só transform/opacity, atrás do conteúdo */
html{background:#020617}
body{background-color:transparent!important;position:relative;isolation:isolate}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;inset:-30% -40%;will-change:transform,opacity;filter:blur(60px);opacity:.55}
body::before{background:radial-gradient(40% 22% at 30% 30%,#22d3ee55,transparent 70%),radial-gradient(35% 18% at 65% 25%,#34d39950,transparent 70%),radial-gradient(30% 20% at 50% 45%,#a78bfa45,transparent 70%);animation:aurora-a 26s ease-in-out infinite alternate}
body::after{background:radial-gradient(38% 16% at 40% 60%,#f472b640,transparent 70%),radial-gradient(42% 20% at 70% 50%,#8b5cf645,transparent 70%),radial-gradient(30% 14% at 20% 55%,#2dd4bf40,transparent 70%);animation:aurora-b 34s ease-in-out infinite alternate}
@keyframes aurora-a{0%{transform:translate3d(-6%,0,0) rotate(-6deg) scaleY(.9);opacity:.45}50%{opacity:.7}100%{transform:translate3d(8%,4%,0) rotate(5deg) scaleY(1.1);opacity:.5}}
@keyframes aurora-b{0%{transform:translate3d(7%,3%,0) rotate(4deg);opacity:.35}50%{opacity:.6}100%{transform:translate3d(-8%,-3%,0) rotate(-5deg);opacity:.45}}
body.cam-on::before,body.cam-on::after{animation-play-state:paused;opacity:.3}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
@media (max-width:760px){body::before,body::after{filter:blur(40px)}}
@media (max-width:760px){
.stage{aspect-ratio:4/5}
.note-keys{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px 8px;width:100%;box-sizing:border-box}
.note-key{padding:8px 2px 7px;min-width:0}
.note-key strong{font-size:clamp(15px,4.6vw,20px)}
.note-key small{font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key-top{margin:0 2px 4px;font-size:8px}
header{flex-wrap:wrap;height:auto;padding:12px 0;gap:8px}
}
/* Como tocar: nota musical grande e animada; passos empilhados no celular */
.guide-top .spark{font-size:46px;line-height:1;display:inline-block;background:linear-gradient(135deg,#22d3ee,#a78bfa 45%,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 0 10px #d946ef99);animation:note-bob 3.2s ease-in-out infinite,note-glow 2.4s ease-in-out infinite;will-change:transform}
@keyframes note-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes note-glow{0%,100%{filter:drop-shadow(0 0 6px #d946ef80)}50%{filter:drop-shadow(0 0 18px #22d3eecc)}}
@media (prefers-reduced-motion:reduce){.guide-top .spark{animation:none}}
@media (max-width:760px){
.guide-top .spark{font-size:54px}
aside ol{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;gap:6px!important}
aside ol li{display:flex!important;flex-direction:row!important;width:100%!important;align-items:flex-start;gap:14px}
aside ol li>span{flex:0 0 auto}
aside ol li>div{flex:1 1 auto;min-width:0}
}
/* 3D fx */
.fx3d{position:fixed;inset:0;pointer-events:none;z-index:-1;perspective:900px;overflow:hidden}
.fx3d i{position:absolute;display:block;transform-style:preserve-3d;animation:fx-spin var(--d,26s) linear infinite,fx-float 9s ease-in-out infinite alternate;opacity:.55;will-change:transform}
.fx3d i::before,.fx3d i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;border:inherit}
.fx3d i::before{transform:translateZ(-10px);filter:brightness(.6)}
.fx3d i::after{background:linear-gradient(135deg,#fff6,#fff0 45%);border:0}
@keyframes fx-spin{from{transform:rotateX(18deg) rotateY(0) rotateZ(var(--z,0deg))}to{transform:rotateX(18deg) rotateY(360deg) rotateZ(var(--z,0deg))}}
@keyframes fx-float{from{translate:0 -14px}to{translate:0 14px}}
body.cam-on .fx3d{opacity:.25}body.cam-on .fx3d i{animation-play-state:paused}
@media (max-width:760px){.fx3d i:nth-child(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.fx3d i{animation:none}.tilt3d{transform:none!important}}
.tilt3d{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.primary-button,.mobile-start,.btn3d{position:relative;transform:perspective(500px) translateZ(0);transition:transform .18s,box-shadow .18s;box-shadow:0 1px 0 #ffffff55 inset,0 -3px 0 #0003 inset,0 4px 0 #0000004d,0 10px 24px #0006}
.primary-button::after,.mobile-start::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:42%;border-radius:999px;background:linear-gradient(#fff5,#fff0);pointer-events:none}
.primary-button:hover:not(:disabled),.mobile-start:hover{transform:perspective(500px) rotateX(8deg) translateY(-2px)}
.primary-button:active,.mobile-start:active{transform:perspective(500px) rotateX(-4deg) translateY(2px);box-shadow:0 1px 0 #fff5 inset,0 1px 0 #0000004d,0 4px 10px #0006}
@media (prefers-reduced-motion:reduce){.primary-button,.mobile-start{transition:none}}
button.primary,.primary{position:relative;background:linear-gradient(135deg,#f0a6ff,#d36cf5)!important;color:#1a0b24!important;border:1px solid #ffffff55;border-radius:999px;font-weight:800;transform:perspective(500px) translateZ(0);transition:transform .18s,box-shadow .18s;box-shadow:0 1px 0 #ffffff66 inset,0 -3px 0 #0003 inset,0 4px 0 #0000004d,0 10px 24px #d36cf555!important}
.primary::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:42%;border-radius:999px;background:linear-gradient(#fff6,#fff0);pointer-events:none}
.primary:hover:not(:disabled){transform:perspective(500px) rotateX(8deg) translateY(-2px)}
.primary:active{transform:perspective(500px) rotateX(-4deg) translateY(2px);box-shadow:0 1px 0 #fff5 inset,0 1px 0 #0000004d,0 4px 10px #0006!important}
.primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.primary{transition:none}}