/* UniOne site. Tokens are the app's r1 tokens (docs/DESIGN.md in the app repo). Notes: MAINTAINING.md */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-wght-normal.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 {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/assets/fonts/source-serif-4-latin-opsz-normal.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 {
  font-family: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/assets/fonts/source-serif-4-latin-ext-opsz-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.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 {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --ground: #F6F6F8;
  --side: #FAFAFB;
  --sb: #EEEFF3;
  --sb-on: #FFFFFF;
  --sb-on-ring: 0 0 0 1px rgba(88, 94, 128, .13), 0 1px 2px rgba(20, 22, 40, .05);
  --surface: #FFFFFF;
  --raise: #FFFFFF;
  --ink: #1B1D29;
  --text: #343746;
  --text-2: #5B5E6D;
  --text-3: #686B7A;
  --line: rgba(88, 94, 128, .14);
  --line-2: rgba(88, 94, 128, .24);
  --hover: rgba(88, 94, 128, .06);
  --action: #2D4FCB;
  --action-ink: #FFFFFF;
  --link: #2846B8;
  --tint: rgba(45, 79, 203, .10);
  --urgent: #B62514;
  --good: #1F6B43;
  --warn: #9A4A00;
  --shadow-float: 0 0 0 1px rgba(88, 94, 128, .10), 0 2px 4px rgba(20, 22, 40, .04), 0 8px 24px rgba(20, 22, 40, .08), 0 24px 48px rgba(20, 22, 40, .06);

  --u-olive-tint: #E4F5CC;   --u-olive-ink: #4D7812;
  --u-green-tint: #CCF5CF;   --u-green-ink: #12781A;
  --u-teal-tint: #CCF5EB;    --u-teal-ink: #12785E;
  --u-cyan-tint: #CCE7F5;    --u-cyan-ink: #166992;
  --u-blue-tint: #CCCCF5;    --u-blue-ink: #1C1CBA;
  --u-violet-tint: #E4CCF5;  --u-violet-ink: #781CBA;
  --u-magenta-tint: #F5CCEE; --u-magenta-ink: #A91991;
  --u-rose-tint: #F5CCD6;    --u-rose-ink: #B11B40;

  /* The atmosphere, as the app has it (docs/DESIGN.md, Atmosphere): a seed hue washed into the
     canvas with film grain over it. Crimson echoes the red "1" in the logo and is never the urgent
     red. Light is a blush wash into paper; dark is the hero. */
  --seed: #F4DADD;
  --unit-ink: 16%;
  --unit-base: #FFFFFF;
  --grain-o: .07;
  --cover-base-mix: 100%;
  --cover-glow-1: 46%;
  --cover-glow-2: 28%;
  --cover-glow-3: 18%;
  --band-text-2: #474A59;
  --band-text-3: #535666;
  --band-link: #22409F;
  --prompt-out: rgba(255, 255, 255, .5);
  --prompt-in: #FFFFFF;
  --ask-bg: #FFFFFF;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hero-bg:
    radial-gradient(ellipse 60% 70% at 88% -12%, rgba(236, 186, 195, .9) 0%, rgba(236, 186, 195, 0) 70%),
    radial-gradient(ellipse 46% 50% at 4% -8%, rgba(244, 214, 219, .95) 0%, rgba(244, 214, 219, 0) 70%),
    linear-gradient(180deg, #F7E3E7 0%, #F7EDF0 34%, #F6F6F8 66%);

  --band-1: #FFFFFF;
  --band-2: #F6F6F8;
  --band-dark: #0B0C11;
  --wall: linear-gradient(165deg, #EBD3D8 0%, #E1DCE4 46%, #D9DCE6 100%);
  --bezel: #0C0D11;
  --bezel-ring: rgba(255, 255, 255, 0);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --col: 1088px;
  --gutter: 32px;
  --header-h: 64px;
  --band-pad: clamp(80px, 9vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #111219;
    --side: #14151D;
    --sb: #16171F;
    --sb-on: rgba(255, 255, 255, .075);
    --sb-on-ring: none;
    --surface: #1A1B24;
    --raise: #22232E;
    --ink: #F2F3F7;
    --text: #D5D7E0;
    --text-2: #A3A6B4;
    --text-3: #9295A5;
    --line: rgba(160, 166, 200, .13);
    --line-2: rgba(160, 166, 200, .24);
    --hover: rgba(160, 166, 200, .07);
    --action: #4A6BE0;
    --action-ink: #FFFFFF;
    --link: #8FA6F6;
    --tint: rgba(110, 140, 250, .16);
    --urgent: #FF8B7E;
    --good: #5CC992;
    --warn: #F0A35A;
    --shadow-float: 0 0 0 1px rgba(160, 166, 200, .14), 0 8px 24px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .30);

    --u-olive-tint: #495E2C;   --u-olive-ink: #A0DF49;
    --u-green-tint: #2C5E30;   --u-green-ink: #5AE266;
    --u-teal-tint: #2C5E51;    --u-teal-ink: #52E0BD;
    --u-cyan-tint: #2C4D5E;    --u-cyan-ink: #79C2E7;
    --u-blue-tint: #2C2C5E;    --u-blue-ink: #9393EC;
    --u-violet-tint: #492C5E;  --u-violet-ink: #C48EEB;
    --u-magenta-tint: #5E2C55; --u-magenta-ink: #EA86D9;
    --u-rose-tint: #5E2C38;    --u-rose-ink: #EA8AA2;

    --seed: #741D29;
    --unit-ink: 24%;
    --unit-base: #0E0F14;
    --grain-o: .11;
    --cover-base-mix: 62%;
    --cover-glow-1: 34%;
    --cover-glow-2: 20%;
    --cover-glow-3: 12%;
    --band-text-2: #CBCDD8;
    --band-text-3: #B5B8C5;
    --band-link: #A9BBF8;
    --prompt-out: rgba(255, 255, 255, .035);
    --prompt-in: #121319;
    --ask-bg: #121319;
    --hero-bg:
      radial-gradient(ellipse 62% 64% at 86% -12%, #8E2636 0%, rgba(122, 31, 43, 0) 72%),
      radial-gradient(ellipse 48% 46% at 2% -8%, rgba(116, 29, 41, .78) 0%, rgba(116, 29, 41, 0) 70%),
      linear-gradient(180deg, #3A141B 0%, #24121A 30%, #0E0F15 62%);

    --band-1: #14151D;
    --band-2: #111219;
    --band-dark: #0B0C11;
    --wall: linear-gradient(165deg, #33161C 0%, #1D1620 44%, #171822 100%);
    --bezel-ring: rgba(160, 166, 200, .22);
  }
}

/* A dark band, and the header while one is under it, take the app's dark tokens in either theme. */
.band-dark,
.site-header[data-tone="dark"] {
  color-scheme: dark;
  --ground: #111219;
  --side: #14151D;
  --sb: #16171F;
  --sb-on: rgba(255, 255, 255, .075);
  --sb-on-ring: none;
  --surface: #1A1B24;
  --raise: #22232E;
  --ink: #F2F3F7;
  --text: #D5D7E0;
  --text-2: #A3A6B4;
  --text-3: #9295A5;
  --line: rgba(160, 166, 200, .13);
  --line-2: rgba(160, 166, 200, .24);
  --hover: rgba(160, 166, 200, .07);
  --action: #4A6BE0;
  --action-ink: #FFFFFF;
  --link: #8FA6F6;
  --tint: rgba(110, 140, 250, .16);
  --urgent: #FF8B7E;
  --good: #5CC992;
  --warn: #F0A35A;
  --shadow-float: 0 0 0 1px rgba(160, 166, 200, .14), 0 8px 24px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .30);
  --u-olive-tint: #495E2C;   --u-olive-ink: #A0DF49;
  --u-green-tint: #2C5E30;   --u-green-ink: #5AE266;
  --u-teal-tint: #2C5E51;    --u-teal-ink: #52E0BD;
  --u-cyan-tint: #2C4D5E;    --u-cyan-ink: #79C2E7;
  --u-blue-tint: #2C2C5E;    --u-blue-ink: #9393EC;
  --u-violet-tint: #492C5E;  --u-violet-ink: #C48EEB;
  --u-magenta-tint: #5E2C55; --u-magenta-ink: #EA86D9;
  --u-rose-tint: #5E2C38;    --u-rose-ink: #EA8AA2;
  --seed: #741D29;
  --unit-ink: 24%;
  --unit-base: #0E0F14;
  --grain-o: .11;
  --cover-base-mix: 62%;
  --cover-glow-1: 34%;
  --cover-glow-2: 20%;
  --cover-glow-3: 12%;
  --band-text-2: #CBCDD8;
  --band-text-3: #B5B8C5;
  --band-link: #A9BBF8;
  --prompt-out: rgba(255, 255, 255, .035);
  --prompt-in: #121319;
  --ask-bg: #121319;
  --wall: linear-gradient(165deg, #33161C 0%, #1D1620 44%, #171822 100%);
}

/* Text that sits on an atmosphere takes inks a step further from it (the app's `.on-band`). */
.on-band, .hero .lede, .hero-actions, .hero .caption {
  --text-2: var(--band-text-2);
  --text-3: var(--band-text-3);
  --link: var(--band-link);
}

@media (max-width: 1024px) { :root { --gutter: 28px; } }
@media (max-width: 768px) { :root { --gutter: 24px; --header-h: 60px; } }
@media (max-width: 480px) { :root { --gutter: 16px; } }

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--band-2); }
body {
  margin: 0;
  background: var(--band-2);
  color: var(--text);
  font: 400 15px/24px var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
b, strong { font-weight: 480; color: var(--ink); }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--tint); }
code { font: 500 0.86em/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
kbd { font: 500 11px/16px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 480; }
.skip:focus { top: 12px; text-decoration: none; }

.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; padding: 0 16px; border-radius: 999px;
  font: 480 13px/1 var(--sans); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  text-decoration: none;
}
.btn:hover { text-decoration: none; box-shadow: inset 0 0 0 100px var(--hover); }
.btn:active { transform: scale(.98); }
.btn-lg { height: 40px; padding: 0 20px; font-size: 15px; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
.btn-primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.btn-primary:hover { box-shadow: inset 0 0 0 100px rgba(10, 12, 30, .12); }
a.btn:not([href]) { cursor: default; }
a.btn:not([href]):active { transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.site-header[data-glass] {
  background: color-mix(in srgb, var(--ground) 74%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line);
}
.site-header[data-tone="dark"][data-glass] { background: color-mix(in srgb, #0B0C11 72%, transparent); }
.nav { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 500 16.5px/1 var(--sans); letter-spacing: -0.02em; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; background: #FFFFFF; padding: 2px; box-shadow: 0 0 0 1px var(--line); }
/* The faceted mark itself, no tile: dark facets on a light ground, light facets on a dark one. */
.brand .mark { width: 30px; height: 30px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.brand .mark-l { display: none; }
.site-header[data-tone="dark"] .brand .mark-d { display: none; }
.site-header[data-tone="dark"] .brand .mark-l { display: block; }
@media (prefers-color-scheme: dark) { .brand .mark-d { display: none; } .brand .mark-l { display: block; } }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--text-2); font: 400 14px/20px var(--sans); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------- atmosphere */
/* The hero and the top of every sub-page wash from crimson (blush in light) into the canvas; every
   dark band is ink with a crimson glow. All of them carry the app's film grain: fractal noise as an
   inline SVG data URI (no request, no host, allowed by img-src data:), blended as overlay so it
   reads as texture and never as dirt. */
.hero, .page-head, .dl-page { position: relative; isolation: isolate; background-color: var(--band-2); background-image: var(--hero-bg); }
.band-dark { isolation: isolate; }
.hero::after, .page-head::after, .dl-page::after, .band-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain) 0 0 / 180px 180px;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
}
.hero::after, .page-head::after, .dl-page::after {
  -webkit-mask-image: linear-gradient(#000 0%, #000 28%, transparent 72%);
  mask-image: linear-gradient(#000 0%, #000 28%, transparent 72%);
}

/* ------------------------------------------------------------------ bands */
.band { padding-block: var(--band-pad); background: var(--band-1); position: relative; }
.band-alt { background: var(--band-2); }
.band-dark {
  --gx: 90%; --gy: -6%; --hx: 0%; --hy: 62%;
  background-color: var(--band-dark);
  background-image:
    radial-gradient(ellipse 64% 62% at var(--gx) var(--gy), rgba(128, 32, 46, .62) 0%, rgba(122, 31, 43, .2) 42%, rgba(122, 31, 43, 0) 72%),
    radial-gradient(ellipse 50% 46% at var(--hx) var(--hy), rgba(116, 29, 41, .26) 0%, rgba(116, 29, 41, 0) 70%);
  color: var(--text);
}
.late { --gx: 100%; --gy: 46%; --hx: 0%; --hy: 58%; }
.ori-band { --gx: 50%; --gy: -10%; --hx: 100%; --hy: 60%; }
.privacy-band { --gx: 12%; --gy: -8%; --hx: 100%; --hy: 58%; }
.band-head { max-width: 720px; display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); }
.band-head h2, .page-head h1 {
  font: 380 clamp(32px, 4.2vw, 48px)/1.1 var(--serif);
  letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
}
.band-head p, .lede { font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.sub-head { max-width: 660px; display: grid; gap: 12px; margin: clamp(72px, 9vw, 112px) 0 clamp(28px, 4vw, 40px); }
.sub-head h3 { font: 380 clamp(26px, 3vw, 34px)/1.15 var(--serif); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.sub-head p { font-size: 17px; line-height: 27px; color: var(--text-2); text-wrap: pretty; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: clamp(32px, 4vw, 48px); }
.notes.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
.note { display: grid; gap: 4px; align-content: start; }
.note h3 { font: 480 15px/24px var(--sans); color: var(--ink); }
.note p { color: var(--text-2); text-wrap: pretty; }
.caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; color: var(--text-3); font-size: 13px; line-height: 20px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--hover); color: var(--text-2); font: 480 12px/20px var(--sans); white-space: nowrap; }

/* ------------------------------------------------------------------- hero */
.hero { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); padding-bottom: clamp(56px, 7vw, 96px); text-align: center; overflow: clip; }
.hero h1 {
  font: 380 clamp(46px, 6.6vw, 84px)/1.02 var(--serif);
  letter-spacing: -0.024em; color: var(--ink);
  max-width: 9.6em; margin-inline: auto; text-wrap: balance;
}
.hero .lede { margin: 22px auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 32em; text-wrap: balance; }
.hero-actions { margin-top: 32px; display: grid; justify-items: center; gap: 12px; }
.meta { color: var(--text-3); font-size: 13px; line-height: 20px; text-wrap: balance; }
.note-line { color: var(--text-2); font-size: 13px; line-height: 20px; }
.note-line[hidden] { display: none; }
.hero-more { font-size: 14px; }

.device-wrap { margin-top: clamp(36px, 4.5vw, 56px); perspective: 1600px; perspective-origin: 50% 0; }
.device {
  --tilt: 0deg; --lift: 1;
  position: relative; margin-inline: auto; max-width: 1120px;
  padding: 11px 11px 12px; border-radius: 22px;
  background: var(--bezel);
  box-shadow: 0 0 0 1px var(--bezel-ring), 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -24px rgba(40, 10, 18, .45), 0 12px 24px -12px rgba(15, 18, 40, .25);
  transform-origin: 50% 100%;
  transform: rotateX(var(--tilt)) scale(var(--lift));
}
.screen {
  position: relative; container-type: inline-size;
  border-radius: 11px 11px 6px 6px; overflow: hidden;
  background: var(--wall);
  aspect-ratio: 16 / 10.4;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  text-align: left;
}
.menubar {
  height: clamp(22px, 2.7cqw, 30px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px;
  font: 480 clamp(10px, 1.15cqw, 12.5px)/1 var(--sans);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.menubar .l, .menubar .r { display: flex; gap: clamp(10px, 1.6cqw, 18px); align-items: center; white-space: nowrap; }
.menubar .r { color: var(--text-2); font-weight: 400; }
.menubar .apple { width: 10px; height: 12px; border-radius: 3px 3px 5px 5px; background: currentColor; opacity: .75; }
.screen .app { margin: 10px 14px 0; border-radius: 10px 10px 0 0; border-bottom: 0; min-height: 0; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45); }
.screen .win { min-height: 0; }

/* ------------------------------------------------------------------ notch */
.notch {
  --nw: clamp(130px, 15.5cqw, 200px);
  --nh: clamp(22px, 2.7cqw, 30px);
  --wing: clamp(52px, 8cqw, 92px);
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: calc(var(--nw) + 2 * var(--wing)); height: var(--nh);
  transform: translateX(-50%);
  background: #000; color: #F2F3F7;
  border-radius: 0 0 calc(var(--nh) * .45) calc(var(--nh) * .45);
  overflow: hidden;
  transition: width .42s var(--ease-out), height .42s var(--ease-out), border-radius .42s var(--ease-out);
}
.notch .wl, .notch .wr {
  position: absolute; top: 0; height: var(--nh); display: flex; align-items: center; gap: 6px;
  font: 480 clamp(10px, 1.1cqw, 12px)/1 var(--sans); white-space: nowrap;
  transition: opacity .2s var(--ease);
}
.notch .wl { left: 10px; }
.notch .wr { right: 12px; color: #C9CCDA; }
.notch .wl i { width: 7px; height: 7px; border-radius: 50%; background: #5AE266; flex: none; }
.notch .peek, .notch .full {
  position: absolute; left: 0; right: 0; top: calc(var(--nh) + 6px); padding: 0 18px;
  opacity: 0; transition: opacity .18s var(--ease); pointer-events: none;
}
.notch .peek { display: grid; gap: 6px; font-size: 12.5px; line-height: 18px; }
.notch .peek .ln { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; min-width: 0; }
.notch .peek span { color: #9EA2B4; overflow: hidden; text-overflow: ellipsis; }
.notch .peek b { font-weight: 480; color: #F2F3F7; }
.notch em { font-style: normal; color: #FF8B7E; font-weight: 480; }
.notch[data-s="peek"] { width: clamp(280px, 42cqw, 440px); height: calc(var(--nh) + 66px); border-radius: 0 0 22px 22px; }
.notch[data-s="peek"] .peek { opacity: 1; transition-delay: .16s; }
.notch[data-s="peek"] .wr { opacity: 0; }
.notch[data-s="full"] { width: min(640px, 94cqw); height: calc(var(--nh) + 236px); border-radius: 0 0 28px 28px; }
.notch[data-s="full"] .full { opacity: 1; pointer-events: auto; transition-delay: .18s; }
.notch[data-s="full"] .wr { opacity: 0; }
.notch .full { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; font-size: 12.5px; line-height: 18px; }
.notch .full h5 { margin: 0 0 6px; font: 480 11px/16px var(--sans); color: #8D91A3; letter-spacing: .04em; text-transform: uppercase; }
.notch .tl { display: flex; gap: 3px; align-items: flex-end; height: 24px; margin: 2px 0 8px; }
.notch .tl i { flex: 1; border-radius: 3px; background: #2A2C38; height: 8px; }
.notch .tl i.c { background: #5AE266; height: 20px; }
.notch .tl i.s { background: #79C2E7; height: 14px; }
.notch .tl i.n { outline: 2px solid #F2F3F7; outline-offset: 1px; }
.notch .nl { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid #23252F; }
.notch .nl:first-of-type { border-top: 0; }
.notch .nl span { color: #9EA2B4; white-space: nowrap; }
.notch .nl b { color: #F2F3F7; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notch .ask { margin-top: 10px; height: 30px; border-radius: 999px; background: #1B1C25; border: 1px solid #2C2E3B; color: #8D91A3; display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.notch .drop { border: 1px dashed #3A3D4E; border-radius: 10px; padding: 9px 12px; color: #9EA2B4; margin-top: 10px; }

/* ------------------------------------------------- the app window, rebuilt */
/* The r1 shell with the atmosphere pass: a sidebar a step off the canvas (lighter in dark, darker in
   light) with the UniOne header, search, PLAN / STUDY / ORI / UNITS sections and unit badges; the
   main column with the tabs, the week banner and Ask Ori along its top. The window is the container
   (`app`), so each rebuild collapses the sidebar to the icon rail and then hides it as it narrows. */
.app {
  container: app / inline-size;
  display: grid; grid-template-rows: minmax(0, 1fr);
  background: var(--ground); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden;
  font-size: 13.5px; line-height: 20px; text-align: left;
}
.app-frame { box-shadow: var(--shadow-float); }
.win { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 620px; }
.app svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app svg.orb circle { stroke-dasharray: .01 2.2; stroke-width: 1.9; }

.sb {
  contain: size;
  background: var(--sb); border-right: 1px solid var(--line);
  padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 1px;
  min-width: 0; overflow: hidden; font-size: 13.5px;
}
.sb-lights { display: flex; gap: 7px; padding: 2px 6px 10px; flex: none; }
.sb-lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.sb-lights i:nth-child(2) { background: #FEBC2E; }
.sb-lights i:nth-child(3) { background: #28C840; }
.sb-ws { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 6px; flex: none; }
.sb-ws img { width: 24px; height: 24px; border-radius: 6px; background: #FFFFFF; padding: 2px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.sb-ws b { font: 500 14px/1 var(--sans); color: var(--ink); letter-spacing: -0.005em; }
.sb-ws svg { width: 14px; height: 14px; margin-left: auto; color: var(--text-3); }
.sb-find { display: flex; align-items: center; gap: 8px; height: 32px; margin: 8px 0 2px; padding: 0 6px 0 9px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-3); background: color-mix(in srgb, var(--surface) 40%, transparent); font-size: 13px; flex: none; }
.sb-find svg { width: 15px; height: 15px; }
.sb-find kbd { margin-left: auto; }
.sb-sec { margin: 6px 6px 0; padding: 9px 2px 3px; border-top: 1px solid var(--line); font: 480 10.5px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); flex: none; }
.sb .it { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: 8px; color: var(--text-2); white-space: nowrap; flex: none; }
.sb .it svg { width: 16px; height: 16px; }
.sb .it.on { background: var(--sb-on); box-shadow: var(--sb-on-ring); color: var(--ink); font-weight: 480; }
.sb .it .n { margin-left: auto; color: var(--text-3); font-size: 12px; font-weight: 400; }
.sb-units { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.sb-unit { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 3px 6px; border-radius: 8px; flex: none; }
.sb-unit.on { background: var(--sb-on); box-shadow: var(--sb-on-ring); }
.sb-unit > i { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--ut); color: var(--u); font: 500 9.5px/22px var(--mono); text-align: center; font-style: normal; }
.sb-unit > b { font: 500 11.5px/16px var(--mono); color: var(--text); }
.sb-unit > span { color: var(--text-3); font-size: 11.5px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-foot { padding-top: 6px; border-top: 1px solid var(--line); margin: 0 -10px; padding-inline: 10px; flex: none; }

/* the icon rail: always on the Ori window, and on any window under 920px */
.rail .win { grid-template-columns: 56px minmax(0, 1fr); }
.rail .sb { padding: 12px 8px 10px; align-items: center; }
.rail .sb .l, .rail .sb kbd, .rail .sb .n, .rail .sb-unit > b, .rail .sb-unit > span, .rail .sb-ws b, .rail .sb-ws svg { display: none; }
.rail .sb-lights { gap: 4px; padding: 2px 0 10px; }
.rail .sb-lights i { width: 9px; height: 9px; }
.rail .sb-ws { padding: 0; }
.rail .sb-find { width: 36px; padding: 0; justify-content: center; }
.rail .sb .it { width: 38px; padding: 0; justify-content: center; }
.rail .sb-sec { align-self: stretch; margin: 6px 4px 0; padding: 0 0 5px; }
.rail .sb-units { align-items: center; align-self: stretch; }
.rail .sb-unit { grid-template-columns: 22px; padding: 3px 0; }
.rail .sb-foot { align-self: stretch; display: flex; justify-content: center; }
@container app (max-width: 920px) {
  .win { grid-template-columns: 56px minmax(0, 1fr); }
  .sb { padding: 12px 8px 10px; align-items: center; }
  .sb .l, .sb kbd, .sb .n, .sb-unit > b, .sb-unit > span, .sb-ws b, .sb-ws svg { display: none; }
  .sb-lights { gap: 4px; padding: 2px 0 10px; }
  .sb-lights i { width: 9px; height: 9px; }
  .sb-ws { padding: 0; }
  .sb-find { width: 36px; padding: 0; justify-content: center; }
  .sb .it { width: 38px; padding: 0; justify-content: center; }
  .sb-sec { align-self: stretch; margin: 6px 4px 0; padding: 0 0 5px; }
  .sb-units { align-items: center; align-self: stretch; }
  .sb-unit { grid-template-columns: 22px; padding: 3px 0; }
  .sb-foot { align-self: stretch; display: flex; justify-content: center; }
}
@container app (max-width: 600px) {
  .win, .rail .win { grid-template-columns: minmax(0, 1fr); }
  .sb, .rail .sb { display: none; }
}

/* the main column, and the atmosphere band at its top */
.main { position: relative; isolation: isolate; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ground); overflow: hidden; }
.atmo-in::before, .atmo-in::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--bh, 420px); z-index: -1; pointer-events: none; }
.atmo-in::before {
  background-image:
    radial-gradient(ellipse 72% 92% at 80% -14%, var(--seed) 0%, transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--seed) 84%, var(--ground)) 0%, color-mix(in srgb, var(--seed) 34%, var(--ground)) 46%, var(--ground) 100%);
}
.atmo-in::after {
  background: var(--grain) 0 0 / 180px 180px; opacity: var(--grain-o); mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent);
}
.atmo-in.short { --bh: 260px; }
.atmo-in.olive, .atmo-in.green, .atmo-in.teal, .atmo-in.cyan, .atmo-in.blue, .atmo-in.violet, .atmo-in.magenta, .atmo-in.rose { --seed: color-mix(in srgb, var(--u) var(--unit-ink), var(--unit-base)); }

.topbar { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px 0 14px; color: var(--text-2); font-size: 12.5px; white-space: nowrap; min-width: 0; flex: none; }
.tb-plus { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); flex: none; }
.tb-plus svg { width: 15px; height: 15px; }
.tabs { display: flex; gap: 2px; min-width: 0; }
.tab { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; color: var(--text-2); font: 480 12.5px/1 var(--sans); white-space: nowrap; }
.tab.on { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.bar-r { margin-left: auto; display: flex; gap: 16px; align-items: center; color: var(--text-2); white-space: nowrap; min-width: 0; overflow: hidden; }
.bar-r > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.bar-r .sync { color: var(--text-3); }
.ask-ori { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ask-bg); color: var(--ink); font-weight: 480; flex: none; }
.ask-ori svg { width: 15px; height: 15px; }

.page { padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 12px 28px 6px; }
.ph-title { font: 380 28px/34px var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.ph-head p:not(.ph-title) { color: var(--text-2); font-size: 13px; line-height: 20px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font: 480 13px/1 var(--sans); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); white-space: nowrap; }
.pill.pri { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.pill.sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
.pill.txt { border-color: transparent; background: transparent; color: var(--link); padding: 0 2px; height: 20px; }
.pill.ghost { border-color: transparent; background: transparent; }
button.pill, button.chip, button.tr, button.seg-b, button.grade, button.reveal, button.ap-tab, button.mem-chip, button.art-card { cursor: pointer; font-family: var(--sans); }
button.pill:active, button.grade:active, button.reveal:active, button.ap-tab:active, button.mem-chip:active, button.art-card:active { transform: scale(.98); }
button.pill.pri:hover { box-shadow: inset 0 0 0 100px rgba(10, 12, 30, .12); }
button.pill:not(.pri):hover { box-shadow: inset 0 0 0 100px var(--hover); }

/* Today's hero: greeting, the statement, the Ask Ori prompt */
.t-hero { padding: 22px 44px 4px; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 900px; margin-inline: auto; }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.hi { color: var(--text-2); font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: .95em; }
.statement { font: 500 34px/40px var(--sans); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.statement .due-urgent { color: var(--urgent); }
.prompt { max-width: 620px; border: 1px solid var(--line); border-radius: 16px; background: var(--prompt-out); padding: 3px; margin-top: 6px; }
.pbox { height: 88px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--prompt-in); padding: 13px 14px 9px 16px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 2px rgba(10, 12, 30, .05), 0 10px 28px -14px rgba(10, 12, 30, .3); }
.pbox .ph { color: var(--text-3); font-size: 14px; }
.ptools { display: flex; justify-content: space-between; color: var(--text-2); }
.ptools svg { width: 17px; height: 17px; }
.pchips { display: flex; gap: 2px; padding: 5px 6px 4px; overflow: hidden; }
.pchips span { flex: none; padding: 3px 10px; border-radius: 8px; color: var(--text-2); font-size: 13px; white-space: nowrap; }
html[data-off] .chip-week { display: none; }
.t-page { padding: 22px 44px 24px; gap: 14px; width: 100%; max-width: 900px; margin-inline: auto; }

/* tiles, rows and the shared bits of the app */
.tiles { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tile .th { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 480 13px/20px var(--sans); color: var(--text-2); }
.tile .when { font: 380 30px/36px var(--serif); color: var(--ink); white-space: nowrap; }
.tile .what { color: var(--text); font-size: 14px; line-height: 22px; }
.tile .what .more { color: var(--text-3); }
.tile .start { align-self: flex-start; margin-top: 2px; }
html[data-off] .tile .more, html[data-off] .thumbs, html[data-off] .notch .wl, html[data-off] .nl.lec { display: none; }
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.thumbs { display: flex; gap: 6px; }
.thumbs i { width: 52px; height: 34px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); position: relative; overflow: hidden; }
.thumbs i::before, .thumbs i::after { content: ""; position: absolute; left: 6px; border-radius: 2px; background: var(--line-2); }
.thumbs i::before { top: 7px; width: 26px; height: 3px; }
.thumbs i::after { top: 14px; width: 36px; height: 2px; box-shadow: 0 5px 0 var(--line), 0 10px 0 var(--line); }
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
.quad > div { padding: 0 0 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.quad > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.quad b, .mini b { display: block; font: 380 22px/28px var(--serif); color: var(--ink); }
.quad span, .mini span { color: var(--text-3); font-size: 12px; line-height: 16px; }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini > div { padding: 2px 0 2px 14px; border-left: 1px solid var(--line); min-width: 0; }
.mini > div:first-child { border-left: 0; padding-left: 0; }
.rowh, .row { display: grid; grid-template-columns: 8px minmax(0, 1.6fr) 54px minmax(0, 1fr) 118px; gap: 12px; align-items: center; }
.rowh { font: 480 11.5px/16px var(--sans); color: var(--text-3); padding: 0 0 6px; border-bottom: 1px solid var(--line); letter-spacing: .02em; }
.rowh .w, .rowh .due, .row .w, .row .due { text-align: right; }
.row { min-height: 42px; padding: 0 10px; margin: 0 -10px; border-radius: 8px; font-size: 13.5px; }
.row .d, .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.row .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t b { font-weight: 480; color: var(--ink); }
.row .t span { color: var(--text-3); margin-left: 6px; font: 500 11.5px/1 var(--mono); }
.row .w { color: var(--text-2); }
.row .due { color: var(--text-3); white-space: nowrap; }
.due-soon { color: var(--ink) !important; font-weight: 480; }
.due-urgent { color: var(--urgent) !important; font-weight: 480; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font: 480 12px/20px var(--sans); white-space: nowrap; }
.b-act { background: var(--tint); color: var(--link); }
.b-good { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.b-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.b-urg { background: color-mix(in srgb, var(--urgent) 11%, transparent); color: var(--urgent); }
.b-n { background: var(--hover); color: var(--text-2); }
.b-rule { background: var(--hover); color: var(--ink); }
.dlist > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 13.5px; min-height: 38px; }
.dlist > div + div { border-top: 1px solid var(--line); }
.dlist i { width: 8px; height: 8px; border-radius: 50%; }
.dlist > div > span:nth-child(2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlist b { font-weight: 480; color: var(--ink); }
.dlist code { margin-left: 6px; font: 500 11.5px/1 var(--mono); color: var(--text-3); }
.dlist .due { color: var(--text-3); white-space: nowrap; font-size: 13px; }
.chg { display: flex; flex-direction: column; }
.chg > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 13.5px; min-height: 40px; }
.chg > div + div { border-top: 1px solid var(--line); }
.chg i { width: 8px; height: 8px; border-radius: 50%; }
.chg .w { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.chg b { font-weight: 480; color: var(--ink); }
.chg .c { color: var(--text-2); }

/* identity hues: a dot, a chip, a badge or a cover */
.olive { --u: var(--u-olive-ink); --ut: var(--u-olive-tint); }
.green { --u: var(--u-green-ink); --ut: var(--u-green-tint); }
.teal { --u: var(--u-teal-ink); --ut: var(--u-teal-tint); }
.cyan { --u: var(--u-cyan-ink); --ut: var(--u-cyan-tint); }
.blue { --u: var(--u-blue-ink); --ut: var(--u-blue-tint); }
.violet { --u: var(--u-violet-ink); --ut: var(--u-violet-tint); }
.magenta { --u: var(--u-magenta-ink); --ut: var(--u-magenta-tint); }
.rose { --u: var(--u-rose-ink); --ut: var(--u-rose-tint); }
i.olive, i.green, i.teal, i.cyan, i.blue, i.violet, i.magenta, i.rose { background: var(--u); }
.uchip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--ut); color: var(--u); font: 500 11.5px/20px var(--mono); white-space: nowrap; }

@container app (max-width: 780px) {
  .thumbs { display: none; }
  .bar-r .sync { display: none; }
  .t-hero, .t-page { padding-inline: 28px; }
  .statement { font-size: 30px; line-height: 36px; }
}
@container app (max-width: 600px) {
  .topbar { padding-inline: 12px; }
  .tb-plus { display: none; }
  .t-hero { padding: 16px 16px 2px; gap: 10px; }
  .t-head .acts { display: none; }
  .hi { font-size: 13px; }
  .statement { font-size: 26px; line-height: 32px; }
  .pbox { height: 78px; }
  .t-page, .page { padding: 16px 14px 20px; gap: 12px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 14px; }
  .rowh { display: none; }
  .row { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "d t due" ". ai w"; row-gap: 4px; padding-block: 8px; }
  .row .d { grid-area: d; }
  .row .t { grid-area: t; }
  .row .due { grid-area: due; }
  .row .ai { grid-area: ai; }
  .row .w { grid-area: w; }
  .ph-head { padding-inline: 16px; flex-wrap: wrap; align-items: flex-start; }
  .ph-title { font-size: 24px; line-height: 30px; }
}
@container app (max-width: 420px) {
  .bar-r > span:first-child { display: none; }
}

/* ------------------------------------------------------------------ 11pm */
.late { padding-block: clamp(96px, 12vw, 168px); }
.late h2 { font: 380 clamp(36px, 5.4vw, 68px)/1.12 var(--serif); letter-spacing: -0.02em; color: var(--ink); max-width: 15em; }
.late .lead { display: block; color: var(--text-3); }
.late h2 > span:not(.sr-only):not(.rot) { display: block; }
.rot { display: grid; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.rot > span { grid-area: 1 / 1; color: var(--ink); transition: transform .62s var(--ease), opacity .62s var(--ease); }
.rot > span:not(.on) { transform: translateY(105%); opacity: 0; }
.rot > span.out { transform: translateY(-105%); opacity: 0; }
.late p { margin-top: 28px; color: var(--text-2); font-size: 18px; line-height: 28px; max-width: 38em; }
.ctl { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 480 12.5px/1 var(--sans); cursor: pointer; }
.ctl:hover { color: var(--ink); background: var(--hover); }
.ctl i { width: 10px; height: 10px; position: relative; }
.ctl[data-playing="true"] i::before, .ctl[data-playing="true"] i::after { content: ""; position: absolute; top: 0; width: 3px; height: 10px; background: currentColor; border-radius: 1px; }
.ctl[data-playing="true"] i::before { left: 1px; }
.ctl[data-playing="true"] i::after { right: 1px; }
.ctl[data-playing="false"] i::before { content: ""; position: absolute; left: 1px; top: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.late .ctl { margin-top: 32px; }
.caption .ctl { margin-left: auto; }
.ctl[hidden] { display: none; }

/* ------------------------------------------------------------ Today band */
.today-page { gap: 16px; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.today-grid > div { display: grid; gap: 16px; min-width: 0; }
.reveal { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 480 12px/1 var(--sans); white-space: nowrap; }
.reveal:hover { box-shadow: inset 0 0 0 100px var(--hover); }
.mark-out { font: 380 22px/24px var(--serif); color: var(--ink); }
.chg .arrive { opacity: 0; transform: translateY(8px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
.chg .arrive.in { opacity: 1; transform: none; }
html:not([data-js]) .chg .arrive { opacity: 1; transform: none; }
.roll { display: inline-flex; overflow: hidden; height: 1.2em; line-height: 1.2em; vertical-align: bottom; }
.roll > span { display: block; transition: transform .2s cubic-bezier(.42, 0, .58, 1); }
.roll > span > span { display: block; height: 1.2em; }
@container app (max-width: 720px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- Deadlines band */
.dl { display: grid; grid-template-columns: minmax(0, 1fr) 320px; flex: 1; min-height: 520px; border-top: 1px solid var(--line); }
.dl-main { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dl-main .ph-head { padding: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-2); font: 480 12.5px/28px var(--sans); color: var(--text-2); background: var(--surface); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip.on { background: var(--hover); color: var(--ink); }
.tbl { display: grid; }
.tbl .hd, .tbl .tr { display: grid; grid-template-columns: minmax(0, 1fr) 50px 96px 92px; gap: 12px; align-items: center; padding: 0 12px; }
.tbl .hd { height: 34px; font: 480 11.5px/16px var(--sans); color: var(--text-3); border-bottom: 1px solid var(--line); letter-spacing: .02em; }
.tbl .tr { height: 48px; border-radius: 8px; border: 0; background: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.tbl .tr:hover { background: var(--hover); }
.tbl .tr[aria-pressed="true"] { background: var(--tint); }
.tbl .tr:focus-visible { outline-offset: -2px; }
.tbl .nm { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tbl .nm b { font-weight: 480; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.tbl .nm code { font: 500 11.5px/1 var(--mono); color: var(--text-3); }
.tbl .r { text-align: right; color: var(--text-2); white-space: nowrap; }
.panel { border-left: 1px solid var(--line); background: var(--raise); padding: 20px; min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.dl-detail { display: flex; flex-direction: column; gap: 14px; }
.dl-detail[hidden] { display: none; }
.dl-detail.in { animation: panel-in .15s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.dl-detail .ph { display: grid; gap: 4px; }
.dl-detail .ph span { color: var(--text-3); font: 500 12px/16px var(--mono); }
.dl-detail .ph b { font: 380 22px/28px var(--serif); color: var(--ink); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; line-height: 20px; }
.kv dt { color: var(--text-3); }
.kv dd { color: var(--ink); text-align: right; }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 19px; }
.box > b { font-weight: 480; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.box p { color: var(--text-2); }
.box .pill { align-self: flex-start; margin-top: 4px; }
.clock:empty { display: none; }
.clock { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; margin-top: 6px; }
.clock i { height: 6px; border-radius: 2px; background: var(--hover); }
.clock i.ok { background: color-mix(in srgb, var(--good) 55%, transparent); }
.clock i.due { background: var(--ink); }
.clock i.sc { background: color-mix(in srgb, var(--warn) 50%, transparent); }
.clock i.now { outline: 2px solid var(--action); outline-offset: 1px; }
.legend { display: flex; gap: 6px 12px; flex-wrap: wrap; color: var(--text-3); font-size: 11.5px; line-height: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend .k-now { background: var(--hover); outline: 2px solid var(--action); outline-offset: -1px; }
.legend .k-ok { background: color-mix(in srgb, var(--good) 55%, transparent); }
.legend .k-due { background: var(--ink); }
.legend .k-sc { background: color-mix(in srgb, var(--warn) 50%, transparent); }
@container app (max-width: 860px) {
  .dl { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
}
@container app (max-width: 620px) {
  .dl-main { padding: 16px 14px; }
  .tbl .hd { display: none; }
  .tbl .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm dd" "ai w"; height: auto; padding: 10px 12px; row-gap: 6px; }
  .tbl .tr .nm { grid-area: nm; }
  .tbl .tr .ai { grid-area: ai; }
  .tbl .tr .w { grid-area: w; }
  .tbl .tr .dd { grid-area: dd; }
  .chips .chip:nth-child(n + 4) { display: none; }
  .panel { padding: 18px 14px; }
}

/* ----------------------------------------------- Units band: class mode */
.u-head { padding: 4px 24px 14px; display: grid; gap: 2px; }
.u-head .code { font: 500 12px/16px var(--mono); color: var(--text-2); }
.class-bar { display: flex; align-items: center; gap: 8px 12px; padding: 10px 16px; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink); font-size: 13px; flex-wrap: wrap; }
.class-bar b { font-weight: 480; }
.class-bar .s { color: var(--text-2); }
.class-bar .acts { margin-left: auto; }
.session { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); flex: 1; min-height: 420px; background: var(--ground); }
.slides { background: var(--sb); border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The lecture as an uploaded deck, not a note (Josh, 13 Oct 2026: "the uploaded lecture doesn't
   actually look like an uploaded PowerPoint slide... it just looks like an MD file"). A viewer bar
   names the file, the slide is a white 16:9 page in the lecturer's own template (a title band, a
   rule under the heading, a figure, a footer with the slide number) on the viewer's grey ground, and
   a strip of thumbnails under it says it is one slide of many. The page stays white in dark mode,
   the way an opened slide does. Its colours are the deck's, not UniOne's. */
.viewer-bar { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-2); font-size: 12px; line-height: 16px; }
.viewer-bar .vf { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); }
.viewer-bar .vf b { font: 500 12px/16px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-bar .file { flex: none; width: 15px; height: 15px; }
.viewer-bar .file * { fill: none; stroke: currentColor; stroke-width: 1.2; }
.viewer-bar .vm { color: var(--text-3); white-space: nowrap; }
.viewer-bar .vn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--text-2); font: 500 11px/1 var(--mono); }
.viewer-bar .vn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.slide { --deck-ink: #1B2236; --deck-text: #3A4256; --deck-band: #1D2B4A; --deck-accent: #2A7F86; --deck-quiet: #8A90A0;
  aspect-ratio: 16 / 9; background: #FFFFFF; color: var(--deck-ink); border-radius: 3px; display: flex; flex-direction: column; position: relative; overflow: hidden; container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(20, 24, 40, .08), 0 2px 6px rgba(20, 24, 40, .10), 0 16px 34px -12px rgba(20, 24, 40, .32); }
.slide-band { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 2.1cqw 4.4cqw; background: var(--deck-band); color: #FFFFFF; font: 600 clamp(7px, 1.8cqw, 11px)/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.slide-band-u { opacity: .7; }
.slide-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.6cqw; padding: 3.6cqw 4.4cqw 0; transition: opacity .25s var(--ease); }
.slide-body.fade { opacity: 0; }
.slide .sh { align-self: flex-start; padding-bottom: 1.3cqw; border-bottom: 2px solid var(--deck-accent); color: var(--deck-ink); font: 650 clamp(13px, 4.3cqw, 24px)/1.15 var(--sans); letter-spacing: -.01em; }
.slide-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3cqw; align-items: center; min-height: 0; }
.slide-cols:has(.deck-fig[hidden]) { grid-template-columns: minmax(0, 1fr); }
.slide ul { margin: 0; padding-left: 1.15em; display: grid; gap: .55em; color: var(--deck-text); font-size: clamp(9.5px, 2.75cqw, 15px); line-height: 1.35; }
.slide ul li::marker { color: var(--deck-accent); }
.deck-fig[hidden] { display: none; }
.deck-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.deck-fig path { fill: none; stroke-linecap: round; }
.deck-fig .ax { stroke: var(--deck-quiet); stroke-width: 1; }
.deck-fig .vu { stroke: var(--deck-quiet); stroke-width: 1.4; stroke-dasharray: 3 3; }
.deck-fig .vl { stroke: var(--deck-accent); stroke-width: 2; }
.deck-fig .gap { stroke: var(--deck-ink); stroke-width: .8; stroke-dasharray: 1.5 2; }
.deck-fig text { fill: var(--deck-text); font: 500 7px/1 var(--sans); }
.deck-fig .ax-t { fill: var(--deck-quiet); font-size: 6px; }
.deck-fig .lbl { fill: var(--deck-ink); }
.slide .eq { align-self: center; color: var(--deck-ink); font: italic 400 clamp(10px, 3cqw, 17px)/1.3 var(--serif); }
.slide-foot { flex: none; margin-top: auto; display: flex; justify-content: space-between; gap: 8px; padding: 1.5cqw 4.4cqw; border-top: 1px solid #E6E8EE; color: var(--deck-quiet); font: 500 clamp(6.5px, 1.6cqw, 10px)/1.2 var(--sans); }
.strip { display: flex; gap: 6px; }
.strip i { flex: 1; min-width: 0; aspect-ratio: 16 / 9; border-radius: 2px; opacity: .78;
  background: linear-gradient(#1D2B4A, #1D2B4A) top / 100% 20% no-repeat, linear-gradient(#C9CDD6, #C9CDD6) 18% 42% / 46% 9% no-repeat, linear-gradient(#DCDFE6, #DCDFE6) 18% 66% / 58% 6% no-repeat, linear-gradient(#DCDFE6, #DCDFE6) 18% 80% / 40% 6% no-repeat, #FFFFFF;
  box-shadow: 0 0 0 1px rgba(20, 24, 40, .12); }
.strip i.on { opacity: 1; outline: 2px solid var(--action); outline-offset: 2px; }
.notes-pane { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: 13.5px; line-height: 21px; }
.np-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; }
.np-h code { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-h { font: 480 16px/24px var(--sans); color: var(--ink); }
.md-l { color: var(--text); display: flex; gap: 8px; align-items: baseline; min-height: 21px; }
.md-l[hidden] { display: none; }
.stamp { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--hover); color: var(--text-2); font: 500 11px/18px var(--mono); }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--action); vertical-align: text-bottom; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
[data-paused] .caret { animation: none; }
.np-tools { margin-top: auto; display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.np-tools .hint { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.mic { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-2); flex: none; }
.mic svg { width: 14px; height: 14px; }
@container app (max-width: 700px) {
  .session { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .slides { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; }
  .notes-pane { padding: 16px; min-height: 260px; }
  .np-tools .hint { display: none; }
  .class-bar .acts { margin-left: 0; }
  .tabs .tab:not(.on) { display: none; }
}

/* ------------------------------------------- Units band: the unit covers */
.ucards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 28px 0; }
.ucard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.ucard:hover { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
.cover {
  position: relative; isolation: isolate; height: 86px;
  background-color: color-mix(in srgb, var(--ut) var(--cover-base-mix), var(--surface));
  background-image:
    radial-gradient(circle at 88% -8%, color-mix(in srgb, var(--u) var(--cover-glow-1), transparent) 0%, transparent 56%),
    radial-gradient(circle at 108% 96%, color-mix(in srgb, var(--u) var(--cover-glow-2), transparent) 0%, transparent 46%),
    radial-gradient(circle at 46% -30%, color-mix(in srgb, var(--u) var(--cover-glow-3), transparent) 0%, transparent 52%);
}
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 180px 180px; opacity: var(--grain-o); mix-blend-mode: overlay; }
.cover span { position: absolute; left: 14px; bottom: 9px; font: 500 22px/1 var(--mono); color: var(--u); letter-spacing: -0.01em; }
.ub { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ut { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.ut > b { font-weight: 480; color: var(--ink); font-size: 13.5px; line-height: 19px; }
.mk { display: grid; justify-items: end; flex: none; }
.mk b { font: 380 20px/24px var(--serif); color: var(--ink); font-weight: 380; }
.mk small { color: var(--text-3); font-size: 11.5px; line-height: 14px; }
.ub p { color: var(--text); font-size: 12.5px; line-height: 18px; }
.ub p.s { color: var(--text-3); }
.marks { margin: 14px 28px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 18px 12px; }
.marks > div { padding-left: 16px; border-left: 1px solid var(--line); display: grid; }
.marks > div:first-child { padding-left: 0; border-left: 0; }
.marks b { font: 380 22px/28px var(--serif); color: var(--ink); }
.marks span { color: var(--text-3); font-size: 12px; line-height: 16px; }
.marks p { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; color: var(--text-3); font-size: 12.5px; line-height: 18px; }
.whatif { margin: 0 28px 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 18px 6px; }
.wi-h { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wi-h b { font-weight: 480; color: var(--ink); }
.wi-h span { color: var(--text-3); font-size: 12.5px; }
.wi-r { display: grid; grid-template-columns: auto minmax(0, 1fr) 180px 28px; gap: 12px; align-items: center; padding: 8px 0; font-size: 12.5px; color: var(--text-2); }
.wi-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-r > b { text-align: right; font: 380 16px/20px var(--serif); color: var(--ink); }
.sl { position: relative; height: 4px; border-radius: 2px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.sl i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--text-3); }
.sl i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line-2), 0 1px 3px rgba(0, 0, 0, .3); }
.sl .v75 { width: 75%; }
.sl .v78 { width: 78%; }
.sl .v79 { width: 79%; }
.sl .v81 { width: 81%; }
@container app (max-width: 860px) {
  .ucards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app (max-width: 600px) {
  .ucards { padding: 12px 14px 0; gap: 10px; }
  .marks { margin: 12px 14px 18px; padding: 12px 14px 10px; }
  .marks > div { padding-left: 10px; }
  .whatif { margin: 0 14px 18px; padding: 10px 14px 4px; }
  .wi-r { grid-template-columns: auto minmax(0, 1fr) 28px; }
  .wi-t { display: none; }
}
@container app (max-width: 380px) {
  .ucards { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- Ori band: the workspace */
.ows { --panel: 312px; display: grid; grid-template-columns: 204px minmax(0, 1fr) var(--panel); flex: 1; min-height: 600px; overflow: hidden; transition: grid-template-columns .7s var(--ease-out); }
.ows-rail { border-right: 1px solid var(--line); padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; background: color-mix(in srgb, var(--sb) 55%, var(--ground)); }
.newchat { justify-content: center; margin-bottom: 8px; }
.newchat svg { width: 14px; height: 14px; }
.or-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 6px 4px; font: 480 10.5px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.or-h svg { width: 13px; height: 13px; }
.or-p { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 8px; color: var(--text-2); min-width: 0; }
.or-p svg { width: 15px; height: 15px; margin-top: 1px; }
.or-p > span { display: grid; min-width: 0; }
.or-p b { font-weight: 480; font-size: 12.5px; line-height: 17px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-p small { font: 500 10.5px/14px var(--mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-p.on, .or-c.on { background: var(--sb-on); box-shadow: var(--sb-on-ring); }
.or-p.on b, .or-c.on { color: var(--ink); }
.or-c { padding: 5px 8px; border-radius: 8px; font-size: 12.5px; line-height: 18px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-inc { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.or-inc i { width: 28px; height: 16px; border-radius: 999px; background: var(--line-2); position: relative; }
.or-inc i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.ows-chat { display: flex; flex-direction: column; min-width: 0; padding: 14px 20px 16px; gap: 12px; }
.oc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.crumb { display: inline-flex; gap: 7px; align-items: center; font-weight: 480; color: var(--ink); white-space: nowrap; overflow: hidden; min-width: 0; }
.crumb svg { width: 15px; height: 15px; color: var(--text-2); }
.kn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.file { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--text); white-space: nowrap; }
.file svg { width: 13px; height: 13px; color: var(--text-3); }
.meter { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.meter i { width: 52px; height: 4px; border-radius: 2px; background: var(--hover); position: relative; overflow: hidden; }
.meter i::before { content: ""; position: absolute; inset: 0 64% 0 0; background: var(--text-3); border-radius: 2px; }
.meter small { color: var(--text-3); font-size: 11.5px; }
.thread { display: flex; flex-direction: column; gap: 14px; flex: 1; padding-top: 2px; }
.msg.me { align-self: flex-end; max-width: 82%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; padding: 9px 13px; color: var(--ink); }
.msg.ori { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; color: var(--text); }
.who-ori { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.who-ori svg { width: 14px; height: 14px; }
.cite { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--hover); color: var(--text-2); font: 500 10.5px/18px var(--mono); white-space: nowrap; vertical-align: 1px; }
.art-card { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); text-align: left; font: inherit; }
.art-card:hover { box-shadow: inset 0 0 0 100px var(--hover); }
.art-card svg { width: 18px; height: 18px; color: var(--text-2); }
.art-card > span { display: grid; flex: 1; min-width: 0; }
.art-card b { font-weight: 480; color: var(--ink); }
.art-card small { color: var(--text-3); font-size: 12px; line-height: 16px; }
.art-card em { font-style: normal; color: var(--link); font-size: 12.5px; }
.mem-wrap { display: grid; justify-items: start; gap: 8px; width: 100%; }
.mem-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 480 12px/1 var(--sans); }
.mem-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.mem-chip:hover, .mem-chip[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.mem-pop { width: 100%; max-width: 360px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--raise); box-shadow: var(--shadow-float); padding: 10px 12px; display: grid; gap: 6px; font-size: 12.5px; line-height: 18px; }
.mem-pop[hidden] { display: none; }
.mp-h { font-weight: 480; color: var(--ink); }
.mp-r { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--text); }
.mp-a { color: var(--text-3); white-space: nowrap; }
.mp-f { color: var(--text-3); font-size: 12px; }
.oc-prompt { border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); padding: 8px 10px 8px 12px; display: grid; gap: 6px; box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .4); }
.att { display: flex; gap: 6px; }
.ocp-row .ph { color: var(--text-3); font-size: 13.5px; }
.ocp-tools { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 12px; }
.ocp-tools svg { width: 15px; height: 15px; }
.send { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: #FFFFFF; display: grid; place-items: center; }
.ows-panel { border-left: 1px solid var(--line); background: var(--raise); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ap-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); }
.ap-tab { flex: 1; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 480 12.5px/1 var(--sans); white-space: nowrap; padding: 0 6px; }
.ap-tab:hover { color: var(--ink); }
.ap-tab[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .12); }
.art { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.art[hidden] { display: none; }
.art.in { animation: panel-in .15s var(--ease-out); }
.ap-h { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ap-h b { font: 380 19px/24px var(--serif); color: var(--ink); }
.ap-h span { color: var(--text-3); font-size: 12px; line-height: 16px; }
.plan-l { display: grid; margin: 0; padding: 0; list-style: none; }
.plan-l li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 18px; }
.plan-l li:first-child { border-top: 0; padding-top: 0; }
.plan-l .d { color: var(--ink); font-weight: 480; }
.plan-l .t { color: var(--text-3); text-align: right; }
.plan-l b { grid-column: 1 / -1; font-weight: 400; color: var(--text); }
.cards-l { display: grid; gap: 8px; }
.cq { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 9px 58px 9px 12px; display: grid; gap: 2px; font-size: 12.5px; line-height: 17px; background: var(--surface); }
.cq b { font-weight: 480; color: var(--ink); }
.cq span { color: var(--text-2); }
.cq i { position: absolute; right: 10px; top: 9px; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--hover); color: var(--text-3); font: 480 11.5px/20px var(--sans); font-style: normal; }
.cq.on i { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.cq:not(.on) b, .cq:not(.on) span { color: var(--text-3); }
.doc-md { display: grid; gap: 4px; font-size: 12.5px; line-height: 18px; color: var(--text); }
.doc-md .h { font: 500 12px/18px var(--mono); color: var(--ink); margin-top: 8px; }
.doc-md .h:first-child { margin-top: 0; }
.ap-note { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; line-height: 17px; }
.ap-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.ap-status { color: var(--good); font-size: 12px; line-height: 17px; min-height: 17px; }
@container app (max-width: 900px) {
  .ows { --panel: 300px; grid-template-columns: minmax(0, 1fr) var(--panel); }
  .ows-rail { display: none; }
}
@container app (max-width: 740px) {
  .ows { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ows-panel { border-left: 0; border-top: 1px solid var(--line); }
  .meter { display: none; }
}
@container app (max-width: 480px) {
  .ows-chat { padding: 14px 14px 16px; }
  .oc-head .badge { display: none; }
  .msg.me { max-width: 92%; }
}

/* ---------------------------------------------------------- the notch stage */
.ori-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hover); }
.seg-b { border: 0; background: transparent; color: var(--text-2); font: 480 13px/28px var(--sans); padding: 0 14px; border-radius: 999px; }
.seg-b:hover { color: var(--ink); }
.seg-b[aria-pressed="true"] { background: var(--raise); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .2); }
.ori-stage { position: relative; border-radius: 20px 20px 0 0; background: var(--bezel); padding: 10px 10px 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.ori-screen { position: relative; container-type: inline-size; border-radius: 11px 11px 0 0; overflow: hidden; height: clamp(320px, 32vw, 400px); background: var(--wall); }
.ori-screen .menubar { position: absolute; inset: 0 0 auto 0; }
.ori-screen .desk { position: absolute; left: 9%; right: 9%; top: 26%; bottom: -12px; border-radius: 10px 10px 0 0; background: var(--surface); box-shadow: var(--shadow-float); display: grid; grid-template-rows: 30px 1fr; overflow: hidden; }
.ori-screen .desk-bar { display: flex; align-items: center; gap: 7px; padding: 0 12px; background: var(--side); border-bottom: 1px solid var(--line); }
.ori-screen .desk-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.ori-screen .doc-lines { padding: 8% 14% 0; display: grid; gap: 12px; align-content: start; }
.ori-screen .doc-lines i { height: 7px; border-radius: 4px; background: var(--line); }
.ori-screen .doc-lines i.h { height: 12px; width: 46%; background: var(--line-2); margin-bottom: 8px; }
.ori-screen .doc-lines i:nth-child(3n) { width: 82%; }
.ori-screen .doc-lines i:nth-child(4n) { width: 64%; }
.ori-cap { margin-top: 18px; min-height: 48px; color: var(--text-2); max-width: 64ch; }
@container (max-width: 520px) {
  .notch .full { grid-template-columns: minmax(0, 1fr); }
  .notch .full > div + div { display: none; }
}

/* ---------------------------------------------------------- Revise band */
.utabs { display: flex; gap: 20px; margin: 6px 28px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.utabs span { padding-bottom: 9px; }
.utabs .on { color: var(--ink); font-weight: 480; box-shadow: inset 0 -2px 0 var(--ink); }
.rev { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin: 16px 28px 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rev-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rev-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--text-3); font-size: 12.5px; }
.rev-top b { color: var(--ink); font-weight: 480; }
.progress { height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s var(--ease); }
.card3d { perspective: 1200px; flex: 1; display: grid; min-height: 220px; }
.flash { position: relative; display: grid; transform-style: preserve-3d; transition: transform .5s var(--ease); }
.flash.flipped { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .35); }
.face.back { transform: rotateY(180deg); }
.face .src { color: var(--text-3); font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.face .q { font: 380 clamp(18px, 2.2vw, 22px)/1.35 var(--serif); color: var(--ink); text-wrap: pretty; }
.face .a { color: var(--text); font-size: 14px; line-height: 22px; }
.face .eq { font: 500 13px/1.4 var(--mono); color: var(--ink); background: var(--hover); border-radius: 6px; padding: 6px 10px; align-self: flex-start; }
.face .pill { margin-top: auto; align-self: flex-start; }
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.grade { height: 46px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 480 13px/1.1 var(--sans); display: grid; place-content: center; gap: 3px; }
.grade small { color: var(--text-3); font-weight: 400; font-size: 11.5px; }
.grade:hover:not(:disabled) { box-shadow: inset 0 0 0 100px var(--hover); }
.grade:disabled { opacity: .4; cursor: default; }
.rev-side { border-left: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rev-side .lbl { font: 480 13px/20px var(--sans); color: var(--text-2); display: flex; justify-content: space-between; gap: 8px; }
.stat-big { font: 380 30px/36px var(--serif); color: var(--ink); }
.stat-sub { color: var(--text-3); font-size: 12.5px; margin-top: -10px; }
.approve { display: grid; }
.approve > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); }
.approve > div:first-child { border-top: 0; }
.approve span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.plan i { height: 22px; border-radius: 4px; background: var(--hover); }
.plan i.b { background: color-mix(in srgb, var(--u-green-ink) 26%, transparent); }
.plan i.x { background: var(--ink); }
.sep { height: 1px; background: var(--line); margin: 2px 0; }
@container app (max-width: 760px) {
  .rev { grid-template-columns: minmax(0, 1fr); }
  .rev-side { border-left: 0; border-top: 1px solid var(--line); }
}
@container app (max-width: 600px) {
  .rev { margin: 12px 14px 18px; }
  .utabs { margin-inline: 16px; gap: 16px; }
  .rev-main { padding: 16px 14px; }
  .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .face { padding: 18px; }
}

/* ------------------------------------------------------------ Works with */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.works > div { padding: 28px 32px 8px 0; display: grid; gap: 8px; align-content: start; }
.works > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.works h3 { font: 380 26px/32px var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.works p { color: var(--text-2); text-wrap: pretty; }
.aside-line { margin-top: 40px; color: var(--text-3); font-size: 14px; }

/* ---------------------------------------------------------- Privacy map */
.map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.map-col { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; }
.map-col.home { background: var(--raise); }
.map-col h3 { font: 480 12px/16px var(--sans); color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.map-col .big { font: 380 24px/30px var(--serif); color: var(--ink); }
.map-col ul { margin: 0; padding: 0; list-style: none; display: grid; }
.map-col li { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.map-col li b { font-weight: 480; }
.map-col li span { color: var(--text-2); font-size: 14px; line-height: 21px; }
.map-col .never { margin-top: auto; padding: 10px 12px; border-radius: 10px; background: var(--hover); color: var(--ink); font-size: 14px; line-height: 21px; }
.map-col:not(.home)::before { content: ""; position: absolute; left: -21px; top: 50%; width: 20px; height: 1px; background: var(--line-2); }
.map-col:not(.home)::after { content: ""; position: absolute; left: -6px; top: calc(50% - 4px); border-left: 6px solid var(--text-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.privacy-cta { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ----------------------------------------------------------- Get started */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.step .k { font: 500 12px/16px var(--mono); color: var(--text-3); }
.step h3, .step .step-h { font: 380 24px/30px var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.step p { color: var(--text-2); text-wrap: pretty; }
.step .small { margin-top: auto; padding-top: 8px; color: var(--text-3); font-size: 13px; line-height: 20px; }
.get-cta { margin-top: 32px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.how { margin-top: clamp(72px, 9vw, 112px); display: grid; gap: 20px; }
.how-head { display: grid; gap: 12px; max-width: 640px; }
.how-head h2 { font: 380 clamp(28px, 3.2vw, 36px)/1.15 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.how-head p { color: var(--text-2); text-wrap: pretty; }
.how-tabs { justify-self: start; }
.how-tabs[hidden] { display: none; }
.how-tabs .seg-b[aria-selected="true"] { background: var(--raise); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .2); }
.how-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.how-panel[hidden] { display: none; }
.how-panel .walk { margin: 0; }
.how-text { display: grid; gap: 14px; align-content: start; }
.how-h { font: 380 24px/30px var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.how.tabbed .how-h { display: none; }
.how-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--text-2); }
.how-steps li { text-wrap: pretty; }
.how-steps li::marker { color: var(--text-3); }
.how-note { color: var(--text-3); font-size: 14px; line-height: 21px; }
.how-more { color: var(--text-3); font-size: 14px; line-height: 21px; }
.faq-wrap { margin-top: clamp(72px, 9vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; }
.faq-wrap h2 { font: 380 clamp(28px, 3.2vw, 36px)/1.15 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 480 16px/24px var(--sans); color: var(--ink); }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: translateY(-3px) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover h3 { color: var(--link); }
.faq details > div { padding: 0 0 20px; color: var(--text-2); max-width: 62ch; display: grid; gap: 10px; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--band-2); border-top: 1px solid var(--line); padding: 56px 0 48px; color: var(--text-2); font-size: 14px; line-height: 22px; }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.foot .brand { margin-bottom: 12px; }
.foot h2 { font: 480 12px/16px var(--sans); color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--ink); }
.fine { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; color: var(--text-3); font-size: 13px; line-height: 20px; }
.fine p { max-width: 82ch; }

/* -------------------------------------------------------------- sub-pages */
.page-head { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(32px, 4vw, 48px); }
.page-head h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.06; }
.page-head .lede { margin-top: 16px; color: var(--band-text-2); }
.page-head .operator { margin-top: 14px; color: var(--band-text-3); font-size: 15px; line-height: 22px; }
.doc-band { background: var(--band-1); border-top: 1px solid var(--line); }
.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding-block: clamp(40px, 5vw, 64px) var(--band-pad); }
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 2px; font-size: 13.5px; }
.toc p { font: 480 12px/16px var(--sans); color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; padding: 0 10px 8px; }
.toc a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--text-2); }
.toc a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.prose { max-width: 700px; display: grid; gap: 56px; min-width: 0; }
.prose section { display: grid; gap: 14px; scroll-margin-top: calc(var(--header-h) + 16px); align-content: start; }
.prose h2 { font: 380 28px/36px var(--serif); color: var(--ink); letter-spacing: -0.01em; display: flex; gap: 14px; align-items: baseline; text-wrap: balance; }
.prose h2 .k { font: 500 13px/1 var(--mono); color: var(--text-3); flex: none; }
.prose h3 { font: 480 16px/24px var(--sans); color: var(--ink); margin-top: 6px; }
.prose p, .prose li { color: var(--text); text-wrap: pretty; }
.prose ol, .prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--text-3); }
.callout { border: 1px solid var(--line); border-radius: 12px; background: var(--ground); padding: 16px 18px; display: grid; gap: 6px; }
.callout b { color: var(--ink); }
/* A setup walkthrough (walkthrough.js and walkthrough.css, shared with the app). Empty, and so
   hidden, until the script mounts it; the numbered steps beside it are the text version. */
.walk { margin: 10px 0 6px; min-width: 0; }
.walk:empty { display: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 21px; }
th { font: 480 12px/16px var(--sans); color: var(--text-3); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); letter-spacing: .02em; white-space: nowrap; }
td { padding: 12px 16px; vertical-align: top; color: var(--text); border-top: 1px solid var(--line); }
tbody tr:first-child td { border-top: 0; }
td.k { color: var(--ink); font-weight: 480; }
td small { display: block; color: var(--text-3); font-size: 12.5px; line-height: 18px; margin-top: 2px; }
.who { display: inline-flex; height: 20px; align-items: center; padding: 0 7px; border-radius: 4px; font: 480 12px/20px var(--sans); white-space: nowrap; }
.who.you { background: var(--hover); color: var(--text-2); }
.who.ours { background: var(--tint); color: var(--link); }

.dl-page { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 96px)); padding-bottom: var(--band-pad); }
.dl-page .lede, .dl-page .meta { --text-2: var(--band-text-2); --text-3: var(--band-text-3); }
.dl-card { max-width: 720px; display: grid; gap: 18px; }
.dl-card h1 { font: 380 clamp(40px, 5.4vw, 60px)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.dl-card .actions { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 8px; }
.dl-steps { margin-top: 48px; }
/* The download page (13 Oct 2026): the Dock icon lands once and rests on a glass shelf; what is new is
   read from latest.json; what you get links into the home page's deck. */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.dl-card .lede { max-width: 34em; }
.dl-new { display: grid; gap: 6px; max-width: 34em; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dl-new[hidden] { display: none; }
.dl-new p:not(.tag) { color: var(--band-text-2); font-size: 15px; line-height: 23px; text-wrap: pretty; }
.dl-icon { position: relative; margin: 0; display: grid; justify-items: center; padding: 24px 0 8px; }
.dl-icon::before { content: ""; position: absolute; left: 50%; top: 46%; width: 360px; height: 360px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--crimson) 34%, transparent) 0%, transparent 65%); filter: blur(10px); z-index: -1; }
.dl-drop img { width: clamp(150px, 18vw, 220px); height: auto; filter: drop-shadow(0 30px 40px rgba(20, 6, 10, .45)); }
.dl-shelf { width: clamp(220px, 26vw, 320px); height: 14px; margin-top: 18px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%, transparent 70%); }
.dl-what { margin-top: clamp(64px, 8vw, 104px); display: grid; gap: 22px; }
.dl-what h2 { font: 380 clamp(28px, 3.2vw, 38px)/1.12 var(--serif); letter-spacing: -0.015em; color: var(--ink); }
.dl-feats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.dl-feats li { border-top: 1px solid var(--line-2); }
.dl-feats a { display: grid; gap: 4px; padding: 16px 0 22px; color: inherit; text-decoration: none; }
.dl-feats h3 { font: 480 15.5px/22px var(--sans); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.dl-feats h3::after { content: "›"; color: var(--text-3); transition: transform .3s var(--ease-out), color .3s var(--ease); }
.dl-feats a:hover h3::after { transform: translateX(3px); color: var(--crimson); }
.dl-feats p { color: var(--text-2); font-size: 14.5px; line-height: 22px; text-wrap: pretty; }
@media (max-width: 860px) {
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-icon { order: -1; padding-top: 0; }
  .dl-feats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .dl-drop { animation: dock-drop 1.15s cubic-bezier(.3, 1.25, .5, 1) .35s both; }
  html[data-js] .dl-shelf { animation: shelf-in 1.15s var(--ease-out) .35s both; }
}
@keyframes dock-drop { from { opacity: 0; transform: translateY(-70px) scale(.92); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes shelf-in { from { opacity: 0; transform: scaleX(.5); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- reveal */
@media (prefers-reduced-motion: no-preference) {
  html[data-js] [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
  html[data-js] [data-reveal="scale"] { transform: scale(.97); }
  html[data-js] [data-reveal="fade"] { transform: none; }
  html[data-js] [data-reveal].is-in { opacity: 1; transform: none; }
  html[data-js] [data-hero] { opacity: 0; transform: translateY(16px); animation: hero-in .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
}
@keyframes hero-in { to { opacity: 1; transform: none; } }
[data-d="1"] { --d: 1; }
[data-d="2"] { --d: 2; }
[data-d="3"] { --d: 3; }
[data-d="4"] { --d: 4; }
[data-d="5"] { --d: 5; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .device { transform: none !important; }
  .caret { display: none; }
  .chg .arrive { opacity: 1; transform: none; }
}
/* The In class mock stacks under 860px: the slide on top, the notes under it at full width.
   `.st-split` set two columns at every width and won over `.session`'s narrow rule, so on a phone the
   notes were a sliver one word wide and their tools ran into each other. */
@media (max-width: 860px) {
  .viewer-bar .vm { display: none; }
  .session.st-split { grid-template-columns: minmax(0, 1fr); }
  .st-split .slides { padding-bottom: 4px; }
  .st-notes { min-height: 360px; }
}

/* Phones (Josh, 13 Oct 2026: "make sure the website looks good on mobile"). */
@media (max-width: 600px) {
  /* "It's 11pm" kept a gap the height of its longest ending, which wraps to three lines here. Only
     the ending in front takes room; the one leaving still slides out. */
  .late { padding-block: 76px 64px; }
  .late h2 { font-size: 34px; }
  .rot > span:not(.on):not(.out) { display: none; }
  .rot > span.out { position: absolute; }
  .rot { position: relative; }
  .late p { margin-top: 18px; }
  .late .ctl { margin-top: 22px; }
}
@media print {
  html[data-js] [data-reveal], html[data-js] [data-hero], .chg .arrive { opacity: 1 !important; transform: none !important; animation: none !important; }
  .site-header { position: static; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; }
  .notes.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
}
@media (max-width: 860px) {
  .how-panel { grid-template-columns: minmax(0, 1fr); }
  .notes, .notes.four, .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .map { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .map-col:not(.home)::before { left: 50%; top: -24px; width: 1px; height: 23px; }
  .map-col:not(.home)::after { left: calc(50% - 4px); top: -6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--text-3); border-bottom: 0; }
  .works { grid-template-columns: minmax(0, 1fr); }
  .works > div, .works > div + div { padding: 20px 0; border-left: 0; }
  .works > div + div { border-top: 1px solid var(--line); }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* A phone: two columns of plain links under a hairline, not a block of boxed chips that filled
     the first screen (Josh, 13 Oct 2026: "make sure the website looks good on mobile"). */
  .toc { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .toc p { grid-column: 1 / -1; padding-left: 0; padding-bottom: 4px; }
  .toc a { padding: 7px 0; border-radius: 0; font-size: 14.5px; }
  .toc a:hover { background: none; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nav { gap: 16px; }
  .nav-links { gap: 16px; }
  .nav-links .opt { display: none; }
  .device { padding: 7px 7px 8px; border-radius: 16px; }
  .screen { aspect-ratio: auto; height: 620px; }
  .screen .app { margin: 8px 8px 0; }
  .menubar { padding: 0 10px; }
  .menubar .l span, .menubar .r span:first-child { display: none; }
  .ori-stage { border-radius: 14px 14px 0 0; padding: 7px 7px 0; }
  .ori-screen { height: 380px; }
  .seg-b { padding: 0 11px; font-size: 12.5px; }
  .band-head p, .lede, .late p, .sub-head p { font-size: 17px; line-height: 26px; }
  .win { min-height: 0; }
}
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  table.stack tbody tr:first-child { border-top: 0; }
  table.stack td { padding: 0; border: 0; }
  table.stack td + td { margin-top: 6px; }
  table.stack td small { display: inline; margin-left: 6px; }
}
@media (max-width: 400px) {
  .site-header .brand span { display: none; }
}

/* ===================================================================== the motion pass, 13 Oct 2026 */
/* The films' language as Josh approved it in the v8 demo: hairlines instead of boxes, line tabs
   instead of pills, Source Serif for big numbers, one crimson accent, the wine to crimson to sand
   gradient, soft unit-colour slots, and Ori as the app's little agent. Why: MAINTAINING.md, "The
   motion pass". */
:root {
  --crimson: #B72D3E;
  --sand: #D98F78;
  /* The app's page glows (PageTint, uniplus badf92a), kept in this one place: expect them to move. */
  --tint-crimson: #F4DADD; --tint-sand: #F5E4CF; --tint-rose: #F6D8E4;
  --tint-ember: #F6DDCC; --tint-plum: #E8DAF2; --tint-slate: #DCE2EC;
}
@media (prefers-color-scheme: dark) {
  :root {
    --crimson: #E04A60;
    --tint-crimson: #741D29; --tint-sand: #573619; --tint-rose: #6E1F48;
    --tint-ember: #632410; --tint-plum: #4B2266; --tint-slate: #243149;
  }
}
.band-dark {
  --crimson: #E04A60;
  --tint-crimson: #741D29; --tint-sand: #573619; --tint-rose: #6E1F48;
  --tint-ember: #632410; --tint-plum: #4B2266; --tint-slate: #243149;
}

/* ------------------------------------------------------- Ori, the app's agent */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.agent { overflow: visible; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--crimson) 45%, transparent)); }
#ori-agent .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 6s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.12); } }

/* ------------------------------------------------- words, not chips or boxes */
.tag { height: auto; padding: 0; background: none; border-radius: 0; gap: 7px; color: var(--text-3); font: 500 11px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); flex: none; }
.callout { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 14px 0 2px; }
.ctl { border-color: transparent; padding: 0 8px 0 6px; }
.lead { color: var(--text-3); }

/* Line tabs for every switch on the site: the setup walkthroughs and Ori's notch. */
.how-tabs.seg, .ori-ctl .seg {
  display: flex; gap: 24px; padding: 0; background: none; border-radius: 0; justify-self: stretch;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.how-tabs.seg::-webkit-scrollbar, .ori-ctl .seg::-webkit-scrollbar { display: none; }
.how-tabs .seg-b, .ori-ctl .seg-b { flex: none; padding: 0 0 10px; border-radius: 0; font: 480 14px/20px var(--sans); color: var(--text-3); white-space: nowrap; transition: color .25s var(--ease), box-shadow .35s var(--ease-out); }
.how-tabs .seg-b:hover, .ori-ctl .seg-b:hover { color: var(--ink); }
.how-tabs .seg-b[aria-selected="true"], .ori-ctl .seg-b[aria-pressed="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--crimson); }
.ori-ctl { gap: 16px 24px; }
.ori-ctl .seg { flex: 1 1 auto; max-width: 360px; }

/* Get started, and where your data goes: hairline columns, the step as a big serif numeral. */
.steps { gap: 0 36px; }
.step { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 20px 0 8px; }
.step .k { font: 380 56px/1 var(--serif); color: var(--ink); letter-spacing: -0.02em; margin-bottom: 14px; }
.map { gap: 0 40px; }
.map-col, .map-col.home { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 20px 0 0; }
.map-col.home { border-top-color: var(--crimson); }
.map-col:not(.home)::before, .map-col:not(.home)::after { content: none; }
.map-col .never { padding: 12px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ the header */
.scroll-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--crimson), var(--sand)); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.site-header[data-glass] .scroll-line { opacity: .85; }

/* -------------------------------------------------------------- the hero */
.split .w { display: inline-block; }
.hero::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -20%; height: 110%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 28% 30%, color-mix(in srgb, var(--crimson) 24%, transparent) 0%, transparent 70%),
    radial-gradient(34% 30% at 74% 24%, color-mix(in srgb, var(--sand) 22%, transparent) 0%, transparent 70%);
  filter: blur(28px);
  animation: aura 24s ease-in-out infinite alternate;
}
@keyframes aura {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}
.device-wrap { position: relative; }
.floats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.float { position: absolute; transform: translate3d(0, var(--py, 0px), 0); }
.f-week { left: max(-5%, calc(50% - 660px)); top: 66%; }
.f-slot { right: max(-5%, calc(50% - 660px)); top: 50%; }
.bob { animation: bob 7s ease-in-out infinite; }
.f-slot .bob { animation-duration: 8.6s; animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 1180px) { .floats { display: none; } }

/* The week, as the app's hero card draws it: wine into crimson into sand. */
.week-card {
  position: relative; isolation: isolate; overflow: hidden;
  width: 270px; height: 118px; border-radius: 18px; padding: 14px 16px;
  display: grid; align-content: start; color: #FFFFFF; text-align: left;
  background:
    radial-gradient(90% 80% at 88% 18%, rgba(226, 96, 112, .95) 0%, rgba(226, 96, 112, 0) 60%),
    radial-gradient(80% 90% at 8% 95%, rgba(150, 74, 44, .9) 0%, rgba(150, 74, 44, 0) 62%),
    radial-gradient(70% 60% at 70% 105%, rgba(233, 190, 140, .85) 0%, rgba(233, 190, 140, 0) 70%),
    linear-gradient(140deg, #4E1A24 0%, #8E2C3D 45%, #B9485A 70%, #D98F78 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 32px 64px -28px rgba(78, 26, 36, .7), 0 12px 24px -14px rgba(0, 0, 0, .4);
}
.week-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 180px 180px; opacity: .14; mix-blend-mode: overlay; }
.wk-l { font: 480 12.5px/18px var(--sans); color: rgba(255, 255, 255, .8); }
.wk-n { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
.wk-n b { font: 380 40px/1.05 var(--serif); letter-spacing: -0.02em; color: #FFFFFF; font-weight: 380; }
.wk-n small { font: 400 13px/1 var(--sans); color: rgba(255, 255, 255, .65); }
.wk-line { margin-top: 4px; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, .82); padding-right: 116px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-slider { position: absolute; right: 16px; top: 54px; width: 98px; height: 14px; }
.wk-slider i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .38); }
.wk-slider b { position: absolute; top: 50%; left: calc(var(--at, .75) * 100% - 7px); width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: left 1.4s var(--ease-out); }
.week-card.off .wk-n small { display: none; }

/* A class slot as the app now draws one: a soft gradient in the unit's own hue, no bar. */
.slot {
  display: flex; align-items: center; gap: 12px; width: 288px; padding: 14px 16px; border-radius: 16px; text-align: left;
  background: linear-gradient(165deg, color-mix(in srgb, var(--u) 40%, transparent) 0%, color-mix(in srgb, var(--u) 19%, transparent) 100%), color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 0 0 1px var(--line), 0 28px 56px -28px rgba(10, 12, 30, .55);
}
.ubadge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ut); color: var(--u); font: 500 11px/30px var(--mono); text-align: center; }
.slot-t { display: grid; min-width: 0; }
.slot-t b { font: 480 14px/20px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-t span { font-size: 12.5px; line-height: 18px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------- the deck */
/* Seven features side by side instead of seven bands one under the other. The glow behind the deck
   takes the page tint of the slide in front, and crossfades as you move. */
@property --deck-glow { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0); }
.deck {
  --deck-glow: var(--tint-crimson);
  --side: max(var(--gutter), calc((100vw - 1320px) / 2), 7vw);
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(64px, 7vw, 104px) clamp(56px, 6vw, 88px);
  background: var(--band-1);
  transition: --deck-glow 1.1s var(--ease);
}
.deck[data-tint="sand"] { --deck-glow: var(--tint-sand); }
.deck[data-tint="rose"] { --deck-glow: var(--tint-rose); }
.deck[data-tint="ember"] { --deck-glow: var(--tint-ember); }
.deck[data-tint="plum"] { --deck-glow: var(--tint-plum); }
.deck[data-tint="slate"] { --deck-glow: var(--tint-slate); }
.deck::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 62% at 20% 26%, var(--deck-glow) 0%, transparent 70%),
    radial-gradient(ellipse 52% 58% at 88% 84%, color-mix(in srgb, var(--deck-glow) 72%, transparent) 0%, transparent 72%);
}
.deck::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain) 0 0 / 180px 180px; opacity: var(--grain-o); mix-blend-mode: overlay; }

.deck-bar, .deck-foot { padding-inline: var(--side); }
.deck-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.deck-tabs { position: relative; display: flex; gap: clamp(18px, 2.4vw, 32px); min-width: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.deck-tabs::-webkit-scrollbar { display: none; }
.deck-tab { flex: none; padding: 0 0 12px; color: var(--text-3); font: 480 15px/20px var(--sans); white-space: nowrap; transition: color .3s var(--ease); }
.deck-tab:hover { color: var(--ink); text-decoration: none; }
.deck-tab[aria-current="true"] { color: var(--ink); }
.deck-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w, 0px); transform: translateX(var(--x, 0px)); background: var(--crimson); transition: transform .55s var(--ease-out), width .55s var(--ease-out); }
html:not([data-js]) .deck-ink { display: none; }
.deck-step { display: flex; align-items: center; gap: 4px; flex: none; padding-bottom: 6px; }
.deck-count { margin-right: 10px; font: 500 12px/1 var(--mono); color: var(--text-3); }
.deck-count b { color: var(--ink); font-weight: 500; }
.deck-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.deck-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.deck-btn:hover:not(:disabled) { background: var(--hover); }
.deck-btn:disabled { opacity: .35; cursor: default; }
html:not([data-js]) .deck-step { display: none; }

.deck-track {
  position: relative; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(1320px, calc(100vw - 2 * var(--side)));
  gap: clamp(20px, 3vw, 44px);
  padding: 6px var(--side) 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--side);
  scrollbar-width: none;
}
.deck-track::-webkit-scrollbar { display: none; }
.deck-track:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; border-radius: 12px; }
.deck-track.is-dragging { scroll-snap-type: none; cursor: grabbing; -webkit-user-select: none; user-select: none; }
/* With the script, the deck is as tall as the slide in front, so a short slide leaves no gap. */
html[data-js] .deck-track { align-items: start; overflow-y: hidden; height: var(--h, auto); transition: height .6s var(--ease-out); }

.dk-slide {
  min-width: 0; scroll-snap-align: center;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "fig" "pts";
  gap: 24px 40px; align-content: start;
  transform-origin: 50% 30%;
  transition: opacity .7s var(--ease), transform .8s var(--ease-out);
}
html[data-js] .dk-slide:not(.is-on) { opacity: .34; transform: scale(.975); }
.slide-text { grid-area: text; display: grid; gap: 12px; align-content: start; max-width: 760px; }
.slide-text h2 { font: 380 clamp(30px, 3.2vw, 42px)/1.1 var(--serif); letter-spacing: -0.016em; color: var(--ink); text-wrap: balance; }
.slide-text p { font-size: 17px; line-height: 27px; color: var(--text-2); max-width: 62ch; text-wrap: pretty; }
.slide-fig { grid-area: fig; margin: 0; min-width: 0; }
.dk-slide .points { grid-area: pts; }
.points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; }
.points li { display: grid; gap: 4px; align-content: start; padding: 14px 0 4px; border-top: 1px solid var(--line-2); }
.points h3 { font: 480 14.5px/22px var(--sans); color: var(--ink); }
.points p { font-size: 14px; line-height: 21px; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 1380px) {
  .dk-slide { grid-template-columns: 272px minmax(0, 1fr); grid-template-areas: "text fig" "pts fig"; grid-template-rows: auto 1fr; }
  .dk-slide .points { grid-template-columns: minmax(0, 1fr); }
  .slide-text h2 { font-size: 34px; }
  .slide-text p { font-size: 15.5px; line-height: 24px; }
}
.deck-progress { margin-top: clamp(24px, 3vw, 36px); height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.deck-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, .14)); background: linear-gradient(90deg, var(--crimson), var(--sand)); transition: transform .25s linear; }
html:not([data-js]) .deck-progress { display: none; }
@media (max-width: 760px) {
  .deck-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .deck-step { justify-content: flex-end; padding-bottom: 0; }
  .deck { --side: var(--gutter); }
  .deck-track { grid-auto-columns: calc(100vw - 2 * var(--gutter) - 22px); gap: 14px; }
  .dk-slide { scroll-snap-align: start; }
}

/* --------------------------------------------------------------- iPhone */
.phone-band { --gx: 82%; --gy: -4%; --hx: 0%; --hy: 78%; overflow: clip; }
.phone-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px 80px; align-items: center; }
.phone-copy { display: grid; gap: 18px; align-content: center; }
.phone-copy h2 { font: 380 clamp(36px, 4.6vw, 58px)/1.06 var(--serif); letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.phone-lede { font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 46ch; text-wrap: pretty; }
.phone-points { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.phone-status { display: flex; align-items: center; gap: 9px; color: var(--text-3); font-size: 14px; line-height: 21px; }
.phone-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crimson) 22%, transparent); flex: none; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--crimson) 0%, transparent); } }
.phone-fig { margin: 0; }
.phone-fig img { width: 100%; height: auto; border-radius: 30px; transform: translate3d(0, var(--py, 0px), 0); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 100px -40px rgba(0, 0, 0, .8); }
.sync { margin-top: clamp(80px, 9vw, 128px); display: grid; gap: 28px; }
.sync-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 56px; align-items: end; }
.sync-head h3 { font: 380 clamp(28px, 3.2vw, 40px)/1.12 var(--serif); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.sync-head p { font-size: 17px; line-height: 27px; color: var(--text-2); text-wrap: pretty; }
.sync-fig { margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 100px -50px rgba(0, 0, 0, .85); }
.sync-fig img { width: 100%; height: auto; transform: scale(1.06) translate3d(0, var(--py, 0px), 0); }
.sync-line { position: relative; margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.sync-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.sync-line::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 16%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--crimson), var(--sand), transparent);
  animation: travel 4.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes travel { from { transform: translateX(0); } to { transform: translateX(525%); } }
.sync-line li { position: relative; display: grid; gap: 4px; align-content: start; padding-top: 20px; }
.sync-line li::before { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--band-1); border: 1.5px solid var(--text-3); }
.sync-line li.sync-cloud::before { border-color: var(--crimson); background: var(--crimson); box-shadow: 0 0 0 5px color-mix(in srgb, var(--crimson) 20%, transparent); }
.sync-line b { font-weight: 480; color: var(--ink); }
.sync-line span { color: var(--text-2); font-size: 14.5px; line-height: 22px; }
.sync-cap { margin-top: 4px; }
@media (max-width: 860px) {
  .phone-grid { grid-template-columns: minmax(0, 1fr); }
  .phone-fig { max-width: 420px; }
  .phone-points { grid-template-columns: minmax(0, 1fr); }
  .sync-head { grid-template-columns: minmax(0, 1fr); }
  .sync-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sync-line::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .sync-line::after { display: none; }
  .sync-line li { padding: 0 0 22px 28px; }
  .sync-line li::before { left: 0; top: 4px; }
}

/* --------------------------------------------- the services, as their own marks */
/* Josh, 13 Oct 2026: real logos on the site, as the app bundles them (the app's
   src/assets/brands, byte for byte, with SOURCES.md's decision record). Bare marks in their owners'
   colours beside the name, never the USYD crest. Canvas and Grok are silhouettes, filled here. */
.bm { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: -3px; }
.bm-canvas { background: #E60305; -webkit-mask: url(/assets/brands/canvas-mark.svg) center / contain no-repeat; mask: url(/assets/brands/canvas-mark.svg) center / contain no-repeat; }
.bm-grok { background: var(--ink); -webkit-mask: url(/assets/brands/grok-mark.svg) center / contain no-repeat; mask: url(/assets/brands/grok-mark.svg) center / contain no-repeat; }
.bm-glyph { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bm-on-dark { display: none; }
.band-dark .bm-on-light { display: none; }
.band-dark .bm-on-dark { display: inline-block; }
@media (prefers-color-scheme: dark) { .bm-on-light { display: none; } .bm-on-dark { display: inline-block; } }
.wmarks { display: flex; gap: 14px; align-items: center; height: 30px; margin-bottom: 6px; }
.wmarks .bm { width: 26px; height: 26px; }
.how-tabs .seg-b .bm, .prose h2 .bm, .prose h3 .bm { margin-right: 8px; }
.how-tabs .seg-b .bm { width: 15px; height: 15px; vertical-align: -2px; }
.prose h2 .bm { width: 22px; height: 22px; vertical-align: -2px; }
.prose h3 .bm { width: 18px; height: 18px; }

/* ------------------------------------------- the app as it is today (13 Oct 2026) */
/* Read from the app's own browser demo (uniplus main 10c3ace): the sidebar's Plan / Learn / Ori groups
   with units as round badges, the week card on Today, Study's lecture view and Ori's page. */
.sb-top { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; flex: none; }
.sb-top .sb-find { flex: 1; margin: 0; min-width: 0; }
.sb-ori { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--crimson) 14%, transparent); }
.sb-ori svg.agent { width: 22px; height: 22px; }
.sb .it svg.agent { width: 16px; height: 16px; }
.sb .it kbd { margin-left: auto; }
.sb-badges { display: flex; gap: 6px; padding: 4px 6px 0; flex: none; }
.sb-badges i { width: 22px; height: 22px; border-radius: 50%; background: var(--ut); color: var(--u); font: 500 9.5px/22px var(--mono); text-align: center; font-style: normal; }
.sb .sb-foot { margin-top: auto; }
.sb-na { margin: 4px 8px 0; font-size: 11px; line-height: 15px; color: var(--text-3); }
.sb-acct { display: flex; align-items: center; gap: 8px; padding: 6px 8px 0; }
.sb-acct > i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--hover); color: var(--ink); font: 480 10px/22px var(--sans); font-style: normal; text-align: center; }
.sb-acct .l { display: grid; min-width: 0; }
.sb-acct b { font: 480 12px/15px var(--sans); color: var(--ink); }
.sb-acct small { font-size: 10.5px; line-height: 14px; color: var(--text-3); white-space: nowrap; }
.rail .sb-top, .rail .sb-badges { flex-direction: column; align-items: center; }
.rail .sb-acct { justify-content: center; padding-inline: 0; }
@container app (max-width: 920px) {
  .sb-top, .sb-badges { flex-direction: column; align-items: center; }
  .sb-acct { justify-content: center; padding-inline: 0; }
}

/* Today's week card, to the right of the Ask box (Josh, 13 Oct 2026: no gap under the greeting) */
.t-ask { display: flex; align-items: flex-start; gap: 16px; }
.t-ask .prompt { flex: 1; min-width: 0; }
.t-week { width: 214px; height: 96px; padding: 10px 13px; border-radius: 14px; flex: none; margin-top: 6px; }
.t-week .wk-l { font-size: 11.5px; line-height: 16px; }
.t-week .wk-n b { font-size: 30px; }
.t-week .wk-line { font-size: 11.5px; padding-right: 84px; }
.t-week .wk-slider { top: 42px; right: 13px; width: 72px; }
@container app (max-width: 780px) { .t-week { display: none; } }

/* The float beside the MacBook: a reminder as a popover, an ink card on light ground, a light card on dark */
.pop { position: relative; width: 268px; padding: 13px 16px 14px; border-radius: 14px; display: grid; gap: 4px; text-align: left; background: #16171F; color: #D5D7E0; box-shadow: 0 30px 60px -26px rgba(10, 12, 30, .6); }
.pop::after { content: ""; position: absolute; right: -6px; top: 22px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.pop b { display: flex; align-items: center; gap: 8px; font: 480 15px/21px var(--sans); color: #F2F3F7; }
.pop b i { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); flex: none; }
.pop > span { font-size: 13px; line-height: 19px; }
@media (prefers-color-scheme: dark) {
  .pop { background: #F4F3F1; color: #4A4D5C; }
  .pop b { color: #1B1D29; }
}

/* Study, in class: the unit and week, the eight ways to study the week, the slide beside its notes */
.st-head { display: flex; align-items: center; gap: 10px; padding: 4px 18px 10px; white-space: nowrap; min-width: 0; }
.st-pick { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--ink); font: 480 13px/1 var(--sans); }
.st-pick code { font: 500 11.5px/1 var(--mono); color: var(--ink); }
.st-pick svg, .st-week > svg { width: 14px; height: 14px; color: var(--text-3); }
.st-week { display: inline-flex; align-items: center; gap: 6px; }
.st-of { font: 500 11.5px/1 var(--mono); color: var(--text-3); }
.st-acts { margin-left: auto; display: flex; gap: 14px; color: var(--text-3); font-size: 12.5px; }
.st-tabs { display: flex; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.st-tabs span { padding: 8px 0 9px; }
.st-tabs .on { color: var(--ink); font-weight: 480; box-shadow: inset 0 -2px 0 var(--ink); }
.st-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.st-split .slides { background: var(--ground); justify-content: flex-start; }
/* The notes take the height the slide column gives them and scroll inside it, newest line in view,
   rather than pushing the whole picture taller with every line typed (Josh, 13 Oct 2026). `contain:
   size` keeps their own content out of the row's height; on a phone, where they stack under the
   slide, `min-height` gives them their room back. */
.st-notes { padding: 14px 16px 12px; gap: 10px; contain: size; }
.stn-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stn-h > span:first-child { display: grid; min-width: 0; }
.stn-h b { font: 480 13px/18px var(--sans); color: var(--ink); }
.stn-w { font: 500 10.5px/14px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn-acts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.stn-acts span { grid-column: span 2; height: 28px; display: grid; place-items: center; grid-auto-flow: column; gap: 6px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 480 12px/1 var(--sans); white-space: nowrap; }
.stn-acts span:nth-child(n + 4) { grid-column: span 3; }
.stn-acts .rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); }
.stn-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* A scrolling column must not squeeze its lines into each other: each keeps its own height. */
.stn-body > * { flex-shrink: 0; }
.st-notes .md-h { font: 480 13.5px/20px var(--sans); }
.st-notes .stamp { height: auto; padding: 0; border-radius: 0; background: none; color: var(--text-2); font: inherit; }
.st-notes .np-tools { margin-top: auto; padding-top: 6px; border-top: 0; }
.st-notes .np-tools .hint { margin-left: 0; display: inline; }
.stn-foot { padding-top: 8px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; line-height: 17px; }
.stn-foot b { margin-right: 6px; font-weight: 480; color: var(--text-2); }
@container app (max-width: 780px) { .st-acts, .st-of { display: none; } }

/* Ori's page: projects and chats in the rail, "What are you working on?", then the answer and its plan */
.or-h em { font: 480 11.5px/14px var(--sans); font-style: normal; color: var(--link); letter-spacing: 0; text-transform: none; }
.or-g { padding: 8px 6px 2px; font-size: 11px; line-height: 15px; color: var(--text-3); }
.ows-chat { position: relative; }
.ori-home { position: absolute; inset: 0 0 150px; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.ori-big { width: 54px; height: 54px; margin-bottom: 8px; filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--crimson) 45%, transparent)); overflow: visible; }
.oh-hi { color: var(--text-2); font-size: 13.5px; line-height: 20px; }
.oh-q { font: 380 26px/1.15 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.thread { transition: opacity .45s var(--ease); }
.ori-said { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; transition: opacity .55s var(--ease), transform .65s var(--ease-out); }
.who-ori .ori-sm { width: 16px; height: 16px; overflow: visible; }
.ows-panel { transition: opacity .6s var(--ease), transform .7s var(--ease-out); }
.ows[data-step="home"] .ori-home, .ows[data-step="typing"] .ori-home { opacity: 1; transform: none; }
.ows[data-step="home"] .thread, .ows[data-step="typing"] .thread { opacity: 0; }
.ows[data-step="thinking"] .ori-said { opacity: 0; transform: translateY(6px); }
.ows[data-step="home"] .ows-panel, .ows[data-step="typing"] .ows-panel, .ows[data-step="thinking"] .ows-panel { opacity: 0; transform: translateX(14px); }
/* Until Ori has answered there is nothing in the panel, so it takes no room: Ori's home sits in the
   middle of the window rather than beside an empty column, and the panel opens beside the answer
   when it comes (Josh, 13 Oct 2026: "the Ori thing starts as the Ori, and then there's a massive
   space off to the right"). Stacked on a narrow window it is simply not there until then. */
.ows[data-step="home"], .ows[data-step="typing"], .ows[data-step="thinking"] { --panel: 0px; }
.ows[data-step="home"] .ows-panel, .ows[data-step="typing"] .ows-panel, .ows[data-step="thinking"] .ows-panel { border-left-color: transparent; }
@container app (max-width: 740px) {
  .ows[data-step="home"] .ows-panel, .ows[data-step="typing"] .ows-panel, .ows[data-step="thinking"] .ows-panel { display: none; }
}
.ocp-ctx { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; }
.ocp-row .ph.typed { color: var(--ink); }
.oc-foot { color: var(--text-3); font-size: 11.5px; line-height: 16px; text-align: center; }
.mem-chip { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-3); }
.mem-chip:hover, .mem-chip[aria-expanded="true"] { background: none; color: var(--ink); }
.ap-tabs { gap: 14px; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); overflow: hidden; }
.ap-tab { flex: none; height: auto; padding: 0 0 9px; border-radius: 0; background: none; }
.ap-tab[aria-pressed="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ap-see { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ap-files { margin: 0; padding: 0; list-style: none; display: grid; }
.ap-files li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; color: var(--text); border-top: 1px solid var(--line); }
.ap-files li:first-child { border-top: 0; }
.ap-files svg { width: 14px; height: 14px; color: var(--text-3); }

/* Ori thinking, as the app shows it: the eyes give way to three dots that rise in turn, the bead lights */
.ori-face .eyes { transition: opacity .2s ease-out; }
.ori-face .dots circle { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .2s ease-out; }
.ori-face .bead-hot { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .26s ease-out; }
.ows[data-step="thinking"] .ori-face .eyes { opacity: 0; }
.ows[data-step="thinking"] .ori-face .dots circle { opacity: 1; animation: ori-dot 1.2s ease-in-out infinite; }
.ows[data-step="thinking"] .ori-face .dots circle:nth-child(2) { animation-delay: .16s; }
.ows[data-step="thinking"] .ori-face .dots circle:nth-child(3) { animation-delay: .32s; }
.ows[data-step="thinking"] .ori-face .bead-hot { opacity: 1; animation: ori-bead .9s ease-in-out infinite alternate; }
@keyframes ori-dot { 0%, 56%, 100% { transform: translateY(0); opacity: .72; } 26% { transform: translateY(-1px); opacity: 1; } }
@keyframes ori-bead { from { transform: scale(.7); opacity: .6; } to { transform: scale(1.15); opacity: 1; } }

/* -------------------------------------------------------------- Study with Ori */
/* Josh, 13 Oct 2026: "improve this section... convey the functions best and make it look good". Six
   chapters as a rail on the left, numbered, each with its one sentence, and the stage on the right
   showing that chapter being used: Ask beside a real Deadlines page, Talk it through as a call, Quiz me,
   Memorise, Rehearse a presentation and Plan. The rail plays through on its own (a crimson hairline
   fills under the chapter in front) until one is chosen or Pause is pressed. Hairlines, not boxes. */
.os-band { --gx: 76%; --gy: -6%; --hx: 6%; --hy: 82%; }
.os { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: stretch; }
.os-rail { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.os-rail [role="tab"] { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 15px 0 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--text-3); }
.os-n { font: 500 11.5px/22px var(--mono); color: var(--text-3); }
.os-tt { font: 480 16px/22px var(--sans); color: var(--text-2); transition: color .25s var(--ease); }
.os-d { grid-column: 2; display: grid; grid-template-rows: 0fr; min-height: 0; color: var(--text-2); font-size: 14px; line-height: 21px; opacity: 0; transition: grid-template-rows .45s var(--ease-out), opacity .35s var(--ease), margin .45s var(--ease-out); }
.os-d > span { min-height: 0; overflow: hidden; }
.os-rail [role="tab"]:hover .os-tt { color: var(--ink); }
.os-rail [aria-selected="true"] .os-n { color: var(--crimson); }
.os-rail [aria-selected="true"] .os-tt { color: var(--ink); }
.os-rail [aria-selected="true"] .os-d { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
.os-rail [role="tab"]:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; border-radius: 4px; }
.os-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--crimson); transform: scaleX(0); transform-origin: left; }
.os-rail [aria-selected="true"] .os-prog { transform: scaleX(1); }
.os[data-playing="true"] .os-rail [aria-selected="true"] .os-prog.run { animation: os-prog var(--dur, 9s) linear forwards; }
@keyframes os-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.os-ctl { align-self: flex-start; margin-top: 16px; }

.os-stage { position: relative; min-height: 470px; padding: clamp(22px, 3vw, 40px); border-radius: 26px; overflow: hidden; background: radial-gradient(120% 34% at 50% -6%, rgba(150, 32, 54, .55), transparent 70%), #111114; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .8); color: #F2F1F3; --ink: #F2F1F3; --text: #D6D5DA; --text-2: #A3A2A9; --text-3: #6E6D74; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14); }
.os-scene { height: 100%; }
.os-scene[hidden] { display: none; }
html[data-js] .os-scene [data-os-step]:not(.in), html[data-js] .os-plan .blk:not(.in) { opacity: 0; transform: translateY(8px); }
.os-scene [data-os-step], .os-plan .blk { transition: opacity .55s var(--ease), transform .65s var(--ease-out); }
.os-scene .ori-face { overflow: visible; }
.os-src { display: flex; align-items: center; gap: 10px; color: var(--text-3); font: 500 12px/18px var(--mono); }
.os-src .ubadge { width: 24px; height: 24px; font-size: 10px; line-height: 24px; }
.os-l { font-size: 15px; line-height: 23px; color: var(--text); }
.os-l b, .os-said b { display: block; margin-bottom: 3px; font: 480 11px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.os-l.me { color: var(--ink); }
.os-fine { color: var(--text-3); font-size: 13px; line-height: 19px; }

/* 01 Ask: a real page on the left, the panel arriving beside it */
.os-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: stretch; }
.os-pt { font: 380 26px/1.15 var(--serif); color: var(--ink); }
.os-ps { margin-top: 4px; color: var(--text-3); font-size: 13px; }
.os-rows { margin: 18px 0 0; padding: 0; list-style: none; }
.os-rows li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.os-rows .ubadge { width: 26px; height: 26px; font-size: 10px; line-height: 26px; }
.os-rows .nm { display: grid; min-width: 0; }
.os-rows .nm b { font-weight: 480; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-rows .nm small { font: 500 11px/16px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-rows .due { white-space: nowrap; }
.os-rows .due.hot { color: #E3707F; }
.os-panel { display: flex; flex-direction: column; gap: 16px; padding-left: 26px; border-left: 1px solid var(--line); }
html[data-js] .os-ask .os-panel:not(.in) { opacity: 0; transform: translateX(24px); }
.os-ph { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.os-ph b { font-weight: 480; }
.os-ph kbd { margin-left: auto; }
.os-face { width: 26px; height: 26px; }
.os-me { align-self: flex-end; max-width: 92%; min-height: 42px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; border: 1px solid var(--line-2); background: #18181C; color: var(--ink); font-size: 14px; line-height: 21px; }
.os-ori { display: grid; gap: 10px; color: var(--text); font-size: 14px; line-height: 22px; }
.os-cite { color: var(--text-3); font: 500 11.5px/17px var(--mono); }

/* 02 Talk it through: a call */
.os-talk { display: grid; justify-items: center; align-content: start; gap: 18px; text-align: center; }
.os-talk .os-src { justify-self: start; }
.os-talker { display: grid; justify-items: center; gap: 12px; margin-top: 6px; }
.os-big { width: 104px; height: 104px; filter: drop-shadow(0 18px 34px rgba(183, 45, 62, .45)); transition: transform .3s var(--ease); }
.os-status { position: relative; height: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
.os-status > span:not(.os-wave) { display: none; }
.os-talk[data-state="listening"] .w-l, .os-talk[data-state="thinking"] .w-t, .os-talk[data-state="speaking"] .w-s { display: inline; }
.os-wave { display: none; align-items: center; gap: 3px; height: 16px; }
.os-wave i { width: 3px; height: 5px; border-radius: 2px; background: #E04A60; }
.os-talk[data-state="listening"] .os-wave { display: inline-flex; }
.os-talk[data-state="listening"] .os-wave i { animation: os-wave .8s ease-in-out infinite alternate; }
.os-wave i:nth-child(2) { animation-delay: .12s; } .os-wave i:nth-child(3) { animation-delay: .24s; } .os-wave i:nth-child(4) { animation-delay: .08s; } .os-wave i:nth-child(5) { animation-delay: .2s; }
.os-talk[data-state="speaking"] .os-big { animation: os-speak .42s ease-in-out infinite alternate; }
.os-caps { display: grid; width: 100%; max-width: 560px; min-height: 132px; align-content: start; gap: 12px; }
.os-say { grid-area: 1 / 1; font: 380 clamp(20px, 2.1vw, 26px)/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.os-say.gone { opacity: 0 !important; transform: translateY(-6px) !important; }
.os-heard { grid-area: 2 / 1; color: var(--text-2); font-size: 15px; line-height: 23px; }
.os-keep { color: var(--text-2); font-size: 14px; }
.os-keep b { font-weight: 480; color: var(--ink); }
.os-end { display: grid; place-items: center; width: 52px; height: 52px; margin-top: 4px; border-radius: 50%; background: #E0663A; }
.os-end svg { width: 24px; height: 24px; fill: #FFFFFF; }

/* 03 Quiz me */
.os-quiz, .os-mem, .os-present { display: grid; gap: 18px; align-content: start; max-width: 680px; margin-inline: auto; }
.os-card-q { font: 380 clamp(24px, 2.6vw, 32px)/1.28 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; margin-top: 6px; }
.os-grades { display: flex; align-items: baseline; gap: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font: 480 14px/20px var(--sans); }
.os-grades .on { color: var(--ink); box-shadow: inset 0 -2px 0 #E04A60; padding-bottom: 4px; }
.os-grades em { margin-left: auto; font-style: normal; color: var(--text-2); font-weight: 400; }

/* 04 Memorise */
.os-script { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: os-l; }
.os-script li { position: relative; padding-left: 34px; font: 380 clamp(18px, 2vw, 22px)/1.45 var(--serif); color: var(--ink); }
.os-script li::before { counter-increment: os-l; content: counter(os-l); position: absolute; left: 0; top: .35em; font: 500 12px/1 var(--mono); color: var(--text-3); }
.os-script .done { color: var(--text-2); }
.os-script .hint { color: var(--ink); letter-spacing: .03em; }
.os-script .blank span { display: inline-block; width: 2.4em; height: .9em; margin-right: 10px; border-bottom: 1.5px solid var(--line-2); }
.os-script .blank span:nth-child(3n) { width: 3.6em; } .os-script .blank span:nth-child(4n) { width: 1.6em; }
.os-said { padding-top: 14px; border-top: 1px solid var(--line); }
.os-said p { font-size: 16px; line-height: 25px; color: var(--ink); }
.os-said del { color: var(--text-3); }
.os-said mark { background: none; color: #E3707F; text-decoration: underline 1.5px; text-underline-offset: 5px; }
.os-learnt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; color: var(--text-2); font-size: 13px; }
.os-learnt i { height: 1px; background: var(--line-2); }
.os-learnt b { display: block; width: 37.5%; height: 1px; background: #E04A60; }

/* 05 Rehearse a presentation */
.os-clock { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.os-clock b { font: 380 clamp(64px, 8vw, 104px)/1 var(--serif); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.os-clock span { color: var(--text-3); font-size: 15px; }
.os-track { position: relative; height: 1px; background: var(--line-2); }
.os-track i { position: absolute; left: 0; top: 0; height: 1px; width: 38.7%; background: #E04A60; transition: width .9s linear; }
.os-track .mk { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--line-2); }
.os-track .m1 { left: 10%; } .os-track .m2 { left: 40%; } .os-track .m3 { left: 80%; }
.os-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 6px 0 0; }
.os-stats div { padding-top: 12px; border-top: 1px solid var(--line); }
.os-stats dt { color: var(--text-3); font-size: 12.5px; }
.os-stats dd { margin: 4px 0 0; font: 380 28px/1.1 var(--serif); color: var(--ink); }
.os-stats small { display: block; margin-top: 4px; font: 400 12.5px/17px var(--sans); color: var(--text-2); }

/* 06 Plan */
.os-plan { overflow-x: auto; }
.os-week { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); height: 400px; min-width: 560px; }
.os-day { position: relative; border-left: 1px solid var(--line); }
.os-day:first-child { border-left: 0; }
.os-day b { display: block; padding: 0 10px 10px; border-bottom: 1px solid var(--line); font: 480 12.5px/16px var(--sans); color: var(--text-3); }
.os-day i { position: absolute; left: 6px; right: 6px; height: 70px; padding: 9px 10px; border-radius: 14px; font-style: normal; font-size: 12.5px; line-height: 17px; color: var(--ink); overflow: hidden; }
.os-day .t1 { top: 40px; } .os-day .t2 { top: 116px; } .os-day .t3 { top: 196px; } .os-day .t4 { top: 210px; } .os-day .t5 { top: 248px; } .os-day .t6 { top: 290px; }
.os-day .cls { background: linear-gradient(165deg, color-mix(in srgb, var(--u) 40%, transparent) 0%, color-mix(in srgb, var(--u) 19%, transparent) 100%); }
.os-day .blk { color: #FFFFFF; background: radial-gradient(90% 80% at 88% 18%, rgba(226, 96, 112, .9) 0%, rgba(226, 96, 112, 0) 60%), linear-gradient(140deg, #4E1A24 0%, #8E2C3D 45%, #B9485A 70%, #D98F78 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 30px -16px rgba(0, 0, 0, .7); }

.os-tag { margin-top: 18px; }
/* Under 980px the chapters are line tabs, so the chapter in front says its sentence here instead. */
.os-mcap { display: none; margin: -6px 0 2px; color: var(--text-2); font-size: 15px; line-height: 23px; min-height: 46px; }

@media (max-width: 980px) {
  .os { grid-template-columns: minmax(0, 1fr); }
  .os-rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-top: 0; border-bottom: 1px solid var(--line); gap: 22px; }
  .os-rail::-webkit-scrollbar { display: none; }
  .os-rail [role="tab"] { flex: none; grid-template-columns: auto; padding: 0 0 12px; border-bottom: 0; }
  .os-n, .os-d { display: none; }
  .os-mcap { display: block; }
  .os-ctl { display: none; }
  .os-prog { bottom: 0; height: 2px; }
  .os-ask { grid-template-columns: minmax(0, 1fr); }
  .os-page { display: none; }
  .os-panel { padding-left: 0; border-left: 0; }
  .os-stage { min-height: 0; }
}

/* Ori thinking anywhere: the same face as Ori's page */
.os-scene[data-state="thinking"] .ori-face .eyes { opacity: 0; }
.os-scene[data-state="thinking"] .ori-face .dots circle { opacity: 1; animation: ori-dot 1.2s ease-in-out infinite; }
.os-scene[data-state="thinking"] .ori-face .dots circle:nth-child(2) { animation-delay: .16s; }
.os-scene[data-state="thinking"] .ori-face .dots circle:nth-child(3) { animation-delay: .32s; }
.os-scene[data-state="thinking"] .ori-face .bead-hot { opacity: 1; animation: ori-bead .9s ease-in-out infinite alternate; }
@keyframes os-wave { to { height: 16px; } }
@keyframes os-speak { to { transform: scale(1.045); } }

/* ----------------------------------------------------------- motion only */
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .split .w { opacity: 0; transform: translateY(.4em); animation: word-in 1.1s var(--ease-out) forwards; }
  html[data-js] .split .w:nth-child(2) { animation-delay: .07s; }
  html[data-js] .split .w:nth-child(3) { animation-delay: .14s; }
  html[data-js] .split .w:nth-child(4) { animation-delay: .21s; }
  html[data-js] .split .w:nth-child(5) { animation-delay: .28s; }
  html[data-js] .float { opacity: 0; translate: 0 26px; animation: float-in 1.3s var(--ease-out) 1.1s forwards; }
  html[data-js] .f-slot { animation-delay: 1.35s; }
  html[data-js] [data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
  /* A slide's words arrive each time it comes to the front. */
  html[data-js] .dk-slide .slide-text > *, html[data-js] .dk-slide .points li { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease-out); }
  html[data-js] .dk-slide.is-on .slide-text > *, html[data-js] .dk-slide.is-on .points li { opacity: 1; transform: none; }
  html[data-js] .dk-slide.is-on .slide-text > :nth-child(2) { transition-delay: .08s; }
  html[data-js] .dk-slide.is-on .points li:nth-child(1) { transition-delay: .16s; }
  html[data-js] .dk-slide.is-on .points li:nth-child(2) { transition-delay: .22s; }
  html[data-js] .dk-slide.is-on .points li:nth-child(3) { transition-delay: .28s; }
  html[data-js] .dk-slide.is-on .points li:nth-child(4) { transition-delay: .34s; }
  html[data-js] .dk-slide .slide-fig { transform: translateY(16px); transition: transform 1s var(--ease-out); }
  html[data-js] .dk-slide.is-on .slide-fig { transform: none; }
}
@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes float-in { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .bob, .sync-line::after, #ori-agent .eye, .phone-status::before { animation: none; }
  .float, .phone-fig img, .sync-fig img { transform: none; }
}
@media print {
  html[data-js] .split .w, html[data-js] .float, html[data-js] .dk-slide, html[data-js] .dk-slide * { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .deck-track { display: block; overflow: visible; }
}

/* ------------------------------------------------------------------- phones, from Instagram */
/* Josh, 13 Oct 2026: "make the website look really good from a mobile phone point of view... so when
   someone lands from Instagram, they want to go and download it. Add 'Mobile phone version coming
   soon'." Someone who taps through from Instagram is holding a phone, and a phone cannot run the Mac
   app, so on a phone the download becomes "Send it to my Mac" (the phone's own share sheet:
   AirDrop, Messages, Mail), a line says the iPhone app is coming, the iPhone peeks in beside the
   Mac, and a slim bar keeps the one action in reach down the page. A phone here is a touch screen
   with no hover pointer, or any window under 640px. script.js, sendToMac() and phoneBar(). */
.on-phone { display: none; }
.send-note { color: var(--text-2); font-size: 13px; line-height: 20px; text-wrap: balance; }
.send-note:empty { display: none; }

@media (hover: none) and (pointer: coarse), (max-width: 640px) {
  .on-mac { display: none; }
  .phone-line.on-phone { display: block; }
  .btn.on-phone { display: inline-flex; }
  .iphone-peek.on-phone { display: block; }
  .phone-bar.on-phone { display: flex; }

  /* Nothing loops for decoration (Josh's design rules): the dot rings four times, the sheen passes
     twice and the iPhone floats up and back, then each comes to rest. */
  /* The line over the button: a live dot, then the news. */
  .phone-line { margin: 0 0 2px; max-width: 30em; color: var(--text-2); font-size: 13.5px; line-height: 20px; text-wrap: balance; }
  .phone-line a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
  .pulse { position: relative; display: inline-block; vertical-align: 1px; margin-right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #E04A60; }
  .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #E04A60; animation: pulse-ring 2.2s cubic-bezier(.2, .7, .3, 1) 4 forwards; }
  @keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

  /* The button is the size of a thumb, with a slow sheen that says "this one". */
  .hero-actions .btn-lg.on-phone, .get-cta .btn-lg.on-phone, .actions .btn-lg.on-phone {
    position: relative; overflow: hidden; height: 52px; min-width: min(300px, 100%); padding: 0 28px; font-size: 16.5px;
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--action) 70%, transparent);
  }
  .btn.on-phone::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-120%); animation: sheen 4.6s cubic-bezier(.4, 0, .2, 1) 2.2s 2;
  }
  @keyframes sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

  /* The iPhone, peeking in at the Mac's lower right: it rises in once the Mac has landed, then
     floats. The photo's own dark ground is feathered away so the phone sits on the hero. */
  .hero-fig { position: relative; }
  .iphone-peek { position: absolute; z-index: 4; right: -3%; bottom: 11%; width: 54%; opacity: 0; transform: translate(12%, 16%); animation: peek-in 1s cubic-bezier(.2, .9, .2, 1) 1.15s forwards; }
  /* The tilt and the float are the photo's, so the label under it stays level and on screen. */
  .iphone-peek img { display: block; width: 100%; height: auto; transform: rotate(5deg); animation: float 5.5s ease-in-out 2.2s 2 alternate;
    -webkit-mask-image: radial-gradient(40% 47% at 51% 50%, #000 80%, transparent 100%); mask-image: radial-gradient(40% 47% at 51% 50%, #000 80%, transparent 100%);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
  .iphone-peek-tag { position: absolute; left: 0; right: 0; bottom: -2%; display: flex; align-items: center; justify-content: center; gap: 6px; color: #F2F1F3; font: 500 10.5px/14px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .iphone-peek-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E04A60; flex: none; }
  @keyframes peek-in { to { opacity: 1; transform: none; } }
  @keyframes float { from { transform: rotate(5deg) translateY(0); } to { transform: rotate(5deg) translateY(-9px); } }

  /* The deck says it moves sideways: one small nudge the first time it comes into view. */
  .deck-track.nudge { animation: nudge 1.25s cubic-bezier(.3, .7, .3, 1); }
  @keyframes nudge { 0%, 100% { transform: none; } 42% { transform: translateX(-48px); } }

  /* The bar that follows a phone down the page, in from the bottom once the hero's button has gone. */
  .phone-bar {
    position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-between; gap: 12px; padding: 9px 9px 9px 16px; border-radius: 18px;
    background: color-mix(in srgb, #0B0C11 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 14px 40px rgba(0, 0, 0, .38); color: #F2F1F3;
    transform: translateY(calc(100% + 24px)); transition: transform .55s cubic-bezier(.2, .9, .2, 1);
  }
  .phone-bar[data-on] { transform: none; }
  .pb-copy { min-width: 0; }
  .pb-copy b { display: block; font: 600 14.5px/1.2 var(--sans); letter-spacing: -.01em; }
  .pb-copy small { display: block; margin-top: 2px; color: rgba(242, 241, 243, .6); font-size: 12px; line-height: 16px; }
  .phone-bar .btn { position: relative; overflow: hidden; flex: none; height: 42px; padding: 0 16px; font-size: 14.5px; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse::after, .btn.on-phone::after, .deck-track.nudge, .iphone-peek img { animation: none; }
  .iphone-peek { animation: none; opacity: 1; transform: none; }
  .phone-bar { transition: none; }
}