*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:     #070707;
      --panel:  #0e0e0e;
      --border: #1e1e1e;
      --text:   #888;
      --hi:     #bbb;
      --accent: #00ff41;
      --dim:    #2e2e2e;
      --btn:    #141414;
      --bar-h:  56px;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Courier New', Courier, monospace;
      display: flex;
      flex-direction: column;
      height: 100dvh;
      overflow: hidden;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── Header ─────────────────────────────────── */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      gap: 10px;
    }

    .logo { font-size: 16px; font-weight: bold; letter-spacing: 3px; color: var(--accent); }
    .logo em { color: var(--dim); font-style: normal; }

    #hdr-source {
      font-size: 10px; letter-spacing: 1px; color: var(--dim);
      display: flex; align-items: center; gap: 6px;
    }

    .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--dim); flex-shrink: 0;
      transition: background .3s, box-shadow .3s;
    }
    .dot.live { background: var(--accent); box-shadow: 0 0 5px var(--accent); }

    /* ── Main ───────────────────────────────────── */
    main { flex: 1; display: flex; overflow: hidden; min-height: 0; }

    /* ── Output ─────────────────────────────────── */
    #output-wrap {
      flex: 1; display: flex; align-items: center; justify-content: center;
      overflow: hidden; background: #000; position: relative;
    }

    #ascii-canvas { display: block; }

    /* Video-only transport. The renderer remains the visual focus; controls
       sit in a compact, high-contrast strip when a local video is active. */
    #video-transport {
      position: absolute;
      left: clamp(12px, 3vw, 32px);
      right: clamp(12px, 3vw, 32px);
      bottom: 18px;
      z-index: 3;
      padding: 10px 12px 9px;
      border: 1px solid rgba(0, 255, 65, .28);
      border-radius: 4px;
      background: rgba(7, 7, 7, .88);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    #video-transport[hidden] { display: none; }

    .video-transport-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .video-transport-actions { display: flex; gap: 5px; flex-wrap: wrap; }

    .video-control {
      min-height: 30px;
      padding: 4px 8px;
      border-color: rgba(0, 255, 65, .28);
      color: var(--hi);
      font-size: 10px;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .video-control:hover,
    .video-control[aria-pressed="true"] {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(0, 255, 65, .08);
    }

    #video-time {
      flex-shrink: 0;
      color: var(--hi);
      font-size: 10px;
      letter-spacing: 1px;
      font-variant-numeric: tabular-nums;
    }

    .video-seek-label { display: block; }

    input[type=range].video-seek {
      height: 5px;
      background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 0%), var(--border) var(--progress, 0%), var(--border) 100%);
    }

    input[type=range].video-seek:disabled { cursor: not-allowed; opacity: .55; }
    input[type=range].video-seek::-webkit-slider-thumb { width: 14px; height: 14px; }
    input[type=range].video-seek::-moz-range-thumb { width: 14px; height: 14px; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    button:focus-visible,
    input[type=range]:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    /* Start screen */
    #start-screen {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 16px; background: #000; z-index: 2;
      padding: 20px;
    }
    .logo-xl { font-size: 28px; letter-spacing: 6px; color: var(--accent); text-align: center; }
    .logo-xl em { color: var(--dim); font-style: normal; }
    #start-screen p { font-size: 11px; color: var(--dim); letter-spacing: 2px; text-align: center; }
    .start-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

    /* Drop overlay */
    #drop-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.87); border: 2px dashed var(--accent);
      align-items: center; justify-content: center;
      flex-direction: column; gap: 8px;
      font-size: 18px; letter-spacing: 4px; color: var(--accent);
      z-index: 60; pointer-events: none;
    }
    #drop-overlay.active { display: flex; }
    #drop-overlay small { font-size: 10px; color: var(--text); letter-spacing: 1px; }

    /* ── Sidebar (desktop) / Drawer (mobile) ─────── */
    aside {
      width: 250px; flex-shrink: 0;
      border-left: 1px solid var(--border);
      background: var(--panel);
      display: flex; flex-direction: column;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--dim) transparent;
    }

    /* Drawer close button — hidden on desktop */
    #drawer-close-btn {
      display: none;
    }

    /* ── Mobile layout ───────────────────────────── */
    @media (max-width: 767px) {
      /* Sidebar becomes a fixed right-side drawer */
      aside {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(300px, 88vw);
        border-left: 1px solid var(--border);
        transform: translateX(100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        z-index: 40;
      }
      aside.open { transform: translateX(0); }

      /* Hide desktop footer on mobile */
      footer { display: none; }

      /* Output gets full width */
      #output-wrap { width: 100%; }

      #video-transport {
        bottom: calc(var(--bar-h) + 12px);
      }

      /* Pad bottom so mobile-bar doesn't cover canvas */
      main { padding-bottom: var(--bar-h); }

      /* Drawer close btn */
      #drawer-close-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        font-size: 11px; letter-spacing: 2px; color: var(--dim);
        cursor: pointer; flex-shrink: 0;
      }
      #drawer-close-btn:active { color: var(--accent); }
    }

    /* Drawer overlay backdrop */
    #drawer-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.65);
      z-index: 39;
    }
    #drawer-overlay.active { display: block; }

    /* ── Mobile bottom bar ───────────────────────── */
    #mobile-bar {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      height: var(--bar-h);
      background: rgba(7,7,7,.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      z-index: 30;
      align-items: center;
      padding: 0 8px;
      gap: 4px;
      padding-bottom: env(safe-area-inset-bottom);
    }

    @media (max-width: 767px) {
      #mobile-bar { display: flex; }
    }

    .mb-btn {
      flex: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 3px;
      background: none; border: none;
      color: var(--text); font-family: inherit;
      font-size: 9px; letter-spacing: 1px;
      padding: 6px 4px;
      cursor: pointer; border-radius: 4px;
      min-height: 44px;
      transition: color .12s;
    }
    .mb-btn:active { color: var(--accent); }
    .mb-btn svg { width: 20px; height: 20px; fill: currentColor; }
    .mb-btn.accent { color: var(--accent); }

    #mb-flip { display: none; }
    #mb-flip.visible { display: flex; }

    /* ── Sidebar sections ────────────────────────── */
    .sec {
      padding: 11px 13px 10px;
      border-bottom: 1px solid var(--border);
    }
    .sec:last-child { border-bottom: none; }

    .sec-hd {
      display: flex; justify-content: space-between;
      align-items: center; margin-bottom: 9px;
    }

    .lbl {
      font-size: 9px; letter-spacing: 2px;
      text-transform: uppercase; color: var(--dim);
    }

    /* Collapsible effect body */
    .fx-body { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
    .fx-body.open { max-height: 300px; }

    /* Buttons */
    .btn-group { display: flex; flex-wrap: wrap; gap: 4px; }

    button {
      background: var(--btn); border: 1px solid var(--border);
      color: var(--text); font-family: inherit;
      font-size: 11px; padding: 4px 8px;
      cursor: pointer; letter-spacing: 1px; border-radius: 2px;
      transition: border-color .12s, color .12s;
      min-height: 32px;
    }
    button:hover { border-color: #444; color: var(--hi); }
    button.active { border-color: var(--accent); color: var(--accent); background: rgba(0,255,65,.05); }

    /* Source row */
    .src-btns { display: flex; gap: 5px; margin-bottom: 7px; }
    .src-btns button { flex: 1; }
    #src-name {
      font-size: 10px; color: var(--dim); padding: 4px 0;
      letter-spacing: 1px; border-top: 1px solid var(--border);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Sliders */
    .sl-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
    .sl-row:last-child { margin-bottom: 0; }
    .sl-row > div { display: flex; justify-content: space-between; font-size: 11px; }
    .sl-row > div .v { color: var(--accent); min-width: 40px; text-align: right; }

    input[type=range] {
      -webkit-appearance: none;
      width: 100%; height: 4px;
      background: var(--border); outline: none; cursor: pointer;
      border-radius: 2px;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--accent); cursor: pointer;
    }
    input[type=range]::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--accent); border: none; cursor: pointer;
    }

    /* Toggle */
    .toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .ttrack {
      position: absolute; inset: 0;
      background: var(--border); border-radius: 20px; cursor: pointer;
      transition: background .15s;
    }
    .ttrack::after {
      content: ''; position: absolute;
      width: 14px; height: 14px; left: 3px; top: 3px;
      background: var(--text); border-radius: 50%;
      transition: transform .15s, background .15s;
    }
    .toggle input:checked + .ttrack { background: rgba(0,255,65,.2); }
    .toggle input:checked + .ttrack::after { transform: translateX(16px); background: var(--accent); }

    .opt-row {
      display: flex; justify-content: space-between;
      align-items: center; font-size: 11px; padding: 5px 0;
    }

    /* Action buttons */
    .act-btn { width: 100%; padding: 8px; font-size: 11px; letter-spacing: 2px; margin-bottom: 5px; }
    .act-btn:last-child { margin-bottom: 0; }

    /* Primary / large buttons */
    .btn-primary {
      border-color: var(--accent); color: var(--accent);
      background: rgba(0,255,65,.04);
      padding: 10px 20px; font-size: 12px; letter-spacing: 2px;
    }
    .btn-primary:hover, .btn-primary:active { background: rgba(0,255,65,.10); }

    /* ── Footer ─────────────────────────────────── */
    footer {
      padding: 5px 14px; border-top: 1px solid var(--border);
      font-size: 10px; color: var(--dim); letter-spacing: 1px;
      display: flex; justify-content: space-between; flex-shrink: 0;
    }

    /* Hidden stuff */
    #capture-canvas, #webcam-video, #file-video { display: none; }

/* Citizen Science production additions */
.home-link {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.home-link:hover, .home-link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); outline: none; }
.start-status { min-height: 1.2em; color: var(--text) !important; letter-spacing: 1px !important; max-width: 35rem; line-height: 1.45; }
.start-status.error { color: #ff7a7a !important; }

/* Local mix-art capture mode: keep the renderer, hide the tool chrome. */
body.embed header,
body.embed aside,
body.embed footer,
body.embed #mobile-bar,
body.embed #drawer-overlay,
body.embed #drop-overlay { display: none !important; }
body.embed main { width: 100%; height: 100dvh; min-height: 100dvh; }
body.embed #output-wrap { width: 100%; height: 100%; min-height: 100dvh; }
body.embed #video-transport { display: none !important; }
body.embed #ascii-canvas { max-width: 100%; max-height: 100%; }

/* Visual tools: looks, export, recording */
#look-group button, #palette-group button { text-transform: lowercase; }
.export-status {
  min-height: 1.4em;
  margin: 6px 0 0;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text);
  overflow-wrap: anywhere;
}
#btn-rec.recording {
  border-color: #ff3b3b;
  color: #ff3b3b;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { #btn-rec.recording { animation: none; } }
.act-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#sel-format {
  background: var(--btn);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 2px;
  min-height: 32px;
}