:root{
  --bg:#090909;
  --ink:#d8cbb4;
  --amber-dim:#8a6a2e;
  --amber:#ff7a2a;
  --amber-soft:#c98a3c;
  --red:#ff2a12;
  --teal:#2f7d6e;
  --line:#241a0e;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
body.alert{--amber-soft:#e0703c}

/* frame + scanlines */
.frame{position:fixed;inset:14px;pointer-events:none;z-index:6}
.frame .c{position:absolute;width:16px;height:16px;border:1px solid #3a2a12;opacity:.85}
.frame .tl{top:0;left:0;border-right:0;border-bottom:0}
.frame .tr{top:0;right:0;border-left:0;border-bottom:0}
.frame .bl{bottom:0;left:0;border-right:0;border-top:0}
.frame .br{bottom:0;right:0;border-left:0;border-top:0}
.scanlines{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;
}

/* full-viewport canvas layer (below everything) */
.canvas-layer{position:fixed;inset:0;z-index:0}
#globe{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#globe.dragging{cursor:grabbing}
/* soft, wide left-edge scrim: attenuates the rings under the HUD without
   reading as a panel — they still pass visibly behind the text */
.scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,
    rgba(9,9,9,.58) 0%,
    rgba(9,9,9,.48) 10%,
    rgba(9,9,9,.34) 22%,
    rgba(9,9,9,.18) 33%,
    rgba(9,9,9,.05) 43%,
    rgba(9,9,9,0) 52%);
}

/* layout */
.stage{
  position:relative;height:100%;width:100%;pointer-events:none;
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:center;
}

/* HUD */
.hud{
  padding:0 clamp(20px,3vw,54px) 0 clamp(26px,4vw,64px);
  display:flex;flex-direction:column;gap:clamp(16px,2.4vh,30px);
  position:relative;z-index:3;
  max-width:560px;
  /* text lets drags through to the canvas; only controls capture pointers */
  pointer-events:none;
}
.hud .btn{pointer-events:auto}
.hud-top{display:flex;align-items:center;gap:12px}
.mark{color:var(--amber);display:flex}
.hud-top-txt{display:flex;flex-direction:column;gap:3px}
.kicker{font-size:10px;letter-spacing:.32em;color:var(--amber);text-transform:uppercase}
.sub{font-size:9px;letter-spacing:.26em;color:#6b5836;text-transform:uppercase}

.headline{
  font-weight:700;
  font-size:clamp(38px,5.6vw,74px);
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#efe4cc;
  transform:scaleX(.92);transform-origin:left center;
}
.headline .dot{color:var(--red)}
.headline .thin{
  display:inline-block;font-weight:400;font-size:.3em;letter-spacing:.34em;
  color:var(--amber-dim);margin-top:.5em;
}
.body{
  max-width:40ch;font-size:11.5px;line-height:1.85;letter-spacing:.06em;
  color:#907240;text-transform:uppercase;
}

.readout{border-top:1px solid var(--line);padding-top:12px;max-width:360px;position:relative}
.readout .row{
  display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid rgba(36,26,14,.7);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.readout .lbl{color:#6b5836}
.readout .val{color:var(--amber-soft);font-variant-numeric:tabular-nums;transition:color .25s}
#row-pattern.hot .val{color:#ff3a1e}
#row-pattern.hot .lbl{color:#a3402a}
.alert-rule{height:1px;margin-top:12px;background:rgba(36,26,14,.8);overflow:hidden}
.alert-rule span{display:block;height:100%;width:0;background:#ff2a12;transition:width .35s ease}
.alert-rule.on span{width:100%}
.alert-line{
  margin-top:8px;font-size:9.5px;letter-spacing:.24em;color:#ff3a1e;
  opacity:0;transition:opacity .3s;text-transform:uppercase;
}
.alert-line.on{opacity:.95}

.controls{display:flex;flex-wrap:wrap;gap:8px}
.btn{
  font:inherit;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);background:transparent;border:1px solid #6d3f12;
  padding:7px 11px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:rgba(255,122,42,.12);border-color:var(--amber)}
a.btn{text-decoration:none;display:inline-block}

/* ── REACH OUT: larger, brighter, pulses on hover ─────────────── */
.btn-reach{
  position:relative;isolation:isolate;
  font-size:13px;letter-spacing:.3em;font-weight:500;
  padding:15px 30px;
  color:#ffc07a;
  border:1px solid var(--amber);
  background:rgba(255,122,42,.06);
  box-shadow:0 0 0 0 rgba(255,122,42,0), 0 0 14px rgba(255,122,42,.10);
  transition:color .5s cubic-bezier(.4,0,.2,1),
             background .5s cubic-bezier(.4,0,.2,1),
             border-color .5s cubic-bezier(.4,0,.2,1),
             box-shadow .5s cubic-bezier(.4,0,.2,1),
             text-shadow .5s cubic-bezier(.4,0,.2,1),
             transform .5s cubic-bezier(.4,0,.2,1);
}
.btn-reach .reach-label{position:relative;z-index:1}
.btn-reach:hover,.btn-reach:focus-visible{
  color:#fff4e2;
  background:rgba(255,122,42,.14);
  border-color:#ffb066;
  /* inset ring thickens the outline without shifting layout */
  box-shadow:inset 0 0 0 1.5px rgba(255,176,102,.85), 0 0 26px rgba(255,122,42,.34);
  text-shadow:0 0 .6px currentColor, 0 0 12px rgba(255,150,70,.7);
  transform:translateY(-1px);
}
/* nested opacity: the gate eases in, the pulse blinks inside it,
   so the blink ramps up and down instead of snapping on */
.btn-reach .reach-gate{
  position:absolute;inset:-3px;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
.btn-reach:hover .reach-gate,.btn-reach:focus-visible .reach-gate{opacity:1}
.btn-reach .reach-pulse{
  position:absolute;inset:0;
  border:1px solid rgba(255,180,110,.9);
  box-shadow:0 0 20px rgba(255,122,42,.55), inset 0 0 16px rgba(255,122,42,.20);
  animation:reachBlink 1.15s ease-in-out infinite;
}
@keyframes reachBlink{0%,100%{opacity:.22}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .btn-reach .reach-pulse{animation:none;opacity:.7}
  .btn-reach{transition-duration:.2s}
}

/* bottom-right control cluster: one button above, two below */
.controls-br{
  position:fixed;z-index:7;pointer-events:none;
  right:clamp(20px,3vw,54px);bottom:clamp(20px,3.2vh,40px);
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.controls-br .btn-row{display:flex;justify-content:flex-end;gap:8px}
.controls-br .btn{pointer-events:auto;background:rgba(9,9,9,.55)}
.controls-br .btn:hover{background:rgba(255,122,42,.14);border-color:var(--amber)}
.btn:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.btn[aria-pressed="false"]{color:#6b5836;border-color:#33240f}

/* GLOBE overlay region (badges + hint only; canvas lives behind everything) */
.globe-wrap{position:relative;height:100%;width:100%;pointer-events:none}

.badge{
  position:absolute;z-index:4;pointer-events:none;
  background:#0b0a09;border:2px solid var(--amber);border-radius:8px;
  box-shadow:0 0 18px rgba(255,122,42,.14);
}
.badge-code{
  top:18%;left:11%;
  padding:7px 14px 8px;
  font-size:clamp(18px,2.1vw,30px);font-weight:500;letter-spacing:.06em;color:var(--amber);
  animation:float1 11s ease-in-out infinite;
}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-5px)}}

.hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:4;font-size:9.5px;letter-spacing:.34em;color:#7a6234;
  transition:opacity .6s;pointer-events:none;
}
.hint.gone{opacity:0}

@media (max-width:900px){
  body{overflow:hidden}
  /* stacked: HUD on top, globe below — scrim runs top→down instead of left→right */
  .scrim{
    background:linear-gradient(to bottom,
      rgba(9,9,9,.82) 0%,
      rgba(9,9,9,.7) 30%,
      rgba(9,9,9,.45) 52%,
      rgba(9,9,9,.15) 64%,
      rgba(9,9,9,0) 74%);
  }
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;height:100%}
  .hud{padding:26px 20px 4px;gap:11px;max-width:none}
  .headline{font-size:clamp(30px,10.5vw,46px)}
  .headline .thin{font-size:.32em;margin-top:.4em}
  .body{font-size:10.5px;line-height:1.7;max-width:none;letter-spacing:.04em}
  .readout{max-width:none;padding-top:9px}
  .readout .row{padding:3.5px 0;font-size:9.5px}
  .controls{gap:6px}
  .btn-reach{font-size:12px;padding:13px 24px;letter-spacing:.26em}
  .controls-br{right:16px;bottom:14px;gap:6px}
  .controls-br .btn-row{gap:6px}
  .hint{left:16px;transform:none;bottom:8px}
  .globe-wrap{height:100%;width:100%}
  .badge-code{font-size:19px;padding:5px 10px 6px;top:8%;left:8%}
  .hint{bottom:6px}
}