/* Inter (SIL Open Font License), self-hosted so no external origin is
     contacted and font-src can stay 'self'. One variable file covers every
     weight from 100 to 900. */
  @font-face{
    font-family:InterVariable;
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('/fonts/InterVariable.woff2') format('woff2');
  }
  @font-face{
    font-family:InterVariable;
    font-style:italic;
    font-weight:100 900;
    font-display:swap;
    src:url('/fonts/InterVariable-Italic.woff2') format('woff2');
  }

  :root{
    --void:#ffffff;
    --panel:#f6f9f8;
    --panel-2:#eef4f1;
    --panel-edge:#d2ded9;
    --line:#dde6e2;
    /* The signature neon green reads at only ~1.4:1 on white, so on this
       light ground the accent is a deep green of the same hue and the bright
       neon is kept only for solid fills that carry white text. */
    --green:#0b7a4f;
    --green-dim:#5cbb8e;
    --green-deep:#e6f7ef;
    --cyan:#0f7a74;
    --gold:#7d5a00;
    --text:#1d2b27;
    --text-dim:#4a5c57;
    --text-mute:#5f716c;
    --heading:#0a1512;
    /* Headings and body both run on Inter, as resolume.com does. To go back
       to the condensed display face, swap --font-display for:
       "Bahnschrift","DIN Condensed","Oswald","Arial Narrow",sans-serif */
    --font-display:InterVariable,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-mono:"SF Mono","JetBrains Mono","Menlo","Consolas","Roboto Mono",monospace;
    --font-body:InterVariable,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --radius:4px;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--void);color:var(--text);font-family:var(--font-body);
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

  /* ---------- shared panel ---------- */
  /* The panel is a layout box only — no fill and no edge, so every block sits
     straight on the page background. The border is kept at 1px in transparent
     rather than removed so the space it occupied still counts and nothing
     shifts. Each panel below drops the horizontal padding it needed as a box,
     which lines its contents up with the section heading above it. */
  .panel{position:relative;background:transparent;border:1px solid transparent;
    border-radius:var(--radius)}

  /* ---------- typography helpers ---------- */
  .eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.32em;
    text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:.6em}
  /* Inter is much wider than the condensed face this replaced, so uppercase
     headings need negative tracking and a heavier weight to keep their
     presence rather than sprawling. */
  h1,h2,h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
    letter-spacing:-.015em;line-height:1.05;margin:0;text-wrap:balance}
  .rarity{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--text-mute)}

  /* ---------- header ---------- */
  header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-edge)}
  .head-inner{max-width:1160px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:24px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
  /* The mark ships its own rounded tile and transparent corners, so it wants no
     box behind it — a 4px-radius border would cut a square across those corners. */
  .brand .sigil{width:34px;height:34px;flex:none;display:block}
  .brand b{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.12em;color:var(--text);
    text-transform:uppercase;line-height:1}
  .brand small{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;
    color:var(--text-mute);margin-top:4px}

  nav.menu{display:flex;gap:6px}
  nav.menu a{font-family:var(--font-body);font-weight:600;font-size:.76rem;letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-dim);text-decoration:none;padding:9px 13px;border-radius:var(--radius);
    border:1px solid transparent;transition:color .15s,border-color .15s,background .15s}
  nav.menu a:hover,nav.menu a:focus-visible{color:var(--green);border-color:var(--panel-edge);
    background:var(--panel);outline:none}
  nav.menu a.current{color:var(--green);border-color:var(--green-dim)}

  .status-chip{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:var(--radius);
    border:1px solid var(--green-dim);background:var(--green-deep);font-family:var(--font-body);
    font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--green);white-space:nowrap}
  .status-chip a{color:inherit;text-decoration:none;letter-spacing:inherit}
  .status-chip a:hover{text-decoration:underline}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

  /* ---------- layout shell ---------- */
  main{max-width:1160px;margin:0 auto;padding:0 22px}
  section{padding:84px 0;scroll-margin-top:78px}
  .sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:44px;max-width:720px}
  .sec-head h2{font-size:clamp(2rem,4.6vw,3.1rem);color:var(--heading)}
  .sec-head p{margin:0;color:var(--text-dim);font-size:1.02rem;max-width:62ch}

  /* ---------- hero ---------- */
  /* --h1-size is shared so the demo video can offset itself by a slice of the
     headline's own size and stay aligned as that size scales with the viewport. */
  .hero{--h1-size:clamp(3rem,8vw,5.6rem);
    display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;padding:76px 0 88px}
  .hero-copy .tagline{font-family:var(--font-mono);color:var(--cyan);letter-spacing:.22em;
    text-transform:uppercase;font-size:.76rem;margin:20px 0 0}
  .hero h1{font-size:var(--h1-size);margin:16px 0 0;color:var(--heading)}
  /* "MAN" runs like a neon tube on its way out: long steady burn, then a
     stutter. On the white ground the glow is gone — a light halo cannot read
     against white, so the effect is carried by the opacity flicker alone.
     Flashes are capped at two per one-second window, under the WCAG
     three-per-second threshold for photosensitivity. The final keyframe is
     fully lit, so if the animation is neutered the word stays on. */
  .hero h1 .hl{color:var(--green);animation:neon-fail 8s linear infinite}

  @keyframes neon-fail{
    0%,38%       {opacity:1;   text-shadow:none}
    38.6%,39.6%  {opacity:.18; text-shadow:none}
    40.2%,40.9%  {opacity:1;   text-shadow:none}
    41.4%,42.4%  {opacity:.18; text-shadow:none}
    43%,71%      {opacity:1;   text-shadow:none}
    /* a browning-out dip rather than a full dropout */
    71.6%,72.6%  {opacity:.5;  text-shadow:none}
    73.2%,95.5%  {opacity:1;   text-shadow:none}
    96%,96.9%    {opacity:.18; text-shadow:none}
    97.4%,100%   {opacity:1;   text-shadow:none}
  }
  .hero-copy>p{font-size:1.1rem;color:var(--text-dim);max-width:46ch;margin:24px 0 0}
  .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

  /* ---------- buttons ---------- */
  .btn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
    font-size:.98rem;padding:14px 24px;border-radius:var(--radius);border:1px solid var(--panel-edge);
    background:var(--panel-2);color:var(--text);cursor:pointer;text-decoration:none;
    display:inline-flex;align-items:center;gap:10px;transition:border-color .15s,background .15s,color .15s}
  .btn .k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:var(--text-mute);
    border:1px solid var(--panel-edge);border-radius:2px;padding:2px 6px}
  .btn:hover{border-color:var(--green-dim);color:var(--heading);background:#e7efec}
  .btn.primary{background:var(--green);color:#ffffff;border-color:var(--green)}
  .btn.primary .k{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.38)}
  .btn.primary:hover{background:#0a6b45;border-color:#0a6b45;color:#ffffff}
  .btn.disabled{opacity:.4;pointer-events:none}

  /* The hero's right column: demo video above the spec card. */
  /* Drop the column so the video's top edge meets the cap-height of MR TIME MAN
     rather than the top of its line box. The h1's 16px margin less the figure's
     own 1px border leaves 15px, and with Inter at line-height 1.05 the caps sit
     a further .161em down. Measured at 980-1440px: aligns to the pixel. */
  .hero-side{display:grid;gap:20px;align-content:start;
    margin-top:calc(15px + var(--h1-size) * .161)}

  /* ---------- spec card (hero) ---------- */
  .spec-card{padding:0;overflow:hidden}
  /* The header strip keeps its rule, which now reads as the first of the card's
     dividers rather than the lid of a filled box. */
  .spec-top{padding:0 0 14px;display:flex;justify-content:space-between;align-items:center;
    border-bottom:1px solid var(--panel-edge);background:transparent}
  .spec-top .rarity{color:var(--gold)}
  .spec-lvl{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;color:var(--text-mute)}
  .spec-body{padding:6px 0 0}
  .cc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;
    border-bottom:1px solid var(--line);font-size:.9rem}
  .cc-row:last-child{border-bottom:none}
  .cc-row .lab{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--text-mute);flex:none}
  .cc-row .val{font-family:var(--font-display);letter-spacing:.05em;font-size:1.04rem;
    color:var(--text);text-align:right}
  .cc-row .val.green{color:var(--green)}
  .spec-status{margin-top:16px;display:flex;align-items:center;gap:10px;padding:12px 15px;
    border-radius:var(--radius);border:1px solid var(--green-dim);background:var(--green-deep);
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--green)}

  /* ---------- label / value lists ---------- */

  /* ---------- feature rows ---------- */
  .feat-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;
    padding:26px 0;align-items:center}
  .feat-row + .feat-row{margin-top:30px}
  /* Alternate which side the demo sits on, so the list doesn't march. */
  .feat-row:nth-of-type(even) .feat-media{order:-1}
  .feat-row h3{font-size:1.28rem;color:var(--heading);margin-bottom:8px}
  .feat-row p{color:var(--text-dim);line-height:1.7;margin:0}
  .feat-row ul{margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
  .feat-row li{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
    padding:5px 10px;border-radius:2px;border:1px solid var(--line);
    background:var(--panel-2);color:var(--text-dim)}

  /* ---------- feature demo videos ---------- */
  /* The figure holds the 16:9 box. The video sits on top of the placeholder
     and only fades in once the browser confirms it can play the file, so a
     feature with no recording yet shows the placeholder instead of a
     broken frame. */
  .feat-media{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;
    border:1px solid var(--panel-edge);border-radius:var(--radius);background:var(--panel-2)}
  .feat-media[data-state="placeholder"]{
    background-image:repeating-linear-gradient(45deg,transparent 0 11px,
      rgba(11,122,79,.07) 11px 22px)}
  .feat-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    display:block;opacity:0;transition:opacity .45s ease}
  .feat-media[data-state="ready"] .feat-video{opacity:1}
  .feat-media-note{position:absolute;inset:0;display:grid;place-content:center;
    gap:7px;padding:18px;text-align:center;font-family:var(--font-mono)}
  .feat-media[data-state="ready"] .feat-media-note{display:none}
  .feat-media-note b{font-size:.68rem;letter-spacing:.22em;color:var(--green)}
  .feat-media-note span{font-size:.64rem;letter-spacing:.06em;color:var(--text-mute);line-height:1.7}
  .feat-media-note code{font-size:.64rem;color:var(--text-dim);
    padding:2px 6px;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
  /* Inline code inside body copy, e.g. the "=" in the set-up feature. */
  code.inl{font-family:var(--font-mono);font-size:.85em;color:var(--green);
    padding:1px 6px;border:1px solid var(--line);border-radius:2px;background:var(--panel-2)}

  /* ---------- two-column prose + facts ---------- */
  .prose{padding:0}
  /* Prose with no facts panel beside it. The panel runs the full section
     width so it lines up with every other block on the page; the text
     measure inside it is capped instead, so lines stay readable. */
  .about-solo p{max-width:70ch}
  /* Two-up prose: each subsection takes a column, which uses the full panel
     width while keeping each column narrow enough to read comfortably. */
  .about-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 48px;align-items:start}
  .about-cols p:last-child{margin-bottom:0}
  .prose h3{font-size:1.4rem;color:var(--heading);margin:0 0 12px}
  .prose p{color:var(--text-dim);line-height:1.8;margin-bottom:16px}
  .prose p:last-of-type{margin-bottom:0}
  .facts{padding:0}
  .facts h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
    color:var(--green);margin:0 0 14px}

  /* ---------- updates ---------- */
  /* A plain list on the page, separated by rules rather than boxes, to match
     the rest of the sections. Date on the left, what changed on the right. */
  .updates{display:flex;flex-direction:column}
  .update{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 32px;
    padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
  .update:first-child{border-top:1px solid var(--line)}
  .update-meta{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
  .update-meta time{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-mute)}
  /* Bare tag reads as "planned"; .wip and .done borrow the amber and green
     already used by the download notes, so no new colours enter the palette. */
  .update-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;padding:4px 9px;border-radius:2px;
    border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim)}
  .update-tag.wip{border-color:var(--gold);background:#fdf6e3;color:#5c4300}
  .update-tag.done{border-color:var(--green-dim);background:var(--green-deep);color:var(--green)}
  .update-body h3{font-size:1.12rem;color:var(--heading);margin-bottom:8px}
  .update-body p{color:var(--text-dim);line-height:1.7;margin:0}
  .update-body p + p{margin-top:12px}
  /* Shown while the list is empty. The :has() test hides it the moment a real
     entry is added, so the placeholder never has to be deleted by hand. */
  .updates-empty{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;
    color:var(--text-mute);margin:0;padding:26px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .updates:has(.update) .updates-empty{display:none}

  /* ---------- download ---------- */
  /* With no boxes to match, the two columns each end at their own content, so
     they align to the top instead of stretching to a shared height. */
  .dl-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px 56px;align-items:start}
  .dl-main{padding:0}
  /* Support sits in the same grid as a full-width row, so its edges line up
     with the two panels above instead of floating at a different width.
     The text measure is capped separately — the panel is wide, the prose
     inside it isn't. */
  .dl-support{grid-column:1/-1}
  .dl-support p{max-width:70ch}
  /* The Stream Deck add-on. Full width for the same reason as support: it is a
     row in this grid, not a third column, so its edges line up with the two
     panels above. The file card, button and checksum inside it are the ones
     the platform panels already define, so only the panel's own frame and the
     prose measure need setting here. */
  .dl-companion{grid-column:1/-1}
  .dl-companion p{max-width:70ch}
  .dl-companion h3{font-size:1.5rem;color:var(--heading);margin-bottom:6px}
  .dl-companion .dl-file,
  .dl-companion .btn,
  .dl-companion .dl-note,
  .dl-companion .dl-verify{max-width:70ch}
  /* Trailing caveat under the steps — quieter than body text, since it is a
     thing to be aware of rather than a thing to do. */
  .hint-note{margin-top:20px;font-size:.86rem;color:var(--text-dim);max-width:70ch}
  /* Platform switcher. The two builds are the same app, so they swap inside one
     panel rather than sitting in two columns competing for the eye. Selection
     is carried on aria-selected, which means the accessible state and the
     visible state cannot drift apart. */
  .plat-tabs{display:flex;gap:8px;margin-bottom:26px}
  .plat-tab{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;
    font-size:.72rem;padding:10px 18px;border-radius:var(--radius);
    border:1px solid var(--panel-edge);background:var(--panel-2);color:var(--text-mute);
    cursor:pointer;transition:border-color .15s,background .15s,color .15s}
  .plat-tab:hover{border-color:var(--green-dim);color:var(--heading)}
  .plat-tab[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#ffffff}
  .plat-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}

  .dl-main h3{font-size:1.5rem;color:var(--heading);margin-bottom:6px}
  .dl-file{margin-top:22px;display:flex;align-items:center;gap:16px;padding:18px 20px;
    border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2)}
  .dl-file .fico{font-family:var(--font-mono);font-size:1.4rem;line-height:1;color:var(--green)}
  .dl-file b{display:block;color:var(--heading);font-size:1rem}
  .dl-file small{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--text-dim)}
  .dl-file .sz{margin-left:auto;font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim)}
  .dl-note{margin-top:18px;padding:16px 18px;border-radius:var(--radius);
    border:1px solid var(--gold);background:#fdf6e3;
    font-family:var(--font-mono);font-size:.76rem;line-height:1.6;color:#5c4300}
  .dl-note b{color:var(--gold);letter-spacing:.12em}
  .dl-note.ok{border-color:var(--green-dim);background:var(--green-deep);color:#0d5c3c}
  .dl-note.ok b{color:var(--green)}
  /* Checksum panel. The digest is the one thing on the page that must be
     compared character by character, so it gets the mono face, room to wrap
     at any width, and enough contrast to read without squinting. */
  .dl-verify{margin-top:18px;padding:16px 18px;border-radius:var(--radius);
    border:1px solid var(--line);background:var(--panel-2);
    display:flex;flex-direction:column;gap:8px}
  .dl-verify b{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
    color:var(--green)}
  .dl-verify>code{font-family:var(--font-mono);font-size:.72rem;line-height:1.7;
    color:var(--text);word-break:break-all}
  .dl-verify span{font-family:var(--font-body);font-size:.82rem;color:var(--text-dim);
    line-height:1.6}

  .req-list{margin-top:10px;display:flex;flex-direction:column}
  .steps{counter-reset:s;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
  /* The marker is positioned rather than made a flex item: as a flex container
     the <li> turned every inline child into its own column, which threw the
     emphasised text in step 3 into a second column instead of leaving it in
     the sentence. */
  .steps li{counter-increment:s;list-style:none;position:relative;padding-left:42px;
    color:var(--text-dim);line-height:1.6}
  .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;
    width:28px;height:28px;
    display:grid;place-items:center;border-radius:2px;border:1px solid var(--green-dim);
    background:var(--green-deep);font-family:var(--font-mono);font-size:.7rem;color:var(--green)}
  .sub-head{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
    color:var(--green);margin:30px 0 0}

  /* ---------- closing band + footer ---------- */
  .cta-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:40px 0}
  .cta-panel h2{font-size:clamp(1.8rem,3.6vw,2.5rem);color:var(--heading);margin-bottom:14px}
  .cta-panel p{color:var(--text-dim);margin:0}
  footer{border-top:1px solid var(--panel-edge);padding:38px 22px 46px;text-align:center}
  footer .fbrand{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.14em;
    color:var(--text-dim);text-transform:uppercase;margin-bottom:8px}
  footer .fsigil{width:20px;height:20px;vertical-align:-5px;margin-right:9px}
  footer .fmono{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--text-mute)}

  /* ---------- section fade transition ---------- */
  /* Full-screen wash used when jumping between sections: fade to the page
     background, move, fade back. */
  #fade{position:fixed;inset:0;z-index:60;background:var(--void);
    opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
  #fade.active{opacity:1;visibility:visible}

  /* ---------- reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(20px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr;gap:34px;padding:44px 0 60px}
    /* Stacked: nothing to line up with, so the optical offset goes away. */
    .hero-side{margin-top:0}
    .dl-grid,.cta-panel,.about-cols{grid-template-columns:1fr}
    .about-cols{gap:28px}
    .feat-row{grid-template-columns:1fr;gap:16px}
    /* Stacked: the date and its tag sit on one line above the entry. */
    .update{grid-template-columns:1fr;gap:12px}
    .update-meta{flex-direction:row;align-items:center;gap:12px}
    /* Stacked: copy always leads, so the alternating desktop order is dropped. */
    .feat-row:nth-of-type(even) .feat-media{order:0}
    nav.menu{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    /* No flickering for anyone who has asked for less motion — the word
       simply stays lit. */
    .hero h1 .hl{animation:none;opacity:1;text-shadow:none}
  }