:root {
  --paper: #f9f9f7;
  --ink: #171714;
  --clay: #d97757;
  --font-level-1: "Bespoke Slab", "Noto Serif SC", "Iowan Old Style", Palatino, "Songti SC", serif;
  --font-level-2: "Bespoke Slab", "Noto Serif SC", "Iowan Old Style", Palatino, "Songti SC", serif;
  --font-level-3: "Zodiak", "Zhuque Fangsong", "Iowan Old Style", Palatino, "Songti SC", serif;
  --font-level-4: "Alpino", "LXGW Neo XiHei", ui-sans-serif, system-ui, "PingFang SC", sans-serif;
  --font-level-5: "Alpino", "LXGW Neo XiHei", ui-sans-serif, system-ui, "PingFang SC", sans-serif;
  --font-level-6: "Cabinet Grotesk", "LXGW WenKai", ui-sans-serif, system-ui, "PingFang SC", sans-serif;
  --font-level-7: "Cabinet Grotesk", "LXGW WenKai", ui-sans-serif, system-ui, "PingFang SC", sans-serif;
  --font-level-8: "Bespoke Slab", "Noto Sans SC", "Iowan Old Style", Palatino, "PingFang SC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171714;
    --ink: #f3efe4;
    --clay: #df8060;
  }
}

.type-4xl, .type-4xl.font-display { font-family: var(--font-level-1); }
.type-3xl, .type-3xl.font-display { font-family: var(--font-level-2); }
.type-2xl, .type-2xl.font-display { font-family: var(--font-level-3); }
.type-xl, .type-xl.font-display { font-family: var(--font-level-4); }
.type-lg, .type-lg.font-display { font-family: var(--font-level-5); }
.type-base { font-family: var(--font-level-6); }
.type-sm { font-family: var(--font-level-7); }
.type-xs, .mono { font-family: var(--font-level-8); }

:root {
  color-scheme: light dark;
  --background: #f9f9f7;
  --foreground: #171714;
  --muted-foreground: #66635b;
  --border: color-mix(in oklab, #3d4238 18%, transparent);
  --card: color-mix(in oklab, #141614 4%, transparent);
  --accent: color-mix(in oklab, #141614 7%, transparent);
  --cta: #d97757;
  --cta-foreground: #f9f9f7;
  --hero-start-bg: #171714;
  --hero-start-fg: #f9f9f7;
  --ink-button: #171714;
  --ink-button-fg: #f9f9f7;
  --banner: #3b3f38;
  --banner-fg: #f3f4e8;
  --status: #10b981;
  --yolk: #d97757;
  --font-display: var(--font-level-1);
  --font-sans: var(--font-level-6);
  --font-mono: var(--font-level-8);
  --radius: 0.5rem;
  --lens-grid-max-width: 2560px;
  --lens-margin-ratio: 4.098vw;
  --lens-cell-padding: clamp(0.75rem, 1.5vw, 1.5rem);
  --lens-grid-template: 1fr;
  --lens-grid-margin: 1rem;
  --type-xs: clamp(0.69rem, 0.65rem + 0.11vi, 0.94rem);
  --type-sm: clamp(0.83rem, 0.77rem + 0.15vi, 1.13rem);
  --type-base: clamp(1rem, 0.91rem + 0.22vi, 1.5rem);
  --type-lg: clamp(1.2rem, 1.04rem + 0.4vi, 2.1rem);
  --type-xl: clamp(1.44rem, 1.14rem + 0.75vi, 3rem);
  --type-2xl: clamp(1.73rem, 1.18rem + 1.36vi, 4.5rem);
  --type-3xl: clamp(2.07rem, 1.07rem + 2.5vi, 7rem);
  --type-4xl: clamp(2.49rem, 0.69rem + 4.5vi, 11rem);
}

@media (width >= 768px) {
  :root {
    --lens-grid-template: 1fr 1fr 1fr;
    --lens-grid-margin: 3%;
  }
}

@media (width >= 1024px) {
  :root {
    --lens-grid-template: 560fr 560fr 373fr 373fr 373fr;
    --lens-grid-margin: min(var(--lens-margin-ratio), calc(var(--lens-grid-max-width) * 0.04098));
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #171714;
    --foreground: #f3efe4;
    --muted-foreground: #aaa395;
    --border: color-mix(in oklab, #f6fff5 14%, transparent);
    --card: color-mix(in oklab, #f6fff5 5%, transparent);
    --accent: color-mix(in oklab, #f6fff5 8%, transparent);
    --cta: #df8060;
    --cta-foreground: #171714;
    --hero-start-bg: #f3efe4;
    --hero-start-fg: #171714;
    --ink-button: #f3efe4;
    --ink-button-fg: #171714;
    --banner: #05080a;
    --banner-fg: #f3f4e8;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--background); color: var(--foreground); }
html { scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  line-height: 1.414;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.type-xs { font-size: var(--type-xs); line-height: 1.414; }
.type-sm { font-size: var(--type-sm); line-height: 1.414; }
.type-base { font-size: var(--type-base); line-height: 1.414; }
.type-lg { font-size: var(--type-lg); line-height: 1.25; }
.type-xl { font-size: var(--type-xl); line-height: 1.2; }
.type-2xl { font-size: var(--type-2xl); line-height: 1.12; }
.type-3xl { font-size: var(--type-3xl); line-height: 1.05; }
.type-4xl { font-size: var(--type-4xl); line-height: 0.9; }
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.04em; }
.font-display.italic, em.display-italic, .italic-display {
  font-style: italic;
  font-weight: 400;
}
.mono { font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.muted { color: var(--muted-foreground); }

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: var(--lens-grid-template);
  padding-inline: var(--lens-grid-margin);
}
.bg-grid i {
  display: block;
  border-left: 0.5px dashed color-mix(in oklab, var(--foreground) 32%, transparent);
}
.bg-grid i:last-child {
  border-right: 0.5px dashed color-mix(in oklab, var(--foreground) 32%, transparent);
}
@media (width <= 767px) {
  .bg-grid i:nth-child(n + 3) { display: none; }
  .bg-grid i:nth-child(2) { border-right: 0.5px dashed color-mix(in oklab, var(--foreground) 32%, transparent); }
}
@media (width >= 768px) and (width <= 1023px) {
  .bg-grid i:nth-child(n + 5) { display: none; }
  .bg-grid i:nth-child(4) { border-right: 0.5px dashed color-mix(in oklab, var(--foreground) 32%, transparent); }
}

.site {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: var(--lens-grid-template);
  padding-inline: var(--lens-grid-margin);
  gap: 0;
}
.grid-section {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(1.33rem, 2.67vw, 2.33rem);
}
.grid-section--dense { padding-block: clamp(0.5rem, 3vw, 1.5rem); }
.cell-pad { padding-inline: var(--lens-cell-padding); }
.hairline { border-color: var(--border); }

.tick {
  position: relative;
}
.tick::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--lens-cell-padding));
  top: 0.15em;
  width: 1px;
  height: 1.05em;
  background: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
  transform: translateX(-50%);
}

.site-header {
  align-items: center;
}
.header-brand { grid-column: 1; }
.header-nav { grid-column: 2 / -1; }
.hero-title-cell { grid-column: 1 / -1; }
.hero-copy { grid-column: 1 / -1; }
.hero-actions { grid-column: 1 / -1; }
@media (width >= 768px) {
  .hero-title-cell { grid-column: 2 / 4; }
  .hero-copy { grid-column: 2 / 4; }
  .hero-actions { grid-column: 2 / 3; }
}
@media (width >= 1024px) {
  .hero-title-cell { grid-column: 2 / 4; }
  .hero-copy { grid-column: 2 / 4; }
  .hero-actions { grid-column: 4 / 5; }
}
.anywhere-copy { grid-column: 1 / -1; }
.anywhere-videos { grid-column: 1 / -1; }
.anywhere-install { grid-column: 1 / -1; }
@media (width >= 1024px) {
  .anywhere-copy { grid-column: 1; }
  .anywhere-videos { grid-column: 2 / 6; }
  .anywhere-install { grid-column: 3 / 6; }
}
.sub-title { grid-column: 1 / -1; }
.sub-dek { grid-column: 1 / -1; }
@media (width >= 1024px) {
  .sub-title { grid-column: 2 / 4; }
  .sub-dek { grid-column: 4 / 6; }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--foreground);
}
.brand svg, .brand img { height: 28px; width: auto; display: block; }
@media (width >= 768px) {
  .brand svg, .brand img { height: 32px; }
}
.site-nav {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  font-family: var(--font-sans);
}
@media (width >= 768px) {
  .site-nav { display: flex; }
}
.nav-link {
  padding: 0.28rem 0.62rem;
  border-radius: 0.28rem;
  font-size: 0.92rem;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
}
.nav-link:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); color: var(--foreground); }
.nav-signin {
  border: 1px solid var(--border);
  padding: 0.28rem 0.7rem;
  border-radius: 0.28rem;
  font-size: 0.92rem;
}
.nav-start {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--cta);
  color: var(--cta-foreground);
  padding: 0.28rem 0.75rem;
  border-radius: 0.32rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-start:hover { filter: brightness(1.05); }

.menu-btn {
  position: fixed;
  top: 0.7rem;
  right: 0.85rem;
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  opacity: 0.65;
}
@media (width >= 768px) { .menu-btn { display: none; } }
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--background) 94%, transparent);
  backdrop-filter: blur(10px);
  padding: 5rem 1.4rem 2rem;
}
.mobile-menu.open { display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  padding: 0.4rem 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 0.45rem;
  border: 1px solid transparent;
  font-family: var(--font-sans);
}
.btn-hero {
  background: var(--hero-start-bg);
  color: var(--hero-start-fg);
  padding: 0.42rem 0.9rem;
  font-size: 1.12rem;
  border-radius: 0.5rem;
  width: fit-content;
}
.btn-ghost {
  border: 1px solid var(--border);
  padding: 0.22rem 0.55rem;
  font-size: 0.88rem;
  border-radius: 0.28rem;
  width: fit-content;
}
.btn-ink {
  background: var(--ink-button);
  color: var(--ink-button-fg);
  width: 100%;
  padding: 0.72rem 1rem;
  border-radius: 0.28rem;
  font-size: 0.95rem;
}
.btn-line {
  width: 100%;
  border: 1px solid var(--border);
  padding: 0.68rem 1rem;
  border-radius: 0.28rem;
}

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-bg {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0.22;
  mask-image: linear-gradient(#000 70%, transparent);
  z-index: 0;
}
.hero > *:not(.hero-bg) { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  .hero-bg { mix-blend-mode: normal; opacity: 0.28; }
}
.hero-title { letter-spacing: -0.06em; line-height: 0.9; margin: 0; }
.hero-title .italic-display { padding-left: 0.08em; }
.hero-copy { display: flex; flex-direction: column; gap: 1rem; }
.hero-actions { display: flex; flex-direction: column; gap: 0.45rem; }
.hero-copy p { margin: 0; }
.link-soft {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklab, var(--muted-foreground) 28%, transparent);
}
.link-soft:hover { color: var(--foreground); }

.sub-banner {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  min-height: 6.2rem;
  align-items: center;
  color: var(--banner-fg);
}
.sub-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #2a2d27 0%, #2a2d27cc 50%, #2a2d27 100%),
    url("https://static.ampcode.com/news/subscriptions-at-last.jpeg") center/cover;
}
.sub-banner:hover::before { filter: brightness(1.15); }
.sub-banner > * { position: relative; z-index: 1; color: #fff; }
.sub-banner p { color: rgba(255,255,255,0.8); margin: 0; }
.sub-banner h2 { margin: 0; font-weight: 400; }

.anywhere-kicker { margin: 0 0 0.6rem; color: var(--muted-foreground); }
.anywhere h2 { margin: 0 0 0.75rem; font-weight: 400; }
.anywhere p { margin: 0; max-width: 28rem; }

.agent-videos {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  width: 100%;
  height: min(260px, 32vh);
}
.agent-videos video, .agent-videos img {
  border-radius: clamp(6px, 3vw - 42px, 12px);
  background: #1a1c18;
  height: 100%;
  object-fit: cover;
}
.agent-videos-desktop { width: calc(77.765% - 0.78rem); }
.agent-videos-mobile { width: calc(22.235% - 0.22rem); }
@media (width <= 700px) {
  .agent-videos { height: auto; flex-direction: column; }
  .agent-videos-desktop, .agent-videos-mobile { width: 100%; height: 180px; }
}

.install-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.install-tabs { display: flex; gap: 0.25rem; }
.install-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  padding: 0.22rem 0.55rem;
  border-radius: 0.28rem;
  font-size: 0.88rem;
}
.install-tab[aria-selected="true"] {
  background: color-mix(in oklab, var(--foreground) 6%, var(--background));
  color: var(--foreground);
  border-color: color-mix(in oklab, var(--foreground) 45%, transparent);
}
.install-row {
  display: flex;
  align-items: center;
  background: var(--foreground);
  color: var(--background);
  border-radius: 0.6rem;
  overflow: hidden;
}
.install-row:hover { filter: brightness(1.08); }
.install-cmd {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--background);
  text-align: left;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
}
.copy-btn {
  border: 0;
  background: transparent;
  color: color-mix(in oklab, var(--background) 70%, transparent);
  padding: 0.4rem 0.7rem;
}
.copy-btn:hover { color: var(--background); }

.features { border-top: 1px solid var(--border); }
.feature-grid {
  display: grid;
  gap: 2rem;
}
@media (width >= 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (width >= 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-grid h2 { margin: 0 0 0.7rem; font-weight: 400; letter-spacing: -0.04em; }
.feature-grid p { margin: 0; }

.news { border-top: 1px solid var(--border); padding-block: 0; }
.news-kicker {
  padding-block: var(--lens-cell-padding);
  grid-column: 1;
}
@media (width >= 1024px) {
  .news-kicker { grid-row: 1 / span 3; }
}
.news-kicker h2 { margin: 0.4rem 0 0; font-weight: 400; }
.news-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--border);
}
@media (width >= 768px) {
  .news-row { grid-column: 2 / -1; }
}
@media (width >= 1024px) {
  .news-row { grid-column: 2 / 6; }
}
.news-row.photo { color: #fff; background: #2a2d27; }
.news-row.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--news-img, #222) center/cover;
}
.news-row.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.7;
}
.news-row.photo:hover::after { opacity: 0.5; }
.news-row > * { position: relative; z-index: 1; }
.news-row time {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.news-row.photo time { color: rgba(255,255,255,0.7); }
.news-row h3 { margin: 0 0 0.35rem; font-weight: 400; }
.news-row p { margin: 0; color: var(--muted-foreground); }
.news-row.photo p { color: rgba(255,255,255,0.82); }
.news-row:not(.photo):hover { background: color-mix(in oklab, var(--foreground) 4%, transparent); }
@media (width >= 768px) {
  .news-row time { text-align: right; padding-top: 0.35rem; }
}
.news-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
@media (width >= 1024px) { .news-more { grid-column: 2 / 6; } }
.news-more:hover { background: color-mix(in oklab, var(--foreground) 4%, transparent); color: var(--foreground); }

.quotes { border-top: 1px solid var(--border); }
.quote-grid {
  display: grid;
  gap: calc(var(--lens-cell-padding) * 2);
}
@media (width >= 640px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
@media (width >= 1280px) { .quote-grid { grid-template-columns: repeat(5, 1fr); } }
blockquote {
  margin: 0 0 0.5rem;
  font-style: italic;
  font-weight: 300;
  text-indent: -0.3em;
}
cite { font-style: italic; color: var(--muted-foreground); font-size: var(--type-sm); }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.footer-brand svg, .footer-brand img { height: 42px; width: auto; display: block; }
@media (width >= 768px) { .footer-brand svg, .footer-brand img { height: 56px; } }
.legal { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.legal a { font-size: 0.92rem; color: var(--muted-foreground); }
.legal a:hover { color: var(--foreground); }
.status { display: inline-flex; align-items: center; gap: 0.45rem; }
.status i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 99px;
  background: var(--status);
}
.footer-cols {
  display: grid;
  gap: 2rem;
}
@media (width >= 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (width >= 1024px) {
  .footer-cols { display: flex; justify-content: space-between; gap: 0; }
}
.footer-cols h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-stretch: 110%;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-cols a { color: var(--muted-foreground); }
.footer-cols a:hover { color: var(--foreground); }

.page-hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.page-hero h1 { margin: 0; letter-spacing: -0.05em; }
.page-hero p { margin: 1rem auto 0; max-width: 46rem; }

.span-all { grid-column: 1 / -1; }
@media (width >= 1024px) {
  .col-1 { grid-column: 1; }
  .col-2 { grid-column: 2; }
  .col-2-3 { grid-column: 2 / 4; }
  .col-2-5 { grid-column: 2 / 6; }
  .col-4 { grid-column: 4; }
  .col-4-5 { grid-column: 4 / 6; }
  .col-3-5 { grid-column: 3 / 6; }
}

.price-wrap {
  display: grid;
  gap: 1.2rem;
  grid-column: 1 / -1;
}
@media (width >= 1024px) {
  .price-wrap { grid-template-columns: 1.45fr 0.9fr; }
}
.panel {
  background: color-mix(in oklab, var(--foreground) 4.5%, var(--background));
  border-radius: 1.1rem;
  padding: 1rem;
}
.panel-inner {
  display: grid;
  gap: 0.8rem;
}
@media (width >= 720px) {
  .panel-split { grid-template-columns: 1fr 1fr; }
}
.plan {
  background: color-mix(in oklab, var(--background) 70%, white);
  border-radius: 0.85rem;
  padding: 1.2rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
}
.plan .btn { margin-top: auto; }
@media (prefers-color-scheme: dark) {
  .plan { background: color-mix(in oklab, var(--foreground) 4%, #0b1414); }
}
.plan h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.04em; }
.plan .money { color: #2f7ec8; font-weight: 500; }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.plan li { font-size: 0.95rem; }

.modes-grid {
  display: grid;
  gap: 0.85rem;
  grid-column: 1 / -1;
}
@media (width >= 900px) {
  .modes-grid { grid-template-columns: repeat(5, 1fr); }
}
.mode-card {
  background: color-mix(in oklab, var(--foreground) 4%, var(--background));
  border-radius: 1rem;
  padding: 1.2rem 1rem 0.9rem;
  min-height: 14.5rem;
  display: flex;
  flex-direction: column;
}
.mode-card h3 { margin: 0 0 0.55rem; display: flex; align-items: center; gap: 0.4rem; }
.dot { width: 0.45rem; height: 0.45rem; border-radius: 99px; display: inline-block; }
.mode-meta {
  margin-top: auto;
  background: color-mix(in oklab, var(--foreground) 5%, var(--background));
  border-radius: 0.55rem;
  padding: 0.55rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.seg {
  display: inline-flex;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--border);
}
.seg button {
  border: 0;
  background: transparent;
  padding: 0.32rem 0.7rem;
  font-size: 0.85rem;
}
.seg button[aria-selected="true"] {
  background: var(--foreground);
  color: var(--background);
}
.usage-bars {
  display: flex;
  gap: 0.55rem;
  align-items: flex-end;
  justify-content: center;
  min-height: 8rem;
}
.bar {
  width: 2rem;
  height: 7.2rem;
  border-radius: 0.18rem;
  background:
    linear-gradient(#d8b15a 0 12%, #6ea8d8 12% 28%, #7fd3c2 28% 78%, #8ad07a 78% 100%);
}

.chronicle-layout {
  display: grid;
  gap: 1.6rem;
  grid-column: 1 / -1;
  padding-bottom: 3rem;
}
@media (width >= 1024px) {
  .chronicle-layout { grid-template-columns: 0.85fr 1.7fr 0.75fr; }
}
.side-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 0.8rem;
}
.note-card, .feat-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.15rem;
  color: #fff;
  display: block;
}
.note-card { max-height: 16rem; }
.feat-card { max-height: 22rem; margin-bottom: 0.6rem; }
.note-card img, .feat-card img { width: 100%; height: 16rem; object-fit: cover; display: block; }
.feat-card img { height: 22rem; }
.card-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0.7rem;
  background: #1b1f1aee;
  padding: 0.85rem 0.9rem;
}
.card-copy h3 { margin: 0.15rem 0; font-weight: 400; }
.feed-item {
  display: grid;
  gap: 0.6rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}
@media (width >= 720px) {
  .feed-item { grid-template-columns: 8.5rem 1fr; }
}
.feed-item h3 { margin: 0 0 0.3rem; font-weight: 400; }
.guides-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.guides-row img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #222; }
.socials { display: flex; gap: 0.8rem; margin-top: 0.4rem; }
.capsule { padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.capsule h4 { margin: 0 0 0.2rem; font-weight: 500; }

.doc {
  display: grid;
  gap: 2rem;
  grid-column: 1 / -1;
}
@media (width >= 900px) {
  .doc { grid-template-columns: 16rem 1fr; }
}
.doc nav a {
  display: block;
  color: var(--muted-foreground);
  padding: 0.22rem 0;
  font-size: 0.92rem;
}
.doc nav a:hover { color: var(--foreground); }
.doc article { max-width: 46rem; }
.doc article h1 { margin-top: 0; }
.doc article h2 { margin-top: 2rem; }
.doc article p { color: color-mix(in oklab, var(--foreground) 88%, transparent); }

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 3rem 1rem 2rem;
  background: var(--paper);
}
@media (prefers-color-scheme: dark) {
  .auth-shell { background: #171714; }
}
.auth-card {
  width: min(440px, 100%);
  background: #f7f7f5;
  color: #171917;
  border-radius: 0.85rem;
  padding: 1.4rem 1.3rem 1.2rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark) {
  .auth-card { background: #1c201c; color: #f3f6f1; }
}
.auth-card h1 { text-align: center; font-size: 1.55rem; margin: 0 0 1.2rem; letter-spacing: -0.03em; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
label { display: block; font-size: 0.86rem; font-weight: 600; margin: 0.7rem 0 0.3rem; }
input {
  width: 100%;
  border: 1px solid #d5d5d0;
  border-radius: 0.45rem;
  padding: 0.58rem 0.7rem;
  background: #fff;
  color: inherit;
}
@media (prefers-color-scheme: dark) {
  input { background: #121412; border-color: #3a3f3a; }
}
.or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
  color: #888;
  font-size: 0.75rem;
  margin: 0.9rem 0;
}
.or::before, .or::after { content: ""; height: 1px; background: #e1e1dc; }
.auth-note { text-align: center; color: #777; font-size: 0.9rem; margin: 0.9rem 0 0; }
.auth-legal { text-align: center; color: #8a8a86; font-size: 0.86rem; margin-top: 3rem; }
.notice {
  display: none;
  margin-top: 0.8rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.4rem;
  background: #eef6e6;
  color: #24331c;
  font-size: 0.88rem;
}
.notice.show { display: block; }

.orbs-hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(#f9f9f7aa, #f9f9f700 30%, #171714 100%),
    url("../img/background_dark.jpg") center/cover;
}
@media (prefers-color-scheme: dark) {
  .orbs-hero {
    background:
      linear-gradient(#171714cc, #17171400 40%, #171714 100%),
      url("../img/background_dark.jpg") center/cover;
  }
}
.orbs-hero-grid { align-items: center; }
.orbs-copy h1 { margin: 0 0 1rem; }
.orbs-copy .lead {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-weight: 500;
}
.video-frame {
  background: #1a1c1a;
  border-radius: 0.55rem;
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  color: #888;
}

.steps { display: grid; gap: 1.4rem; }
@media (width >= 800px) { .steps { grid-template-columns: 1fr 1fr; } }
.step h3 { margin: 0 0 0.4rem; }
.num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }

.prose-list { display: flex; flex-direction: column; gap: 1.4rem; }
.prose-list article h3 { margin: 0 0 0.35rem; }

.toast {
  position: fixed;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  background: var(--foreground);
  color: var(--background);
  padding: 0.4rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }