:root { --ink:#f5fbff; --ice:#93efff; --red:#ff313e; --yellow:#ffd21c; --blue:#2387ff; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; overflow:hidden; background:#000; }
body { color:var(--ink); font-family:Arial,"Microsoft JhengHei",sans-serif; }
.loading-screen { position:absolute; width:100vw; height:100svh; min-height:420px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 72% 68%,rgba(13,86,110,.12),transparent 40%),#000; }
.ambient { position:absolute; inset:0; opacity:.28; background:radial-gradient(circle at 78% 65%,rgba(55,199,255,.09),transparent 35%); animation:ambient-pulse 4s ease-in-out infinite alternate; }
.brand-heading { position:absolute; z-index:6; top:15vh; left:15vw; white-space:nowrap; }
.brand-heading h1 { margin:0; color:#b8d9ff; font-size:clamp(24px,2.65vw,43px); font-weight:500; letter-spacing:.035em; text-shadow:0 0 5px rgba(77, 136, 255, 1),0 0 12px rgba(77, 136, 255, .95),0 0 25px rgba(42, 124, 255, .85),0 0 40px rgba(42, 124, 255, .65),0 0 60px rgba(42, 124, 255, .4); }
.brand-heading p { margin:clamp(10px,1.6vh,18px) 0 0; color:rgba(255,255,255,.94); font-size:clamp(20px,2.2vw,35px); font-weight:400; letter-spacing:.02em; text-shadow:0 0 9px rgba(170,225,255,.25); }
.circuit-stage { position:absolute; inset:0; perspective:1250px; perspective-origin:66% 78%; }
.circuit-plane { position:absolute; width:1310px; height:820px; left:66vw; top:79vh; transform-origin:270px 720px; transform:translate(-270px,-720px) rotateZ(-18deg) rotateX(50deg) scale(1.38); transform-style:preserve-3d; filter:drop-shadow(0 0 12px rgba(115,231,255,.18)); }
.circuit-base,.current-layer { position:absolute; inset:0; width:100%; height:100%; }
.circuit-base { opacity:.86; filter:grayscale(1) brightness(0) invert(1) drop-shadow(0 0 2px rgba(135,235,255,.45)); }
.current-layer { overflow:visible; }
.phase-paths path,.control-current path { fill:none; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:.012 .052; animation:current-flow .75s linear infinite; filter:url(#electric-glow); }
.phase-r path { stroke:var(--red); }
.phase-s path { stroke:var(--yellow); animation-delay:-.22s; }
.phase-t path { stroke:var(--blue); animation-delay:-.44s; }
.control-current path { stroke:var(--ice); stroke-width:3.2; stroke-dasharray:.01 .07; animation-duration:1.05s; }
.motor { transform-box:fill-box; transform-origin:center; }
.motor-arc { fill:none; stroke-width:5; stroke-linecap:round; stroke-dasharray:.18 .16 .07 .59; filter:url(#motor-glow); transform-box:fill-box; transform-origin:center; animation:motor-spin 1.15s linear infinite; }
.arc-r { stroke:var(--red); }
.arc-s { stroke:var(--yellow); animation-duration:1.35s; animation-direction:reverse; }
.arc-t { stroke:var(--blue); animation-duration:.95s; }
.motor-core { fill:rgba(0,0,0,.58); stroke:rgba(255,255,255,.9); stroke-width:1.6; filter:drop-shadow(0 0 7px rgba(120,225,255,.32)); }
.loading-readout { position:absolute; z-index:5; width:clamp(250px,31vw,470px); text-shadow:0 0 16px rgba(130,225,255,.28); margin-top: 25%;}
.loading-line { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.loading-line strong { font:300 clamp(54px,8vw,118px)/.9 Arial,sans-serif; letter-spacing:-.07em; font-variant-numeric:tabular-nums; }
.percent { font:300 clamp(22px,3vw,42px)/1 Arial,sans-serif; }
.loading-word { margin-left:clamp(8px,1.4vw,24px); font-size:clamp(17px,2vw,30px); font-weight:600; letter-spacing:.02em; }
.status-row { display:flex; justify-content:space-between; margin:20px 0 10px; color:rgba(214,242,250,.58); font:500 clamp(9px,.8vw,12px)/1.2 monospace; letter-spacing:.16em; }
#download-status { color:var(--ice); letter-spacing:.08em; }
.progress-track { height:2px; overflow:hidden; background:rgba(167,229,245,.16); }
.progress-track i { display:block; width:0; height:100%; background:linear-gradient(90deg,rgba(255,255,255,.45),var(--ice)); box-shadow:0 0 12px var(--ice); transition:width .12s linear; }
@keyframes current-flow { to { stroke-dashoffset:-.128; } }
@keyframes motor-spin { to { transform:rotate(360deg); } }
@keyframes ambient-pulse { to { opacity:.52; } }
@media (max-width:760px) { .brand-heading { top:24px; } .brand-heading h1 { font-size:clamp(20px,5.5vw,30px); } .brand-heading p { font-size:clamp(14px,3.8vw,19px); } .circuit-plane { left:62vw; top:71vh; transform:translate(-270px,-720px) rotateZ(-18deg) rotateX(50deg) scale(.88); } .loading-readout { width:58vw; } #system-status { display:none; } .status-row { justify-content:flex-end; margin-top:13px; } }
@media (max-height:300px) { .loading-readout { width: 58vw; margin-top: 5%;} }
@media (orientation:portrait) { .circuit-plane { left:62vw; top:63vh; transform:translate(-270px,-720px) rotateZ(-18deg) rotateX(50deg) scale(.7); } .loading-readout { width:min(72vw,430px); } }
@media (prefers-reduced-motion:reduce) { .phase-paths path,.control-current path { animation-duration:2.4s; } .motor-arc { animation-duration:3.6s; } }