:root{--bg:#101d23;--panel:#1b2b30;--line:#344c4e;--gold:#dacb96;--muted:#a3b9b8}
.school-brand{font-family:serif;font-size:28px;line-height:48px;width:51px;height:51px}
.intro h2.school-title{font-family:'Noto Sans JP',sans-serif;font-size:clamp(44px,6vw,76px);font-weight:400;letter-spacing:12px;margin:4px 0 15px}
.intro .eyebrow{color:#e6d39c}.intro{background:linear-gradient(#0a272f35,#07171be8)}
.chapter-link{display:block;color:var(--gold);font-size:13px;text-decoration:none;margin:15px 0;padding:12px 0;border-top:1px solid var(--line)}.chapter-link:hover{color:white}
.chalk-clue{padding:25px 20px;background:#193d38;border:8px solid #5c5441;color:#e4e2bb}.chalk-caption{text-align:center;border-bottom:2px solid #bac4a4;padding-bottom:8px;max-width:220px;margin:auto}
.seat-grid{max-width:260px;display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:22px auto 5px}.seat-grid span{aspect-ratio:1.3;display:grid;place-items:center;border:1px solid #c4c8ae;font:30px Georgia;position:relative}.seat-grid small{position:absolute;bottom:0;left:8px;font-size:16px}
.music-diagram{width:100%;display:block;background:#182d30;border:1px solid #526966;margin:22px auto}.piano-keys{display:flex;gap:2px;margin:20px 0 25px;background:#101819;padding:8px 6px 5px;border:1px solid #5a6865}.piano-keys button{flex:1;min-width:0;height:155px;display:flex;align-items:flex-end;justify-content:center;border-radius:0 0 4px 4px;background:#ebe9d6;color:#223536;border:1px solid #c4c2b2;box-shadow:inset 0 -6px #bebea9;font:18px Georgia;padding:10px 0 20px}.piano-keys button:active{background:#d4bb7b;transform:translateY(3px)}.note-sequence{text-align:center;font:29px monospace;letter-spacing:8px;min-height:42px;padding-top:20px}
.tempo-input{display:flex;flex-direction:column;align-items:center;gap:17px;margin:25px 0;color:var(--gold)}.tempo-input input{width:155px;font:42px monospace;background:#102227;color:var(--gold);border:1px solid #577674;padding:14px;text-align:center}
.beat-diagram{display:flex;justify-content:center;white-space:nowrap;font-size:35px;letter-spacing:3px}.time-bracket{border:1px solid #c9d4b9;border-top:0;padding:12px 0;text-align:center;font:24px Georgia;margin-top:15px}.unit-mark{text-align:center;margin-top:25px;font:17px Georgia}
.spectrum{display:grid;grid-template-columns:repeat(4,1fr);background:#fbddca;padding:25px 10px;gap:8px;min-height:230px}.spectrum>div{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-right:1px solid #b7a69a;font:32px monospace}.spectrum>div:last-child{border:0}.spectrum .signal{color:#538a9b}.spectrum .noise{color:#d76e69}.spectrum.filtered{background:#cd6863;box-shadow:inset 0 0 35px #962f32}.spectrum.filtered .noise{color:#cd6863}.spectrum.filtered .signal{color:#182522;text-shadow:0 0 1px #111}
.optics-board{position:relative;aspect-ratio:6/5;background:#10282a;border:1px solid #436362;margin:20px 0}.optics-board svg{width:100%;height:100%;display:block}.mirror-control{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;padding:0;background:#1a3535e8;border:1px solid #8db3aa;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:4px}.mirror-control span{font:29px monospace;line-height:30px}.mirror-control small{font:11px Georgia;color:var(--gold)}.mirror-control:hover{background:#345b57}.mirror-control:disabled{opacity:.55}
.plus-diagram,.lights-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(280px,100%);margin:25px auto}.plus-diagram span{display:grid;place-items:center;aspect-ratio:1;color:#3c5659;font-size:31px}.plus-diagram .lit{color:#ead396}.lights-board button{aspect-ratio:1;background:#152b2d;color:#516668;padding:0;font-size:35px;box-shadow:inset 0 0 20px #0003}.lights-board .on{color:#f8dc91;text-shadow:0 0 18px #f5c961}.lights-board button:disabled{opacity:.55}.exit-requirements{display:flex;gap:30px;justify-content:center;color:#526d6c;font-size:35px;margin:25px auto}.exit-requirements .ready{color:var(--gold)}
.school-ending{text-align:center;font-size:58px;letter-spacing:10px;padding:35px 0;color:var(--gold)}
@media(max-width:800px){.chapter-link{grid-column:1/3}.intro h2.school-title{font-size:55px;letter-spacing:9px}}@media(max-width:430px){.intro h2.school-title{font-size:44px;margin:3px 0 10px}.mirror-control{width:36px;height:38px}.mirror-control span{font-size:24px;line-height:23px}.beat-diagram{font-size:28px;letter-spacing:1px}.note-sequence{font-size:24px}.piano-keys button{height:128px}.school-brand{font-size:23px;width:41px;height:43px;line-height:41px}.spectrum>div{font-size:28px}}