:root{--hood:#cf0;--void:#000;--hood-90:#ccff00e6;--hood-60:#cf09;--hood-40:#cf06;--hood-24:#ccff003d;--hood-14:#ccff0024;--hood-08:#ccff0014;--mono:ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{background:var(--void);height:100%;color:var(--hood);font-family:var(--mono);-webkit-font-smoothing:antialiased;margin:0;font-size:13px;line-height:1.4}body{overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.topbar{border-bottom:1px solid var(--hood-24);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand-mark{width:26px;height:26px;filter:drop-shadow(0 0 6px var(--hood-40));flex:none}.brand-name{letter-spacing:.14em;font-weight:700}.brand-sub{color:var(--hood-40);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.topbar-actions{flex-wrap:wrap;gap:8px;display:flex}.layout{flex:1;min-height:0;display:flex}.stage{flex-direction:column;flex:1;gap:8px;min-width:0;padding:16px;display:flex}.stage-inner{border:1px dashed var(--hood-24);background-image:radial-gradient(var(--hood-08) 1px, transparent 1px);background-size:20px 20px;border-radius:6px;flex:1;justify-content:center;align-items:center;min-height:0;transition:border-color .15s,background-color .15s;display:flex;position:relative;overflow:auto}.stage-inner.dragging{border-color:var(--hood);background-color:var(--hood-08)}#preview{object-fit:contain;image-rendering:auto;max-width:100%;max-height:100%;filter:drop-shadow(0 0 12px var(--hood-24))}#ascii-out{width:100%;height:100%;color:var(--hood);font-family:var(--mono);letter-spacing:0;white-space:pre;text-shadow:0 0 6px var(--hood-40);margin:0;padding:12px;font-size:6px;line-height:1;overflow:auto}.stage-status{color:var(--hood-40);text-align:right;min-height:14px;font-size:11px}.empty-state{text-align:center;color:var(--hood-60);pointer-events:none;-webkit-user-select:none;user-select:none}.empty-mark{letter-spacing:.1em;color:var(--hood-40);font-size:40px;animation:3s infinite flicker}@keyframes flicker{0%,92%,to{opacity:1}93%{opacity:.3}95%{opacity:.9}97%{opacity:.4}}.empty-title{letter-spacing:.2em;color:var(--hood);margin:10px 0 4px;font-size:18px}.empty-hint{margin:2px 0;font-size:12px}.empty-formats{color:var(--hood-40);letter-spacing:.1em;margin-top:10px;font-size:11px}.progress{border:1px solid var(--hood-24);border-radius:4px;height:16px;position:relative;overflow:hidden}.progress-bar{background:var(--hood);width:0;height:100%;transition:width .1s linear}.progress-label{color:var(--void);mix-blend-mode:difference;justify-content:center;align-items:center;font-size:10px;display:flex;position:absolute;inset:0}.panel{border-left:1px solid var(--hood-24);flex:none;width:340px;padding:8px;overflow-y:auto}.group{border:1px solid var(--hood-14);background:var(--hood-08);border-radius:5px;margin-bottom:8px}.group>summary{cursor:pointer;letter-spacing:.16em;-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:700;list-style:none}.group>summary::-webkit-details-marker{display:none}.group>summary:before{content:"▸ ";color:var(--hood-60)}.group[open]>summary:before{content:"▾ "}.group-body{flex-direction:column;gap:10px;padding:4px 12px 12px;display:flex}.group.hidden{display:none}.ctrl{flex-direction:column;gap:4px;display:flex}.ctrl.hidden{display:none}.ctrl label,.check{color:var(--hood-90);align-items:center;gap:6px;font-size:12px;display:flex}.ctrl label b{color:var(--hood);margin-left:auto;font-weight:700}.ctrl-row{gap:16px;display:flex}.check{cursor:pointer}hr{border:none;border-top:1px solid var(--hood-14);width:100%;margin:2px 0}input[type=range]{appearance:none;background:var(--hood-24);border-radius:2px;outline:none;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--hood);cursor:pointer;width:14px;height:14px;box-shadow:0 0 6px var(--hood-40);border-radius:2px}input[type=range]::-moz-range-thumb{background:var(--hood);cursor:pointer;border:none;border-radius:2px;width:14px;height:14px}input[type=checkbox]{appearance:none;border:1px solid var(--hood-60);cursor:pointer;background:0 0;border-radius:3px;flex:none;width:14px;height:14px;position:relative}input[type=checkbox]:checked{background:var(--hood)}input[type=checkbox]:checked:after{content:"";background:var(--void);border-radius:1px;position:absolute;inset:3px}select,input[type=text]{background:var(--void);width:100%;color:var(--hood);border:1px solid var(--hood-40);font-family:var(--mono);border-radius:4px;padding:6px 8px;font-size:12px}select:focus,input[type=text]:focus{border-color:var(--hood);outline:none}select option{background:var(--void);color:var(--hood)}.seg{border:1px solid var(--hood-40);border-radius:4px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.seg.col3{grid-template-columns:repeat(3,1fr)}.seg label{text-align:center;position:relative}.seg input{opacity:0;cursor:pointer;position:absolute;inset:0}.seg span{letter-spacing:.08em;color:var(--hood-60);border-left:1px solid var(--hood-24);padding:7px 4px;font-size:11px;display:block}.seg label:first-child span{border-left:none}.seg input:checked+span{background:var(--hood);color:var(--void);font-weight:700}.btn{font-family:var(--mono);color:var(--hood);border:1px solid var(--hood-40);cursor:pointer;letter-spacing:.04em;white-space:nowrap;background:0 0;border-radius:4px;padding:7px 10px;font-size:12px;transition:background .12s,border-color .12s,color .12s}.btn:hover{border-color:var(--hood);background:var(--hood-14)}.btn:active{background:var(--hood);color:var(--void)}.btn.primary{background:var(--hood);color:var(--void);border-color:var(--hood);font-weight:700}.btn.ghost{border:none;padding:0 8px;font-size:18px}.btn.tiny{margin-left:auto;padding:2px 6px;font-size:10px}.btn.hidden{display:none}.export-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.export-grid .wide{grid-column:1/-1}.hint-keys{color:var(--hood-40);text-align:center;padding:4px;font-size:11px}.hint-keys b{color:var(--hood-60)}.toast{background:var(--hood);color:var(--void);letter-spacing:.05em;opacity:0;pointer-events:none;z-index:100;border-radius:5px;padding:10px 18px;font-size:12px;font-weight:700;transition:opacity .2s,transform .2s;position:fixed;bottom:20px;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.modal-overlay{z-index:200;background:#000c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--void);border:1px solid var(--hood-40);width:100%;max-width:760px;box-shadow:0 0 40px var(--hood-24);border-radius:8px}.modal-head{border-bottom:1px solid var(--hood-24);letter-spacing:.1em;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.pfp-body{flex-wrap:wrap;justify-content:center;gap:20px;padding:18px;display:flex}.pfp-col{flex-direction:column;align-items:center;gap:10px;display:flex}.pfp-label{color:var(--hood-40);letter-spacing:.1em;font-size:11px}.pfp-crop{border:1px solid var(--hood-40);cursor:grab;touch-action:none;border-radius:4px}.pfp-crop:active{cursor:grabbing}.pfp-preview{border:1px solid var(--hood-40);image-rendering:auto;border-radius:4px;width:320px;height:320px}.pfp-zoom{width:100%;color:var(--hood-60);align-items:center;gap:8px;font-size:11px;display:flex}@media (width<=820px){body{overflow:auto}#app{height:auto;min-height:100vh}.layout{flex-direction:column}.panel{border-left:none;border-top:1px solid var(--hood-24);width:100%}.stage-inner{min-height:300px}}@media (width<=380px){.brand-sub{display:none}.export-grid{grid-template-columns:1fr}.topbar-actions .btn{padding:6px 8px}}
