/* ===================================================================
   FY 25/26 — PPT deck
   Logical slide is 1600×900 (16:9). Whole frame is scaled to viewport
   so type and grid stay perfectly proportioned at any window size.
   =================================================================== */

:root{
  --paper:#F7F3EB;
  --paper-2:#EDE6D4;
  --paper-3:#E2D9C2;
  --ink:#1E1813;
  --ink-60:#1E181399;
  --ink-30:#1E18134D;
  --ink-15:#1E18131F;
  --rule:#1E181322;
  --heat:#FF4500;
  --heat-soft:#FF450014;
  --warm:#8B5A2B;
  --ease:cubic-bezier(0.87,0,0.13,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box }
html, body{ height:100%; overflow:hidden }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 14,"SOFT" 50;
  -webkit-font-smoothing:antialiased;
  cursor:none;
  overscroll-behavior:none;
  touch-action:none;
}
@media (hover:none){ body{ cursor:auto } }

/* ambient paper grain + halo */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,120,60,.045), transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(255,69,0,.035), transparent 55%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .14 0 0 0 0 .11 0 0 0 0 .09 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
  opacity:.3;
}

/* ============ cursor ============ */
.cursor, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor{ width:6px; height:6px; border-radius:50%; background:#F7F3EB;
  transition:width .3s var(--ease), height .3s var(--ease); }
.cursor-ring{ width:36px; height:36px; border-radius:50%;
  border:1px solid #F7F3EB; opacity:0;
  transition:opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease); }
body.hovering .cursor{ width:2px; height:2px }
body.hovering .cursor-ring{ opacity:1; width:52px; height:52px }

/* ============ stage + deck ============ */
.stage{
  position:fixed; inset:0; z-index:2;
  display:grid; place-items:center;
  overflow:hidden;
}
.deck{
  --slide-scale:1;
  position:relative;
  width:1600px; height:900px;
  transform:scale(var(--slide-scale));
  transform-origin:center center;
}

/* ============ slide ============ */
.slide{
  position:absolute; inset:0;
  background:var(--paper);
  opacity:0;
  transform:translateX(40px);
  transition:
    opacity .55s var(--ease-out),
    transform .65s var(--ease);
  pointer-events:none;
  display:flex; flex-direction:column;
}
.slide.is-active{
  opacity:1; transform:translateX(0);
  pointer-events:auto;
  z-index:2;
}
.slide.is-past{
  opacity:0; transform:translateX(-40px);
  z-index:1;
}
.slide.is-future{
  opacity:0; transform:translateX(40px);
  z-index:1;
}
.slide-shell{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
}

/* slide chrome (top + bottom rails) */
.slide-chrome{
  flex-shrink:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 56px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-60);
}
.chrome-top{
  border-bottom:1px solid var(--ink-15);
  background:linear-gradient(to bottom, var(--paper), rgba(247,243,235,0));
}
.chrome-bot{
  margin-top:auto;
  border-top:1px solid var(--ink-15);
  background:linear-gradient(to top, var(--paper), rgba(247,243,235,0));
}
.chrome-brand{ color:var(--ink); font-weight:500 }
.chrome-meta{ display:flex; gap:10px; align-items:center }
.chrome-section{ color:var(--heat); font-weight:500 }
.chrome-sep{ color:var(--ink-30) }
.chrome-page{ color:var(--ink); font-weight:500 }
.chrome-hint kbd{
  display:inline-block; min-width:18px; padding:2px 6px;
  margin:0 2px;
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:3px;
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:0; text-transform:none;
  color:var(--ink); font-weight:500;
}
.chrome-credit{ color:var(--ink-30); font-style:italic; text-transform:none; letter-spacing:.04em }
.chrome-credit--right{ font-style:normal; text-transform:uppercase; letter-spacing:.18em; font-family:"JetBrains Mono",monospace }

/* slide body — content area */
.slide-body{
  flex:1; min-height:0;
  padding:64px 100px 80px;
  display:flex; flex-direction:column;
}

/* ============ universal eyebrow / heading / sub ============ */
.slide-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:14px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--heat); font-weight:500;
  margin-bottom:18px;
}
.slide-main{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 144,"SOFT" 70;
  font-weight:300;
  font-size:120px; line-height:.94; letter-spacing:-.03em;
  color:var(--ink);
}
.slide-main em{
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 10;
}
.slide-main .heat{ color:var(--heat); font-style:italic }
.slide-sub{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 36,"SOFT" 40;
  font-size:26px; line-height:1.35;
  color:var(--ink-60);
  margin-top:14px;
  max-width:62ch;
}

/* ============ slide 01 · TITLE ============ */
.title-slide{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  justify-content:center;
  gap:28px;
  position:relative;
}

/* slide-01 gradient — edge-to-edge wash. Left stays paper-clean for
   the title and byline (text-safe). Right side fades through warm
   amber into ink-shadow for depth. A soft heat-ember sits at the
   far right to draw the eye. Stays behind the chrome rails via the
   slide-shell stacking order (chrome z-index:2). */
.slide[data-id="title"] .slide-shell{ isolation:isolate }
.slide[data-id="title"] .slide-shell::before{
  content:""; position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    transparent 38%,
    rgba(139, 90, 43, .05) 62%,
    rgba(35, 25, 19, .11) 88%,
    rgba(35, 25, 19, .17) 100%
  );
}
.slide[data-id="title"] .slide-shell::after{
  content:""; position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(
    ellipse 55% 65% at 94% 50%,
    rgba(255, 69, 0, .08),
    transparent 65%
  );
}
.slide[data-id="title"] .slide-chrome,
.slide[data-id="title"] .slide-body{ position:relative; z-index:1 }
.title-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:14px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--heat); font-weight:500;
  margin-bottom:14px;
}
.title-main{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 144,"SOFT" 70;
  font-weight:300;
  font-size:172px; line-height:.92; letter-spacing:-.04em;
  color:var(--ink);
}
.title-main em{ font-style:italic; font-variation-settings:"opsz" 144,"SOFT" 10 }
.title-main .heat{ color:var(--heat); font-style:italic }
.title-line{ display:block }

.title-sub{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 36,"SOFT" 30;
  font-size:30px; line-height:1.3;
  color:var(--ink-60);
  margin-top:6px;
  max-width:42ch;
}

.title-breadth{
  display:flex; gap:14px;
  align-items:baseline;
  padding-top:24px;
  border-top:1px solid var(--rule);
  max-width:68ch;
}
.title-breadth .bk{
  flex-shrink:0;
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--heat); font-weight:500;
  padding-top:4px;
}
.title-breadth .bv{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 22,"SOFT" 40;
  font-size:20px; line-height:1.45;
  color:var(--ink-60);
}
.title-breadth .bv em{ color:var(--ink); font-style:italic }

.title-byline{
  margin-top:auto;
  display:flex; gap:18px; align-items:baseline;
  padding-top:24px;
}
.title-byline .bn{
  font-family:"Fraunces",serif;
  font-size:24px; font-weight:500; color:var(--ink);
}
.title-byline .bm{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-60);
}

/* ============ slide 02 · OVERVIEW (agenda) ============ */
.overview-slide{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.overview-list{
  list-style:none;
  margin-top:auto;
  padding-top:36px;
  display:flex; flex-direction:column;
}
.overview-row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:28px;
  align-items:baseline;
  padding:18px 0;
  border-top:1px solid var(--rule);
  position:relative;
  transition:padding-left .35s var(--ease-out), background .35s var(--ease-out);
}
.overview-row:last-child{ border-bottom:1px solid var(--rule) }
.overview-row:hover{ padding-left:14px }
.overview-row.star{
  background:linear-gradient(to right, rgba(255,69,0,.05), transparent 60%);
}
.overview-row .ov-no{
  font-family:"JetBrains Mono",monospace;
  font-size:18px; letter-spacing:.16em;
  color:var(--heat); font-weight:500;
  padding-top:4px;
}
.overview-row .ov-body{
  display:flex; flex-direction:column;
  gap:6px;
}
.overview-row .ov-title{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 48,"SOFT" 50;
  font-weight:300;
  font-size:38px; line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink);
}
.overview-row .ov-title .star{
  color:var(--heat); font-style:normal; margin-right:8px;
}
.overview-row .ov-title .dim{
  font-size:.62em; color:var(--ink-60);
  font-variation-settings:"opsz" 24,"SOFT" 30;
}
.overview-row .ov-title .dim em{
  font-style:italic; color:var(--ink-60);
}
.overview-row .ov-sub{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-30);
}

/* ============ slide 03 · NUMBERS ============ */
.numbers-slide{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.by-num-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr;
  gap:48px;
  margin-top:auto;
  padding-top:48px;
}
.by-num-block{
  display:flex; flex-direction:column;
  gap:10px;
  padding-top:20px;
  border-top:2px solid var(--ink);
}
.by-num-v{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 144,"SOFT" 70;
  font-weight:300;
  font-size:130px; line-height:.88; letter-spacing:-.03em;
  color:var(--ink);
}
.by-num-block:first-child .by-num-v{ color:var(--heat) }
.by-num-l{
  font-family:"JetBrains Mono",monospace;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:500;
  margin-top:6px;
}
.by-num-h{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 18,"SOFT" 30;
  font-size:15px; line-height:1.4;
  color:var(--ink-60);
}

/* ============ slides 03/04 · SHIPPED LIST ============ */
.shipped-slide{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.shipped-list{
  list-style:none;
  margin-top:32px;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:48px;
  row-gap:2px;
  flex:1; min-height:0;
  align-content:start;
}
.shipped-row{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  padding:14px 0;
  border-bottom:1px dotted var(--rule);
  align-items:baseline;
}
.shipped-row .row-no{
  font-family:"JetBrains Mono",monospace;
  font-size:13px; letter-spacing:.16em;
  color:var(--heat); font-weight:500;
  padding-top:3px;
}
.shipped-row .row-body{
  display:flex; flex-direction:column;
  gap:3px;
}
.shipped-row .row-title{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 36,"SOFT" 50;
  font-size:24px; line-height:1.2;
  color:var(--ink);
  letter-spacing:-.005em;
}
.shipped-row .row-title em{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 24,"SOFT" 30;
  font-size:19px; color:var(--ink-60);
}
.shipped-row .row-title .star{ color:var(--heat); font-style:normal; margin-right:6px }
.shipped-row .row-client{
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-30);
}

/* ============ slide 05 · NEXT ============ */
.next-slide{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  position:relative;
}
.next-slide::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,69,0,.06), transparent 60%);
}
/* Asymmetric grid — Folio (star) on the left spanning both rows, the
   two smaller follow-ups stacked on the right. Gives Folio visual
   weight as the headline next-up item. */
.next-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:22px;
  margin-top:auto;
  padding-top:36px;
  flex:1; min-height:0;
}
.next-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:16px;
  padding:24px 28px;
  display:flex; flex-direction:column;
  gap:8px;
  box-shadow:0 14px 36px -22px rgba(35,25,19,.18);
  transition:
    transform .55s var(--ease-out),
    box-shadow .55s var(--ease-out),
    border-color .4s var(--ease-out);
  overflow:hidden;
}
.next-card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 50px -22px rgba(35,25,19,.24);
}

/* the big one */
.next-card.star{
  grid-row:1 / span 2;
  padding:38px 44px 32px;
  border-color:var(--heat);
  background:
    radial-gradient(ellipse at top right, rgba(255,69,0,.07), transparent 55%),
    var(--paper);
  box-shadow:0 22px 60px -24px rgba(255,69,0,.32);
}
.next-card.star:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 70px -22px rgba(255,69,0,.40);
}
.next-card.star::after{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--heat);
}

.next-card-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.next-card-head .no{ color:var(--heat); font-weight:500 }
.next-card-head .status{
  padding:3px 10px; border:1px solid currentColor; border-radius:99px;
  font-size:9px; letter-spacing:.20em;
  color:var(--ink-60);
}
.next-card-head .status--beta{ color:var(--heat); border-color:var(--heat); font-weight:500 }
.next-card-head .status--in-design{ color:var(--warm); border-color:var(--warm) }
.next-card-head .status--in-flight{ color:var(--ink-60) }
.next-card.star .next-card-head{ font-size:13px }

.next-card-title{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 56,"SOFT" 60;
  font-weight:300;
  font-size:46px; line-height:.96;
  letter-spacing:-.02em;
  margin-top:6px;
  color:var(--ink);
}
.next-card-title .heat{ color:var(--heat); font-style:italic }
.next-card-title .star{ color:var(--heat); font-style:normal; margin-right:8px }
.next-card.star .next-card-title{
  font-size:96px; line-height:.92;
  margin-top:14px;
}

.next-card-em{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 24,"SOFT" 30;
  font-size:18px; line-height:1.25;
  color:var(--ink-60);
}
.next-card.star .next-card-em{
  font-size:30px; line-height:1.2;
  margin-top:6px;
}

.next-card-desc{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 18;
  font-size:16px; line-height:1.5;
  color:var(--ink);
  flex:1;
  margin-top:6px;
}
.next-card.star .next-card-desc{
  font-size:22px; line-height:1.5;
  margin-top:18px;
  max-width:24ch;
}

.next-card-stack{
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-30);
  padding-top:12px; margin-top:8px;
  border-top:1px dotted var(--rule);
}
.next-card-stack::before{ content:"stack — "; color:var(--ink-30) }
.next-card.star .next-card-stack{ font-size:11px; padding-top:18px }

/* ============ slide 06 · CLOSING ============ */
.closing-slide{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:24px; text-align:center;
}
.closing-num{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 144,"SOFT" 70;
  font-weight:300;
  font-size:340px; line-height:.86;
  letter-spacing:-.05em;
  color:var(--ink);
}
.closing-num .heat{ color:var(--heat); font-style:italic }
.closing-sub{
  font-family:"JetBrains Mono",monospace;
  font-size:13px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink-60);
  margin-top:8px;
}
.closing-byline{
  font-family:"Fraunces",serif; font-style:italic;
  font-variation-settings:"opsz" 56,"SOFT" 30;
  font-size:48px; line-height:1.1;
  color:var(--ink);
  margin-top:22px;
}
.closing-byline em{ font-style:italic }
.closing-byline .heat{ color:var(--heat); font-style:italic }
.closing-credit{
  margin-top:42px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink-30);
}

/* ============ progress dots ============ */
.progress{
  position:fixed; left:0; right:0; bottom:18px; z-index:200;
  display:flex; justify-content:center; gap:10px;
  pointer-events:none;
}
.progress span{
  width:26px; height:3px;
  background:var(--ink-15);
  cursor:pointer;
  pointer-events:auto;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.progress span:hover{ background:var(--ink-30) }
.progress span.is-past{ background:var(--ink-30) }
.progress span.is-active{
  background:var(--heat);
  transform:scaleY(2);
}

/* ============ viewer hint ============ */
.viewer-hint{
  position:fixed; left:24px; bottom:14px; z-index:150;
  display:flex; gap:18px;
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-30);
}
.viewer-hint kbd{
  display:inline-block; min-width:18px; padding:2px 6px;
  margin:0 2px;
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:3px;
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:0; text-transform:none;
  color:var(--ink); font-weight:500;
}

/* ============ Folio hover peek (iPhone 3D-touch style) ============ */
.next-card.has-peek{ cursor:pointer }
.next-card.is-peeking{
  transform:translateY(-2px) scale(.985);
  box-shadow:0 24px 50px -22px rgba(255,69,0,.40);
}
.folio-preview{
  --peek-ox:0px;
  --peek-oy:0px;
  position:fixed;
  width:720px; height:540px;
  background:#1E1813;
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 50px 100px -20px rgba(0,0,0,.55),
    0 16px 36px -12px rgba(0,0,0,.35);
  opacity:0;
  transform:scale(.88) translate(var(--peek-ox), var(--peek-oy));
  transform-origin:center center;
  transition:
    opacity .26s var(--ease-out),
    transform .38s var(--ease-out);
  pointer-events:none;
  z-index:5000;
}
.folio-preview.is-open{
  opacity:1;
  transform:scale(1) translate(0, 0);
}
.fp-bar{
  display:flex; align-items:center; gap:8px;
  padding:13px 18px;
  background:#2A201A;
  border-bottom:1px solid rgba(247,243,235,.08);
}
.fp-bar .cb{ width:12px; height:12px; border-radius:50% }
.fp-bar .cb:nth-child(1){ background:#ff6058 }
.fp-bar .cb:nth-child(2){ background:#ffbd2e }
.fp-bar .cb:nth-child(3){ background:#28c941 }
.fp-bar .fp-url{
  margin-left:14px;
  flex:1;
  padding:4px 12px;
  border-radius:6px;
  background:rgba(247,243,235,.06);
  font-family:"JetBrains Mono",monospace;
  font-size:12px; letter-spacing:.04em;
  color:rgba(247,243,235,.65);
  text-align:center;
}
.fp-img{
  height:440px;
  background-image:url('./folio-preview.png');
  background-size:cover;
  background-position:top center;
  background-color:#F7F3EB;
}
.fp-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 18px;
  background:#2A201A;
  border-top:1px solid rgba(247,243,235,.08);
  font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  height:36px;
}
.fp-live{
  display:flex; align-items:center; gap:8px;
  color:var(--heat); font-weight:500;
}
.fp-live .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--heat);
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.45; transform:scale(.75) }
}
.fp-cap{ color:rgba(247,243,235,.45); letter-spacing:.14em }

/* ============ help overlay ============ */
.help-overlay{
  position:fixed; inset:0; z-index:9000;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(247,243,235,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.help-overlay.is-open{ display:flex }
.help-card{
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 30px 80px -20px rgba(35,25,19,.35);
  padding:44px 52px;
  max-width:520px; width:88vw;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.help-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--heat);
}
.help-main{
  font-family:"Fraunces",serif;
  font-weight:300; font-size:54px; line-height:.95;
  letter-spacing:-.03em; color:var(--ink);
}
.help-sub{
  font-family:"Fraunces",serif; font-style:italic;
  font-size:18px; color:var(--ink-60);
  margin-bottom:18px;
}
.help-grid{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:22px; row-gap:12px;
  align-items:center;
  font-family:"JetBrains Mono",monospace;
  font-size:13px; color:var(--ink);
}
.help-grid > div:nth-child(even){ color:var(--ink-60); letter-spacing:.02em }
.help-grid kbd{
  display:inline-block; min-width:24px; padding:2px 8px;
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500;
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:4px; margin-right:6px; color:var(--ink);
}
.help-close{
  position:absolute; top:14px; right:18px;
  background:none; border:none; cursor:pointer;
  font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-60);
}
.help-close:hover{ color:var(--heat) }

/* ============ loader ============ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-60);
  transition:opacity .6s var(--ease);
}
.loader.out{ opacity:0; pointer-events:none }

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .slide{ transition:none }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}