:root{
      --bg:#000; --copy:#eaf7ff; --muted:#9fc7ff;
      --accent-start:#22d3ee; --accent-end:#38bdf8;
      --surface:#0b1a23; --surface-2:#07141c; --line: color-mix(in oklab, #22d3ee 30%, transparent);
      --radius:16px; --dur:180ms; --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      --content-max: 840px; --padX: clamp(16px,3vw,24px); --ring:#88e0ff; --shadow: 0 12px 34px rgba(0,0,0,.45);
      --h1: clamp(1.9rem, 3.4vw, 2.4rem); --h2: clamp(1.24rem, 2.2vw, 1.62rem);
      --chip-bg: rgba(34,211,238,.10);
    }
    html, body{
      background:#000!important; color:var(--copy); margin:0; padding:0;
      font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial;
      font-size:17px; line-height:1.78;
      overflow-x:hidden; -webkit-text-size-adjust:100%;
    }
    *, *::before, *::after{ box-sizing:border-box }
    img, svg, video, iframe, canvas{ max-width:100%; height:auto; display:block; }
    a{ text-decoration:none; color:inherit }

    .veil{ max-width:var(--content-max); margin:48px auto; padding:36px var(--padX) 92px; width:100%; }

    /* Breadcrumb (Module 1 rhythm) */
    .crumbs{ margin:6px 0 20px; text-align:center; color:#9fc7ffcc;
      font:800 .86rem/1 var(--mono); letter-spacing:.02em; text-transform:lowercase }
    .crumbs .sep{ opacity:.6; padding:0 .35rem }
    .crumbs a{ color:inherit!important; text-decoration:none!important; border-bottom:0!important; -webkit-text-fill-color:initial!important; }
    .crumbs .current{ opacity:.85 }

    /* Header */
    .header{text-align:center}
    h1{
      display:inline-block; font-weight:800; font-size:var(--h1); margin:0 0 10px;
      background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); -webkit-background-clip:text; color:transparent; letter-spacing:.2px;
    }
    .lead{ color:var(--muted); font-weight:600; margin:0 auto 14px; max-width:720px; text-wrap:balance; }
    .divider{ height:2px; margin:12px auto 26px; width:100%;
      background:linear-gradient(90deg,transparent 0%,var(--accent-start) 18%,var(--accent-end) 50%,var(--accent-start) 82%,transparent);
      border-radius:6px; opacity:.96;
    }

    /* Slim progress (read-only) */
    .ttf-progress{ margin:8px 0 0; }
    .ttf-progress-rail{ position:relative; height:8px; border-radius:999px; overflow:hidden;
      background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(34,211,238,.06)); border:1px solid var(--line) }
    .ttf-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--accent-start), var(--accent-end));
      box-shadow:inset 0 6px 16px rgba(34,211,238,.25); transition:width 240ms ease; }
    .ttf-progress-meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; font:700 .9rem/1.2 var(--mono); color:#9fc7ff; }

    /* Cards & lists */
    .card{ border:1px solid var(--line); border-radius:var(--radius);
      background:linear-gradient(180deg,var(--surface),var(--surface-2));
      padding:18px; margin:18px 0; box-shadow:var(--shadow); overflow:hidden; }
    .card h2{ margin:0 0 8px; font-size:var(--h2); color:var(--accent-start); font-weight:900 }
    .list{ padding-left:20px; margin:10px 0 }
    .list li{ margin:12px 0 }

    /* Chips */
    .chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px; }
    .chip{
      display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
      border:1px solid rgba(255,255,255,.12); background:var(--chip-bg);
      color:#bfeaff; font:800 .84rem var(--mono); letter-spacing:.02em;
    }

    /* Buttons */
    .primary{
      display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border-radius:999px;
      background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); color:#031726; text-decoration:none; font-weight:900;
      transition:transform var(--dur) ease, box-shadow var(--dur) ease;
    }
    .primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(34,211,238,.28) }

    .ghost{
      display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      color:var(--copy); text-decoration:none; font-weight:800; text-align:center;
      background:rgba(255,255,255,.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
      transition:transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease, background var(--dur) ease;
    }
    .ghost:hover, .ghost:focus{
      color:var(--copy)!important;
      background:rgba(34,211,238,.10);
      border-color:rgba(34,211,238,.35);
      box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(34,211,238,.12);
      transform:translateY(-1px);
    }

    /* Bottom nav */
    .bottom-nav{ margin-top:28px; }
    .nav-rail{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px; }
    .ghost.left{ justify-self:start; } .ghost.center{ justify-self:center; } .ghost.right{ justify-self:end; }
    @media (max-width:560px){
      .nav-rail{ grid-template-columns:1fr; gap:10px; }
      .ghost{ width:100%; border-radius:12px; padding:14px 16px; }
    }

    /* Session Map (keep map inside its card; lightbox clones SVG for large view) */
    .figure{ margin:10px 0; border:1px solid rgba(34,211,238,.28); border-radius:12px; padding:12px; background:linear-gradient(180deg,var(--surface),var(--surface-2)); position:relative; }
    .fig-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 6px; }
    .fig-head label{ font:800 .9rem/1 var(--mono); color:#cfe8ff; display:flex; align-items:center; gap:8px; }
    .fig-head select{
      -webkit-appearance:none; -moz-appearance:none; appearance:none;
      background:rgba(34,211,238,.08)!important;
      color:var(--copy)!important;
      border:1px solid rgba(34,211,238,.35)!important;
      border-radius:10px; padding:6px 10px; font-weight:800;
      box-shadow:none!important;
      max-width:100%;
    }
    .fig-body{ border:1px solid rgba(34,211,238,.32); border-radius:10px; background:rgba(34,211,238,.05); padding:12px 12px 28px; position:relative; overflow:visible; }
    .zoomable{ cursor:zoom-in; border:none; background:transparent; padding:0; width:100%; position:relative; }
    .zoom-indicator{ position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:rgba(7,12,18,.82); border:1px solid #244055; box-shadow:0 6px 18px rgba(0,0,0,.35); opacity:.85; pointer-events:none }
    #sessionMap{ width:100%; height:auto; display:block; margin:0 auto; }

    /* Lightbox overlay */
    .lightbox{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); justify-content:center; align-items:center; padding:24px; }
    .lightbox.open{ display:flex; }
    .lightbox-content{ position:relative; width:min(92vw,1200px); max-height:84vh; background:linear-gradient(180deg,#0b1a23,#07141c); border:1px solid #244055; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.6); overflow:visible; padding:14px; }
    .lightbox-body{ max-height:calc(84vh - 28px); overflow:auto; border-radius:10px; -webkit-overflow-scrolling:touch }
    .lightbox-close{ position:absolute; top:10px; right:10px; z-index:3; width:60px; height:60px; border-radius:14px; background:rgba(7,12,18,.92); border:1px solid #244055; box-shadow:0 6px 18px rgba(0,0,0,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .lightbox-close:focus-visible{ outline:2px solid var(--ring); outline-offset:3px }
    .lightbox svg text{ fill:#e6eef7!important; } .lightbox svg .legend{ fill:#cfe8ff!important; }
    .lightbox svg .label{ fill:#f3fbff!important; } .lightbox svg .axis{ stroke:#93a3b3!important; }
    .lightbox svg .grid{ stroke:#5a6a7a!important; } .lightbox svg rect:not(#overlapBand){ stroke:none!important; }
    .lightbox svg #overlapBand{ stroke:#38bdf8!important; }

    /* Video placeholders */
    .video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:radial-gradient(1200px 600px at 30% 10%, rgba(34,211,238,.10), rgba(0,0,0,.2)); margin:10px 0 0; }
    .video iframe{ width:100%; height:100%; border:0; display:block; }

    /* Footer */
    .footer-wrap { margin-top:64px; text-align:center; }
    .footer-divider { height:2px; width:100%; margin:0 auto 28px; background:linear-gradient(90deg,transparent 0%,var(--accent-start) 20%,var(--accent-end) 50%,var(--accent-start) 80%,transparent); border-radius:6px; opacity:.9; }
    .footer { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:#a8d9ff; font:600 .95rem/1.4 var(--mono); }
    .footer .brand img { height:clamp(72px,14vw,96px); width:auto; opacity:.95; filter:drop-shadow(0 4px 12px rgba(56,189,248,.25)); transition:opacity var(--dur) ease, transform var(--dur) ease; }
    .footer .brand img:hover { opacity:1; transform:scale(1.04); }
    .footer .line2 { margin-top:12px; font-size:.95rem; color:var(--muted); font-weight:500; }
    @media (max-width:640px){
      .veil{ padding-bottom:72px; max-width:100%!important }
      .footer .line2{ display:flex; flex-direction:column; gap:4px } /* two stacked lines */
    }

    /* Safety: no rogue width on mobile */
    @media (max-width:640px){
      .card,.figure,.fig-body,.video,.nav-rail,.footer,textarea,pre,code,svg,img,iframe{ max-width:100%!important }
      pre, code, .mono{ white-space:pre-wrap; }
    }
    
    /* --- Field Rule Box (strong specificity + fallback color) --- */
.ttf-module .card .field-rule{
  border:2px solid #22d3ee; /* fallback */
  border:2px solid color-mix(in oklab, #22d3ee 60%, transparent);
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg,#0c1f28,#09202a);
  box-shadow:0 10px 28px rgba(34,211,238,.12) inset;
}
.ttf-module .card .field-rule h3{
  margin:0 0 8px;
  font:900 1rem/1.2 var(--mono);
  color:#bfeaff;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.ttf-module .card .field-rule p{
  margin:12px 0;            /* ensure comfy spacing */
  color:#d8f3ff;
}

/* ===== Module cards: "Lessons We Keep" ===== */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:760px){
  .grid2{ grid-template-columns:1fr; }
}

/* Callout tiles inside the grid */
.call{
  border:2px solid color-mix(in oklab, var(--accent-start) 60%, transparent);
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg,#0c1f28,#09202a);
  box-shadow:0 10px 28px rgba(34,211,238,.12) inset;
}
.call h3{
  margin:0 0 8px;
  font:900 1rem/1.2 var(--mono);
  color:#bfeaff;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* Ensure both .video and .video.embed behave the same */
.video.embed { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; }

/* Fallback for older browsers without aspect-ratio (old Safari/Chrome) */
@supports not (aspect-ratio: 16/9) {
  .video, .video.embed { position: relative; height: 0; padding-top: 56.25%; }
  .video iframe, .video.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Nice spacing when a video sits inside a card */
.card .video { margin-top: 12px; }

/* Optional: reduce border radius slightly on very small screens */
@media (max-width: 420px){
  .video, .video.embed { border-radius: 10px; }
}