:root{--bg:#0d0b0a;--panel:#171311;--edge:#2e2622;--ink:#d8cfc0;--ink-dim:#8c8274;--ember:#b8431f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font-family:Georgia,Times New Roman,serif}.app{grid-template-columns:minmax(0,1fr) 340px;height:100%;display:grid}.stage{min-height:0;position:relative}#view{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.toolbar{flex-wrap:wrap;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:12px}.toolbar .segmented button{color:var(--ink);background:#0d0b0abf;flex:none;padding:6px 10px}.hint{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin:0;font-size:12px;position:absolute;bottom:12px;left:16px}.option{color:var(--ink-dim);margin:8px 0 0;font-size:12px;display:block}.status{color:var(--ink-dim);overflow-wrap:anywhere;margin:8px 0 0;font-size:12px;line-height:1.45}.panel{background:var(--panel);border-left:1px solid var(--edge);padding:20px;overflow-y:auto}h1{letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin:0 0 18px;font-size:22px;font-weight:400}.file-bar{flex-wrap:wrap;gap:6px;display:flex}.file-bar button:disabled{opacity:.4;cursor:default}#file-status:empty{display:none}.tabs{margin:12px 0 0}.tabs button[aria-selected=true]{color:var(--ink);background:var(--edge);border-color:var(--ember)}h2 .reset{float:right;font:inherit;letter-spacing:.1em;color:var(--ink-dim);border:1px solid var(--edge);cursor:pointer;background:0 0;margin-top:-3px;padding:2px 8px;font-size:10px}h2 .reset:hover{color:var(--ink);border-color:var(--ember)}:focus-visible{outline:2px solid var(--ember);outline-offset:2px}h2{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);border-bottom:1px solid var(--edge);margin:20px 0 8px;padding-bottom:4px;font-size:12px;font-weight:400}.row{grid-template-columns:96px minmax(0,1fr) 40px;align-items:center;gap:10px;margin:8px 0;font-size:14px;display:grid}output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:12px}input[type=range]{width:100%;accent-color:var(--ember)}.select{grid-template-columns:96px minmax(0,1fr)}.token-preview{width:200px;height:200px;margin:4px auto 10px;display:block}.stepper{align-items:center;gap:6px;min-width:0;display:flex}.stepper select{flex:1;min-width:0}.option.indented{margin:-2px 0 8px 106px}.swatches{grid-template-columns:96px minmax(0,1fr)}.swatches div{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:1px solid var(--edge);cursor:pointer;border-radius:50%;width:28px;height:28px;padding:0}.swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}input.swatch.picker{background:0 0;border-style:dashed;overflow:hidden}input.swatch.picker::-webkit-color-swatch-wrapper{padding:0}input.swatch.picker::-webkit-color-swatch{border:none;border-radius:50%}input.swatch.picker::-moz-color-swatch{border:none;border-radius:50%}.segmented{display:flex}.segmented button{font:inherit;color:var(--ink-dim);border:1px solid var(--edge);cursor:pointer;background:0 0;flex:1;padding:6px 4px;font-size:13px}.segmented button+button{border-left:none}.segmented button[aria-pressed=true]{color:var(--ink);background:var(--edge);border-color:var(--ember)}.select input[type=checkbox]{width:18px;height:18px;accent-color:var(--ember);justify-self:start}button.inline{font:inherit;color:var(--ink);border:1px solid var(--edge);cursor:pointer;white-space:nowrap;background:0 0;justify-self:start;padding:6px 10px;font-size:13px}button.inline:hover{border-color:var(--ember)}select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--edge);padding:6px 8px}.actions{gap:10px;margin-top:24px;display:flex}.actions button{font:inherit;color:var(--ink);border:1px solid var(--edge);cursor:pointer;background:0 0;flex:1;padding:8px 12px}.actions button:hover{border-color:var(--ember)}@media (width<=760px){.app{grid-template-rows:55vh minmax(0,1fr);grid-template-columns:1fr}.panel{border-left:none;border-top:1px solid var(--edge)}}
