.theater-page{max-width:1320px;margin:24px auto;padding:0 16px;color:#202f49}.theater-page>h1{margin:0;font-size:28px}.theater{position:relative;isolation:isolate;container-type:size;width:100%;aspect-ratio:16/9;min-height:500px;overflow:hidden;background:#fbf2de url('./assets/stage.webp') center/100% 100%;color:#172840;border-radius:15px;font-family:'Zen Maru Gothic',sans-serif}.theater *{box-sizing:border-box}.theater [hidden]{display:none!important}.theater button{font:900 17px 'Zen Maru Gothic',sans-serif;color:#172840;min-height:44px;background:#fff6df;border:2px dashed #be9358;border-radius:14px;padding:9px 15px;cursor:pointer}.theater button:focus-visible{outline:4px solid #0c678b;outline-offset:3px}.theater button:disabled{opacity:.5;cursor:default}.theater button.primary{background:#bc253a url('./assets/button.webp') center/100% 100%;border:0;color:white;font-size:24px;min-height:54px}.sound-tools,.other-tools{position:absolute;top:2%;display:flex;gap:7px;z-index:5}.sound-tools{left:6%}.other-tools{right:6%}.other-tools button{font:900 25px Arial;min-width:45px;padding:5px}.sound-tools button{font-size:14px;background:#e2ecd4}.sound-tools [aria-pressed=false]{opacity:.65}.theater-content{height:100%;padding:8% 7% 5%}.theater h2{font-size:clamp(26px,4.5cqw,60px);margin:0 0 12px;text-align:center}.overture{height:100%;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative}.overture p{margin:0;font-size:20px;font-weight:900}.eight{background:#c2d5ab;padding:7px 30px;border-radius:15px;font-size:18px}.examples{display:flex;gap:18px;width:65%;min-height:0;flex:1;justify-content:center;margin:4px 0}.examples>div{flex:1;background:url('./assets/tile.webp') center/100% 100%;display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:0;padding:12px}.examples svg{height:clamp(45px,12cqh,110px);width:100%;display:block}.examples b{font-size:24px}.examples i{display:flex;gap:4px;margin-top:10px}.examples em{width:19px;height:19px;background:#ffc743;border:1px dashed #a27431}.overture .primary{width:50%;flex-shrink:0}.overture #how{padding:4px 20px;min-height:35px}.intro-rabbit{position:absolute;width:20%;height:55%;object-fit:contain;left:-2%;bottom:1%;pointer-events:none}.rehearsal{height:100%;display:grid;grid-template-rows:65px minmax(95px,1fr) 50px 40px minmax(100px,1fr);gap:7px}.rehearsal header{display:flex;align-items:center;justify-content:space-between}.rehearsal header>span{padding:10px 16px;background:#172840;color:#fff5dc;border:2px dashed #ca9e4a;border-radius:14px;font-size:14px}.rehearsal header h2{margin:0;font-size:26px}.rehearsal header strong{font:900 52px Arial;margin:0 10px}.beat-rail{display:grid;grid-template-columns:repeat(var(--beats),minmax(0,1fr));padding:10px 10px 28px;background:#fff6df;border:3px dashed #a5885c;border-radius:15px;min-height:0}.beat{position:relative;min-width:0;border-right:2px dashed #bdac8a;background:#eee8d7;display:grid;place-items:center}.beat:last-child{border-right:0}.beat svg{max-width:85%;height:90%;max-height:100px}.beat small{position:absolute;bottom:-25px;left:0;right:0;text-align:center;font:700 18px Arial}.beat.filled{background:#bfd5ab url('./assets/mint.webp') center/100% 100%;border-color:#4f7455}.beat.b4{background-image:url('./assets/gold.webp')}.beat.b1{background:#f6cbbc}.beat.first{border-left:3px solid #4c7057}.beat.last{border-right:3px solid #4c7057}.beat.sounding{box-shadow:inset 0 0 0 5px #173fa2;filter:brightness(1.08)}.listen-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.listen-row>strong{font-size:20px}.listen-row b{font:900 30px Arial}.listen-row button{font-size:14px;padding:6px 12px;min-height:37px}.listen-row #listening{font-size:12px;min-width:70px}.feedback-line{font-size:17px;font-weight:900;text-align:center;margin:0;align-self:center}.workbench{display:grid;grid-template-columns:1fr 4fr 1.8fr;gap:18px;min-height:0}.workbench>.rabbit{height:100%;width:100%;min-height:0;object-fit:contain}.note-supply{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0}.theater .note-supply button{border:0;border-radius:0;background:transparent url('./assets/tile.webp') center/100% 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:10px}.note-supply span{height:65%;min-height:0;width:100%}.note-supply svg{height:100%;width:100%;display:block}.note-supply b{font-size:22px}.actions{display:flex;flex-direction:column;justify-content:center;gap:12px}.actions button{width:100%}.curtain-call{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto 60px;gap:12px}.curtain-call h2{font-size:42px;margin:0}.concert-program{list-style:none;margin:0;padding:25px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:12px;background:#172840 url('./assets/program.webp') center/100% 100%;border-radius:14px;min-height:0}.concert-program li{display:flex;gap:12px;align-items:center;background:#fff6df;border:2px dashed #c39c63;border-radius:12px;padding:8px 12px;min-width:0}.concert-program small{background:#ffc842;border-radius:50%;padding:5px 10px;font-weight:900}.concert-program strong{font:900 clamp(16px,2.4cqw,28px) Arial;flex:1;white-space:nowrap}.concert-program span{font-size:12px}.curtain-call p{text-align:center;font-weight:900;margin:0}.result-actions{display:flex;justify-content:center;gap:20px}.result-actions button{min-width:30%}.theater-sheet{position:absolute;inset:0;background:#17284099;z-index:10;display:grid;place-items:center;padding:20px}.theater-sheet>div{max-width:630px;max-height:100%;overflow:auto;padding:24px;background:#fff5df;border:5px dashed #a7884f;border-radius:25px;text-align:center}.theater-sheet h2{font-size:30px}.theater-sheet p{line-height:1.7;font-weight:700}.theater-sheet button{display:block;width:100%;margin:10px auto}.parent-note{margin:20px 0;padding:20px;background:#fff5df;border-radius:18px;line-height:1.8}.theater:fullscreen,.theater.faux-fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;min-height:0;border-radius:0}.theater.faux-fullscreen{position:fixed;inset:0;z-index:100000}@media(max-width:600px) and (orientation:portrait){.theater{height:800px;min-height:0;aspect-ratio:auto}.theater-page{padding:0 10px}.theater-content{padding:90px 7% 35px}.sound-tools{left:6%;top:12px}.other-tools{right:6%;top:12px}.sound-tools button{font-size:11px;padding:6px;min-height:40px}.other-tools button{min-width:34px;min-height:40px;font-size:22px;padding:4px}.theater h2{font-size:36px}.overture{gap:13px}.overture p{font-size:16px;text-align:center}.eight{font-size:16px;padding:7px 15px}.examples{width:100%;flex:0;height:170px;gap:6px;margin-top:16px}.examples>div{padding:9px}.examples svg{height:72px}.examples b{font-size:22px}.examples i{gap:2px}.examples em{width:13px;height:16px}.overture .primary{width:100%;margin-top:10px}.intro-rabbit{position:static;width:100%;height:0;flex:1;min-height:0;object-fit:contain}.rehearsal{grid-template-rows:70px 150px 95px 65px minmax(110px,1fr);gap:10px}.rehearsal header{flex-wrap:wrap;gap:4px}.rehearsal header>span{font-size:11px;padding:6px}.rehearsal header h2{font-size:20px;order:-1;width:100%;line-height:1}.rehearsal header strong{font-size:38px}.beat-rail{padding:8px 5px 25px}.beat svg{max-width:100%;height:65px}.beat small{font-size:16px}.listen-row{gap:5px;align-content:center}.listen-row>strong{width:100%;text-align:center;font-size:18px}.listen-row button{font-size:12px;padding:5px 8px}.listen-row #listening{font-size:11px}.feedback-line{font-size:14px}.workbench{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 48px;gap:8px}.workbench>.rabbit{display:none}.note-supply{gap:8px}.note-supply b{font-size:20px}.note-supply span{height:60%}.actions{flex-direction:row;gap:8px}.actions button,.actions button.primary{font-size:17px;min-height:44px}.curtain-call{grid-template-rows:auto minmax(0,1fr) auto 105px}.curtain-call h2{font-size:29px}.concert-program{grid-template-columns:1fr;padding:16px;gap:6px}.concert-program li{padding:5px 9px;gap:8px}.concert-program strong{font-size:21px}.concert-program small{padding:3px 8px}.result-actions{flex-direction:column;gap:9px}.result-actions button{min-height:44px}.curtain-call p{font-size:13px}.theater-sheet>div{padding:14px}.theater-sheet h2{font-size:26px}.theater-sheet p{font-size:14px}}@media(orientation:landscape) and (max-height:500px){.theater-content{padding:55px 7% 24px}.sound-tools,.other-tools{top:8px}.sound-tools button{font-size:12px;min-height:34px;padding:5px 9px}.other-tools button{min-height:34px;font-size:21px;min-width:35px}.overture{gap:5px}.theater h2{font-size:33px;margin-bottom:2px}.overture p{font-size:14px}.eight{font-size:12px;padding:3px 15px}.examples{gap:10px;margin:3px 0}.examples svg{height:40px}.examples b{font-size:16px}.examples i{margin-top:3px}.examples em{width:12px;height:10px}.overture button.primary{font-size:20px;min-height:38px}.overture #how{min-height:28px;font-size:12px;padding:2px 12px}.rehearsal{grid-template-rows:35px minmax(65px,1fr) 35px 25px minmax(65px,1fr);gap:4px}.rehearsal header h2{font-size:20px}.rehearsal header strong{font-size:32px}.rehearsal header>span{font-size:12px;padding:4px 12px}.beat-rail{padding:5px 6px 19px}.beat small{font-size:13px;bottom:-19px}.beat svg{height:45px}.listen-row>strong{font-size:15px}.listen-row b{font-size:21px}.listen-row button{font-size:12px;min-height:29px;padding:3px 8px}.feedback-line{font-size:13px}.workbench{gap:10px}.note-supply b{font-size:15px}.theater .note-supply button{padding:5px}.actions{gap:5px}.actions button,.actions button.primary{font-size:15px;min-height:32px;padding:4px}.curtain-call{grid-template-rows:38px minmax(0,1fr) 20px 40px;gap:5px}.concert-program{padding:12px 20px;gap:5px 12px}.concert-program li{padding:3px 8px;gap:9px}.concert-program strong{font-size:19px}.concert-program small{padding:1px 6px}.curtain-call p{font-size:12px}.result-actions button,.result-actions button.primary{font-size:18px;min-height:36px}}
.theater button.primary{background-color:transparent}

@media(max-width:600px) and (orientation:portrait){.rehearsal{grid-template-rows:90px 150px 95px 55px minmax(100px,1fr)}}