.studio-page{max-width:1240px;margin:20px auto;padding:0 16px;color:#392347;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:34px;margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:900px;margin:32px auto;padding:24px;background:#f6eddb;line-height:1.9}.parent-note h2{font-size:23px}
#host{--ink:#392347;--paper:#fff8e5;position:relative;isolation:isolate;container-type:size;container-name:game;height:770px;max-width:1200px;margin:auto;overflow:hidden;background:var(--paper) url('./assets/background.webp') center/cover;border:4px solid #392347;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:900 15px/1.4 'Zen Maru Gothic',sans-serif;min-width:0;min-height:42px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);padding:9px 14px;cursor:pointer;touch-action:manipulation}#host button:disabled{opacity:.48;cursor:default}#host button:focus-visible,#host input:focus-visible,#collection:focus-visible{outline:3px solid #c14024;outline-offset:3px}#host button:hover:enabled{filter:brightness(.96)}#host button.primary{background:var(--ink);color:var(--paper);box-shadow:3px 4px 0 #b5ca32}#host input{accent-color:var(--ink);font:inherit}#host .studio-top{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#fff8e5f2;border-bottom:2px solid var(--ink)}#host .studio-top strong{font-size:17px;white-space:nowrap}#host nav{display:flex;gap:7px}#host nav button{font-size:12px;min-height:32px;padding:6px 10px;border-width:1px;border-radius:3px}#base{height:calc(100% - 56px)}
#cover{height:100%;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:25px;padding:35px 43px}.keyart{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.welcome{display:flex;flex-direction:column;gap:24px;padding:12px}.welcome h2{font-size:clamp(36px,6.1cqw,77px);letter-spacing:.04em;line-height:1.3;margin:0;transform:rotate(-3deg);font-weight:900}.welcome h2 span{background:#b7ce34;box-shadow:8px 6px 0 #392347;padding:0 8px 6px}.welcome p{font-size:19px;line-height:1.8;margin:0}.welcome small{font-size:12px}#host #start{font-size:20px;min-height:58px;border-radius:26px}#ready-note{font-size:10px;text-align:center}
#play{height:100%;display:grid;grid-template-rows:70px minmax(0,1fr) 83px 20px;gap:15px;padding:18px 35px}.play-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.play-heading h2{font-size:29px;line-height:1.3;margin:0 0 5px}#feedback{font-size:13px;line-height:1.5;margin:0}#host #review{background:#b7ce34;min-height:44px;white-space:nowrap}#grid{display:grid;grid-template-columns:120px repeat(8,minmax(0,1fr));grid-template-rows:32px repeat(4,minmax(0,1fr));gap:5px;min-height:0;padding:8px;background:#fffbec;border:3px solid var(--ink);border-radius:15px}.beat-number{display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:16px;font-weight:900;border-radius:3px}.row-label{display:flex;align-items:center;gap:7px;padding:5px;font-size:13px;font-weight:900;min-height:0}.row-label img{width:48px;max-height:100%;object-fit:contain;mix-blend-mode:multiply}#host .pad{min-height:0;height:100%;padding:7px;border:1px solid #d2c9b7;border-radius:7px;background:#f3ecd9;display:grid;place-items:center;position:relative}#host .pad>span{width:min(80%,60px);aspect-ratio:1;border-radius:50%;background:#d9d0bf;display:grid;place-items:center;color:transparent;font-size:24px;font-weight:900}#host .pad[aria-pressed=true]>span{background:var(--tone);color:var(--ink);box-shadow:inset 0 -4px 0 #39234718}#host .pad[aria-pressed=true]{background:#fffaea}#host .pad.now{border:3px solid var(--ink);background:#e9e0f0}#host .pad.now:after{content:'';position:absolute;top:4px;left:4px;width:5px;height:5px;border-radius:50%;background:var(--ink)}#host .pad[aria-pressed=true][data-r="3"]>span{color:#fff8e5}#controls{display:grid;grid-template-columns:1fr 1.45fr .85fr .85fr;align-items:center;gap:18px;padding:11px 14px;background:#fff8e5;border:2px solid var(--ink);border-radius:12px}#host #controls button{height:49px;font-size:16px;padding:7px}#host #sample{background:#cde4ed}#host #clear{background:#fbc2ac}#tempo{font-size:16px;font-weight:800;line-height:1.2}#tempo b{font-size:23px;margin-left:5px}#tempo span{font-size:10px;margin-left:5px}#bpm{width:100%;display:block;height:25px;margin:3px 0 0}.sound-note{margin:0;text-align:center;font-size:11px;line-height:1.5}
#result{height:100%;display:grid;grid-template-rows:97px minmax(0,1fr) 48px;gap:18px;padding:22px 35px 30px;background:#392347dd;color:var(--paper)}#result>header{text-align:center}#result h2{font-size:36px;margin:4px 0;line-height:1.3}#result header p{margin:0;font-size:13px}#result header small{font-size:11px}#record-body{min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:25px;background:var(--paper);color:var(--ink);padding:22px;border:2px solid #d1c0a6;box-shadow:8px 8px 0 #21122e;border-radius:4px}#record-body figure{margin:0;display:flex;flex-direction:column;gap:10px;min-height:0}#record-body figure>img{width:100%;min-height:0;flex:1;object-fit:contain}#record-body figcaption{text-align:center;font-size:13px}#collection{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;display:flex;flex-direction:column;justify-content:center;gap:14px}#collection article{border-bottom:1px dashed #ad9eac;padding:0 3px 12px}#collection h3{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 9px}#collection h3 img{width:35px;height:35px;object-fit:contain;mix-blend-mode:multiply}#collection h3 b{margin-left:auto;font-size:13px}.pattern{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.pattern span{height:35px;display:grid;place-items:center;background:#ded5c1;color:#675a69;font-size:11px;border-radius:50%}.pattern span[data-on=true]{background:var(--tone);color:var(--ink);font-weight:900}.pattern span[data-r="3"][data-on=true]{color:#fff8e5}.result-actions{display:flex;justify-content:center;gap:25px}#host .result-actions button{min-width:220px}#host .result-actions .primary{background:#bdcf41;color:#392347;border-color:#bdcf41;box-shadow:0 4px 0 #faffc2}
#modal{position:absolute;inset:0;z-index:50;background:#211629bf;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(640px,100%);background:var(--paper);border:4px solid var(--ink);border-radius:12px;padding:25px;box-shadow:7px 8px 0 #b5ce35}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:23px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
@media(max-width:700px){.studio-page{padding:0 8px}#host{height:820px}.page-heading h1{font-size:29px}.parent-note{padding:16px}}@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container game (max-width:620px){#host .studio-top{height:78px;display:grid;justify-content:stretch;gap:7px;padding:7px 8px;text-align:center}#host .studio-top strong{font-size:14px}#host nav{gap:5px}#host nav button{flex:1;font-size:11px;white-space:nowrap;padding:7px 3px;min-height:33px}#base{height:calc(100% - 78px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:20px 26px 25px}.keyart{grid-row:1;max-width:350px;justify-self:center}.welcome{grid-row:2;padding:0;gap:18px;text-align:center}.welcome h2{font-size:41px;transform:rotate(-2deg);line-height:1.5}.welcome h2 br{display:none}.welcome h2 span{white-space:nowrap;box-shadow:5px 4px 0 #392347}.welcome p{font-size:14px;line-height:1.6}.welcome small{font-size:10px}#host #start{font-size:17px;min-height:47px}
#play{grid-template-rows:88px minmax(0,1fr) 141px 31px;padding:13px 9px 18px;gap:15px}.play-heading{gap:10px;align-items:start;flex-wrap:wrap}.play-heading>div{width:100%}.play-heading h2{font-size:21px;margin-bottom:5px}#feedback{font-size:11px}#host #review{font-size:11px;padding:5px 12px;min-height:31px;margin-left:auto}#grid{grid-template-columns:59px repeat(8,minmax(0,1fr));grid-template-rows:27px repeat(4,minmax(0,1fr));gap:3px;padding:5px;border-width:2px;border-radius:8px}.beat-number{font-size:13px}.row-label{flex-direction:column;gap:4px;justify-content:center;padding:1px;font-size:9px;white-space:nowrap}.row-label img{width:37px;height:37px}#host .pad{padding:2px;border-radius:4px}#host .pad>span{width:92%;font-size:14px}#host .pad.now{border-width:2px}#host .pad.now:after{top:3px;left:2px;width:3px;height:3px}#controls{grid-template-columns:1fr 1fr;grid-template-rows:57px 43px;gap:12px;padding:12px}#host #controls button{height:42px;min-height:37px;font-size:13px}#tempo{font-size:12px}#tempo b{font-size:20px}#tempo span{font-size:9px}.sound-note{font-size:10px;padding:0 10px}#result{grid-template-rows:92px minmax(0,1fr) 48px;gap:17px;padding:18px 14px 22px}#result h2{font-size:27px}#result header small{font-size:9px}#result header p{font-size:11px}#record-body{grid-template-columns:1fr;grid-template-rows:110px minmax(0,1fr);gap:12px;padding:13px 12px}#record-body figure{flex-direction:row;align-items:center;gap:10px}#record-body figure>img{height:110px;width:110px;flex:0 0 110px}#record-body figcaption{font-size:12px;line-height:1.7}#collection{justify-content:start;gap:9px}#collection h3{font-size:13px;margin-bottom:6px;gap:8px}#collection h3 img{width:28px;height:28px}#collection h3 b{font-size:11px}#collection article{padding-bottom:9px}.pattern{gap:5px}.pattern span{height:29px;font-size:10px}.result-actions{gap:10px}#host .result-actions button{flex:1;min-width:0;font-size:12px;padding:7px 4px}#modal>section{padding:18px}#modal h2{font-size:20px}#dialog-content{font-size:13px}}
@container game (max-height:520px) and (min-width:621px){#host .studio-top{height:38px;padding:4px 10px}#host .studio-top strong{font-size:13px}#host nav button{min-height:28px;font-size:10px;padding:4px 8px}#base{height:calc(100% - 38px)}#cover{padding:17px 60px;gap:30px}.welcome{padding:0;gap:12px}.welcome h2{font-size:43px}.welcome p{font-size:12px}.welcome small{font-size:9px}#host #start{font-size:15px;min-height:37px}#play{grid-template-rows:43px minmax(0,1fr) 51px 15px;gap:8px;padding:9px 22px 10px}.play-heading h2{font-size:19px;margin:0 0 3px}#feedback{font-size:10px}#host #review{font-size:11px;padding:5px 10px;min-height:31px}#grid{grid-template-columns:92px repeat(8,minmax(0,1fr));grid-template-rows:20px repeat(4,minmax(0,1fr));gap:3px;padding:4px;border-width:2px;border-radius:8px}.beat-number{font-size:11px}.row-label{padding:1px;font-size:10px;gap:4px}.row-label img{width:28px}#host .pad{padding:3px;border-radius:4px}#host .pad>span{width:26px;max-width:80%;height:26px;max-height:100%;font-size:15px}#host .pad.now{border-width:2px}#host .pad.now:after{width:3px;height:3px;top:3px;left:3px}#controls{gap:14px;padding:5px 9px;border-radius:7px}#host #controls button{height:33px;min-height:30px;font-size:12px;padding:3px}#tempo{font-size:11px}#tempo b{font-size:15px}#tempo span{font-size:8px}#bpm{height:18px;margin:0}.sound-note{font-size:9px}#result{grid-template-rows:60px minmax(0,1fr) 31px;gap:10px;padding:10px 30px 15px}#result h2{font-size:24px;margin:2px 0}#result header small{font-size:8px}#result header p{font-size:10px}#record-body{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);padding:10px 17px;gap:20px}#record-body figure{gap:4px}#record-body figcaption{font-size:9px}#collection{gap:7px;justify-content:start}#collection h3{font-size:12px;margin-bottom:4px;gap:7px}#collection h3 img{width:22px;height:22px}#collection h3 b{font-size:10px}#collection article{padding-bottom:7px}.pattern span{height:23px;font-size:10px}#host .result-actions button{min-height:30px;min-width:170px;font-size:11px;padding:4px 10px}#modal>section{padding:15px 22px}#modal h2{font-size:20px}#dialog-content{font-size:13px;line-height:1.65}#dialog-content p{margin:10px 0}#dialog-content label{margin:9px 0}}
@container game (max-width:350px){#cover{padding:15px 20px;gap:13px}.welcome{gap:13px}.welcome h2{font-size:33px}.welcome p{font-size:12px}#host #start{font-size:15px;min-height:41px}#play{padding:10px 7px 12px;gap:12px;grid-template-rows:85px minmax(0,1fr) 135px 27px}#grid{grid-template-columns:46px repeat(8,minmax(0,1fr));gap:2px;padding:4px}.row-label{font-size:8px}.row-label img{width:31px;height:31px}#host .pad>span{font-size:11px}#controls{gap:8px;padding:10px}#host #controls button{font-size:11px}#tempo{font-size:10px}#result{padding:12px 10px 17px;grid-template-rows:82px minmax(0,1fr) 40px;gap:12px}#result h2{font-size:23px}#record-body{grid-template-rows:85px minmax(0,1fr);padding:10px;gap:10px}#record-body figure>img{height:85px;width:85px;flex-basis:85px}#record-body figcaption{font-size:10px}#collection h3{font-size:11px}#collection h3 img{width:23px;height:23px}.pattern{gap:4px}.pattern span{height:23px;font-size:9px}#host .result-actions button{font-size:10px}}
@media(prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}
.play-heading{background:#fff8e5ed;padding:7px 12px;border-left:5px solid #b7ce34}.row-label span{white-space:nowrap}@container game (min-width:621px) and (min-height:521px){.row-label{font-size:12px}.row-label img{width:42px}}@container game (max-width:620px){.play-heading{padding:5px 8px;border-left-width:3px;gap:6px}}@container game (max-height:520px) and (min-width:621px){.play-heading{padding:3px 9px;border-left-width:3px}}
#collection{justify-content:flex-start}@container game (min-width:621px) and (min-height:521px){#collection{gap:9px}#collection h3{margin-bottom:7px}#collection h3 img{width:30px;height:30px}#collection article{padding-bottom:10px}.pattern span{height:30px}}
@container game (max-height:520px) and (min-width:621px){.welcome h2{font-size:40px;margin-bottom:10px}}