/* Orbit website. Colours, type and motion follow the app (DESIGN_STYLE.md):
   warm base with white cards, one colour per meaning, black–white–grey buttons,
   G3 superellipse corners (applied by site.js through [data-sq]).
   Page structure follows obsidian.md: a plain top bar, prose principles, and
   feature cards whose live UI sits in a panel that runs off the card's edge. */

@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
/* The wordmark and the headlines (.display, .title): Archivo at width 125, weight 700, which the user picked from the
   comparison with the Obsidian wordmark. Basic Latin and a little punctuation (11 KB); Chinese falls through to PingFang. */
@font-face { font-family: "Archivo Expanded"; src: url("fonts/Archivo-Expanded-Bold.woff") format("woff"); font-weight: 700; font-stretch: 125%; font-display: swap; unicode-range: U+20-7E, U+B7, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; }

:root {
  --bg: #F3F2EE; --card: #FFFFFF; --ink: #1C1B19; --ink-2: #77766F; --ink-3: #AFAEA8;
  --sep: #E6E5E0; --track: #ECEBE6; --track-fill: #C9C7BF; --placeholder: #E8E7E2;
  --groove: #E8E6E0; --rim: #DAD8D1; --on-ink: #FFFFFF;
  --red: #D1453B; --amber: #C2861F; --green: #5F8A57; --gray: #8E8C84;
  --accent: #C96442; --goal: #7A68C2; --blue: #4F7CAC;
  --glass: rgba(255, 255, 255, .66); --glass-hi: rgba(255, 255, 255, .95); --glass-line: rgba(28, 27, 25, .08);
  --glass-drop: 0 10px 30px -14px rgba(28, 27, 25, .22);
  --glass-fill: rgba(201, 199, 191, .3);
  --switch-on: #1C1B19;
  --panel: #F9F8F5; --card-line: rgba(28, 27, 25, .09);
  --panel-line: rgba(28, 27, 25, .07); --hair: #E8E7E2; --dot: rgba(28, 27, 25, .16);
  --bezel: #1D1D1F; --bezel-line: rgba(28, 27, 25, .14);
  --brand-font: "Archivo Expanded", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font: "Montserrat", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.3, .64, 1);
  color-scheme: light;
}
:root[data-theme="dark"], :root[data-theme="black"] {
  --bg: #1C1C1E; --card: #2C2C2E; --ink: #F5F5F3; --ink-2: #9E9D98; --ink-3: #636260;
  --sep: #3A3A3C; --track: #3A3A3C; --track-fill: #6E6E73; --placeholder: #333335;
  --groove: #1E1E20; --rim: #48484A; --on-ink: #1C1C1E;
  --red: #FF6A5F; --amber: #E8B04B; --green: #8DBA84; --gray: #8E8E93;
  --accent: #E07A57; --goal: #A595EC; --blue: #7FA7D6;
  --glass: rgba(58, 58, 60, .58); --glass-hi: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .07);
  --glass-drop: 0 10px 30px -14px rgba(0, 0, 0, .7);
  --glass-fill: rgba(110, 110, 115, .3);
  --switch-on: #8E8E93;
  --panel: #242426; --card-line: rgba(255, 255, 255, .09);
  --panel-line: rgba(255, 255, 255, .07); --dot: rgba(255, 255, 255, .14); --hair: #2A2A2C;
  --bezel: #2A2A2C; --bezel-line: rgba(255, 255, 255, .1);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #1C1C1E; --card: #2C2C2E; --ink: #F5F5F3; --ink-2: #9E9D98; --ink-3: #636260;
    --sep: #3A3A3C; --track: #3A3A3C; --track-fill: #6E6E73; --placeholder: #333335;
    --groove: #1E1E20; --rim: #48484A; --on-ink: #1C1C1E;
    --red: #FF6A5F; --amber: #E8B04B; --green: #8DBA84; --gray: #8E8E93;
    --accent: #E07A57; --goal: #A595EC; --blue: #7FA7D6;
    --glass: rgba(58, 58, 60, .58); --glass-hi: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .07);
    --glass-drop: 0 10px 30px -14px rgba(0, 0, 0, .7);
    --glass-fill: rgba(110, 110, 115, .3);
    --switch-on: #8E8E93;
    --panel: #242426; --card-line: rgba(255, 255, 255, .09);
    --panel-line: rgba(255, 255, 255, .07); --dot: rgba(255, 255, 255, .14); --hair: #2A2A2C;
    --bezel: #2A2A2C; --bezel-line: rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}
:root[data-theme="black"] {
  --bg: #000000; --card: #1C1C1E; --sep: #2C2C2E; --track: #2C2C2E; --placeholder: #1A1A1C;
  --groove: #0E0E10; --rim: #3A3A3C; --glass: rgba(44, 44, 46, .6); --bezel: #1C1C1E; --hair: #141416;
  --panel: #0E0E10; --card-line: rgba(255, 255, 255, .1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--font); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; transition: background-color .3s, color .3s;
}
[data-lang="en"] .zh, [data-lang="zh"] .en { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }
.nb { white-space: nowrap; }

/* Headlines in the wordmark's face (the user: same font as Orbit). Archivo 125 is wide, so the sizes are a step below
   what Montserrat had; Chinese keeps PingFang at the same size. */
.display { margin: 0; font-family: var(--brand-font); font-weight: 700; font-stretch: 125%; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.title { margin: 0; font-family: var(--brand-font); font-weight: 700; font-stretch: 125%; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.display .zh, .title .zh { letter-spacing: 0; line-height: 1.25; font-weight: 600; }
.lead { margin: 0; font-size: clamp(18px, 1.75vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.lead .zh { line-height: 1.7; }
.fine { margin: 0; font-size: 13px; color: var(--ink-2); }
.label { font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* Buttons: ink capsule for the one main action, glass circles for the rest. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); text-decoration: none; white-space: nowrap;
  font: 600 16px/1 var(--font); letter-spacing: -0.01em;
  transition: transform .25s var(--spring), opacity .25s;
}
.pill:active { transform: scale(.97); opacity: .85; }
.pill.soon { cursor: default; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--track-fill); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 .5px 0 var(--glass-hi), 0 0 0 .5px var(--glass-line), var(--glass-drop);
}

/* Top bar, as on obsidian.md: logo and section links on the left, a bordered language menu on the right. */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--sep); background: var(--bg); transition: background-color .3s; }
.nav-inner { display: flex; align-items: center; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; }
.brand span, .wordmark { font-family: var(--brand-font); font-weight: 700; font-stretch: 125%; letter-spacing: -0.01em; }
.brand .glyph { width: 31px; height: auto; display: block; }
.nav .brand { margin-right: 36px; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 16px; font-weight: 500; text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.lang-menu { position: relative; margin-left: auto; }
.lang-btn { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px 0 9px; border: 1px solid var(--sep); border-radius: 9px; background: transparent; cursor: pointer; transition: background-color .2s; }
.lang-btn:hover { background: var(--track); }
.lang-btn svg { width: 19px; height: 19px; }
.lang-btn .chev { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; padding: 6px; display: flex; flex-direction: column; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--sep), 0 16px 40px -16px rgba(0, 0, 0, .35); transform-origin: top right; animation: menu-in .26s var(--spring); }
.menu[hidden] { display: none; }
.menu.closing { animation: menu-out .16s var(--ease) forwards; pointer-events: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(.9) translateY(-6px); filter: blur(2px); } }
@keyframes menu-out { to { opacity: 0; transform: scale(.9) translateY(-6px); filter: blur(2px); } }
.menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; font-size: 15px; text-align: left; cursor: pointer; }
.menu button:hover { background: var(--track); }
.menu button[aria-pressed="true"]::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* Hero */
.hero { padding: 72px 0 88px; }
.hero-grid { display: grid; gap: 56px; align-items: center; }
.hero-copy .lead { margin-top: 24px; max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.hero .fine { margin-top: 18px; }
/* Side by side, the hero fills the first screen under the nav and sits in its vertical middle (the user: at the top
   of the page it sat high instead of centred); site.js shrinks the phone (--pw) so it always fits that screen. */
@media (min-width: 940px) {
  .hero { display: flex; align-items: center; min-height: calc(100svh - var(--nav-h, 73px)); padding: 48px 0; }
  .hero > .wrap { flex: 1; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
}

/* iPhone. The screen is drawn at real points (402 × 874) and scaled to fit. */
/* Bezel and screen are both G3 superellipses. For the 11px bezel to stay 11px round the corners,
   the outer extent is the inner one plus 1.84 × 11 (66 → 86), not plus 11. */
.phone { --pw: 300; position: relative; width: calc(var(--pw) * 1px + 14px); padding: 7px; margin: 0 auto; filter: drop-shadow(0 26px 34px rgba(28, 27, 25, .2)); }
.bezel, .bezel-rim { position: absolute; inset: 0; background: var(--bezel); }
.bezel-rim { inset: -1px; background: var(--bezel-line); }
.screen { position: relative; z-index: 1; width: calc(var(--pw) * 1px); height: calc(var(--pw) * 874px / 402); overflow: hidden; background: var(--bg); isolation: isolate; transition: background-color .3s; }
.ui { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform: scale(calc(var(--pw) / 402)); transform-origin: 0 0; font: 400 17px/1.35 var(--ui); letter-spacing: -0.01em; color: var(--ink); }
@media (max-width: 380px) { .phone { --pw: 272; } }
.status { position: absolute; inset: 0 0 auto; height: 54px; }
.status .clock { position: absolute; left: 54px; top: 17px; font: 600 17px/22px var(--ui); letter-spacing: -0.02em; }
.status .island { position: absolute; left: 138px; top: 11px; width: 126px; height: 37px; border-radius: 19px; background: #000; }
.status .sicons { position: absolute; right: 30px; top: 19px; display: flex; gap: 6px; align-items: center; }
.status .sicons svg { display: block; }
.topbar { position: absolute; top: 62px; left: 20px; right: 20px; display: flex; justify-content: space-between; }
.gbtn { width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink); }
.gbtn svg { width: 17px; height: 17px; }
.chat-log {
  position: absolute; left: 0; right: 0; top: 116px; bottom: 100px; padding: 0 16px 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34px); mask-image: linear-gradient(to bottom, transparent, #000 34px);
  transition: opacity .45s var(--ease);
}
.chat-log.fade { opacity: 0; }
.composer { position: absolute; left: 16px; right: 16px; bottom: 32px; height: 52px; border-radius: 26px; display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.cbtn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink); transition: background-color .3s, color .3s; }
.cbtn svg { width: 17px; height: 17px; }
.cbtn.send { background: var(--ink); color: var(--on-ink); width: 34px; height: 34px; }
.cbtn.send svg { width: 15px; height: 15px; }
.ctext { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; white-space: nowrap; font-size: 17px; }
.ctext:empty { justify-content: flex-start; }
.ctext:empty::before { content: attr(data-ph); color: var(--ink-3); }

.composer.listening .mic { background: var(--ink); color: var(--on-ink); }

/* Chat rows open their height frame by frame (the log is bottom-anchored). */
.grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--ease); }
.grow.in { grid-template-rows: 1fr; }
.grow > .gi { min-height: 0; overflow: hidden; }
.grow > .gi > * { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease) .05s, transform .36s var(--ease); }
.grow.in > .gi > * { opacity: 1; transform: none; }
.static .grow, .static .grow > .gi > * { transition: none; }
.bubble { width: fit-content; max-width: 82%; padding: 10px 14px; border-radius: 20px; font-size: 17px; line-height: 1.38; }
.bubble.user { margin-left: auto; background: var(--track); }
.bubble.aureole { background: var(--card); }

/* Thinking trace */
.trace { padding: 0 4px; font-size: 15px; color: var(--ink-2); }
.tr-head { display: flex; align-items: center; gap: 8px; height: 24px; }
.tr-grid { width: 13px; height: 13px; display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; place-content: center; }
.tr-grid i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-2); animation: dotwave 1.6s ease-in-out infinite; animation-delay: calc(var(--k) * .12s); transition: transform .5s var(--ease), opacity .5s, background-color .5s; }
@keyframes dotwave { 0%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1.3); opacity: 1; } }
.trace.done .tr-grid i { animation: none; transform: scale(0); opacity: 0; }
.trace.done .tr-grid i:nth-child(5) { transform: scale(1.7); opacity: 1; background: var(--ink-3); }
.tr-label { white-space: nowrap; }
.tr-label.shimmer { color: transparent; background: linear-gradient(90deg, var(--ink-3) 20%, var(--ink) 50%, var(--ink-3) 80%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 1.7s linear infinite; }
@keyframes shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.tr-steps { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease), opacity .4s; }
.trace.folded .tr-steps { grid-template-rows: 0fr; opacity: 0; }
.tr-steps > div { min-height: 0; overflow: hidden; }
.tr-step { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding-left: 26px; }
.tr-step .elbow { position: absolute; left: 6px; top: -16px; width: 16px; height: 32px; overflow: visible; }
.tr-step .elbow path { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .35s var(--ease); }
.tr-step .ic { width: 15px; height: 15px; flex: none; opacity: 0; transition: opacity .25s .15s; }
.tr-step .tx { opacity: 0; filter: blur(4px); transform: translateX(-4px); transition: opacity .3s .2s, filter .3s .2s, transform .3s var(--ease) .2s, color .3s; }
.tr-step .val { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s .25s; }
.tr-step.in .elbow path { stroke-dashoffset: 0; }
.tr-step.in .ic, .tr-step.in .val { opacity: 1; }
.tr-step.in .tx { opacity: 1; filter: none; transform: none; }
.tr-step.done .tx { color: var(--ink-3); }

/* Task ticket */
.ticket { padding-top: 2px; }
.tk-card { background: var(--card); overflow: hidden; }
.tk-code { margin: 12px 12px 0; padding: 12px 14px 14px; background: var(--bg); }
.tk-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tk-tag { padding: 3px 9px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 600; }
.tk-id { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tk-barcode { display: block; width: 100%; height: 44px; fill: var(--ink); }
.tk-title { margin: 14px 16px 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.tk-sub { margin: 2px 16px 0; font-size: 13px; color: var(--ink-2); }
.tk-perf { position: relative; height: 22px; }
.tk-perf::before, .tk-perf::after { content: ""; position: absolute; top: 50%; height: 0; border-top: 2px dotted var(--track-fill); width: calc(50% - 14px); }
.tk-perf::before { left: 14px; transform-origin: left; }
.tk-perf::after { right: 14px; transform-origin: right; }
.tk-perf i { position: absolute; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); }
.tk-perf i:first-child { left: -9px; }
.tk-perf i:last-child { right: -9px; }
.tk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 2px 16px 4px; }
.tk-fields div { display: flex; flex-direction: column; }
.tk-l { font-size: 13px; color: var(--ink-2); }
.tk-v { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tk-plan { padding: 2px 16px 16px; }
.tk-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tk-day span { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.tk-bars { display: flex; justify-content: space-between; align-items: stretch; height: 30px; }
.tk-bars i { width: 2px; border-radius: 1px; background: var(--track-fill); }
.tk-bars i.on { width: 5px; border-radius: 2px; background: var(--ink); }
.tk-cap { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.tk-actions { position: relative; display: flex; gap: 12px; margin-top: 12px; }
.tk-actions .gbtn { width: 52px; height: 52px; }
.tk-actions .gbtn svg { width: 19px; height: 19px; }
.ink-pill { flex: 1; height: 52px; border: 0; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--on-ink); font-size: 17px; font-weight: 600; transition: transform .25s var(--spring), opacity .25s; }
.ink-pill svg { width: 18px; height: 18px; }
.ink-pill.press, .ink-pill:active { transform: scale(.97); opacity: .85; }
.tap { position: absolute; left: calc(64px + (100% - 64px) / 2 - 24px); top: 2px; width: 48px; height: 48px; border-radius: 50%; background: rgba(140, 140, 140, .45); opacity: 0; transform: scale(.3); pointer-events: none; }
.tap.on { animation: tap .65s var(--ease); }
@keyframes tap { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.ticket .tk-barcode, .ticket .tk-bars { clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease); }
.ticket .tk-title, .ticket .tk-sub, .ticket .tk-fields > div, .ticket .tk-cap, .ticket .tk-day span, .ticket .tk-meta { opacity: 0; transform: translateY(5px); filter: blur(3px); transition: opacity .32s var(--ease), transform .32s var(--ease), filter .32s; }
.ticket .tk-perf::before, .ticket .tk-perf::after { transform: scaleX(0); transition: transform .45s var(--ease); }
.ticket .tk-actions { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .36s var(--spring); }
.ticket.play .tk-barcode { clip-path: inset(0); transition-delay: .05s; }
.ticket.play .tk-meta { opacity: 1; transform: none; filter: none; }
.ticket.play .tk-title { opacity: 1; transform: none; filter: none; transition-delay: .18s; }
.ticket.play .tk-sub { opacity: 1; transform: none; filter: none; transition-delay: .24s; }
.ticket.play .tk-perf::before, .ticket.play .tk-perf::after { transform: scaleX(1); transition-delay: .3s; }
.ticket.play .tk-fields > div { opacity: 1; transform: none; filter: none; }
.ticket.play .tk-fields > div:nth-child(1) { transition-delay: .42s; }
.ticket.play .tk-fields > div:nth-child(2) { transition-delay: .47s; }
.ticket.play .tk-fields > div:nth-child(3) { transition-delay: .52s; }
.ticket.play .tk-fields > div:nth-child(4) { transition-delay: .57s; }
.ticket.play .tk-bars { clip-path: inset(0); transition-delay: .66s; }
.ticket.play .tk-day span, .ticket.play .tk-cap { opacity: 1; transform: none; filter: none; transition-delay: .8s; }
.ticket.play .tk-actions { opacity: 1; transform: none; transition-delay: .95s; }

/* Principles and the icon share one section, as on obsidian.md: three statements in a narrow
   left column (statement and explanation the same size), the icon, name and download on the right. */
.tenets { padding: 64px 0 96px; }
.tenets-grid { display: grid; row-gap: 48px; column-gap: 0; align-items: start; }
@media (min-width: 900px) { .tenets-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Measured on obsidian.md: 528 wide, statement and explanation both 24/32, 4 between them,
   no dividers (the user asked for them gone): items are grouped by 40 of space instead. */
.tenet-list { max-width: 528px; margin: 0; display: flex; flex-direction: column; gap: 40px; font-size: 24px; line-height: 32px; }
.tenet dt { font-weight: 500; letter-spacing: -0.01em; }
/* The light explanation sits a step below its title (the user: smaller than the title). */
.tenet dd { margin: 8px 0 0; font-size: 19px; line-height: 29px; color: var(--ink-2); text-wrap: pretty; }
.tenet .zh { letter-spacing: 0; }
@media (max-width: 640px) { .tenet-list { font-size: 20px; line-height: 28px; } .tenet dd { font-size: 17px; line-height: 26px; } }
.brand-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 900px) {
  .brand-card { justify-self: end; width: clamp(176px, 18vw, 256px); }
  .brand-line, .brand-link { white-space: nowrap; }
}
.app-icon { width: clamp(176px, 18vw, 256px); aspect-ratio: 1; display: grid; place-items: center; }
.app-icon.on-light { background: #FFFFFF; color: #1C1B19; box-shadow: inset 0 0 0 1px rgba(28, 27, 25, .06); }
.app-icon.on-dark { background: #000000; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.app-icon .mark, .app-icon .motion-mark { width: 80%; height: auto; display: block; }
.brand-card .theme-dark { display: none; }
:root[data-theme="dark"] .brand-card .theme-light, :root[data-theme="black"] .brand-card .theme-light { display: none; }
:root[data-theme="dark"] .brand-card .theme-dark, :root[data-theme="black"] .brand-card .theme-dark { display: grid; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .brand-card .theme-light { display: none; }
  :root[data-theme="system"] .brand-card .theme-dark { display: grid; }
}
.mark-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.6s infinite; }
@keyframes blink { 0%, 90%, 95%, 100% { transform: scaleY(1); } 92.5% { transform: scaleY(.08); } }
.wordmark { margin: 48px 0 0; font-size: 32px; line-height: 30px; }
.brand-line { margin: 48px 0 0; font-size: 24px; line-height: 32px; font-weight: 500; }
/* Smaller than "Made for iPhone." in every way: lower size and a shorter line (the user: the whole line, not just
   the letters, must sit under the one above). */
.brand-link { display: inline-block; margin-top: 6px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.brand-link:hover { color: var(--ink); }

/* Feature cards: big title, big grey explanation, and the real UI in a panel that runs off the card. */
.features { padding: 24px 0 120px; }
.features > .wrap > .lead { margin-top: 18px; max-width: 32em; }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); }
/* Panels run off the card's lower-right, so the card's own edge is drawn along the same G3 curve (site.js
   adds the svg): without it the corner melted into the page wherever the panel met it. As on obsidian.md:
   page, card and panel are three different shades, and the card has a hairline all round. */
.sq-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.sq-line path { fill: none; stroke: var(--card-line); stroke-width: 2; transition: stroke .3s; }
.card-text { padding: 44px 44px 0; }
/* Title and body two clear steps apart (the user: titles and body text need clearly different sizes): about 2.5×. */
.card h3 { margin: 0; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; }
.card h3 .zh { letter-spacing: 0; }
.card-text p { margin: 18px 0 0; max-width: 27em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.card-text p .zh { line-height: 1.75; }
.card-text .hint { margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--ink); }
.panel { position: relative; flex: 1; min-height: 340px; margin: 40px 0 0 13%; overflow: hidden; background: var(--panel); border-top: 1px solid var(--panel-line); border-left: 1px solid var(--panel-line); border-top-left-radius: 20px; transition: background-color .3s; }
.panel-in { position: absolute; left: 32px; top: 32px; }
.cards { display: grid; gap: 24px; margin-top: 24px; }
.cards .card { min-height: 700px; }
@media (min-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
.card-wide { margin-top: 56px; }
.card-wide .panel { flex: none; min-height: 0; height: 760px; }
.card-wide .card-text p { max-width: 24em; }
@media (min-width: 900px) {
  .card-wide { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .card-wide .card-text { padding: 52px 48px; }
  .card-wide .panel { margin: 52px 0 0 0; }
}
@media (max-width: 520px) {
  .card-text { padding: 32px 24px 0; }
  .panel { margin: 28px 0 0 24px; }
  .panel-in { left: 20px; top: 24px; }
  .cards .card { min-height: 0; }
  .cards .panel { min-height: 360px; }
}

/* Adjust: the planner's adjustment screen, at real points (402 wide), scaled down only on narrow screens. */
.adj-fit { position: absolute; left: 40px; top: 32px; transform-origin: 0 0; }
.adj { --hh: 19px; position: relative; width: 402px; height: 690px; font: 400 15px/1.3 var(--ui); letter-spacing: -0.01em; color: var(--ink); -webkit-user-select: none; user-select: none; }
/* Editing: the timeline shrinks to end just above the editor, so nothing overlaps. */
.adj.editing { --hh: 12px; }
.adj::before { content: ""; position: absolute; inset: -320px -640px -320px -240px; pointer-events: none; background-image: radial-gradient(circle, var(--dot) 1.05px, transparent 1.6px); background-size: 20px var(--hh); background-position: 10px calc(320px + 118px - var(--hh) / 2); transition: background-size .45s var(--ease), background-position .45s var(--ease); }
.adj-top { position: absolute; z-index: 2; top: 10px; left: 20px; right: 20px; height: 44px; display: flex; align-items: center; justify-content: center; }
.adj-top .gbtn { position: absolute; left: 0; top: 0; }
.adj-title { font-size: 17px; font-weight: 600; }
.adj-days { position: absolute; z-index: 2; top: 72px; left: 40px; display: grid; grid-template-columns: repeat(3, 112px); column-gap: 8px; }
.adj-days div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.adj-days b { font: 600 22px/1 var(--rounded); }
.adj-days span { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.adj-days .today span { color: var(--ink); }
.adj-hour { position: absolute; left: 4px; width: 24px; text-align: right; top: calc(118px + (var(--h) - 8) * var(--hh)); transform: translateY(-50%); font: 500 11px/1 var(--rounded); color: var(--ink-3); font-variant-numeric: tabular-nums; transition: top .45s var(--ease); }
.adj-busy, .adj-sit, .adj-ghost { position: absolute; left: calc(40px + var(--d) * 120px); width: 112px; top: calc(118px + (var(--s) - 8) * var(--hh) + 1px); height: calc(var(--len) * var(--hh) - 2px); transition: top .45s var(--ease), left .45s var(--spring), height .45s var(--ease), width .35s var(--ease), opacity .3s; }
.adj-busy { z-index: 1; padding: 6px 12px; overflow: hidden; border-radius: 10px; background: var(--placeholder); color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.adj-sit { z-index: 3; min-height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; cursor: pointer; transition: top .5s var(--spring), left .5s var(--spring), height .45s var(--ease), width .35s var(--ease), opacity .3s, transform .25s var(--spring); }
.adj-sit:active { transform: scale(.97); }
.adj-sit .t { font: 600 22px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.adj-sit .t small { font-size: 14px; }
.adj-sit .info { display: none; }
.adj-sit.gone { opacity: 0; pointer-events: none; }
.adj-sit.invite::after { content: ""; position: absolute; inset: -5px; border-radius: 16px; border: 1.5px solid var(--ink); opacity: 0; animation: invite 2.4s var(--ease) infinite; }
@keyframes invite { 0% { opacity: .55; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.08); } }
.adj.editing .adj-sit { z-index: 4; min-height: 8px; padding: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.adj.editing .adj-sit .t { display: none; }
.adj.editing .adj-busy { padding: 2px 8px; font-size: 11px; line-height: 14px; border-radius: 6px; }
.adj.editing .adj-ghost { min-height: 0; padding: 0 8px; border-radius: 6px; font-size: 11px; }
/* One line, level with the corner buttons; how long is left before the deadline stays in the overview. */
.ed-info { position: absolute; top: 24px; left: 70px; right: 70px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; font-size: 13px; }
.ed-info b { font-size: 15px; font-weight: 600; }
.ed-info .was { display: flex; gap: 8px; color: var(--ink-2); }
.ed-info .was button { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.ed-info .was svg { width: 12px; height: 12px; }
.ed-info .spare { display: none; }
.adj-ghost { z-index: 2; min-height: 24px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); font: 600 15px/1 var(--rounded); color: var(--ink-2); cursor: pointer; opacity: 0; pointer-events: none; }
.adj.editing .adj-ghost.on { opacity: 1; pointer-events: auto; }
.adj-ghost:hover { border-color: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--ink); }
.adj-sheet { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 82px; height: 194px; transition: height .45s var(--spring), bottom .45s var(--spring); }
.adj.editing .adj-sheet { bottom: 16px; height: 368px; }
.adj-sheet > .bg { position: absolute; inset: 0; }
.ov, .ed { position: absolute; inset: 0; }
.adj.editing .ov, .adj:not(.editing) .ed { display: none; }
.ov { padding: 18px 16px 16px; }
.ov-head { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.ov-head b { font: 700 23px/1.1 var(--rounded); letter-spacing: -0.01em; }
.ov-head span { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.ov-strip { position: relative; display: grid; grid-template-columns: repeat(11, 1fr); height: 58px; margin-top: 12px; }
.ov-groove { position: absolute; left: 0; top: 0; bottom: 0; width: calc(3 / 11 * 100%); border-radius: 16px; background: var(--groove); box-shadow: inset 0 0 0 1px var(--rim); transition: left .4s var(--spring); }
.ov-day { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.ov-day i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.ov-day b { margin-top: 3px; font: 600 17px/1 var(--rounded); }
.ov-day.past b, .ov-day.after b { color: var(--ink-3); }
.ov-day.due b { color: var(--red); }
.ov-day .mark-dot { width: 5px; height: 5px; margin-top: 4px; border-radius: 50%; background: var(--ink); }
.ov-day .flag { width: 13px; height: 13px; margin-top: 2px; color: var(--red); }
.ov-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ov-tile { height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: var(--glass-fill); cursor: pointer; transition: transform .25s var(--spring), opacity .25s; }
.ov-tile:active { transform: scale(.97); opacity: .85; }
.ov-tile small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); }
.ov-tile small svg { width: 13px; height: 13px; }
.ov-tile b { font: 600 17px/1 var(--rounded); }
.ed-btn { position: absolute; top: 24px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--spring), opacity .25s; }
.ed-btn:active { transform: scale(.94); opacity: .85; }
.ed-btn svg { width: 15px; height: 15px; }
.ed-del { left: 26px; color: var(--ink); }
.ed-ok { right: 26px; background: var(--ink); color: var(--on-ink); }
.ed-time { position: absolute; left: 74px; top: 124px; }
.ed-day, .ed-range { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ed-clock { display: block; margin: 4px 0 3px -6px; font: 500 44px/46px var(--rounded); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.ed-clock .h { padding: 0 6px; border-radius: 12px; background: var(--glass-fill); }
.ed-clock .m { color: var(--ink-2); }
.ed-wheel { position: absolute; inset: 0; }
.ed-frame { position: absolute; }
.ed-frame-rim { position: absolute; pointer-events: none; overflow: visible; }
.ed-frame-rim path { fill: none; stroke: var(--rim); stroke-width: .75; }
.ed-val { position: absolute; left: 0; top: 0; font: 600 39px/1 var(--rounded); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; will-change: transform, filter; }
.ed-hit { position: absolute; left: 150px; top: 18px; width: 228px; height: 270px; cursor: grab; touch-action: none; }
.ed-hit:active { cursor: grabbing; }
.ed-ruler { position: absolute; left: 0; right: 0; top: 280px; height: 72px; cursor: ew-resize; touch-action: none; }
.ed-ticks { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-image: linear-gradient(to right, transparent 4%, #000 26%, #000 74%, transparent 96%); }
.ed-tick { position: absolute; bottom: 12px; width: 3px; margin-left: -1.5px; border-radius: 1.5px; background: var(--ink-3); }
.ed-ptr { position: absolute; left: 189px; bottom: 12px; width: 3px; height: 36px; margin-left: -1.5px; border-radius: 1.5px; background: var(--ink); }
.ed-cap { position: absolute; left: 189px; top: 0; transform: translateX(-50%); height: 24px; padding: 0 10px; border-radius: 12px; display: flex; align-items: center; background: var(--glass-fill); font: 500 13px/1 var(--rounded); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adj-bar { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 16px; height: 56px; display: flex; gap: 12px; transition: opacity .25s, transform .4s var(--spring); }
.adj.editing .adj-bar { opacity: 0; transform: translateY(16px); pointer-events: none; }
.adj-bar .gbtn { width: 56px; height: 56px; cursor: pointer; }
.adj-bar .gbtn svg { width: 20px; height: 20px; }
.adj-bar .ink-pill { height: 56px; border-radius: 28px; cursor: pointer; font: 600 17px/1 var(--ui); }

/* Questions */
.demo-form { width: 400px; }
.demo-form .bubble { font: 400 16px/1.38 var(--ui); margin-bottom: 14px; }
.fb { width: 380px; padding: 22px 22px 18px; background: var(--card); font: 400 15px/1.35 var(--ui); }
.fb-top { display: grid; grid-template-columns: minmax(56px, auto) 1fr minmax(56px, auto); align-items: start; gap: 10px; }
.fb-top b { display: block; font: 600 17px/1.2 var(--rounded); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-top small { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.fb-ans { text-align: right; }
.fb-q { text-align: center; }
.fb-q svg { width: 18px; height: 18px; color: var(--ink-2); }
.fb-q span { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.fb-body { margin: 22px 2px 20px; min-height: 52px; }
.fb-page, .fb-done { transition: opacity .22s var(--ease), transform .3s var(--ease), filter .22s; }
.fb-page.out, .fb-done.out { opacity: 0; transform: translateX(-14px); filter: blur(3px); }
.fb-page.pre, .fb-done.pre { opacity: 0; transform: translateX(14px); filter: blur(3px); transition: none; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 33%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ink) var(--p), var(--track) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .18); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .18); }
.range:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 4px; border-radius: 4px; }
.ticks { display: flex; justify-content: space-between; padding: 6px 13px 0; }
.ticks i { width: 3px; height: 3px; border-radius: 50%; background: var(--track-fill); }
.ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-2); }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; padding: 2px; border-radius: 9px; background: var(--track); }
/* One thumb that slides to the picked option, like the system segmented control (site.js sets --n and --k). */
.seg::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) / var(--n, 3)); border-radius: 7px; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04); transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .4s var(--spring); }
.seg button { position: relative; height: 32px; border: 0; border-radius: 7px; background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; transition: color .2s; }
.seg button[aria-pressed="true"] { font-weight: 600; }
.fb-actions { display: flex; gap: 12px; }
.fb-actions .gbtn { width: 48px; height: 48px; cursor: pointer; }
.fb-actions .ink-pill { height: 48px; cursor: pointer; font: 600 16px/1 var(--ui); }
.fb-actions .ink-pill svg { width: 16px; height: 16px; }
.fb-done .bubble { max-width: 100%; font-size: 16px; }

/* Work schedules: what Orbit read from a file, as a week (--hr is one hour, from 8:00) */
.wk { --hr: 25px; width: 560px; font: 400 13px/1.25 var(--ui); }
.wk-file { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; background: var(--card); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wk-file svg { width: 18px; height: 18px; color: var(--ink-2); }
.wk-file span { font-weight: 400; color: var(--ink-2); }
.wk-grid { position: relative; display: grid; grid-template-columns: 28px repeat(7, 72px); column-gap: 6px; margin-top: 18px; }
.wk-head { padding-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-align: left; }
.wk-head.today { color: var(--ink); }
.wk-col { position: relative; height: calc(13 * var(--hr)); }
.wk-hours { position: relative; height: calc(13 * var(--hr)); }
.wk-hours span { position: absolute; right: 4px; transform: translateY(-50%); font: 500 11px/1 var(--rounded); color: var(--ink-3); }
.wk-blk { position: absolute; left: 0; right: 0; top: calc((var(--a) - 8) * var(--hr) + 1px); height: calc((var(--b) - var(--a)) * var(--hr) - 2px); padding: 4px 6px; overflow: hidden; border-radius: 7px; background: var(--placeholder); color: var(--ink-2); font-size: 11px; font-weight: 600; line-height: 1.15; opacity: 0; transform: scale(.92); transition: opacity .28s var(--ease), transform .3s var(--spring); transition-delay: calc(var(--i) * 45ms); }
.wk-blk.work { background: var(--ink); color: var(--on-ink); }
.demo-week.in .wk-blk { opacity: 1; transform: none; }
.wk-now { position: absolute; left: -2px; right: 0; top: calc((11.75 - 8) * var(--hr)); border-top: 1.5px solid var(--red); }
.wk-now::before { content: ""; position: absolute; left: -3px; top: -4.25px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* Reminders: the app's "Remind ahead" console (FineTuneReminderEditor). One line, left = the earliest lead,
   right = the deadline; the white dot is when reminding starts, the small dots are the reminders in between,
   placed by time so they crowd toward the deadline. ✓ folds it into a one-line summary, as the app returns
   to its overview. */
.demo-remind { width: 378px; }
.rm { position: relative; height: 375px; color: var(--ink); font-family: var(--ui); transition: height .5s var(--spring); }
.rm > .bg { position: absolute; inset: 0; }
.rm-body { position: absolute; left: 0; right: 0; top: 0; height: 375px; transition: opacity .25s var(--ease); }
.rm.closed { height: 64px; }
.rm.closed .rm-body { opacity: 0; pointer-events: none; }
.rm-head { position: absolute; left: 0; right: 0; top: 24px; height: 36px; pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rm .ed-btn:disabled { opacity: .35; cursor: default; }
.rm-lead { position: absolute; left: 32px; top: 70px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rm-lead b { font: 600 52px/58px var(--rounded); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rm-lead b.word { font-size: 34px; }
.rm-lead span { font-size: 17px; color: var(--ink-2); }
.rm-note { position: absolute; left: 32px; right: 32px; top: 130px; margin: 0; font-size: 15px; line-height: 20px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-line { position: absolute; left: 44px; right: 44px; top: 160px; height: 64px; touch-action: none; cursor: pointer; outline: none; }
.rm-line > i { position: absolute; top: 31px; height: 2px; border-radius: 1px; }
.rm-rail { left: 0; right: 0; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.rm-lit { right: 0; background: color-mix(in srgb, var(--ink) 34%, transparent); transition: left .18s var(--ease); }
.rm-dot { position: absolute; top: 32px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .22); transition: left .18s var(--ease), opacity .2s; }
.rm-start { position: absolute; top: 32px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .26); transition: left .18s var(--ease), transform .25s var(--spring), background-color .2s, opacity .2s; }
.rm-line.drag .rm-start { transform: scale(1.5); background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); transition: transform .25s var(--spring), background-color .2s; }
.rm-line:focus-visible .rm-start { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent), 0 1px 4px rgba(0, 0, 0, .26); }
.rm-due { position: absolute; right: 0; top: 32px; width: 18px; height: 18px; margin: -9px -9px 0 0; border-radius: 50%; background: #fff; border: 3px solid var(--red); }
.rm-tick { position: absolute; right: -1px; top: 19px; width: 2px; height: 26px; border-radius: 1px; background: var(--red); }
.rm-tag { position: absolute; white-space: nowrap; font-size: 15px; line-height: 18px; transition: left .18s var(--ease), opacity .2s; }
.rm-tag.up { top: 0; font-weight: 600; }
.rm-tag.down { top: 46px; font: 500 15px/18px var(--rounded); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rm-tag.due { right: -12px; color: var(--red); }
.rm-tag.due.down { color: var(--ink-2); }
.rm-row { position: absolute; left: 32px; right: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--sep); transition: opacity .2s; }
.rm-row.count { top: 234px; }
.rm-row.island { top: 298px; }
.rm-row b { display: block; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.rm-row small { display: block; margin-top: 2px; font-size: 13px; line-height: 17px; color: var(--ink-2); white-space: nowrap; }
.rm-step { flex: none; display: grid; grid-template-columns: 40px 44px 40px; align-items: center; height: 40px; padding: 0 2px; border-radius: 20px; }
.rm-step button { height: 40px; padding: 0; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: opacity .2s, transform .25s var(--spring); }
.rm-step button:active { transform: scale(.9); }
.rm-step button:disabled { opacity: .3; cursor: default; }
.rm-step svg { width: 16px; height: 16px; }
.rm-step output { height: 32px; border-radius: 10px; background: var(--groove); display: grid; place-items: center; font: 600 19px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.rm-switch { flex: none; position: relative; width: 62px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: var(--track-fill); cursor: pointer; transition: background-color .25s; }
.rm-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 36px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s var(--spring); }
.rm-switch[aria-checked="true"] { background: var(--switch-on); }
.rm-switch[aria-checked="true"]::after { transform: translateX(22px); }
.rm-switch:disabled { cursor: default; }
.rm.off .rm-line, .rm.off .rm-row.island { opacity: .4; }
.rm-sum { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 22px; border: 0; background: none; color: var(--ink); font: 600 15px/1 var(--ui); text-align: left; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.rm.closed .rm-sum { opacity: 1; pointer-events: auto; transition-delay: .15s; }
.rm-sum svg { flex: none; width: 17px; height: 17px; }
.rm-sum span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 400; }
.rm-sum span b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.rm-sum .chev { width: 13px; height: 13px; color: var(--ink-3); transform: rotate(-90deg); }

/* Voice */
.demo-voice { width: 380px; display: flex; flex-direction: column; gap: 14px; }
.demo-voice .composer { position: relative; left: auto; right: auto; bottom: auto; }
.v-saved { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-height: 120px; justify-content: flex-end; }
.v-saved .bubble { font: 400 16px/1.38 var(--ui); max-width: 92%; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: right bottom; transition: opacity .3s var(--ease), transform .34s var(--spring); }
.v-saved .v-note { font: 400 12px var(--ui); color: var(--ink-3); opacity: 0; transition: opacity .3s .16s; }
.v-saved.on .bubble { opacity: 1; transform: none; }
.v-saved.on .v-note { opacity: 1; }

/* Showcases, as obsidian.md's "Sync securely": a heading, one line, and a list of features;
   the selected one shows its real screen in a frame on the right. Three clear steps of type (the user: too crowded,
   "层级分明"): the section title, an 18 px paragraph (Chinese 17) and a 15 px list, English set a little tighter.
   Side by side (only from 1120 px, where both columns are 500 and every frame stays a 500 square), the text is
   exactly as tall as the frame: the title's ink starts on the frame's top edge and the last row ends on its bottom
   edge, so no text runs past the frame (if the text is ever taller, the frame grows with it).
   Every row is as tall as the tallest one (the user: rows of different sizes are a basic error), with its icon and
   text centred in it, so a hovered row and the selected one are always the same size and the text keeps one rhythm. */
.showcase { padding: 72px 0 112px; }
.show-grid { display: grid; row-gap: 48px; align-items: center; }
@media (min-width: 1120px) {
  .show-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: stretch; }
  .show-text { display: flex; flex-direction: column; }
  .show-text .title { margin-top: -0.16em; } /* the ascenders' top, measured: 0.16 em below the line's top */
  [data-lang="zh"] .show-text .title { margin-top: -0.12em; }
  .show-text .show-list { margin-top: auto; }
}
.show-sub { margin: 16px 0 32px; font-size: 18px; line-height: 1.5; letter-spacing: -0.015em; color: var(--ink-2); text-wrap: pretty; }
.show-sub .zh { font-size: 17px; line-height: 1.75; letter-spacing: 0; }
/* The rows reach 14 px past the column on both sides, so the icons line up with the title and the paragraph. */
.show-list { position: relative; list-style: none; margin: 0 -14px; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 4px; }
.show-list > li { display: flex; }
/* The selected item's background is one shape that slides to whichever item is picked (site.js sets --hl-y/--hl-h). */
.show-list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hl-h, 0px); transform: translateY(var(--hl-y, 0px)); border-radius: 12px; background: var(--card); opacity: 0; }
.show-list.hl::before { opacity: 1; }
.show-list.hl.moving::before { transition: transform .45s var(--spring), height .45s var(--spring); }
.show-item { position: relative; display: flex; flex: 1; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 12px; background: transparent; text-align: left; font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-2); cursor: pointer; transition: background-color .25s; }
[data-lang="zh"] .show-item { line-height: 1.7; letter-spacing: 0; }
.show-item svg { flex: none; width: 22px; height: 22px; color: var(--ink-3); transition: color .25s; }
.show-item b { font-weight: 600; color: var(--ink); }
.show-item .zh b { margin-right: 4px; }
.show-item:hover { background: color-mix(in srgb, var(--card) 55%, transparent); }
.show-item[aria-selected="true"] { background: var(--card); }
.show-list.hl .show-item[aria-selected="true"] { background: transparent; }
.show-item[aria-selected="true"] svg { color: var(--ink); }
.show-item:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.show-frame { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: end; overflow: hidden; background-color: var(--card); background-image: radial-gradient(circle, var(--dot) 1.05px, transparent 1.6px); background-size: 20px 20px; }
@media (max-width: 1119px) { .show-frame { justify-self: stretch; max-width: none; aspect-ratio: auto; height: 520px; } }
.show-screen { position: absolute; left: 48px; top: 48px; right: 0; bottom: 0; overflow: hidden; background: var(--panel); border-top: 1px solid var(--panel-line); border-left: 1px solid var(--panel-line); border-top-left-radius: 18px; }
.show-panel { position: absolute; inset: 0; padding: 30px 0 0 28px; font: 400 15px/1.35 var(--ui); letter-spacing: -0.01em; opacity: 0; transform: translateY(var(--y, 14px)); filter: blur(4px); transition: opacity .3s var(--ease), transform .45s var(--spring), filter .3s var(--ease); pointer-events: none; }
.show-panel.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.show-panel.set { transition: none; }
.show-panel > * { width: 420px; }
@media (max-width: 520px) { .show-screen { left: 20px; top: 24px; } .show-panel { padding: 22px 0 0 18px; } }

/* Chat with a change card */
.pc { display: flex; flex-direction: column; gap: 10px; }
.pc .bubble { font-size: 16px; }
.chg { margin-top: 4px; padding: 16px; background: var(--card); }
.chg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chg-head b { font-size: 17px; font-weight: 600; }
.chg-head span { font-size: 13px; color: var(--ink-2); }
.chg-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.chg-row:last-of-type { border-bottom: 0; }
.chg-row > div { min-width: 0; flex: 1; }
.chg-row b { display: block; font-size: 15px; font-weight: 600; }
.chg-when { display: block; margin-top: 2px; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.chg-when s { color: var(--ink-3); text-decoration-thickness: 1px; }
.chg-row em { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--track); font-style: normal; font-size: 12px; color: var(--ink-2); }
.chg-actions { display: flex; gap: 10px; margin-top: 12px; }
.chg-actions span { height: 44px; border-radius: 22px; display: grid; place-items: center; font-size: 16px; font-weight: 600; }
.chg-actions .no { padding: 0 18px; background: var(--track); }
.chg-actions .ink-pill { height: 44px; }
.rt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.rt-fields span { display: block; font-size: 13px; color: var(--ink-2); }
.rt-fields b { display: block; font-size: 17px; font-weight: 600; }
.rt-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.rt-week div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.rt-week i { width: 100%; height: 26px; border-radius: 7px; background: var(--track); }
.rt-week .on i { background: var(--ink); }
.rt-week .on { color: var(--ink); font-weight: 600; }

/* Today and the week */
.pday-head { display: flex; align-items: baseline; gap: 10px; }
.pday-head b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pday-head span { font-size: 15px; color: var(--ink-2); }
.pday-grid { position: relative; display: grid; grid-template-columns: 30px 1fr; height: 318px; margin-top: 18px; }
.pday-hours { position: relative; }
.pday-hours span { position: absolute; right: 8px; transform: translateY(-50%); font: 500 11px/1 var(--rounded); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pday-lane { position: relative; }
.pday-lane .hl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hair); }
.pb { position: absolute; left: 0; right: 0; top: calc((var(--a) - 8) / 14 * 100% + 1px); height: calc((var(--b) - var(--a)) / 14 * 100% - 2px); padding: 0 10px; display: flex; align-items: center; gap: 8px; overflow: hidden; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pb em { margin-left: auto; font-style: normal; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.pb.fixed { background: var(--placeholder); color: var(--ink-2); }
.pb.work { background: var(--ink); color: var(--on-ink); }
.pb.draft { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.p-now { position: absolute; left: -4px; right: 0; top: calc((var(--a) - 8) / 14 * 100%); border-top: 1.5px solid var(--red); }
.p-now::before { content: ""; position: absolute; left: -3px; top: -4.25px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.pw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; }
.pw-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pw-day > span { font-size: 11px; color: var(--ink-3); }
.pw-day > b { font: 600 15px/1 var(--rounded); }
.pw-day.today > b { color: var(--red); }
.pw-day.sel .pw-col { box-shadow: 0 0 0 1.5px var(--ink); }
.pw-col { position: relative; width: 100%; height: 150px; border-radius: 8px; background: var(--track); overflow: hidden; }
.pw-col i { position: absolute; left: 3px; right: 3px; top: calc((var(--a) - 8) / 14 * 100%); height: calc((var(--b) - var(--a)) / 14 * 100%); border-radius: 3px; background: var(--track-fill); }
.pw-col i.work { background: var(--ink); }
.pw-col i.draft { background: var(--accent); }
.pw-col .p-now { left: 0; }
.pw-col .p-now::before { display: none; }
.pw-agenda { margin-top: 16px; }
.pw-agenda div { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; }
.pw-agenda em { width: 46px; font-style: normal; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pw-agenda i { width: 8px; height: 8px; border-radius: 50%; background: var(--track-fill); }
.pw-agenda i.work { background: var(--ink); }
.pw-agenda i.draft { background: var(--accent); }

/* Activity */
.ps-top { display: flex; align-items: center; gap: 22px; margin-top: 18px; padding: 18px; background: var(--card); }
.ps-ring { position: relative; flex: none; width: 116px; height: 116px; }
.ps-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-ring circle { fill: none; stroke-width: 12; }
.ps-ring b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 600 28px/1 var(--rounded); }
.ps-ring b small { display: block; margin-top: 4px; font: 500 11px var(--ui); color: var(--ink-2); }
.ps-levels { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ps-levels div { font-size: 13px; color: var(--ink-2); }
.ps-levels div span { display: flex; justify-content: space-between; }
.ps-levels div b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-levels i { display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: var(--track); position: relative; overflow: hidden; }
.ps-levels i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--c); }
.ps-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ps-tiles div { padding: 14px 16px; background: var(--card); }
.ps-tiles span { display: block; font-size: 13px; color: var(--ink-2); }
.ps-tiles b { display: block; margin-top: 4px; font: 600 24px/1.1 var(--rounded); font-variant-numeric: tabular-nums; }
.ps-tiles b small { font: 500 13px var(--ui); color: var(--ink-2); margin-left: 3px; }

/* What's left */

/* Closing and footer */
.closing { padding: 40px 0 144px; text-align: center; }
.closing .pill { margin-top: 36px; }
.closing .fine { margin-top: 16px; }
.foot { border-top: 1px solid var(--sep); padding: 44px 0 64px; font-size: 14px; }
.foot-grid { display: grid; gap: 32px 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot-brand p { margin: 14px 0 0; color: var(--ink-3); font-size: 13px; }
.foot .brand { font-size: 18px; }
.foot .brand .glyph { width: 26px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.foot-col a, .foot-col button { padding: 0; border: 0; background: none; font-size: 14px; color: var(--ink-2); text-decoration: none; cursor: pointer; transition: color .2s; }
.foot-col a:hover, .foot-col button:hover { color: var(--ink); }
.foot-col button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

/* Headline entrances (site.js): with motion on, big headlines stay hidden until an overlay of their own glyphs
   has played them in; the selector list matches HEADLINES in site.js. Small text just fades with its block. */
.tx :is(.display, .title, .card h3):not(.tx-done), .tx-run { visibility: hidden; }
.tx-layer { position: absolute; left: 0; top: 0; visibility: visible; pointer-events: none; }
.tx-g { position: absolute; white-space: pre; transform-origin: 50% 85%; }

/* Appearance: the new colours spread from where you clicked (a view transition); browsers without view
   transitions cross-fade the colours instead. Language changes cross-fade and replay the text on screen. */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; }
html.vt-theme *, html.vt-theme *::before, html.vt-theme *::after { transition: none !important; }
html.vt-lang::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
html.vt-lang::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; } }
html.theming *, html.theming *::before, html.theming *::after { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), fill .4s var(--ease), stroke .4s var(--ease), box-shadow .4s var(--ease) !important; }

/* Reveal on scroll: rise 10px and fade, once. */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .34s var(--ease), transform .34s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transform: none; transition: opacity .15s; }
  .mark-eye, .tr-grid i, .tr-label.shimmer, .adj-sit.invite::after { animation: none !important; }
  .adj *, .adj::before, .wk-blk, .rm, .rm * { transition-duration: .15s !important; }
}