/* arecibo-message lesson-specific styles. Extracted during theme polish Phase 4. */
body {
      margin: 0;
      color: #d9f0e8;
      background:
        radial-gradient(1100px 500px at 18% -8%, rgba(30, 200, 120, 0.13), transparent 55%),
        radial-gradient(800px 420px at 88% 5%, rgba(160, 60, 220, 0.15), transparent 52%),
        linear-gradient(180deg, #020c06 0%, #040a10 100%);
      overflow-x: hidden;
    }

    .am-topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(14px) saturate(150%);
      background: rgba(2, 10, 6, 0.9);
      border-bottom: 1px solid rgba(40, 200, 120, 0.16);
    }
    .am-topbar-inner {
      width: min(1340px, calc(100% - 2rem));
      margin: 0 auto;
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .am-topbar a {
      color: #6ee8b0;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 700;
    }
    .am-topbar a:hover { color: #fff; }
    .am-topbar-title {
      font-size: 0.92rem;
      font-weight: 800;
      color: #d8f5ea;
      letter-spacing: -0.01em;
    }

    /* ── Hero ── */
    .am-hero {
      max-width: 760px;
      margin: 0 auto;
      padding: 0.8rem 1rem 0.7rem;
      text-align: center;
    }
    .am-eyebrow {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4de8a0;
      margin: 0 0 0.6rem;
    }
    .am-hero h1 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.9rem, 4.5vw, 3rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
      color: #fff;
    }
    .am-hero p {
      margin: 0;
      font-size: 0.96rem;
      color: rgba(196, 240, 218, 0.72);
      line-height: 1.65;
    }

    /* ── Main layout ── */
    .am-wrap {
      display: block;
      width: min(1340px, calc(100% - 2rem));
      margin: 0 auto;
      padding-bottom: 0.5rem;
    }
    @media (max-width: 960px) {
      .am-wrap { grid-template-columns: 1fr; }
    }

    /* ── Cards ── */
    .am-card {
      border-radius: 20px;
      border: 1px solid rgba(40, 200, 120, 0.16);
      background: rgba(4, 14, 10, 0.72);
      box-shadow: 0 18px 38px rgba(0,0,0,0.28);
      backdrop-filter: blur(12px);
    }
    .am-card-head {
      padding: 1rem 1.2rem 0.7rem;
      border-bottom: 1px solid rgba(40, 200, 120, 0.1);
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .am-card-head h2 {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #7ae8b8;
    }
    .am-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.22rem 0.6rem;
      border-radius: 999px;
      background: rgba(30,200,100,0.12);
      border: 1px solid rgba(30,200,100,0.28);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #5de8a8;
    }

    /* ── Decoder canvas ── */
    .am-decoder-shell {
      padding: 1.2rem;
    }
    .am-decoder-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
      align-items: center;
    }
    .am-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.42rem 0.9rem;
      border-radius: 8px;
      border: 1px solid rgba(40,200,120,0.3);
      background: rgba(20,100,60,0.25);
      color: #8ef5c4;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      font-family: inherit;
    }
    .am-btn:hover {
      background: rgba(30,180,100,0.35);
      border-color: rgba(40,220,130,0.5);
      color: #fff;
    }
    .am-btn.am-btn--active {
      background: rgba(30,200,100,0.32);
      border-color: #3de89a;
      color: #fff;
    }
    .am-btn-group {
      display: flex;
      gap: 0.3rem;
    }
    .am-canvas-wrap {
      display: flex;
      justify-content: center;
      background: rgba(0,0,0,0.5);
      border-radius: 12px;
      border: 1px solid rgba(40,200,120,0.1);
      padding: 1rem;
    }
    #areciboCanvas {
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      border-radius: 4px;
      cursor: crosshair;
    }
    .am-canvas-hint {
      text-align: center;
      font-size: 0.73rem;
      color: rgba(160,220,190,0.5);
      margin-top: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.05em;
    }

    /* ── Section info bar ── */
    .am-section-bar {
      margin-top: 1rem;
      border-radius: 12px;
      border: 1px solid rgba(40,200,120,0.14);
      background: rgba(4,18,12,0.8);
      padding: 0.8rem 1rem;
      min-height: 56px;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      transition: border-color 0.2s;
    }
    .am-section-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.2);
    }
    .am-section-name {
      font-size: 0.88rem;
      font-weight: 800;
      color: #c8f0dc;
    }
    .am-section-desc {
      font-size: 0.8rem;
      color: rgba(180,230,200,0.7);
      margin-top: 0.18rem;
    }

    /* ── Binary primer ── */
    .am-binary-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
      margin-top: 0.8rem;
    }
    .am-binary-table th {
      text-align: left;
      padding: 0.35rem 0.7rem;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6de8b0;
      border-bottom: 1px solid rgba(40,200,120,0.15);
    }
    .am-binary-table td {
      padding: 0.32rem 0.7rem;
      color: rgba(200,240,220,0.82);
      border-bottom: 1px solid rgba(40,200,120,0.06);
      font-family: 'SF Mono', 'Fira Mono', monospace;
    }
    .am-binary-table tr:last-child td { border-bottom: none; }
    .am-binary-table td:first-child {
      color: #fff;
      font-weight: 700;
      font-size: 0.88rem;
    }

    /* ── Sidebar ── */
    .am-sidebar { display: grid; gap: 0.9rem; }

    .am-section-list { padding: 0.7rem 0; }
    .am-section-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.65rem 1.1rem;
      cursor: pointer;
      border-radius: 0;
      transition: background 0.14s;
      border-left: 3px solid transparent;
    }
    .am-section-item:hover,
    .am-section-item.am--selected {
      background: rgba(30,160,90,0.1);
    }
    .am-section-item.am--selected {
      border-left-color: var(--sc, #fff);
    }
    .am-swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    .am-section-dot--idle {
      background: var(--text-muted);
    }
    .am-prime-note {
      color: var(--text-muted);
      font-size: 0.83rem;
      line-height: 1.6;
      margin: 0 0 0.6rem;
    }
    .am-text-accent {
      color: var(--accent);
    }
    .am-section-item-name {
      font-size: 0.82rem;
      font-weight: 700;
      color: #cef0dc;
      line-height: 1.3;
    }
    .am-section-item-sub {
      font-size: 0.74rem;
      color: rgba(170,220,195,0.6);
      margin-top: 0.12rem;
    }

    .am-fact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      padding: 0.9rem 1rem;
    }
    .am-fact {
      background: rgba(10,30,20,0.6);
      border-radius: 10px;
      border: 1px solid rgba(40,200,120,0.12);
      padding: 0.6rem 0.75rem;
    }
    .am-fact-val {
      font-size: 1.2rem;
      font-weight: 800;
      color: #6ee8b0;
      line-height: 1;
    }
    .am-fact-lbl {
      font-size: 0.68rem;
      color: rgba(160,220,190,0.6);
      margin-top: 0.25rem;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .am-context-list {
      list-style: none;
      margin: 0;
      padding: 0.5rem 0;
    }
    .am-context-list li {
      padding: 0.55rem 1.1rem;
      display: flex;
      gap: 0.7rem;
      align-items: flex-start;
      font-size: 0.8rem;
      color: rgba(190,235,210,0.78);
      line-height: 1.5;
      border-bottom: 1px solid rgba(40,200,120,0.07);
    }
    .am-context-list li:last-child { border-bottom: none; }
    .am-context-list li span:first-child {
      flex-shrink: 0;
      font-size: 1rem;
      margin-top: -1px;
    }

    /* ── Prime numbers card ── */
    .am-prime-body {
      padding: 0.9rem 1.1rem;
      font-size: 0.82rem;
      color: rgba(190,235,210,0.82);
      line-height: 1.65;
    }
    .am-prime-body strong { color: #8ef5c4; }
    .am-prime-eq {
      display: block;
      text-align: center;
      font-size: 1.05rem;
      font-family: 'SF Mono', monospace;
      color: #fff;
      font-weight: 800;
      padding: 0.6rem 0;
      letter-spacing: 0.05em;
    }

    /* ── Zoom label ── */
    .am-zoom-row {
      display: flex;
      gap: 0.4rem;
      align-items: center;
      font-size: 0.74rem;
      color: rgba(160,220,190,0.55);
    }

    /* ── ll-viewport theme for this lesson ── */
    .ll-viewport {
      --ll-panel-bg:      rgba(4, 14, 10, 0.97);
      --ll-panel-border:  rgba(40, 200, 120, 0.18);
      --ll-tab-color:     rgba(100, 220, 160, 0.5);
      --ll-tab-active-bg: rgba(40, 200, 120, 0.16);
      --ll-tab-active:    #4de8a0;
      --ll-toggle-bg:     rgba(4, 14, 10, 0.97);
    }