:root{ --hdr: 64px; }

.home3d .home-site-header{
  position:fixed; inset:0 0 auto 0;
  background:linear-gradient(rgb(4 8 14 / .62), rgb(4 8 14 / 0));
  border-bottom:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  color:rgb(255 255 255 / .94);
  font-family:var(--disp);
  --ui-font:var(--disp);
}
.home3d .home-site-header .brand{ color:rgb(255 255 255 / .94); text-shadow:0 1px 6px rgb(4 8 14 / .6); }
@media (min-width: 1081px){
  .home3d .home-site-header .nav > a,
  .home3d .home-site-header .nav-drop-trigger{ color:rgb(255 255 255 / .94); text-shadow:0 1px 6px rgb(4 8 14 / .6); }
}
@media (max-width: 1080px){
  .home3d .home-site-header .nav{ background:#101a26; border:1px solid rgb(221 231 240 / .16); }
  .home3d .home-site-header .nav > a,
  .home3d .home-site-header .nav-drop-trigger{ color:#dde7f0; }
  .home3d .home-site-header .nav > a:hover,
  .home3d .home-site-header .nav-drop-trigger:hover{ color:#fff; background:rgb(221 231 240 / .08); }
}
.home3d .home-site-header .nav a,
.home3d .home-site-header .nav-drop-trigger{ font-family:var(--disp); font-weight:500; font-size:15px; letter-spacing:.01em; }

#tag{ top:calc(var(--edge) + var(--hdr)); }

@media (min-width: 821px){
  :root{
    --t-title: clamp(40px, 4.6vw, 80px);
    --t-sub:   clamp(12px, .85vw, 15px);
    --t-meta:  clamp(12px, .85vw, 15px);
  }
  .blk{ width:clamp(320px, 31vw, 470px); }
}
.ch-idx{ margin-bottom:.9em; }
.ch-s{ margin-top:.8em; }
.ch-list{
  list-style:none;
  margin-top:1.1em;
  display:grid; gap:.42em;
  font-family:var(--disp);
  font-size:clamp(14px, 1vw, 17px);
  font-weight:400;
  line-height:1.4;
  color:rgb(255 255 255 / .9);
  max-width:36ch;
}
.ch-list li{ position:relative; padding-left:1.25em; }
.ch-list li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:.7em; height:1.5px; background:currentColor; opacity:.75;
}

#sign{
  position:absolute; left:0; top:0;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:0 40px 8px;
  transform-origin:0 0;
  visibility:hidden; opacity:0;
  pointer-events:none;
  background:linear-gradient(#17283d, #0a1420);
  border:12px solid #eef3f8;
  box-shadow:inset 0 0 0 12px #0f1d2d, inset 0 0 0 17px #f97316;
  font-family:'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  text-align:center; white-space:nowrap;
  -webkit-font-smoothing:antialiased;
}
#sign .sign-l1{ font-size:60px; font-weight:600; line-height:1.1; color:#f2f6fa; letter-spacing:.005em; }
#sign .sign-l2{ font-size:104px; font-weight:700; line-height:1.05; color:#ffa04d; letter-spacing:-.005em; }

.ch-cta{
  display:inline-flex; align-items:center; gap:.9em;
  margin-top:1.2em;
  padding:.7em 1.1em .7em 1.2em;
  font-family:var(--mono); font-size:var(--t-meta); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  color:rgb(255 255 255 / .96);
  border:1px solid rgb(255 255 255 / .55);
  background:rgb(4 8 14 / calc(var(--shA) * .55));
  pointer-events:none;
  transition:background .3s linear, border-color .3s linear, gap .35s var(--e-out);
}
.ch-cta i{ display:block; width:22px; height:1px; background:currentColor; }
.ch-cta:hover, .ch-cta:focus-visible{ background:rgb(255 255 255 / .14); border-color:#fff; gap:1.3em; }

#fx{
  position:fixed; z-index:9000;
  right:var(--edge); bottom:var(--edge);
  display:flex; align-items:center; gap:.7em;
  padding:.6em .9em;
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgb(255 255 255 / .82);
  background:rgb(4 8 14 / .42);
  border:1px solid rgb(255 255 255 / .22);
  border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#fx:hover, #fx:focus-visible{ color:#fff; border-color:rgb(255 255 255 / .6); }
.fx-dot{ width:8px; height:8px; border-radius:50%; background:#7dd3fc; box-shadow:0 0 8px #7dd3fc; }
#fx[data-mode="off"] .fx-dot{ background:#94a3b8; box-shadow:none; }
#fx[data-mode="on"] .fx-dot{ background:#facc15; box-shadow:0 0 8px #facc15; }

#lite{ display:none; }
html.is-lite, html.is-lite body{ height:auto; overflow:auto; overscroll-behavior:auto; }
html.is-lite .home-site-header{ background:rgb(10 16 24 / .9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgb(221 231 240 / .1); }
html.is-lite body{ position:static; background:linear-gradient(#101a26, #070b10 70%) fixed; min-height:100dvh; }
html.is-lite #stage, html.is-lite #scroll, html.is-lite #ui, html.is-lite #route,
html.is-lite #descend, html.is-lite #boot{ display:none !important; }
html.is-lite #lite{
  display:block;
  max-width:1080px; margin:0 auto;
  padding:calc(var(--hdr) + clamp(28px, 6vw, 72px)) clamp(16px, 5vw, 48px) 96px;
  color:#dde7f0;
}
.lite-hero{ margin-bottom:clamp(28px, 5vw, 56px); }
.lite-kicker{ font-family:var(--mono); font-size:13px; letter-spacing:.34em; text-transform:uppercase; opacity:.7; }
.lite-hero h1{ font-weight:420; font-stretch:82%; letter-spacing:.24em; font-size:clamp(40px, 9vw, 96px); margin-top:.2em; }
.lite-note{ margin-top:1em; max-width:60ch; font-size:16px; line-height:1.55; color:#fde68a; }
.lite-list{ list-style:none; display:grid; gap:clamp(14px, 2vw, 22px); }
.lite-card{
  padding:clamp(18px, 3vw, 30px);
  border:1px solid rgb(221 231 240 / .14);
  background:rgb(221 231 240 / .04);
}
.lite-idx{ font-family:var(--mono); font-size:12px; letter-spacing:.36em; opacity:.6; }
.lite-body h2{ font-weight:450; font-stretch:88%; font-size:clamp(26px, 3.4vw, 40px); letter-spacing:.04em; text-transform:uppercase; margin-top:.15em; }
.lite-sub{ font-family:var(--mono); font-size:13px; letter-spacing:.24em; text-transform:uppercase; opacity:.8; margin-top:.5em; }
.lite-items{ list-style:disc; padding-left:1.2em; margin-top:.8em; display:grid; gap:.3em; font-size:16px; line-height:1.5; opacity:.88; }
.lite-body p:not(.lite-sub){ font-size:17px; line-height:1.6; opacity:.86; margin-top:.8em; max-width:62ch; }
.lite-cta{
  display:inline-block; margin-top:1.1em; padding:.7em 1.1em;
  font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgb(221 231 240 / .5);
}
.lite-cta:hover, .lite-cta:focus-visible{ background:rgb(221 231 240 / .12); border-color:#fff; }

@media (max-width: 820px){
  :root{ --hdr: 58px; --t-title: clamp(36px, 7vw, 60px); }
}
@media (max-width: 560px){
  :root{ --t-title: clamp(32px, 9.4vw, 50px); }
  .ch-t[data-long]{ font-size:min(var(--t-title), 8.6vw); }
  #fx{ font-size:11px; padding:.5em .75em; }
  .ch-cta{ margin-top:1em; }
  .ch-list{ font-size:15px; gap:.3em; }
}
