:root{
  --bg: #1b1c52;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.15);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 18px;

  --maxw: 1100px;

  /* Chapter colors */
  --intro: #8fa3c8;
  --blue:  #2a72ff;
  --green: #39d98a;
  --red:   #ff3a4e;

  /* Active chapter */
  --chapter: var(--intro);
}

    /* ✅ Copy file + change this to red/green */
    body[data-chapter="intro"] { --chapter: var(--intro); }
body[data-chapter="blue"]  { --chapter: var(--blue);  }
body[data-chapter="green"] { --chapter: var(--green); }
body[data-chapter="red"]   { --chapter: var(--red);   }

    *{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
    }

    /* subtle VHS scanlines + vignette */
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(1200px 700px at 50% 30%, rgba(255,255,255,.08), transparent 60%),
        repeating-linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 3px, transparent 6px);
      opacity: .22;
      mix-blend-mode: overlay;
      z-index: 0;
    }

    .wrap{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 18px 18px 40px;
      position: relative;
      z-index: 1;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
      padding: 14px 16px;
      border-radius: var(--radius);
      background: linear-gradient(180deg, var(--panel2), var(--panel));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 260px;
    }
    .brand img{
      height: 52px;
      width: auto;
      display:block;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.40));
    }

    nav{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    nav a{
      text-decoration:none;
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
      font-weight: 750;
      letter-spacing: .03em;
      font-size: 14px;
      white-space: nowrap;
    }
    nav a:hover{
      transform: translateY(-1px);
      background: rgba(0,0,0,.28);
      border-color: rgba(255,255,255,.28);
    }

    nav a.nav-blue  { border-color: rgba(42,114,255,.55);  box-shadow: 0 10px 26px rgba(42,114,255,.10); }
    nav a.nav-green { border-color: rgba(57,217,138,.55); box-shadow: 0 10px 26px rgba(57,217,138,.10); }
    nav a.nav-red   { border-color: rgba(255,58,78,.55);  box-shadow: 0 10px 26px rgba(255,58,78,.10); }
    nav a.nav-intro{  border-color: rgba(143,163,200,.55);  box-shadow: 0 10px 26px rgba(143,163,200,.12);
}

    nav a.nav-blue:hover  { background: rgba(42,114,255,.16); }
    nav a.nav-green:hover { background: rgba(57,217,138,.14); }
    nav a.nav-red:hover   { background: rgba(255,58,78,.14); }
    nav a.nav-intro:hover{  background: rgba(143,163,200,.14);
}

    nav a.is-active{
      border-color: color-mix(in srgb, var(--chapter) 70%, rgba(255,255,255,.18));
      background: color-mix(in srgb, var(--chapter) 18%, rgba(0,0,0,.22));
      box-shadow: 0 12px 30px color-mix(in srgb, var(--chapter) 22%, transparent);
    }

    main{
      margin-top: 18px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      align-items: start;
    }

    .card{
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .left{ padding: 14px; }
    .left img{
      width: 100%;
      height: auto;
      display:block;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
      background: rgba(0,0,0,.25);
    }

    .right{ padding: 16px; }

    .sectionTitle{
      margin: 4px 0 12px;
      font-size: 18px;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .sectionTitle::before{
      content:"";
      width: 10px;
      height: 22px;
      border-radius: 999px;
      background: var(--chapter);
      box-shadow: 0 0 18px color-mix(in srgb, var(--chapter) 45%, transparent);
    }
    .sectionTitle::after{
      content:"";
      flex:1;
      height: 1px;
      background: linear-gradient(to right,
        color-mix(in srgb, var(--chapter) 55%, transparent),
        rgba(255,255,255,.10),
        transparent
      );
    }

    .chapterBadge{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      margin-bottom: 14px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.26));
    }
    .chapterDot{
      width: 12px; height: 12px; border-radius: 999px;
      background: var(--chapter);
      box-shadow: 0 0 18px color-mix(in srgb, var(--chapter) 55%, transparent);
      border: 1px solid rgba(255,255,255,.22);
    }
    .chapterBadge .txt{
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,.88);
    }
    .chapterBadge .sub{
      font-size: 12px;
      color: rgba(255,255,255,.70);
      margin-left: 6px;
      letter-spacing: .04em;
    }

    .btnGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .tapeLabelBtn{
      width: 100%;
      text-align:left;
      cursor:pointer;
      border-radius: 14px;
      padding: 12px 14px;
      background:
  repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.045),
    rgba(0,0,0,.045) 1px,
    transparent 1px,
    transparent 22px
  ),
  linear-gradient(
    180deg,
    #ffffff,
    #f2f2f2
  );
      color: rgba(10,10,10,.92);
      border: 2px solid rgba(0,0,0,.45);
      box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.65);
      transition: transform .12s ease, filter .12s ease;
      position: relative;
      overflow: hidden;
    }

    .tapeLabelBtn .accentBar{
      position:absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 10px;
      background: var(--chapter);
      box-shadow: 0 0 22px color-mix(in srgb, var(--chapter) 35%, transparent);
    }

    .tapeLabelBtn::before{
      content:"";
      position:absolute;
      inset: 6px 6px 6px 18px;
      border-radius: 10px;
      border: 1px dashed rgba(0,0,0,.30);
      pointer-events:none;
      opacity: .75;
    }
    .tapeLabelBtn::after{
      content:"";
      position:absolute;
      inset:-40% -20%;
      background: linear-gradient(115deg, transparent 45%, rgba(0,0,0,.05), transparent 60%);
      transform: rotate(10deg);
      opacity: .55;
      pointer-events:none;
    }

    .tapeLabelBtn:hover{
      transform: translateY(-1px);
      filter: brightness(1.02);
    }

    .tapeTopRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
      padding-left: 12px;
    }

    .tapeKicker{
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(0,0,0,.62);
      display:flex;
      align-items:center;
      gap: 8px;
    }

    .miniDot{
      width: 9px; height: 9px; border-radius: 999px;
      background: var(--chapter);
      border: 1px solid rgba(0,0,0,.20);
      box-shadow: 0 0 12px rgba(0,0,0,.10);
      display:inline-block;
    }

    .tapeIndex{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .08em;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.25);
      background: rgba(0,0,0,.06);
      color: rgba(0,0,0,.78);
      white-space: nowrap;
    }

    .tapeTitle{
      font-weight: 950;
      font-size: 15px;
      letter-spacing: .02em;
      margin-right: 6px;
      padding-left: 12px;
    }

    @media (max-width: 880px){
      main{ grid-template-columns: 1fr; }
      nav{ justify-content: flex-start; }
      .brand{ min-width: unset; }
      .brand img{ height: 46px; }
    }

    /* Modal */
    .modalOverlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.65);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 9999;
    }
    .modalOverlay[aria-hidden="false"]{ display:flex; }

    .modal{
      width: min(1200px, 100%);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(30,30,60,.92), rgba(10,10,20,.92));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 30px 90px rgba(0,0,0,.60);
      overflow: hidden;
      position: relative;
    }

    .modalTop{
      display:flex;
      align-items:center;
      justify-content: space-between;
      padding: 12px 12px 10px 14px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      gap: 10px;
      position: relative;
    }

    .modalTitle{
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,.84);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .modalTop::after{
      content:"";
      position:absolute;
      left: 0; right: 0;
      bottom: -1px;
      height: 2px;
      background: linear-gradient(to right,
        transparent,
        color-mix(in srgb, var(--chapter) 70%, transparent),
        transparent
      );
      opacity: .75;
      pointer-events:none;
    }

    .closeBtn{
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.25);
      color: rgba(255,255,255,.92);
      cursor:pointer;
      font-size: 18px;
      line-height: 1;
      display:flex;
      align-items:center;
      justify-content:center;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      position: relative;
      z-index: 2;
    }
    .closeBtn:hover{
      transform: translateY(-1px);
      background: rgba(0,0,0,.35);
      border-color: rgba(255,255,255,.28);
    }

    .playerWrap{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: rgba(0,0,0,.55);
    }

    .playerWrap iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .modalNav{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(0,0,0,.30);
      color: rgba(255,255,255,.95);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,.45);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
    }
    .modalNav:hover{
      transform: translateY(-50%) scale(1.03);
      background: rgba(0,0,0,.40);
      border-color: rgba(255,255,255,.32);
    }
    .modalNav.prev{ left: 14px; }
    .modalNav.next{ right: 14px; }

    .modalFooter{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px 14px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.70);
      font-size: 13px;
    }

    .kbd{
      display:inline-flex;
      gap:6px;
      align-items:center;
      opacity:.95;
    }
    .kbd span{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      padding: 3px 7px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.25);
    }