:root{color-scheme:dark;--ink: #f7f0cf;--muted: #9aa7b2;--panel: #171b26;--panel-2: #202636;--edge: #f3c244;--hot: #ff5a7a;--ok: #61d394;--cyan: #57d7ff;--shadow: #080910}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),#0d1020;background-size:18px 18px;font-family:MS Gothic,Yu Gothic,ui-monospace,SFMono-Regular,Consolas,monospace}button,textarea,select,input{font:inherit}.shell{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:18px 0 28px}.hero{position:relative;overflow:hidden;min-height:190px;padding:28px;border:4px solid var(--edge);background:linear-gradient(135deg,rgba(87,215,255,.18),transparent 34%),linear-gradient(315deg,rgba(255,90,122,.2),transparent 42%),#151928;box-shadow:0 8px 0 var(--shadow),inset 0 0 0 4px #2c3246}.scanline{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(0,0,0,.24) 7px 8px);mix-blend-mode:multiply}.marquee{position:relative;display:inline-block;margin-bottom:16px;padding:7px 10px;color:#10131c;background:var(--edge);box-shadow:4px 4px 0 var(--shadow);font-size:13px}h1{position:relative;max-width:100%;margin:0;overflow-wrap:anywhere;font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:0;text-shadow:5px 5px 0 #0a0c13,8px 8px 0 var(--hot)}.subtitle{position:relative;max-width:720px;margin:20px 0 0;color:var(--muted);font-size:16px;line-height:1.7}.console,.output-area{display:grid;gap:18px;margin-top:18px}.console{grid-template-columns:1fr}.output-area{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}.panel{border:3px solid #4a536d;background:var(--panel);box-shadow:0 7px 0 var(--shadow)}.panel-title{padding:8px 12px;color:#0d1020;background:var(--cyan);border-bottom:3px solid #4a536d;font-size:13px;font-weight:700}.input-panel,.log-panel{padding-bottom:14px}label,.range-control{display:grid;gap:8px;padding:14px;color:var(--muted);font-size:13px}textarea{width:calc(100% - 28px);min-height:180px;margin:0 14px;padding:14px;resize:vertical;color:var(--ink);background:#0b0e18;border:3px solid #394158;outline:none}textarea:focus,select:focus,button:focus-visible{border-color:var(--edge);box-shadow:0 0 0 3px #f3c24440}.control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}select,input[type=range]{width:100%}select{min-height:42px;color:var(--ink);background:#101522;border:3px solid #394158}input[type=range]{accent-color:var(--hot)}.range-control{grid-template-columns:1fr}output{color:var(--edge);font-weight:700}.button-row{display:flex;justify-content:flex-end;padding:14px}button{min-height:48px;padding:0 22px;color:#11141d;background:var(--edge);border:0;box-shadow:4px 4px 0 var(--shadow);cursor:pointer;font-weight:700}button:disabled{opacity:.55;cursor:wait}.status-line{display:flex;align-items:center;gap:8px;padding:12px 14px 0;color:var(--muted);font-size:13px}.status-line.in-panel{justify-content:flex-end}.status-dot{width:12px;height:12px;background:var(--hot);box-shadow:0 0 0 2px #331622}.status-dot.ready{background:var(--ok);box-shadow:0 0 0 2px #143424}.image-panel{position:relative;display:grid;min-height:520px;grid-template-rows:auto 1fr}.image-panel img{width:100%;height:100%;min-height:450px;object-fit:contain;background:#090c13}.empty-state,.loading{display:grid;place-items:center;min-height:450px;color:#56637d;background:linear-gradient(45deg,#0a0d15 25%,transparent 25%),linear-gradient(-45deg,#0a0d15 25%,transparent 25%),#101522;background-size:24px 24px}.loading{align-content:center;gap:14px;color:var(--edge)}.loading span{width:16px;height:16px;display:inline-block;background:var(--edge);animation:blink .9s infinite steps(2,jump-none)}.loading span:nth-child(2){animation-delay:.15s}.loading span:nth-child(3){animation-delay:.3s}@keyframes blink{50%{opacity:.25;transform:translateY(6px)}}.log-panel ol{margin:0;padding:14px 14px 14px 36px;color:var(--muted);line-height:1.7}.log-panel li::marker{color:var(--edge)}@media(max-width:860px){.console,.output-area,.control-grid{grid-template-columns:1fr}.hero{padding:22px 18px}.button-row{justify-content:stretch}button{width:100%}}
