/* Quiet warmth outside; graphite/jade app chrome inside. Material tokens are
   independent of the app's dark UI, not an inverted dark theme. */
:root {
  color-scheme: light;
  --b-canvas: #f4f0e8; --b-stage: #e9e0d2; --b-ink: #28392f;
  --b-muted: #586358; --b-faint: #677365; --b-rule: #d4d4c7;
  --b-control: #e8e8de; --b-control-hover: #dce3d6;
  --b-accent: #295a45; --b-accent-hover: #214c38; --b-accent-ink: #f6f6ee;
  --b-selected: #dfe7d9; --b-focus: #276443;
  --b-window: #c5d3c5; --b-window-frame: #b2a286; --b-shadow: #7a735120;
  --b-notice-surface: #f8f5ec; --b-notice-shadow: 0 12px 28px #403b2826;
  --b-projection-fill: #45c39b0a; --b-projection-ray: #457c6157;
  --b-caption-surface: #f4f0e8eb; --b-caption-max: 38rem;
  --b-font-sans: 'Porta Sans', 'Noto Sans SC Variable', sans-serif; --b-font-mono: 'Porta Mono', monospace;
  --b-type-tiny: .6875rem; --b-type-meta: .75rem; --b-type-small: .875rem;
  --b-type-body: 1rem; --b-type-lead: 1.0625rem; --b-type-brand: 1.125rem;
  --b-type-hero: clamp(2.625rem, 5.5vw, 4.875rem);
  --b-type-scene: clamp(1.4375rem, 2.1vw, 1.75rem);
  --b-type-close: clamp(2rem, 3.4vw, 2.875rem);
  --b-radius-control: .5rem; --b-radius-stage: 1.125rem; --b-radius-mark: .5rem;
  --b-space-1: .25rem; --b-space-2: .5rem; --b-space-3: .75rem;
  --b-space-4: 1rem; --b-space-5: 1.25rem; --b-space-6: 1.5rem;
  --b-space-8: 2rem; --b-space-10: 2.5rem; --b-space-12: 3rem;
  --b-space-16: 4rem; --b-space-20: 5rem;
  --b-target: 2.75rem; --b-page-gutter: clamp(1rem, 3.3vw, 3rem);
  --b-content-max: 79rem; --b-phone-width: 18.5rem; --b-stage-height: 46rem;
  --b-phone-left: calc(76% - var(--b-phone-width) / 2); --b-phone-top: 3rem;
  --b-notice-width: 15.5rem; --b-notice-mark: 1.25rem;
  --b-duration: 180ms; --b-ease: cubic-bezier(.16, 1, .3, 1);
  --b-layer-world: 0; --b-layer-content: 1; --b-layer-skip: 2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--b-space-4); }
body { margin: 0; background: var(--b-canvas); color: var(--b-ink); font: var(--b-type-body)/1.65 var(--b-font-sans); -webkit-font-smoothing: antialiased; }
body[data-moment='1'] { --b-window: #c4cdb5; }
body[data-moment='2'] { --b-window: #8e9c9e; }
::selection { background: var(--b-selected); color: var(--b-accent); }
h1, h2, p { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 4px; }
button:disabled { opacity: .45; cursor: default; }
.b-wrap { width: calc(100% - var(--b-page-gutter) * 2); max-width: var(--b-content-max); margin-inline: auto; }
.b-skip { position: absolute; top: var(--b-space-2); left: var(--b-space-2); z-index: var(--b-layer-skip); padding: var(--b-space-3); background: var(--b-canvas); transform: translateY(-200%); }
.b-skip:focus { transform: none; }
.b-nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--b-space-20); gap: var(--b-space-4); }
.b-brand { display: inline-flex; align-items: center; gap: var(--b-space-3); min-height: var(--b-target); font-family: var(--b-font-mono); font-size: var(--b-type-brand); }
.b-brand img { width: var(--b-space-8); height: auto; border-radius: var(--b-radius-mark); }
.b-nav nav { display: flex; gap: var(--b-space-4); font-size: var(--b-type-small); }
.b-nav nav a { display: inline-flex; gap: var(--b-space-2); align-items: center; justify-content: center; min-height: var(--b-target); min-width: var(--b-target); }
.b-nav a:hover { color: var(--b-accent); }
.b-hero { padding: var(--b-space-10) 0 var(--b-space-12); text-align: center; }
.b-eyebrow { display: flex; gap: var(--b-space-2); align-items: center; justify-content: center; font: var(--b-type-tiny)/1.7 var(--b-font-mono); letter-spacing: .035em; margin: 0 auto var(--b-space-6); color: var(--b-muted); }
.b-eyebrow > span { width: var(--b-space-1); height: var(--b-space-1); border-radius: 50%; background: var(--b-accent); }
.b-hero h1 { font-size: var(--b-type-hero); line-height: 1.07; font-weight: 530; letter-spacing: -.055em; }
.b-hero h1 > span { color: var(--b-accent); }
.b-lead { color: var(--b-muted); font-size: var(--b-type-lead); line-height: 1.65; max-width: 36rem; margin: var(--b-space-5) auto var(--b-space-6); }
.b-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-space-3); }
.b-button { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--b-space-8); min-height: var(--b-target); padding: var(--b-space-2) var(--b-space-5); border-radius: var(--b-radius-control); background: var(--b-accent); color: var(--b-accent-ink); font-size: var(--b-type-small); font-weight: 550; transition: background var(--b-duration), transform var(--b-duration); }
.b-button:hover { background: var(--b-accent-hover); }
.b-button:active { transform: translateY(1px); }
.b-button-secondary { color: var(--b-accent); background: var(--b-control); }
.b-button-secondary:hover { background: var(--b-control-hover); }
.b-product-hunt { display: flex; width: 100%; max-width: none; justify-content: center; margin-top: var(--b-space-5); }
.b-product-hunt a { display: inline-flex; min-height: 54px; border-radius: var(--b-radius-control); opacity: .82; transition: opacity var(--b-duration), transform var(--b-duration); }
.b-product-hunt a:hover { opacity: 1; transform: translateY(-1px); }
.b-product-hunt a:active { transform: translateY(0); }
.b-product-hunt img { display: block; width: 250px; max-width: 100%; height: auto; }
.b-story-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--b-space-6); padding: var(--b-space-5) 0; border-top: 1px solid var(--b-rule); }
.b-small-label { display: block; font: var(--b-type-tiny)/1.7 var(--b-font-mono); letter-spacing: .025em; color: var(--b-muted); margin-bottom: var(--b-space-2); }
.b-story-heading strong { font-size: var(--b-type-body); font-weight: 500; }
.b-project { display: flex; gap: var(--b-space-3); align-items: center; font-size: var(--b-type-small); }
.b-project small { display: block; font: var(--b-type-tiny)/1.7 var(--b-font-mono); color: var(--b-muted); margin-top: var(--b-space-1); }
.b-project-dot { width: var(--b-space-2); height: var(--b-space-2); border-radius: 50%; background: var(--b-accent); box-shadow: 0 0 0 4px var(--b-selected); }
.b-stage { position: relative; isolation: isolate; min-height: var(--b-stage-height); background: var(--b-stage); border-radius: var(--b-radius-stage); overflow: hidden; }
.b-world { position: absolute; inset: 0; z-index: var(--b-layer-world); opacity: var(--scene-visibility, 1); }
.b-world canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.b-flat-world { position: absolute; inset: 0; opacity: 1; }
.b-world[data-renderer='ready'] .b-flat-world { visibility: hidden; }
.b-flat-window { position: absolute; width: 65%; height: 60%; top: 22%; left: 17.5%; border: 9px solid var(--b-window-frame); border-radius: 40% 40% var(--b-radius-control) var(--b-radius-control); background: var(--b-window); }
.b-flat-window::after { content: ''; position: absolute; width: 3px; left: 50%; height: 100%; background: var(--b-window-frame); }
.b-flat-sill { position: absolute; inset: 83% 8% auto; height: var(--b-space-2); background: var(--b-window-frame); }
.b-flat-orbit { position: absolute; width: 18%; aspect-ratio: 1; left: 23%; top: 30%; border-radius: 50%; background: var(--b-canvas); opacity: .5; }
.b-scenario { position: absolute; top: var(--b-space-5); left: var(--b-space-5); z-index: var(--b-layer-content); max-width: 17rem; padding: var(--b-space-4); background: var(--b-caption-surface); border-radius: var(--b-radius-control); pointer-events: none; }
[data-copy] { display: none; }
body[data-moment='0'] [data-copy='0'], body[data-moment='1'] [data-copy='1'], body[data-moment='2'] [data-copy='2'] { display: block; }
.b-place { display: block; color: var(--b-muted); font: var(--b-type-meta)/1.6 var(--b-font-mono); margin-bottom: var(--b-space-3); }
.b-scenario h2 { font-size: var(--b-type-scene); line-height: 1.22; letter-spacing: -.035em; font-weight: 550; margin-bottom: var(--b-space-3); text-wrap: pretty; }
.b-scenario p { max-width: 28ch; font-size: var(--b-type-small); color: var(--b-muted); line-height: 1.6; }
.b-phone { position: absolute; z-index: var(--b-layer-content); left: var(--b-phone-left); top: var(--b-phone-top); width: var(--b-phone-width); max-width: calc(100% - var(--b-space-8)); transform-origin: 0 0; }
.b-phone porta-demo { display: block; width: 100%; aspect-ratio: 1 / 2.08; }
.b-phone porta-demo:focus-visible { outline: 2px solid var(--b-focus); outline-offset: var(--b-space-2); border-radius: var(--b-radius-stage); }
/* The phone-sized prop stays with the person. This one DOM screen is its
   projection; the rays, opening transform and captions share the story clock. */
.b-stage:has([data-renderer='ready']) .b-phone { opacity: var(--phone-focus, 0); }
.b-projection-beam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--phone-focus, 0); visibility: hidden; }
.b-stage:has([data-renderer='ready']) .b-projection-beam { visibility: visible; }
.b-projection-beam [data-beam-fill] { fill: var(--b-projection-fill); }
.b-projection-beam [data-beam-edges] { stroke: var(--b-projection-ray); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.b-projection-label { position: absolute; bottom: calc(100% + var(--b-space-2)); left: var(--b-space-2); right: var(--b-space-2); display: flex; align-items: center; gap: var(--b-space-2); color: var(--b-accent); font: var(--b-type-tiny)/1.5 var(--b-font-mono); white-space: nowrap; }
.b-projection-label > span:first-child { width: var(--b-space-1); height: var(--b-space-1); border-radius: 50%; background: var(--b-accent); }
.b-projection-label > span:last-child { margin-left: auto; color: var(--b-muted); }
.b-caption { position: absolute; z-index: var(--b-layer-content); bottom: var(--b-space-4); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(var(--b-caption-max), calc(100% - var(--b-space-8))); padding: var(--b-space-2) var(--b-space-4); border-radius: var(--b-radius-control); background: var(--b-caption-surface); color: var(--b-ink); font-size: var(--b-type-small); line-height: 1.5; text-align: center; text-wrap: pretty; pointer-events: none; }
.b-caption:empty { visibility: hidden; }
.b-notice { position: absolute; z-index: var(--b-layer-content); left: var(--notice-x, 50%); top: var(--notice-y, 50%); transform: translate(-50%, -100%); width: var(--b-notice-width); max-width: calc(100% - var(--b-space-8)); padding: var(--b-space-3) var(--b-space-4); border: 0; border-radius: var(--b-radius-stage); box-shadow: var(--b-notice-shadow); background: var(--b-notice-surface); text-align: left; font-size: var(--b-type-meta); line-height: 1.5; visibility: hidden; opacity: var(--notice-visibility, 0); }
.b-notice::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--b-space-6); background: var(--b-window-frame); transform-origin: top; transform: rotate(var(--notice-tether-angle, 0rad)) scaleY(var(--notice-tether-scale, 1)); pointer-events: none; }
.b-notice-source { display: flex; gap: var(--b-space-2); align-items: center; color: var(--b-muted); margin-bottom: var(--b-space-2); }
.b-notice-source img { width: var(--b-notice-mark); height: var(--b-notice-mark); border-radius: var(--b-radius-mark); }
.b-notice-source > span { margin-left: auto; font-size: var(--b-type-tiny); }
.b-notice strong { display: block; color: var(--b-ink); font-size: var(--b-type-small); font-weight: 550; margin-bottom: var(--b-space-1); }
.b-notice-hint { display: flex; justify-content: space-between; gap: var(--b-space-2); color: var(--b-accent); margin-top: var(--b-space-3); }
body[data-beat='notice'] .b-stage:has([data-renderer='ready'])[data-phone-pose='in-world'] .b-notice { visibility: visible; }
.b-notice:hover { background: var(--b-canvas); }
.b-world-caption { position: absolute; bottom: var(--b-space-20); left: var(--b-space-8); right: var(--b-space-8); display: flex; align-items: center; gap: var(--b-space-4); font: var(--b-type-tiny)/1.5 var(--b-font-mono); letter-spacing: .025em; color: var(--b-muted); opacity: calc(1 - var(--phone-focus, 0)); pointer-events: none; }
.b-world-caption [data-world-location] { display: none; }
body[data-moment='0'] [data-world-location='0'], body[data-moment='1'] [data-world-location='1'], body[data-moment='2'] [data-world-location='2'] { display: inline; }
.b-world-caption i { width: var(--b-space-12); height: 1px; background: var(--b-window-frame); }
.b-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--b-space-6); padding-block: var(--b-space-4); }
.b-scenes, .b-playback { display: flex; gap: var(--b-space-2); }
.b-controls button { display: inline-flex; align-items: center; justify-content: center; gap: var(--b-space-3); min-height: var(--b-target); min-width: var(--b-target); border: 0; border-radius: var(--b-radius-control); padding: var(--b-space-2) var(--b-space-4); background: transparent; font-size: var(--b-type-small); transition: background var(--b-duration), transform var(--b-duration); }
.b-scenes button span { font: var(--b-type-tiny)/1.4 var(--b-font-mono); color: var(--b-muted); }
.b-controls button:hover { background: var(--b-control); }
.b-controls button:active { transform: translateY(1px); }
.b-scenes button[aria-pressed='true'] { background: var(--b-selected); color: var(--b-accent); }
.b-playback button { border: 1px solid var(--b-rule); }
.b-playback [data-narration][aria-pressed='true'] { background: var(--b-selected); color: var(--b-accent); border-color: var(--b-selected); }
.b-progress { height: 2px; overflow: hidden; background: var(--b-rule); }
.b-progress span { display: block; width: 100%; height: 100%; background: var(--b-accent); transform: scaleX(var(--flow-progress, 0)); transform-origin: left center; }
.b-render-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--b-space-4); color: var(--b-muted); padding-top: var(--b-space-2); font-size: var(--b-type-meta); }
.b-render-controls > div { display: flex; align-items: center; flex-wrap: wrap; gap: var(--b-space-4); }
.b-render-controls button { min-height: var(--b-target); border: 0; background: transparent; font-size: inherit; padding: 0 var(--b-space-1); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--b-rule); }
.b-render-controls button:hover { color: var(--b-accent); }
.b-demo-note { font-size: var(--b-type-meta); color: var(--b-muted); margin: var(--b-space-6) auto 0; text-align: center; max-width: 44rem; }
.b-close { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b-space-20); align-items: center; padding-block: var(--b-space-20); }
.b-close h2 { font-size: var(--b-type-close); line-height: 1.17; font-weight: 500; letter-spacing: -.04em; }
.b-close p:not(.b-small-label) { max-width: 40ch; font-size: var(--b-type-body); color: var(--b-muted); }
.b-close a { display: inline-flex; align-items: center; gap: var(--b-space-5); min-height: var(--b-target); margin-top: var(--b-space-4); color: var(--b-accent); font-size: var(--b-type-small); }
.b-close a:hover { text-decoration: underline; text-underline-offset: .3em; }
.b-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-space-3); min-height: var(--b-space-20); border-top: 1px solid var(--b-rule); color: var(--b-muted); font-size: var(--b-type-meta); }
.b-footer a { display: flex; align-items: center; justify-content: center; min-height: var(--b-target); min-width: var(--b-target); }
@media (max-width: 1023px) {
  :root { --b-phone-width: 17.75rem; --b-stage-height: 53rem; --b-phone-top: 11.5rem; --b-type-scene: 1.3rem; }
  .b-world { top: var(--b-space-20); }
  /* The portrait shares space with the phone on tablets. Move the copy above
     both instead of laying it across the character's face. */
  .b-scenario { inset: var(--b-space-6) var(--b-space-5) auto; max-width: none; text-align: center; padding: 0; background: none; }
  .b-scenario h2 br { display: none; }
  .b-scenario p { margin-inline: auto; max-width: 40ch; }
}
@media (max-width: 767px) {
  :root { --b-phone-width: 18rem; --b-type-lead: 1rem; --b-type-scene: 1.4375rem; --b-stage-height: 0; }
  .b-nav { min-height: var(--b-space-16); }
  .b-nav nav { font-size: var(--b-type-meta); }
  .b-nav .b-back { display: none; }
  .b-hero { padding-block: var(--b-space-8); }
  .b-eyebrow { max-width: 28ch; font-size: var(--b-type-tiny); margin: 0 auto var(--b-space-5); }
  .b-eyebrow > span { display: none; }
  .b-hero h1 { letter-spacing: -.048em; }
  .b-lead { max-width: 32ch; }
  .b-desktop-break { display: none; }
  .b-button { gap: var(--b-space-5); padding-inline: var(--b-space-4); }
  .b-story-heading { align-items: flex-start; gap: var(--b-space-3); }
  .b-story-heading strong { font-size: var(--b-type-small); }
  .b-story-heading .b-small-label { max-width: 16ch; }
  .b-project { gap: var(--b-space-2); flex-shrink: 0; font-size: var(--b-type-meta); padding-top: var(--b-space-1); }
  .b-project small { font-size: var(--b-type-tiny); }
  .b-project-dot { display: none; }
  :root { --b-phone-top: 22rem; --b-stage-height: calc(var(--b-phone-top) + var(--b-phone-width) * 2.08 + 6rem); --b-phone-left: calc((100% - var(--b-phone-width)) / 2); --b-mobile-world-top: 7.5rem; --b-mobile-world-height: 17rem; }
  .b-world { top: var(--b-mobile-world-top); bottom: auto; height: var(--b-mobile-world-height); }
  .b-scenario { inset: var(--b-space-6) var(--b-space-5) auto; max-width: none; text-align: center; }
  .b-scenario h2 br { display: none; }
  /* The synced caption carries the action; do not repeat it over the small set. */
  .b-scenario p { display: none; }
  .b-place { margin-bottom: var(--b-space-2); }
  .b-world-caption { display: none; }
  .b-caption { bottom: var(--b-space-4); max-width: calc(100% - var(--b-space-4)); font-size: var(--b-type-meta); }
  .b-controls { flex-direction: column; align-items: stretch; gap: var(--b-space-3); }
  .b-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-space-1); }
  .b-controls .b-scenes button { flex-direction: column; gap: var(--b-space-1); padding: var(--b-space-2) var(--b-space-1); }
  .b-playback { justify-content: center; }
  .b-render-controls { flex-direction: column; gap: 0; padding-top: var(--b-space-4); }
  .b-render-status { text-align: center; }
  .b-render-controls > div { justify-content: center; }
  .b-demo-note { margin-top: var(--b-space-3); padding-inline: var(--b-space-2); }
  .b-close { grid-template-columns: 1fr; gap: var(--b-space-6); padding-block: var(--b-space-12); }
  .b-close h2 br { display: none; }
  .b-footer { padding-block: var(--b-space-4); }
}
@media (max-width: 359px) {
  :root { --b-type-hero: 2.35rem; --b-phone-width: min(17.25rem, calc(100vw - var(--b-page-gutter) * 2 - var(--b-space-8))); }
  .b-project small { max-width: 13ch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}