/* Desktop glass with industrial terminal details; intro styles stay local. */
html.site-loading { overflow: hidden; }
#site-loader {
  --boot-accent: #788519;
  --boot-fill: #b6c84f;
  --boot-panel: rgba(247, 250, 252, .76);
  --boot-solid: #f0f3f3;
  --boot-text: #252529;
  --boot-muted: #70776f;
  --boot-line: rgba(39, 48, 41, .12);
  --boot-edge: rgba(255, 255, 255, .8);
  --boot-shadow: 0 28px 72px #222d3026, 0 4px 14px #222d3014, inset 0 1px 0 #ffffffdd;
  position: fixed; inset: 0; z-index: 20000; overflow: auto;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box; color: var(--boot-text); color-scheme: light;
  background: radial-gradient(var(--wallpaper-dot, #38414424) .7px, transparent .7px), linear-gradient(132deg, var(--wallpaper-a, #d9e0df), var(--wallpaper-b, #f0f1ee) 48%, var(--wallpaper-c, #d8dde5));
  background-size: 24px 24px, auto;
  font: 13px/1.5 var(--site-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif);
  text-align: left; isolation: isolate; transition: opacity 360ms ease;
}
:root[data-theme="dark"] #site-loader {
  --boot-accent: #cfdf79;
  --boot-fill: #ccdc75;
  --boot-panel: rgba(37, 43, 50, .76);
  --boot-solid: #252b32;
  --boot-text: #f5f5f7;
  --boot-muted: #a0a99d;
  --boot-line: rgba(255, 255, 255, .12);
  --boot-edge: rgba(255, 255, 255, .16);
  --boot-shadow: 0 28px 72px #00000055, 0 4px 14px #00000022, inset 0 1px 0 #ffffff22;
  color-scheme: dark;
}
#site-loader *, #site-loader *::before, #site-loader *::after { box-sizing: border-box; }
#site-loader.is-leaving { opacity: 0; pointer-events: none; }
#site-loader .boot-window {
  width: min(840px, 100%); position: relative; overflow: hidden;
  background: var(--boot-panel); border: 1px solid var(--boot-edge); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--boot-shadow); backdrop-filter: blur(28px) saturate(145%); -webkit-backdrop-filter: blur(28px) saturate(145%);
  transition: transform 480ms cubic-bezier(.22,1,.36,1);
}
#site-loader.is-leaving .boot-window { transform: translateY(-8px) scale(.985); }
#site-loader .boot-top { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--boot-line); background: linear-gradient(#ffffff16, #ffffff02); }
#site-loader .boot-lights { display: flex; align-items: center; gap: 8px; }
#site-loader .boot-lights span { width: 12px; height: 12px; border-radius: 50%; border: .5px solid #0002; box-shadow: inset 0 1px 1px #ffffff38; }
#site-loader .boot-lights span:nth-child(1) { background: #ff5f57; }
#site-loader .boot-lights span:nth-child(2) { background: #febc2e; }
#site-loader .boot-lights span:nth-child(3) { background: #28c840; }
#site-loader .boot-brand { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 600; }
#site-loader .boot-brand svg { width: 17px; height: 17px; color: var(--boot-muted); }
#site-loader .boot-top-code { justify-self: end; color: var(--boot-muted); font: 10px "SFMono-Regular", Consolas, monospace; }
#site-loader .boot-core { padding: 44px 42px 32px; position: relative; }
#site-loader .boot-code { display: flex; align-items: center; gap: 9px; color: var(--boot-accent); font: 10px/1.5 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; }
#site-loader .boot-code::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--boot-accent); }
#site-loader .boot-visual { position: absolute; right: 26px; top: 25px; width: 186px; height: 186px; pointer-events: none; }
#site-loader .boot-visual svg { width: 100%; height: 100%; }
#site-loader .boot-axis { color: var(--boot-muted); opacity: .22; }
#site-loader .boot-wire { color: var(--boot-text); opacity: .4; }
#site-loader .boot-orbit, #site-loader .boot-highlight { color: var(--boot-accent); }
#site-loader .boot-orbit { transform-origin: 130px 130px; animation: boot-orbit 18s linear infinite; }
#site-loader .boot-wordmark { position: relative; width: max-content; max-width: 100%; margin: 24px 0 0; font-size: clamp(30px, 5.7vw, 52px); font-weight: 650; line-height: 1.15; letter-spacing: -.045em; }
#site-loader .boot-wordmark::after { content: "/"; margin-left: 10px; color: var(--boot-accent); font-weight: 300; }
#site-loader .boot-subtitle { position: relative; margin: 11px 0 56px; color: var(--boot-muted); font-size: 11px; letter-spacing: .04em; }
#site-loader .boot-progress-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
#site-loader .boot-status { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
#site-loader .boot-status-code { margin: 0; font: 10px/1.5 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; color: var(--boot-muted); }
#site-loader .boot-percentage { font: 500 32px/1 "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
#site-loader .boot-percentage small { font-size: 12px; margin-left: 5px; color: var(--boot-muted); }
#site-loader .boot-progress { height: 6px; margin-top: 16px; border-radius: 3px; background: var(--boot-line); position: relative; overflow: hidden; mask-image: repeating-linear-gradient(90deg, #000 0 23px, transparent 23px 26px); }
#site-loader .boot-progress-fill { display: block; height: 100%; width: 0; background: var(--boot-fill); transition: width 120ms linear; }
#site-loader .boot-stages { display: flex; gap: 28px; margin-top: 13px; color: var(--boot-muted); font-size: 10px; }
#site-loader .boot-stages span[data-active] { color: var(--boot-accent); }
#site-loader .boot-stages b { margin-right: 7px; font: 10px "SFMono-Regular", Consolas, monospace; }
#site-loader .boot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 42px; border-top: 1px solid var(--boot-line); background: #ffffff03; }
#site-loader .boot-footer-code { display: flex; align-items: center; gap: 10px; font: 9px/1.5 "SFMono-Regular", Consolas, monospace; color: var(--boot-muted); letter-spacing: .08em; }
#site-loader .boot-stripes { height: 8px; width: 27px; opacity: .75; background: repeating-linear-gradient(120deg, var(--boot-accent) 0 2px, transparent 2px 5px); }
@keyframes boot-orbit { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  #site-loader { padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
  #site-loader .boot-top { grid-template-columns: 60px 1fr 60px; padding: 0 12px; }
  #site-loader .boot-top-code { font-size: 9px; }
  #site-loader .boot-core { padding: 150px 22px 26px; }
  #site-loader .boot-visual { width: 134px; height: 134px; top: 11px; right: 18px; }
  #site-loader .boot-wordmark { font-size: clamp(24px, 7.2vw, 39px); margin-top: 18px; }
  #site-loader .boot-wordmark::after { margin-left: 6px; }
  #site-loader .boot-subtitle { font-size: 10px; line-height: 1.7; margin-bottom: 32px; }
  #site-loader .boot-stages { justify-content: space-between; gap: 8px; }
  #site-loader .boot-percentage { font-size: 28px; }
  #site-loader .boot-bottom { padding: 14px 22px; gap: 10px; flex-wrap: wrap; }
  #site-loader .boot-footer-code { font-size: 8px; letter-spacing: 0; gap: 6px; }
  #site-loader .boot-stripes { width: 19px; }
}
@media (max-height: 560px) {
  #site-loader { padding: 12px; }
  #site-loader .boot-core { padding-top: 24px; padding-bottom: 20px; }
  #site-loader .boot-subtitle { margin-bottom: 28px; }
  #site-loader .boot-visual { width: 130px; height: 130px; top: 8px; right: 14px; opacity: .22; }
  #site-loader .boot-wordmark { font-size: clamp(24px, 5vw, 40px); }
  #site-loader .boot-bottom { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #site-loader, #site-loader .boot-window, #site-loader .boot-progress-fill { transition: none; }
  #site-loader .boot-orbit { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #site-loader .boot-window { background: var(--boot-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media print { #site-loader { display: none; } }
