.player{padding:18px;background:#f4f0e8}.player>.player-top,.player>.screen,.player>.slot{display:none}#stage{height:570px;position:relative;background:radial-gradient(ellipse at 50% 40%,#fffdf6,#e5e1d7);border-radius:12px;overflow:hidden;touch-action:none}#stage canvas{image-rendering:pixelated;display:block;width:100%;height:100%;touch-action:none}#modelStatus{position:absolute;left:18px;right:18px;top:16px;font-size:12px;text-align:center;z-index:1;pointer-events:none;color:#625d62}#modelStatus.error{padding:16px;background:#fff4ef;color:#923b37}.view-tools{display:flex;justify-content:center;gap:8px;margin-top:12px}.stage-hint{text-align:center}.controls{flex-wrap:wrap;gap:7px}.control{font-family:inherit;padding:10px 11px;font-size:12px}.volume-label{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;margin-top:18px}.volume-label input{accent-color:#66794f;width:150px}.volume-label output{width:34px}.sticker canvas{height:auto;aspect-ratio:1}.desk{min-height:320px}.cartridge{width:224px}.now{min-height:38px}.right-col{min-width:0}.player .section-head{margin-bottom:10px}@media(max-width:470px){#stage{height:490px}.player{padding:12px}.controls{gap:5px}.control{padding:10px 8px}}

/* The flat editor uses the exact same 320 x 224 face layout as the 3D chip. */
.flat-chip{position:relative;width:min(100%,420px);aspect-ratio:320/224;clip-path:polygon(0 0,74.5% 0,80% 5%,100% 5%,100% 100%,0 100%);background:#d6d3c9}
#editorFace{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.flat-chip #art{position:absolute;left:10.625%;top:32.142857%;width:78.75%;height:58.035714%;opacity:0;touch-action:none;cursor:crosshair}
.desk{min-height:332px;padding:24px 20px 38px}.layout{align-items:start}

@font-face{font-family:Exqt;src:url('./assets/exqt.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
body,button,input,textarea,.eyebrow,.stamp,.small,.field,.hint,.footer,.kbd,.control,.smallbutton,.primary,.chipitem strong,.chipitem span,.seedbox input,.volume-label,.now,.desk:after{font-family:Exqt,MonaEmoji,Mona12,monospace;font-synthesis:none;font-weight:400}
body{font-size:16px}.top h1{font-family:Exqt,MonaEmoji,Mona12,monospace;font-size:32px;font-weight:400;letter-spacing:0;line-height:1.5}.section-head h2{font-size:24px;font-weight:400}.top p,.field,.control,.smallbutton,.primary,.volume-label,.now{font-size:16px;line-height:1.5}.eyebrow,.stamp,.small,.hint,.footer,.kbd,.chipitem strong,.chipitem span,.desk:after{font-size:12px;line-height:1.7;letter-spacing:0}.textinput{font-size:16px;line-height:1.5}.tools{gap:8px}.control{padding:8px}.section-head{flex-wrap:wrap}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.view-tools{flex-wrap:wrap}#stage canvas:focus-visible{outline:2px solid #657a4d;outline-offset:-3px}

.delete-notice{margin-top:14px;padding:12px;background:#e7e5d6;border:1px solid #9b9b8b;font-size:16px}.delete-notice[hidden]{display:none}#editStatus:empty{display:none}

.player-toolbar{display:flex;justify-content:center;gap:18px;margin-top:14px;width:round(down,100%,2px)}.player-toolbar .smallbutton{background:transparent;border-color:transparent;color:#77707c;font-size:12px}.player-toolbar .smallbutton:hover{background:#e7e2d9}.player-toolbar button:focus-visible{outline:2px solid #657a4d}
.player-help{margin-top:14px;padding:16px;background:#fbf8ef;border:1px solid #c4bdba;border-radius:10px;font-size:12px;line-height:1.8}.player-help[hidden],.player-toast[hidden]{display:none}.player-help h3{font-size:16px;margin:14px 0 6px}.player-help h3:first-child{margin-top:0}.player-help p{color:#79717c}.key-guide{display:grid;grid-template-columns:110px 1fr;gap:5px;margin:10px 0}.key-guide dt{color:#56505b}.key-guide dd{margin:0}.player-help .controls{margin-top:14px}.player-help .smallbutton,.player-help .control,.player-help .volume-label{font-size:12px}.player .now.sr-only{min-height:0;margin:0}.player-toast{position:absolute;bottom:58px;left:24px;right:24px;padding:12px;background:#f9f6e9;border:1px solid #aaa293;border-radius:8px;box-shadow:0 3px 12px #0002;font-size:12px;z-index:3}.player-toast .smallbutton{font-size:12px}.delete-notice{font-size:12px}

.sfx-setting{display:flex;align-items:center;gap:8px;margin-top:16px;cursor:pointer}.sfx-setting input{accent-color:#66794f;width:16px;height:16px}

.workshop-flow{font-size:12px;line-height:1.8;color:#79717c;margin:-8px 0 16px;text-wrap:pretty}.getting-started{padding-left:22px;margin:8px 0;color:#79717c}.getting-started li+li{margin-top:5px}

.player-stage-wrap{position:relative}.player-toolbar{gap:8px;flex-wrap:nowrap}.player-toolbar .smallbutton{white-space:nowrap;padding:7px 9px}.player-toolbar [aria-expanded="true"]{background:#e2ddd3;color:#514858}
.player-remote{position:absolute;right:12px;top:18px;width:188px;z-index:4;padding:12px;border:2px solid #918997;border-radius:18px;background:#eee9df;box-shadow:4px 5px 0 #aaa0ac66;font-size:12px;max-height:calc(100% - 36px);overflow-y:auto;overscroll-behavior:contain}.player-remote[hidden]{display:none}.remote-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.remote-head button{padding:0 8px;font-size:20px}.player-remote .smallbutton,.player-remote .control{font-size:12px;line-height:1.5;padding:7px 5px;min-height:32px}.remote-menu{width:100%}.remote-dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 18px}.remote-dpad button:first-child{grid-column:2}.remote-dpad button:nth-child(2){grid-column:1}.remote-ab,.remote-views{display:flex;gap:6px}.remote-ab button,.remote-views button{flex:1}.player-remote .controls{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:14px;border-top:1px solid #c7bfbd;padding-top:12px}.player-remote #prev{grid-column:1/3;grid-row:1}.player-remote #play{grid-column:3/5;grid-row:1}.player-remote #next{grid-column:5/7;grid-row:1}.player-remote #insert{grid-column:1/4;grid-row:2}.player-remote #eject{grid-column:4/7;grid-row:2}.player-remote .volume-label{flex-wrap:wrap;gap:6px;font-size:12px;margin:14px 0}.player-remote .volume-label input{width:85px}.player-remote .volume-label output{width:28px}.player-remote .delete-notice{padding:8px;font-size:12px}.remote-views{border-top:1px solid #c7bfbd;padding-top:10px;margin-top:10px}
@media(min-width:1600px){.player-remote{left:calc(100% + 28px);right:auto}}
@media(max-width:470px){.player-remote{width:174px;right:6px;top:10px;padding:10px;max-height:calc(100% - 20px)}.player-toolbar .smallbutton{padding:7px 5px}}

.player-remote #prev,.player-remote #play,.player-remote #next{padding:7px 1px;font-size:11px;white-space:nowrap;letter-spacing:-.5px}
@media(min-width:600px) and (max-width:1599px){.player-stage-wrap.remote-open #stage{width:calc(100% - 198px)}.player-stage-wrap.remote-open{background:#eae6dc;border-radius:12px}.player-remote{right:4px}}

.language-switch{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 12px;font-size:12px;color:#8a808d}.language-switch button{font:inherit;background:transparent;border:1px solid transparent;border-radius:5px;padding:5px 9px;color:#79717e;cursor:pointer}.language-switch button[aria-pressed="true"]{color:#514858;background:#e3ded7;border-color:#b6abb8}.language-switch button:focus-visible{outline:2px solid #657760}html[lang="en"] .player-remote .smallbutton{font-size:11px}html[lang="en"] .key-guide{grid-template-columns:100px 1fr}html[lang="en"] .player-toolbar{gap:4px}

/* Exqt: 192 units/em, 16-unit pixel grid => 12px per native grid.
   Keep HTML UI text on native multiples; avoid fractional tracking. */
body{font-size:12px;line-height:18px;letter-spacing:0}
.top h1{font-size:36px;line-height:48px}
.section-head h2{font-size:24px;line-height:36px}
.top p,.field,.textinput,.control,.smallbutton,.primary,.volume-label,.now,
.player-help h3,.delete-notice{font-size:12px;line-height:24px}
.eyebrow,.stamp,.small,.hint,.footer,.kbd,.chipitem strong,.chipitem span,
.desk:after,.workshop-flow,.player-help,.player-toast{font-size:12px;line-height:24px;letter-spacing:0}
button,input,textarea,.seedbox input{letter-spacing:0}
.player-remote #prev,.player-remote #play,.player-remote #next,
html[lang="en"] .player-remote .smallbutton{font-size:12px;letter-spacing:0;line-height:24px}
.remote-head button{font-size:24px;line-height:24px}

@font-face{font-family:Mona12;src:url('./assets/Mona12TextKR.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

/* Centering an odd viewport and fractional grid tracks must not shift text by half a pixel. */
.wrap{margin-left:max(0px,round(down,calc((100% - 1170px)/2),1px));margin-right:0}
@media(min-width:831px){.layout{grid-template-columns:round(down,calc((100% - 22px)*.515),1px) minmax(0,1fr)}}
.workshop-flow,.hint,.field{word-break:keep-all;overflow-wrap:anywhere}


/* Match the shared face artwork shifted up four pixels at native 420px width. */
.flat-chip #art{top:30.612245%}

.library-grid > .library-empty{grid-column:1 / -1;min-width:0;min-height:104px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;word-break:keep-all}

.library-empty > span{position:relative;display:block;max-width:100%}

.music-styles{border:0;padding:0;margin:13px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.music-styles legend{padding:0;margin:0 0 6px}
.music-styles label{position:relative;cursor:pointer}
.music-styles input{position:absolute;opacity:0;width:1px;height:1px}
.music-styles span{display:block;border:1px solid #aaa1a0;border-radius:7px;padding:6px 14px;font-size:12px;line-height:24px;background:#f1e8df}
.music-styles input:checked+span{background:#e0e6d9;border-color:#71816a;box-shadow:inset 0 0 0 1px #71816a}
.music-styles input:focus-visible+span{outline:2px solid #657760;outline-offset:3px}

/* Compact screens and touch-first devices use the device-control guide. */
@media (max-width:830px), (hover:none) and (pointer:coarse){.keyboard-help{display:none}}

.save-row button[hidden]{display:none}.save-row button{flex:1 1 145px}.new-workshop-row{margin-top:14px;padding-top:12px;border-top:1px solid #e4ddd5}.new-workshop-row button{max-width:100%;white-space:normal}

/* Native inputs sit on the cartridge; the canvas remains the unfocused preview. */
.flat-chip .cartridge-writing{position:absolute;z-index:2;margin:0;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent;color:transparent;caret-color:#30382c;font-family:Exqt,MonaEmoji,Mona12,monospace;font-weight:400;letter-spacing:0;cursor:text;resize:none;outline:none;overflow:hidden}
.flat-chip .cartridge-writing::placeholder{color:transparent}
.flat-chip .cartridge-writing:hover{box-shadow:inset 0 -1px #797f70}
.flat-chip .cartridge-writing:focus{color:#30382c;background:#d6d3c9;outline:none;overflow:auto}
.flat-chip .cartridge-writing:focus::placeholder{color:#777d70}
.flat-chip .cartridge-title{left:4.375%;top:7%;width:79%;height:14%;font-size:24px;line-height:1.3}
.flat-chip .cartridge-description{left:10.625%;bottom:2%;width:78.75%;height:7%;font-size:12px;line-height:18px;white-space:pre;scrollbar-width:none}

.player-help .help-intro{margin-top:0}.help-basics{list-style:none;padding:0;margin:12px 0}.help-fold{margin:8px 0}.help-fold summary{cursor:pointer;min-height:24px}.help-fold summary:focus-visible{outline:1px solid #79717c;outline-offset:2px}.player-help .sfx-setting{margin-top:12px}

/* Compact, integer-sized brush samples with comfortable touch targets. */
.brush-sizes{display:flex;gap:4px;margin:-8px 0 12px}.brush-size{width:36px;height:36px;padding:0;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:6px;color:#63596d}.brush-size span{display:block;background:currentColor}.brush-size[aria-pressed="true"],#erase[aria-pressed="true"]{background:#e0e6d9;border-color:#71816a}.brush-size:focus-visible{outline:2px solid #657760;outline-offset:2px}

.tools>.small,.brush-sizes>.small{flex:0 0 28px;width:28px}.brush-sizes{align-items:center;gap:8px}.brush-size{width:27px;flex:0 0 27px}

/* Keep the completion button in its original left half after removing MIDI. */
.save-row:has(#copyChip[hidden]) #makeChip{flex:0 0 calc((100% - 9px)/2)}

.drawer-controls{flex-wrap:wrap}
.share-dialog{width:min(410px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;background:#fbf8ef;color:#30382c;border:2px solid #8e9286;border-radius:14px;padding:16px;font:12px/24px Exqt,MonaEmoji,Mona12,monospace}
.share-dialog::backdrop{background:#292c285e}
.share-dialog h2{font:24px/36px Exqt,MonaEmoji,Mona12,monospace;margin:0 0 10px}
.share-preview canvas,.share-preview video{display:block;width:100%;height:auto;aspect-ratio:4/5;background:#eeebe2;border-radius:3px}
.share-status{margin:10px 0;min-height:24px}
.share-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.share-actions a{text-decoration:none}.share-dialog progress{width:100%;accent-color:#657760}

/* Match the preview's native 420px face, including on narrow mobile screens. */
.flat-chip .cartridge-writing{transform:scale(var(--writing-scale,1));transform-origin:top left;bottom:auto;box-sizing:border-box;text-size-adjust:none;-webkit-text-size-adjust:none}

.model-load-notice{position:absolute;top:16px;left:18px;right:18px;z-index:2;display:grid;justify-items:center;gap:8px;pointer-events:none}
.model-load-notice #modelStatus{position:static;width:100%;margin:0;line-height:24px}
.model-load-notice button{pointer-events:auto;min-height:40px;font-size:12px;line-height:24px}
.model-load-notice button[hidden]{display:none}

html.player-fullscreen-open{overflow:hidden}
.player.player-fullscreen{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;margin:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border:0;border-radius:0;box-shadow:none;background:#eeebe2;display:flex;flex-direction:column;box-sizing:border-box}
.player.player-fullscreen>.section-head,.player.player-fullscreen>#playerHelp{display:none}
.player.player-fullscreen .player-stage-wrap{flex:1;min-height:0;width:100%}
.player.player-fullscreen #stage{width:100%;height:100%;border-radius:0}
.player.player-fullscreen .player-toolbar{flex:0 0 auto;min-height:48px;margin:0;padding:6px 12px;justify-content:center;background:#eeebe2}
.player.player-fullscreen #helpToggle{display:none}
.player.player-fullscreen #playerFullscreen{min-height:36px}

/* Preserve the original Exqt face while keeping shared text aligned to pixels. */
.share-dialog{font-family:Exqt,MonaEmoji,Mona12,monospace;font-synthesis:none;font-weight:400;text-size-adjust:none;-webkit-text-size-adjust:none}
.share-status,.share-actions .smallbutton{font:400 12px/24px Exqt,MonaEmoji,Mona12,monospace;letter-spacing:0}
.share-actions .smallbutton{flex-shrink:0}
.share-preview canvas,.share-preview video{height:var(--share-preview-height,auto);aspect-ratio:4/5;object-fit:contain}

@font-face{font-family:MonaEmoji;src:url('./assets/Mona12Emoji.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}