:root{--bg:#111210;--panel:#191a17;--line:#30312c;--muted:#85877e;--text:#eceee5;--accent:#ff6a24;--accent2:#ffc33d;--smoke:#a9c0c1;--unit:8px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:"Avenir Next","Segoe UI",sans-serif;overflow-x:hidden}.topbar{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#151613}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.1em;font-size:13px}.brand-mark{width:14px;height:14px;background:var(--accent);box-shadow:7px 0 var(--accent2),0 7px #c43b1d;clip-path:polygon(0 0,100% 0,100% 50%,50% 50%,50% 100%,0 100%)}.version{color:var(--muted);font:10px ui-monospace,monospace}.status{font:10px ui-monospace,monospace;color:#9a9c91;letter-spacing:.08em}.status span{display:inline-block;width:6px;height:6px;background:#8fcf5b;margin-right:8px;box-shadow:0 0 8px #8fcf5b}.workspace{height:calc(100vh - 90px);min-height:650px;display:grid;grid-template-columns:270px minmax(420px,1fr) 350px}.panel{background:var(--panel);padding:22px;border-right:1px solid var(--line);overflow:auto}.output-panel{border-right:0;border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:center;gap:10px;margin-bottom:24px}.panel-heading span{color:var(--accent);font:10px ui-monospace,monospace}.panel-heading h2{font-size:15px;text-transform:uppercase;letter-spacing:.07em;margin:0}.field-label,.sheet-title label,.timeline-head label{font:10px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted)}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 24px}.preset{height:92px;text-align:left;background:#20211e;border:1px solid #363832;color:var(--text);padding:10px;cursor:pointer;transition:.16s}.preset:hover{border-color:#5a5c54;transform:translateY(-1px)}.preset.active{border-color:var(--accent);background:#2a211b;box-shadow:inset 0 -2px var(--accent)}.preset i{display:block;height:23px;width:23px;margin-bottom:7px;image-rendering:pixelated}.fire-icon{background:var(--accent);clip-path:polygon(35% 0,70% 29%,65% 48%,100% 46%,83% 100%,18% 100%,0 50%,26% 55%)}.smoke-icon{background:var(--smoke);clip-path:polygon(22% 27%,42% 27%,42% 8%,70% 8%,70% 27%,91% 27%,91% 59%,75% 59%,75% 85%,20% 85%,20% 70%,4% 70%,4% 42%,22% 42%)}.preset b,.preset small{display:block}.preset b{text-transform:uppercase;font-size:10px;letter-spacing:.05em}.preset small{font:8px ui-monospace,monospace;color:var(--muted);margin-top:3px}.control-row{border-top:1px solid var(--line);padding:14px 0}.control-row>label{display:flex;justify-content:space-between;font:10px ui-monospace,monospace;color:#b4b6ad;letter-spacing:.08em}.control-row output{color:var(--accent)}input,select,button{font:inherit}.input-action{display:flex;margin-top:8px}.input-action input{width:100%;background:#10110f;color:var(--text);border:1px solid #393a35;padding:9px;font:12px ui-monospace,monospace}.input-action button{width:36px;border:1px solid #393a35;border-left:0;background:#242520;color:#c7c9bf;cursor:pointer}.range-row input{width:100%;margin-top:13px;accent-color:var(--accent)}.generate{width:100%;height:44px;border:0;background:var(--accent);color:#160d08;font-weight:800;font-size:11px;letter-spacing:.08em;display:flex;align-items:center;justify-content:space-between;padding:0 14px;cursor:pointer;box-shadow:3px 3px 0 #7c3018}.generate:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #7c3018}.generate kbd{border:1px solid #713018;padding:2px 5px;font:9px ui-monospace,monospace}.hint{font:9px/1.5 ui-monospace,monospace;color:#6f716a}.stage-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;background-color:#121310;background-image:linear-gradient(#191a17 1px,transparent 1px),linear-gradient(90deg,#191a17 1px,transparent 1px);background-size:32px 32px;position:relative}.stage-meta{width:min(54vh,500px);display:flex;justify-content:space-between;margin-bottom:12px}.stage-meta span,.dimensions{font:9px ui-monospace,monospace;color:var(--muted);letter-spacing:.12em}.stage-meta strong{display:block;margin-top:4px;font-size:13px;letter-spacing:.08em}.stage{width:min(54vh,500px);aspect-ratio:1;position:relative;border:1px solid #4b4d46;box-shadow:0 20px 60px #0008}.checker{background-color:#d9d9d4;background-image:linear-gradient(45deg,#bfc0ba 25%,transparent 25%),linear-gradient(-45deg,#bfc0ba 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bfc0ba 75%),linear-gradient(-45deg,transparent 75%,#bfc0ba 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.stage canvas{width:100%;height:100%;image-rendering:pixelated;position:relative;z-index:2}.crosshair{position:absolute;background:#5c5e5640;z-index:1}.crosshair.x{height:1px;left:0;right:0;top:50%}.crosshair.y{width:1px;top:0;bottom:0;left:50%}.transport{width:min(54vh,500px);height:44px;border:1px solid var(--line);border-top:0;background:#181916;display:flex;align-items:center;gap:12px;padding:0 10px}.transport-btn{background:#282923;border:1px solid #3c3e37;color:var(--text);width:26px;height:26px;font:10px monospace;cursor:pointer}.transport span{white-space:nowrap;font:9px ui-monospace,monospace;color:#aaa}.transport input{min-width:60px;flex:1;accent-color:var(--accent)}.transport select{background:#22231f;color:#bbb;border:1px solid #393a34;padding:5px;font:9px ui-monospace,monospace}.sheet-title,.timeline-head{display:flex;justify-content:space-between;align-items:center}.sheet-title span,.timeline-head span{font:9px ui-monospace,monospace;color:#8c8e85}.sheet-view{height:86px;margin:9px 0 22px;border:1px solid #41423d;overflow:auto;display:flex;align-items:center}.sheet-view canvas{height:64px;width:auto;image-rendering:pixelated;background:transparent}.frame-strip{height:86px;margin-top:8px;display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}.frame-thumb{flex:0 0 62px;height:62px;border:1px solid #373833;background-color:#ccc;cursor:pointer;image-rendering:pixelated}.frame-thumb.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.specs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:22px 0 16px}.specs div{padding:10px 7px;border-right:1px solid var(--line)}.specs div:last-child{border:0}.specs span,.specs b{display:block}.specs span{font:7px ui-monospace,monospace;color:var(--muted);margin-bottom:4px}.specs b{font:8px ui-monospace,monospace}.download{width:100%;height:42px;margin-top:8px;text-align:left;padding:0 13px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:.07em;cursor:pointer}.download.primary{background:var(--text);border:1px solid var(--text);color:#121310}.download.secondary{background:transparent;border:1px solid #44463f;color:#babcb3}.download:hover{border-color:var(--accent)}footer{height:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 20px;font:8px ui-monospace,monospace;color:#696b64;letter-spacing:.1em}@media(max-width:980px){.workspace{height:auto;grid-template-columns:240px 1fr}.output-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.stage{width:min(60vw,500px)}.stage-meta,.transport{width:min(60vw,500px)}}@media(max-width:680px){.workspace{display:block}.stage-section{min-height:520px}.stage,.stage-meta,.transport{width:min(88vw,500px)}.topbar .status{display:none}}