: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(1120px,calc(100% - 40px)); margin:0 auto; padding:54px 0 80px; }
.label,.status { color:var(--acid); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.18em; }
.login-hero { display:grid; grid-template-columns:minmax(250px,.78fr) minmax(360px,1.35fr); min-height:390px; margin-bottom:28px; overflow:hidden; border-top:1px solid var(--violet); border-bottom:1px solid var(--line); background:linear-gradient(115deg,rgba(22,9,40,.96),rgba(9,3,17,.78)),linear-gradient(90deg,transparent 49.8%,rgba(85,231,255,.12) 50%,transparent 50.2%); box-shadow:20px 20px 0 rgba(72,24,122,.12); }
.login-portrait { position:relative; min-height:390px; overflow:hidden; border-right:1px solid var(--line); }
.login-portrait::after { position:absolute; inset:0; content:""; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(7,3,13,.16) 5px),linear-gradient(180deg,transparent 55%,rgba(7,3,13,.8)); }
.login-portrait img { width:100%; height:100%; min-height:390px; object-fit:cover; object-position:50% 27%; filter:saturate(1.12) contrast(1.04); }
.portrait-code { position:absolute; z-index:1; right:14px; bottom:12px; color:var(--acid); font:700 10px/1 ui-monospace,monospace; letter-spacing:.18em; }
.login-intro { position:relative; align-self:center; padding:48px clamp(32px,7vw,86px); }
.login-intro::before { position:absolute; top:28px; left:0; width:46px; height:3px; content:""; background:var(--pink); box-shadow:19px 8px 0 var(--cyan); }
.login-kicker { margin:0 0 20px; color:var(--acid); font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.2em; }
.login-intro h1 { margin:0; color:var(--text); font-family:"Arial Black",Impact,sans-serif; font-size:clamp(42px,6.4vw,76px); font-weight:900; line-height:.78; letter-spacing:-.07em; text-transform:uppercase; text-shadow:4px 4px 0 rgba(111,44,255,.65); }
.login-intro h1 span { display:block; margin-left:.32em; color:transparent; -webkit-text-stroke:1px var(--pink); text-shadow:none; text-transform:lowercase; }
.login-deck { max-width:520px; margin:30px 0 25px; color:#cfc3dd; font-size:15px; line-height:1.75; }
.login-status { display:flex; flex-wrap:wrap; gap:8px; }
.login-status span { padding:7px 9px 6px; border:1px solid rgba(85,231,255,.35); color:var(--cyan); background:rgba(85,231,255,.04); font:700 9px/1 ui-monospace,monospace; letter-spacing:.12em; }
.terminal { margin:28px clamp(20px,7vw,82px) 52px; border:1px solid rgba(157,92,255,.5); background:rgba(5,2,10,.94); box-shadow:12px 12px 0 rgba(111,44,255,.12); font:700 clamp(12px,1.8vw,16px)/1.75 ui-monospace,monospace; }
.terminal-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; letter-spacing:.08em; }
.terminal-bar span { width:8px; height:8px; border-radius:50%; background:var(--pink); }
.terminal-bar span:nth-child(2) { background:var(--violet); }
.terminal-bar span:nth-child(3) { background:var(--acid); }
.terminal-bar b { margin-left:6px; font-weight:700; }
.terminal-body { padding:clamp(20px,4vw,34px); }
.terminal-body p { margin:0 0 8px; color:#c8c2cf; }
.terminal-title { margin:20px 0 8px!important; color:var(--text)!important; font-size:clamp(20px,3vw,32px); text-transform:uppercase; }
.terminal .prompt { color:var(--violet); }
.terminal dl { margin:24px 0 0; }
.terminal dt { color:var(--muted); }
.terminal dd { color:var(--cyan); }
.input-line { margin-top:18px!important; }
.cursor { color:var(--acid); animation:blink 1s steps(1,end) infinite; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.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)); }
.file-details { margin-top:20px; }
.file-details dd { overflow-wrap:anywhere; }
.file-details code { color:var(--acid); font:inherit; letter-spacing:.025em; }
.preview { margin-top:28px; }
.preview img { display:block; max-width:100%; max-height:72vh; margin:auto; object-fit:contain; }
.preview audio { display:block; width:100%; }
.preview video { display:block; width:100%; max-height:72vh; margin:auto; background:#000; 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 .login-hero,body.embed #idle { display:none; }
body.embed .panel { margin:0; padding:0; box-shadow:none; border:0; background:transparent; }
body.embed .file-heading,body.embed .file-details { display:none; }
body.embed .preview { margin:0; }
@keyframes blink { 50% { opacity:0; } }
@media(max-width:760px){main{width:min(100% - 24px,560px);padding-top:28px}.login-hero{grid-template-columns:1fr;box-shadow:10px 10px 0 rgba(72,24,122,.12)}.login-portrait,.login-portrait img{min-height:300px;max-height:380px}.login-portrait{border-right:0;border-bottom:1px solid var(--line)}.login-intro{padding:42px 24px 36px}.login-intro h1{font-size:clamp(40px,13vw,68px)}.terminal{margin-left:14px;margin-right:14px}.terminal-body{overflow-wrap:anywhere}.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)}}
@media(prefers-reduced-motion:reduce){.cursor{animation:none}}