:root { --bg:#050505; --fg:#ffb000; --dim:#8f6500; --glow:rgba(255,176,0,.2); --panel:#090704; --font:"Courier New",monospace; --chart-1:#ffb000; --chart-2:#bf7d00; --chart-3:#805500; --chart-4:#4d3300; --chart-grid:rgba(255,176,0,.14); }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:radial-gradient(circle at 50% 40%,#181714 0,#080808 56%,#020202 100%); color:var(--fg); font-family:var(--font); text-shadow:0 0 8px var(--glow); overflow-x:hidden; }
button,input { font:inherit; }
button { color:inherit; }
#node-label { color:var(--fg); font-weight:normal; }
.shell { width:min(980px,calc(100% - 32px)); min-height:100vh; margin:auto; padding:24px 0; display:grid; grid-template-rows:auto 1fr auto; gap:14px; }
.topline,footer { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--dim); font-size:.78rem; letter-spacing:.08em; }
footer > span { display:flex; flex-wrap:wrap; gap:2px; }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.mode,.linklike,.close { border:0; background:none; padding:4px 6px; cursor:pointer; }
.mode:hover,.mode.active,.linklike:hover { color:var(--bg); background:var(--fg); text-shadow:none; }
.monitor { min-height:0; align-self:stretch; padding:clamp(14px,2.4vw,26px); padding-bottom:14px; border:1px solid #44413a; border-radius:clamp(30px,5vw,58px); background:linear-gradient(145deg,#3a3730,#181714 60%,#292722); box-shadow:0 28px 70px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.8); }
.terminal { min-height:calc(100% - 32px); position:relative; overflow:hidden; isolation:isolate; border:2px solid #090909; border-radius:clamp(24px,4vw,46px); background:var(--panel); padding:clamp(22px,4.5vw,52px); box-shadow:inset 0 0 90px rgba(0,0,0,.95),inset 0 0 18px rgba(0,0,0,.9),0 0 20px var(--glow); animation:crt-flicker 8s infinite; }
.terminal::before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 22% 72%,rgba(255,255,255,.025)),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.52) 100%); }
.terminal::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; border-radius:inherit; background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 1px,transparent 2px,transparent 4px); opacity:.72; }
.terminal > * { position:relative; z-index:2; }
.era-artifacts { position:absolute!important; z-index:1!important; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.raster-roll,.signal-tear { position:absolute; display:block; left:0; right:0; }
.raster-roll { height:18%; top:-22%; background:linear-gradient(180deg,transparent,rgba(255,176,0,.04) 48%,rgba(255,176,0,.16) 50%,transparent 53%); filter:blur(.5px); animation:raster-roll 11s linear infinite; }
.signal-tear { display:none; top:58%; height:2px; background:var(--fg); opacity:.08; box-shadow:12px 2px 0 rgba(255,255,255,.08),-18px -1px 0 rgba(0,0,0,.8); animation:signal-tear 9s steps(1,end) infinite; }
.rack-activity { display:none; position:absolute; right:18px; top:15px; color:var(--dim); font-size:9px; letter-spacing:.1em; text-shadow:none; }
.rack-activity i { display:inline-block; width:4px; height:7px; margin-left:3px; background:var(--dim); opacity:.24; animation:led-pulse 1.7s steps(1,end) infinite; }
.rack-activity i:nth-child(2) { animation-delay:-.4s; }
.rack-activity i:nth-child(3) { animation-delay:-.9s; }
.rack-activity i:nth-child(4) { animation-delay:-1.2s; }
.monitor-controls { height:32px; display:flex; align-items:end; justify-content:flex-end; gap:9px; padding:8px 22px 0; color:#888277; text-shadow:none; font:9px/1 Arial,sans-serif; letter-spacing:.12em; }
.monitor-controls i { width:8px; height:8px; border-radius:50%; background:#191816; border:1px solid #514d44; box-shadow:inset 0 1px 2px #000; }
.monitor-controls i:first-child { background:#7f5d08; box-shadow:0 0 5px rgba(255,176,0,.45); }
h1 { margin:0 0 26px; font-size:clamp(2rem,7vw,5.3rem); line-height:.9; letter-spacing:-.06em; }
.output { min-height:270px; line-height:1.55; white-space:pre-wrap; }
.line { margin:.25rem 0; }
.long-number { overflow-wrap:anywhere; word-break:break-all; }
.dim,.muted { color:var(--dim); }
.success { color:var(--fg); font-weight:bold; }
.progress { width:100%; height:14px; border:1px solid var(--dim); margin:12px 0 6px; position:relative; }
.progress::before { content:""; display:block; width:2px; height:100%; background:var(--fg); box-shadow:0 0 10px var(--fg); }
.medium-preview { display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; gap:18px; margin:18px 0; padding:14px; white-space:normal; border:1px solid var(--dim); background:linear-gradient(90deg,var(--chart-grid),transparent 65%); }
.medium-visual { position:relative; min-height:120px; display:grid; place-items:center; overflow:hidden; border:1px dotted var(--dim); background:var(--panel); }
.medium-visual::before { content:"MEDIUM SCAN"; position:absolute; top:5px; left:7px; color:var(--dim); font-size:7px; letter-spacing:.16em; }
.medium-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 49%,var(--chart-grid) 50%,transparent 51%); background-size:100% 7px; opacity:.55; }
.medium-visual svg { width:150px; height:112px; overflow:visible; fill:rgba(0,0,0,.12); stroke:var(--fg); stroke-width:2; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px var(--glow)); }
.medium-visual svg .detail { fill:none; stroke:var(--dim); stroke-width:1.4; }
.medium-visual svg .hole,.medium-visual svg .holes circle { fill:var(--panel); stroke:var(--fg); }
.medium-preview figcaption { display:grid; gap:8px; min-width:0; }
.medium-preview figcaption strong { overflow-wrap:anywhere; font-size:clamp(.82rem,2vw,1.05rem); }
.medium-preview figcaption span { color:var(--dim); font-size:.78rem; }
.visual-cassette svg { animation:tape-wobble .65s steps(2,end) infinite; }
.visual-paperTape svg { animation:paper-feed 1.8s steps(4,end) infinite; }
form { display:flex; align-items:center; gap:10px; margin-top:20px; }
.command-entry { position:relative; flex:1; min-width:0; min-height:1.2em; }
input { position:absolute; z-index:2; inset:-2px 0; width:100%; min-width:0; color:transparent; text-shadow:none; background:transparent; border:0; outline:0; caret-color:transparent; text-transform:lowercase; }
.input-display { position:absolute; z-index:1; inset:0; display:flex; align-items:center; white-space:pre; overflow:hidden; text-transform:lowercase; pointer-events:none; }
.terminal-cursor { display:inline-block; flex:0 0 auto; width:.72em; height:1.12em; margin-left:1px; background:var(--fg); box-shadow:0 0 8px var(--glow); animation:cursor-blink 1.12s steps(1,end) infinite; }
input:disabled + .input-display .terminal-cursor { opacity:0; animation:none; }
.enter-key { border:1px solid var(--dim); background:transparent; padding:1px 8px 2px; cursor:pointer; }
.enter-key:hover { color:var(--bg); background:var(--fg); }
dialog { width:min(720px,calc(100% - 24px)); padding:0; color:var(--fg); background:var(--panel); border:1px solid var(--fg); box-shadow:0 0 50px var(--glow); }
dialog::backdrop { background:rgba(0,0,0,.86); }
dialog article { padding:clamp(22px,5vw,48px); position:relative; }
dialog h2 { margin-top:0; font-size:clamp(1.4rem,4vw,2.4rem); }
dialog p,dialog dd { line-height:1.6; }
dialog dl { display:grid; grid-template-columns:minmax(150px,1fr) 1.5fr; border-block:1px solid var(--dim); }
dialog dt,dialog dd { margin:0; padding:10px 0; border-bottom:1px dotted var(--dim); }
.close { position:absolute; top:10px; right:10px; font-size:1.2rem; }
.credit { margin-top:28px; font-size:.85rem; }
.stats-dialog { width:min(920px,calc(100% - 24px)); }
.stats-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--dim); }
.stats-heading h2 { margin-bottom:0; }
.eyebrow,.metric-label { margin:0 0 5px; color:var(--dim); font-size:.7rem; letter-spacing:.16em; }
.source-badge { flex:0 0 auto; padding:5px 7px; color:var(--dim); border:1px solid var(--dim); font-size:.62rem; letter-spacing:.08em; }
.stats-readout { display:grid; grid-template-columns:.7fr 1.3fr 2fr; border-bottom:1px solid var(--dim); }
.stats-readout section { min-width:0; padding:18px 16px 18px 0; }
.stats-readout section + section { padding-left:16px; border-left:1px dotted var(--dim); }
.stats-readout strong { display:block; overflow-wrap:anywhere; font-size:clamp(1rem,2.3vw,1.5rem); }
#stat-bytes { font-size:clamp(.8rem,1.55vw,1.05rem); line-height:1.5; }
#stat-progress { font-size:clamp(.72rem,1.35vw,.95rem); line-height:1.45; }
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.chart-panel { min-width:0; padding:16px; border:1px solid var(--dim); background-image:linear-gradient(var(--chart-grid) 1px,transparent 1px),linear-gradient(90deg,var(--chart-grid) 1px,transparent 1px); background-size:12px 12px; }
.chart-panel h3 { margin:0 0 12px; color:var(--dim); font-size:.75rem; letter-spacing:.14em; }
.retro-chart { display:grid; grid-template-columns:minmax(116px,42%) 1fr; align-items:center; gap:16px; min-height:170px; background:var(--panel); }
.donut { display:block; width:100%; height:auto; transform:rotate(-90deg); filter:drop-shadow(0 0 5px var(--glow)); }
.donut .track { fill:none; stroke:var(--chart-grid); stroke-width:14; }
.donut .segment { fill:none; stroke-width:14; stroke-linecap:butt; }
.chart-legend { display:grid; gap:8px; min-width:0; margin:0; padding:0; list-style:none; font-size:.68rem; }
.chart-legend li { display:grid; grid-template-columns:8px 1fr auto; align-items:start; gap:7px; min-width:0; }
.legend-chip { width:8px; height:8px; margin-top:2px; background:var(--swatch); box-shadow:0 0 5px var(--swatch); }
.legend-name { min-width:0; overflow-wrap:anywhere; color:var(--dim); }
.legend-value { color:var(--fg); text-align:right; }
.empty-chart { grid-column:1/-1; display:flex; min-height:138px; align-items:center; justify-content:center; color:var(--dim); border:1px dashed var(--dim); letter-spacing:.12em; }
.stats-note { margin:18px 0 0; color:var(--dim); font-size:.72rem; }
body[data-mode="dos"] { --fg:#c6c6c6; --dim:#737373; --glow:rgba(198,198,198,.15); --panel:#000084; --chart-1:#fff; --chart-2:#bdbdbd; --chart-3:#858585; --chart-4:#4f4f4f; --chart-grid:rgba(255,255,255,.12); }
body[data-mode="dos"] .terminal-cursor { width:.72em; height:2px; align-self:flex-end; margin-bottom:-1px; }
body[data-mode="dos"] .raster-roll { display:none; }
body[data-mode="dos"] .signal-tear { display:block; }
body[data-mode="dos"] .terminal { animation:crt-flicker 6s infinite,dos-jitter 17s steps(1,end) infinite; }
body[data-mode="rack"] { --fg:#5cff72; --dim:#267c35; --glow:rgba(92,255,114,.18); --panel:#020804; --chart-1:#76ff89; --chart-2:#35c94a; --chart-3:#1b842c; --chart-4:#0f4e1c; --chart-grid:rgba(92,255,114,.12); }
body[data-mode="rack"] .terminal-cursor { width:2px; height:1.15em; }
body[data-mode="rack"] .raster-roll { opacity:.42; animation-duration:16s; }
body[data-mode="rack"] .rack-activity { display:block; }
body[data-mode="now"] { --fg:#e7eef7; --dim:#718096; --glow:rgba(80,180,255,.14); --panel:#0d1117; --font:ui-monospace,SFMono-Regular,Menlo,monospace; --chart-1:#58a6ff; --chart-2:#3fb950; --chart-3:#d29922; --chart-4:#bc8cff; --chart-grid:rgba(113,128,150,.12); text-shadow:none; }
body[data-mode="now"] .terminal { border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.55); animation:none; }
body[data-mode="now"] .terminal::before,body[data-mode="now"] .terminal::after,body[data-mode="now"] .era-artifacts { display:none; }
body[data-mode="now"] .terminal-cursor { width:1px; height:1.15em; box-shadow:none; animation-duration:.9s; }
body[data-mode="now"] .monitor { border-radius:18px; background:#161b22; }
body[data-mode="now"] .monitor-controls { opacity:.45; }
@keyframes crt-flicker { 0%,18%,22%,62%,100% { opacity:1; } 19% { opacity:.985; } 63% { opacity:.992; } }
@keyframes cursor-blink { 0%,52% { opacity:1; } 53%,100% { opacity:0; } }
@keyframes raster-roll { from { transform:translateY(0); } to { transform:translateY(760%); } }
@keyframes signal-tear { 0%,91%,96%,100% { transform:translateX(0); opacity:.05; } 92% { transform:translateX(13px); opacity:.16; } 93% { transform:translateX(-7px); opacity:.1; } }
@keyframes led-pulse { 0%,28%,32%,68%,100% { opacity:.2; } 29%,31%,69%,76% { opacity:1; } }
@keyframes dos-jitter { 0%,96%,98%,100% { transform:translateX(0); } 97% { transform:translateX(.4px); } }
@keyframes tape-wobble { 0%,100% { transform:rotate(-.15deg); } 50% { transform:rotate(.15deg); } }
@keyframes paper-feed { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }
@media (max-width:720px) { .stats-readout { grid-template-columns:1fr; } .stats-readout section + section { padding-left:0; border-left:0; border-top:1px dotted var(--dim); } .charts-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .topline { align-items:flex-start; flex-direction:column; } nav { justify-content:flex-start; } footer { align-items:flex-start; flex-direction:column; } dialog dl { grid-template-columns:1fr; } dialog dd { padding-top:0; } .stats-heading { flex-direction:column; } .retro-chart { grid-template-columns:minmax(100px,36%) 1fr; } .medium-preview { grid-template-columns:1fr; } .medium-visual { width:min(100%,220px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }