/* Max — one stylesheet, no framework, no build step.
 *
 * Liquid glass over a living background. Light: white, blue and ink.
 * Dark: Instagram black. The background's colours follow the time of day.
 *
 * Performance rules this file keeps:
 * - Only transform and opacity animate, so the GPU does the motion and nothing
 *   re-lays out mid-animation: smooth at 120 Hz.
 * - Real blur (backdrop-filter) only where content scrolls underneath: the
 *   bars, sheets and the talk screen. Cards sit on a soft gradient that is
 *   already blurry, so translucency alone looks frosted and costs nothing.
 *
 * Phone first. Sidebar from 900 px; the assistant docks on the right from 1280 px.
 */

/* ----------------------------------------------------------------- tokens */

:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, .64);
  --glass-2: rgba(255, 255, 255, .74);
  --glass-hi: rgba(255, 255, 255, .92);
  --edge: rgba(16, 24, 40, .075);
  --fill: rgba(16, 24, 40, .045);
  --fill-2: rgba(16, 24, 40, .085);
  --side: rgba(255, 255, 255, .5);
  --raise: rgba(255, 255, 255, .7);
  --ink: #0b0c0f; --ink-2: #2b313c; --muted: #687184;
  --line: rgba(16, 24, 40, .08); --line-2: rgba(16, 24, 40, .15);
  --accent: #0a6cff; --accent-ink: #0058db; --accent-soft: rgba(10, 108, 255, .1); --accent-line: rgba(10, 108, 255, .3); --on-accent: #fff;
  --ok: #0f9d51; --ok-soft: rgba(15, 157, 81, .12);
  --bad: #e5484d; --bad-soft: rgba(229, 72, 77, .12);
  --warn: #b26b05; --warn-soft: rgba(245, 166, 35, .17);
  --focus: rgba(10, 108, 255, .42);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .14);
  --shadow-lg: 0 30px 80px -24px rgba(16, 24, 40, .38);
  --spec: rgba(255, 255, 255, .95);
  --spec-2: rgba(255, 255, 255, .55);
  --scrim: rgba(12, 16, 24, .26);
  --toast: rgba(14, 16, 22, .9); --on-toast: #fff;
  --sheet-bg: rgba(248, 250, 253, .88);
  --blur: blur(24px) saturate(190%);
  --amb-o: .8;

  /* Time of day (the server sets data-daypart). The background takes the light
     of the hour; the headline card is the sky: morning ember, day blue, dusk
     twilight, night navy. One brand blue for everything you can press. */
  --l1: #bcd7ff; --l2: #dbe9ff; --l3: #c6f0ff;
  --d1: #1d4ed8; --d2: #0e6a8a; --d3: #1e3a8a;
  --g1: #1a7cff; --g2: #0a52d6;
  --a1: var(--l1); --a2: var(--l2); --a3: var(--l3);
  --grad: linear-gradient(150deg, var(--g1) 0%, var(--g2) 100%);
  --ig: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);

  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --r: 22px; --r-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.45, 0, .55, 1);
  --spring: cubic-bezier(.3, 1.22, .6, 1);
  --bounce: cubic-bezier(.3, 1.3, .6, 1);
  --sheet: cubic-bezier(.32, .72, 0, 1);
  --tab-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
:root[data-daypart="dawn"]  { --l1: #ffd9c4; --l2: #ffe9dc; --l3: #cfe1ff; --d1: #9a3412; --d2: #1e40af; --d3: #0f766e; --g1: #e8613a; --g2: #b8365c; }
:root[data-daypart="dusk"]  { --l1: #ccd6ff; --l2: #ffdcc8; --l3: #c2d8ff; --d1: #1e3a8a; --d2: #92400e; --d3: #1e40af; --g1: #3657d6; --g2: #1c2a7e; }
:root[data-daypart="night"] { --l1: #c8d1ee; --l2: #d6def5; --l3: #bfd4ea; --d1: #172554; --d2: #0c4a6e; --d3: #1e293b; --g1: #26407e; --g2: #0e1836; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f14; --surface: #121820;
  --glass: rgba(26, 32, 42, .58); --glass-2: rgba(22, 28, 37, .72); --glass-hi: rgba(42, 50, 62, .86);
  --edge: rgba(255, 255, 255, .075);
  --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .11);
  --side: rgba(255, 255, 255, .025); --raise: rgba(255, 255, 255, .05);
  --ink: #f5f6f7; --ink-2: #cfd6df; --muted: #8d97a5;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --accent: #2f8cff; --accent-ink: #6caeff; --accent-soft: rgba(47, 140, 255, .17); --accent-line: rgba(47, 140, 255, .42); --on-accent: #fff;
  --ok: #35d07d; --ok-soft: rgba(53, 208, 125, .14); --bad: #ff5c63; --bad-soft: rgba(255, 92, 99, .15); --warn: #f5b445; --warn-soft: rgba(245, 180, 69, .15);
  --focus: rgba(47, 140, 255, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 30px 90px -20px rgba(0, 0, 0, .85);
  --spec: rgba(255, 255, 255, .16); --spec-2: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .52);
  --toast: rgba(38, 46, 58, .92); --on-toast: #fff;
  --sheet-bg: rgba(17, 22, 30, .88);
  --amb-o: .26;
  --a1: var(--d1); --a2: var(--d2); --a3: var(--d3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f14; --surface: #121820;
    --glass: rgba(26, 32, 42, .58); --glass-2: rgba(22, 28, 37, .72); --glass-hi: rgba(42, 50, 62, .86);
    --edge: rgba(255, 255, 255, .075);
    --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .11);
    --side: rgba(255, 255, 255, .025); --raise: rgba(255, 255, 255, .05);
    --ink: #f5f6f7; --ink-2: #cfd6df; --muted: #8d97a5;
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
    --accent: #2f8cff; --accent-ink: #6caeff; --accent-soft: rgba(47, 140, 255, .17); --accent-line: rgba(47, 140, 255, .42); --on-accent: #fff;
    --ok: #35d07d; --ok-soft: rgba(53, 208, 125, .14); --bad: #ff5c63; --bad-soft: rgba(255, 92, 99, .15); --warn: #f5b445; --warn-soft: rgba(245, 180, 69, .15);
    --focus: rgba(47, 140, 255, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -14px rgba(0, 0, 0, .7);
    --shadow-lg: 0 30px 90px -20px rgba(0, 0, 0, .85);
    --spec: rgba(255, 255, 255, .16); --spec-2: rgba(255, 255, 255, .07);
    --scrim: rgba(0, 0, 0, .52);
    --toast: rgba(38, 46, 58, .92); --on-toast: #fff;
  --sheet-bg: rgba(17, 22, 30, .88);
    --amb-o: .26;
    --a1: var(--d1); --a2: var(--d2); --a3: var(--d3);
  }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; background: transparent; color: var(--ink);
  font: 400 15px/1.5 var(--f-body); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}
a { color: inherit; }
a:not(.btn):not(.plain) { color: var(--accent-ink); text-decoration: none; }
a:not(.btn):not(.plain):hover { text-decoration: underline; text-underline-offset: 2px; }
a.plain { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.12; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -.028em; }
h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
h3 { font-size: 17px; font-weight: 620; letter-spacing: -.012em; }
p { margin: 0 0 .6em; }
b, strong { font-weight: 620; }
small, .muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: 12.5px; }
.num { font-family: var(--f-display); font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 16px; height: 16px; }
.ico.inl { display: inline; vertical-align: -3px; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
::selection { background: var(--accent-soft); }

/* The MAX wordmark: thin strokes, a Λ for the A. */
.wordmark { fill: none; stroke: currentColor; stroke-width: var(--sw, 3.6); stroke-linecap: butt; stroke-linejoin: miter; overflow: visible; height: 16px; width: auto; aspect-ratio: 154 / 46; }

/* ---------------------------------------------------- the living background */

.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.ambient i {
  position: absolute; width: 78vmax; height: 78vmax; border-radius: 50%; opacity: var(--amb-o); will-change: transform;
  background: radial-gradient(closest-side, var(--c), transparent);
}
.ambient i:nth-child(1) { --c: var(--a1); left: -34vmax; top: -36vmax; animation: drift-a 36s var(--ease-io) infinite alternate; }
.ambient i:nth-child(2) { --c: var(--a2); right: -40vmax; top: 8vh; animation: drift-b 44s var(--ease-io) infinite alternate; }
.ambient i:nth-child(3) { --c: var(--a3); left: -12vmax; bottom: -46vmax; animation: drift-c 52s var(--ease-io) infinite alternate; }
@keyframes drift-a { to { transform: translate3d(22vmax, 16vmax, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-20vmax, 22vmax, 0) scale(.88); } }
@keyframes drift-c { to { transform: translate3d(16vmax, -20vmax, 0) scale(1.12); } }

/* ------------------------------------------------------------- the opening */

.splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(90% 60% at 50% 42%, color-mix(in srgb, var(--a1) 38%, var(--bg)), var(--bg) 72%);
  animation: splash-out .6s var(--ease) 1.75s forwards; cursor: pointer;
}
.splash svg { width: min(52vw, 250px); height: auto; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linejoin: miter; }
.splash path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .95s cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.splash path:nth-child(2) { animation-delay: .28s; }
.splash path:nth-child(3) { animation-delay: .46s; }
.splash .tag { margin: 0; font: 600 10.5px/1 var(--f-body); letter-spacing: .52em; text-indent: .52em; color: var(--muted); opacity: 0; animation: tag-in .8s var(--ease) 1s forwards; }
.splash .beam {
  position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%);
  opacity: 0; transform: scale(.2); animation: beam 1.5s var(--ease) .75s forwards;
}
.splash.skip { animation: splash-out .3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes tag-in { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .52em; } }
@keyframes beam { 40% { opacity: .9; } to { opacity: 0; transform: scale(1); } }
@keyframes splash-out { to { opacity: 0; transform: scale(1.12); visibility: hidden; pointer-events: none; } }
/* The app rises out of the splash. */
.splashing #main, .splashing .top { animation: app-in .8s var(--ease) 1.7s both; }
.splashing .tabbar { animation: bar-in .9s var(--spring) 1.9s both; }
.splashing.skipped #main, .splashing.skipped .top { animation-delay: 0s; animation-duration: .45s; }
.splashing.skipped .tabbar { animation-delay: .1s; animation-duration: .6s; }
@keyframes app-in { from { opacity: 0; transform: scale(.94) translate3d(0, 14px, 0); } }
@keyframes bar-in { from { opacity: 0; transform: translate3d(0, 90px, 0) scale(.8); } }

/* ----------------------------------------------------------------- shell */

.shell { min-height: 100dvh; }
.col { min-width: 0; transform-origin: 50% 0; transition: transform .5s var(--sheet); }
.side { display: none; }

.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  height: calc(58px + var(--safe-t)); padding: var(--safe-t) 14px 0 18px;
}
/* iOS 26 "scroll edge": content blurs away under the bar instead of hitting a hard line. */
.top::before {
  content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 72%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
  opacity: 0; transition: opacity .3s ease;
}
.top.scrolled::before { opacity: 1; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.top .brand .wordmark { height: 15px; --sw: 4.2; transition: opacity .25s ease, transform .35s var(--spring); }
.top .spacer { flex: 1; }
.top-title {
  position: absolute; left: 50%; bottom: 17px; transform: translate3d(-50%, 8px, 0); opacity: 0; pointer-events: none;
  font: 650 16px/1 var(--f-display); letter-spacing: -.015em; white-space: nowrap; max-width: calc(100vw - 230px);
  overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease, transform .4s var(--spring);
}
.top.scrolled .top-title { opacity: 1; transform: translate3d(-50%, 0, 0); }
@media (max-width: 899px) { .top.scrolled .brand .wordmark { opacity: 0; transform: scale(.8); } }

.iconbtn {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; padding: 0;
  background: var(--glass); color: var(--ink); display: grid; place-items: center; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec-2), 0 2px 10px -4px rgba(16, 24, 40, .14);
}
.iconbtn .ico { width: 20px; height: 20px; }
.iconbtn:hover { background: var(--glass-hi); }
.dot {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff3b47; color: #fff; font: 700 10.5px/18px var(--f-body); text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; padding: 2px; background: var(--ig); display: grid; flex: none;
}
.avatar b { display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 2px solid var(--bg); font: 650 15px/1 var(--f-display); color: var(--ink); }
button.avatar { border: 0; cursor: pointer; }

.main { padding: 2px 16px calc(var(--tab-h) + 44px + var(--safe-b)); max-width: 880px; margin: 0 auto; }
.page-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 18px; }
.page-h > div:first-child { min-width: 0; flex: 1 1 260px; }
.page-h p { margin: 6px 0 0; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; font-size: 14px; }

/* ------------------------------------------------- the Instagram tab bar */

.tabbar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(10px + var(--safe-b));
  display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0 14px; pointer-events: none;
  transform-origin: 50% 100%; transition: transform .5s var(--spring);
}
.tabbar > * { pointer-events: auto; }
.tabbar.compact { transform: translate3d(0, 8px, 0) scale(.84); }
.tabs, .orb-btn {
  position: relative; background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 .5px var(--edge), 0 10px 34px -10px rgba(10, 16, 30, .3);
}
.tabs::before, .orb-btn::before, .lg::before {
  /* the liquid-glass rim: bright where light hits, fading round the edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(160deg, var(--spec) 0%, transparent 34%, transparent 66%, var(--spec-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tabs {
  flex: 1; max-width: 400px; height: var(--tab-h); border-radius: 31px; padding: 5px;
  display: grid; grid-template-columns: repeat(5, 1fr); isolation: isolate;
}
.tabs a {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 26px;
  color: var(--ink-2); font: 600 10px/1 var(--f-body); letter-spacing: 0; text-decoration: none; z-index: 0;
  transition: transform .4s var(--bounce), color .2s ease;
}
.tabs a .ico { width: 24px; height: 24px; transition: transform .45s var(--spring); }
.tabs a .lbl { transition: opacity .18s ease, transform .4s var(--spring); }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"] .ico { stroke-width: 2.25; }
.tabs a:active { transform: scale(.88); }
.tabs .pill {
  position: absolute; inset: 0; z-index: -1; border-radius: 26px; background: var(--fill-2); will-change: transform;
  box-shadow: inset 0 1px 0 var(--spec-2), inset 0 0 0 .5px var(--edge);
}
.tabs .dot { top: 5px; right: calc(50% - 22px); }
.tabbar.compact .tabs .lbl { opacity: 0; transform: scale(.6); }
.tabbar.compact .tabs a .ico { transform: translate3d(0, 6.5px, 0) scale(1.08); }

/* The orb: Max, alive. Tap it to talk. */
.orb-btn {
  width: var(--tab-h); height: var(--tab-h); flex: none; border-radius: 50%; border: 0; padding: 6px; cursor: pointer;
  transition: transform .45s var(--bounce);
}
.orb-btn:active { transform: scale(.88); }
.orb-btn, [data-talk] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.orb {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; isolation: isolate;
  /* Sapphire: the app icon's dark glass with a blue light alive inside it. */
  background: radial-gradient(circle at 50% 118%, #3a96ff 0%, #134aa8 34%, #0b1630 68%, #05070d 100%);
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .35), 0 4px 14px -5px rgba(47, 140, 255, .55);
}
.orb i { position: absolute; width: 80%; height: 80%; border-radius: 50%; opacity: .85; will-change: transform; }
.orb i:nth-child(1) { left: -6%; top: -14%; background: radial-gradient(closest-side, #4f9dff, transparent); transform-origin: 70% 80%; animation: swirl 9s linear infinite; }
.orb i:nth-child(2) { right: -12%; top: 6%; background: radial-gradient(closest-side, #9fdcff, transparent); opacity: .55; transform-origin: 20% 60%; animation: swirl 12s linear infinite reverse; }
.orb i:nth-child(3) { left: 10%; bottom: -24%; background: radial-gradient(closest-side, #1d6bff, transparent); transform-origin: 50% 10%; animation: swirl 15s linear infinite; }
.orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: radial-gradient(58% 42% at 36% 24%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%),
              radial-gradient(70% 40% at 50% 108%, rgba(255, 255, 255, .3), transparent 70%);
}
@keyframes swirl { to { transform: rotate(360deg); } }
.orb-btn.live { box-shadow: inset 0 0 0 .5px var(--edge), 0 0 0 0 rgba(47, 140, 255, .5), 0 10px 34px -10px rgba(10, 16, 30, .3); animation: live-ring 1.8s var(--ease) infinite; }
@keyframes live-ring { to { box-shadow: inset 0 0 0 .5px var(--edge), 0 0 0 14px rgba(47, 140, 255, 0), 0 10px 34px -10px rgba(10, 16, 30, .3); } }

/* ------------------------------------------------- tablet and desktop */

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
  .side {
    display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    padding: 22px 14px 16px; background: var(--side); box-shadow: inset -.5px 0 0 var(--edge);
    scrollbar-width: none;
  }
  .side .brand { padding: 8px 12px 26px; }
  .side .brand .wordmark { height: 17px; --sw: 3.8; }
  .side a.nav, .side .signout {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 0; background: transparent;
    color: var(--ink-2); text-decoration: none; font: 500 14.5px/1.2 var(--f-body); cursor: pointer;
    transition: background-color .15s ease, transform .3s var(--bounce);
  }
  .side a.nav:hover, .side .signout:hover { background: var(--fill); }
  .side a.nav:active { transform: scale(.97); }
  .side a.nav[aria-current="page"] {
    background: var(--glass-hi); color: var(--ink); font-weight: 600;
    box-shadow: inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec-2), var(--shadow);
  }
  .side a.nav[aria-current="page"] .ico { color: var(--accent); stroke-width: 2.1; }
  .side .count { margin-left: auto; font: 650 11.5px/1 var(--f-body); color: #fff; background: #ff3b47; border-radius: 9px; padding: 3px 7px; }
  .side .foot { margin-top: auto; display: grid; gap: 2px; padding-top: 16px; }
  .top { padding-left: 32px; padding-right: 24px; }
  .top .brand { display: none; }
  .top-title { left: 32px; transform: translate3d(0, 8px, 0); }
  .top.scrolled .top-title { transform: translate3d(0, 0, 0); }
  .main { padding: 2px 32px 120px; }
  .tabs { display: none; }
  .tabbar { left: auto; right: 26px; bottom: 26px; padding: 0; transform-origin: 100% 100%; }
  .tabbar.compact { transform: none; }
  .orb-btn { width: 64px; height: 64px; }
}
@media (min-width: 1280px) {
  .shell.with-dock { grid-template-columns: 250px minmax(0, 1fr) 390px; }
  .with-dock .main { padding-bottom: 56px; }
  .with-dock .tabbar { display: none; }
  .with-dock .top [data-open-assistant] { display: none; }
}

/* ----------------------------------------------------------------- cards */

.card {
  position: relative; background: var(--glass); border-radius: var(--r); padding: 18px; margin-bottom: 14px;
  box-shadow: inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec-2), var(--shadow);
}
.card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-bottom: 12px; }
.card-h h2, .card-h h3 { display: flex; align-items: center; gap: 8px; }
.card-h h3 .ico { color: var(--accent); }
.card-h a.more { font-size: 13.5px; font-weight: 550; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.card.flat { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
details.card > summary { padding: 2px 0; }
.grid2 { display: grid; gap: 14px; margin-bottom: 14px; }
.grid2 > .card { margin-bottom: 0; }
@media (min-width: 700px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* Revolut-style headline card, coloured by the time of day, with a slow sheen. */
.hero {
  background: var(--grad); color: #fff; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 22px 44px -22px color-mix(in srgb, var(--g2) 80%, transparent);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; width: 160%; aspect-ratio: 1; left: -30%; top: -80%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, .13) 40deg, transparent 90deg, transparent 180deg, rgba(255, 255, 255, .07) 230deg, transparent 280deg);
  animation: swirl 28s linear infinite; will-change: transform;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .28), transparent);
}
.hero .num { font-size: 52px; line-height: 1; display: block; color: #fff; }
.hero small, .hero .muted { color: rgba(255, 255, 255, .8); }
.hero a:not(.btn) { color: #fff; }
.hero .card-h h3 { color: rgba(255, 255, 255, .85); font: 650 12px/1 var(--f-body); text-transform: uppercase; letter-spacing: .12em; }
.hero .seg { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); }
.hero .seg button, .hero .seg a { color: rgba(255, 255, 255, .92); }
.hero .seg button:hover { background: rgba(255, 255, 255, .16); }
.hero .tick { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, .75); color: transparent; }
.hero .tick:hover { color: #fff; }
.hero .btn { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.hero .empty { color: rgba(255, 255, 255, .88); }
.hero .empty b { color: #fff !important; }
.hero-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); margin-top: 12px; overflow: hidden; }
.hero-bar i { display: block; height: 100%; border-radius: 4px; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  animation: grow 1.1s var(--ease) .2s both; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
@keyframes grow { from { transform: scaleX(0); } }
.hero .title-big { font: 650 22px/1.2 var(--f-display); letter-spacing: -.02em; margin-top: 8px; }

/* --------------------------------------------------------------- buttons */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 0; background: var(--fill); color: var(--ink);
  font: 600 14px/1 var(--f-body); letter-spacing: -.01em; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 .5px var(--edge);
  transition: transform .35s var(--bounce), background-color .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--fill-2); }
.btn:active { transform: scale(.94); }
.btn.primary {
  background: var(--accent) linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn.primary:hover { background-color: var(--accent-ink); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--fill); }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 34px; padding: 0 13px; font-size: 13px; }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 34px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; margin: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 13px;
  background: var(--fill); color: var(--ink-2); font: 550 12.5px/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--bounce), background-color .15s ease;
}
a.chip:active { transform: scale(.94); }
.chip.on, .chip[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 .5px var(--accent-line); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }

.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; margin: 4px 0 14px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.flash .ico { margin-top: 1px; }
.flash li + li { margin-top: 4px; }
.flash.ok { background: var(--ok-soft); color: var(--ok); }
.flash.err { background: var(--bad-soft); color: var(--bad); }
.flash.warn { background: var(--warn-soft); color: var(--warn); }
.flash ul { margin: 0; padding-left: 18px; }

/* ----------------------------------------------------------------- lists */

.list { list-style: none; margin: 0; padding: 0; }
.list > li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; box-shadow: 0 -.5px 0 var(--line); }
.list > li:first-child { box-shadow: none; padding-top: 2px; }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 600; overflow-wrap: anywhere; letter-spacing: -.01em; }
.list .sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; margin-top: 1px; }
.list a.plain { text-decoration: none; display: block; border-radius: 10px; transition: transform .3s var(--bounce), opacity .15s ease; }
.list a.plain:active { transform: scale(.98); opacity: .7; }
.empty { color: var(--muted); padding: 6px 0; }

/* Round checkbox, like Reminders. */
.tick {
  position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 0; padding: 0; margin-top: -1px;
  background: transparent; box-shadow: inset 0 0 0 1.7px var(--line-2); color: transparent;
  display: grid; place-items: center; cursor: pointer; transition: transform .35s var(--bounce), box-shadow .15s ease, background-color .2s ease;
}
.tick .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.tick:hover { box-shadow: inset 0 0 0 1.7px var(--accent); color: var(--accent); }
.tick:active { transform: scale(.85); }
.tick.done { background: var(--accent); box-shadow: none; color: #fff; }
.pri-1 .title::before { content: "!"; color: var(--bad); font-weight: 800; margin-right: 6px; }

/* Swipe a to-do: right is done, left is drop. */
.list > li { touch-action: pan-y; }
.list > li.swiping > * { transform: translate3d(var(--dx, 0), 0, 0); transition: none; }
.list > li.settle > * { transition: transform .45s var(--spring); }
.list > li::before, .list > li::after {
  position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; padding: 0 16px; border-radius: 14px;
  font: 700 13px/1 var(--f-body); color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.list > li.swipeable::before { content: attr(data-sw-right); left: -4px; right: 30%; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 0%, transparent)); }
.list > li.swipeable::after { content: attr(data-sw-left); right: -4px; left: 30%; justify-content: flex-end; background: linear-gradient(270deg, var(--bad), color-mix(in srgb, var(--bad) 0%, transparent)); }
.list > li.go-right::before { opacity: calc(var(--p, 0)); }
.list > li.go-left::after { opacity: calc(var(--p, 0)); }
.list > li.armed::before, .list > li.armed::after { filter: saturate(1.3); }
.list > li.leaving { transition: opacity .3s ease, transform .35s var(--ease); opacity: 0; }

/* -------------------------------------------------------------- timeline */

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 58px 4px 1fr; gap: 12px; padding: 8px 0; align-items: stretch; }
.tl .t { font: 500 13px/1.3 var(--f-body); font-variant-numeric: tabular-nums; color: var(--muted); padding-top: 2px; text-align: right; }
.tl .t b { display: block; color: var(--ink); font-weight: 650; }
.tl .bar { border-radius: 4px; background: var(--c, var(--accent)); }
.tl .task .bar { background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 10px); }
.tl .task.fixed .bar { background: var(--accent); }
.tl .what { min-width: 0; }
.tl .what .title { font-weight: 600; overflow-wrap: anywhere; letter-spacing: -.01em; }
.tl .what .sub { font-size: 13px; color: var(--muted); }
.tl li.past { opacity: .45; }
.tl li.now { position: relative; }
.tl li.now::before {
  content: ""; position: absolute; inset: 2px -10px; z-index: -1; border-radius: 14px; background: var(--accent-soft);
}
.tl li.now .what .title::after {
  content: "now"; margin-left: 8px; font: 700 10px/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: var(--accent); padding: 3px 7px; border-radius: 6px; vertical-align: 2px;
}
.tl .allday .t { font: 600 10.5px/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .06em; }

/* ----------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--glass); border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec-2); }
.card .stat { background: var(--fill); box-shadow: none; }
.stat .num { font-size: 30px; line-height: 1; display: block; }
.stat small { display: block; margin-top: 7px; font-size: 12.5px; }
.stat.bad .num { color: var(--bad); }

/* ----------------------------------------------------------------- forms */

label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=email], select, textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-sm); border: 0;
  background: var(--fill); color: var(--ink); font: 400 16px var(--f-body);
  box-shadow: inset 0 0 0 .5px var(--edge); transition: box-shadow .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
textarea { min-height: 90px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: 0; background-color: var(--glass-hi); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.form-grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid .wide { grid-column: 1 / -1; } }
.quick { display: flex; gap: 8px; align-items: center; }
.quick input { flex: 1; }
.card.quick { padding: 8px; border-radius: 999px; }
.card.quick input { background: transparent; box-shadow: none; min-height: 42px; padding-left: 14px; }
.card.quick .btn { width: 42px; height: 42px; padding: 0; flex: none; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.hint code, .prose code { font-family: var(--f-mono); font-size: 12px; background: var(--fill); padding: 1px 6px; border-radius: 6px; }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill); gap: 2px; box-shadow: inset 0 0 0 .5px var(--edge); }
.seg a, .seg button {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; border: 0; background: transparent; padding: 7px 13px; border-radius: 999px; color: var(--muted);
  font: 600 13px/1 var(--f-body); text-decoration: none; cursor: pointer; transition: transform .3s var(--bounce), background-color .15s ease, color .15s ease;
}
.seg a:active, .seg button:active { transform: scale(.92); }
.seg .on, .seg [aria-pressed="true"] { background: var(--glass-hi); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--edge), 0 2px 8px -2px rgba(16, 24, 40, .18); }

details.more summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; box-shadow: inset 0 -.5px 0 var(--line); }
table.t td { padding: 9px 8px; box-shadow: inset 0 -.5px 0 var(--line); vertical-align: top; }
table.t td.n { font-variant-numeric: tabular-nums; text-align: right; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* reading */
.prose { font-size: 15.5px; line-height: 1.62; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3 { margin: 1.1em 0 .45em; }
.prose ul, .prose ol { padding-left: 20px; }
.prose hr { border: 0; height: .5px; background: var(--line-2); margin: 18px 0; }
.prose table { border-collapse: collapse; }
.prose td, .prose th { border: .5px solid var(--line-2); padding: 5px 8px; }
.prose img { max-width: 100%; border-radius: 14px; background: #fff; }
.mailtext { white-space: pre-wrap; font: 400 15px/1.62 var(--f-body); overflow-wrap: anywhere; }
.qr svg { width: 220px; height: 220px; background: #fff; border-radius: 16px; padding: 8px; }
.learn-bar { height: 8px; border-radius: 99px; background: var(--fill-2); overflow: hidden; }
.learn-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .8s var(--ease); }

/* ----------------------------------------------------------------- stories */

.stories {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 16px; margin: 0 -16px 4px;
  scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 72px; display: grid; justify-items: center; gap: 6px; text-decoration: none; scroll-snap-align: start; transition: transform .35s var(--bounce); }
.story:active { transform: scale(.9); }
.story .ring { width: 68px; height: 68px; border-radius: 50%; padding: 2.5px; background: var(--line-2); display: grid; }
.story.new .ring { background: var(--ig); }
.story.alert .ring { background: conic-gradient(from 200deg, #ff8a5c, #ff3b47, #d6246e, #ff8a5c); }
.story .face {
  border-radius: 50%; background: var(--surface); border: 3px solid var(--bg); display: grid; place-items: center;
  font: 650 22px/1 var(--f-display); color: var(--ink);
}
.story .face .ico { width: 25px; height: 25px; }
.story small { font-size: 11.5px; color: var(--ink-2); font-weight: 500; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .badge {
  margin-top: -20px; justify-self: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; position: relative;
  background: #ff3b47; color: #fff; font: 700 10.5px/19px var(--f-body); text-align: center; box-shadow: 0 0 0 2.5px var(--bg);
}

/* ----------------------------------------------------------------- files */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tile { background: var(--glass); border-radius: 20px; overflow: hidden; display: grid; box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow); transition: transform .35s var(--bounce); }
.tile:active { transform: scale(.95); }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #fff; }
.tile .doc { aspect-ratio: 4/3; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--ink-2); background: var(--fill-2); }
.tile .cap { padding: 9px 11px; display: grid; gap: 2px; font-size: 12.5px; }
.tile .cap b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .cap span { color: var(--muted); }

/* ------------------------------------------------------------- assistant */

/* One element: a sheet on phones, a floating drawer on tablets, docked on wide screens. */
.assistant {
  position: fixed; z-index: 50; inset: calc(var(--safe-t) + 10px) 0 0; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-radius: 28px 28px 0 0; box-shadow: inset 0 .5px 0 var(--spec), 0 -10px 40px -10px rgba(0, 0, 0, .25);
  transform: translate3d(0, 105%, 0); visibility: hidden; will-change: transform;
  transition: transform .5s var(--sheet), visibility 0s linear .5s;
}
.assistant.open { transform: none; visibility: visible; transition: transform .5s var(--sheet); }
.assistant.dragging { transition: none !important; }
.assistant .a-h { position: relative; display: flex; align-items: center; gap: 8px; padding: 18px 12px 12px 18px; }
.assistant .a-h h2 { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 19px; }
.assistant .a-h h2 .orb { width: 30px; height: 30px; flex: none; }
.assistant .a-h .talk-go { width: auto; padding: 0 14px 0 6px; gap: 7px; border-radius: 999px; font: 600 13px/1 var(--f-body); display: inline-flex; align-items: center; }
.assistant .a-h .talk-go .orb { width: 28px; height: 28px; }
@media (max-width: 1279px) {
  .assistant .a-h { cursor: grab; touch-action: none; }
  .assistant .a-h::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line-2);
  }
  .shell::after {
    content: ""; position: fixed; inset: 0; z-index: 45; background: var(--scrim); opacity: 0;
    pointer-events: none; transition: opacity .4s ease;
  }
  html.sheet-open .shell::after { opacity: 1; pointer-events: auto; }
  html.sheet-open .col { transform: scale(.94); }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .assistant { inset: 12px 12px 12px auto; width: 440px; border-radius: 28px; transform: translate3d(calc(100% + 24px), 0, 0); box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow-lg); }
  .assistant .a-h::before { display: none; }
  html.sheet-open .col { transform: none; }
}
@media (min-width: 1280px) {
  .assistant {
    position: sticky; top: 0; height: 100dvh; transform: none; visibility: visible; transition: none; z-index: 1;
    border-radius: 0; background: var(--side); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset .5px 0 0 var(--edge);
  }
  .assistant .close { display: none; }
}
html.sheet-open, html.sheet-open body { overflow: hidden; }

.convo { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 20px; line-height: 1.45; overflow-wrap: anywhere; animation: pop-in .38s var(--spring) both; }
.bubble.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; white-space: pre-wrap; }
.bubble .ico.said { display: inline; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; opacity: .85; }
.bubble.max { align-self: flex-start; background: var(--glass-hi); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 .5px var(--edge); }
.bubble.max p:last-child { margin-bottom: 0; }
.bubble.max ul, .bubble.max ol { padding-left: 18px; margin: .3em 0; }
.bubble .did { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.bubble .did span { font-size: 12.5px; color: var(--ok); display: flex; gap: 6px; align-items: center; font-weight: 550; }
.bubble .did button { border: 0; background: none; color: var(--accent-ink); font: 650 12.5px var(--f-body); cursor: pointer; padding: 0; }
.bubble.typing { color: var(--muted); }
.bubble.typing i { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .2s; } .bubble.typing i:nth-child(3) { animation-delay: .4s; }
.bubble img { max-width: 100%; border-radius: 14px; margin: 6px 0; background: #fff; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); } }
.chat-page .bubble { animation: none; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(12px + var(--safe-b)); }
.composer textarea {
  min-height: 46px; max-height: 140px; padding: 12px 16px; resize: none; border-radius: 23px; background: var(--glass-hi);
}
.mic, .send {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; flex: none;
  transition: transform .35s var(--bounce);
}
.mic:active, .send:active { transform: scale(.88); }
.mic { background: var(--glass-hi); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--edge); }
.send { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px var(--accent); }
.mic .ico, .send .ico { width: 21px; height: 21px; }
.mic.rec { background: var(--bad); color: #fff; animation: pulse 1.2s var(--ease) infinite; }
.mic.busy { opacity: .6; pointer-events: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.hello { color: var(--muted); text-align: center; margin: auto 0; padding: 20px 10px; }
.hello .orb { width: 64px; height: 64px; margin: 0 auto 16px; }
.hello p { font-size: 15px; }
.prompts { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }
.prompts button {
  border: 0; background: var(--glass-hi); color: var(--ink-2); border-radius: 999px; padding: 9px 13px; font: 550 13px/1 var(--f-body); cursor: pointer;
  box-shadow: inset 0 0 0 .5px var(--edge); transition: transform .3s var(--bounce);
}
.prompts button:active { transform: scale(.93); }
.iconbtn.speak[aria-pressed="true"] { color: var(--accent); }
.iconbtn.speak[aria-pressed="false"] { color: var(--muted); }

/* ---------------------------------------------------------------- sheets */

.sheet {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - var(--safe-t) - 24px);
  display: flex; flex-direction: column; border-radius: 28px 28px 0 0;
  background: var(--sheet-bg); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  box-shadow: inset 0 .5px 0 var(--spec), 0 -12px 50px -12px rgba(0, 0, 0, .3);
  transform: translate3d(0, 105%, 0); visibility: hidden; will-change: transform;
  transition: transform .5s var(--sheet), visibility 0s linear .5s;
}
.sheet.open { transform: none; visibility: visible; transition: transform .5s var(--sheet); }
.sheet.dragging { transition: none !important; }
.sheet .grab { position: relative; flex: none; height: 26px; cursor: grab; touch-action: none; }
.sheet .grab::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line-2); }
.sheet .sheet-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 18px calc(22px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.sheet-body > .page-h:first-child { margin-top: 0; padding-right: 40px; }
.sheet-body .card { background: var(--glass-hi); }
.sheet-scrim { position: fixed; inset: 0; z-index: 69; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.sheet-scrim.on { opacity: 1; pointer-events: auto; }
.sheet .loading { display: grid; place-items: center; padding: 60px 0 80px; }
.sheet .loading .orb { width: 44px; height: 44px; animation: breathe 1.4s var(--ease-io) infinite; }
@media (min-width: 900px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(720px, calc(100vw - 48px)); max-height: min(86dvh, 900px);
    border-radius: 28px; transform: translate3d(-50%, -46%, 0) scale(.96); opacity: 0;
    /* A fading blur re-renders every frame; at this size near-opaque glass looks the same. */
    -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 96%, transparent);
    transition: transform .45s var(--sheet), opacity .25s ease, visibility 0s linear .45s;
    box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow-lg);
  }
  .sheet.open { transform: translate3d(-50%, -50%, 0); opacity: 1; transition: transform .45s var(--sheet), opacity .2s ease; }
  .sheet .grab { height: 18px; cursor: default; }
  .sheet .grab::before { display: none; }
  .sheet.menu { width: min(440px, calc(100vw - 48px)); }
}

/* The menu: everything else, one tap away. */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
.menu-grid a, .menu-grid button {
  display: grid; justify-items: center; gap: 8px; padding: 16px 6px 14px; border-radius: 20px; border: 0; cursor: pointer;
  background: var(--glass-hi); color: var(--ink); text-decoration: none; font: 600 12.5px/1.1 var(--f-body);
  box-shadow: inset 0 0 0 .5px var(--edge); transition: transform .35s var(--bounce);
}
.menu-grid a:active, .menu-grid button:active { transform: scale(.93); }
.menu-grid .ico { width: 24px; height: 24px; color: var(--accent); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; }
.menu-row + .menu-row { box-shadow: 0 -.5px 0 var(--line); }
.menu-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.menu-head .avatar { width: 48px; height: 48px; }
.menu-head > div > b { display: block; font-size: 17px; }
.menu-head > div > small { display: block; font-size: 13px; }

/* ----------------------------------------------------------------- talk */

.talk {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; color: var(--ink);
  padding: calc(var(--safe-t) + 10px) 20px calc(var(--safe-b) + 22px); overflow: hidden; isolation: isolate;
  /* Opaque, with its own light: a full-screen blur over a moving page costs frames. */
  background: radial-gradient(120% 70% at 50% 38%, color-mix(in srgb, var(--a1) 30%, var(--bg)), var(--bg) 75%);
  opacity: 0; visibility: hidden; transform: scale(1.04);
  transition: opacity .4s ease, transform .5s var(--sheet), visibility 0s linear .5s;
}
.talk.open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .5s var(--sheet); }
/* While the talk screen covers everything, the app behind it stops drawing. */
html.talking .col, html.talking .side, html.talking .tabbar, html.talking .assistant, html.talking .ambient { visibility: hidden; }
.talk-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.talk-bg i { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; opacity: .5; will-change: transform; }
.talk-bg i:nth-child(1) { left: -36vmax; top: -32vmax; background: radial-gradient(closest-side, color-mix(in srgb, #2f8cff 60%, transparent), transparent); animation: drift-a 16s var(--ease-io) infinite alternate; }
.talk-bg i:nth-child(2) { right: -40vmax; bottom: -24vmax; background: radial-gradient(closest-side, color-mix(in srgb, #1e40af 60%, transparent), transparent); animation: drift-b 19s var(--ease-io) infinite alternate; }
.talk-bg i:nth-child(3) { left: -16vmax; bottom: -48vmax; background: radial-gradient(closest-side, color-mix(in srgb, #0ea5e9 40%, transparent), transparent); animation: drift-c 23s var(--ease-io) infinite alternate; }
.talk-h { width: 100%; max-width: 680px; display: flex; align-items: center; gap: 10px; height: 48px; }
.talk-h .wordmark { height: 14px; --sw: 4.4; }
.talk-h .spacer { flex: 1; }
.talk-state { font: 600 13px/1 var(--f-body); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.talk-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.talk[data-state="listening"] .talk-state::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.talk[data-state="speaking"] .talk-state::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.talk[data-state="thinking"] .talk-state::before { background: #f59e0b; animation: blink 1s infinite; }
.talk[data-state="error"] .talk-state::before { background: var(--bad); }
.talk-time { font: 600 13px/1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--muted); }

.talk-stage { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.big-orb { position: relative; width: min(64vw, 40vh, 300px); aspect-ratio: 1; }
.big-orb .halo {
  position: absolute; inset: -30%; border-radius: 50%; opacity: .45; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(70, 140, 255, .5), rgba(30, 80, 200, .2) 55%, transparent);
}
.talk[data-state="listening"] .big-orb .halo { background: radial-gradient(closest-side, rgba(125, 211, 252, .45), rgba(47, 140, 255, .16) 55%, transparent); }
.talk[data-state="speaking"] .big-orb .halo { background: radial-gradient(closest-side, rgba(96, 165, 250, .6), rgba(255, 255, 255, .1) 55%, transparent); }
.big-orb .scan {
  position: absolute; inset: -7%; border-radius: 50%; opacity: 0; transition: opacity .4s ease;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 255, 255, 0) 60%, #4f9dff 85%, #e6f4ff 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93%, #000 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 92%, #000 93%, #000 99%, transparent 100%);
  animation: swirl 1.1s linear infinite;
}
.talk[data-state="thinking"] .big-orb .scan, .talk[data-state="connecting"] .big-orb .scan { opacity: 1; }
.big-orb .level { position: absolute; inset: 0; will-change: transform; }
.big-orb .orb { box-shadow: inset 0 -26px 60px rgba(0, 0, 0, .35), inset 0 14px 40px rgba(255, 255, 255, .18); }
.big-orb .orb i { width: 82%; height: 82%; }
.big-orb .orb i:nth-child(4) { left: 30%; top: 30%; width: 60%; height: 60%; opacity: .4; background: radial-gradient(closest-side, #e6f4ff, transparent); transform-origin: 0% 0%; animation: swirl 7s linear infinite reverse; }
.talk[data-state="connecting"] .big-orb .level { animation: breathe 1.6s var(--ease-io) infinite; }
.talk[data-state="error"] .big-orb, .talk[data-state="ended"] .big-orb { filter: grayscale(.85) brightness(.9); }
.talk[data-state="speaking"] .big-orb .orb i { animation-duration: 4s; }
@keyframes breathe { 50% { transform: scale(.92); } }

.talk-cap { width: 100%; max-width: 640px; min-height: 7.6em; text-align: center; display: grid; align-content: end; gap: 8px; margin: 10px 0 8px; }
.talk-cap .you { font: 500 15px/1.4 var(--f-body); color: var(--muted); margin: 0; max-height: 2.8em; overflow: hidden; }
.talk-cap .max { font: 650 23px/1.3 var(--f-display); letter-spacing: -.02em; margin: 0; max-height: 5.2em; overflow: hidden; text-wrap: balance; }
.talk-cap .max span { display: inline-block; white-space: pre-wrap; animation: word-in .35s var(--ease) both; }
@keyframes word-in { from { opacity: 0; transform: translate3d(0, .25em, 0); } }
.talk-feed { width: 100%; max-width: 640px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 0; max-height: 30vh; overflow-y: auto; margin-bottom: 14px; scrollbar-width: none; }
.talk-feed .chip { height: auto; min-height: 32px; padding: 7px 13px; border-radius: 16px; background: var(--glass-hi); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow); white-space: normal; animation: pop-in .45s var(--spring) both; }
.talk-feed .chip.work::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: swirl .8s linear infinite; }
.talk-feed .chip.ok { color: var(--ok); }
.talk-feed .chip button { border: 0; background: none; color: var(--accent-ink); font: 650 12.5px var(--f-body); cursor: pointer; padding: 0 0 0 4px; }
.talk-feed a.file { display: block; width: 100%; max-width: 360px; border-radius: 18px; overflow: hidden; background: var(--glass-hi); box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow); animation: pop-in .5s var(--spring) both; text-decoration: none; color: var(--ink); }
.talk-feed a.file img { width: 100%; background: #fff; }
.talk-feed a.file span { display: block; padding: 9px 12px; font: 600 13px/1.2 var(--f-body); }
.talk-type { width: 100%; max-width: 560px; display: flex; gap: 8px; margin-bottom: 14px; }
.talk-type[hidden] { display: none; }
.talk-type input { border-radius: 23px; background: var(--glass-hi); }
.talk-ctl { display: flex; gap: 22px; align-items: center; justify-content: center; }
.tc {
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; position: relative;
  background: var(--glass-hi); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec-2), var(--shadow);
  transition: transform .35s var(--bounce), background-color .15s ease;
}
.tc .ico { width: 26px; height: 26px; }
.tc:active { transform: scale(.88); }
.tc[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.tc.end { width: 74px; height: 74px; background: #ff3b47; color: #fff; box-shadow: 0 14px 30px -12px rgba(255, 59, 71, .8); }
.tc.end .ico { width: 30px; height: 30px; }
.tc.again { background: var(--accent); color: #fff; }
.talk-err { max-width: 520px; text-align: center; color: var(--ink-2); margin: 0 0 12px; font-weight: 550; }
.talk-err:empty { display: none; }

/* --------------------------------------------- toast, progress, refresh */

.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 10px); z-index: 120; max-width: calc(100vw - 32px);
  transform: translate3d(-50%, -140%, 0) scale(.7); opacity: 0; pointer-events: none;
  background: var(--toast); color: var(--on-toast); padding: 11px 18px; border-radius: 22px; font: 600 14px/1.3 var(--f-body);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
  transition: transform .5s var(--spring), opacity .25s ease;
}
.toast.show { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 130; pointer-events: none;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.progress.run { opacity: 1; animation: progress 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.progress.end { opacity: 0; transform: scaleX(1); transition: opacity .35s ease .1s, transform .2s ease; }
@keyframes progress { from { transform: scaleX(.05); } to { transform: scaleX(.92); } }
.ptr {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 8px); z-index: 25; width: 40px; height: 40px; margin-left: -20px;
  border-radius: 50%; padding: 4px; background: var(--glass-hi); box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow);
  transform: translate3d(0, -70px, 0); opacity: 0; pointer-events: none;
}
.ptr .orb { width: 32px; height: 32px; }
.ptr.spin .orb { animation: swirl .9s linear infinite; }
.burst { position: fixed; z-index: 140; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; }

/* -------------------------------------------------------------- reveals */

.pre { opacity: 0; transform: translate3d(0, 22px, 0) scale(.98); }
.rv { transition: opacity .6s var(--ease), transform .75s var(--spring); }

/* ------------------------------------------------------ sign-in and setup */

.bare { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.bare .card { width: 100%; max-width: 420px; padding: 28px 24px; background: var(--glass-2); box-shadow: inset 0 0 0 .5px var(--edge), inset 0 1px 0 var(--spec), var(--shadow-lg); }
.bare .brand { margin-bottom: 26px; display: grid; justify-items: start; gap: 10px; }
.bare .brand .wordmark { height: 22px; --sw: 3.2; }
.bare .brand small { font: 600 9.5px/1 var(--f-body); letter-spacing: .42em; color: var(--muted); }
.bare h1 { font-size: 28px; margin-bottom: 6px; }
.bare form { display: grid; gap: 14px; margin-top: 18px; }
.bare .btn { min-height: 48px; font-size: 15px; }
.code input { letter-spacing: .3em; font-family: var(--f-mono); font-size: 20px; text-align: center; }

/* Pointer devices: things you can open lift a little under the cursor. */
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translate3d(0, -3px, 0); box-shadow: inset 0 0 0 .5px var(--edge), var(--shadow-lg); }
  .story:hover .ring { transform: scale(1.05); }
  .story .ring { transition: transform .35s var(--bounce); }
  .list a.plain:hover .title { color: var(--accent-ink); }
  .orb-btn:hover { transform: scale(1.06); }
  .menu-grid a:hover, .menu-grid button:hover { transform: translate3d(0, -2px, 0); }
}

/* Theme switch: the new theme spreads from the button (ui.js drives the circle). */
html.theming::view-transition-old(root), html.theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theming::view-transition-new(root) { z-index: 2; }

/* ------------------------------------------------------------ accessibility */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .splash { display: none; }
  .pre { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --glass-2: var(--surface); }
}

/* Instagram (Marketing's autopilot, seen from Max) */
.ig-skel { border-radius: 10px; background: var(--fill-2); }
@media (prefers-reduced-motion: no-preference) {
  .ig-skel { background: linear-gradient(90deg, var(--fill) 0%, var(--fill-2) 50%, var(--fill) 100%); background-size: 200% 100%; animation: ig-shimmer 1.3s linear infinite; }
}
@keyframes ig-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ig-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (min-width: 560px) { .ig-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ig-goal { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; }
.ig-goal .learn-bar { grid-column: 1 / -1; height: 6px; }
.ig-goal.met .learn-bar > i { background: var(--ok); }
.ig-k { font-size: 13px; color: var(--muted); }
.ig-v { font-weight: 650; }
.ig-v small { font-weight: 450; color: var(--muted); }
.ig-sub { margin: 16px 0 8px; font-size: 13px; letter-spacing: .02em; color: var(--muted); font-weight: 600; }
.ig-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.ig-thread .ig-t { white-space: pre-wrap; }
.ig-thread .did span { align-items: flex-start; }
.ig-thread .did form { display: inline; margin-left: auto; padding-left: 10px; }
.ig-thread .did button { white-space: nowrap; }
.ig-ask { display: flex; gap: 8px; }
.ig-ask input[type=text] { flex: 1; min-width: 0; }
.ig-slot .ig-thumb { width: 56px; height: 70px; border-radius: 10px; object-fit: cover; flex: none; background: var(--fill-2); }
.ig-slot .ig-thumb.none { display: grid; place-items: center; color: var(--muted); }
.ig-slot.off { opacity: .55; }
.ig-cap summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); margin-top: 4px; }
.ig-cap p { margin: 6px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.ig-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.ig-nums b { color: var(--ink); font-weight: 650; }
.ig-points { margin: 0; padding-left: 18px; }
.ig-points li { margin: 4px 0; }
.ig-points.no li::marker { color: var(--bad); }