:root { --bg:#050505; --surface:#0e0e0e; --surface-2:#191919; --surface-3:#262626; --line:#484848; --muted:#969696; --text:#e8e8e8; --accent:#cdcdcd; --safe:clamp(24px,5vw,80px); --radius:14px; --radius-sm:9px; }
@font-face { font-family:"Oxanium"; src:url("fonts/Oxanium.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("fonts/Manrope.ttf") format("truetype"); font-weight:100 900; font-display:swap; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:var(--bg); color:var(--text); font-family:"Manrope",Arial,sans-serif; letter-spacing:.025em; }
.background-video,#field,.video-shade,.noise { position:fixed; inset:0; width:100%; height:100%; }
.background-video { z-index:0; object-fit:cover; opacity:.46; pointer-events:none; transition:opacity .3s ease; }
#field { z-index:1; opacity:.88; pointer-events:none; }
.video-shade { z-index:2; pointer-events:none; background:linear-gradient(110deg,rgba(5,5,5,.88),rgba(5,5,5,.54) 52%,rgba(5,5,5,.76)); }
.noise { z-index:3; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.shell { position:relative; z-index:4; min-height:100%; padding:var(--safe); display:grid; grid-template-rows:auto 1fr auto; pointer-events:none; }
.topbar,.progress-head,.progress-meta,.action-group,.info-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topbar { gap:24px; }
.action-group,.status-pill,.ui-button,.text-button { pointer-events:auto; }
.eyebrow { margin:0; color:var(--muted); letter-spacing:.12em; font-size:12px; font-weight:600; }
.ui-button,.text-button { appearance:none; border:0; cursor:pointer; color:var(--text); font-family:inherit; font-weight:700; letter-spacing:.08em; }
.ui-button { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(14,14,14,.92); font-size:10px; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.ui-button:hover,.ui-button:focus-visible { border-color:var(--text); background:var(--surface-3); outline:0; }
.ui-button:active { transform:translateY(1px); }
.status-pill { color:var(--text); display:flex; align-items:center; gap:8px; white-space:nowrap; padding:7px 11px; border:1px solid rgba(82,190,122,.5); border-radius:999px; background:rgba(82,190,122,.12); font-size:10px; font-weight:700; letter-spacing:.11em; }
.status-pill i { width:6px; height:6px; border-radius:50%; background:#52be7a; box-shadow:0 0 12px rgba(82,190,122,.8); animation:pulse 1.8s ease-in-out infinite; }
.hero { align-self:center; display:flex; justify-content:center; margin:6vh 0; }
.title-wrap { width:min(900px,100%); padding:clamp(24px,3vw,44px); border:1px solid var(--line); border-radius:var(--radius); background:rgba(14,14,14,.88); box-shadow:0 16px 44px rgba(0,0,0,.28); }
h1 { margin:12px 0 0; overflow:hidden; text-overflow:ellipsis; font-family:"Oxanium",Arial,sans-serif; font-size:clamp(38px,5vw,76px); font-weight:700; line-height:.94; letter-spacing:-.04em; }
h1 em { color:var(--muted); font-style:normal; }
.info-panel { width:min(520px,100%); margin:0 0 18px auto; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(14,14,14,.94); box-shadow:0 16px 44px rgba(0,0,0,.25); pointer-events:auto; }
.info-panel[hidden] { display:none; }
.text-button { padding:5px 0; background:transparent; color:var(--muted); font-size:10px; }
.text-button:hover,.text-button:focus-visible { color:var(--text); outline:0; }
.info-panel p { margin:14px 0 0; color:var(--text); font-size:clamp(13px,1.2vw,16px); font-weight:500; line-height:1.5; }
.telemetry { width:min(760px,100%); align-self:end; margin-left:auto; padding:clamp(18px,2vw,28px); border:1px solid var(--line); border-radius:var(--radius); background:rgba(14,14,14,.94); box-shadow:0 16px 44px rgba(0,0,0,.25); }
.progress-head { margin-bottom:12px; }
.progress-head strong { display:block; font-size:clamp(13px,1.25vw,17px); font-weight:600; letter-spacing:.04em; }
.percent { font:700 clamp(35px,4vw,58px)/.8 "Oxanium",Arial,sans-serif; letter-spacing:-.06em; }
.percent span { color:var(--muted); font-size:.46em; margin-left:3px; }
.progress-track { height:8px; padding:1px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); overflow:hidden; }
.progress-fill { width:0%; height:100%; border-radius:999px; background:var(--accent); box-shadow:0 0 18px rgba(205,205,205,.45); transition:width .32s cubic-bezier(.2,.7,.2,1); }
.progress-meta { margin-top:12px; color:var(--muted); font-size:11px; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.72); } }
@media (max-width:760px) { .shell{padding:26px}.topbar{align-items:flex-start}.action-group{flex-wrap:wrap}.hero{margin:auto 0}.title-wrap{width:100%}.telemetry{margin:0}.info-panel{margin:0 0 14px}.status-pill{font-size:8px;padding:6px 8px} }
@media (prefers-reduced-motion:reduce) { .background-video{display:none}.status-pill i{animation:none}.progress-fill{transition:none}.ui-button{transition:none} }