:root{
    --abyss: #0B1220;
    --abyss-2: #101B2C;
    --marble: #E8E4D9;
    --ink-muted: #8B93A1;
    --aether: #5FD9C8;
    --aether-dim: rgba(95,217,200,0.14);
    --gold: #C9A15E;
    --border: rgba(232,228,217,0.10);
    --border-strong: rgba(232,228,217,0.18);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, var(--aether-dim), transparent 60%),
      var(--abyss);
    color:var(--marble);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  .mono{ font-family:'IBM Plex Mono', monospace; }
  .serif{ font-family:'Fraunces', serif; }

  a{ color:inherit; }
  :focus-visible{ outline:2px solid var(--aether); outline-offset:3px; border-radius:2px; }

  /* ---- Header ---- */
  header{
    border-bottom:1px solid var(--border);
    padding:20px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:920px;
    margin:0 auto;
  }
  .wordmark{
    font-size:0.95rem;
    letter-spacing:0.22em;
    font-weight:500;
  }
  .wordmark span{ color:var(--gold); }
  .header-tag{
    font-size:0.68rem;
    color:var(--ink-muted);
    letter-spacing:0.08em;
    margin-top:2px;
  }
  .status-pill{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.68rem;
    letter-spacing:0.08em;
    color:var(--ink-muted);
  }
  .status-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--aether);
    box-shadow:0 0 8px var(--aether);
  }

  main{ max-width:760px; margin:0 auto; padding:0 24px 100px; }

  /* ---- Entrance ---- */
  .reveal{
    opacity:0;
    transform:translateY(14px);
    animation:rise 0.7s ease forwards;
  }
  @keyframes rise{ to{ opacity:1; transform:translateY(0); } }
  .d1{ animation-delay:.05s; } .d2{ animation-delay:.15s; } .d3{ animation-delay:.25s; }
  .d4{ animation-delay:.35s; } .d5{ animation-delay:.45s; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ animation:none; opacity:1; transform:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---- Hero / dossier header ---- */
  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.16em;
    color:var(--gold);
    margin-top:56px;
  }
  .eyebrow-cap{
    font-size:0.66rem;
    color:var(--ink-muted);
    letter-spacing:0.05em;
    margin-top:4px;
  }
  h1.title{
    font-size:2.6rem;
    font-weight:500;
    margin:14px 0 8px;
    line-height:1.1;
  }
  .subtitle{
    color:var(--ink-muted);
    font-size:1.02rem;
    max-width:52ch;
  }

  .field-row{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    margin-top:32px;
    padding:20px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .field{ min-width:120px; }
  .field-label{
    font-size:0.62rem;
    letter-spacing:0.12em;
    color:var(--ink-muted);
    margin-bottom:5px;
  }
  .field-value{ font-size:0.88rem; }
  .stack-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .tag{
    font-size:0.68rem;
    padding:3px 8px;
    border:1px solid var(--border-strong);
    border-radius:4px;
    color:var(--ink-muted);
  }

  /* ---- Sections ---- */
  section{ margin-top:64px; }
  h2.section-title{
    font-size:1.4rem;
    font-weight:500;
    margin:0 0 4px;
    position:relative;
    display:inline-block;
  }
  h2.section-title::after{
    content:'';
    display:block;
    width:100%;
    height:2px;
    margin-top:8px;
    background:linear-gradient(90deg, var(--aether), transparent);
  }
  .section-body{ margin-top:18px; color:var(--marble); }
  .section-body p{ margin:0 0 14px; }
  .lede{ font-size:1.02rem; }

  /* ---- Expandables (animated) ---- */
  .expandable{
    margin-top:16px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(232,228,217,0.02);
    overflow:hidden;
  }
  .expandable.open{ border-color:var(--border-strong); }
  .exp-toggle{
    all:unset;
    box-sizing:border-box;
    cursor:pointer;
    width:100%;
    padding:14px 18px;
    font-size:0.86rem;
    font-weight:500;
    color:var(--aether);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .exp-toggle:focus-visible{ outline:2px solid var(--aether); outline-offset:-2px; border-radius:6px; }
  .exp-icon{
    display:inline-block;
    font-size:0.7em;
    transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  .expandable.open .exp-icon{ transform:rotate(90deg); }
  .exp-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 0.38s cubic-bezier(0.4,0,0.2,1);
  }
  .expandable.open .exp-panel{ grid-template-rows:1fr; }
  .exp-panel-inner{ overflow:hidden; min-height:0; }
  .detail-body{
    padding:12px 18px 16px;
    border-top:1px solid var(--border);
    color:var(--ink-muted);
    font-size:0.92rem;
  }
  .archive-cap{
    font-size:0.66rem;
    color:var(--gold);
    letter-spacing:0.05em;
    margin-top:10px;
    display:block;
  }
  @media (prefers-reduced-motion: reduce){
    .exp-panel, .exp-icon{ transition:none; }
  }

  /* ---- Highlights list ---- */
  .highlights{ list-style:none; padding:0; margin:18px 0 0; }
  .highlights li{
    padding:14px 0;
    border-bottom:1px solid var(--border);
    display:flex;
    gap:14px;
  }
  .highlights li:last-child{ border-bottom:none; }
  .hl-mark{ color:var(--aether); font-family:'IBM Plex Mono', monospace; font-size:0.8rem; padding-top:2px; }
  .hl-title{ font-weight:600; margin-bottom:3px; }
  .hl-desc{ color:var(--ink-muted); font-size:0.92rem; }

  /* ---- Theme-swap demo ---- */
  .theme-demo{ margin-top:20px; }
  .theme-demo-label{
    font-size:0.66rem;
    color:var(--gold);
    letter-spacing:0.08em;
    margin-bottom:10px;
  }
  .theme-demo-toggles{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:12px;
  }
  .theme-toggle-btn{
    all:unset;
    cursor:pointer;
    font-size:0.72rem;
    padding:6px 12px;
    border:1px solid var(--border-strong);
    border-radius:20px;
    color:var(--ink-muted);
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .theme-toggle-btn:hover{ color:var(--marble); border-color:var(--aether); }
  .theme-toggle-btn:focus-visible{ outline:2px solid var(--aether); outline-offset:2px; }
  .theme-toggle-btn.active{
    color:var(--abyss);
    background:var(--aether);
    border-color:var(--aether);
    font-weight:600;
  }
  .theme-demo-frame{
    position:relative;
    aspect-ratio:16/9;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    background:var(--abyss-2);
  }
  .theme-demo-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-muted);
    font-size:0.85rem;
    text-align:center;
    padding:12px;
    opacity:0;
    transition:opacity 0.35s ease;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .theme-demo-slide.active{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .theme-toggle-btn, .theme-demo-slide{ transition:none; }
  }

  /* ---- Bug link hover preview ---- */
  .bug-link-wrap{ position:relative; display:inline-block; }
  .bug-link{
    color:var(--aether);
    text-decoration:underline;
    text-underline-offset:2px;
    cursor:pointer;
  }
  .bug-link:hover{ color:var(--marble); }
  .bug-link:focus-visible{ outline:2px solid var(--aether); outline-offset:2px; }
  .bug-preview{
    position:fixed;
    left:0;
    top:0;
    width:280px;
    height:140px;
    border-radius:8px;
    border:1px solid var(--border-strong);
    background:var(--abyss-2);
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(6px);
    transition:opacity 0.18s ease, transform 0.18s ease;
    box-shadow:0 12px 28px rgba(0,0,0,0.45);
    z-index:60;
  }
  .bug-link-wrap:hover .bug-preview,
  .bug-link-wrap:focus-within .bug-preview{
    opacity:1;
    transform:translateY(0);
  }
  /* Crop tuned to the magnifier artifact in the source screenshot (1265×252).
     Focal point ~60%/55% into the image, ~2.6x zoom. Re-tune left/top below
     if the screenshot is swapped for a different one. */
  .bug-preview img{
    position:absolute;
    width:728px;
    height:auto;
    max-width:none;
    left:-297px;
    top:-10px;
  }
  @media (hover:none){
    .bug-preview{ display:none; } /* no hover on touch — tap still opens the full image */
  }
  @media (prefers-reduced-motion: reduce){
    .bug-preview{ transition:none; }
  }

  /* ---- Lightbox ---- */
  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(11,18,32,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    z-index:100;
  }
  .lightbox[hidden]{ display:none; }
  .lightbox-img{
    max-width:min(92vw, 1100px);
    max-height:88vh;
    border-radius:8px;
    border:1px solid var(--border-strong);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .lightbox-close{
    all:unset;
    position:absolute;
    top:20px;
    right:24px;
    cursor:pointer;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border-strong);
    border-radius:50%;
    color:var(--marble);
    font-size:1rem;
  }
  .lightbox-close:hover{ border-color:var(--aether); color:var(--aether); }
  .lightbox-close:focus-visible{ outline:2px solid var(--aether); outline-offset:2px; }

  /* ---- Screenshot carousel ---- */
  .carousel{ margin-top:18px; }
  .carousel-frame{
    font-size:0.66rem;
    color:var(--gold);
    letter-spacing:0.08em;
    margin-bottom:10px;
  }
  .carousel-viewport{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    border:1px solid var(--border);
  }
  .carousel-viewport:focus-visible{ outline:2px solid var(--aether); outline-offset:2px; }
  .carousel-track{
    display:flex;
    transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
  }
  .carousel-slide{
    flex:0 0 100%;
    box-sizing:border-box;
  }
  .carousel-slide img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
  }
  .shot-placeholder{
    aspect-ratio:16/9;
    border-bottom:1px dashed var(--border-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-muted);
    font-size:0.85rem;
    text-align:center;
    padding:12px;
  }
  .carousel-caption{ padding:14px 18px 16px; }
  .carousel-caption .cap-title{ font-weight:600; font-size:0.92rem; margin-bottom:2px; }
  .carousel-caption .cap-desc{ color:var(--ink-muted); font-size:0.84rem; }
  .carousel-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
  }
  .carousel-nav-btn{
    all:unset;
    cursor:pointer;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-strong);
    border-radius:50%;
    color:var(--marble);
    font-size:0.9rem;
  }
  .carousel-nav-btn:hover{ border-color:var(--aether); color:var(--aether); }
  .carousel-nav-btn:focus-visible{ outline:2px solid var(--aether); outline-offset:2px; }
  .carousel-dots{ display:flex; gap:7px; }
  .carousel-dot{
    all:unset;
    cursor:pointer;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--border-strong);
  }
  .carousel-dot.active{ background:var(--aether); box-shadow:0 0 6px var(--aether); }
  @media (prefers-reduced-motion: reduce){
    .carousel-track{ transition:none; }
  }

  footer{
    max-width:760px;
    margin:80px auto 0;
    padding:24px 24px 40px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }
  .footer-mark{ font-size:0.8rem; letter-spacing:0.1em; color:var(--ink-muted); }
  .footer-mark span{ color:var(--gold); }
  .footer-links{ display:flex; gap:18px; font-size:0.8rem; color:var(--ink-muted); }
  .footer-links a:hover{ color:var(--aether); }