:root {
  color-scheme: dark;
  --void:#07030d; --panel:#150a24; --raised:#211034; --violet:#9d5cff;
  --purple:#6f2cff; --pink:#ff65c8; --cyan:#55e7ff; --acid:#b9ff4f;
  --text:#f1eaff; --muted:#aa9abd; --line:rgba(157,92,255,.38);
}
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body {
  color:var(--text); background-color:var(--void);
  background-image:linear-gradient(rgba(157,92,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(157,92,255,.045) 1px,transparent 1px),radial-gradient(circle at 80% 0,rgba(111,44,255,.24),transparent 38%);
  background-size:32px 32px,32px 32px,auto;
  font-family:"OpenDyslexic","Atkinson Hyperlegible",system-ui,sans-serif;
}
main { width:min(960px,calc(100% - 32px)); margin:0 auto; padding:52px 0 80px; }
header { border-top:1px solid var(--violet); padding:28px 0 34px; }
.eyebrow,.label,.status { color:var(--acid); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.18em; }
.logo { overflow:auto; margin:22px 0; padding:24px; border:1px solid var(--line); border-radius:0; color:var(--acid); background:#090310; box-shadow:inset 4px 0 var(--pink),inset -4px 0 var(--cyan),12px 12px rgba(111,44,255,.1); font:700 clamp(6px,1.25vw,12px)/1.25 ui-monospace,monospace; text-shadow:1px 0 var(--cyan),-1px 0 var(--pink); }
.deck { max-width:680px; color:#cfc3dd; line-height:1.8; }
.panel { margin-top:24px; padding:clamp(24px,5vw,48px); border-top:1px solid var(--pink); border-bottom:1px solid var(--line); background:linear-gradient(120deg,rgba(34,14,57,.97),rgba(10,4,18,.97)); box-shadow:16px 16px rgba(111,44,255,.1); }
.panel h1 { margin:.2em 0 .6em; font-size:clamp(26px,5vw,48px); }
dl { margin:28px 0 0; border-top:1px solid var(--line); }
dl div { display:grid; grid-template-columns:140px 1fr; gap:20px; padding:12px 0; border-bottom:1px solid rgba(157,92,255,.16); }
dt { color:var(--muted); font:700 9px/1.5 ui-monospace,monospace; letter-spacing:.14em; }
dd { margin:0; color:var(--cyan); font:700 11px/1.5 ui-monospace,monospace; }
.hidden { display:none!important; }
.meter { height:6px; margin-top:22px; background:#090310; }
.meter span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan)); transition:width .2s; }
.file-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
button { padding:12px 18px; border:0; color:#09020f; background:linear-gradient(90deg,var(--pink),var(--violet)); box-shadow:5px 5px rgba(85,231,255,.14); font-weight:800; text-transform:uppercase; cursor:pointer; }
button:hover { background:linear-gradient(90deg,var(--acid),var(--cyan)); }
.detail { color:var(--muted); font:11px/1.6 ui-monospace,monospace; }
.preview { margin-top:28px; }
.preview img { display:block; max-width:100%; max-height:72vh; margin:auto; object-fit:contain; }
.text-preview { overflow:auto; max-height:68vh; padding:22px; border:1px solid var(--line); color:#d9cee7; background:#08020e; font:13px/1.65 ui-monospace,monospace; white-space:pre-wrap; word-break:break-word; }
.text-preview .heading { color:var(--pink); font-weight:800; }
.text-preview .quote { color:var(--cyan); }
.text-preview .list { color:var(--acid); }
.text-preview .code { color:#c69cff; }
.error { border-top-color:#ff487f; }
.error .status { color:#ff78b4; }
body.embed main { width:100%; padding:0; }
body.embed header,body.embed #idle { display:none; }
body.embed .panel { margin:0; box-shadow:none; border:0; }
@media(max-width:600px){main{width:min(100% - 20px,520px);padding-top:24px}.logo{padding:12px 8px;font-size:6px}.file-heading{display:block}.file-heading button{margin-top:12px}dl div{grid-template-columns:100px 1fr}.panel{box-shadow:8px 8px rgba(111,44,255,.1)}}