.music-page{max-width:1240px;margin:22px auto;padding:0 14px;color:#215b59}.music-page>h1{font-size:30px;margin:0 0 8px}.music-page>.kids-seo-lead{margin:0 0 20px}#host{container-type:inline-size;position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#79b6a8 url('./assets/room.webp') center/cover;border:4px solid #479b92;border-radius:18px;box-shadow:0 12px 30px #285c5338;color:#215b59;font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host p,#host h2{margin:0}#host button{font:900 clamp(12px,1.35cqw,23px)/1.3 'Zen Maru Gothic',sans-serif;min-height:32px;border:2px solid #7da99b;border-radius:9px;padding:.4em .6em;background:#fff6e4;color:#215b59;box-shadow:0 3px 0 #32655935;cursor:pointer;touch-action:manipulation}#host button:disabled{opacity:.5;cursor:default}#host button:focus-visible{outline:4px solid #e87758;outline-offset:2px}#host .primary{background:#df6e53;color:white;border-color:#b4503c}#base{height:100%;display:flex;flex-direction:column}.workshop-top{min-height:44px;height:9%;display:flex;align-items:center;justify-content:space-between;padding:0 2%;gap:10px;background:#fff3dadf;border-bottom:3px double #92ac8b}.workshop-top strong{font-size:2cqw;white-space:nowrap}.workshop-top nav{display:flex;gap:6px}.workshop-top button{font-size:1.1cqw!important;padding:.35em .5em!important;min-height:28px!important}#cover,#record{flex:1;min-height:0;display:grid;grid-template-columns:54% 43%;gap:3%;padding:3% 4%}.hero-card{background:#fff7e5;border:3px solid #b4cab1;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:3%;min-height:0;overflow:hidden}.hero-card img{display:block;width:100%;min-height:0;object-fit:contain;flex:1}.hero-card p{font-size:1.5cqw;font-weight:900;margin:8px 0!important;line-height:1.5}.paper{background:#fff5df url('./assets/panel.webp') center/100% 100%;border-radius:8px}.cover-paper{display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:center;padding:10% 12%;gap:8%}.cover-paper h2{font-size:2.65cqw;line-height:1.6}.cover-paper p{font-size:1.5cqw;line-height:1.7}.cover-paper #start{font-size:2cqw!important}#ready-note{font-size:1cqw!important}.record-player h2{font-size:2.25cqw}.record-transport{display:flex;gap:12px;width:90%;justify-content:center}.record-transport button{flex:1;font-size:1.5cqw!important}.record-paper{padding:10% 9%;display:flex;flex-direction:column;justify-content:center;gap:5%;text-align:center}.record-paper h2{font-size:1.9cqw}.record-paper p{font-size:1.05cqw;line-height:1.5}.record-paper>.slots{display:flex;flex-direction:column;gap:8px}.record-paper .slots button{font-size:1.1cqw}.record-paper>button{font-size:1.35cqw}#progress-strip{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;width:90%;height:10px;margin:12px 0}#progress-strip i{display:block;background:#c8dacc;border-radius:3px}#progress-strip i.current{background:#e47258}#editor{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;padding:1.3% 3% 1.6%}.transport{display:flex;align-items:center;gap:10px;background:#f7ebd7ed;border:2px solid #aeaa81;border-radius:12px;padding:.6% 1.5%;min-height:46px}.transport label{display:flex;align-items:center;gap:10px;font-size:1.35cqw;font-weight:900;flex:1;min-width:0;white-space:nowrap}.transport input{flex:1;min-width:40px;accent-color:#258c87;width:100%}.transport output{display:inline-block;min-width:2.2em}.transport button{font-size:1.3cqw!important;min-width:9%}.machine{flex:1;min-height:0;padding:2.8% 3.3%;display:flex;flex-direction:column;gap:5px}#page-controls{display:flex;align-items:center;justify-content:center;gap:10px;min-height:28px;font-size:1.1cqw}#page-controls button{font-size:1cqw!important;min-height:26px!important;padding:1px 8px!important}#page-label{font-variant-numeric:tabular-nums}#playing-step{margin-left:auto;min-width:8em;text-align:right;font-size:1cqw}#seq-grid{display:grid;grid-template-columns:8.5% repeat(var(--cols,16),minmax(0,1fr));grid-template-rows:.7fr repeat(12,1fr);gap:4px;flex:1;min-height:0;align-items:stretch}.row-label{font-size:1cqw;font-weight:900;display:flex;align-items:center;color:#215b59;white-space:nowrap}.step-number{text-align:center;font-size:1.05cqw;display:grid;place-items:center;color:#45695c;font-weight:900}.step-number.current{background:#e57a59;color:#fff;border-radius:6px}#host .note-cell{position:relative;min-height:0;min-width:0;padding:0;border:1px solid #b6b99f;border-radius:5px;background:linear-gradient(#fff9e9,#e8e2cc);box-shadow:0 2px 0 #98896d65;font-size:1cqw}.note-cell.beat{border-left:3px solid #719c90!important}#host .note-cell.on{background:var(--note-color);border-color:#9b624455}#host .note-cell.on:after{content:'';display:block;width:22%;aspect-ratio:1;max-width:8px;background:#fff9;border-radius:50%;margin:auto}#host .note-cell.current{outline:3px solid #c43d36;outline-offset:-3px}#host .note-cell.current:before{content:'';position:absolute;inset:0;background:#e94d3a20}.editor-footer{display:flex;gap:8px;justify-content:center;align-items:stretch}.editor-footer .slots{display:flex;gap:8px;flex:1}.editor-footer .slots button{flex:1;min-width:0;font-size:1.05cqw!important}.editor-footer>button{font-size:1.15cqw!important}.slots button.saved{border-color:#218d82;background:#dfefe3}.slots button.invalid{border-color:#d88253}.slots small{font-size:.8em}#modal{position:absolute;inset:0;background:#153b38b8;display:flex;align-items:center;justify-content:center;z-index:10;padding:3%}.dialog{width:76%;max-height:95%;overflow:auto;background:#fff5df;border:4px solid #479b92;border-radius:18px;padding:4%;box-shadow:0 10px 30px #15342f55}.dialog header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.dialog h2{font-size:2.2cqw}.dialog p,.dialog label{font-size:1.45cqw;line-height:1.8}.dialog small{font-size:1.05cqw;line-height:1.6;display:block}.dialog #dialog-content{display:grid;gap:12px}.dialog input[type=range]{width:100%}.dialog .slot-actions{display:grid;gap:12px}.dialog button{min-height:38px}#toast{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);max-width:90%;background:#215b59;color:#fff7df;padding:8px 16px;border-radius:10px;font-size:1.2cqw;z-index:15;text-align:center;pointer-events:none}.parent-note{font-size:13px;line-height:1.9;margin:18px 0}#host:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;display:grid;place-items:center}#host:fullscreen #base{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}
@media(max-width:1000px){#host{aspect-ratio:auto;height:640px}.workshop-top strong{font-size:20px}.workshop-top button{font-size:12px!important}.transport label,.transport button{font-size:14px!important}.machine{padding:3% 4%}#seq-grid{grid-template-columns:12% repeat(var(--cols,8),minmax(0,1fr));gap:5px}.row-label{font-size:12px}.step-number{font-size:14px}#page-controls,#page-controls button,#playing-step{font-size:12px!important}.editor-footer .slots button,.editor-footer>button{font-size:12px!important}.dialog h2{font-size:22px}.dialog p,.dialog label{font-size:16px}.dialog small{font-size:12px}#toast{font-size:14px}}
@media(max-width:600px){.music-page{padding:0 8px;margin:16px auto}.music-page>h1{font-size:25px}#host{height:780px;border-width:3px;border-radius:13px}.workshop-top{height:80px;min-height:80px;flex-direction:column;justify-content:center;gap:8px;padding:6px}.workshop-top strong{font-size:18px}.workshop-top nav{gap:4px;width:100%;justify-content:center}.workshop-top button{font-size:11px!important;min-height:28px!important;padding:4px!important}#cover,#record{grid-template-columns:1fr;grid-template-rows:38% 59%;gap:3%;padding:5%}#cover .hero-card p{font-size:14px}.cover-paper{padding:9% 11%;gap:7%}.cover-paper h2{font-size:24px}.cover-paper p{font-size:16px}.cover-paper #start{font-size:22px!important}#ready-note{font-size:12px!important}#editor{padding:4% 3%;gap:12px}.transport{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px;gap:8px}.transport button{min-height:36px!important;font-size:14px!important}.transport label{grid-row:2;grid-column:1/4;font-size:14px;gap:8px}.transport input{height:28px}.transport #clear{grid-row:1;grid-column:3}.machine{padding:7% 5%;gap:7px}#seq-grid{grid-template-columns:26% repeat(var(--cols,4),minmax(0,1fr));gap:5px}.row-label{font-size:11px;letter-spacing:-.5px}.step-number{font-size:13px}#page-controls{gap:5px;flex-wrap:wrap;min-height:55px}#page-controls button{min-height:28px!important}#playing-step{width:100%;text-align:center;margin-left:0;font-size:11px!important}#host .note-cell{border-radius:5px;min-height:25px}.editor-footer{flex-wrap:wrap;gap:9px}.editor-footer .slots{flex-basis:100%;gap:5px}.editor-footer .slots button{font-size:11px!important;min-height:35px}.editor-footer>button{font-size:13px!important;flex:1;min-height:36px}.record-player h2{font-size:20px}.hero-card{padding:3%;border-width:2px}.hero-card p{font-size:12px}.record-player img{max-height:60%}.record-transport button{font-size:14px!important;min-height:32px}.record-transport{gap:8px}#progress-strip{height:7px;margin:7px 0}.record-paper{padding:9% 10%;gap:5%}.record-paper h2{font-size:18px}.record-paper p{font-size:11px}.record-paper>button{font-size:16px}.record-paper .slots{gap:5px}.record-paper .slots button{font-size:12px;min-height:30px}.dialog{width:100%;padding:6%;border-width:3px;max-height:96%}.dialog h2{font-size:19px}.dialog p,.dialog label{font-size:15px}.dialog small{font-size:12px}.dialog button{font-size:14px}.dialog header{margin-bottom:14px}}
@media(max-width:360px){#host{height:800px}.workshop-top strong{font-size:16px}.workshop-top button{font-size:10px!important}.row-label{font-size:10px}#seq-grid{gap:4px}.cover-paper h2{font-size:21px}.record-paper h2{font-size:16px}}
@media(max-width:1000px){#host:fullscreen #base{width:100%;height:100%;overflow:auto}#host:fullscreen #editor{min-height:560px}#host:fullscreen #cover,#host:fullscreen #record{min-height:540px}}
.machine{position:relative;padding:0}#page-controls{position:absolute;left:8%;right:8%;top:10%;height:8%;min-height:0}#seq-grid{position:absolute;left:8%;right:8%;top:20%;bottom:10%;flex:unset}#playing-step{background:#fff5dfb3}
@media(max-width:600px){#page-controls{height:13%;top:10%}#seq-grid{top:25%;bottom:10%}#host .note-cell{min-height:0}#playing-step{line-height:1.2}}
#track-groups{display:flex;gap:8px;min-height:36px;justify-content:center}#track-groups button{flex:1;font-size:13px!important;min-height:36px!important}#track-groups button[aria-pressed=true]{background:#267c76;color:#fff6e2}#seq-grid{grid-template-rows:.7fr repeat(var(--rows,12),minmax(0,1fr))}
@media(max-width:600px){#host{height:850px}#editor{gap:9px}#seq-grid{grid-template-rows:24px repeat(var(--rows,4),minmax(0,1fr))}#host .note-cell{height:min(100%,50px);align-self:center}.row-label{align-self:center;min-height:32px}#seq-grid .step-number{font-size:14px}.record-player img{max-height:62%}}
@media(max-width:360px){#host{height:870px}}