/* Kora — shared styles for kora.science, /island/, /privacy/ and the Lift page. */

:root {
  --bg: #0b0c0f;
  --bg-raise: #111318;
  --surface: #16181e;
  --surface-2: #1d2027;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .16);
  --text: #f4f1ea;
  --muted: #a3a7b1;
  --dim: #868b96;

  --mint: #b1e7c7;
  --sky: #a8d4ff;
  --lilac: #d3b9ff;
  --rose: #ffb4c6;
  --amber: #f4cc89;
  --accent: var(--rose);
  /* Kora Island Glass theme: Rose accent with its Aurora neighbours (±48° hue). */
  --aurora-warm: #ffdbb3;
  --aurora-cool: #fbb3ff;
  --aurora: linear-gradient(90deg, var(--rose), var(--aurora-warm), var(--rose), var(--aurora-cool), var(--rose));
  --glass: rgb(52 58 71 / .5);
  --glass-fx: blur(18px) saturate(1.7) brightness(1.05);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 0 1.4em rgb(255 255 255 / .05), 0 .8em 2em -.6em rgb(0 0 0 / .45);

  --sans: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 22px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.36, .5, 1);
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0,0.024,0.082,0.164,0.26,0.363,0.466,0.566,0.659,0.743,0.816,0.879,0.931,0.973,1.006,1.03,1.047,1.058,1.063,1.065,1.063,1.06,1.054,1.048,1.042,1.035,1.028,1.022,1.017,1.012,1.008,1.005,1.002,1,0.998,0.997,0.996,0.996,0.996,0.996,0.996,0.996,0.997,0.997,0.998,0.998,0.999,0.999,0.999,0.999,1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Film grain: one fixed layer, no images to download. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: #0b0c0f; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Scrollbar: an Aurora pill, rose with its warm and cool neighbours, 15% more saturated than the theme.
   Pointing at it brightens it and sets the colors drifting. Chrome won't animate the thumb itself, so app.js adds .scrollbar-hover to <html> while the
   pointer is over the scrollbar, and the thumb follows the --aurora-shift that <html> animates then. */
@property --aurora-shift { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
html.scrollbar-hover { animation: aurora-shift 2.6s ease-in-out infinite alternate; }
@keyframes aurora-shift { to { --aurora-shift: 100%; } }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 48px; border: 3px solid transparent; border-radius: 999px;
  background: linear-gradient(rgb(255 170 191 / .8), rgb(255 214 167 / .7), rgb(255 170 191 / .8), rgb(250 167 255 / .8)) padding-box 0 var(--aurora-shift) / 100% 300%;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(#ffaabf, #ffd6a7, #ffaabf, #faa7ff);
}
/* Firefox has no pill shape or gradient, only colors and a thin width. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: rgb(255 170 191 / .55) transparent; }
}

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 500; }
.skip-link:focus { top: 16px; }

/* ---------- Type ---------- */
.eyebrow {
  font: 500 13px/1.4 var(--mono);
  letter-spacing: 0;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.display {
  font-weight: 450;
  font-size: clamp(46px, 7.6vw, 112px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.display em, .h2 em, .h3 em, .serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  letter-spacing: -.02em;
}
.h2 {
  font-weight: 450;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.h3 { font-weight: 500; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -.025em; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--muted); max-width: 40em; text-wrap: pretty; }
.muted { color: var(--muted); }
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tag, var(--accent)); }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--text);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 22px 0 24px;
  border-radius: 999px;
  background: var(--b); color: #0b0c0f;
  font-weight: 500; font-size: 15.5px; letter-spacing: -.01em;
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--spring), box-shadow .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.97); }
.btn svg, .link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.btn:hover svg, .link:hover svg { transform: translate(3px, -3px); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.ghost::before { background: rgb(255 255 255 / .06); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .5s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ---------- Header: the nav is an island ---------- */
.site-header {
  position: fixed; z-index: 50; top: 14px; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-island {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 0fr;
  align-items: center;
  background: rgb(6 7 9 / .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .09);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 18px 50px -20px rgb(0 0 0 / .8);
  border-radius: 28px;
  padding: 6px;
  transition: grid-template-rows .6s var(--spring), border-radius .6s var(--spring), padding .5s var(--spring);
}
/* The nav stays a dark island on light pages too. */
.nav-island { --text: #f4f1ea; --muted: #a3a7b1; --dim: #868b96; --line: rgb(255 255 255 / .08); color: var(--text); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 14px 0 10px;
  border-radius: 999px;
  font-weight: 600; font-size: 17px; letter-spacing: -.03em;
}
.brand-mark { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.brand-mark i { width: 3.5px; border-radius: 2px; background: var(--accent); }
.brand:hover .brand-mark i { animation: meter .9s var(--ease) infinite alternate; }
.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 15px; animation-delay: -.6s; }
.brand-mark i:nth-child(3) { height: 6px; animation-delay: -1.1s; }
@keyframes meter { 50% { transform: scaleY(.55); } }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  height: 38px; display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; color: var(--muted);
  transition: color .25s, background-color .25s;
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); background: rgb(255 255 255 / .07); }
.nav-links .nav-cta { color: #0b0c0f; background: var(--text); margin-left: 6px; font-weight: 500; }
.nav-links .nav-cta:hover { color: #0b0c0f; background: var(--accent); }
.menu-toggle { display: none; }
.nav-drawer { display: none; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-island { width: min(100vw - 24px, 420px); grid-template-columns: 1fr auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 999px;
    background: rgb(255 255 255 / .08); font-size: 14px; font-weight: 500;
  }
  .menu-toggle i { position: relative; width: 12px; height: 8px; }
  .menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .45s var(--spring), top .45s var(--spring); }
  .menu-toggle i::before { top: 0; }
  .menu-toggle i::after { top: 6.5px; }
  .nav-island.open .menu-toggle i::before { top: 3.25px; transform: rotate(45deg); }
  .nav-island.open .menu-toggle i::after { top: 3.25px; transform: rotate(-45deg); }
  .nav-drawer { display: block; grid-column: 1 / -1; overflow: hidden; min-height: 0; }
  .nav-drawer nav { display: grid; padding: 14px 10px 10px; }
  .nav-drawer a {
    padding: 12px 10px; font-size: 26px; font-weight: 450; letter-spacing: -.03em;
    border-top: 1px solid var(--line);
    opacity: 0; transform: translateY(-8px);
    transition: opacity .3s, transform .5s var(--spring);
  }
  .nav-drawer a small { display: block; font: 400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--dim); }
  .nav-island.open { grid-template-rows: auto 1fr; border-radius: 26px; }
  .nav-island.open .nav-drawer a { opacity: 1; transform: none; }
  .nav-island.open .nav-drawer a:nth-child(2) { transition-delay: .04s; }
  .nav-island.open .nav-drawer a:nth-child(3) { transition-delay: .08s; }
  .nav-island.open .nav-drawer a:nth-child(4) { transition-delay: .12s; }
  .nav-island.open .nav-drawer a:nth-child(5) { transition-delay: .16s; }
  .nav-island.open .nav-drawer a:nth-child(6) { transition-delay: .2s; }
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease-out, transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 60ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
/* Headline lines rise from behind a mask. */
.lines > span { display: block; overflow: clip; padding: 0 .1em .1em; margin: 0 -.1em -.1em; }
.lines > span > span { display: block; }
.js .lines > span > span { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 100ms); }
.js .lines.in > span > span { transform: none; }

/* ---------- Hero ---------- */
.hero { padding: clamp(130px, 17vh, 190px) 0 0; }
.hero-top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.hero .display { margin-top: 26px; }
.hero-side { max-width: 380px; padding-bottom: 10px; }
.hero-side p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.hero-side .actions { margin-top: 26px; }
@media (max-width: 960px) {
  .hero-top { grid-template-columns: 1fr; gap: 30px; }
  .hero-side { max-width: 34em; }
}

/* ---------- The desktop stage ---------- */
.stage {
  position: relative;
  margin-top: clamp(48px, 7vw, 88px);
  aspect-ratio: 16 / 9;
  max-height: 760px;
  width: 100%;
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  isolation: isolate;
  background: #0d1220;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 50px 120px -40px rgb(40 80 160 / .45);
}
.wallpaper { position: absolute; inset: -20%; z-index: -1; }
.wallpaper::before, .wallpaper::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 50% at 30% 60%, #2b4fa3 0%, transparent 70%),
    radial-gradient(35% 45% at 70% 40%, #6b3fa0 0%, transparent 70%),
    radial-gradient(30% 40% at 55% 80%, #1f7a8c 0%, transparent 70%),
    radial-gradient(60% 60% at 50% 20%, #142446 0%, transparent 80%);
  filter: blur(30px) saturate(1.15);
  animation: drift 26s ease-in-out infinite alternate;
}
.wallpaper::after {
  background:
    radial-gradient(28% 36% at 62% 64%, rgb(255 160 190 / .35) 0%, transparent 70%),
    radial-gradient(24% 30% at 26% 34%, rgb(168 212 255 / .35) 0%, transparent 70%);
  animation-duration: 34s;
  animation-direction: alternate-reverse;
  mix-blend-mode: screen;
}
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-4%, 3%) rotate(-6deg) scale(1.02); }
}
.stage-vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgb(0 0 0 / .45)); }
.stage .island-anchor { position: absolute; top: 2.6%; left: 50%; transform: translateX(-50%); font-size: clamp(9px, 1.25vw, 16px); z-index: 3; }

.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7.2%;
  display: flex; align-items: center; justify-content: center; gap: .7%;
  background: rgb(20 22 30 / .55);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border-top: 1px solid rgb(255 255 255 / .08);
}
.taskbar i { width: 2.4%; aspect-ratio: 1; border-radius: 22%; background: rgb(255 255 255 / .14); }
.taskbar i:first-child { background: linear-gradient(135deg, #5aa6ff, #2d6fe0); }
.taskbar i:nth-child(3) { background: linear-gradient(135deg, #f4cc89, #d99a3a); }
.taskbar i:nth-child(4) { background: #101114; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.taskbar .tray { position: absolute; right: 2%; font: 500 clamp(8px, .95vw, 12px)/1.2 var(--sans); color: rgb(255 255 255 / .8); text-align: right; }

.window {
  position: absolute;
  left: 50%; top: 25%; width: 52%; height: 55%;
  transform: translateX(-50%);
  border-radius: clamp(8px, 1vw, 12px);
  background: rgb(28 30 36 / .78);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 80px -20px rgb(0 0 0 / .7);
  font-size: clamp(9px, 1.15vw, 15px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.window-bar { display: flex; align-items: center; gap: .7em; height: 2.6em; padding: 0 .9em; border-bottom: 1px solid rgb(255 255 255 / .07); color: rgb(255 255 255 / .7); font-size: .82em; }
.window-bar b { width: 1em; height: 1.15em; border-radius: .15em; background: linear-gradient(#a8d4ff, #6aa5e6); }
.window-bar span { flex: 1; }
.window-bar em { display: flex; gap: 1.3em; font-style: normal; }
.window-bar em i { width: .8em; height: .8em; border: 1px solid rgb(255 255 255 / .45); border-radius: 1px; }
.window-bar em i:first-child { height: 0; border-width: 1px 0 0; margin-top: .4em; }
.window-body { flex: 1; padding: 1.1em 1.4em; line-height: 1.65; color: rgb(255 255 255 / .9); }
.window-body h4 { font-weight: 600; font-size: 1.05em; margin-bottom: .5em; }
.window-body p { color: rgb(255 255 255 / .82); min-height: 1.65em; }
.window-body .pasted { background: rgb(168 212 255 / .22); border-radius: .2em; box-shadow: 0 0 0 .15em rgb(168 212 255 / .22); transition: background-color 1.4s var(--ease), box-shadow 1.4s var(--ease); }
.window-body .pasted.settled { background: transparent; box-shadow: none; }
.caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--sky); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.window-status { display: flex; justify-content: space-between; padding: .5em 1.2em; font-size: .72em; color: rgb(255 255 255 / .45); border-top: 1px solid rgb(255 255 255 / .06); }

.stage-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.stage-controls button {
  position: relative; overflow: hidden;
  padding: 8px 14px; border-radius: 999px;
  font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); background: rgb(255 255 255 / .03);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .3s, background-color .3s;
}
.stage-controls button:hover { color: var(--text); }
.stage-controls button[aria-pressed="true"] { color: var(--text); background: rgb(255 255 255 / .07); }
.stage-controls button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform-origin: left;
  animation: progress var(--dur, 3s) linear forwards;
}
.stage-controls.paused button::after { animation: none; transform: scaleX(0); }
@keyframes progress { from { transform: scaleX(0); } }

@media (max-width: 640px) {
  .stage { aspect-ratio: 4 / 5; }
  .stage .island-anchor { font-size: 9.5px; top: 3%; }
  .window { width: 86%; top: 30%; height: 50%; font-size: 12px; }
  .taskbar { height: 6%; }
  .taskbar i { width: 6%; }
}

/* ---------- Kora Island component ----------
   Drawn from the app itself (island/src/KoraIsland.App/Views/IslandWindow.xaml and
   Palette.cs): 1em = 16 of the app's pixels, so every size below is the real one / 16.
   Compact 224×40, media preview 360×136, dictation 360×156, alert 360×124,
   expanded Music 416×400. Theme: Dark by default, .glass for Liquid Glass; the
   accent is Rose with Aurora motion, and the level bars and rim take the album
   art's colour while music plays, as in ThemeManager.SetGlow. */
.island {
  --w: 14em; --h: 2.5em;
  --bg: #101114; --surface: #1b1d23; --stroke: #30333b; --muted: #adb2bf; --fg: #f6f4ef;
  --glow: var(--aurora);
  --rim: var(--stroke);
  position: relative;
  width: var(--w); height: var(--h);
  border-radius: 1.25em;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 .8em 2.4em -.6em rgb(0 0 0 / .65);
  transition: width .85s var(--spring), height .85s var(--spring), background-color .6s;
  overflow: hidden;
  font-family: "Segoe UI Variable Text", "Segoe UI", var(--sans);
  letter-spacing: 0;
}
/* The 1px outline (GlowStroke), drawn as a gradient-capable ring. */
.island::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--rim);
  -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);
  transition: opacity .6s;
}
.island[data-scene="idle"]    { --w: 14em;   --h: 2.5em; }
.island[data-scene="music"]   { --w: 14em;   --h: 2.5em; }
.island[data-scene="preview"] { --w: 22.5em; --h: 8.5em; }
.island[data-scene="listen"]  { --w: 22.5em; --h: 9.75em; }
.island[data-scene="think"]   { --w: 22.5em; --h: 7.75em; }
.island[data-scene="done"]    { --w: 22.5em; --h: 7.75em; }
.island[data-scene="open"]    { --w: 26em;   --h: 25em; }
.island[data-scene="peek"]    { --w: 6.5em;  --h: .375em; border-radius: 0 0 .4em .4em; }
/* Album-art tint: the cover's coral lights the bars and the rim. */
.island[data-scene="music"], .island[data-scene="preview"], .island[data-scene="open"] { --glow: #ff8a78; --rim: rgb(255 122 107 / .6); }

/* Liquid Glass: tinted, blurred, a sheen across the top and a specular rim. */
.island.glass {
  --bg: rgb(38 43 54 / .65); --surface: rgb(52 58 71 / .65); --stroke: rgb(255 255 255 / .35); --muted: #c4c8d2;
  --rim: linear-gradient(135deg, rgb(255 255 255 / .69), rgb(255 255 255 / .19) 45%, rgb(255 255 255 / .09) 70%, rgb(255 255 255 / .33));
  -webkit-backdrop-filter: blur(6px) saturate(1.8) brightness(1.05);
  backdrop-filter: blur(6px) saturate(1.8) brightness(1.05);
}
.island.glass::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / .18), rgb(255 255 255 / .03) 35%, transparent 60%);
}
/* Real refraction where the browser can run it (liquid-glass.js): a lens layer overhangs the island so the rim
   can bend in what lies just outside it, and the filter trims it to the island's outline. The filter tints the glass
   itself, so the frost, the painted sheen and the island's own background step aside. */
/* No drop shadow: the rim would bend it in and darken the bottom edge. The app's capture leaves its shadow out too. */
.island.glass.liquid { --bg: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.island.glass.liquid::after { display: none; }
.island > .lens { display: none; }
.island.glass.liquid > .lens {
  display: block; position: absolute; z-index: 0; inset: calc(-1 * var(--lens-margin)); pointer-events: none;
  -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
}

/* Accent with Aurora motion, for text and fills. */
.island .accent { background: var(--aurora) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aurora-flow 9s linear infinite; }
.island .mono { font-family: Consolas, "Cascadia Mono", var(--mono); }
.island .dim { color: var(--muted); }

.island .face {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  opacity: 0;
  filter: blur(.4em);
  transform: scale(.96);
  transform-origin: top center;
  transition: opacity .35s var(--ease), filter .45s var(--ease), transform .7s var(--spring);
  pointer-events: none;
  white-space: nowrap;
}
.island[data-scene="idle"] .face-idle,
.island[data-scene="music"] .face-music,
.island[data-scene="preview"] .face-preview,
.island[data-scene="listen"] .face-listen,
.island[data-scene="think"] .face-think,
.island[data-scene="done"] .face-done,
.island[data-scene="open"] .face-open {
  opacity: 1; filter: none; transform: none;
  transition-delay: .14s;
}

/* The 38px header row every state shares: symbol or cover, title, then the tail. */
.island .head { flex: none; height: 2.375em; display: flex; align-items: center; padding: 0 .875em; }
.island .head .sym { width: 1.875em; flex: none; font-size: 1em; line-height: 1; }
.island .head .sym.art { width: 1.375em; height: 1.375em; margin-right: .5em; border-radius: .375em; }
.island .head .title { flex: 1; min-width: 0; font-size: .75em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.island .head .tail { font-size: .6875em; }
.island .head .mic { flex: none; width: .4375em; height: .4375em; margin-right: .5em; border-radius: 50%; background: #ff5a4e; }

/* Clock: hours and minutes, seconds and AM muted (IslandClock). */
.island .face-idle .head { justify-content: center; }
.island .clock { font-family: "Segoe UI Variable Display", "Segoe UI", var(--sans); font-size: .78125em; font-weight: 600; font-variant-numeric: tabular-nums; }
.island .clock i { font-style: normal; font-weight: 400; color: var(--muted); }
.island .clock small { margin-left: .35em; font-size: .72em; font-weight: 600; color: var(--muted); }

.island .art { flex: none; background: radial-gradient(circle at 30% 30%, #ffd59a, transparent 55%), linear-gradient(135deg, #ff7a6b, #7b3fa0 60%, #2b4fa3); }

/* Output level: four 3px bars up to 14px, in the glow colour. */
.island .bars { flex: none; display: flex; align-items: center; gap: .125em; height: .875em; }
.island .bars i { width: .1875em; height: 100%; border-radius: .1em; background: var(--glow); transform-origin: center; animation: bar 1s ease-in-out infinite alternate; }
.island .bars i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.island .bars i:nth-child(3) { animation-duration: 1.2s; animation-delay: -.5s; }
.island .bars i:nth-child(4) { animation-duration: .85s; animation-delay: -.1s; }
@keyframes bar { 0% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }

/* Body of the preview states: 18px in from the sides, 12px off the bottom. */
.island .body { flex: 1; min-height: 0; padding: 0 1.125em .75em; display: flex; flex-direction: column; justify-content: center; }

/* Media preview: the cover is the hero, the current lyric follows in the accent. */
.island .media-card { display: flex; align-items: center; gap: .875em; }
.island .media-card .art { width: 5.25em; height: 5.25em; border-radius: .875em; box-shadow: 0 0 0 1px var(--stroke); }
.island .media-card b { display: block; font-size: .9375em; font-weight: 600; }
.island .media-card .dim { display: block; font-size: .75em; margin-top: .25em; }
.island .media-card .lyric { display: block; font-size: .75em; font-weight: 600; margin-top: .5em; }
.island .hint { display: block; font-size: .5625em; color: var(--muted); opacity: .5; margin-top: .6em; }

/* Dictation: live words, then spectrum, level, status, timer and cancel, then totals. */
.island .live-words { height: 2.5em; display: flex; align-items: flex-end; margin-bottom: .375em; overflow: hidden; white-space: normal; font-size: .8125em; line-height: 1.25em; }
.island .hud { height: 2em; display: flex; align-items: center; gap: .625em; }
.island .spectrum { display: flex; align-items: center; gap: .125em; height: 1.375em; }
.island .spectrum i { width: .1875em; height: 100%; border-radius: .1em; background: var(--glow); animation: bar .5s ease-in-out infinite alternate; }
.island .spectrum i:nth-child(3n) { animation-duration: .38s; }
.island .spectrum i:nth-child(3n+1) { animation-duration: .62s; animation-delay: -.2s; }
.island .spectrum i:nth-child(4n) { animation-duration: .44s; animation-delay: -.33s; }
.island .spectrum i:nth-child(5n) { animation-duration: .7s; }
.island .hud .level, .island .hud .status, .island .hud .timer { font-size: .75em; }
.island .hud .status { flex: 1; }
.island .hud .x { font-size: .6875em; color: var(--muted); width: 2.7em; text-align: center; }
.island .totals { display: flex; gap: 1.45em; margin-top: .375em; font-size: .6875em; }
.island .totals b { font-weight: 600; }
.island .working { height: 2em; display: flex; align-items: center; gap: .625em; }
.island .working .spin { width: .875em; height: .875em; border-radius: 50%; border: .14em solid rgb(255 255 255 / .15); border-top-color: var(--rose); animation: spin .9s linear infinite; }
.island .working b { font-size: .8125em; font-weight: 600; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Alert ("Dictated"): title, the words, then "Click to open". */
.island .alert b { display: block; font-size: .875em; font-weight: 600; }
.island .alert .dim { display: block; font-size: .75em; margin-top: .25em; overflow: hidden; text-overflow: ellipsis; }

/* Expanded: six module toggles and Settings, then the Music module. */
.island .modules { flex: none; height: 2.5em; display: flex; align-items: center; gap: .375em; padding: 0 .75em .25em; }
.island .modules span { flex: 1; height: 2em; display: grid; place-items: center; border-radius: .5em; color: var(--muted); }
.island .modules span.on { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--stroke); }
.island .modules span.gear { flex: none; width: 2em; }
.island .modules svg { width: .9375em; height: .9375em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.island .module { flex: 1; padding: .625em 1.125em .25em; display: flex; flex-direction: column; }
.island .source { height: 2em; display: flex; align-items: center; justify-content: space-between; padding: 0 .75em; border-radius: .5em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); }
.island .source span { font-size: .75em; }
.island .now { display: flex; align-items: center; gap: 1em; margin: .875em 0 .625em; }
.island .now .art { width: 5em; height: 5em; border-radius: .8125em; }
.island .now small { display: block; font: 600 .625em/1.4 var(--sans); letter-spacing: .08em; color: var(--muted); }
.island .now b { display: block; font-size: 1.0625em; font-weight: 600; }
.island .now .dim { display: block; font-size: .8125em; margin-top: .3em; }
.island .seek { height: .25em; margin-top: .5em; border-radius: 1em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); position: relative; }
.island .seek::before { content: ""; position: absolute; inset: 0 62% 0 0; border-radius: inherit; background: var(--aurora) 0 0 / 200% 100%; animation: aurora-flow 9s linear infinite; }
.island .times { display: flex; justify-content: space-between; margin-top: .5em; font-size: .625em; color: var(--muted); }
.island .controls { display: flex; justify-content: center; align-items: center; gap: .75em; margin-top: .875em; }
.island .controls span { width: 3.375em; height: 2.25em; display: grid; place-items: center; border-radius: .5em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); font-size: .8em; }
.island .controls .play { width: 4.125em; height: 2.5em; font-size: 1em; color: #111815; background: var(--aurora) 0 0 / 200% 100%; box-shadow: none; animation: aurora-flow 9s linear infinite; }
.island .lyrics { margin-top: auto; padding-bottom: .5em; text-align: center; }
.island .lyrics b { display: block; font-size: .875em; font-weight: 600; }
.island .lyrics .dim { display: block; font-size: .6875em; margin-top: .2em; }

/* ---------- Sections ---------- */
.section { padding: clamp(100px, 14vw, 180px) 0; position: relative; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; align-items: end; }
.section-head .lede { justify-self: end; max-width: 30em; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } .section-head .lede { justify-self: start; } }
.section-head.stacked { grid-template-columns: 1fr; gap: 22px; }
.section-head.stacked .lede { justify-self: start; max-width: 36em; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Product index */
.index { margin-top: 70px; border-top: 1px solid var(--line); }
.index a {
  --tag: var(--c);
  position: relative;
  display: grid;
  grid-template-columns: 70px 1.2fr 1fr 1.3fr auto;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  transition: padding .6s var(--ease), color .4s;
}
.index a::before {
  content: ""; position: absolute; inset: -1px 0 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.index a:hover::before { opacity: 1; }
.index .num { font: 500 13px/1 var(--mono); color: var(--dim); }
.index .name { font-size: clamp(26px, 3.2vw, 44px); font-weight: 450; letter-spacing: -.04em; line-height: 1; }
.index .name em { font-family: var(--serif); font-style: italic; font-weight: 350; }
.index .kind { color: var(--muted); font-size: 15px; }
.index .what { color: var(--dim); font-size: 15px; }
.index .arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .4s, transform .6s var(--spring), color .3s; }
.index .arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.index a:hover .arrow { background: var(--c); color: #0b0c0f; transform: translateX(4px); box-shadow: none; }
@media (max-width: 900px) {
  .index a { grid-template-columns: 40px 1fr auto; gap: 6px 14px; padding: 24px 0; }
  .index .kind, .index .what { grid-column: 2; }
  .index .what { display: none; }
  .index .arrow { grid-row: 1 / span 2; grid-column: 3; }
  .index a:hover { padding-left: 0; }
}
.peek {
  position: fixed; z-index: 40; left: 0; top: 0;
  width: 340px; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-4deg);
  transition: opacity .35s var(--ease), transform .6s var(--spring);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .1);
  background: var(--surface);
}
.peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .3s; }
.peek img.on { opacity: 1; }
@media (hover: none), (max-width: 900px) { .peek { display: none; } }

/* Chapter blocks */
.chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 70px; align-items: start; }
.chapter-head .h2 { margin-top: 22px; }
.chapter-head .lede { margin-top: 26px; }
.h2 + .lede { margin-top: 26px; }
.chapter-head .actions { margin-top: 34px; }
@media (max-width: 860px) { .chapter-head { grid-template-columns: 1fr; } }

/* Island feature tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 70px; }
.tile {
  position: relative;
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tile-stage { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; isolation: isolate; font-size: 14.5px; }
.tile-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--c, var(--sky)) 22%, transparent), transparent 70%); }
.tile-body { padding: 4px 28px 30px; }
.tile-body p { color: var(--muted); margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.tile.glass-tile .tile-stage::before { display: none; }
.stripes { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgb(255 255 255 / .1) 0 1.5px, transparent 1.5px 18px); }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr; } .tile-stage { height: 200px; } }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.facts div { padding: 24px 26px; }
.facts div + div { box-shadow: -1px 0 0 var(--line); }
.facts dt { font: 500 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.facts dd { margin: 8px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } .facts div:nth-child(3) { box-shadow: 0 -1px 0 var(--line); } .facts div:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); } }

/* Light "paper" chapter for Lift */
.paper {
  --bg: #f3eee5;
  --bg-raise: #fbf8f2;
  --text: #1d1f1c;
  --muted: #5e5d57;
  --dim: #6b6860;
  --line: rgb(29 31 28 / .1);
  --line-strong: rgb(29 31 28 / .2);
  --accent: #b4442e;
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}
.paper ::selection { color: #fff; }
.paper .btn { --b: var(--text); color: #fbf8f2; }
.paper .btn::before { background: var(--accent); }
.paper .btn.ghost { color: var(--text); background: transparent; }
.paper .btn.ghost::before { background: rgb(0 0 0 / .05); }
.rounded { border-radius: clamp(28px, 4vw, 56px); margin-inline: clamp(8px, 1.2vw, 16px); }
.round-top { border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; }
.round-bottom { border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); }

.lift-visual { position: relative; margin-top: 80px; perspective: 1600px; }
.browser {
  border-radius: 16px; overflow: hidden; background: #fbf8f2;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 50px 100px -40px rgb(60 40 20 / .45), 0 20px 40px -20px rgb(60 40 20 / .2);
  transform-origin: 50% 100%;
}
.browser-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #ece5d8; border-bottom: 1px solid rgb(0 0 0 / .06); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgb(0 0 0 / .14); }
.browser-bar span { margin: 0 auto; padding: 4px 14px; border-radius: 7px; background: rgb(255 255 255 / .7); font: 500 12px/1.2 var(--mono); color: #7a776e; }
.browser img { width: 100%; }
@supports (animation-timeline: view()) {
  .tilt { animation: untilt linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes untilt { from { transform: rotateX(22deg) scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
}
.phone-float {
  position: absolute; right: -2%; bottom: -10%;
  width: min(32%, 330px);
  border-radius: 26px; overflow: hidden;
  border: 7px solid #1d1f1c;
  box-shadow: 0 40px 80px -30px rgb(40 30 20 / .55);
  background: #f3eee5;
}
@supports (animation-timeline: view()) {
  .phone-float { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
  @keyframes rise { from { transform: translateY(120px); } to { transform: none; } }
}
@media (max-width: 760px) { .phone-float { position: relative; right: auto; bottom: auto; width: 70%; margin: -60px auto 0; } }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: clamp(110px, 12vw, 160px); }
.points li { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.points .k { font: 500 13px/1 var(--mono); color: var(--accent); }
.points h3 { margin-top: 16px; }
.points p { color: var(--muted); margin-top: 10px; font-size: 16px; }
@media (max-width: 860px) { .points { grid-template-columns: 1fr; gap: 30px; } }

/* Track chapter */
.track-chapter { --accent: var(--mint); background: radial-gradient(80% 60% at 80% 40%, #12291e 0%, transparent 70%), #0a100d; }
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.phones { position: relative; height: 640px; }
.phone {
  position: absolute; width: 290px;
  border-radius: 38px; overflow: hidden;
  border: 8px solid #050706;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 50px 90px -30px rgb(0 0 0 / .9);
  background: #101814;
}
.phone img { width: 100%; }
.phone.a { left: 6%; top: 0; z-index: 2; }
.phone.b { left: 48%; top: 80px; transform: rotate(4deg); opacity: .9; }
@supports (animation-timeline: view()) {
  .phone.a { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  .phone.b { animation: rise2 linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes rise2 { from { transform: translateY(200px) rotate(10deg); } to { transform: rotate(4deg); } }
}
.flow { margin-top: 40px; display: grid; gap: 4px; }
.flow li { padding: 16px 0; border-top: 1px solid var(--line); }
.flow b { font-weight: 500; }
.flow span { color: var(--muted); display: block; font-size: 15.5px; }
.macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 34px; }
.macros div { padding: 14px; border-radius: 14px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--line); }
.macros small { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.macros b { display: block; margin-top: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.macros i { display: block; height: 3px; border-radius: 3px; margin-top: 12px; background: rgb(255 255 255 / .08); overflow: hidden; }
.macros i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--mint); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .3s; }
.macros.in i::after { transform: none; }
@media (max-width: 960px) {
  .track-grid { grid-template-columns: 1fr; }
  .phones { height: 520px; }
  .phone { width: 230px; }
  .phone.a { left: 4%; } .phone.b { left: 40%; }
}
@media (max-width: 520px) { .macros { grid-template-columns: 1fr 1fr; } .phone { width: 200px; } .phones { height: 460px; } }

/* Tools: Search + Sort */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 70px; }
.tool { border-radius: var(--radius); background: var(--bg-raise); box-shadow: inset 0 0 0 1px var(--line); padding: 30px; display: flex; flex-direction: column; gap: 26px; overflow: hidden; }
.tool > p { color: var(--muted); font-size: 16px; }
.tool .h3 { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.mock { border-radius: 14px; background: #101114; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); padding: 18px; font-family: "Segoe UI Variable Text", "Segoe UI", var(--sans); font-size: 13.5px; min-height: 290px; }
.searchbox { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; background: #1b1d23; box-shadow: inset 0 0 0 1px var(--lilac); }
.searchbox svg { width: 17px; height: 17px; fill: none; stroke: #adb2bf; stroke-width: 2; stroke-linecap: round; }
.searchbox kbd { margin-left: auto; font: 500 10.5px/1 var(--sans); padding: 4px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px #30333b; color: #adb2bf; }
.results { margin-top: 12px; display: grid; gap: 4px; }
.results li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 9px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .6s var(--spring), background-color .3s; }
.results.show li { opacity: 1; transform: none; }
.results.show li:nth-child(2) { transition-delay: .07s; }
.results.show li:nth-child(3) { transition-delay: .14s; }
.results li:first-child { background: #22262e; }
.results .ic { width: 34px; height: 34px; border-radius: 8px; background: #1b1d23; display: grid; place-items: center; color: #adb2bf; font: 600 9.5px/1 var(--sans); }
.results b { font-weight: 600; display: block; }
.results small { color: #8a8f9b; font-size: 12px; }
.results mark { background: none; color: var(--lilac); }
.results em { font-style: normal; font-size: 11px; color: var(--lilac); }

.sort-rows { display: grid; gap: 8px; }
.sort-rows li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; background: #1b1d23; }
.sort-rows .ic { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: #2a3a2f; color: #b5d6b9; font: 600 11px/1 var(--sans); }
.sort-rows .path { min-width: 0; font-size: 12.5px; color: #adb2bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-rows .path b { color: #f6f4ef; font-weight: 600; font-size: 13.5px; display: block; }
.sort-rows .dest { position: relative; display: inline-block; vertical-align: bottom; }
.sort-rows .dest span { display: inline-block; transition: opacity .4s, transform .6s var(--spring), filter .4s; }
.sort-rows .dest span + span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(8px); filter: blur(3px); color: var(--mint); }
.sorted .sort-rows .dest span:first-child { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
.sorted .sort-rows .dest span + span { opacity: 1; transform: none; filter: none; }
.sort-rows .state { font-size: 11.5px; color: #8a8f9b; }
.sort-rows li:nth-child(2) .dest span { transition-delay: .12s; }
.sort-rows li:nth-child(3) .dest span { transition-delay: .24s; }
.sort-rows li:nth-child(4) .dest span { transition-delay: .36s; }
.sort-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; color: #8a8f9b; }
.sort-head b { color: #f6f4ef; font-size: 16px; font-weight: 600; }
.sort-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; color: #8a8f9b; }
.sort-foot span:last-child { padding: 8px 14px; border-radius: 8px; background: #b5d6b9; color: #142017; font-weight: 600; transition: transform .4s var(--spring); }
.sorted .sort-foot span:last-child { transform: scale(.94); }
@media (max-width: 960px) { .tools { grid-template-columns: 1fr; } }

/* Principles */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 80px; align-items: start; }
.about .h2 { margin-top: 0; }
.about .note-in { margin-top: 24px; color: var(--muted); max-width: 24em; }
.principles { display: grid; }
.principles li { padding: 26px 0 28px; border-top: 1px solid var(--line-strong); }
.principles li:last-child { border-bottom: 1px solid var(--line-strong); }
.principles p { color: var(--muted); margin-top: 10px; font-size: 16px; max-width: 36em; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ---------- Footer with LinkedIn ---------- */
.site-footer { position: relative; padding: clamp(40px, 6vw, 80px) 0 36px; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(10 102 194 / .28), transparent); pointer-events: none; }
.footer-cta { position: relative; display: grid; gap: 34px; }
.footer-cta .h2 { max-width: 13em; }
.linkedin {
  display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  width: fit-content;
  font-size: clamp(34px, 6.5vw, 96px);
  font-weight: 450; letter-spacing: -.045em; line-height: 1;
  padding-bottom: 12px;
  background: linear-gradient(var(--text), var(--text)) 0 100% / 0 2px no-repeat;
  transition: background-size .8s var(--ease);
}
.linkedin:hover { background-size: 100% 2px; }
.linkedin .in {
  flex: none; width: .82em; height: .82em; border-radius: .16em;
  background: #0a66c2; display: grid; place-items: center;
  transition: transform .7s var(--spring);
}
.linkedin .in svg { width: 52%; height: 52%; fill: #fff; }
.linkedin .arr { width: .5em; height: .5em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--spring); }
.linkedin:hover .arr { transform: translate(.12em, -.12em); }
.footer-cta .note { color: var(--muted); max-width: 34em; }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: clamp(80px, 10vw, 130px); padding-top: 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-bottom a { color: var(--muted); transition: color .2s; }
.footer-bottom a:hover { color: var(--text); }
.footer-bottom .brand { padding: 0; height: auto; color: var(--text); font-size: 15px; }

/* ---------- Product pages ---------- */
.page-hero { padding: clamp(140px, 19vh, 200px) 0 0; }
.page-hero .display { margin-top: 26px; font-size: clamp(48px, 8vw, 124px); }
.page-hero .lede { margin-top: 30px; }
.page-hero .actions { margin-top: 36px; }

.story { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 6vw, 90px); margin-top: 60px; }
.story-stage { position: sticky; top: 90px; height: calc(100vh - 120px); min-height: 460px; max-height: 760px; border-radius: var(--radius); overflow: hidden; isolation: isolate; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.story-stage .island-anchor { font-size: clamp(11px, 1.35vw, 17px); position: relative; z-index: 2; }
.story-stage .backdrop { position: absolute; inset: 0; z-index: -1; isolation: isolate; overflow: hidden; opacity: 0; transition: opacity 1s var(--ease); }
.story-stage .backdrop.on { opacity: 1; }
.backdrop.b-dictate { background: radial-gradient(60% 50% at 50% 40%, rgb(177 231 199 / .22), transparent 70%), #0d1110; }
.backdrop.b-music { background: radial-gradient(55% 50% at 50% 40%, rgb(255 122 107 / .35), transparent 70%), radial-gradient(60% 60% at 30% 80%, rgb(123 63 160 / .35), transparent 70%), #120d14; }
.backdrop.b-glass { background: #0d1220; }
.backdrop.b-open { background: radial-gradient(60% 50% at 50% 40%, rgb(244 204 137 / .2), transparent 70%), #12100c; }
.backdrop.b-peek { background: linear-gradient(#000 0 0) top / 100% 0 no-repeat, #0b0c0f; }
.peek-game { position: absolute; inset: 0; background: linear-gradient(160deg, #1b2a44, #0b1220 40%, #2b1a2a); }
.peek-game::after { content: "Fullscreen app"; position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .35); }
.story-stage { container-type: size; }
.story-stage .island-anchor { transition: transform .9s var(--spring); }
/* Over a fullscreen app the island hugs the top edge, whatever its height. */
.story-stage[data-at="peek"] .island-anchor { transform: translateY(calc(50% - 50cqh)); }
/* The equalizer hangs under the notch over fullscreen apps, faint like the notch. Colors fade across the Porch Light cover. */
.eq { position: absolute; top: .4375em; left: 50%; width: 5.75em; height: .5em; transform: translateX(-50%); display: flex; gap: .0625em; opacity: 0; transition: opacity .3s; pointer-events: none; }
.eq i { flex: 1; height: 100%; border-radius: 0 0 1px 1px; background: linear-gradient(90deg, #ff8a78, #c86fd0, #8f6bff) calc(var(--x) * 100%) 0 / 2400% 100%; transform-origin: top; transform: scaleY(var(--lo)); animation: eq var(--d) ease-in-out var(--o) infinite alternate; }
@keyframes eq { to { transform: scaleY(var(--hi)); } }
.island-anchor:has(> .island[data-scene="peek"]) .eq { opacity: .75; transition: opacity .5s .45s; }
.story-steps { padding: 18vh 0 30vh; }
.step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .6s var(--ease); }
.step.on { opacity: 1; }
.step .k { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .06em; }
.step h3 { margin-top: 16px; font-size: clamp(28px, 3vw, 40px); font-weight: 450; letter-spacing: -.035em; line-height: 1.08; }
.step p { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 30em; }
.step ul { margin-top: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 15.5px; }
.step li { padding-left: 20px; position: relative; }
.step li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-stage { top: 70px; height: 300px; min-height: 0; z-index: 2; }
  .story-stage .island-anchor { font-size: 10px; }
  .story-steps { padding: 6vh 0 10vh; }
  .step { min-height: 60vh; }
}

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; border-top: 1px solid var(--line); }
.feature-grid > div { padding: 30px 30px 34px 0; border-bottom: 1px solid var(--line); }
.feature-grid > div:not(:nth-child(3n+1)) { padding-left: 30px; border-left: 1px solid var(--line); }
.feature-grid h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.feature-grid p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.feature-grid .ico { width: 34px; height: 34px; margin-bottom: 22px; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--line); color: var(--accent); }
.feature-grid .ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid > div, .feature-grid > div:not(:nth-child(3n+1)) { padding: 26px 24px 28px 0; border-left: 0; }
  .feature-grid > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid > div:nth-child(even) { padding-left: 0; border-left: 0; }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; }
.split .prose p + p { margin-top: 16px; }
.prose p { color: var(--muted); }
.prose a:not(.btn):not(.link) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.prose a:not(.btn):not(.link):hover { text-decoration-color: currentColor; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.callout { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: clamp(30px, 4vw, 50px); border-radius: var(--radius); background: var(--bg-raise); box-shadow: inset 0 0 0 1px var(--line); }
.callout p { color: var(--muted); margin-top: 12px; max-width: 36em; }
@media (max-width: 760px) { .callout { grid-template-columns: 1fr; } }

/* Lift page instruments */
.instruments { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: clamp(56px, 7vw, 90px); }
.panel { border-radius: var(--radius); background: var(--bg-raise); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgb(60 40 20 / .35); padding: clamp(22px, 3vw, 34px); position: relative; overflow: hidden; }
.panel-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.logger h3 { margin-top: 18px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.logger .plan { margin-top: 6px; color: var(--muted); font-size: 15px; }
.sets { margin-top: 22px; display: grid; gap: 8px; }
.set { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgb(0 0 0 / .025); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s, box-shadow .4s; }
.set .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--sans); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .5s var(--ease), color .3s, box-shadow .3s, transform .6s var(--spring); }
.set.done .n { background: #22663f; color: #fff; box-shadow: none; }
.set.pop .n { transform: scale(1.18); }
.set .val { font-size: 16px; font-variant-numeric: tabular-nums; }
.set .val b { font-weight: 600; }
.set .val span { color: var(--dim); }
.rpe { display: flex; gap: 4px; }
.rpe i { font: 500 12px/1 var(--mono); font-style: normal; padding: 7px 8px; border-radius: 8px; color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, color .3s, transform .4s var(--spring); }
.rpe i.on { background: var(--accent); color: #fff; box-shadow: none; transform: scale(1.06); }
.set.active { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent), 0 10px 30px -18px var(--accent); }
.logger-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; color: var(--muted); font-size: 14px; }
.rest { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #ece5d8; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.rest svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.rest circle { fill: none; stroke-width: 3; }
.rest circle + circle { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: calc(56.5 - 56.5 * var(--p, 0)); transition: stroke-dashoffset 1s linear; }
.rest circle:first-child { stroke: rgb(0 0 0 / .1); }

.plates-panel { display: flex; flex-direction: column; background: #1d1f1c; color: #f3eee5; box-shadow: 0 30px 60px -30px rgb(30 20 10 / .6); }
.plates-panel .panel-label { color: #a29e94; }
.target { margin-top: 18px; font-size: clamp(56px, 7vw, 92px); font-weight: 450; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.target small { font-size: .32em; letter-spacing: -.01em; color: #8d8a80; margin-left: .2em; }
.barbell { position: relative; flex: 1; min-height: 190px; margin: 26px -8px 8px; display: flex; align-items: center; justify-content: center; }
.barbell .shaft { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(#cfcac0, #8f8b83); }
.barbell .side { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 3px; }
.barbell .side.r { left: calc(50% + 70px); }
.barbell .side.l { right: calc(50% + 70px); flex-direction: row-reverse; }
.barbell .collar { position: absolute; top: 50%; width: 10px; height: 34px; margin-top: -17px; border-radius: 3px; background: #b9b4aa; }
.barbell .collar.r { left: calc(50% + 58px); }
.barbell .collar.l { right: calc(50% + 58px); }
.plate { height: var(--h); width: var(--w); border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset -3px 0 0 rgb(0 0 0 / .18); animation: slide-r .7s var(--spring) both; animation-delay: calc(var(--i) * 110ms); }
.side.l .plate { animation-name: slide-l; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 3px 0 0 rgb(0 0 0 / .18); }
@keyframes slide-r { from { transform: translateX(160px); opacity: 0; } }
@keyframes slide-l { from { transform: translateX(-160px); opacity: 0; } }
.per-side { display: flex; flex-wrap: wrap; gap: 6px; font: 500 12.5px/1 var(--mono); color: #8d8a80; align-items: center; }
.per-side b { color: #f3eee5; font-weight: 500; padding: 6px 9px; border-radius: 7px; background: rgb(255 255 255 / .07); }
@media (max-width: 900px) { .instruments { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .set { grid-template-columns: 30px 1fr; }
  .rpe { grid-column: 2; }
  .barbell .side.r { left: calc(50% + 40px); } .barbell .side.l { right: calc(50% + 40px); }
  .barbell .collar.r { left: calc(50% + 28px); } .barbell .collar.l { right: calc(50% + 28px); }
}

/* Privacy */
.doc { max-width: 720px; }
.doc h2 { font-size: 28px; font-weight: 500; letter-spacing: -.03em; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc p { color: var(--muted); margin-top: 16px; }
.doc h3 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; margin-top: 32px; }
.doc ul { margin: 16px 0 0; padding-left: 22px; color: var(--muted); }
.doc li { margin-top: 8px; }
.doc li strong { color: var(--text); font-weight: 500; }

/* ---------- Glass + Aurora ----------
   Kora Island's Glass theme with the Rose accent and Aurora motion: soft rose light drifts
   behind translucent glass, and accents flow between the rose and its hue neighbours. */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 26vmax at 20% 18%, rgb(255 180 198 / .34), transparent 70%),
    radial-gradient(34vmax 24vmax at 82% 10%, rgb(251 179 255 / .26), transparent 70%),
    radial-gradient(40vmax 28vmax at 62% 72%, rgb(255 219 179 / .16), transparent 70%),
    radial-gradient(30vmax 22vmax at 10% 88%, rgb(211 185 255 / .2), transparent 70%);
  filter: blur(20px);
  animation: aurora-drift 36s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  33% { transform: translate(4vmax, 3vmax) rotate(6deg) scale(1.06); }
  66% { transform: translate(-3vmax, 5vmax) rotate(-4deg) scale(.96); }
  100% { transform: translate(2vmax, -3vmax) rotate(3deg) scale(1.04); }
}
@keyframes aurora-flow { to { background-position: 200% 0; } }
.display em, .h2 em, .h3 em, .serif { color: var(--rose); }
.btn.ghost::before, .paper .btn.ghost::before { background: rgb(255 255 255 / .08); }

.nav-island { background: rgb(38 43 54 / .3); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); border-color: transparent; box-shadow: var(--glass-edge); }
.tile, .tool, .callout, .panel {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  box-shadow: var(--glass-edge);
}

/* The Lift and Track chapters were a light "paper" page and a dark mint one; both are glass now. */
.paper {
  --bg: #0b0c0f; --bg-raise: var(--glass);
  --text: #f4f1ea; --muted: #c4c8d2; --dim: #9ba1ad;
  --line: rgb(255 255 255 / .12); --line-strong: rgb(255 255 255 / .22);
  --accent: var(--rose);
  color-scheme: dark;
}
body.paper { background: var(--bg); }
.section.paper, .track-chapter {
  --accent: var(--rose);
  background: rgb(38 43 54 / .28);
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  box-shadow: var(--glass-edge);
}
.paper ::selection { color: #0b0c0f; }
.paper .btn { --b: var(--text); color: #0b0c0f; }
.paper .btn.ghost { color: var(--text); background: rgb(255 255 255 / .04); }
.browser { background: #16181e; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 50px 100px -40px rgb(0 0 0 / .6); }
.browser-bar { background: rgb(38 43 54 / .9); border-bottom-color: rgb(255 255 255 / .08); }
.browser-bar i { background: rgb(255 255 255 / .18); }
.browser-bar span { background: rgb(255 255 255 / .08); color: var(--muted); }
.phone-float { border-color: #262b36; background: #16181e; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); }
.set { background: rgb(255 255 255 / .03); }
.set.active { background: rgb(255 180 198 / .08); }
.rpe i.on { color: #111815; }
.rest { background: rgb(255 255 255 / .08); }
.rest circle:first-child { stroke: rgb(255 255 255 / .14); }
.plates-panel { background: rgb(16 17 22 / .72); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .lines > span > span { opacity: 1; transform: none; filter: none; }
  .tilt, .phone-float, .phone.a, .phone.b { animation: none !important; }
}
.paper .site-footer::before { opacity: .4; }
.split .end { justify-self: end; }
.track-chapter { overflow: hidden; }
@media (max-width: 860px) { .split .end { justify-self: start; } }
@media (max-width: 520px) {
  .stage-controls { gap: 4px; }
  .stage-controls button { padding: 7px 10px; font-size: 10.5px; }
  .results em { display: none; }
  .results li { grid-template-columns: 34px 1fr; }
}