:root { color-scheme: dark; --bg:#0c0910; --panel:#16111d; --panel2:#201727; --line:#45354e; --text:#f1edf2; --muted:#9f94a4; --purple:#8d5ca0; --purple2:#bd8bd0; --cream:#efc77f; --green:#79c994; --amber:#e7b45f; --red:#de7582; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:radial-gradient(circle at 75% 10%,#27152f 0,transparent 30%),var(--bg); color:var(--text); font-family:"Courier New",monospace; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,#b886ca16 3px 4px); }
button,input,select { font:inherit; }
button { min-height:50px; padding:12px 16px; border:1px solid var(--purple); background:#442b50; color:#fff; letter-spacing:.1em; cursor:pointer; }
button:hover:not(:disabled),button:focus-visible { background:#5a3869; border-color:var(--purple2); outline:1px solid var(--purple2); }
button:disabled { opacity:.35; cursor:not-allowed; }
button.secondary { background:#1c1622; border-color:var(--line); color:#c8c0cb; }
.topbar { min-height:70px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:14px 24px; border-bottom:1px solid var(--line); background:#0d0a12e8; }
.topbar a { color:#b2a7b7; text-decoration:none; font-size:11px; letter-spacing:.12em; }.topbar a:last-child{text-align:right}.topbar .wordmark{color:var(--text);font-weight:700}.topbar div{display:grid;text-align:center;gap:4px;letter-spacing:.14em}.topbar small{color:#756a7a;font-size:9px}
.workspace { min-height:calc(100vh - 70px); display:grid; grid-template-columns:minmax(340px,430px) minmax(0,1fr); }
.controls-panel,.preview-panel { position:relative; padding:clamp(22px,3vw,42px); }.controls-panel{border-right:1px solid var(--line);background:#100c15e8;overflow:auto}.preview-panel{display:grid;grid-template-rows:auto minmax(340px,1fr) auto auto;gap:18px;min-height:0}
.eyebrow { margin:0;color:var(--cream);font-size:10px;letter-spacing:.18em}.intro h1{margin:14px 0;color:#fff;font:800 clamp(48px,7vw,76px)/.83 Arial,sans-serif;letter-spacing:-.07em;text-shadow:8px 7px 0 #5b346055}.intro>p:last-child{color:var(--muted);line-height:1.55;font-size:13px}
.drop-zone { min-height:150px; margin:25px 0 18px; padding:24px; display:grid;place-content:center;text-align:center;gap:9px;border:1px dashed #755581;background:#18101f;cursor:pointer}.drop-zone.drag{border-color:var(--cream);background:#271b2e}.drop-zone strong{color:#e7ddea;letter-spacing:.1em}.drop-zone span,.drop-zone small{color:#958a9a;font-size:11px;line-height:1.4}.drop-zone small{color:#6f6574}.sample-button{width:100%;margin:-8px 0 18px;min-height:42px}
.options-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.options-grid label{display:grid;gap:7px;color:#aaa0ae;font-size:10px;letter-spacing:.1em}.options-grid select{width:100%;min-height:44px;padding:9px;border:1px solid var(--line);background:#0c0910;color:var(--text)}.options-grid .check{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);background:#120e17}.check input{width:22px;height:22px;accent-color:var(--purple)}.check span{display:grid}.check small{color:#786e7d;letter-spacing:0}
#convert-button{width:100%}.progress-shell{position:relative;height:42px;margin-top:10px;border:1px solid #382d3f;background:#0a080d;overflow:hidden}.progress-shell div{position:absolute;inset:0 auto 0 0;width:0;background:#51345f;transition:width .15s}.progress-shell span{position:relative;height:100%;display:grid;place-items:center;font-size:10px;letter-spacing:.09em}.download-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}.local-note{color:#736a77;font-size:10px;line-height:1.5}
.preview-panel>header{display:flex;justify-content:space-between;align-items:center;gap:20px}.preview-panel h2{margin:7px 0 0;font:700 clamp(26px,4vw,44px)/1 Arial,sans-serif;letter-spacing:-.03em}.risk{padding:8px 10px;border:1px solid;font-size:11px;letter-spacing:.12em}.risk--idle{color:#8b818f;border-color:#55475d}.risk--low{color:var(--green);border-color:#447858}.risk--medium{color:var(--amber);border-color:#8b642d}.risk--high{color:var(--red);border-color:#8f3f4b}
.canvas-shell{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);background:#08070a}.canvas-shell::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff05 1px,transparent 1px),linear-gradient(#ffffff05 1px,transparent 1px);background-size:24px 24px}.canvas-shell canvas{position:relative;display:block;max-width:100%;max-height:100%;image-rendering:pixelated}.canvas-empty{position:absolute;color:#63596a;font-size:11px;letter-spacing:.16em}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.stats-grid article{min-width:0;padding:14px;border:1px solid #3d3144;background:#120e17;display:grid;gap:7px}.stats-grid small,.stats-grid span{color:#766d7b;font-size:9px;letter-spacing:.09em}.stats-grid strong{overflow:hidden;color:#ded6e1;font-size:18px;text-overflow:ellipsis}.preview-panel details{color:#8f8494;font-size:11px;line-height:1.5}.preview-panel summary{color:#b5a6ba;cursor:pointer;letter-spacing:.1em}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.topbar>div{display:none}.workspace{grid-template-columns:1fr}.controls-panel{border-right:0;border-bottom:1px solid var(--line)}.preview-panel{min-height:720px}.stats-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.topbar{padding:12px}.topbar a:last-child{font-size:8px}.controls-panel,.preview-panel{padding:16px}.options-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.preview-panel{min-height:620px}.canvas-shell{min-height:300px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}