@import "https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{--paper:#eceef0;--ink:#15181c;--muted:#59616b;--rule:#d3d7dc;--accent:#0a6f96;--field:#fff;--panel:#f6f7f8;--warn:#8a5a00;--danger:#b3261e;--display:"Bodoni Moda", Didot, Georgia, serif;--sans:"IBM Plex Sans", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, Menlo, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#121417;--ink:#e8eaed;--muted:#9ba3ad;--rule:#2c3238;--accent:#56c2e8;--field:#1b1f23;--panel:#171a1e;--warn:#f0c060;--danger:#ff8a80;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#121417;--ink:#e8eaed;--muted:#9ba3ad;--rule:#2c3238;--accent:#56c2e8;--field:#1b1f23;--panel:#171a1e;--warn:#f0c060;--danger:#ff8a80;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--sans);margin:0;font-size:14px}.studio{grid-template-columns:360px minmax(0,1fr);height:100%;display:grid}.panel{background:var(--panel);border-right:1px solid var(--rule);align-content:start;gap:18px;padding:18px 18px 28px;display:grid;overflow-y:auto}.brand{align-items:baseline;gap:10px;display:flex}.brand .mark{font-family:var(--display);font-size:22px;font-weight:600}.brand .sub{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px}section{border-top:1px solid var(--rule);gap:10px;padding-top:14px;display:grid}h2{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0;font-size:11px;font-weight:500}.label,.field>span{font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-size:10.5px}.field{gap:5px;min-width:0;display:grid}input:not([type]),input[type=number],select{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:4px;width:100%;padding:7px 9px}.grid2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row.between{justify-content:space-between}.meta{color:var(--muted);flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;font-size:12.5px;display:flex}.tabular{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px}.warn{color:var(--warn);margin:0;font-size:12.5px}.error{color:var(--danger);margin:0;font-size:13px}.check{align-items:center;gap:8px;font-size:13px;display:flex}.wrap-preview{border:1px solid var(--rule);width:100%}.btn{font:inherit;color:var(--paper);background:var(--ink);border:1px solid var(--ink);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;position:relative}.btn.ghost{color:var(--ink);border-color:var(--rule);background:0 0}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.wide{width:100%;padding:11px}.btn input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.link{font:inherit;color:var(--accent);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:0;font-size:12.5px;text-decoration:underline}button:focus-visible,.btn:focus-within,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.seg{border:1px solid var(--rule);border-radius:4px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.seg button{font:inherit;background:var(--field);color:var(--ink);cursor:pointer;border:0;padding:8px;font-size:13px}.seg button.on{background:var(--ink);color:var(--paper);font-weight:600}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips button{font:inherit;border:1px solid var(--rule);background:var(--field);color:var(--ink);cursor:pointer;border-radius:999px;padding:6px 10px;font-size:12.5px}.chips button.on{border-color:var(--accent);color:var(--accent);font-weight:600}.swatches{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatches>button:not(.transparent),.swatch-custom{border:1px solid var(--rule);cursor:pointer;border-radius:50%;width:28px;height:28px;padding:0}.swatches>button.on{outline:2px solid var(--accent);outline-offset:2px}.swatch-custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;overflow:hidden}.swatch-custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.swatches .transparent{font:inherit;border:1px solid var(--rule);background:var(--field);color:var(--ink);cursor:pointer;border-radius:999px;padding:5px 10px;font-size:12px}.swatches .transparent.on{border-color:var(--accent);color:var(--accent)}.progress{gap:6px;display:grid}.bar{background:var(--rule);border-radius:3px;height:6px;overflow:hidden}.bar>div{background:var(--accent);height:100%;transition:width .2s}.viewport{grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.viewport>canvas{touch-action:none;width:100%;height:100%;min-height:0}.tabs{border-bottom:1px solid var(--rule);background:var(--panel);gap:2px;padding:10px 14px 0;display:flex}.tabs button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-bottom:0;border-radius:6px 6px 0 0;padding:8px 14px;font-size:13px}.tabs button.on{background:var(--paper);border-color:var(--rule);color:var(--ink);margin-bottom:-1px;font-weight:600}.editor{grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0}.editor-tools{border-bottom:1px solid var(--rule);flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;display:flex}.editor-tools button,.tool-file{font:inherit;border:1px solid var(--rule);background:var(--field);color:var(--ink);cursor:pointer;border-radius:4px;padding:6px 10px;font-size:12.5px;position:relative}.editor-tools button.danger{color:var(--danger)}.editor-tools select,.editor-tools input[type=number]{width:auto;padding:5px 7px}.editor-tools input[type=color]{border:1px solid var(--rule);background:0 0;border-radius:4px;width:34px;height:30px;padding:0}.tool-file input{opacity:0;cursor:pointer;position:absolute;inset:0}.editor-tools .sep{background:var(--rule);width:1px;height:22px;margin:0 4px}.editor-stage{background:repeating-linear-gradient(45deg,#0000 0 10px,#7f7f7f0f 10px 20px);place-items:center;min-height:0;display:grid;overflow:hidden}.editor-paper{position:relative;box-shadow:0 6px 24px #0000002e}.editor-paper .canvas-container{display:block}.editor-guides{pointer-events:none;position:absolute;top:0;left:0}.editor-legend{gap:16px;padding:8px 14px 12px}.editor-legend i{vertical-align:middle;width:14px;height:3px;margin-right:6px;display:inline-block}.checker{background:repeating-conic-gradient(#d6d6d6 0 25%, #f4f4f4 0 50%) 0 0 / 20px 20px}.result{z-index:10;background:#0a0c0edb;align-content:center;place-items:center;gap:10px;padding:16px;display:grid;position:fixed;inset:0}.result img{max-width:min(1400px,100%);max-height:calc(100vh - 110px)}.result .row{color:#e8eaed;width:min(1400px,100%)}.result .meta{color:#c9cdd2}@media (width<=820px){.studio{grid-template-rows:55vh auto;grid-template-columns:1fr;height:auto}.viewport{z-index:1;grid-row:1;height:55vh;position:sticky;top:0}.panel{border-right:0;grid-row:2}}.meta.warn{color:var(--warn)}.link.danger{color:var(--danger)}.turnstile{min-height:65px;margin:4px 0 8px}.project-list{border:1px solid var(--rule);background:var(--field);gap:6px;max-height:320px;padding:6px;display:grid;overflow-y:auto}.project-item{align-items:center;gap:8px;display:flex}.project-item.on .project-name{color:var(--accent)}.project-open{min-width:0;font:inherit;text-align:left;color:var(--ink);cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:10px;padding:4px;display:flex}.project-open:hover{background:var(--panel)}.project-open img,.project-open .thumb-empty{object-fit:cover;background:var(--paper);border:1px solid var(--rule);flex:none;width:64px;height:48px}.project-open>span:last-child{min-width:0;display:grid}.project-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}