/*
     * Tutor player chrome — fully self-contained.
     * Product-in-product: no import of ANS/R globals, tokens, or components.
     * Principles only (mirrored locally): ≥44px touch, safe-area, hairline sticky bar.
     */
    :root {
      /* ── Palette (docs/tutor/DESIGN.md) ── */
      --cream: #f6f0e4;
      --ink: #1a1a1a;
      --muted: #4a463f;
      --blue: #2f5f9a;
      --blue-soft: #d6e4f5;
      --orange: #d9772c;
      --orange-soft: #fde6cf;
      --green: #2dad71;
      --red: #c43c3c;
      --card: #fffdf8;
      --line: #ebe4d6;
      --dot-idle: #cfc7b8;
      --white: #fff;
      --amber: #b45309;
      --surface-faint: #faf8f3;
      --surface-warm: #efe8da;
      --surface-border: #e0d7c6;
      --fact-blue-border: #c5d8ef;
      --fact-orange-border: #f0c9a0;
      --fact-green-border: #b8e6cf;
      --fact-green-bg: #e8f8f0;
      --fact-red-border: #f0c0c0;
      --fact-red-bg: #fdeeee;
      --shadow: 0 12px 40px rgb(0 0 0 / 0.08);
      --radius: 22px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-pill: 999px;
      --guide-w: 300px; /* legacy side-rail token; float uses --guide-float-* */
      --guide-float-w: min(28rem, 36vw);
      --guide-float-min: 20rem;
      --guide-float-max-h: min(62vh, 26rem);

      /* ── Type ── */
      --text-xs: 0.72rem;
      --text-sm: 0.78rem;
      --text-input: 16px;

      /* ── Page layout ── */
      --page-max: 1200px;
      --page-pad-x: 1.25rem;
      --page-pad-y: 1rem;
      --page-gap: 0.85rem;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --safe-right: env(safe-area-inset-right, 0px);

      /* ── Sticky header (local only) ── */
      --touch: 44px;
      --header-touch: var(--touch);
      --header-h: 56px;
      --header-pad-y: 0.5rem;
      --header-gap: 0.5rem 0.75rem;
      --header-z: 30;
      --header-hairline: rgb(0 0 0 / 0.09);
      --header-icon: 14px;
      --header-icon-lg: 18px;

      /*
       * ── Float chrome (Guide · Nav · Ask) ──
       * One control height, pad, stroke, fill — impeccable alignment.
       */
      --float-control-h: var(--touch); /* 44px */
      --float-control-gap: 0.4rem;
      --float-pad-y: 0.45rem;
      --float-pad-x: 0.55rem;
      --float-icon: 20px;
      --float-label-size: 0.85rem;
      --float-label-weight: 700;
      --float-stroke: 2px;
      --float-btn-fill: rgb(255 255 255 / 0.7);
      --float-surface-radius: 22px;
      --ask-compose-w: 12.5rem;

      /*
       * ── Glass frost (tutor-wide) ──
       * Header, nav dock, guide accordion — one place to tune blur / cream.
       * Components: header.css, .nav-dock-surface, guide.css
       */
      --glass-bg: rgb(255 253 248 / 0.4);
      --glass-blur: 18px;
      --glass-saturate: 1.15;
      --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
      --glass-border: rgb(26 26 26 / 0.1);
      --glass-inset: 0 1px 0 rgb(255 255 255 / 0.35) inset;
      --glass-shadow:
        var(--glass-inset),
        0 4px 6px rgb(0 0 0 / 0.04),
        0 10px 28px rgb(0 0 0 / 0.1);

      /* ── Filter component tokens (used by components/filter/filter.css) ── */
      --tf-touch: var(--touch);
      --tf-gap: 0.5rem;
      --tf-gap-x: 0.55rem;
      --tf-radius: var(--radius-md);
      --tf-border: var(--line);
      --tf-border-strong: var(--ink);
      --tf-surface: var(--card);
      --tf-ink: var(--ink);
      --tf-muted: var(--muted);
      --tf-accent: var(--blue);
      --tf-accent-soft: rgb(47 95 154 / 0.12);
      --tf-hover: rgb(0 0 0 / 0.06);
      --tf-text-sm: var(--text-sm);
      /* Match old library <select> type (15px inherit) — not the tiny eyebrow size */
      --tf-text-ui: 15px;
      --tf-text-input: var(--text-input);
      --tf-z-menu: 40;
      --tf-shadow: 0 8px 28px rgb(0 0 0 / 0.12);
      /* Per-chip fit width is set in JS (--tf-chip-fit on each button) */
      --tf-active-tab-w: 11px;
      --tf-active-tab-h: 3px;
      --tf-active-tab-inset: 8px;
    }

    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(ellipse 80% 50% at 10% 0%, #fff 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 100%, var(--orange-soft) 0%, transparent 50%),
        var(--cream);
      color: var(--ink);
      font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
      line-height: 1.35;
    }

    .page {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      max-width: var(--page-max);
      margin: 0 auto;
      padding:
        0
        max(var(--page-pad-x), var(--safe-left))
        calc(var(--page-pad-y) + var(--safe-bottom))
        max(var(--page-pad-x), var(--safe-right));
      gap: var(--page-gap);
    }

    /* Clearance for floating Guide + navigator (two docks) */
    body[data-mode="lesson"] .page {
      --nav-dock-clearance: 8.5rem; /* side-by-side pair */
      padding-bottom: calc(
        var(--page-pad-y) + var(--safe-bottom) + var(--nav-dock-clearance)
      );
    }
    @media (max-width: 719px) {
      body[data-mode="lesson"] .page {
        /* stacked: full Guide above nav */
        --nav-dock-clearance: 12rem;
      }
    }

    /* ═══ Modes: library vs lesson ═══ */
    body[data-mode="library"] #lesson-body,
    body[data-mode="library"] .why-here {
      display: none !important;
    }
    body[data-mode="lesson"] #library {
      display: none !important;
    }
    body[data-mode="loading"] #library,
    body[data-mode="loading"] #lesson-body {
      opacity: 0.5;
    }
    /* ═══ Library ═══ */
    .library {
      flex: 1;
      min-width: 0;
    }
    .library-head {
      margin-bottom: 1rem;
    }
    .library-title {
      margin: 0 0 0.35rem;
      font-size: clamp(1.6rem, 4vw, 2.1rem);
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .library-lead {
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
      max-width: 40rem;
      line-height: 1.45;
    }
    .library-toolbar {
      margin-bottom: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.55rem;
      width: 100%;
    }
    .library-search-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }
    .library-search {
      box-sizing: border-box;
      flex: 1 1 12rem;
      min-width: 10rem;
      width: auto;
      max-width: none;
      min-height: var(--touch);
      padding: 0.55rem 0.85rem;
      border: 2px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--card);
      font-size: var(--text-input);
      font-family: inherit;
      color: var(--ink);
    }
    /* No green focus ring — border darkens (keyboard still has a clear target) */
    .library-search:focus,
    .library-search:focus-visible {
      outline: none;
      border-color: var(--ink);
    }
    .library-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem 0.5rem;
      align-items: center;
      flex: 0 0 auto;
    }
    .library-filter {
      display: flex;
      flex-direction: row;
      align-items: center;
      min-width: 0;
    }
    .library-select {
      box-sizing: border-box;
      min-height: var(--touch);
      min-width: 7.5rem;
      max-width: 12rem;
      padding: 0.45rem 2rem 0.45rem 0.7rem;
      border: 2px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--card);
      font-size: 15px;
      font-family: inherit;
      color: var(--ink);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.7rem center;
      cursor: pointer;
    }
    .library-select:focus,
    .library-select:focus-visible {
      outline: none;
      border-color: var(--ink);
    }
    .library-status {
      margin: 0 0 0.75rem;
      font-size: 0.88rem;
      color: var(--muted);
      font-style: italic;
    }
    .library-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.75rem;
    }
    @media (min-width: 720px) {
      .library-list {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (min-width: 1024px) {
      .library-list {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
    .library-card {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-radius: 16px;
      border: 2px solid var(--line);
      background: var(--card);
      box-shadow: 0 4px 0 var(--line);
      text-decoration: none;
      color: inherit;
      min-height: var(--touch);
    }
    .library-card:hover {
      border-color: var(--ink);
    }
    .library-card-media {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      background: var(--line);
      overflow: hidden;
    }
    .library-card-cover {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .library-card-body {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      padding: 0.9rem 1.05rem 1rem;
    }
    .library-card-badge {
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--muted);
    }
    .library-card-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 800;
    }
    .library-card-ask {
      margin: 0;
      font-size: 0.9rem;
      color: var(--blue);
      font-weight: 600;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .library-card-nutshell {
      margin: 0;
      font-size: 0.88rem;
      color: var(--muted);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .library-card-meta {
      margin: 0.15rem 0 0;
      font-size: 0.75rem;
      color: var(--muted);
    }

    /*
     * The Focus — solid beige card + outside backdrop blur.
     * Blur covers lesson content; header stays sharp (higher z-index).
     */
    .why-here {
      position: fixed;
      /* Start below sticky header so chrome stays crisp */
      top: calc(var(--header-h, 56px) + var(--safe-top, 0px));
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 40; /* below header (50+), above lesson/floats */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem max(1.25rem, var(--safe-right))
        max(1.25rem, var(--safe-bottom)) max(1.25rem, var(--safe-left));
      box-sizing: border-box;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .why-here:not([hidden]) {
      pointer-events: auto;
      opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .why-here {
        transition: opacity 0.12s ease;
      }
    }
    /* Outside blur: softens everything under the overlay (not the card) */
    .why-here-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: rgb(246 240 228 / 0.42); /* cream veil */
      backdrop-filter: blur(14px) saturate(1.05);
      -webkit-backdrop-filter: blur(14px) saturate(1.05);
    }
    @media (prefers-reduced-motion: reduce) {
      .why-here-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgb(246 240 228 / 0.72);
      }
    }
    .why-here-card {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: min(42rem, 100%);
      max-height: min(78vh, 40rem);
      overflow: auto;
      padding: 1.45rem 1.5rem 1.5rem 1.6rem;
      border-radius: 22px;
      /* Solid beige — no blur on the card itself */
      background: var(--cream, #f6f0e4);
      border: 1px solid var(--line, #ebe4d6);
      box-shadow:
        0 1px 0 rgb(255 255 255 / 0.55) inset,
        0 12px 40px rgb(0 0 0 / 0.14);
      transform: translateY(0.4rem) scale(0.97);
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .why-here:not([hidden]) .why-here-card {
      transform: translateY(0) scale(1);
    }
    @media (prefers-reduced-motion: reduce) {
      .why-here-card,
      .why-here:not([hidden]) .why-here-card {
        transform: none;
        transition: none;
      }
    }
    .why-here-head {
      display: flex;
      align-items: flex-start;
      min-width: 0;
    }
    /* Card title — real headline, not a micro-kicker */
    .why-here-eyebrow {
      margin: 0;
      min-width: 0;
      font-size: clamp(1.45rem, 3.2vw, 1.85rem);
      letter-spacing: -0.02em;
      text-transform: none;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.15;
      text-wrap: balance;
    }
    /* Welcome line — larger, secondary to headline */
    .why-here-greet {
      margin: 0;
      font-size: clamp(1.1rem, 2.2vw, 1.28rem);
      font-weight: 400;
      line-height: 1.4;
      color: var(--muted);
    }
    .why-here-parts {
      display: flex;
      flex-direction: column;
      gap: 1.15rem;
    }
    .why-here-part {
      margin: 0;
      min-width: 0;
    }
    .why-here-part[hidden] {
      display: none !important;
    }
    /* Section labels — subheadline scale (not micro uppercase) */
    .why-here-part-label {
      margin: 0 0 0.35rem;
      font-size: clamp(0.95rem, 1.8vw, 1.08rem);
      letter-spacing: 0.01em;
      text-transform: none;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.3;
    }
    .why-here-part-text {
      margin: 0;
      font-size: clamp(1.12rem, 2.3vw, 1.3rem);
      font-weight: 400;
      line-height: 1.48;
      color: var(--ink);
      text-wrap: pretty;
      max-width: 48ch;
    }
    /* Question is the spine — slightly larger, still regular weight */
    #why-here-part-question .why-here-part-text {
      font-size: clamp(1.22rem, 2.7vw, 1.45rem);
    }
    .why-here-part-text strong {
      font-weight: 700;
    }
    /* Got it — bottom-right, reserved footer row */
    .why-here-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-shrink: 0;
      margin-top: 0.35rem;
      padding-top: 1rem;
      min-height: 3.25rem; /* room for 44px control + padding */
      box-sizing: border-box;
    }
    .why-here-dismiss {
      flex: 0 0 auto;
      box-sizing: border-box;
      min-height: 44px;
      min-width: 5.5rem;
      padding: 0 1.1rem;
      border-radius: 999px;
      border: 2px solid var(--ink);
      background: rgb(255 255 255 / 0.7);
      color: var(--ink);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      font-family: inherit;
      cursor: pointer;
      line-height: 1;
      transition: background 0.15s ease, opacity 0.12s ease;
    }
    .why-here-dismiss:hover {
      background: rgb(255 255 255 / 0.95);
    }
    .why-here-dismiss:active {
      opacity: 0.85;
    }
    .why-here-dismiss:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    body[data-mode="library"] .why-here,
    body[data-mode="loading"] .why-here {
      display: none !important;
    }

    /* Main + guide side-by-side on wide */
    .body-row {
      flex: 1;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 0.85rem;
      min-height: 0;
    }
    @media (min-width: 960px) {
      .body-row {
        flex-direction: row;
        /* Guide top aligns with image top (margin set in JS) */
        align-items: flex-start;
        gap: 1rem;
      }
    }

    .main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      /* Keep slide titles/body on a fixed left edge (never center the column) */
      align-items: stretch;
    }

    /*
     * Guide column: card is the layout box (same as before status-outside).
     * Status hangs BELOW the card via absolute so it never changes wrap height
     * or the JS top-align math (margin-top pins card top to image top).
     */
    .guide-wrap {
      order: 2;
      position: relative;
      flex-shrink: 0;
      width: 100%;
      min-width: 0;
      z-index: 2;
    }
    /* While voice menu is open, sit above main media so the list isn’t under the frame */
    .guide-wrap:has(.voice-picker[data-open="true"]) {
      z-index: 40;
    }
    @media (min-width: 960px) {
      .guide-wrap {
        order: 0;
        width: var(--guide-w);
        max-width: 34%;
        align-self: flex-start;
        /* margin-top set in JS so guide top = image top */
      }
    }
    @media (max-width: 959px) {
      .guide-wrap {
        margin-top: 0 !important;
      }
    }

    /* Guide accordion — under on mobile, right rail on desktop */
    .guide {
      background: var(--card);
      border: 2px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 4px 0 var(--line);
      flex-shrink: 0;
      /* visible so voice dropdown can escape the card (was hidden → clipped) */
      overflow: visible;
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
      /* Above .tts-status so voice menu never paints under the error line */
      z-index: 2;
    }
    @media (min-width: 960px) {
      .guide {
        max-height: calc(100dvh - 7rem);
      }
      .guide[data-open="true"] .guide-panel {
        overflow: auto;
        min-height: 0;
      }
    }
    /* Tablet/phone column: guide uses full height (no fixed bottom Back/Next) */
    @media (max-width: 959px) {
      .guide[data-open="true"] {
        max-height: calc(100dvh - 5.5rem);
      }
      .guide[data-open="true"] .guide-panel {
        flex: 1 1 auto;
        overflow: auto;
        min-height: 0;
        max-height: none;
      }
      .guide .transport {
        flex-shrink: 0;
      }
    }

    .guide-summary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      min-height: 48px;
      padding: 0.65rem 0.85rem;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      color: var(--ink);
    }
    .guide-summary:focus-visible {
      outline: 3px solid var(--green);
      outline-offset: -3px;
    }
    .guide-summary-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }
    .guide-chevron {
      width: 1.1rem;
      height: 1.1rem;
      flex-shrink: 0;
      margin-left: auto;
      transition: transform 0.2s;
    }
    /* Closed: chevron points right; open: points down */
    .guide[data-open="true"] .guide-chevron {
      transform: rotate(90deg);
    }
    /* Tablet/mobile compact: eyebrow + title on one line */
    @media (max-width: 959px) {
      .guide[data-open="false"] .guide-summary-text {
        flex-direction: row;
        align-items: baseline;
        gap: 0.4rem;
        flex-wrap: nowrap;
      }
      .guide[data-open="false"] .guide-eyebrow {
        flex-shrink: 0;
      }
      .guide[data-open="false"] .guide-eyebrow::after {
        content: " · ";
        letter-spacing: 0;
        text-transform: none;
      }
      .guide[data-open="false"] .guide-title {
        flex: 1;
        min-width: 0;
      }
    }
    .guide-eyebrow {
      display: block;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--muted);
    }
    .guide-title {
      display: block;
      font-size: 0.92rem;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Transcript only when expanded — no divider line; spacing does the job */
    .guide-panel {
      display: none;
      padding: 0.55rem 0.85rem 0.75rem;
      border-top: none;
      min-height: 0;
      overflow: auto;
    }
    .guide[data-open="true"] .guide-panel {
      display: block;
    }

    .guide-text {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.45;
      color: var(--ink);
    }

    /*
     * Tutor lives OUTSIDE .guide-panel (sibling under .guide).
     * Chevron only collapses transcript; tutor stays out.
     */
    .tutor {
      flex-shrink: 0;
      padding: 0.75rem 0.85rem 0.55rem;
      border-top: 1px solid var(--line);
    }
    /*
     * One row always: [ Ask me anything | field/wave ] + same mic on the RIGHT.
     * Idle: CTA + mic. Open: field + mic. Dictate: wave + mic→send.
     */
    .tutor-compose-row {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }
    .tutor-open {
      box-sizing: border-box;
      flex: 1 1 auto;
      min-width: 0;
      min-height: var(--touch);
      padding: 0.55rem 0.9rem;
      border-radius: var(--radius-pill);
      border: 2px solid var(--ink);
      background: transparent;
      color: var(--ink);
      font-weight: 700;
      font-size: 0.85rem;
      font-family: inherit;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s ease;
    }
    .tutor-open:hover {
      background: rgba(0, 0, 0, 0.04);
    }
    .tutor[data-open="true"] .tutor-open {
      display: none;
    }
    /* Slot: textarea + wave bar — only when compose is open */
    .tutor-field-slot {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      min-height: var(--touch);
      overflow: hidden;
      display: none;
    }
    .tutor[data-open="true"] .tutor-field-slot {
      display: block;
    }
    .tutor-field-slot[hidden] {
      display: none !important;
    }
    .tutor[data-open="true"] .tutor-field-slot:not([hidden]) {
      display: block;
    }
    /* Listening / label: lock one-line pill so wave fills the slot */
    .tutor-field-slot.is-bar {
      height: 44px;
      max-height: 44px;
    }
    .tutor-field-slot.is-bar .tutor-input {
      transform: translateX(-110%);
      opacity: 0;
      pointer-events: none;
      height: 44px;
      max-height: 44px;
    }
    .tutor-input {
      box-sizing: border-box;
      display: block;
      width: 100%;
      min-width: 0;
      min-height: var(--touch);
      max-height: 8rem;
      margin: 0;
      padding: 0.55rem 0.75rem;
      border: 2px solid var(--line);
      /* Shell JS sets radius from height: pill when short, softer when tall */
      border-radius: var(--radius-pill);
      background: var(--surface-faint);
      color: var(--ink);
      font-family: inherit;
      font-size: var(--text-input); /* iOS: avoid focus zoom */
      line-height: 1.4;
      resize: none;
      field-sizing: content;
      overflow-y: auto;
      transition:
        border-radius 0.12s ease,
        transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.22s ease;
    }
    .tutor-input:focus {
      /* One ring only — border darkens; no second green outline */
      outline: none;
      border-color: var(--ink);
      box-shadow: none;
    }
    .tutor-input:focus-visible {
      outline: none;
      border-color: var(--ink);
    }
    .tutor-input:disabled {
      opacity: 0.7;
    }
    /* Wave pill — self-driven via .is-on (does not depend on parent data-*) */
    .tutor-wave-bar {
      box-sizing: border-box;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 44px;
      min-height: var(--touch);
      display: none;
      align-items: center;
      justify-content: center;
      /* Equal air left + right of the waveform (matches send gap rhythm) */
      padding: 0 0.85rem;
      border-radius: var(--radius-pill);
      background: var(--ink);
      border: 2px solid var(--ink);
      opacity: 0;
      transform: translateX(16%);
      pointer-events: none;
      z-index: 2;
      transition:
        transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.2s ease;
    }
    .tutor-wave-bar.is-on {
      display: flex;
      opacity: 1;
      transform: translateX(0);
    }
    .tutor-wave-bar[hidden] {
      display: none !important;
    }
    .tutor-wave {
      display: block;
      width: 100%;
      height: 28px;
      max-height: 100%;
      pointer-events: none;
    }
    .tutor-wave-label {
      display: none;
      width: 100%;
      margin: 0;
      padding: 0 0.25rem;
      color: var(--white);
      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
    }
    /* Transcribing / no speech — text in the bar where the wave was */
    .tutor-wave-bar[data-mode="label"] .tutor-wave {
      display: none !important;
    }
    .tutor-wave-bar[data-mode="label"] .tutor-wave-label {
      display: block;
    }
    .tutor-wave-bar[data-mode="label"] .tutor-wave-label[hidden] {
      display: none !important;
    }
    .tutor-mic {
      box-sizing: border-box;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: var(--touch);
      padding: 0;
      border-radius: var(--radius-pill);
      border: 2px solid var(--ink);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .tutor-mic-face {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }
    .tutor-mic-face[hidden] {
      display: none !important;
    }
    .tutor-mic svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    .tutor-mic:hover {
      background: rgba(0, 0, 0, 0.04);
    }
    /* Type mode or listening stop → solid black circular send */
    .tutor-mic[data-mode="send"],
    .tutor-mic[data-mode="listening"],
    .tutor-mic[aria-pressed="true"] {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--white);
      animation: none;
      box-shadow: none;
    }
    .tutor-mic[data-mode="send"]:hover,
    .tutor-mic[data-mode="listening"]:hover {
      background: var(--ink);
      opacity: 0.95;
    }
    .tutor-mic:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .tutor-answer {
      margin: 0.65rem 0 0;
      padding: 0.55rem 0.65rem;
      border-radius: 10px;
      background: rgba(45, 173, 113, 0.08);
      border: 1px solid rgba(45, 173, 113, 0.25);
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--ink);
      white-space: pre-wrap;
    }
    .tutor-status {
      margin: 0.5rem 0 0.15rem;
      font-size: var(--text-sm);
      line-height: 1.35;
      color: var(--muted);
      font-style: italic;
    }
    .tutor-status.is-error {
      color: var(--amber);
      font-style: normal;
    }
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /*
     * Outside the white card; absolute so wrap height = card only.
     * z-index MUST stay below .guide (and its voice menu). Equal/higher
     * z-index + later DOM order made the error paint through the dropdown.
     */
    .tts-status {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin: 0.4rem 0 0;
      padding: 0 0.15rem;
      font-size: var(--text-sm);
      line-height: 1.35;
      color: var(--muted);
      font-style: italic;
      z-index: 0;
      pointer-events: none; /* never block voice menu clicks */
    }
    .tts-status[hidden] {
      display: none;
    }
    .tts-status.is-error {
      color: var(--amber);
      font-style: normal;
    }
    /* When voice list is open, keep error fully under the menu stack */
    .guide-wrap:has(.voice-picker[data-open="true"]) .tts-status {
      z-index: 0;
    }

    /*
     * Transport (guide): voice picker only.
     * Navigator lives in .nav-dock (floating bottom chrome).
     */
    .transport {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      align-items: center;
      padding: 0.45rem 0.85rem 0.75rem;
      border-top: none;
      overflow: visible;
      position: relative;
      z-index: 2;
    }
    .guide[data-open="true"] .transport {
      padding-top: 0.15rem;
    }
    .guide[data-open="false"] .transport {
      padding-top: 0;
    }

    /*
     * Lesson float — THREE docks:
     *   ≥960: Guide bottom-left · Nav bottom-center · Ask bottom-right
     *   720–959: same absolute docks, narrower floors (no mid-width crush)
     *   <720: column stack, right-aligned (compact redesign later)
     */
    .lesson-float {
      position: fixed;
      inset: 0;
      z-index: 35;
      display: none;
      pointer-events: none;
      /* One shared edge distance: nav-to-bottom = guide-to-bottom = guide-to-right */
      --float-inset: calc(0.65rem + var(--safe-bottom));
      --float-inset-end: max(var(--float-inset), var(--safe-right));
      --float-inset-start: max(0.75rem, var(--safe-left));
    }
    @media (min-width: 960px) {
      .lesson-float {
        --float-inset: calc(1.35rem + var(--safe-bottom));
        --float-inset-end: max(var(--float-inset), var(--safe-right));
      }
    }
    body[data-mode="lesson"] .lesson-float:not([hidden]) {
      display: block;
    }
    .lesson-float[hidden] {
      display: none !important;
    }

    .lesson-float-pair {
      pointer-events: none;
      position: absolute;
      inset: 0;
      /* Mobile default: column stack, right-aligned */
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 0.5rem;
      padding:
        0
        var(--float-inset-end)
        var(--float-inset)
        var(--float-inset-start);
      box-sizing: border-box;
      width: auto;
      max-width: none;
    }

    /* ≥720: absolute three docks (narrow mid widths below) */
    @media (min-width: 720px) {
      .lesson-float-pair {
        display: block;
        padding: 0;
      }
      .guide-dock {
        position: absolute;
        left: var(--float-inset-start);
        right: auto;
        bottom: var(--float-inset);
        transform: none;
        max-width: min(28rem, calc(38vw - var(--float-inset-start)));
      }
      .nav-dock {
        position: absolute;
        left: 50%;
        bottom: var(--float-inset);
        transform: translateX(-50%);
        max-width: min(22rem, 32vw);
        z-index: 1;
      }
      .ask-dock {
        position: absolute;
        right: var(--float-inset-end);
        left: auto;
        bottom: var(--float-inset);
        transform: none;
        max-width: min(24rem, calc(36vw - var(--float-inset-end)));
      }
    }

    /*
     * Docks: Guide/Ask must NEVER flex-crush. Nav may soft-shrink.
     * Compact pills pin flush left (Guide) / right (Ask) — never centered in a wide box.
     */
    .guide-dock,
    .ask-dock,
    .nav-dock {
      pointer-events: auto;
      display: flex;
      align-items: flex-end;
      max-width: 100%;
    }
    .nav-dock {
      justify-content: center;
      flex: 0 1 auto;
      min-width: 0;
    }
    .guide-dock {
      flex: 0 0 auto;
      min-width: 0;
      width: auto;
      justify-content: flex-start; /* pin glass to left edge of dock */
    }
    .ask-dock {
      flex: 0 0 auto;
      min-width: 0;
      width: auto;
      justify-content: flex-end; /* pin glass to right edge of dock */
    }
    /* Compact: dock hugs pill so it sits at the corner, not mid-gap */
    @media (min-width: 720px) {
      .guide-dock:has(.guide[data-open="false"]) {
        width: max-content;
        max-width: min(13.5rem, 46vw);
      }
      /* Ask compose-only: fixed hug (same open/closed — no jump) */
      .ask-dock:not(
          :has(.tutor-thread:not([hidden]):not(:empty))
        ) {
        width: max-content;
        max-width: none;
      }
    }

    .guide-dock-surface,
    .ask-dock-surface,
    .nav-dock-surface {
      pointer-events: auto;
      box-sizing: border-box;
      max-width: 100%;
      background: var(--glass-bg);
      backdrop-filter: var(--glass-filter);
      -webkit-backdrop-filter: var(--glass-filter);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      border-radius: var(--float-surface-radius, 22px);
    }

    /* Guide float — left corner; wider only when expanded */
    .guide-dock-surface {
      width: min(20rem, 100%);
      min-width: min(16rem, 100%);
      padding: 0;
      overflow: visible;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      max-height: var(--guide-float-max-h, min(62vh, 26rem));
      transition: width 0.2s cubic-bezier(0.25, 1, 0.5, 1),
        min-width 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    }
    /*
     * Compact Guide: same as compact Ask — no glass blur, only control pills.
     * Expanded (transcript open) keeps dock glass below.
     */
    .guide-dock-surface:has(.guide[data-open="false"]) {
      width: max-content;
      min-width: 0;
      max-width: min(16rem, 50vw);
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .guide-dock-surface:has(.guide[data-open="false"]) .guide-host--float,
    .guide-dock-surface:has(.guide[data-open="false"]) .guide-wrap,
    .guide-dock-surface:has(.guide[data-open="false"]) .guide {
      width: max-content;
      max-width: 100%;
      min-width: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /*
     * Compact: "Guide" pill CTA (no chevron) + voice pill — same language as
     * Ask me anything + mic. Click Guide opens the transcript panel.
     */
    .guide-dock-surface:has(.guide[data-open="false"]) .guide-head {
      padding: var(--float-pad-y) var(--float-pad-x);
      gap: var(--float-control-gap);
      background: transparent;
    }
    .guide-dock-surface:has(.guide[data-open="false"]) .guide-summary {
      flex: 0 0 auto;
      border: var(--float-stroke, 2px) solid var(--ink);
      background: var(--float-btn-fill);
      border-radius: var(--radius-pill, 999px);
      min-height: var(--float-control-h);
      height: var(--float-control-h);
      min-width: 0;
      width: auto;
      padding: 0 0.7rem;
      box-sizing: border-box;
      justify-content: center;
      text-align: center;
      gap: 0;
    }
    .guide-dock-surface:has(.guide[data-open="false"]) .guide-label {
      flex: 0 0 auto;
      max-width: none;
      text-align: center;
      padding: 0;
    }
    .guide-dock-surface:has(.guide[data-open="false"]) .voice-trigger-label {
      display: block;
      max-width: 4rem;
    }
    .guide-dock-surface:has(.guide[data-open="false"]) .voice-trigger {
      min-width: var(--float-control-h);
      width: auto;
      padding: 0 0.65rem;
      justify-content: center;
    }
    /* Tablet mid-width: soft floors so Guide|Nav|Ask don't collide */
    @media (min-width: 720px) and (max-width: 959px) {
      .guide-dock-surface:has(.guide[data-open="true"]) {
        width: min(18rem, 34vw);
        min-width: min(13rem, 100%);
        max-height: var(--guide-float-max-h, min(56vh, 22rem));
      }
    }
    @media (min-width: 960px) {
      .guide-dock-surface:has(.guide[data-open="true"]) {
        width: var(--guide-float-w, min(28rem, 36vw));
        min-width: var(--guide-float-min, 18rem);
        max-height: var(--guide-float-max-h, min(62vh, 26rem));
      }
    }

    /* Ask float — right corner; compose footprint fixed (no open/close jump) */
    .ask-dock-surface {
      width: max-content;
      min-width: 0;
      padding: 0;
      overflow: visible;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      /* No width transition — jumps feel like position changes */
      transition: none;
    }
    .ask-dock-surface .ask-host--float,
    .ask-dock-surface .ask-wrap,
    .ask-dock-surface .tutor {
      width: max-content;
      max-width: 100%;
      min-width: 0;
    }
    /* Chat thread present → allow wider surface; compose row still fixed width */
    .ask-dock-surface:has(.tutor-thread:not([hidden]):not(:empty)) {
      width: min(18rem, 28vw);
      min-width: min(12.5rem, 100%);
      align-items: stretch;
    }
    .ask-dock-surface:has(.tutor-thread:not([hidden]):not(:empty)) .ask-host--float,
    .ask-dock-surface:has(.tutor-thread:not([hidden]):not(:empty)) .ask-wrap,
    .ask-dock-surface:has(.tutor-thread:not([hidden]):not(:empty)) .tutor {
      width: 100%;
      max-width: none;
    }
    @media (max-width: 719px) {
      /* Temporary stack until compact mobile redesign */
      .lesson-float-pair {
        align-items: stretch;
      }
      .guide-dock {
        align-self: flex-start; /* flush start (left) */
        width: max-content;
        max-width: min(28rem, 100%);
      }
      .ask-dock {
        align-self: flex-end; /* flush end (right) */
        width: max-content;
        max-width: min(28rem, 100%);
      }
      .nav-dock {
        align-self: center;
      }
      .guide-dock:has(.guide[data-open="true"]) {
        width: min(20rem, 100%);
        max-width: min(28rem, 100%);
      }
      .ask-dock:has(.tutor-thread:not([hidden]):not(:empty)) {
        width: min(18rem, 100%);
        max-width: min(28rem, 100%);
      }
      .guide-dock-surface:has(.guide[data-open="true"]) {
        width: min(20rem, 100%);
        min-width: min(12rem, 100%);
      }
      .ask-dock-surface:has(.tutor-thread:not([hidden]):not(:empty)) {
        width: min(18rem, 100%);
        min-width: min(12.5rem, 100%);
      }
    }

    .guide-host--float {
      width: 100%;
      min-width: 0; /* fill surface; surface owns the floor */
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      max-height: inherit;
    }
    /*
     * Override legacy side-rail rules on .guide-wrap (width: var(--guide-w);
     * max-width: 34% @ ≥960px) — those crushed the float to ~108px inside
     * the dock surface. Float Guide always fills the surface width.
     */
    .guide-host--float .guide-wrap {
      width: 100%;
      max-width: none; /* beats side-rail max-width: 34% */
      min-width: 0;
      align-self: stretch;
      order: unset;
      max-height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    /* Floating Guide: outer dock is the glass; strip inner double frame */
    .guide-host--float .guide.guide--float {
      width: 100%;
      max-width: none;
      max-height: var(--guide-float-max-h, min(62vh, 26rem));
      display: flex;
      flex-direction: column;
      min-height: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .guide-host--float .guide.guide--float .guide-panel {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      max-height: none;
    }
    .guide-host--float .guide.guide--float .guide-head {
      flex-shrink: 0;
    }

    .ask-host--float {
      width: 100%;
      min-width: 0;
    }
    .ask-host--float .ask-wrap {
      width: 100%;
    }
    .ask-host--float .tutor {
      border-top: none;
      display: flex;
      flex-direction: column;
      max-height: 50vh;
      /* Pad matches Guide/Nav so control row height aligns */
      padding: var(--float-pad-y) var(--float-pad-x);
      background: transparent;
      gap: var(--float-control-gap);
      box-sizing: border-box;
    }
    .ask-host--float .tutor-thread {
      max-height: calc(50vh - 4.5rem);
      min-height: 0;
      overflow-y: auto;
    }
    .ask-host--float .tutor-compose-row {
      flex-wrap: nowrap;
      flex-shrink: 0;
      margin-top: auto;
      margin-left: auto;
    }
    .ask-host--float .tutor-open {
      white-space: nowrap;
    }
    /*
     * Compose-only (idle or typing): no glass frame — single pill chrome.
     * Chat thread: glass on the surface (not a second frame around the field).
     */
    .ask-dock-surface:not(:has(.tutor-thread:not([hidden]):not(:empty))) {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .ask-dock-surface:has(.tutor-thread:not([hidden]):not(:empty)) {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      backdrop-filter: var(--glass-filter);
      -webkit-backdrop-filter: var(--glass-filter);
    }

    .nav-dock-surface {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      width: max-content;
      border-radius: 999px;
      padding: 0.35rem 0.5rem;
    }

    .nav-dock .navigator-host {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      min-width: 0;
      flex: 0 1 auto;
    }
    .nav-dock .navigator {
      --nav-ink: var(--ink);
      --nav-line: var(--line, #ebe4d6);
      padding: 0.1rem 0.15rem;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      background: transparent;
      width: auto;
      max-width: 100%;
      gap: 0.45rem;
    }
    @media (max-width: 380px) {
      .nav-dock .navigator {
        gap: 0.3rem;
      }
      .nav-dock-surface {
        padding: 0.3rem 0.4rem;
      }
    }

    /*
     * Custom voice picker (not native <select>).
     * Full width of guide transport row.
     */
    .voice-picker {
      position: relative;
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      z-index: 1;
    }
    .voice-picker[data-open="true"] {
      z-index: 50;
    }

    .transport button.voice-trigger {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.3rem;
      width: 100%;
      height: 44px;
      min-height: var(--touch);
      min-width: 0;
      margin: 0;
      padding: 0 0.55rem 0 0.7rem;
      border-radius: var(--radius-pill);
      border: 2px solid var(--ink);
      background: transparent;
      color: var(--ink);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      /* beat .transport button { line-height: 0 } */
      line-height: 1.15;
      text-align: left;
    }
    .transport button.voice-trigger:hover {
      background-color: rgb(26 26 26 / 0.04);
    }
    .transport button.voice-trigger:focus {
      outline: none;
    }
    .transport button.voice-trigger:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    .voice-trigger-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
    }
    /* Loading lives in the voice pill — keep dropdown usable so user can switch voice mid-load */
    .voice-picker[data-loading="true"] .voice-trigger-label {
      color: var(--muted);
      font-style: italic;
    }
    .voice-trigger-chevron {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.75;
      transition: transform 0.15s ease;
      /* not absolute — unlike icon-only SVGs */
      position: static;
      margin: 0;
    }
    .voice-picker[data-open="true"] .voice-trigger-chevron {
      transform: rotate(180deg);
    }
    /*
     * Voice menu chrome lives in components/guide/guide.css.
     * Placement is JS viewport-aware (data-menu-side up|down) — do not re-add
     * fixed top/bottom media queries here; they clip against the nav dock.
     */

    .slide {
      display: none;
      flex: 1;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      /* No fade/slide-up on headlines or body — instant swap */
      min-height: 0;
      width: 100%;
      text-align: left;
    }
    .slide.is-on { display: flex; }

    /* Shared content start edge — titles, leads, media, demos, facts */
    .slide h1,
    .slide .lead,
    .slide .pic,
    .slide .demo,
    .slide .facts,
    .slide .tiny {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
    }

    h1 {
      font-size: clamp(1.55rem, 3.8vw, 2.25rem);
      margin: 0.15rem 0 0.45rem;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    h1.one-line {
      white-space: nowrap;
    }
    @media (max-width: 520px) {
      h1.one-line {
        white-space: normal;
      }
    }

    .lead {
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      color: var(--ink);
      margin: 0 0 0.85rem;
      font-weight: 500;
    }
    .lead.one-line {
      white-space: nowrap;
    }
    @media (max-width: 720px) {
      .lead.one-line {
        white-space: normal;
      }
    }

    .pic {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      margin: 0.25rem 0 0.85rem;
      min-height: 0;
      width: 100%;
    }

    /*
     * Image fills the frame edge-to-edge (no white border / letterbox).
     * Width uses full main column, height follows 16:9, capped by viewport.
     */
    .pic-frame {
      --pic-max-h: min(58vh, 560px);
      position: relative;
      /* Full main width, same start as titles — no horizontal centering */
      width: 100%;
      max-width: 100%;
      aspect-ratio: 16 / 9;
      max-height: var(--pic-max-h);
      margin: 0;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background: transparent;
      border: none;
      overflow: hidden;
      line-height: 0;
    }
    .pic-frame img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    /* Diagram-as-hero: same well as image, neutral cream (not art-style pack) */
    .pic-frame--diagram {
      background: var(--cream, #f6f0e4);
      border: 1px solid rgba(74, 70, 63, 0.18);
      overflow: auto;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1rem;
    }
    .pic-frame--diagram img {
      object-fit: contain;
      background: transparent;
    }
    .pic-frame--diagram .mermaid {
      margin: 0;
      width: 100%;
      max-height: 100%;
      overflow: auto;
      background: transparent;
      font-size: 14px;
      text-align: center;
      white-space: normal;
    }
    .pic-frame--diagram .mermaid svg {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    /* Failed mermaid: show diagnostic instead of empty cream */
    .pic-frame--diagram .mermaid[data-failed="1"] {
      color: var(--amber);
      font-size: 0.85rem;
      line-height: 1.4;
      white-space: pre-wrap;
      padding: 0.5rem;
    }
    @media (min-width: 960px) {
      .pic-frame {
        --pic-max-h: min(62vh, 600px);
      }
    }

    .facts {
      display: grid;
      gap: 0.65rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
      .facts.two { grid-template-columns: 1fr 1fr; }
    }

    .fact {
      background: var(--card);
      border-radius: 16px;
      padding: 0.9rem 1rem;
      border: 2px solid var(--line);
      box-shadow: 0 4px 0 var(--line);
    }
    .fact strong {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 0.2rem;
    }
    .fact span {
      font-size: 0.95rem;
      color: var(--ink);
    }
    .fact.blue { border-color: var(--fact-blue-border); box-shadow: 0 4px 0 var(--fact-blue-border); background: var(--blue-soft); }
    .fact.orange { border-color: var(--fact-orange-border); box-shadow: 0 4px 0 var(--fact-orange-border); background: var(--orange-soft); }
    .fact.green { border-color: var(--fact-green-border); box-shadow: 0 4px 0 var(--fact-green-border); background: var(--fact-green-bg); }
    .fact.red { border-color: var(--fact-red-border); box-shadow: 0 4px 0 var(--fact-red-border); background: var(--fact-red-bg); }

    .demo {
      position: relative;
      width: 100%;
      max-width: 100%;
      /* Same left edge as h1 — do NOT center with margin:auto */
      margin: 0;
      background: var(--card);
      border-radius: var(--radius);
      border: 3px solid var(--white);
      box-shadow: var(--shadow);
      padding: 1.25rem 1rem 1.5rem;
      min-height: 280px;
      overflow: hidden;
    }

    .bags {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      align-items: end;
      min-height: 180px;
    }

    .bag {
      border-radius: 18px;
      padding: 0.75rem;
      min-height: 160px;
      position: relative;
    }
    .bag.worker {
      background: linear-gradient(180deg, #3d6eae 0%, var(--blue) 100%);
      color: var(--white);
    }
    .bag.assets {
      background: linear-gradient(180deg, #e8944a 0%, var(--orange) 100%);
      color: var(--white);
    }
    .bag h3 {
      margin: 0 0 0.35rem;
      font-size: 0.95rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .bag .sub {
      font-size: 0.8rem;
      opacity: 0.9;
      margin-bottom: 0.6rem;
    }

    .slot {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      min-height: 72px;
      align-content: flex-start;
    }

    .pkg {
      font-size: var(--text-xs);
      font-weight: 700;
      padding: 0.35rem 0.5rem;
      border-radius: var(--radius-pill);
      background: rgb(255 255 255 / 0.22);
      border: 1px solid rgb(255 255 255 / 0.35);
      white-space: nowrap;
      /* ease-out-quart — no bounce/overshoot */
      animation: popIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
    }
    .pkg.media { background: #fff; color: var(--orange); border-color: var(--white); }
    .pkg.server { background: #fff; color: var(--blue); border-color: var(--white); }

    @keyframes popIn {
      from { opacity: 0; transform: scale(0.6); }
      to { opacity: 1; transform: scale(1); }
    }

    .meter {
      margin-top: 1rem;
      background: var(--surface-warm);
      border-radius: var(--radius-pill);
      height: 18px;
      overflow: hidden;
      border: 2px solid var(--surface-border);
    }
    .meter > i {
      display: block;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--green), #7dd3a8);
      border-radius: inherit;
      transition: width 0.8s cubic-bezier(.2,.8,.2,1), background 0.4s;
    }
    .meter.over > i {
      background: linear-gradient(90deg, var(--orange), var(--red));
    }
    .meter-label {
      display: flex;
      justify-content: space-between;
      font-size: var(--text-sm);
      font-weight: 700;
      margin-top: 0.35rem;
      color: var(--muted);
    }
    .meter-label .warn { color: var(--red); }

    .phone-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-top: 1rem;
      flex-wrap: wrap;
    }
    .phone {
      width: 72px;
      height: 120px;
      border-radius: 14px;
      border: 3px solid var(--ink);
      background: #111;
      position: relative;
      box-shadow: var(--shadow);
    }
    .phone::after {
      content: "";
      position: absolute;
      inset: 8px 6px 12px;
      border-radius: 6px;
      background: linear-gradient(160deg, #2a2a2a, #111);
    }
    .phone.playing::after {
      background: linear-gradient(160deg, #1e3a2f, #0d1a14);
      animation: pulseScreen 1.2s ease infinite;
    }
    @keyframes pulseScreen {
      0%,100% { filter: brightness(1); }
      50% { filter: brightness(1.25); }
    }
    .arrow-anim {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--orange);
      animation: hop 1s ease infinite;
    }
    @keyframes hop {
      0%,100% { transform: translateX(0); opacity: 0.5; }
      50% { transform: translateX(6px); opacity: 1; }
    }

    /* Bottom Back/Next nav removed — countdown lives on navigator next control */
    .next-cancel svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .tiny {
      font-size: 0.82rem;
      color: var(--muted);
      margin-top: 0.5rem;
    }

    /* Extra box: absolute Finder path (personal Mac lesson) */
    a.detail-box {
      display: block;
      margin-top: 1.1rem;
      padding: 0.9rem 1rem;
      border-radius: 16px;
      border: 2px solid var(--line);
      box-shadow: 0 4px 0 var(--line);
      background: var(--card);
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.12s ease, border-color 0.12s ease;
    }
    a.detail-box:hover {
      background: var(--white);
      border-color: var(--ink);
    }
    a.detail-box:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    a.detail-box .detail-eyebrow {
      display: block;
      margin: 0 0 0.35rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
    }
    a.detail-box .detail-path {
      display: block;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: var(--text-sm);
      font-weight: 600;
      line-height: 1.4;
      word-break: break-all;
      color: var(--ink);
    }
    a.detail-box .detail-hint {
      display: block;
      margin-top: 0.4rem;
      font-size: var(--text-xs);
      color: var(--muted);
      font-weight: 600;
    }

    .big-num {
      font-size: clamp(2rem, 6vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      margin: 0.25rem 0;
    }
    .big-num .over { color: var(--red); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }