/* /guide/ stylesheet (DIG-1269): how to use the Diggit phone app.
   A hidden page with its own small stylesheet, so it loads nothing it does
   not use. Three parts:
     1. fonts, tokens and base, copied from site.css (same values);
     2. the page: header, intro, the four lessons (the phone, the step on
        screen with Back / step numbers / Next / Replay, All steps), footer;
     3. the phone: the device and the app screens COPIED from site.css's
        "the phone (DIG-1241)" block (the hero's iPhone), then the screens
        only this guide draws (sheets, the form, Filed today, What Diggit
        remembers), rebuilt from apps/mobile on Develop.
   Then the finger that shows each tap and hold (.fg, guide only).
   html.rm is the static mode: reduced motion shows each step's finished
   screen, the controls still work, nothing moves. Motion is smooth ease
   only: no bounce, no overshoot. */

/* ---------- 1. fonts, tokens, base (copied from site.css) ---------- */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500.woff2) format('woff2');}

/* ---------- tokens + base ---------- */
:root{
  color-scheme:light;
  --bg:#f8fafc; --world:#e9f1f5; --card:#ffffff; --border:#e2e8f0; --border-soft:#eef2f6;
  --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --muted-2:#475569; --muted-3:#94a3b8;
  --teal:#056187; --teal-deep:#03476a; --teal-tint:#e8f1f5; --cyan:#00a3e0;
  --wire:#bcd3df;
  --bebas:'Bebas Neue', 'Arial Narrow', sans-serif;
  --inter:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
html{background:var(--bg)}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--inter); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%}
a{color:var(--teal)}
/* solid teal ring, offset so a teal-filled button shows it against the page */
:focus-visible{outline:3px solid #056187; outline-offset:3px; border-radius:6px}
::selection{background:rgba(0,163,224,.22)}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 2. the page ---------- */
.display{font-family:var(--bebas); font-weight:400; line-height:.98; letter-spacing:.012em; margin:0; color:var(--ink); text-transform:uppercase}
.display .k{color:var(--teal)}

.gh{display:flex; align-items:center; height:60px; padding:0 16px; border-bottom:1px solid var(--border); background:var(--bg)}
.gh-logo{color:var(--teal); text-decoration:none; line-height:1; display:inline-flex; align-items:center; gap:10px; border-radius:6px}
.gh-logo .mark{width:25px; height:22px; flex:none}
.gh-logo .wm{width:137px; height:18px; flex:none}

.intro{max-width:1120px; margin:0 auto; padding:40px 16px 48px}
.intro h1{font-size:clamp(52px,14vw,96px)}
.intro-lead{margin:14px 0 0; max-width:34em; font-size:18px; line-height:1.55; color:var(--muted-2)}
.toc{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:10px; max-width:760px}
.toc a{display:flex; align-items:center; gap:14px; min-height:56px; padding:10px 16px; border:1px solid var(--border); border-radius:8px; background:var(--card);
  color:var(--ink); text-decoration:none; font:600 16px/1.35 var(--inter); transition:border-color .18s ease, background-color .18s ease}
.toc a:hover{border-color:var(--teal); background:#fbfdfe}
.toc-n{flex:none; width:32px; height:32px; border-radius:50%; background:var(--teal-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font:400 21px/1 var(--bebas)}
@media (min-width:640px){ .toc{grid-template-columns:1fr 1fr} }

/* a lesson: heading; the phone; the step on screen with Back, the step
   numbers, Next and Replay; then All steps. guide.js scales the phone so the
   phone, the step's words and the controls fit one screen together. */
.ch{max-width:1120px; margin:0 auto; padding:48px 16px 56px; border-top:1px solid var(--border); scroll-margin-top:0}
.ch h2{font-size:clamp(40px,10.5vw,64px)}
.ch-n{color:var(--teal); margin-right:.08em}
.ch-lead{margin:12px 0 0; max-width:34em; font-size:17px; line-height:1.55; color:var(--muted-2)}
.ch-stage{margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:8px}
.ch-phone{display:flex; justify-content:center}
.ch-phone:empty{display:none}
/* the line under the phone: where the moment is, or what the Spanish means */
.ch-sub{display:none}
.has-sub .ch-sub{display:block; margin:0; width:min(400px,100%); min-height:40px; text-align:center;
  font:500 14px/20px var(--inter); color:var(--muted-2); text-wrap:balance}

/* the step on screen and its controls; hidden until guide.js runs */
html:not(.js) .ch-ctl{display:none}
.ch-ctl{margin:12px auto 0; max-width:440px}
.sc-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sc-n{margin:0; font:600 12.5px/1.2 var(--inter); letter-spacing:.06em; text-transform:uppercase; color:var(--teal)}
.sc-n b{font-weight:700}
.replay{display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-right:-6px; padding:0 14px 0 12px; border:0; border-radius:999px;
  background:transparent; color:var(--teal); font:600 14.5px/1 var(--inter); cursor:pointer; transition:background-color .18s ease, color .18s ease}
.replay:hover{background:var(--teal-tint); color:var(--teal-deep)}
.replay svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* every step's words share one cell, so the block keeps the height of the
   longest and the phone above never jumps */
.sc-texts{list-style:none; margin:2px 0 0; padding:0; display:grid}
.sc-texts li{grid-area:1/1; visibility:hidden; opacity:0; font:500 17px/1.45 var(--inter); color:var(--ink); text-wrap:pretty;
  transition:opacity .22s cubic-bezier(.33,1,.68,1), visibility 0s linear .22s}
.sc-texts li.on{visibility:visible; opacity:1; transition-delay:0s}
.sc-texts b{font-weight:700}
.sc-nav{margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.sn-row{display:flex; gap:6px}
.sn{width:40px; height:40px; padding:2px 0 0; border-radius:50%; border:1.5px solid #cbd5e1; background:var(--card); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center; font:400 22px/1 var(--bebas); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease}
.sn:hover{border-color:var(--teal); color:var(--teal)}
.sn[aria-current]{background:var(--teal); border-color:var(--teal); color:#fff}
.nb{display:inline-flex; align-items:center; justify-content:center; gap:4px; height:44px; border-radius:999px; cursor:pointer;
  font:600 16px/1 var(--inter); transition:background-color .18s ease, opacity .18s ease}
.nb svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round}
.nb-back{width:44px; padding:0; border:1.5px solid var(--teal); background:var(--card); color:var(--teal)}
.nb-back:hover{background:var(--teal-tint)}
.nb-next{padding:0 14px 0 20px; border:0; background:var(--teal); color:#fff}
.nb-next:hover{background:var(--teal-deep)}
.nb[aria-disabled="true"]{opacity:.38; cursor:default}
.nb-back[aria-disabled="true"]:hover{background:var(--card)}
.nb-next[aria-disabled="true"]:hover{background:var(--teal)}
.vh-probe{position:fixed; left:0; top:0; width:0; height:100vh; height:100svh; visibility:hidden; pointer-events:none}

/* All steps: the full instructions, the step on screen lit */
.ch-body{margin-top:36px}
.all-h{margin:0 0 12px; font:600 12.5px/1.2 var(--inter); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.steps{list-style:none; margin:0; padding:0; max-width:40em}
.steps li{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border)}
.steps li:first-child{border-top:1px solid var(--border)}
.st-n{flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid #cbd5e1; background:var(--card); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center; font:400 21px/1 var(--bebas);
  transition:background-color .3s ease, border-color .3s ease, color .3s ease}
.st-x{flex:1; min-width:0; padding-top:4px; font-size:17px; line-height:1.55; color:var(--ink-2)}
.st-x b{font-weight:600; color:var(--ink)}
.steps li.on .st-n{background:var(--teal); border-color:var(--teal); color:#fff}
.ch-tip{margin:20px 0 0; max-width:40em; padding:14px 16px; border:1px solid var(--border); border-radius:8px; background:var(--card);
  font-size:15.5px; line-height:1.6; color:var(--muted-2)}
.ch-tip b{color:var(--ink); font-weight:600}
.ch-more{margin-top:28px; max-width:40em}
.ch-more h3{margin:0; font:600 18px/1.4 var(--inter); color:var(--ink)}
.ch-more ul{list-style:none; margin:12px 0 0; padding:0}
.ch-more li{padding:12px 0; border-bottom:1px solid var(--border); font-size:16.5px; line-height:1.5; color:var(--ink-2)}

/* desktop: the phone on the left, the heading, the step and its controls beside it */
@media (min-width:960px){
  .ch{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:72px; align-items:start; padding:40px 16px 64px;
    grid-template-areas:"stage head" "stage ctl" "stage body"; grid-template-rows:auto auto 1fr}
  .ch-head{grid-area:head; padding-top:16px}
  .ch-stage{grid-area:stage; margin-top:0; position:sticky; top:24px}
  .ch-ctl{grid-area:ctl; width:100%; max-width:520px; margin:32px 0 0}
  .sc-texts li{font-size:20px; line-height:1.45}
  .sc-nav{justify-content:flex-start; gap:16px; margin-top:20px}
  .ch-body{grid-area:body; margin-top:44px}
}

/* one lesson per screen (owner, Oct 1): the lead shows two lines, More
   opens the rest and All steps (guide.js adds More; without it all shows) */
.ch-more-btn{display:inline-flex; align-items:center; min-height:40px; margin:2px 0 0; padding:0; border:0; background:none;
  font:600 15px/1 var(--inter); color:var(--teal); cursor:pointer}
.ch-more-btn:hover{color:var(--teal-deep)}
html.js .ch:not(.open) .ch-lead{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
html.js .ch:not(.open) .ch-body{display:none}
.ch-go{display:none}

/* below 960px: the lessons in one row; swipe, or Previous / Next lesson */
@media (max-width:959.98px){
  html.js .lessons{position:relative; display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none; border-top:1px solid var(--border)}
  html.js .lessons::-webkit-scrollbar{display:none}
  html.js .lessons > .ch{flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; border-top:0; padding:20px 16px 24px}
  html.js .ch h2{font-size:clamp(34px,9.5vw,52px)}
  html.js .ch-lead{margin-top:8px; font-size:16px; line-height:1.5}
  html.js .ch-stage{margin-top:12px}
  html.js .ch-ctl{margin-top:8px}
  html.js .sc-texts li{font-size:16px; line-height:1.45}
  html.js .sc-nav{margin-top:10px}
  html.js .ch-body{margin-top:24px}
  .ch-go{display:flex; justify-content:space-between; gap:12px; max-width:440px; margin:12px auto 0; padding-top:8px; border-top:1px solid var(--border)}
  .cg{display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
    font:600 15px/1 var(--inter); color:var(--teal); transition:color .18s ease}
  .cg:hover{color:var(--teal-deep)}
  .cg svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round}
  .cg-next{margin-left:auto}
}

.gf{border-top:1px solid var(--border); padding:32px 16px 48px; display:flex; flex-direction:column; align-items:center; gap:10px; background:#fff}
.gf p{margin:0; font-size:13px; color:var(--muted)}
/* Terms and Privacy (DIG-1469) */
.gf-legal{display:flex; gap:20px}
.gf-legal a{display:inline-flex; align-items:center; min-height:32px; color:var(--muted-2); text-decoration:none; font-size:13px}
.gf-legal a:hover{color:var(--teal)}

/* static mode: the same controls; each step shows its finished screen */
html.rm .replay{display:none}
html.rm *, html.rm *::before, html.rm *::after{animation:none !important; transition:none !important}

/* ---------- 3. the phone (copied from site.css, DIG-1241) ---------- */
/* the device */
.iph{position:relative; --ps:.7; width:calc(424px * var(--ps)); height:calc(878px * var(--ps)); flex:none}
.iph-body{
  position:absolute; left:0; top:0; width:424px; height:878px; padding:5px;
  transform:scale(var(--ps)); transform-origin:0 0;
  border-radius:72px;
  background:linear-gradient(135deg,#747a82 0%,#33373c 16%,#50555c 40%,#26292d 62%,#5f646b 84%,#2c2f33 100%);
  box-shadow:
    0 0 0 1px rgba(10,12,14,.6),
    inset 0 0 0 1px rgba(255,255,255,.24),
    inset 0 0 2px 2px rgba(0,0,0,.45),
    0 60px 90px -40px rgba(15,23,42,.55),
    0 26px 50px -26px rgba(15,23,42,.5);
}
/* side keys: action, volume up and down on the left, the side button right */
.iph-k{position:absolute; width:5px; border-radius:2px; background:linear-gradient(90deg,#2b2e32,#6d7279 45%,#3a3e43)}
.iph-k.k1{left:-3px; top:152px; height:32px}
.iph-k.k2{left:-3px; top:214px; height:62px}
.iph-k.k3{left:-3px; top:290px; height:62px}
.iph-k.k4{right:-3px; top:246px; height:98px}
.iph-bezel{position:relative; width:414px; height:868px; padding:12px; border-radius:67px; background:#08090b; box-shadow:inset 0 0 0 1.5px #1d2024}
.iph-screen{
  position:relative; width:390px; height:844px; border-radius:55px; overflow:hidden;
  background:#f8fafc; isolation:isolate; transform:translateZ(0);
  font-family:var(--inter); color:#0f172a; line-height:1.4; text-align:left;
  -webkit-font-smoothing:antialiased;
}
.iph-island{position:absolute; z-index:40; left:50%; top:11px; width:124px; height:36px; margin-left:-62px; border-radius:18px; background:#000}
.iph-island::after{content:""; position:absolute; right:12px; top:11px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#2a3350 0 2px,#0b0e17 3px 7px)}
/* the glass: one soft diagonal sheen over everything */
.iph-glass{position:absolute; inset:0; z-index:41; pointer-events:none; border-radius:55px;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.iph svg{max-width:none}
.iph .ic{display:block; flex:none}

/* screens crossfade; .nt draws a finished frame with nothing moving */
.scr{position:absolute; inset:0; opacity:0; overflow:hidden; background:#f8fafc; transition:opacity .35s cubic-bezier(.33,1,.68,1)}
.scr.on{opacity:1}
.scr.nt, .scr.nt *, .scr.nt *::before, .scr.nt *::after{transition:none !important; animation:none !important}
.scr.nt .fab-bars i{transform:scaleY(var(--hi,.8))}
/* the home indicator */
.scr::after{content:""; position:absolute; z-index:30; left:50%; bottom:8px; width:136px; height:5px; margin-left:-68px; border-radius:3px; background:#0f172a}
.scr.dark::after{background:#fff}

/* status bar */
.sb{position:absolute; z-index:30; left:0; right:0; top:0; height:54px; color:#000}
.scr.dark .sb{color:#fff}
.sb-t{position:absolute; left:0; top:17px; width:150px; text-align:center; font:600 17px/22px var(--inter); letter-spacing:-.2px}
.sb-g{position:absolute; right:0; top:20px; width:150px; display:flex; align-items:center; justify-content:center; gap:6px}
.sb-g svg{fill:currentColor; display:block}
.sb-bat{position:relative; width:26px; height:13px; border-radius:4px; border:1px solid rgba(0,0,0,.38); padding:1.5px}
.scr.dark .sb-bat{border-color:rgba(255,255,255,.5)}
.sb-bat i{display:block; width:78%; height:100%; border-radius:2px; background:currentColor}
.sb-bat::after{content:""; position:absolute; right:-4px; top:3.5px; width:2px; height:4px; border-radius:0 1px 1px 0; background:currentColor; opacity:.45}

/* shared type */
.iph .lbl{font:600 11px/16px var(--inter); letter-spacing:.66px; text-transform:uppercase}
.iph .badge{display:inline-flex; align-items:center; flex:none; padding:1px 7px; border-radius:4px; background:#e6f3f7; border:1px solid #99cfdf; color:#044a67; font:500 12px/18px var(--inter); white-space:nowrap}

/* ---- Home "Today" (features/home/home-screen.tsx) ---- */
.home{position:absolute; inset:0; padding:79px 16px 0; background:#f8fafc; transition:transform .45s cubic-bezier(.32,.72,0,1), filter .45s ease}
.home.pushed{transform:translateX(-30%); filter:brightness(.94)}
.h-kick{margin:0; font:400 14px/20px var(--inter); letter-spacing:1px; text-transform:uppercase; color:#334155}
.h-title{margin:6px 0 0; font:400 48px/44px var(--bebas); letter-spacing:-2px; color:#056187}
.h-rule{margin:8px 0 0; border:0; height:1px; background:#e2e8f0}
.ws{margin-top:8px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); height:81px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(10,13,18,.05)}
.ws-c{display:flex; flex-direction:column; align-items:center; padding-top:12px; gap:8px}
.ws-c + .ws-c{border-left:1px solid #e2e8f0}
.ws-c b{font:400 24px/25px var(--bebas); color:#64748b}
.ws-c i{font:normal 600 12px/18px var(--inter); color:#334155; width:24px; height:24px; border-radius:12px; display:flex; align-items:center; justify-content:center}
.ws-c.sel i{background:#056187; color:#fff}
.jc{margin-top:24px; display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:16px}
.jc-x{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.jc-x .lbl{color:#475569}
.jc-x b{font:600 16px/24px var(--inter); color:#0f172a}
.jc-x > span:last-child{font:400 14px/20px var(--inter); color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.jc-ch{flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; color:#056187; padding:0 8px}
.h-tools{margin-top:24px; display:flex; gap:12px}
.h-btn{flex:1; min-width:0; height:56px; display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; border:1px solid #cbd5e1; border-radius:4px; font:600 16px/24px var(--inter); color:#334155; white-space:nowrap}
.ow-h{margin-top:34px; display:flex; align-items:center; gap:12px}
.ow-sa{flex:none; display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 12px; border:1px solid #056187; border-radius:6px; color:#056187; font:400 14px/20px var(--inter)}
.ow-bar{flex:1; height:6px; border-radius:3px; background:#e2e8f0; overflow:hidden}
.ow-bar i{display:block; width:33.3%; height:100%; border-radius:3px; background:#056187}
.ow-card{margin-top:12px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:16px; box-shadow:0 1px 2px rgba(10,13,18,.05)}
.ow-r{position:relative; display:flex; align-items:flex-start; gap:16px; padding-bottom:24px}
.ow-r.last{padding-bottom:0}
.ow-r:not(.last)::before{content:""; position:absolute; left:11px; top:28px; bottom:4px; width:2px; background:#e2e8f0}
.ow-r.done::before{background:#0a7580}
.ow-m{flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid #e2e8f0; background:#fff; display:flex; align-items:center; justify-content:center}
.ow-m i{width:8px; height:8px; border-radius:50%; background:#cbd5e1}
.ow-r.done .ow-m{border:0; background:#0a7580; color:#fff}
.ow-x{flex:1; min-width:0; display:flex; flex-direction:column}
.ow-x b{font:600 16px/24px var(--inter); color:#334155}
.ow-r.done .ow-x b{color:#475569}
.ow-x span{font:400 14px/20px var(--inter); color:#475569}
.ow-c{flex:none; color:#056187; margin-top:2px}
/* the tab bar (components/tab-bar.tsx): a floating capsule, the disc in its cradle */
.tb{position:absolute; z-index:10; left:16px; right:16px; bottom:42px; height:78px; display:flex; align-items:center; padding:0 4px;
  background:#fff; border:1px solid #e2e8f0; border-radius:999px; box-shadow:0 1px 2px rgba(10,13,18,.05)}
.tb-i{position:relative; flex:1; height:100%; display:flex; align-items:center; justify-content:center; color:#64748b}
.tb-i.on{color:#044a67}
.tb-i.on::before{content:""; position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:rgba(15,23,42,.08)}
.tb-i.on::after{content:""; position:absolute; left:50%; top:0; width:20px; height:2px; margin-left:-10px; border-radius:1px; background:#056187}
.tb-i .ic{position:relative}
.tb-gap{flex:none; width:84px}

/* ---- the voice disc (features/voice/voice-fab*.tsx) ---- */
.fab{position:absolute; z-index:12; left:50%; top:704px; width:76px; height:76px; margin-left:-38px}
.fab-ring{position:absolute; inset:0; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(10,13,18,.05)}
.fab-disc{
  position:absolute; left:50%; top:6px; width:64px; height:64px; border-radius:32px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#056187; color:#fff; box-shadow:0 3px 6px rgba(10,13,18,.18);
  transform:translateX(-50%);
  transition:width .22s cubic-bezier(.33,1,.68,1), transform .12s cubic-bezier(.33,1,.68,1);
}
.fab.press .fab-disc{transform:translateX(-50%) scale(.94)}
.fab.pill .fab-disc{width:132px}
.fab-cyan{position:absolute; inset:0; background:#00a3e0; opacity:0; transition:opacity .16s linear}
.fab.rec .fab-cyan{opacity:1}
.fab-mic, .fab-spin, .fab-bars{position:relative; display:flex}
.fab-spin, .fab-bars{display:none}
.fab.proc .fab-mic{display:none}
.fab.proc .fab-spin{display:flex; animation:ph-spin 1s linear infinite}
.fab.pill:not(.proc) .fab-bars{display:flex; align-items:center; gap:6px; height:20px}
.fab-bars i{width:3px; height:20px; border-radius:2px; background:#fff; transform:scaleY(.35);
  animation:ph-bar var(--d,.8s) cubic-bezier(.37,0,.63,1) var(--dl,0s) infinite alternate}
.fab-bars i:nth-child(1){--lo:.2; --hi:.55; --d:.74s}
.fab-bars i:nth-child(2){--lo:.3; --hi:.9; --d:.62s; --dl:-.3s}
.fab-bars i:nth-child(3){--lo:.35; --hi:1; --d:.8s; --dl:-.5s}
.fab-bars i:nth-child(4){--lo:.25; --hi:.8; --d:.68s; --dl:-.2s}
.fab-bars i:nth-child(5){--lo:.2; --hi:.5; --d:.9s; --dl:-.6s}
@keyframes ph-spin{to{transform:rotate(360deg)}}
@keyframes ph-bar{from{transform:scaleY(var(--lo,.3))} to{transform:scaleY(var(--hi,.8))}}
/* the first-run hint over the disc */
.fab-hint{position:absolute; left:50%; bottom:calc(100% + 12px); white-space:nowrap;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 16px;
  font:600 14px/20px var(--inter); color:#0f172a; box-shadow:0 6px 16px rgba(10,13,18,.12);
  opacity:0; transform:translate(-50%,6px); transition:opacity .18s cubic-bezier(.33,1,.68,1), transform .18s cubic-bezier(.33,1,.68,1)}
.fab-hint::after{content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px; margin-left:-5px; background:#fff;
  border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; transform:rotate(45deg)}
.fab.hint .fab-hint{opacity:1; transform:translate(-50%,0)}

/* ---- the voice session (features/voice/screen/voice-screen.tsx) ---- */
.vs{position:absolute; inset:0; padding:71px 16px 0; background:#fff}
.s0 .vs{transform:translateX(100%); box-shadow:-10px 0 30px rgba(15,23,42,.1); transition:transform .45s cubic-bezier(.32,.72,0,1)}
.s0 .vs.pushed{transform:none}
.s0 .vs-reply, .s0 .vs-ledger{display:none}
.vs-head{display:flex; align-items:center; gap:8px; height:44px}
.vs-pills{flex:1; min-width:0; display:flex; gap:8px; overflow:hidden}
.vs .pill{flex:none; height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:22px; background:#f1f5f9; color:#334155; font:600 16px/24px var(--inter); white-space:nowrap}
.vs .pill.on{background:#056187; color:#fff}
.vs-ib{flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#475569}
.vs-body{position:absolute; left:16px; right:16px; top:127px; bottom:192px; display:flex; flex-direction:column; justify-content:center}
.vs.top .vs-body{justify-content:flex-start}
.vs-stack{display:flex; flex-direction:column}
.vs-heard{overflow:hidden; transition:height .2s cubic-bezier(.45,0,.55,1)}
.vs-heard p{margin:0; padding-bottom:12px; text-align:center; font:600 20px/28px var(--inter); color:#475569}
.hw{opacity:0}
.hw.on{opacity:1}
.vs-heard.grow .hw:not(.on){display:none}
.vs-heard.out .hw{display:inline-block; opacity:0; transform:translateY(-6px);
  transition:opacity .2s cubic-bezier(.45,0,.55,1) calc(var(--i) * var(--st)), transform .2s cubic-bezier(.45,0,.55,1) calc(var(--i) * var(--st))}
.vs-reply{margin:0 auto; max-width:290px; text-align:center; font:600 16px/24px var(--inter); color:#0f172a;
  transition:font-size .3s cubic-bezier(.33,1,.68,1), line-height .3s cubic-bezier(.33,1,.68,1), color .3s ease}
.vs.top .vs-reply{font-size:14px; line-height:20px; font-weight:400; color:#334155}
.rw{display:inline-block; opacity:0; transform:translateY(10px);
  transition:opacity .42s cubic-bezier(.22,1,.36,1) calc(var(--i) * var(--st)), transform .42s cubic-bezier(.22,1,.36,1) calc(var(--i) * var(--st))}
.rw.on{opacity:1; transform:none}
.vs-ledger{display:flex; flex-direction:column; gap:12px; padding-top:16px}
.vs-foot{position:absolute; left:16px; right:16px; top:652px; padding-top:12px; border-top:1px solid #f1f5f9; text-align:center}
.vs-line{display:block; min-height:20px; font:400 14px/20px var(--inter); color:#475569; opacity:0; transition:opacity .2s ease}
.vs-foot.on .vs-line{opacity:1}
/* a report card (screen/ledger-card.tsx) */
.lc{display:flex; flex-direction:column; padding:12px; border-radius:12px; background:#fff; box-shadow:0 4px 12px rgba(10,13,18,.08);
  transition:background-color .17s cubic-bezier(0,0,.2,1), box-shadow .28s cubic-bezier(.33,1,.68,1)}
.lc-r{display:flex; align-items:center; gap:12px}
/* the card the agent is asking about opens in place (screen/asking-card.tsx,
   ledger-card.tsx cardExpanded): a deeper shadow, the question in the title
   weight, then the short typed kit (inputs/line-text.tsx: 1px #cbd5e1 box,
   radius 4, 16/22 type). Once answered it shuts and the answer
   stays on the card as a filled row (screen/filled-rows.tsx). */
.lc.asking{box-shadow:0 6px 16px rgba(10,13,18,.12)}
/* a fold shuts only once its words have faded (the .12s wait), and opens at once */
.lc-fold{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.33,1,.68,1) .12s, opacity .17s ease}
.lc.asking .lc-ask{transition-delay:0s, 0s}
.lc-fold > div{min-height:0; overflow:hidden}
.lc.asking .lc-ask, .lc.held .lc-held{grid-template-rows:1fr}
.lc-ask-in{display:flex; flex-direction:column; gap:8px; padding-top:12px; opacity:0; transition:opacity .15s cubic-bezier(.33,1,.68,1)}
.lc.asking .lc-ask-in{opacity:1; transition-delay:.08s}
.lc-ask-in b{font:600 16px/24px var(--inter); color:#0f172a}
.lc-in{display:flex; align-items:center; height:72px; padding:0 16px; border:1px solid #cbd5e1; border-radius:4px; background:#fff;
  transition:height .2s cubic-bezier(.33,1,.68,1)}
.lc-in span{font:400 29px/33px var(--inter); color:#0f172a; white-space:nowrap; overflow:hidden; opacity:0; transition:opacity .2s ease}
.lc.answered .lc-in{height:59px}
.lc.answered .lc-in span{opacity:1}
.lc-h{display:flex; align-items:center; gap:6px; min-height:36px; margin-top:6px; padding:4px 6px; color:#475569}
.lc-h span{font:400 14px/20px var(--inter); color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lc.shrink .lc-held{opacity:0}
.lc:not(.in){display:none}
.lc.in{animation:ph-rise .42s cubic-bezier(.22,1,.36,1) both}
.lc-t{flex:none; width:36px; height:36px; border-radius:8px; background:#056187; color:#fff; display:flex; align-items:center; justify-content:center}
.lc-x{flex:1; min-width:0; display:flex; flex-direction:column; transition:opacity .17s cubic-bezier(0,0,.2,1)}
.lc-x b{font:600 16px/24px var(--inter); color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lc-x span{font:400 14px/20px var(--inter); color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lc .badge{transition:opacity .17s ease}
.lc.shrink{background-color:rgba(255,255,255,0); box-shadow:0 4px 12px rgba(10,13,18,0)}
.lc.shrink .lc-x, .lc.shrink .badge{opacity:0}
.lc.gone .lc-t{opacity:0}
.lc.saved .lc-t{background:#0a7580}
.lc.saved .badge{display:none}
.lc-t.fly{position:absolute; z-index:1; margin:0; box-shadow:0 1px 2px rgba(10,13,18,.05)}
@keyframes ph-rise{from{opacity:0; transform:translateY(12px)}}
/* the folder the reports file into (screen/folder-filing-animation.tsx) */
.fd{position:absolute; z-index:14; left:50%; top:372px; width:184px; height:112px; margin-left:-92px; perspective:700px; opacity:0; transition:opacity .2s ease}
.fd.in{opacity:1}
.fd-in{position:absolute; inset:0; transform-origin:50% 100%; transform:translateY(220px) rotateX(14deg) scale(.94); transition:transform .42s cubic-bezier(.05,.7,.1,1)}
.fd.in .fd-in{transform:rotateX(14deg)}
.fd-back{position:absolute; left:0; top:0; z-index:0}
.fd-pk{position:absolute; z-index:2; left:0; top:30px; width:184px; height:82px; border-radius:8px; background:#056187; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 6px 8px rgba(4,74,103,.28)}
.fd-pk::before{content:""; position:absolute; left:8px; right:8px; top:0; height:1px; background:rgba(255,255,255,.18)}
.fd-pk .lbl{max-width:164px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fd-pk .fd-code{opacity:.75}
.fd-ck{display:flex; opacity:0; transform:scale(.6); transition:opacity .12s ease, transform .12s cubic-bezier(.33,1,.68,1)}
.fd.done .fd-ck{opacity:1; transform:none}
/* a glare on the glass that moves as the story scrolls (--gl, 0 to 1) */
.iph-glass{overflow:hidden}
.iph-glass::before{content:""; position:absolute; top:-10%; bottom:-10%; left:-60%; width:60%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 46%,rgba(255,255,255,.035) 62%,rgba(255,255,255,0) 100%);
  transform:translateX(calc(var(--gl, .3) * 330%)) skewX(-8deg)}

/* ---------- 3b. what only the guide draws ----------
   Same app tokens as above (apps/mobile theme on Develop). Each block names
   the app file it rebuilds. */

/* the voice screen slides in over Home (lessons 1, 2), and back out */
.slide .vs{transform:translateX(100%); box-shadow:-10px 0 30px rgba(15,23,42,.1); transition:transform .45s cubic-bezier(.32,.72,0,1)}
.slide .vs.pushed{transform:none}
.slide .home.back{transform:none; filter:none}
.vs-stack{transition:opacity .2s ease}
.vs-stack.fade{opacity:0}
.vs-heard.grow{height:auto}
/* the disc leaves its cradle on the voice screen; it is not drawn on the memory screen */
.fab-ring, .fab-hint{transition:opacity .2s ease}
.fab.bare .fab-ring{opacity:0}
.fab{transition:opacity .2s ease}
.fab.gone{opacity:0}
/* a draft card wears no badge; FILING shows only while the server has it (surface-copy.ts) */
.lc:not(.filing) .badge{display:none}
.lc-x span{transition:opacity .2s ease}
/* Home's Do all forms and New, pressed (home-screen.tsx: bgPressed) */
.ow-sa, .h-btn{transition:background-color .12s ease}
.ow-sa.press, .h-btn.press{background:rgba(15,23,42,.08)}
.ow-sa.gone{display:none}
.ow-bar i{width:100%; transform-origin:0 50%; transition:transform .45s cubic-bezier(.33,1,.68,1)}
.ow-m{transition:background-color .2s ease}
/* Home scrolls to Filed today (lesson 3); the status bar keeps a solid ground */
.h-scroll{transition:transform .55s cubic-bezier(.65,0,.35,1)}
.sb.solid{background:#f8fafc; height:50px}
.home .ow-card{margin-bottom:0}

/* Filed today (features/home/filed-today-section.tsx) */
.ft{margin-top:32px}
.ft-h{font:600 16px/24px var(--inter); color:#0f172a}
.ft-card{margin-top:12px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 1px 2px rgba(10,13,18,.05); overflow:hidden}
.ft-r{display:flex; flex-direction:column; padding:12px 16px}
.ft-r + .ft-r{border-top:1px solid #f1f5f9}
.ft-r .lbl{color:#475569}
.ft-r b{font:600 16px/24px var(--inter); color:#0f172a}
.ft-r > span:last-child{font:400 14px/20px var(--inter); color:#475569}
.ft-r.new{display:none}
.ft-r.new.in{display:flex; animation:ph-rise .42s cubic-bezier(.22,1,.36,1) both}

/* the finger: where the reader's hand taps (guide only, not app UI). A dark
   teal fingertip ringed in white, readable on light and teal screens alike.
   It glides (quart in-out), presses in, and a white ring spreads and fades
   (expo out); nothing overshoots. */
.fg{position:absolute; z-index:60; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0;
  transition:transform .42s cubic-bezier(.76,0,.24,1), opacity .22s cubic-bezier(.33,1,.68,1)}
.fg.on{opacity:1}
.fg.jump{transition:none}
.fg-dot{position:absolute; left:-27px; top:-27px; width:54px; height:54px; border-radius:50%;
  background:rgba(3,71,106,.6); box-shadow:0 0 0 3px #fff, 0 0 0 4.5px rgba(15,23,42,.3), 0 8px 18px rgba(15,23,42,.3);
  transition:transform .14s cubic-bezier(.33,1,.68,1), background-color .14s ease}
.fg.down .fg-dot{transform:scale(.84); background:rgba(3,71,106,.8)}
.fg-rip{position:absolute; left:-27px; top:-27px; width:54px; height:54px; border-radius:50%; border:3px solid #fff;
  box-shadow:0 0 0 1.5px rgba(3,71,106,.55), inset 0 0 0 1.5px rgba(3,71,106,.55); opacity:0}
.fg.rip .fg-rip{animation:fg-rip .62s cubic-bezier(.16,1,.3,1)}
@keyframes fg-rip{from{opacity:1; transform:scale(.85)} to{opacity:0; transform:scale(2.1)}}
/* a hold: a ring around the fingertip fills for as long as it is held */
.fg-hold{position:absolute; left:-44px; top:-44px; width:88px; height:88px; overflow:visible; transform:rotate(-90deg); opacity:0; transition:opacity .16s ease}
.fg.hold .fg-hold{opacity:1}
.fg-hold circle{fill:none}
.fg-tr{stroke:rgba(15,23,42,.42); stroke-width:8}
.fg-pr{stroke:#fff; stroke-width:4.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100}
.fg.hold.live .fg-pr{animation:fg-fill var(--hd,1s) linear forwards}
.fg.mid .fg-pr{stroke-dashoffset:38}
@keyframes fg-fill{to{stroke-dashoffset:0}}
/* the control under the finger glows, briefly for a tap, all through a hold */
.tg-tap{outline:3px solid rgba(5,97,135,.9); outline-offset:3px; animation:tg-glow .9s cubic-bezier(.33,1,.68,1) both}
@keyframes tg-glow{0%{outline-color:rgba(5,97,135,0)} 18%{outline-color:rgba(5,97,135,.9)} 100%{outline-color:rgba(5,97,135,0)}}
.tg-hold{outline:3px solid rgba(5,97,135,.9); outline-offset:3px}
.fs-pages .tg-tap{outline-offset:-4px}
/* already on screen when a step starts: no second entrance */
.lc.in.settled, .ft-r.new.in.settled{animation:none}

/* sheets: the scrim and a bottom drawer (components/sheet-host.tsx, capture-chooser.tsx) */
.scrim{position:absolute; inset:0; z-index:50; background:rgba(15,23,42,.42); opacity:0; pointer-events:none; transition:opacity .18s ease}
.scrim.on{opacity:1}
.sheet{position:absolute; z-index:51; left:0; right:0; bottom:0; padding:12px 20px 40px; background:#fff; border-radius:16px 16px 0 0;
  box-shadow:0 -1px 2px rgba(10,13,18,.05); transform:translateY(105%); transition:transform .28s cubic-bezier(.33,1,.68,1)}
.sheet.on{transform:none}
.sheet.lift{z-index:53}
.sh-grab{width:36px; height:4px; margin:0 auto 12px; border-radius:2px; background:#cbd5e1}
.sh-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sh-title{margin:0; font:400 30px/30px var(--bebas); color:#0f172a; text-transform:uppercase}
.sh-x{flex:none; width:44px; height:44px; margin-right:-8px; display:flex; align-items:center; justify-content:center; color:#475569}
.sh-sub{margin:4px 0 12px; font:400 14px/20px var(--inter); color:#475569}
/* chooser and choice rows (capture-chooser.tsx CaptureRow, choice-sheet.tsx ChoiceRow) */
.cc-list{display:flex; flex-direction:column; gap:10px}
.cc-row{display:flex; align-items:center; gap:12px; min-height:56px; padding:0 12px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; transition:background-color .12s ease}
.cc-row.press{background:rgba(15,23,42,.08)}
.cc-ic{flex:none; width:36px; height:36px; border-radius:8px; background:#e6f3f7; color:#056187; display:flex; align-items:center; justify-content:center}
.cc-row b{flex:1; min-width:0; font:600 16px/24px var(--inter); color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cc-row > .ic:last-child{color:#056187}
.choice .cc-list{margin-top:16px}

/* the form (form-runner/form-sheet.tsx, field-styles.ts): pages, then Back / Next / Save */
.fs{padding-bottom:40px}
.fs-pages{position:relative; height:316px; margin-top:16px; overflow:hidden}
.fs-page{position:absolute; inset:0; display:flex; flex-direction:column; gap:20px; transition:transform .3s cubic-bezier(.33,1,.68,1), opacity .22s ease}
.fs-page.p2{transform:translateX(100%); opacity:0}
.fs.pg2 .p1{transform:translateX(-30%); opacity:0}
.fs.pg2 .p2{transform:none; opacity:1}
.fq{display:flex; flex-direction:column; gap:8px}
.fq-l{font:600 14px/20px var(--inter); color:#334155}
.fq-l i{font-style:normal; font-weight:400; color:#64748b}
.fq-box{position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 16px; border:1px solid #cbd5e1; border-radius:4px; background:#fff;
  font:400 16px/22px var(--inter); color:#0f172a}
.fq-box.tall{min-height:88px; align-items:flex-start}
.fq-box.focus{border:2px solid #0879a3; padding:11px 15px}
.fq-v{flex:1; min-width:0; white-space:nowrap; overflow:hidden}
.fq-v:empty::before{content:attr(data-ph); color:#64748b}
.fq-box.focus .fq-v::after{content:""; display:inline-block; width:2px; height:20px; margin-left:1px; vertical-align:-4px; background:#0879a3; animation:g-caret 1s steps(1) infinite}
.fq-box.focus .fq-v:empty::before{content:""}
@keyframes g-caret{50%{opacity:0}}
.fq-box > .ic{color:#475569}
.seg{display:flex; gap:8px}
.seg span{flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; gap:4px; padding:0 8px; border:1px solid #e2e8f0; border-radius:4px;
  font:400 14px/20px var(--inter); color:#334155; background:#fff; transition:background-color .15s ease, border-color .15s ease, color .15s ease}
.seg span .ic{display:none}
.seg span.on{background:#e6f3f7; border-color:#056187; color:#056187}
.seg span.on .ic{display:block}
.fs-foot{display:flex; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid #f1f5f9}
.fs-side{flex:1; min-width:0; display:flex}
.gbtn{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; border-radius:4px; font:600 16px/24px var(--inter); transition:background-color .12s ease, opacity .2s ease}
.gbtn.pri{background:#056187; color:#fff}
.gbtn.pri.press{background:#044a67}
.gbtn.sec{background:#fff; color:#334155; border:1px solid #cbd5e1}
.gbtn.md{min-height:44px; flex:none; padding:0 16px}
.gbtn .spin{display:none}
.gbtn.busy .spin{display:flex; animation:ph-spin 1s linear infinite}
.gbtn.busy .gl{display:none}
.fs-b1, .fs-save{display:none}
.fs.pg2 .fs-b1, .fs.pg2 .fs-save{display:flex}
.fs.pg2 .fs-next{display:none}

/* What Diggit remembers (features/voice/memory-list-screen.tsx) */
.mem{position:absolute; inset:0; z-index:20; padding:62px 16px 0; background:#f1f5f9; overflow:hidden;
  transform:translateX(100%); box-shadow:-10px 0 30px rgba(15,23,42,.1); transition:transform .45s cubic-bezier(.32,.72,0,1)}
.mem.in{transform:none}
.mem::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(5,97,135,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(5,97,135,.05) 1px,transparent 1px); background-size:24px 24px}
.mem > *{position:relative}
.mem-back{width:44px; height:44px; margin-left:-12px; display:flex; align-items:center; justify-content:center; color:#475569}
.mem-t{margin:4px 0 12px; font:600 11px/16px var(--inter); letter-spacing:.66px; text-transform:uppercase; color:#475569}
.mcard{background:#fff; border-radius:8px; padding:16px; box-shadow:0 1px 2px rgba(10,13,18,.05); display:flex; flex-direction:column; gap:12px}
.mem-list{display:flex; flex-direction:column; gap:12px}
.m-in{min-height:72px; padding:12px; border:1px solid #e2e8f0; border-radius:8px; font:400 14px/20px var(--inter); color:#475569}
.m-lv{display:flex; gap:8px}
.m-lv span{flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid #e2e8f0; border-radius:4px; font:400 14px/20px var(--inter); color:#334155}
.m-lv span.on{background:#e6f3f7; border-color:#056187; color:#056187}
.m-save{min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:4px; background:#056187; color:#fff; font:600 16px/24px var(--inter); opacity:.45}
.m-count{margin:0; font:400 14px/20px var(--inter); color:#475569}
.m-fact{display:grid; grid-template-rows:1fr; transition:grid-template-rows .3s cubic-bezier(.33,1,.68,1) .1s, opacity .2s ease}
.m-fact > div{min-height:0; overflow:hidden}
.m-fact.gone{grid-template-rows:0fr; opacity:0}
.m-fact p{margin:0; font:400 14px/20px var(--inter); color:#0f172a}
.m-meta{display:flex; align-items:center; gap:8px}
.m-badge{display:inline-flex; align-items:center; padding:1px 7px; border-radius:4px; background:#f1f5f9; border:1px solid #e2e8f0; color:#334155; font:500 12px/18px var(--inter)}
.m-meta .lbl{color:#475569}
.m-del{margin-left:auto; width:44px; height:44px; margin-right:-10px; display:flex; align-items:center; justify-content:center; color:#dc2626; border-radius:50%; transition:background-color .12s ease}
.m-del.press{background:rgba(15,23,42,.08)}
.m-note{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s cubic-bezier(.33,1,.68,1), opacity .2s ease .1s}
.m-note > div{min-height:0; overflow:hidden}
.m-note.in{grid-template-rows:1fr; opacity:1}
.m-note .mcard{flex-direction:row; align-items:center; gap:8px}
.m-nt{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.m-nt b{font:600 16px/24px var(--inter); color:#0f172a}
.m-nt span{font:400 14px/20px var(--inter); color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- 4. presentation mode (a widescreen TV, assets/present.js) ----------
   html.present: each slide fills the screen; type and phone sized from the
   screen height (vh), so a 4K TV at 100% looks like 1080p. Everything sits
   in one centred frame 130vh wide (owner: nothing drifts to the edges).
   The small controls scale with --pz (screen height / 1080). Shared by
   /guide/ and /guide/whats-new/ (both load this file). */
.pz-hint{position:fixed; z-index:70; left:50%; bottom:2vh; transform:translateX(-50%); white-space:nowrap; display:flex; align-items:center; gap:2.4vh; margin:0; padding:1vh 1.8vh;
  border:1px solid var(--border); border-radius:999px; background:rgba(248,250,252,.92);
  font:500 1.5vh/1 var(--inter); color:var(--muted-2)}
.pz-hint[hidden]{display:none}
.pz-hint span{display:inline-flex; align-items:center; gap:.5vh}
.pz-hint kbd{display:inline-flex; align-items:center; justify-content:center; min-width:2.6vh; height:2.6vh; padding:0 .5vh;
  border:1px solid var(--border); border-radius:4px; background:var(--card); font:600 1.4vh/1 var(--inter); color:var(--ink-2)}
.pz-hint span kbd:last-of-type{margin-right:.4vh}
.pz-hint a{font-weight:600; color:var(--teal); text-decoration:none}
.pz-hint a:hover{color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px}

html.present .gh{zoom:var(--pz); padding:0 max(16px, calc((50vw - 65vh) / var(--pz)))}
html.present .intro{box-sizing:border-box; min-height:calc(100vh - 61px * var(--pz)); max-width:130vh; display:flex; flex-direction:column; justify-content:center; padding:6vh 4vh}
html.present .intro h1{font-size:15vh}
html.present .intro-lead{margin-top:2vh; max-width:110vh; font-size:3vh}
html.present .wn-cta, html.present .toc a{zoom:calc(var(--pz) * 1.35)}
html.present .toc{max-width:none}

html.present .ch{box-sizing:border-box; min-height:100vh; max-width:130vh; padding:4vh 0; column-gap:7vh; align-content:center;
  grid-template-columns:auto minmax(0,80vh); justify-content:center;
  grid-template-areas:"stage ." "stage head" "stage ctl" "stage body" "stage ."; grid-template-rows:1fr auto auto auto 1fr}
html.present .ch-stage{position:static}
html.present .ch h2{font-size:9vh}
html.present .ch-lead{margin-top:2vh; max-width:none; font-size:2.8vh}
html.present .ch-ctl{max-width:none; margin-top:5vh}
html.present .sc-texts li{font-size:3.8vh}
html.present .sc-top, html.present .sc-nav, html.present .ch-more-btn{zoom:calc(var(--pz) * 1.35)}
html.present .ch-sub{font-size:2vh; line-height:1.4}
html.present .st-x{font-size:2.2vh}
html.present .ch-tip, html.present .ch-more li{font-size:2vh}