:root{color-scheme:dark;font-family:ui-monospace,"Cascadia Code","Courier New",monospace;color:#fff6fc;background:#111029;--mint:#9bffef;--pink:#ff9ce3;--muted:#d0c4e6}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);isolation:isolate}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fff49a;outline-offset:6px}button{font:inherit}a{text-decoration:none}[hidden]{display:none!important}
.arcade-scene{position:fixed;inset:0;z-index:-3;background:linear-gradient(100deg,#100e28e8 5%,#120e2bbd 47%,#100c25c9),linear-gradient(0deg,#110e29 1%,transparent 70%),url("coda_arcade_world_clean.png?v=floor-63") center 52%/cover no-repeat;image-rendering:pixelated}
.arcade-grid{position:fixed;inset:auto -20% -22vh;height:45vh;z-index:-2;pointer-events:none;background:linear-gradient(#ea8aff30 1px,transparent 1px),linear-gradient(90deg,#a876ff30 1px,transparent 1px);background-size:64px 64px;transform:perspective(360px) rotateX(56deg);mask-image:linear-gradient(transparent,#000);opacity:.55}
.title-header,.title-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(1250px,100%);margin-inline:auto;padding:26px 38px}.title-brand{font-size:13px;font-weight:800;letter-spacing:2px;color:#dbfef9;min-height:44px;display:flex;align-items:center;gap:12px}.title-brand>span{font-size:30px;color:var(--mint);text-shadow:0 0 18px #70e4ef80}#titleMotion{min-height:44px;border:1px solid #a48bc268;border-radius:7px;padding:10px 13px;background:#211b3bc9;color:#e6d7f5;font-size:12px;cursor:pointer}#titleMotion:disabled{cursor:default;opacity:.8}
.title-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);align-items:center;gap:clamp(30px,6vw,90px);width:min(1190px,100%);margin:auto;padding:30px 38px 45px}.title-eyebrow{font-size:10px;font-weight:bold;letter-spacing:2.3px;color:#d4c1e6;margin:0 0 28px;line-height:1.8}.title-eyebrow>span{color:#f7d98e;margin-right:5px}h1{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-weight:900;line-height:.92;letter-spacing:2px}.title-the{font-size:15px;letter-spacing:12px;margin:0 0 18px 6px;color:#d2fdf8}.title-coda{font-size:clamp(88px,10.5vw,143px);color:#f9eaff;text-shadow:4px 4px 0 #7745a7,-2px -2px 0 #fff,0 0 32px #dd81f342;letter-spacing:3px}.title-arcade{font-size:clamp(52px,6.4vw,86px);color:var(--mint);letter-spacing:1px;text-shadow:3px 3px 0 #236a82,0 0 28px #76f9e64d;margin-top:12px}.title-tagline{font:18px/1.7 system-ui,sans-serif;color:#f0e4f6;margin:30px 0}.title-adventures{display:flex;gap:26px;flex-wrap:wrap;font-size:12px;font-weight:bold;color:#d2c6e2}.title-adventures>span{display:flex;align-items:center;gap:8px}.title-adventures b{color:#f7b1e8;font-size:21px;font-weight:normal}
.start-panel{position:relative;min-width:0;border:1px solid #b99afc91;border-top:3px solid #d6b1ff;border-radius:13px;padding:26px 26px 0;background:linear-gradient(155deg,#302244f2,#161c38f5 78%);box-shadow:0 18px 0 -10px #08091e,0 28px 55px #07071b80,0 0 35px #b97bf012;overflow:hidden}.panel-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;font-weight:bold;letter-spacing:1.4px;color:#c7aee2}.panel-topline i{display:block;width:5px;height:5px;background:var(--pink);box-shadow:0 0 9px #ed83d9}.panel-note{display:block;font-size:41px;color:var(--mint);text-align:center;margin:20px 0 10px;text-shadow:0 0 18px #8bffe55e;animation:note-float 4s ease-in-out infinite}h2{font-family:system-ui,sans-serif;font-size:34px;text-align:center;margin:0 0 7px;letter-spacing:-.6px}.start-greeting{font:14px/1.5 system-ui,sans-serif;text-align:center;color:var(--muted);margin:0 0 25px;min-height:21px}.start-actions{display:grid;gap:13px}.start-button{display:flex;align-items:center;gap:13px;min-height:79px;padding:15px 17px;border:1px solid #a88ab3a1;border-radius:8px;background:#392b4e;color:#fdf0ff;box-shadow:0 4px 0 #0e0e24;transition:transform .15s,background .15s,border-color .15s}.start-button .button-icon{display:grid;place-items:center;flex:0 0 27px;font-size:23px;color:#e6bbfd}.start-button>span:nth-child(2){flex:1;min-width:0}.start-button strong{display:block;font:750 18px/1.25 system-ui,sans-serif}.start-button small{display:block;font:12px/1.5 system-ui,sans-serif;color:#d3c2e0;margin-top:3px}.start-button>b{font-size:23px;font-weight:400}.start-button.is-primary{border-color:#b3fff0;background:linear-gradient(130deg,#b9fff0,#83d9e3);color:#18283f;box-shadow:0 4px 0 #246b7a,0 0 21px #a0ffec14}.start-button.is-primary small{color:#2b5363}.start-button.is-primary .button-icon{color:#256276}.start-button.is-unavailable{opacity:.6}.start-button:hover{transform:translateY(-2px);border-color:#e8c3ff;background:#4a365d}.start-button.is-primary:hover{background:#cafff4;border-color:#e6fff9}.start-button:active{transform:translateY(2px);box-shadow:0 1px 0 #0e0e24}.start-button.is-unavailable:hover{transform:none;background:#392b4e}.start-hint{font:12px/1.6 system-ui,sans-serif;color:#c9bddb;text-align:center;margin:18px 0 12px}.teacher-link{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;font-size:12px;font-weight:bold;color:#e2c8f6;margin-bottom:18px}.teacher-link:hover{color:#fff;text-decoration:underline}.teacher-link>span:first-child{font-size:20px}.panel-bottomline{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #b196d336;padding:14px 0;color:#ad9cc6;font-size:8px;letter-spacing:1.4px}
.title-footer{font-size:10px;color:#c6b7d6;letter-spacing:.3px;padding-top:18px;padding-bottom:22px}.title-footer>a{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 0}.title-footer>a:hover{color:var(--mint);text-decoration:underline}.script-notice{margin:0;padding:15px;text-align:center;background:#30213e;font:15px/1.5 system-ui}.motion-off *{animation:none!important;transition:none!important}
@keyframes note-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:760px){.title-header{padding:14px 20px;gap:12px}.title-brand{font-size:11px;letter-spacing:1px;gap:8px}#titleMotion{font-size:11px;padding:9px}.title-stage{grid-template-columns:1fr;gap:30px;padding:10px 22px 18px;width:min(480px,100%)}.title-intro{text-align:center}.title-eyebrow{font-size:8px;letter-spacing:1.7px;margin-bottom:15px}h1{align-items:center}.title-the{font-size:11px;letter-spacing:9px;margin:0 0 10px 9px}.title-coda{font-size:82px}.title-arcade{font-size:51px;margin-top:8px}.title-tagline{font-size:16px;line-height:1.45;margin:18px 0 0}.title-adventures{display:none}.start-panel{padding:20px 20px 0}.panel-note{display:none}h2{font-size:29px;margin-top:18px}.start-greeting{margin-bottom:20px;font-size:13px}.start-button{min-height:76px}.start-hint{margin-top:16px}.teacher-link{margin-bottom:12px}.title-footer{padding:10px 22px 14px;font-size:9px}.arcade-scene{background-position:center,center,57% center}.arcade-grid{display:none}}
@media(min-width:761px) and (max-height:690px){.title-header{padding-block:12px}.title-stage{padding-block:14px;gap:35px}.title-eyebrow{margin-bottom:18px}.title-coda{font-size:104px}.title-arcade{font-size:64px}.title-tagline{margin:22px 0}.panel-note{font-size:28px;margin:10px 0 6px}.start-panel{padding-top:20px}h2{font-size:29px}.start-greeting{margin-bottom:20px}.start-button{min-height:70px}.title-footer{padding-block:8px}}
@media(max-width:760px) and (max-height:760px){.title-eyebrow,.title-tagline{display:none}.title-stage{gap:22px}.title-coda{font-size:66px}.title-arcade{font-size:41px}.title-header{padding-block:8px}.title-the{font-size:9px}.start-panel{padding-top:15px}h2{margin-top:13px;font-size:27px}.start-greeting{margin-bottom:16px}.start-button{min-height:70px}.start-hint{margin:14px 0 5px}.teacher-link{margin-bottom:8px}.panel-bottomline{padding-block:10px}.title-footer{padding-block:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.guest-button.is-primary{order:-1}
@media(max-width:760px){.title-eyebrow,.panel-bottomline{display:none}.title-stage{gap:24px}}
@media(max-height:500px) and (min-width:600px){.title-header{padding:4px 22px}.title-stage{grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:26px;padding:8px 22px;width:min(1000px,100%)}.title-intro{text-align:left}h1{align-items:flex-start}.title-coda{font-size:70px}.title-arcade{font-size:43px;margin-top:9px}.title-the,.title-eyebrow,.title-tagline,.title-adventures,.panel-note,.panel-topline,.panel-bottomline,.start-greeting{display:none}.start-panel{padding:14px 17px 8px}h2{font-size:23px;margin:0 0 12px}.start-actions{gap:10px}.start-button{min-height:62px;padding:10px 13px}.start-button strong{font-size:16px}.start-button small{font-size:11px;margin-top:1px}.start-hint{font-size:11px;line-height:1.4;margin:10px 0 2px}.teacher-link{min-height:44px;margin:0}.title-footer{padding:0 22px;font-size:9px}.arcade-grid{display:none}}
@media(max-width:360px){.start-button{gap:9px;padding-inline:12px}.start-button .button-icon{flex-basis:22px;font-size:20px}.start-button strong{font-size:16px}.start-button small{font-size:11px}}
@media(max-height:640px) and (max-width:599px){.title-header{padding:4px 16px}.title-stage{gap:16px;padding:6px 16px 12px}.title-the,.panel-topline,.start-greeting{display:none}.title-coda{font-size:48px}.title-arcade{font-size:30px}.start-panel{padding:14px 16px 0}h2{font-size:25px;margin:0 0 12px}.start-actions{gap:10px}.start-button{min-height:68px}.start-hint{font-size:11px;line-height:1.4;margin:12px 0 5px}.teacher-link{min-height:44px;margin-bottom:8px}.title-footer{padding:0 16px}}