/* ============================================================
   Landing v2.2 layers: depth ghost · fog · fx pulses · cursor ·
   kinetic intro · decision instrument · daylight variant ·
   HUD telemetry + mini-map + scrubbable rail
   ============================================================ */
#net-depth { position: fixed; left: 0; top: 0; width: 135vw; height: 135vh; z-index: 0; pointer-events: none; opacity: .9; will-change: transform; }
#net-fog {
  position: fixed; left: 0; top: 0; width: 1400px; height: 1400px; z-index: 2; pointer-events: none; opacity: .16;
  background: radial-gradient(circle, color-mix(in srgb, var(--fc, #55EFE4) 34%, transparent) 0%, color-mix(in srgb, var(--fc, #55EFE4) 10%, transparent) 30%, transparent 62%);
  filter: blur(40px); transition: opacity 1.2s ease; will-change: transform; mix-blend-mode: screen;
}
#net-fx { position: fixed; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }
#net-intro { position: fixed; inset: 0; z-index: 61; pointer-events: none; width: 100%; height: 100%; }

/* fact bloom + spark-lit facts + tag threads */
.lp-card .fact { transition: border-color .4s, transform .3s; cursor: default; }
.lp-card .fact:hover { border-color: var(--cc, #55EFE4); transform: translateY(-2px); }
.lp-card .fact.lit b { text-shadow: 0 0 22px color-mix(in srgb, var(--cc, #55EFE4) 70%, transparent); color: var(--cc, #55EFE4); }
.lp-card .tags span { cursor: default; transition: border-color .25s, color .25s; }
.lp-card .tags span:hover { border-color: var(--cc, #55EFE4); color: var(--cc, #55EFE4); }
#net-connect .thread { fill: none; stroke: var(--cc, #55EFE4); stroke-width: .8; opacity: .55; stroke-dasharray: 3 5; }

/* HUD: scrubbable bars, telemetry, mini-map, toggles */
.hud { pointer-events: auto; }
.hud .hud-bars i { cursor: pointer; width: 18px; }
.hud .hud-bars i:hover { background: var(--ink-50); }
.hud .hud-tele { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: .58rem; letter-spacing: .14em; color: var(--ink-35); margin-top: 4px; }
.hud .hud-tele b { color: var(--ink-70); font-weight: 400; }
.hud canvas { display: block; width: 150px; height: 84px; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; background: rgba(5,5,8,.4); }
.hud .hud-tools { display: flex; gap: 6px; margin-top: 8px; }
.hud .hud-tools button { font: inherit; letter-spacing: .14em; font-size: .58rem; color: var(--ink-50); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.hud .hud-tools button.on { color: var(--bio); border-color: var(--bio); }

/* custom cursor */
body.lp-cursor-on .landing, body.lp-cursor-on .landing a, body.lp-cursor-on .landing button { cursor: none; }
#lp-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
#lp-cursor i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 1px solid rgba(85,239,228,.8); border-radius: 50%; box-shadow: 0 0 12px rgba(85,239,228,.4); }
#lp-cursor i::before, #lp-cursor i::after { content: ""; position: absolute; background: rgba(85,239,228,.8); }
#lp-cursor i::before { left: 8px; top: -6px; width: 1px; height: 30px; }
#lp-cursor i::after { top: 8px; left: -6px; height: 1px; width: 30px; }
#lp-cursor span { position: absolute; left: 14px; top: 10px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: rgba(85,239,228,.7); white-space: nowrap; }

/* decision instrument */
.lp-instrument { padding: 60px var(--edge); position: relative; }
.lp-instrument .wrap { max-width: 1280px; margin: 0 auto; }
.lp-instrument .ins { border-radius: 24px; padding: 28px; background: linear-gradient(160deg, rgba(14,22,32,.66), rgba(8,13,20,.46)); backdrop-filter: blur(24px) saturate(140%); box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06), 0 0 90px -30px rgba(246,217,123,.5); }
.lp-instrument .intro { max-width: 1280px; margin: 0 auto 22px; }
.lp-instrument .intro h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; margin: 8px 0 8px; }
.lp-instrument .intro p { color: var(--ink-70); max-width: 70ch; margin: 0; }
.ins-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.ins-cases { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-case { font: inherit; text-align: left; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; min-width: 160px; transition: border-color .25s, background .25s; }
.ins-case b { font-family: var(--font-mono); margin-right: 6px; color: var(--marker); }
.ins-case span { display: block; font-size: .68rem; color: var(--ink-50); margin-top: 3px; letter-spacing: .04em; }
.ins-case.on { border-color: var(--marker); background: rgba(246,217,123,.07); }
.ins-arms { display: flex; gap: 6px; flex-wrap: wrap; }
.ins-toggle { font: inherit; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; color: var(--ink-50); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ins-toggle i { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); opacity: .35; }
.ins-toggle.on { color: var(--text); border-color: var(--ac); }
.ins-toggle.on i { opacity: 1; box-shadow: 0 0 10px var(--ac); }
.ins-meta { font-size: .66rem; letter-spacing: .06em; color: var(--ink-35); margin: 14px 0 18px; line-height: 1.7; }
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ins-panel { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: rgba(5,5,8,.35); }
.ins-panel .kicker { display: block; }
.ins-bars { display: grid; gap: 8px; margin: 6px 0 12px; }
.ins-bar { display: grid; grid-template-columns: 82px 1fr 52px; gap: 10px; align-items: center; transition: opacity .3s; }
.ins-bar.off { opacity: .18; }
.ins-arm { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; color: var(--ink-50); }
.ins-track { height: 12px; background: var(--ink-15); border-radius: 0 4px 4px 0; overflow: hidden; }
.ins-fill { height: 100%; border-radius: 0 4px 4px 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ins-bar b { font-size: .78rem; text-align: right; }
.ins-gapbar { display: flex; height: 14px; gap: 2px; border-radius: 4px; overflow: hidden; background: var(--ink-15); }
.ins-seg { height: 100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ins-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: .72rem; color: var(--ink-70); }
.ins-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ins-legend b { font-family: var(--font-mono); color: var(--text); }
.ins-note { font-size: .74rem; color: var(--ink-50); margin-top: 10px; line-height: 1.6; }
.ins-note b { color: var(--text); font-family: var(--font-mono); }
.ins-sv { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; margin: 8px 0; }
.ins-iqr { position: absolute; top: 0; height: 100%; border-radius: 3px; opacity: .55; }
.ins-med { position: absolute; top: -3px; width: 2px; height: 18px; background: #EDEDE4; }
.ins-sub { font-size: .7rem; color: var(--ink-50); margin: 14px 0 8px; letter-spacing: .04em; }
.ins-mini { display: flex; gap: 10px; align-items: flex-end; height: 86px; }
.ins-mini > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ins-mini i { display: block; width: 100%; max-width: 34px; border-radius: 3px 3px 0 0; }
.ins-mini span { font-family: var(--font-mono); font-size: .58rem; color: var(--ink-35); }
.ins-mini b { font-family: var(--font-mono); font-size: .62rem; color: var(--ink-70); }
.ins-excl { display: grid; gap: 6px; margin-top: 6px; }
.ins-excl div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; font-size: .72rem; border-top: 1px solid var(--ink-15); padding-top: 6px; }
.ins-excl b { color: var(--text); }
.ins-excl span { color: var(--ink-50); }

/* daylight variant of the landing */
.landing.day {
  --bg: #f2f3f0; --surface: #ffffff; --surface-2: #e9ebe6; --text: #0a0e14; --text-dim: rgba(10,14,20,.6);
  --line: rgba(10,14,20,.14); --ink: #0a0e14; --ink-70: rgba(10,14,20,.72); --ink-50: rgba(10,14,20,.52);
  --ink-35: rgba(10,14,20,.38); --ink-15: rgba(10,14,20,.1); --glass: rgba(255,255,255,.62); --glass-border: rgba(10,14,20,.1);
  --bio: #0c9488; --helix: #6d5fd6; --marker: #a97b12; color-scheme: light;
}
.landing.day .lp-card { background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.55)); box-shadow: 0 30px 70px rgba(20,24,32,.18), 0 0 0 1px rgba(10,14,20,.06); }
.landing.day #net-vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(242,243,240,.7) 100%); }
.landing.day #net-grid { background-image: linear-gradient(rgba(10,14,20,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,14,20,.06) 1px, transparent 1px); }
.landing.day #net-fog { mix-blend-mode: multiply; }
.landing.day .hud, .landing.day .sig-wrap, .landing.day .ins, .landing.day .lp-trust { background: rgba(255,255,255,.72); }
.landing.day .sig-tip { background: #ffffff; color: #0a0e14; }
.landing.day .btn:not(.btn-ghost) { color: #fff; }
.landing.day .ins-panel { background: rgba(255,255,255,.5); }
.landing.day .ins-med { background: #0a0e14; }
.landing.day .hud canvas { background: rgba(255,255,255,.5); }

@media (max-width: 900px) {
  #net-depth, #net-fog, #net-fx, #lp-cursor { display: none; }
  .ins-grid { grid-template-columns: 1fr; }
  .ins-bar { grid-template-columns: 70px 1fr 48px; }
  .hud canvas, .hud .hud-tele { display: none; }
}