#boot{position:fixed;inset:0;z-index:999;overflow:hidden;background:#05060B;color:#EEF1F7;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;transition:opacity .6s ease, visibility .6s}
      #boot.done{opacity:0;visibility:hidden}
      #boot.synced,#boot.done{pointer-events:none}
      #boot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
      /* a soft vignette frames the tunnel and keeps the text readable */
      #boot .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 44%, transparent 40%, rgba(5,6,11,.55) 80%, rgba(5,6,11,.9) 100%)}
      #boot .stage{position:absolute;left:50%;bottom:max(7vh,40px);transform:translateX(-50%);width:min(420px,88vw);display:flex;flex-direction:column;align-items:center;gap:16px;transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s}
      #boot .mark{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;color:#EEF1F7;text-shadow:0 2px 20px rgba(5,6,11,.9)}
      #boot .mark small{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:12px;color:#98A2B8}
      #boot .mark .bars{display:flex;gap:2px}
      #boot .mark .bars i{width:3px;height:18px;border-radius:2px;background:#4D8DFF}
      #boot .mark .bars i:nth-child(2){background:#FF7A1A}#boot .mark .bars i:nth-child(3){background:#2BD36B}
      #boot.synced .stage{transform:translateX(-50%) scale(1.03)}
      #boot.done{transition:opacity .7s ease, visibility .7s, filter .7s;filter:brightness(1.6)}
      #boot .ont{display:flex;gap:22px;padding:12px 18px;border-radius:12px;background:#0D111D;border:1px solid #2A3350;box-shadow:0 14px 34px -14px rgba(0,0,0,.8)}
      #boot .led{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;color:#98A2B8}
      #boot .led b{width:9px;height:9px;border-radius:50%;background:#1D2438}
      #boot .led.pwr b{background:#2BD36B;box-shadow:0 0 10px #2BD36B}
      #boot .led.pon b{background:#2BD36B;box-shadow:0 0 10px #2BD36B;animation:bootBlink .5s steps(2,start) infinite}
      #boot .led.lan b{background:#2BD36B;box-shadow:0 0 8px #2BD36B;animation:bootBlink .18s steps(2,start) infinite}
      #boot.done .led.pon b,#boot.synced .led.pon b{animation:none}
      #boot .pct{display:flex;align-items:baseline;gap:4px;width:100%;max-width:280px;flex-wrap:wrap;justify-content:center;font-variant-numeric:tabular-nums}
      #boot .pct b{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em;color:#EEF1F7;text-shadow:0 0 24px rgba(77,141,255,.55)}
      #boot .pct span{font-size:16px;color:#98A2B8}
      #boot .pct i{display:block;flex-basis:100%;height:3px;margin-top:10px;border-radius:3px;background:rgba(77,141,255,.16);overflow:hidden}
      #boot .pct em{display:block;height:100%;background:linear-gradient(90deg,#4D8DFF,#2BD36B 60%,#FFD21F);box-shadow:0 0 12px #4D8DFF;transform-origin:left;transform:scaleX(0);transition:transform .25s ease}
      #boot .read{font-size:13px;color:#C4CBDA;font-variant-numeric:tabular-nums;min-height:1.4em}
      #boot .read em{font-style:normal;color:#2BD36B}
      @keyframes bootBlink{to{visibility:hidden}}
      @media (prefers-reduced-motion: reduce){#boot *{animation:none !important}}
/* light visitors: the same tunnel on paper */
html[data-theme="light"] #boot{background:#F3F5F9;color:#0E1422}
html[data-theme="light"] #boot .vig{background:radial-gradient(ellipse 75% 70% at 50% 44%, transparent 40%, rgba(243,245,249,.6) 80%, rgba(243,245,249,.95) 100%)}
html[data-theme="light"] #boot .mark{color:#0E1422;text-shadow:0 2px 20px rgba(243,245,249,.9)}
html[data-theme="light"] #boot .mark small{color:#566079}
html[data-theme="light"] #boot .ont{background:#fff;border-color:#1B2130;box-shadow:0 14px 34px -18px rgba(16,24,40,.4)}
html[data-theme="light"] #boot .led{color:#566079}
html[data-theme="light"] #boot .led.los b{background:#D5DBE6}
html[data-theme="light"] #boot .read{color:#2E3850}
html[data-theme="light"] #boot .read em{color:#0B7A3B}
html[data-theme="light"] #boot.done{filter:none}
html[data-theme="light"] #boot .pct b{color:#0E1422;text-shadow:none}
html[data-theme="light"] #boot .pct span{color:#566079}
html[data-theme="light"] #boot .pct i{background:rgba(14,20,34,.1)}