@font-face {
  font-family: 'Space Grotesk';
  src: url('./assets/fonts/SpaceGrotesk[wght].ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('./assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root{color-scheme:dark;--ground:#08070b;--text:#e1dced;--muted:#b3a9c2;--violet:#a99cc2;--violet-deep:#6e5f92;--line:#463c56;--gold:#ffcd75;--green:#38b764;--body:'Space Grotesk',Arial,sans-serif;--pixel:'Press Start 2P',monospace;--step:4px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--ground);color:var(--text);font:clamp(1.2rem,1.45vw,1.5rem)/1.27 var(--body);letter-spacing:.015em}::selection{background:var(--gold);color:#08070b}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--gold)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:5px;border-radius:1px}
.skip-link{position:absolute;top:-5rem;left:1rem;z-index:5;background:var(--gold);color:#08070b;padding:.55rem .8rem}.skip-link:focus{top:1rem}
.topbar,.footer{max-width:1240px;margin:auto;padding:1.35rem clamp(1.2rem,5vw,4.2rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid #292331}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);font:12px/1 var(--pixel);letter-spacing:.04em}.brand img{width:auto;height:30px}
.github-icon{width:16px;height:16px;flex:0 0 16px;display:block}.github-link{display:inline-flex;align-items:center;gap:.45rem}
nav{display:flex;align-items:center;gap:clamp(.85rem,3vw,2.4rem);font-size:1.15rem}nav a{text-decoration:none}.github-link{font-size:1.05rem}
main{max-width:1240px;margin:auto;padding:0 clamp(1.2rem,5vw,4.2rem)}
.hero{min-height:620px;padding:5rem 0 4.2rem;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:2rem;border-bottom:1px solid #292331}
.hero-copy,.hero-art{min-width:0}
.availability,.art-caption,.art-footer,.slot-label,.footer>span{font:9px/1.8 var(--pixel);letter-spacing:.08em;color:var(--muted)}.availability{display:flex;align-items:center;gap:.7rem;color:var(--gold);font-size:8px}.status-dot{width:8px;height:8px;background:var(--gold);display:inline-block;box-shadow:8px 0 0 #514023}
h1,h2,h3,p{margin-top:0}h1{font:clamp(2.2rem,5.3vw,4.7rem)/1.27 var(--pixel);letter-spacing:-.075em;margin:1.5rem 0 1.3rem;color:#f2edf9}h1 em{font-style:normal;color:var(--violet)}
.intro{font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.2;max-width:27ch;color:#d1c8df}.hero-actions{margin-top:2rem;display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;padding:.6rem 1rem;border:2px solid;text-decoration:none;font:9px/1.6 var(--pixel);letter-spacing:0;max-width:100%;white-space:normal;text-align:center}.button-primary{background:var(--violet-deep);border-color:var(--violet);color:white}.button-primary:hover{background:#d8ccf2;color:#08070b}.release-note{font-size:1.05rem;color:var(--muted);max-width:18ch}
.hero-art{border:1px solid var(--line);padding:1rem;background:#0c0a10;position:relative}.art-caption,.art-footer{display:flex;justify-content:space-between;gap:.6rem;font-size:7px}.art-caption span,.art-footer span{min-width:0;overflow-wrap:anywhere}.night-map-frame{position:relative;margin:.8rem 0 0;border:1px solid #30283b;line-height:0}.night-map{display:block;width:100%;max-width:100%;height:auto}.map-credit{display:block;padding:.3rem .5rem;background:#08070b;border-top:1px solid #30283b;color:#d4cce0;font:600 clamp(10px,1.9vw,12px)/1.4 var(--body)}.loci-dialogue{display:flex;align-items:center;gap:.9rem;margin:.7rem 0 .8rem;padding:.8rem .9rem;background:#08070b;border:2px solid #6e5f92;border-radius:4px}.dialogue-loci{flex:none;width:44px;height:auto;animation:loci-bob 3.2s ease-in-out infinite}.dialogue-text{min-width:0}.dialogue-label{margin:0 0 .4rem;font:7px/1.7 var(--pixel);letter-spacing:.02em;color:#cfc8dc;overflow-wrap:anywhere}.dialogue-story{margin:0;font-size:1rem;line-height:1.4;color:#f2edf9}.art-footer{padding-top:.6rem;border-top:1px solid #292331;color:#d4cce0}
.thesis{padding:4rem 0;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;border-bottom:1px solid #292331}.thesis>p{font:clamp(1.3rem,3.1vw,2.45rem)/1.45 var(--pixel);letter-spacing:-.06em;margin:0}.thesis>p span{color:var(--gold)}.thesis-aside{max-width:250px;display:flex;gap:.9rem;align-items:flex-start;color:var(--muted)}.thesis-aside p{margin:0}.pixel-star{flex:0 0 12px;width:12px;height:12px;margin:3px;background:var(--gold);transform:rotate(45deg);image-rendering:pixelated}
.section-wrap{padding:5.4rem 0;border-bottom:1px solid #292331}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}.section-heading h2,.media-heading h2,.truth h2{font:clamp(1.2rem,2.7vw,2rem)/1.5 var(--pixel);letter-spacing:-.065em;margin:0}.section-heading>p{max-width:25ch;color:var(--muted);margin:0;font-size:1.2rem}.steps{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:68px minmax(0,1fr);gap:1rem;align-items:start;padding:1.45rem .3rem;border-bottom:1px solid var(--line)}.step-mark{font:12px var(--pixel);color:var(--violet);padding-top:.25rem}.step h3{font-size:1.55rem;color:#f2edf9;margin:0 0 .35rem}.step p{max-width:60ch;color:#c0b6cf;margin:0;line-height:1.2}.result-line{margin:1.5rem 0 0 auto;max-width:42ch;color:var(--gold);text-align:right}
.media{padding-bottom:4.5rem}.media-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;margin-bottom:2.5rem}.media-heading p{max-width:42ch;color:var(--muted);margin:.8rem 0 0}.media-stamp{font:9px/1.65 var(--pixel);color:var(--gold);border:1px dashed var(--gold);padding:.6rem;transform:rotate(4deg);text-align:center}.media-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1px;background:#373040;border:1px solid #373040}.media-slot{min-height:178px;background:#0c0a10;padding:1.1rem;display:flex;flex-direction:column;justify-content:space-between}.media-feature{grid-row:span 2;min-height:360px}.slot-label{font-size:8px}.slot-body{display:flex;gap:1rem;align-items:flex-start}.slot-glyph{flex:0 0 25px;height:25px;border:2px solid var(--violet);background:linear-gradient(90deg,transparent 36%,var(--violet) 36% 44%,transparent 44% 56%,var(--violet) 56% 64%,transparent 64%);image-rendering:pixelated}.media-slot:nth-child(2) .slot-glyph{background:linear-gradient(0deg,transparent 43%,var(--violet) 43% 52%,transparent 52%)}.media-slot:nth-child(3) .slot-glyph{background:repeating-linear-gradient(0deg,transparent 0 5px,var(--violet) 5px 7px),repeating-linear-gradient(90deg,transparent 0 5px,var(--violet) 5px 7px)}.slot-body h3{font-size:1.35rem;color:#e5deef;margin:0 0 .4rem}.media-unavailable{color:var(--muted);font-size:1.1rem;margin:0}.media-link{font-size:1.2rem;color:var(--gold)}.screenshot-gallery{display:flex;gap:.75rem;overflow:auto;padding-top:1rem}.screenshot-gallery img{height:200px;width:auto;max-width:48%;object-fit:contain;object-position:left top;border:1px solid var(--line)}.apk-row{padding-top:1.2rem;margin:0}
.truth{display:grid;grid-template-columns:74px 1fr auto;gap:1.4rem;align-items:center;padding:3.4rem 0}.truth-star{width:22px;height:22px;background:var(--gold);box-shadow:8px 0 0 #6e5f92,0 8px 0 #6e5f92}.truth h2{margin-bottom:.7rem}.truth p{max-width:67ch;color:#c0b6cf;margin:0}.button-secondary{border-color:var(--violet);color:#e7dff2;white-space:nowrap}.button-secondary:hover{background:var(--violet);color:#08070b}
.footer{border:0;border-top:1px solid #292331;max-width:none;padding-left:max(clamp(1.2rem,5vw,4.2rem),calc((100vw - 1156px)/2));padding-right:max(clamp(1.2rem,5vw,4.2rem));color:var(--muted);font-size:1rem}.footer p{margin:0}.footer>span{font-size:7px}
@keyframes loci-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(min-width:1241px){.hero{padding-top:6rem;padding-bottom:5rem}}
@media(max-width:800px){.hero{grid-template-columns:minmax(0,1fr);padding:3.5rem 0;gap:2.5rem;min-height:0}.hero-copy{max-width:600px}.hero-art{max-width:680px;margin:auto;width:100%}.thesis{align-items:flex-start;flex-direction:column}.thesis-aside{max-width:36ch}.section-heading{align-items:flex-start;flex-direction:column;gap:.8rem}.truth{grid-template-columns:54px 1fr}.truth .button{grid-column:2;justify-self:start}.footer{flex-wrap:wrap}.footer p{order:3;width:100%}}
@media(max-width:540px){
  .topbar{padding-top:1rem;padding-bottom:1rem;align-items:flex-start;flex-wrap:wrap}
  nav{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;gap:.55rem .9rem;font-size:1rem}
  nav a:nth-child(2){display:none}
  .brand{font-size:10px}
  .brand img{width:auto;height:26px}
  h1{font-size:clamp(1.25rem,6vw,1.75rem);line-height:1.4}
  h1 em{display:block}
  .hero{padding:2.8rem 0}
  .availability{font-size:7px}
  .art-caption,.art-footer{font-size:6px;flex-wrap:wrap}
  .hero-art{padding:.65rem}
  .thesis{padding:2.8rem 0}
  .section-wrap{padding:3.5rem 0}
  .section-heading h2,.media-heading h2,.truth h2{font-size:1rem;line-height:1.7}
  .step{grid-template-columns:34px minmax(0,1fr);gap:.65rem;padding:1.2rem 0}
  .step-mark{font-size:9px}
  .step h3{font-size:1.35rem}
  .step p{font-size:1.2rem}
  .media-heading{gap:1rem}
  .media-stamp{font-size:7px}
  .media-feature{grid-row:auto;min-height:210px}
  .media-slot{min-height:148px}
  nav a:nth-child(2){display:inline-flex}
  .truth{grid-template-columns:32px 1fr;gap:.9rem}
  .truth-star{font-size:1.6rem}
  .truth .button{grid-column:1/-1}
  .footer>span{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dialogue-loci{animation:none}}

/* Landing typography: smooth reading roles, with pixel lettering kept as an accent. */
html {
  font-size: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  font-synthesis: none;
  max-width: 100%;
}

h1, h2, h3, p {
  font-family: var(--body);
  font-synthesis: none;
}

h1 {
  max-width: 13ch;
  font-size: clamp(2rem, 5.6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 em {
  display: inline;
  font-weight: 700;
}

.intro {
  max-width: 45ch;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.55;
}

nav, .github-link, .release-note, .section-heading > p, .step p,
.media-heading p, .media-unavailable, .media-link, .truth p, .footer {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0;
}

nav { font-size: 1rem; }
.github-link, .release-note { font-size: 1rem; }

h2, .section-heading h2, .media-heading h2, .truth h2 {
  font-family: var(--body);
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.step h3, .slot-body h3 {
  font-family: var(--body);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.step p, .thesis-aside, .media-heading p, .truth p {
  font-size: 1rem;
  line-height: 1.55;
}

.step p, .thesis-aside p, .media-heading p, .truth p {
  max-width: 65ch;
}

.thesis > p {
  max-width: 24ch;
  font-family: var(--body);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.button {
  font-family: var(--pixel);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.brand {
  font-size: 12px;
  font-weight: 400;
}

.availability, .art-caption, .art-footer, .slot-label, .footer > span,
.media-stamp {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.art-caption, .art-footer, .slot-label, .footer > span, .media-stamp {
  font-family: var(--pixel);
  font-weight: 400;
}

@media (max-width: 540px) {
  h1 {
    max-width: 15ch;
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.12;
  }

  h1 em { display: inline; }

  .section-heading h2, .media-heading h2, .truth h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .step h3, .slot-body h3 { font-size: 1.125rem; }
  .step p { font-size: 1rem; line-height: 1.5; }
  .availability, .art-caption, .art-footer, .slot-label, .media-stamp {
    font-size: 12px;
  }
}

/* Keep the skip link legible when focused and hovered. */
.skip-link:focus-visible,
.skip-link:focus-visible:hover {
  color: #08070b;
}

.brand {
  min-height: 44px;
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.media-slot {
  min-height: 148px;
}

/* ===== Release status, real media and companion (T16) ===== */
.release-note {
  margin: 1.25rem 0 0;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.release-note a { color: var(--violet); text-underline-offset: 0.2em; }
.release-note a:hover { color: var(--gold); }
.button-primary { color: #fff; }
.button-primary:hover { color: #08070b; }
.button { transition: background-color 0.18s ease-out, color 0.18s ease-out; }

html { scrollbar-color: var(--violet-deep) var(--ground); }

/* Media section: two films side by side, then the screens. */
.media-heading p { max-width: 52ch; }
.media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-slot { min-height: 0; min-width: 0; gap: 1rem; justify-content: flex-start; padding: 1.25rem; }
.media-feature { grid-row: auto; min-height: 0; }
.media-screens { grid-column: 1 / -1; padding-bottom: 1.75rem; }
.media-frame { position: relative; border: 1px solid var(--line); background: #000; overflow: hidden; }
.teaser-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.media-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.media-caption h3 { margin: 0 0 0.35rem; }
.media-caption p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.media-caption .media-link { font-size: inherit; white-space: nowrap; }

.demo-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  color: #fff; text-decoration: none; cursor: pointer;
}
.demo-facade:hover { color: #fff; }
.demo-facade:focus-visible { outline-offset: -6px; }
.demo-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-play {
  position: absolute; right: 0.9rem; bottom: 0.9rem; width: 60px; height: 60px;
  background: var(--gold); border: 4px solid #08070b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  transition: background-color 0.18s ease-out, transform 0.18s ease-out;
}
.demo-play::after {
  content: ''; position: absolute; inset: 13px 10px 13px 17px; background: #08070b;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.demo-facade:hover .demo-play, .demo-facade:focus-visible .demo-play { background: #fff3d6; transform: scale(1.08); }
.demo-title {
  position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.45rem 0.6rem;
  background: #08070b; border: 1px solid var(--line);
  font: 12px/1.4 var(--pixel); letter-spacing: 0.02em; color: var(--text);
}

/* Real screens in phone frames (the palette-study frame). */
.phone-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; padding-top: 0.5rem; }
.phone-figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.phone { background: #18161d; border: 1px solid #2c2736; border-radius: 30px; padding: 10px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 20; border-radius: 22px; background: #000; }
.phone-figure figcaption { font-size: 0.9375rem; line-height: 1.45; color: var(--muted); padding: 0 0.25rem; }
.phone-figure figcaption strong { display: block; margin-bottom: 0.4rem; font: 12px/1.4 var(--pixel); letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold); }

/* Finale actions. */
.truth-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }

/* Below 1100px the two films would each get under ~450px, so they stack full width. */
@media (max-width: 1100px) {
  .media-grid { grid-template-columns: minmax(0, 1fr); }
  .media-feature { min-height: 0; }
  /* Tablets: three screens a row; the last two sit centred beneath (six tracks, each screen spans two). */
  .phone-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .phone-figure { grid-column: span 2; }
  .phone-figure:nth-child(4) { grid-column: 2 / span 2; }
  .phone-figure:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 800px) {
  .truth-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
}
/* Phones: two screens a row, the fifth centred on its own row. */
@media (max-width: 640px) {
  .phone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.75rem; }
  .phone-figure, .phone-figure:nth-child(4), .phone-figure:nth-child(5) { grid-column: auto; }
  .phone-figure:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 0.75rem) / 2); }
}
@media (max-width: 540px) {
  .media-slot { padding: 1rem; }
  .media-heading { flex-direction: column; align-items: flex-start; }
  .media-heading p { max-width: none; }
  .demo-title { display: none; }
  .truth { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }
  .truth-star { margin-left: 8px; }
  .media-screens { padding-left: 0.75rem; padding-right: 0.75rem; }
  .phone { padding: 6px; border-radius: 22px; }
  .phone img { border-radius: 16px; }
  .truth-actions { grid-column: 1 / -1; flex-direction: column; }
  .release-note { font-size: 0.875rem; }
}

/* The scroll companion: Loci lives in the side gutter on wide screens, in a bottom dock otherwise. Only the button and
   its bubble take pointer events; the track never blocks the page. */
.companion-track {
  display: none; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  --cw: 88px; --ch: 102px;
}
.companion-on .companion-track { display: block; }
.companion-stage {
  position: absolute; bottom: 12vh; width: var(--cw); height: var(--ch);
  left: calc(((100% - 1240px) / 2 + 4.2rem) / 2 - var(--cw) / 2);
  transition: left 0.6s steps(8, end);
}
.companion-stage[data-side='right'] { left: calc(100% - ((100% - 1240px) / 2 + 4.2rem) / 2 - var(--cw) / 2); }
.companion {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: none; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.companion:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.companion-canvas { display: block; width: var(--cw); height: var(--ch); image-rendering: pixelated; }
/* Loci's eyes sit left of centre, so it looks left at rest; travelling right it is mirrored. */
.companion-stage[data-facing='right'] .companion-canvas { transform: scaleX(-1); }
.companion-stage[data-turn='in'] .companion-canvas { animation: companion-turn-in 0.18s steps(1, end); }
.companion-stage[data-turn='out'] .companion-canvas { animation: companion-turn-out 0.18s steps(1, end); }
@keyframes companion-turn-in { 0% { transform: scaleX(1); } 34% { transform: scaleX(0.3); } 67% { transform: scaleX(-0.3); } 100% { transform: scaleX(-1); } }
@keyframes companion-turn-out { 0% { transform: scaleX(-1); } 34% { transform: scaleX(-0.3); } 67% { transform: scaleX(0.3); } 100% { transform: scaleX(1); } }
.companion-stage.is-hopping .companion { animation: companion-hop 0.6s steps(8, end); }
@keyframes companion-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-34px); } }

/* Speech bubble in the style of the app's dialogue box. */
.companion-bubble {
  position: absolute; z-index: 1; width: max-content; max-width: min(260px, calc(100vw - 32px));
  padding: 0.7rem 0.85rem 0.8rem; background: #08070b; border: 2px solid #6e5f92; border-radius: 4px;
  color: #f2edf9; pointer-events: auto;
}
.companion-bubble[hidden] { display: none; }
.companion-bubble::before { content: ''; position: absolute; }
.bubble-label { margin: 0 0 0.4rem; font: 10px/1.5 var(--pixel); letter-spacing: 0.04em; color: #cfc8dc; }
.bubble-text { margin: 0; font: 600 1rem/1.35 var(--body); letter-spacing: 0.01em; }
.bubble-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.15rem; color: var(--gold); font: 700 1rem/1.2 var(--body); }
.bubble-link[hidden] { display: none; }
.companion-bubble { bottom: calc(100% + 14px); left: var(--bubble-left, 0px); }
/* Hover bridge: the gap between Loci and the bubble stays inside the shared hover area. */
.companion-bubble::before { left: 0; right: 0; bottom: -16px; height: 16px; }
/* Tail pointing down at Loci. */
.companion-bubble::after {
  content: ''; position: absolute; bottom: -7px; left: var(--tail-left, 24px); width: 10px; height: 10px; margin-left: -5px;
  background: #08070b; border: solid #6e5f92; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1359px) {
  .companion-track {
    --cw: 48px; --ch: 56px;
    inset: auto 0 0 0; height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--ground); border-top: 1px solid #292331;
  }
  .companion-track::before {
    content: ''; position: absolute; left: 80px; right: 80px; top: 50%;
    border-top: 3px dotted var(--line);
  }
  .companion-stage { bottom: calc(4px + env(safe-area-inset-bottom, 0px)); left: 16px; }
  .companion-stage[data-side='right'] { left: calc(100% - var(--cw) - 16px); }
  @keyframes companion-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .companion-on body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .companion-on { scroll-padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .demo-play { transition: none; }
  .companion-stage { transition: none; }
  .companion, .companion-canvas { animation: none !important; }
}

/* Hero captions: each stays on one line; when both do not fit side by side the second drops below. */
.art-caption { flex-wrap: wrap; }
.art-caption span { white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 541px) { .art-caption { font-size: 9px; } }

/* Phones: the 9:16 cut of the teaser, framed upright and kept within the viewport. */
@media (max-width: 700px) {
  .teaser-video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: 78svh; margin-inline: auto; }
}

/* ===== T25: the app's stepped "rounded pixel" corners (PixelBox corners="round", rule N = 2px) =====
   Outer corner rows are inset 2N then N, the fill's first row N; a 14px SVG 9-slice (6px corners) draws that exactly,
   so no radius and no clip-path (the focus outline stays whole). Notches are transparent. */
.button{background:transparent;border-radius:0;border-image-slice:6 fill;border-image-width:6px;border-image-repeat:stretch;border-image-outset:0}
.button-primary{border-image-source:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'6'%20height%3D'10'%20fill%3D'%236e5f92'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'10'%20height%3D'6'%20fill%3D'%236e5f92'%2F%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'12'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3C%2Fsvg%3E")}
.button-primary:hover,.button-primary:active{background:transparent;border-image-source:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'6'%20height%3D'10'%20fill%3D'%23d8ccf2'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'10'%20height%3D'6'%20fill%3D'%23d8ccf2'%2F%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'12'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3C%2Fsvg%3E")}
.button-secondary{border-image-source:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'12'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3C%2Fsvg%3E")}
.button-secondary:hover,.button-secondary:active{background:transparent;border-image-source:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'4'%20y%3D'2'%20width%3D'6'%20height%3D'10'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'10'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'4'%20y%3D'0'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'4'%20y%3D'12'%20width%3D'6'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'12'%20y%3D'4'%20width%3D'2'%20height%3D'6'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3Crect%20x%3D'10'%20y%3D'10'%20width%3D'2'%20height%3D'2'%20fill%3D'%23a99cc2'%2F%3E%3C%2Fsvg%3E")}
.button-primary:active{color:#08070b}.button-secondary:active{color:#08070b}
.button:focus-visible{border-radius:0}