.studio-page{max-width:1280px;margin:auto;padding:12px 18px 28px}.studio-page>h1{font-size:clamp(22px,3vw,34px);margin:0;color:#305c4d}.studio-page>p{margin:4px 0 12px}.studio{--u:min(1cqw,1.77778cqh);container-type:size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:3px solid #679d84;border-radius:18px;background:#bbd9ca url('./assets/desk.webp') center/cover;color:#343b3a;font:900 16px 'Zen Maru Gothic',sans-serif}.studio *{box-sizing:border-box}.studio [hidden]{display:none!important}.studio button{font:inherit;line-height:1.5;cursor:pointer;color:#354451;background:#fff4db;border:2px solid #c9ad87;border-radius:7px;padding:.4em .6em;box-shadow:0 3px 0 #61482b33}.studio button:focus-visible,.dot:focus-visible{outline:4px solid #7f458f;outline-offset:2px}.studio button:disabled{opacity:.5;cursor:default}.studio button:hover{filter:brightness(1.04)}.studio .primary{background:transparent url('./assets/button.webp') center/100% 100%;border:0;box-shadow:none;color:#321d26;padding:.6em 1em}.base{height:100%;display:flex;flex-direction:column;padding:1.5% 2.5% 2%}.game-tools{height:10%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:7px}.game-tools strong{font-size:calc(var(--u)*2.6);white-space:nowrap;background:url('./assets/tape.webp') center/100% 100%;padding:0 .6em;color:#344438}.game-tools nav{display:flex;gap:calc(var(--u)*.5)}.game-tools button{font-size:calc(var(--u)*1.1);padding:.3em .5em}.cover{flex:1;min-height:0;display:grid;grid-template-columns:54% 43%;grid-template-rows:minmax(0,1fr) 23%;gap:3%;padding:2%}.sample-paper{min-height:0;background:url('./assets/paper.webp') center/100% 100%;padding:10% 9% 5%;display:flex;flex-direction:column;align-items:center;justify-content:center}.sample-paper img{width:60%;height:64%;object-fit:contain;min-height:0}.sample-paper p{font-size:calc(var(--u)*2.3);line-height:1.5;margin:0;text-align:center}.invitation{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6%;background:url('./assets/note.webp') center/100% 100%;padding:9% 5% 5%;text-align:center;min-height:0}.invitation h2{font-size:calc(var(--u)*3.4);line-height:1.5;margin:0}.invitation p{font-size:calc(var(--u)*1.65);line-height:1.6;margin:0}.invitation .primary{font-size:calc(var(--u)*2);width:100%}.invitation small{font-size:calc(var(--u)*1.25)}.samples{grid-column:1/-1;display:flex;gap:4%;justify-content:center;min-height:0}.samples span{width:15%;display:flex;flex-direction:column;align-items:center;min-height:0;background:#fff7e5;border:2px solid #d5c9a9;border-radius:7px;padding:5px}.samples img{height:76%;width:100%;min-height:0;object-fit:contain}.samples b{font-size:calc(var(--u)*1.35);line-height:1.5}.game{flex:1;min-height:0;display:grid;grid-template-columns:66% 32%;gap:2%;padding-top:1%}.paper{min-height:0;background:url('./assets/paper.webp') center/100% 100%;padding:7% 5% 2%;display:grid;grid-template-rows:8% minmax(0,1fr) 9%;gap:1%}.paper-labels{display:flex;justify-content:center;gap:7%;align-items:center;min-height:0;font-size:calc(var(--u)*1.7);white-space:nowrap}.paper-labels>b,.paper-labels>span{background:url('./assets/tape.webp') center/100% 100%;padding:0 .6em;line-height:1.5}.drawing{position:relative;min-height:0}.drawing svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:manipulation}#line{fill:none;stroke:#df6269;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.dot{cursor:pointer}.dot .disc{fill:#fffaf0;stroke:#416981;stroke-width:4}.dot text{font:700 32px Fredoka,sans-serif;fill:#293d50;text-anchor:middle;dominant-baseline:central;pointer-events:none}.dot .hit{fill:transparent;stroke:none;pointer-events:all}.dot .glow{fill:none;stroke:#ffb027;stroke-width:7;opacity:0;pointer-events:none}.dot.done .disc{fill:#d5edce;stroke:#498860}.dot.next .disc{fill:#ffe4a1;stroke:#d78225}.dot.hint .glow{animation:hint-light .65s ease-in-out infinite}.studio[data-paused=true] .glow{animation-play-state:paused}.dot[aria-disabled=true]{cursor:default}@keyframes hint-light{0%,100%{opacity:.4}50%{opacity:1}}#feedback{margin:0;background:url('./assets/tape.webp') center/100% 100%;text-align:center;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*1.4);line-height:1.5;padding:0 4%}#feedback[data-kind=wrong]{color:#993940}.pocket{min-height:0;background:url('./assets/tray.webp') center/100% 100%;padding:9% 9% 33%;display:grid;grid-template-rows:39% 11% 31% 13%;gap:2%}.next-guide{background:url('./assets/seal.webp') center/contain no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;color:#502917}.next-guide span{font-size:calc(var(--u)*1.8);line-height:1.2}.next-guide b{font:700 calc(var(--u)*6.8)/1.1 Fredoka,sans-serif}.pocket>button{font-size:calc(var(--u)*1.5);padding:.1em .4em;min-height:0}.actions{display:grid;grid-template-rows:1fr 1fr;gap:12%;min-height:0}.actions button{font-size:calc(var(--u)*1.45);min-height:0;white-space:nowrap;padding:.1em .4em}.tally{background:url('./assets/tape.webp') center/100% 100%;display:flex;align-items:center;justify-content:center;gap:12%;min-height:0}.tally span{font-size:calc(var(--u)*1.5);white-space:nowrap}.tally b{font:700 calc(var(--u)*3)/1.1 Fredoka,sans-serif}.finished{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('./assets/note.webp') center/100% 100%;padding:8% 7% 4%;grid-row:1/3}.finished img{height:70%;width:100%;min-height:0;object-fit:contain}.finished h2{font-size:calc(var(--u)*2.6);line-height:1.5;margin:0;white-space:nowrap}.studio[data-phase=complete] .actions{grid-row:3}.studio[data-phase=complete] .tally{grid-row:4}.parent-note{font-size:14px;line-height:1.7;padding:12px}.studio:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}.dialog{position:absolute;inset:0;z-index:5;background:#3e3155b8;display:grid;place-items:center;padding:3%}.dialog-card{position:relative;background:#fff7e7;border:4px solid #aa89c6;box-shadow:0 8px 0 #0003;border-radius:22px;width:min(78%,740px);max-height:100%;overflow:auto;padding:5% 4% 3%;font-size:calc(var(--u)*1.6)}.dialog-card h2{margin:0 0 4%;text-align:center;font-size:calc(var(--u)*2.8)}.dialog-card p{line-height:1.8;margin:.5em 0}.dialog-card .close{position:absolute;right:2%;top:2%;font-size:calc(var(--u)*1.2)}.dialog-card section{display:flex;flex-direction:column;gap:10px}.dialog-card dl{margin:.4em 0;display:grid;gap:4px}.dialog-card dl>div{display:grid;grid-template-columns:22% 78%;padding:.4em;border-bottom:1px solid #d9cbae}.dialog-card dd{margin:0}.dialog-card small{font-size:.8em}.dialog-card input{width:100%;accent-color:#8056a8}.dialog-card label{display:flex;justify-content:space-between}

@media(orientation:portrait) and (max-width:680px){.studio-page{padding:8px}.studio{height:min(820px,calc(100dvh - 12px));aspect-ratio:auto;--u:1cqw;border-width:2px}.base{padding:2% 2% 3%}.game-tools{height:85px;flex-direction:column;justify-content:center;gap:5px}.game-tools strong{font-size:23px}.game-tools nav{width:100%;justify-content:space-between;gap:2px}.game-tools button{font-size:11px;padding:.35em .25em}.cover{grid-template-columns:1fr;grid-template-rows:37% 39% 20%;gap:2%;padding:2%}.sample-paper{padding:7% 9% 3%;flex-direction:row;gap:5%}.sample-paper img{width:44%;height:82%}.sample-paper p{font-size:18px}.invitation{padding:9% 5% 4%;gap:5px}.invitation h2{font-size:28px}.invitation h2 br{display:none}.invitation p{font-size:16px}.invitation .primary{font-size:21px}.invitation small{font-size:12px}.samples{gap:2%}.samples span{width:19%;padding:3px}.samples b{font-size:11px;white-space:nowrap}.game{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 27%;gap:2%;padding-top:2%}.paper{padding:8% 2% 3%;grid-template-rows:8% minmax(0,1fr) 13%;gap:1%}.paper-labels{font-size:15px;gap:2%}.paper-labels>b,.paper-labels>span{padding:0 .3em}#feedback{font-size:13px;line-height:1.5;padding:0 3%}.pocket{background:none;padding:0;grid-template-columns:30% minmax(0,1fr);grid-template-rows:29% minmax(0,1fr) 25%;gap:4%}.next-guide{grid-column:1;grid-row:1/3}.next-guide span{font-size:17px}.next-guide b{font-size:43px}.pocket>button{grid-column:2;grid-row:1;font-size:16px}.actions{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:6%}.actions button{font-size:14px;white-space:normal;padding:.1em .4em}.tally{grid-column:1/-1;grid-row:3}.tally span{font-size:15px}.tally b{font-size:26px}.finished{grid-column:1;grid-row:1/3;padding:10% 8% 3%}.finished h2{font-size:17px}.finished img{height:65%}.studio[data-phase=complete] .actions{grid-column:2;grid-row:1/3;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:10%;padding:3%}.studio[data-phase=complete] .tally{grid-row:3}.dialog-card{width:98%;padding:48px 5% 6%;font-size:15px;max-height:98%}.dialog-card h2{font-size:25px}.dialog-card .close{font-size:13px}.dialog-card dl>div{grid-template-columns:1fr;gap:2px}.dialog-card dd{font-size:14px}.studio:fullscreen{height:100dvh}}
@media(orientation:landscape) and (max-height:520px){.base{padding:1% 2% 2%}.game-tools{height:40px}.game-tools strong{font-size:21px}.game-tools button{font-size:11px;padding:.25em .4em}.cover{padding:1%;grid-template-rows:minmax(0,1fr) 22%;gap:2%}.sample-paper p{font-size:18px}.invitation{gap:4%;padding:8% 5% 4%}.invitation h2{font-size:27px}.invitation h2 br{display:none}.invitation p{font-size:13px}.invitation .primary{font-size:17px}.invitation small{font-size:10px}.samples b{font-size:11px}.game{grid-template-columns:68% 30%}.paper{padding:5% 3% 2%;grid-template-rows:9% minmax(0,1fr) 10%}.paper-labels{font-size:14px}#feedback{font-size:12px}.pocket{padding:7% 8% 27%;grid-template-rows:35% 14% 32% 13%}.next-guide span{font-size:13px}.next-guide b{font-size:36px}.pocket>button,.actions button{font-size:13px}.tally span{font-size:13px}.tally b{font-size:25px}.finished h2{font-size:23px}.dialog-card{padding:35px 4% 3%;font-size:15px;width:80%}.dialog-card h2{font-size:23px}.dialog-card .close{font-size:12px}}
@media(prefers-reduced-motion:reduce){.dot.hint .glow{animation:none;opacity:1}.studio *{scroll-behavior:auto!important}}

@media(orientation:landscape) and (max-height:520px){.base{padding-bottom:1%}.paper{padding:24px 3% 5px;grid-template-rows:18px minmax(0,1fr) 22px;gap:2px}}