:root { color-scheme: dark; background:#050507; color:#fffaf1; font-family:"Open Sans",system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; position:relative; isolation:isolate; } a { color:inherit; } button { font:inherit; cursor:pointer; } [hidden] { display:none !important; }
.network-ambient { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 72% 35%,#46150766 0,transparent 37%),radial-gradient(ellipse at 8% 88%,#39100e88 0,transparent 35%); }
.network-ambient svg { position:absolute; inset:0; width:100%; height:100%; }
.ambient-depth { position:absolute; width:min(85vw,1000px); aspect-ratio:1; border-radius:50%; pointer-events:none; }
.ambient-depth-left { left:-38%; top:18%; background:radial-gradient(circle,#b62e1b3b 0,#761c1518 36%,transparent 70%); animation:depth-drift-left 26s ease-in-out infinite alternate; }
.ambient-depth-right { right:-30%; top:-38%; background:radial-gradient(circle,#d9662133 0,#8b291814 38%,transparent 70%); animation:depth-drift-right 31s ease-in-out infinite alternate; }
@keyframes depth-drift-left { to { transform:translate(8%, -9%); } }
@keyframes depth-drift-right { to { transform:translate(-8%, 9%); } }
.ambient-embers { position:absolute; inset:0; }
.ambient-embers i { position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:#ffc98b; box-shadow:0 0 9px 3px #f25c2b88; opacity:.5; animation:ember-drift 16s ease-in-out var(--d) infinite alternate; }
.ambient-embers i:nth-child(3n) { width:5px; height:5px; background:#ff8e43; animation-duration:21s; }
@keyframes ember-drift { from { transform:translate3d(0,12px,0); opacity:.18; } to { transform:translate3d(14px,-24px,0); opacity:.8; } }
.ambient-rings { fill:none; stroke:#d56d33; stroke-width:1; opacity:.19; vector-effect:non-scaling-stroke; }
.ambient-rings circle { stroke-dasharray:2 11; } .ambient-rings path { stroke:#ff9a51; stroke-width:1.5; opacity:.65; }
.ambient-facets { fill:none; stroke:#d67136; stroke-width:1; opacity:.16; transform-box:fill-box; transform-origin:center; animation:facet-drift 64s linear infinite; }
.ambient-facets path:nth-child(2) { stroke:#ffc27a; opacity:.6; }
@keyframes facet-drift { to { transform:rotate(360deg); } }
.ambient-traces path,.ambient-lights path { fill:none; vector-effect:non-scaling-stroke; }
.ambient-traces path { stroke:#8a452a; stroke-width:1; opacity:.3; }
.ambient-lights path { stroke:url(#ambient-copper); stroke-width:1.7; stroke-dasharray:28 390; opacity:.68; animation:ambient-flow 17s linear infinite; }
.ambient-lights path:nth-child(2) { animation-delay:-5s; } .ambient-lights path:nth-child(3) { animation-delay:-10s; } .ambient-lights path:nth-child(4) { animation-delay:-14s; }
body:not([data-phase="idle"]) .ambient-lights path { animation-duration:12s; animation-timing-function:steps(24,end); opacity:.9; }
body[data-phase="upload"] .ambient-lights path { animation-direction:reverse; }
body:not([data-phase="idle"]) .ambient-depth, body:not([data-phase="idle"]) .ambient-embers i, body:not([data-phase="idle"]) .ambient-nodes circle, body:not([data-phase="idle"]) .ambient-facets { animation-play-state:paused; }
.ambient-nodes circle { fill:#ffc17a; opacity:.28; animation:node-glow 5s ease-in-out infinite; }
.ambient-nodes circle:nth-child(2n) { animation-delay:-2.5s; }
@keyframes ambient-flow { to { stroke-dashoffset:-418; } }
@keyframes node-glow { 50% { opacity:.8; } }
:focus-visible { outline:3px solid #ffc371; outline-offset:4px; }
.skip-link:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip-link:focus { position:absolute; top:0; left:0; z-index:10; padding:1rem; background:#281411; }
.preview-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:1320px; margin:auto; padding:20px 28px; border-bottom:1px solid #6c492d; }
.preview-header img { display:block; width:150px; height:auto; } nav { display:flex; flex-wrap:wrap; gap:1.5rem; } nav a { text-decoration:none; color:#d9cfc2; } nav a:hover,nav a[aria-current] { color:#ffc67f; }
.preview-header nav a { position:relative; padding:8px 2px; }
.preview-header nav a[aria-current]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#e99e4c; box-shadow:0 0 12px #ff713c88; }
.preview-shell { max-width:1240px; padding:0 28px; margin:auto; } .preview-notice { margin-top:24px; color:#dbb880; font-size:.83rem; }
.preview-stage { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:470px; gap:2rem; }
.preview-intro h1 { font-family:Cinzel,Georgia,serif; font-size:clamp(2.7rem,5vw,5.1rem); line-height:1.06; margin:0 0 20px; letter-spacing:-.035em; }
.preview-intro p { max-width:37ch; color:#d6c4b9; line-height:1.6; } #status { min-height:3em; font-size:.9rem; }
.preview-intro button { border:1px solid #ff9745; border-radius:3px 13px 3px 13px; background:linear-gradient(120deg,#a52c19,#e55c1b); color:white; padding:14px 22px; font-weight:700; }
.preview-intro button:hover:not(:disabled) { border-color:#ffd28a; box-shadow:0 0 22px #e86b2847; }
.preview-intro button:disabled { cursor:not-allowed; opacity:.58; }
.preview-intro #copy { margin-left:8px; background:#251713; border-color:#8b6346; }
.preview-instrument { position:relative; width:min(100%,425px); aspect-ratio:1; margin:auto; display:grid; place-items:center; overflow:clip; }
.instrument-ornament { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#d9a564; stroke-width:1; opacity:.55; pointer-events:none; }
.instrument-ornament path:first-child { stroke:#9f693b; stroke-width:.8; }
.instrument-ornament circle { fill:#ffd29a; stroke:none; filter:drop-shadow(0 0 5px #f78338); }
.preview-instrument[data-phase="idle"] .instrument-ornament { animation:crest-breathe 7s ease-in-out infinite; }
@keyframes crest-breathe { 50% { opacity:.85; } }
.instrument-field { position:absolute; inset:0; overflow:hidden; border-radius:50%; background:radial-gradient(circle at 51% 48%,#240d0b66 0,#12090840 52%,transparent 70%); pointer-events:none; }
.instrument-field i { position:absolute; inset:13%; display:block; border:1px solid #e7843445; border-radius:50%; transform:rotate(-38deg) scaleX(.54); }
.instrument-field i:first-child { inset:7%; border-color:#e87d2d4d; transform:rotate(42deg) scaleY(.5); animation:field-orbit 32s linear infinite; }
.instrument-field i:nth-child(2) { inset:9%; border-style:dashed; border-color:#f0ad6655; transform:rotate(-31deg) scaleY(.64); animation:field-orbit-reverse 43s linear infinite; }
.instrument-field i:nth-child(3) { inset:16%; border-color:#f6bb6b36; transform:rotate(-45deg) scaleX(.62); }
@keyframes field-orbit { to { transform:rotate(402deg) scaleY(.5); } }
@keyframes field-orbit-reverse { to { transform:rotate(-391deg) scaleY(.64); } }
body:not([data-phase="idle"]) .instrument-field i { animation-play-state:paused; }
.fiber-lines { position:absolute; inset:0; width:100%; height:100%; opacity:.34; pointer-events:none; }
.fiber-lines path { fill:none; stroke:#ff7b2b; stroke-width:1.4; stroke-dasharray:22 180; filter:drop-shadow(0 0 5px #f6531c); }
.preview-instrument[data-phase="download"] .fiber-lines path,.preview-instrument[data-phase="upload"] .fiber-lines path { animation:fiber-flow 2.4s linear infinite; opacity:1; }
.fiber-lines path:nth-child(2) { animation-delay:-.8s !important; stroke:#ffd28a; }.fiber-lines path:nth-child(3) { animation-delay:-1.6s !important; }
@keyframes fiber-flow { to { stroke-dashoffset:-202; } }
.orbit { position:absolute; inset:3%; border-radius:50%; border:2px solid #a74d21; box-shadow:0 0 30px #ef541a55,inset 0 0 40px #b13c1728; }
.orbit:before,.orbit:after { content:""; position:absolute; border-radius:50%; inset:10px; border:1px solid #e97b30; }
.orbit:after { inset:25px; border-color:#704021; } .orbit-glow { position:absolute; inset:-3px; border-radius:50%; border:4px solid transparent; border-top-color:#ffc77c; border-right-color:#ff6e1d; transform:rotate(-35deg); filter:drop-shadow(0 0 12px #ff721f); }
.orbit-glow { background:conic-gradient(from 225deg,#ffc77c 0%,#f65d1b var(--level,0%),transparent var(--level,0%)); padding:3px; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; }
.orbit-spark { position:absolute; inset:-3px; border-radius:50%; animation:orbit 12s linear infinite; }
.orbit-spark::before { content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; border-radius:50%; background:#ffd99f; box-shadow:0 0 14px 4px #ff721b; }
.preview-instrument[data-phase="download"] .orbit-spark { animation-duration:3s; }
.preview-instrument[data-phase="upload"] .orbit-spark { animation-duration:3s; animation-direction:reverse; }
.preview-instrument[data-phase="download"] .orbit-glow,.preview-instrument[data-phase="upload"] .orbit-glow { animation:orbit 3s linear infinite; } @keyframes orbit { to { transform:rotate(325deg); } }
.readout { text-align:center; display:grid; gap:6px; position:relative; } .readout span { color:#dfbd9d; } .readout strong { font-size:clamp(4.5rem,9vw,7rem); line-height:1; font-variant-numeric:tabular-nums; }
.readout strong { white-space:nowrap; }
.readout strong[data-empty="true"] { max-width:13ch; color:#f2c495; font-size:clamp(1rem,2vw,1.3rem); font-weight:600; line-height:1.35; }
.preview-instrument[data-phase="prepare"] .orbit { animation:instrument-breathe 2.6s ease-in-out infinite; }
.preview-instrument[data-phase="idle"] .orbit { animation:instrument-breathe 6s ease-in-out infinite; }
@keyframes instrument-breathe { 50% { box-shadow:0 0 43px #ef541a88,inset 0 0 46px #b13c1745; } }
.results { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid #8c5733; background:#160d0cb8; } .results div { padding:20px 18px; } .results div+div { border-left:1px solid #503328; } .results span { display:block; color:#c5aa95; font-size:.82rem; } .results strong { display:block; margin-top:8px; font-size:1.75rem; font-variant-numeric:tabular-nums; } .results small { font-size:.75rem; color:#c5aa95; }
.history { margin:28px 0 0; padding:22px; border:1px solid #503328; border-top-color:#ac7240; background:#160d0ce8; } .history-heading { display:flex; justify-content:space-between; gap:1rem; } .history h2 { margin:0; font-size:1.2rem; } .history p,.method { color:#c5aa95; line-height:1.5; font-size:.85rem; }
.history-heading > span { flex:none; white-space:nowrap; }
.progress-track { height:4px; background:#503328; margin:12px 0; } .progress-track span { display:block; width:0; height:100%; background:#ff8638; } .history svg { width:100%; height:120px; } .history svg * { fill:none; vector-effect:non-scaling-stroke; } .grid { stroke:#5c3828; stroke-width:1; } .download-line { stroke:#ff7134; stroke-width:2; } .upload-line { stroke:#edbd71; stroke-width:2; } .legend { display:flex; gap:24px; color:#dfc0a7; font-size:.8rem; } .legend span:before { content:""; display:inline-block; width:12px; height:3px; background:#ff7134; margin-right:6px; vertical-align:middle; } .legend span+span:before { background:#edbd71; }
.preview-footer { display:flex; justify-content:space-between; gap:1rem; max-width:1240px; margin:35px auto 0; padding:22px 28px; color:#bda694; border-top:1px solid #503328; font-size:.8rem; }
.diagnose-panel { padding:clamp(2.5rem,6vw,5rem) 0 0; }
.diagnose-panel h1 { font-family:Cinzel,Georgia,serif; font-size:clamp(2.5rem,6vw,4.8rem); line-height:1.08; margin:0; }
.diagnose-panel > p { color:#d6c4b9; line-height:1.6; max-width:58ch; }
.diagnose-panel .diagnose-running-note { color:#ffd095; }
#diagnose-frame { width:100%; border:0; display:block; color-scheme:dark; }
@media(max-width:760px) { .preview-header { align-items:flex-start; flex-direction:column; gap:1rem; } .preview-header nav { gap:1rem; font-size:.85rem; } .preview-stage { grid-template-columns:1fr; padding:40px 0; } .preview-instrument { width:min(90%,330px); } .results { grid-template-columns:1fr 1fr; } .results div:nth-child(3) { border-left:0; } .results div:nth-child(n+3) { border-top:1px solid #503328; } .preview-footer { flex-direction:column; } }
@media(max-width:760px) { .ambient-embers i:nth-child(n+10) { display:none; } .ambient-depth { width:115vw; } .ambient-facets { opacity:.09; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }