/* ---- tokens ---- */
:root{
  --bg:#f4f6f9;
  --bg-top:#f8fafd;
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --ink:#0d1117;
  --ink-2:#333a45;
  --muted:#77808f;
  --line:#e4e7ec;
  --line-2:#d6dae1;
  --meta:#0866ff;
  --meta-dark:#0057e0;
  --glow:rgba(8,102,255,.13);
  --grid:rgba(13,17,23,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- ambient background ---- */
.bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(880px 520px at 50% -8%, var(--glow), rgba(8,102,255,0) 68%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 55%);
}
.bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(780px 540px at 50% 0%, #000 0%, rgba(0,0,0,.3) 46%, transparent 78%);
  mask-image:radial-gradient(780px 540px at 50% 0%, #000 0%, rgba(0,0,0,.3) 46%, transparent 78%);
}

/* ---- layout ---- */
.page{max-width:748px;margin:0 auto;padding:100px 28px 72px}

/* ---- hero ---- */
.eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--muted);
  text-transform:uppercase;
}
.title{
  margin:24px 0 0;
  font-size:clamp(38px,6.2vw,60px);
  line-height:1.14;
  letter-spacing:-.022em;
  font-weight:700;
}
.lede{
  margin:26px 0 0;
  max-width:34em;
  font-size:clamp(16.5px,2.1vw,19px);
  line-height:1.75;
  color:var(--ink-2);
}
.meta-line{
  display:flex;align-items:center;gap:12px;
  margin-top:28px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6;display:inline-block}

/* ---- prose ---- */
.prose{margin-top:56px}
.prose p{
  margin:0 0 1.5em;
  font-size:clamp(17px,2.25vw,18.5px);
  line-height:1.95;
  color:var(--ink-2);
}
.prose p:first-child{color:var(--ink)}
.prose p:last-child{margin-bottom:0}

/* ---- interlude / compare ---- */
.interlude{margin:62px 0 64px}
.cue{
  display:flex;align-items:center;gap:10px;
  margin:0 0 18px;
  font-size:14px;color:var(--muted);
}
.cue::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--meta);
  box-shadow:0 0 0 4px rgba(8,102,255,.12);
}
.compare{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 1px 0 rgba(13,17,23,.02), 0 28px 64px -40px rgba(13,17,23,.3);
}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.panel{
  position:relative;overflow:hidden;
  border:1px solid transparent;border-radius:14px;
  padding:18px 18px 16px;
  background:var(--surface-2);
  transition:transform .38s ease, border-color .38s ease, background .38s ease;
}
.panel-left{
  background:linear-gradient(180deg, rgba(8,102,255,.055), rgba(8,102,255,.02));
  border-color:rgba(8,102,255,.1);
}
.p-head{margin-bottom:12px}
.p-title{font-size:14px;font-weight:600;color:var(--ink)}
.p-sub{margin-top:3px;font-size:12px;color:var(--muted);transition:color .35s ease}

.row{
  display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:start;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.row:first-of-type{border-top:0;padding-top:2px}
.rk{font-size:12px;color:var(--muted);padding-top:4px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:12.5px;line-height:1.55;
  padding:2px 10px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-2);
  white-space:nowrap;
  transition:opacity .4s ease, border-color .4s ease, color .4s ease, filter .4s ease;
}

/* the veil that rises from the bottom when signal is lost */
.veil{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  background:linear-gradient(to top,
    var(--surface-2) 0%, var(--surface-2) 10%,
    rgba(247,248,250,.72) 34%,
    rgba(247,248,250,0) 64%);
}

/* lost state */
.compare.is-lost .panel-right{
  border-style:dashed;
  border-color:rgba(119,128,143,.55);
  transform:translateY(2px) scale(.993);
}
.compare.is-lost .panel-right .content{filter:blur(1.15px) saturate(.45)}
.compare.is-lost .panel-right .chip{color:var(--muted)}
.compare.is-lost .panel-right .chip.unmatched{
  opacity:.4;
  border-style:dashed;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  filter:blur(.5px);
}
.compare.is-lost .veil{opacity:1}

/* ---- actions ---- */
.actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:0 2px;
}
.btn-signal{
  appearance:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;
  color:#fff;background:var(--meta);
  padding:11px 21px;border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(8,102,255,.9);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-signal:hover{background:var(--meta-dark);transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(8,102,255,.95)}
.btn-signal:active{transform:translateY(0)}
.btn-signal:focus-visible{outline:2px solid var(--meta);outline-offset:3px}

/* ---- footer ---- */
.foot{
  display:flex;align-items:center;gap:12px;
  margin-top:72px;padding-top:22px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.04em;
}

/* ---- entrance ---- */
.hero > *{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.hero > *:nth-child(1){animation-delay:.05s}
.hero > *:nth-child(2){animation-delay:.13s}
.hero > *:nth-child(3){animation-delay:.22s}
.hero > *:nth-child(4){animation-delay:.31s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- responsive ---- */
@media (max-width:640px){
  .page{padding:64px 20px 56px}
  .panels{grid-template-columns:1fr}
  .br-lg{display:none}
  .compare{padding:16px;border-radius:18px}
  .foot{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){
  .hero > *{opacity:1;animation:none}
  *{transition:none !important}
}

/* ---- back link ---- */
.backlink{margin:0 0 34px}
.backlink a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;
  transition:color .2s ease;
}
.backlink a:hover{color:var(--meta)}