/* The landing page: promise, pinned screen with the four-step story, left out, closing, footer. Paper tones, Newsreader, light and dark. */
/* Newsreader, self-hosted: Latin subsets that keep the optical-size axis (fonts/, preloaded by each page) */
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --paper: #F3F2EE; --ink: #161616; --mid: #5F5E5A; --faint: #D9D7D0;
  --green: #187A42; --ink-hover: #3A3A38; --wall-a: #C9C7BF; --wall-b: #A8A69E; --bezel: #000; --bezel-edge: transparent; --menubar: rgba(255,255,255,.55); --menuink: rgba(0,0,0,.85);
  --win: #FFFFFF; --win-ink: #1D1D1F; --win-mid: rgba(0,0,0,.45); --win-line: rgba(0,0,0,.08); --win-dot: rgba(0,0,0,.13); --win-edge: rgba(0,0,0,.1);
  --serif: "Newsreader", "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --tag-size: clamp(48px, 7vw, 96px); --tag-track: -.025em;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  --notch: #000; --notch-ink: #fff; --notch-ink-emphasis: rgba(255,255,255,.88); --notch-ink-secondary: rgba(255,255,255,.5); --notch-ink-placeholder: rgba(255,255,255,.32);
  --notch-fill-keycap: rgba(255,255,255,.15); --notch-ring-track: rgba(255,255,255,.25); --notch-accent: #F5A624; --notch-done: #30D158; --font-sans: var(--sans);
  --head: 72px;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-fast: .2s; --dur-med: .35s;
  color-scheme: light;
}
/* dark: the mode the page settled on (the head script and theme.js: the visitor's pick, else the system) */
:root[data-mode="dark"] { --paper: #141412; --ink: #EFECE4; --ink-hover: #D2CEC4; --mid: #9D998F; --faint: #34322D;
  --green: #30D158; --wall-a: #2A2925; --wall-b: #1B1A17; --bezel: #000; --bezel-edge: rgba(255,255,255,.12); --menubar: rgba(0,0,0,.35); --menuink: rgba(255,255,255,.78); --win: #252422; --win-ink: rgba(255,255,255,.86); --win-mid: rgba(255,255,255,.45); --win-line: rgba(255,255,255,.07); --win-dot: rgba(255,255,255,.16); --win-edge: rgba(255,255,255,.1); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--sans); overflow-x: clip; }
/* Switching themes: the whole page changes in one crossfade (theme.js, View Transitions), never colour by colour.
   While it swaps, nothing else may transition, or hovers and fills would arrive after the rest. */
:root.theme-swap *, :root.theme-swap *::before, :root.theme-swap *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }

/* nav + hero copy */
.site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.site-head.solid::before { opacity: 1; }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3; isolation: isolate; background: linear-gradient(to bottom, var(--paper) 55%, color-mix(in srgb, var(--paper) 70%, transparent) 78%, color-mix(in srgb, var(--paper) 0%, transparent)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.nav { display: flex; justify-content: space-between; align-items: center; height: var(--head); }
/* the lockup: the brandmark and "tasq" (always lowercase), as the brandmark guide sets it: mark .84em, .21em under the baseline, .3em before the name */
.logo { font: 400 26px/1 var(--serif); letter-spacing: -.01em; color: inherit; text-decoration: none; white-space: nowrap; }
.logo .mk { display: inline-block; vertical-align: -.21em; width: .84em; height: .84em; margin-right: .3em; overflow: visible; }
:root.meet .logo .parts { opacity: 0; }
.nav-r { display: flex; gap: 22px; align-items: center; }
.theme { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 -8px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.theme:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.theme:active { transform: scale(.92); }
.theme svg { width: 18px; height: 18px; }
.theme .sun { display: none; }
:root[data-mode="dark"] .theme .sun { display: block; } :root[data-mode="dark"] .theme .moon { display: none; }
.btn { font: 600 15px/1 var(--sans); background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 13px 20px; text-decoration: none; display: inline-block;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.btn:hover { background: var(--ink-hover); transform: scale(1.04); }
.btn:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.nav .btn { font-size: 13px; padding: 10px 16px; }
.copy .btn, .closing .btn { font-size: 17px; padding: 18px 30px; }
/* The header's download button is the hero's own: once the header reaches it, it sticks in the header's centre and shrinks there
   (story.js sets .dock and the --b* values). It bows out as the closing's button comes into view.
   Reduce Motion: no travel; the header's button fades in, centred, as the hero's goes under the header. */
:root.dock .nav .btn { position: fixed; left: 0; top: 0; translate: calc(var(--bx) - 50%) calc(var(--by) - 50%); font-size: var(--bf); padding: var(--bpy) var(--bpx); opacity: var(--bo, 1);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), visibility 0s; }
:root.dock.stick .copy .btn { visibility: hidden; }
/* scroll-driven where supported: story.js writes the keyframes (dock-run, all in px) and adds .sda, so the page's own scroll
   moves the button and it never trails it by a frame */
:root.dock.stick .nav .btn.sda { translate: none; }
:root.dock .nav .btn.off, :root.dock .site-head.quiet .nav .btn { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, 0s, var(--dur-med); }
.copy { --stack: 22px; position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--stack); padding-block: clamp(48px, 9vw, 104px) 56px; }
.tag { font: 400 var(--tag-size)/.98 var(--serif); letter-spacing: var(--tag-track); margin: 0; text-wrap: balance; }
.tag i, h2 i, h3 i { font-style: italic; }
.desc { font: 400 clamp(17px, 1.8vw, 20px)/1.5 var(--sans); color: var(--mid); margin: 0; max-width: 32em; text-wrap: balance; } /* short lines: even them out */

/* the screen: bezel + wallpaper + menu bar + notch states, in real points × --s */
.pin-area { position: relative; z-index: 1; }
.pin-stage { position: sticky; top: calc(var(--head) + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--paper); transition: background .3s; }
/* the paper backing only matters once it pins and zooms; before that the hero's dots show on both sides of the screen */
.pin-stage:not(.zoomed) { background: transparent; }
/* soft edge: the screen dissolves into the paper (blur rising, paper rising), and text scrolling up under it does the same in mirror */
.soft { position: absolute; left: 0; right: 0; pointer-events: none; visibility: hidden; transition: visibility 0s; }
.pin-stage.settled .soft { visibility: visible; }
.soft.b { top: 100%; height: 120px; }
.soft i { position: absolute; inset: 0; -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); -webkit-mask-image: var(--m); mask-image: var(--m); }
.soft::after { content: ""; position: absolute; inset: 0; }
.soft.b::after { background: linear-gradient(to top, color-mix(in srgb, var(--paper) 0%, transparent) 0%, color-mix(in srgb, var(--paper) 6%, transparent) 20%, color-mix(in srgb, var(--paper) 22%, transparent) 40%, color-mix(in srgb, var(--paper) 50%, transparent) 60%, color-mix(in srgb, var(--paper) 82%, transparent) 80%, color-mix(in srgb, var(--paper) 100%, transparent) 100%); }
/* the hero shows --ext-rest more of the screen than the pinned stage, drawn over the story's top padding. Once the screen pins,
   the fade (a paper gradient) rises with the scroll, as a transform, over the first 80px: done well before the story's first
   line (136px further down) can reach it. Then the stage drops its extra height in one step (no layout shift). */
:root { --ext-rest: 180px; }
.stage { --sh: 260px; position: relative; height: calc(var(--sh) + var(--ext-rest)); margin-bottom: calc(-1 * var(--ext-rest)); overflow: hidden; display: flex; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); }
.stage.retracted { height: var(--sh); margin-bottom: 0; }
.fade { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--sh) + var(--ext-rest) - 170px); height: calc(170px + var(--ext-rest)); pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 0%, transparent) 0, color-mix(in srgb, var(--paper) 22%, transparent) 60px, color-mix(in srgb, var(--paper) 60%, transparent) 110px, color-mix(in srgb, var(--paper) 88%, transparent) 145px, var(--paper) 170px); will-change: transform; }
/* zoom: once the story starts the camera moves in on the notch. It's a transform on the whole device (composited, no re-layout,
   so the notch's own spring isn't disturbed); the page measures --zoom-to so the ears always fit. */
.bezel { --s0: 1.1; --s: var(--s0); --bz: var(--bz0, 11px); --br: var(--br0, 24px); --bw: min(1088px, 100vw - var(--gl) - var(--gr));
  position: relative; flex: none; background: var(--bezel); box-shadow: inset 0 0 0 1px var(--bezel-edge); border-radius: var(--br) var(--br) 0 0; padding: var(--bz) var(--bz) 0; width: var(--bw);
  transform-origin: 50% 0; transition: transform .9s var(--ease-out); }
.zoomed .bezel { transform: scale(var(--zoom-to, 1.45)); }
.screen { position: relative; height: 600px; border-radius: var(--sr0, 13px) var(--sr0, 13px) 0 0; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 0%, var(--wall-a), var(--wall-b)); }
.menubar { position: absolute; inset: 0 0 auto; height: calc(32px * var(--s)); background: var(--menubar);
  display: flex; justify-content: space-between; align-items: center; font: 500 calc(13px * var(--s))/1 var(--sans); color: var(--menuink); }
.menubar .left, .menubar .right { display: flex; align-items: center; gap: calc(18px * var(--s)); padding: 0 calc(14px * var(--s)); white-space: nowrap; }
.menubar .right { gap: calc(14px * var(--s)); font-variant-numeric: tabular-nums; }
.menubar b { font-weight: 700; }
.menubar .apps { display: grid; }
.menubar .apps > span { grid-area: 1 / 1; display: flex; gap: calc(18px * var(--s)); transition: opacity var(--dur-med) var(--ease-out); }
.menubar .app-fin, .zoomed .menubar .app-doc { opacity: 0; }
.zoomed .menubar .app-fin { opacity: 1; }
/* the hero's window: the manifesto, open in a document; inactive (grey lights), and it steps away when the story starts */
.win { position: absolute; z-index: 1; left: 50%; top: calc(90px * var(--s)); width: min(calc(560px * var(--s)), 88%); transform: translateX(-50%); background: var(--win); color: var(--win-ink);
  border-radius: calc(12px * var(--s)); box-shadow: 0 0 0 1px var(--win-edge), 0 calc(12px * var(--s)) calc(40px * var(--s)) rgba(0, 0, 0, .16); overflow: hidden;
  transition: opacity var(--dur-med) var(--ease-out), transform .9s var(--ease-out); }
.zoomed .win { opacity: 0; transform: translateX(-50%) translateY(calc(16px * var(--s))) scale(.97); }
.win-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(28px * var(--s)); padding: 0 calc(12px * var(--s)); border-bottom: 1px solid var(--win-line); font: 600 calc(13px * var(--s))/1 var(--sans); color: var(--win-mid); }
.win-dots { display: flex; gap: calc(8px * var(--s)); }
.win-dots i { width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; background: var(--win-dot); }
.win-body { --pad: calc(56px * var(--s)); display: grid; gap: calc(12px * var(--s)); padding: var(--pad) var(--pad) calc(40px * var(--s)); font: 400 calc(14px * var(--s))/1.55 var(--sans); }
.win-body p { margin: 0; color: var(--mid); } /* running text in the description colour, as on the manifesto page; title and bold stay ink */
.win-body .win-h, .win-body b { color: var(--win-ink); }
.win-body .win-h { font: 400 calc(30px * var(--s))/1.08 var(--serif); letter-spacing: -.015em; max-width: 11em; text-wrap: balance; margin-bottom: calc(4px * var(--s)); } /* two balanced lines */
.menubar svg { display: block; height: calc(var(--h) * var(--s)); width: auto; }
/* intro: the screen rises */
.rise { animation: rise 1s cubic-bezier(.2,.9,.25,1) .15s both; }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }

/* story */
.steps { max-width: 760px; margin: 0 auto; padding: calc(136px + var(--ext-rest)) var(--gr) 30vh var(--gl); display: grid; gap: 38vh; justify-items: center; text-align: center; }
.steps h2.intro { font: 400 clamp(34px, 4.6vw, 56px)/1.04 var(--serif); letter-spacing: -.02em; margin: 0; }
.step { display: grid; gap: 12px; justify-items: center; }
.step h3 { font: 400 clamp(28px, 3.4vw, 42px)/1.08 var(--serif); letter-spacing: -.015em; margin: 0; }
.step.done h3 i { color: var(--green); }
.kcap { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .28em; border-radius: .3em; border: 1.5px solid currentColor; font: 700 .62em/1 var(--sans); vertical-align: .14em; }

/* left out */
.lo { padding-block: 96px; display: grid; gap: 28px; justify-items: center; text-align: center; border-top: 1px solid var(--faint); }
.lo h2, .closing h2 { font: 400 clamp(36px, 5vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; margin: 0; }
.lo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lo li { font: 400 clamp(26px, 3.4vw, 42px)/1.2 var(--serif); color: var(--mid); transition: color var(--dur-med) var(--ease-out); cursor: default; }
.lo s { position: relative; text-decoration: none; }
.lo s::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 56%; height: 1.5px; background: var(--ink); transform-origin: right center; transition: transform var(--dur-med) var(--ease-out); }
.lo li:hover { color: var(--ink); }
.lo li:hover s::after { transform: scaleX(0); }
/* faq: native disclosure, closed by default; the + turns into × as it opens */
.faq { padding-block: 96px; display: grid; gap: 40px; justify-items: center; border-top: 1px solid var(--faint); }
.faq h2 { font: 400 clamp(36px, 5vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; margin: 0; text-align: center; }
.faq-list { width: 100%; max-width: 680px; border-top: 1px solid var(--faint); }
.faq details { border-bottom: 1px solid var(--faint); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font: 400 clamp(20px, 2.2vw, 24px)/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.faq .pm { position: relative; flex: none; width: 14px; height: 14px; color: var(--mid); transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 1px; }
.faq .pm::after { transform: rotate(90deg); }
.faq summary:hover .pm { color: var(--ink); }
.faq details[open] .pm { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 38px 24px 0; font: 400 16px/1.55 var(--sans); color: var(--mid); text-wrap: pretty; }
/* where supported, the answer opens with the page's ease instead of snapping */
@supports selector(::details-content) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), content-visibility var(--dur-med) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .faq .pm, .faq details::details-content { transition: none; } }

/* closing + footer */
.closing { position: relative; isolation: isolate; padding-block: 120px; display: grid; justify-items: center; text-align: center; --stack: 24px; gap: var(--stack); border-top: 1px solid var(--faint); }
.closing .meta, .copy .meta { font: 400 13px/1 var(--sans); color: var(--mid); }
/* the note under a download button sits 16px under it, whatever the block's own spacing */
.btn + .meta { margin-top: calc(16px - var(--stack)); }
/* the hero's dots, once more, behind the closing: the same grid, fading out from the button */
.closing::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background-image: radial-gradient(circle at center, var(--faint) 1.05px, transparent 1.15px); background-size: 19px 19px; background-position: center top;
  -webkit-mask-image: radial-gradient(760px 340px at 50% 58%, #000 20%, transparent 80%); mask-image: radial-gradient(760px 340px at 50% 58%, #000 20%, transparent 80%); }

/* the footer's line, then the notch closes the page (the manifesto, which ends on its own notch, keeps the line alone) */
/* centred, like the rest of the page: the link first, the credit under it a step quieter (credit comes first in the markup) */
footer .f-row { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 10px; padding-block: 28px 0; border-top: 1px solid var(--faint); font: 400 14px/1.4 var(--sans); color: var(--mid); }
footer .f-row > span { font-size: 13px; color: color-mix(in srgb, var(--mid) 80%, transparent); }
footer .f-row:last-child { padding-bottom: 120px; }
footer .links { display: flex; gap: 24px; }
footer .mf-end { padding-top: 128px; }
/* plain text links: no underline at rest, ink and a hairline underline on hover */
footer a { color: var(--mid); text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
footer a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* the manifesto link's arrow nudges forward on hover */
footer .arr { display: inline-block; margin-left: .35em; transition: transform var(--dur-med) var(--ease-out); }
footer a:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { footer .arr { transition: none; } }

a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 700px) {
  .screen { --sr0: 9px; } :root { --ext-rest: 130px; } .stage { --sh: 210px; } .soft.b { height: 96px; } :root { --head: 64px; } .bezel { --s0: .78; --bz0: 7px; --br0: 16px; }
  .win-body { --pad: calc(28px * var(--s)); }
  .menubar .apps > span > span:nth-of-type(n+2), .menubar .right svg { display: none; }
  .nav-r { gap: 14px; }
}
@media (max-width: 440px) { .menubar .right { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .bezel, .win, .menubar .apps > span { transition: none; }
}
.bezel > .tq-notch { top: var(--bz); z-index: 2; }
.tq-notch::before { content: ""; position: absolute; top: -3px; height: 4px; left: 0; right: 0; background: var(--notch); }

/* manifesto page: one reading column, left-aligned because it is long text; it ends on the notch, like a task */
.mf-body { max-width: 640px; margin: 0 auto; padding: clamp(48px, 8vw, 104px) var(--gr) 0 var(--gl); box-sizing: content-box; }
.mf-kicker { font: 500 12px/1 var(--sans); color: var(--mid); margin: 0 0 24px; }
.mf h1 { font: 400 clamp(44px, 6.4vw, 80px)/1 var(--serif); letter-spacing: -.025em; margin: 0 0 48px; text-wrap: balance; }
.mf h1 i, .mf h2 i, .mf-lead i { font-style: italic; }
.mf-body p { font: 400 clamp(18px, 1.7vw, 20px)/1.6 var(--sans); color: var(--mid); margin: 0 0 1.1em; text-wrap: pretty; }
/* emphasis stays soft: the serif italic in full ink, never bold or underlined */
.mf-body p b { color: var(--ink); }
.mf-body p b, .win-body b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; line-height: 0; letter-spacing: -.005em; }
.mf-body .mf-quote p b { font-size: 1em; }
.mf-body .mf-lead { font: 400 clamp(28px, 3.2vw, 36px)/1.22 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 56px 0 0; text-wrap: balance; }
.mf h2 { font: 400 clamp(30px, 3.6vw, 42px)/1.08 var(--serif); letter-spacing: -.015em; margin: 88px 0 18px; }
.mf h2.done i { color: var(--green); }
.mf-body p a { color: var(--ink); text-decoration: underline 1px color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.mf-body p a:hover { text-decoration-color: currentColor; }
.mf-plain { padding-bottom: 120px; }
.mf-plain h2:first-of-type { margin-top: 72px; }
/* the maker's note: a quote, set in the serif, with the sign-off as its source */
.mf-quote { position: relative; margin: 112px 0 0; padding: 76px 0 0; border-top: 1px solid var(--faint); }
.mf-quote::before { content: "\201C"; position: absolute; top: 33px; left: -.04em; font: 400 120px/1 var(--serif); color: var(--faint); pointer-events: none; }
.mf-quote blockquote { margin: 0; }
.mf-body .mf-quote p { font: 400 clamp(26px, 3vw, 34px)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 0; text-wrap: pretty; }
.mf-quote figcaption { margin-top: 28px; font: 500 14px/1.2 var(--sans); color: var(--ink); }
.mf-quote figcaption span { color: var(--mid); font-weight: 400; }
.mf-quote figcaption::before { content: "— "; color: var(--mid); }
.mf-end { display: flex; justify-content: center; padding: 112px var(--gr) 0 var(--gl); }
.mf-screen { width: min(560px, 100%); height: 176px; padding: 9px 9px 0; box-sizing: border-box; background: var(--bezel); border-radius: 22px 22px 0 0;
  box-shadow: inset 0 0 0 1px var(--bezel-edge); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.mf-wall { --s: 1; position: relative; height: 100%; border-radius: 13px 13px 0 0; background: radial-gradient(120% 120% at 30% 0%, var(--wall-a), var(--wall-b)); }
.mf-wall .tq-notch { cursor: default; }
.mf-wall .tq-notch[data-state="ended"] { cursor: pointer; }
.mf-wall .tq-notch:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 0 0 20px 20px; }
.mf-cta { border-top: 0; padding-block: 24px 120px; }
@media (max-width: 700px) { .mf-screen { height: 172px; padding: 7px 7px 0; border-radius: 16px 16px 0 0; } .mf-wall { --s: .9; border-radius: 9px 9px 0 0; } }

/* the live hero notch: only what's on screen takes the pointer; the field is a real input under the drawn one */
#notch { outline: none; }
#notch:focus-visible::after { content: ""; position: absolute; inset: -4px; border-radius: 0 0 calc((var(--r) + 4px) * var(--s)) calc((var(--r) + 4px) * var(--s)); box-shadow: 0 0 0 2px var(--notch-accent); pointer-events: none; }
#notch .tq-c { pointer-events: none; }
#notch[data-state="glance"] .tq-glance { pointer-events: auto; }
.tq-input { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; color: transparent; background: none; caret-color: transparent; }
.tq-notch.tq-deleted .tq-ended .tq-dring { display: none; }
.tq-notch.tq-deleted .tq-ended .tq-pt { color: var(--notch-ink-emphasis); }

/* The hero's background: a quiet dot grid behind the promise, fading out from the notch toward the edges. */
/* --ny is the bare notch's bottom edge on the page, measured by story.js; the layer reaches a little past it */
.hero-bg { --ny: 640px; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: calc(var(--ny) + 420px); pointer-events: none; overflow: hidden;
  background-image: radial-gradient(circle at center, var(--faint) 1.05px, transparent 1.15px); background-size: 19px 19px; background-position: center top;
  -webkit-mask-image: radial-gradient(900px 700px at 50% var(--ny), #000 25%, transparent 80%); mask-image: radial-gradient(900px 700px at 50% var(--ny), #000 25%, transparent 80%); }