:root { --ink:#f1f0e9; --muted:#8c918f; --panel:#121715; --panel2:#171d1a; --line:#2a312e; --acid:#d7ff52; --cyan:#53e6d2; --gold:#ffbd54; --red:#ff716d; --bg:#0a0e0d; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--bg); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 70% -20%,#29372f 0,transparent 42%),linear-gradient(180deg,#0d1210,#090c0b 60%); }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
header,main,footer { width:min(1500px,calc(100% - 48px)); margin:auto; }
header { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; gap:13px; align-items:center; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; background:var(--acid); color:#11150c; font:700 15px DM Mono,monospace; clip-path:polygon(10% 0,100% 0,100% 76%,76% 100%,0 100%,0 10%); }
.brand strong,.brand small { display:block; }.brand strong { font-size:15px; }.brand small { color:var(--muted); font:11px DM Mono,monospace; text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }
.header-status { display:flex; gap:9px; align-items:center; color:var(--muted); font:11px DM Mono,monospace; text-transform:uppercase; }.header-status i { width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid); }
.hero { min-height:285px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.eyebrow { color:var(--acid); font:11px DM Mono,monospace; letter-spacing:.16em; margin:0 0 20px; }
h1 { margin:0; font-size:clamp(39px,5vw,70px); line-height:.99; letter-spacing:-.055em; max-width:900px; } h1 em { color:var(--muted); font-style:normal; font-weight:400; }
.lede { max-width:690px; color:#aeb4b1; line-height:1.7; margin:24px 0 0; font-size:14px; }
.hero-stats { min-width:250px; margin:0; border-left:1px solid var(--line); }.hero-stats div { padding:12px 0 12px 24px; }.hero-stats dt { color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.12em; }.hero-stats dd { margin:4px 0 0; font-size:13px; }
.drop-zone { min-height:112px; border:1px dashed #59635f; background:rgba(23,29,26,.62); display:flex; align-items:center; padding:24px 28px; gap:20px; transition:.2s; outline:none; }
.drop-zone:hover,.drop-zone.dragging,.drop-zone:focus-visible { border-color:var(--acid); background:rgba(38,49,42,.75); }.drop-zone input { display:none; }
.drop-zone>div:nth-of-type(2) { flex:1; }.drop-zone strong,.drop-zone span { display:block; }.drop-zone>div strong { font-size:15px; }.drop-zone>div span { color:var(--muted); font-size:12px; margin-top:6px; }.drop-icon { width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--line);background:#0e1311; }.drop-icon span { color:var(--acid)!important; font-size:30px!important; transform:rotate(90deg); margin:0!important; }
code { font:11px DM Mono,monospace; color:#bec6c2; }
.button { border:1px solid var(--line); background:#151b18; color:var(--ink); min-height:42px; padding:0 18px; cursor:pointer; font:600 12px Manrope,sans-serif; transition:.15s; }.button:hover:not(:disabled){ border-color:#76807b; transform:translateY(-1px); }.button:disabled { opacity:.35;cursor:not-allowed; }.button.primary { width:100%; padding:13px 16px; min-height:58px; background:var(--acid);color:#10140d;border-color:var(--acid);text-align:left;display:flex;align-items:center;justify-content:space-between; }.button.primary small { opacity:.65;font:9px DM Mono,monospace;text-transform:uppercase; }
.workbench { display:grid; grid-template-columns:250px 390px minmax(480px,1fr); min-height:670px; margin-top:24px; gap:1px; background:var(--line); border:1px solid var(--line); }
.panel { min-width:0; background:linear-gradient(180deg,var(--panel2),var(--panel)); padding:22px; }.panel-heading { display:flex;align-items:center;gap:11px;margin-bottom:24px; }.panel-heading>span { color:var(--acid);font:10px DM Mono,monospace; }.panel-heading strong,.panel-heading small { display:block; }.panel-heading strong { font-size:13px; }.panel-heading small { color:var(--muted);font:9px DM Mono,monospace;text-transform:uppercase;margin-top:3px;letter-spacing:.08em; }
.controls-panel>label { display:block; color:#b8bfbb; font-size:11px; margin:0 0 18px; }.controls-panel select { display:block;width:100%;margin-top:8px;height:42px;background:#0d1210;color:var(--ink);border:1px solid var(--line);padding:0 10px;font:11px DM Mono,monospace; }
.check { display:flex!important; gap:10px; align-items:flex-start; cursor:pointer; }.check input { appearance:none;width:17px;height:17px;border:1px solid #59625e;margin:1px 0 0;background:#0c100f; }.check input:checked { background:var(--acid); box-shadow:inset 0 0 0 4px #0c100f; }.check b,.check small { display:block; }.check b { font-size:11px;font-weight:500; }.check small { color:var(--muted);font:9px/1.45 DM Mono,monospace;margin-top:4px; }
.divider { height:1px;background:var(--line);margin:26px 0; }.batch-summary { color:var(--muted);font:10px/1.6 DM Mono,monospace;margin:14px 2px 0; }
.files-panel { padding-left:0;padding-right:0; }.files-panel .panel-heading { padding:0 22px; }.file-list { max-height:574px;overflow:auto; }.empty-state { min-height:440px;display:grid;place-content:center;text-align:center;color:var(--muted); }.empty-state span { font-size:34px;color:#3c4742; }.empty-state p { font-size:11px; }.file-row { display:grid;grid-template-columns:36px 1fr auto;gap:11px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);cursor:pointer;position:relative; }.file-row:hover,.file-row.selected { background:#1d2521; }.file-row.selected:before { content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acid); }.file-status { width:30px;height:30px;display:grid;place-items:center;border:1px solid #34403a;color:var(--cyan);font:11px DM Mono,monospace; }.file-main { min-width:0; }.file-main strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 11px DM Mono,monospace; }.file-main small { color:var(--muted);font:9px DM Mono,monospace; }.file-actions { display:flex;gap:5px; }.icon-button { width:28px;height:28px;background:transparent;border:1px solid var(--line);color:#aeb7b2;cursor:pointer;font-size:12px; }.icon-button:hover { border-color:var(--acid);color:var(--acid); }
.preview-panel { padding:0;display:flex;flex-direction:column; }.preview-heading { min-height:70px;padding:0 22px;margin:0;border-bottom:1px solid var(--line); }.preview-heading>div:nth-child(2){ flex:1; }.legend { color:var(--muted);font:9px DM Mono,monospace;text-transform:uppercase;display:flex;gap:6px;align-items:center; }.legend i { width:12px;height:2px;display:inline-block;margin-left:8px; }.legend .source { background:var(--gold); }.legend .output { background:var(--cyan); }
.viewport-wrap { position:relative;flex:1;min-height:430px;overflow:hidden;background:radial-gradient(circle at 50% 46%,#26322d 0,transparent 43%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#0b100e;background-size:auto,32px 32px,32px 32px; }.viewport-wrap:after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 75%,rgba(7,10,9,.7)); }.viewport-wrap canvas { width:100%;height:100%;display:block;cursor:grab; }.viewport-wrap canvas:active { cursor:grabbing; }.viewport-hint { position:absolute;right:14px;top:12px;color:#5f6a65;font:8px DM Mono,monospace;text-transform:uppercase; }.play-button { position:absolute;left:18px;bottom:16px;z-index:2;width:43px;height:43px;border-radius:50%;border:1px solid #4c5752;background:rgba(10,15,13,.8);color:var(--acid);cursor:pointer; }.play-button:disabled{opacity:.3;}
.timeline { display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;padding:15px 20px;border-top:1px solid var(--line);font:9px DM Mono,monospace;color:var(--muted); }.timeline span:last-child{text-align:right}.timeline input { accent-color:var(--acid);width:100%; }
.metrics { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line); }.metrics div { padding:14px 18px;border-right:1px solid var(--line); }.metrics div:last-child{border:0}.metrics small,.metrics strong{display:block}.metrics small{color:var(--muted);font:8px DM Mono,monospace;text-transform:uppercase}.metrics strong{font:12px DM Mono,monospace;margin-top:5px}.metrics .pass{color:var(--cyan)}.metrics .fail{color:var(--red)}
footer { min-height:90px;border-top:1px solid var(--line);margin-top:50px;display:flex;justify-content:space-between;align-items:center;color:#626b67;font:9px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em; }
@media(max-width:1100px){.workbench{grid-template-columns:240px 1fr}.preview-panel{grid-column:1/-1;min-height:620px}.hero-stats{display:none}}
@media(max-width:700px){header,main,footer{width:min(100% - 24px,1500px)}.hero{min-height:360px}.drop-zone{align-items:flex-start;flex-wrap:wrap}.drop-zone .button{margin-left:76px}.workbench{grid-template-columns:1fr}.preview-panel{grid-column:auto}.viewport-wrap{min-height:430px}.legend{display:none}.header-status{display:none}footer{gap:15px}.controls-panel{padding-bottom:30px}}