/* ---------- BOOT ---------- */
#boot {
  position: fixed; inset: 0; z-index: 9999; background: #000; color: #c8d0dc;
  font-family: var(--font-mono); font-size: 13px; overflow: hidden;
  transition: opacity .5s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-stage { position: absolute; inset: 0; display: none; }
.boot-stage.on { display: block; }
#grub { display: none; place-items: center; }
#grub.on { display: grid; }
.grub-box { width: min(640px, calc(100% - 32px)); }
.grub-head { text-align: center; margin-bottom: 14px; color: #c8d0dc; }
.grub-menu { border: 1px solid #c8d0dc; padding: 6px 0; min-height: 190px; }
.grub-menu div { padding: 1px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grub-menu .sel { background: #c8d0dc; color: #000; }
.grub-foot { margin-top: 12px; font-size: 12px; line-height: 1.6; }
#klog { padding: 12px 16px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
#klog .okb { color: var(--ok); }
#klog .dim { color: #6f7b8f; }
#klog .info { color: var(--accent); }
#splash { display: none; place-items: center; background: radial-gradient(circle at 50% 45%, #0d1a2e 0%, #000 65%); }
#splash.on { display: grid; }
.splash-in { display: grid; justify-items: center; gap: 18px; }
.splash-in svg { width: 96px; height: 96px; filter: drop-shadow(0 0 22px rgba(59,158,255,.45)); }
.splash-name { font-family: var(--font-display); font-size: 28px; letter-spacing: .12em; color: var(--fg); }
.splash-bar { width: 180px; height: 3px; background: #1a2436; border-radius: 3px; overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.1s cubic-bezier(.3,.7,.2,1); }
.boot-skip { position: absolute; right: 16px; bottom: 14px; color: #5d6879; font-size: 12px; }