/* WhaleClues guide -- generated by tools/build_guide.py from content/guide-source.html.
   Edit the source, not this file. Section-scoped rules that used to sit between
   sections are folded in here so every split page gets the same sheet. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@300;400;600;700&display=swap');

  :root{
    --bg:#0a0e14;
    --panel:#111826;
    --panel-2:#1a2333;
    --line:#283648;
    --ink:#f5f7fb;
    --muted:#7f8ca3;
    --accent:#4da3ff;
    --accent-2:#6bb4ff;
    --gold:#f0bc42;
    --green:#4abf7b;
    --red:#cc5c65;
    --glow:rgba(77,163,255,.30);--chart:#8fd0ff;--brand-gold:#C9A84C;--text-2:#b6c2d2;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}

  body{
    font-family:'Sora',sans-serif;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(107,180,255,.10), transparent 60%),
      radial-gradient(900px 500px at -5% 110%, rgba(77,163,255,.08), transparent 55%),
      var(--bg);
    color:var(--ink);
    min-height:100vh;
    line-height:1.65;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;
    background-image:
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:46px 46px;opacity:.14;
    mask-image:radial-gradient(circle at 50% 8%, #000 0%, transparent 80%);
    pointer-events:none;z-index:0;
  }

  /* ===== layout: sticky TOC + content ===== */
  .shell{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 28px;
    display:grid;grid-template-columns:240px 1fr;gap:46px;}

  /* TOC */
  .toc{position:sticky;top:0;padding:54px 0;align-self:start;}
  .toc .logo-row{display:flex;align-items:center;gap:12px;margin-bottom:30px;}
  .logo-mark{display:grid;place-items:center;}
  .brand{font-weight:700;letter-spacing:.18em;font-size:13px;color:var(--accent);}
  .brand span{color:var(--brand-gold);}
  .toc .tlabel{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--muted);margin:0 0 12px 2px;}
  .toc nav a{
    display:flex;align-items:center;gap:10px;
    font-size:13px;color:var(--muted);text-decoration:none;
    padding:8px 12px;border-radius:9px;border-left:2px solid transparent;
    transition:.25s;margin-bottom:2px;
  }
  .toc nav a .n{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--line);
    border:1px solid var(--line);border-radius:5px;width:20px;height:20px;display:grid;place-items:center;flex:none;transition:.25s;}
  .toc nav a:hover{color:var(--ink);background:rgba(77,163,255,.05);}
  .toc nav a.active{color:var(--ink);border-left-color:var(--accent);background:rgba(77,163,255,.07);}
  .toc nav a.active .n{color:var(--accent);border-color:var(--accent);}
  .toc nav .grp{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--accent-2);margin:18px 0 6px 2px;}

  /* content */
  .content{padding:54px 0 120px;min-width:0;}

  .hero-top h1{font-size:clamp(30px,4.2vw,50px);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px;}
  .hero-top h1 .hl{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero-top .lede{max-width:640px;color:var(--muted);font-size:17px;font-weight:300;}
  .hero-top .meta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;}
  .hero-top .meta span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line);padding:5px 12px;border-radius:999px;}

  /* section shell */
  section{padding-top:64px;scroll-margin-top:24px;}
  .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;}
  .sec-head .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--accent);}
  .sec-head .kicker.b2{color:var(--accent-2);}
  .sec-head .kicker.bg{color:var(--gold);}
  h2.sec-title{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.02em;margin-bottom:18px;}
  .divider{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:0 0 26px;}

  /* screenshots: full column width, aspect held by the width/height attributes */
  figure.shot{margin:22px 0 26px;}
  figure.shot img{display:block;width:100%;height:auto;border-radius:10px;
    border:1px solid var(--line);background:var(--bg-chart,#090d14);}
  figure.shot figcaption{margin-top:9px;font-size:12.5px;color:var(--muted);
    font-weight:300;line-height:1.6;}
  figure.shot figcaption b{color:var(--text-2);font-weight:600;}

  /* generic prose */
  p.body{font-size:15px;color:var(--muted);font-weight:300;line-height:1.8;margin-bottom:14px;}
  p.body b{color:var(--ink);font-weight:600;}

  /* cards / chips reused */
  .cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0;}
  .mini{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:20px 22px;transition:.3s;}
  .mini:hover{border-color:var(--accent);transform:translateY(-2px);}
  .mini .eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--accent);margin-bottom:10px;}
  .mini h3{font-size:18px;margin-bottom:6px;}
  .mini p{font-size:13.5px;color:var(--muted);font-weight:300;}
  .mini p b{color:var(--ink);font-weight:600;}

  .markers{display:flex;align-items:center;gap:22px;margin:14px 0;flex-wrap:wrap;}
  .mk{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .mk .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.06em;}
  .shape{width:46px;height:46px;display:grid;place-items:center;}
  .circle{width:32px;height:32px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 16px -2px rgba(240,188,66,.5);}

  .chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
  .chip{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 13px;}
  .chip .sw{width:11px;height:11px;border-radius:50%;}
  .sw.r{background:var(--red);}.sw.g{background:var(--green);}.sw.y{background:var(--gold);}

  .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;}
  .duo .b{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:rgba(18,26,40,.55);}
  .duo .b .t{font-size:12.5px;font-weight:600;margin-bottom:4px;}
  .duo .b small{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.55;}
  .duo .b.green .t{color:var(--green);}.duo .b.red .t{color:var(--red);}

  .sun{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;margin-top:8px;
    font-family:'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:6px 13px;}

  /* DEX hero, XJER, etc */
  .hero{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel-2));
    padding:24px 26px;position:relative;overflow:hidden;margin:8px 0 18px;}
  .hero::after{content:"";position:absolute;top:-40%;right:-10%;width:300px;height:300px;
    background:radial-gradient(circle,rgba(91,140,255,.16),transparent 70%);pointer-events:none;}
  .hero .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--accent-2);margin-bottom:8px;}
  .hero h3{font-size:20px;margin-bottom:10px;}
  .hero p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.75;}
  .hero p b{color:var(--ink);font-weight:600;}
  .dexstates{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap;}
  .dexstate{flex:1;min-width:220px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(18,26,40,.55);}
  .dexstate .h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;margin-bottom:6px;}
  .dexstate small{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.55;}
  .tagdot{width:11px;height:11px;border-radius:50%;}
  .tagdot.g{background:var(--green);box-shadow:0 0 10px var(--green);}
  .tagdot.r{background:var(--red);box-shadow:0 0 10px var(--red);}
  .dexstate.pos .h{color:var(--green);}.dexstate.neg .h{color:var(--red);}

  .energy{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
  .ebox{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:rgba(18,26,40,.55);}
  .ebox .h{font-size:12.5px;font-weight:600;margin-bottom:4px;}
  .ebox small{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.5;}
  .ebox.red .h{color:var(--red);}.ebox.green .h{color:var(--green);}
  .xjer-flow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 0;}
  .state{flex:1;min-width:200px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(18,26,40,.55);}
  .state .top{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin-bottom:5px;}
  .state small{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.5;}
  .state .pulse{width:12px;height:12px;border-radius:50%;}
  .pulse.r{background:var(--red);box-shadow:0 0 12px var(--red);}
  .pulse.g{background:var(--green);box-shadow:0 0 12px var(--green);}
  .arrow-i{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:20px;}

  /* numbered list block for options */
  .item{position:relative;border:1px solid var(--line);border-radius:14px;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    padding:22px 24px;margin:16px 0;transition:.3s;}
  .item:hover{border-color:var(--accent);}
  .item .no{position:absolute;left:22px;top:24px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:24px;
    width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
    background:rgba(77,163,255,.08);color:var(--accent);border:1px solid rgba(77,163,255,.25);}
  .item.acc2 .no{background:rgba(91,140,255,.08);color:var(--accent-2);border-color:rgba(91,140,255,.25);}
  .item.gold .no{background:rgba(224,179,65,.08);color:var(--gold);border-color:rgba(224,179,65,.25);}
  .item h3{font-size:18px;margin-bottom:3px;}
  .item .isub{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.1em;margin-bottom:11px;}
  .item p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.75;}
  .item p+p{margin-top:9px;}
  .item p b{color:var(--ink);font-weight:600;}
  .pos-t{color:var(--green);font-weight:600;}.neg-t{color:var(--red);font-weight:600;}

  .foot{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.1em;}

  /* Exits. This page had none: the logo was not a link, the TOC held only in-page
     anchors, and there was no route to the app. AI assistants deep-link straight
     into these sections (#gex, #callwall, …), so readers landed mid-reference with
     nowhere to go — 51 sessions/28d at 3.9% engagement vs 73% for the same channel
     on the homepage. Every reader now has a next step. */
  .toc .logo-row { text-decoration:none; }
  .toc-exits { margin:24px 0 6px;padding-top:16px;border-top:1px solid var(--line); }
  .toc-exits a { display:block;font-size:12px;color:var(--muted);text-decoration:none;padding:7px 0; }
  .toc-exits a:hover { color:var(--ink); }
  .toc-exits a.primary { color:var(--accent); }
  .guide-cta { max-width:720px;margin:72px auto 0;padding:30px 28px;border:1px solid var(--line);
               border-radius:14px;background:var(--panel);text-align:center; }
  .guide-cta h2 { font-size:20px;margin:0 0 10px;color:var(--ink); }
  .guide-cta p { font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.65; }
  .guide-cta .row { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; }
  .guide-cta .row a { display:inline-block;padding:11px 22px;border-radius:8px;font-size:14px;
                      text-decoration:none;border:1px solid var(--line);color:var(--ink); }
  .guide-cta .row a.primary { background:var(--accent);border-color:var(--accent);color:#06101c;font-weight:600; }
  .guide-cta .row a:hover { border-color:var(--accent); }

  /* mobile */
  .toc-toggle{display:none;}
  /* Assistants deep-link the #anchors mid-page; on mobile the TOC collapses to the very
     top of the document, so a reader landing on #gex has no exit in the viewport at all.
     This bar is that exit — desktop keeps the sticky sidebar and never shows it. */
  .mobile-exit{display:none;}
  @media(max-width:900px){
    .shell{grid-template-columns:1fr;gap:0;}
    .toc{position:static;height:auto;padding:30px 0 0;}
    .toc nav{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
    .content{padding-top:26px;}
    .cards2,.duo,.energy{grid-template-columns:1fr;}
    .item{padding:20px;}
    .item .no{position:static;margin-bottom:12px;}
    body{padding-bottom:68px;}
    .mobile-exit{
      display:flex;gap:10px;align-items:center;
      position:fixed;left:0;right:0;bottom:0;z-index:60;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
      background:rgba(10,14,20,.94);backdrop-filter:blur(8px);
      border-top:1px solid var(--line);
    }
    .mobile-exit a{
      flex:1;text-align:center;text-decoration:none;font-size:14px;
      padding:11px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink);
    }
    .mobile-exit a.primary{background:var(--accent);border-color:var(--accent);color:#06101c;font-weight:600;}
    .mobile-exit a.ghost{flex:0 0 auto;color:var(--muted);}
  }

.xjer-note{margin:18px 0 4px;border:1px solid var(--line);border-left:3px solid var(--accent);
          border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:18px 22px;}
        .xjer-note .tip{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
          color:var(--accent);margin-bottom:10px;}
        .xjer-note h3{font-size:18px;margin-bottom:8px;}
        .xjer-note p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.8;margin-bottom:12px;}
        .xjer-note p:last-child{margin-bottom:0;}
        .xjer-note p b{color:var(--ink);font-weight:600;}
        .xjer-note .ex{border-radius:10px;padding:12px 16px;margin-bottom:12px;font-size:13.5px;
          font-weight:300;line-height:1.75;}
        .xjer-note .ex.up{background:rgba(55,211,155,.07);border:1px solid rgba(55,211,155,.25);}
        .xjer-note .ex.dn{background:rgba(255,91,110,.06);border:1px solid rgba(255,91,110,.22);}
        .xjer-note .ex .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
          display:block;margin-bottom:5px;}
        .xjer-note .ex.up .tag{color:var(--green);}
        .xjer-note .ex.dn .tag{color:var(--red);}
        .xjer-note .ex b{color:var(--ink);font-weight:600;}

.xjer-fig{margin:18px 0 8px;}
          .xjer-fig .frm{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel-2);box-shadow:0 30px 60px -36px rgba(0,0,0,.85);}
          .xjer-fig .frm .bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel);}
          .xjer-fig .frm .bar .d{width:9px;height:9px;border-radius:50%;}
          .xjer-fig .frm .bar .d.r{background:#ff5f56;}.xjer-fig .frm .bar .d.y{background:#ffbd2e;}.xjer-fig .frm .bar .d.g{background:#27c93f;}
          .xjer-fig .frm .bar .cap{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.1em;}
          .xjer-fig .wrap{position:relative;line-height:0;}
          .xjer-fig .wrap img{display:block;width:100%;height:auto;}
          .xjer-fig .ovr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
          .xjer-fig figcaption{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.7;margin-top:10px;padding:0 2px;}
          .xjer-fig figcaption b{color:var(--ink);font-weight:600;}

.sun-note{margin:16px 0 4px;border:1px solid rgba(224,179,65,.28);border-left:3px solid var(--gold);
          border-radius:12px;background:rgba(224,179,65,.06);padding:16px 20px;}
        .sun-note .tip{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;
          color:var(--gold);margin-bottom:8px;}
        .sun-note p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.8;margin:0;}
        .sun-note p b{color:var(--ink);font-weight:600;}

.vp-frame{border:1px solid var(--line);border-radius:14px;background:var(--panel-2);
        padding:16px;margin:14px 0 22px;box-shadow:0 30px 60px -36px rgba(0,0,0,.85);}
      .vp-frame .vp-top{display:flex;justify-content:space-between;align-items:center;
        margin-bottom:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
        letter-spacing:.12em;color:var(--muted);}
      .vp-frame canvas{display:block;width:100%;height:380px;}
      .vp-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;
        font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--muted);}
      .vp-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;
        margin-right:7px;vertical-align:-1px;}

.lvl-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:6px 0 18px;}
        .lvl-legend span{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;
          font-size:11px;letter-spacing:.08em;color:var(--muted);}
        .lvl-legend i{width:26px;height:0;flex-shrink:0;}

.tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0;}
        .tip-card{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:20px 22px 18px;}
        .tip-card .tip-no{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.15em;margin-bottom:8px;}
        .tip-card h3{font-size:16.5px;margin:0 0 8px;color:var(--ink);}
        .tip-card p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.75;margin:0;}
        .tip-card p b{color:var(--ink);font-weight:600;}
        .tips-fig{margin:20px 0 6px;}
        .tips-fig .frm{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel-2);box-shadow:0 30px 60px -36px rgba(0,0,0,.85);}
        .tips-fig .frm .bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel);}
        .tips-fig .frm .bar .d{width:9px;height:9px;border-radius:50%;}
        .tips-fig .frm .bar .d.r{background:#ff5f56;}.tips-fig .frm .bar .d.y{background:#ffbd2e;}.tips-fig .frm .bar .d.g{background:#27c93f;}
        .tips-fig .frm .bar .cap{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.1em;}
        .tips-fig img{display:block;width:100%;height:auto;}
        .tips-fig figcaption{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.7;margin-top:10px;padding:0 2px;}
        .tips-fig figcaption b{color:var(--ink);font-weight:600;}
        @media(max-width:720px){.tips-grid{grid-template-columns:1fr;}}

  /* ---- split-guide components (breadcrumb, prev/next, directory grid) ---- */

  .crumb{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
    color:var(--muted);margin-bottom:26px;}
  .crumb a{color:var(--muted);text-decoration:none;transition:.25s;}
  .crumb a:hover{color:var(--accent);}
  .crumb span{margin:0 8px;color:var(--line);}
  .crumb b{color:var(--ink);font-weight:600;}

  .pn{display:flex;justify-content:space-between;gap:16px;margin-top:56px;
    padding-top:26px;border-top:1px solid var(--line);}
  .pn a{display:flex;flex-direction:column;gap:5px;max-width:46%;
    padding:14px 18px;border:1px solid var(--line);border-radius:12px;
    text-decoration:none;transition:.25s;background:rgba(77,163,255,.02);}
  .pn a:hover{border-color:var(--accent);background:rgba(77,163,255,.06);}
  .pn .pn-dir{font-family:'JetBrains Mono',monospace;font-size:10px;
    letter-spacing:.16em;color:var(--accent-2);}
  .pn .pn-title{font-size:14px;color:var(--ink);font-weight:600;}
  .pn .pn-next{text-align:right;align-items:flex-end;margin-left:auto;}

  .toc-grid{display:flex;flex-direction:column;gap:34px;margin-top:46px;}
  .toc-group-head{font-family:'JetBrains Mono',monospace;font-size:10px;
    letter-spacing:.18em;color:var(--accent-2);margin-bottom:12px;}
  .toc-card{display:flex;align-items:center;gap:14px;text-decoration:none;
    padding:14px 16px;border:1px solid var(--line);border-radius:12px;
    margin-bottom:8px;transition:.25s;background:rgba(77,163,255,.02);}
  .toc-card:hover{border-color:var(--accent);background:rgba(77,163,255,.07);
    transform:translateX(3px);}
  .toc-card .n{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--line);
    border:1px solid var(--line);border-radius:6px;width:24px;height:24px;
    display:grid;place-items:center;flex:none;transition:.25s;}
  .toc-card:hover .n{color:var(--accent);border-color:var(--accent);}
  .toc-card .t{font-size:15px;color:var(--ink);font-weight:600;}

  @media(max-width:900px){
    .pn{flex-direction:column;}
    .pn a{max-width:none;}
    .pn .pn-next{text-align:left;align-items:flex-start;margin-left:0;}
  }