/* vichsi.com, the night field, in colour (the product hues are in hues.css). One deep ground from the top of the page to the bottom: a dot grid that never restarts,
   a fine grain, soft cyan light behind the things that matter, and frames with a lit edge. The products room and the
   Yusho chapter are one lifted chamber; the white chapters (questions, the forms) are the one break in the dark.
   Every light fades to nothing inside its own box, so no section ever cuts one. Archivo for all text; JetBrains Mono
   only for web addresses. Square corners. Motion on transform and opacity only. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/archivo-400-700-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/archivo-400-700-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { /* taste-skill-ignore: the brand's face for web addresses */ font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-400-600-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { /* taste-skill-ignore: the brand's face for web addresses */ font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-400-600-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --field: #0A0C11;        /* the ground */
  --room: #0F121A;         /* the chamber: the products room, the Yusho chapter, the product panels */
  --raise: #151925;        /* surfaces on the ground: nodes, cards, questions */
  --raise-2: #1B2030;      /* the same, under the pointer */
  --edge: #252B3A;         /* edges of frames and nodes */
  --edge-2: #363D50;
  --ink: #0E0E0E;
  --white: #FFFFFF;
  --paper: #F2F3F1;        /* the one tinted white chapter */
  --mute-ink: #AEB4B3;     /* secondary text on the ground, 9:1 */
  --soft-ink: #CFD3D2;     /* leads on the ground */
  --dim-ink: #7D8496;      /* quiet text on the ground, 5:1 */
  --mute-white: #595E5D;   /* secondary text on white, 6.5:1 */
  --signal: #23D5D5;       /* the light: on the dark only */
  --light: 35, 213, 213;   /* the signal as a triplet, for the lights */
  --teal: #087575;         /* coloured text on white */
  --error: #B42318;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', Menlo, Consolas, monospace; /* taste-skill-ignore: web addresses only */

  --t-hero: clamp(38px, 5.4vw, 84px);
  --t-display: clamp(40px, 5vw, 72px);
  --t-h1: clamp(34px, 4vw, 56px);
  --t-h2: clamp(28px, 2.7vw, 42px);
  --t-h3b: clamp(22px, 1.9vw, 28px);
  --t-h3: clamp(19px, 1.3vw, 22px);
  --t-lead: clamp(17px, 1.15vw, 19px);
  --t-body: 17px;
  --t-small: 14px;

  --margin: clamp(20px, 3.6vw, 56px);
  --gutter: clamp(16px, 2.2vw, 32px);
  --max: 1440px;
  --section: clamp(72px, 8vw, 128px);
  --nav-h: 72px;
  --chevron: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%);   /* the A of the mark: every bullet and marker */
  --mark: clamp(46px, 4.2vw, 60px);   /* the width of the V mark at the centre of the hub */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html:has(.catalog) { scroll-behavior: smooth; } }
body {
  position: relative; margin: 0; background: var(--field); color: var(--white);
  font: 400 var(--t-body)/1.5 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* the field: one dot grid and one grain for the whole page */
body::before, body::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(circle, #1B2131 0.7px, transparent 1px) 0 0 / 24px 24px; /* taste-skill-ignore: the dot field, the products' own canvas */ }
body::after { background: url(/img/grain.png) 0 0 / 128px 128px; opacity: 0.045; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
::selection { background: var(--signal); color: var(--ink); }
.lit ::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.lit :focus-visible { outline-color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: visually hidden text, not a rule */
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 100; padding: 12px 16px; background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; hyphens: none; }
.display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.035em; }
.h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.035em; }
.h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.028em; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 34em; text-wrap: balance; }
.stage .lead { color: var(--soft-ink); }
.lit .lead { color: var(--mute-white); }
p { max-width: 64ch; text-wrap: pretty; }
.addr { font-family: var(--mono); font-size: 0.88em; letter-spacing: 0; } /* taste-skill-ignore: web addresses are set in the brand's mono */
.meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: var(--t-small); color: var(--mute-ink); }
.meta .addr { font-size: var(--t-small); }
.note { margin-top: 12px; font-size: var(--t-small); color: var(--mute-ink); }
.lit .note { color: var(--mute-white); }

/* ---------------------------------------------------------------- grounds and layout */

.stage { position: relative; isolation: isolate; color: var(--white); }
.lit { position: relative; isolation: isolate; background: var(--white); color: var(--ink); }
.paper { background: var(--paper); }
.chamber { background: var(--room); }
.section { padding-block: var(--section); }
.section--tight { padding-top: 0; }
main { overflow-x: clip; }   /* the lights spill past their frames, never past the page */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter) clamp(32px, 5vw, 96px); align-items: end; }
.split .lead { max-width: 30em; }
.split--prose { align-items: start; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.panel { background: var(--room); padding: clamp(24px, 4.4vw, 72px); }
/* a light behind a frame: a circle that reaches nothing at its own edge */
.glow { position: absolute; inset: -14%; z-index: -1; pointer-events: none; background: radial-gradient(circle closest-side, rgba(var(--light), 0.12), rgba(var(--light), 0.035) 55%, transparent); /* taste-skill-ignore: the light behind a frame */ }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; background: var(--ink); color: var(--white);
  font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn .ico { width: 17px; height: 17px; margin-right: -4px; transition: transform var(--t-hover) var(--ease-out); }
.btn[disabled] { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #262929; }
  .btn--white:hover { background: #E3E6E5; }
  .btn:hover .ico { transform: translate(2px, -2px); }
}
.link {
  font-weight: 600; font-size: 15.5px; text-decoration: underline; text-underline-offset: 0.24em; text-decoration-thickness: 0.07em;
  text-decoration-color: rgba(255, 255, 255, 0.38); transition: text-decoration-color var(--t-hover) ease;
}
.lit .link { text-decoration-color: rgba(14, 14, 14, 0.3); }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }
.lead a, p a, dd a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; }
.lit p a, .lit .lead a, .lit dd a { color: var(--teal); }

/* ---------------------------------------------------------------- navigation: it follows the ground under it */

.nav { position: sticky; top: 0; z-index: 50; background: var(--field); color: var(--white); transition: background-color 240ms ease, color 240ms ease; }
.nav[data-ground="light"] { background: var(--white); color: var(--ink); }
.nav[data-ground="light"] .nav__home { color: var(--ink); }
.nav[data-ground="light"] .nav__links a { color: var(--mute-white); }
.nav[data-ground="light"] .nav__links a[aria-current] { color: var(--ink); }
.nav[data-ground="light"] :focus-visible { outline-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav[data-ground="light"] .nav__links a:hover { color: var(--ink); }
}
.nav__in { display: flex; align-items: center; gap: 40px; height: var(--nav-h); }
.nav__home { display: flex; align-items: center; height: 44px; color: var(--white); }
.logo { width: 113px; height: auto; }   /* the VichSI lockup: its mark as tall as before */
.nav__links { display: flex; gap: 32px; margin-left: auto; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--mute-ink); font-size: 15.5px; text-decoration: none; transition: color var(--t-hover) ease; }
.nav__links a[aria-current] { color: var(--white); }
/* the current page carries the A of the mark under its name */
.nav__links a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 9px; height: 7px; margin-left: -4.5px; background: var(--signal); clip-path: var(--chevron); }
.nav[data-ground="light"] .nav__links a[aria-current]::after { background: var(--teal); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--white); } }
.nav__menu { display: none; min-height: 44px; padding: 0 4px; font-weight: 600; font-size: 16px; }
@media (max-width: 900px) {
  .nav__in { gap: 16px; justify-content: space-between; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; flex-direction: column; gap: 0; margin: 0;
    padding: 16px var(--margin) 40px; background: var(--field); visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 200ms;
  }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .nav__links a { min-height: 64px; color: var(--white); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
  .nav__links a[aria-current]::after { position: static; order: -1; width: 14px; height: 11px; margin: 0 14px 0 0; }
  .nav[data-ground="light"] .nav__links { background: var(--white); }
  .nav[data-ground="light"] .nav__links a { color: var(--ink); }
  .nav__menu { display: inline-flex; align-items: center; }
  body.menu-open { overflow: hidden; }
}

/* ---------------------------------------------------------------- the hero: the statement, then the hub */

.hero { padding: clamp(56px, 7vw, 104px) 0 clamp(24px, 3vw, 48px); text-align: center; }
.hero__title { font-size: var(--t-hero); line-height: 1; letter-spacing: -0.04em; max-width: 11.5em; margin-inline: auto; }
.hero__lede { margin: clamp(22px, 2.6vw, 34px) auto 0; max-width: 40em; font-size: var(--t-lead); line-height: 1.45; color: var(--soft-ink); }
.hero__actions { justify-content: center; margin-top: 28px; }
.hero__hub { margin-top: clamp(28px, 4vw, 56px); }

/* the hub: vichsi.com at the centre, its four products around it. The A of the mark steps off the V, aims and flies a straight
   line to one product, and a new A rises out of the V for the next; site.js draws the lines and flies them */
.hub { position: relative; isolation: isolate; aspect-ratio: 16 / 7.2; min-height: 380px; max-height: 600px; text-align: left; }
.hub::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle closest-side, rgba(var(--light), 0.15), rgba(var(--light), 0.05) 46%, transparent); /* taste-skill-ignore: the light behind the hub */ }
.hub__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent); mask-image: radial-gradient(closest-side, #000 52%, transparent); }
.hub__orbit { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid #222727; border-radius: 50%; transform: translate(-50%, -50%); }
.hub__orbit--1 { width: 46%; }
.hub__orbit--2 { width: 78%; }
.hub__lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub__lines path { fill: none; stroke: #343838; stroke-width: 1; stroke-dasharray: 4 6; transition: stroke 240ms ease; }
.hub__lines path.is-lit { stroke: var(--signal); }
.hub__node {
  position: absolute; z-index: 3; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  display: grid; gap: 7px; justify-items: start; width: max-content; max-width: 220px; padding: 14px 16px 15px;
  background: var(--raise); border: 1px solid var(--edge); color: var(--white); text-decoration: none;
  transition: border-color 240ms ease, background-color 240ms ease, transform var(--t-press) var(--ease-out);
}
/* the node's edge lights as its A lands */
.hub__hit { position: absolute; inset: -1px; border: 1px solid var(--signal); opacity: 0; pointer-events: none; }
.hub__node--sam { --x: 15%; --y: 28%; }
.hub__node--mm { --x: 85%; --y: 28%; }
.hub__node--recc { --x: 70%; --y: 78%; }
.hub__node--yusho { --x: 30%; --y: 78%; }
.hub__name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; }
.hub__what { font-size: 13.5px; line-height: 1.35; color: var(--mute-ink); }
.hub__chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; background: var(--field); border: 1px solid var(--edge); font-family: var(--mono); font-size: 13px; color: var(--soft-ink); white-space: nowrap; } /* taste-skill-ignore: addresses in the brand's mono */
.hub__chip::before, .hub__chip::after { content: ""; width: 9px; height: 7px; flex: none; background: #3A3F3F; clip-path: var(--chevron); }
.hub__chip::after { position: absolute; left: 11px; top: 50%; margin-top: -3.5px; background: var(--signal); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .hub__node:hover { border-color: #4A5050; background: var(--raise-2); }
  .hub__node:hover .hub__chip::after { opacity: 1; }
}
.hub__node:active { transform: translate(-50%, -50%) scale(0.98); }
.hub__core { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 10px; justify-items: center; }
.hub__mark { width: var(--mark); }
.hub__mark .mark { width: 100%; height: auto; color: var(--white); overflow: visible; }
.hub__label { font-family: var(--mono); font-size: 13px; color: var(--mute-ink); } /* taste-skill-ignore: the hub's own address */
/* the flying A: white while it sits on the V, its product's hue once it leaves (two layers, so only opacity changes) */
.hub__flyers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hub__fly { position: absolute; left: 0; top: 0; width: 0; height: 0; background: var(--white); clip-path: var(--chevron); opacity: 0; }
.hub__fly i { position: absolute; inset: 0; background: var(--hue, var(--signal)); opacity: 0; }
.hub.is-flying .mark__a { opacity: 0; }

/* ---------------------------------------------------------------- the platforms row: the field hands over to the chamber */

.platforms { padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 88px); background: linear-gradient(to bottom, rgba(15, 18, 26, 0) 20%, var(--room)); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); /* taste-skill-ignore: the row fades at the edges of the page */ }
.marquee__row { display: flex; width: max-content; padding-left: var(--margin); font-weight: 600; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -0.02em; line-height: 1.2; color: var(--dim-ink); white-space: nowrap; }
.marquee__row li { padding-right: clamp(40px, 6vw, 96px); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- the products room: the chamber holds still while the four slide through */

.room { --travel: 168vh; --pin-h: calc(100vh - var(--nav-h)); position: relative; height: calc(var(--pin-h) + var(--travel)); background: var(--room); }
.room__pin { position: sticky; top: var(--nav-h); height: var(--pin-h); display: grid; align-content: center; overflow: clip; }
.room__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.room__list .h2 { margin-bottom: clamp(14px, 1.8vw, 26px); }
.room__items { display: grid; }
.room__item { position: relative; padding: 14px 0 16px; }
.room__tab { display: grid; gap: 3px; width: 100%; text-align: left; color: var(--dim-ink); transition: color var(--t-hover) ease; }
.room__name { font-weight: 600; font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; color: var(--soft-ink); transition: color var(--t-hover) ease; }
.room__hint { font-size: 15px; line-height: 1.4; }
.room__item.is-active .room__tab { color: var(--mute-ink); }
.room__item.is-active .room__name { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .room__tab:hover { color: var(--mute-ink); } .room__tab:hover .room__name { color: var(--white); } }
.room__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease-out); }
.room__body-in { overflow: hidden; min-height: 0; }
.room__item.is-active .room__body { grid-template-rows: 1fr; }
.room__body p { margin-top: 10px; font-size: 15.5px; color: var(--mute-ink); max-width: 30em; }
.room__body .actions { margin-top: 16px; gap: 12px 22px; padding: 0 0 4px 1px; }
.room__track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #1F2323; overflow: hidden; }
.room__track i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.room__item.is-active .room__track i, .room__item.is-past .room__track i { transform: scaleX(1); }
.room__stage { position: relative; isolation: isolate; aspect-ratio: 16 / 10; max-height: calc(var(--pin-h) - 56px); }
.room__light { position: absolute; inset: -18%; z-index: -1; pointer-events: none; background: radial-gradient(circle closest-side, rgba(var(--light), 0.12), rgba(var(--light), 0.035) 55%, transparent); /* taste-skill-ignore: the light behind the frame */ }
.room .browser { position: absolute; inset: 0; transition: opacity 440ms var(--ease-out), transform 440ms var(--ease-out), visibility 0s 440ms; }
.room .browser[data-state="before"] { opacity: 0; transform: translateY(-26px) scale(0.985); visibility: hidden; }
.room .browser[data-state="after"] { opacity: 0; transform: translateY(26px) scale(0.985); visibility: hidden; }
.room .browser[data-state="active"] { opacity: 1; transform: none; visibility: visible; transition: opacity 520ms var(--ease-expo) 60ms, transform 520ms var(--ease-expo) 60ms, visibility 0s; }
.room__steps { position: absolute; left: 0; top: calc(50vh - var(--nav-h)); width: 1px; height: var(--travel); display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .room { timeline-scope: --rs0, --rs1, --rs2, --rs3; }
    .room__step:nth-child(1) { view-timeline: --rs0 block; }
    .room__step:nth-child(2) { view-timeline: --rs1 block; }
    .room__step:nth-child(3) { view-timeline: --rs2 block; }
    .room__step:nth-child(4) { view-timeline: --rs3 block; }
    .js .room__item .room__track i { transition: none; }
    .js .room__item:nth-child(1) .room__track i { animation: fill linear both; animation-timeline: --rs0; animation-range: cover 50vh cover calc(50vh + var(--travel) / 4); }
    .js .room__item:nth-child(2) .room__track i { animation: fill linear both; animation-timeline: --rs1; animation-range: cover 50vh cover calc(50vh + var(--travel) / 4); }
    .js .room__item:nth-child(3) .room__track i { animation: fill linear both; animation-timeline: --rs2; animation-range: cover 50vh cover calc(50vh + var(--travel) / 4); }
    .js .room__item:nth-child(4) .room__track i { animation: fill linear both; animation-timeline: --rs3; animation-range: cover 50vh cover calc(50vh + var(--travel) / 4); }
  }
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- a product's own site: the frame an interface sits in */

.browser { position: relative; display: flex; flex-direction: column; background: #0B0C0C; border: 1px solid #2B2E2E; }
.browser::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(var(--light), 0.55); box-shadow: 0 0 0 1px rgba(var(--light), 0.1), 0 30px 90px -34px rgba(var(--light), 0.38); /* taste-skill-ignore: the lit edge of a frame */ pointer-events: none; }
.browser__bar { display: flex; align-items: center; gap: 14px; flex: none; height: 44px; padding: 0 16px; border-bottom: 1px solid #1F2222; }
.browser__bar::after { content: ""; width: 39px; flex: none; }
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots i { width: 9px; height: 9px; background: #2B2E2E; }
.browser__url { flex: 1; max-width: 340px; margin: 0 auto; height: 28px; line-height: 28px; text-align: center; font-size: 13px; color: var(--mute-ink); background: #151717; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; }
.browser__body { flex: 1; min-height: 0; display: flex; }
.browser__body > [data-ui].screen { flex: 1; height: auto; border: 0; }

/* ---------------------------------------------------------------- Yusho for your business: the chamber goes on, the conversation plays */

.yusho { padding: clamp(8px, 2vw, 32px) 0 var(--section); }
.yusho__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.yusho__text .lockup { height: 44px; width: auto; margin-bottom: 22px; }
.yusho__text .lead { margin-top: 18px; }
.yusho__chat { position: relative; isolation: isolate; }
.beats { display: grid; gap: 16px; margin-top: 30px; }
.beat { position: relative; padding-left: 22px; }
.beat::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 7px; clip-path: var(--chevron); background: var(--signal); transition: background-color 300ms ease; }
.js .beat:not(.is-on)::before { background: #3A3F3F; }
.beat b { display: block; font-weight: 600; font-size: 16px; }
.beat span { display: block; margin-top: 2px; font-size: 15px; color: var(--mute-ink); }

/* the conversation: new messages arrive at the bottom and push the earlier ones up, as in a real chat */
.chat { position: relative; display: flex; flex-direction: column; background: #0E0E0E; border: 1px solid var(--edge); color: #E6E9E8; font-family: var(--sans); font-size: 14px; line-height: 1.45; box-shadow: 0 0 0 1px rgba(var(--light), 0.08), 0 30px 90px -36px rgba(var(--light), 0.4); /* taste-skill-ignore: the lit edge of the frame */ }
.chat__bar { display: flex; align-items: center; gap: 14px; flex: none; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--edge); background: #0B0C0C; white-space: nowrap; }
.chat__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.chat__brand .mark { width: 11px; height: auto; color: var(--white); }
.chat__path { font-family: var(--mono); font-size: 12px; color: var(--mute-ink); overflow: hidden; text-overflow: ellipsis; }
.chat__mode { margin-left: auto; display: inline-flex; border: 1px solid #2E3232; font-size: 12px; }
.chat__mode > * { padding: 6px 10px; color: #8C9392; border-left: 1px solid #2E3232; }
.chat__mode > :first-child { border-left: 0; }
.chat__mode b { color: var(--ink); background: #E6E9E8; font-weight: 600; }
.chat__thread { display: flex; flex-direction: column; gap: 14px; height: 400px; padding: 20px 20px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2E3232 transparent; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 84px); mask-image: linear-gradient(to bottom, transparent, #000 84px); /* taste-skill-ignore: older messages fade out at the top */ }
.chat__thread > * { flex: none; }
/* it scrolls: the messages sit at the bottom until they fill it, and the fade at the top goes once the first is back in view */
.chat__thread > :first-child { margin-top: auto; }
.chat__thread.at-top { -webkit-mask-image: none; mask-image: none; }
.chat__thread:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.chat__msg { max-width: 88%; padding: 12px 14px; }
.chat__msg--you { align-self: flex-end; background: #1F2222; border: 1px solid #2E3232; }
.chat__msg--you small { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; color: #9AA1A0; }
.chat__msg--yu { align-self: flex-start; padding-left: 0; padding-right: 0; color: #D7DBDA; }
.chat__who { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-weight: 600; color: var(--white); }
.chat__who .mark { width: 9px; height: auto; color: var(--white); }
.chat__typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-size: 13px; color: #9AA1A0; }
.chat__typing i { width: 6px; height: 6px; background: #8C9392; animation: blink 1.1s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: 0.18s; }
.chat__typing i:nth-child(3) { animation-delay: 0.36s; }
.chat__typing span { margin-left: 6px; }
.chat__steps { align-self: stretch; display: grid; border: 1px solid var(--edge); }
.chat__step { display: grid; grid-template-columns: auto 7.4em minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid #1F2222; font-size: 13.5px; transition: opacity 300ms ease-out; }
.chat__step:first-child { border-top: 0; }
.chat__step b { font-weight: 600; color: var(--white); }
.chat__step span { color: #9AA1A0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #E6E9E8; border: 1px solid #E6E9E8; color: var(--ink); transition: background-color 200ms, border-color 200ms, color 200ms; }
.chat__tick .ico { width: 13px; height: 13px; }
.js .chat__step:not(.is-done) { opacity: 0.45; }
.js .chat__step:not(.is-done) .chat__tick { background: transparent; border-color: #3A3F3F; color: transparent; }
.statics { display: grid; grid-template-columns: repeat(3, minmax(0, 104px)); gap: 8px; margin-top: 10px; }
.statics__ad { display: grid; align-content: space-between; gap: 4px; aspect-ratio: 1; padding: 10px; overflow: hidden; }
.statics__ad small { font-size: 10px; font-weight: 600; }
.statics__ad b { font-size: 14px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.statics__ad em { font-style: normal; font-size: 10px; font-weight: 600; }
.statics__ad--min { background: #F2F3F1; color: #0E0E0E; }
.statics__ad--min b { font-size: 19px; }
.statics__ad--max { background: var(--hue, #A594FF); color: #0E0E0E; }
.statics__ad--max b { font-size: 17px; }
.statics__ad--max em { justify-self: start; padding: 4px 6px; background: #0E0E0E; color: #FFFFFF; }
.statics__ad--own { background: #1F2430; color: #FFFFFF; border: 1px solid #343B4C; }
.statics__ad--own em { color: #AEB4B3; }
.chat__campaign { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px; background: #101313; border: 1px solid var(--edge); }
.chat__campaign-name b { display: block; font-weight: 600; color: var(--white); }
.chat__campaign-name span { display: block; margin-top: 2px; font-size: 12.5px; color: #9AA1A0; }
.chat__state { font-family: var(--mono); font-size: 12px; color: #9AA1A0; min-width: 4.5em; text-align: right; transition: color 200ms ease-out; }
.chat__campaign.is-live .chat__state { color: var(--signal); }
.chat__foot { display: flex; align-items: center; gap: 10px; flex: none; margin: 8px 20px 18px; }
.chat__input { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid #2E3232; background: #0B0C0C; font-size: 13.5px; color: #8C9392; }
.chat__input span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__send { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; background: var(--signal); color: var(--ink); }
.chat__send .ico { width: 16px; height: 16px; }
.chat__replay { flex: none; height: 48px; padding: 0 14px; border: 1px solid #2E3232; background: #0B0C0C; font-size: 13px; font-weight: 600; color: var(--soft-ink); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s 240ms, border-color var(--t-hover) ease, color var(--t-hover) ease; }
.chat.is-done .chat__replay { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s, border-color var(--t-hover) ease, color var(--t-hover) ease; }
.chat__replay:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chat__replay:hover { border-color: #4A5050; color: var(--white); } }
@keyframes blink { 0%, 100% { opacity: 0.25; } 45% { opacity: 1; } }

/* ---------------------------------------------------------------- why VichSI: what VichSI is. Marketing and AI drawn as two
   fields that overlap, with VichSI where they meet; beside them the team, the hub and the proof; then who it is for. */

.why { overflow: hidden; background: linear-gradient(var(--room), var(--field) 240px); }   /* the chamber hands over to a plain field: no dots here, the mark is the ground */
/* the VichSI mark, large and shaded, standing at the right edge behind the section; the page edge crops it */
.why__art { position: absolute; z-index: -1; top: 5%; right: -7%; height: 90%; pointer-events: none; }
.why__art .mark { width: auto; height: 100%; color: #141822; }
.why__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.why__title { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.035em; }
.why__say { max-width: 21em; font-size: clamp(22px, 2vw, 30px); line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.why__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 96px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
/* the mix: each field spans its own third and the shared middle one, so the middle is where both lie */
.mix { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 24fr) minmax(0, 38fr); min-height: 420px; }
.mix__side { grid-row: 1; display: grid; align-content: center; padding: clamp(22px, 2.4vw, 34px); }
.mix__side--mkt { grid-column: 1 / 3; padding-right: calc(38.7% + 12px); background: rgba(255, 255, 255, 0.05); }
.mix__side--ai { grid-column: 2 / 4; padding-left: calc(38.7% + 12px); background: rgba(35, 213, 213, 0.09); }
.mix__name { font-size: var(--t-h3b); line-height: 1.1; letter-spacing: -0.02em; }
.mix__list { display: grid; gap: 10px; margin-top: 20px; color: var(--soft-ink); }
.mix__list li { position: relative; padding-left: 20px; }
.mix__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 7px; background: var(--mute-ink); clip-path: var(--chevron); }
.mix__side--ai .mix__list li::before { background: var(--signal); }
.mix__meet { position: relative; isolation: isolate; grid-column: 2; grid-row: 1; z-index: 1; align-self: center; display: grid; justify-items: center; gap: 8px; padding: 0 8px; text-align: center; }
.mix__mark .mark { width: 36px; height: auto; color: var(--white); }
.mix__meet b { margin-top: 6px; font-size: var(--t-h3b); font-weight: 600; line-height: 1; letter-spacing: 0.06em; }
.mix__meet small { font-size: var(--t-small); line-height: 1.35; color: var(--soft-ink); }
.mix__hues { display: flex; gap: 6px; margin-top: 4px; }
.mix__hues i { width: 9px; height: 7px; background: var(--hue); clip-path: var(--chevron); }
.why__points { display: grid; gap: clamp(28px, 3vw, 40px); }
.why__point .h3, .why__foot .h3 { max-width: 22em; font-size: var(--t-h3b); line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; }
.why__point p { margin-top: 10px; max-width: 30em; color: var(--mute-ink); }
.why__foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 96px); margin-top: clamp(56px, 7vw, 104px); }
.who { display: grid; gap: 12px; color: var(--mute-ink); }
.who li { position: relative; padding-left: 22px; }
.who li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 7px; background: var(--signal); clip-path: var(--chevron); }
.who b { font-weight: 600; color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .js .mix__side { transition: transform 1000ms var(--ease-expo) 120ms; }
  .js .mix:not(.is-in) .mix__side--mkt { transform: translateX(-20%); }
  .js .mix:not(.is-in) .mix__side--ai { transform: translateX(20%); }
  .js .mix__meet { transition: opacity 500ms var(--ease-out) 760ms, transform 640ms var(--ease-out) 760ms; }
  .js .mix:not(.is-in) .mix__meet { opacity: 0; transform: scale(0.9); }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .js .mix:not(.is-in) .mix__side--mkt { transform: translateY(-16%); }
  .js .mix:not(.is-in) .mix__side--ai { transform: translateY(16%); }
}

/* ---------------------------------------------------------------- About, rebuilt (the owner, 2026-11-04): who VichSI is
   and its vision, its people, what it makes. */

/* the top: every line of text on one left edge (title, story, vision), the mark large in the right half, level with
   them, all white; its A rises into its seat as the page opens */
.about-top { overflow: hidden; padding: clamp(32px, 4vw, 64px) 0 clamp(48px, 5vw, 80px); }
.about-top__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.about-top__title { font-size: clamp(38px, 5.5vw, 86px); line-height: 0.96; letter-spacing: -0.045em; }
.about-top__story { margin-top: clamp(28px, 3vw, 44px); }
.about-top__say { max-width: 20em; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.22; letter-spacing: -0.02em; color: var(--white); }
.about-top__story p + p { max-width: 34em; margin-top: 14px; color: var(--soft-ink); text-wrap: pretty; }
.about-top__vision { margin-top: clamp(28px, 3vw, 44px); }
.about-top__label { font-size: var(--t-small); font-weight: 600; color: var(--signal); }
.about-top__art { position: relative; isolation: isolate; display: grid; place-items: center; }
.about-top__art::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(var(--light), 0.13), rgba(var(--light), 0.04) 50%, transparent); /* taste-skill-ignore: the light behind the mark, fading inside its own box */ }
.about-top__art .mark { width: auto; height: clamp(300px, 36vw, 520px); color: var(--white); overflow: visible; }
.about-top__art .mark__a { transform-box: fill-box; }
.about-top__aim { max-width: 15em; margin-top: 8px; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.06; letter-spacing: -0.03em; color: var(--white); }

/* who we are and what we make, as one section (the owner asked for nawy.com's way, 2026-11-04): a centred title on a
   Raise panel, a square tile per person whose cut-out portrait rises out of its top, each lit in its own tone, then
   the products' logos in one row. Square, not round: VichSI's corners stay sharp. */
/* the whole section fits one desktop screen: the tile follows the screen's height as well as its width */
.crew { --tile: clamp(170px, min(14vw, 23vh), 210px); padding: clamp(28px, min(4vw, 4vh), 60px) 0; text-align: center; }
/* the Raise panel runs from the title to the middle of the last row of tiles, however many rows there are */
.crew__people { padding: clamp(32px, 3vw, 44px) 24px 0; background: linear-gradient(var(--raise), var(--raise)) top center / 100% calc(100% - var(--tile) * 0.38) no-repeat; }
.crew__title { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; }
.crew .lead { max-width: 34em; margin: 12px auto 0; }
.crew__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 24px; margin-top: calc(var(--tile) * 0.19 + 28px); padding: 0; list-style: none; }
.member { display: block; width: var(--tile); color: var(--white); text-decoration: none; }
.member__frame { position: relative; display: block; aspect-ratio: 1; clip-path: inset(-30% 0 0 0); background: radial-gradient(120% 100% at 28% 0%, rgba(var(--tone), 0.5), rgba(var(--tone), 0.12) 72%), var(--raise-2); }
.member__photo { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.member__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(rgba(10, 12, 17, 0), rgba(10, 12, 17, 0.9)); }
.member__text { position: absolute; z-index: 1; left: 6px; right: 6px; bottom: 12px; display: grid; gap: 1px; }
.member__name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.member__role { font-size: 14px; color: var(--soft-ink); }
.crew__make { margin-top: clamp(32px, 3.4vw, 48px); }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(20px, 2.2vw, 32px); padding: 0; list-style: none; }
.logos a { position: relative; display: grid; justify-items: center; padding: 12px 8px 18px; color: inherit; text-decoration: none; }
.logos .lockup { width: auto; height: clamp(38px, 3.2vw, 48px); }
.logos__line { margin-top: 10px; font-size: var(--t-small); color: var(--mute-ink); }
/* the product's hue draws in under its logo when it is pointed at */
.logos a::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 0; height: 2px; background: var(--hue); transform: scaleX(0); transition: transform 360ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .logos a:hover::after { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .js .about-top__art .mark__a { animation: a-seat 1000ms var(--ease-expo) 700ms both; }
}
@keyframes a-seat { from { opacity: 0; transform: translateY(70%); } }

/* ---------------------------------------------------------------- questions */

.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__intro .lead { margin-top: 18px; max-width: 24em; }
.faq__list { display: grid; gap: 6px; }
.faq__item { background: var(--paper); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 22px; font-weight: 600; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .ico { width: 22px; height: 22px; flex: none; transition: transform 240ms var(--ease-out); }
.faq__item[open] .faq__q .ico { transform: rotate(45deg); }
.faq__a { padding: 0 22px 22px; color: var(--mute-white); }
.faq__a p { max-width: 60ch; }
.stage .faq__item { background: var(--raise); }
/* About's questions: brief, in two columns beside a small title, so they and the footer share the last screen */
.faq-brief { padding-block: clamp(48px, 5vw, 72px); }
.faq--brief { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.faq--brief .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.faq--brief .faq__q { padding: 16px 18px; font-size: 15.5px; }
.faq--brief .faq__a { padding: 0 18px 18px; font-size: 15.5px; }
.stage .faq__a { color: var(--mute-ink); }
.access { margin-top: 30px; padding: 26px; background: var(--paper); max-width: 440px; }
.access h3 { font-size: 20px; letter-spacing: -0.015em; }
.access p { margin: 10px 0 20px; color: var(--mute-white); }

/* ---------------------------------------------------------------- the close */

.close { padding-block: var(--section); }
.close__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--light), 0.085), rgba(var(--light), 0.025) 55%, transparent); /* taste-skill-ignore: the last light on the page, faded to nothing inside its own section */ }
.close__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.close .display { max-width: 9em; }
.close__side .btn { margin-top: 26px; }

/* ---------------------------------------------------------------- footer: still the field */

.foot { position: relative; color: var(--white); padding: clamp(48px, 6vw, 88px) 0 32px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.foot__brand .logo { width: 163px; }
.foot__brand p { margin-top: 18px; color: var(--mute-ink); }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__col ul { list-style: none; padding: 0; }
.foot__col h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.foot__col li + li { margin-top: 9px; }
.foot__col a { color: var(--mute-ink); font-size: 15.5px; text-decoration: none; transition: color var(--t-hover) ease; }
.foot__hint { display: block; margin-top: 2px; font-size: 13px; color: var(--dim-ink); }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover { color: var(--white); } }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(48px, 6vw, 80px); font-size: 14px; color: var(--mute-ink); }
.foot__base a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__base a:hover { color: var(--white); } }

/* ---------------------------------------------------------------- inner pages */

.page-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
.page-hero--short { padding-bottom: clamp(36px, 4.5vw, 64px); }
.page-hero--tall { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; }
.page-hero .h1 { max-width: 14em; }
.page-hero .lead { margin-top: 22px; max-width: 34em; }
/* the products and Yusho pages have no dots: the VichSI mark, large and shaded as behind Why VichSI, is their ground;
   About has none either (the owner, 2026-11-04) */
.catalog-page::before, .service-page::before, .about-page::before { content: none; }
/* it rises from behind the first product: the bar stays clear over it until it sticks under the nav */
.page-hero__art { position: absolute; z-index: -1; top: 7%; right: -7%; height: clamp(560px, 62vw, 920px); pointer-events: none; }
.page-hero__art .mark { width: auto; height: 100%; color: #141822; }
/* on the Yusho page it stands at the left edge in Yusho's own violet, behind the page head's words */
.page-hero__art--left { top: 6%; right: auto; left: -16%; height: 94%; }
.page-hero__art--left .mark { color: rgba(var(--hue-rgb), 0.075); }
.page-hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.page-hero__text .lockup { height: 44px; width: auto; margin-bottom: 22px; }
.page-hero__screen { position: relative; isolation: isolate; }
.crumbs { margin-bottom: 26px; font-size: 14px; color: var(--mute-ink); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 10px; }
.crumbs a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--white); } }
.lit .crumbs { color: var(--mute-white); }
@media (hover: hover) and (pointer: fine) { .lit .crumbs a:hover { color: var(--ink); } }

.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px) clamp(32px, 4vw, 72px); margin-top: clamp(36px, 4.5vw, 64px); }
.feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* five points: three across, then two wider ones, so neither row ends in a gap */
.feats--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.feats--5 > * { grid-column: span 2; }
.feats--5 > :nth-child(n+4) { grid-column: span 3; }
.feat h3, .feat h4 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.feat p { margin-top: 10px; color: var(--mute-white); max-width: 34em; text-wrap: balance; }
.stage .feat p { color: var(--mute-ink); }

/* stations: a real sequence, lit one after another when it comes into view */
.stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(36px, 4.5vw, 64px); }
.station { position: relative; padding-top: 26px; }
.station::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 9px; clip-path: var(--chevron); background: var(--signal); transition: background-color 300ms ease; transition-delay: calc(var(--i, 0) * 220ms + 200ms); }
.station::after { content: ""; position: absolute; top: 4px; left: 16px; right: calc(6px - var(--gutter)); height: 2px; background: #232727; }
.station:last-child::after { display: none; }
.js .stations:not(.is-in) .station::before { background: #3A3F3F; }
.station h3, .station h4 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.stations--big h3 { font-size: clamp(20px, 1.6vw, 24px); }
.station p { margin-top: 8px; color: var(--mute-ink); font-size: 15.5px; }

/* the products page: a sticky switcher, then one chapter per product */
.catalog { padding-bottom: var(--section); }
.switcher { position: sticky; top: var(--nav-h); z-index: 40; background: var(--field); }
.switcher::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--field), rgba(10, 12, 17, 0)); pointer-events: none; }   /* what scrolls under the bar fades out, it is not cut */
.switcher.is-clear { background: transparent; }
.switcher.is-clear::after { opacity: 0; }
.switcher__in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.switcher__list { display: flex; flex-wrap: wrap; gap: 4px; }
.switcher__list a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; color: var(--mute-ink); font-weight: 600; font-size: 15px; text-decoration: none; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
.switcher__list a::before { content: ""; width: 9px; height: 7px; flex: none; clip-path: var(--chevron); background: #3A3F3F; transition: background-color var(--t-hover) ease; }
.switcher__list a[aria-current="true"] { color: var(--white); background: var(--raise); }
.switcher__list a[aria-current="true"]::before { background: var(--signal); }
@media (hover: hover) and (pointer: fine) { .switcher__list a:hover { color: var(--white); } }
.switcher__go { margin-left: auto; }
.chapter { padding-top: clamp(32px, 4vw, 64px); scroll-margin-top: 0; }   /* html already keeps the nav clear; the padding clears the bar */
.chapter__panel { position: relative; background: var(--room); padding: clamp(24px, 4.4vw, 72px); }
.chapter__panel::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--signal); opacity: 0; pointer-events: none; }
.chapter:target .chapter__panel::after { animation: arrived 1800ms var(--ease-out) 300ms both; }
@keyframes arrived { 0% { opacity: 0; } 15% { opacity: 0.9; } 100% { opacity: 0; } }
.chapter__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.chapter__text .lockup { height: 44px; width: auto; margin-bottom: 22px; }
.chapter__text .lead { margin-top: 16px; }
.chapter__screen { position: relative; isolation: isolate; }
.chapter__body { display: grid; gap: clamp(40px, 5vw, 72px); margin-top: clamp(48px, 6vw, 88px); }
.chapter__part .h3 { margin-bottom: 0; }
.chapter__part .feats, .chapter__part .stations { margin-top: clamp(20px, 2.4vw, 32px); }
.chapter__access { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: 24px 28px; background: var(--raise); }
.chapter__access p { margin-top: 6px; color: var(--mute-ink); }

/* the Yusho page */
.modes { margin-top: clamp(40px, 5vw, 64px); }
.modes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.mode { padding: 20px 22px; background: var(--raise); }
.mode b { display: inline-block; padding: 5px 10px; background: #E6E9E8; color: var(--ink); font-size: 13px; font-weight: 600; }
.mode p { margin-top: 12px; color: var(--mute-ink); font-size: 15.5px; }

/* about */
.prose { max-width: 36em; font-size: 18px; line-height: 1.55; }
.prose p + p { margin-top: 1em; }

/* contact: white for the most part, a soft Paper that does not glare, with VichSI's own dark on the left (the owner,
   2026-11-04). The dark side carries the title and the mark in Signal; the light side an email window whose title
   follows the subject as it is typed; the A on Send is the mark's, in Signal, and it flies off when the message goes. */
body.contact-page { background: var(--paper); }
.contact-page::before, .contact-page::after { content: none; }
.contact-page .lit, .contact-page .nav[data-ground="light"], .contact-page .nav[data-ground="light"] .nav__links { background: var(--paper); }
.write { --edge-x: calc(max(0px, (100vw - var(--max)) / 2) + var(--margin)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.write__side { position: relative; isolation: isolate; overflow: hidden; padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px) clamp(40px, 4vw, 56px) var(--edge-x); background: var(--room); color: var(--white); }
.write__side .crumbs { color: var(--mute-ink); }
.write__side :focus-visible { outline-color: var(--signal); }
@media (hover: hover) and (pointer: fine) { .write__side .crumbs a:hover { color: var(--white); } }
.write__art { position: absolute; z-index: -1; left: -10%; bottom: -16%; height: 76%; pointer-events: none; }
.write__art .mark { width: auto; height: 100%; color: rgba(35, 213, 213, 0.08); }   /* VichSI's own light, barely there */
.write__title { margin-top: 10px; max-width: 6em; }
.write__main { padding: clamp(32px, 4vw, 56px) var(--edge-x) clamp(40px, 4vw, 56px) clamp(28px, 4vw, 72px); }
.compose { background: #FBFBFA; border: 1px solid #DADDDB; }
.compose__bar { display: flex; align-items: center; height: 48px; padding: 0 18px; background: var(--room); color: var(--white); }
.compose__brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 14px; }
.compose__brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose__brand .mark { width: 11px; height: auto; flex: none; color: var(--white); }
.compose__row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 54px; padding: 0 18px; border-bottom: 1px solid #E6E8E6; transition: box-shadow var(--t-hover) ease; }
.compose__label { font-size: 14.5px; color: var(--mute-white); transition: color var(--t-hover) ease; }
.compose__to { font-size: 15px; color: var(--teal); text-decoration: none; }
.compose input, .compose textarea { width: 100%; padding: 14px 0; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 16px; }
.compose input:focus, .compose textarea:focus { outline: none; }
.compose textarea { display: block; min-height: 180px; padding: 16px 18px; resize: vertical; line-height: 1.55; }
.compose input::placeholder, .compose textarea::placeholder { color: #8A908F; }
/* job title and company, both optional, share one row */
.compose__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compose__pair .compose__row + .compose__row { border-left: 1px solid #E6E8E6; }
/* the line under the row being written in turns Teal; a row that needs fixing turns the error colour */
.compose__row:focus-within, .compose__body:focus-within { box-shadow: inset 0 -2px 0 var(--teal); }
.compose__row:focus-within .compose__label { color: var(--ink); }
.compose__row:has([aria-invalid="true"]), .compose__body:has([aria-invalid="true"]) { box-shadow: inset 0 -2px 0 var(--error); }
.compose__err { grid-column: 2; padding-bottom: 12px; font-size: 14px; color: var(--error); }
.compose__body .compose__err { padding: 0 18px 12px; }
.compose__body { transition: box-shadow var(--t-hover) ease; }
.compose__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 14px 18px; border-top: 1px solid #E6E8E6; }
.compose__note { font-size: 13.5px; color: var(--mute-white); }
.compose__send { background: var(--room); color: var(--white); }
.compose__send i { width: 10px; height: 8px; background: var(--signal); clip-path: var(--chevron); transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .compose__send:hover { background: #1B2030; } .compose__send:hover i { transform: translateY(-3px); } }
.compose__status { padding: 22px 18px; color: var(--mute-white); }
.compose__status--ok { color: var(--ink); font-size: var(--t-lead); }
.compose__status--err { border-top: 1px solid #E6E8E6; color: var(--error); }
.compose.is-sent .compose__fields { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the contact page's footer: one line, on Paper like the page */
.foot--slim { padding: 28px 0; background: var(--paper); color: var(--ink); border-top: 1px solid #E3E6E4; }
.foot__slim { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot__slim .logo { width: 85px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.foot__links a { color: var(--mute-white); font-size: 14.5px; text-decoration: none; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--ink); } }
.foot__copy { font-size: 14px; color: var(--mute-white); }

/* legal */
.legal { max-width: 40em; }
.legal h2 { font-size: var(--t-h3); letter-spacing: -0.015em; margin-top: 40px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { margin-top: 12px; color: var(--mute-white); }
.legal ul { list-style: none; padding-left: 0; }
.legal li { position: relative; padding-left: 20px; }
.legal li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 7px; background: var(--ink); clip-path: var(--chevron); }

/* ---------------------------------------------------------------- motion
   Content is in place without JavaScript; the hidden states exist only under .js and only when motion is welcome. */

.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: rise-line 820ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
  .js [data-load] { opacity: 0; transform: translateY(12px); animation: rise 560ms var(--ease-out) forwards; animation-delay: var(--d, 420ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 640ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .faq__item[open] .faq__a { animation: rise 240ms var(--ease-out); }
  .js .marquee__row { animation: marquee 44s linear infinite; }
  .marquee:hover .marquee__row { animation-play-state: paused; }
}
@keyframes rise-line { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .about-top__art { position: absolute; z-index: -1; right: -8%; top: 8%; }
  .about-top__art .mark { height: clamp(260px, 52vw, 420px); opacity: 0.1; }   /* faint behind the words; the load fade owns the wrapper's opacity */
  .about-top .wrap { position: relative; }
  .write__art { left: auto; right: -60px; bottom: -34%; height: 150%; }
  .page-hero__art--left { top: 40px; left: -22%; height: 600px; }   /* behind the words, above the chat */
  .page-hero__in, .faq, .close__in, .split, .foot__top, .chapter__head, .yusho__in, .why__head, .why__foot, .why__body, .about-top__in, .write { grid-template-columns: minmax(0, 1fr); }
  .why__points { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .faq__intro { position: static; }
  .faq--brief { gap: 20px; }
  .page-hero__screen, .chapter__screen { order: 2; }
  .feats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats--5 > *, .feats--5 > :nth-child(n+4) { grid-column: auto; }
  .feats--5 > :last-child { grid-column: 1 / -1; }

  .hub { aspect-ratio: 4 / 3.3; min-height: 0; max-height: none; }
  .hub__node--sam { --x: 21%; --y: 20%; }
  .hub__node--mm { --x: 79%; --y: 20%; }
  .hub__node--recc { --x: 77%; --y: 81%; }
  .hub__node--yusho { --x: 23%; --y: 81%; }
  .hub__node { max-width: 176px; padding: 11px 13px 12px; }
  .hub__chip { height: 28px; font-size: 13px; }
  .hub__orbit--1 { width: 58%; }
  .hub__orbit--2 { width: 96%; }

  /* the room on one column: the heading, the frame, then the list; it still holds while the four slide through */
  .room { --travel: 160vh; }
  .room__pin { align-content: start; padding-top: 16px; }
  .room__in { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
  .room__list { display: contents; }
  .room__list .h2 { order: 0; margin-bottom: 0; font-size: clamp(24px, 5.5vw, 32px); }
  .room__stage { order: 1; aspect-ratio: auto; height: clamp(220px, calc(100svh - var(--nav-h) - 400px), 460px); max-height: none; }
  .room__items { order: 2; }
  .room__item { padding: 9px 0 11px; }
  .room__name { font-size: 17px; }
  .room__hint { font-size: 14px; }
  .room__item:not(.is-active) .room__hint { display: none; }
  .room__body p { display: none; }
  .room__body .actions { margin-top: 10px; }
  .room__light { display: none; }

  .yusho__chat { margin-top: 8px; }
  .chat__thread { height: 380px; }
  .chat__step { grid-template-columns: auto minmax(0, 1fr); }
  .chat__step span { display: none; }
  .chat__mode { display: none; }
  .chat__msg { max-width: 94%; }
}
@media (max-width: 720px) {
  :root { --t-body: 16.5px; }
  .feats, .feats--3, .feats--5, .modes__list, .faq--brief .faq__list { grid-template-columns: minmax(0, 1fr); }
  /* the footer on a phone: Products on the left, Company and Support stacked beside it */
  .foot { padding-top: 40px; }
  .foot__top { gap: 32px; }
  .foot__brand .logo { width: 116px; }
  .foot__brand p { margin-top: 12px; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot__col:first-child { grid-row: span 2; }
  .foot__base { margin-top: 36px; }
  .faq-brief { padding-block: 40px; }
  /* on a phone, as nawy.com shows it on a phone: the people two to a row, the first alone and centred when there is an odd
     number of them, then the logos large, two to a row */
  .crew { --tile: min(180px, calc((100vw - 2 * var(--margin) - 36px) / 2)); }
  .crew__people { padding-inline: 12px; }
  .crew__list { gap: 44px 12px; }
  .crew__list > li:first-child:nth-last-child(odd) { flex-basis: 100%; display: flex; justify-content: center; }
  .member__name { font-size: 15px; }
  .member__role { font-size: 13px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .logos a { padding: 14px 4px 18px; }
  .logos .lockup { height: 40px; width: auto; max-width: 100%; }
  .why__art { top: auto; bottom: 3%; right: -26%; height: 44%; }
  .page-hero__art { top: 22%; right: -14%; height: 440px; }
  .page-hero__art--left { top: 40px; right: auto; left: -34%; height: 500px; }
  .mix { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 184px auto; min-height: 0; }
  .mix__side { padding: 22px 20px; }
  .mix__side--mkt { grid-column: 1; grid-row: 1 / 3; padding-right: 20px; padding-bottom: 206px; }
  .mix__side--ai { grid-column: 1; grid-row: 2 / 4; padding-left: 20px; padding-top: 206px; }
  .mix__meet { grid-column: 1; grid-row: 2; align-self: stretch; align-content: center; }
  .why__points { grid-template-columns: minmax(0, 1fr); }
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .station:nth-child(even)::after { display: none; }
  .write__side { padding: 28px var(--margin) 34px; }
  .compose__pair { grid-template-columns: minmax(0, 1fr); }
  .compose__pair .compose__row + .compose__row { border-left: 0; }
  .write__main { padding: 24px var(--margin) 48px; }
  .compose__row { grid-template-columns: 4.6em minmax(0, 1fr); padding: 0 14px; }
  .compose textarea { padding: 14px; min-height: 180px; }
  .compose__foot { padding: 12px 14px; }
  .switcher__go { display: none; }
  .switcher__list a { padding: 0 10px; font-size: 14px; }
  .chapter__panel { padding: 22px 18px 26px; margin-inline: calc(-1 * var(--margin) + 8px); }
}
@media (max-width: 560px) {
  :root { --mark: 38px; }
  /* a grid on a phone: two products above the mark and two below, all four the same size and the same distance
     from it; the rows below set off from under the mark (--launch), so every line is as long as its partner */
  .hub { --launch: mirror; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto 1fr; gap: 60px 10px; }
  .hub__node { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: none; gap: 5px; padding: 10px 10px 11px; align-content: start; }
  .hub__node:active { transform: scale(0.98); }
  .hub__node--sam { grid-area: 1 / 1; }
  .hub__node--mm { grid-area: 1 / 2; }
  .hub__node--yusho { grid-area: 3 / 1; }
  .hub__node--recc { grid-area: 3 / 2; }
  .hub__core { position: relative; left: auto; top: auto; transform: none; grid-area: 2 / 1 / 3 / 3; justify-self: center; }
  .hub__name { font-size: 15px; }
  .hub__what { font-size: 13px; }
  .hub__chip { height: 28px; padding: 0 7px; gap: 6px; font-size: 13px; letter-spacing: -0.02em; }
  .hub__chip::after { left: 7px; }
  .hub__label { font-size: 13px; }
  .stations { grid-template-columns: minmax(0, 1fr); }
  .station::after { display: none; }
  .actions { gap: 14px 24px; }
  .btn { width: 100%; }
  .access .btn, .room .btn, .switcher .btn { width: auto; }
  .chat__thread { height: 360px; padding: 16px 14px 10px; }
  .chat__foot { margin: 8px 14px 14px; }
  .chat__bar { padding: 0 12px; gap: 10px; }
}


/* ---------------------------------------------------------------- the product interfaces
   Built in HTML so they stay sharp and light. Sizes are in em of the screen, which scales with its width.
   Every selector here is scoped under [data-ui] at build time, so nothing leaks into the page.
   Inside an interface the one live thing is the go-live control (Publish, Launch, send) or, on
   Mock-Up Machine, the word being spoken: that is the only place the cyan appears. */

[data-ui].screen {
  container-type: inline-size; position: relative; width: 100%;
  display: flex; flex-direction: column;
  background: #0E0E0E; color: #E6E9E8; border: 1px solid #262A2A;
  font-family: "Archivo", Arial, sans-serif; line-height: 1.4; overflow: hidden;
}
[data-ui].screen > :last-child { flex: 1; min-height: 0; }
[data-ui].scr { font-size: clamp(11px, 1.9cqi, 14px); }
[data-ui] .scr__bar {
  display: flex; align-items: center; gap: .9em; flex: none; height: 3.3em; padding: 0 1.15em;
  border-bottom: 1px solid #262A2A; background: #0B0C0C; white-space: nowrap;
}
[data-ui] .scr__brand { display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: 1.02em; letter-spacing: -.01em; }
[data-ui] .scr__brand .mark { width: .7em; height: auto; color: #FFFFFF; }
[data-ui] .scr__path { font-family: "JetBrains Mono", Menlo, monospace; font-size: .82em; color: #9AA1A0; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .scr__path b { color: #C9CECD; font-weight: 400; }
[data-ui] .scr__right { margin-left: auto; display: flex; align-items: center; gap: .6em; }
[data-ui] .scr__btn {
  display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .95em;
  border: 1px solid #343838; font-size: .86em; font-weight: 600; color: #E6E9E8; background: transparent; white-space: nowrap;
}
[data-ui] .scr__btn--go { background: #23D5D5; border-color: #23D5D5; color: #0E0E0E; }
[data-ui] .scr__btn .ico { width: 1.2em; height: 1.2em; }
[data-ui] .seg { display: inline-flex; border: 1px solid #2E3232; }
[data-ui] .seg > span { padding: .45em .85em; font-size: .84em; color: #8C9392; border-left: 1px solid #2E3232; }
[data-ui] .seg > span:first-child { border-left: 0; }
[data-ui] .seg > .on { color: #0E0E0E; background: #E6E9E8; font-weight: 600; }
[data-ui] .tag {
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .6em; border: 1px solid #343838;
  font-family: "JetBrains Mono", Menlo, monospace; font-size: .74em; color: #B4BAB9; white-space: nowrap;
}
[data-ui] .dot { width: .7em; height: .55em; flex: none; background: #C9CECD; clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%); }   /* the A of the mark */
[data-ui] .dot--off { background: #4A4F4F; }
[data-ui] .tick { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; flex: none; border: 1px solid #3A3F3F; color: transparent; }
[data-ui] .tick .ico { width: 1em; height: 1em; }
[data-ui] .tick.ok { background: #E6E9E8; border-color: #E6E9E8; color: #0E0E0E; }

/* SAM: the Kitchen canvas and the Dock */
[data-ui] .sam { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); }
[data-ui] .sam__dock { border-right: 1px solid #262A2A; padding: 1.15em; display: grid; align-content: start; gap: .9em; background: #0B0C0C; }
[data-ui] .sam__dockhead { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .95em; }
[data-ui] .sam__dockhead span { font-family: "JetBrains Mono", Menlo, monospace; font-weight: 400; font-size: .78em; color: #9AA1A0; }
[data-ui] .sam__group { display: grid; gap: .45em; }
[data-ui] .sam__label { font-size: .78em; color: #8C9392; }
[data-ui] .sam__asset { display: flex; align-items: center; gap: .6em; padding: .55em .65em; background: #151717; border: 1px solid #232727; font-size: .84em; color: #D7DBDA; }
[data-ui] .sam__asset::before { content: ""; width: .5em; height: .9em; flex: none; background: radial-gradient(circle, #59605F .09em, transparent .1em) 0 0 / .25em .3em; /* taste-skill-ignore: the product's drag handle */ }
[data-ui] .sam__canvas {
  position: relative; padding: 1.6em 1.4em 1.2em;
  background: radial-gradient(circle, #262A2A .07em, transparent .08em) 0 0 / 1.35em 1.35em, #0E0E0E; /* taste-skill-ignore: the product's own canvas dots */
}
[data-ui] .sam__tree { display: grid; justify-items: center; }
[data-ui] .node { background: #151717; border: 1px solid #2F3434; padding: .75em .9em; text-align: left; }
[data-ui] .node__kind { font-family: "JetBrains Mono", Menlo, monospace; font-size: max(.74em, 10px); letter-spacing: .14em; text-transform: uppercase; color: #9AA1A0; }
[data-ui] .node__name { font-weight: 600; font-size: 1em; margin-top: .15em; letter-spacing: -.01em; }
[data-ui] .node__sub { font-size: .78em; color: #8C9392; margin-top: .2em; }
[data-ui] .node--camp { min-width: 15em; border-color: #3C4242; }
[data-ui] .sam__wire { width: 1px; height: 1.3em; background: #3A3F3F; }
[data-ui] .sam__fork { position: relative; width: 52%; height: 1.3em; border: 1px solid #3A3F3F; border-bottom: 0; }
[data-ui] .sam__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; width: 100%; }
[data-ui] .node--group { display: grid; gap: .65em; }
[data-ui] .node--group.is-picked { border-color: #C9CECD; }
[data-ui] .kw { display: flex; flex-wrap: wrap; gap: .35em; }
[data-ui] .kw span { padding: .28em .5em; background: #1F2222; font-family: "JetBrains Mono", Menlo, monospace; font-size: .7em; color: #C9CECD; }
[data-ui] .hl { display: grid; gap: .3em; }
[data-ui] .hl span { display: block; padding: .4em .55em; border-left: 2px solid #3A3F3F; background: #111313; font-size: .8em; color: #D7DBDA; }
[data-ui] .sam__checks { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em; margin-top: 1.2em; padding-top: 1em; border-top: 1px solid #1F2222; font-size: .82em; color: #B4BAB9; }
[data-ui] .sam__checks > span { display: inline-flex; align-items: center; gap: .5em; }
[data-ui] .sam__checks .tick { width: 1.25em; height: 1.25em; }
[data-ui] .sam__checks strong { margin-left: auto; color: #FFFFFF; font-weight: 600; }
@container (max-width: 520px) {
  [data-ui] .sam { grid-template-columns: 1fr; }
  [data-ui] .sam__dock { display: none; }
  [data-ui] .sam__groups { grid-template-columns: 1fr; }
  [data-ui] .sam__groups .node--group + .node--group { display: none; }
  [data-ui] .sam__fork { display: none; }
}

/* Yusho, in the slider: the brief is typed, sent, and Yusho starts on it */
[data-ui] .yb { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
[data-ui] .yb__thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 1em; padding: 1.4em 1.5em .9em; overflow: hidden; }
[data-ui] .yb__msg { max-width: 80%; font-size: .95em; line-height: 1.45; }
[data-ui] .yb__msg--yu { align-self: flex-start; color: #D7DBDA; }
[data-ui] .yb__who { display: flex; align-items: center; gap: .5em; margin-bottom: .35em; font-weight: 600; color: #FFFFFF; }
[data-ui] .yb__who .mark { width: .62em; height: auto; color: #FFFFFF; }
[data-ui] .yb__msg--you { align-self: flex-end; padding: .85em 1em; background: #1F2222; border: 1px solid #2E3232; color: #E6E9E8; }
[data-ui] .yb__msg--you small { display: block; margin-bottom: .3em; font-family: "JetBrains Mono", Menlo, monospace; font-size: .74em; color: #9AA1A0; }
[data-ui] .yb__pipe { align-self: stretch; display: grid; grid-template-columns: repeat(7, minmax(0, auto)); justify-content: start; column-gap: .9em; list-style: none; margin: .1em 0 0; padding: 0; }
[data-ui] .yb__step { position: relative; display: grid; gap: .1em; min-width: 0; padding: .5em .75em .55em; border: 1px solid #2B2E2E; background: #0B0C0C; }
[data-ui] .yb__step small { font-family: "JetBrains Mono", Menlo, monospace; font-size: .74em; color: #7A8180; }
[data-ui] .yb__step b { font-weight: 400; font-size: .9em; color: #9AA1A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .yb__step + .yb__step::before { content: ""; position: absolute; right: 100%; top: 50%; width: .9em; height: 1px; background: #2B2E2E; }
[data-ui] .yb__step::after { content: ""; position: absolute; inset: -1px; border: 1px solid #23D5D5; opacity: 0; pointer-events: none; }
[data-ui] .yb__step:first-child::after { opacity: 1; }
[data-ui] .yb__step:first-child b { color: #FFFFFF; }
[data-ui].screen.is-live .yb__step::after { opacity: 0; animation: yb-step 4.34s steps(1, end) infinite; animation-delay: calc(var(--i) * .62s); }
[data-ui].screen.is-live .yb__step b { color: #9AA1A0; animation: yb-label 4.34s steps(1, end) infinite; animation-delay: calc(var(--i) * .62s); }
@keyframes yb-step { 0% { opacity: 1; } 14.29% { opacity: 0; } }
@keyframes yb-label { 0% { color: #FFFFFF; } 14.29% { color: #9AA1A0; } }
[data-ui] .yb__typing { align-self: flex-start; display: inline-flex; align-items: center; gap: .4em; font-size: .86em; color: #9AA1A0; }
[data-ui] .yb__typing i { width: .45em; height: .45em; background: #8C9392; animation: yb-blink 1.1s ease-in-out infinite; }
[data-ui] .yb__typing i:nth-child(2) { animation-delay: .18s; }
[data-ui] .yb__typing i:nth-child(3) { animation-delay: .36s; }
[data-ui] .yb__typing span { margin-left: .4em; }
[data-ui] .yb__input { display: flex; align-items: flex-end; gap: .8em; margin: 0 1.5em 1.3em; padding: .65em .6em .6em 1em; border: 1px solid #2E3232; background: #0B0C0C; font-size: .92em; line-height: 1.45; color: #8C9392; }
[data-ui] .yb__text { flex: 1; min-width: 0; padding-bottom: .2em; }
[data-ui].screen.is-typing .yb__text { color: #E6E9E8; }
[data-ui].screen.is-typing .yb__text::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: #E6E9E8; animation: yb-caret 1s steps(1) infinite; }
[data-ui] .yb__send { flex: none; padding: 0 .7em; }
@keyframes yb-blink { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }
@keyframes yb-caret { 50% { opacity: 0; } }
@container (max-width: 520px) {
  [data-ui] .yb .seg { display: none; }
  [data-ui] .yb__msg { max-width: 92%; }
  [data-ui] .yb__pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; }
  [data-ui] .yb__step + .yb__step::before { display: none; }
  [data-ui] .yb__step { padding: .4em .5em .45em; }
}

/* Mock-Up Machine: transcript, vertical video, captions synced to the voice */
[data-ui] .mm { display: grid; grid-template-columns: minmax(0, 1fr) 15.5em; }
[data-ui] .mm__edit { padding: 1.4em; display: grid; align-content: start; gap: 1.2em; border-right: 1px solid #262A2A; }
[data-ui] .mm__label { font-size: .78em; color: #8C9392; margin-bottom: .55em; }
[data-ui] .mm__script { font-size: 1.12em; line-height: 1.6; color: #9AA1A0; letter-spacing: -.005em; }
[data-ui] .mm__script span { padding: .05em .12em; margin: 0 -.12em; }
[data-ui] .mm__folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
[data-ui] .folder { border: 1px solid #262A2A; background: #151717; }
[data-ui] .folder i { display: block; aspect-ratio: 4 / 3; background: #2A2F2E; }
[data-ui] .folder:nth-child(2) i { background: #3A4140; }
[data-ui] .folder:nth-child(3) i { background: #22302F; }
[data-ui] .folder span { display: block; padding: .45em .55em; font-size: .72em; color: #B4BAB9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .mm__wave { display: flex; align-items: center; gap: .16em; height: 2.6em; position: relative; overflow: hidden; }
[data-ui] .mm__wave i { flex: 1; background: #3A3F3F; }
[data-ui] .mm__wave .ph { position: absolute; inset: 0; background: none; }
[data-ui] .mm__wave .ph::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #23D5D5; }
[data-ui] .mm__out { display: grid; place-items: center; align-content: center; padding: 1.4em; background: #0B0C0C; }
[data-ui] .phone { position: relative; width: 100%; max-width: 12.5em; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid #2E3232; background: #1C2020; }
[data-ui] .phone::before { content: ""; position: absolute; left: 12%; right: 46%; bottom: 34%; height: 38%; background: #3A4140; }
[data-ui] .phone::after { content: ""; position: absolute; left: 50%; right: 14%; bottom: 34%; height: 52%; background: #4C5453; }
[data-ui] .cap {
  position: absolute; z-index: 1; left: .7em; right: .7em; bottom: 17%; text-align: center;
  font-weight: 600; font-size: 1.12em; line-height: 1.25; letter-spacing: -.01em; color: #FFFFFF;
}
[data-ui] .cap span { display: inline-block; padding: 0 .12em; }
[data-ui] .phone__tag { position: absolute; z-index: 1; top: .7em; left: .7em; }
[data-ui] .mm__export { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 12.5em; margin-top: .9em; font-size: .8em; color: #8C9392; }
[data-ui] .mm__export .scr__btn--go { background: #E6E9E8; border-color: #E6E9E8; }   /* on this screen the live thing is the caption */
@container (max-width: 560px) {
  [data-ui] .mm { grid-template-columns: 1fr; }
  [data-ui] .mm__edit { border-right: 0; border-bottom: 1px solid #262A2A; }
  [data-ui] .mm__folders { display: none; }
  [data-ui] .phone { max-width: 11em; }
  [data-ui] .mm .seg { display: none; }
}
/* captions: one word at a time, synced to the playhead; runs only while the screen is lit */
[data-ui] .mm [data-w] { transition: none; }
[data-ui].screen.is-live .mm__wave .ph { animation: play 6.4s linear infinite; }
[data-ui].screen.is-live [data-w] { animation: word 6.4s steps(1, end) infinite; animation-delay: calc(var(--i) * .58s); }
[data-ui].screen.is-live .mm__script [data-w] { animation-name: wordtext; }
[data-ui].screen.is-paused .mm__wave .ph, [data-ui].screen.is-paused [data-w] { animation-play-state: paused; }
@keyframes play { from { transform: translateX(0); } 91% { transform: translateX(100%); } to { transform: translateX(100%); } }
@keyframes word { 0% { background: #23D5D5; color: #0E0E0E; } 9% { background: transparent; color: inherit; } }
@keyframes wordtext { 0% { background: rgba(35,213,213,.16); color: #FFFFFF; } 9% { background: transparent; color: #E6E9E8; } }
[data-ui].screen:not(.is-live) .mm__script [data-w] { color: #E6E9E8; }

/* RECC: clients, the launch and the structure it sets up */
[data-ui] .recc { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); }
[data-ui] .recc__clients { border-right: 1px solid #262A2A; background: #0B0C0C; padding: 1.15em; display: grid; align-content: start; gap: .4em; }
[data-ui] .recc__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .95em; margin-bottom: .5em; }
[data-ui] .recc__head span { font-weight: 400; font-size: .78em; color: #8C9392; }
[data-ui] .client { display: flex; align-items: center; gap: .7em; padding: .6em .65em; border: 1px solid transparent; font-size: .86em; color: #C9CECD; }
[data-ui] .client i { width: 1.8em; height: 1.8em; flex: none; display: grid; place-items: center; background: #1F2222; font-style: normal; font-weight: 600; font-size: .9em; color: #E6E9E8; }
[data-ui] .client.on { border-color: #343838; background: #151717; color: #FFFFFF; }
[data-ui] .client.on i { background: #E6E9E8; color: #0E0E0E; }
[data-ui] .client--new { color: #9AA1A0; }
[data-ui] .client--new i { background: transparent; border: 1px dashed #3A3F3F; }
[data-ui] .recc__main { padding: 1.4em; display: grid; align-content: start; gap: 1.15em; }
[data-ui] .field__label { font-size: .78em; color: #8C9392; margin-bottom: .5em; }
[data-ui] .choices { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
[data-ui] .choice { display: flex; align-items: center; gap: .7em; padding: .8em .9em; border: 1px solid #2E3232; background: #151717; font-size: .9em; }
[data-ui] .choice small { display: block; color: #8C9392; font-size: .82em; margin-top: .1em; }
[data-ui] .choice .radio { width: 1.05em; height: 1.05em; flex: none; border: 1px solid #4A4F4F; }
[data-ui] .choice.on { border-color: #C9CECD; }
[data-ui] .choice.on .radio { border: .3em solid #E6E9E8; }
[data-ui] .recc__creative { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .8em; }
[data-ui] .thumb { aspect-ratio: 4 / 5; border: 1px solid #2E3232; background: #3A4140; position: relative; }
[data-ui] .thumb::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 12%; height: 10%; background: rgba(255,255,255,.7); }
[data-ui] .textarea { padding: .7em .8em; border: 1px solid #2E3232; background: #151717; font-size: .86em; line-height: 1.45; color: #C9CECD; }
[data-ui] .recc__structure { display: grid; grid-template-columns: minmax(0, 1fr) 1.2em minmax(0, 1fr) 1.2em minmax(0, 1fr); align-items: center; }
[data-ui] .recc__structure .node { padding: .6em .75em; }
[data-ui] .recc__structure .node__name { font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .recc__join { height: 1px; background: #3A3F3F; }
[data-ui] .recc__launch { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1em; padding-top: 1.1em; border-top: 1px solid #1F2222; }
[data-ui] .recc__launch .scr__btn--go { height: 2.7em; padding: 0 1.4em; font-size: .95em; }
[data-ui] .recc__status { display: inline-flex; align-items: center; gap: .55em; font-size: .84em; color: #9AA1A0; }
[data-ui] .recc__status b { color: #FFFFFF; font-weight: 600; }
@container (max-width: 560px) {
  [data-ui] .recc { grid-template-columns: 1fr; }
  [data-ui] .recc__clients { display: none; }
  [data-ui] .recc__creative { grid-template-columns: 4em minmax(0, 1fr); }
  [data-ui] .recc__structure { grid-template-columns: minmax(0, 1fr); gap: .4em; }
  [data-ui] .recc__join { display: none; }
}

/* one-shot "it works" moments when a screen is first lit */
@media (prefers-reduced-motion: no-preference) {
  .js [data-ui].screen[data-play] .sam__checks .tick { background: transparent; border-color: #3A3F3F; color: transparent; transition: background-color .2s, color .2s, border-color .2s; }
  .js [data-ui].screen.is-on .sam__checks .tick { background: #E6E9E8; border-color: #E6E9E8; color: #0E0E0E; }
  .js [data-ui].screen.is-on .sam__checks > span:nth-child(2) .tick { transition-delay: .3s; }
  .js [data-ui].screen.is-on .sam__checks > span:nth-child(3) .tick { transition-delay: .6s; }
  .js [data-ui].screen.is-on .sam__checks > span:nth-child(4) .tick { transition-delay: .9s; }
  .js [data-ui].screen[data-play] .sam__checks strong { opacity: 0; transition: opacity .3s 1.15s; }
  .js [data-ui].screen.is-on .sam__checks strong { opacity: 1; }
  .js [data-ui].screen[data-play] .recc__structure .node { opacity: .35; transition: opacity .35s ease-out; }
  .js [data-ui].screen.is-on .recc__structure .node { opacity: 1; }
  .js [data-ui].screen.is-on .recc__structure .node:nth-child(3) { transition-delay: .2s; }
  .js [data-ui].screen.is-on .recc__structure .node:nth-child(5) { transition-delay: .4s; }
  .js [data-ui].screen[data-play] .recc__status--done { opacity: 0; transform: translateY(.4em); transition: opacity .3s ease-out .8s, transform .3s ease-out .8s; }
  .js [data-ui].screen.is-on .recc__status--done { opacity: 1; transform: none; }
}

/* the switch: the one control on the page that is real. Paused is grey, Live is the light. */
[data-ui] .switch { position: relative; width: 48px; height: 26px; flex: none; background: #3A3F3F; transition: background-color 200ms ease-out; }
[data-ui] .switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #FFFFFF; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease-out; }
[data-ui] .switch[aria-checked="true"] { background: #23D5D5; }
[data-ui] .switch[aria-checked="true"] .switch__knob { transform: translateX(22px); background: #0E0E0E; }
[data-ui] .switch:active .switch__knob { transform: scale(0.92); }
[data-ui] .switch[aria-checked="true"]:active .switch__knob { transform: translateX(22px) scale(0.92); }

/* ================================================================ the hues.
   Appended after site.css and the interface styles. Each product owns a hue, and that hue lights everything that
   belongs to it: its node in the hub, its light in the slider, its frame, its buttons, its chapter, the ad it makes.
   VichSI itself keeps the signal cyan, and so does the one thing that means "live". Every light still fades to nothing
   inside its own box. Motion stays on transform and opacity. */

[data-product="sam"] { --hue: #6EE7A0; --hue-rgb: 110, 231, 160; }
[data-product="mm"] { --hue: #FF7EB3; --hue-rgb: 255, 126, 179; }
[data-product="recc"] { --hue: #2D88FF; --hue-rgb: 45, 136, 255; }   /* Meta blue, as Facebook sets it on dark */
[data-product="yusho"] { --hue: #A594FF; --hue-rgb: 165, 148, 255; }

.btn[data-hue], [data-product] .btn--white { background: var(--hue); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  [data-product] .btn--white:hover { background: var(--hue); filter: brightness(1.1); }
}
[data-product] .link { text-decoration-color: rgba(var(--hue-rgb), 0.6); }

/* ---------------------------------------------------------------- the hero: four lights, one per product, behind the hub */

.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora__light { position: absolute; width: 46%; height: 54%; background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.17), rgba(var(--hue-rgb), 0.05) 52%, transparent); /* taste-skill-ignore: a product's light, faded inside its own box */ }
.aurora__light[data-product="sam"] { left: 0; top: 32%; }
.aurora__light[data-product="mm"] { left: 54%; top: 30%; }
.aurora__light[data-product="recc"] { left: 44%; top: 44%; }
.aurora__light[data-product="yusho"] { left: 6%; top: 44%; }
.aurora__light--core { --hue-rgb: 35, 213, 213; left: 27%; top: 38%; width: 46%; height: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .js .aurora__light { animation: drift 22s var(--ease-in-out) infinite alternate; }
  .js .aurora__light[data-product="mm"] { animation-duration: 26s; animation-delay: -6s; }
  .js .aurora__light[data-product="recc"] { animation-duration: 24s; animation-delay: -12s; }
  .js .aurora__light[data-product="yusho"] { animation-duration: 28s; animation-delay: -3s; }
  .js .aurora__light--core { animation: breathe 9s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: translate(-2%, 1.5%); opacity: 0.75; } to { transform: translate(2%, -1.5%); opacity: 1; } }
@keyframes breathe { from { opacity: 0.7; } to { opacity: 1; } }

/* the hub: each node, its route and the A that flies to it carry the product's hue */
.hub::before { background: radial-gradient(circle closest-side, rgba(35, 213, 213, 0.12), rgba(35, 213, 213, 0.04) 46%, transparent); /* taste-skill-ignore: the light behind the hub */ }
.hub__node { border-color: rgba(var(--hue-rgb), 0.32); }
.hub__name::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 9px; vertical-align: 1px; background: var(--hue); clip-path: var(--chevron); }
.hub__hit { border-color: var(--hue); }
.hub__chip::after { background: var(--hue); }
.hub__lines path.is-lit { stroke: var(--hue); }
@media (hover: hover) and (pointer: fine) { .hub__node:hover { border-color: rgba(var(--hue-rgb), 0.6); } }

/* ---------------------------------------------------------------- the slider: the chamber takes the colour of the product in the frame */

.room__light { display: none; }
.room .browser::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(circle closest-side, rgba(var(--hue-rgb), 0.17), rgba(var(--hue-rgb), 0.05) 55%, transparent); /* taste-skill-ignore: the product's light behind its frame */ }
.browser::after { border-color: rgba(var(--hue-rgb, 35, 213, 213), 0.6); box-shadow: 0 0 0 1px rgba(var(--hue-rgb, 35, 213, 213), 0.12), 0 30px 90px -34px rgba(var(--hue-rgb, 35, 213, 213), 0.45); /* taste-skill-ignore: the lit edge of a frame, in the product's hue */ }
.room__name::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 10px; vertical-align: 2px; background: var(--hue); clip-path: var(--chevron); opacity: 0.45; transition: opacity var(--t-hover) ease; }
.room__item.is-active .room__name::before, .room__item.is-past .room__name::before { opacity: 1; }
.room__track i { background: var(--hue); }

/* ---------------------------------------------------------------- the ads each product makes, beside its interface */

.out { position: absolute; z-index: 3; margin: 0; pointer-events: none; }
.out__cap { padding: 8px 11px 9px; background: #151925; font-size: 13px; line-height: 1.35; color: var(--soft-ink); }
.out__cap::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 8px; vertical-align: 1px; background: var(--hue); clip-path: var(--chevron); }
.out { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 60px -22px rgba(0, 0, 0, 0.75), 0 24px 80px -30px rgba(var(--hue-rgb), 0.55); /* taste-skill-ignore: the ad floats above the interface */ }
.out--sam { left: -52px; bottom: 34px; width: 300px; }
.out--mm { left: -44px; bottom: -40px; width: 158px; }
.out--recc { left: -52px; bottom: -34px; width: 270px; }
@media (prefers-reduced-motion: no-preference) {
  .js .room .browser .out { opacity: 0; transform: translateY(20px); transition: opacity 420ms var(--ease-out), transform 640ms var(--ease-expo); }
  .js .room .browser[data-state="active"] .out { opacity: 1; transform: none; transition-delay: 260ms; }
  .js .chapter__screen .out { opacity: 0; transform: translateY(20px); transition: opacity 520ms var(--ease-out) 420ms, transform 760ms var(--ease-expo) 420ms; }
  .js .chapter__screen.is-in .out { opacity: 1; transform: none; }
}

/* SAM: a Google Search ad, as it shows on the results page */
.gad { padding: 16px 18px 18px; background: #FFFFFF; color: #202124; font-family: var(--sans); text-align: left; }
.gad__sponsored { font-size: 12px; font-weight: 600; color: #202124; }
.gad__site { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gad__site i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; background: #E8F0FE; color: #1A0DAB; font-style: normal; font-weight: 600; font-size: 13px; }
.gad__site b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.gad__site small { display: block; font-size: 12px; color: #4D5156; line-height: 1.3; }
.gad__title { margin-top: 9px; font-size: 17px; line-height: 1.3; color: #1A0DAB; letter-spacing: -0.005em; }
.gad__desc { margin-top: 5px; font-size: 13px; line-height: 1.45; color: #4D5156; }

/* Mock-Up Machine: the vertical video ad, its captions landing with the voice */
.reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__bars { position: absolute; z-index: 1; left: 8px; right: 8px; top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.reel__bars i { position: relative; height: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.reel__bars i:first-child::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0.6); }
.reel__by { position: absolute; z-index: 1; left: 9px; top: 18px; display: grid; font-size: 10.5px; line-height: 1.25; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.reel__by b { font-size: 11.5px; color: #fff; }
.reel__cap { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 54px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.22; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.reel__cap span { display: inline-block; padding: 0 2px; }
.reel__cta { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 12px; display: grid; place-items: center; height: 30px; background: #fff; color: #0E0E0E; font-size: 12px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .room .browser[data-state="active"] .reel__cap span,
  .chapter__screen.is-in .reel__cap span { animation: reel-word 5.4s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.6s); }
  .room .browser[data-state="active"] .reel__bars i:first-child::after,
  .chapter__screen.is-in .reel__bars i:first-child::after { animation: reel-bar 5.4s linear infinite; }
}
@keyframes reel-word { 0% { background: var(--hue); color: var(--ink); text-shadow: none; } 11% { background: transparent; color: #fff; } }
@keyframes reel-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* RECC: a Meta lead ad with its instant form */
.fad { background: #242526; color: #E4E6EB; font-family: var(--sans); text-align: left; }
.fad__head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 0; }
.fad__head i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; background: var(--hue); color: var(--ink); font-style: normal; font-weight: 700; font-size: 12px; }
.fad__head b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.fad__head small { display: block; font-size: 11.5px; color: #B0B3B8; }
.fad__text { padding: 9px 12px 10px; font-size: 13px; line-height: 1.4; }
.fad picture { display: block; }
.fad img { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; }
.fad__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #3A3B3C; }
.fad__bar small { display: block; font-size: 11px; color: #B0B3B8; }
.fad__bar b { display: block; font-size: 13px; font-weight: 600; }
.fad__btn { flex: none; padding: 7px 12px; background: #4E4F50; color: #E4E6EB; font-size: 12.5px; font-weight: 600; }


/* ---------------------------------------------------------------- Yusho's chapter and page, in Yusho's violet */

[data-product="yusho"] .glow { background: radial-gradient(circle closest-side, rgba(var(--hue-rgb), 0.15), rgba(var(--hue-rgb), 0.045) 55%, transparent); /* taste-skill-ignore: the light behind the chat */ }
[data-product="yusho"] .beat::before { background: var(--hue); }
[data-product="yusho"] .chat { box-shadow: 0 0 0 1px rgba(var(--hue-rgb), 0.16), 0 30px 90px -36px rgba(var(--hue-rgb), 0.5); /* taste-skill-ignore: the lit edge of the frame */ }
[data-product="yusho"] .chat__send { background: var(--hue); }
[data-product="yusho"] .chat__who .mark { color: var(--hue); }
.chat__step.is-done .chat__tick { background: var(--hue, #E6E9E8); border-color: var(--hue, #E6E9E8); }
[data-product="yusho"] .station::before { background: var(--hue); }
[data-product="yusho"] .mode b { background: var(--hue); }

/* ---------------------------------------------------------------- the close: all four lights, faded inside the section */

.close__lights { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.close__lights i { position: absolute; top: 10%; width: 34%; height: 80%; background: radial-gradient(closest-side, rgba(var(--hue-rgb), 0.1), transparent); /* taste-skill-ignore: a product's light, inside the close */ }
.close__lights i:nth-child(1) { left: 0; }
.close__lights i:nth-child(2) { left: 22%; }
.close__lights i:nth-child(3) { left: 44%; }
.close__lights i:nth-child(4) { left: 66%; }
@media (prefers-reduced-motion: no-preference) {
  .js .close__lights i { animation: breathe 7s ease-in-out infinite alternate; }
  .js .close__lights i:nth-child(2) { animation-delay: -2s; }
  .js .close__lights i:nth-child(3) { animation-delay: -4s; }
  .js .close__lights i:nth-child(4) { animation-delay: -6s; }
}
.close__light { display: none; }

/* ---------------------------------------------------------------- the footer and the products page */

.foot__col a[data-product]::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 10px; vertical-align: 1px; background: var(--hue); clip-path: var(--chevron); }
.foot__col a[data-product] + .foot__hint { padding-left: 19px; }
.switcher__list a[aria-current="true"]::before { background: var(--hue); }
.switcher__go[data-product] { background: var(--hue); color: var(--ink); }
.chapter__screen::before { content: ""; position: absolute; inset: -16%; z-index: -1; pointer-events: none; background: radial-gradient(circle closest-side, rgba(var(--hue-rgb), 0.15), rgba(var(--hue-rgb), 0.045) 55%, transparent); /* taste-skill-ignore: the product's light behind its frame */ }
.chapter .station::before { background: var(--hue); }
.chapter__panel::after { border-color: var(--hue); }
.chapter__access h3::before { content: ""; display: inline-block; width: 11px; height: 9px; margin-right: 10px; vertical-align: 1px; background: var(--hue); clip-path: var(--chevron); }

/* ---------------------------------------------------------------- smaller screens */

@media (max-width: 1200px) {
  .out--sam { left: -24px; width: 260px; }
  .out--mm { left: -20px; width: 138px; }
  .out--recc { left: -24px; width: 240px; }
}
@media (max-width: 1000px) {
  .room .out { display: none; }
  .room .browser::before { display: none; }   /* on one column the heading sits right above the frame */
  .chapter__screen .out { position: static; width: auto; max-width: 320px; margin-top: 22px; }
  .chapter__screen .out--mm { max-width: 190px; }
}