/* ============================================================================
   miniprompter.app — one stylesheet, used by every page.

   The sibling sites (backuptempo-site, DiskMapper-Site) inline a copy of their
   tokens into index.html and keep the copies in sync by hand. Both carry a
   comment admitting it. Here every page links this file instead.

   THE DESIGN LANGUAGE, decided with Brad after two studies under /lab/:

   A MiniPrompter script is markdown-lite — body text with `# ` headings — so
   the site is set the way a script looks. Monospace headlines carrying their
   gold hash, a line-number gutter down the home page, sections divided by a
   rule with a red tick, figures breaking out of the measure, and no card grid
   anywhere it can be avoided. That is what stops it looking like the two
   sibling sites, which are utilities and suit a card grid fine.

   REJECTED, so it is not re-proposed as a fresh idea: wrapping the fill light
   around the browser window. It reads well and it misrepresents the product —
   MiniPrompter is not a screen takeover, the band goes around the Mac's own
   display. The hero photograph is where that gets shown.

   TOKENS. Almost everything flips with light and dark. --brand does not: it is
   the wordmark's gold, the same value in both themes because Brad asked for
   that specifically. Keep it separate from --accent, which carries link text
   and button fills and has to darken in light mode to stay legible. A brand
   mark carries no such duty (WCAG 1.4.3 excludes logotypes).
   ============================================================================ */

:root{
  --bg:#0b0b0d; --panel:#141317; --line:#232028; --line-soft:#17161c;
  --text:#f4f2ef; --dim:#a49ea8; --mute:#6f6a76;
  --accent:#f2b24c; --accent-text:#241703; --warn:#f0b429;
  --red:#ff453a;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme: dark;
}
/* Fixed in both themes. */
:root{ --brand:#f2b24c; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#ffffff; --panel:#f7f7f5; --line:#e4e1de; --line-soft:#f1efec;
    --text:#14131a; --dim:#575360; --mute:#8d8896;
    --accent:#b87514; --accent-text:#ffffff; --warn:#a56a00;
    --red:#d92d20;
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f7f5; --line:#e4e1de; --line-soft:#f1efec;
  --text:#14131a; --dim:#575360; --mute:#8d8896;
  --accent:#b87514; --accent-text:#ffffff; --warn:#a56a00;
  --red:#d92d20;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#0b0b0d; --panel:#141317; --line:#232028; --line-soft:#17161c;
  --text:#f4f2ef; --dim:#a49ea8; --mute:#6f6a76;
  --accent:#f2b24c; --accent-text:#241703; --warn:#f0b429;
  --red:#ff453a;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
     -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
img{max-width:100%}
::selection{background:color-mix(in srgb,var(--brand) 34%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.accent{color:var(--accent)}
.mono{font-family:var(--mono)}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600}
.section-sub{color:var(--dim);max-width:62ch;font-size:16.5px;line-height:1.7}
.skip-link{position:absolute;left:-999px;top:auto;background:var(--accent);color:var(--accent-text);
  padding:10px 16px;border-radius:8px;z-index:100}
.skip-link:focus{left:16px;top:16px}

/* ---- markdown headings, with their hash showing ------------------------ */
h1,h2,h3{font-family:var(--mono);font-weight:700;letter-spacing:-.03em}
.hash{color:var(--brand);font-weight:400}
h1 .hash{margin-right:.32em}
h2 .hash{margin-right:.36em}

/* ---- the section rule IS the app's reading line -------------------------
   Same thin red line, same soft glow, same little drag handle at the right
   edge. In the app that line is the one piece of chrome the reader actually
   looks at, and it is the only red in the product. Reusing it as the section
   break costs nothing and nobody else can. */
.rule{border:0;margin:0;position:relative;height:1.5px;border-radius:2px;
  background:var(--red);opacity:.72;
  box-shadow:0 0 9px color-mix(in srgb,var(--red) 45%,transparent)}
.rule::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  width:5px;height:15px;background:var(--red);border-radius:2px}

/* ---- document shell, with the line-number gutter ----------------------- */
.doc{max-width:1080px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:17px minmax(0,1fr)}
.gutter{border-right:1px solid var(--line);padding:26px 6px 0 0;position:sticky;top:0;
  height:100vh;font-family:var(--mono);font-size:8.5px;color:var(--mute);opacity:.75;
  line-height:2.6;text-align:right;user-select:none;overflow:hidden;white-space:pre}
.body{padding:0 0 0 14px;min-width:0}
@media (max-width:760px){
  .doc{grid-template-columns:1fr;padding:0 20px}
  .gutter{display:none}
  .body{padding-left:0}
}

/* ---- top line ---------------------------------------------------------- */
.nav{padding:22px 0 0}
.nav-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wordmark{font-family:var(--mono);font-weight:700;font-size:14.5px;letter-spacing:-.02em;
  text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.wordmark img{width:23px;height:23px;border-radius:6px;display:block}
.wordmark .accent{color:var(--brand)}
.nav-links{margin-left:auto;display:flex;gap:20px;list-style:none;padding:0;
  font-family:var(--mono);font-size:12px}
.nav-links a{text-decoration:none;color:var(--dim)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);
  text-decoration:underline;text-underline-offset:3px}
.nav-right{display:flex;align-items:center;gap:10px}
/* Two languages, so a flat EN/FR pair — backuptempo-site's dropdown shape is
   for its five. Stays visible below 620px where .nav-links hides. */
.lang-switch{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:12px}
.lang-switch a{color:var(--dim);text-decoration:none;padding:2px 5px;border-radius:5px}
.lang-switch a:hover{color:var(--text)}
.lang-switch a[aria-current="page"]{color:var(--text);font-weight:700}
.lang-switch .sep{color:var(--line)}
.theme-toggle{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s,color .15s;padding:0}
.theme-toggle:hover{color:var(--text);border-color:var(--mute)}
.theme-toggle svg{width:15px;height:15px}
.icon-moon{display:none}
:root[data-theme="light"] .icon-sun{display:none}
:root[data-theme="light"] .icon-moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .icon-sun{display:none}
  :root:not([data-theme]) .icon-moon{display:block}
}
@media (max-width:620px){ .nav-links{display:none} }

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;
  font-family:var(--mono);font-size:13.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:opacity .15s,border-color .15s}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover{opacity:.86}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--mute)}
.btn[aria-disabled="true"]{background:none;border:1px dashed var(--line);color:var(--mute);
  pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.spec{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin:16px 0 0}

/* ---- home: the opening ------------------------------------------------- */
.lede{font-size:clamp(17px,2vw,20px);line-height:1.62;color:var(--dim);
  /* 70ch here, 88ch on .beat, and they land within a few pixels of each other:
     `ch` scales with the element's own font size, and the lede is set larger. */
  max-width:70ch;margin:22px 0 0}
.lede strong{color:var(--text);font-weight:600}
.home-h1{font-size:clamp(30px,5.2vw,58px);line-height:1.1;margin:48px 0 0}

/* ---- numbered beats ---------------------------------------------------- */
.section{padding:74px 0 0}
.section > .rule{margin-bottom:42px}
.beat{padding:0 0 44px;max-width:88ch}
.beat .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 12px}
.beat h2{font-size:clamp(21px,2.8vw,30px);line-height:1.25;margin:0 0 16px}
.beat h3{font-size:17px;line-height:1.4;margin:0 0 8px;letter-spacing:-.02em}
.beat p{margin:0;font-size:16.5px;line-height:1.7;color:var(--dim)}
.beat p + p{margin-top:14px}
.beat p strong{color:var(--text);font-weight:600}
.beat ul{margin:14px 0 0;padding-left:20px;color:var(--dim);font-size:16.5px;line-height:1.7}
.beat li{margin-bottom:6px}
.beat li::marker{color:var(--brand)}

/* two things side by side, when they belong together */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0 40px;
  max-width:none}
.pair > div{padding:0 0 32px}
.pair p{font-size:15.5px;color:var(--dim);margin:0}

code{font-family:var(--mono);font-size:.88em;background:var(--line-soft);
  border:1px solid var(--line);padding:1.5px 6px;border-radius:4px;color:var(--text)}
kbd{font-family:var(--mono);font-size:12.5px;background:var(--panel);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--text);white-space:nowrap}

/* ---- specs as a definition list ---------------------------------------- */
.specs{margin:0;font-family:var(--mono);font-size:13px;max-width:76ch}
.specs div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--mute);min-width:15ch}
.specs dd{margin:0;color:var(--text)}

/* ---- release state ----------------------------------------------------- */
.note{max-width:88ch;margin:22px 0 0;border:1px dashed color-mix(in srgb,var(--warn) 55%,var(--line));
  background:color-mix(in srgb,var(--warn) 7%,transparent);border-radius:8px;padding:14px 18px;
  font-size:14px;color:var(--dim);line-height:1.65}
.note strong{color:var(--text)}
.status-card{max-width:88ch;margin:26px 0 0}
.status-card .mono{display:block;font-size:12px;color:var(--mute);margin-bottom:16px}

/* ---- sub-page hero ----------------------------------------------------- */
.page-hero{padding:52px 0 0}
.page-hero .kicker{display:block;margin-bottom:12px}
.page-hero h1{font-size:clamp(28px,4.6vw,44px);line-height:1.12;margin:0}
.page-hero .lede{margin-top:20px}

/* ---- prose (help pages, legal) ----------------------------------------- */
.prose{max-width:70ch}
.prose h1{font-size:clamp(27px,4.2vw,40px);line-height:1.14;margin:0 0 26px}
.prose h2{font-size:21px;margin:44px 0 14px}
.prose h3{font-size:16.5px;margin:30px 0 10px}
.prose p{color:var(--dim);font-size:16.5px;line-height:1.72;margin:0 0 16px}
.prose ul,.prose ol{color:var(--dim);font-size:16.5px;line-height:1.72;padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;overflow-x:auto;margin:0 0 18px}
.prose pre code{background:none;border:none;padding:0;font-size:13px;line-height:1.6}
.prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:2px solid var(--brand);
  background:color-mix(in srgb,var(--brand) 7%,transparent);border-radius:0 6px 6px 0}
.prose blockquote p{margin:0;color:var(--text);font-size:15.5px}
.prose blockquote p + p{margin-top:10px}
.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* ---- help layout ------------------------------------------------------- */
.help-shell{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;
  padding:44px 0 0}
.help-nav{position:sticky;top:26px;align-self:start}
.help-nav h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin:0 0 14px;font-weight:500}
.help-nav ul{list-style:none;margin:0;padding:0}
.help-nav li{margin-bottom:1px}
.help-nav a{display:block;padding:6px 10px;border-radius:6px;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);transition:background .15s,color .15s}
.help-nav a:hover{color:var(--text);background:var(--line-soft)}
.help-nav a[aria-current="page"]{color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
.help-body{min-width:0}
.help-more{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.help-more a{color:var(--accent);text-decoration:none}
.help-more a:hover{text-decoration:underline}
@media (max-width:820px){
  .help-shell{grid-template-columns:1fr;gap:26px;padding-top:28px}
  .help-nav{position:static}
  .help-nav ul{display:flex;flex-wrap:wrap;gap:6px}
  .help-nav li{margin:0}
  .help-nav a{border:1px solid var(--line);padding:6px 11px}
}

/* ---- help index cards (the one place a grid earns its keep) ------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;
  margin-top:36px}
.card{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:22px 20px;
  text-decoration:none;display:block;transition:border-color .15s}
.card:hover{border-color:var(--mute)}
.card h3{margin:0 0 8px;font-size:15.5px;letter-spacing:-.02em}
.card p{margin:0;color:var(--dim);font-size:14px;line-height:1.62}

/* ---- footer ------------------------------------------------------------ */
footer{margin-top:84px;border-top:1px solid var(--line);padding:26px 0 60px;
  font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.footer-inner{display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:space-between;
  align-items:flex-start}
.footer-links{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}
.footer-links a{text-decoration:none;color:var(--dim)}
.footer-links a:hover{color:var(--text)}
.footer-meta{margin:0;line-height:1.8}
.footer-meta strong{color:var(--dim)}
.footer-meta a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.footer-meta a:hover{color:var(--text)}
/* One line wherever there is room. It wraps below that, which is fine. */
@media (min-width:820px){ .footer-meta{white-space:nowrap} }
.footer-bottom{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.footer-bottom{margin-top:26px;text-align:center}

/* ============================================================================
   THE HERO — a photograph of a MacBook with a live screen inside it.

   The screen is not part of the picture. It is drawn here and projected onto
   the photo's glass by assets/hero.js, so the script really scrolls, the
   reading line really holds still while the words pass it, the light really
   changes colour temperature, and everything stays sharp at any display
   density. A flat composite would freeze all of that.

   The quad the projection maps to was FITTED off the pixels, not eyeballed:
   the lid leans back, so the display is 2.1% wider at the bottom than the top,
   and the machine is slightly rolled. Details in hero.js.

   What is inside the glass is the real product, not a flattering lie:
     - the band stops short of the menu bar AND the Dock, because
       RingLightStyle's outer boundary is NSScreen.visibleFrame;
     - the viewport is in WRAP-THE-NOTCH mode, starting at row zero and running
       behind the notch, which is the layout worth showing;
     - the menu bar carries the green pill the app shows while a script moves.
   The notch and the Dock are drawn — the machine was photographed with its
   screen off — and the Dock icons are deliberately generic, because Apple's
   marks are theirs and this is a commercial page.
   ============================================================================ */

.hero{margin:40px 0 0}
.shot{position:relative;max-width:1000px;line-height:0;
  --lit:255,238,214; --lit-i:.8; --lit-w:3.6cqw}
/* height:auto is load-bearing. The <img> carries width/height attributes so the
   browser reserves the right space before the photo loads (no layout shift);
   without height:auto that attribute wins and the image renders 3399px tall. */
.shot > img{width:100%;height:auto;display:block;border-radius:8px}

/* Light spilling out of the screen onto the keyboard deck and the desk. The
   photo was shot with the screen off, so that light has to be put back; without
   it the composite reads as a screenshot pasted onto a photo. `screen` so it
   adds light rather than painting over the picture. */
.spill{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  transition:opacity .3s;
  background:
    radial-gradient(46% 13% at 50% 80%,rgba(var(--lit),.34),transparent 72%),
    radial-gradient(60% 9% at 50% 90%,rgba(var(--lit),.16),transparent 76%),
    radial-gradient(72% 26% at 50% 46%,rgba(var(--lit),.10),transparent 70%)}
.spill.off{opacity:0}

.glass{position:absolute;left:0;top:0;z-index:3;transform-origin:0 0;overflow:hidden;
  background:#05060a;line-height:1.5;will-change:transform;container-type:inline-size;
  /* In the glass's own base units, so the projection keystones the curve along
     with everything else instead of leaving square corners on a rounded display. */
  border-radius:20px}

.desk{position:absolute;inset:0;
  background:
    radial-gradient(110% 80% at 26% 10%,#4b4468 0%,transparent 56%),
    radial-gradient(90% 70% at 80% 90%,#71484d 0%,transparent 60%),
    linear-gradient(168deg,#2a2640 0%,#1b1827 48%,#121019 100%)}

/* In wrap-the-notch mode the viewport covers the CENTRE of the menu-bar row.
   DESIGN.md accepts that on purpose: on a notched Mac the centre is mostly the
   notch anyway, and menu titles and status icons cluster at the two edges. */
.mb{position:absolute;top:0;left:0;right:0;height:4.2%;z-index:5;
  background:rgba(10,10,14,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.5%;
  font-family:var(--sans);font-size:1.05cqw;color:rgba(255,255,255,.88)}
.mb .grp{display:flex;align-items:center;gap:1.15em}
.mb .strong{font-weight:700}
.mb .right{display:flex;align-items:center;gap:.95em}
.mb .pip{width:.62em;height:.62em;border-radius:2px;background:rgba(255,255,255,.5)}
.mb .greenpill{display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.15em;border-radius:999px;background:#30d158}
.mb .greenpill i{width:.85em;height:.5em;border-radius:1px;background:#06340f;display:block}

/* The notch is black and the viewport behind it is nearly as black, so without
   a rim the cutout disappears into the window and the point of the shot goes
   with it. The green dot is macOS's camera-in-use indicator — macOS draws it,
   MiniPrompter never touches the camera. */
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:8;
  width:16%;height:4.5%;background:#000;border-radius:0 0 .95cqw .95cqw;
  display:flex;align-items:center;justify-content:center;gap:1.2cqw;
  box-shadow:0 .14cqw .4cqw rgba(0,0,0,.9),
             inset 0 -.07cqw 0 rgba(255,255,255,.13),
             inset .07cqw 0 0 rgba(255,255,255,.07),
             inset -.07cqw 0 0 rgba(255,255,255,.07)}
.notch .lens{width:.72cqw;height:.72cqw;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#6b7885 0%,#232a33 52%,#080b0f 100%);
  box-shadow:inset 0 0 0 .07cqw rgba(255,255,255,.14)}
.notch .cam{width:.46cqw;height:.46cqw;border-radius:50%;background:#32d74b;
  box-shadow:0 0 .75cqw rgba(50,215,75,.95),0 0 .25cqw rgba(190,255,205,.9)}

/* cqw, NOT %: border-width rejects percentages and draws nothing at all. */
.band{position:absolute;left:0;right:0;top:4.2%;bottom:7.2%;z-index:3;pointer-events:none;
  border:var(--lit-w) solid rgba(var(--lit),var(--lit-i));
  border-radius:1.5cqw;filter:blur(.6cqw);transition:opacity .25s}
.haze{position:absolute;left:0;right:0;top:4.2%;bottom:7.2%;z-index:2;pointer-events:none;
  border:calc(var(--lit-w) + 1.2cqw) solid rgba(var(--lit),calc(var(--lit-i) * .12));
  border-radius:2.3cqw;filter:blur(2cqw);transition:opacity .25s}
.band.off,.haze.off{opacity:0}

/* The call is deliberately unbranded. Naming Zoom, Meet and Teams in copy is
   ordinary nominative reference; drawing one of their interfaces on a
   commercial page implies an endorsement nobody gave. The grammar does the
   work: an active-speaker ring, a name chip, a self-view, a red hang-up. */
.call{position:absolute;left:10%;bottom:12.5%;width:35%;z-index:1;
  border-radius:.85cqw;overflow:hidden;background:#101218;font-family:var(--sans);
  box-shadow:0 1.4cqw 3.2cqw rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.call .bar{height:1.85cqw;background:#1b1e26;display:flex;align-items:center;
  gap:.36cqw;padding:0 .62cqw;position:relative}
.call .bar i{width:.46cqw;height:.46cqw;border-radius:50%;display:block}
.call .bar i:nth-child(1){background:#ff5f57}
.call .bar i:nth-child(2){background:#febc2e}
.call .bar i:nth-child(3){background:#28c840}
.call .bar span{position:absolute;left:0;right:0;text-align:center;
  font-size:.72cqw;color:rgba(255,255,255,.62)}
.call .stage{position:relative;aspect-ratio:16/9.6;background:#07080b;padding:.42cqw}
.call .tile{position:relative;width:100%;height:100%;border-radius:.55cqw;overflow:hidden;
  background:radial-gradient(72% 86% at 50% 30%,#6d5a5f 0%,#332b35 58%,#171520 100%);
  box-shadow:inset 0 0 0 .16cqw #3ea8ff}
.call .tile::before{content:"";position:absolute;left:50%;top:26%;transform:translateX(-50%);
  width:17%;height:0;padding-bottom:17%;border-radius:50%;
  background:radial-gradient(circle at 42% 32%,#a1857a,#6b5349 62%,#4a3a34)}
.call .tile::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:38%;height:30%;border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,#3d4a5c,#28303d)}
.call .name{position:absolute;left:.5cqw;bottom:.5cqw;z-index:2;
  display:inline-flex;align-items:center;gap:.28cqw;background:rgba(0,0,0,.55);
  border-radius:.28cqw;padding:.16cqw .42cqw;font-size:.66cqw;color:rgba(255,255,255,.9)}
.call .name b{width:.34cqw;height:.34cqw;border-radius:50%;background:#32d74b;display:block}
.call .self{position:absolute;right:.85cqw;top:.85cqw;width:23%;z-index:2;
  aspect-ratio:16/11;border-radius:.4cqw;overflow:hidden;
  background:radial-gradient(70% 84% at 50% 32%,#54535f 0%,#2a2933 62%,#16151c 100%);
  box-shadow:0 .2cqw .5cqw rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
.call .self::before{content:"";position:absolute;left:50%;top:24%;transform:translateX(-50%);
  width:26%;height:0;padding-bottom:26%;border-radius:50%;
  background:radial-gradient(circle at 42% 32%,#9c8378,#634e46 62%,#453833)}
.call .self::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:52%;height:34%;border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,#4a4152,#2e2938)}
.call .tools{height:2.3cqw;background:#1b1e26;display:flex;align-items:center;
  justify-content:center;gap:.5cqw;border-top:1px solid rgba(255,255,255,.06)}
.call .tool{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#2c313c;
  position:relative;display:block}
.call .tool::after{content:"";position:absolute;inset:32%;border-radius:.1cqw;
  background:rgba(255,255,255,.72)}
.call .tool.mic::after{border-radius:.3cqw .3cqw .18cqw .18cqw;inset:26% 36%}
.call .tool.cam::after{inset:36% 28%;border-radius:.1cqw;
  clip-path:polygon(0 0,72% 0,72% 32%,100% 8%,100% 92%,72% 68%,72% 100%,0 100%)}
.call .tool.share::after{inset:30%;border-radius:.12cqw;background:none;
  box-shadow:inset 0 0 0 .13cqw rgba(255,255,255,.72)}
.call .tool.end{width:2.6cqw;border-radius:.75cqw;background:#e4483d}
.call .tool.end::after{inset:38% 26%;border-radius:.6cqw;background:rgba(255,255,255,.92);
  transform:rotate(135deg)}

/* WRAP-THE-NOTCH: the window starts at row zero and flanks the notch, so the
   reading line lands ~40pt closer to the lens. The clipped top line is
   already-read text on its way out, which is why that trade is worth taking.
   Square top corners because the window is against the top edge of the display. */
.vp{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:52%;height:47%;z-index:6;border-radius:0 0 .9cqw .9cqw;overflow:hidden;
  background:rgba(6,6,9,.93);font-family:var(--sans);
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 1cqw 2.6cqw rgba(0,0,0,.55)}
.vp .roll{position:absolute;left:0;right:0;top:0;padding:0 5%;
  font-size:1.5cqw;line-height:1.85;font-weight:520;letter-spacing:-.005em;text-align:left;
  animation:roll var(--dur,36s) linear infinite}
.vp.paused .roll{animation-play-state:paused}
@keyframes roll{ from{transform:translateY(26%)} to{transform:translateY(-104%)} }
.vp .l{margin:0 0 .1cqw;color:rgba(246,243,239,var(--o,.34));transition:color .1s linear}
.vp .l.h{font-weight:750;color:rgba(255,255,255,var(--o,.34))}
.vp .rl{position:absolute;left:3.5%;right:3.5%;top:26%;height:1.5px;background:#ff453a;
  box-shadow:0 0 .55cqw rgba(255,69,58,.9);z-index:2;border-radius:2px}
.vp.paused .rl{animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.vp .rl::after{content:"";position:absolute;right:-1.3%;top:50%;transform:translateY(-50%);
  width:.6cqw;height:1.7cqw;background:#ff453a;border-radius:1px;opacity:.9}

.dock{position:absolute;left:50%;bottom:1.1%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:flex-end;gap:.62cqw;padding:.52cqw .62cqw 1.05cqw;
  border-radius:1.35cqw;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 .08cqw 0 rgba(255,255,255,.22),
             0 .5cqw 1.6cqw rgba(0,0,0,.45)}
.dock .app{position:relative;width:2.9cqw;height:2.9cqw;border-radius:.72cqw;display:block;
  box-shadow:inset 0 .06cqw 0 rgba(255,255,255,.3),0 .12cqw .3cqw rgba(0,0,0,.35)}
.dock .app.sm{width:2.7cqw;height:2.7cqw}
.dock .app.run::after{content:"";position:absolute;left:50%;bottom:-.62cqw;
  transform:translateX(-50%);width:.28cqw;height:.28cqw;border-radius:50%;
  background:rgba(255,255,255,.75)}
.dock .sep{width:1px;height:2.5cqw;margin:0 .22cqw;align-self:center;
  background:rgba(255,255,255,.22)}
.dock .finder{background:linear-gradient(180deg,#5db4f5,#2a7fd4)}
.dock .finder::before{content:"";position:absolute;inset:14% 0 14% 50%;
  background:#f3f7fb;border-radius:0 .5cqw .5cqw 0}
.dock .browser{background:radial-gradient(circle at 50% 50%,#f4f7fa 0 33%,#3f8ee0 34%,#1d5fae 100%)}
.dock .mail{background:linear-gradient(180deg,#6fc3ff,#1b7fe0)}
.dock .mail::before{content:"";position:absolute;inset:26% 16%;border-radius:.16cqw;
  background:#fff;clip-path:polygon(0 0,100% 0,50% 58%)}
.dock .cal{background:linear-gradient(180deg,#fff,#e6e6ea)}
.dock .cal::before{content:"";position:absolute;left:0;right:0;top:0;height:32%;
  background:#e8453c;border-radius:.72cqw .72cqw 0 0}
.dock .term{background:linear-gradient(180deg,#3a3f47,#15181d)}
.dock .term::before{content:"";position:absolute;left:20%;top:30%;width:26%;height:.22cqw;
  background:#8ff0a4;transform:rotate(38deg);transform-origin:left center}
.dock .term::after{content:"";position:absolute;left:20%;top:52%;width:26%;height:.22cqw;
  background:#8ff0a4;transform:rotate(-38deg);transform-origin:left center;
  inset:auto auto auto 20%;border-radius:0}
.dock .notes{background:linear-gradient(180deg,#ffe27a,#f5c443)}
.dock .music{background:linear-gradient(180deg,#fb6d7a,#e8344b)}
.dock .mp{background:none;overflow:hidden;box-shadow:0 .12cqw .3cqw rgba(0,0,0,.35)}
.dock .mp img{width:100%;height:100%;display:block;border-radius:.72cqw}
.dock .trash{background:linear-gradient(180deg,rgba(220,225,232,.5),rgba(150,158,170,.45));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dock .trash::before{content:"";position:absolute;inset:22% 30% 16%;
  border:.14cqw solid rgba(255,255,255,.8);border-top:none;border-radius:0 0 .2cqw .2cqw}

/* The photo's glass has its own sheen. A faint one over the live screen keeps
   it sitting IN the picture rather than on top of it. */
.sheen{position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.018) 24%,
    transparent 46%);mix-blend-mode:screen}

/* ---- hero controls ----------------------------------------------------- */
.hero-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:18px 0 0;line-height:1.5;max-width:1000px}
.ctl{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:7px;padding:6px 11px;font-family:var(--mono);font-size:11.5px;
  background:transparent;color:var(--text);cursor:pointer}
.ctl:hover{border-color:var(--mute)}
.ctl b{font-weight:500;color:var(--dim)}
.slide{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:7px;padding:4px 11px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.slide input{accent-color:var(--brand);width:92px}
.slide b{color:var(--text);font-weight:500;min-width:6ch;text-align:right}
.figure-note{font-family:var(--mono);font-size:11px;color:var(--mute);margin:14px 0 0}

@media (prefers-reduced-motion: reduce){
  .vp .roll,.vp .rl{animation:none}
}