/* Plasmie site. Colours and type are the app's brand (DESIGN.md / brand sheet):
   brain-pink body, berry ink, Baloo 2 for display, Hanken Grotesk for text. */
:root {
  --ground: #FDF1F4; --surface: #FFF9FA; --ink: #3A1430; --ink-2: #5E2F4E; --ink-3: #7E5070;
  --rule: #F0CFDA; --rule-strong: #E2A9BC;
  --band: #3A1430; --band-ink: #FDF1F4; --band-ink-2: #E7C3D0; --band-rule: #5A2C4B;
  --bezel: #140C11; --mac-screen: var(--ground); --mac-bar: color-mix(in oklab, var(--ground), var(--ink) 6%); --mac-alu: #D8CBD1; --mac-alu-2: #BCAAB3;
  /* the blob's own paint */
  --body: #F49AB2; --body-hi: #FBC9D6; --face: #3A1430; --blush: #E8668A; --off: #C9B9C0;
  --spark: #FFC94A; --sweat: #6EC5F0; --shine: #FFF9FA; --card: #FFF9FA; --zzz: #8E6080;
  --display: "Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --text: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px;
  --glide: cubic-bezier(.16, 1, .3, 1);
  --mac-edge: transparent; --mac-glow: 0 0 #0000;
  color-scheme: light;
}
/* Theme: auto follows the system; data-theme="light"|"dark" on <html> overrides it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1E1218; --surface: #2A1922; --ink: #FBE9EF; --ink-2: #E7C3D0; --ink-3: #C095A8;
    --rule: #43273A; --rule-strong: #63384F;
    --band: #2C1823; --band-ink: #FBE9EF; --band-ink-2: #E7C3D0; --band-rule: #4E2D40;
    --mac-screen: var(--ground); --mac-bar: color-mix(in oklab, var(--ground), var(--ink) 8%); --mac-alu: #6B5A63; --mac-alu-2: #54454D;
    --body: #F7A8BE; --body-hi: #FCD3DE; --off: #8E7F86; --card: #FBE9EF; --zzz: #C095A8;
    --mac-edge: #7A4A66; --mac-glow: 0 0 56px -4px color-mix(in oklab, var(--body) 34%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #1E1218; --surface: #2A1922; --ink: #FBE9EF; --ink-2: #E7C3D0; --ink-3: #C095A8;
  --rule: #43273A; --rule-strong: #63384F;
  --band: #2C1823; --band-ink: #FBE9EF; --band-ink-2: #E7C3D0; --band-rule: #4E2D40;
  --mac-screen: var(--ground); --mac-bar: color-mix(in oklab, var(--ground), var(--ink) 8%); --mac-alu: #6B5A63; --mac-alu-2: #54454D;
  --body: #F7A8BE; --body-hi: #FCD3DE; --off: #8E7F86; --card: #FBE9EF; --zzz: #C095A8;
  --mac-edge: #7A4A66; --mac-glow: 0 0 56px -4px color-mix(in oklab, var(--body) 34%, transparent);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.125rem/1.6 var(--text); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.02; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--blush); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
kbd { font: inherit; white-space: nowrap; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 44px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* ---------- header ---------- */
.top { position: relative; height: 56px; }
.top nav { position: absolute; right: var(--gutter); top: 0; height: 40px; display: flex; align-items: center; gap: var(--space-lg); font-size: 1rem; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blush); }
.top nav .links { display: flex; gap: var(--space-lg); }

/* light / dark / auto switch */
.theme { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); }
.theme button {
  appearance: none; border: 0; background: none; color: var(--ink-3); cursor: pointer;
  width: 30px; height: 26px; border-radius: 999px; display: grid; place-items: center; padding: 0;
  transition: background-color .2s var(--glide), color .2s var(--glide);
}
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.theme svg { width: 16px; height: 16px; }

/* GitHub: shown, not live yet */

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--space-xl); align-items: center;
  padding-block: clamp(24px, 6vw, 72px) clamp(32px, 6vw, 80px);
}
.hero h1 { font-size: clamp(4.5rem, 15vw, 10.5rem); line-height: .86; letter-spacing: -.025em; margin-left: -.04em; }
.lede { margin-top: var(--space-lg); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; max-width: 36ch; color: var(--ink-2); }
.get { margin-top: var(--space-xl); display: grid; gap: 12px; justify-items: start; }
.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--ground); text-decoration: none;
  font: 700 1.15rem/1 var(--display); padding: 16px 26px 14px; border-radius: 999px;
  transition: background-color .2s var(--glide), color .2s var(--glide);
}
.button:hover { background: var(--blush); color: #2A0E22; }
.button svg { width: 18px; height: 18px; margin-top: -2px; }
.fine { font-size: .95rem; color: var(--ink-3); max-width: 44ch; line-height: 1.5; }

.stage { display: grid; justify-items: center; gap: var(--space-sm); }
.frame { position: relative; width: min(100%, 440px); aspect-ratio: 1; }
.stage button.blob { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; z-index: 2; }
.stage button.blob:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 24px; }
.stage svg { width: 100%; height: 100%; overflow: visible; display: block; }
.caption-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 12px; min-height: 3.2em; max-width: 40ch; }
#hero-caption { font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-align: center; }
#hero-caption b { font: 700 1.1rem/1 var(--display); color: var(--ink); }
.pause { appearance: none; background: none; border: 0; padding: 4px 2px; font: 500 .9rem var(--text); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; flex: none; }
.pause:hover { color: var(--ink); }
#hero-states { display: none; }

/* ---------- sections ---------- */
section { padding-block: clamp(64px, 9vw, 112px); }
section h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.01em; max-width: 18ch; }
.intro { margin-top: var(--space-md); max-width: 54ch; color: var(--ink-2); }

/* a day: rows on a timeline, each with the shape Plasmie takes */

/* status shapes: a loose row, no boxes */
.shapes { list-style: none; margin: var(--space-xl) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.shapes li { display: grid; gap: var(--space-sm); align-content: start; }
.shapes .mini { width: 100%; max-width: 132px; aspect-ratio: 112 / 104; }
.shapes .mini svg { width: 100%; height: 100%; overflow: visible; display: block; }
.shapes b { font: 700 1.25rem/1.15 var(--display); }
.shapes p { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* privacy: the one dark band */
.private { background: var(--band); color: var(--band-ink); }
.private h2 { color: var(--band-ink); }
.private .intro { color: var(--band-ink-2); }
.facts { margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.facts div { padding-block: var(--space-lg); border-top: 1px solid var(--band-rule); }
.facts dt { font: 700 1.3rem/1.2 var(--display); }
.facts dd { margin: 6px 0 0; color: var(--band-ink-2); max-width: 46ch; }

/* notes */
.notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl) clamp(32px, 6vw, 96px); align-items: start; }
.notes .col { display: grid; gap: var(--space-md); color: var(--ink-2); max-width: 52ch; }
.notes .col:first-of-type { padding-top: 0; }
.notes code, .install code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; background: var(--surface); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--rule); }

/* install */
.install-grid { margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-xl) clamp(32px, 6vw, 96px); }
.install h3 { font-size: 1.45rem; margin-bottom: var(--space-md); }
.needs { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-sm); color: var(--ink-2); }
.needs li::marker { color: var(--blush); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--space-lg); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-md); color: var(--ink-2); }
.steps li::before {
  content: counter(s); font: 800 1.35rem/1 var(--display); color: var(--face);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--body); display: grid; place-items: center; padding-top: 3px;
}
.steps b { color: var(--ink); font-weight: 600; }
.install .get { margin-top: var(--space-xl); }


/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .frame { width: min(84%, 320px); }
  .stage { margin-top: calc(-1 * var(--space-md)); }
  .facts, .notes, .install-grid { grid-template-columns: minmax(0, 1fr); }
  .top nav .links a:not(.nav-get) { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 1.0625rem; }
  .top nav .links { display: none; }
  .theme button { width: 26px; height: 24px; }
  .shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .theme button { transition: none; }
}
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.top nav .links { align-items: center; }

/* ---------- hero opening: MacBook opens, zoom to the notch, notch opens, Plasmie pops out ---------- */
.opening { position: absolute; inset: 0; pointer-events: none; display: none; }
/* the zoomed Mac passes behind the words */
.hero > div:first-child { position: relative; z-index: 2; }
.stage { position: relative; z-index: 1; }
.scrub .frame:not(.finished) .opening { display: block; }
.scrub .frame:not(.finished) > button.blob { opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.scrub .frame:not(.finished) ~ .caption-row { visibility: hidden; }
.scene { position: absolute; inset: 0; transform-origin: 0 0; }
/* The Mac is two hinged planes: the deck lies flat, the lid starts shut on top of it
   (back cover up) and swings up around the rear hinge until the screen faces you. */
.mac { position: absolute; left: 10%; width: 80%; top: 14%; }
.scrub .lid, .scrub .deck, .scrub .deck-edge { transform-origin: 0 0; }   /* matrices are built with origin 0 0 */  /* perspective lives in each part's transform (plasmie.js) */
.lid {
  position: relative; aspect-ratio: 16 / 10.4; transform-style: preserve-3d;
  transform-origin: 50% 100%; transform: rotateX(-90deg);
}
/* which face shows is chosen in plasmie.js from the viewing angle (WebKit ignores backface-visibility here) */
.lid-front, .lid-back { position: absolute; inset: 0; border-radius: 14px 14px 4px 4px; }
/* dark mode: a lighter rim and a soft pink glow keep the black bezel visible */
.lid-front { background: var(--bezel); padding: 2.2% 2.2% 2.8%; box-shadow: 0 0 0 1px var(--mac-edge), var(--mac-glow); }
.lid-back { background: var(--mac-alu); box-shadow: inset 0 0 0 1px var(--mac-alu-2); visibility: hidden; }
.screen { position: relative; height: 100%; background: var(--mac-screen); border-radius: 6px 6px 2px 2px; }
.menubar { height: 5%; background: var(--mac-bar); border-radius: 6px 6px 0 0; }
/* the notch reaches up into the bezel so no seam shows between them, even zoomed in */
.notch-cut { position: absolute; top: -2px; left: 50%; width: 15%; height: calc(5.6% + 2px); transform: translateX(-50%); background: var(--bezel); border-radius: 0 0 6px 6px; }
.deck {
  position: absolute; left: 0; right: 0; top: 100%; aspect-ratio: 16 / 10.4;
  background: var(--mac-alu); border-radius: 4px 4px 14px 14px;
  transform-origin: 50% 0; transform: translateY(3px) rotateX(90deg);
}
.deck .keys { position: absolute; left: 9%; right: 9%; top: 8%; height: 42%; background: var(--mac-alu-2); border-radius: 6px; }
.deck.covered .keys, .deck.covered .pad { visibility: hidden; }
.deck .pad { position: absolute; left: 33%; right: 33%; top: 58%; height: 32%; border: 1px solid var(--mac-alu-2); border-radius: 8px; }
/* the deck's front edge: its own transform walks along the deck plane, then stands up (plasmie.js) */
.deck-edge { position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: var(--mac-alu-2); border-radius: 0 0 10px 10px; transform-origin: 50% 0; }
.island {
  position: absolute; left: 50%; top: 0; width: 0; height: 0; visibility: hidden;
  transform: translateX(-50%); background: var(--bezel); overflow: hidden;
  /* glow on the sides and bottom only: the top edge is where it joins the bezel */
  box-shadow: var(--mac-glow); clip-path: inset(0 -96px -96px -96px);
}
/* laid out at the island's full size; the growing island reveals it */
.island-inner { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.island .ear { flex: none; width: 34%; aspect-ratio: 112 / 104; display: block; }
.island .ear svg { width: 100%; height: 100%; overflow: visible; display: block; }
.island-ui { display: grid; gap: 10px; min-width: 0; }
.island-ui b { font: 800 1.5rem/1 var(--display); color: #FDF1F4; }
.island .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.island .chips i { font: 600 .8rem/1 var(--text); font-style: normal; color: #FDF1F4; border: 1px solid #5A2C4B; border-radius: 999px; padding: 6px 10px; }
@media (max-width: 520px) {
  .island { gap: 10px; padding: 0 14px; }
  .island-ui b { font-size: 1.15rem; }
  .island .chips i { font-size: .7rem; padding: 5px 7px; }
}

/* ---------- one screen per section, snapping as you scroll ---------- */
html { scroll-snap-type: y mandatory; }
.top { scroll-snap-align: start; }
.hero { min-height: calc(100svh - 56px); align-content: center; padding-block: var(--space-lg) var(--space-xl); }
section {
  min-height: 100svh; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(40px, 6vh, 80px);
}
section > .wrap { width: 100%; }

/* sections taller than a phone screen still scroll through; trim them so most fit */
@media (max-width: 520px) {
  section h2 { font-size: 1.9rem; }
  .intro { margin-top: var(--space-sm); font-size: 1rem; }
  .facts { margin-top: var(--space-md); }
  .facts div { padding-block: var(--space-sm); }
  .facts dt { font-size: 1.05rem; }
  .facts dd { margin-top: 2px; }
  .shapes { margin-top: var(--space-lg); }
  .install-grid { margin-top: var(--space-lg); gap: var(--space-lg); }
  .install .get { margin-top: var(--space-lg); }
  .steps { gap: var(--space-md); }
  .frame { width: min(72%, 260px); }
}
/* fitting each section to one screen */
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facts div:last-child:nth-child(odd) { grid-column: auto; } }
.facts { margin-top: var(--space-lg); }
.facts div { padding-block: var(--space-md); }
@media (max-width: 520px) {
  section { padding-block: 28px; }
  .shapes { gap: var(--space-md); }
  .shapes .mini { max-width: 84px; }
  .shapes p { font-size: .9rem; }
  .facts div { padding-block: 7px; }
  .facts dd { font-size: .9rem; line-height: 1.45; }
  .hero { gap: var(--space-md); }
  .lede { margin-top: var(--space-md); font-size: 1.1rem; }
  .get { margin-top: var(--space-lg); }
  .frame { width: min(62%, 230px); }
}
@media (max-height: 780px) and (min-width: 521px) {
  section h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
  .intro { margin-top: var(--space-sm); }
  .facts div { padding-block: 10px; }
  .facts dd { font-size: 1rem; }
}
@media (max-width: 520px) { .private { padding-block: 20px; } }
.tagline { margin-top: var(--space-md); font: 700 clamp(1.5rem, 2.8vw, 2.3rem)/1.1 var(--display); color: var(--ink); max-width: 20ch; text-wrap: balance; }
.lede { margin-top: var(--space-md); }
@media (max-width: 520px) { .tagline { font-size: 1.45rem; margin-top: var(--space-sm); } .lede { font-size: 1.02rem; } .hero h1 { font-size: 4.2rem; } }

/* scroll-driven opening: the hero pins while the track scrolls past */
.hero-track { position: relative; }
.scrub .hero-track { height: 260svh; }
.scrub .hero-pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; overflow: hidden; }
.scrub .hero-pin .hero { min-height: 0; width: 100%; }
/* the track is one tall snap area, so you can scrub freely inside it; it starts at the very top */
/* the opening locks at three stops (lid open, Plasmie in the island, Plasmie alone);
   a flick can't skip one */
.hero-stop { display: none; }
.scrub .hero-stop { display: block; position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
/* phones: the opening gets the room; text tightens so both fit one screen */
@media (max-width: 520px) {
  .scrub .hero-pin .hero { padding-block: 12px; gap: 4px; }
  .hero h1 { font-size: 3.6rem; }
  .tagline { font-size: 1.3rem; }
  .lede { font-size: .98rem; line-height: 1.5; }
  .get { margin-top: var(--space-md); gap: 8px; }
  .button { font-size: 1.05rem; padding: 13px 22px 11px; }
  .fine { font-size: .82rem; }
  .frame { width: min(78%, 300px); }
  .caption-row { min-height: 2.6em; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .hero h1 { font-size: 3rem; }
  .lede { font-size: .92rem; }
  .frame { width: min(62%, 230px); }
}

/* ---------- Ask demo: the app's Ask overlay (DESIGN.md), playing one made-up question ---------- */
.ask-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-xl) clamp(32px, 5vw, 72px); align-items: center; }
.ask-points { margin: var(--space-lg) 0 0; padding-left: 1.1em; display: grid; gap: var(--space-sm); color: var(--ink-2); max-width: 46ch; }
.ask-points li::marker { color: var(--blush); }
.ask-demo { margin: 0; display: grid; gap: var(--space-sm); }
.ask-demo figcaption { font-size: .85rem; color: var(--ink-3); }
.ask-panel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 22px; padding: 22px;
  min-height: 330px;
}
/* the blob shrinks once the answer arrives; scaled, not resized, so the panel never reflows */
.ask-blob { display: block; width: 88px; height: 82px; transform-origin: 0 0; transition: transform .42s var(--glide); }
.ask-blob svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ask-demo.answered .ask-blob { transform: scale(.64); }
.ask-main { display: grid; gap: 10px; min-width: 0; }
.ask-field {
  position: relative; display: flex; align-items: center; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid var(--rule-strong); border-radius: 12px; background: var(--ground);
  font: 500 1.02rem/1.35 var(--text); color: var(--ink);
}
.ask-ph { color: var(--ink-3); }
.caret { display: none; width: 2px; height: 1.15em; background: var(--blush); margin-left: 1px; }
.ask-demo.typing .caret { display: inline-block; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ask-status { font-size: .85rem; color: var(--ink-3); min-height: 1.3em; }
.ask-answer { font-size: 1rem; line-height: 1.55; color: var(--ink); min-height: 4.6em; }
/* Source pills, matching the app: [9pt dot] [tag, 11pt, secondary] [title, 12pt, one line].
   Fill 6% of the text colour, outline 12%; no pink. Dots are the map's type colours. */
.ask-src-wrap { display: grid; gap: 6px; }
.ask-src-head { font-size: 11px; line-height: 1; color: var(--ink-3); }
.ask-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.ask-sources li {
  --pill: var(--ink); --graphite: #6B7285; --type: var(--graphite);
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0;
  padding: 4px 10px 4px 7px; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--pill) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pill) 12%, transparent);
}
.ask-sources li:hover { background: color-mix(in oklab, var(--pill) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pill) 20%, transparent); }
.src-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--type); }
.src-tag { font-size: 11px; line-height: 1.2; color: var(--ink-3); flex: none; }
.src-title { font-size: 12px; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ask-sources li[data-type="decision"] { --type: #FFC94A; }
.ask-sources li[data-type="gotcha"] { --type: #6EC5F0; }
.ask-sources li[data-type="pattern"] { --type: #6CC18E; }
.ask-sources li[data-type="how-to"] { --type: #2A2E3A; }
.ask-sources li[data-type="map"] .src-dot { background: color-mix(in oklab, var(--graphite) 35%, transparent); box-shadow: inset 0 0 0 1.6px var(--graphite); }
.ask-sources li[data-type="digest"] .src-dot { background: none; box-shadow: inset 0 0 0 1.6px var(--graphite); }
:root[data-theme="dark"] .ask-sources li { --graphite: #A3AABA; }
:root[data-theme="dark"] .ask-sources li[data-type="how-to"] { --type: #DADDE4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ask-sources li { --graphite: #A3AABA; }
  :root:not([data-theme="light"]) .ask-sources li[data-type="how-to"] { --type: #DADDE4; }
}
@media (max-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }
@media (max-width: 520px) {
  .ask-points { margin-top: var(--space-md); font-size: .92rem; }
  .ask-points li:nth-child(2) { display: none; }
  .ask-panel { padding: 14px; gap: 12px; min-height: 300px; border-radius: 18px; }
  .ask-blob { width: 56px; height: 52px; }
  .ask-demo.answered .ask-blob { transform: scale(.72); }
  .ask-field { font-size: .9rem; min-height: 40px; padding: 8px 10px; }
  .ask-answer { font-size: .88rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .ask-blob { transition: none; } }

/* install step 3: a small shortcut into System Settings, clearly secondary to Download */
.settings-link {
  display: inline-flex; align-items: center; margin-top: 10px;
  font: 600 .9rem/1 var(--text); color: var(--ink); text-decoration: none;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 8px 14px; background: transparent;
}
.settings-link:hover { border-color: var(--ink-3); background: var(--surface); }
.settings-link[hidden] { display: none; }

/* ---------- a day: time axis with Plasmie's shape at each stop ---------- */
/* heading left, subhead right on wide screens, so the header doesn't leave half the row empty */
.sec-head { display: grid; grid-template-columns: auto minmax(0, 50ch); justify-content: start; align-items: last baseline; gap: var(--space-md) clamp(32px, 4vw, 56px); }
.sec-head h2 { max-width: none; }
.sec-head .intro { margin-top: 0; }
@media (max-width: 900px) { .sec-head { display: block; } .sec-head .intro { margin-top: var(--space-sm); } }
.timeline { list-style: none; margin: var(--space-xl) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: calc(96px + 9px); height: 2px; background: var(--rule-strong); }
.timeline li { display: grid; grid-template-rows: 96px 20px auto auto; gap: 0; align-content: start; }
.tl-shape { display: block; width: 104px; height: 96px; }
.tl-shape svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--body); box-shadow: 0 0 0 2px var(--face); align-self: center; position: relative; margin-left: 4px; }
.tl-time { font: 800 clamp(1.5rem, 2.3vw, 2rem)/1.1 var(--display); color: var(--ink); margin-top: var(--space-md); }
.timeline p { margin-top: var(--space-sm); color: var(--ink-2); max-width: 34ch; }
.timeline a { color: var(--ink); font-weight: 600; }
.tl-note { margin-top: var(--space-lg); font-size: .92rem; color: var(--ink-3); white-space: nowrap; }
/* phones and narrow windows: the axis runs down the left */
@media (max-width: 900px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
  .timeline::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .timeline li { grid-template-columns: 16px 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .tl-dot { grid-column: 1; grid-row: 1; margin-left: 1px; }
  .tl-shape { grid-column: 2; grid-row: 1; width: 56px; height: 52px; }
  .tl-time { grid-column: 3; grid-row: 1; margin-top: 0; font-size: 1.4rem; }
  .timeline p { grid-column: 2 / -1; grid-row: 2; margin-top: 4px; max-width: 60ch; }
  .tl-note { margin-top: var(--space-lg); }
}
@media (max-width: 520px) {
  .timeline { gap: var(--space-md); }
  .timeline li { grid-template-columns: 16px 44px minmax(0, 1fr); column-gap: 10px; }
  .tl-shape { width: 44px; height: 41px; }
  .tl-time { font-size: 1.2rem; }
  .timeline p { font-size: .92rem; line-height: 1.5; }
  .tl-note { font-size: .82rem; margin-top: var(--space-md); }
}

/* Download on a phone: say plainly it is a Mac app */
.phone-note { display: none; font-size: .9rem; color: var(--ink-2); max-width: 40ch; }
@media (max-width: 760px) and (pointer: coarse), (max-width: 520px) { .phone-note { display: block; } }
@media (max-width: 520px) {
  .install h3 { font-size: 1.2rem; margin-bottom: var(--space-sm); }
  .needs { gap: 4px; }
  .steps { gap: 12px; }
  .steps li { grid-template-columns: 2rem minmax(0, 1fr); gap: 12px; }
  .steps li::before { width: 2rem; height: 2rem; font-size: 1.1rem; }
  .settings-link { margin-top: 6px; padding: 6px 12px; font-size: .85rem; }
  .install .get { margin-top: var(--space-md); }
}

/* ---------- footer: the page's sign-off ---------- */
/* The last section shrinks by the footer's height (set by plasmie.js), so "Install Plasmie."
   and the footer share one screen and the page ends on that stop, with no extra one. */
#install { min-height: calc(100svh - var(--foot-h, 0px)); }
.site-foot {
  background: color-mix(in oklab, var(--ground), var(--ink) 5%);
  padding-block: clamp(32px, 5vh, 56px) var(--space-lg); color: var(--ink-2); scroll-snap-align: end;
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--space-xl); align-items: start; }
.foot-brand { display: grid; gap: 6px; }
.foot-mark { display: flex; align-items: center; gap: 10px; font: 800 1.6rem/1 var(--display); color: var(--ink); }
.foot-mark img { display: block; width: 34px; height: auto; }
.foot-line { font-size: 1rem; color: var(--ink-2); }
.foot-version { font-size: .9rem; color: var(--ink-3); }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: end; }
.foot-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--ink-3); }
.foot-legal {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px var(--space-lg);
  padding-top: var(--space-md); border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  font-size: .82rem; color: var(--ink-3);
}
.foot-legal p { max-width: 70ch; }
.foot-top { color: var(--ink-3); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--ink-3) 50%, transparent); text-underline-offset: 3px; white-space: nowrap; }
.foot-top:hover { color: var(--ink); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .foot-links ul { justify-items: start; gap: 0; }
  .foot-links a { min-height: 44px; }                      /* comfortable tap targets */
  .foot-top { display: inline-flex; align-items: center; min-height: 44px; }
}
/* install shares its screen with the footer: tighter spacing so both fit */
#install { padding-block: clamp(24px, 4vh, 48px) clamp(16px, 2.5vh, 32px); }
#install .install-grid { margin-top: var(--space-lg); }
#install .get { margin-top: var(--space-lg); }
.site-foot { padding-block: clamp(24px, 3.5vh, 40px) 16px; }
.foot-grid { row-gap: var(--space-md); }
@media (max-width: 760px) {
  .foot-links ul { grid-template-columns: repeat(3, max-content); column-gap: var(--space-lg); }
  .foot-links li:last-child { grid-column: 1 / -1; }
}

/* ---------- icons: Lucide, one inline sprite; sized to the text, beside it, never decorative tiles ---------- */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* list rows: the icon sits on the first line, centred on it */
.icon-list { list-style: none; padding-left: 0; }
.icon-list li { display: grid; grid-template-columns: 1.15em minmax(0, 1fr); column-gap: 10px; align-items: start; }
.icon-list .icon, .icon-paras .icon { margin-top: calc((1lh - 1.15em) / 2); color: var(--ink-3); }
.icon-paras p { display: grid; grid-template-columns: 1.15em minmax(0, 1fr); column-gap: 12px; align-items: start; }
.facts dt { display: flex; align-items: center; gap: 8px; }
.facts dt .icon { color: var(--band-ink-2); width: 1.05em; height: 1.05em; }
.settings-link { gap: 7px; }
.settings-link .icon { width: 1.05em; height: 1.05em; }