@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101816;--panel:#18221f;--line:#2b3932;--mint:#c3ead3;--gold:#e9bc7b;--muted:#92a398}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#20312966,transparent 60%),var(--bg);color:#e6ece5;font-family:'DM Sans',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:1px solid var(--line);border-radius:8px;padding:11px 14px;cursor:pointer;transition:background .2s,border-color .2s}button:hover{background:#ffffff0b;border-color:#718b79}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}header{height:94px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:16px;letter-spacing:3px;font-weight:700}.mark{font-size:36px;color:var(--mint)}.by{font-size:9px;letter-spacing:1.8px;color:var(--muted);border-left:1px solid var(--line);padding-left:16px;margin-left:8px}nav{display:flex;gap:12px}nav button{border:0;font-size:12px;color:#b7c6ba}nav button span{margin-left:8px}main{max-width:1500px;margin:auto;padding:0 5%}.intro{display:flex;justify-content:space-between;align-items:end;padding:46px 0 36px}.eyebrow,.section-label{font-size:10px;letter-spacing:1.7px;color:var(--muted);font-weight:600}.dot{display:inline-block;width:5px;height:5px;background:var(--mint);border-radius:50%;margin-right:8px}h1{font:500 clamp(32px,3.6vw,54px)/1.2 'Manrope',sans-serif;letter-spacing:-2px;margin:17px 0 12px}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--mint)}.intro p{font-size:13px;color:var(--muted);margin:0}.mode{display:flex;padding:4px;border:1px solid var(--line);border-radius:9px;gap:4px}.mode button{border:0;font-size:12px;padding:10px 17px}.mode button.active{background:#314439;color:#d7eedc}.mode span{margin-left:12px}.workspace{display:grid;grid-template-columns:170px minmax(0,1fr) 218px;gap:28px;align-items:start}aside{padding-top:6px}.section-label{display:flex;justify-content:space-between;margin-bottom:21px}.section-label span{font-size:9px;color:#637c6b}#levels{display:grid;gap:6px}#levels button{text-align:left;display:flex;align-items:center;gap:13px;border-color:transparent;padding:13px 10px;font-size:12px;color:var(--muted)}#levels button.active{background:#263a2f;border-color:#46634d;color:#dfefdf}#levels .num{font-size:10px;color:#819887}#levels .done{margin-left:auto;color:var(--mint)}.aside-note{border-top:1px solid var(--line);margin-top:27px;padding-top:24px;color:var(--muted);font-size:11px;line-height:1.8}.aside-note>span{font-size:24px;color:var(--gold)}.instrument{background:#1b2822;border:1px solid #3d5042;border-radius:14px;overflow:hidden;box-shadow:0 20px 80px #0003}.board-head{display:flex;align-items:center;justify-content:space-between;padding:24px 25px;border-bottom:1px solid #324438}.board-head .eyebrow{font-size:9px;color:#9db8a4}h2{font:500 18px 'Manrope',sans-serif;margin:8px 0 0;letter-spacing:-.4px}.badge{font-size:8px;letter-spacing:1px;color:#a3b5a8;border:1px solid #52674f;border-radius:5px;padding:7px 9px}.board-wrap{background:radial-gradient(ellipse at 50% 40%,#29443388,transparent 70%),#14221b;position:relative}#board{width:100%;display:block;touch-action:manipulation}.board-caption{display:flex;justify-content:space-between;padding:0 23px 19px;color:#809989;font-size:8px;letter-spacing:1.4px}.board-caption>span:first-child{color:var(--gold)}.transport{display:flex;align-items:center;gap:10px;padding:18px 22px;border-top:1px solid #344738}.primary{background:var(--mint);color:#182b20;border:0;font-size:12px;font-weight:700;padding:14px 20px}.primary:hover{background:#e0f9e8;color:#15271c}.transport>button:not(.primary){border:0;font-size:12px;color:#aebfb2;padding:10px}.tempo{margin-left:auto;width:100px}.tempo label{font-size:8px;letter-spacing:1px;display:flex;justify-content:space-between;color:#8ca594}.tempo input{width:100%;accent-color:#bfdbc2;height:15px;margin-top:10px}.controls{padding-top:6px}.controls h3{font:500 25px/1.4 'Manrope',sans-serif;letter-spacing:-.8px;margin:0 0 12px}.controls>p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.rule{height:1px;background:var(--line);margin:24px 0}.tools{display:grid;gap:8px}.tools button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;font-size:12px;background:#17221d}.tools button.active{background:#2e4435;border-color:#9abb9d}.tools .glyph{font-size:21px;width:24px;text-align:center;color:var(--mint)}.tools small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.hint{display:flex;gap:9px;color:var(--muted);font-size:11px;line-height:1.7;margin:16px 0}.hint>span{font-size:18px;color:var(--gold)}.hint p{margin:0}#undo,#hint{width:100%;font-size:11px;margin-bottom:8px;text-align:left;border:0;padding:8px 0;color:#a6b9aa}#feedback{font-family:Georgia,serif;font-style:italic;color:#8fae98;font-size:13px;line-height:1.8;border-top:1px solid var(--line);padding-top:20px;margin-top:12px}#next{margin-top:15px;width:100%}footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:23px 0;margin-top:35px;font-size:8px;letter-spacing:1.5px;color:#7e9586}.headphones{font-size:14px;color:var(--mint);margin-left:6px}dialog{max-width:530px;width:calc(100% - 30px);background:#1b2b22;border:1px solid #607b60;border-radius:16px;color:#e6ece5;padding:35px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#07100bd9;backdrop-filter:blur(6px)}dialog h2{font-size:30px;line-height:1.3;margin:20px 0}dialog p,dialog li{font-size:13px;line-height:1.9;color:#b6c7b9}dialog ol{padding-left:20px}dialog li{padding-bottom:8px}.close{position:absolute;right:12px;top:8px;border:0;font-size:25px;padding:4px 10px}.cell{cursor:pointer;outline:none}.cell:hover .tile,.cell:focus-visible .tile{fill:#3d574344;stroke:#9cb99c}.beam{stroke:#d4efbb;stroke-width:3;fill:none;filter:url(#glow);stroke-linecap:round;pointer-events:none}.pulse{stroke:#fff5cf;stroke-width:5;stroke-dasharray:5 100;animation:travel 1.6s linear infinite;filter:url(#glow)}@keyframes travel{to{stroke-dashoffset:-210}}.ring-lit{filter:url(#glow)}@media(prefers-reduced-motion:reduce){.pulse{animation:none}*{transition:none!important}}@media(min-width:1550px){#board{max-height:610px}}@media(max-width:1100px){.workspace{grid-template-columns:130px minmax(0,1fr) 175px;gap:18px}.board-head{padding:18px}.transport{padding:15px 12px;gap:3px}.primary{padding:13px}.tempo{width:80px}.transport #reset span{display:none}.controls h3{font-size:22px}}@media(max-width:800px){header{height:75px}.by{display:none}.intro{padding-top:30px;gap:25px}.intro p{max-width:250px;line-height:1.7}.mode{flex-shrink:0}.mode button{padding:9px}.workspace{grid-template-columns:minmax(0,1fr) 180px}aside{grid-column:1/-1}.section-label{margin-bottom:12px}aside>.section-label, .aside-note{display:none}#levels{display:flex;overflow:auto;padding-bottom:6px}#levels button{flex-shrink:0;padding:10px}#levels button .name{display:none}#levels button.active .name{display:inline}footer span:last-child{display:none}}@media(max-width:560px){header{margin:0 5%;height:68px}.brand{font-size:12px;gap:7px;letter-spacing:2px}.mark{font-size:28px}nav{gap:0}nav button{font-size:10px;padding:10px 6px}#sound span{display:none}.intro{display:block;padding:26px 0 20px}h1{font-size:36px;letter-spacing:-1.6px;margin:12px 0}.intro p{max-width:none;font-size:11px}.intro .eyebrow{font-size:8px}.mode{margin-top:20px;width:max-content}.mode button{padding:9px 16px}.workspace{display:flex;flex-direction:column;gap:14px}aside,.instrument,.controls{width:100%}.board-head{padding:17px 15px}.board-head h2{font-size:16px}.badge{font-size:7px}.board-head .eyebrow{font-size:8px}.transport{padding:14px 12px}.transport .primary{font-size:11px}.tempo{width:85px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px}.controls>.section-label:first-child,.controls>h3,.controls>.rule{display:none}.controls>p{grid-column:1/-1;font-size:12px}.controls>.section-label{grid-column:1/-1;margin:3px 0 0}.tools{grid-column:1/-1;display:flex;gap:8px}.tools button{flex:1;padding:9px 8px;gap:7px;font-size:10px}.tools small{display:none}.tools .glyph{font-size:18px;width:15px}.hint,#feedback,#next{grid-column:1/-1}.hint{margin:0}#feedback{margin:0;padding-top:12px}#undo,#hint{margin:0;padding:5px}footer{font-size:7px;letter-spacing:.8px;line-height:1.6;margin-top:25px}.board-caption{font-size:7px;padding:0 15px 14px}dialog{padding:28px 24px;max-height:90dvh}}

/* Arrival-driven laser effects share the game's animation clock. */
.laser-head{fill:#fff4cb;filter:url(#glow);pointer-events:none}
.impact{fill:none;stroke:#e8f9c7;stroke-width:2;filter:url(#glow);pointer-events:none}
.cell.energized>g{filter:url(#glow)}
.cell.energized>g circle:first-child{fill:#c2f8bd28;stroke:#edffcc}
.cell.energized>g circle:nth-child(2){stroke:#edffcc;stroke-width:4}
.cell.energized>g circle:nth-child(3){fill:#f5ffd9}

#levels{max-height:570px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#506d56 transparent}
.soundscape{border-top:1px solid var(--line);padding-top:18px;margin:18px 0}
.soundscape .section-label{margin-bottom:10px}
.soundscape select{font:inherit;font-size:11px;width:100%;background:#203327;color:#d8ecdc;border:1px solid #506a54;border-radius:7px;padding:11px 8px;cursor:pointer}
.soundscape select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.volume-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--muted);margin:17px 0 7px}
#volume{width:100%;accent-color:var(--mint);height:16px;margin:0}
@media(max-width:800px){#levels{max-height:none;overflow-x:auto;overflow-y:hidden}.soundscape{grid-column:1/-1}}