:root{color-scheme:dark;--bg:#091017;--panel:#101f29;--line:#315262;--cyan:#65e8ed;--ink:#e0edf1;--muted:#9db7c3;--lime:#b6ef6b;--amber:#ffc57b;font-family:'Meow Mono',ui-monospace,Consolas,monospace;font-size:13px}
@font-face{font-family:'Meow Mono';src:url('studio-mono.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);height:100dvh;min-height:620px;display:flex;flex-direction:column;padding:8px 12px;gap:7px}button,input,select,textarea{font:inherit;border-radius:0}button{cursor:pointer;color:var(--ink);background:#203642;border:1px solid transparent;padding:7px 12px;touch-action:manipulation;white-space:nowrap}button:hover{background:#304d57;color:white}button:disabled{opacity:.48;cursor:wait}button.primary{color:#081920;background:var(--cyan);font-weight:700}button.text-button{padding:0;background:none;color:var(--cyan);text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:3px}a{color:var(--cyan);text-underline-offset:3px}kbd{font:inherit;font-size:11px;color:var(--muted)}input,select,textarea{background:#0a1821;color:var(--ink);border:1px solid #416171;padding:9px 12px;min-width:0}input:focus,textarea:focus{border-color:var(--lime)}label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px}p{line-height:1.55}h2,h3,p{margin-top:0}h2{font-size:20px}h3{font-size:16px}.small{font-size:12px;color:var(--muted)}[hidden]{display:none!important}
.desk-head{display:flex;align-items:center;gap:18px;min-height:62px;background:#142732;padding:4px 10px 4px 0}.brand{width:240px;flex:none;padding:2px 0}.brand img{display:block;width:100%;height:52px;object-fit:contain;image-rendering:pixelated}.words{flex:1;flex-direction:row;align-items:center;gap:10px}.words>span{font-size:12px;color:var(--ink)}.words kbd{display:block;font-size:10px;color:var(--muted);margin-top:3px}.words input{width:100%;font-size:22px;letter-spacing:.02em;border:2px solid #31525e}.file-actions{display:flex;gap:4px}.file-actions button{font-size:12px;padding:8px}
main{min-height:0;flex:1;display:flex;flex-direction:column;gap:7px}.tabs{display:flex;gap:3px;background:#172e39;border-bottom:2px solid #304f5b;min-height:35px;align-items:center}.tabs button{font-weight:bold;padding:7px 18px;background:transparent;letter-spacing:1px}.tabs button[aria-pressed=true]{background:var(--cyan);color:#07191e}.tabs button kbd{color:inherit;font-size:12px;opacity:.75;margin-right:9px}.tabs>span{margin-left:auto;color:var(--muted);font-size:11px}.tabs #help{border:1px solid #46606a;margin:0 6px;padding:2px 8px}
.loader{padding:10px 14px;background:#16333f;border:1px solid var(--cyan);flex:none}.load-title,.load-detail,.load-foot{display:flex;gap:15px;align-items:center;justify-content:space-between}.load-title strong{font-size:16px;color:var(--cyan)}#load-clock{margin-left:auto;font-variant-numeric:tabular-nums}#retry{font-size:12px;padding:4px 10px;background:var(--amber);color:#201500}.load-detail{font-size:12px;min-height:25px}.load-foot{font-size:11px;color:var(--muted);align-items:start}.load-foot details{text-align:right;max-width:52%;position:relative}.load-foot summary{cursor:pointer;color:var(--cyan);white-space:nowrap}.load-foot details[open]{padding:10px;background:#10222c;border:1px solid var(--line)}.load-foot p{max-width:600px;text-align:left;margin:8px 0 0}#load-files{white-space:pre-line;font-variant-numeric:tabular-nums}#load-bytes{white-space:nowrap;color:var(--cyan)}progress{width:100%;height:6px;margin:9px 0 4px;accent-color:var(--cyan);display:block}progress::-webkit-progress-bar{background:#08171f}progress::-webkit-progress-value{background:var(--cyan)}.loader.stalled{border-color:var(--amber)}.loader.stalled .load-title strong{color:var(--amber)}body.loading .stage{flex-basis:150px;min-height:120px}
.stage{display:flex;flex-direction:column;border:3px double var(--cyan);background:#000;flex:0 0 clamp(155px,27vh,300px);min-height:140px;overflow:hidden}.stage-top{display:flex;gap:20px;padding:5px 9px;background:#132831;color:var(--muted);font-size:11px;min-height:25px;align-items:center}.stage-top strong{color:var(--cyan);font-size:12px}.stage-top #motion-state{margin-left:auto;color:var(--lime);font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}#art-wrap{min-height:0;flex:1;padding:10px 24px;display:flex;align-items:center;justify-content:center;overflow:hidden}#art{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated;display:block}#art.painting{cursor:crosshair;outline:2px dashed var(--amber)}.stage-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:3px 6px;background:#10222b;border-top:1px solid #24404b;font-size:11px}.stage-controls button{padding:3px 9px;font-size:11px;background:#203945}.stage-controls button kbd{font-size:9px}.stage-controls div{display:flex;gap:4px}#stage-hint{color:var(--muted)}.feedback{display:flex;gap:16px;justify-content:space-between;min-height:20px;background:#132a34;padding:2px 8px;font-size:11px;color:var(--muted);flex:none}#status.error{color:#ffb8a8}#draft-state{white-space:nowrap;font-size:10px;letter-spacing:.04em;color:#86a5b4}.feedback:has(.error){border-left:3px solid var(--amber);background:#32231c}
.workspace{flex:1;min-height:0;display:flex}.panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.banks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-height:0}.bank{background:var(--panel);border:2px solid var(--line);min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}.bank:focus-within{border-color:var(--lime);background:#1b343d}.bank-heading{background:#1c3442;position:relative;display:flex;align-items:center;justify-content:center;height:57px;flex:none;padding:7px 16px}.bank-heading h2{margin:0;max-width:80%;height:100%}.bank-heading h2 img{display:block;height:100%;max-width:100%;object-fit:contain;image-rendering:pixelated}.bank-heading>span{position:absolute;right:10px;top:10px;color:#7b9ca8;font-size:10px}.bank:focus-within .bank-heading{background:#2a4950}.bank-readout{margin:0;padding:4px 8px;background:#203844;display:flex;justify-content:space-between;gap:4px;font-size:11px;line-height:1.3;min-height:23px;color:#d4e7ea;white-space:nowrap;overflow:hidden}.bank-readout>span{color:var(--muted);font-size:10px}.effect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(108px,1fr);gap:7px;padding:7px;overflow-y:auto;min-height:0;align-content:start;flex:1;scrollbar-color:#547783 #11232e;scrollbar-width:thin}.effect{border:2px solid transparent;display:flex;flex-direction:column;padding:0;align-items:stretch;min-width:0;min-height:108px;background:#0d1c27;position:relative;white-space:normal}.effect span{order:-1;background:#223744;text-align:left;padding:3px 7px;font-size:11px;line-height:1.2;min-height:20px}.effect img{width:100%;height:76px;object-fit:contain;padding:10px 8px;flex:1;min-height:0;image-rendering:pixelated}.effect:hover{background:#203942}.inventory button[aria-pressed=true]{border-color:var(--cyan);background:#1d3a44}.inventory button[aria-pressed=true]>span:not(.specimen){background:var(--cyan);color:#082129}.inventory button:focus-visible{border-color:var(--lime);outline:1px solid var(--lime);outline-offset:0}.inventory button:focus-visible>span:not(.specimen){background:var(--lime);color:#092015}.effect:focus-visible:before,.effect[aria-pressed=true]:before{content:'▸';position:absolute;left:-2px;top:1px;color:#071a21}.tune-button{border-top:1px solid var(--line);background:#294652;font-size:11px;display:flex;justify-content:space-between;padding:5px 9px;min-height:27px}.tune-button span{color:#a4c0cb;font-size:10px}.bank:focus-within .tune-button{background:#34595f}
.section-tools{display:flex;align-items:end;gap:6px;padding:0 0 7px;flex:none}.section-tools label{flex:1;flex-direction:row;align-items:center}.section-tools label span{white-space:nowrap;margin-right:4px}.section-tools input{width:100%;padding:6px 10px}.section-tools button{font-size:11px}.font-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(145px,1fr);gap:8px;overflow-y:auto;flex:1;min-height:0;scrollbar-color:#547783 #11232e;scrollbar-width:thin}.font-card{display:flex;flex-direction:column;min-width:0;min-height:145px;border:2px solid #315363;position:relative;align-items:stretch;padding:0;text-align:left;background:#0c1924;white-space:normal}.font-card b{order:-1;padding:5px 10px;background:#203743;font-size:13px;display:block}.font-card[aria-pressed=true] b{background:var(--cyan);color:#071c25}.font-card:focus-visible b{background:var(--lime);color:#071c25}.font-card .specimen{min-height:70px;flex:1;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}.font-card img{max-width:100%;max-height:110px;object-fit:contain;image-rendering:pixelated}.font-card small{font-size:10px;color:#a1bdca;padding:3px 9px;line-height:1.5}.font-card .wildcard{position:absolute;right:5px;top:5px;font-size:9px;background:#3c3124;color:var(--amber);padding:2px 5px}.panel-foot{display:flex;gap:7px;justify-content:flex-end;align-items:center;margin-top:6px;font-size:11px}.panel-foot>span{margin-right:auto;color:var(--muted)}.panel-foot button{font-size:11px}
.export-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:4vw;overflow-y:auto;padding:16px 4vw 20px;border:1px solid var(--line);background:#0d1c26;min-height:0}.export-primary h2{margin-bottom:4px}.export-primary h2 img{height:42px;max-width:100%;object-fit:contain;image-rendering:pixelated}.export-intro{color:var(--ink);margin-bottom:18px}.export-primary label{margin:12px 0}.notice{margin:12px 0;padding:12px 14px;border-left:3px solid var(--cyan);background:#14303b;color:#e0eff2;font-size:12px;line-height:1.6}.notice.loss{border-color:var(--amber);background:#302719;color:#ffe1b8}.export-primary>.primary{margin-bottom:12px;font-size:14px;padding:10px 20px}.export-guide h3{color:var(--cyan);border-bottom:1px solid var(--line);padding-bottom:10px}.export-guide dl{margin:0}.export-guide dl div{display:grid;grid-template-columns:120px 1fr;gap:15px;border-bottom:1px solid #263f4b;padding:9px 0}.export-guide dt{color:var(--ink);font-size:12px}.export-guide dd{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.export-guide>p{font-size:11px;color:var(--muted);margin-top:14px}
footer{display:flex;justify-content:space-between;gap:16px;align-items:center;color:#9dbac6;font-size:10px;min-height:24px;line-height:1.6;flex:none}footer b{color:var(--lime);font-weight:normal;margin-right:4px;margin-left:10px}footer b:first-child{margin-left:0}footer a{margin-left:12px;color:#a4c1cd;text-decoration:none}footer a:hover{text-decoration:underline;color:var(--cyan)}footer button{background:none;padding:2px 4px;color:var(--muted);font-size:10px}
dialog{background:#122530;color:var(--ink);border:2px solid var(--lime);width:min(810px,94vw);max-height:90dvh;padding:22px;box-shadow:8px 8px 0 #0008}dialog::backdrop{background:#02080dcc}dialog form{display:flex;justify-content:space-between;align-items:start;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px}dialog form h2{color:var(--lime);margin:0}dialog .close{font-size:11px;background:#2c4650}dialog p{color:var(--muted);font-size:13px}.tune-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:18px}.tune-controls label:has(textarea),.tune-controls>p{grid-column:1/-1}.tune-controls input[type=checkbox]{width:22px;height:22px;accent-color:var(--cyan)}.tune-controls input[type=color]{width:100%;height:38px;padding:3px}.tune-controls p{font-size:12px}.full-scroll{max-height:73dvh;overflow:auto;background:#000;margin-top:12px}.full-scroll img{display:block;max-width:none;image-rendering:pixelated}#full-size{width:94vw}.shortcuts{display:grid;grid-template-columns:auto 1fr;gap:12px 25px;font-size:12px;line-height:1.5}.shortcuts dt{color:var(--lime)}.shortcuts dd{margin:0;color:var(--muted)}
@media(min-width:1700px){:root{font-size:15px}.effect span{font-size:13px}.effect-grid{grid-auto-rows:minmax(130px,1fr)}.effect img{height:94px}.bank-heading{height:65px}.font-card img{max-height:135px}.stage{flex-basis:29vh}}
@media(max-height:780px) and (min-width:901px){body{padding:5px 9px;gap:4px}.desk-head{min-height:49px}.brand img{height:42px}.words input{padding:6px 12px;font-size:19px}.bank-heading{height:43px}.effect-grid{grid-auto-rows:98px}.effect{min-height:98px}.effect img{height:64px}.bank-readout>span{display:none}.stage{flex-basis:24vh}.font-grid{grid-auto-rows:minmax(125px,1fr)}.font-card{min-height:125px}.font-card img{max-height:74px}}
@media(max-width:1100px){.brand{width:180px}.desk-head{gap:12px}.file-actions button{font-size:11px;padding:7px}.bank-readout>span{display:none}.effect-grid{gap:5px;padding:5px}.effect span{font-size:10px;padding:3px 5px}.tune-button span{display:none}#dimensions{font-size:10px}.tabs>span{font-size:10px}.panel-foot>span{max-width:55%}footer{font-size:9px}footer a{margin-left:8px}}
@media(max-width:900px){body{height:auto;min-height:100dvh;padding:8px;gap:8px}.desk-head{flex-wrap:wrap;padding:5px 8px}.brand{width:180px}.brand img{height:40px}.words{order:3;flex-basis:100%}.words input{font-size:20px}.file-actions{margin-left:auto}.tabs>span{display:none}.tabs button{padding:9px 12px;font-size:12px;letter-spacing:0}.tabs #help{margin-left:auto}.stage{flex:none;height:220px}.stage-top{gap:8px;font-size:10px}#dimensions{display:none}#art-wrap{padding:12px}#stage-hint{display:none}.feedback{font-size:10px}.workspace,.panel{min-height:initial}.banks{display:flex;flex-direction:column;gap:10px}.bank{min-height:240px}.bank-heading{height:50px}.bank-readout{font-size:12px}.bank-readout>span{display:inline}.effect-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:115px;max-height:252px;padding:7px;gap:7px;flex:auto}.effect{min-height:115px}.effect span{font-size:11px}.effect img{height:82px}.tune-button span{display:inline}.tune-button{padding:8px;font-size:12px}.section-tools{flex-wrap:wrap}.section-tools label{flex-basis:100%}.section-tools button{flex:1;padding:8px 5px;font-size:10px}.font-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:165px;overflow:visible}.font-card{min-height:165px}.panel-foot{flex-wrap:wrap}.panel-foot>span{max-width:none;flex-basis:100%;line-height:1.6}.panel-foot button{flex:1}.export-layout{grid-template-columns:1fr;padding:18px;gap:30px;overflow:visible}.export-guide dl div{grid-template-columns:110px 1fr}footer{flex-direction:column;align-items:start;font-size:10px;margin-top:6px}footer>span{max-width:100%}.load-title strong{font-size:14px}.load-foot{display:block}.load-foot details{max-width:none;text-align:left;margin-top:6px}.load-detail{align-items:start;font-size:11px}#draft-state{display:none}body.loading .stage{height:175px;flex-basis:auto}}
@media(max-width:460px){.brand{width:145px}.file-actions{gap:2px}.file-actions button{padding:6px;font-size:10px}.desk-head{gap:6px}.words>span{font-size:10px}.words input{font-size:19px}.tabs button{font-size:11px;padding:9px}.tabs button kbd{margin-right:4px}.stage-top strong{font-size:10px}.stage-top #motion-state{font-size:9px}.stage-controls button{font-size:10px;padding:5px}.stage-controls kbd{display:none}.effect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.font-grid{grid-auto-rows:150px;gap:5px}.font-card{min-height:150px}.font-card b{font-size:11px}.font-card small{font-size:9px}.font-card .wildcard{position:static;padding:2px 8px}.tune-controls{grid-template-columns:1fr}dialog{padding:16px}dialog form{flex-wrap:wrap}.shortcuts{gap:10px;font-size:11px}.load-title{gap:8px}.load-title strong{font-size:13px}#load-bytes{font-size:10px}.load-foot>span{display:none}}
/* Smooth downsampling keeps stippled ANSI headings legible at fractional sizes. */
.brand img,.bank-heading h2 img,.export-primary h2 img,.font-card img,.effect img{image-rendering:auto}

#art{image-rendering:auto}

/* Tuning stays between the artwork and the specimen banks. */
body.tuning #decorate-panel{overflow-y:auto;scrollbar-color:#547783 #11232e;scrollbar-gutter:stable;padding-right:4px}
body.tuning .banks{flex:none;min-height:340px;height:45vh}
.tune-panel{flex:none;min-width:0;background:var(--panel);border:2px solid var(--lime);padding:14px 16px;margin-bottom:10px}
.tune-heading{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tune-heading h2{color:var(--lime);margin:0;font-size:17px}
.tune-heading>span{color:var(--muted);font-size:11px}
.tune-heading button{margin-left:auto;font-size:11px;background:#2c4650}
.tune-panel .tune-controls{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px;margin-top:14px}
.tune-controls>label{min-width:0}
.tune-controls input,.tune-controls select,.tune-controls textarea{width:100%}
.tune-controls>p{color:var(--muted);margin:0;line-height:1.6}
@media(max-width:900px){
 body.tuning .stage{position:sticky;top:0;z-index:5;height:min(220px,30dvh);min-height:130px}
 body.tuning #decorate-panel{overflow:visible;padding-right:0}
 body.tuning .banks{height:auto;min-height:0}
 .tune-panel{scroll-margin-top:calc(min(220px,30dvh) + 12px)}
 .tune-heading{flex-wrap:wrap;gap:8px}
 .tune-heading>span{order:3;flex-basis:100%}
}
@media(max-width:460px){
 .tune-panel{padding:12px}
 .tune-panel .tune-controls{grid-template-columns:1fr}
 .tune-heading h2{font-size:14px}
 .tune-heading button{font-size:10px;padding:6px}
}
.font-engines{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 9px;flex:none}.font-engines button{font-size:11px;padding:6px 10px}.font-engines button[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan);background:#183441}
@media(max-width:460px){.font-engines{gap:4px;padding:0 5px 7px}.font-engines button{font-size:10px;padding:6px}}