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

  :root {
    --red: #CC0000;
    --red-dim: #660000;
    --white: #EAEAEA;
    --grey: #898989;
    --grey-dim: #333;
    --black: #000;
    --mono: 'IBM Plex Mono', monospace;
    --green: #66FF33;
    --green-dim: #336633;
    --fs-main: 11px;
    --fs-small: 8px;
  }

  html, body {
    height: 100%;
  }

  body {
    background: var(--black);
    color: var(--white);
    font-family: var(--mono);
    cursor: crosshair;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-transform: lowercase;
    letter-spacing: 0.1em;
    overflow-x: hidden;
  }

  /* SCANLINES — scoped to hero only */
  .hero::before {
    content: '';
    position: fixed;
    top: 32px; left: 0; right: 0; bottom: 131px;
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    z-index: 0;
  }

  /* Hide scanlines once terminal is active */
  .hero.terminal-active::before {
    display: none;
  }

  /* ── HEADER ── */
  .header-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    border-bottom: 1px solid var(--grey-dim);
    padding: 10px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    font-size: var(--fs-main);
    color: var(--white);
    letter-spacing: 0.1em;
    background: var(--black);
    z-index: 102;
  }

  .col-left  { text-align: left; }
  .col-right { text-align: right; }

  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red);
    animation: blink 1.4s step-end infinite;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

  /* ── HERO (splash state) ── */
  .hero {
    position: fixed;
    top: 32px;        /* below header */
    left: 0; right: 0;
    bottom: 131px;    /* above sub-footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    overflow: hidden;
  }

  /* Once terminal is active, hero becomes a scrollable terminal */
  .hero.terminal-active {
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 24px 24px;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--grey-dim) transparent;
  }

  .hero.terminal-active::-webkit-scrollbar {
    width: 4px;
  }

  .hero.terminal-active::-webkit-scrollbar-track {
    background: transparent;
  }

  .hero.terminal-active::-webkit-scrollbar-thumb {
    background: var(--grey-dim);
    border-radius: 2px;
  }


  .hero-eyebrow {
    font-size: var(--fs-main);
    color: var(--red);
    letter-spacing: 0.1em;
    margin-right: -0.1em;
    text-transform: lowercase;
    margin-bottom: 20px;
    margin-top: -70px;
    position: relative;
    transition: opacity 0.5s ease;
  }

  /* ── LOGO ── */
  .hero-logo {
    position: relative;
    display: inline-block;
    max-width: min(860px, 90vw);
    user-select: none;
    transition: opacity 0.5s ease;
  }

  .hero-logo img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
  }

  .hero-logo::before, .hero-logo::after,
  .glitch-top-r, .glitch-top-g,
  .glitch-mid-g, .glitch-bot-r, .glitch-bot-g {
    position: absolute;
    inset: 0;
    background-image: var(--logo-src);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
  }
  .hero-logo::before, .hero-logo::after { content: ''; }

  .glitch-top-r { filter: url(#glitch-red); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); animation: g-top-r 5.0s infinite; }
  .glitch-top-g { filter: url(#glitch-grey); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); animation: g-top-g 6.0s infinite; }
  .hero-logo::before { filter: url(#glitch-red); clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%); animation: g-mid-r 4.0s infinite; }
  .glitch-mid-g { filter: url(#glitch-grey); clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%); animation: g-mid-g 4.0s 0.5s infinite; }
  .hero-logo::after { filter: url(#glitch-red); clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); animation: g-bot-r 3.0s infinite; }
  .glitch-bot-g { filter: url(#glitch-grey); clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); animation: g-bot-g 3.0s 0.75s infinite; }

  @keyframes g-top-r {
    0%,61%,100%{transform:none;opacity:0}
    62%{transform:translate(4px,0);opacity:.9} 64%{transform:translate(-2px,2px);opacity:.9}
    66%{transform:translate(2px,-2px);opacity:.9} 67%{transform:none;opacity:0}
  }
  @keyframes g-top-g {
    0%,37%,100%{transform:none;opacity:0}
    38%{transform:translate(-4px,2px);opacity:.9} 40%{transform:translate(2px,-2px);opacity:.9}
    41%{transform:none;opacity:0}
  }
  @keyframes g-mid-r {
    0%,87%,100%{transform:none;opacity:0}
    88%{transform:translate(-4px,2px);opacity:.9} 90%{transform:translate(2px,-2px);opacity:.9}
    92%{transform:translate(-2px,2px);opacity:.9} 94%{transform:none;opacity:0}
  }
  @keyframes g-mid-g {
    0%,51%,100%{transform:none;opacity:0}
    52%{transform:translate(4px,-2px);opacity:.9} 54%{transform:translate(-4px,2px);opacity:.9}
    55%{transform:translate(2px,0);opacity:.9} 56%{transform:none;opacity:0}
  }
  @keyframes g-bot-r {
    0%,43%,100%{transform:none;opacity:0}
    44%{transform:translate(-4px,2px);opacity:.9} 46%{transform:translate(2px,0);opacity:.9}
    47%{transform:none;opacity:0}
  }
  @keyframes g-bot-g {
    0%,67%,100%{transform:none;opacity:0}
    68%{transform:translate(4px,0);opacity:.9} 70%{transform:translate(-2px,2px);opacity:.9}
    71%{transform:none;opacity:0}
  }

  /* ── IDENTITY BADGE ── */
  .identity-badge {
    margin-top: 36px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--red-dim);
    padding: 10px 20px;
    background: rgba(100,0,0,0.08);
    animation: badge-pulse 2.4s ease-in-out infinite;
    transition: opacity 0.5s ease;
  }
  .identity-badge::before, .identity-badge::after {
    content: ''; position: absolute; width: 6px; height: 6px; border: 1px solid var(--red);
  }
  .identity-badge::before { top:-4px; left:-4px; border-right:none; border-bottom:none; }
  .identity-badge::after  { bottom:-4px; right:-4px; border-left:none; border-top:none; }
  @keyframes badge-pulse {
    0%,100%{opacity:1;border-color:var(--red-dim)} 50%{opacity:.65;border-color:rgba(204,0,0,0.2)}
  }
  .badge-squares { display: flex; gap: 3px; }
  .sq { width:11px; height:11px; background:var(--red); animation:sq-fade 2.5s ease-in-out infinite; }
  .sq:nth-child(1){animation-delay:0s} .sq:nth-child(2){animation-delay:.15s} .sq:nth-child(3){animation-delay:.3s}
  @keyframes sq-fade { 0%,100%{opacity:1} 50%{opacity:0.25} }
  .badge-text { font-size:var(--fs-main); color:var(--red); letter-spacing:0.1em; text-transform:lowercase; white-space:nowrap; }

  /* ── SPLASH INPUT ── */
  .splash-input-wrap {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  .splash-prompt {
    color: var(--red);
    font-size: var(--fs-main);
    letter-spacing: 0.1em;
    user-select: none;
  }

  .splash-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--grey-dim);
    color: var(--white);
    font-family: var(--mono);
    font-size: var(--fs-main);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    width: 200px;
    outline: none;
    padding: 2px 4px;
    caret-color: var(--red);
  }

  .splash-input::placeholder {
    color: var(--grey);
    letter-spacing: 0.1em;
  }

  /* ── TERMINAL AREA (post-splash) ── */
  #terminal-area {
    display: none;
    flex-direction: column;
    align-items: center;
    width: min(408px, 90vw);
    max-width: min(408px, 90vw);
    padding-bottom: 48px;
  }

  .term-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .term-output {
    width: 100%;
    font-size: var(--fs-small);
    line-height: 2;
    letter-spacing: 0.1em;
    color: var(--grey);
    text-align: center;
  }

  .term-line {
    opacity: 0;
    transform: translateY(4px);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: pre;
  }

  .term-line.visible {
    opacity: 1;
    transform: none;
  }

  .term-line .prompt   { color: var(--red);   font-size: var(--fs-main); }
  .term-line .input    { color: var(--white); font-size: var(--fs-main); }
  .term-line .path     { color: var(--grey);  font-size: var(--fs-small); display: block; }
  .term-line .dir      { color: var(--grey);  font-size: var(--fs-small); display: block; white-space: normal; word-wrap: break-word; }
  .term-line .navigate { color: var(--white); font-size: var(--fs-main); display: block; white-space: normal; word-wrap: break-word; }

  /* Nav links */
  /* Terminal download link */
  .term-dl-link {
    color: var(--grey);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-decoration: none;
    display: block;
    transition: color 0.25s;
  }
  .term-dl-link:hover { color: var(--white); }

  /* Music phase: force IBM Plex Mono 11px everywhere */
  #phase-music * {
    font-family: var(--mono) !important;
    font-size: var(--fs-main) !important;
  }

  /* Keep path header at 8px */
  #phase-music .file-list-header,
  #phase-music .file-list-header * {
    font-size: var(--fs-small) !important;
  }

  /* Nav links rendered inline in termOutput */
  .term-nav-link {
    color: var(--red);
    font-size: var(--fs-main);
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.25s;
  }

  .term-nav-link:hover { color: var(--red-dim); }

  /* ── PHASE STATES ── */
  .phase {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 0;
    padding-bottom: 48px;
  }

  .phase.active { display: flex; }

  /* Back arrow */
  .phase-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: var(--fs-main);
    color: var(--red);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 24px;
    transition: opacity 0.25s;
    user-select: none;
    width: 100%;
    padding: 4px 0 8px;
  }

  .phase-back:hover { color: var(--red-dim); }

  .phase-back-arrow {
    font-size: var(--fs-main);
    line-height: 1;
  }

  /* Manifesto grid */
  .manifesto-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 600px;
  }

  .manifesto-block {
    position: relative;
    width: 100%;
    min-height: 64px;
    overflow: hidden;
    border: 1px solid rgba(204, 0, 0, 0.3);
  }

  .manifesto-block.revealed {
    border-color: rgba(204, 0, 0, 0.3);
  }

  .manifesto-block-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.75s ease;
  }

  .manifesto-block-text {
    position: relative;
    z-index: 1;
    padding: 20px 16px;
    opacity: 0;
    transition: opacity 0.75s ease;
    font-family: var(--mono);
    font-size: var(--fs-main);
    color: #eaeaea;
    letter-spacing: 0.1em;
    line-height: 1.7;
  }

  /* Transmissions grid */
  .transmission-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 600px;
  }

  .transmission-block {
    width: 100%;
    border: 1px solid rgba(204,0,0,0.3);
    overflow: hidden;
  }

  .transmission-header {
    position: relative;
    width: 100%;
    height: 64px;
    cursor: pointer;
    overflow: hidden;
  }

  .transmission-header:hover .transmission-header-label { color: var(--grey); }
  .transmission-block.beta .transmission-header:hover .transmission-header-label { color: var(--grey-dim); }

  .transmission-header-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.75s ease;
  }

  .transmission-header-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-family: var(--mono);
    font-size: var(--fs-main);
    color: #eaeaea;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.5s ease, color 0.25s ease;
    user-select: none;
  }

  .transmission-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  .transmission-content.open {
    max-height: 800px;
  }

  .t-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    overflow: hidden;
    border-top: 1px solid rgba(204,0,0,0.15);
    transition: opacity 0.25s;
  }

  .t-nav-item.revealed:hover { opacity: 1; }

  .t-nav-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
  }

  .t-nav-label {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: var(--fs-main);
    letter-spacing: 0.1em;
    transition: color 0.25s;
  }

  /* Per-type label colours + hover */
  .t-nav-item.encrypted .t-nav-label               { color: var(--red); }
  .t-nav-item.encrypted:hover .t-nav-label          { color: var(--red-dim); }
  .t-nav-item.decoded .t-nav-label                  { color: var(--green); }
  .t-nav-item.decoded:hover .t-nav-label            { color: var(--green-dim); }
  .t-nav-item.corrupted .t-nav-label                { color: #eaeaea; }
  .t-nav-item.corrupted:hover .t-nav-label          { color: var(--grey); }
  .t-nav-item.revealed .t-nav-label                 { color: #eaeaea !important; }
  .t-nav-item.revealed:hover .t-nav-label           { color: #eaeaea !important; }

  .t-nav-status {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: lowercase;
  }

  .t-nav-status.encrypted { color: var(--red); }
  .t-nav-status.decoded   { color: var(--green); }

  /* transmission_beta — grey-dim borders, dividers, and muted text */
  .transmission-block.beta                                          { border-color: var(--grey-dim); }
  .transmission-block.beta .t-nav-item                             { border-top-color: rgba(51,51,51,0.7); }
  .transmission-block.beta .transmission-header-label              { color: var(--grey); }
  .transmission-block.beta .t-nav-item.corrupted .t-nav-label       { color: #eaeaea; }
  .transmission-block.beta .t-nav-item.corrupted:hover .t-nav-label { color: var(--grey); }
  .transmission-block.beta .t-nav-item.revealed .t-nav-label        { color: #eaeaea !important; }
  .transmission-block.beta .t-nav-item.revealed:hover .t-nav-label  { color: var(--grey) !important; }

  /* Reward screen */
  .reward-method-option {
    display: flex;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    text-transform: none;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--grey);
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 3px 0;
    transition: color 0.25s;
    user-select: none;
  }
  .reward-method-option:hover { color: var(--white); }
  .reward-method-option.selected { color: var(--green); }

  .reward-method-dot {
    width: 5px; height: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.25s;
  }
  .reward-method-option.selected .reward-method-dot { background: var(--green); }

  .reward-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--grey);
    color: var(--white);
    font-family: var(--mono);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    width: 100%;
    outline: none;
    padding: 5px 0;
    transition: border-color 0.25s;
  }
  .reward-input:focus:not(:disabled) { border-bottom-color: var(--green); }
  .reward-input::placeholder { color: var(--grey); }
  .reward-input:disabled::placeholder { color: var(--grey-dim); }

  .reward-submit-btn {
    position: relative;
    overflow: hidden;
    font-family: var(--mono);
    font-size: var(--fs-main);
    letter-spacing: 0.1em;
    color: var(--green);
    border: 1px solid var(--green);
    background: transparent;
    padding: 10px 32px;
    cursor: pointer;
    text-transform: lowercase;
  }
  .reward-submit-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
    transition: background 0.25s;
  }
  .reward-submit-btn:hover:not(:disabled)::after { background: var(--green-dim); }
  .reward-submit-btn:disabled {
    color: var(--green-dim);
    border-color: var(--green-dim);
    cursor: default;
    animation: none;
    opacity: 0.5;
  }
  .reward-submit-btn canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .reward-submit-btn span { position: relative; z-index: 2; }

  @keyframes reward-btn-flicker {
    0%,76%,100% { opacity:1; }
    77%         { opacity:0.55; }
    79%         { opacity:1; }
    81%         { }
    88%         { opacity:0.8; }
    90%         { opacity:1; }
  }

  /* Gallery grid */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 600px;
  }

  .gallery-cell {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
  }

  /* Canvas fills entire cell */
  .gallery-cell-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
  }

  .gallery-cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  /* Hover glitch overlay — must sit above image */
  .gallery-cell-glitch {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }

  /* Lightbox filename */
  .lightbox-filename {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--red);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    margin-top: 12px;
    text-align: center;
  }

  /* Lightbox */
  .lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .lightbox.active { display: flex; }

  .lightbox-back {
    font-family: var(--mono);
    font-size: var(--fs-main);
    color: var(--red);
    letter-spacing: 0.1em;
    cursor: pointer;
    margin-bottom: 20px;
    transition: opacity 0.25s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .lightbox-back:hover { opacity: 0.6; }

  .lightbox img {
    max-width: min(860px, 90vw);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* Inline terminal media */
  .term-image {
    display: block;
    max-width: min(408px, 90vw);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--red-dim);
  }

  .term-manifesto {
    display: block;
    max-width: min(408px, 90vw);
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--red-dim);
    position: relative;
    padding: 20px 16px;
    box-sizing: border-box;
  }
  .term-manifesto canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
  }
  .term-manifesto span {
    position: relative;
    z-index: 1;
  }

  /* ══ CASSETTE PLAYER — brutal dark web ══ */
  .cassette-wrap {
    width: 480px;
    margin: 0 auto 32px;
    user-select: none;
    position: relative;
  }

  .cassette-svg {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    /* Subtle scanline overlay on the cassette itself */
    filter: contrast(1.05);
  }

  /* Reel spin */
  @keyframes reel-spin-cw  { to { transform: rotate(360deg);  } }
  @keyframes reel-spin-ccw { to { transform: rotate(-360deg); } }

  .reel-l-group { transform-origin: 130px 155px; }
  .reel-r-group { transform-origin: 390px 155px; }
  .reel-spinning-cw  { animation: reel-spin-cw  1.4s linear infinite; }
  .reel-spinning-ccw { animation: reel-spin-ccw 1.4s linear infinite; }

  /* Controls */
  .cassette-controls {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    align-items: stretch;
    border: 1px solid var(--red-dim);
    border-top: none;
  }

  .cassette-row {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--grey-dim);
    width: 480px;
    box-sizing: border-box;
  }

  .cassette-row > * {
    box-sizing: border-box;
  }

  .cassette-row:first-child { border-top: 1px solid var(--red-dim); }

  .cassette-row-label {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--grey);
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--grey-dim);
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    text-transform: lowercase;
    box-sizing: border-box;
  }

  .cass-btn {
    background: none;
    border: none;
    border-right: 1px solid var(--grey-dim);
    font-family: var(--mono);
    font-size: var(--fs-main);
    color: var(--grey);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
  }



  .cass-btn:hover       { background: var(--red-dim); color: var(--white); }
  .cass-btn.cass-active { background: var(--red);     color: var(--black); }

  .cass-progress-wrap {
    width: 160px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .cass-progress-track {
    flex: 1;
    height: 3px;
    background: var(--grey-dim);
    cursor: pointer;
    position: relative;
  }

  .cass-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--red);
    pointer-events: none;
  }

  .cass-time {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--grey);
    flex-shrink: 0;
    width: 80px;
    height: 40px;
    text-align: center;
    letter-spacing: 0.1em;
    border-left: 1px solid var(--grey-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    box-sizing: border-box;
  }

  .cass-status-cell {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--grey);
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 120px;
    height: 40px;
    border-left: 1px solid var(--grey-dim);
    box-sizing: border-box;
  }

  .cass-status-cell.playing { color: var(--red); }

  /* Volume — 8-bit chunks as cells */
  .cass-vol-track {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    padding: 0 10px;
    cursor: pointer;
  }

  .cass-vol-seg {
    height: 14px;
    flex: 1;
    background: var(--grey-dim);
    transition: background 0.05s;
    border-right: 1px solid var(--black);
  }

  .cass-vol-seg.lit { background: var(--red); }

  /* Freq */
  .cass-frq-btn {
    background: none;
    border: none;
    border-right: 1px solid var(--grey-dim);
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--grey);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
  }


  .cass-frq-btn:hover        { background: var(--grey-dim); color: var(--white); }
  .cass-frq-btn.active       { background: var(--red-dim);  color: var(--red); }

    /* Custom video player */
  .term-video-wrap {
    width: min(408px, 90vw);
    margin: 0 auto;
  }

  .term-video-player {
    display: block;
    width: 100%;
    border: 1px solid var(--red-dim);
    position: relative;
    background: var(--black);
    outline: 1px solid rgba(204,0,0,0.15);
    outline-offset: 3px;
  }

  .term-video-player video {
    display: block;
    width: 100%;
    height: auto;
  }

  .tvp-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--red-dim);
  }

  .tvp-corner {
    position: absolute;
    width: 7px; height: 7px;
    border-color: var(--red);
    border-style: solid;
  }
  .tvp-corner-tl { top: -4px;    left: -4px;   border-width: 1px 0 0 1px; }
  .tvp-corner-tr { top: -4px;    right: -4px;  border-width: 1px 1px 0 0; }
  .tvp-corner-bl { bottom: -4px; left: -4px;   border-width: 0 0 1px 1px; }
  .tvp-corner-br { bottom: -4px; right: -4px;  border-width: 0 1px 1px 0; }

  .tvp-filename {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--red);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    margin-top: 6px;
    text-align: center;
  }

  /* Custom audio player */
  .term-audio-wrap {
    width: min(408px, 90vw);
    margin: 0 auto;
  }

  .term-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--red-dim);
    padding: 10px 14px;
    box-sizing: border-box;
    position: relative;
  }

  /* Four corner brackets — animated independently */
  .tap-corner {
    position: absolute;
    width: 7px; height: 7px;
    border-color: var(--red);
    border-style: solid;
  }
  .tap-corner-tl { top: -6px;    left: -6px;   border-width: 1px 0 0 1px; }
  .tap-corner-tr { top: -6px;    right: -6px;  border-width: 1px 1px 0 0; }
  .tap-corner-bl { bottom: -6px; left: -6px;   border-width: 0 0 1px 1px; }
  .tap-corner-br { bottom: -6px; right: -6px;  border-width: 0 1px 1px 0; }

  .tap-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .tap-btn svg {
    width: 14px;
    height: 14px;
    fill: var(--red);
    transition: opacity 0.25s;
  }

  .tap-btn:hover svg { opacity: 0.6; }

  .tap-elapsed, .tap-total {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--grey);
    letter-spacing: 0.1em;
    flex-shrink: 0;
    line-height: 1;
  }

  .tap-bar-track {
    flex: 1;
    height: 2px;
    background: var(--grey-dim);
    cursor: pointer;
    position: relative;
    align-self: center;
  }

  .tap-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--red);
    pointer-events: none;
    transition: width 0.1s linear;
  }

  .tap-filename {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--red);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    margin-top: 6px;
    text-align: center;
  }

  /* ── SOCIAL FOOTER BOX ── */
  .social-dock {
    position: fixed;
    bottom: calc(29px + env(safe-area-inset-bottom, 0px)); /* sits above footer + safe area */
    left: 0; right: 0;
    background: var(--black);
    border-top: 1px solid var(--grey-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 24px 24px;
    line-height: 1 !important;
    z-index: 100;
  }

  .social-handle {
    font-size: var(--fs-main);
    color: var(--white);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    line-height: 1 !important;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(7px, 1.9vw, 19px);
    flex-wrap: nowrap;
  }

  .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s, transform 0.25s;
    text-decoration: none;
  }

  .social-icons a:hover { transform: translateY(-4px); }
  .social-icons a:hover img { opacity: 0.5; }

  .social-icons img {
    display: block;
    height: clamp(13px, 3.5vw, 24px);
    width: auto;
  }

  .contact-email {
    display: block;
    text-align: center;
    font-size: var(--fs-main);
    color: var(--white);
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: lowercase;
    transition: color 0.25s;
    line-height: 1 !important;
  }

  .contact-email:hover { color: var(--grey); }

  /* ── FOOTER ── */
  footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    border-top: 1px solid var(--grey-dim);
    padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    font-size: var(--fs-small);
    color: var(--grey);
    letter-spacing: 0.1em;
    background: var(--black);
    z-index: 101;
  }



  /* ── FLUID RESPONSIVE ── */
  @media (max-width: 420px) {
    .social-dock { bottom: 29px; padding: 12px 10px; gap: 10px; }
    .social-icons { width:100%; justify-content:space-between; gap:0; }
    .social-icons img { height: clamp(15px, 7.2vw, 22px); width: auto; }
    .header-bar { padding: 8px 10px; font-size: clamp(8px, 2.5vw, var(--fs-main)); letter-spacing: 0.1em; }
    footer { padding: 8px 10px; font-size: clamp(6px, 1.6vw, var(--fs-small)); letter-spacing: 0.1em; }
    .hero-eyebrow { font-size: clamp(8px, 2.5vw, var(--fs-main)); letter-spacing: 0.1em; margin-right: -0.1em; margin-bottom: 14px; }
    .identity-badge { max-width: calc(100vw - 20px); padding: 8px 10px; gap: 5px; margin-top: 22px; }
    .badge-text { font-size: clamp(8px, 2.5vw, var(--fs-main)); letter-spacing: 0.1em; white-space: normal; text-align: center; line-height: 1.6; }
    .badge-squares { display: none; }
    .social-handle { font-size: clamp(8px, 2.5vw, var(--fs-main)); letter-spacing: 0.1em; }
    .contact-email { font-size: clamp(8px, 2.5vw, var(--fs-main)); letter-spacing: 0.1em; }

  }

  @media (min-width: 421px) and (max-width: 768px) {
    .identity-badge { padding: 9px 14px; gap: 8px; margin-top: 28px; }
    .badge-text { font-size: var(--fs-main); letter-spacing: 0.1em; }
  }

  /* ── EYEBROW GLITCH ANIMATION ── */
  #eyebrow {
    cursor: default;
    display: inline-block;
  }

  .eyebrow-char {
    display: inline;
    transition: none;
  }

  .eyebrow-char.scrambling {
    color: var(--red);
  }


/* Accessible transmission clue activation. */
.t-nav-item.transmission-clue-trigger { cursor: pointer; }
.t-nav-item.transmission-clue-trigger:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: -2px;
}
.t-nav-item.transmission-clue-trigger[aria-busy="true"] { opacity: 0.7; }