/* jevie.ai, the home page (index.html, home.js). One idea a screen, few words,
   the product doing it. Every colour is a variable a theme dot can change, so
   the whole page, the Mac and the phone wear the theme at once. */

:root {
  --bg: #08080b;
  --ink: #f2f0f4;
  --ink2: color-mix(in srgb, var(--ink) 74%, var(--bg));
  --ink3: color-mix(in srgb, var(--ink) 58%, var(--bg));
  --panel: #141418;
  --panel2: color-mix(in srgb, var(--panel) 70%, var(--ink) 6%);
  --sel: #24242b;
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --accent: #f0a6bd;
  --glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --rose: #ff5f9e; --violet: #9b6bff; --teal: #2fb5d8; --amber: #ffb23e; --green: #34c76a;
  --sans: Geist, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.16, 1, .3, 1); /* expo out, no overshoot: calm, never a bounce (5 November 2026) */
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}
:root[data-light] { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
  transition: background-color .7s var(--ease), color .7s var(--ease);
  overflow-x: clip;
}
a { color: inherit; }
kbd { font: 500 .78em var(--sans); padding: .12em .42em; border-radius: 6px; background: var(--sel); color: var(--ink2); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ── Bar ───────────────────────────────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .3s, background-color .7s var(--ease);
}
.bar.scrolled { border-bottom-color: var(--line); }
.mark { display: inline-flex; align-items: center; gap: 9px; font: 650 17px var(--sans); letter-spacing: -.02em; text-decoration: none; }
.mark-jev { width: 26px; height: 26px; }
.bar-nav { display: flex; align-items: center; gap: 26px; }
.bar-link { font: 450 14px var(--sans); color: var(--ink2); text-decoration: none; transition: color .2s; }
.bar-link:hover { color: var(--ink); }
.bar-get { font: 520 13px var(--sans); text-decoration: none; background: color-mix(in srgb, var(--ink) 92%, var(--bg)); color: var(--bg); padding: 7px 13px; border-radius: 9px; transition: transform .2s var(--spring); }
.bar-get:hover { transform: translateY(-1px); }
@media (max-width: 640px) { .bar-link { display: none; } }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { position: relative; display: grid; justify-items: center; align-content: center; text-align: center; min-height: 92svh; padding: 100px var(--gutter) 60px; }

.hero-jev { width: 92px; height: 92px; margin-bottom: 26px; cursor: pointer; }
.intro h1 {
  margin: 0; font: 620 clamp(46px, 6.4vw, 80px)/1.04 var(--sans); letter-spacing: -.035em;
  text-wrap: balance;
}
.intro h1 span { color: var(--ink3); transition: color .7s var(--ease); }
.hero-line { margin: 24px 0 0; font: 450 clamp(16px, 1.5vw, 18px)/1.5 var(--sans); color: var(--ink2); max-width: 30ch; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 44px; }
.get, .alt {
  font: 600 14px var(--sans); text-decoration: none; padding: 10px 18px; border-radius: 999px;
  transition: transform .25s var(--spring), background-color .7s var(--ease), color .7s var(--ease);
}
.get { background: color-mix(in srgb, var(--ink) 92%, var(--bg)); color: var(--bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 20px -6px color-mix(in srgb, var(--ink) 30%, transparent); }
.alt { color: var(--ink2); background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.get:hover, .alt:hover { transform: translateY(-1px); }
.fine { margin: 16px 0 0; font: 400 11.5px var(--mono); color: var(--ink3); letter-spacing: .01em; }

/* The arrival: each piece rises out of a blur, a beat after the last. */
.rise { animation: rise 1.8s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ── The stage: a Mac and a phone, Jevie at work on both ───────────── */
.stage { position: relative; width: min(1040px, 100%); margin-top: 56px; }
.dmac { position: relative; width: 100%; }
.dmac-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px 18px 6px 6px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.65), 0 0 0 10px color-mix(in srgb, var(--panel) 92%, #000), 0 0 0 11px color-mix(in srgb, var(--ink) 10%, transparent);
  background:
    radial-gradient(70% 90% at 20% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    radial-gradient(60% 80% at 90% 90%, color-mix(in srgb, var(--violet) 35%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 80%, #000);
  transition: background .7s var(--ease);
}
.dmac-base { height: 16px; margin: 10px -4% 0; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, #888), color-mix(in srgb, var(--panel) 90%, #000)); }
.menu { position: absolute; inset: 0 0 auto; height: 22px; display: flex; gap: 14px; align-items: center; padding: 0 14px; font: 600 10.5px var(--sans); color: rgba(255,255,255,.85); background: rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.menu span + span { font-weight: 400; }
.menu .clock { margin-left: auto; font-weight: 500; }

/* The palette, as the app draws it: one width, one height, glass. */
.pal {
  position: absolute; left: 50%; top: 15%; width: 64%; height: 66%; transform: translateX(-50%);
  border-radius: 16px; display: grid; grid-template-rows: 46px minmax(0, 1fr) 30px; text-align: left;
  background: color-mix(in srgb, var(--panel) 93%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), inset 0 0 0 .5px color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink); isolation: isolate; transition: background-color .7s var(--ease), color .7s var(--ease);
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pal::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: conic-gradient(from var(--a), var(--rose), var(--violet), var(--teal), var(--amber), var(--rose)); animation: turn 3.2s linear infinite;
}
.pal::before { padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pal.thinking::before { opacity: 1; }
/* Its glow stays outside the edge: the words inside read as they are. */
.pal { transition: background-color .7s var(--ease), color .7s var(--ease), box-shadow .6s var(--ease); }
.pal.thinking { box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 50px -10px color-mix(in srgb, var(--violet) 60%, transparent), 0 0 80px -24px color-mix(in srgb, var(--rose) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent); }
@keyframes turn { to { --a: 360deg; } }
.pal-jev { position: absolute; left: 18px; top: -27px; width: 38px; height: 34px; z-index: 2; }
.pal-field { display: flex; align-items: center; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 450 clamp(12px, 1.6vw, 16px) var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.pal-field .ph { color: var(--ink3); }
.caret { width: 1.5px; height: 1.1em; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pal-body { overflow: hidden; padding: 6px 8px; font-size: clamp(10px, 1.25vw, 12.5px); }
.pal-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; border-top: 1px solid var(--line); font: 450 clamp(9px, 1.05vw, 11px) var(--sans); color: var(--ink3); }
.pal-foot .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
.pal.thinking .pal-foot .dot { background: var(--violet); }
.pal-foot kbd { font-size: .95em; padding: .05em .4em; }

.row { display: flex; align-items: center; gap: 9px; height: 2.75em; padding: 0 8px; border-radius: 9px; animation: in .45s var(--ease) both; animation-delay: var(--d, 0s); }
.row.on { background: var(--sel); }
.row .t { font-weight: 450; white-space: nowrap; }
.row .s { color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tile { width: 1.85em; height: 1.85em; flex: none; border-radius: .45em; display: grid; place-items: center; background: linear-gradient(180deg, var(--h1), var(--h2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.tile svg { width: 62%; height: 62%; }
.thumb { width: 2.2em; height: 2.2em; flex: none; border-radius: .4em; background: var(--p); }
.lbl { font: 600 .82em var(--sans); color: var(--ink3); padding: .9em 8px .4em; animation: in .4s var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translateY(4px); filter: blur(4px); } }

.ans { padding: 10px 12px; display: grid; gap: 9px; }
.ans .trail { display: flex; align-items: center; gap: 6px; font-size: .85em; color: var(--ink3); animation: in .4s var(--ease) both; }
.fav { width: 1.35em; height: 1.35em; border-radius: 50%; display: grid; place-items: center; font: 700 .62em var(--sans); color: #fff; box-shadow: 0 0 0 1.5px var(--panel); }
.fav + .fav { margin-left: -.4em; }
.ans .lead { font: 520 1.32em/1.35 var(--sans); letter-spacing: -.01em; }
.w { animation: ink .45s var(--ease) both; }
@keyframes ink { from { opacity: 0; filter: blur(5px); } }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; animation: in .5s var(--ease) .5s both; }
.day { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 8px; padding: 6px 2px; text-align: center; font-size: .82em; color: var(--ink3); display: grid; gap: 2px; }
.day b { font-size: 1.15em; color: var(--ink); font-variant-numeric: tabular-nums; }
.day.mk { box-shadow: inset 0 0 0 1.2px var(--teal); }
.day .r { color: var(--teal); font-weight: 600; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; animation: in .5s var(--ease) .8s both; }
.chip { font: 500 .82em var(--sans); background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 999px; padding: .35em .8em; }
.steps { padding: 12px 14px; display: grid; gap: 8px; font-size: .95em; }
.step { display: flex; gap: 8px; align-items: center; color: var(--ink2); animation: in .35s var(--ease) both; }
.step.done { color: var(--ink3); }
.step i { width: 1em; text-align: center; font-style: normal; color: var(--ink3); }
.done-card { margin: 4px 0 0; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--green) 14%, transparent); display: flex; gap: 10px; align-items: center; animation: in .5s var(--spring) both; }
.done-card b { display: block; font-weight: 560; }
.done-card span { color: var(--ink2); font-size: .9em; }

/* The phone, beside the Mac: say it there, done here. */
.phone {
  position: absolute; right: -3%; bottom: -6%; width: 21%; aspect-ratio: 9 / 19.2; border-radius: 26px; padding: 6px;
  background: color-mix(in srgb, var(--panel) 85%, #000); box-shadow: 0 30px 80px -10px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
  transition: background-color .7s var(--ease);
}
.phone-screen { position: relative; height: 100%; border-radius: 21px; overflow: hidden; background: var(--bg); display: grid; align-content: center; justify-items: center; gap: 10px; padding: 14px; transition: background-color .7s var(--ease); }
.phone-screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 34%; height: 4.5%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.ph-jev { width: 46%; aspect-ratio: 1; }
.ph-said { min-height: 3.2em; font: 500 clamp(9px, 1.15vw, 12.5px)/1.35 var(--sans); text-align: center; color: var(--ink); }
.ph-said .w { color: var(--ink); }
.ph-status { font: 500 clamp(8px, .95vw, 10.5px) var(--sans); color: var(--ink3); min-height: 1.2em; }
.ph-mic { position: absolute; bottom: 9%; width: 28%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 10%, transparent); transition: background-color .3s, transform .3s var(--spring); }
.ph-mic svg { width: 40%; color: var(--ink2); }
.phone.listening .ph-mic { background: var(--rose); transform: scale(1.08); }
.phone.listening .ph-mic svg { color: #fff; }
.phone.listening .ph-status { color: var(--rose); }

@media (max-width: 720px) {
  .stage { margin-top: 44px; }
  .pal { width: 84%; top: 12%; height: 76%; }
  .phone { width: 30%; right: -1%; bottom: -10%; border-radius: 18px; padding: 4px; }
  .phone-screen { border-radius: 15px; }
  .pal-jev { width: 30px; height: 27px; top: -21px; }
}

/* What is being shown, and the theme dots. */
.says { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 64px; }
.say {
  font: 500 14px var(--sans); color: var(--ink2); background: transparent; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, background-color .3s, box-shadow .3s;
}
.say:hover { color: var(--ink); }
.say[aria-pressed="true"] { color: var(--ink); background: var(--sel); box-shadow: none; }
.themes { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 22px; }
.themes-label { font: 500 13px var(--sans); color: var(--ink3); margin-right: 4px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(135deg, var(--sb) 0 50%, var(--sa) 50% 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); transition: transform .3s var(--spring), box-shadow .3s;
}
.swatch:hover { transform: scale(1.15); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.theme-name { min-width: 7em; text-align: left; font: 500 13px var(--sans); color: var(--ink2); }

/* ── Sections ──────────────────────────────────────────────────────── */
.sec { padding: 220px var(--gutter) 0; display: grid; justify-items: center; text-align: center; }
.sec.show { padding-top: 40px; }
.sec h2 { margin: 0; font: 560 clamp(20px, 2.2vw, 26px)/1.3 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.sec h2 span:not(.wd) { color: var(--ink3); transition: color .7s var(--ease); }
.sec h2 .wd { color: inherit; }
.sec .sub { margin: 18px 0 0; font: 450 clamp(16px, 1.8vw, 19px)/1.45 var(--sans); color: var(--ink2); max-width: 34ch; }
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease), filter 1.6s var(--ease); transition-delay: var(--d, 0s); }
.reveal.seen { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } }

/* Every screen. */
.devices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; width: min(980px, 100%); margin-top: 56px; }
.device { display: grid; justify-items: center; gap: 12px; padding: 26px 12px 22px; border-radius: 22px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .7s var(--ease); }
.device-jev { width: 64px; height: 64px; }
.device b { font: 600 17px var(--sans); letter-spacing: -.01em; }
.device em { font: 500 12px var(--sans); font-style: normal; color: var(--ink3); }
.device.now em { color: var(--green); }
@media (max-width: 760px) { .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .device:first-child { grid-column: span 2; } }

/* Things to say. */
.lines { list-style: none; margin: 56px 0 0; padding: 0; width: min(820px, 100%); display: grid; text-align: left; }
.lines li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 4px; border-top: 1px solid var(--line); }
.lines li:last-child { border-bottom: 1px solid var(--line); }
.lines q { font: 450 clamp(17px, 2vw, 22px)/1.3 var(--sans); letter-spacing: -.015em; quotes: "“" "”"; min-width: 0; }
.lines .does { flex: none; font: 500 13px var(--sans); color: var(--ink3); white-space: nowrap; }
@media (max-width: 560px) { .lines li { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Make it yours: a living theme, live. */
.living { position: relative; width: min(1100px, 100%); margin-top: 56px; aspect-ratio: 16 / 8; border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: #06121a; }
.living canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.living-picks { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px; border-radius: 999px; background: rgba(10,12,16,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.living-picks button { font: 500 13px var(--sans); color: rgba(255,255,255,.75); background: transparent; border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.living-picks button[aria-checked="true"] { background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 640px) { .living { aspect-ratio: 4 / 5; } }

/* Yours alone. */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(980px, 100%); margin-top: 56px; text-align: left; }
.fact { padding: 26px; border-radius: 22px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.fact b { display: block; font: 600 19px/1.25 var(--sans); letter-spacing: -.015em; }
.fact span { display: block; margin-top: 8px; font: 450 14.5px/1.5 var(--sans); color: var(--ink2); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* Pricing. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(980px, 100%); margin-top: 56px; text-align: left; }
.plan { padding: 28px; border-radius: 22px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.plan.pick { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.plan h3 { margin: 0; font: 600 16px var(--sans); color: var(--ink2); }
.plan .price { margin: 10px 0 18px; font: 600 32px/1 var(--sans); letter-spacing: -.03em; }
.plan .price small { font: 450 14px var(--sans); color: var(--ink3); letter-spacing: 0; margin-left: 6px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font: 450 14.5px/1.4 var(--sans); color: var(--ink2); }
.plan li { display: grid; grid-template-columns: 1.1em 1fr; column-gap: 8px; text-wrap: pretty; }
.plan li::before { content: "✓"; color: var(--ink3); font-weight: 600; }
.plans-fine { margin: 22px 0 0; font: 450 13px var(--sans); color: var(--ink3); }
.plans-fine a { color: var(--ink2); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 440px; } }

/* The end: Jevie again, and the button. */
.end { padding: 260px var(--gutter) 180px; display: grid; justify-items: center; text-align: center; }
.end-jev { width: 84px; height: 84px; margin-bottom: 24px; }
.end h2 { margin: 0; font: 620 clamp(40px, 5vw, 64px)/1.05 var(--sans); letter-spacing: -.035em; }
/* At dawn the finish is Jevie's own colour: grey vanished into the light. */
.end h2 span { color: var(--accent); transition: color .7s var(--ease); text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.end h2 { text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.end .fine { color: var(--ink2); }

footer { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font: 450 13.5px var(--sans); color: var(--ink3); }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer a { text-decoration: none; color: var(--ink3); transition: color .2s; }
footer a:hover { color: var(--ink); }
footer .x { display: inline-flex; gap: 7px; align-items: center; }
footer .x svg { width: 14px; height: 14px; }

/* ── The hero's caption: who Jevie is right now ────────────────────── */
.hero-who { margin: -14px 0 22px; font: 450 12px var(--mono); color: var(--ink3); letter-spacing: .02em; min-height: 1.2em; transition: opacity .4s var(--ease); }
.hero-who.swap { opacity: 0; }

/* ── Agents: the real wall, tilted back, straightening as it comes ─── */
.names { margin: 14px 0 0; font: 450 12px var(--mono); color: var(--ink3); }
.wall-stage { --p: 0; position: relative; width: min(1180px, 100%); margin-top: 64px; perspective: 1600px; }
.wall-shot {
  display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,.8), 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p)) * 26deg)) scale(calc(.9 + var(--p) * .1)) translateY(calc((1 - var(--p)) * 40px));
  opacity: calc(.35 + var(--p) * .65);
}
.wall-phone { position: absolute; right: -2%; bottom: -14%; width: 19%; margin: 0; transform: translateY(calc((1 - var(--p)) * 120px)); opacity: var(--p); }
.wall-phone img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 6px color-mix(in srgb, var(--panel) 90%, #000), 0 0 0 7px color-mix(in srgb, var(--ink) 12%, transparent); }
.wall-phone figcaption { margin-top: 14px; font: 450 12px var(--mono); color: var(--ink3); text-align: center; }
@media (max-width: 720px) { .wall-phone { width: 30%; bottom: -26%; } }

/* ── Answers: three columns of real answers, drifting ──────────────── */
.flow {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  width: min(1180px, 100%); height: 760px; margin-top: 64px; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.col { display: grid; gap: 18px; align-content: start; animation: flowup 150s linear infinite; }
.col.up { animation-direction: reverse; animation-duration: 180s; }
.col img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: #0b0b0d; }
@keyframes flowup { to { transform: translateY(-50%); } }
.flow:hover .col { animation-play-state: paused; }
@media (max-width: 720px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 620px; } .col:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .col { animation: none; } }

/* ── Voice: the wave and the sentence ──────────────────────────────── */
.voice h2 kbd { font: 560 .8em var(--sans); padding: .05em .35em; border-radius: .25em; background: var(--sel); color: var(--ink); }
.voice-stage { position: relative; width: min(1080px, 100%); margin-top: 48px; height: 300px; display: grid; place-items: center; }
.wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.heard { position: relative; margin: 210px 0 0; font: 500 clamp(20px, 2.6vw, 30px)/1.3 var(--sans); letter-spacing: -.02em; min-height: 1.3em; }
.heard .w { color: var(--ink3); transition: color .3s; }
.heard .w.firm { color: var(--ink); }
.heard .w.gone { color: var(--ink3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rose) 70%, transparent); opacity: .5; }
.heard .w.out { display: none; }

/* ── Hands: a Finder window, a comet, circles drawn by hand ────────── */
.finder { position: relative; width: min(860px, 100%); margin-top: 56px; border-radius: 14px; overflow: hidden; text-align: left;
  background: color-mix(in srgb, var(--panel) 96%, #000); box-shadow: 0 40px 100px -30px rgba(0,0,0,.7), 0 0 0 1px var(--line); }
.finder-top { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 600 12.5px var(--sans); color: var(--ink2); }
.finder-top i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.finder-top span { margin-left: 10px; }
.finder-top em { margin-left: auto; font: 500 12.5px var(--sans); font-style: normal; color: var(--ink); background: var(--sel); padding: 4px 10px; border-radius: 8px; }
.files { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 10px; padding: 28px 22px 32px; }
.file { display: grid; justify-items: center; gap: 8px; font: 450 11px/1.3 var(--sans); color: var(--ink2); text-align: center; word-break: break-word; }
.file .ic { width: 52px; height: 62px; border-radius: 6px 14px 6px 6px; background: var(--fc, #dfe6f2); box-shadow: inset 0 -16px 0 rgba(0,0,0,.08); position: relative; }
.file .ic.img { width: 62px; height: 46px; border-radius: 6px; background: var(--fc); margin: 8px 0; }
.file .ic b { position: absolute; left: 6px; bottom: 4px; font: 700 9px var(--sans); color: rgba(0,0,0,.45); }
.marks { position: absolute; inset: 40px 0 0; width: 100%; height: calc(100% - 40px); pointer-events: none; }
.marks path { fill: none; stroke: var(--rose); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rose) 60%, transparent)); }
.marks path { stroke-width: 2.4; }
.finder.seen .marks path { animation: draw .9s var(--ease) forwards; animation-delay: var(--d); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.comet { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--rose), 0 0 24px 6px var(--rose); opacity: 0; offset-rotate: 0deg; }
.finder.seen .comet { animation: fly 2.2s var(--ease) .3s forwards; }
@keyframes fly { 0% { opacity: 0; transform: translate(10%, 40px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--cx), var(--cy)); } }
@media (max-width: 640px) { .files { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Everywhere: six phones, six themes, fanned ────────────────────── */
.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; width: min(1180px, 100%); height: 560px; margin-top: 56px; }
.phones video {
  width: 200px; aspect-ratio: 360 / 760; object-fit: cover; border-radius: 30px; margin: 0 -26px; background: #000;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8), 0 0 0 6px #0c0c0f, 0 0 0 7px color-mix(in srgb, var(--ink) 14%, transparent);
  transform: translateY(calc(var(--lift, 0) * 1px)) rotate(var(--r, 0deg)); transition: transform 1.2s var(--spring);
}
.phones video:nth-child(1) { --r: -12deg; --lift: 60; }
.phones video:nth-child(2) { --r: -7deg; --lift: 22; }
.phones video:nth-child(3) { --r: -2deg; --lift: 0; z-index: 2; }
.phones video:nth-child(4) { --r: 2deg; --lift: 0; z-index: 2; }
.phones video:nth-child(5) { --r: 7deg; --lift: 22; }
.phones video:nth-child(6) { --r: 12deg; --lift: 60; }
.phones video:hover { --lift: -18; z-index: 3; }
@media (max-width: 900px) { .phones { height: 420px; } .phones video { width: 150px; margin: 0 -34px; } .phones video:nth-child(1), .phones video:nth-child(6) { display: none; } }
@media (max-width: 520px) { .phones video { width: 120px; margin: 0 -30px; } .phones video:nth-child(2), .phones video:nth-child(5) { display: none; } }
.platforms { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; margin: 56px 0 0; padding: 0; }
.platforms li { display: grid; gap: 3px; }
.platforms b { font: 560 15px var(--sans); }
.platforms em { font: 450 12.5px var(--sans); font-style: normal; color: var(--ink3); }
.platforms .now em { color: var(--green); }

/* ── The cast ──────────────────────────────────────────────────────── */
.cast { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; width: min(980px, 100%); margin-top: 40px; }
.cast button { aspect-ratio: 1; border: 0; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: grid; place-items: center; transition: background-color .3s, transform .4s var(--spring); }
.cast button:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); transform: translateY(-4px); }
.cast button > * { width: 100%; height: 100%; }
.cast svg { width: 100%; height: 100%; }
@media (max-width: 760px) { .cast { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


/* ── Motion on scroll ──────────────────────────────────────────────────
   --q: how far the first screen has been scrolled away (0 to 1).
   --p: how far a section has come in (0 just in, 1 settled). */
/* Titles rise word by word, each out of a blur. */
.sec h2.split .wd { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(10px);
  transition: opacity 1.6s var(--ease), transform 1.8s var(--spring), filter 1.6s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.sec h2.split.seen .wd { opacity: 1; transform: none; filter: none; }
.sec h2.split { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .sec h2.split .wd { opacity: 1; transform: none; filter: none; transition: none; } }

/* The stage opens toward you. */
.stage { --p: 1; perspective: 1400px; }
.stage .dmac { transform: rotateX(calc((1 - var(--p)) * 18deg)) scale(calc(.86 + var(--p) * .14)); transform-origin: 50% 0; opacity: calc(.2 + var(--p) * .8); }
.stage .phone { translate: calc((1 - var(--p)) * 140px) calc((1 - var(--p)) * 80px); rotate: calc((1 - var(--p)) * 8deg); opacity: var(--p); }

/* The phones fan open as they arrive. */
.phones { --p: 1; }
.phones video { transform: translateY(calc(var(--lift, 0) * var(--p) * 1px + (1 - var(--p)) * 120px)) rotate(calc(var(--r, 0deg) * var(--p))); }
.phones video:nth-child(1) { margin-left: calc(-26px - (1 - var(--p)) * 120px); }

/* ── The desk, played by scrolling (desk.css lays it out) ──────────── */
.mac-story { margin-top: 160px; }
.story-title { margin: 0 0 28px; text-align: center; font: 560 clamp(20px, 2.2vw, 26px)/1.3 var(--sans); letter-spacing: -.02em; }
.story-title span { color: var(--ink3); }
.mac-steps button { font-family: var(--sans); }

/* ── Cards: the real ones, fanned as they arrive ───────────────────── */
.deck { --p: 1; position: relative; width: min(1000px, 100%); height: 420px; margin-top: 64px; }
.deck img { position: absolute; left: 50%; top: 40px; width: 48%; height: auto; border-radius: 18px;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); transform-origin: 50% 120%; }
.deck img:nth-child(1) { transform: translateX(-50%) translate(calc(var(--p) * -62%), calc(var(--p) * 40px)) rotate(calc(var(--p) * -9deg)); }
.deck img:nth-child(2) { transform: translateX(-50%) translate(calc(var(--p) * -20%), calc(var(--p) * 8px)) rotate(calc(var(--p) * -3deg)); }
.deck img:nth-child(3) { transform: translateX(-50%) translate(calc(var(--p) * 20%), calc(var(--p) * 8px)) rotate(calc(var(--p) * 3deg)); }
.deck img:nth-child(4) { transform: translateX(-50%) translate(calc(var(--p) * 62%), calc(var(--p) * 40px)) rotate(calc(var(--p) * 9deg)); }
.deck img:hover { z-index: 5; }
@media (max-width: 720px) { .deck { height: 300px; } .deck img { width: 70%; } }

/* ── What it learns ────────────────────────────────────────────────── */
.learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(980px, 100%); margin: 56px 0 0; text-align: left; }
.learn-grid div { padding: 28px; border-radius: 22px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(10px); }
.learn-grid dt { font: 500 19px/1.35 var(--sans); letter-spacing: -.015em; }
.learn-grid dd { margin: 10px 0 0; font: 450 14.5px/1.5 var(--sans); color: var(--ink2); }
@media (max-width: 720px) { .learn-grid { grid-template-columns: 1fr; } }

/* Cards and facts on the sky: a little frost. */
.fact, .plan, .device { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ── On a phone: one thing at a time, nothing past the edge ────────── */
@media (max-width: 720px) {
  /* The palette alone, big enough to read: the Mac's screen made tall,
     no little phone squeezed beside it. */
  .dmac-screen { aspect-ratio: 4 / 5; border-radius: 22px; }
  .dmac-base, .stage .phone { display: none; }
  .pal { width: 90%; top: 9%; height: 84%; }
  .pal-body { font-size: 12px; }
  .pal-field { font-size: 15px; }
  .themes { flex-wrap: wrap; row-gap: 12px; }
  .theme-name { flex-basis: 100%; text-align: center; order: -1; }
  .swatch { width: 30px; height: 30px; }
  /* The cards one under another, straight. */
  .deck { height: auto; display: grid; gap: 14px; }
  .deck img { position: static; width: 100%; transform: none !important; }
  .deck img:nth-child(n+3) { display: none; }
  /* The living themes' picks in one row that scrolls. */
  .living-picks { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% - 24px); scrollbar-width: none; }
  .living-picks::-webkit-scrollbar { display: none; }
  .living-picks button { white-space: nowrap; }
  .sec { padding-top: 150px; }
}

/* ── After a download ──────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadein .3s var(--ease); }
.sheet[hidden] { display: none; }
.sheet-card { width: min(440px, 100%); padding: 32px 30px 26px; border-radius: 24px; text-align: center;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 1px var(--line); animation: rise .6s var(--spring); }
.sheet-jev { width: 72px; height: 72px; margin: 0 auto 12px; }
.sheet h2 { margin: 0 0 20px; font: 600 22px var(--sans); letter-spacing: -.02em; }
.sheet ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.sheet li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; font: 450 14.5px/1.45 var(--sans); }
.sheet li::before { content: counter(s); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sel); font: 600 12px var(--sans); color: var(--ink2); }
.sheet li span { color: var(--ink3); font-size: 13px; }
.sheet p { margin: 20px 0 22px; font: 450 14px var(--sans); color: var(--ink2); }
.sheet .get { border: 0; cursor: pointer; }
@keyframes fadein { from { opacity: 0; } }

/* ── The first screen, pinned: the palette, pink Jevie, what it makes ── */
.intro { position: relative; height: 210vh; height: 210svh; }
.intro-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; --mx: 0; --my: 0; --p: 0; }
/* The words, above. */
.intro-copy { position: absolute; inset: 0 0 auto; z-index: 2; display: grid; justify-items: center; text-align: center; padding: max(96px, 11vh) var(--gutter) 0;
  opacity: calc(1 - var(--p) * 2.2); transform: translateY(calc(var(--p) * -80px)); filter: blur(calc(var(--p) * 10px)); }
.intro-copy .hero-line { max-width: 34ch; }
/* The palette, below them: comes forward as the page is scrolled. */
.hero-pal { position: absolute; left: 50%; top: max(calc(11vh + 410px), 60%); z-index: 1; width: min(640px, calc(100vw - 48px));
  transform: translate(-50%, calc(var(--p) * -28vh)) scale(calc(1 + var(--p) * .14)); }
.hero-pal .light { position: absolute; inset: -110px; width: calc(100% + 220px); height: calc(100% + 220px); z-index: -1; pointer-events: none; }
.hp-glass { position: relative; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, #121216 82%, transparent);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.hp-field { display: flex; align-items: center; gap: 2px; height: 58px; padding: 0 22px; border-bottom: 1px solid var(--line); font: 450 19px var(--sans); letter-spacing: -.01em; }
.hp-field .ph { color: var(--ink3); }
.hp-rows { min-height: 112px; padding: 6px 10px 8px; font-size: 14px; }
@media (max-height: 760px) { .intro-copy { padding-top: 84px; } .intro h1 { font-size: clamp(40px, 5.2vw, 64px); } }
.hp-rows .row { height: 40px; }
.hero-pal .hero-jev { position: absolute; left: 26px; top: -50px; width: 62px; height: 56px; z-index: 3; cursor: pointer; transform: none; }
.cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 2; display: grid; justify-items: center; gap: 10px; font: 450 11px var(--mono); color: var(--ink3); letter-spacing: .12em; text-transform: uppercase; opacity: calc(1 - var(--p) * 6); }
.cue i { width: 1px; height: 34px; background: linear-gradient(transparent, var(--ink3)); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 720px) { .hero-pal { top: auto; bottom: 14vh; } .hp-field { font-size: 16px; } }

/* ── The agents wall, pinned while it straightens ──────────────────── */
.wallsec { height: 230vh; height: 230svh; padding-top: 0; display: block; }
.wall-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; justify-items: center; align-content: center; padding: 70px var(--gutter) 0; overflow: hidden; }
.wall-pin .wall-stage { margin-top: 36px; width: min(1080px, 100%); }
/* The pinned wall fits the window, never cut at the foot (2464 × 1248 is 1.97 : 1). */
.wall-pin .wall-stage { width: min(1080px, 100%, calc((100svh - 300px) * 1.97)); }

/* ── Type: Inter for the big words (the hero as it was liked), Geist for
   everything read, Geist Mono small. No italics anywhere. ── */
:root { --display: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; }
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -.005em; }
.intro h1 { font-family: var(--display); font-weight: 680; font-size: clamp(52px, 7vw, 100px); line-height: .94; letter-spacing: -.055em; }
@media (max-height: 800px) { .intro h1 { font-size: clamp(46px, 5.6vw, 76px); } }
.intro h1 span { color: var(--accent); text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent); }
.sec h2, .story-title { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; }
.sec h2 span:not(.wd), .story-title span { color: var(--ink3); }
.end h2 { font-family: var(--display); font-weight: 680; letter-spacing: -.05em; }
.end h2 span { color: var(--accent); }


/* ── Readability (measured: every grey 6:1 or better on the ground; small
   text no smaller than 12-13 px; lines no longer than a comfortable measure) ── */
.fine { font-size: 13px; letter-spacing: .01em; }
.names { font-size: 13px; }
.platforms em { font-size: 13px; }
.wall-phone figcaption { font-size: 13px; }
.lines .does, .learn-grid dd, .fact span, .plan ul { font-size: 15px; }
.pal-body { font-size: clamp(12px, 1.25vw, 13px); }
.pal-foot { font-size: clamp(11px, 1.05vw, 12px); }
.hero-line { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; }
.sec h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }

/* ── The palette as the Mac draws it: no rainbow, Jevie's own pink glow,
   breathing, brighter while it thinks; Jevie peeking over its top edge. ── */
.hero-pal .light { display: none; }
.hp-glass { border: 1px solid rgba(255,255,255,.09); box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12),
  0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 60px -10px color-mix(in srgb, var(--accent) 40%, transparent); animation: aura 7s ease-in-out infinite; }
.hero-pal.thinking .hp-glass { box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14),
  0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 90px 0 color-mix(in srgb, var(--accent) 55%, transparent); }
@keyframes aura { 50% { box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 80px -6px color-mix(in srgb, var(--accent) 50%, transparent); } }
.hp-glass { transition: box-shadow 1.2s var(--ease); }
.hp-field { justify-content: space-between; }
.hp-field .hp-say { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.hp-field .plus { flex: none; color: var(--ink3); font: 300 22px var(--sans); }
.hp-rows .row .k { margin-left: auto; color: var(--ink3); font-size: 12.5px; white-space: nowrap; }
.hp-foot { display: flex; justify-content: flex-end; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line); font: 500 12px var(--sans); color: var(--ink2); }
.hp-foot kbd { font-size: 11px; margin-left: 5px; }
.hero-pal .hero-jev { left: 20px; top: -54px; width: 66px; height: 60px; }
/* The stage's palette thinks in pink too. */
.pal::before { background: linear-gradient(var(--accent), var(--accent)); }
.pal.thinking::before { opacity: .55; }
.pal.thinking { box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 60px -6px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent); }
.pal-jev { top: -30px; }

/* ── Things to say ─────────────────────────────────────────────────── */
.try { width: min(680px, 100%); margin-top: 48px; text-align: left; border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, #121216 86%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.08), 0 0 50px -12px color-mix(in srgb, var(--accent) 35%, transparent); }
.try-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.try-jev { width: 30px; height: 30px; flex: none; }
.try-field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 450 18px var(--sans); letter-spacing: -.01em; caret-color: var(--accent); }
.try-field input::placeholder { color: var(--ink3); }
.try-list { list-style: none; margin: 0; padding: 8px; min-height: 236px; }
.try-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 12px; border-radius: 11px; cursor: pointer; animation: in .5s var(--ease) both; animation-delay: var(--d, 0s); }
.try-list li:first-child, .try-list li:hover { background: var(--sel); }
.try-list b { font: 500 15px var(--sans); color: var(--ink); }
.try-list span { grid-column: 1; font: 400 14px/1.45 var(--sans); color: var(--ink2); }
.try-list em { grid-row: 1; grid-column: 2; font: 500 12px var(--sans); font-style: normal; color: var(--ink3); white-space: nowrap; align-self: center; }
.try-list .none { color: var(--ink2); font: 400 14px/1.5 var(--sans); cursor: default; background: none !important; }
.areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; max-width: 900px; }
.areas button { font: 500 13.5px var(--sans); color: var(--ink2); background: transparent; border: 0; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color .3s, background-color .3s; }
.areas button[aria-checked="true"] { color: var(--bg); background: var(--ink); box-shadow: none; }
.marquee { width: 100vw; margin-top: 44px; display: grid; gap: 14px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mrow { display: flex; gap: 12px; width: max-content; animation: slide 140s linear infinite; }
.mrow.rev { animation-direction: reverse; animation-duration: 170s; }
.mrow:nth-child(3) { animation-duration: 200s; }
.marquee:hover .mrow { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.mrow button { flex: none; font: 450 15px var(--sans); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 0; padding: 11px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color .3s, box-shadow .3s; white-space: nowrap; }
.mrow button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .mrow { animation: none; } .marquee { overflow-x: auto; } }

/* ── For a visitor deciding: what's new, why, a day, questions ─────── */
.news { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 6px 14px 6px 6px; border-radius: 999px; text-decoration: none; font: 480 13px var(--sans); color: var(--ink2); background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .3s var(--ease), background-color .3s var(--ease); }
.news b { font: 600 11.5px var(--sans); padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #2a0f19; }
.news i { font-style: normal; color: var(--ink3); transition: transform .3s var(--spring); }
.news:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.news:hover i { transform: translateX(3px); }
.intro-copy .fine { font-size: 12.5px; color: var(--ink2); }
@media (max-width: 520px) { .news { font-size: 12px; } .news b { font-size: 11px; } }

.why { padding-top: 240px; }
.why-kicker { margin: 0 0 18px; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.why h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; font-weight: 660; letter-spacing: -.045em; }
.why-body { display: grid; gap: 22px; margin-top: 40px; max-width: 34em; text-align: left; }
.why-body p { margin: 0; font: 450 clamp(17px, 1.6vw, 20px)/1.6 var(--sans); color: var(--ink2); }
.why-body p:last-child { color: var(--ink); }

.day-list { list-style: none; margin: 56px 0 0; padding: 0; width: min(680px, 100%); display: grid; gap: 8px; text-align: left; }
.day-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(0,0,0,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dy-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 78%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px -4px color-mix(in srgb, var(--c) 60%, transparent); }
.dy-ic svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dy-txt { display: grid; gap: 3px; min-width: 0; }
.dy-txt b { font: 540 15.5px/1.35 var(--sans); letter-spacing: -.01em; }
.dy-txt q { font: 450 13px/1.35 var(--mono); color: var(--ink3); quotes: "“" "”"; }
.day-list time { font: 450 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink3); align-self: start; padding-top: 3px; }
.day-list li.reveal { transform: translateY(14px) scale(.98); }
.day-list li.reveal.seen { transform: none; }

.qas { width: min(760px, 100%); margin-top: 56px; display: grid; gap: 8px; text-align: left; }
.qa { border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; font: 540 16.5px/1.35 var(--sans); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--ink3); transition: transform .4s var(--spring); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { margin: 0; padding: 0 20px 20px; max-width: 62ch; font: 450 15px/1.6 var(--sans); color: var(--ink2); }
.qa p a { color: var(--ink); }

.first { margin-top: 30px; min-height: 1.5em; display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 16px; font: 450 clamp(17px, 2vw, 21px) var(--sans); color: var(--ink); background: color-mix(in srgb, var(--panel) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 0 60px -10px var(--glow); min-width: min(420px, 100%); justify-content: center; }
.first .caret { width: 2px; margin-left: 2px; }
.end .cta { margin-top: 34px; }
.install-steps { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font: 450 13.5px var(--sans); color: var(--ink2); }
.install-steps li { display: inline-flex; align-items: center; gap: 9px; }
.install-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* The first screen in one column: the words, then the palette under them,
   so a longer line or the news pill can never slide under the palette. */
.intro-pin { display: flex; flex-direction: column; align-items: center; }
.intro-copy { position: relative; inset: auto; padding-top: max(84px, 9.5vh); }
.intro-copy .hero-line { max-width: 40ch; text-wrap: balance; }
.hero-pal { position: relative; left: auto; top: auto; flex: none; margin-top: clamp(64px, 8vh, 92px);
  transform: translateY(calc(var(--p) * -28vh)) scale(calc(1 + var(--p) * .14)); }
@media (max-height: 940px) { .intro h1 { font-size: clamp(46px, 6vw, 84px); } .intro-copy .cta { margin-top: 32px; } .cue { display: none; } }
@media (max-height: 800px) { .intro h1 { font-size: clamp(42px, 5.2vw, 68px); } .news { margin-bottom: 18px; } .hero-line { margin-top: 18px; } }
@media (max-width: 720px) { .hero-pal { top: auto; bottom: auto; margin-top: 48px; } .intro-copy { padding-top: 84px; } }
@media (max-width: 520px) {
  .day-list li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .day-list .dy-ic { grid-row: 1 / span 2; align-self: center; }
  .day-list time { grid-column: 2; grid-row: 1; padding-top: 0; font-size: 11.5px; }
  .day-list .dy-txt { grid-column: 2; grid-row: 2; }
}

/* ── Daylight ─────────────────────────────────────────────────────────
   The page is a bright morning, as the AI products people get excited
   about are (Poke, Cluely, Tolan, Wispr): a painted dawn on the first
   screen, warm paper after it. What is Jevie's own (the palette, the Mac,
   the fields) stays as the app draws it, in Deep Space, the look a new
   Jevie starts in: anything marked .ui wears those colours. */
:root {
  --bg: #fbf8f4; --ink: #17151f; --ink2: #4a4756; --ink3: #696576;
  --panel: #ffffff; --sel: #efe9e2; --line: rgba(23, 21, 31, .1);
  --accent: #d9467c; --pink: #f0a6bd; --sky: #3f7ddb;
  --lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px var(--line), 0 18px 40px -24px rgba(44, 36, 92, .28);
  color-scheme: light;
}
.ui {
  --bg: #151517; --ink: #e8e6ff; --panel: #151517; --sel: #262247; --accent: #f0a6bd;
  --ink2: color-mix(in srgb, var(--ink) 78%, var(--bg)); --ink3: color-mix(in srgb, var(--ink) 60%, var(--bg));
  --line: color-mix(in srgb, var(--ink) 11%, transparent);
  color: var(--ink); color-scheme: dark;
}
::selection { background: color-mix(in srgb, var(--pink) 55%, transparent); }

/* The bar: white words over the sky, frosted daylight after it. */
.bar { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.bar.on-sky { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.bar.on-sky .bar-link { color: rgba(255,255,255,.88); }
.bar.on-sky .bar-link:hover { color: #fff; }
.bar.on-sky .bar-get { background: #fff; color: var(--ink); box-shadow: 0 6px 18px -6px rgba(30, 50, 130, .35); }

/* The first screen: dawn over the hills, the palette on it, Jevie on the palette. */
.intro-pin { background: #7fb0ee; }
.sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  transform: translateY(calc(var(--p) * 6vh)) scale(calc(1 + var(--p) * .05)); transform-origin: 50% 100%; }
.sky .clouds { animation: clouds 90s ease-in-out infinite alternate; }
@keyframes clouds { to { transform: translateX(-90px); } }
@media (prefers-reduced-motion: reduce) { .sky .clouds { animation: none; } }
.intro h1 { color: #fff; text-shadow: 0 2px 40px rgba(30, 48, 120, .28); }
.intro h1 span { color: #fff; text-shadow: 0 2px 40px rgba(30, 48, 120, .28); }
.intro-copy .hero-line { color: rgba(255,255,255,.94); text-shadow: 0 1px 18px rgba(30, 48, 120, .3); }
.intro-copy .fine { color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(30, 48, 120, .3); }
.intro .get { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -8px rgba(30, 50, 130, .45); }
.intro .alt { color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.intro .news { color: #fff; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.intro .news i { color: rgba(255,255,255,.8); }
.intro .news:hover { color: #fff; background: rgba(255,255,255,.3); }
.news b { background: #fff; color: var(--accent); }
.cue { color: rgba(255,255,255,.85); }
.cue i { background: linear-gradient(transparent, #fff); }

/* The palette in Deep Space glass, as it opens over a desktop. */
.hp-glass { background: linear-gradient(180deg, rgba(30, 28, 66, .9), rgba(12, 11, 28, .93)); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 50px 110px -20px rgba(24, 26, 90, .55), inset 0 1px 0 rgba(255,255,255,.14), 0 0 60px -14px color-mix(in srgb, var(--pink) 50%, transparent); animation: none; }
.hero-pal.thinking .hp-glass { box-shadow: 0 50px 110px -20px rgba(24, 26, 90, .55), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1.5px color-mix(in srgb, var(--pink) 75%, transparent), 0 0 90px 0 color-mix(in srgb, var(--pink) 60%, transparent); }
/* Jevie perched as the app perches him: the bust's hands (y 128 of its
   172-unit box) on the palette's top edge, 22 px in (CosmicMascot.swift). */
.hero-pal .hero-jev { --s: 60px; left: 22px; top: calc(var(--s) * -122 / 172); width: var(--s); height: var(--s); }
.pal-jev { --s: 38px; left: 16px; top: calc(var(--s) * -122 / 172); width: var(--s); height: var(--s); }
@media (max-width: 720px) { .pal-jev { --s: 32px; } .hero-pal .hero-jev { --s: 52px; left: 18px; } }

/* Sections: bigger words, white cards on paper. */
.sec h2, .story-title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; font-weight: 660; letter-spacing: -.04em; }
.sec h2 span:not(.wd), .story-title span { color: var(--ink3); }
.fact, .plan, .learn-grid div, .device, .qa, .day-list li, .cast button { background: #fff; box-shadow: var(--lift); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cast button:hover { background: #fff; }
.qa summary::after { color: var(--accent); }
.plan.pick { background: #151517; color: #e8e6ff; box-shadow: 0 30px 60px -24px rgba(23, 21, 46, .55); }
.plan.pick h3, .plan.pick ul { color: rgba(232,230,255,.82); }
.plan.pick .price small, .plan.pick li::before { color: rgba(232,230,255,.6); }
.say[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.areas button[aria-checked="true"] { background: var(--ink); color: var(--bg); }

/* What is drawn as the app draws it, lifted off the paper. */
.dmac-screen { box-shadow: 0 50px 120px -40px rgba(30, 26, 80, .5), 0 0 0 10px #1c1b26, 0 0 0 11px rgba(0,0,0,.12); }
.dmac-base { background: linear-gradient(180deg, #d9d6df, #a9a5b3); }
.phone { background: #1c1b26; box-shadow: 0 40px 80px -20px rgba(30, 26, 80, .5); }
.try { background: linear-gradient(180deg, rgba(30, 28, 66, .96), rgba(12, 11, 28, .97)); box-shadow: 0 40px 90px -30px rgba(30, 26, 80, .5), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.08); }
.finder { box-shadow: 0 50px 110px -40px rgba(30, 26, 80, .5); }
.deck img, .wall-shot, .wall-phone img, .col img { box-shadow: 0 40px 80px -30px rgba(30, 26, 80, .45), 0 0 0 1px rgba(23,21,31,.08); }
.phones video { box-shadow: 0 40px 80px -24px rgba(30, 26, 80, .5), 0 0 0 6px #1c1b26; }
.living { box-shadow: 0 40px 90px -30px rgba(30, 26, 80, .5); }
.voice h2 kbd { background: var(--ink); color: var(--bg); }
.end h2, .end h2 span { text-shadow: none; }

/* Why: a band of Deep Space, its living scene behind the words. */
.why { padding-top: 160px; }
.band { position: relative; width: min(1200px, 100%); border-radius: 36px; overflow: hidden; background: var(--bg); isolation: isolate;
  box-shadow: 0 50px 120px -50px rgba(23, 21, 46, .6); }
.band-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .75; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 45%, rgba(12, 11, 28, .86), rgba(12, 11, 28, .35) 80%); }
.band-in { display: grid; justify-items: center; padding: clamp(80px, 11vw, 140px) clamp(22px, 5vw, 64px); }
.why .why-kicker { color: var(--accent); }
.why h2 { color: var(--ink); }
.why-body p { color: var(--ink2); }
.why-body p:last-child { color: var(--ink); }

/* The end: dawn again, and the field Jevie sits on. */
.end { background: linear-gradient(180deg, var(--bg), #f8e3ea 38%, #d9ddf8 72%, #b9cdf3); }
.end h2 span { color: var(--accent); }
.first { position: relative; display: block; padding: 0; background: none; box-shadow: none; min-width: 0; width: min(520px, 100%); margin-top: 64px; }
.first-field { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 24px; border-radius: 18px;
  font: 450 clamp(17px, 2vw, 21px) var(--sans); color: var(--ink);
  background: linear-gradient(180deg, rgba(30, 28, 66, .96), rgba(12, 11, 28, .97)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -30px rgba(30, 26, 80, .55), 0 0 60px -16px color-mix(in srgb, var(--accent) 60%, transparent); }
.end .end-jev { --s: 56px; position: absolute; left: 22px; top: calc(var(--s) * -122 / 172); width: var(--s); height: var(--s); margin: 0; z-index: 2; }
.end .fine { color: var(--ink2); }
.install-steps b { background: #fff; box-shadow: var(--lift); }
footer { background: #b9cdf3; border-top: 0; color: #2d3466; }
footer a { color: #2d3466; }
footer a:hover { color: var(--ink); }
/* A little sky kept dark behind the words, so white reads on the haze. */
.intro-copy::before { content: ""; position: absolute; left: 50%; top: 4%; width: min(1000px, 120vw); height: 86%; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(38, 72, 170, .32), rgba(38, 72, 170, 0)); }
/* The Mac in the demo wears the same dawn as the first screen. */
.dmac-screen { background:
  radial-gradient(40% 50% at 78% 72%, rgba(255, 244, 232, .9), rgba(255, 217, 196, 0) 70%),
  linear-gradient(180deg, #3a72d4, #76a7ea 42%, #b7c6f1 62%, #f4cdd8 76%, #ffd8bd 88%, #9a92d6 88.2%, #6574c9); }
.menu { background: rgba(255,255,255,.16); }
/* The wall comes in from paper, never grey. */
.wall-shot { opacity: 1; }
.voice h2 kbd { background: var(--pink); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, var(--sans); }
/* Colour between the paper, a band at a time. */
#say, #voice, #every { margin-top: 140px; padding-top: 130px; padding-bottom: 130px; }
#say { background: linear-gradient(180deg, #eaf1fd, #f3f0fb); }
#voice { background: linear-gradient(180deg, #fde9ef, #fbf1ea); }
#every { background: linear-gradient(180deg, #efecfb, #e9f1fb); }
@media (max-width: 720px) { #say, #voice, #every { margin-top: 100px; padding-top: 100px; padding-bottom: 100px; } }
.first-field { white-space: nowrap; overflow: hidden; }
@media (max-width: 520px) { .first-field { font-size: 16px; padding: 0 18px; } }

/* ── Words: a label, a headline, one plain line ──────────────────────
   Every section opens the same way, as the clearest startup pages do. */
.eyebrow { margin: 0 0 14px; font: 600 12.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.sec h2, .story-title { max-width: 18ch; }
.sec .sub, .mac-story .sub { margin: 18px auto 0; max-width: 44ch; font: 450 clamp(17px, 1.55vw, 19px)/1.55 var(--sans); color: var(--ink2); text-wrap: pretty; }
.sec .sub a { color: var(--ink); }
.mac-story .story-title { margin: 0 auto; }
.mac-story .sub { margin-bottom: 36px; text-align: center; }
.mac-stage > .eyebrow { text-align: center; }
.why .eyebrow { color: var(--accent); }
.why h2 { max-width: none; }
.end .sub { margin-top: 18px; }
.voice h2 kbd { vertical-align: .08em; }

/* ── Footer: where everything is, in three columns ─────────────────── */
footer { display: block; padding: 72px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; width: min(1100px, 100%); margin: 0 auto; }
.foot-brand { display: grid; justify-items: start; gap: 12px; align-content: start; }
.foot-brand p { margin: 0; font: 500 15px var(--sans); color: #2d3466; }
.foot-get { margin-top: 6px; background: var(--ink); color: #fff; }
.foot-col { display: grid; gap: 12px; align-content: start; }
.foot-col b { font: 600 13.5px var(--sans); letter-spacing: -.005em; color: #2d3466; opacity: .75; }
.foot-col a { font: 450 15px var(--sans); }
.foot-fine { width: min(1100px, 100%); margin: 56px auto 0; padding-top: 22px; border-top: 1px solid rgba(45, 52, 102, .18); font: 450 13px var(--sans); color: #2d3466; opacity: .8; }
@media (max-width: 760px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
.sec h2, .story-title { max-width: 24ch; margin-left: auto; margin-right: auto; }
.sec.show { padding-top: 120px; }
section[id] { scroll-margin-top: 0; }
.intro .alt { background: rgba(24, 30, 90, .28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
/* Calmer spacing between chapters: room to breathe, not to get lost. */
.sec { padding-top: 168px; }
.sec.show { padding-top: 120px; }
.why { padding-top: 140px; }
.wall-pin { padding-top: 92px; }
.end { padding-bottom: 120px; }
@media (max-width: 720px) { .sec { padding-top: 120px; } .sec.show { padding-top: 96px; } }
.sec { grid-template-columns: minmax(0, 1fr); }
.intro-copy .fine { font: 500 13.5px var(--sans); letter-spacing: 0; color: #fff; text-shadow: 0 1px 14px rgba(24, 40, 120, .55), 0 0 2px rgba(24, 40, 120, .35); }

/* ── How the page arrives (studied on Wabi, Poke, Tolan, Wispr, Granola)
   One pinned moment (the first screen), the rest flows. Features are
   numbered rows, words on one side and the thing itself on a dawn card on
   the other, sides alternating, each with a way to read more. ── */
.intro { height: 165vh; height: 165svh; }
.wallsec { height: auto; display: grid; padding-top: 168px; }
.wall-pin { position: static; height: auto; padding: 0; overflow: visible; display: grid; justify-items: center; }

.works { padding: 56px var(--gutter) 0; display: grid; justify-items: center; gap: 18px; text-align: center; }
.works p { margin: 0; font: 500 13px var(--sans); color: var(--ink3); }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.works li { font: 500 14px var(--sans); color: var(--ink2); padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: var(--lift); }

.sec.feat { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; justify-items: stretch; column-gap: clamp(36px, 6vw, 96px); text-align: left;
  padding-left: max(var(--gutter), calc((100% - 1180px) / 2)); padding-right: max(var(--gutter), calc((100% - 1180px) / 2)); }
.feat.flip .feat-text { order: 2; }
.feat-text { min-width: 0; }
.feat-text h2 { margin: 0; max-width: 13ch; text-align: left; }
.feat .sub { margin: 18px 0 0; max-width: 34ch; text-align: left; }
.eyebrow .num { margin-right: 12px; color: var(--ink3); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font: 550 15px var(--sans); color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); transition: border-color .3s; }
.more i { font-style: normal; transition: transform .3s var(--spring); }
.more:hover { border-color: var(--ink); }
.more:hover i { transform: translateX(4px); }
/* The thing itself, on a card of the same dawn as the first screen. */
.feat-art { min-width: 0; position: relative; border-radius: 30px; overflow: hidden; padding: clamp(22px, 3.5vw, 44px); min-height: 440px; display: grid; place-items: center;
  background: radial-gradient(60% 70% at 80% 90%, rgba(255, 233, 214, .95), rgba(255, 233, 214, 0)), linear-gradient(165deg, #9fbdf0, #c9d3f5 45%, #f2d6e2 75%, #ffe0cc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 30px 70px -40px rgba(44, 36, 92, .4); }
.feat-art .deck { width: 100%; height: 360px; margin: 0; }
.feat-art .deck img { width: 66%; top: 46px; }
.feat-art .finder { width: 100%; margin: 0; }
.feat-art .files { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 16px 26px; }
.feat-art .flow { width: 100%; height: 520px; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat-art .flow .col:nth-child(3) { display: none; }
.feat-art .voice-stage { width: 100%; height: 340px; margin: 0; }
.feat-art .heard { margin-top: 220px; font-size: clamp(18px, 2vw, 24px); text-align: center; }
.feat-art .learn-grid { grid-template-columns: 1fr; width: 100%; margin: 0; gap: 10px; }
.feat-art .learn-grid div { padding: 20px 22px; }
#voice.feat { background: none; margin-top: 0; padding-top: 168px; padding-bottom: 0; }
@media (max-width: 860px) {
  .sec.feat { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .feat.flip .feat-text { order: 0; }
  .feat-art { min-height: 0; }
  .feat-art .deck { height: 260px; }
  .feat-art .flow { height: 440px; }
}
@media (max-width: 720px) { .feat-art .deck { display: grid; height: auto; } }
/* The fan fits its card: narrower cards, a tighter spread. */
.feat-art .deck img { width: 54%; top: 40px; }
.feat-art .deck img:nth-child(1) { transform: translateX(-50%) translate(calc(var(--p) * -46%), calc(var(--p) * 34px)) rotate(calc(var(--p) * -8deg)); }
.feat-art .deck img:nth-child(2) { transform: translateX(-50%) translate(calc(var(--p) * -15%), calc(var(--p) * 6px)) rotate(calc(var(--p) * -3deg)); }
.feat-art .deck img:nth-child(3) { transform: translateX(-50%) translate(calc(var(--p) * 15%), calc(var(--p) * 6px)) rotate(calc(var(--p) * 3deg)); }
.feat-art .deck img:nth-child(4) { transform: translateX(-50%) translate(calc(var(--p) * 46%), calc(var(--p) * 34px)) rotate(calc(var(--p) * 8deg)); }
.feat-art .heard { padding: 0 8px; }
@media (max-width: 720px) { .feat-art .deck img { width: 100%; } .feat-art .deck img:nth-child(n+3) { display: none; } }

/* ── The walkthrough's fixes (a Raycast user's pass, 30 Oct) ────────── */
/* Sections arrive quickly and sharp: a short fade and lift, never a blur
   to wait out while scrolling. Titles come in whole. */
.reveal { filter: none; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--d, 0s) * .5); }
.reveal.seen { transform: none; }
.sec h2.split .wd { opacity: 1; transform: none; filter: none; transition: none; }
.sec h2.split { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.sec h2.split.seen { opacity: 1; transform: none; }
.day-list li.reveal { transform: translateY(8px); }

/* The first screen: never a blank palette, a shorter hold, no seam, no smudge. */
.hp-typed:empty::before { content: "What do you need?"; color: var(--ink3); }
.intro { height: 135vh; height: 135svh; }
.sky { transform: scale(calc(1 + var(--p) * .05)); }
.bar.scrolled:not(.on-sky) { background: color-mix(in srgb, var(--bg) 94%, transparent); }

/* The demo: the theme dots say what they are. */
.themes-label { font: 500 13px var(--sans); color: var(--ink3); margin-right: 6px; }

/* Try it: one row selected at a time; the moving rows hold still under the pointer. */
.try-list li:first-child, .try-list li:hover { background: transparent; }
.try-list li.sel { background: var(--sel); }
.try-note { margin: 0; padding: 10px 18px 14px; font: 450 13.5px var(--sans); color: var(--ink2); border-top: 1px solid var(--line); }
.try-note a { color: var(--ink); }
.marquee:hover .mrow { animation-play-state: paused; }

/* Coming from Raycast: the guide's map, as a table you can scan. */
.switch-map { min-width: 0; border-radius: 24px; background: #fff; box-shadow: var(--lift); overflow: hidden; }
.switch-map table { width: 100%; border-collapse: collapse; font: 450 15px/1.4 var(--sans); }
.switch-map th, .switch-map td { text-align: left; padding: 14px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.switch-map thead th { border-top: 0; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); background: color-mix(in srgb, var(--ink) 3%, #fff); }
.switch-map tbody th { font-weight: 500; color: var(--ink2); width: 42%; }
.switch-map td { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.import { margin-top: 26px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: var(--lift); display: grid; gap: 8px; }
.import p { margin: 0; font: 450 14.5px/1.5 var(--sans); color: var(--ink2); }
.import .import-say { font: 500 16px var(--mono); color: var(--ink); }

/* Cards and answers sit centred and readable in their dawn cards. */
.feat-art .deck { height: 240px; }
.feat-art .deck img { top: 10px; }
.feat-art .flow { grid-template-columns: minmax(0, 1fr); height: 480px; }
.feat-art .flow .col:nth-child(n+2) { display: none; }
.feat-art .flow .col img { border-radius: 14px; }
.feat-art .heard { text-wrap: balance; font-size: clamp(17px, 1.8vw, 21px); }

/* Privacy has its way to read more, centred like its cards. */
#private .more { margin-top: 30px; }

/* Pricing: a way in on every plan. */
.plan { display: flex; flex-direction: column; }
.plan ul { flex: 1; }
.plan-get { align-self: flex-start; margin-top: 22px; }
.plan-how { margin: 22px 0 0; font: 450 13.5px var(--sans); color: var(--ink3); }
.plan.pick .plan-how { color: rgba(232,230,255,.7); }
.plans-fine { max-width: 62ch; line-height: 1.55; }

/* The cast says who each one is. */
.cast-name { margin: 22px 0 0; min-height: 1.5em; font: 450 15px var(--sans); color: var(--ink3); }
.cast-name b { color: var(--ink); font-weight: 600; }
.cast-name span { display: inline-block; margin-left: 8px; font: 450 13px var(--mono); color: var(--accent); }

/* One type for small print everywhere; the end's line matches every section's. */
.fine, .end .fine, .wall-phone figcaption { font-family: var(--sans); letter-spacing: 0; }
.end .sub { margin: 18px auto 0; max-width: 44ch; font: 450 clamp(17px, 1.55vw, 19px)/1.55 var(--sans); color: var(--ink2); }

/* Tighter where the walk found empty room. */
.why { padding-top: 110px; }
#every { padding-bottom: 96px; }
.cast { margin-top: 32px; }

/* A menu on a phone: the ☰ opens a sheet of the bar's links (bar.js, "The menu on a phone" below). */
.bar-menu { display: none; font: 500 14px var(--sans); color: inherit; background: none; border: 0; padding: 8px 4px; cursor: pointer; }
@media (max-width: 640px) {
  .bar-menu { display: inline-block; }
  .bar-nav { gap: 14px; }
}
/* Phone-width crops the walk found. */
@media (max-width: 640px) {
  .living-picks { left: 12px; right: 12px; transform: none; justify-content: flex-start; max-width: none; }
  .first-field { font-size: 15px; justify-content: flex-start; text-overflow: ellipsis; }
  .phones video { margin: 0 -22px; }
  .switch-map th, .switch-map td { padding: 12px 14px; }
  .switch-map tbody th { width: 38%; }
}
.stage .phone { right: -1.5%; translate: calc((1 - var(--p)) * 60px) calc((1 - var(--p)) * 80px); }

/* ── Answers drawn as the app draws them (the truth audit, 30 Oct) ─── */
.head { display: grid; gap: 2px; padding: .9em 8px .5em; animation: in .4s var(--ease) both; }
.head b { font-weight: 600; }
.head span { font-size: .88em; color: var(--ink3); }
.row .a { margin-left: auto; color: var(--ink3); font-size: .86em; white-space: nowrap; }
.row .cap { margin-left: 10px; flex: none; font: 500 .78em var(--sans); padding: .1em .45em; border-radius: 5px; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink2); }
.row .a + .cap { margin-left: 8px; }
.row .pill { margin-left: auto; font: 600 .76em var(--sans); padding: .25em .7em; border-radius: 999px; color: #2a1a00; background: #f2b84b; }
.lbl .n { font-weight: 500; margin-left: 4px; }
.lbl.amber { color: #e8a23a; }
.wx { padding: 10px 12px; display: grid; gap: 10px; animation: in .4s var(--ease) both; }
.wx-head { display: flex; align-items: baseline; gap: 8px; }
.wx-head b { font-weight: 600; }
.wx-head span, .wx-note { font-size: .82em; color: var(--ink3); }
.wx-rain { font-weight: 500; }
.day.on { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1.2px var(--accent); }
/* The palette's foot holds keys only. */
.pal-foot { justify-content: flex-end; }
.hp-foot span + span { margin-left: 0; }
/* Steps as KitTimeline: a header that counts, a tick when done, a turning
   ring while working, a hollow ring waiting, joined by a thin line. */
.tl { padding: 12px 14px; display: grid; gap: 0; }
.tl-head { font-weight: 550; margin-bottom: 8px; color: var(--ink2); }
.tl .step { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--ink2); animation: none; }
.tl .step i { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink3); }
.tl .step + .step i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 12px; translate: -50% -1px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.tl .step.now { color: var(--ink); }
.tl .step.now i { box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-top-color: var(--accent); animation: turn-ring .8s linear infinite; }
.tl .step.done { color: var(--ink3); }
.tl .step.done i { box-shadow: none; background: color-mix(in srgb, var(--green) 85%, transparent); }
.tl .step.done i::after { content: ""; position: absolute; left: 3.5px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
@keyframes turn-ring { to { rotate: 360deg; } }
.tl .done-card { margin-top: 12px; }
/* The panel keeps one size, 720 × 480 in the app (a 3 : 2 panel). */
.hp-rows { min-height: 300px; }

/* ── The palette as the Mac draws it, everywhere on the page ───────────
   Colours: Ethereal (jevie/kernel/themes.json), the look on the Mac in the
   reference screenshot: foreground #ececee, light_foreground #b4b4bc,
   background #151517, lighter_background #1b1b1e, selection #2c2c31,
   accent #f0a6bd. Type: the system font at the app's sizes (Design.swift
   Notch.Text): field 18, titles 15 semibold, body 13, detail 12, hints 11,
   headings 13 semibold. Corner 20 (Design.Notch.Shape.corner). */
.ui {
  --bg: #151517; --ink: #ececee; --panel: #1b1b1e; --sel: #2c2c31; --accent: #f0a6bd;
  --ink2: #b4b4bc; --ink3: color-mix(in srgb, #b4b4bc 62%, #151517);
  --line: rgba(236, 236, 238, .13);
  --sysf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-family: var(--sysf); letter-spacing: 0; font-feature-settings: normal;
}
.ui kbd { font-family: var(--sysf); }
/* The Why band keeps Deep Space under its scene. */
.band.ui { --bg: #151517; --ink: #e8e6ff; --panel: #151517; --sel: #262247; --ink2: color-mix(in srgb, #e8e6ff 78%, #151517); --ink3: color-mix(in srgb, #e8e6ff 60%, #151517); --accent: #f0a6bd; }
.why h2, .why .eyebrow { font-family: var(--display); }
.why-body p { font-family: var(--sans); }

/* The glass: the theme's lighter background over its background, a light
   hairline edge and a dark one outside it, as the screenshot's panel. */
.hp-glass, .first-field, .try {
  background: linear-gradient(180deg, color-mix(in srgb, #1b1b1e 94%, transparent), color-mix(in srgb, #151517 96%, transparent));
  border: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .30), 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25), 0 40px 90px -24px rgba(21, 21, 23, .7);
  animation: none;
}
.hero-pal.thinking .hp-glass { box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .45), 0 0 0 1px rgba(0,0,0,.55), 0 0 70px -6px color-mix(in srgb, #f0a6bd 70%, transparent), 0 40px 90px -24px rgba(21, 21, 23, .7); }
.hp-field { height: auto; padding: 20px 26px 18px; border: 0; font: 400 21px/1.2 var(--sysf); color: var(--ink); justify-content: flex-start; }
.hp-say { display: flex; align-items: center; min-width: 0; }
.hp-typed:empty::before { content: "What do you need?"; color: color-mix(in srgb, #b4b4bc 72%, transparent); }
.hp-say .caret, .first .caret, .pal-field .caret { width: 2px; height: 1.2em; border-radius: 1px; background: #ececee; margin: 0 1px; }
.hp-say:has(.hp-typed:not(:empty)) .caret { order: 2; }
.hp-glass .hp-field::after { content: ""; position: absolute; left: 22px; right: 22px; top: 62px; height: 1px; background: rgba(236, 236, 238, .14); }
.hp-glass { padding-bottom: 8px; }
.hp-rows { min-height: 270px; padding: 10px 14px 6px; font-size: 13px; }
.hp-foot { justify-content: flex-end; gap: 18px; padding: 10px 22px 6px; border-top: 1px solid rgba(236, 236, 238, .1); font: 400 11px var(--sysf); color: var(--ink2); }
.hp-foot[hidden] { display: none; }
.hp-foot kbd, .pal-foot kbd { font: 500 10.5px var(--sysf); padding: .1em .45em; border-radius: 5px; background: rgba(236, 236, 238, .12); color: var(--ink2); margin-left: 6px; }

/* Section headings: 13 semibold, the count light, a chevron (Kit heading). */
.sh { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px 10px; font: 600 13px var(--sysf); color: var(--ink2); animation: in .4s var(--ease) both; }
.sh span { font-weight: 400; }
.sh em { font-style: normal; font-weight: 500; color: #e9bb4f; }
.sh i { font-style: normal; font-size: 12px; opacity: .8; translate: 0 -1px; }

/* A session row: a card on the selection colour, Jevie with the agent's
   badge, the task in the foreground, where after it, what it said last. */
.agent { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 18px 14px 14px; border-radius: 14px; margin-bottom: 8px;
  background: color-mix(in srgb, #2c2c31 42%, transparent); animation: in .45s var(--ease) both; animation-delay: var(--d, 0ms); }
.agent.on { background: color-mix(in srgb, #2c2c31 70%, transparent); }
.ag-ic { position: relative; width: 40px; height: 40px; margin-top: 2px; }
.ag-ic svg { width: 40px; height: 40px; display: block; }
.ag-badge { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--sysf); font-style: normal; color: #fff; background: #d97757; box-shadow: 0 0 0 2px #1b1b1e; }
.ag-txt { display: grid; gap: 4px; min-width: 0; }
.ag-txt b { font: 600 15px/1.3 var(--sysf); color: #ececee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-txt b em { font-style: normal; font-weight: 400; color: var(--ink2); }
.ag-says { font: 400 13.5px/1.35 var(--sysf); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-shots { display: flex; gap: 8px; margin-top: 8px; }
.ag-shots img { width: 118px; height: 64px; object-fit: cover; object-position: top; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.agent time { font: 400 13px var(--sysf); color: var(--ink2); padding-top: 12px; }
.agent .pill { align-self: start; margin-top: 10px; font: 600 11px var(--sysf); padding: .3em .75em; border-radius: 999px; color: #2a1a00; background: #e9bb4f; }

/* Rows and answers in the theme's ink, at the app's sizes. */
.ui .row { font-size: 13px; }
.ui .row .t { color: var(--ink); font-weight: 500; }
.ui .row .s, .ui .row .a { color: var(--ink2); }
.ui .row.on { background: color-mix(in srgb, #2c2c31 75%, transparent); }
.ui .head b { font: 600 15px var(--sysf); color: var(--ink); }
.ui .head span { color: var(--ink2); font-size: 12px; }
.ui .lbl { font: 600 13px var(--sysf); color: var(--ink2); }
.ui .wx-head b { font: 600 15px var(--sysf); }
.ui .day { color: var(--ink2); background: color-mix(in srgb, #2c2c31 55%, transparent); }
.ui .day b { color: var(--ink); }
.ui .day .r { color: #a3bfd1; }
.ui .day.on { box-shadow: inset 0 0 0 1.2px #a3bfd1; background: color-mix(in srgb, #a3bfd1 18%, transparent); }

/* The stage's palette: the same glass and type, wearing the dot picked. */
.pal { grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 16px; font-family: var(--sysf);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 95%, transparent), color-mix(in srgb, var(--bg) 96%, transparent));
  box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .26), 0 0 0 1px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45); }
.pal-field { height: 50px; padding: 0 18px; font: 400 clamp(13px, 1.5vw, 17px) var(--sysf); border-bottom-color: color-mix(in srgb, var(--ink2) 14%, transparent); }
.pal-field .typed { color: var(--ink); }
.pal-field .ph { color: color-mix(in srgb, var(--ink2) 72%, transparent); }
.pal-body { padding: 8px 10px; }
.pal-foot { height: 30px; font: 400 11px var(--sysf); }
.pal-foot:has(.pal-keys:empty) { display: none; }
.tl-head { font: 600 13px var(--sysf); }
.tl .step { font-size: 13px; }

/* The Try field and the end's field: the same glass and type. */
.try-field input, .first-field { font-family: var(--sysf); }
.try-field input { font-size: 19px; color: var(--ink); caret-color: #ececee; }
.try-field input::placeholder { color: color-mix(in srgb, #b4b4bc 72%, transparent); }
.try-list b { font: 600 15px var(--sysf); color: var(--ink); }
.try-list span { font: 400 13px/1.45 var(--sysf); color: var(--ink2); }
.try-list em { font: 400 12px var(--sysf); color: var(--ink2); }
.try-list li.sel { background: color-mix(in srgb, #2c2c31 75%, transparent); }
.first-field { color: #ececee; font-size: clamp(17px, 1.9vw, 21px); }
.first .caret { background: #ececee; }
.try-note { font-family: var(--sysf); }
.hp-field { font-size: 26px; padding: 24px 26px 20px; }
.hp-glass .hp-field::after { top: 74px; }
.hp-rows { min-height: 236px; padding-top: 14px; }
@media (max-width: 720px) { .hp-field { font-size: 20px; padding: 18px 18px 16px; } .hp-glass .hp-field::after { top: 58px; left: 16px; right: 16px; } .ag-shots img { width: 84px; height: 48px; } .agent { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px; } .ag-ic, .ag-ic svg { width: 34px; height: 34px; } }
.stage .dmac { opacity: calc(.7 + var(--p) * .3); }

/* ── The palette at its roomy size, a session open (the reference shot) ── */
.sv-cap { margin: 120px 0 0; font: 500 clamp(18px, 1.8vw, 22px)/1.4 var(--sans); color: var(--ink); text-align: center; }
.sview { position: relative; width: min(1120px, 100%); margin-top: 56px; text-align: left; border-radius: 22px;
  background: linear-gradient(180deg, #1b1b1e, #151517);
  box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .30), 0 0 0 1px rgba(0, 0, 0, .55), 0 50px 110px -40px rgba(21, 21, 23, .75); }
.sv-jev { position: absolute; left: 26px; top: calc(60px * -122 / 172); width: 60px; height: 60px; z-index: 2; }
.sv-field { display: flex; align-items: center; gap: 2px; padding: 22px 24px 18px; margin: 0 6px; border-bottom: 1px solid rgba(236, 236, 238, .14); font: 400 clamp(15px, 1.7vw, 22px) var(--sysf); white-space: nowrap; overflow: hidden; }
.sv-ph { color: color-mix(in srgb, #b4b4bc 72%, transparent); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sv-icons { margin-left: auto; padding-left: 18px; display: flex; gap: 20px; color: var(--ink2); }
.sv-icons i { font-style: normal; }
.sv-split { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 0; padding: 10px 12px 14px; min-height: 520px; }
.sv-side { padding: 8px 12px 0 4px; border-right: 1px solid rgba(236, 236, 238, .1); }
.sv-side .row { height: 44px; font-size: 14px; }
.sv-side .row .t { color: var(--ink); }
.sv-gap { margin-top: 14px; }
.sv-new { margin-left: auto; font-weight: 500; color: var(--ink2); }
.sv-hidden span { color: var(--ink3); }
.sv-side .agent { margin-top: 2px; }
.sv-side .ag-ic { width: 40px; height: 40px; }
.sv-read { margin: 0 0 0 12px; padding: 26px 30px; border-radius: 16px; background: color-mix(in srgb, #1b2a3a 55%, #0b1128); color: var(--ink); font: 400 clamp(14px, 1.3vw, 16.5px)/1.65 var(--sysf); }
.sv-read p { margin: 0 0 14px; }
.sv-read .sv-lead { font-size: clamp(16px, 1.55vw, 19px); line-height: 1.5; }
.sv-read b { font-weight: 600; }
.sv-read code { font: 500 .92em ui-monospace, "SF Mono", Menlo, monospace; color: #c89dc1; }
.sv-read ul { margin: 0 0 14px; padding-left: 20px; }
.sv-read li { margin: 4px 0; color: var(--ink); }
.sv-read li::marker { color: var(--ink3); }
@media (max-width: 860px) {
  .sv-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sv-side { border-right: 0; }
  .sv-read { margin: 14px 0 0; padding: 20px; }
  .sv-hidden { display: none; }
  .sv-field { padding: 18px 16px 14px; }
}
.wall-pin { grid-template-columns: minmax(0, 1fr); width: 100%; } .sview, .sv-field, .sv-split, .sv-side, .sv-read { min-width: 0; max-width: 100%; }
.sv-ic { display: block; width: 40px; height: 40px; }

/* ── UI pass (30 Oct, night): rhythm, alignment, nothing odd ─────────── */
/* No blurred haze behind headings: it read as smudges on the paper. */
.sec::before { display: none; }
/* One rhythm between chapters. */
.sec { padding-top: 140px; }
.sec.feat { padding-top: 120px; }
#voice.feat { padding-top: 120px; }
.why { padding-top: 120px; }
.daysec { padding-bottom: 0; }
.wallsec { padding-top: 140px; }
#every { padding-top: 110px; padding-bottom: 90px; margin-top: 120px; }
.phones { margin-top: 36px; height: 500px; }
#looks { padding-top: 120px; }
.cast-name { margin-top: 18px; }
#private { padding-top: 120px; }
.end { padding: 150px var(--gutter) 110px; }
.end h2 { margin-top: 0; }
/* The first screen: the palette stays below the bar as it comes forward,
   and does not stand as a tall empty box while it types. */
.hero-pal { transform: translateY(calc(var(--p) * -6vh)) scale(calc(1 + var(--p) * .06)); }
.hp-rows { min-height: 0; transition: min-height .3s var(--ease); }
.hp-glass:has(.hp-rows:not(:empty)) .hp-rows { min-height: 120px; }
.hp-glass { padding-bottom: 4px; }
.hp-rows:empty { padding: 0; }
/* The demo: the theme row reads label, dots, name; keys spaced as the app spaces them. */
.themes { margin-top: 30px; gap: 9px; }
.themes-label { margin-right: 4px; }
.theme-name { margin-left: 6px; min-width: 8em; color: var(--ink); font-weight: 550; }
.pal-keys { display: flex; gap: 16px; }
.pal-keys span { display: inline-flex; align-items: center; }
/* Feature cards: the cards fan sits inside its card, centred. */
.feat-art .deck { height: 280px; margin-top: 40px; }
.feat-art .deck img { top: 0; }
/* The tidy-Mac story on paper: its step labels in the page's ink. */
.mac-steps { margin-top: 18px; }
.mac-steps button { color: var(--ink3); font: 500 13px var(--sans); }
.mac-steps button:hover { color: var(--ink2); }
.mac-steps li.past button { color: var(--ink2); }
.mac-steps li.on button { color: var(--ink); background: rgba(23, 21, 31, .06); }
.mac-steps button i { background: rgba(23, 21, 31, .12); }
.mac-steps li.past i { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.mac-steps li.on i::after { background: var(--accent); }
.on-mac.mac-story { height: calc(100vh + var(--n, 6) * 45vh); height: calc(100svh + var(--n, 6) * 45svh); }
.mac-stage .sub { margin-bottom: 22px; }
/* The end's field reads as the app's: words from the left, after Jevie. */
.first-field { justify-content: flex-start; padding: 0 24px 0 26px; }
.install-steps { margin-top: 30px; }
/* Pricing: the three cards' small print lines up at the bottom. */
.plan-how, .plan-get { margin-top: auto; padding-top: 22px; }
.plan ul { margin-bottom: 4px; }
.plan-how, .plan-get { padding-top: 0; }
.plan-get { padding: 10px 18px; }
.plan ul { margin-bottom: 22px; }
/* The first screen holds its whole palette: as tall as it needs, nothing clipped. */
.intro { height: auto; }
.intro-pin { position: relative; height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: 96px; overflow: clip; }
.hero-pal { transform: none; }
.hp-glass:has(.hp-rows:not(:empty)) .hp-rows { min-height: 0; }
/* The palette grows with each answer inside a space kept for it, so
   nothing under the first screen moves. */
.hero-pal { height: 380px; }
@media (max-width: 720px) { .hero-pal { height: 360px; } }
.end { padding-bottom: 80px; }

/* ── Coming from Raycast: the import as the palette shows it, the map as pairs ── */
.switch .feat-text { align-self: center; }
.imp { margin-top: 30px; border-radius: 20px; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #1b1b1e, #151517);
  box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .3), 0 0 0 1px rgba(0,0,0,.5), 0 30px 70px -30px rgba(21, 21, 23, .6); }
.imp-field { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(236, 236, 238, .14); }
.imp-jev { width: 28px; height: 28px; flex: none; }
.imp-said { font: 400 19px var(--sysf); color: #ececee; }
.imp-head { display: grid; gap: 3px; padding: 16px 20px 6px; }
.imp-head b { font: 600 15px var(--sysf); color: #ececee; }
.imp-head span { font: 400 13px var(--sysf); color: #b4b4bc; }
.imp-list { list-style: none; margin: 0; padding: 8px 20px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.imp-list li { display: flex; align-items: center; gap: 10px; font: 400 14px var(--sysf); color: #f3e3d8; }
.imp-list i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, #92a593 85%, transparent); }
.imp-list i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #0b1128; border-width: 0 1.7px 1.7px 0; rotate: 45deg; }
.imp-keys { margin: 18px 0 0; font: 450 14.5px/1.7 var(--sans); color: var(--ink2); }
.imp-keys kbd { display: inline-block; min-width: 1.6em; text-align: center; font: 500 12.5px var(--sans); padding: .15em .5em; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: inset 0 -1px 0 rgba(23,21,31,.12), 0 0 0 1px rgba(23,21,31,.1); }

.smap { min-width: 0; border-radius: 24px; background: #fff; box-shadow: var(--lift); padding: 10px 10px 12px; }
.smap-head { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr); padding: 14px 16px 10px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.smap-head span:last-child { grid-column: 3; }
.smap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.smap li { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr); align-items: center; padding: 10px 16px; border-radius: 14px; transition: background-color .25s var(--ease); }
.smap li:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sm-from { font: 500 15px var(--sans); color: var(--ink2); }
.sm-arrow { font-style: normal; color: var(--ink3); text-align: center; }
.sm-say { justify-self: start; max-width: 100%; font: 450 14.5px/1.35 var(--sysf); color: #ececee; padding: 7px 13px; border-radius: 10px;
  background: linear-gradient(180deg, #1a2147, #0d1330); box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .18); }
@media (max-width: 640px) {
  .smap-head, .smap li { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.2fr); padding-left: 10px; padding-right: 10px; }
  .imp-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Coming from Raycast, alive ───────────────────────────────────────
   The import: the sentence types itself, then each thing comes over with a
   tick, one after another. The map: Raycast's features down the left, a
   small palette on the right typing the sentence for the one in hand and
   what it does; it walks through them, and pointing at one plays it. */
.imp-head, .imp-list li { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.imp.done .imp-head { opacity: 1; transform: none; }
.imp.done .imp-list li { opacity: 1; transform: none; }
.imp-list li:nth-child(1) { transition-delay: .12s; } .imp-list li:nth-child(2) { transition-delay: .2s; } .imp-list li:nth-child(3) { transition-delay: .28s; }
.imp-list li:nth-child(4) { transition-delay: .36s; } .imp-list li:nth-child(5) { transition-delay: .44s; } .imp-list li:nth-child(6) { transition-delay: .52s; } .imp-list li:nth-child(7) { transition-delay: .6s; }
.imp-list i { transform: scale(.4); transition: transform .5s var(--spring); transition-delay: inherit; }
.imp.done .imp-list i { transform: none; }
.imp-field .caret { width: 2px; height: 1.15em; background: #ececee; }
.imp.done .imp-field .caret { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .imp-head, .imp-list li, .imp-list i { opacity: 1; transform: none; transition: none; } }

.smap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 22px; padding: 22px; border-radius: 28px; background: #fff; box-shadow: var(--lift); }
.smap-label { margin: 0 0 12px 10px; font: 600 12px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.sm-list { grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.sm-list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left;
  font: 500 15px var(--sans); color: var(--ink2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.sm-list button:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sm-list button[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.sm-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, var(--h1), var(--h2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px -3px color-mix(in srgb, var(--h2) 60%, transparent); transition: transform .35s var(--spring); }
.sm-ic svg { width: 16px; height: 16px; }
.sm-list button[aria-selected="true"] .sm-ic { transform: scale(1.08); }
.sm-pal { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; font-family: var(--sysf); }
.sm-label-say { color: var(--ink3); }
.sm-pal .smap-label { font-family: var(--sans); color: color-mix(in srgb, #17151f 58%, #fbf8f4); }
.sm-glass { position: relative; flex: 1; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: radial-gradient(90% 60% at 20% 0%, rgba(125, 130, 217, .22), transparent 70%), linear-gradient(180deg, #1b1b1e, #151517);
  box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .3), 0 0 0 1px rgba(0,0,0,.5), 0 30px 60px -30px rgba(21, 21, 23, .6); }
.sm-field { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(236, 236, 238, .14); font: 400 20px var(--sysf); color: #ececee; min-height: 66px; }
.sm-jev { width: 28px; height: 28px; flex: none; }
.sm-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -8px; }
.sm-out { padding: 14px 12px; }
.sm-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: color-mix(in srgb, #2c2c31 75%, transparent); font: 400 14.5px var(--sysf); color: #ececee;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s var(--ease), transform .45s var(--spring); }
.sm-out.in .sm-row { opacity: 1; transform: none; }
.sm-row span:nth-child(2) { flex: 1; min-width: 0; }
.sm-row .cap { flex: none; font: 500 11px var(--sysf); padding: .15em .5em; border-radius: 5px; background: rgba(236, 236, 238, .14); color: #b4b4bc; }
@media (max-width: 860px) {
  .smap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 16px; }
  .sm-list { grid-row: auto; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .sm-list::-webkit-scrollbar { display: none; }
  .sm-list button { white-space: nowrap; padding: 6px 10px 6px 6px; }
  .sm-pal { grid-column: auto; grid-row: auto; margin-top: 14px; }
  .sm-glass { min-height: 170px; }
  .sm-field { font-size: 17px; }
}
.smap .sm-list li { display: block; padding: 0; border-radius: 0; background: none; }
.smap .sm-list li:hover { background: none; }
.sm-list button { white-space: nowrap; }
.sm-glass { flex: 0 0 auto; }
.sm-out { min-height: 92px; }
.sm-pal { justify-content: center; }
.sm-foot { display: flex; justify-content: flex-end; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(236, 236, 238, .1); font: 400 11px var(--sysf); color: #b4b4bc; }
.sm-foot kbd { font: 500 10.5px var(--sysf); padding: .1em .45em; border-radius: 5px; background: rgba(236, 236, 238, .12); color: #b4b4bc; margin-left: 6px; }
.sm-hint { margin: 14px 0 0 4px; font: 450 13px var(--sans); color: var(--ink3); }

/* ── Coming from Raycast, simpler: words on the left, one palette on the right ── */
.rc-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 34em; }
.rc-points li { position: relative; padding-left: 22px; font: 450 16px/1.55 var(--sans); color: var(--ink2); }
.rc-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .75; }
.rc-points q { quotes: "“" "”"; color: var(--ink); font-weight: 550; }
.rc-points kbd { display: inline-block; min-width: 1.5em; margin: 0 1px; text-align: center; font: 500 12.5px var(--sans); padding: .12em .45em; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: inset 0 -1px 0 rgba(23,21,31,.12), 0 0 0 1px rgba(23,21,31,.1); }
.rc-stage { min-width: 0; padding: clamp(28px, 4vw, 52px); border-radius: 30px; display: grid; place-items: center;
  background: radial-gradient(60% 70% at 80% 90%, rgba(255, 233, 214, .95), rgba(255, 233, 214, 0)), linear-gradient(165deg, #9fbdf0, #c9d3f5 45%, #f2d6e2 75%, #ffe0cc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 30px 70px -40px rgba(44, 36, 92, .4); }
.rc-pal { width: 100%; height: 330px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #1b1b1e, #151517);
  box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .3), 0 0 0 1px rgba(0,0,0,.5), 0 40px 80px -30px rgba(21, 21, 23, .65); }
.rc-field { flex: none; display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 22px; border-bottom: 1px solid rgba(236, 236, 238, .14); font: 400 21px var(--sysf); color: #ececee; }
.rc-jev { width: 30px; height: 30px; flex: none; }
.rc-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -10px; }
.rc-body { flex: 1; padding: 18px 22px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.rc-body.in { opacity: 1; transform: none; }
.rc-head { display: grid; gap: 3px; margin-bottom: 14px; }
.rc-head b { font: 600 15px var(--sysf); color: #ececee; }
.rc-head span, .rc-was { font: 400 13px var(--sysf); color: #b4b4bc; }
.rc-was { margin: 0 0 12px; }
.rc-was b { font-weight: 600; color: #f3e3d8; }
.rc-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.rc-ticks li { display: flex; align-items: center; gap: 10px; font: 400 14.5px var(--sysf); color: #f3e3d8;
  opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--i) * 70ms + 120ms); }
.rc-body.in .rc-ticks li { opacity: 1; transform: none; }
.rc-tick { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #92a593; }
.rc-tick::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #0b1128; border-width: 0 1.7px 1.7px 0; rotate: 45deg; }
.rc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #2c2c31 75%, transparent); font: 400 15px var(--sysf); color: #ececee; }
.rc-row span:nth-child(2) { flex: 1; min-width: 0; }
.rc-row .cap { flex: none; font: 500 11px var(--sysf); padding: .15em .5em; border-radius: 5px; background: rgba(236, 236, 238, .14); color: #b4b4bc; }
.rc-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, var(--h1), var(--h2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.rc-ic svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .rc-stage { padding: 18px; border-radius: 22px; }
  .rc-pal { height: 330px; }
  .rc-field { font-size: 17px; height: 58px; padding: 0 16px; }
  .rc-body { padding: 14px 16px; }
  .rc-ticks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
  .rc-ticks li { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .rc-body, .rc-ticks li { transition: none; opacity: 1; transform: none; } }
.rc-pal { height: 312px; transition: height .5s var(--ease); }
.rc-pal.short { height: 206px; }
.rc-ticks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .rc-pal, .rc-pal.short { height: 330px; } .rc-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.rc-ticks li { white-space: nowrap; }
.rc-pal { height: 300px; }
.rc-pal.short { height: 206px; }
@media (max-width: 860px) { .rc-pal, .rc-pal.short { height: 316px; } }
.rc-pal { height: 280px; } .rc-pal.short { height: 200px; } @media (max-width: 860px) { .rc-pal, .rc-pal.short { height: 300px; } }

/* ── The first screen, bold and clear (as Raycast's): night, one line, one
   button, the palette glowing under it. ── */
.intro-pin { background: #05060f; }
.intro-pin .sky { display: none; }
.intro-pin::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(1100px, 120vw); height: 70%; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 120, 165, .30), rgba(125, 130, 217, .18) 45%, transparent 75%); filter: blur(30px); }
.intro-copy::before { display: none; }
.intro-copy { padding-top: max(150px, 18vh); }
.intro h1 { font-family: var(--display); font-weight: 800; font-size: clamp(60px, 9vw, 132px); line-height: .9; letter-spacing: -.06em; color: #fff; text-shadow: none; }
.intro h1 span { color: #f0a6bd; text-shadow: none; }
.intro-copy .hero-line { margin-top: 26px; max-width: none; font: 450 clamp(18px, 1.7vw, 22px)/1.4 var(--sans); color: rgba(255, 255, 255, .72); text-shadow: none; }
.intro-copy .cta { margin-top: 38px; }
.intro .get { font-size: 16px; padding: 13px 24px; border-radius: 12px; background: #fff; color: #05060f; box-shadow: 0 10px 40px -10px rgba(240, 166, 189, .55); }
.hero-pal { margin-top: clamp(72px, 9vh, 104px); }
.hp-glass { box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .28), 0 0 0 1px rgba(0,0,0,.6), 0 40px 120px -20px rgba(240, 120, 165, .25), 0 30px 80px -30px rgba(0,0,0,.8); }
.bar.on-sky { color: #fff; }
.intro-pin { padding-bottom: 120px; }
/* From night into the paper below, softly. */
.intro-pin::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, #fbf8f4); pointer-events: none; }
@media (max-width: 720px) { .intro-copy { padding-top: 120px; } .intro h1 { font-size: clamp(54px, 15vw, 76px); } .intro-copy .hero-line { font-size: 17px; padding: 0 12px; } }

/* ── The first screen: a Mac desktop you can talk to ─────────────────── */
.bar.on-sky { opacity: 0; pointer-events: none; }
.bar { transition: opacity .35s var(--ease), background-color .7s var(--ease), border-color .3s; }
.intro { height: auto; }
.intro-pin.dh { position: relative; height: 100vh; height: 100svh; min-height: 640px; padding: 0; background: #0b0d18; display: flex; flex-direction: column; overflow: hidden; }
.intro-pin.dh::before, .intro-pin.dh::after { display: none; }
.dh-menu { position: relative; z-index: 5; flex: none; height: 32px; display: flex; align-items: center; gap: 22px; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 14px;
  background: rgba(20, 22, 44, .38); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); color: #fff; font: 500 13px var(--sysf); }
.dh-logo { display: inline-flex; align-items: center; gap: 7px; font: 700 13.5px var(--sysf); text-decoration: none; color: #fff; }
.dh-logo .mark-jev { width: 18px; height: 18px; }
.dh-links { display: flex; gap: 18px; }
.dh-links a { color: rgba(255,255,255,.92); text-decoration: none; }
.dh-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dh-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.dh-get { font: 600 12.5px var(--sysf); color: #1a1b2e; background: #fff; padding: 4px 11px; border-radius: 7px; text-decoration: none; }
.dh-clock { color: rgba(255,255,255,.92); }
.dh-screen { position: relative; flex: 1; overflow: hidden; isolation: isolate; }
.dh-screen .sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; transform: none; transition: filter .8s var(--ease); }
.dh-screen.dark .sky { filter: brightness(.38) saturate(.8) hue-rotate(12deg); }
/* The one message, on the wallpaper like a desktop widget. */
.dh-title { position: absolute; left: clamp(28px, 5vw, 80px); top: clamp(36px, 7vh, 80px); margin: 0; z-index: 1; text-align: left;
  font: 800 clamp(44px, 6.4vw, 104px)/.9 var(--display); letter-spacing: -.055em; color: #fff; text-shadow: 0 2px 40px rgba(20, 30, 90, .25); }
.dh-title span { color: #fff; opacity: .78; }
/* The windows: drawn simply, each a real app's shape. */
.dw { position: absolute; z-index: 2; border-radius: 12px; overflow: hidden; background: rgba(250, 249, 252, .92); color: #2a2836;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 22px 50px -14px rgba(20, 22, 60, .45); font: 400 12px var(--sysf);
  transition: left .7s var(--spring), top .7s var(--spring), width .7s var(--spring), height .7s var(--spring), opacity .35s var(--ease), transform .45s var(--ease), background-color .6s, color .6s; }
.dw-top { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-bottom: 1px solid rgba(0,0,0,.06); }
.dw-top i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .dw-top i:nth-child(2) { background: #febc2e; } .dw-top i:nth-child(3) { background: #28c840; }
.dw-top span { margin-left: 8px; font-weight: 600; color: #4b4957; }
.dw-body { padding: 12px 14px; }
.dw.gone { opacity: 0; transform: scale(.92) translateY(12px); pointer-events: none; }
.dw-notes { left: 6%; top: 46%; width: 220px; height: 210px; } .dw-notes b { display: block; font-size: 15px; margin-bottom: 8px; } .dw-notes p { margin: 5px 0; }
.dw-music { right: 5%; top: 8%; width: 260px; height: 112px; } .dw-music .dw-body { display: flex; gap: 12px; align-items: center; }
.dm-art { width: 54px; height: 54px; border-radius: 8px; flex: none; background: linear-gradient(140deg, #ffb46a, #e0457b 60%, #6a4cc9); }
.dw-music b { display: block; font-size: 13px; } .dw-music span { color: #7a7886; }
.dm-bar { margin-top: 8px; width: 130px; height: 3px; border-radius: 3px; background: rgba(0,0,0,.1); } .dm-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: #e0457b; }
.dw-music.playing .dm-bar i { animation: dm-play 6s linear infinite; } @keyframes dm-play { from { width: 10%; } to { width: 100%; } }
.dw-finder { right: 4%; top: 50%; width: 300px; height: 190px; }
.df { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; } .df span { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; color: #4b4957; text-align: center; }
.df i { width: 34px; height: 30px; border-radius: 5px; background: var(--fc); }
.dw-safari { left: 4%; top: 8%; width: 300px; height: 0; opacity: 0; }
.ds-hero { height: 70px; border-radius: 8px; background: linear-gradient(140deg, #a9c6f2, #f4cdd8); } .ds-lines i { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: rgba(0,0,0,.08); }
/* Tiled: four windows in a grid round the palette. */
.dh-screen.tiled .dw { opacity: 1; }
.dh-screen.tiled .dw-safari { left: 1.5%; top: 2.5%; width: 31%; height: 46%; }
.dh-screen.tiled .dw-notes { left: 1.5%; top: 51%; width: 31%; height: 46%; }
.dh-screen.tiled .dw-music { left: 67.5%; right: auto; top: 2.5%; width: 31%; height: 46%; }
.dh-screen.tiled .dw-finder { left: 67.5%; right: auto; top: 51%; width: 31%; height: 46%; }
.dh-screen.tiled .dh-title { opacity: 0; }
.dh-title { transition: opacity .5s var(--ease); }
/* Dark mode: the windows go dark with the Mac. */
.dh-screen.dark .dw { background: rgba(34, 34, 44, .94); color: #e8e6f0; }
.dh-screen.dark .dw-top span, .dh-screen.dark .df span { color: #c9c6d4; } .dh-screen.dark .dw-top { border-color: rgba(255,255,255,.08); }
/* The palette, in the middle of it all, as on the Mac. */
.dh-pal { position: absolute; left: 50%; top: 50%; translate: -50% -42%; z-index: 4; width: min(600px, calc(100vw - 32px)); height: auto; margin: 0; transform: none; }
.dh-form { margin: 0; }
.dh-q { flex: 1; min-width: 0; display: flex; }
.dh-input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #ececee; font: 400 22px var(--sysf); caret-color: #ececee; padding: 0; }
.dh-input::placeholder { color: color-mix(in srgb, #b4b4bc 72%, transparent); }
.dh-rows { min-height: 0; padding: 8px 10px 10px; }
.dh-lbl { padding: 6px 8px 6px; }
.dt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 400 14.5px var(--sysf); color: #ececee; text-align: left; }
.dt:hover, .dt:focus-visible { background: color-mix(in srgb, #2c2c31 75%, transparent); outline: 0; }
.dt-k { font-size: 12.5px; color: #b4b4bc; }
.dh-miss { display: grid; gap: 3px; padding: 6px 8px 10px; } .dh-miss b { font: 600 14px var(--sysf); color: #ececee; } .dh-miss span { font: 400 13px var(--sysf); color: #b4b4bc; }
.dh-done .tile svg path { fill: #fff; }
.dh-pal .hero-jev { left: 22px; }
/* A notification, top right, as macOS shows one. */
.dh-note { position: absolute; right: 14px; top: 12px; z-index: 6; display: flex; gap: 10px; align-items: center; width: 300px; padding: 11px 13px; border-radius: 16px;
  background: rgba(246, 246, 250, .86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 40px -12px rgba(0,0,0,.4);
  font: 400 12.5px var(--sysf); color: #2a2836; opacity: 0; transform: translateX(30px); transition: opacity .4s var(--ease), transform .5s var(--spring); pointer-events: none; }
.dh-note.in { opacity: 1; transform: none; } .dh-note b { display: block; font-size: 13px; } .dh-note .tile { width: 30px; height: 30px; }
/* The dock. */
.dh-dock { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 3; display: flex; gap: 9px; padding: 7px 9px; border-radius: 20px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.dh-dock i { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.dh-dock .dock-jev { background: #1f1a24 url("favicon.svg?v=3") center/72% no-repeat; }
@media (max-width: 860px) {
  .dh-links, .dh-clock { display: none; }
  .dw-notes, .dw-finder, .dw-safari { display: none; }
  .dw-music { right: 4%; top: auto; bottom: 86px; width: 220px; }
  .dh-title { top: 28px; font-size: clamp(44px, 13vw, 64px); }
  .dh-pal { top: 46%; }
  .dh-input { font-size: 18px; }
  .dh-dock i { width: 38px; height: 38px; }
  .dh-screen.tiled .dw-music { left: 4%; width: 92%; top: 2.5%; height: 22%; }
}
@media (max-height: 760px) { .dw-notes { top: 50%; height: 180px; } .dw-finder { height: 170px; } }
.intro-pin.dh { align-items: stretch; } .dh-screen { width: 100%; } .dh-menu { width: 100%; }
.intro-pin.dh .dh-screen .sky { display: block; }
.dh-pal { width: min(560px, 36vw); top: 54%; translate: -50% -30%; }
.dh-title { font-size: clamp(44px, 5.6vw, 92px); }
.dh-screen.tiled .dw-safari, .dh-screen.tiled .dw-notes { width: 30%; }
.dh-screen.tiled .dw-music, .dh-screen.tiled .dw-finder { left: 68.5%; width: 30%; }
@media (max-width: 860px) { .dh-pal { width: calc(100vw - 32px); top: 50%; } }
@media (max-width: 860px) { .dw-music { display: none; } .dh-screen.tiled .dw-music, .dw-music.playing { display: block; left: 4%; right: auto; top: 2.5%; bottom: auto; width: 92%; height: auto; } }

/* ── The desktop, real: windows as macOS draws them, filled ──────────── */
.dh-menu { height: 30px; gap: 20px; background: rgba(28, 30, 58, .32); font: 500 13px var(--sysf); text-shadow: 0 0 8px rgba(0,0,0,.15); }
.dh-status { display: inline-flex; align-items: center; gap: 15px; color: #fff; }
.dh-status svg { height: 13px; width: auto; }
.dh-get { padding: 3px 10px; border-radius: 6px; }
.dh-clock { font-variant-numeric: tabular-nums; }

.dh-title { left: 50%; top: clamp(30px, 5.5vh, 64px); translate: -50% 0; width: max-content; max-width: 92vw; text-align: center; z-index: 1;
  font: 800 clamp(48px, 6.6vw, 112px)/.95 var(--display); letter-spacing: -.055em; color: #fff; text-shadow: 0 4px 60px rgba(30, 40, 110, .35); }
.dh-title span { opacity: 1; color: #fde3ec; }

/* A window: rounded 12, a hairline, the deep soft shadow macOS casts. */
.dw { display: flex; border-radius: 12px; background: #fbfbfd; color: #1d1d22; font: 400 12.5px/1.35 var(--sysf);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.28), inset 0 .5px 0 rgba(255,255,255,.6), 0 30px 70px -18px rgba(14, 18, 52, .55), 0 10px 24px -10px rgba(14, 18, 52, .35); }
.dw-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; }
.tl { display: inline-flex; gap: 8px; margin-right: 6px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.tl i:nth-child(2) { background: #febc2e; } .tl i:nth-child(3) { background: #28c840; }
.tb { display: inline-grid; place-items: center; width: 26px; height: 24px; border-radius: 6px; color: #6b6b74; }
.tb svg { width: 15px; height: 15px; } .tb.dim { opacity: .4; }
.side { flex: none; width: 148px; display: flex; flex-direction: column; padding-bottom: 10px; border-right: .5px solid rgba(0,0,0,.08);
  background: rgba(232, 232, 240, .78); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); border-radius: 12px 0 0 12px; }
.sh2 { margin: 8px 16px 4px; font: 600 11px var(--sysf); color: #8a8a94; }
.si { display: flex; justify-content: space-between; margin: 1px 8px; padding: 4px 9px; border-radius: 6px; font: 400 13px var(--sysf); color: #2b2b31; }
.si em { font-style: normal; color: #8a8a94; } .si.on { background: rgba(0, 0, 0, .08); }

/* Safari: the page itself. */
.dw-safari { flex-direction: column; }
.dw-safari .dw-bar { border-bottom: .5px solid rgba(0,0,0,.08); background: #f4f4f7; border-radius: 12px 12px 0 0; }
.url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 360px; margin: 0 auto; height: 28px; border-radius: 8px; background: rgba(0,0,0,.05); font: 500 12.5px var(--sysf); color: #3a3a42; }
.url svg { width: 11px; height: 11px; color: #8a8a94; }
.web { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow: hidden; min-height: 0; }
.web-hero { position: relative; flex: 1 1 60%; min-height: 90px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #8fb4ef, #f6c8c8 72%, #ffdcb8); }
.sun { position: absolute; right: 22%; bottom: 30%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #fff6e8; box-shadow: 0 0 60px 20px rgba(255, 240, 220, .8); }
.hill { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50% 50% 0 0; }
.hill.h1 { background: #6f7fcf; left: -30%; right: 30%; } .hill.h2 { background: #4b5aa8; left: 25%; right: -25%; bottom: -40%; }
.web-hero-t { position: absolute; left: 18px; bottom: 16px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.web-hero-t b { display: block; font: 700 clamp(18px, 2vw, 28px) var(--display); letter-spacing: -.03em; } .web-hero-t span { font-size: 12px; opacity: .92; }
.web-cards { flex: 0 1 40%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.wc { display: flex; flex-direction: column; gap: 3px; min-height: 0; } .wc i { flex: 1; min-height: 34px; border-radius: 8px; background: linear-gradient(150deg, var(--a), var(--b)); }
.wc b { font: 600 12.5px var(--sysf); } .wc span { color: #7a7a84; font-size: 11.5px; }

/* Notes: folders, the list, the note. */
.nl { flex: none; width: 34%; display: flex; flex-direction: column; border-right: .5px solid rgba(0,0,0,.08); }
.nl .dw-bar { justify-content: flex-end; gap: 4px; }
.ni { margin: 0 8px 2px; padding: 8px 10px; border-radius: 8px; } .ni.on { background: #f5d36b; }
.ni b { display: block; font: 600 13px var(--sysf); } .ni span { font-size: 11.5px; color: #7a7a84; } .ni.on span { color: #5e4a12; }
.nb { flex: 1; padding: 0 22px 16px; min-width: 0; overflow: hidden; } .nb .dw-bar { padding: 0; }
.nd { margin: 0 0 6px; text-align: center; font-size: 11px; color: #9a9aa3; }
.nb > b { display: block; font: 700 20px var(--sysf); margin-bottom: 8px; }
.ck { position: relative; margin: 7px 0; padding-left: 26px; font: 400 14px var(--sysf); }
.ck::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px #b7b7c0; }
.ck.on { color: #9a9aa3; } .ck.on::before { background: #e8b923; box-shadow: none; }
.ck.on::after { content: ""; position: absolute; left: 5.5px; top: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; rotate: 45deg; }

/* Music: playing now, and albums. */
.mm { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.mp { gap: 6px; border-bottom: .5px solid rgba(0,0,0,.08); }
.pp .p2, .dw-music.playing .pp .p1 { display: none; } .dw-music.playing .pp .p2 { display: block; }
.np { flex: 1; display: flex; align-items: center; gap: 9px; margin-left: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; background: rgba(0,0,0,.04); min-width: 0; }
.np > i, .al i { background: linear-gradient(140deg, var(--a), var(--b) 55%, var(--c)); }
.np > i { width: 30px; height: 30px; border-radius: 5px; flex: none; }
.np b { display: block; font: 600 12px var(--sysf); white-space: nowrap; } .np em { font-style: normal; font-size: 11px; color: #7a7a84; white-space: nowrap; }
.mbar { flex: 1; height: 3px; border-radius: 3px; background: rgba(0,0,0,.1); margin-left: 8px; min-width: 30px; } .mbar i { display: block; width: 32%; height: 100%; border-radius: 3px; background: #fa2d55; }
.dw-music.playing .mbar i { animation: dm-play 8s linear infinite; }
.mh { margin: 14px 18px 10px; font: 700 20px var(--sysf); }
.alb { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; padding: 0 18px 16px; align-content: start; overflow: hidden; }
.al i { display: block; aspect-ratio: 1; border-radius: 8px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.al b { display: block; margin-top: 6px; font: 600 12px var(--sysf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al span { font-size: 11px; color: #7a7a84; }

/* Finder: Downloads. */
.fm { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fm .dw-bar { gap: 4px; } .ft { margin: 0 auto 0 8px; font: 700 13.5px var(--sysf); }
.fg { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 8px; padding: 10px 16px 16px; align-content: start; overflow: hidden; }
.f { display: grid; justify-items: center; gap: 6px; text-align: center; } .f > span { font-size: 11.5px; line-height: 1.25; color: #2b2b31; word-break: break-word; }
.fi { position: relative; display: block; width: 46px; height: 56px; }
.fi.doc { border-radius: 4px 12px 4px 4px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 2px 5px -2px rgba(0,0,0,.25); }
.fi.doc::before { content: ""; position: absolute; right: 0; top: 0; width: 12px; height: 12px; border-radius: 0 0 0 4px; background: linear-gradient(225deg, transparent 50%, #e3e3ea 50%); }
.fi.doc em { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; font: 700 8.5px var(--sysf); font-style: normal; letter-spacing: .04em; color: #fff; background: var(--fc); padding: 1px 4px; border-radius: 3px; }
.fi.img { width: 56px; height: 42px; margin: 7px 0; border: 2.5px solid #fff; border-radius: 3px; background: linear-gradient(170deg, #9ed3e6, #f4d6a8 70%, #e8c18d); box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 2px 5px -2px rgba(0,0,0,.25); }
.fi.dir { width: 54px; height: 42px; margin: 7px 0; border-radius: 6px; background: linear-gradient(180deg, #7cc0ff, #3a8eef); box-shadow: 0 2px 5px -2px rgba(0,0,0,.25); }
.fi.dir::before { content: ""; position: absolute; left: 0; top: -5px; width: 22px; height: 8px; border-radius: 4px 4px 0 0; background: #5aa6f5; }

/* Where they stand: under the headline, overlapping as real windows do. */
.dw-safari { left: 3%; top: 30%; width: 41%; height: 58%; z-index: 2; }
.dw-notes { left: 26%; top: 47%; width: 34%; height: 42%; z-index: 3; }
.dw-music { right: 3%; left: auto; top: 28%; width: 36%; height: 40%; z-index: 2; }
.dw-finder { right: 6%; left: auto; top: 58%; width: 32%; height: 33%; z-index: 3; }
.dh-pal { top: 47%; translate: -50% 0; z-index: 6; width: min(580px, 42vw); }
.dh-pal .hp-glass { box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .3), 0 0 0 1px rgba(0,0,0,.55), 0 40px 100px -20px rgba(21, 21, 23, .7); }
/* Tiled: four windows filling the screen, as Jevie tiles them. */
.dh-screen.tiled .dw { transition-duration: .75s; }
.dh-screen.tiled .dw-safari { left: .8%; top: 1.4%; width: 48.8%; height: 47.8%; }
.dh-screen.tiled .dw-notes { left: .8%; top: 50.6%; width: 48.8%; height: 40.5%; }
.dh-screen.tiled .dw-music { left: 50.4%; right: auto; top: 1.4%; width: 48.8%; height: 47.8%; }
.dh-screen.tiled .dw-finder { left: 50.4%; right: auto; top: 50.6%; width: 48.8%; height: 40.5%; }
.dh-screen.tiled .dh-pal { top: 54%; translate: -50% -50%; }
/* Dark mode. */
.dh-screen.dark .dw { background: #1e1e24; color: #ececf1; box-shadow: 0 0 0 .5px rgba(255,255,255,.12), 0 30px 70px -18px rgba(0,0,0,.7); }
.dh-screen.dark .side { background: rgba(44, 44, 54, .78); border-color: rgba(255,255,255,.06); }
.dh-screen.dark .si { color: #e4e4ea; } .dh-screen.dark .si.on { background: rgba(255,255,255,.1); }
.dh-screen.dark .dw-safari .dw-bar { background: #2a2a31; border-color: rgba(255,255,255,.06); }
.dh-screen.dark .url, .dh-screen.dark .np { background: rgba(255,255,255,.07); color: #e4e4ea; }
.dh-screen.dark .tb { color: #a4a4ae; }
.dh-screen.dark .nl, .dh-screen.dark .mp { border-color: rgba(255,255,255,.07); }
.dh-screen.dark .ni.on { background: #8f7420; } .dh-screen.dark .ni.on span { color: #f3e2a8; }
.dh-screen.dark .f > span { color: #e4e4ea; } .dh-screen.dark .fi.doc { background: #e9e9ef; }
.dh-screen.dark .dh-title { opacity: .9; }
/* The dock: glass, drawn icons, a dot under what is open. */
.dh-dock { gap: 7px; padding: 6px 8px; border-radius: 22px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px -10px rgba(0,0,0,.35); bottom: 8px; z-index: 7; }
.dh-dock .di { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: none; box-shadow: 0 3px 8px -3px rgba(0,0,0,.35); transition: transform .25s var(--spring); }
.dh-dock .di:hover { transform: translateY(-6px) scale(1.12); }
.dh-dock .di svg { width: 100%; height: 100%; }
.dh-dock .di.on::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.85); }
.di-folder { background: linear-gradient(180deg, #8fd0ff, #3a8eef) !important; }
.di-web { background: linear-gradient(180deg, #5fc4ff, #1b6fe0) !important; }
.di-cal { background: #fff !important; display: flex !important; flex-direction: column; justify-content: center; gap: 0; }
.di-cal b { font: 700 9px var(--sysf); color: #ff3b30; letter-spacing: .05em; } .di-cal em { font: 300 24px/1 var(--sysf); font-style: normal; color: #1d1d22; }
.di-notes { background: linear-gradient(180deg, #ffd85a 0 26%, #fffdf3 26%) !important; }
.di-music { background: linear-gradient(180deg, #ff6b88, #fa2d55) !important; }
.di-term { background: linear-gradient(180deg, #3a3a42, #1c1c22) !important; }
.di-set { background: linear-gradient(180deg, #a9a9b3, #6e6e78) !important; }
.dh-dock .dock-jev { background: #1f1a24 url("favicon.svg?v=3") center/74% no-repeat; }
.dsep { width: 1px; align-self: stretch; margin: 6px 2px; background: rgba(255,255,255,.35); }
@media (max-width: 1100px) { .side { display: none; } .dw .dw-bar .tl { margin-right: 2px; } }
@media (max-width: 860px) {
  .dw-safari, .dw-notes, .dw-finder { display: none; }
  .dh-title { font-size: clamp(42px, 12vw, 64px); width: 92vw; }
  .dh-pal { width: calc(100vw - 28px); top: 40%; }
  .dh-dock .di { width: 38px; height: 38px; border-radius: 9px; } .dh-dock { gap: 5px; } .di-term, .di-set, .dsep { display: none !important; }
  .dh-screen.tiled .dw-safari { display: flex; left: 3%; top: 3%; width: 94%; height: 30%; }
}
.np > i, .al i { background: linear-gradient(140deg, var(--ca), var(--cb) 55%, var(--cc)); }
.wc i { background: linear-gradient(150deg, var(--ca), var(--cb)); }
.dw-safari { opacity: 1; }
.fi.doc em { white-space: nowrap; }
/* Breathing room: the browser behind on the left, Notes in front of it, Music and Finder on the right. */
.dw-safari { left: 3%; top: 29%; width: 40%; height: 60%; }
.dw-notes { left: 9%; top: 56%; width: 30%; height: 36%; z-index: 3; }
.dw-music { right: 3%; top: 29%; width: 38%; height: 42%; }
.dw-finder { right: 9%; top: 60%; width: 30%; height: 32%; }
.dh-pal { top: 44%; width: min(560px, 40vw); }
/* At rest two windows, the palette clear between them; tiling brings the other two in. */
.dw-safari { left: 3.5%; top: 31%; width: 39%; height: 60%; }
.dw-music { right: 3.5%; top: 31%; width: 39%; height: 60%; }
.dh-screen:not(.tiled) .dw-notes, .dh-screen:not(.tiled) .dw-finder { opacity: 0; transform: scale(.94) translateY(18px); pointer-events: none; }
.dh-pal { top: 42%; width: min(560px, 38vw); }
.dh-screen.tiled .dh-pal { width: min(560px, 40vw); }
@media (max-width: 860px) {
  .dh-pal, .dh-screen.tiled .dh-pal { width: calc(100vw - 28px); top: 40%; translate: -50% 0; }
  .dw-music, .dw-notes, .dw-finder { display: none !important; }
  .dw-safari { display: none; }
  .dh-screen.tiled .dw-safari { display: flex; left: 3%; top: 2.5%; width: 94%; height: 34%; }
  .dh-screen.tiled .dh-title { opacity: 0; }
  .dh-screen.tiled .dh-pal { top: 42%; }
}

/* ── The living hero ───────────────────────────────────────────────────
   A living theme fills the screen (scene-paint.js, the app's own scenes);
   the palette floats over it in frosted glass, as Jevie's panels do when a
   living theme is worn; while it thinks, the app's work rim runs round it
   (Aura.swift: Jevie's colour, #BC82F3, #F5B9EA, #8D9FFF, #FF6778, #FFBA71). */
.bar.on-sky { opacity: 1; pointer-events: auto; background: transparent; color: #fff; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bar.on-sky .bar-link { color: rgba(255,255,255,.85); }
.bar.on-sky .bar-get { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(12px); }
.intro.lv { height: auto; }
.intro-pin.lv-pin { position: relative; height: 100vh; height: 100svh; min-height: 680px; padding: 0; overflow: hidden; background: #04060d; display: block; isolation: isolate; }
.lv-pin::before, .lv-pin::after { display: none !important; }
.lv-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.lv-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 52%, rgba(4, 6, 16, .52), rgba(4, 6, 16, .18) 70%, rgba(4, 6, 16, .05)), linear-gradient(rgba(4,6,16,.35), transparent 22%, transparent 70%, rgba(4,6,16,.55)); }
.lv-copy { position: absolute; left: 0; right: 0; top: clamp(92px, 13vh, 140px); text-align: center; padding: 0 20px; }
.lv-title { margin: 0; font: 800 clamp(52px, 7.6vw, 124px)/.9 var(--display); letter-spacing: -.058em; color: #fff; text-shadow: 0 6px 60px rgba(0, 0, 0, .45); }
.lv-title span { color: #fde2ec; }
.lv-pal { position: absolute; left: 50%; top: clamp(330px, 46vh, 460px); translate: -50% 0; width: min(600px, calc(100vw - 32px)); height: auto; margin: 0; transform: none; z-index: 2; }
.lv-glass { position: relative; border-radius: 22px; background: rgba(12, 14, 34, .42) !important; backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255,255,255,.28), 0 40px 100px -30px rgba(0, 0, 0, .7) !important; }
.lv-glass .dh-input { color: #fff; caret-color: #fff; font-size: 22px; }
.lv-glass .dh-input::placeholder { color: rgba(255,255,255,.6); }
.lv-glass .hp-field::after { background: rgba(255,255,255,.14) !important; }
.lv-glass .dt { color: #fff; } .lv-glass .dt-k, .lv-glass .lbl { color: rgba(255,255,255,.62); }
.lv-glass .dt:hover, .lv-glass .dt:focus-visible { background: rgba(255,255,255,.1); }
.lv-glass .row.on { background: rgba(255,255,255,.1); }
.lv-glass .row .t, .lv-glass .head b, .lv-glass .wx-head b, .lv-glass .wx-rain, .lv-glass .day b, .lv-glass .dh-miss b { color: #fff; }
.lv-glass .row .s, .lv-glass .row .a, .lv-glass .head span, .lv-glass .wx-note, .lv-glass .wx-head span, .lv-glass .day, .lv-glass .dh-miss span { color: rgba(255,255,255,.66); }
.lv-glass .day { background: rgba(255,255,255,.08); } .lv-glass .chip { background: rgba(255,255,255,.12); color: #fff; }
.lv-glass .cap { background: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.75) !important; }
/* The work rim: a turning band of the app's colours, glowing while it thinks. */
@property --lv { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lv-rim { position: absolute; inset: -2px; border-radius: 24px; z-index: -1; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
  background: conic-gradient(from var(--lv), #f0a6bd, #bc82f3, #f5b9ea, #8d9fff, #ff6778, #ffba71, #f0a6bd); animation: lv-turn 2.6s linear infinite; filter: blur(.5px); }
.lv-rim::after { content: ""; position: absolute; inset: -14px; border-radius: 34px; background: inherit; filter: blur(26px); opacity: .7; }
.lv-pal.thinking .lv-rim { opacity: 1; }
@keyframes lv-turn { to { --lv: 360deg; } }
.lv-pal .hero-jev { left: 24px; }
.lv-name { position: absolute; left: 50%; bottom: 96px; translate: -50% 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  font: 500 13px var(--sans); color: rgba(255,255,255,.88); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); white-space: nowrap; }
.lv-dot { width: 7px; height: 7px; border-radius: 50%; background: #9dffc8; box-shadow: 0 0 10px #9dffc8; }
.lv-cta { position: absolute; left: 50%; bottom: 30px; translate: -50% 0; }
.lv-cta .get { display: inline-block; font: 600 15px var(--sans); padding: 12px 22px; border-radius: 12px; background: #fff; color: #0b0d18; box-shadow: 0 12px 40px -12px rgba(0,0,0,.6); }
@media (max-width: 720px) {
  .lv-copy { top: 96px; } .lv-title { font-size: clamp(48px, 14vw, 72px); }
  .lv-pal { top: 300px; } .lv-glass .dh-input { font-size: 18px; }
  .lv-name { bottom: 86px; font-size: 12px; }
}
@media (max-height: 760px) { .lv-copy { top: 84px; } .lv-title { font-size: clamp(46px, 6.4vw, 92px); } .lv-pal { top: 290px; } .lv-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .lv-rim { animation: none; } }
.lv-pal { top: max(420px, 48vh); }
@media (max-width: 720px) { .lv-pal { top: 330px; } }
@media (max-height: 760px) { .lv-pal { top: 330px; } .lv-cta { bottom: 22px; } }

/* ── The living hero, readable on every scene, with its story ───────── */
.lv-veil { background: radial-gradient(70% 60% at 50% 56%, rgba(3, 5, 14, .62), rgba(3, 5, 14, .24) 72%, rgba(3, 5, 14, .1)), linear-gradient(rgba(3,5,14,.42), transparent 24%, transparent 62%, rgba(3,5,14,.7)); }
.lv-glass { background: rgba(10, 12, 28, .66) !important; backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); }
.lv-glass .dh-rows { padding: 10px 12px 12px; }
.lv-glass .agent { background: rgba(255,255,255,.07); } .lv-glass .agent.on { background: rgba(255,255,255,.12); }
.lv-glass .ag-txt b { color: #fff; } .lv-glass .ag-txt b em, .lv-glass .ag-says, .lv-glass .agent time { color: rgba(255,255,255,.66); }
.lv-glass .sh { color: rgba(255,255,255,.7); } .lv-glass .ag-badge { box-shadow: 0 0 0 2px #10132a; }
.lv-glass .tl-head { color: rgba(255,255,255,.75); } .lv-glass .tl .step { color: rgba(255,255,255,.82); } .lv-glass .tl .step.done { color: rgba(255,255,255,.5); }
.lv-glass .tl .step i { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.lv-glass .tl .step + .step i::before { background: rgba(255,255,255,.18); }
.lv-glass .tl { padding: 6px 10px 4px; }
.lv-cart { margin: 10px 2px 2px; padding: 12px 14px; border-radius: 12px; background: rgba(61, 220, 132, .14); display: flex; gap: 12px; align-items: center; animation: in .5s var(--spring) both; }
.lv-cart-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #3ddc84; color: #06210f; font-weight: 800; }
.lv-cart b { display: block; color: #fff; font: 600 14.5px var(--sysf); } .lv-cart span { color: rgba(255,255,255,.7); font: 400 13px var(--sysf); }
.lv-title { text-shadow: 0 4px 50px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.25); }
/* The story's chips: where it is, how long it stays, and a way to pick one. */
.lv-uses { position: absolute; left: 50%; bottom: 94px; translate: -50% 0; display: flex; gap: 6px; padding: 5px; border-radius: 999px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
  background: rgba(10, 12, 28, .5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.lv-uses::-webkit-scrollbar { display: none; }
.lv-use { position: relative; overflow: hidden; flex: none; border: 0; cursor: pointer; padding: 8px 15px; border-radius: 999px; background: none; font: 500 13.5px var(--sans); color: rgba(255,255,255,.72); transition: color .3s, background-color .3s; }
.lv-use span { position: relative; z-index: 1; }
.lv-use:hover { color: #fff; }
.lv-use[aria-pressed="true"] { background: rgba(255,255,255,.95); color: #0b0d18; }
.lv-use i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #f0a6bd; }
.lv-use.fill i { animation: lv-hold var(--hold, 4s) linear forwards; }
@keyframes lv-hold { to { width: 100%; } }
.lv-name { left: 22px; bottom: 26px; translate: none; padding: 6px 12px; font-size: 12px; background: rgba(10,12,28,.42); }
.lv-cta { bottom: 28px; }
@media (max-width: 720px) { .lv-uses { bottom: 84px; } .lv-use { padding: 7px 12px; font-size: 12.5px; } .lv-name { display: none; } }
@media (max-height: 760px) { .lv-uses { bottom: 76px; } }
.lv-glass .tl { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0; }
.lv-glass .tl .step { display: flex; width: 100%; }
.lv-glass .dh-rows > .row:nth-child(n+5) { display: none; }
@media (max-height: 820px) { .lv-glass .dh-rows > .row:nth-child(n+4), .lv-glass .wx .chips, .lv-glass .wx-note { display: none; } .lv-glass .agent .ag-says { display: none; } }
/* From the night of the first screen into the paper, softly. */
.lv-pin::after { display: block !important; content: ""; position: absolute; inset: auto 0 0; height: 90px; z-index: 1; pointer-events: none; background: linear-gradient(transparent, rgba(251, 248, 244, .0) 30%, rgba(251, 248, 244, .14)); }
.works { padding-top: 64px; }
.daysec { padding-top: 120px; }

/* ── The living hero, laid out in one column so nothing ever overlaps ──
   The palette keeps the app's one size, 720 × 480 (3 : 2), whatever it
   holds; what is longer is cut softly at its foot, as the app scrolls. */
.intro-pin.lv-pin { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.2vh, 34px); padding: 76px 16px 26px !important; }
.lv-copy, .lv-pal, .lv-uses, .lv-cta { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; bottom: auto !important; translate: none !important; }
.lv-copy { padding: 0; }
.lv-title { font-size: clamp(46px, 6.2vw, 96px); line-height: .92; }
@media (min-width: 900px) { .lv-title br { display: none; } .lv-title span { margin-left: .18em; } }
.lv-pal { width: min(600px, 92vw); flex: none; margin-top: 14px; }
.lv-glass { height: min(400px, 44vh); min-height: 250px; display: flex; flex-direction: column; overflow: hidden; }
.lv-glass .dh-rows { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
/* The field as the installed app draws it: the caret first, large, a hairline under it. */
.lv-glass .hp-field { padding: 22px 26px 18px; }
.lv-glass .dh-input { font: 400 26px var(--sysf); letter-spacing: -.01em; }
.lv-glass .hp-field::after { top: auto; bottom: 0; left: 22px; right: 22px; }
.lv-glass .hp-field { position: relative; }
.lv-glass .hp-field::after { content: ""; position: absolute; height: 1px; background: rgba(255,255,255,.14); }
.lv-uses { margin-top: 4px; }
.lv-cta .get { padding: 11px 22px; }
.lv-glass .dh-rows > .row:nth-child(n+5) { display: none; }
@media (max-height: 820px) { .lv-glass .dh-rows > .row:nth-child(n+4) { display: flex; } }
@media (max-width: 720px) {
  .lv-glass { height: min(360px, 46vh); }
  .lv-glass .dh-input { font-size: 20px; }
  .lv-glass .hp-field { padding: 18px 18px 14px; }
}
@media (max-height: 700px) { .lv-title { font-size: clamp(40px, 5vw, 72px); } .lv-glass { height: 40vh; min-height: 220px; } }
.lv-pal { height: auto !important; }
.intro-pin.lv-pin { height: auto !important; min-height: 100vh; min-height: 100svh; }
.lv-uses { z-index: 3; }
.lv-pal { margin-top: 34px; }

/* ── A day, played ───────────────────────────────────────────────────── */
.dayplay { width: min(1100px, 100%); margin-top: 52px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; align-items: center; text-align: left; }
.dl-list { list-style: none; margin: 0; padding: 8px; border-radius: 24px; background: #fff; box-shadow: var(--lift); display: grid; gap: 2px; }
.dl { width: 100%; display: grid; grid-template-columns: 66px 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; transition: background-color .25s var(--ease); }
.dl:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dl[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 14%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.dl time { font: 500 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink3); }
.dl-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 78%, #000)); }
.dl-ic svg, .dl-big svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dl-t { font: 500 14.5px/1.3 var(--sans); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl[aria-pressed="true"] .dl-t { color: var(--ink); font-weight: 600; }
.dl-stage { min-width: 0; padding: clamp(24px, 3.5vw, 44px); border-radius: 30px; display: grid; place-items: center;
  background: radial-gradient(60% 70% at 80% 90%, rgba(255, 233, 214, .95), rgba(255, 233, 214, 0)), linear-gradient(165deg, #9fbdf0, #c9d3f5 45%, #f2d6e2 75%, #ffe0cc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 30px 70px -40px rgba(44, 36, 92, .4); align-self: stretch; }
.dl-pal { width: 100%; aspect-ratio: 3 / 2; max-height: 340px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #1b1b1e, #151517); box-shadow: inset 0 0 0 1px rgba(214, 214, 232, .3), 0 0 0 1px rgba(0,0,0,.5), 0 40px 80px -30px rgba(21, 21, 23, .65); }
.dl-field { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 22px; border-bottom: 1px solid rgba(236, 236, 238, .14); font: 400 clamp(17px, 1.6vw, 21px) var(--sysf); color: #ececee; white-space: nowrap; overflow: hidden; }
.dl-jev { width: 28px; height: 28px; flex: none; }
.dl-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -10px; flex: none; }
.dl-out { flex: 1; padding: 18px; display: grid; align-content: start; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.dl-out.in { opacity: 1; transform: none; }
.dl-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: color-mix(in srgb, #2c2c31 75%, transparent); }
.dl-big { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 72%, #000)); box-shadow: 0 8px 20px -8px var(--c); }
.dl-big svg { width: 24px; height: 24px; }
.dl-card b { display: block; font: 600 16px/1.35 var(--sysf); color: #ececee; }
.dl-card span { display: block; margin-top: 3px; font: 400 13px var(--sysf); color: #b4b4bc; }
.dl-tick { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #3ddc84; }
.dl-tick::after { content: ""; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 9px; border: solid #06210f; border-width: 0 2px 2px 0; rotate: 45deg; }
@media (max-width: 860px) {
  .dayplay { grid-template-columns: minmax(0, 1fr); }
  .dl-stage { order: -1; padding: 16px; position: sticky; top: 70px; z-index: 2; }
  .dl-pal { aspect-ratio: auto; height: 220px; }
  .dl { grid-template-columns: 58px 30px minmax(0, 1fr); padding: 8px; } .dl-ic { width: 30px; height: 30px; }
}

/* ── Why: one line ───────────────────────────────────────────────────── */
.why-line { margin: 26px auto 0; max-width: 30ch; font: 500 clamp(18px, 1.8vw, 23px)/1.5 var(--sans); color: color-mix(in srgb, #e8e6ff 86%, transparent); text-wrap: balance; }
.band-in { padding: clamp(90px, 12vw, 150px) clamp(22px, 5vw, 64px); }
.why h2 { font-size: clamp(38px, 5.4vw, 76px); }
.band-scene { opacity: .9; }

/* ── Make it yours: the chosen one is marked ─────────────────────────── */
.cast button.mine { box-shadow: inset 0 0 0 2px var(--accent), var(--lift); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.living-picks { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 32px); }
.dl-t { white-space: normal; overflow: visible; text-overflow: clip; }
/* The end's field: a real one. */
.first-form { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 24px; }
.first-input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 400 clamp(17px, 2vw, 21px) var(--sysf); color: #ececee; caret-color: #ececee; padding: 18px 0; }
.first-input::placeholder { color: rgba(236, 236, 238, .7); }
.first-go { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; font: 600 17px var(--sysf); color: #151517; background: #ececee; }
.first-hint { margin: 14px 0 0; font: 450 14px var(--sans); color: var(--ink3); }
/* Agents: answer it yourself. */
.sv-ask { display: flex; gap: 10px; margin-top: 4px; }
.sv-ask button { border: 0; cursor: pointer; padding: 9px 16px; border-radius: 10px; font: 600 14px var(--sysf); }
.sv-yes { background: #ececee; color: #151517; } .sv-no { background: rgba(255,255,255,.1); color: #ececee; }
.sv-after { margin: 4px 0 0; color: #b4b4bc; } .sv-after b { color: #3ddc84; }
/* Headline readable on light scenes too (Sakura, Lagoon, Dunes). */
.lv-veil { background: radial-gradient(70% 60% at 50% 60%, rgba(3, 5, 14, .6), rgba(3, 5, 14, .22) 72%, rgba(3, 5, 14, .08)), linear-gradient(rgba(3,5,14,.62), rgba(3,5,14,.3) 26%, transparent 46%, transparent 64%, rgba(3,5,14,.72)) !important; }
.lv-title { text-shadow: 0 2px 4px rgba(0,0,0,.35), 0 8px 60px rgba(0,0,0,.6); }
.sv-ask[hidden] { display: none; }
.sv-slot { min-height: 76px; display: grid; align-content: start; gap: 8px; }
.sv-you { justify-self: start; margin: 0; padding: 7px 13px; border-radius: 12px 12px 12px 4px; background: #ececee; color: #151517; font: 600 14px var(--sysf); animation: in .35s var(--ease) both; }
.sv-slot .sv-after { margin: 0; display: flex; align-items: center; gap: 8px; color: #f3e3d8; animation: in .45s var(--ease) .15s both; }
.sv-ok { width: 16px; height: 16px; border-radius: 50%; background: #3ddc84; flex: none; position: relative; }
.sv-ok::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #06210f; border-width: 0 1.7px 1.7px 0; rotate: 45deg; }

/* ── Cards: one at a time, readable ──────────────────────────────────── */
.cardshow { position: relative; width: 100%; aspect-ratio: 1320 / 640; }
.cs { position: absolute; inset: 0 0 auto; margin: 0; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .6s var(--ease), transform .7s var(--spring); }
.cs.on { opacity: 1; transform: none; }
.cs img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(23, 20, 60, .55), 0 0 0 1px rgba(255,255,255,.12); }
.cs-dots { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; display: flex; gap: 8px; }
.cs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(23, 21, 46, .25); transition: width .35s var(--spring), background-color .3s; }
.cs-dots button[aria-pressed="true"] { width: 22px; background: #151517; }
.feat-art:has(.cardshow) { padding: clamp(24px, 4vw, 48px) clamp(20px, 3.5vw, 40px) clamp(36px, 5vw, 56px); }

/* ── Everywhere: three phones, big ───────────────────────────────────── */
.phones video:nth-child(1), .phones video:nth-child(2), .phones video:nth-child(6) { display: none; }
.phones video { width: 240px; margin: 0 -18px; }
.phones video:nth-child(3) { --r: -6deg; --lift: 30; } .phones video:nth-child(4) { --r: 0deg; --lift: 0; z-index: 3; width: 270px; } .phones video:nth-child(5) { --r: 6deg; --lift: 30; }
@media (max-width: 720px) { .phones video { width: 150px; margin: 0 -24px; } .phones video:nth-child(4) { width: 170px; } }

/* ── Privacy: an icon each, clearer words ────────────────────────────── */
.fact { display: grid; gap: 6px; padding: 28px; }
.fact-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(160deg, #232327, #1b1b1e); }
.fact-ic svg { width: 21px; height: 21px; fill: none; stroke: #ececee; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fact b { font-size: 20px; } .fact span { font-size: 15.5px; margin-top: 0; }
.phones { height: 620px; margin-top: 48px; }
@media (max-width: 720px) { .phones { height: 400px; margin-top: 36px; } }
.fact-ic svg { stroke-width: 2.1; }

/* ── Voice: a glowing glass pill that listens (inspired by Inspora's
   "glows with your voice"), the sentence large above it. ── */
.vp { display: grid; justify-items: center; align-content: center; gap: 26px; height: auto; min-height: 380px; padding: 20px 0; }
.vp .heard { margin: 0; min-height: 2.6em; text-align: center; font: 600 clamp(22px, 2.4vw, 32px)/1.3 var(--display); letter-spacing: -.025em; color: #151517; text-wrap: balance; }
.vp .heard .w { color: rgba(23, 21, 46, .38); } .vp .heard .w.firm { color: #151517; }
.vp .heard .w.gone { color: rgba(23, 21, 46, .35); text-decoration-color: #e0457b; }
.vpill { position: relative; display: flex; align-items: center; gap: 14px; width: min(420px, 100%); height: 76px; padding: 0 22px 0 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.18)); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -10px 30px rgba(240, 120, 165, .12), 0 20px 50px -20px rgba(60, 40, 120, .45); transition: box-shadow .6s var(--ease); }
.vpill.live { box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -10px 30px rgba(240, 120, 165, .25), 0 0 0 6px rgba(240, 120, 165, .12), 0 20px 60px -14px rgba(224, 69, 123, .55); }
.vmic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffd6e4, #e0457b 60%, #9b3fd6); box-shadow: 0 6px 18px -4px rgba(224, 69, 123, .7), inset 0 1px 0 rgba(255,255,255,.5); }
.vmic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
.vpill.live .vmic { animation: vbreath 1.6s ease-in-out infinite; }
@keyframes vbreath { 50% { transform: scale(1.07); } }
.vpill .wave { position: static; flex: 1; min-width: 0; height: 48px; inset: auto; width: auto; }
.vtime { flex: none; font: 600 22px var(--sysf); font-variant-numeric: tabular-nums; color: #151517; letter-spacing: -.01em; }
.vhint { margin: 0; font: 500 14px var(--sans); color: #4a4756; }
.vhint kbd { background: #fff; color: #151517; box-shadow: 0 0 0 1px rgba(23,21,31,.1); }
@media (prefers-reduced-motion: reduce) { .vpill.live .vmic { animation: none; } }

/* ── Answers: one large, real answer at a time ───────────────────────── */
.feat-art:has(.ans1) { padding: clamp(22px, 3vw, 36px); }
.ans1 { position: relative; width: 100%; display: grid; gap: 16px; }
.a1 { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--spring); }
.a1.on { opacity: 1; transform: none; }
.a1 img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: top; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(23, 20, 60, .55), 0 0 0 1px rgba(255,255,255,.12); }
.a1-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 999px; justify-self: center; background: rgba(255,255,255,.55); backdrop-filter: blur(12px); }
.a1-tabs button { border: 0; cursor: pointer; padding: 7px 13px; border-radius: 999px; background: none; font: 500 13px var(--sans); color: #4a4756; }
.a1-tabs button[aria-pressed="true"] { background: #151517; color: #fff; }
@media (max-width: 720px) { .a1 img { height: 320px; } .a1-tabs button { font-size: 12px; padding: 6px 10px; } }

/* ── Pricing: the price is the thing; Pro glows ──────────────────────── */
.plans { gap: 16px; width: min(1040px, 100%); }
.plan { padding: 30px 30px 26px; border-radius: 26px; }
.plan h3 { font: 600 15px var(--sans); letter-spacing: .01em; }
.plan .price { margin: 12px 0 22px; font: 700 52px/1 var(--display); letter-spacing: -.05em; }
.plan .price small { font: 450 15px var(--sans); letter-spacing: 0; }
.plan ul { gap: 12px; font-size: 15.5px; }
.plan.pick { position: relative; background: radial-gradient(120% 80% at 50% 0%, #232327, #1b1b1e 60%); box-shadow: 0 0 0 1px rgba(214,214,232,.25), 0 40px 80px -30px rgba(60, 50, 140, .65); transform: translateY(-10px); }
.plan.pick::before { content: "Most loved"; position: absolute; top: 26px; right: 26px; font: 600 11.5px var(--sans); padding: 4px 10px; border-radius: 999px; background: #ececee; color: #1b1b1e; }
.plan.pick .price { color: #fff; }
@media (max-width: 860px) { .plan.pick { transform: none; } }

/* ── FAQ: the heading on the left, the questions on the right ──────── */
@media (min-width: 960px) {
  .sec.faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); column-gap: 72px; align-items: start; text-align: left;
    padding-left: max(var(--gutter), calc((100% - 1120px) / 2)); padding-right: max(var(--gutter), calc((100% - 1120px) / 2)); }
  .sec.faq > .eyebrow, .sec.faq > h2, .sec.faq > .sub { grid-column: 1; margin-left: 0; text-align: left; }
  .sec.faq > h2 { max-width: 9ch; }
  .sec.faq > .qas { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; width: 100%; }
}
.qa summary { font-size: 17px; padding: 20px 22px; }
.qa p { font-size: 15.5px; }
.plan.pick::before { content: "Jevie’s cloud included"; }
@media (min-width: 960px) { .sec.faq > .eyebrow { justify-self: start; text-align: left; } .sec.faq > h2, .sec.faq > .sub { justify-self: start; } }

/* ── Make it yours: the stage ────────────────────────────────────────── */
.studio { width: min(1100px, 100%); margin-top: 52px; display: grid; gap: 18px; }
.st-stage { position: relative; height: clamp(380px, 46vw, 520px); border-radius: 30px; overflow: hidden; isolation: isolate; background: #0b1020;
  box-shadow: 0 50px 100px -50px rgba(23, 21, 46, .7), inset 0 0 0 1px rgba(255,255,255,.08); }
.st-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.st-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 55%, rgba(4,6,16,.1), rgba(4,6,16,.45)), linear-gradient(transparent 55%, rgba(4,6,16,.7)); }
.st-jev { position: absolute; left: 50%; top: 46%; width: clamp(200px, 22vw, 280px); height: clamp(200px, 22vw, 280px); translate: -50% -50%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.st-arrow { position: absolute; top: 46%; translate: 0 -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; font: 400 28px/1 var(--sans); color: #fff;
  background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background-color .25s, transform .25s var(--spring); }
.st-arrow:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
.st-prev { left: 22px; } .st-next { right: 22px; }
.st-plate { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: grid; justify-items: center; gap: 3px; padding: 12px 22px; border-radius: 18px; text-align: center; min-width: 260px;
  background: rgba(10, 12, 28, .55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.st-name { font: 700 22px var(--display); letter-spacing: -.02em; color: #fff; }
.st-about { font: 450 14px var(--sans); color: rgba(255,255,255,.75); }
.st-say { margin-top: 4px; font: 500 12.5px var(--mono); color: #ececee; }
.st-controls { display: grid; gap: 10px; padding: 16px 18px; border-radius: 24px; background: #fff; box-shadow: var(--lift); }
.st-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px; }
.st-label { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); text-align: left; }
.st-cast { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.st-cast::-webkit-scrollbar { display: none; }
.st-cast button { flex: none; width: 52px; height: 52px; padding: 4px; border: 0; border-radius: 14px; cursor: pointer; background: color-mix(in srgb, var(--ink) 4%, transparent); transition: transform .3s var(--spring), background-color .25s; }
.st-cast button svg { width: 100%; height: 100%; display: block; }
.st-cast button:hover { transform: translateY(-3px); }
.st-cast button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 14%, #fff); box-shadow: inset 0 0 0 2px var(--accent); }
.st-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.st-themes button { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; font: 500 13.5px var(--sans); color: var(--ink2); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.st-themes button[aria-checked="true"] { background: var(--ink); color: #fff; }
@media (max-width: 720px) {
  .st-stage { height: 360px; border-radius: 22px; } .st-arrow { width: 40px; height: 40px; } .st-prev { left: 12px; } .st-next { right: 12px; }
  .st-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .st-themes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .st-themes button { flex: none; }
  .st-plate { min-width: 0; width: calc(100% - 32px); }
}

/* ── Privacy: what stays, and the two things that ever leave ─────────── */
.pv { width: min(1040px, 100%); margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; text-align: left; }
.pv-mac { padding: 28px; border-radius: 28px; color: #f3e3d8; background: radial-gradient(90% 70% at 20% 0%, #232327, #1b1b1e 55%, #0b1128); box-shadow: 0 40px 80px -40px rgba(23, 21, 46, .7), inset 0 0 0 1px rgba(214,214,232,.16); }
.pv-head { display: flex; gap: 14px; align-items: center; }
.pv-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pv-ic svg { width: 24px; height: 24px; fill: none; stroke: #ececee; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-head b { display: block; font: 700 22px var(--display); letter-spacing: -.02em; color: #fff; }
.pv-head span { font: 450 14px var(--sans); color: #b4b4bc; }
.pv-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pv-chips li { padding: 8px 13px; border-radius: 999px; font: 500 14px var(--sans); color: #ececee; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pv-keys { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font: 450 14.5px/1.5 var(--sans); color: #e8d6c8; }
.pv-keys { display: flex; align-items: center; gap: 9px; }
.pv-lock { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pv-out { display: grid; gap: 12px; align-content: start; }
.pv-card { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: var(--lift); }
.pv-card b { display: block; font: 650 17px var(--sans); color: var(--ink); }
.pv-card span { display: block; margin-top: 6px; font: 450 14.5px/1.55 var(--sans); color: var(--ink2); }
.pv-toggle { display: flex; align-items: center; gap: 18px; }
.pv-switch { flex: none; position: relative; width: 52px; height: 32px; border: 0; border-radius: 999px; cursor: pointer; background: #d9d6df; transition: background-color .3s var(--ease); }
.pv-switch i { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .35s var(--spring); }
.pv-switch[aria-checked="true"] { background: #34c76a; } .pv-switch[aria-checked="true"] i { transform: translateX(20px); }
.pv-state { margin: 2px 6px 0; font: 450 13.5px var(--sans); color: var(--ink3); }
#private .more { margin-top: 28px; }
@media (max-width: 860px) { .pv { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .st-jev { top: 36%; width: 170px; height: 170px; } .st-plate { padding: 9px 14px; bottom: 14px; } .st-name { font-size: 18px; } .st-about { font-size: 13px; } }

/* ── One world: every demo is a window onto a living theme ────────────
   (the "frosted glass over a picture" pattern, with Jevie's own scenes). */
.scn { position: relative; isolation: isolate; overflow: hidden; background: #0b1020 !important; box-shadow: 0 40px 90px -45px rgba(23, 21, 46, .75), inset 0 0 0 1px rgba(255,255,255,.08) !important; }
.scn > .scn-c { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.scn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 70% at 50% 50%, rgba(4,6,16,.28), rgba(4,6,16,.08) 70%); }
.feat-art.scn { border-radius: 30px; }
.scn .learn-grid div { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.scn .vp .heard { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.scn .vp .heard .w { color: rgba(255,255,255,.45); } .scn .vp .heard .w.firm { color: #fff; } .scn .vp .heard .w.gone { color: rgba(255,255,255,.4); }
.scn .vtime { color: #151517; }
.scn .vhint { color: rgba(255,255,255,.85); } 
.scn .a1-tabs { background: rgba(10,12,28,.55); } .scn .a1-tabs button { color: rgba(255,255,255,.8); } .scn .a1-tabs button[aria-pressed="true"] { background: #fff; color: #0b0d18; }
.scn .cs-dots button { background: rgba(255,255,255,.4); } .scn .cs-dots button[aria-pressed="true"] { background: #fff; }

/* ── The manifesto: one statement, lit as you read it ─────────────────── */
.manifesto { position: relative; height: 220vh; height: 220svh; }
.mf-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; justify-items: center; gap: 26px; padding: 0 max(var(--gutter), calc((100% - 1080px) / 2)); text-align: center; }
.mf-pin .eyebrow { margin: 0; }
.mf-text { margin: 0; font: 650 clamp(30px, 4.2vw, 62px)/1.18 var(--display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.mw { color: color-mix(in srgb, var(--ink) 16%, transparent); transition: color .35s var(--ease); }
.mw.on { color: var(--ink); }
.mf-hi .mw.on { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .manifesto { height: auto; } .mf-pin { position: static; height: auto; padding-block: 120px; } }
.sec[hidden] { display: none !important; }
.feat-art .voice-stage.vp { height: auto; min-height: 400px; width: 100%; }
.feat-art.scn:has(.vp) { padding: 36px 28px; }

/* ── A slow Mac, put right (tidy.js) ─────────────────────────────────── */
/* Seven sentences, each a stretch of the scroll in two beats: what Jevie
   will do (ty-a1…ty-a7 on the screen), then done (ty-s1…ty-s7). */
.tidy { position: relative; height: calc(100vh + var(--n, 7) * 46vh); height: calc(100svh + var(--n, 7) * 46svh); margin-top: 120px; }
.ty-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 72px max(var(--gutter), calc((100% - 1340px) / 2)) 24px; }
.ty-side { flex: 0 0 clamp(300px, 27vw, 380px); min-width: 0; }
.ty-side .eyebrow { margin: 0 0 12px; }
.ty-side h2 { margin: 0; font: 660 clamp(30px, 3vw, 44px)/1.06 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.ty-side .sub { margin: 14px 0 20px; font: 450 16px/1.5 var(--sans); color: var(--ink2); text-wrap: pretty; }
.ty-side .more { margin-top: 18px; }
/* The seven sentences: what to say, and why it is safe or quicker. */
.ty-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ty-steps button { position: relative; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 12px; border: 0; border-radius: 14px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.ty-steps button:hover { background: rgba(23, 21, 31, .04); }
.ty-n { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px var(--sans); font-style: normal; color: var(--ink3); box-shadow: inset 0 0 0 1.5px rgba(23, 21, 31, .14); transition: background .3s, color .3s, box-shadow .3s; }
.ty-steps b { display: block; font: 600 15px/1.3 var(--sans); color: var(--ink2); letter-spacing: -.01em; transition: color .3s; }
.ty-steps em { display: block; margin-top: 2px; font: 400 13.5px/1.35 var(--sans); font-style: normal; color: var(--ink3); }
.ty-steps li.on button { background: #fff; box-shadow: var(--lift); }
.ty-steps li.on b { color: var(--ink); }
.ty-steps li.on em { color: var(--ink2); }
.ty-steps li.on .ty-n { color: #fff; background: var(--accent); box-shadow: none; }
.ty-steps li.past .ty-n { color: transparent; box-shadow: none; background: #23a35a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ty-steps li.on button::after { content: ""; position: absolute; left: 48px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); opacity: .55; }
@media (max-height: 860px) and (min-width: 961px) { .ty-steps li:not(.on) em { display: none; } .ty-steps button { padding-block: 7px; } .ty-side .sub { margin-bottom: 14px; } }

/* The right: the Mac, and under it what changed. */
.ty-right { flex: 1 1 auto; min-width: 0; align-content: center; max-width: min(960px, calc((100svh - 190px) * 1.6)); display: grid; gap: 16px; }
.ty-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding: 0 6px; }
.tg { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px 8px; font: 450 13px var(--sans); color: var(--ink3); }
.tg b { justify-self: end; font: 650 14px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg i { grid-column: 1 / -1; display: flex; height: 4px; border-radius: 4px; background: rgba(23, 21, 31, .09); overflow: hidden; }
.tg u { display: block; height: 100%; width: calc(var(--f, .5) * 100%); background: #9aa3ad; transition: width .9s var(--ease), background-color .5s; }
.tg s { display: block; height: 100%; width: calc(var(--t, 0) * 100%); background: repeating-linear-gradient(135deg, #23a35a 0 3px, rgba(35, 163, 90, .3) 3px 6px); transition: width .9s var(--ease); }
.tg.bad u { background: #e5484d; } .tg.good u { background: #23a35a; }
.tg.hot span { color: var(--ink); }
.tg b small { font: 500 13px var(--sans); color: #23a35a; }

/* The Mac, drawn in its own points: a 1280 × 800 desktop, --pt one point. */
.ty-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; border-radius: 18px; overflow: hidden; isolation: isolate; background: #1d2b55;
  box-shadow: 0 0 0 1px #26262b, 0 0 0 8px #0d0d10, 0 0 0 9px #2a2a30, 0 60px 120px -50px rgba(23, 21, 46, .8); }
.ty-desk { --pt: calc(100cqw / 1280); --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  position: absolute; left: 0; top: 0; width: calc(1280 * var(--pt)); height: calc(800 * var(--pt)); font-family: var(--sys); font-size: calc(13 * var(--pt)); color: #1d1d1f; -webkit-font-smoothing: antialiased;
  background: radial-gradient(60% 70% at 70% 100%, #f7c9a8 0, rgba(247, 201, 168, 0) 70%), radial-gradient(70% 60% at 20% 90%, #e9a6c4 0, rgba(233, 166, 196, 0) 70%), linear-gradient(180deg, #1f4fb8 0%, #3f7ddb 40%, #8db3ec 70%, #c9c3e8 100%); }
/* Menu bar: 24 pt, the app's name in bold, the status items on the right. */
.mb { position: absolute; inset: 0 0 auto; z-index: 20; height: calc(24 * var(--pt)); display: flex; align-items: center; gap: calc(20 * var(--pt)); padding: 0 calc(12 * var(--pt)) 0 calc(20 * var(--pt)); color: #fff; background: rgba(12, 22, 60, .22); font-size: calc(13 * var(--pt)); }
.mb-apple { width: calc(13 * var(--pt)); fill: #fff; margin-right: calc(2 * var(--pt)); } .mb b { font-weight: 700; } .mb span { font-weight: 400; }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: calc(16 * var(--pt)); font-style: normal; } .mb-right svg { height: calc(13 * var(--pt)); width: auto; color: #fff; }
.mb-jev { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
/* Windows: 28 pt title bars, 12 pt lights 8 apart, the title centred. */
.tw { position: absolute; border-radius: calc(10 * var(--pt)); overflow: hidden; background: #fff; box-shadow: 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.28), 0 calc(22 * var(--pt)) calc(48 * var(--pt)) calc(-10 * var(--pt)) rgba(10, 16, 50, .55); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tw-top { position: relative; display: flex; align-items: center; gap: calc(8 * var(--pt)); height: calc(28 * var(--pt)); padding: 0 calc(13 * var(--pt)); background: #ececec; border-bottom: calc(.5 * var(--pt)) solid rgba(0,0,0,.12); white-space: nowrap; }
.tw-top i { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 50%; background: #ff5f57; flex: none; box-shadow: inset 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.12); } .tw-top i:nth-child(2) { background: #febc2e; } .tw-top i:nth-child(3) { background: #28c840; }
.tw-top > span { position: absolute; left: 50%; translate: -50% 0; font-weight: 600; color: #3c3c43; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.tw-body { position: relative; height: calc(100% - 28 * var(--pt)); overflow: hidden; }
.tw-body p { margin: 0; }
.tw-keynote { left: calc(36 * var(--pt)); top: calc(56 * var(--pt)); width: calc(470 * var(--pt)); height: calc(330 * var(--pt)); }
.tw-keynote .tw-body { display: grid; grid-template-columns: calc(80 * var(--pt)) 1fr; background: #e9e9ec; }
.kn-thumbs { display: grid; align-content: start; gap: calc(8 * var(--pt)); padding: calc(10 * var(--pt)); } .kn-thumbs i { aspect-ratio: 16 / 10; border-radius: calc(2 * var(--pt)); background: #272140; } .kn-thumbs i.on { box-shadow: 0 0 0 calc(2 * var(--pt)) #f5a524; }
.kn-slide { margin: calc(16 * var(--pt)); border-radius: calc(2 * var(--pt)); background: #272140; display: grid; grid-template-rows: auto 1fr; padding: calc(26 * var(--pt)) calc(30 * var(--pt)); color: #fff; box-shadow: 0 calc(2 * var(--pt)) calc(8 * var(--pt)) rgba(0,0,0,.2); }
.kn-slide b { font-size: calc(26 * var(--pt)); font-weight: 700; letter-spacing: -.02em; }
.kn-slide span { display: flex; align-items: end; gap: calc(16 * var(--pt)); padding-top: calc(18 * var(--pt)); } .kn-slide span i { flex: 1; height: var(--h); border-radius: calc(2 * var(--pt)) calc(2 * var(--pt)) 0 0; background: #f5a524; } .kn-slide span i:last-child { background: #f0a6bd; }
/* Keynote's own save sheet, dropped from its title bar when quitting would lose work. */
.kn-sheet { position: absolute; left: 50%; top: 0; translate: -50% -105%; width: calc(300 * var(--pt)); padding: calc(16 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #f2f2f4; box-shadow: 0 calc(12 * var(--pt)) calc(36 * var(--pt)) rgba(0,0,0,.35), 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.2); display: grid; justify-items: center; text-align: center; gap: calc(6 * var(--pt)); transition: translate .5s var(--spring); z-index: 2; font-size: calc(11 * var(--pt)); }
.kn-icon { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 22%; background: #1f7cf2; box-shadow: inset 0 calc(-14 * var(--pt)) 0 #f5a524; }
.kn-sheet b { font-size: calc(13 * var(--pt)); font-weight: 700; line-height: 1.25; } .kn-sheet p { color: #555; }
.kn-sheet div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(6 * var(--pt)); width: 100%; margin-top: calc(6 * var(--pt)); }
.kn-sheet em { font-style: normal; padding: calc(4 * var(--pt)) 0; border-radius: calc(6 * var(--pt)); background: #fff; box-shadow: 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.18), 0 calc(.5 * var(--pt)) calc(1 * var(--pt)) rgba(0,0,0,.1); font-size: calc(12 * var(--pt)); }
.kn-sheet em.go { background: #0a84ff; color: #fff; box-shadow: none; transition: filter .15s, transform .15s; } .kn-sheet em.go.press { filter: brightness(.8); transform: scale(.95); }
.tw-xcode { left: calc(530 * var(--pt)); top: calc(44 * var(--pt)); width: calc(420 * var(--pt)); height: calc(300 * var(--pt)); }
.tw-xcode .tw-body { display: grid; grid-template-columns: calc(130 * var(--pt)) 1fr; background: #1f1f24; font-size: calc(11 * var(--pt)); }
.xc-side { background: #ececf0; padding: calc(8 * var(--pt)) calc(10 * var(--pt)); display: grid; align-content: start; gap: calc(4 * var(--pt)); color: #333; } .xc-side .on { background: #0a64d8; color: #fff; border-radius: calc(4 * var(--pt)); margin: 0 calc(-5 * var(--pt)); padding: 0 calc(5 * var(--pt)); }
.xc-code { margin: 0; padding: calc(10 * var(--pt)) calc(12 * var(--pt)); font: 500 calc(11 * var(--pt))/1.6 "SF Mono", ui-monospace, Menlo, monospace; color: #e6e6ea; white-space: pre; overflow: hidden; }
.xc-code b { color: #fc5fa3; font-weight: 600; } .xc-code u { color: #5dd8ff; text-decoration: none; }
.tw-notes { left: calc(420 * var(--pt)); top: calc(210 * var(--pt)); width: calc(200 * var(--pt)); height: calc(210 * var(--pt)); }
.tw-notes .tw-body { background: #fffef7; padding: calc(12 * var(--pt)) calc(14 * var(--pt)); display: grid; align-content: start; gap: calc(5 * var(--pt)); } .tw-notes b { font-size: calc(17 * var(--pt)); margin-bottom: calc(3 * var(--pt)); } .tw-notes p::before { content: "• "; color: #e0a800; }
.tw-mail { left: calc(700 * var(--pt)); top: calc(250 * var(--pt)); width: calc(310 * var(--pt)); height: calc(250 * var(--pt)); }
.tw-mail p { display: grid; padding: calc(7 * var(--pt)) calc(14 * var(--pt)); border-bottom: calc(.5 * var(--pt)) solid rgba(0,0,0,.08); color: #6e6e73; line-height: 1.3; font-size: calc(12 * var(--pt)); } .tw-mail p b { color: #1d1d1f; font-size: calc(13 * var(--pt)); } .tw-mail p:first-child { background: #0a64d8; color: #dbe8ff; } .tw-mail p:first-child b { color: #fff; }
.tw-slack { left: calc(250 * var(--pt)); top: calc(400 * var(--pt)); width: calc(420 * var(--pt)); height: calc(230 * var(--pt)); }
.tw-slack .tw-top { background: #3f0e40; border-color: rgba(0,0,0,.4); } .tw-slack .tw-top > span { color: #fff; }
.tw-slack .tw-body { display: grid; grid-template-columns: calc(130 * var(--pt)) 1fr; font-size: calc(12 * var(--pt)); }
.sl-side { background: #3f0e40; color: rgba(255,255,255,.72); padding: calc(10 * var(--pt)) calc(12 * var(--pt)); display: grid; align-content: start; gap: calc(5 * var(--pt)); }
.sl-side b { color: #fff; font-size: calc(14 * var(--pt)); margin-bottom: calc(4 * var(--pt)); } .sl-side .on { color: #fff; background: #1164a3; border-radius: calc(5 * var(--pt)); margin: 0 calc(-6 * var(--pt)); padding: 0 calc(6 * var(--pt)); }
.sl-main { padding: calc(12 * var(--pt)) calc(14 * var(--pt)); display: grid; align-content: start; gap: calc(12 * var(--pt)); }
.sl-main p { display: grid; grid-template-columns: auto 1fr; column-gap: calc(8 * var(--pt)); color: #1d1c1d; line-height: 1.35; } .sl-main p i { grid-row: span 2; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: calc(6 * var(--pt)); background: var(--c); } .sl-main b { font-weight: 800; }
.tw-term { left: calc(30 * var(--pt)); top: calc(430 * var(--pt)); width: calc(380 * var(--pt)); height: calc(210 * var(--pt)); }
.tw-term .tw-top { background: #2b2b2f; border-color: #000; } .tw-term .tw-top > span { color: #c8c8cc; font-weight: 500; }
.tt { background: #1e1e21; padding: calc(8 * var(--pt)) calc(10 * var(--pt)); font: 500 calc(11.5 * var(--pt))/1.55 "SF Mono", ui-monospace, Menlo, monospace; color: #e4e4ea; }
.tt code { font: inherit; } .tt .g { color: #3ddc84; } .ty-killed { color: #ff8a8a; opacity: 0; transition: opacity .4s; }
.tw-music { left: calc(820 * var(--pt)); top: calc(520 * var(--pt)); width: calc(250 * var(--pt)); height: calc(110 * var(--pt)); }
.tw-music .tw-top { background: #f5f5f7; border: 0; height: calc(20 * var(--pt)); } .tw-music .tw-top i { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); }
.tw-music .tw-body { display: flex; gap: calc(12 * var(--pt)); align-items: center; padding: 0 calc(14 * var(--pt)) calc(10 * var(--pt)); background: #f5f5f7; height: calc(100% - 20 * var(--pt)); }
.mu-art { width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); border-radius: calc(6 * var(--pt)); flex: none; background: #6a4cc9; box-shadow: inset calc(-22 * var(--pt)) calc(-18 * var(--pt)) 0 #ff6b88; }
.tw-music div { min-width: 0; flex: 1; display: grid; gap: calc(2 * var(--pt)); } .tw-music div b { font-size: calc(13 * var(--pt)); } .tw-music div p { color: #6e6e73; font-size: calc(12 * var(--pt)); } .tw-music div span { height: calc(4 * var(--pt)); border-radius: calc(4 * var(--pt)); background: #dcdce0; margin-top: calc(8 * var(--pt)); } .tw-music div span i { display: block; width: 38%; height: 100%; border-radius: inherit; background: #fa2d48; }
/* Finder's Downloads: a 52 pt toolbar, the sidebar, the files. */
.tw-dl { left: calc(860 * var(--pt)); top: calc(110 * var(--pt)); width: calc(390 * var(--pt)); height: calc(330 * var(--pt)); z-index: 4; }
.fd-top > span { position: static; translate: none; max-width: none; }
.fd-top { height: calc(44 * var(--pt)); background: #f6f6f6; } .fd-nav { margin-left: calc(76 * var(--pt)); color: #8a8a8e; font-size: calc(17 * var(--pt)); letter-spacing: calc(8 * var(--pt)); } .fd-title { font-weight: 700; color: #1d1d1f; margin-left: calc(6 * var(--pt)); font-size: calc(14 * var(--pt)); }
.fd-body { display: grid; grid-template-columns: calc(120 * var(--pt)) 1fr; height: calc(100% - 44 * var(--pt)); }
.fd-side { background: #ececee; padding: calc(10 * var(--pt)) calc(10 * var(--pt)); display: grid; align-content: start; gap: calc(5 * var(--pt)); font-size: calc(12 * var(--pt)); color: #333; } .fd-side small { font-size: calc(10.5 * var(--pt)); font-weight: 600; color: #8a8a8e; } .fd-side .on { background: rgba(0,0,0,.09); border-radius: calc(5 * var(--pt)); margin: 0 calc(-5 * var(--pt)); padding: calc(1 * var(--pt)) calc(5 * var(--pt)); }
.fd-main { position: relative; background: #fff; }
.tf-grid { position: absolute; inset: calc(12 * var(--pt)); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; gap: calc(10 * var(--pt)) calc(4 * var(--pt)); transition: opacity .5s var(--ease); }
.tf { display: grid; justify-items: center; gap: calc(3 * var(--pt)); font-size: calc(10 * var(--pt)); color: #1d1d1f; text-align: center; transition: transform .7s var(--spring), opacity .5s; }
.tf i { width: calc(30 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(2 * var(--pt)) calc(7 * var(--pt)) calc(2 * var(--pt)) calc(2 * var(--pt)); background: #f4f4f6; box-shadow: 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.22); }
.tf-img i { width: calc(40 * var(--pt)); height: calc(30 * var(--pt)); margin-block: calc(4 * var(--pt)); border-radius: calc(2 * var(--pt)); background: linear-gradient(170deg, #7fbfe0, #f4d6a8); box-shadow: 0 0 0 calc(1.5 * var(--pt)) #fff, 0 0 0 calc(2 * var(--pt)) rgba(0,0,0,.15); }
.tf-pdf i { background: linear-gradient(180deg, #fff 68%, #e5483f 68%); } .tf-dmg i, .tf-pkg i { width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: calc(8 * var(--pt)); background: linear-gradient(160deg, #d6d6dc, #8e8e97); } .tf-pkg i { background: linear-gradient(160deg, #e9c58e, #b48848); } .tf-zip i { background: repeating-linear-gradient(90deg, #f4f4f6 0 40%, #c9c9cf 40% 46%, #f4f4f6 46%); } .tf-xls i { background: linear-gradient(180deg, #fff 68%, #23a35a 68%); }
.tf em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tf-folders { position: absolute; inset: calc(12 * var(--pt)); display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: calc(12 * var(--pt)) calc(4 * var(--pt)); opacity: 0; transform: scale(.94); transition: opacity .5s var(--ease) .3s, transform .6s var(--spring) .3s; }
.tfd { display: grid; justify-items: center; gap: calc(3 * var(--pt)); font-size: calc(10 * var(--pt)); color: #1d1d1f; }
.tfd i { position: relative; width: calc(46 * var(--pt)); height: calc(36 * var(--pt)); border-radius: calc(4 * var(--pt)); background: linear-gradient(180deg, #7cc4ff, #3d97f0); } .tfd i::before { content: ""; position: absolute; left: 0; top: calc(-4 * var(--pt)); width: 42%; height: calc(8 * var(--pt)); border-radius: calc(3 * var(--pt)) calc(3 * var(--pt)) 0 0; background: #58a9f6; }
.tfd em { font-style: normal; }
/* The Dock: 48 pt icons on a frosted shelf, a dot under each app that runs. */
.dock { position: absolute; left: 50%; bottom: calc(4 * var(--pt)); translate: -50% 0; z-index: 15; display: flex; align-items: center; gap: calc(6 * var(--pt)); padding: calc(5 * var(--pt)) calc(6 * var(--pt)) calc(9 * var(--pt)); border-radius: calc(20 * var(--pt)); background: rgba(255,255,255,.3); box-shadow: inset 0 0 0 calc(.5 * var(--pt)) rgba(255,255,255,.45), 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgba(10, 20, 60, .2); }
.dock-sep { width: calc(1 * var(--pt)); height: calc(44 * var(--pt)); background: rgba(0,0,0,.18); margin: 0 calc(2 * var(--pt)); }
.ai { position: relative; display: block; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: 22.5%; background: var(--c, #ddd); box-shadow: 0 calc(1 * var(--pt)) calc(2 * var(--pt)) rgba(0,0,0,.18); color: #fff; font: 700 calc(20 * var(--pt))/calc(48 * var(--pt)) var(--sys); text-align: center; transition: opacity .4s; }
.ai::after { content: ""; position: absolute; left: 50%; bottom: calc(-6 * var(--pt)); translate: -50% 0; width: calc(4 * var(--pt)); height: calc(4 * var(--pt)); border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .4s; }
.ai.run::after { opacity: 1; }
.ai-finder { background: linear-gradient(90deg, #1a6ff2 50%, #8fd6ff 50%); } .ai-finder::before { content: ""; position: absolute; inset: 34% 28% 30%; border: solid #10203f; border-width: 0 0 calc(2 * var(--pt)); border-radius: 0 0 50% 50%; }
.ai-safari { background: #fff; } .ai-safari::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, #ff3b30 0 12%, #3fa2ff 12% 50%, #ff3b30 50% 62%, #3fa2ff 62%); }
.ai-mail { background: #1f8af7; } .ai-mail::before { content: ""; position: absolute; inset: 30% 18%; border-radius: calc(4 * var(--pt)); background: #fff; }
.ai-music { background: #fb3b55; } .ai-music::before { content: "♪"; font-size: calc(26 * var(--pt)); }
.ai-notes { background: linear-gradient(180deg, #fecf2b 0 26%, #fff 26%); } .ai-notes::before { content: ""; position: absolute; left: 18%; right: 18%; top: 45%; height: 30%; background: repeating-linear-gradient(180deg, #d8d8dc 0 calc(1.5 * var(--pt)), transparent 0 calc(6 * var(--pt))); }
.ai-keynote { background: #1f7cf2; } .ai-keynote::before { content: ""; position: absolute; left: 22%; right: 22%; top: 24%; height: 34%; border-radius: calc(3 * var(--pt)); background: #fff; box-shadow: 0 calc(12 * var(--pt)) 0 calc(-4 * var(--pt)) #f5a524; }
.ai-xcode { background: #157ef8; } .ai-xcode::before { content: ""; position: absolute; inset: 20%; border-radius: calc(5 * var(--pt)); background: #fff; transform: rotate(45deg) scale(.7); box-shadow: inset 0 0 0 calc(4 * var(--pt)) #0b4fb0; }
.ai-slack { background: #fff; } .ai-slack::before { content: "#"; color: #4a154b; font-size: calc(26 * var(--pt)); font-weight: 800; }
.ai-figma { background: #1e1e1e; } .ai-figma::before { content: ""; position: absolute; left: 34%; top: 20%; width: 32%; height: 60%; border-radius: calc(6 * var(--pt)); background: linear-gradient(180deg, #f24e1e 0 33%, #a259ff 33% 66%, #0acf83 66%); }
.ai-term { background: #2b2b2f; font: 700 calc(15 * var(--pt))/calc(48 * var(--pt)) "SF Mono", Menlo, monospace; } .ai-term::before { content: ">_"; color: #e5e5ea; }
.ai-spotify { background: #121212; } .ai-spotify::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: #1ed760; }
.ai-zoom { background: #0b5cff; } .ai-zoom::before { content: ""; position: absolute; left: 22%; top: 34%; width: 38%; height: 32%; border-radius: calc(4 * var(--pt)); background: #fff; box-shadow: calc(11 * var(--pt)) 0 0 calc(-3 * var(--pt)) #fff; }
.ai-teams { background: #5b5fc7; } .ai-teams::before { content: "T"; }
.ai-dropbox { background: #0061fe; } .ai-dropbox::before { content: "◆"; font-size: .8em; }
.ai-onepw { background: #1a8cff; } .ai-onepw::before { content: "1"; }
.ai-rect { background: #2b2b30; } .ai-rect::before { content: ""; position: absolute; inset: 26%; border: calc(3 * var(--pt)) solid #fff; border-radius: calc(4 * var(--pt)); }
.ai-docker { background: #1d63ed; } .ai-docker::before { content: "▤"; }
.ai-stack { background: #4a9ff0; } .ai-stack::before { content: "↓"; font-size: calc(24 * var(--pt)); }
.ai-trash { background: rgba(255,255,255,.35); box-shadow: none; } .ai-trash::before { content: ""; position: absolute; left: 26%; right: 26%; top: 16%; bottom: 10%; border-radius: calc(2 * var(--pt)) calc(2 * var(--pt)) calc(7 * var(--pt)) calc(7 * var(--pt)); background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 calc(4 * var(--pt)), rgba(220,224,232,.95) 0 calc(6 * var(--pt))); box-shadow: 0 0 0 calc(.5 * var(--pt)) rgba(0,0,0,.2); }
.ai-trash::after { opacity: 0; }
.ai-trash.full::before { background: linear-gradient(180deg, #f6e7c8 0 30%, transparent 30%), repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 calc(4 * var(--pt)), rgba(220,224,232,.95) 0 calc(6 * var(--pt))); }

/* Jevie's palette, as the app draws it: 720 pt, its top 22% down the screen,
   answers growing downward; the field, a hairline, 40 pt rows, the keys' line. */
.jp { --t1: #ececee; --t2: #b4b4bc; --t3: #8e8e97; --line: #2f2f34; --cap: #2c2c31;
  position: absolute; left: calc(280 * var(--pt)); top: calc(195 * var(--pt)); width: calc(720 * var(--pt)); z-index: 18; border-radius: calc(16 * var(--pt)); background: #151517; color: var(--t1);
  box-shadow: 0 0 0 calc(1 * var(--pt)) #3c3c42, 0 calc(30 * var(--pt)) calc(80 * var(--pt)) calc(-10 * var(--pt)) rgba(0, 0, 0, .55); transition: width .4s var(--ease), left .4s var(--ease); }
.jp-jev { position: absolute; left: calc(30 * var(--pt)); top: calc(-28 * var(--pt)); width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); }
.jp-field { display: flex; align-items: center; gap: calc(2 * var(--pt)); min-height: calc(30 * var(--pt)); padding: calc(18 * var(--pt)) calc(20 * var(--pt)); font-size: calc(18 * var(--pt)); border-bottom: calc(1 * var(--pt)) solid var(--line); }
.jp-field .caret { width: calc(1.5 * var(--pt)); height: calc(21 * var(--pt)); background: var(--t1); flex: none; animation: blink 1.1s steps(2) infinite; }
.jp-plus { margin-left: auto; font-style: normal; font-weight: 300; font-size: calc(22 * var(--pt)); color: var(--t2); }
.ty-out { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.ty-out > * { min-height: 0; overflow: hidden; }
.ty-out.in { grid-template-rows: 1fr; }
.jl { padding: calc(8 * var(--pt)) 0 0; }
.jh { display: flex; align-items: baseline; gap: calc(7 * var(--pt)); height: calc(30 * var(--pt)); padding: calc(8 * var(--pt)) calc(20 * var(--pt)) 0; box-sizing: border-box; font-size: calc(12 * var(--pt)); white-space: nowrap; overflow: hidden; }
.jh b { font-weight: 600; color: var(--t2); } .jh span { color: var(--t3); overflow: hidden; text-overflow: ellipsis; }
.jr { position: relative; display: grid; grid-template-columns: calc(22 * var(--pt)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(10 * var(--pt)); height: calc(40 * var(--pt)); margin: 0 calc(8 * var(--pt)); padding: 0 calc(10 * var(--pt)) 0 calc(12 * var(--pt)); border-radius: calc(8 * var(--pt)); font-size: calc(13 * var(--pt)); }
.jr.sel { background: rgba(236, 236, 238, .1); }
.jr > div { display: flex; align-items: baseline; gap: calc(8 * var(--pt)); min-width: 0; white-space: nowrap; }
.jr b { font-weight: 500; color: var(--t1); flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .jr span { color: var(--t2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jr em { font-style: normal; font-size: calc(12 * var(--pt)); color: var(--t3); font-variant-numeric: tabular-nums; }
.jr.press { background: rgba(236, 236, 238, .2); }
/* A tile: the symbol in its hue on a 22% wash of it, 20 pt, a 28% corner. */
.jt { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 28%; display: grid; place-items: center; justify-self: center; background: color-mix(in srgb, var(--h) 22%, transparent); color: var(--h); }
.jt svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jr .ai { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); justify-self: center; font-size: calc(9 * var(--pt)); line-height: calc(20 * var(--pt)); }
.jr .ai::after { display: none; } .jr .ai::before { transform: scale(.42); transform-origin: center; }
.jr .mk { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; background: #f0a6bd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%232a0f1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.jf { display: flex; align-items: center; justify-content: flex-end; gap: calc(10 * var(--pt)); height: calc(22 * var(--pt)); margin-top: calc(6 * var(--pt)); padding: calc(6 * var(--pt)) calc(18 * var(--pt)) calc(10 * var(--pt)); border-top: calc(1 * var(--pt)) solid var(--line); font-size: calc(12 * var(--pt)); color: var(--t2); white-space: nowrap; }
.jf .q { margin-right: auto; color: var(--t1); font-weight: 500; }
.jf i { width: calc(1 * var(--pt)); height: calc(12 * var(--pt)); background: var(--line); }
.jf kbd { display: inline-block; margin-left: calc(5 * var(--pt)); padding: calc(1 * var(--pt)) calc(5 * var(--pt)); border-radius: calc(4 * var(--pt)); background: var(--cap); color: var(--t2); font: 500 calc(11 * var(--pt)) var(--sys); }
.jf kbd.press { background: #f0a6bd; color: #2a0f1c; }
/* A kept action's toast, under the panel. */
.jp-toast { position: absolute; left: 50%; top: calc(560 * var(--pt)); translate: -50% 0; z-index: 19; display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(8 * var(--pt)) calc(14 * var(--pt)); border-radius: 999px; background: #151517; color: #ececee; font-size: calc(13 * var(--pt)); box-shadow: 0 0 0 calc(1 * var(--pt)) #3c3c42, 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0,0,0,.4); opacity: 0; transform: translateY(calc(6 * var(--pt))); transition: opacity .3s, transform .4s var(--spring); pointer-events: none; }
.jp-toast.in { opacity: 1; transform: none; }
.jp-toast::before { content: ""; width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); border-radius: 50%; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }

/* The Disk explorer, as DiskTree draws it: films of the text's colour by
   depth, a marked item's red wash, the one in hand rimmed in the accent;
   the review beside it. The palette widens for it. */
.jp.wide { left: calc(140 * var(--pt)); width: calc(1000 * var(--pt)); }
.dx-bar { display: flex; align-items: center; gap: calc(10 * var(--pt)); padding: calc(10 * var(--pt)) calc(18 * var(--pt)); font-size: calc(12 * var(--pt)); color: var(--t2); }
.dx-bar b { font-size: calc(15 * var(--pt)); font-weight: 600; color: var(--t1); margin-right: calc(6 * var(--pt)); }
.dx-seg { display: flex; padding: calc(2 * var(--pt)); border-radius: calc(7 * var(--pt)); background: var(--cap); } .dx-seg span { padding: calc(2 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(5 * var(--pt)); } .dx-seg .on { background: #45454c; color: var(--t1); }
.dx-filter { flex: 1; padding: calc(4 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(7 * var(--pt)); background: #1b1b1e; color: var(--t3); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--line); }
.dx-btn { padding: calc(3 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(7 * var(--pt)); background: var(--cap); color: var(--t1); white-space: nowrap; transition: transform .15s, filter .15s; } .dx-btn.go.press { transform: scale(.95); filter: brightness(1.4); }
.dx { display: grid; grid-template-columns: minmax(0, 1fr) calc(250 * var(--pt)); gap: calc(14 * var(--pt)); padding: 0 calc(14 * var(--pt)) calc(14 * var(--pt)); }
.dx-map { position: relative; height: calc(300 * var(--pt)); background: #1b1b1e; }
.dkt { display: block; border-radius: 0; cursor: default; justify-content: initial; gap: 0; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--hh); box-sizing: border-box; padding: calc(4 * var(--pt)) calc(7 * var(--pt)); background: rgba(236, 236, 238, var(--a, .075)); box-shadow: inset 0 0 0 calc(1 * var(--pt)) #1b1b1e; font-size: calc(11 * var(--pt)); color: var(--t1); overflow: hidden; transition: opacity .5s; }
.dkt b { display: block; font-weight: 500; font-size: calc(12 * var(--pt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dkt i { display: block; font-style: normal; color: var(--t2); }
.dkt .dkt { --a: .06; }
.dkt.marked { background: rgba(255, 99, 99, .26); }
.dkt.hand { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #f0a6bd; background: color-mix(in srgb, rgba(255, 99, 99, .26), rgba(240, 166, 189, .12)); }
.dkt.gone { opacity: 0; }
.dx-side { display: grid; align-content: start; gap: calc(6 * var(--pt)); font-size: calc(12 * var(--pt)); color: var(--t2); }
.dx-side h4 { margin: 0; font-size: calc(18 * var(--pt)); font-weight: 500; color: var(--t1); }
.dx-side .acc { color: #f0a6bd; } .dx-side small { font-size: calc(11 * var(--pt)); color: var(--t3); line-height: 1.35; }
.dx-side code { font: calc(11 * var(--pt)) var(--sys); color: var(--t1); }
.dx-side .dx-btn { justify-self: start; }
.dx-side hr { width: 100%; height: calc(1 * var(--pt)); border: 0; background: var(--line); margin: calc(4 * var(--pt)) 0; }
.dx-fig { font-size: calc(26 * var(--pt)); font-weight: 600; color: var(--t1); } .dx-fig small { font-size: calc(13 * var(--pt)); color: var(--t2); font-weight: 400; }
.dx-meter { height: calc(6 * var(--pt)); border-radius: calc(3 * var(--pt)); background: var(--cap); overflow: hidden; } .dx-meter u { display: block; height: 100%; width: var(--m); background: #f5a524; }

/* What each sentence changes on the Mac. */
.ty-screen.ty-s1 .ty-killed { opacity: 1; } .ty-screen.ty-s1 .ai-term::after { opacity: 1; }
.ty-screen.ty-s4 .tf-grid { opacity: 0; } .ty-screen.ty-s4 .tf { transform: scale(.4); }
.ty-screen.ty-s4 .tf-folders { opacity: 1; transform: none; }
/* Quitting: every app asked as ⌘Q asks; Keynote's sheet, then Keynote goes too. */
.ty-screen.ty-s6 .tw:not(.tw-dl):not(.tw-keynote), .ty-screen.ty-saved .tw-keynote { opacity: 0; transform: scale(.94) translateY(calc(10 * var(--pt))); }
.ty-screen.ty-s6 .ai[data-q]:not(.ai-keynote)::after, .ty-screen.ty-saved .ai-keynote::after { opacity: 0; }
.ty-screen.ty-s6 .tw-keynote { z-index: 16; }
.ty-screen.ty-s6:not(.ty-saved) .kn-sheet { translate: -50% 0; }

@media (max-width: 960px) {
  .tidy { height: calc(100svh + var(--n, 7) * 60svh); }
  .ty-pin { flex-direction: column; justify-content: center; gap: 12px; padding: 64px var(--gutter) 16px; }
  .ty-side { flex: none; width: 100%; }
  .ty-side .eyebrow, .ty-side .sub, .ty-side .more { display: none; }
  .ty-side h2 { font-size: clamp(26px, 7vw, 34px); text-align: center; }
  .ty-steps { display: flex; gap: 6px; margin-top: 12px; overflow: hidden; }
  .ty-steps li { flex: none; display: none; width: 100%; } .ty-steps li.on, .ty-steps li:first-child:not(.past):not(.on) { display: block; }
  .ty-steps li.on button { background: #fff; }
  .ty-right { width: 100%; max-width: 100%; gap: 10px; }
  /* A phone sees the middle of the Mac, larger: the palette's width and a little either side. */
  .ty-screen { aspect-ratio: 780 / 800; max-height: calc(100svh - 300px); border-radius: 14px; }
  .ty-desk { --pt: calc(100cqw / 780); left: calc(-250 * var(--pt)); }
  .jp.wide { left: calc(250 * var(--pt)); width: calc(780 * var(--pt)); } .jp.wide .dx { grid-template-columns: minmax(0, 1fr); } .jp.wide .dx-side, .dx-filter, .dx-seg { display: none; }
  .ty-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; } .tg { font-size: 12px; } .tg b { font-size: 13px; }
  .tg[data-g="dl"], .tg[data-g="login"] { display: none; }
  .ty-right { flex: none; } .tg { grid-template-columns: 1fr; gap: 3px; } .tg b { justify-self: start; } .tg span { white-space: nowrap; } .tg b small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tw, .tf, .tf-folders, .tg u, .tg s, .kn-sheet, .ty-out, .jp { transition: none; } .jp-field .caret { animation: none; } }

/* ── Coming from Raycast, said ───────────────────────────────────────── */
.rcx-stage { width: min(1120px, 100%); margin-top: 52px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: 32px; text-align: left; }
.rx-list { display: grid; gap: 3px; padding: 14px; border-radius: 22px; background: rgba(10, 12, 28, .55); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.rx-h { margin: 4px 8px 6px; font: 600 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rx-h2 { margin-top: 14px; color: #ececee; }
.rx-row { display: flex; align-items: center; gap: 11px; padding: 7px 9px; border: 0; border-radius: 11px; cursor: pointer; background: none; text-align: left; font: 500 14.5px var(--sysf); color: rgba(255,255,255,.82); transition: background-color .25s var(--ease), transform .5s var(--spring), opacity .4s; }
.rx-row .sm-ic { width: 26px; height: 26px; border-radius: 7px; } .rx-row .sm-ic svg { width: 15px; height: 15px; }
.rx-row:hover { background: rgba(255,255,255,.08); }
.rx-row.on { background: rgba(255,255,255,.95); color: #0b0d18; transform: translateX(6px); }
.rcx-stage.importing .rx-row:not(.rx-new) { transform: translateX(40px) scale(.9); opacity: 0; }
.rcx-stage.importing .rx-row:not(.rx-new):nth-of-type(2) { transition-delay: .06s; } .rcx-stage.importing .rx-row:not(.rx-new):nth-of-type(3) { transition-delay: .12s; } .rcx-stage.importing .rx-row:not(.rx-new):nth-of-type(4) { transition-delay: .18s; } .rcx-stage.importing .rx-row:not(.rx-new):nth-of-type(5) { transition-delay: .24s; } .rcx-stage.importing .rx-row:not(.rx-new):nth-of-type(6) { transition-delay: .3s; } .rcx-stage.importing .rx-row:not(.rx-new):nth-of-type(7) { transition-delay: .36s; }
.rx-pal { display: flex; flex-direction: column; min-height: 300px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(27, 27, 30, .95), rgba(21, 21, 23, .96));
  box-shadow: inset 0 0 0 1px rgba(214,214,232,.3), 0 0 0 1px rgba(0,0,0,.5), 0 40px 80px -30px rgba(6,11,30,.7); }
.rx-field { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 24px; border-bottom: 1px solid rgba(236,236,238,.14); font: 400 clamp(19px, 1.9vw, 25px) var(--sysf); color: #ececee; }
.rx-jev { width: 32px; height: 32px; flex: none; } .rx-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -10px; flex: none; }
.rx-out { flex: 1; padding: 16px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.rx-out.in { opacity: 1; transform: none; }
.rx-res { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px; background: rgba(37, 46, 86, .75); font: 500 16px var(--sysf); color: #ececee; }
.rx-res .sm-ic { width: 36px; height: 36px; border-radius: 10px; } .rx-res .sm-ic svg { width: 19px; height: 19px; }
.rx-res span:nth-child(2) { flex: 1; } .rx-res .cap { font: 500 11px var(--sysf); padding: .15em .5em; border-radius: 5px; background: rgba(236,236,238,.14); color: #b4b4bc; }
.rx-imp b { display: block; margin: 2px 4px 12px; font: 600 16px var(--sysf); color: #ececee; }
.rx-imp ul { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
.rx-imp li { display: flex; align-items: center; gap: 9px; font: 400 14.5px var(--sysf); color: #f3e3d8; opacity: 0; animation: in .4s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 100ms); }
.rx-imp > span { display: block; margin: 14px 4px 0; font: 400 13px var(--sysf); color: #b4b4bc; }
.rx-foot { padding: 12px 22px 16px; font: 400 13px var(--sysf); color: #b4b4bc; } .rx-foot b { color: #fff; font-weight: 600; }
.rcx-points { list-style: none; margin: 30px 0 0; padding: 0; width: min(1120px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.rcx-points li { padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: var(--lift); }
.rcx-points b { display: block; font: 600 16px var(--sysf); color: var(--ink); } .rcx-points span { display: block; margin-top: 6px; font: 450 14px/1.5 var(--sans); color: var(--ink2); }
.rcx-points kbd { background: var(--sel); color: var(--ink); }
.rcx .more { margin-top: 26px; }
@media (max-width: 860px) {
  .rcx-stage { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .rx-list { display: flex; overflow-x: auto; gap: 6px; padding: 8px; scrollbar-width: none; order: 2; } .rx-h { display: none; } .rx-row { flex: none; white-space: nowrap; }
  .rx-row.on { transform: none; } .rcx-points { grid-template-columns: minmax(0, 1fr); }
}

/* ── Answers you can check: the check, shown ─────────────────────────── */
.feat-art:has(.ck) { padding: clamp(20px, 2.6vw, 32px); }
.ck { width: 100%; display: grid; gap: 14px; }
.ck-pal { border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(27, 27, 30, .95), rgba(21, 21, 23, .96)); box-shadow: inset 0 0 0 1px rgba(214,214,232,.3), 0 30px 60px -30px rgba(6,11,30,.7); }
.ck-field { display: flex; align-items: center; min-height: 54px; padding: 0 18px; border-bottom: 1px solid rgba(236,236,238,.14); font: 400 clamp(14px, 1.3vw, 17px) var(--sysf); color: #ececee; }
.ck-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: 1px; }
.ck-ans { min-height: 64px; padding: 16px 18px 6px; font: 500 clamp(16px, 1.55vw, 20px)/1.5 var(--sysf); color: #f3e3d8; }
.ck-fig { position: relative; padding: 1px 4px; border-radius: 6px; transition: background-color .3s, box-shadow .3s; }
.ck-fig b, .ck-fig ins { font-weight: 700; color: #fff; text-decoration: none; }
.ck-fig s { color: #ff8a8a; text-decoration: none; transition: color .3s; }
.ck-fig ins { display: none; }
.ck-fig sup { margin-left: 2px; font: 700 10px var(--sysf); color: #b4b4bc; }
.ck-fig.checking { background: rgba(125, 130, 217, .3); box-shadow: 0 0 0 1px rgba(125, 130, 217, .6); }
.ck-fig.ok { background: rgba(61, 220, 132, .14); } .ck-fig.ok sup { color: #3ddc84; }
.ck-fig.fixed { background: rgba(61, 220, 132, .14); } .ck-fig.fixed s { text-decoration: line-through; text-decoration-color: #ff6b6b; color: rgba(255,255,255,.45); margin-right: 6px; } .ck-fig.fixed ins { display: inline; animation: in .4s var(--spring) both; }
.ck-stamp { min-height: 0; padding: 0 18px; font: 500 13px var(--sysf); color: #b4b4bc; opacity: 0; transition: opacity .4s; }
.ck-stamp.in { opacity: 1; padding: 6px 18px 16px; display: flex; gap: 8px; align-items: center; } .ck-stamp em { font-style: normal; color: #ececee; }
.ck-ok { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #3ddc84; flex: none; } .ck-ok::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #06210f; border-width: 0 1.7px 1.7px 0; rotate: 45deg; }
.ck-src { display: grid; gap: 8px; min-height: 64px; }
.ck-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); animation: in .45s var(--spring) both; animation-delay: var(--d); }
.ck-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 12px var(--sysf); color: #fff; background: #1b1b1e; }
.ck-card b { display: block; font: 650 14px var(--sysf); color: #151517; } .ck-card span { display: block; font: 400 12.5px var(--sysf); color: #5c5968; }
.ck-card code { display: inline-block; margin-top: 4px; font: 600 12px ui-monospace, Menlo, monospace; color: #1b1b1e; background: rgba(27, 27, 30, .07); padding: 2px 6px; border-radius: 5px; }
.ck-card .ck-ok { opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--spring); } .ck-card.ok .ck-ok { opacity: 1; transform: none; }
.ck-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ck-tabs button { border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; font: 500 12.5px var(--sans); color: rgba(255,255,255,.85); background: rgba(10,12,28,.5); backdrop-filter: blur(10px); }
.ck-tabs button[aria-pressed="true"] { background: #fff; color: #0b0d18; }
.ck-stamp.in { align-items: flex-start; } .ck-stamp em { display: block; margin-top: 2px; }

/* ── Why: forty years of chores, pulled into one sentence ───────────── */
.why2 { position: relative; height: 320vh; height: 320svh; --p: 0; --s: 0; }
.w2-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.w2-eye { position: absolute; top: max(84px, 11vh); left: 50%; translate: -50% 0; margin: 0; z-index: 3; }
.w2-title { position: absolute; top: max(112px, 15vh); left: 0; right: 0; z-index: 3; margin: 0; padding: 0 20px; text-align: center; font: 700 clamp(30px, 4.4vw, 64px)/1.02 var(--display); letter-spacing: -.045em; }
.w2-title span { display: block; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.w2-a { color: var(--ink); } .w2-b { position: absolute; left: 0; right: 0; top: 0; color: var(--accent); opacity: 0; transform: translateY(14px); }
.why2.said .w2-a { opacity: 0; transform: translateY(-14px); } .why2.said .w2-b { opacity: 1; transform: none; }
/* The chores: real-looking scraps of interface, scattered, each pulled to the middle as --q goes 0 → 1. */
.w2-cloud { position: absolute; inset: 0; pointer-events: none; }
.fr { position: absolute; left: 50%; top: 54%; --q: 0;
  transform: translate(-50%, -50%) translate(calc(var(--x) * 1vw * (1 - var(--q))), calc(var(--y) * 1vh * (1 - var(--q)))) rotate(calc(var(--r) * (1 - var(--q)))) scale(calc(1 - var(--q) * .82));
  opacity: calc(1 - max(0, var(--q) - .72) * 3.6); filter: blur(calc(max(0, var(--q) - .5) * 6px)); will-change: transform; }
.fr > div { font: 400 12.5px/1.35 var(--sysf); color: #1d1d22; background: #fff; border-radius: 12px; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 18px 40px -16px rgba(23, 21, 46, .45); padding: 12px 14px; max-width: 250px; }
.fr b { display: block; font-weight: 650; } .fr span { display: block; color: #6b6b74; margin-top: 3px; }
.fr u { text-decoration: none; display: inline-block; padding: 4px 10px; border-radius: 6px; background: #ececf1; font-weight: 500; font-size: 12px; }
.fr u.pri { background: #2f7cf6; color: #fff; }
.fr-dlg div, .fr-cookie div, .fr-upd div { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.fr-menu { padding: 6px !important; min-width: 180px; position: relative; } .fr-menu p { margin: 0; padding: 4px 10px; border-radius: 5px; display: flex; justify-content: space-between; } .fr-menu p.on { background: #2f7cf6; color: #fff; } .fr-menu kbd { background: none; color: #8a8a94; font-size: 11px; }
.fr-sub { position: absolute; left: 92%; top: 30px; background: #fff; border-radius: 9px; padding: 6px; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 12px 30px -12px rgba(0,0,0,.35); min-width: 100px; }
.fr-form label { font-size: 11px; color: #6b6b74; } .fr-form p { margin: 4px 0 8px; padding: 7px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px #d9d9e0; color: #8a8a94; } .fr-form > div { display: flex; gap: 6px; } .fr-form > div p { flex: 1; } .fr-form u { display: block; text-align: center; }
.fr-tog { min-width: 190px; } .fr-tog p { margin: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; }
.fr-tog i { width: 28px; height: 17px; border-radius: 999px; background: #d9d6df; position: relative; } .fr-tog i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; } .fr-tog i.on { background: #34c76a; } .fr-tog i.on::after { left: 13px; }
.fr.k > div { display: flex; gap: 6px; background: none; box-shadow: none; padding: 0; }
.fr-keys kbd { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 10px; font: 500 17px var(--sysf); color: #1d1d22; background: linear-gradient(#fff, #f1f0f5); box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 4px 0 #d6d4dd, 0 12px 24px -10px rgba(0,0,0,.35); }
.fr-tabs { display: flex; align-items: center; gap: 3px; padding: 7px 9px !important; max-width: none !important; } .fr-tabs span { width: 30px; height: 18px; border-radius: 5px; background: #f1f0f5; position: relative; } .fr-tabs span::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); } .fr-tabs em { margin-left: 6px; font-style: normal; font-size: 11.5px; color: #6b6b74; white-space: nowrap; }
.fr-2fa > div { display: flex; gap: 5px; margin-top: 8px; } .fr-2fa i { width: 26px; height: 32px; border-radius: 6px; display: grid; place-items: center; font: 600 15px var(--sysf); font-style: normal; box-shadow: inset 0 0 0 1px #d9d9e0; }
.fr-hang { display: grid; justify-items: center; gap: 8px; text-align: center; } .fr-hang .ball { width: 26px; height: 26px; border-radius: 50%; margin: 0; background: conic-gradient(#ff5f57, #febc2e, #28c840, #2fb5d8, #9b6bff, #ff5f57); animation: lv-turn 1.2s linear infinite; }
.fr-path, .fr-search, .fr-pw { font-size: 12px !important; color: #3a3a42 !important; }
.fr-term > div, .fr-term { } .fr-term > div { background: #1c1c22 !important; color: #ff8a8a !important; font: 500 12px ui-monospace, Menlo, monospace !important; }
.fr-cal > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 8px; } .fr-cal i { height: 12px; border-radius: 3px; background: #f1f0f5; } .fr-cal i.b { background: #c9d7ff; }
.fr-cell { font: 500 12px ui-monospace, Menlo, monospace !important; } .fr-cell span { display: inline !important; margin-right: 8px; color: #23a35a !important; font-weight: 700; }
.fr-up > i, .fr-up i { display: block; height: 5px; border-radius: 5px; background: #ececf1; margin-top: 8px; width: 170px; } .fr-up u { display: block; width: 18%; height: 100%; border-radius: 5px; background: #2f7cf6; padding: 0; }
.fr-term .fr-term, .fr .fr-term { background: #1c1c22; color: #ff8a8a; font: 500 12px ui-monospace, Menlo, monospace; }
/* The palette everything goes into. */
.w2-pal { position: absolute; left: 50%; top: 54%; z-index: 2; width: min(560px, 88vw); translate: -50% -50%; transform: scale(calc(.72 + var(--s) * .28)); }
.w2-glass { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #1b1b1e, #151517); box-shadow: inset 0 0 0 1px rgba(214,214,232,.3), 0 0 0 1px rgba(0,0,0,.5), 0 40px 100px -30px rgba(6,11,30,.7), 0 0 calc(var(--p) * 120px) calc(var(--p) * -10px) rgba(240, 120, 165, .55); }
.w2-rim { position: absolute; inset: -2px; border-radius: 22px; z-index: -1; background: conic-gradient(from var(--lv), #f0a6bd, #bc82f3, #f5b9ea, #8d9fff, #ff6778, #ffba71, #f0a6bd); animation: lv-turn 2.6s linear infinite; opacity: calc(var(--p) * 1.4); filter: blur(1px); }
.why2.done .w2-rim { opacity: 0; transition: opacity .6s; }
.w2-field { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 24px; font: 400 clamp(19px, 2vw, 25px) var(--sysf); color: #ececee; }
.w2-jev { width: 32px; height: 32px; flex: none; } .w2-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -10px; }
.w2-out { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); border-top: 1px solid rgba(236,236,238,0); }
.why2.done .w2-out { max-height: 100px; border-top-color: rgba(236,236,238,.14); }
.w2-done { display: flex; gap: 12px; align-items: center; padding: 14px 24px 18px; } .w2-done b { display: block; font: 600 15.5px var(--sysf); color: #ececee; } .w2-done span { font: 400 13px var(--sysf); color: #b4b4bc; }
.w2-line { position: absolute; left: 50%; bottom: max(48px, 9vh); translate: -50% 0; width: min(760px, 90vw); margin: 0; text-align: center; font: 550 clamp(18px, 1.8vw, 24px)/1.45 var(--sans); color: var(--ink2); opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.w2-line em { font-style: normal; color: var(--ink); }
.why2.done .w2-line { opacity: 1; transform: none; }
@media (max-width: 720px) { .fr > div { max-width: 170px; font-size: 10.5px; padding: 9px 10px; } .fr-keys kbd { min-width: 32px; height: 32px; font-size: 13px; } .fr-tabs span { width: 16px; } .fr-sub { display: none; } }
/* Done: either side of the palette, the nine steps it saved and the four it took. */
.w2-ways { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.w2-old, .w2-new { position: absolute; top: 54%; translate: 0 -50%; width: clamp(220px, 21vw, 300px); opacity: 0; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.w2-old { right: calc(50% + min(280px, 44vw) + clamp(28px, 4vw, 72px)); transform: translateX(-18px); text-align: right; }
.w2-new { left: calc(50% + min(280px, 44vw) + clamp(28px, 4vw, 72px)); transform: translateX(18px); }
.why2.done .w2-old, .why2.done .w2-new { opacity: 1; transform: none; }
.w2-h { margin: 0 0 14px; font: 600 15px var(--sans); color: var(--ink3); } .w2-h b { margin-left: 6px; font: 700 15px var(--sans); color: var(--ink); }
.w2-new .w2-h b { color: var(--accent); }
.w2-ways ol { list-style: none; margin: 0; padding: 0; display: grid; }
.w2-old ol { gap: 7px; } .w2-new ol { gap: 16px; }
.w2-old li { justify-self: end; position: relative; font: 450 15px/1.3 var(--sans); color: var(--ink2); transition: color .4s; transition-delay: calc(.25s + var(--i) * 70ms); }
.w2-old li::after { content: ""; position: absolute; left: -3px; right: -3px; top: 55%; height: 1.5px; background: var(--ink3); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--ease); transition-delay: inherit; }
.why2.done .w2-old li { color: var(--ink3); } .why2.done .w2-old li::after { transform: scaleX(1); }
.w2-new li { position: relative; padding-left: 26px; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .5s var(--ease); transition-delay: calc(.5s + var(--i) * 160ms); }
.why2.done .w2-new li { opacity: 1; transform: none; }
.w2-new li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #23a35a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.w2-new li.stop::before { background: #fff; box-shadow: inset 0 0 0 4.5px var(--accent); }
.w2-new li b { display: block; font: 600 15.5px/1.3 var(--sans); color: var(--ink); } .w2-new li span { display: block; margin-top: 2px; font: 400 13.5px/1.35 var(--sans); color: var(--ink3); }
@media (max-width: 1100px) { .w2-ways { display: none; } }
@media (prefers-reduced-motion: reduce) { .why2 { height: auto; } .w2-pin { position: relative; height: auto; min-height: 100svh; } }
.fr { transform: translate(-50%, -50%) translate(calc(var(--x) * 1vw * (1 - var(--q))), calc((var(--y) * .78 + 7) * 1vh * (1 - var(--q)))) rotate(calc(var(--r) * (1 - var(--q)))) scale(calc(1 - var(--q) * .82)); }
.w2-title { text-shadow: 0 0 30px var(--bg), 0 0 12px var(--bg); }

/* ── A day, scrolled ─────────────────────────────────────────────────── */
.dayx { position: relative; height: calc(100vh + 10 * 42vh); height: calc(100svh + 10 * 42svh); }
.dx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; color: #fff; --top: #f6b8c8; --bot: #ffd9b8; --p: 0; }
.dx-sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--top), var(--bot)); transition: background 1.2s var(--ease); }
@property --top { syntax: "<color>"; inherits: true; initial-value: #f6b8c8; }
@property --bot { syntax: "<color>"; inherits: true; initial-value: #ffd9b8; }
.dx-pin { transition: --top 1.2s var(--ease), --bot 1.2s var(--ease); }
/* The sun's arc: up from the left at 8, down to the right by 6. */
.dx-sun { position: absolute; width: clamp(70px, 8vw, 120px); aspect-ratio: 1; border-radius: 50%; left: calc(6% + var(--p) * 82%); top: calc(64% - sin(calc(var(--p) * 180deg)) * 46%);
  background: radial-gradient(circle, #fffaf0 0 46%, #ffe9c9 60%, rgba(255, 228, 190, 0) 72%); box-shadow: 0 0 120px 50px rgba(255, 236, 205, .55); translate: -50% -50%; }
.dx-hill { position: absolute; left: -10%; right: -10%; bottom: -20%; height: 42%; border-radius: 50% 50% 0 0; transition: background-color 1.2s var(--ease); }
.dx-hill.h1 { background: color-mix(in srgb, var(--bot) 45%, #6f7fcf); left: -30%; right: 35%; }
.dx-hill.h2 { background: color-mix(in srgb, var(--bot) 30%, #4b5aa8); left: 30%; right: -30%; bottom: -24%; }
.dx-head { position: absolute; left: max(var(--gutter), calc((100% - 1200px) / 2)); top: max(86px, 11vh); }
.dx-head .eyebrow { margin: 0 0 8px; color: #fff; opacity: .9; }
.dx-head h2 { margin: 0; font: 700 clamp(28px, 3vw, 44px)/1.05 var(--display); letter-spacing: -.04em; color: #fff; text-shadow: 0 2px 30px rgba(30, 30, 90, .25); }
/* The clock, huge, rolling with the scroll. */
.dx-clock { position: absolute; right: max(var(--gutter), calc((100% - 1200px) / 2)); top: max(70px, 9vh); display: flex; align-items: baseline; gap: 10px; text-shadow: 0 4px 40px rgba(30, 30, 90, .25); }
.dx-time { font: 800 clamp(70px, 10vw, 150px)/.9 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.dx-ampm { font: 700 clamp(18px, 2vw, 28px) var(--display); opacity: .85; }
/* The palette, centre stage. */
.dx-pal { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: min(600px, 90vw); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(27, 27, 30, .94), rgba(21, 21, 23, .96)); box-shadow: inset 0 0 0 1px rgba(214,214,232,.3), 0 0 0 1px rgba(0,0,0,.4), 0 40px 100px -30px rgba(20, 20, 70, .65); }
.dx-field { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 0 22px; font: 400 clamp(18px, 1.9vw, 24px) var(--sysf); color: #ececee; }
.dx-jev { width: 30px; height: 30px; flex: none; } .dx-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -10px; flex: none; }
.dx-out { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s; border-top: 1px solid transparent; }
.dx-out.in { max-height: 120px; opacity: 1; border-top-color: rgba(236,236,238,.14); }
.dx-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; }
.dx-card b { display: block; font: 600 16px/1.35 var(--sysf); color: #ececee; } .dx-card span { display: block; margin-top: 3px; font: 400 13px var(--sysf); color: #b4b4bc; }
/* Done today: a pile that grows. */
.dx-done { position: absolute; left: max(var(--gutter), calc((100% - 1200px) / 2)); top: 34%; width: min(300px, 24vw); }
.dx-done-h { margin: 0 0 10px; font: 600 12px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(30,30,90,.3); }
.dx-done-h b { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.9); color: #151517; }
.dx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 44vh; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.dx-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.88); color: #151517; box-shadow: 0 8px 20px -12px rgba(20,20,60,.4); font: 500 12.5px/1.3 var(--sans); }
.dx-list li:first-child { animation: in .45s var(--spring) both; }
.dx-list time { display: none; }
.dx-mini { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--c); } .dx-mini svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The ruler: 8 to 6, filling; each tick a jump. */
.dx-rule { position: absolute; left: max(var(--gutter), calc((100% - 1200px) / 2)); right: max(var(--gutter), calc((100% - 1200px) / 2)); bottom: max(28px, 5vh); height: 44px; display: flex; justify-content: space-between; align-items: flex-end; }
.dx-rule::before { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); }
.dx-fill { position: absolute; left: 0; bottom: 22px; height: 3px; border-radius: 3px; background: #fff; }
.dx-tick { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 0; color: #fff; font: 600 11.5px var(--mono); }
.dx-tick i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 3px rgba(255,255,255,.15); transition: transform .3s var(--spring), background-color .3s; }
.dx-tick.past i { background: #fff; } .dx-tick.on i { background: #fff; transform: scale(1.5); box-shadow: 0 0 0 5px rgba(255,255,255,.3); }
.dx-tick span { order: 2; text-shadow: 0 1px 8px rgba(30,30,90,.35); }
@media (max-width: 900px) {
  .dx-done { display: none; } .dx-clock { top: auto; bottom: 110px; right: auto; left: 50%; translate: -50% 0; } .dx-time { font-size: 64px; }
  .dx-pal { top: 46%; } .dx-tick span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dayx { height: auto; } .dx-pin { position: relative; } }

/* ── A day, handled ──────────────────────────────────────────────────── */
.dayy { position: relative; height: calc(100vh + 10 * 34vh); height: calc(100svh + 10 * 34svh); }
.dy-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; gap: clamp(32px, 5vw, 80px); padding: 76px max(var(--gutter), calc((100% - 1200px) / 2)) 28px; }
.dy-side { flex: 0 0 clamp(300px, 30vw, 400px); min-width: 0; }
.dy-side .eyebrow { margin: 0 0 12px; }
.dy-side h2 { margin: 0; font: 680 clamp(30px, 3.2vw, 46px)/1.05 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.dy-side .sub { margin: 14px 0 22px; font: 450 16.5px/1.5 var(--sans); color: var(--ink2); }
.dy-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; position: relative; }
.dy-side h2 + .dy-rail { margin-top: 32px; }
/* The line runs through every dot's centre (66 + 8 + 9 = 83 px in), and fills with the accent up to the moment shown. */
.dy-rail::before, .dy-rail::after { content: ""; position: absolute; left: 82px; top: 15.5px; bottom: 15.5px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.dy-rail::after { background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--d, 0)); transition: transform .5s var(--ease); }
.dy-rail button { width: 100%; display: grid; grid-template-columns: 66px 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 10px 6px 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 10px; }
.dy-rail button::after { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); position: relative; z-index: 1; transition: background-color .3s, box-shadow .3s, transform .3s var(--spring); }
.dy-rail time { grid-column: 1; grid-row: 1; font: 500 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink3); text-align: right; padding-right: 2px; }
.dy-rail span { grid-column: 3; grid-row: 1; font: 500 14.5px/1.3 var(--sans); color: var(--ink3); transition: color .3s; }
.dy-rail li.past span { color: var(--ink2); } .dy-rail li.past button::after { background: var(--c); box-shadow: none; }
.dy-rail li.on span { color: var(--ink); font-weight: 650; } .dy-rail li.on time { color: var(--ink); }
.dy-rail li.on button::after { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); transform: scale(1.25); }
/* The card: a strip tinted by the hour, the sentence, the result. */
.dy-card { flex: 1 1 auto; min-width: 0; max-width: 640px; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(23,21,46,.06), 0 50px 100px -50px rgba(23, 21, 46, .55); --t1: #ffd9c2; --t2: #f6b8c8; }
.dy-strip { display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: linear-gradient(110deg, var(--t1), var(--t2)); transition: background 1s var(--ease); color: #151517; }
.dy-sunic { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 45%, rgba(255,255,255,.5) 60%, transparent 70%); box-shadow: 0 0 14px rgba(255,255,255,.9); }
.dy-time { font: 700 16px var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dy-part { margin-left: auto; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.dy-field { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 22px; background: linear-gradient(180deg, #1b1b1e, #0b1128); font: 400 clamp(17px, 1.7vw, 22px) var(--sysf); color: #ececee; }
.dy-jev { width: 28px; height: 28px; flex: none; } .dy-field .caret { width: 2px; height: 1.15em; background: #ececee; margin-left: -10px; flex: none; }
.dy-res { min-height: 290px; padding: 20px 22px 22px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.dy-res.in { opacity: 1; transform: none; }
.dy-h { margin: 0 0 12px; font: 650 17px var(--sans); color: var(--ink); }
.dy-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.dy-row:first-of-type { border-top: 0; }
.dy-ri { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 14px var(--sans); }
.dy-rt b { display: block; font: 600 14.5px var(--sans); color: var(--ink); } .dy-rt span { display: block; font: 450 13px var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-tag { font: 600 11.5px var(--sans); font-style: normal; padding: 4px 9px; border-radius: 999px; background: #e7f7ee; color: #1e7a45; white-space: nowrap; }
.dy-tag.soft { background: #eef2fb; color: #3a4a7a; }
.dy-price { font: 700 14.5px var(--sans); color: var(--ink); }
.dy-ok { display: inline-block; position: relative; width: 18px; height: 18px; border-radius: 50%; background: #34c76a; vertical-align: -4px; } .dy-ok::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; rotate: 45deg; }
.dy-note { margin: 14px 0 0; font: 500 13.5px var(--sans); color: var(--ink2); display: flex; gap: 8px; align-items: center; }
.dy-cal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.dy-ev { padding: 14px; border-radius: 14px; border-left: 4px solid #ff5f9e; background: #fff0f6; } .dy-ev b { display: block; font: 650 15px var(--sans); color: var(--ink); } .dy-ev span { font: 450 13px var(--sans); color: var(--ink2); }
.dy-ev.old { opacity: .5; text-decoration: line-through; border-left-color: #bbb; background: #f4f4f6; }
.dy-arr { font: 600 20px var(--sans); color: var(--ink3); }
.dy-btns { display: flex; gap: 8px; margin-top: 8px; } .dy-b { padding: 8px 18px; border-radius: 10px; font: 600 14px var(--sans); background: #f1f0f5; color: var(--ink2); } .dy-b.on { background: #34c76a; color: #fff; }
.dy-tile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 170px; }
.dy-tile span { border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); color: #fff; font: 650 14px var(--sans); display: grid; place-items: end start; padding: 12px; box-shadow: inset 0 22px 0 rgba(255,255,255,.18); }
.dy-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dy-files span { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; font: 450 12px var(--sans); color: var(--ink2); text-align: center; word-break: break-word; }
.dy-files i { width: 34px; height: 40px; border-radius: 4px 9px 4px 4px; background: #e9e9ef; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }
.dy-files span.dup { box-shadow: inset 0 0 0 2px #ff5f9e; background: #fff4f8; }
@media (max-width: 900px) {
  .dy-pin { flex-direction: column; justify-content: flex-start; gap: 16px; padding-top: 72px; }
  .dy-side { flex: none; width: 100%; } .dy-side .sub { display: none; }
  .dy-rail { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; padding: 6px 6px 14px; margin-inline: -6px; } .dy-rail::before, .dy-rail::after { display: none; }
  .dy-rail li { flex: none; } .dy-rail button { grid-template-columns: auto; padding: 6px 12px; background: #fff; box-shadow: var(--lift); border-radius: 999px; } .dy-rail button::after, .dy-rail span { display: none; } .dy-rail time { grid-column: 1; text-align: left; } .dy-rail li.on button { background: var(--ink); } .dy-rail li.on time { color: #fff; }
  .dy-card { width: 100%; } .dy-res { min-height: 260px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dayy { height: auto; } .dy-pin { position: relative; } }
.dy-res { min-height: 300px; }
@media (max-width: 900px) { .dy-card { flex: none; } .dy-res { min-height: 250px; } }

/* ── A day, in our own look: Jevie's palette over the hour's living theme ── */
.dy-card { position: relative; isolation: isolate; background: #0b1020; border-radius: 30px; padding: 0 clamp(18px, 2.6vw, 34px) clamp(22px, 3vw, 36px); max-width: 680px;
  box-shadow: 0 50px 100px -45px rgba(23, 21, 46, .75), inset 0 0 0 1px rgba(255,255,255,.08); overflow: visible; }
.dy-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; border-radius: inherit; }
.dy-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 60% at 50% 60%, rgba(4,6,16,.32), rgba(4,6,16,.05)); }
.dy-strip { background: none; color: #fff; padding: 18px 4px 16px; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.dy-time { font-size: 17px; } .dy-part { margin-left: 4px; opacity: .85; }
.dy-world { margin-left: auto; padding: 5px 11px; border-radius: 999px; font: 500 12px var(--sans); color: #fff; background: rgba(10,12,28,.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); text-shadow: none; }
.dy-sunic { box-shadow: 0 0 14px rgba(255,255,255,.95); }
/* The palette, as the app draws it (Ethereal): glass, peach words, Jevie perched. */
.dy-pal { position: relative; margin-top: 38px; border-radius: 20px; background: linear-gradient(180deg, rgba(27, 27, 30, .95), rgba(21, 21, 23, .96));
  box-shadow: inset 0 0 0 1px rgba(214,214,232,.3), 0 0 0 1px rgba(0,0,0,.5), 0 40px 80px -30px rgba(6,11,30,.7); }
.dy-jevp { position: absolute; left: 22px; top: calc(58px * -122 / 172); width: 58px; height: 58px; z-index: 2; }
.dy-pal .dy-field { background: none; min-height: 70px; padding: 0 24px; border-bottom: 1px solid rgba(236,236,238,.14); font-size: clamp(18px, 1.8vw, 23px); }
.dy-pal .dy-field .caret { margin-left: 1px; }
.dy-pal .dy-res { min-height: 270px; padding: 14px 18px 10px; }
.dy-foot { display: flex; justify-content: flex-end; gap: 18px; padding: 10px 20px 12px; border-top: 1px solid rgba(236,236,238,.1); font: 400 11px var(--sysf); color: #b4b4bc; }
.dy-foot kbd { font: 500 10.5px var(--sysf); padding: .1em .45em; border-radius: 5px; background: rgba(236,236,238,.12); color: #b4b4bc; margin-left: 6px; }
/* Results in the app's rows: a heading, rows with a tile, title, detail and accessory. */
.dy-pal .dy-h { margin: 4px 6px 8px; font: 600 13px var(--sysf); color: #b4b4bc; }
.dy-pal .dy-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 8px 10px; margin: 0 -4px; border: 0; border-radius: 10px; }
.dy-pal .dy-row:first-of-type { background: color-mix(in srgb, #2c2c31 75%, transparent); }
.dy-pal .dy-ri { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); font: 700 13px var(--sysf); }
.dy-pal .dy-rt b { font: 500 14.5px var(--sysf); color: #ececee; } .dy-pal .dy-rt span { font: 400 12.5px var(--sysf); color: #b4b4bc; }
.dy-pal .dy-tag { background: rgba(61,220,132,.16); color: #8ff0b8; font-family: var(--sysf); }
.dy-pal .dy-tag.soft { background: rgba(125,130,217,.2); color: #c9cdfa; }
.dy-pal .dy-price { color: #ececee; font-family: var(--sysf); }
.dy-pal .dy-note { margin: 10px 6px 4px; color: #b4b4bc; font: 400 13px var(--sysf); }
.dy-pal .dy-ev { background: rgba(255, 95, 158, .14); border-left-color: #ff5f9e; } .dy-pal .dy-ev b { color: #ececee; font-family: var(--sysf); } .dy-pal .dy-ev span { color: #b4b4bc; }
.dy-pal .dy-ev.old { background: rgba(255,255,255,.05); border-left-color: rgba(255,255,255,.25); }
.dy-pal .dy-arr { color: #b4b4bc; } .dy-pal .dy-cal { margin: 4px 6px; }
.dy-pal .dy-b { background: rgba(255,255,255,.08); color: #b4b4bc; font-family: var(--sysf); } .dy-pal .dy-b.on { background: #34c76a; color: #06210f; }
.dy-pal .dy-btns { margin: 8px 6px 0; }
.dy-pal .dy-tile { margin: 0 6px; height: 160px; } .dy-pal .dy-tile span { font-family: var(--sysf); }
.dy-pal .dy-files { margin: 0 6px; } .dy-pal .dy-files span { color: #b4b4bc; font-family: var(--sysf); } .dy-pal .dy-files i { background: #e9e9ef; }
.dy-pal .dy-files span.dup { background: rgba(255, 95, 158, .1); box-shadow: inset 0 0 0 2px #ff5f9e; }
@media (max-width: 900px) { .dy-card { padding: 0 12px 16px; } .dy-world { display: none; } .dy-pal .dy-res { min-height: 230px; } }
.dy-strip { padding: 18px 0 0; gap: 8px; }
.dy-strip .dy-sunic, .dy-strip .dy-time, .dy-strip .dy-part { position: relative; }
.dy-strip { align-items: center; }
.dy-strip > .dy-sunic { display: none; }
.dy-time, .dy-part { padding: 5px 0; }
.dy-strip::before { content: ""; }
.dy-time { padding: 5px 12px; border-radius: 999px; background: rgba(10,12,28,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 14px; text-shadow: none; }
.dy-part { font: 600 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(10,12,28,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 1; text-shadow: none; }
.dy-pal { margin-top: 58px; }

/* ── Make it yours: a world, Jevie, the cast in orbit ────────────────── */
.orb { position: relative; isolation: isolate; overflow: hidden; height: 100vh; height: 100svh; min-height: 700px; margin-top: 140px; background: #070a18; color: #fff; }
.orb-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.orb-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(4,6,16,.55), rgba(4,6,16,.1) 30%, rgba(4,6,16,.1) 62%, rgba(4,6,16,.66)), radial-gradient(40% 40% at 50% 58%, rgba(4,6,16,.25), transparent); }
.orb-head { position: absolute; left: 0; right: 0; top: clamp(70px, 9vh, 100px); text-align: center; padding: 0 20px; z-index: 5; }
.orb-head .eyebrow { margin: 0 0 10px; color: #ececee; }
.orb-head h2 { margin: 0; font: 700 clamp(32px, 4.4vw, 64px)/1 var(--display); letter-spacing: -.045em; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.orb-head h2 span { color: #f0a6bd; }
.orb-stage { position: absolute; left: 50%; top: 54%; width: 0; height: 0; z-index: 3; }
.orb-ring { position: absolute; inset: 0; }
.orb-ring button { position: absolute; left: 0; top: 0; width: 92px; height: 92px; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; transition: opacity .3s; }
.orb-ring button svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.orb-ring button[aria-checked="true"] svg { filter: drop-shadow(0 0 16px rgba(255, 206, 173, .7)) drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.orb-jev { position: absolute; left: 0; top: 0; width: clamp(190px, 18vw, 260px); height: clamp(190px, 18vw, 260px); translate: -50% -62%; z-index: 3; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); pointer-events: none; }
.orb-shadow { position: absolute; left: 0; top: 0; width: 220px; height: 30px; translate: -50% 70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); z-index: 2; }
.orb-name { position: absolute; left: 50%; bottom: 168px; translate: -50% 0; z-index: 5; display: grid; justify-items: center; gap: 2px; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.orb-name b { font: 700 26px var(--display); letter-spacing: -.02em; } .orb-name span { font: 450 15px var(--sans); color: rgba(255,255,255,.82); }
.orb-pal { position: absolute; left: 50%; bottom: 98px; translate: -50% 0; z-index: 6; width: min(560px, 92vw); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(27, 27, 30, .92), rgba(21, 21, 23, .94)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(214,214,232,.3), 0 30px 60px -20px rgba(0,0,0,.7); }
.orb-jevs { width: 28px; height: 28px; flex: none; }
.orb-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 19px var(--sysf); color: #ececee; caret-color: #ececee; padding: 10px 0; }
.orb-input::placeholder { color: rgba(236,236,238,.75); }
.orb-pal button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; background: #ececee; color: #151517; font: 600 17px var(--sysf); }
.orb-themes { position: absolute; left: 50%; bottom: 42px; translate: -50% 0; z-index: 6; display: flex; gap: 6px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; padding: 5px; border-radius: 999px;
  background: rgba(10,12,28,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.orb-themes::-webkit-scrollbar { display: none; }
.orb-themes button { flex: none; border: 0; cursor: pointer; padding: 7px 13px; border-radius: 999px; background: none; font: 500 13px var(--sans); color: rgba(255,255,255,.8); white-space: nowrap; }
.orb-themes button[aria-checked="true"] { background: #fff; color: #0b0d18; }
.orb-own { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font: 450 12.5px var(--sans); color: rgba(255,255,255,.7); z-index: 6; }
.orb-own q { color: #ececee; }
@media (max-width: 720px) { .orb-ring button { width: 64px; height: 64px; } .orb-name { bottom: 170px; } .orb-name b { font-size: 21px; } .orb-input { font-size: 16px; } .orb-own { display: none; } .orb-themes { bottom: 24px; } .orb-pal { bottom: 80px; } }
.orb-stage { top: 52%; } .orb-jev { translate: -50% -66%; }

/* ── Team: the room, as Team on the Mac draws it (team.js) ───────────── */
.team { position: relative; padding: 140px max(var(--gutter), calc((100% - 1240px) / 2)) 130px; background: #050506; color: #ececee; overflow: hidden; isolation: isolate; }
.team::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 0%, rgba(228, 91, 176, .16), transparent 70%), radial-gradient(40% 40% at 85% 70%, rgba(60, 192, 184, .1), transparent 70%); }
.tm-head { text-align: center; max-width: 780px; margin: 0 auto; }
.tm-head h2 { margin: 0; font: 700 clamp(34px, 4.6vw, 64px)/1.02 var(--display); letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.tm-head .sub { margin: 20px auto 0; max-width: 640px; font: 450 clamp(16px, 1.3vw, 19px)/1.55 var(--sans); color: #b4b4bc; text-wrap: pretty; }
.team .eyebrow { color: #f0a6bd; }
.tm-stage { margin-top: 64px; display: grid; justify-items: center; gap: 44px; }
/* The window: Team on the Mac at 1180 × 700 pt, --u one point. */
.tm-win { position: relative; width: min(1180px, 100%); aspect-ratio: 1180 / 700; container-type: inline-size; border-radius: 16px; overflow: hidden; background: #0b0b0c;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 120px -40px rgba(228, 91, 176, .35), 0 40px 80px -30px rgba(0,0,0,.8); }
.tm-desk { --u: calc(100cqw / 1180); --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; position: absolute; inset: 0; display: grid; grid-template-columns: calc(70 * var(--u)) calc(270 * var(--u)) minmax(0, 1fr) 0fr; font: calc(14 * var(--u))/1.4 var(--sys); color: #ececee; transition: grid-template-columns .7s var(--ease);
  background: linear-gradient(180deg, #1a0d13 0, #0b0b0c calc(160 * var(--u))); }
.team.th .tm-desk { grid-template-columns: calc(70 * var(--u)) calc(270 * var(--u)) minmax(0, 1fr) calc(380 * var(--u)); }
.tm-desk svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
/* The strip. */
.tm-strip { display: grid; align-content: start; justify-items: center; gap: calc(18 * var(--u)); padding-top: calc(22 * var(--u)); position: relative; }
.tm-sn { position: relative; display: grid; justify-items: center; gap: calc(3 * var(--u)); color: #c9c9cf; font-size: calc(11.5 * var(--u)); }
.tm-sn svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: calc(9 * var(--u)); border-radius: calc(12 * var(--u)); box-sizing: border-box; }
.tm-sn.on svg { background: #2a2a2e; color: #fff; } .tm-sn b { font-weight: 500; }
.tm-sn i { position: absolute; right: calc(-4 * var(--u)); top: calc(-4 * var(--u)); min-width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: 99px; display: grid; place-items: center; background: #f06292; color: #fff; font: 600 calc(10.5 * var(--u)) var(--sys); font-style: normal; }
.tm-sn i.tm-act { opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--spring); } .team.d3 .tm-sn i.tm-act { opacity: 1; transform: none; }
.tm-me { position: absolute; bottom: calc(18 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(9 * var(--u)); display: grid; place-items: center; background: #3b8fd0; color: #fff; font-weight: 600; box-shadow: calc(12 * var(--u)) calc(12 * var(--u)) 0 calc(-7 * var(--u)) #3ddc84; }
/* The list. */
.tm-side { border-left: calc(1 * var(--u)) solid #1f1f22; border-right: calc(1 * var(--u)) solid #1f1f22; padding: calc(20 * var(--u)) calc(14 * var(--u)); overflow: hidden; }
.tm-team { display: grid; padding: 0 calc(8 * var(--u)); } .tm-team b { font-size: calc(21 * var(--u)); font-weight: 700; color: #fff; } .tm-team span { color: #a0a0a8; font-size: calc(13 * var(--u)); }
.tm-find { display: flex; align-items: center; margin: calc(12 * var(--u)) 0 calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); background: #18181b; box-shadow: inset 0 0 0 calc(1 * var(--u)) #2a2a2e; color: #8e8e97; font-size: calc(13 * var(--u)); }
.tm-find kbd { margin-left: auto; padding: 0 calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: #2a2a2e; font: 500 calc(10.5 * var(--u)) var(--sys); color: #a0a0a8; }
.tm-sec { margin: calc(16 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8e8e97; }
.tm-row { position: relative; display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0; padding: calc(5.5 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); color: #d6d6dc; font-size: calc(14.5 * var(--u)); }
.tm-row > i:not(.tm-bot):not(.tm-av) { width: calc(22 * var(--u)); font-style: normal; color: #a0a0a8; font-size: calc(17 * var(--u)); text-align: center; }
.tm-row.on { background: #2a1820; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(240, 166, 189, .45); color: #fff; font-weight: 600; }
.tm-row.b { color: #fff; font-weight: 700; } .tm-row em { margin-left: auto; font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 600; min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 99px; display: grid; place-items: center; background: #2a2a2e; }
.tm-row em.tm-paused { background: none; color: #f5b14c; letter-spacing: .06em; text-transform: uppercase; font-size: calc(10.5 * var(--u)); }
.tm-row u { position: absolute; left: calc(25 * var(--u)); top: calc(21 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #6b6b73; box-shadow: 0 0 0 calc(2 * var(--u)) #0b0b0c; transition: background-color .4s; }
.tm-row u.here { background: #3ddc84; } .tm-row u.away { background: #f5b14c; }
.tm-ag[data-ag] u { background: #3ddc84; } .team.d2:not(.d3) .tm-ag[data-ag] u { background: #f5b14c; animation: tm-pulse 1.2s ease-in-out infinite; }
@keyframes tm-pulse { 50% { box-shadow: 0 0 0 calc(2 * var(--u)) #0b0b0c, 0 0 0 calc(5 * var(--u)) rgba(245, 177, 76, .35); } }
/* A bot's face: a little robot in its hue, as Team draws an agent. */
.tm-bot { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: color-mix(in srgb, var(--h) 24%, #111) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5' y='8' width='14' height='11' rx='3'/%3E%3Cpath d='M12 5v3M9.5 12.5v1M14.5 12.5v1M10 16h4'/%3E%3C/svg%3E") center / 68% no-repeat; box-shadow: inset 0 0 0 calc(1 * var(--u)) color-mix(in srgb, var(--h) 60%, transparent); }
.tm-bot.big { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(9 * var(--u)); }
.tm-av { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); display: grid; place-items: center; background: var(--c); color: #fff; font-style: normal; font-weight: 600; font-size: calc(12 * var(--u)); }
.tm-m > .tm-av { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(15 * var(--u)); }
/* The conversation. */
.tm-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u)); }
.tm-top { display: grid; padding-bottom: calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid #1f1f22; } .tm-top b { font-size: calc(20 * var(--u)); color: #fff; } .tm-top span { color: #a0a0a8; font-size: calc(13.5 * var(--u)); }
.tm-msgs { display: grid; align-content: end; gap: calc(18 * var(--u)); padding: calc(16 * var(--u)) 0; overflow: hidden; }
.tm-m { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(12 * var(--u)); align-items: start; }
.tm-m b { display: block; font-size: calc(15 * var(--u)); color: #fff; font-weight: 700; } .tm-m b small { margin-left: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 400; color: #8e8e97; }
.tm-m p { margin: calc(2 * var(--u)) 0 0; font-size: calc(15 * var(--u)); color: #e4e4ea; }
.tm-m mark { padding: 0 calc(4 * var(--u)); border-radius: calc(5 * var(--u)); background: #3a2230; color: #ffd1e3; font-weight: 600; }
.tm-ask { opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.team.d1 .tm-ask { opacity: 1; transform: none; }
.tm-reply { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); border-radius: calc(8 * var(--u)); background: #141416; color: #a0a0a8; font-size: calc(13 * var(--u)); opacity: 0; transition: opacity .4s; }
.tm-reply .tm-bot { width: calc(20 * var(--u)); height: calc(20 * var(--u)); } .tm-reply b { display: inline; font-size: calc(13 * var(--u)); color: #7cb9ff; }
.team.d2 .tm-reply { opacity: 1; }
.tm-field { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(50 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #141416; box-shadow: inset 0 0 0 calc(1 * var(--u)) #2a2a2e; font-size: calc(15 * var(--u)); color: #fff; }
.tm-plus { color: #a0a0a8; font-size: calc(22 * var(--u)); font-weight: 300; } .tm-typed:empty::before { content: "Message # jevie"; color: #6b6b73; }
.tm-caret { width: calc(1.5 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(-10 * var(--u)); background: #f0a6bd; animation: blink 1.1s steps(2) infinite; }
.tm-typed mark { padding: 0 calc(3 * var(--u)); border-radius: calc(4 * var(--u)); background: #3a2230; color: #ffd1e3; }
/* The thread, sliding in from the right. */
.tm-thread { min-width: 0; overflow: hidden; display: grid; align-content: start; gap: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); background: #101012; border-left: calc(1 * var(--u)) solid #1f1f22; }
.tm-th { display: flex; align-items: baseline; gap: calc(8 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: calc(1 * var(--u)) solid #1f1f22; white-space: nowrap; } .tm-th b { font-size: calc(18 * var(--u)); color: #fff; } .tm-th span { color: #a0a0a8; }
.tm-rule { margin: 0; font-size: calc(12.5 * var(--u)); color: #8e8e97; display: flex; gap: calc(8 * var(--u)); align-items: center; } .tm-rule::after { content: ""; flex: 1; height: calc(1 * var(--u)); background: #1f1f22; }
.tm-thread > * { opacity: 0; transform: translateX(calc(14 * var(--u))); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.team.th .tm-thread > .tm-th, .team.th .tm-thread > .tm-m:nth-child(2), .team.th .tm-thread > .tm-rule { opacity: 1; transform: none; }
.team.d2 .tm-work { opacity: 1; transform: none; }
.team.d3 .tm-work { display: none; }
.team.d3 .tm-done, .team.d4 .tm-ok { opacity: 1; transform: none; }
.tm-done, .tm-ok { display: grid; }
.tm-steps { display: grid; gap: calc(4 * var(--u)); color: #a0a0a8 !important; }
.tm-steps span { display: flex; align-items: center; gap: calc(8 * var(--u)); opacity: .35; transition: opacity .3s; }
.tm-steps span::before { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: currentColor; }
.tm-steps span.on { opacity: 1; color: #f5b14c; } .tm-steps span.done { opacity: .8; color: #3ddc84; }
.tm-branch { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(7 * var(--u)); background: #12261b; color: #7be3a6; font: 500 calc(12.5 * var(--u)) "SF Mono", ui-monospace, Menlo, monospace; }
.tm-branch svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.4; }
/* What it means, under the window. */
.tm-points { list-style: none; margin: 0; padding: 0; width: min(1180px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.tm-points li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid #222226; }
.tm-points b { font: 650 16px var(--sans); color: #fff; } .tm-points span { font: 400 14.5px/1.5 var(--sans); color: #a0a0a8; }
.team .more { color: #fff; border-color: rgba(255,255,255,.25); margin-top: 0; }
@media (max-width: 900px) {
  .team { padding-block: 96px 90px; }
  .tm-desk { --u: calc(100cqw / 700); grid-template-columns: calc(70 * var(--u)) 0 minmax(0, 1fr) 0fr; }
  .team.th .tm-desk { grid-template-columns: calc(70 * var(--u)) 0 0fr minmax(0, 1fr); }
  .tm-side { padding: 0; border: 0; }
  .tm-win { aspect-ratio: 700 / 640; } .tm-main { overflow: hidden; } .team.th .tm-main { padding-inline: 0; }
  .tm-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 520px) { .tm-points { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tm-desk, .tm-thread > *, .tm-ask, .tm-reply { transition: none; } }

/* ── Your Mac, in your pocket: the real phone app, live (pocket.js) ──── */
.pocket { text-align: left; }
.pk { width: min(1180px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 6vw, 96px); }
.pk-text .eyebrow { margin-bottom: 12px; }
.pk-text h2 { margin: 0; text-align: left; }
.pk-text .sub { margin: 18px 0 26px; text-align: left; max-width: 480px; }
.pk-places { display: grid; gap: 6px; max-width: 480px; }
.pk-places button { position: relative; display: grid; gap: 3px; padding: 14px 18px 14px 20px; border: 0; border-radius: 16px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.pk-places button::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: transparent; transition: background .3s; }
.pk-places button:hover { background: rgba(23, 21, 31, .04); }
.pk-places button[aria-pressed="true"] { background: #fff; box-shadow: var(--lift); } .pk-places button[aria-pressed="true"]::before { background: var(--accent); }
.pk-places b { font: 650 17px var(--sans); color: var(--ink); letter-spacing: -.01em; } .pk-places span { font: 400 15px/1.45 var(--sans); color: var(--ink2); }
.pk-fine { margin: 22px 0 0; max-width: 480px; font: 400 14px/1.55 var(--sans); color: var(--ink3); } .pk-fine a { color: var(--ink); font-weight: 550; }
/* The phone: a 390 × 844 screen in a bezel, the page scaled to fit. */
.pk-stage { position: relative; display: grid; justify-items: center; gap: 18px; }
.pk-stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 166, 189, .45), rgba(240, 166, 189, .12) 55%, transparent 72%); filter: blur(10px); }
.pk-phone { --h: min(720px, calc(100svh - 190px)); position: relative; height: var(--h); aspect-ratio: 406 / 860; padding: calc(var(--h) * .0186); border-radius: calc(var(--h) * .07); background: #1b1b1f;
  box-shadow: inset 0 0 0 1.5px #3a3a40, inset 0 0 0 4px #0c0c0e, 0 0 0 1px rgba(0,0,0,.25), 0 60px 100px -40px rgba(40, 20, 60, .55), 0 30px 60px -30px rgba(0,0,0,.45); }
.pk-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--h) * .056); overflow: hidden; background: #000; container-type: size; }
.pk-poster { position: absolute; inset: 0; top: var(--top, 0px); width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.pk-screen iframe { position: absolute; left: 0; top: var(--top, 0px); width: 390px; height: var(--ih, 797px); border: 0; transform-origin: 0 0; transform: scale(var(--k, .85)); opacity: 0; transition: opacity .6s; background: #000; }
.pocket.live .pk-screen iframe { opacity: 1; } .pocket.live .pk-poster { opacity: 0; }
.pk-island { position: absolute; left: 50%; top: calc(var(--h) * .03); translate: -50% 0; width: 30%; height: calc(var(--h) * .036); border-radius: 99px; background: #000; z-index: 2; pointer-events: none; }
.pk-tag { margin: 0; font: 500 13px var(--sans); color: var(--ink3); display: flex; align-items: center; gap: 8px; }
.pk-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #23a35a; box-shadow: 0 0 0 4px rgba(35, 163, 90, .15); }
@media (max-width: 900px) {
  .pk { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pk-text { text-align: center; } .pk-text h2, .pk-text .sub { text-align: center; margin-inline: auto; }
  .pk-places { margin: 0 auto; } .pk-fine { margin-inline: auto; text-align: center; }
  .pk-text { display: contents; } .pk-text .eyebrow { order: 1; } .pk-text h2 { order: 2; } .pk-text .sub { order: 3; margin-bottom: 0; } .pk-stage { order: 4; margin-top: 8px; } .pk-places { order: 5; } .pk-fine { order: 6; }
  .pk-phone { --h: min(640px, calc(100svh - 120px)); }
}
.pk-status { position: absolute; inset: 0 0 auto; height: var(--top, 44px); z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 4% 9% 0 11%; box-sizing: border-box; color: #fff; font: 600 calc(var(--h) * .019) -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: #050506; }
.pk-status span { display: flex; gap: 5px; align-items: center; } .pk-status svg { height: calc(var(--h) * .0135); width: auto; fill: currentColor; }
.tm-day { margin: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: #8e8e97; } .tm-day::before, .tm-day::after { content: ""; flex: 1; height: calc(1 * var(--u)); background: #1f1f22; }
.tm-react { display: inline-flex; margin-top: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 99px; background: #1b1b1e; box-shadow: inset 0 0 0 calc(1 * var(--u)) #2a2a2e; font-size: calc(12.5 * var(--u)); color: #c9c9cf; }

/* ══ The light-led system (31 October 2026) ══════════════════════════════
   After raycast.com, on our own daylight: one ground for the whole page,
   colour only from light (Jevie's thinking light: rose, violet, teal, amber)
   and from the product itself, depth from that light (a glow behind every
   product, a tilt as it arrives), quiet two-tone sentence titles, and one
   floating bar. */
:root { --rose: #ff6fa6; --violet: #9d7bff; --teal: #2fc6dd; --amber: #ffbe57; --paper: #fbf8f4;
  --aura: conic-gradient(from 210deg, var(--rose), var(--violet), var(--teal), var(--amber), var(--rose)); }
html, body { background: var(--paper); }
main > section { background-color: transparent; }
/* The bar: a pill floating over the page. */
.bar { top: 12px !important; left: max(16px, calc((100% - 1180px) / 2)) !important; right: max(16px, calc((100% - 1180px) / 2)) !important; width: auto !important; border-radius: 16px; border: 0 !important;
  background: rgba(251, 248, 244, .72) !important; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(23, 21, 31, .07), 0 10px 30px -18px rgba(44, 36, 92, .25); padding-inline: 18px 8px !important; }
/* Titles: one sentence, its second half quieter. */
.sec h2, .st-title, .tm-head h2, .pk-text h2, .ty-side h2, .dayy h2, .rcx h2, .faq h2, #private h2, #pricing h2 {
  font: 650 clamp(30px, 3.1vw, 44px)/1.1 var(--display) !important; letter-spacing: -.035em !important; color: var(--ink); text-wrap: balance; }
.sec h2 > span:not(.wd), .st-title > span, .tm-head h2 > span, .pk-text h2 > span, .ty-side h2 > span, .dayy h2 > span { color: var(--ink3) !important; }
.sec h2 .wd { color: inherit !important; }
.sec h2 > span:not(.wd) .wd { color: var(--ink3) !important; }
.sec .sub, .tm-head .sub, .pk-text .sub, .ty-side .sub { font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.55 !important; color: var(--ink2) !important; }
/* The light behind a product: Jevie's colours, blurred, under it. */
.lit { position: relative; isolation: isolate; }
.lit::before { content: ""; position: absolute; inset: 6% 4% -4%; z-index: -1; border-radius: 40px; background: var(--aura); filter: blur(70px) saturate(1.2); opacity: calc(.32 + var(--in, 1) * .26); transform: scale(calc(.9 + var(--in, 1) * .1)); pointer-events: none; transition: opacity .3s; }
/* Arriving: tipped back, then flat as it reaches the middle (depth.js sets --in). */
.tilt { transform: perspective(1800px) rotateX(calc((1 - var(--in, 1)) * 16deg)) scale(calc(.93 + var(--in, 1) * .07)); transform-origin: 50% 100%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .tilt { transform: none; } }

/* ── The first screen ─────────────────────────────────────────────────── */
.hx { position: relative; min-height: 100svh; display: grid; justify-items: center; align-content: center; padding: 120px var(--gutter) 70px; text-align: center; overflow: hidden; isolation: isolate; }
.hx::before { content: ""; position: absolute; inset: -10% -20% auto; height: 80%; z-index: -2; background: radial-gradient(40% 45% at 30% 30%, rgba(255, 111, 166, .14), transparent 70%), radial-gradient(40% 45% at 72% 26%, rgba(47, 198, 221, .12), transparent 70%), radial-gradient(50% 50% at 50% 70%, rgba(157, 123, 255, .1), transparent 70%); }
.hx-hello { margin: 0; font: 760 clamp(56px, 8.6vw, 132px)/.95 var(--display); letter-spacing: -.055em; color: var(--ink); text-wrap: balance; opacity: 0; transform: translateY(16px); animation: hx-in 1s var(--ease) .1s forwards; }
.hx-what { margin: 24px auto 0; max-width: 620px; font: 450 clamp(17px, 1.45vw, 21px)/1.5 var(--sans); color: var(--ink2); text-wrap: balance; opacity: 0; animation: hx-in 1s var(--ease) .35s forwards; }
.hx-what b { color: var(--ink); font-weight: 600; }
@keyframes hx-in { to { opacity: 1; transform: none; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-stage { position: relative; width: min(680px, 100%); margin-top: 104px; opacity: 0; transform: translateY(20px); animation: hx-in 1.1s var(--ease) .55s forwards; }
.hx-light { position: absolute; left: 50%; top: 50%; width: min(1500px, 140vw); height: 760px; translate: -50% -50%; z-index: 0; pointer-events: none; }
/* The palette, as the app draws it. */
.jx { --t1: #ececee; --t2: #b4b4bc; --t3: #8e8e97; --line: #2f2f34; position: relative; z-index: 1; text-align: left; border-radius: 18px; background: #151517; color: var(--t1); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  box-shadow: 0 0 0 1px #3c3c42, 0 40px 90px -30px rgba(30, 14, 50, .55); }
.jx-jev { position: absolute; left: 34px; top: -78px; width: 100px; height: 100px; z-index: 2; cursor: pointer; filter: drop-shadow(0 10px 16px rgba(40, 20, 50, .25)); }
.jx-field { display: flex; align-items: center; gap: 4px; padding: 20px 22px; border-bottom: 1px solid var(--line); font-size: 21px; }
.jx-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--t1); font: inherit; caret-color: var(--pink); padding: 0; }
.jx-field input::placeholder { color: #6e6e76; }
.jx-field kbd { font: 500 12px -apple-system, system-ui, sans-serif; color: var(--t3); padding: 2px 7px; border-radius: 6px; background: #2c2c31; }
.jx-list { padding: 8px 0 4px; min-height: 172px; }
.jx-h { margin: 6px 22px; font-size: 12px; font-weight: 600; color: var(--t2); }
.jx-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: calc(100% - 16px); height: 42px; margin: 0 8px; padding: 0 14px; border: 0; border-radius: 9px; background: none; text-align: left; color: inherit; font: 14px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; }
.jx-r b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-r em { font-style: normal; font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.jx-r.sel, .jx-r:hover { background: rgba(236, 236, 238, .09); }
.jx-r i { width: 22px; height: 22px; border-radius: 28%; display: grid; place-items: center; background: color-mix(in srgb, var(--h) 22%, transparent); color: var(--h); }
.jx-r i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jx-done { margin: 6px 8px 0; padding: 14px; border-radius: 12px; background: #202023; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; animation: hx-in .5s var(--ease) both; opacity: 0; transform: translateY(6px); }
.jx-done i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }
.jx-done b { font-weight: 600; font-size: 15px; } .jx-done span { color: var(--t2); font-size: 13.5px; }
.jx-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 9px 18px 11px; border-top: 1px solid var(--line); font-size: 12px; color: var(--t2); }
.jx-foot kbd { margin-left: 5px; padding: 1px 6px; border-radius: 4px; background: #2c2c31; font: 500 11px -apple-system, system-ui, sans-serif; color: var(--t2); }
.hx-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 64px; opacity: 0; animation: hx-in 1s var(--ease) .8s forwards; }
.hx-get { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; background: var(--ink); color: #fff; font: 650 16px var(--sans); text-decoration: none; box-shadow: 0 16px 40px -14px rgba(23, 21, 31, .5); transition: transform .3s var(--spring); }
.hx-get:hover { transform: translateY(-2px); } .hx-get svg { width: 16px; height: 16px; }
.hx-fine { font: 500 14px var(--sans); color: var(--ink3); }
@media (max-width: 700px) {
  .hx { padding-top: 104px; } .hx-stage { margin-top: 84px; } .jx-field { font-size: 18px; padding: 16px 18px; } .jx-jev { width: 78px; height: 78px; top: -62px; left: 22px; }
  .jx-r em, .jx-field kbd { display: none; } .hx-light { height: 560px; }
}
@media (prefers-reduced-motion: reduce) { .hx-hello, .hx-what, .hx-stage, .hx-cta { animation: none; opacity: 1; transform: none; } }

/* ── One stage, a dock under it ───────────────────────────────────────── */
.pstage { padding: 180px var(--gutter) 40px; display: grid; justify-items: center; text-align: center; }
.st-title { margin: 0; max-width: 820px; }
.st-frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; margin-top: 64px; display: grid; }
.st-panel { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s .55s; }
.st-panel.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.st-panel > .feat-art { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 28px !important; aspect-ratio: auto !important; display: grid !important; place-items: center !important; box-shadow: 0 0 0 1px rgba(23, 21, 31, .06), 0 50px 100px -50px rgba(40, 20, 70, .45) !important; }
.st-dock { display: inline-flex; gap: 6px; margin-top: 34px; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(23, 21, 31, .07), 0 18px 40px -24px rgba(44, 36, 92, .3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.st-dock button { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 92px; padding: 12px 14px 14px; border: 0; border-radius: 16px; background: none; color: var(--ink3); font: 550 13px var(--sans); cursor: pointer; overflow: hidden; transition: background .3s, color .3s; }
.st-dock button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-dock button:hover { color: var(--ink); }
.st-dock button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgba(23, 21, 31, .06), 0 6px 16px -10px rgba(44, 36, 92, .35); }
.st-dock button i { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); opacity: 0; }
.st-dock button[aria-selected="true"] i { opacity: .7; }
.st-caps { display: grid; width: min(620px, 100%); margin-top: 30px; }
.st-cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .45s; }
.st-cap.on { opacity: 1; visibility: visible; transform: none; transition-delay: .08s; }
.st-cap h3 { margin: 0; font: 650 20px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.st-cap p { margin: 8px auto 0; max-width: 54ch; font: 450 16px/1.55 var(--sans); color: var(--ink2); }
.st-cap .more { margin-top: 14px; }
@media (max-width: 760px) {
  .st-frame { aspect-ratio: 4 / 5; } .st-dock { gap: 2px; padding: 4px; } .st-dock button { min-width: 0; padding: 10px 8px 12px; font-size: 11.5px; } .st-dock button svg { width: 20px; height: 20px; }
}

/* ── The rest, on the one ground ──────────────────────────────────────── */
/* Team: the room on daylight, its window lit from behind. */
.team { background: transparent; color: var(--ink); }
.team::before { display: none; }
.tm-head h2 { color: var(--ink) !important; }
.tm-head .sub { color: var(--ink2) !important; }
.tm-points li { border-top-color: var(--line); } .tm-points b { color: var(--ink); } .tm-points span { color: var(--ink2); }
.team .more { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.tm-win { box-shadow: 0 0 0 1px rgba(23, 21, 31, .1), 0 60px 120px -50px rgba(40, 20, 70, .5) !important; }
/* The phone on daylight. */
.pocket { background: transparent !important; }
/* Make it yours: a window onto the theme, not the whole width. */
.orb { margin: 160px max(var(--gutter), calc((100% - 1240px) / 2)) 0 !important; border-radius: 32px; height: min(820px, calc(100svh - 80px)) !important; min-height: 640px; box-shadow: 0 60px 120px -50px rgba(20, 30, 70, .55); }
/* The end on daylight. */
.end { background: transparent !important; }
.end h2 { font: 700 clamp(40px, 5vw, 72px)/1.02 var(--display) !important; }
/* Sections breathe alike. */
.pstage, .dayy, .rcx, .tidy, .wallsec, .team, .pocket, #private, #pricing, .faq { margin-top: 0; }
.sec { padding-top: 180px; }
.tm-lit { width: min(1180px, 100%); }
.tm-lit .tm-win { width: 100%; }
.pk-stage::before { background: var(--aura) !important; filter: blur(80px) !important; opacity: .45; width: 120% !important; }
.pk-phone.tilt { transform: perspective(1800px) rotateY(calc((1 - var(--in, 1)) * -18deg)) rotateX(calc((1 - var(--in, 1)) * 8deg)); transform-origin: 50% 50%; }

/* Titles beside a picture are a size down, so they stay two or three lines. */
.ty-side h2, .dayy h2, .faq h2, .pk-text h2 { font-size: clamp(28px, 2.5vw, 36px) !important; }
.hx-cta { margin-top: 150px; }
@media (max-width: 700px) { .hx-cta { margin-top: 110px; } }
.st-panel .feat-art > :not(canvas):not(.scn-c) { max-width: min(780px, 84%); }
.st-panel .cardshow { width: min(720px, 80%); }
.st-panel .learn-grid { width: min(640px, 84%); }
footer { background: transparent !important; color: var(--ink2) !important; border-top: 1px solid var(--line) !important; }
footer a { color: var(--ink2) !important; } footer a:hover { color: var(--ink) !important; }
.end { padding-bottom: 140px !important; }
.pstage, .hx { grid-template-columns: minmax(0, 1fr); }
.st-frame, .st-title, .st-caps { justify-self: center; }
.st-dock { justify-self: center; max-width: 100%; }
@media (max-width: 760px) { .st-frame { aspect-ratio: 1 / 1.05; } .st-panel .cardshow { width: 96%; } .st-panel .feat-art > :not(canvas):not(.scn-c) { max-width: 94%; } .st-panel > .feat-art { border-radius: 22px !important; } }

/* ── The first screen, round two: the page does what is said to it ───── */
.hx { min-height: 100svh; padding: 132px var(--gutter) 64px; align-content: center; color: var(--ink); transition: color .8s var(--ease); }
.hx::before { display: none; }
.hx-world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hx-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background .9s var(--ease);
  background: radial-gradient(60% 55% at 50% 45%, rgba(251, 248, 244, .9), rgba(251, 248, 244, .55) 60%, rgba(251, 248, 244, .25)), linear-gradient(180deg, rgba(251, 248, 244, .55), transparent 35%, transparent 75%, var(--paper)); }
.hx.night { color: #f4f1ff; }
.hx.night .hx-veil { background: radial-gradient(60% 55% at 50% 45%, rgba(8, 8, 18, .72), rgba(8, 8, 18, .45) 60%, rgba(8, 8, 18, .2)), linear-gradient(180deg, rgba(8, 8, 18, .5), transparent 35%, transparent 75%, var(--paper)); }
.hx-hello { font: 780 clamp(54px, 7.6vw, 116px)/.98 var(--display); letter-spacing: -.055em; color: inherit; }
.hx-what { margin-top: 22px; font: 500 clamp(18px, 1.5vw, 22px)/1.45 var(--sans); color: inherit; opacity: .78 !important; }
.hx.night .hx-what { opacity: .85 !important; }
.hx-stage { width: min(620px, 100%); margin-top: 92px; }
.hx-light { width: calc(100% + 400px); height: 460px; opacity: 0; transition: opacity .6s var(--ease); }
.hx-light.on { opacity: 1; }
.jx-field kbd { font-size: 13px; padding: 3px 9px; }
.jx-list { min-height: 0; padding: 0; }
.jx-done { margin: 8px; }
.hx-hint { margin: 16px 0 0; font: 500 14px var(--sans); color: inherit; opacity: .6; text-align: center; }
.hx-cta { margin-top: 56px; }
.hx.night .hx-fine { color: rgba(244, 241, 255, .7); }
.hx.night .hx-get { background: #fff; color: #111; }
@media (max-width: 700px) { .hx { padding-top: 110px; } .hx-stage { margin-top: 80px; } .hx-light { width: calc(100% + 120px); height: 340px; } .hx-cta { margin-top: 44px; } }

/* ── Leaving Raycast: one sentence, the setup flies in (raycast.js) ───── */
.rc2 { padding: 180px max(var(--gutter), calc((100% - 1240px) / 2)) 0; }
.rc2-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 72px) 56px; color: #fff; display: grid; justify-items: center; text-align: center;
  background: radial-gradient(70% 90% at 15% 10%, #ff7aac 0, transparent 60%), radial-gradient(60% 80% at 90% 20%, #8f6bff 0, transparent 60%), radial-gradient(70% 70% at 60% 110%, #ff9b6b 0, transparent 60%), linear-gradient(135deg, #e04f8c, #6b4be0);
  box-shadow: 0 60px 120px -60px rgba(160, 40, 110, .6); }
.rc2-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.2px); background-size: 18px 18px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.rc2-head h2 { margin: 0; font: 700 clamp(34px, 4.2vw, 60px)/1.02 var(--display); letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.rc2-head h2 span { color: rgba(255,255,255,.72); }
.rc2-head p { margin: 18px auto 0; max-width: 560px; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); color: rgba(255,255,255,.86); }
.rc2-stage { position: relative; width: min(1000px, 100%); margin-top: 56px; display: grid; grid-template-columns: minmax(0, .8fr) 90px minmax(0, 1.2fr); align-items: center; text-align: left; }
.rc2-from { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc2-from li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border-radius: 14px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 15px var(--sans);
  transition: transform .9s cubic-bezier(.6, 0, .2, 1), opacity .9s ease; transition-delay: calc(var(--i) * 140ms); }
.rc2-from i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #c2407f; }
.rc2-from svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rc2-from em { font-style: normal; font: 600 13px var(--sans); color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.rc2-stage.sent .rc2-from li { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
.rc2-beam { height: 2px; margin: 0 10px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.rc2-stage.typed .rc2-beam { transform: scaleX(1); }
.rc2-stage.landed .rc2-beam { opacity: 0; transition: opacity .5s; }
.rc2-pal { position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 40px 80px -30px rgba(40, 10, 60, .7) !important; transition: box-shadow .5s; }
.rc2-stage.sent:not(.landed) .rc2-pal { box-shadow: 0 0 0 2px #ffd1e3, 0 0 60px 6px rgba(255, 209, 227, .6), 0 40px 80px -30px rgba(40, 10, 60, .7) !important; }
.rc2-jev { position: absolute; left: 26px; top: -64px; width: 80px; height: 80px; z-index: 2; }
.rc2-pal .jx-field { gap: 0; }
.rc2-typed { color: #ececee; } .rc2-caret { width: 2px; height: 22px; margin: 0 auto 0 2px; background: #f0a6bd; animation: blink 1.1s steps(2) infinite; }
.rc2-out { padding: 6px 8px 10px; min-height: 340px; }
.rc2-into { margin: 8px 14px 6px; font: 600 12px -apple-system, system-ui, sans-serif; color: #b4b4bc; opacity: 0; transition: opacity .4s; }
.rc2-out ul { list-style: none; margin: 0; padding: 0; display: grid; }
.rc2-out li { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 9px; font: 14px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(.3s + var(--i) * 140ms); }
.rc2-out li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }
.rc2-out li b { font-weight: 600; color: #ececee; } .rc2-out li span { color: #8e8e97; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc2-undo { margin: 10px 14px 0; font: 13px -apple-system, system-ui, sans-serif; color: #b4b4bc; opacity: 0; transition: opacity .5s 1.6s; }
.rc2-stage.sent .rc2-into, .rc2-stage.sent .rc2-out li, .rc2-stage.landed .rc2-undo { opacity: 1; transform: none; }
.rc2-more { margin-top: 40px; color: #fff; font: 600 16px var(--sans); text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.5); padding-bottom: 3px; }
.rc2-more i { font-style: normal; }
@media (max-width: 860px) {
  .rc2-stage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rc2-from { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc2-from li { font-size: 13.5px; padding: 8px 10px 8px 8px; } .rc2-beam { display: none; }
  .rc2-pal { margin-top: 70px; } .rc2-out li span { display: none; } .rc2-out { min-height: 0; }
}
.rc2-stage.landed .rc2-from li { transform: none; opacity: .55; transition: transform .7s var(--ease), opacity .7s ease; transition-delay: calc(.4s + var(--i) * 60ms); }
.rc2-stage.landed .rc2-from em::after { content: " ✓"; }

/* ── All your agents: a night panel, one asks, Allow (agents.js) ──────── */
.ag2 { padding: 180px max(var(--gutter), calc((100% - 1240px) / 2)) 0; }
.ag2-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 64px) 56px; color: #fff; display: grid; justify-items: center; text-align: center;
  background: radial-gradient(60% 70% at 20% 0%, rgba(61, 220, 132, .22), transparent 60%), radial-gradient(60% 70% at 85% 10%, rgba(47, 198, 221, .25), transparent 60%), radial-gradient(70% 60% at 50% 110%, rgba(157, 123, 255, .35), transparent 60%), linear-gradient(180deg, #0c1024, #121634);
  box-shadow: 0 60px 120px -60px rgba(20, 30, 80, .7); }
.ag2-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.7) .8px, transparent 1px), radial-gradient(rgba(255,255,255,.45) .6px, transparent .9px); background-size: 140px 120px, 90px 80px; background-position: 0 0, 40px 30px; mask-image: linear-gradient(180deg, #000, transparent 60%); }
.ag2-head h2 { margin: 0; font: 700 clamp(34px, 4.2vw, 60px)/1.02 var(--display); letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.ag2-head h2 span { color: rgba(255,255,255,.6); }
.ag2-head p { margin: 18px auto 0; max-width: 580px; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); color: rgba(255,255,255,.75); }
.ag2-stage { position: relative; width: min(1060px, 100%); height: 520px; margin-top: 56px; text-align: left; }
.ag2-cards { position: absolute; left: 0; top: 10px; width: 46%; display: grid; gap: 14px; }
.ag2-card { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; transition: box-shadow .5s, background .5s; }
.ag2-card.c2 { margin-left: 34px; opacity: .85; } .ag2-card.c3 { margin-left: 12px; opacity: .7; }
.ag2-top { display: flex; align-items: center; gap: 10px; } .ag2-top b { font-size: 15px; font-weight: 600; } .ag2-top em { margin-left: auto; font: 600 12px -apple-system, system-ui, sans-serif; font-style: normal; color: rgba(255,255,255,.6); }
.ag2-card > span { display: block; margin: 3px 0 0 18px; font-size: 13px; color: rgba(255,255,255,.55); }
.ag2-step { margin: 10px 0 0 18px; font: 500 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: rgba(255,255,255,.75); } .ag2-step u { text-decoration: none; color: #3ddc84; }
.ag2-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffbe57; flex: none; display: inline-block; } .ag2-dot.w { background: #3ddc84; } .ag2-dot.r { background: #9d7bff; }
.ag2-stage.asking:not(.allowed) .c1 { background: rgba(255, 190, 87, .12); box-shadow: inset 0 0 0 1px rgba(255, 190, 87, .55), 0 0 40px -10px rgba(255, 190, 87, .5); }
.ag2-stage.asking:not(.allowed) .c1 .ag2-state { color: #ffbe57; }
.ag2-stage.allowed .c1 .ag2-dot { background: #3ddc84; }
.ag2-pal { position: absolute !important; left: 40%; top: 120px; width: 44%; z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 50px 100px -30px rgba(0,0,0,.8) !important; transform: translateY(16px); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.ag2-stage.asking .ag2-pal { transform: none; opacity: 1; }
.ag2-jev { position: absolute; left: 24px; top: -60px; width: 76px; height: 76px; }
.ag2-ask { padding: 20px 22px 18px; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ag2-who { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #b4b4bc; }
.ag2-q { margin: 12px 0 0; font-size: 19px; font-weight: 600; color: #ececee; } .ag2-q code { font: 500 16px ui-monospace, "SF Mono", Menlo, monospace; color: #ffd1e3; }
.ag2-why { margin: 6px 0 0; font-size: 14px; color: #8e8e97; }
.ag2-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ag2-btns span { padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; background: #2c2c31; color: #ececee; transition: transform .15s, filter .15s; }
.ag2-btns .ag2-yes { background: #ececee; color: #111; } .ag2-yes kbd { margin-left: 6px; font: 600 11px -apple-system, system-ui, sans-serif; opacity: .6; }
.ag2-stage.press .ag2-yes { transform: scale(.94); filter: brightness(.85); }
.ag2-done { display: none; align-items: center; gap: 12px; margin: 0 10px 10px; padding: 12px 14px; border-radius: 12px; background: #202023; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ag2-done i { width: 24px; height: 24px; border-radius: 50%; flex: none; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }
.ag2-done b { display: block; font-size: 15px; color: #ececee; } .ag2-done span { font-size: 13px; color: #8e8e97; }
.ag2-stage.allowed .ag2-btns { display: none; } .ag2-stage.allowed .ag2-done { display: flex; animation: hx-in .5s var(--ease) both; }
.ag2-phone { position: absolute; right: 0; top: -10px; width: 210px; margin: 0; transform: perspective(1400px) rotateY(-14deg) rotateZ(2deg); transform-origin: 100% 50%; }
.ag2-phone img { width: 100%; height: auto; display: block; border-radius: 30px; box-shadow: 0 0 0 6px #0b0b0f, 0 0 0 7px rgba(255,255,255,.15), 0 40px 80px -30px rgba(0,0,0,.8); }
.ag2-phone figcaption { margin-top: 18px; text-align: center; font: 500 13px var(--sans); color: rgba(255,255,255,.6); }
.ag2-more { margin-top: 30px; color: #fff; font: 600 16px var(--sans); text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.4); padding-bottom: 3px; } .ag2-more i { font-style: normal; }
@media (max-width: 900px) {
  .ag2-stage { height: auto; display: grid; gap: 22px; } .ag2-cards { position: static; width: 100%; } .ag2-card.c2, .ag2-card.c3 { margin-left: 0; }
  .ag2-pal { position: relative !important; left: auto; top: auto; width: 100%; margin-top: 60px; } .ag2-phone { display: none; }
}
.ag2-pal { left: 36% !important; width: 42% !important; }

/* ── The phone, centred and lit, its other screens around it ─────────── */
.pk { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; }
.pk-text { display: contents; }
.pk-text .eyebrow { display: none; }
.pk-text h2 { order: 1; text-align: center !important; margin-inline: auto; }
.pk-text .sub { order: 2; text-align: center !important; margin: 16px auto 0 !important; max-width: 520px; }
.pk-stage { order: 3; margin-top: 70px; width: min(1100px, 100%); }
.pk-places { order: 4; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; max-width: none !important; margin-top: 34px; }
.pk-places button { padding: 10px 18px !important; border-radius: 999px !important; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pk-places button span { display: none; } .pk-places button b { font-size: 15px !important; }
.pk-places button::before { display: none; }
.pk-places button[aria-pressed="true"] { background: var(--ink) !important; } .pk-places button[aria-pressed="true"] b { color: #fff !important; }
.pk-fine { order: 5; text-align: center; margin: 22px auto 0 !important; }
.pk-float { position: absolute; top: 50%; width: 200px; height: auto; border-radius: 28px; box-shadow: 0 0 0 5px #0b0b0f, 0 30px 60px -24px rgba(30, 20, 60, .5); pointer-events: none; transition: transform .2s linear; }
.pk-float.f1 { left: 4%; translate: 0 -78%; transform: rotate(-7deg) scale(calc(.82 + var(--in, 1) * .1)); filter: blur(1.5px); opacity: .75; }
.pk-float.f2 { left: 17%; translate: 0 -12%; transform: rotate(4deg) scale(calc(.9 + var(--in, 1) * .08)); opacity: .95; z-index: 1; }
.pk-float.f3 { right: 17%; translate: 0 -82%; transform: rotate(5deg) scale(calc(.9 + var(--in, 1) * .08)); opacity: .95; z-index: 1; }
.pk-float.f4 { right: 4%; translate: 0 -14%; transform: rotate(-4deg) scale(calc(.82 + var(--in, 1) * .1)); filter: blur(1.5px); opacity: .75; }
.pk-phone { position: relative; z-index: 2; }
@media (max-width: 900px) { .pk-float { display: none; } }

/* ── Make it yours: a calm ring, everyone smiling ────────────────────── */
.orb-name span { display: none; }
.orb-name b { font-size: 22px; }

/* ── The end, running on into the footer: one warm light ─────────────── */
.end { position: relative; margin-top: 160px; padding: 150px var(--gutter) 90px !important; display: grid; justify-items: center; text-align: center;
  background: linear-gradient(180deg, var(--paper) 0%, #fde7df 30%, #f9d4e4 62%, #e6d6fb 100%) !important; }
.end h2 { margin: 0; font: 760 clamp(44px, 6vw, 88px)/1 var(--display) !important; letter-spacing: -.05em; color: var(--ink); text-wrap: balance; }
.end .sub { margin: 20px auto 0 !important; font: 500 clamp(17px, 1.4vw, 20px)/1.5 var(--sans) !important; color: var(--ink2) !important; }
.end-pal { width: min(620px, 100%); margin-top: 110px; }
.end-pal .jx-field input::placeholder { color: #8e8e97; }
.end-jev { position: absolute; left: 34px; top: -76px; width: 96px; height: 96px; z-index: 2; margin: 0 !important; --s: 96px; }
.end-get { display: inline-flex; align-items: center; gap: 10px; margin-top: 44px; padding: 16px 28px; border-radius: 999px; background: var(--ink) !important; color: #fff !important; font: 650 17px var(--sans); text-decoration: none; box-shadow: 0 18px 40px -16px rgba(60, 20, 70, .5); }
.end-get svg { width: 17px; height: 17px; }
.end .install-steps { margin-top: 30px; }
footer { background: #e6d6fb !important; border-top: 0 !important; color: #3a3550 !important; padding-top: 40px !important; }
footer a { color: #3a3550 !important; } footer a:hover { color: var(--ink) !important; }
footer .foot-col b { color: #6b6585 !important; }
.foot-top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .foot-brand { grid-column: 1 / -1; } }

/* ── Every palette as the app draws it: a thin light rim, the panel under it ── */
.jx, .jp, .rc2-pal, .ag2-pal, .end-pal { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 .5px rgba(0, 0, 0, .55), 0 30px 70px -28px rgba(20, 12, 40, .55) !important; border: 0 !important; }
.jx { border-radius: 18px; }
footer .foot-get, footer a.get { color: #fff !important; background: var(--ink) !important; }
.end .end-jev { width: 96px !important; height: 96px !important; left: 34px !important; top: -76px !important; }

/* ⌘ Space, as on a Mac: the keys, then the palette. */
.hx-stage .jx { transition: opacity .28s var(--ease), transform .4s var(--spring); }
.hx-stage.closed .jx { opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
.hx-keys { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; gap: 12px; translate: -50% -50%; opacity: 0; transform: scale(.94); transition: opacity .3s var(--ease), transform .4s var(--spring); pointer-events: none; }
.hx-stage.closed .hx-keys { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.hx-keys kbd { display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 18px; border-radius: 16px; font: 500 30px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(#fff, #f1eef0); box-shadow: 0 0 0 1px rgba(23, 21, 31, .1), 0 6px 0 rgba(23, 21, 31, .08), 0 18px 30px -14px rgba(40, 20, 60, .35); transition: transform .12s, box-shadow .12s; }
.hx-keys kbd.sp { min-width: 260px; font-size: 17px; font-weight: 500; color: var(--ink2); }
.hx-keys.press kbd { transform: translateY(5px); box-shadow: 0 0 0 1px rgba(23, 21, 31, .12), 0 1px 0 rgba(23, 21, 31, .08), 0 8px 16px -10px rgba(40, 20, 60, .35); }
.hx.night .hx-keys kbd { background: linear-gradient(#2a2a31, #1d1d22); color: #ececee; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 0 rgba(0,0,0,.4), 0 18px 30px -14px rgba(0,0,0,.6); }
.hx-hint kbd { font: 600 12px -apple-system, system-ui, sans-serif; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(23, 21, 31, .12); }
.hx.night .hx-hint kbd { background: rgba(255,255,255,.12); }
@media (max-width: 700px) { .hx-keys kbd { min-width: 60px; height: 60px; font-size: 24px; } .hx-keys kbd.sp { min-width: 170px; } }
.hx-stage { height: 214px; }
.hx-stage .jx { position: absolute; left: 0; right: 0; top: 0; }
.hx-stage .hx-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.hx-keys { top: 34px; }
.hx-cta { margin-top: 40px; }
@media (max-width: 700px) { .hx-stage { height: 250px; } .hx-hint { font-size: 13px; } }
@media (max-width: 700px) { .hx-veil { background: radial-gradient(90% 60% at 50% 40%, rgba(251, 248, 244, .92), rgba(251, 248, 244, .7) 70%, rgba(251, 248, 244, .45)), linear-gradient(180deg, rgba(251, 248, 244, .6), transparent 40%, transparent 75%, var(--paper)) !important; } }

/* ── The first screen, simply: one line, one palette, one button ─────── */
.hx { background: var(--paper); padding: 140px var(--gutter) 90px; }
.hx-stage { height: 230px; margin-top: 110px; }
.hx-stage::before { content: ""; position: absolute; left: 50%; top: 40px; width: 140%; height: 320px; translate: -50% -50%; z-index: -1; border-radius: 50%; background: var(--aura); filter: blur(90px); opacity: .28; pointer-events: none; }
.hx .jx-r { grid-template-columns: 22px auto minmax(0, 1fr) auto; cursor: default; }
.hx .jx-r span { color: #b4b4bc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.hx .jx-r i svg { width: 14px; height: 14px; }
.hx .jx-list { padding: 8px 0; }
.hx .jx-list:empty { padding: 0; }
.hx-cta { margin-top: 30px; }
.hx-what { opacity: 1 !important; color: var(--ink2) !important; }

/* Jevie sits on every palette as the app seats him (CosmicMascot.swift):
   64 of 720 points wide, 22 in from the left, his bottom 50/172 over the edge. */
.jx-jev, .end-jev, .rc2-jev, .ag2-jev, .end .end-jev { left: 3.06% !important; width: 8.9% !important; min-width: 40px; height: auto !important; aspect-ratio: 1; top: auto !important; bottom: 100%; transform: translateY(29.07%); filter: none !important; }
.jp-jev { left: calc(22 * var(--pt)); width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); top: calc(-45.4 * var(--pt)); }
.hx-light { transition: opacity .35s var(--ease); }
.hx-stage.closed .hx-light { opacity: 0 !important; }
.end-pal .jx-field { border-bottom: 0 !important; }

/* ── The first screen, as raycast.com's: one object of light, the words, the button ── */
.hx { min-height: auto; padding: 170px var(--gutter) 40px; display: grid; justify-items: center; align-content: start; background: var(--paper); overflow: visible; }
.hx-object { position: relative; width: min(1000px, 90vw); aspect-ratio: 2.15 / 1; display: grid; place-items: center; isolation: isolate; }
.hx .hx-light { position: absolute; left: 50%; top: 50%; width: calc(100% + 420px); height: calc(100% + 420px); translate: -50% -50%; z-index: -1; opacity: 0; transition: none; animation: hx-glow 1.8s ease .05s forwards; pointer-events: none; }
@keyframes hx-glow { to { opacity: 1; } }
.hx-jev { position: absolute; left: 7%; bottom: 100%; width: clamp(72px, 9vw, 116px); aspect-ratio: 1; transform: translateY(29.07%); z-index: 2; cursor: pointer; opacity: 0; animation: hx-glow .6s ease 1.1s forwards; }
.hx-copy { display: grid; justify-items: center; gap: 22px; padding: 0 8%; text-align: center; }
.hx .hx-hello { margin: 0; font: 650 clamp(40px, 4.6vw, 66px)/1.08 var(--display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.hx .hx-what { margin: 0; max-width: 520px; font: 450 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); color: var(--ink2) !important; text-wrap: balance; }
.hx-up, .hx-up2 { opacity: 0; transform: translateY(20px); animation: hx-rise 1s ease .3s forwards !important; }
.hx-up2 { animation-delay: 1.1s !important; }
@keyframes hx-rise { to { opacity: 1; transform: none; } }
.hx .hx-cta { margin-top: 90px; display: grid; justify-items: center; gap: 14px; }
.hx .hx-fine { font: 500 13px var(--mono); color: var(--ink3); letter-spacing: .01em; }
@media (max-width: 700px) {
  .hx { padding-top: 140px; } .hx-object { aspect-ratio: .9 / 1; width: 88vw; } .hx .hx-light { width: calc(100% + 160px); height: calc(100% + 160px); }
  .hx-copy { padding: 0 9%; } .hx .hx-cta { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .hx-up, .hx-up2, .hx .hx-light, .hx-jev { animation: none !important; opacity: 1; transform: none; } .hx-jev { transform: translateY(29.07%); } }

/* ── The stage's first tab: ⌘ Space, then say it (ask.js) ────────────── */
.st-ask { background: radial-gradient(60% 70% at 25% 20%, #ffe1ec, transparent 70%), radial-gradient(60% 70% at 80% 30%, #e3dcff, transparent 70%), radial-gradient(70% 70% at 50% 100%, #dff3f6, transparent 70%), #fbf6f3 !important; }
.ask-stage { position: relative; width: min(620px, 82%); height: 230px; }
.ask-stage .jx { position: absolute; left: 0; right: 0; top: 0; transition: opacity .28s var(--ease), transform .4s var(--spring); }
.ask-stage.closed .jx { opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
.ask-stage .hx-keys { top: 34px; }
.ask-stage.closed .hx-keys { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.ask-light { position: absolute; left: 50%; top: 50%; width: calc(100% + 400px); height: 460px; translate: -50% -50%; z-index: 0; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.ask-light.on { opacity: 1; } .ask-stage.closed .ask-light { opacity: 0 !important; }
.st-ask .jx-r { grid-template-columns: 22px auto minmax(0, 1fr) auto; cursor: default; }
.st-ask .jx-r span { color: #b4b4bc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.st-ask .jx-r i svg { width: 14px; height: 14px; }
.st-ask .jx-list { padding: 8px 0; } .st-ask .jx-list:empty { padding: 0; }
@media (max-width: 760px) { .ask-stage { width: 92%; } .st-ask .jx-r em { display: none; } }
.ask-stage { height: 130px; }
@media (max-width: 700px) { .hx .hx-light { width: calc(100% + 120px); height: calc(100% + 300px); } .hx .hx-cta { margin-top: 84px; } .hx-object { aspect-ratio: .95 / 1; } }

/* ── The first screen's object: a world drawn in letters ─────────────── */
.hx-object { width: min(1180px, 94vw); aspect-ratio: 2.3 / 1; }
.hx .hx-world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
  opacity: 0; animation: hx-glow 1.6s ease .05s forwards; }
.hx-copy { position: relative; padding: 0 6%; }
.hx-copy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76%; height: 92%; translate: -50% -50%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(251, 248, 244, .94), rgba(251, 248, 244, .78) 55%, rgba(251, 248, 244, 0)); }
.hx .hx-hello { font-size: clamp(42px, 5vw, 72px); }
.hx-perch { position: relative; white-space: nowrap; }
.hx .hx-jev { position: absolute; left: 50%; bottom: .8em; width: 1.15em; height: 1.15em; translate: -50% 0; transform: none; animation: hx-glow .5s ease 1.4s forwards; }
@media (max-width: 700px) { .hx-object { aspect-ratio: .85 / 1; } .hx-copy::before { width: 100%; } }
.hx-copy::before { width: 82%; height: 100%; background: radial-gradient(closest-side, rgba(251, 248, 244, .97), rgba(251, 248, 244, .85) 55%, rgba(251, 248, 244, 0)); }
@media (max-width: 700px) { .hx .hx-jev { left: auto; right: -1em; bottom: .05em; width: .95em; height: .95em; translate: 0 0; } .hx-perch { margin-right: .9em; } }
/* No light round any palette; the field's hairline only when a row is under it. */
.ask-light, .hx-light { display: none !important; }
.rc2-stage.sent:not(.landed) .rc2-pal { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 .5px rgba(0, 0, 0, .55), 0 30px 70px -28px rgba(20, 12, 40, .55) !important; }
.st-ask .jx-field, .hx .jx-field { border-bottom: 0; }
.st-ask .jx-list:not(:empty) { border-top: 1px solid var(--line, #2f2f34); }
.st-ask .jx { --line: #2f2f34; }
/* No rainbow halos anywhere: products sit on a plain soft shadow. */
.lit::before, .pk-stage::before, .hx-stage::before { display: none !important; }

/* ── The first screen: Jevie, large and alive, the words under him ───── */
.hx { padding: 150px var(--gutter) 40px; display: grid; justify-items: center; text-align: center; background: var(--paper); overflow: hidden; }
.hx-object, .hx-world, .hx-copy::before { display: none !important; }
.hx-me { position: relative; width: min(300px, 62vw); aspect-ratio: 1; }
.hx-big { position: absolute; inset: 0; cursor: pointer; z-index: 2; }
.hx-floor { position: absolute; left: 22%; right: 22%; bottom: 7%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 20, 50, .18), rgba(40, 20, 50, 0)); z-index: 1; }
/* What is said to him, and what he did: two tidy bubbles beside him. */
.hx-said, .hx-done { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 18px; white-space: nowrap; font: 500 15px var(--sans);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s var(--ease), transform .45s var(--spring); pointer-events: none; }
.hx-said { right: 86%; top: 16%; border-bottom-right-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(23, 21, 31, .08), 0 12px 30px -16px rgba(40, 20, 60, .35); }
.hx-said::before { content: "“"; color: var(--ink3); margin-right: -6px; } .hx-said::after { content: "”"; color: var(--ink3); margin-left: -6px; }
.hx-done { left: 84%; top: 46%; border-bottom-left-radius: 6px; background: var(--ink); color: #fff; }
.hx-done i { width: 18px; height: 18px; border-radius: 50%; flex: none; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }
.hx-said.in, .hx-done.in { opacity: 1; transform: none; }
.hx .hx-hello { margin: 18px 0 0; font: 700 clamp(44px, 5.4vw, 80px)/1.02 var(--display); letter-spacing: -.045em; }
.hx .hx-what { margin: 20px auto 0; }
.hx .hx-cta { margin-top: 40px; }
.hx-up { animation-delay: .35s !important; } .hx-up2 { animation-delay: .7s !important; }
@media (max-width: 760px) {
  .hx { padding-top: 120px; } .hx-me { width: 56vw; }
  .hx-said { right: auto; left: 50%; top: -14%; translate: -50% 0; font-size: 13.5px; }
  .hx-done { left: 50%; top: auto; bottom: -6%; translate: -50% 0; font-size: 13.5px; }
}
.hx-floor { bottom: 21%; left: 26%; right: 26%; height: 7%; background: radial-gradient(closest-side, rgba(40, 20, 50, .22), rgba(40, 20, 50, 0)); }
.hx-said::before, .hx-said::after { content: none; }
.hx-me { margin-bottom: -48px; }
@media (max-width: 760px) {
  .hx-done { top: -14%; bottom: auto; }
  .hx-me:has(.hx-done.in) .hx-said { opacity: 0; transform: translateY(-6px) scale(.96); }
  .hx-me { margin-bottom: -30px; }
}

/* ── The first screen: a dawn sky, the top of a Mac, Jevie sitting on it ── */
.hx { position: relative; min-height: 100svh; padding: 150px var(--gutter) 0; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; align-content: start; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #fbf7f2 0%, #fcefe8 30%, #fadbe2 58%, #eedcf6 80%, #dcdcfa 100%) !important; }
.hx .hx-hello { margin: 0; }
.hx .hx-cta { margin-top: 36px; }
.hx .hx-fine { color: #6b6378; }
.hx-mac { position: relative; align-self: end; width: min(1080px, 92vw); margin-top: 120px; }
.hx-screen { position: relative; height: clamp(220px, 30vh, 300px); padding: 14px 14px 0; border-radius: 28px 28px 0 0; background: #0f0f12; box-shadow: inset 0 0 0 1.5px #2b2b31, 0 -20px 60px -30px rgba(60, 30, 80, .35); }
.hx-screen::before { content: ""; position: absolute; inset: 14px 14px 0; border-radius: 16px 16px 0 0;
  background: radial-gradient(80% 120% at 15% 110%, #ff9fc2 0, transparent 60%), radial-gradient(70% 120% at 85% 110%, #8f9bff 0, transparent 60%), linear-gradient(180deg, #4b6fd8, #8db1f0 70%, #c9b6ef); }
.hx-menu { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; height: 26px; padding: 0 16px; border-radius: 16px 16px 0 0; color: #fff; font: 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: rgba(20, 30, 70, .22); }
.hx-menu svg { width: 13px; fill: #fff; } .hx-menu b { font-weight: 700; } .hx-menu em { margin-left: auto; font-style: normal; }
/* Jevie on the Mac's top edge, his mitts over it (CosmicMascot.swift's 50/172). */
.hx-me { position: absolute; left: 50%; bottom: 100%; width: clamp(120px, 13vw, 170px); aspect-ratio: 1; translate: -50% 29.07%; margin: 0; z-index: 2; }
.hx-big { position: absolute; inset: 0; }
.hx-floor { display: none; }
.hx-said { right: 108%; top: 4%; } .hx-done { left: 108%; top: 26%; }
@media (max-width: 760px) {
  .hx { padding-top: 120px; } .hx-mac { margin-top: 150px; } .hx-me { width: 120px; }
  .hx-said, .hx-done { top: -62%; right: auto; left: 50%; translate: -50% 0; }
  .hx-me:has(.hx-done.in) .hx-said { opacity: 0; }
  .hx-menu span, .hx-menu em { display: none; }
}
@media (max-width: 760px) { .hx-said, .hx-done { top: -44%; font-size: 14px; } .hx-mac { margin-top: 120px; } .hx-screen { height: 200px; } }

/* ── The sky wears the Mac's living theme ────────────────────────────── */
.hx { background: var(--paper) !important; isolation: isolate; }
.hx-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hx-sky i.on { opacity: 1; }
.hx-sky [data-t="sakura"] { background: linear-gradient(180deg, #fbf7f2 0%, #fcefe8 30%, #fadbe2 58%, #eedcf6 80%, #dcdcfa 100%); }
.hx-sky [data-t="lagoon"] { background: linear-gradient(180deg, #f8fbfa 0%, #e9f6f4 30%, #d2eef0 58%, #c9e3f6 80%, #c4d6f8 100%); }
.hx-sky [data-t="dunes"] { background: linear-gradient(180deg, #fcf8f2 0%, #fcefdf 30%, #fadfc4 58%, #f6cdb2 80%, #efc0b4 100%); }
.hx-sky [data-t="koi"] { background: linear-gradient(180deg, #f8faf6 0%, #ecf4ea 30%, #d9ecdf 58%, #cfe4e4 80%, #c9dbe8 100%); }
/* The screen shows the theme itself, under the menu bar. */
.hx-screen::before { display: none; }
.hx-wall { position: absolute; left: 14px; right: 14px; top: 14px; bottom: 0; width: calc(100% - 28px); height: calc(100% - 14px); border-radius: 16px 16px 0 0; display: block; background: #12131a; }
.hx-menu { background: rgba(10, 12, 24, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ── The stage fits one screen: title, a shorter frame, the dock, the caption ── */
.pstage { padding: 110px var(--gutter) 30px; }
.pstage .st-title { font-size: clamp(28px, 2.6vw, 38px) !important; }
.st-frame { aspect-ratio: auto !important; height: min(520px, calc(100svh - 360px)); min-height: 360px; margin-top: 36px !important; }
.st-dock { margin-top: 20px !important; }
.st-caps { margin-top: 18px !important; }
.st-cap p { margin-top: 4px !important; }
.st-cap .more { margin-top: 8px !important; }
/* Ask: a small Mac desktop; what is said happens on it. */
.st-ask { position: relative; overflow: hidden; background: #12131a !important; }
.ask-menu { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 16px; height: 28px; padding: 0 18px; color: #fff; font: 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: rgba(10, 12, 24, .3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .6s; }
.ask-menu svg { width: 12px; fill: #fff; } .ask-menu b { font-weight: 700; } .ask-menu em { margin-left: auto; font-style: normal; }
.ask-stage { z-index: 2; }
/* The notification, as macOS slides one in at the top right. */
.ask-note { position: absolute; right: 16px; top: 40px; z-index: 4; width: 340px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px; text-align: left;
  background: rgba(246, 246, 248, .86); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4), inset 0 0 0 .5px rgba(255,255,255,.6);
  font: 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #1d1d1f; transform: translateX(120%); transition: transform .55s var(--spring); }
.ask-note i { width: 38px; height: 38px; border-radius: 9px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='7' r='2.2' fill='%23ff9f0a'/%3E%3Ccircle cx='6' cy='12' r='2.2' fill='%230a84ff'/%3E%3Ccircle cx='6' cy='17' r='2.2' fill='%2330d158'/%3E%3Cpath d='M10.5 7h8M10.5 12h8M10.5 17h8' stroke='%23c7c7cc' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }
.ask-note b { display: block; font-weight: 600; } .ask-note span { color: #3c3c43; } .ask-note time { align-self: start; color: #8e8e93; font-size: 12px; }
.st-ask.note .ask-note { transform: none; }
/* Dark mode: the whole desktop goes to night. */
.ask-night { position: absolute; inset: 0; z-index: 1; background: rgba(8, 10, 24, .62); opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.st-ask.night .ask-night { opacity: 1; } .st-ask.night .ask-menu { background: rgba(0, 0, 0, .55); }
@media (max-width: 760px) { .st-frame { height: 440px; } .ask-note { width: calc(100% - 32px); } .ask-menu span { display: none; } }

/* ── Leaving Raycast, calmer: one light card, one screen ─────────────── */
.rc2 { padding-top: 120px !important; }
.rc2-panel { background: #fff !important; color: var(--ink) !important; box-shadow: 0 0 0 1px rgba(23, 21, 31, .07), 0 40px 80px -50px rgba(40, 20, 70, .35) !important;
  padding: clamp(40px, 4.5vw, 64px) clamp(20px, 4.5vw, 64px) !important; display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; justify-items: stretch !important; text-align: left !important; }
.rc2-panel::after { display: none; }
.rc2-head h2 { color: var(--ink) !important; font-size: clamp(30px, 3.2vw, 46px) !important; }
.rc2-head h2 span { color: var(--ink3) !important; }
.rc2-head p { margin: 16px 0 0 !important; color: var(--ink2) !important; max-width: 420px; }
.rc2-more { grid-column: 1; margin-top: 0 !important; justify-self: start; color: var(--ink) !important; border-color: color-mix(in srgb, var(--ink) 25%, transparent) !important; }
.rc2-stage { grid-column: 2; grid-row: 1 / span 2; width: 100% !important; margin: 0 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
/* What comes over: chips in a loose cloud above the palette, pulled into it. */
.rc2-from { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; margin-bottom: 70px !important; }
.rc2-from li { grid-template-columns: 22px auto auto !important; gap: 8px !important; padding: 6px 12px 6px 6px !important; border-radius: 999px !important; background: var(--paper) !important; box-shadow: 0 0 0 1px rgba(23, 21, 31, .08) !important; backdrop-filter: none !important; font-size: 13.5px !important; color: var(--ink); }
.rc2-from i { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--ink) !important; color: #fff !important; }
.rc2-from svg { width: 13px !important; height: 13px !important; }
.rc2-from em { color: var(--ink3) !important; }
.rc2-beam { display: none !important; }
.rc2-out { min-height: 0 !important; }
.rc2-out ul { grid-template-columns: 1fr 1fr; column-gap: 4px; }
.rc2-out li { height: 34px !important; padding: 0 10px !important; } .rc2-out li span { display: none; }
.rc2-into, .rc2-undo { margin-left: 12px !important; }
@media (max-width: 900px) { .rc2-panel { grid-template-columns: minmax(0, 1fr) !important; } .rc2-stage { grid-column: 1; grid-row: auto; } .rc2-more { grid-row: auto; } .rc2-from { margin-bottom: 60px !important; } }
.st-ask > .ask-menu, .st-ask > .ask-night { max-width: none !important; }
.rc2-head h2 span { display: block; }
.rc2-head .rc2-more { display: inline-block; margin-top: 26px !important; }
.rc2-stage { grid-row: 1 !important; } .rc2-head { grid-row: 1; grid-column: 1; align-self: center; }
@media (max-width: 900px) { .rc2-head { grid-row: 1; } .rc2-stage { grid-row: 2 !important; grid-column: 1 !important; } }
.st-frame { overflow: hidden; border-radius: 28px; grid-template-rows: minmax(0, 1fr); }
.st-panel { min-height: 0; height: 100%; }
@media (max-width: 760px) { .st-frame { height: 460px !important; border-radius: 22px; } .rc2-from li { font-size: 12.5px !important; } .rc2-from { margin-bottom: 56px !important; } }
@media (max-width: 760px) { .st-ask > .ask-note { left: 12px; right: 12px; width: auto !important; max-width: none !important; } }

/* ══ One system (31 October 2026, polish pass) ═══════════════════════════
   Every section title one size and one shape: a sentence, its second half
   quieter. Sections the same distance apart. Pinned stories short. */
.w2-title, .st-title, .dayy h2, .rc2-head h2, .ty-side h2, .ag2-head h2, .tm-head h2, .pk-text h2, .orb-head h2, #private h2, #pricing h2, .faq h2, .end h2 {
  font: 700 clamp(32px, 3.4vw, 48px)/1.08 var(--display) !important; letter-spacing: -.04em !important; text-wrap: balance; text-shadow: none !important; }
.w2-title span, .st-title > span, .dayy h2 > span, .rc2-head h2 span, .ty-side h2 > span, .tm-head h2 > span, .pk-text h2 > span, #private h2 > span, #pricing h2 > span, .faq h2 > span, .end h2 > span { color: var(--ink3) !important; }
.ag2-head h2 span, .orb-head h2 span { color: rgba(255, 255, 255, .62) !important; }
.end h2 { font-size: clamp(38px, 4.4vw, 60px) !important; }
/* The same air between every section. */
.pstage, .rc2, .ag2, .team, .pocket, #private, #pricing, .faq, .end { padding-top: 150px !important; margin-top: 0 !important; }
.works { padding-top: 90px !important; }
.orb { margin-top: 150px !important; }
.team { padding-bottom: 0 !important; }
.pocket { padding-bottom: 0 !important; }
/* Pinned stories, shorter: a little scrolling, never a slog. */
.why2 { height: 210vh !important; height: 210svh !important; }
.dayy { height: calc(100svh + 10 * 20svh) !important; margin-top: 40px; }
.tidy { height: calc(100svh + 7 * 30svh) !important; margin-top: 60px !important; }
.ty-side h2 { margin-bottom: 22px !important; }
/* The agents' panel in the palette's own dark, not navy. */
.ag2-panel { background: radial-gradient(60% 70% at 15% 0%, rgba(61, 220, 132, .12), transparent 60%), radial-gradient(60% 70% at 90% 10%, rgba(240, 166, 189, .14), transparent 60%), linear-gradient(180deg, #141416, #1c1c21) !important; }
.ag2-panel::after { opacity: .25 !important; }
/* The phone's other screens stand clear of the live one. */
.pk-float.f1 { left: -1% !important; } .pk-float.f2 { left: 8% !important; } .pk-float.f3 { right: 8% !important; } .pk-float.f4 { right: -1% !important; }
.pk-float { z-index: 0 !important; } .pk-phone { z-index: 2; }
/* The live phone takes the scroll wheel only once it is tapped (pocket.js). */
.pk-screen iframe { pointer-events: none; }
.pocket.using .pk-screen iframe { pointer-events: auto; }
.pk-try { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; z-index: 3; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #111; font: 600 14px var(--sans); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); transition: opacity .3s; }
.pocket.using .pk-try { opacity: 0; pointer-events: none; }
#private h2 > span.wd, #pricing h2 > span.wd, .faq h2 > span.wd, .end h2 > span.wd { color: var(--ink) !important; }
#private h2 > span:not(.wd) .wd, #pricing h2 > span:not(.wd) .wd, .faq h2 > span:not(.wd) .wd { color: var(--ink3) !important; }
.w2-title .w2-a, .w2-title .w2-b { color: var(--ink) !important; }
.pk-fine { margin-top: 18px !important; }
.pk-places { margin-top: 26px !important; }
.pv-mac { background: linear-gradient(180deg, #1d1d21, #151517) !important; color: #ececee !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(20, 12, 40, .5) !important; }
.plan.pick { background: linear-gradient(180deg, #1d1d21, #151517) !important; }

/* ── The bar: glass with depth, a pill that follows the page ─────────── */
.bar { top: 14px !important; height: 60px; padding: 0 8px 0 16px !important; border-radius: 20px !important; transition: height .35s var(--ease), top .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(251, 248, 244, .7)) !important; backdrop-filter: blur(22px) saturate(1.7) !important; -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(23, 21, 31, .04), 0 0 0 1px rgba(23, 21, 31, .07), 0 2px 6px -2px rgba(44, 36, 92, .08), 0 18px 40px -22px rgba(44, 36, 92, .35) !important; }
.bar.tight { height: 54px; top: 10px !important; }
.bar .mark { gap: 10px; font: 750 19px var(--display); letter-spacing: -.03em; }
.bar .mark-jev { width: 30px; height: 30px; transition: transform .4s var(--spring); }
.bar .mark:hover .mark-jev { transform: rotate(-8deg) scale(1.08); }
.bar-nav { position: relative; gap: 4px !important; }
.bar-link { position: relative; z-index: 1; padding: 8px 12px; border-radius: 12px; color: var(--ink2) !important; font: 500 14.5px var(--sans) !important; transition: color .25s; }
.bar-link:hover, .bar-link.on { color: var(--ink) !important; }
.bar-spy { position: absolute; left: 0; top: 50%; height: 36px; margin-top: -18px; border-radius: 12px; z-index: 0; opacity: 0; pointer-events: none;
  background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(23, 21, 31, .07), 0 4px 12px -6px rgba(44, 36, 92, .3); transition: transform .45s var(--spring), width .45s var(--spring), opacity .3s; }
.bar-get { display: inline-flex !important; align-items: center; gap: 7px; margin-left: 8px; padding: 10px 16px !important; border-radius: 13px !important; font: 600 14px var(--sans) !important; color: #fff !important;
  background: linear-gradient(180deg, #2c2a33, #17151f) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.4), 0 6px 14px -6px rgba(23, 21, 31, .55); transition: transform .25s var(--spring), box-shadow .25s; }
.bar-get:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.4), 0 10px 20px -8px rgba(23, 21, 31, .6); }
.bar-get svg { width: 14px; height: 14px; margin-top: -2px; }
@media (max-width: 860px) { .bar-spy { display: none; } .bar-get svg { display: none; } }

/* ── Your coding agents, minded (agents.js) ──────────────────────────── */
.ax { padding: 150px max(var(--gutter), calc((100% - 1240px) / 2)) 0; }
.ax-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: clamp(44px, 5vw, 72px) clamp(18px, 4vw, 56px) 48px; display: grid; justify-items: center; text-align: center; color: #ececee;
  background: radial-gradient(50% 60% at 50% 0%, rgba(240, 166, 189, .12), transparent 70%), linear-gradient(180deg, #141416, #1b1b20); box-shadow: 0 0 0 1px rgba(23, 21, 31, .2), 0 60px 120px -60px rgba(20, 12, 40, .7); }
.ax-head h2 { margin: 0; color: #fff; }
.ax-head h2 span { color: rgba(255, 255, 255, .55) !important; }
.ax-steps { list-style: none; margin: 34px 0 0; padding: 0; width: min(980px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: ax; text-align: left; }
.ax-steps li { counter-increment: ax; position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 54px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .4s, box-shadow .4s; }
.ax-steps li::before { content: counter(ax); position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 650 13px var(--sans); color: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); transition: background .4s, color .4s, box-shadow .4s; }
.ax-steps b { font: 650 16px var(--sans); color: rgba(255,255,255,.75); } .ax-steps span { font: 400 14px/1.45 var(--sans); color: rgba(255,255,255,.5); }
.ax-steps li.on { background: rgba(240, 166, 189, .1); box-shadow: inset 0 0 0 1px rgba(240, 166, 189, .45); }
.ax-steps li.on::before { background: #f0a6bd; color: #2a0f1c; box-shadow: none; }
.ax-steps li.on b { color: #fff; } .ax-steps li.on span { color: rgba(255,255,255,.75); }
.ax-steps li.past::before { content: "✓"; background: #3ddc84; color: #06210f; box-shadow: none; }
/* The stage: the palette, then the wall of agents under it. */
.ax-stage { position: relative; width: min(1040px, 100%); margin-top: 72px; display: grid; justify-items: center; text-align: left; }
.ax-pal { position: relative !important; width: min(600px, 100%); z-index: 3; transition: transform .6s var(--ease); }
.ax-jev { position: absolute; left: 3.06%; bottom: 100%; width: 8.9%; min-width: 44px; aspect-ratio: 1; transform: translateY(29.07%); }
.ax-pal .jx-field { border-bottom: 0; font-size: 18px; min-height: 64px; }
.ax-typed { color: #ececee; } .ax-caret { width: 2px; height: 22px; margin-left: 2px; background: #f0a6bd; animation: blink 1.1s steps(2) infinite; }
.ax-wall { width: 100%; margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ax-col { position: relative; min-height: 250px; border-radius: 16px; background: #0f0f12; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; opacity: .2; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .4s; }
.ax-col.in { opacity: 1; transform: none; }
.ax-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); font: 13px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; white-space: nowrap; }
.ax-logo { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ax-top b { font-weight: 600; color: #ececee; } .ax-top span { color: #8e8e97; }
.ax-st { margin-left: auto; padding: 2px 8px; border-radius: 99px; font: 600 11px -apple-system, system-ui, sans-serif; font-style: normal; color: #b4b4bc; background: rgba(255,255,255,.07); }
.ax-st.ask { color: #ffbe57; background: rgba(255, 190, 87, .14); } .ax-st.done { color: #3ddc84; background: rgba(61, 220, 132, .14); }
.ax-log { padding: 12px 14px; display: grid; gap: 6px; font: 500 12.5px/1.45 ui-monospace, "SF Mono", Menlo, monospace; color: #b4b4bc; }
.ax-log p { margin: 0; animation: hx-in .35s var(--ease) both; opacity: 0; transform: translateY(4px); } .ax-log p::before { content: "● "; color: #5a5a62; font-size: 9px; } .ax-log p.ok { color: #7be3a6; }
/* The ask, in the column that asks. */
.ax-ask { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 12px 10px; border-radius: 12px; background: #1d1d21; box-shadow: inset 0 0 0 1px rgba(255, 190, 87, .5); font: 14px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #ececee; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--spring); }
.ax-ask p { margin: 0 0 10px; font-weight: 600; } .ax-ask code { font: 500 12.5px ui-monospace, Menlo, monospace; color: #ffd1e3; }
.ax-ask div { display: flex; justify-content: flex-end; gap: 6px; } .ax-ask span { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; background: #2c2c31; }
.ax-ask .ax-yes { background: #ececee; color: #111; transition: transform .15s, filter .15s; } .ax-yes kbd { font: 600 10px system-ui; opacity: .55; margin-left: 4px; }
.ax-stage.asking:not(.allowed) .ax-ask { opacity: 1; transform: none; }
.ax-stage.asking:not(.allowed) [data-a="claude"] { box-shadow: inset 0 0 0 1px rgba(255, 190, 87, .55), 0 0 40px -12px rgba(255, 190, 87, .45); }
.ax-stage.press .ax-yes, .ax-stage.press .ax-ph-yes { transform: scale(.93); filter: brightness(.85); }
/* The same question on the phone. */
.ax-phone { position: absolute; right: -14px; bottom: -26px; z-index: 4; width: 230px; padding: 14px; border-radius: 26px; background: #0b0b0d; box-shadow: 0 0 0 5px #000, 0 0 0 6px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.8); font: 13px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #ececee;
  opacity: 0; transform: translateY(24px) rotate(4deg); transition: opacity .5s, transform .6s var(--spring); }
.ax-ph-top { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #ffbe57; font-weight: 600; } .ax-ph-top i { width: 7px; height: 7px; border-radius: 50%; background: #ffbe57; }
.ax-phone p { margin: 10px 0 12px; font-weight: 600; } .ax-phone code { font: 500 11.5px ui-monospace, Menlo, monospace; color: #ffd1e3; }
.ax-phone div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ax-phone div span { padding: 8px 0; border-radius: 999px; text-align: center; font-weight: 600; background: #2c2c31; } .ax-phone .ax-ph-yes { background: #ececee; color: #111; transition: transform .15s, filter .15s; }
.ax-stage.asking:not(.allowed) .ax-phone { opacity: 1; transform: rotate(4deg); }
.ax-more { margin-top: 56px; color: #fff; font: 600 16px var(--sans); text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.35); padding-bottom: 3px; } .ax-more i { font-style: normal; }
@media (max-width: 900px) {
  .ax-steps { grid-template-columns: minmax(0, 1fr); } .ax-steps li:not(.on) span { display: none; }
  .ax-wall { grid-template-columns: minmax(0, 1fr); } .ax-col:not([data-a="claude"]) { display: none; } .ax-col { min-height: 230px; }
  .ax-phone { display: none; } .ax-stage { margin-top: 60px; }
}
.ax-head h2 { font: 700 clamp(32px, 3.4vw, 48px)/1.08 var(--display) !important; letter-spacing: -.04em !important; text-wrap: balance; }
.ax-ph-top { white-space: nowrap; } .ax-phone { width: 250px; }

/* ── Your Mac, in your pocket: the live phone, four cards joined to it ── */
.pk2 { width: min(1240px, 100%); display: grid; justify-items: center; text-align: center; }
.pk2 h2 { margin: 0; }
.pk2-stage { width: 100%; margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0; }
.pk2-side { display: grid; gap: 22px; }
.pk2-phone { position: relative; padding: 0 64px; }
.pk2-phone::before { display: none !important; }
/* Annotations of the phone, not cards: bare at rest, the one shown lifted
   onto paper. An icon is a glyph beside the title, never a tile. */
.pq { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; padding: 18px 22px; border: 0; border-radius: 20px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: 0 0 0 1px transparent; transition: box-shadow .35s var(--ease), background-color .35s var(--ease); }
.pq:hover { background: rgba(23, 21, 31, .035); }
.pq-ic { grid-row: span 2; width: 20px; height: 22px; display: grid; place-items: center; color: var(--ink3); transition: color .35s var(--ease); }
.pq-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pq b { font: 650 16.5px/1.3 var(--sans); color: var(--ink2); letter-spacing: -.01em; transition: color .35s var(--ease); } .pq span { font: 400 14.5px/1.5 var(--sans); color: var(--ink3); text-wrap: pretty; }
.pq[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 1px rgba(23, 21, 31, .06), 0 1px 2px rgba(23, 21, 31, .05), 0 18px 36px -22px rgba(44, 36, 92, .4); }
.pq[aria-pressed="true"] b { color: var(--ink); } .pq[aria-pressed="true"] span { color: var(--ink2); }
.pq[aria-pressed="true"] .pq-ic { color: var(--accent); }
.pq:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The line from the card to the phone, lit for the one shown. */
.pq-line { position: absolute; top: 50%; width: 64px; height: 2px; background: rgba(23, 21, 31, .1); text-decoration: none; pointer-events: none; }
.pq-l .pq-line { left: 100%; } .pq-r .pq-line { right: 100%; }
.pq-line::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: rgba(23, 21, 31, .2); }
.pq-l .pq-line::after { right: -4px; } .pq-r .pq-line::after { left: -4px; }
.pq[aria-pressed="true"] .pq-line, .pq[aria-pressed="true"] .pq-line::after { background: var(--accent); }
.pk2 .pk-fine { margin-top: 40px !important; text-align: center; max-width: 560px; }
@media (max-width: 1000px) {
  .pk2-stage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pk2-phone { order: -1; padding: 0; } .pk2-side { grid-template-columns: 1fr 1fr; gap: 12px; } .pq-line { display: none; }
  .pq { grid-template-columns: 18px minmax(0, 1fr); padding: 12px 14px; align-items: center; } .pq-ic { grid-row: auto; width: 18px; height: 18px; } .pq-ic svg { width: 18px; height: 18px; } .pq b { font-size: 15px; } .pq span { display: none; }
}
.pk2-stage > .pk2-phone { order: 0 !important; width: auto !important; margin: 0 !important; grid-column: 2; }
.pk2-stage > .pk2-side:first-child { grid-column: 1; } .pk2-stage > .pk2-side:last-child { grid-column: 3; }
.pk2 .pk-phone { --h: min(660px, calc(100svh - 170px)); }
@media (max-width: 1000px) { .pk2-stage > .pk2-phone, .pk2-stage > .pk2-side:first-child, .pk2-stage > .pk2-side:last-child { grid-column: 1; } .pk2-stage > .pk2-phone { order: -1 !important; } }

/* ══ The first screen: one field for everything (hero.js) ═══════════════ */
.hz { position: relative; display: grid; justify-items: center; text-align: center; padding: 130px var(--gutter) 30px; overflow: hidden;
  background: radial-gradient(60% 46% at 50% 64%, #fff 0, rgba(255,255,255,0) 72%), linear-gradient(180deg, #fbf8f4, #f8f1ee 70%, var(--paper)); }
.hz-t { margin: 0; font: 720 clamp(36px, 4.2vw, 60px)/1.04 var(--display); letter-spacing: -.045em; color: var(--ink); }
.hz-s { margin: 16px auto 0; max-width: 600px; font: 450 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); color: var(--ink2); text-wrap: balance; }
.hz-orbit { position: relative; width: min(1120px, 100%); height: 500px; margin-top: 40px; }
.hz-bit { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 8px; border-radius: 14px; background: #fff; white-space: nowrap;
  font: 500 14px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--ink2); box-shadow: 0 0 0 1px rgba(23, 21, 31, .08), 0 12px 26px -18px rgba(44, 36, 92, .4);
  transition: left .75s var(--ease), top .75s var(--ease), opacity .5s, transform .6s var(--spring), box-shadow .4s, color .3s; animation: hz-drift 7s ease-in-out infinite alternate; animation-delay: var(--dl); }
@keyframes hz-drift { to { transform: translateY(-7px); } }
.hz-bit i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--c); flex: none; }
.hz-bit i svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hz-bit.lit { color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent), 0 16px 32px -16px rgba(217, 70, 124, .55); }
.hz-orbit.busy .hz-bit:not(.pull) { opacity: .25; }
.hz-bit.pull { left: 50% !important; top: 26% !important; opacity: 0; transform: scale(.4); animation: none; }
/* The palette, Jevie on it; what was done is built under the field. */
.hz-pal { position: absolute !important; left: 50%; top: 22%; translate: -50% 0; z-index: 3; width: min(580px, 94%); text-align: left; }
.hz-field { display: flex; align-items: center; min-height: 64px; padding: 0 22px; font: 19px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #ececee; }
.hz-caret { width: 2px; height: 22px; margin-left: 2px; background: #f0a6bd; animation: blink 1.1s steps(2) infinite; }
.hz-out { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.hz-out > div { min-height: 0; overflow: hidden; padding: 0 14px; font: 13.5px/1.45 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #ececee; }
.hz-out.in { grid-template-rows: 1fr; border-top: 1px solid #2f2f34; } .hz-out.in > div { padding: 14px 14px 16px; }
.hz-out.in > div > * { animation: hx-in .45s var(--ease) both; } .hz-out.in > div > *:nth-child(2) { animation-delay: .12s; } .hz-out.in > div > *:nth-child(3) { animation-delay: .24s; }
.hz-h { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; } .hz-h b { font-weight: 600; font-size: 14.5px; } .hz-h span { color: #8e8e97; font-size: 12.5px; }
.hz-h b::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 7px -2px 0; border-radius: 50%; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
/* The results, built. */
.hz-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hz-win { height: 96px; border-radius: 8px; overflow: hidden; background: #202024; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.hz-win p { margin: 0; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: color-mix(in srgb, var(--c) 30%, #1b1b1e); font-size: 11.5px; }
.hz-win p i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; } .hz-win p i:nth-child(2) { background: #febc2e; } .hz-win p i:nth-child(3) { background: #28c840; } .hz-win p b { margin-left: 4px; font-weight: 600; }
.hz-win span { display: block; padding: 8px; color: #8e8e97; font: 11.5px ui-monospace, Menlo, monospace; }
.hz-mail { padding: 12px 14px; border-radius: 10px; background: #202024; } .hz-mail b { font-weight: 600; } .hz-mail p { margin: 4px 0 10px; color: #b4b4bc; }
.hz-att { display: inline-block; padding: 4px 10px; border-radius: 7px; background: rgba(255, 159, 10, .15); color: #ffb340; font-size: 12px; }
.hz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .hz-form p { margin: 0; padding: 7px 10px; border-radius: 8px; background: #202024; display: grid; } .hz-form p span { color: #8e8e97; font-size: 11px; } .hz-form p b { font-weight: 600; }
.hz-form em { grid-column: 1 / -1; padding: 9px; border-radius: 9px; text-align: center; font-style: normal; font-weight: 600; color: #ececee; box-shadow: inset 0 0 0 1.5px #f0a6bd; }
.hz-note { margin: 10px 0 0; color: #f0a6bd; font-size: 12.5px; }
.hz-ask { padding: 12px 14px; border-radius: 10px; background: #202024; box-shadow: inset 0 0 0 1px rgba(255, 190, 87, .5); } .hz-ask p { margin: 0 0 10px; font-weight: 600; } .hz-ask code { font: 500 12.5px ui-monospace, Menlo, monospace; color: #ffd1e3; }
.hz-ask div { display: flex; justify-content: flex-end; gap: 6px; } .hz-ask span { padding: 6px 14px; border-radius: 8px; background: #2c2c31; font-weight: 600; } .hz-ask .go { background: #ececee; color: #111; }
.hz-photo { position: relative; height: 120px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #8ec5ff 0, #cfe6ff 55%, #f3dfb8 55%, #ead19e 100%); }
.hz-photo .sun { position: absolute; right: 16%; top: 14%; width: 26px; height: 26px; border-radius: 50%; background: #fff3c4; }
.hz-photo .sea { position: absolute; left: 0; right: 0; top: 48%; height: 12%; background: #5aa9e6; }
.hz-photo .dog { position: absolute; left: 34%; bottom: 14%; width: 46px; height: 26px; border-radius: 14px 16px 8px 8px; background: #b5773f; box-shadow: 30px -10px 0 -6px #b5773f; }
.hz-tabs { display: flex; flex-wrap: wrap; gap: 5px; } .hz-tabs span { padding: 5px 10px; border-radius: 7px; background: #202024; font-size: 12px; color: #b4b4bc; transition: opacity .5s .6s, transform .5s .6s; }
.hz-out.in .hz-tabs .gone { opacity: .25; text-decoration: line-through; }
.hz-dark { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; } .hz-dark i { width: 34px; height: 20px; border-radius: 99px; background: #3ddc84; position: relative; } .hz-dark i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.hz-cta { margin-top: 10px !important; }
@media (max-width: 760px) {
  .hz { padding-top: 110px; } .hz-orbit { height: 560px; }
  .hz-bit { font-size: 12.5px; padding: 6px 10px 6px 6px; } .hz-bit i { width: 22px; height: 22px; } .hz-bit.far { display: none; }
  .hz-pal { top: 18%; } .hz-field { font-size: 16px; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .hz-bit { animation: none; transition: none; } }
@media (max-width: 760px) { .hz-bit { left: calc(20% + var(--x) * .6); } .hz-bit[data-k="photo"], .hz-bit[data-k="settings"] { top: 80%; } .hz-orbit { height: 520px; } }
@media (max-width: 760px) {
  .hz-orbit { height: 470px; }
  .hz-bit { display: none; left: var(--mx) !important; top: var(--my) !important; }
  .hz-bit.pull { left: 50% !important; top: 22% !important; }
  .hz-bit[data-k="safari"] { display: inline-flex; --mx: 27%; --my: 3%; } .hz-bit[data-k="terminal"] { display: inline-flex; --mx: 73%; --my: 3%; }
  .hz-bit[data-k="photo"] { display: inline-flex; --mx: 27%; --my: 95%; } .hz-bit[data-k="claude"] { display: inline-flex; --mx: 73%; --my: 95%; }
}

/* ══ The first screen on a Mac: wallpaper, menu bar, Dock, palette ══════ */
.hz-orbit { height: auto !important; width: min(1160px, 100%) !important; margin-top: 44px !important; }
.hz-desk { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9.4; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(23, 21, 31, .12), 0 0 0 9px #111114, 0 0 0 10px rgba(23,21,31,.2), 0 60px 110px -50px rgba(60, 30, 90, .55); }
.hz-wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hz-wall path { transition: fill .9s; }
.hz-wall .w1 { animation: hz-wave 14s ease-in-out infinite alternate; } .hz-wall .w2 { animation: hz-wave 18s ease-in-out infinite alternate-reverse; } .hz-wall .w3 { animation: hz-wave 22s ease-in-out infinite alternate; }
@keyframes hz-wave { to { transform: translateX(-40px); } }
.hz-desk::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(10, 10, 30, .55); opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.hz-desk.night::after { opacity: 1; }
.hz-menu { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 18px; color: #fff; font: 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: rgba(255,255,255,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hz-menu > svg { width: 13px; fill: #fff; } .hz-menu b { font-weight: 700; } .hz-menu em { margin-left: auto; display: flex; align-items: center; gap: 10px; font-style: normal; font-weight: 500; }
.hz-mjev { width: 18px; height: 18px; display: block; }
/* The palette sits high on the desktop; what it does grows under the field. */
.hz-pal { top: 15% !important; z-index: 3; width: min(560px, 82%) !important; }
.hz-field { min-height: 60px; font-size: 18px; }
/* The Dock. */
.hz-dock { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 2; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 12px; border-radius: 22px;
  background: rgba(255, 255, 255, .28); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 30px -10px rgba(40, 20, 80, .35); }
.hz-app { position: relative; display: block; width: 50px; height: 50px; }
.hz-app i { position: absolute; inset: 0; border-radius: 23%; overflow: hidden; display: grid; place-items: center; font-style: normal; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.hz-app::after { content: ""; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(20, 20, 30, .6); opacity: 0; transition: opacity .3s; }
.hz-app.run::after, .a-finder::after { opacity: 1; }
.hz-ghost { position: absolute; z-index: 4; pointer-events: none; }
/* Each icon, drawn. */
.a-finder i { background: linear-gradient(90deg, #2b8cf7 50%, #a7dcff 50%); } .a-finder i::before { content: ""; position: absolute; left: 30%; right: 30%; top: 58%; height: 14%; border: solid #12274a; border-width: 0 0 2.5px; border-radius: 0 0 50% 50%; } .a-finder i::after { content: ""; position: absolute; left: 32%; top: 32%; width: 4px; height: 8px; border-radius: 2px; background: #12274a; box-shadow: 17px 0 0 #12274a; }
.a-safari i { background: linear-gradient(#fff, #e9eef5); } .a-safari i::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; background: radial-gradient(circle, transparent 54%, #fff 55%), conic-gradient(#27a8ff, #1866e8, #27a8ff); } .a-safari i::after { content: ""; position: absolute; left: 47%; top: 24%; width: 6%; height: 52%; background: linear-gradient(#ff3b30 50%, #e6e6ea 50%); transform: rotate(45deg); border-radius: 3px; }
.a-chrome i { background: #fff; } .a-chrome i::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: conic-gradient(from -60deg, #ea4335 0 120deg, #fbbc05 0 240deg, #34a853 0); } .a-chrome i::after { content: ""; position: absolute; inset: 33%; border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 3px #fff; }
.a-mail i { background: linear-gradient(#5ac8fa, #1475f0); } .a-mail i::before { content: ""; position: absolute; left: 18%; right: 18%; top: 30%; bottom: 30%; border-radius: 4px; background: #fff; } .a-mail i::after { content: ""; position: absolute; left: 22%; right: 22%; top: 28%; height: 26%; border: solid #c8dcf5; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.7, .7); transform-origin: 50% 30%; }
.a-cal i { background: #fff; color: #1d1d1f; font: 300 26px/1 -apple-system, system-ui; padding-top: 10px; } .a-cal i::before { content: "FRI"; position: absolute; top: 7px; font: 700 9px -apple-system, system-ui; color: #ff3b30; } .a-cal i::after { content: attr(data-d); }
.a-photos i { background: #fff; } .a-photos i::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(#ff9500 0 45deg, #ffcc00 0 90deg, #34c759 0 135deg, #00c7be 0 180deg, #007aff 0 225deg, #5856d6 0 270deg, #af52de 0 315deg, #ff2d55 0); -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%); mask: radial-gradient(circle, transparent 18%, #000 19%); }
.a-notes i { background: linear-gradient(#fdd54d 0 26%, #fffdf5 26%); } .a-notes i::before { content: ""; position: absolute; left: 18%; right: 18%; top: 44%; height: 34%; background: repeating-linear-gradient(#e2ddcf 0 1.5px, transparent 1.5px 7px); }
.a-xcode i { background: linear-gradient(#45a3ff, #1063e0); } .a-xcode i::before { content: ""; position: absolute; inset: 26%; border-radius: 6px; background: #fff; transform: rotate(45deg); } .a-xcode i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 47%; height: 6px; border-radius: 3px; background: #1063e0; transform: rotate(-35deg); }
.a-terminal i { background: linear-gradient(#3a3a40, #1c1c20); font: 700 15px ui-monospace, Menlo, monospace; color: #e5e5ea; } .a-terminal i::before { content: ">_"; }
.a-claude i { background: linear-gradient(#e08a68, #c9603f); font-size: 26px; } .a-claude i::before { content: "✳"; }
.a-table i { background: linear-gradient(#ef4b57, #c8253a); } .a-table i::before { content: ""; width: 44%; height: 44%; border-radius: 50%; box-shadow: inset 0 0 0 4px #fff; } .a-table i::after { content: ""; position: absolute; width: 10%; height: 10%; border-radius: 50%; background: #fff; }
.a-settings i { background: linear-gradient(#a8a8b0, #6e6e76); } .a-settings i::before { content: ""; width: 56%; height: 56%; border-radius: 50%; background: repeating-conic-gradient(#3a3a40 0 12deg, transparent 0 30deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 30%, #000 31%, #000 70%, transparent 71%); }
@media (max-width: 760px) {
  .hz-desk { aspect-ratio: 9 / 13; border-radius: 18px; box-shadow: 0 0 0 1px rgba(23,21,31,.12), 0 0 0 6px #111114, 0 40px 80px -40px rgba(60, 30, 90, .55); }
  .hz-menu span, .hz-menu em i { display: none; }
  .hz-pal { top: 12% !important; width: 90% !important; }
  .hz-app:not(.keep) { display: none; } .hz-app { width: 40px; height: 40px; } .hz-dock { gap: 6px; padding: 6px 8px 10px; }
  .a-cal i { font-size: 20px; } .a-claude i { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hz-wall path { animation: none; } }
.hz { padding-top: 112px !important; padding-bottom: 20px !important; }
.hz-s { margin-top: 12px !important; }
.hz-orbit { margin-top: 30px !important; }
.hz-desk { aspect-ratio: auto !important; height: clamp(470px, calc(100svh - 300px), 640px); }
.hz-menu { color: #2a2233; background: rgba(255,255,255,.35); } .hz-menu > svg { fill: #2a2233; }
.hz-desk.night .hz-menu { color: #fff; background: rgba(0,0,0,.25); } .hz-desk.night .hz-menu > svg { fill: #fff; }
.hz-cta { margin-top: 34px !important; }
@keyframes hz-wave { to { transform: translateX(-60px); } }
@media (max-width: 760px) { .hz-desk { height: 600px; } }
@media (max-width: 760px) { .hz-desk { height: 500px; } .hz-pal { top: 13% !important; } .hz-wins .hz-win { height: 72px; } }

/* ══ The first screen, round 3: a MacBook, the palette as the app plays it ══ */
.hz { background: linear-gradient(180deg, #fbf8f4 0%, #fdf0ea 30%, #fbe1e6 62%, #ecdcf8 100%) !important; padding-bottom: 60px !important; }
.hz-mac { position: relative; width: 100%; }
.hz-desk { height: clamp(470px, calc(100svh - 300px), 620px); border-radius: 18px 18px 6px 6px !important;
  box-shadow: 0 0 0 1px #2a2a30, 0 0 0 11px #0e0e10, 0 0 0 12px #3a3a42, 0 50px 90px -40px rgba(60, 30, 90, .5) !important; }
.hz-base { position: relative; height: 16px; margin: 11px -6% 0; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #d9dbe0, #b9bcc4 60%, #9da0a8); box-shadow: 0 18px 30px -16px rgba(40, 30, 60, .45); }
.hz-base::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 13%; height: 6px; border-radius: 0 0 8px 8px; background: linear-gradient(#a9acb4, #c3c6cc); }
.hz-notch { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 5; width: 170px; height: 26px; border-radius: 0 0 12px 12px; background: #0e0e10; }
.hz-menu { height: 26px !important; gap: 17px !important; font-size: 12.5px !important; padding: 0 14px !important; }
.hz-menu em { gap: 13px !important; } .hz-menu em svg { height: 13px; width: auto; color: currentColor; } .hz-menu .clock { font-weight: 500; }
.hz-menu .apple { width: 13px; }
/* Windows on the desktop, as macOS draws them. */
.fx { position: absolute; inset: 26px 0 84px; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.fx.on { opacity: 1; }
.win { position: absolute; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.3), 0 22px 50px -14px rgba(20, 10, 40, .5); transform: scale(.94); transition: transform .5s var(--spring); }
.fx.on .win { transform: none; }
.win .wbar { position: relative; margin: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #f1f0f3; border-bottom: .5px solid rgba(0,0,0,.12); font: 600 12px -apple-system, BlinkMacSystemFont, system-ui; color: #3c3c43; }
.win .wbar > i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .win .wbar > i:nth-child(2) { background: #febc2e; } .win .wbar > i:nth-child(3) { background: #28c840; }
.win .wbar b { position: absolute; left: 50%; translate: -50% 0; font-weight: 600; white-space: nowrap; }
.win .url { margin: 0 auto; padding: 3px 40px; border-radius: 7px; background: #e3e2e7; font-weight: 500; color: #3c3c43; }
.win pre { margin: 0; padding: 12px 14px; font: 500 12px/1.65 "SF Mono", ui-monospace, Menlo, monospace; white-space: pre; overflow: hidden; }
.fx-tile .win { top: 8px; bottom: 8px; width: calc(33.33% - 9px); }
.fx-tile .w-xcode { left: 6px; transition-delay: 0s; } .fx-tile .w-safari { left: calc(33.33% + 3px); } .fx-tile .w-term { right: 6px; }
.w-xcode { background: #1f1f24; } .w-xcode .wbar { background: #2a2a30; color: #d0d0d6; border-color: #000; } .w-xcode pre { color: #e6e6ea; } .w-xcode pre b { color: #fc5fa3; font-weight: 600; } .w-xcode pre u { color: #5dd8ff; text-decoration: none; }
.w-term { background: #1c1c20; } .w-term .wbar { background: #2a2a2f; color: #c8c8cc; border-color: #000; } .w-term pre { color: #e5e5ea; } .w-term pre g { color: #3ddc84; }
.site { padding: 20px; } .site b { font: 700 20px -apple-system, system-ui; color: #1d1d1f; } .site p { margin: 4px 0 14px; color: #6e6e73; font: 13px -apple-system, system-ui; }
.site .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .site .cards i { aspect-ratio: 3 / 4; border-radius: 8px; background: linear-gradient(#efe6dc, #e2d4c4); }
/* The booking: Safari on OpenTable, filled in as it is watched. */
.w-book { left: 50%; top: 10px; bottom: 10px; width: min(560px, 60%); translate: -50% 0; }
.book { padding: 0 0 16px; font: 13px -apple-system, BlinkMacSystemFont, system-ui; color: #1d1d1f; }
.b-hero { height: 90px; padding: 14px 18px; display: grid; align-content: end; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent), linear-gradient(120deg, #8a5a3c, #d9a066 60%, #6e8a4f); }
.b-hero b { font-size: 20px; font-weight: 700; } .b-hero span { font-size: 12px; opacity: .9; }
.b-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 0; }
.b-form label { display: grid; gap: 2px; padding: 7px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #d8d8de; font-size: 11px; color: #6e6e73; transition: box-shadow .3s; }
.b-form label span { min-height: 17px; font-size: 13.5px; font-weight: 600; color: #1d1d1f; } .b-form label.on { box-shadow: inset 0 0 0 1.5px #da3743; }
.b-go { display: block; margin: 14px 18px 0; padding: 10px; border-radius: 9px; text-align: center; font-style: normal; font-weight: 700; color: #fff; background: #da3743; opacity: .45; transition: opacity .3s, box-shadow .3s; }
.fx-book.ready .b-go { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f0a6bd; }
.hz-toast { position: absolute; right: 14px; top: 10px; z-index: 3; display: flex; gap: 10px; align-items: center; width: 290px; padding: 12px 14px; border-radius: 16px; background: rgba(246, 246, 248, .9); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.35), inset 0 0 0 .5px rgba(255,255,255,.6); font: 12.5px/1.35 -apple-system, BlinkMacSystemFont, system-ui; color: #1d1d1f; transform: translateX(120%); transition: transform .55s var(--spring); }
.hz-toast i { width: 34px; height: 34px; flex: none; border-radius: 9px; background: #151517 url(jevie-mark.svg) center / 70% no-repeat; } .hz-toast b { display: block; font-weight: 600; } .hz-toast span { color: #3c3c43; }
.fx-book.ready .hz-toast { transform: none; }
/* Quick Look. */
.w-ql { left: 50%; top: 20px; width: min(440px, 50%); translate: -50% 0; }
.w-ql .ql-open { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: #e3e2e7; font-weight: 500; }
.photo { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #7fbdf5 0, #cfe6ff 48%, #5aa9e6 48%, #5aa9e6 58%, #f2dcb0 58%, #e6c890 100%); }
.photo .sun { position: absolute; right: 16%; top: 12%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #fff4c8; }
.photo .dog { position: absolute; left: 36%; bottom: 16%; width: 22%; height: 15%; border-radius: 40% 46% 20% 20%; background: #a8693a; box-shadow: 58% -60% 0 -14% #a8693a; }
.photo .dog::before { content: ""; position: absolute; right: -24%; top: -70%; width: 40%; height: 90%; border-radius: 50% 50% 30% 30%; background: #a8693a; }
.photo .dog::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -40%; height: 45%; background: repeating-linear-gradient(90deg, #8a5530 0 12%, transparent 12% 30%); }
/* The palette, as the app plays it: it opens and closes; rows as it is typed. */
.hz-pal { top: 13% !important; transition: opacity .22s ease, transform .3s var(--spring); opacity: 0; transform: translateY(-4px) scale(.98); }
.hz-pal.up { opacity: 1; transform: none; }
.hz-out { display: none !important; }
.hz-list:not(:empty) { border-top: 1px solid #2f2f34; padding: 6px 0; }
.hz-row { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 40px; margin: 0 6px; padding: 0 12px; border-radius: 9px; font: 13px -apple-system, BlinkMacSystemFont, system-ui; color: #ececee; animation: hx-in .3s var(--ease) both; }
.hz-row.sel { background: rgba(236, 236, 238, .1); } .hz-row.press { background: rgba(236, 236, 238, .2); }
.hz-row i { width: 20px; height: 20px; border-radius: 28%; display: grid; place-items: center; justify-self: center; background: color-mix(in srgb, var(--h) 22%, transparent); color: var(--h); }
.hz-row i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hz-row b { font-weight: 500; white-space: nowrap; } .hz-row span { color: #a0a0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hz-row em { font-style: normal; font-size: 12px; color: #8e8e97; white-space: nowrap; }
.hz-row .pill { text-decoration: none; padding: 2px 8px; border-radius: 99px; background: rgba(255, 190, 87, .15); color: #ffbe57; font-weight: 600; font-size: 11px; }
.hz-foot:not(:empty) { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 8px 16px 10px; border-top: 1px solid #2f2f34; font: 12px -apple-system, system-ui; color: #a0a0a8; }
.hz-foot > i { width: 1px; height: 12px; background: #2f2f34; }
.hz-foot kbd { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #2c2c31; font: 500 11px -apple-system, system-ui; color: #b4b4bc; transition: background .15s, color .15s; }
.hz-foot kbd.press { background: #f0a6bd; color: #2a0f1c; }
.hz-say { margin: 4px 18px 8px; font: 13.5px/1.55 -apple-system, BlinkMacSystemFont, system-ui; color: #d6d6dc; animation: hx-in .35s var(--ease) both; } .hz-say b { color: #fff; font-weight: 600; }
.hz-say code, .hz-asks code { font: 500 12px ui-monospace, Menlo, monospace; color: #ffd1e3; }
.hz-asks { display: flex; align-items: center; gap: 8px; margin: 2px 12px 6px; padding: 10px 12px; border-radius: 10px; background: #202024; box-shadow: inset 0 0 0 1px rgba(255, 190, 87, .45); font: 13.5px -apple-system, system-ui; color: #ececee; animation: hx-in .35s var(--ease) both; }
.hz-asks p { margin: 0 auto 0 0; font-weight: 600; } .hz-asks span { padding: 5px 12px; border-radius: 7px; background: #2c2c31; font-weight: 600; font-size: 12.5px; } .hz-asks .go { background: #ececee; color: #111; }
/* The Dock: a separator and the Trash, as on a Mac. */
.hz-sep { width: 1px; height: 40px; align-self: center; margin: 0 2px; background: rgba(40, 30, 60, .25); }
.a-trash i { background: rgba(255,255,255,.4); box-shadow: none; } .a-trash i::before { content: ""; position: absolute; left: 26%; right: 26%; top: 16%; bottom: 12%; border-radius: 2px 2px 8px 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 4px, rgba(215,219,228,.95) 0 6px); box-shadow: 0 0 0 .5px rgba(0,0,0,.2); }
.a-trash::after { display: none; }
.hz-desk.night .fx .win { filter: none; }
@media (max-width: 760px) {
  .hz-desk { height: 520px !important; } .hz-base { margin: 8px -4% 0; height: 12px; }
  .hz-notch { width: 110px; height: 20px; } .hz-menu em > svg, .hz-menu em .hz-mjev { display: none; }
  .hz-row em, .hz-row span { display: none; } .hz-row { grid-template-columns: 22px minmax(0, 1fr); } .hz-foot > span:not(:first-child), .hz-foot > i { display: none; }
  .fx-tile .win pre { font-size: 9px; } .w-book { width: 92%; } .w-ql { width: 84%; } .hz-toast { left: 10px; right: 10px; width: auto; top: auto; bottom: 10px; }
  .a-trash, .hz-sep { display: none !important; }
}

.win { text-align: left; }

/* ══ The first screen in space: night above, the page as the planet below ══ */
.hz { background: radial-gradient(60% 50% at 20% 10%, rgba(120, 80, 220, .22), transparent 70%), radial-gradient(50% 40% at 85% 25%, rgba(240, 120, 180, .14), transparent 70%), linear-gradient(180deg, #05051a 0%, #0d0b2c 45%, #1c1446 100%) !important;
  padding-bottom: 150px !important; isolation: isolate; }
.hz-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; animation: hz-tw 6s ease-in-out infinite alternate; }
@keyframes hz-tw { from { opacity: .75; } to { opacity: 1; } }
/* The horizon: the rest of the page is the planet's surface, curving up to meet the Mac. */
.hz::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: -520px; height: 660px; z-index: -1; border-radius: 50%; background: var(--paper);
  box-shadow: 0 -1.5px 0 rgba(255, 255, 255, .9), 0 -6px 0 rgba(200, 180, 255, .18); }
.hz .hx-get { background: #fff !important; color: #111 !important; }
.hz-mac { z-index: 1; }
.hz-desk { box-shadow: 0 0 0 1px #3a3a46, 0 0 0 11px #0b0b0e, 0 0 0 12px #4a4a56, 0 60px 100px -40px rgba(0, 0, 0, .7) !important; }
.hz-menu { color: #fff !important; background: rgba(10, 8, 30, .35) !important; } .hz-menu > svg { fill: #fff !important; }
.hz-wall .stars { animation: hz-tw 5s ease-in-out infinite alternate; }
.hz-wall .planet { animation: hz-float 12s ease-in-out infinite alternate; } @keyframes hz-float { to { transform: translateY(-8px); } }
.hz-toast { text-align: left; }
.hz-dock { background: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 10px 30px -10px rgba(0, 0, 0, .5) !important; }
.hz-app::after { background: rgba(255, 255, 255, .8) !important; }
.hz-sep { background: rgba(255, 255, 255, .3) !important; }
.hz .hz-cta { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hz-sky, .hz-wall .stars, .hz-wall .planet { animation: none; } }
.hz + .pstage, .pstage { padding-top: 40px !important; }
@media (max-width: 760px) { .hz { padding-bottom: 110px !important; } .hz::after { bottom: -580px; } }

/* ══ The first screen: a giant Jevie holding the Mac; a living theme on it ══ */
.hz { background: linear-gradient(180deg, #fbf8f4 0%, #fdeee8 28%, #fbe0e7 60%, #ecdcf8 100%) !important; padding-bottom: 70px !important; }
.hz::after, .hz-sky { display: none !important; }
.hz .hx-get { background: var(--ink) !important; color: #fff !important; }
.hz-orbit { margin-top: calc(clamp(210px, 22vw, 300px) * .66 + 18px) !important; }
.hz-giant { position: absolute; left: 50%; top: 0; z-index: 6; width: clamp(210px, 22vw, 300px); aspect-ratio: 1; translate: -50% -70.93%; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 18px 24px rgba(60, 20, 60, .25)); }
.hz-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hz-desk { background: #f6d6dc; box-shadow: 0 0 0 1px #2a2a30, 0 0 0 11px #0e0e10, 0 0 0 12px #3a3a42, 0 50px 90px -40px rgba(60, 30, 90, .5) !important; }
.hz-menu { color: #2a2233 !important; background: rgba(255, 255, 255, .45) !important; } .hz-menu > svg { fill: #2a2233 !important; }
.hz-desk.night .hz-menu { color: #fff !important; background: rgba(0,0,0,.35) !important; } .hz-desk.night .hz-menu > svg { fill: #fff !important; }
.hz-dock { background: rgba(255, 255, 255, .32) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 30px -10px rgba(40, 20, 80, .35) !important; }
.hz-app::after { background: rgba(20, 20, 30, .6) !important; } .hz-sep { background: rgba(40, 30, 60, .25) !important; }
.hz-notch { display: none; }
.hz-pal { top: 16% !important; }
@media (max-width: 760px) { .hz-giant { width: 150px; } .hz-orbit { margin-top: 118px !important; } }

/* ══ The first screen: an orbital sunrise (space.js) ═══════════════════ */
.hz { background: #02030c !important; padding-bottom: 120px !important; isolation: isolate; }
.hz-space { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hz .hx-get { background: #fff !important; color: #0b0b12 !important; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6) !important; }
.hz-giant { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.hz-desk { box-shadow: 0 0 0 1px #3a3a46, 0 0 0 11px #0b0b0e, 0 0 0 12px #4a4a56, 0 60px 120px -40px rgba(0, 0, 0, .8) !important; }
.hz-base { background: linear-gradient(180deg, #e4e6ea, #c3c6cd 55%, #9a9ea7) !important; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8) !important; }

/* ══ The first screen: one world, the Mac's wallpaper and the page alike ══
   A theme said to Jevie recolours all of it, inside the screen and out. */
@property --s1 { syntax: '<color>'; inherits: true; initial-value: #fdf3ec; }
@property --s2 { syntax: '<color>'; inherits: true; initial-value: #f9d6dc; }
.hz { --s1: #fdf3ec; --s2: #f9d6dc; --w1: #f6b8cf; --w2: #e99bcd; --w3: #c69cf0; --w4: #a4aaf6; --w5: #8fc6f2; --ink-h: #17151f; --ink-s: #4a4756;
  background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 100%) !important; transition: --s1 1.4s ease, --s2 1.4s ease; padding-bottom: 0 !important; overflow: hidden; }
.hz[data-t="lagoon"] { --s1: #f0fbf9; --s2: #cdeef2; --w1: #a3e3db; --w2: #70cbd6; --w3: #4fa9d8; --w4: #3e86d2; --w5: #3166bb; }
.hz[data-t="sunset"] { --s1: #fff3e4; --s2: #ffd3b6; --w1: #ffb48c; --w2: #f79287; --w3: #e3729c; --w4: #b25eaa; --w5: #7b4ca2; }
.hz[data-t="night"] { --s1: #0a0c22; --s2: #1b1946; --w1: #2b2668; --w2: #362c7c; --w3: #44328e; --w4: #523c9e; --w5: #614aaf; --ink-h: #fff; --ink-s: rgba(230, 230, 255, .74); }
.hz-world { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; width: 100%; z-index: -1; pointer-events: none; }
.hz-world path, .hz-wall path { transition: fill 1.4s ease; }
.hz-world .v1, .hz-wall .v1 { fill: var(--w1); } .hz-world .v2, .hz-wall .v2 { fill: var(--w2); } .hz-world .v3, .hz-wall .v3 { fill: var(--w3); } .hz-world .v4, .hz-wall .v4 { fill: var(--w4); } .hz-world .v5, .hz-wall .v5 { fill: var(--w5); }
.hz-world .v1 { animation: hz-wave 16s ease-in-out infinite alternate; } .hz-world .v3 { animation: hz-wave 20s ease-in-out infinite alternate-reverse; } .hz-world .v5 { animation: hz-wave 24s ease-in-out infinite alternate; }
.hz-stars { fill: #fff; opacity: 0; transition: opacity 1.4s ease; }
.hz[data-t="night"] .hz-stars { opacity: .85; }
.hz-wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hz-desk { background: linear-gradient(180deg, var(--s1), var(--s2)); transition: --s1 1.4s ease, --s2 1.4s ease; }
.hz .hz-mac { margin-bottom: -40px; }
.hz[data-t="night"] .hz-menu { color: #fff !important; background: rgba(0,0,0,.3) !important; } .hz[data-t="night"] .hz-menu > svg { fill: #fff !important; }
.hz-giant { filter: drop-shadow(0 18px 26px rgba(60, 20, 70, .28)); }
.hz-desk { box-shadow: 0 0 0 1px #2a2a30, 0 0 0 11px #0e0e10, 0 0 0 12px #3a3a42, 0 50px 90px -40px rgba(40, 20, 70, .5) !important; }
.hz-base { background: linear-gradient(180deg, #e2e4e8, #c2c5cc 55%, #9ea2aa) !important; }
.hz .hz-cta { display: none; }
@media (prefers-reduced-motion: reduce) { .hz-world path { animation: none; } }
.hz[data-t="night"] .hz-desk { background: linear-gradient(180deg, #121433, #1b1946); }
.bar.bar-night { background: linear-gradient(180deg, rgba(40, 40, 70, .85), rgba(28, 28, 52, .8)) !important; }
.bar { transition: background .9s; }
.bar.bar-night .bar-link { color: rgba(236, 236, 255, .78) !important; } .bar.bar-night .bar-link.on, .bar.bar-night .bar-link:hover { color: #17151f !important; } .bar.bar-night .mark { color: #fff; }

/* ══ The first screen: Jevie and his skins (hero.js) ════════════════════ */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #fde3ea; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #f6b8cf; }
.hz.hj { --c1: #fde3ea; --c2: #f6b8cf; padding: 130px var(--gutter) 70px !important; transition: --c1 1.2s ease, --c2 1.2s ease;
  background: radial-gradient(55% 48% at 50% 58%, var(--c2) 0%, color-mix(in srgb, var(--c2) 40%, var(--paper)) 45%, var(--paper) 78%) !important; }
.hj .hz-world, .hj .hz-mac { display: none; }
.hj-stage { position: relative; width: min(1100px, 100%); height: 560px; margin-top: 30px; }
.hj-ring { position: absolute; left: 50%; top: 38%; width: 0; height: 0; }
.hj-skin { position: absolute; left: 0; top: 0; width: 120px; height: 120px; cursor: pointer; transition: filter .3s; filter: drop-shadow(0 10px 14px rgba(60, 30, 60, .18)); }
.hj-skin svg { width: 100%; height: 100%; display: block; }
.hj-skin.on { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 10px 18px rgba(60, 30, 60, .3)); }
.hj-big { position: absolute; left: 50%; top: 38%; z-index: 3; width: clamp(220px, 24vw, 300px); aspect-ratio: 1; translate: -50% -50%; cursor: pointer; }
.hj-floor { position: absolute; left: 50%; top: calc(38% + clamp(220px, 24vw, 300px) * .44); z-index: 2; width: clamp(160px, 17vw, 220px); height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 30, 60, .22), transparent); }
.hj-pal { position: absolute !important; left: 50%; bottom: 0; translate: -50% 0; z-index: 5; width: min(600px, 94%); text-align: left; }
.hj .hz-field { min-height: 60px; }
.hj .hz-list:not(:empty) { border-top: 1px solid #2f2f34; padding: 6px 0; }
.hj-cta { margin-top: 40px !important; display: grid !important; justify-items: center; }
@media (max-width: 760px) { .hj-stage { height: 470px; } .hj-skin { width: 84px; height: 84px; } .hj-ring, .hj-big { top: 36%; } .hj-floor { top: calc(36% + 100px); } }
.hj-floor { display: none; }
.hj-ring { top: 36%; } .hj-big { top: 33%; }
.hj-stage { height: 600px; }

/* ══ The first screen: a living theme, the palette in front (hero.js) ══ */
.hz.hl { min-height: 100svh; padding: 140px var(--gutter) 80px !important; background: #0b0d1c !important; isolation: isolate; display: grid; align-content: start; }
.hl-world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
/* Only enough shade for the words to read: darker at the top, clear in the middle. */
.hl::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(6, 8, 20, .62) 0%, rgba(6, 8, 20, .3) 34%, rgba(6, 8, 20, .08) 60%, rgba(6, 8, 20, .45) 100%); }
/* The hero's words: one rule each for their colour (earlier heroes' rules
   that fought over it with !important are gone, 4 November 2026). */
.hl .hz-t { color: #fff; letter-spacing: -.035em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hl .hz-s { color: rgba(255, 255, 255, .86); }

.hl-stage { position: relative; width: min(620px, 100%); margin: 120px auto 0; }
.hl .hj-pal { position: relative !important; left: auto; bottom: auto; translate: none; width: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 .5px rgba(0, 0, 0, .6), 0 40px 90px -30px rgba(0, 0, 0, .7) !important; }
.hl .hz-field { min-height: 62px; font-size: 19px; }
.hl-name { margin: 18px 0 0; display: flex; justify-content: center; align-items: center; gap: 8px; font: 500 13.5px var(--sans); color: rgba(255,255,255,.75); }
.hl-name b { padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hl .hx-get { background: #fff !important; color: #111 !important; }
.hl .hj-cta { margin-top: 56px !important; }
@media (max-width: 760px) { .hz.hl { padding-top: 116px !important; } .hl-stage { margin-top: 90px; } }
.hl-name { width: max-content; margin: 18px auto 0 !important; padding: 4px 4px 4px 14px; border-radius: 99px; background: rgba(8, 10, 24, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hl-h { margin: 4px 18px 6px; display: flex; align-items: baseline; gap: 8px; font: 13px -apple-system, BlinkMacSystemFont, system-ui; animation: hx-in .35s var(--ease) both; }
.hl-h b { color: #fff; font-weight: 600; font-size: 14px; } .hl-h span { color: #8e8e97; }
.hl-h b::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 8px -2px 0; border-radius: 50%; background: #3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.hl .hz-list .hz-row:not(.sel) em { padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.07); color: #c8c8ce; }
/* The palette grows down over the world; nothing under it moves. */
.hl-stage { height: 300px; } .hl .hj-pal { position: absolute !important; top: 0; left: 0; right: 0; }
.hl-name { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin: 14px 0 0 !important; white-space: nowrap; }
.hl .hj-cta { margin-top: 90px !important; }
/* The button with the words, the palette under them; it all fits a short screen. */
.hz.hl { padding-top: clamp(104px, 15vh, 140px) !important; }
.hl .hl-cta { margin-top: 26px !important; }
.hl-stage { margin-top: clamp(64px, 10vh, 100px); height: clamp(250px, 34vh, 300px); }
/* A soft pool of shade behind the headline and subline, so they hold over the brightest bands. */
.hl::before { background: radial-gradient(ellipse min(520px, 60%) 190px at 50% 200px, rgba(8, 10, 20, .5), rgba(8, 10, 20, .22) 60%, transparent), linear-gradient(180deg, rgba(6, 8, 20, .7) 0%, rgba(6, 8, 20, .45) 30%, rgba(6, 8, 20, .12) 58%, rgba(6, 8, 20, .4) 100%) !important; }
.hl-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 14px 8px; }
.hl-pics i { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(180deg, var(--pa) 0 45%, var(--pb) 45%); position: relative; overflow: hidden; animation: hx-in .4s var(--ease) both; }
.hl-pics i::after { content: ""; position: absolute; left: 38%; bottom: 18%; width: 30%; height: 12%; border-radius: 2px 2px 40% 40%; background: #fff; opacity: .9; }
.hl-pics i:nth-child(2) { animation-delay: .06s; } .hl-pics i:nth-child(3) { animation-delay: .12s; } .hl-pics i:nth-child(4) { animation-delay: .18s; }
.hl-quote { margin: 2px 18px 10px; padding: 10px 14px; border-radius: 10px; background: #202024; font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, system-ui; color: #d6d6dc; animation: hx-in .35s var(--ease) both; }
.hl-pics i { display: block !important; width: auto !important; height: auto !important; background: linear-gradient(180deg, var(--pa) 0 45%, var(--pb) 45%) !important; }
/* Big Sur, small: sky, sea, the cliffs, a white boat. */
.hl-pics i { aspect-ratio: 4 / 3; height: auto !important; background: linear-gradient(180deg, var(--pa) 0%, color-mix(in srgb, var(--pa) 40%, #fff) 48%, var(--pb) 48%, color-mix(in srgb, var(--pb) 70%, #0b2a4a) 100%) !important; }
.hl-pics i::before { content: ""; position: absolute; left: -10%; top: 28%; width: 62%; height: 80%; background: #3b4a3a; clip-path: polygon(0 100%, 0 30%, 30% 0, 55% 25%, 100% 100%); opacity: .9; }
.hl-pics i::after { left: 58% !important; bottom: 24% !important; width: 18% !important; height: 8% !important; }
.hl-pics i:nth-child(2)::before { left: 50%; clip-path: polygon(0 100%, 40% 10%, 70% 0, 100% 40%, 100% 100%); }
.hl-pics i:nth-child(4)::before { left: 40%; width: 70%; }
/* The palette, then the button under it; the palette's answers fit the space between. */
.hz.hl { padding-top: clamp(100px, 14vh, 130px) !important; padding-bottom: 70px !important; min-height: 0; }
.hl-stage { margin-top: clamp(56px, 8vh, 84px) !important; height: 252px !important; }
.hl .hl-cta { margin-top: 18px !important; }
.hz.hl { min-height: 100svh !important; align-content: center; padding-bottom: 60px !important; }

/* ══ Phones (31 October 2026): the whole page, after raycast.com on a phone ══ */
@media (max-width: 760px) {
  /* The bar: the mark, a slim Download, a two-line menu. */
  .bar { top: 10px !important; left: 12px !important; right: 12px !important; height: 54px !important; padding: 0 6px 0 12px !important; border-radius: 16px !important; }
  .bar .mark { font-size: 17px; } .bar .mark-jev { width: 26px; height: 26px; }
  .bar-menu { order: 3; display: grid !important; place-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 !important; margin-left: 2px; border-radius: 11px; }
  .bar-menu i { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease); }
  .bar-nav { margin-left: auto; } .bar-get { padding: 8px 13px !important; font-size: 13.5px !important; margin-left: 0 !important; }
  .bar.bar-night .bar-menu i { background: #fff; }
  /* Sections: the same, shorter air. */
  .pstage, .rc2, .ax, .team, .pocket, #private, #pricing, .faq, .end { padding-top: 96px !important; }
  .sec { padding-top: 96px !important; }
  .w2-title, .st-title, .dayy h2, .rc2-head h2, .ty-side h2, .ax-head h2, .tm-head h2, .pk-text h2, .pk2 h2, .orb-head h2, #private h2, #pricing h2, .faq h2, .end h2 { font-size: 30px !important; line-height: 1.12 !important; }
  .sec .sub, .tm-head .sub, .rc2-head p { font-size: 16px !important; }
  /* The first screen. */
  .hz.hl { padding: 104px 18px 40px !important; }
  .hl .hz-t { font-size: 40px !important; } .hl .hz-s { font-size: 16px !important; }
  .hl-stage { margin-top: 64px !important; height: 270px !important; }
  .hl .hz-field { font-size: 16px; min-height: 54px; } .hl .hz-row { height: 38px; } .hl .hz-row span, .hl .hz-row em { display: none; }
  .hl-h span { display: none; } .hl-quote { font-size: 12.5px; } .hl-pics { grid-template-columns: repeat(2, 1fr); } .hl-pics i:nth-child(n+3) { display: none; }
  /* Why: no pinning on a phone; the title, both lines, and the palette done. */
  .why2 { height: auto !important; } .w2-pin { position: relative !important; height: auto !important; min-height: 0 !important; padding: 96px 18px 20px; display: grid; justify-items: center; gap: 28px; }
  .w2-cloud { display: none !important; } .w2-eye { display: none; }
  .w2-title { position: static !important; padding: 0 !important; } .w2-title span { position: static !important; display: block; opacity: 1 !important; transform: none !important; }
  .w2-title .w2-b { color: var(--ink3) !important; }
  .w2-pal { position: relative !important; left: auto !important; top: auto !important; translate: none !important; transform: none !important; width: 100% !important; }
  .w2-line { position: static !important; translate: none !important; opacity: 1 !important; transform: none !important; width: 100% !important; font-size: 16px !important; }
  /* Team: the room's conversation alone, readable. */
  .tm-win { aspect-ratio: 700 / 820 !important; }
  .tm-points { gap: 18px !important; }
  /* Pricing and the questions: no stray air. */
  .faq { gap: 24px !important; }
}

/* ── Make it yours: every living theme a swatch, words that read on each ── */
/* Light worlds (Sakura, Dunes, Lagoon) turn the words dark and the veil to daylight; dark ones keep white on night. */
.orb::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: linear-gradient(rgba(255,251,248,.7), rgba(255,251,248,.12) 28%, rgba(255,251,248,0) 58%, rgba(255,251,248,.6)); }
.orb-veil { transition: opacity .8s; }
.orb-head h2, .orb-name { transition: color .6s, text-shadow .6s; }
.orb-head h2 span { color: rgba(255, 255, 255, .74) !important; transition: color .6s; }
.orb[data-tone="light"] { color: #1d1520; }
.orb[data-tone="light"]::before { opacity: 1; }
.orb[data-tone="light"] .orb-veil { opacity: 0; }
.orb[data-tone="light"] .orb-head h2 { text-shadow: 0 2px 28px rgba(255,255,255,.7); }
.orb[data-tone="light"] .orb-head h2 span { color: rgba(29, 21, 32, .58) !important; }
.orb[data-tone="light"] .orb-name { text-shadow: 0 1px 18px rgba(255,255,255,.9); }
.orb[data-tone="light"] .orb-name span { color: rgba(29, 21, 32, .72); }
.orb[data-tone="light"] .orb-themes { background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(29,21,32,.1), 0 10px 30px -12px rgba(60,30,40,.3); }
.orb[data-tone="light"] .orb-themes button { color: rgba(29,21,32,.78); }
.orb[data-tone="light"] .orb-themes button[aria-checked="true"] { background: #1d1520; color: #fff; }
.orb-themes { transition: background .6s, box-shadow .6s; }
/* Swatches: the world's own ground with its light at the centre; only the chosen one says its name. */
.orb-themes.swatches { gap: 2px; max-width: min(760px, calc(100% - 32px)); scroll-padding-inline: 40px; }
.orb-themes.swatches button { display: flex; align-items: center; padding: 4px; transition: background .3s, color .3s; }
.orb-themes.swatches i { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--swg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.orb-themes.swatches i::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--swa); box-shadow: 0 0 6px var(--swa); }
.orb-themes.swatches span { max-width: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-width .4s cubic-bezier(.2,.8,.2,1), opacity .25s, margin .4s cubic-bezier(.2,.8,.2,1); }
.orb-themes.swatches button[aria-checked="true"] span { max-width: 170px; opacity: 1; margin: 0 9px 0 8px; }
.orb-themes.swatches button:hover i { transform: scale(1.14); }
.orb-themes.swatches button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .orb-themes.swatches span, .orb-themes.swatches i, .orb::before, .orb-veil { transition: none; } }

/* ══ One frame: every section as wide as the bar (4 November 2026) ══
   The bar is 1180 wide, 16 px in from the window's edges when narrower;
   each section's stage or panel is that wide, never wider nor narrower. */
:root { --frame: 1180px; --frame-in: max(16px, calc((100% - var(--frame)) / 2)); }
.vs-stage, .tv, .dw, .pv, .plans, .sview, .rcx-stage, .rcx-points, .mh, .ew-stage, .wall-stage, .tm-win, .tm-points, .tm-lit, .pk, .pk2, .stage, .hz-orbit { width: min(var(--frame), 100%) !important; }
.rc2, .ag2, .ax { padding-left: var(--frame-in) !important; padding-right: var(--frame-in) !important; }
.team { padding-left: var(--frame-in) !important; padding-right: var(--frame-in) !important; }
.orb { margin-left: var(--frame-in) !important; margin-right: var(--frame-in) !important; }
section.hz, section.act { padding-left: 16px !important; padding-right: 16px !important; }
.ty-pin, .dy-pin { padding-left: var(--frame-in) !important; padding-right: var(--frame-in) !important; }
section.sec { padding-left: 16px !important; padding-right: 16px !important; }
@media (max-width: 760px) { .bar { left: 16px !important; right: 16px !important; } }
@media (min-width: 960px) { section.sec.faq { padding-left: var(--frame-in) !important; padding-right: var(--frame-in) !important; } }
/* A filmed palette (JeviePal.film) draws its own edge and shadow: the rings
   and shadows once given to the drawn palettes it replaced boxed the film's
   clear canvas ("not sure what these borders are for", 4 November 2026). */
.jvf, .rc2-stage.sent:not(.landed) .rc2-pal.jvf { box-shadow: none !important; border: 0 !important; background: none !important; outline: 0 !important; }

/* ══ The menu on a phone (4 November 2026) ══
   The ☰ unrolls a sheet from behind the bar, as raycast.com's menu grows out
   of its bar, but on the compositor only: the sheet slides (transform), its
   scrim and links fade and rise (opacity, transform), the bar itself never
   changes size or ground. The old menu grew the bar to height:auto in one
   frame and faded its glass in over .9 s, so the blurred page showed through
   half a second ("jerky", the phone recording of 4 November). */
.bar-sheet { display: none; }
/* 8 November 2026, the phone recording of that night: the card came down
   empty and the links faded in after it, it went back up as an empty slab with
   Download already back in the bar, it stood 4 px wider than the bar on each
   side, a tapped ☰ kept a grey hover chip, and from 761 to 1140 px (an
   unfolded phone, a tablet) the ☰ showed and opened nothing. Now the sheet
   takes the bar's own box (bar.js sets --bar-t/l/r/h on open), the links ride
   in with the card and back out with it, the bar turns to the card's paper
   while open so the two read as one surface, and the sheet covers every width
   the ☰ is shown at (acts.css: 1140). */
@media (max-width: 1140px) {
  .bar-menu { -webkit-tap-highlight-color: transparent; color: var(--ink); transition: transform .2s var(--ease); }
  .bar-menu:active { transform: scale(.92); }
  .bar-menu:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
  .bar-menu i { transition: transform .42s var(--ease) !important; }
  .menu-open .bar-menu i:first-child { transform: translateY(3.3px) rotate(45deg); }
  .menu-open .bar-menu i:last-child { transform: translateY(-3.3px) rotate(-45deg); }
  /* Download leaves the bar at once and comes back only once the card is past it. */
  .bar-get { transition: opacity .2s var(--ease) .16s, transform .25s var(--spring) !important; }
  .menu-open .bar-get { opacity: 0; pointer-events: none; transition: opacity .1s linear, transform .25s var(--spring) !important; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  /* Open, the bar is the card's top: same paper, no shadow of its own over it.
     It turns at once (a fading shadow showed the bar's round corners against the
     card's straight sides) and stays so while the card closes (bar.js holds
     menu-closing until the card is behind it), then eases back to its glass. */
  html.menu-open .bar, html.menu-open .bar.bar-night, html.menu-closing .bar, html.menu-closing .bar.bar-night { background: var(--paper) !important; box-shadow: none !important; transition: none !important; }
  html.menu-open .bar.bar-night .mark, html.menu-closing .bar.bar-night .mark { color: var(--ink); }
  html.menu-open .bar.bar-night .bar-menu i, html.menu-closing .bar.bar-night .bar-menu i { background: var(--ink); }

  /* The sheet starts at the bar's top edge and clips there, so a card riding up
     never shows above the bar; its scrim (fixed) is not clipped. */
  .bar-sheet { display: block; position: fixed; inset: var(--bar-t, 10px) 0 0; overflow: hidden; z-index: 19; visibility: hidden; pointer-events: none; transition: visibility 0s .28s; }
  .bar-sheet::before { content: ""; position: fixed; inset: 0; background: rgba(23, 21, 31, .32); opacity: 0; transition: opacity .24s var(--ease); }
  .bar-sheet-card { position: absolute; top: 0; left: var(--bar-l, 12px); right: var(--bar-r, 12px); bottom: 10px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--bar-h, 54px) + 22px) 10px calc(14px + env(safe-area-inset-bottom)); border-radius: 16px; background: var(--paper);
    box-shadow: 0 0 0 1px rgba(23, 21, 31, .07), 0 2px 6px -2px rgba(44, 36, 92, .1), 0 30px 60px -24px rgba(44, 36, 92, .45);
    transform: translate3d(0, calc(-100% + var(--bar-h, 54px)), 0); transition: transform .28s cubic-bezier(.5, 0, .75, 0); will-change: transform; }
  /* Closed, the links stay where they are and ride up with the card; they are
     put back to their start only once the sheet is hidden. */
  .bar-sheet a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity 0s .28s, transform 0s .28s; }
  .bar-sheet .sheet-link { padding: 14px 8px; border-radius: 12px; color: var(--ink); font: 600 24px/1.15 var(--display); letter-spacing: -.025em; }
  .bar-sheet .sheet-link::after { content: ""; width: 8px; height: 8px; margin-right: 6px; border: solid var(--ink3); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); opacity: .7; }
  .bar-sheet .sheet-link:active { background: rgba(23, 21, 31, .05); }
  .bar-sheet .sheet-link.on { color: var(--violet); }
  .bar-sheet .sheet-get { justify-content: center; gap: 8px; margin-top: auto; padding: 15px 16px; border-radius: 14px; color: #fff; font: 600 16px var(--sans);
    background: linear-gradient(180deg, #2c2a33, #17151f); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.4), 0 8px 18px -8px rgba(23, 21, 31, .55); }
  .bar-sheet .sheet-get svg { width: 15px; height: 15px; margin-top: -2px; }
  .bar-sheet .sheet-sep { height: 1px; margin: 14px 8px; background: var(--line); opacity: 0; transition: opacity 0s .28s; }

  /* Open: the card comes down from the bar with the links already on it,
     each settling a beat after the one above (16 ms), all done by ~0.3 s. */
  .menu-open .bar-sheet { visibility: visible; pointer-events: auto; transition: visibility 0s; }
  .menu-open .bar-sheet::before { opacity: 1; transition-duration: .36s; }
  .menu-open .bar-sheet-card { transform: none; transition: transform .46s var(--spring); }
  .menu-open .bar-sheet a, .menu-open .bar-sheet .sheet-sep { opacity: 1; transform: none; transition: opacity .22s var(--ease) calc(30ms + var(--i, 0) * 16ms), transform .4s var(--spring) calc(30ms + var(--i, 0) * 16ms); }
}
/* A tapped button keeps :hover on a touch screen; the chip is for a pointer. */
@media (max-width: 1140px) and (hover: none) { .bar-menu:hover { background: none !important; } }
@media (max-width: 1140px) and (prefers-reduced-motion: reduce) {
  .bar-sheet-card, .menu-open .bar-sheet-card { transform: none; opacity: 0; transition: opacity .1s linear; }
  .menu-open .bar-sheet-card { opacity: 1; }
  .bar-sheet a, .menu-open .bar-sheet a, .menu-open .bar-sheet .sheet-sep { transform: none; transition: opacity .1s linear; transition-delay: 0s; }
  .bar-menu i { transition-duration: .01s !important; }
}