:root{--ink: #07060a;--bg: #0b0a10;--panel: #14121c;--line: #2a2635;--text: #d8d4e4;--dim: #7d768f;--hot: #f0564a;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden}body{display:flex}#stage{flex:1;position:relative;min-width:0}#view{display:block;width:100%;height:100%}#view.pixelated{image-rendering:pixelated;image-rendering:crisp-edges}#panel{width:300px;flex:none;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:12px}h1{font-size:13px;letter-spacing:.14em;margin:0 0 2px}.sub{color:var(--dim);margin-bottom:12px}.actions{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}button,input[type=number],select{background:#1e1a2a;color:var(--text);border:1px solid var(--line);border-radius:3px;padding:5px 8px;font:inherit;cursor:pointer}button:hover,select:hover{border-color:var(--hot)}.clips{margin-top:-6px}.clips button{flex:1;letter-spacing:.1em}.clips button[aria-pressed=true]{border-color:var(--hot);color:var(--hot)}button.primary{background:var(--hot);color:#14121c;border-color:var(--hot);font-weight:700}input[type=number]{width:92px;cursor:text}fieldset{border:1px solid var(--line);border-radius:3px;margin:0 0 10px;padding:6px 8px 8px}legend{color:var(--dim);letter-spacing:.12em;padding:0 4px}.row{display:grid;grid-template-columns:1fr 46px;gap:4px 8px;align-items:center;margin:5px 0}.row label{color:var(--dim);grid-column:1 / -1;display:flex;justify-content:space-between}.row label b{color:var(--text);font-weight:400}.row input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--hot)}.row select,.row .swatches,.row .steps{grid-column:1 / -1;width:100%}.steps{display:flex;gap:4px}.steps button{flex:1}.steps button[aria-pressed=true]{border-color:var(--hot);color:var(--hot)}.swatches{display:flex;flex-wrap:wrap;gap:3px}.swatches button{width:16px;height:16px;padding:0;border-radius:2px;border:1px solid transparent}.swatches button[aria-pressed=true]{border-color:#fff}@media(max-width:780px){body{flex-direction:column}#panel{width:100%;height:46%;border-left:0;border-top:1px solid var(--line)}}body.sheet{display:flex;flex-direction:column}#sheet-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}#sheet-bar .title{color:var(--dim);letter-spacing:.12em;margin-right:auto}#sheet-bar .linkish{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}#sheet-bar .linkish:hover{color:var(--hot)}#sheet-bar button[aria-pressed=true]{border-color:var(--hot);color:var(--hot)}#sheet-stage{position:relative;flex:1 1 auto;min-height:0}#sheet-stage #view{display:block;width:100%;height:100%}#sheet-labels{position:absolute;display:grid;pointer-events:none}#sheet-labels a{align-self:end;justify-self:center;font-size:9px;letter-spacing:.06em;color:var(--dim);text-decoration:none;pointer-events:auto;padding:1px 3px;opacity:.55}#sheet-labels a:hover{opacity:1;color:var(--hot)}