/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved.
   Served for running in your browser; not licensed for copying or reuse.

   MIRACUE DESIGN SYSTEM v1.0 - Paper Stock.
   The single source for every Miracue page. The spec that governs this file
   is docs/miracue-design-system.md; read it before changing anything here.

   The rule for adding CSS: if it could appear on a second page, it belongs
   in this file. If you are about to paste a token block into a page, stop.
   Four separate looks is exactly how this file came to be needed.

   Light only, by Luke's decision 2026-08-13. The prompter, the landing's
   closing chapter and the footer are dark CHAPTERS on a light page, never a
   register that follows the system theme. */

:root{
  /* Declare the scheme, or a browser's automatic dark mode inverts the page
     algorithmically and turns the paper stock into mud. This is the actual
     fix for "it goes dark even though the CSS is light". */
  color-scheme: light;

  /* ---- stock and ink ---- */
  --page:#eae6dc; --sheet:#fdfbf7; --sheet-2:#f7f4ec; --card:#fdfbf7;
  --ink:#221f1b; --ink-2:#4a4640; --faint:#8b877f; --edge:#e0dbcf;

  /* ---- the clickable sheet: a page you pick up, not another panel ----
     --paper-faint is DARKER than --faint on purpose. Small mono text at
     #8b877f on #f7f4ec measures 3.3:1, below AA. This measures 4.83:1. */
  --paper:#f7f4ec; --paper-ink:#221f1b; --paper-ink-2:#4a4640;
  --paper-faint:#6f6b62; --paper-edge:#ded9cd;

  /* ---- the darkroom: prompter, closing chapter, footer ---- */
  --d-bg:#15140f; --d-bg-2:#1e1c17;
  --d-s1:rgba(255,255,255,.035); --d-s2:rgba(255,255,255,.06);
  --d-hair:#2e2b23; --d-hair-2:rgba(236,231,219,.22);
  --d-fg:#ece7db; --d-fg-2:#b6b0a2; --d-muted:#807a6d;

  /* ---- the one chromatic colour in the system ---- */
  --dot:#6ab8f7;

  /* ---- surfaces and motion ---- */
  --nav-bg:rgba(234,230,220,.82); --btn-fg:#fdfbf7;
  --lift:0 1px 2px rgba(34,31,27,.05), 0 8px 24px rgba(34,31,27,.07);
  --lift-in:inset 0 1px 0 rgba(255,255,255,.55);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* ------------------------------------------------------------- reset ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Geist',-apple-system,system-ui,sans-serif;
  background:var(--page); color:var(--ink);
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Grain: inline SVG, never an image file, so the page still makes no
   third-party request. Fixed, so it reads as stock and not as a texture
   scrolling behind the words. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  mix-blend-mode:multiply;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ layout ---- */
.wrap{max-width:1020px;margin:0 auto;padding:0 24px}
.wrap-prose{max-width:720px;margin:0 auto;padding:0 24px}
section{padding:96px 0}

/* --------------------------------------------------------------- type --- */
h1{font-size:clamp(31px,5.4vw,46px);font-weight:600;letter-spacing:-.03em;
  line-height:1.1;margin:20px 0 18px}
h2{font-size:23px;font-weight:600;letter-spacing:-.022em;line-height:1.25;margin:46px 0 14px}
h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:26px 0 8px}
p{margin:0 0 17px;color:var(--ink-2);max-width:66ch}
p strong,li strong{color:var(--ink);font-weight:500}
ul,ol{margin:0 0 17px 20px;max-width:66ch}
li{color:var(--ink-2);padding:3px 0}
/* The underline is the ONLY mark that says "link", so it is a UI component and
   owes 3:1. `--faint` measures 2.87:1 on the page stock and failed it, which is
   the same reason `--paper-faint` was created for small text; this reuses that
   value at 4.26:1. Do not "tidy" it back to --faint. The dark surfaces set
   their own link colours, so this rule only governs light stock. */
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--paper-faint)}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,summary:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.lede,.standfirst{font-size:18px;color:var(--ink-2);line-height:1.55;max-width:56ch;font-weight:300}
.wordmark{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:-.01em}
.wm-dot{color:var(--dot)}
.stamp{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--faint);
  margin-top:46px;padding-top:20px;border-top:1px solid var(--edge)}

/* ------------------------------------------------------------ buttons --- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;
  font-weight:500;font-size:15px;padding:14px 28px;text-decoration:none;
  min-height:48px;border:0;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn-light{background:var(--ink);color:var(--btn-fg)}
.btn-ghost-d{background:var(--sheet);color:var(--ink);box-shadow:var(--lift-in),var(--lift)}

/* The Chrome Web Store badge. Google's own asset and Google's own wording:
   resize it, never recolour or restyle it, keep its ratio (496x150) and its
   clear space, and always link it to our listing. It is never the page's
   primary element - the headline is. */
.cws-badge{display:inline-block;line-height:0;text-decoration:none;border-radius:6px}
.cws-badge img{width:208px;height:auto;display:block}
.cws-badge:hover{transform:translateY(-1px)}
.cws-badge{transition:transform .25s var(--ease)}
@media (max-width:640px){.cws-badge img{width:184px}}

/* --------------------------------------------------------------- nav ---- */
/* Every page carries this, with aria-current on its own link. Before it the
   site was one-way: a visitor on the help page had no way back but the
   browser button. The brand block is a link home, always. */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--edge)}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:62px;
  padding-top:9px;padding-bottom:9px}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);margin-right:auto;border-radius:8px;padding:4px 6px 4px 0}
.nav-brand:hover{text-decoration:none}
.nav-brand img{width:32px;height:32px;border-radius:8px}
.nav-brand b{font-weight:600;font-size:16.5px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:400;
  padding:10px 12px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center;
  transition:color .2s var(--ease),background .2s var(--ease)}
.nav-links a:hover{color:var(--ink);background:var(--sheet-2)}
/* the active page carries a 2px ink underline (board 3h) */
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500;background:transparent;border-radius:0;box-shadow:inset 0 -2px 0 var(--ink)}
.nav-login{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:400;padding:8px 10px;border-radius:8px;white-space:nowrap;margin-left:auto}
.nav-login:hover{color:var(--ink);background:var(--sheet-2);text-decoration:none}
.nav .btn{padding:10px 20px;font-size:14px;min-height:44px}
@media (max-width:860px){
  .nav .wrap{flex-wrap:wrap;gap:10px 8px}
  .nav-links{order:3;width:100%;overflow-x:auto;gap:2px;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap;padding:8px 11px;min-height:40px}
  /* Brand, Log in and the button share the FIRST row: tighten both actions
     so they fit beside the brand on a 360px screen instead of wrapping the
     button onto a lonely second line (Luke, mobile, 2026-08-21). */
  .nav-login{order:1;padding:8px 8px;font-size:14px}
  .nav .btn{order:2;padding:9px 14px;font-size:13.5px;min-height:40px}
}

/* ------------------------------------------------------- page header ---- */
/* Eyebrow, h1, standfirst. No icon block: the nav already carries the mark,
   and the old document pages repeated it at 52px directly underneath. */
.page-head{padding:52px 0 30px}
.page-head .eyebrow{display:block;margin-bottom:4px}
.page-head h1{max-width:20ch}
.page-head .btn{margin-top:26px}
/* the document template's dated stamp rule: eyebrow, h1, standfirst, then this (board 3h) */
.page-head .doc-stamp{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint);margin:20px 0 0;padding-bottom:22px;border-bottom:1px solid var(--edge);max-width:none}
.page-head + section,.page-head + main > section:first-child{padding-top:34px}
.byline{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-top:26px;padding-top:18px;
  border-top:1px solid var(--edge);display:flex;flex-wrap:wrap;gap:6px 18px}

/* --------------------------------------------------- section heading ---- */
/* A chapter title, not a prose subheading: the two are different jobs and
   used to be the same size by accident. */
.section-head{margin-bottom:26px;max-width:640px}
.section-head .eyebrow{display:block;margin-bottom:11px}
.section-head h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.032em;line-height:1.1;margin:0}
.section-head .note{color:var(--ink-2);margin:10px 0 0;font-size:16px;line-height:1.62}

/* -------------------------------------------------------------- card ---- */
/* A border says diagram. A shadow says object. Everything here is an object. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--card);border-radius:6px;padding:24px 28px 26px;
  box-shadow:var(--lift-in),var(--lift)}
.card h3,.card > b{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;display:block}
.card p{color:var(--ink-2);font-size:15px;line-height:1.62;margin:0}
.card p + p{margin-top:10px}
/* thin line, never filled, never coloured: an icon takes the ink like
   everything else on the page */
.card .ic{display:block;width:22px;height:22px;margin-bottom:14px;color:var(--ink)}
.card .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ----------------------------------------------------------- callout ---- */
.callout{background:var(--card);border-radius:6px;padding:22px 26px;margin:26px 0;
  box-shadow:var(--lift-in),var(--lift)}
.callout p{font-size:15.5px;line-height:1.62}
.callout p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:step}
.step{background:var(--card);border-radius:6px;padding:26px 28px;box-shadow:var(--lift-in),var(--lift)}
.step b{display:block;font-weight:600;font-size:17px;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:15px;line-height:1.62;margin:0}
.step::before{counter-increment:step;content:counter(step);display:block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--faint);margin-bottom:16px}

/* ------------------------------------------------------------- sheet ---- */
/* Something you pick up. The spine gives it a bound edge, so it reads as a
   page rather than as one more panel among panels. */
.sheet,.note-card{position:relative;background:var(--paper);color:var(--paper-ink);
  border-radius:2px 8px 8px 2px;padding:24px 28px 22px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(34,31,27,.10),0 10px 26px rgba(34,31,27,.16)}
.sheet::before,.note-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:2px 0 0 2px;background:var(--paper-ink);opacity:.85}
.sheet p,.note-card p{color:var(--paper-ink-2)}
.sheet p:last-child{margin-bottom:0}
.sheet a{color:var(--paper-ink);text-decoration-color:var(--paper-faint)}
.sheet a:hover{text-decoration-color:var(--paper-ink)}
.sheet .eyebrow,.note-card .kicker{display:block;margin-bottom:11px;color:var(--paper-faint);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* the clickable form of it */
a.note-card,a.sheet{display:block;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
a.note-card:hover,a.sheet:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 5px rgba(34,31,27,.12),0 16px 36px rgba(34,31,27,.2)}
.note-card h3,.note-card h2{font-size:20px;font-weight:600;letter-spacing:-.024em;
  margin:0 0 9px;color:var(--paper-ink);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--paper-edge)}
a.note-card:hover h3,a.note-card:hover h2{text-decoration-color:var(--paper-ink)}
.note-card p{font-size:15px;line-height:1.62;margin:0}
/* it has to say what happens when you click it */
.note-card .read,.sheet .read{display:flex;align-items:center;gap:8px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--paper-edge);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-ink)}
.note-card .read svg,.sheet .read svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:1.8;transition:transform .25s var(--ease)}
a.note-card:hover .read svg,a.sheet:hover .read svg{transform:translateX(4px)}
.notes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

/* --------------------------------------------------------------- faq ---- */
.faq{max-width:760px}
.faq details{background:var(--card);border-radius:6px;margin-bottom:10px;padding:0 24px;
  box-shadow:var(--lift-in),var(--lift)}
.faq summary{font-weight:500;font-size:15.5px;padding:18px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:21px;color:var(--faint)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--ink-2);font-size:15px;padding-bottom:18px;line-height:1.62;margin:0}
.faq details p + p{padding-top:0;margin-top:-8px}

/* ------------------------------------------------------------ figure ---- */
/* Line art, inheriting the ink, so a drawing is a zero-request drawing. */
.fig{margin:36px 0 34px}
.fig svg{display:block;width:100%;height:auto;color:var(--ink-2)}
.fig figcaption,.album figcaption,.photo figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.55;letter-spacing:.04em;
  color:var(--faint);text-align:center;margin-top:16px;max-width:66ch;
  margin-left:auto;margin-right:auto}
.album{margin:36px 0 34px}
.photo{margin:34px 0 32px}
.album .shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.album .shots img:first-child{grid-column:1 / -1}
.album img,.photo img{display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:0 1px 2px rgba(34,31,27,.10),0 8px 20px rgba(34,31,27,.10)}
@media (max-width:620px){.album .shots{grid-template-columns:1fr;gap:14px}}

/* ----------------------------------------------------------- closing ---- */
/* A dark chapter on a light page, the way a page changes stock between
   sections. Not a theme. */
.closing{background:var(--d-bg);color:var(--d-fg);padding:88px 0;text-align:center}
.closing h2{color:var(--d-fg)}
.closing p{color:var(--d-fg-2);max-width:520px;margin:14px auto 30px}
.closing .btn-light{background:var(--d-fg);color:var(--d-bg)}

/* ------------------------------------------------------------ footer ---- */
/* The same footer on every page, the app included. Three columns, so every
   route through the site is one click from anywhere. */
.site-foot{background:var(--d-bg);border-top:1px solid var(--d-hair);
  padding:52px 0 44px;color:var(--d-muted);font-size:14px;margin-top:0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px 24px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d-muted);margin-bottom:12px}
.site-foot a{color:var(--d-fg-2);text-decoration:none;padding:6px 0;display:inline-block;font-size:14.5px}
.site-foot a:hover{color:var(--d-fg);text-decoration:underline;text-underline-offset:3px}
.site-foot a:focus-visible{outline:2px solid var(--d-fg);outline-offset:3px}
.foot-base{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:10px 20px;margin-top:40px;padding-top:22px;border-top:1px solid var(--d-hair)}
.foot-base span{font-size:13px}
.foot-base .wordmark{color:var(--d-fg);font-size:14px}

/* -------------------------------------------------------- responsive ---- */
@media (max-width:640px){
  body{font-size:16px}
  section{padding:52px 0}
  .page-head{padding:40px 0 6px}
  h2{font-size:21px;margin:38px 0 12px}
  .card,.step{padding:22px 22px 24px}
  .sheet,.note-card{padding:22px 22px 20px 24px}
  .site-foot{padding:40px 0 40px}
}

/* ------------------------------------------------------- proof strip ---- */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.proof-grid figure{margin:0}
.proof-grid img{width:100%;height:auto;border-radius:14px;box-shadow:var(--lift)}
.proof-grid figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:10px}
@media (max-width:700px){
  .proof-grid{grid-template-columns:1fr;gap:16px}
}

/* ------------------------------------------------------------- film ---- */
/* ⭐ A film on this site loads NOTHING from YouTube until it is pressed.
   The poster is ours and served from our own domain, so the privacy page's
   promise - that opening a page does not announce you to anyone else -
   stays literally true for anyone who does not press play. On press,
   js/video.js swaps this button for a youtube-nocookie iframe. The two
   MEDIA-TODO notes in /notes/ asked for exactly this pattern.
   It is a <button>, not a div, so it is keyboard-operable. */
.vid{margin:0}
.vid-frame{position:relative;display:block;width:100%;padding:0;border:0;
  border-radius:14px;overflow:hidden;line-height:0;background:var(--sheet);
  box-shadow:var(--lift-in),var(--lift);cursor:pointer;
  transition:transform .25s var(--ease)}
.vid-frame:hover{transform:translateY(-1px)}
.vid-frame img,.vid-frame iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.vid-frame.is-playing{cursor:default}
.vid-frame.is-playing:hover{transform:none}
/* The play control is an icon, so it is round, per the buttons rule. It is
   the LIGHT disc the prompter's own rail uses, not a dark one: a poster is
   photography we do not control, and a dark disc vanishes into the dark half
   of it. Light on a shadow reads on any frame. */
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(253,251,247,.94);
  box-shadow:0 2px 16px rgba(0,0,0,.30);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.vid-frame:hover .vid-play{background:var(--sheet);transform:translate(-50%,-50%) scale(1.05)}
.vid-play svg{width:25px;height:25px;margin-left:4px;fill:var(--ink);stroke:none}
.vid-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px 18px;
  flex-wrap:wrap;margin-top:13px;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint)}
.vid-note{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--paper-faint)}
@media (max-width:640px){
  .vid-play{width:60px;height:60px}
  .vid-play svg{width:21px;height:21px}
}

/* Things you press are never text you select, on any phone. */
.btn,.text-link,.nav-links a,.nav-login,.help-rail a,.note-card,.founder-sheet,details summary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}

/* --------------------------------------------------- help contents ---- */
.help-toc{display:flex;flex-wrap:wrap;gap:8px}
.help-toc a{font-size:13.5px;color:var(--ink-2);text-decoration:none;
  padding:7px 12px;border:1px solid var(--edge);border-radius:9999px;background:var(--sheet);white-space:nowrap}
.help-toc a:hover{color:var(--ink);background:var(--sheet-2);text-decoration:none}

/* --------------------------------------------- the mobile breathing pass ---- */
@media (max-width:640px){
  section{padding:44px 0}
  .feat{gap:26px}
  .section-head .note{font-size:15px}
  /* the interface mockups reflow smaller instead of towering */
  .shot .ui{padding:14px;font-size:12.5px}
  .ui-cards .face{font-size:12px}
  .hero-ctas{gap:10px}
}

/* --------------------------------------------------- product mockups ---- */
/* The app drawn in its own tokens, shared by the landing, pricing and
   how-it-works pages. Promoted here when the third page needed it, per the
   rule in section 3 of the design system. */
  /* A screen sits on the page as its own object: one frame for every mockup. */
  .shot{border-radius:9px;overflow:hidden;
    box-shadow:0 2px 6px rgba(34,31,27,.09),0 20px 46px rgba(34,31,27,.15)}

  /* Library mockup. These are the APP'S OWN paper tokens, lifted from
     css/app.css `body.paper`, not the page's: a screen should look like the
     screen, not restyle itself to whichever register the visitor is in. */
  .ui,.ui-ed,.ui-share{--stock:#fdfbf7;--folder:#f7f4ec;--folder-tab:#f1ede3;--l-bg:#eae6dc;--l-hair:#e4e0d6;
    --l-fg:#221f1b;--l-fg-2:#4a4640;--l-muted:#8b877f;
    background:var(--l-bg);border-radius:7px;padding:15px 15px 17px;color:var(--l-fg)}
  .ui-find{display:flex;align-items:center;gap:9px;background:var(--stock);border-radius:8px;
    padding:9px 12px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.08);margin-bottom:15px}
  .ui-find svg{width:13px;height:13px;stroke:var(--l-muted);fill:none;stroke-width:1.6}
  .ui-find span{font-size:12.5px;color:var(--l-muted)}
  .ui-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}
  .ui-head .ttl{font-size:17px;font-weight:700;letter-spacing:-.03em;margin-right:auto}
  .ui-head .mt{font-family:var(--mono);font-size:9.5px;letter-spacing:-.02em;color:var(--l-muted);white-space:nowrap}
  .ui-toggle{display:flex;background:var(--stock);border-radius:9999px;padding:2px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.08)}
  .ui-toggle i{width:22px;height:19px;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:var(--l-muted)}
  .ui-toggle i.on{background:var(--l-fg);color:var(--stock)}
  .ui-toggle svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.7}
  .ui-lab{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted);margin:0 0 12px}
  .ui-lab.s{margin-top:20px}
  /* Folder-shaped tiles with a tab, as they ship: radius 3/10/10/10, a lighter
     tab sitting above the sheet, and the one a drag is over inks black. */
  .ui-folders{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
  .ui-tile{position:relative;height:84px;padding:0 11px 11px;display:flex;flex-direction:column;justify-content:flex-end;
    background:var(--folder);border-radius:3px 8px 8px 8px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.14),0 8px 18px rgba(45,40,33,.11)}
  .ui-tile::before{content:"";position:absolute;left:0;top:-8px;width:46px;height:10px;background:var(--folder-tab);
    border-radius:4px 8px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.6) inset}
  .ui-tile .fn{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.012em;color:var(--l-fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-tile .fm{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:-.02em;color:var(--l-muted);margin-top:2px}
  .ui-tile .dots{position:absolute;top:5px;right:6px;color:var(--l-muted);opacity:.75}
  .ui-tile .dots svg{width:12px;height:12px;fill:currentColor}
  .ui-tile.over{background:var(--l-fg);transform:translateY(-2px) scale(1.02)}
  .ui-tile.over::before{background:#151310}
  .ui-tile.over .fn{color:#f7f5f0}
  .ui-tile.over .fm,.ui-tile.over .dots{color:rgba(247,245,240,.65)}
  .ui-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .ui-card{position:relative;background:var(--stock);border-radius:11px;overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065)}
  .ui-card .face{padding:12px 12px 4px;font-size:10.5px;line-height:1.52;color:var(--l-fg-2);height:66px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent)}
  .ui-card .foot{padding:8px 11px 10px;border-top:1px solid var(--l-hair)}
  .ui-card .foot b{display:block;font-size:11.5px;font-weight:600;color:var(--l-fg);letter-spacing:-.012em;margin-bottom:3px}
  .ui-card .foot span{font-family:var(--mono);font-size:9.5px;letter-spacing:-.02em;color:var(--l-muted)}
  .ui-card .tick{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;
    background:var(--l-fg);display:flex;align-items:center;justify-content:center}
  .ui-card .tick svg{width:8px;height:8px;stroke:var(--stock);fill:none;stroke-width:2.6}
  .ui-card.sel{box-shadow:0 0 0 2px var(--l-fg),0 2px 5px rgba(45,40,33,.12),0 12px 26px rgba(45,40,33,.13)}
  @media (max-width:620px){.ui-cards{grid-template-columns:repeat(2,1fr)}.ui-cards .ui-card:nth-child(3){display:none}}

  /* Workbench mockup: the tabbed panel that sits beside the script, again in
     the app's own tokens and proportions (css/app.css .wb-tabs / .shot / .take). */
  .ui-wb{background:var(--l-bg);border-radius:7px;overflow:hidden}
  /* Tabs as they ship since v0.37: no pill, a 2px ink underline on the open
     one, and the count a bare mono figure inside the label. */
  .ui-tabs{display:flex;gap:16px;padding:0 14px;border-bottom:1px solid var(--l-hair);background:#f7f4ec}
  .ui-tab{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--l-muted);
    padding:10px 1px 9px;box-shadow:none}
  .ui-tab .n{font-family:var(--mono);font-size:9.5px;letter-spacing:0;color:inherit}
  .ui-tab.on{color:var(--l-fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--l-fg)}
  .ui-panel{background:var(--stock);padding:4px 0 8px}
  .ui-shot{display:flex;align-items:center;gap:10px;padding:4px 14px;border-bottom:1px solid var(--l-hair)}
  .ui-shot .tk{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1px solid var(--l-hair);
    background:var(--stock);display:flex;align-items:center;justify-content:center;color:transparent}
  .ui-shot .tk svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4}
  .ui-shot.on .tk{background:var(--l-muted);border-color:var(--l-muted);color:#fff}
  .ui-shot span{flex:1;font-size:11.5px;color:var(--l-fg-2);padding:7px 0}
  .ui-shot.on span{color:var(--l-muted)}
  .ui-add{display:flex;align-items:center;gap:10px;padding:6px 14px}
  .ui-add .plus{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1px solid var(--l-hair);
    display:flex;align-items:center;justify-content:center;color:var(--l-muted)}
  .ui-add .plus svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.8}
  .ui-add em{flex:1;font-style:normal;font-size:11.5px;color:var(--l-muted)}
  /* the rail's foot: Print the shot list, pinned as a text action */
  .ui-rfoot{display:flex;align-items:center;padding:9px 14px 4px;border-top:1px solid var(--l-hair);margin-top:6px}
  .ui-rfoot b{font-size:10.5px;font-weight:500;color:var(--l-fg-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:#c9c3b4}
  /* takes: circles, the keeper inked, a badge when a voice note is attached */
  .ui-takes{display:flex;align-items:center;gap:8px;padding:11px 14px 4px}
  .ui-take{position:relative;width:29px;height:29px;border-radius:50%;border:1px solid var(--l-hair);
    background:var(--stock);display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:600;color:var(--l-fg-2)}
  .ui-take.star{background:var(--l-fg);border-color:var(--l-fg);color:var(--stock)}
  .ui-take .vm{position:absolute;right:-3px;top:-3px;width:14px;height:14px;border-radius:50%;
    background:var(--l-fg);border:2px solid var(--stock);display:flex;align-items:center;justify-content:center}
  .ui-take .vm svg{width:7px;height:7px;stroke:var(--stock);fill:none;stroke-width:2.2}
  /* the take panel: star + note, the voice note's player, then its actions -
     re-record, TRANSCRIBE INTO THE NOTE, delete */
  .ui-trow{display:flex;align-items:flex-start;gap:8px;padding:9px 14px 0}
  .ui-star{flex:0 0 auto;width:20px;font-size:15px;line-height:1.1;color:var(--l-fg)}
  .ui-note{flex:1;border:1px solid var(--l-hair);border-radius:9px;background:var(--l-bg);
    padding:8px 11px;font-size:11px;line-height:1.5;color:var(--l-fg-2)}
  .ui-player{display:flex;align-items:center;gap:8px;padding:9px 14px 0}
  .ui-player .pb{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--l-fg);
    display:flex;align-items:center;justify-content:center}
  .ui-player .pb svg{width:10px;height:10px;fill:var(--stock)}
  .ui-player .tm{font-family:var(--mono);font-size:9.5px;color:var(--l-muted)}
  .ui-player .track{flex:1;height:3px;border-radius:2px;background:var(--l-hair);position:relative}
  .ui-player .track i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:var(--l-fg)}
  .ui-player .sp{font-family:var(--mono);font-size:9.5px;color:var(--l-muted);
    border:1px solid var(--l-hair);border-radius:9999px;padding:1px 6px}
  .ui-acts{display:flex;align-items:center;gap:6px;padding:9px 14px 4px}
  .ui-acts .ib{width:24px;height:24px;border-radius:50%;border:1px solid var(--l-hair);background:var(--stock);
    display:flex;align-items:center;justify-content:center;color:var(--l-fg-2)}
  .ui-acts .ib svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6}
  .ui-acts .ib.hl{border-color:var(--l-fg);color:var(--l-fg)}
  .ui-acts .lbl{font-size:9.5px;color:var(--l-muted);margin-left:2px}
@media (max-width:620px){.ui-folders{grid-template-columns:repeat(2,1fr)}}

  /* --- v0.38 anatomy (2026-08-28): the pieces the review changed --- */
  /* New with its arrow: one ink split button, the arrow holding New folder
     and Import (css/app.css .split). */
  .ui-new{display:inline-flex;align-items:stretch;height:26px;font-size:11px;font-weight:500;color:var(--stock)}
  .ui-new b{display:flex;align-items:center;padding:0 11px;background:var(--l-fg);border-radius:6px 0 0 6px;font-weight:500}
  .ui-new i{display:flex;align-items:center;padding:0 7px;background:var(--l-fg);border-radius:0 6px 6px 0;border-left:1px solid rgba(255,255,255,.22)}
  .ui-new i svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ui-ghost{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--l-hair);border-radius:6px;
    font-size:11px;font-weight:500;color:var(--l-fg);background:transparent;white-space:nowrap}
  .ui-head .ui-find{margin-bottom:0;padding:6px 10px;flex:0 1 150px;min-width:0}
  .ui-head .ui-find span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* a coloured folder: the tab and a small dot take the tint, paper stays */
  .ui-tile[data-colour="terracotta"]{--tint:#b7694f}
  .ui-tile[data-colour="sage"]{--tint:#7f9a7a}
  .ui-tile[data-colour="slate"]{--tint:#6e8398}
  .ui-tile[data-colour]::before{background:var(--tint)}
  .ui-tile .fdot{position:absolute;top:7px;right:22px;width:7px;height:7px;border-radius:50%;background:var(--tint)}
  /* the list, the on-set view: one card, hairlines between the rows, the day's
     score in mono at the top, the next unfilmed script's play filled */
  .ui-score{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--l-muted);white-space:nowrap}
  .ui-rows{background:var(--stock);border-radius:9px;overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(45,40,33,.10),0 6px 14px rgba(45,40,33,.065)}
  .ui-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--l-hair)}
  .ui-row:last-child{border-bottom:0}
  .ui-row .dt{flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:1px solid var(--l-hair);background:var(--stock);
    display:flex;align-items:center;justify-content:center;color:transparent}
  .ui-row .dt svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.4}
  .ui-row.done .dt{background:var(--l-muted);border-color:var(--l-muted);color:#fff}
  .ui-row .tx{flex:1;min-width:0}
  .ui-row .tx b{display:block;font-size:11.5px;font-weight:600;color:var(--l-fg);letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-row .tx span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:-.02em;color:var(--l-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-row.done .tx b{color:var(--l-muted);font-weight:500;text-decoration:line-through;text-decoration-color:var(--l-muted)}
  .ui-row .ac{display:flex;gap:5px;flex:0 0 auto}
  .ui-row .ac i{width:22px;height:22px;border-radius:50%;border:1px solid var(--l-hair);background:var(--stock);
    display:flex;align-items:center;justify-content:center;color:var(--l-fg)}
  .ui-row .ac svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .ui-row .ac i.dots svg{fill:currentColor;stroke:none}
  .ui-row.next .ac i.play{background:var(--l-fg);border-color:var(--l-fg);color:var(--stock)}
  .ui-row.next .ac i.play svg{fill:currentColor;stroke:none}
  @media (max-width:620px){.ui-row .ac i.pen{display:none}.ui-head .mt{display:none}
    .ui-head .ui-find{flex:0 0 auto;padding:6px 9px}.ui-head .ui-find span{display:none}}
  /* the bin's row at the foot of the library: dashed, where files live */
  .ui-binrow{display:flex;align-items:center;gap:9px;margin-top:12px;padding:8px 12px;border:1px dashed #c9c3b4;border-radius:8px;
    font-size:11.5px;font-weight:500;color:var(--l-fg-2)}
  .ui-binrow svg{width:13px;height:13px;stroke:var(--l-muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .ui-binrow span{font-family:var(--mono);font-size:9.5px;color:var(--l-muted);margin-left:auto}
  /* the ink bar Select puts at the foot of the screen */
  .shot{position:relative}
  .ui-bar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;
    padding:5px 8px 5px 12px;border-radius:9px;background:#221f1b;color:rgba(255,255,255,.85);
    box-shadow:0 8px 24px rgba(34,31,27,.35);white-space:nowrap}
  .ui-bar b{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.02em;color:#fff;margin-right:8px}
  .ui-bar span{font-size:10.5px;font-weight:500;padding:5px 8px;border-radius:5px}
  .ui-bar span.hl{background:rgba(255,255,255,.12);color:#fff}
  /* the share sheet, as the app shows it: the library dimmed beneath, the
     sheet centred, a real QR code in its hairline frame (css/app.css .modal,
     .share-actions, #share-qr-img) */
  .ui-share .ui{min-height:440px}
  .ui-dim{position:absolute;inset:0;background:rgba(29,29,31,.45);border-radius:9px}
  .ui-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(300px,calc(100% - 32px));
    background:var(--stock);border:1px solid var(--l-hair);border-radius:12px;padding:18px;color:var(--l-fg);
    box-shadow:0 2px 6px rgba(34,31,27,.12),0 24px 56px rgba(34,31,27,.28)}
  .ui-modal h4{font-size:13.5px;font-weight:600;letter-spacing:-.02em;margin:0 0 9px;color:var(--l-fg)}
  .ui-modal p{font-size:9.5px;line-height:1.5;color:var(--l-muted);margin:0 0 10px}
  .ui-field{display:block;border:1px solid var(--l-hair);border-radius:8px;padding:7px 9px;background:var(--l-bg);
    font-family:var(--mono);font-size:9px;color:var(--l-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:10px}
  .ui-acts2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
  .ui-acts2 span{display:flex;align-items:center;justify-content:center;height:26px;border:1px solid var(--l-hair);border-radius:6px;
    font-size:10px;font-weight:500;color:var(--l-fg);white-space:nowrap}
  .ui-acts2 span.wide{grid-column:1/-1}
  .ui-acts2 span.on{border-color:var(--l-fg)}
  .ui-qr{display:block;width:132px;height:132px;margin:0 auto 12px;padding:8px;border:1px solid var(--l-hair);border-radius:10px;background:#fff}
  .ui-qr svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
  .ui-mfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .ui-mfoot .lk{font-size:9.5px;font-weight:500;color:var(--l-fg-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:#c9c3b4}
  .ui-mfoot .go{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:6px;background:var(--l-fg);color:var(--stock);font-size:10.5px;font-weight:500}
  /* a folder's three-dots menu, open: rename, share, the colour swatches,
     delete (css/app.css .menu 280px, 44px rows, 18px icons) */
  .ui-fmenu .ui{display:flex;gap:26px;align-items:flex-start;padding:22px 24px 26px}
  .ui-fmenu .ui-tile{width:150px;flex:0 0 auto;margin-top:12px}
  .ui-menu{width:196px;background:var(--stock);border:1px solid var(--l-hair);border-radius:9px;padding:5px;
    box-shadow:0 2px 6px rgba(34,31,27,.10),0 18px 40px rgba(34,31,27,.18)}
  .ui-menu .mi{display:flex;align-items:center;gap:9px;min-height:31px;padding:0 9px;border-radius:6px;font-size:10.5px;font-weight:500;color:var(--l-fg)}
  .ui-menu .mi svg{width:13px;height:13px;flex:0 0 13px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .ui-menu .mi.sep{margin-top:4px;border-top:1px solid var(--l-hair);border-radius:0;padding-top:3px}
  .ui-menu .sw-lab{display:block;font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted);padding:7px 9px 3px}
  .ui-menu .sws{display:flex;gap:7px;padding:2px 9px 7px}
  .ui-menu .sws i{width:16px;height:16px;border-radius:50%;background:var(--c);border:1px solid rgba(34,31,27,.12)}
  .ui-menu .sws i.paper{background:var(--stock);border-color:var(--l-hair)}
  .ui-menu .sws i.on{box-shadow:0 0 0 2px var(--stock),0 0 0 3.5px var(--l-fg)}
  /* the prompter's settings sheet (css/app.css .pr-sheet, .set-row, .pal) */
  .ui-prsheet{width:min(300px,100%);margin:0 auto;background:#1e1c17;border:1px solid rgba(236,231,219,.22);border-radius:12px;padding:16px 16px 14px;color:#ece7db}
  .ui-prsheet h5{font-size:12.5px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px;color:#ece7db}
  .ui-prsheet .sr{margin-bottom:10px}
  .ui-prsheet .sl{display:flex;justify-content:space-between;font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b6b0a2;margin-bottom:5px}
  .ui-prsheet .sl b{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#ece7db}
  .ui-prsheet .sc{display:flex;align-items:center;gap:6px}
  .ui-prsheet .sc i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(236,231,219,.22);background:rgba(255,255,255,.035);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .ui-prsheet .sc i svg{width:10px;height:10px;stroke:#ece7db;fill:none;stroke-width:1.5;stroke-linecap:round}
  .ui-prsheet .tr{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);position:relative}
  .ui-prsheet .tr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:2px;background:#ece7db}
  .ui-prsheet .tr::after{content:"";position:absolute;left:calc(var(--v) - 7px);top:50%;width:14px;height:14px;border-radius:50%;background:#ece7db;transform:translateY(-50%)}
  .ui-prsheet .tg{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid #2e2b23;font-size:10.5px;font-weight:500}
  .ui-prsheet .tg i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(236,231,219,.4)}
  .ui-prsheet .tg i.on{background:#ece7db;border-color:#ece7db}
  .ui-prsheet .pals{display:flex;gap:7px;margin:4px 0 6px}
  .ui-prsheet .pal{flex:1;text-align:center}
  .ui-prsheet .pal b{display:flex;align-items:center;justify-content:center;height:30px;border-radius:7px;border:1px solid rgba(236,231,219,.22);font-size:12.5px;font-weight:600}
  .ui-prsheet .pal.on b{outline:1.5px solid #ece7db;outline-offset:2px}
  .ui-prsheet .pal span{display:block;font-size:7px;line-height:1.25;color:#b6b0a2;margin-top:4px;font-weight:500}
  .ui-prsheet .nt{font-size:8.5px;line-height:1.5;color:#807a6d;margin:0 0 10px}
  .ui-prsheet .dn{display:flex;align-items:center;justify-content:center;height:30px;border-radius:7px;border:1px solid rgba(236,231,219,.22);background:rgba(255,255,255,.035);font-size:10.5px;font-weight:500}
  /* the editor: one toolbar, the sheet, the rail at the edge */
  .ui-ed{background:var(--l-bg);border-radius:7px;overflow:hidden;color:var(--l-fg)}
  .ui-edbar{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--stock);border-bottom:1px solid var(--l-hair)}
  .ui-edbar .bk{font-size:10.5px;font-weight:500;color:var(--l-fg-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:#c9c3b4;white-space:nowrap}
  .ui-edbar .tt{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-edbar .fd{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px solid var(--l-hair);border-radius:9999px;
    font-size:10px;font-weight:500;color:var(--l-fg);white-space:nowrap}
  .ui-edbar .fd svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2}
  .ui-edbar .go{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:6px;background:var(--l-fg);color:var(--stock);font-size:11px;font-weight:500;white-space:nowrap}
  .ui-edbar .mr{width:24px;height:24px;border-radius:50%;border:1px solid var(--l-hair);display:flex;align-items:center;justify-content:center;color:var(--l-fg)}
  .ui-edbar .mr svg{width:12px;height:12px;fill:currentColor}
  .ui-edbody{display:grid;grid-template-columns:minmax(0,1fr) 42%}
  .ui-sheet{padding:14px 16px 12px 24px}
  .ui-sheet p{margin:0 0 8px;font-size:10.5px;line-height:1.55;color:var(--l-fg-2)}
  /* chapter marks as the editor draws them: a numbered ink disc, straddling
     the sheet's left edge (css/app.css .ed-mark) */
  .ui-sheet p.ch{position:relative}
  .ui-sheet p.ch::before{content:attr(data-n);position:absolute;left:-24px;top:1px;width:15px;height:15px;border-radius:50%;
    background:var(--l-fg);color:var(--stock);font-size:8px;font-weight:600;line-height:15px;text-align:center;
    box-shadow:0 1px 2px rgba(45,40,33,.18)}
  .ui-sheet .meta{display:flex;gap:10px;margin-top:6px;padding-top:8px;border-top:1px solid var(--l-hair);
    font-family:var(--mono);font-size:8.5px;letter-spacing:-.01em;color:var(--l-muted);white-space:nowrap;overflow:hidden}
  .ui-rail{background:#f7f4ec;border-left:1px solid var(--l-hair);display:flex;flex-direction:column;min-width:0}
  .ui-rail .ui-tabs{background:transparent;padding:0 12px;gap:12px}
  .ui-rail .ui-panel{background:transparent;flex:1;padding:2px 0 6px}
  .ui-rail .ui-shot{padding:3px 12px}
  .ui-rail .ui-shot span{font-size:10.5px;padding:6px 0}
  .ui-rail .ui-add{padding:5px 12px}
  .ui-rail .ui-takes{padding:10px 12px 2px}
  .ui-rail .ui-trow,.ui-rail .ui-player,.ui-rail .ui-acts{padding-left:12px;padding-right:12px}
  .ui-rail .ui-rfoot{margin-top:auto;padding:8px 12px 9px}
  @media (max-width:620px){
    .ui-edbody{grid-template-columns:1fr}
    .ui-rail{border-left:0;border-top:1px solid var(--l-hair)}
    .ui-edbar .fd{display:none}
  }


/* A mockup standing as a figure in a prose document. */
.mockfig{margin:30px 0 34px}
.mockfig .shot{max-width:560px;margin:0 auto}
.mockfig figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--faint);text-align:center;margin-top:12px}


/* The prompter demo: the landing page's animated hero screen, shared with
   how-it-works since 2026-08-25. It reads itself; reduced motion holds a
   frame. */
  /* prompter demo: the reading zone is a real row wrapping the bright line,
     so it aligns at every width */
  .demo{width:100%;max-width:520px;justify-self:end;background:var(--d-bg-2);border-radius:14px;overflow:hidden;
    box-shadow:0 2px 6px rgba(34,31,27,.10), 0 18px 44px rgba(34,31,27,.16)}
  /* The demo reads itself. One gradient mask does the whole job the product
     does: what you have read falls back, the reading zone is bright, what is
     coming waits a step dimmer. The band behind is the reading zone. */
  .demo-stage{position:relative;height:300px;overflow:hidden}
  /* Tall enough to hold a cue that wraps to two lines, or the rails read as a
     strikethrough rather than as the reading zone. */
  .demo-zone{position:absolute;left:0;right:0;top:35%;height:30%;background:var(--d-s2);
    border-top:2px solid rgba(236,231,219,.42);border-bottom:2px solid rgba(236,231,219,.42)}
  /* The mask belongs to the fixed stage, not the moving track: it has to stay
     put so lines dim as they rise through it, the way the prompter behaves. */
  .demo-mask{position:absolute;inset:0;z-index:1;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 14%,#000 35%,#000 65%,rgba(0,0,0,.30) 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 14%,#000 35%,#000 65%,rgba(0,0,0,.30) 86%,transparent 100%)}
  .demo-track{padding:0 28px;will-change:transform;animation:demo-read 22s linear infinite}
  .demo-track p{margin:0;padding:14px 0;color:var(--d-fg);font-size:18px;font-weight:500;
    line-height:1.45;letter-spacing:-0.01em}
  @keyframes demo-read{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @media (prefers-reduced-motion:reduce){
    .demo-track{animation:none;transform:translateY(-14%)}
  }
  .demo-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--d-hair)}
  .demo-status{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--d-muted)}
  /* The mic-live red is the one approved exception to the monochrome rule, and
     it pulses exactly as it does in the app (css/app.css .rec-dot). */
  .demo-status i{width:9px;height:9px;border-radius:50%;background:#ff453a;display:inline-block;
    animation:recpulse 1.2s ease-in-out infinite}
  @keyframes recpulse{0%,100%{opacity:1}50%{opacity:.2}}
  @media (prefers-reduced-motion:reduce){.demo-status i{animation:none}}
  .demo-controls{display:flex;gap:8px}
  .demo-controls span{width:38px;height:38px;border-radius:9999px;border:1px solid var(--d-hair-2);background:var(--d-s1);
    display:flex;align-items:center;justify-content:center;color:var(--d-fg)}
  .demo-controls span.solid{background:var(--d-fg);border-color:var(--d-fg);color:#000}
  .demo-controls svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
  /* the same card scrolling normally (the home hero since 2026-08-29): no
     status line, the control row centred, the speed stepper a pill, the play
     inked and showing pause because the script is moving */
  .demo-bar.scroll{justify-content:center}
  .demo-bar.scroll .demo-controls{gap:7px}
  .demo-controls .demo-speed{display:inline-flex;align-items:center;width:auto;height:38px;padding:0 2px;border:1px solid var(--d-hair-2);border-radius:9999px;background:var(--d-s1)}
  .demo-controls .demo-speed span{width:30px;height:34px;border:0;background:transparent}
  .demo-speed b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--d-fg);padding:0 4px;white-space:nowrap}
  .demo-speed b small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-fg-2);margin-right:4px}
  @media (max-width:620px){.demo-bar.scroll .demo-controls span.dim{display:none}}
.mockfig .demo{margin:0 auto;max-width:560px;justify-self:auto}

/* Phones: the nav and the help chapter row are solid, not frosted. Chrome
   for Android can leave a sticky backdrop-filter layer over the page after a
   scroll and swallow taps until a reload (2026-08-29). */
@media (max-width:640px){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--page)}
}

/* ------------------------------------------- the call scene (callmock) ----
   The call depicted the way a call looks: dark app, muted tiles from the
   folder palette, named participants, and the pinned script over the top
   tile. The pinned window is OPAQUE on purpose - the browser pin is;
   see-through belongs to the desktop companion and is not promised here.
   Used on the front page, the Zoom note and help. */
.callmock{position:relative;max-width:560px}
.callmock .call-win{background:var(--d-bg);border-radius:14px;box-shadow:var(--lift);padding:10px 10px 4px}
.callmock .call-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.callmock .call-tile{position:relative;aspect-ratio:16/11;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.callmock .call-tile.t1{background:#20303a}.callmock .call-tile.t2{background:#241f27}.callmock .call-tile.t3{background:#1d2a1f}
.callmock .call-tile.t4{background:#2b241b}.callmock .call-tile.t5{background:#1f2530}.callmock .call-tile.t6{background:#2a1f24}
.callmock .call-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;color:#ece7db;letter-spacing:.02em}
.callmock .t1 .call-av{background:#4f7285}.callmock .t2 .call-av{background:#7d6579}.callmock .t3 .call-av{background:#5f7f62}
.callmock .t4 .call-av{background:#8f7a52}.callmock .t5 .call-av{background:#5c7191}.callmock .t6 .call-av{background:#8a6570}
.callmock .call-name{position:absolute;left:7px;bottom:7px;font-size:9px;line-height:1;color:#d8d4ca;background:rgba(0,0,0,.42);padding:3px 6px;border-radius:4px}
.callmock .call-dock{display:flex;justify-content:center;align-items:center;gap:9px;padding:9px 0 6px}
.callmock .call-dock i{width:12px;height:12px;border-radius:50%;background:#2c2a24}
.callmock .call-dock i.end{background:#a34a40}
.callmock .pinned{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:44%;background:#12110d;border:1px solid rgba(236,231,219,.1);border-radius:10px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.callmock .pinned-lines{padding:12px 15px 9px}
.callmock .pinned-lines p{margin:0;padding:3px 0;color:var(--d-muted);font-size:12px;line-height:1.42;font-weight:500}
.callmock .pinned-lines p.now{color:var(--d-fg);font-size:12.5px}
.callmock .pinned-bar{display:flex;align-items:center;justify-content:center;gap:9px;padding:7px 10px;border-top:1px solid var(--d-hair)}
.callmock .pinned-bar span{display:flex;align-items:center;color:var(--d-muted)}
.callmock .pinned-bar svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.callmock .pinned-bar .pspeed{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;color:var(--d-fg-2);letter-spacing:.06em}
.callmock figcaption{margin-top:12px;text-align:center;font-size:13.5px;color:var(--faint)}
@media (max-width:520px){
  .callmock .call-av{width:34px;height:34px;font-size:11px}
  .callmock .pinned{width:52%}
  .callmock .pinned-lines p{font-size:10.5px}
  .callmock .pinned-lines p.now{font-size:11px}
}