:root{--ink:#181817;--muted:#8a877f;--line:rgba(24,24,23,.12);--paper:#f3f0e8;--card:#faf8f3;--accent:#e0483c;--lime:#d8f35a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:500 13px/1.45 Manrope,system-ui,sans-serif}#app{display:grid;grid-template-columns:1fr 320px;height:100vh}.work{display:grid;grid-template-rows:auto 1fr auto;gap:18px;padding:28px 32px;min-width:0;min-height:0}.eyebrow{font:500 10px DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}h1{margin:4px 0 0;font:700 30px/1.05 Manrope,sans-serif;letter-spacing:-.02em}#app{--sign-bg: var(--card)}.stage{position:relative;min-height:0;border:1px solid var(--line);border-radius:20px;background:var(--sign-bg);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:background .2s}.stage svg{width:min(100%,100vh - 260px);height:auto;aspect-ratio:1;display:block}.stage .hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:400 10px DM Mono,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);pointer-events:none}.stage .badge{position:absolute;top:16px;left:16px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#faf8f3cc;font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.06em}.states{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.state{padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;display:grid;gap:4px;transition:border-color .15s,transform .15s;font:inherit;color:inherit}.state:hover{transform:translateY(-1px);border-color:#18181747}.state.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.state svg{width:100%;aspect-ratio:1;display:block;background:var(--sign-bg);border-radius:8px}.state span{font:500 10px DM Mono,monospace;color:var(--muted)}.controls{border-left:1px solid var(--line);padding:28px 24px;overflow-y:auto;display:grid;align-content:start;gap:22px}.group{display:grid;gap:12px}.group h2{margin:0;font:500 10px DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.pets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pets button{padding:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--card);font:500 12px DM Mono,monospace;cursor:pointer;color:var(--ink)}.pets button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.field{display:grid;gap:6px}.field label{display:flex;justify-content:space-between;font-size:12px}.field output{font:500 11px DM Mono,monospace;color:var(--muted)}.field small{color:var(--muted);font-size:11px;line-height:1.35}input[type=range]{width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ink);border-radius:3px;cursor:ew-resize}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;border:3px solid var(--ink);background:var(--lime)}select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);font:500 12px DM Mono,monospace;color:var(--ink)}@media (max-width: 860px){#app{grid-template-columns:1fr;height:auto}.controls{border-left:0;border-top:1px solid var(--line)}.stage{min-height:320px}}.field .for{font:400 10px DM Mono,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.exports{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.exports button{display:grid;gap:2px;justify-items:start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit;text-align:left;transition:border-color .15s}.exports button:hover{border-color:#1818174d}.exports button:disabled{opacity:.45;cursor:progress}.exports b{font:700 13px Manrope,sans-serif}.exports small{font:400 9px DM Mono,monospace;color:var(--muted)}.status{min-height:16px;font:400 10px DM Mono,monospace;color:var(--muted)}.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.materials button{display:grid;justify-items:center;gap:2px;padding:6px 0 7px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;font:500 10px DM Mono,monospace;text-transform:capitalize;transition:border-color .15s}.materials button:hover{border-color:#1818174d}.materials button.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.materials i{display:block;width:34px;height:34px}.materials i svg{display:block;width:100%;height:100%}.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.swatches button,.swatches .custom{width:24px;height:24px;border-radius:50%;cursor:pointer;transition:transform .15s}.swatches button{padding:0;border:1px solid rgba(24,24,23,.18);background:var(--c)}.swatches button:hover,.swatches .custom:hover{transform:scale(1.1)}.swatches .active{outline:2px solid var(--ink);outline-offset:2px}.swatches .custom{position:relative;display:block;background:conic-gradient(#e0483c,#d4a53c,#d8f35a,#3fb6a8,#3b6fe0,#9b5de5,#e0483c)}.swatches .custom input{position:absolute;top:4px;right:4px;bottom:4px;left:4px;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}.swatches .custom input::-webkit-color-swatch-wrapper{padding:0}.swatches .custom input::-webkit-color-swatch{border:0;border-radius:50%}.swatches .custom input::-moz-color-swatch{border:0;border-radius:50%}