html.retro-loading { overflow:hidden; scrollbar-gutter:stable; background:#08090b; }
.retro-boot {
  --boot-ink:#08090b; --boot-silver:#d3d6db; --boot-muted:#949aa5; --boot-rule:#454851;
  position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  margin:0; border:0; border-radius:0; padding:clamp(20px,4vw,48px); overflow:hidden;
  background:var(--boot-ink); color:var(--boot-silver); box-sizing:border-box;
  font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  opacity:1; transition:opacity 180ms linear; touch-action:none;
}
.retro-boot[open] { display:grid; grid-template-rows:auto 1fr auto; }
.retro-boot::backdrop { background:var(--boot-ink); backdrop-filter:none; }
.retro-boot::before { content:""; pointer-events:none; position:absolute; inset:0; opacity:.045; background:repeating-linear-gradient(0deg,transparent 0 3px,#d3d6db 3px 4px); }
.retro-boot.is-finishing { opacity:0; }
.retro-boot-top, .retro-boot-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; letter-spacing:.14em; }
.retro-boot-top { padding-top:env(safe-area-inset-top,0px); }
.retro-boot-bottom { padding-bottom:env(safe-area-inset-bottom,0px); color:var(--boot-muted); font-size:8px; }
.retro-boot-skip { appearance:none; min-height:44px; border:0; padding:8px; margin-right:-8px; background:none; color:var(--boot-silver); font:inherit; font-size:9px; letter-spacing:.12em; cursor:pointer; }
.retro-boot-skip:hover { text-decoration:underline; text-underline-offset:4px; }
.retro-boot-skip:focus-visible { outline:2px solid var(--boot-silver); outline-offset:4px; }
.retro-boot-center { align-self:center; justify-self:center; text-align:center; width:min(100%,400px); padding-bottom:24px; }
.retro-boot-logo { font:900 italic clamp(112px,22vw,210px)/1 Arial,sans-serif; letter-spacing:-.09em; padding-right:.12em; background:linear-gradient(#fff 4%,#d9dbe0 28%,#777d8a 47%,#eff0f4 49%,#949aa5 72%,#e3e6ec 90%); background-clip:text; color:transparent; filter:drop-shadow(0 0 18px #ffffff14); }
.retro-boot-title { font:9px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.32em; margin:24px 0 44px; color:var(--boot-silver); }
.retro-boot-progress { width:min(100%,256px); margin:auto; }
.retro-boot-meter { display:grid; grid-template-columns:repeat(16,1fr); gap:4px; height:12px; padding:2px; border:1px solid var(--boot-rule); }
.retro-boot-meter i { display:block; background:var(--boot-silver); opacity:.13; }
.retro-boot-meter i.is-loaded { opacity:1; }
.retro-boot-status { display:flex; justify-content:space-between; gap:16px; margin-top:12px; font-size:8px; letter-spacing:.12em; color:var(--boot-muted); }
.retro-disc { display:inline-block; width:12px; height:12px; border:1px solid var(--boot-rule); border-top-color:var(--boot-silver); border-radius:50%; vertical-align:middle; margin-right:8px; animation:retro-disc-read 1.4s linear infinite; }
@keyframes retro-disc-read { to { transform:rotate(360deg); } }
@media(max-width:400px) { .retro-boot-top { font-size:8px; } .retro-boot-bottom { font-size:7px; letter-spacing:.08em; } }
@media(prefers-reduced-motion:reduce) { .retro-boot { transition:none; } .retro-disc { animation:none; } }

.retro-boot-logo { position:relative; }
.retro-boot-logo::before, .retro-boot-logo::after { content:attr(data-mark); position:absolute; inset:0; padding-right:.12em; opacity:0; pointer-events:none; }
.retro-boot-logo::before { color:#a8d8df; clip-path:inset(20% 0 50% 0); }
.retro-boot-logo::after { color:#d9a6ae; clip-path:inset(55% 0 20% 0); }
.retro-boot[data-boot-store].is-finishing { --boot-tear:clamp(4px,2vw,18px); animation:retro-store-cut 1000ms linear both; transition:none; }
.retro-boot[data-boot-store].is-finishing .retro-boot-logo { animation:retro-logo-tear 1000ms steps(1,end) both; }
.retro-boot[data-boot-store].is-finishing .retro-boot-logo::before { animation:retro-chroma-left 1000ms steps(1,end) both; }
.retro-boot[data-boot-store].is-finishing .retro-boot-logo::after { animation:retro-chroma-right 1000ms steps(1,end) both; }
@keyframes retro-store-cut { 0%,84% { opacity:1; } 100% { opacity:0; } }
@keyframes retro-logo-tear {
  0%,16%,44%,72%,100% { transform:none; }
  8%,52% { transform:translateX(calc(var(--boot-tear) * -.45)); }
  28%,64% { transform:translateX(calc(var(--boot-tear) * .45)); }
  80% { transform:translateX(calc(var(--boot-tear) * -.25)); }
}
@keyframes retro-chroma-left {
  0%,100% { opacity:0; transform:none; }
  8% { opacity:.95; transform:translateX(calc(var(--boot-tear) * -1)); clip-path:inset(14% 0 59% 0); }
  24% { opacity:.85; transform:translateX(var(--boot-tear)); clip-path:inset(34% 0 47% 0); }
  40% { opacity:.95; transform:translateX(calc(var(--boot-tear) * -.7)); clip-path:inset(8% 0 68% 0); }
  56% { opacity:.8; transform:translateX(var(--boot-tear)); clip-path:inset(42% 0 36% 0); }
  72% { opacity:.9; transform:translateX(calc(var(--boot-tear) * -1)); clip-path:inset(22% 0 49% 0); }
  88% { opacity:.45; transform:translateX(calc(var(--boot-tear) * .35)); clip-path:inset(30% 0 44% 0); }
}
@keyframes retro-chroma-right {
  0%,100% { opacity:0; transform:none; }
  8% { opacity:.9; transform:translateX(var(--boot-tear)); clip-path:inset(55% 0 15% 0); }
  24% { opacity:.95; transform:translateX(calc(var(--boot-tear) * -1)); clip-path:inset(68% 0 8% 0); }
  40% { opacity:.85; transform:translateX(var(--boot-tear)); clip-path:inset(48% 0 32% 0); }
  56% { opacity:.95; transform:translateX(calc(var(--boot-tear) * -.8)); clip-path:inset(62% 0 10% 0); }
  72% { opacity:.85; transform:translateX(var(--boot-tear)); clip-path:inset(46% 0 29% 0); }
  88% { opacity:.4; transform:translateX(calc(var(--boot-tear) * -.35)); clip-path:inset(58% 0 20% 0); }
}
@media(prefers-reduced-motion:reduce) {
  .retro-boot[data-boot-store].is-finishing,
  .retro-boot[data-boot-store].is-finishing .retro-boot-logo,
  .retro-boot[data-boot-store].is-finishing .retro-boot-logo::before,
  .retro-boot[data-boot-store].is-finishing .retro-boot-logo::after { animation:none; }
}