:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --postbox-red: #e3342f;
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%;
  font-synthesis: none;
  background: light-dark(#fafafa, #000);
  color: light-dark(#202124, #f5f5f5);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible {
  outline: 2px solid light-dark(#0066cc, #79b4ff);
  outline-offset: 6px;
}
main {
  flex: 1;
  width: min(100%, 42rem);
  margin-inline: auto;
  padding: 2.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.icon-frame {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
}
.app-icon {
  position: absolute;
  width: 118%;
  height: 118%;
  max-width: none;
  left: -9%;
  top: -9%;
  object-fit: contain;
}
h1 {
  margin: .5rem 0 .875rem;
  font-size: 3.25rem;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.055em;
}
.description {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: light-dark(#616168, #a1a1a6);
  text-wrap: pretty;
}
.download {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 2.25rem;
  margin-top: 2rem;
  padding: .4375rem .875rem;
  border: 1px solid transparent;
  border-radius: .625rem;
  background: light-dark(#202124, #f5f5f5);
  color: light-dark(#fafafa, #111);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: transform 120ms var(--ease-out);
}
.download::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: light-dark(#fff, #000);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.download svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.download-arrow { transition: transform 160ms ease; }
.download:focus-visible::after { opacity: .08; transition: none; }
.download:focus-visible .download-arrow { transform: none; transition: none; }
.download:active { transform: scale(.97); }
.download:focus-visible { transition: none; transform: none; }
.release-note {
  margin: 1rem 0 0;
  color: light-dark(#66666d, #929297);
  font-size: .75rem;
  line-height: 1.8;
}
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 1.5rem 1.5rem;
  color: light-dark(#66666d, #929297);
  font-size: .8125rem;
  line-height: 1.5;
}
footer p { margin: 0; }
.text-button {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .75rem 0;
  min-height: 2.75rem;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  color: light-dark(#53535a, #b0b0b5);
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: light-dark(#b9b9bf, #48484a);
  text-underline-offset: .25em;
}
.text-button span { font-size: 1rem; }
dialog {
  width: min(26rem, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  overflow: auto;
  padding: 2rem;
  border: 1px solid light-dark(#d4d4d9, #303033);
  border-radius: 1rem;
  background: light-dark(#fff, #151515);
  color: light-dark(#202124, #f5f5f5);
}
dialog::backdrop { background: rgb(0 0 0 / .8); }
dialog h2 {
  padding-right: 1.5rem;
  margin: 0 0 1rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}
dialog p { margin: 0 0 1rem; color: light-dark(#53535a, #b0b0b5); font-size: 1rem; line-height: 1.65; }
dialog .download { width: 100%; margin-top: .5rem; }
dialog .text-button { font-size: .9375rem; }
.close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: light-dark(#616168, #a1a1a6);
  font-size: 1.5rem;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .download:hover::after { opacity: .08; }
  .download:hover:not(:focus-visible) .download-arrow { transform: translateY(2px); }
  .text-button:hover, .close:hover { color: light-dark(#111, #fff); }
}
@media (max-width: 420px) {
  main { padding: 3rem 1.5rem 2rem; }
  .description { font-size: 1rem; }
  footer { flex-direction: column; gap: 0; }
  dialog { padding: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .download { transition: none; }
  .download:active { transform: none; }
  .download .download-arrow { transition: none; }
  .download:hover:not(:focus-visible) .download-arrow { transform: none; }
}
@media (prefers-contrast: more) {
  .description, .release-note, footer, .text-button, dialog p { color: light-dark(#303036, #ddd); }
  dialog { border-color: light-dark(#666, #aaa); }
}


/* PickerView.swift: 280pt panel, 20pt icons, 32pt rows, 6pt insets. */
.demo { width: min(100%, 33rem); margin: 1.75rem 0 0; }
.demo-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  padding: .5rem .25rem;
  color: light-dark(#005fca, #8cbcff);
  font-size: .875rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: transform 120ms var(--ease-out), color 160ms ease;
}
.demo-link [aria-hidden] { font-size: .75rem; text-decoration: none; }
.demo-link.is-pressed { transform: scale(.97); }
.demo-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(17.5rem, calc(100vw - 2rem));
  max-height: calc(100svh - 1rem);
  /* Let the rounded surface shadow extend beyond the transparent popover. */
  overflow: visible;
  flex-direction: column;
  color: light-dark(#202124, #f5f5f5);
  opacity: 0;
  transform: scale(.95);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
    display 200ms allow-discrete, overlay 200ms allow-discrete;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  transform-origin: top center;
}
.demo-surface {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: .375rem;
  border-radius: .75rem;
  overflow: hidden;
  background: light-dark(#fffffff0, #242424e6);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  box-shadow: inset 0 0 0 1px light-dark(#00000026, #ffffff24), inset 0 1px 0 light-dark(#ffffffcc, #ffffff12), 0 12px 32px light-dark(#0002, #0008);
  text-align: left;
  transform-origin: top center;
}

/* Overlay feedback leaves no reserved scrollbar gutter in either layout. */
.demo-rows { display: grid; gap: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.demo-rows::-webkit-scrollbar { display: none; }
.demo-scroll-indicator { position: absolute; top: 0; right: 2px; width: 3px; border-radius: 3px; background: light-dark(#00000040, #ffffff40); opacity: 0; pointer-events: none; }
.demo-rows.is-scrolling + .demo-scroll-indicator { opacity: 1; }
.demo-picker[data-layout="horizontal"] .demo-scroll-indicator { top: auto; right: auto; bottom: 2px; left: 0; height: 3px; }
.demo-rows { max-height: 20rem; }
.demo-picker[data-mode="compact"] .demo-rows { max-height: 8rem; }
.demo-picker[data-mode="custom"] { width: min(22.5rem, calc(100vw - 2rem)); }
.demo-picker[data-mode="custom"] .demo-rows { max-height: 12rem; }
.demo-browser {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  height: 2rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: light-dark(#202124, #f5f5f5);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.25rem;
  text-align: left;
  cursor: default;
}
/* Native app artwork includes its own shape, transparent margin and shadow. */
.demo-app-icon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.demo-app-icon img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.demo-browser.is-selected { background: light-dark(#0000000e, #ffffff1f); }
.demo-browser kbd { width: .75rem; margin-left: auto; color: light-dark(#62626a, #ffffff66); font: 400 .6875rem/1.25rem -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; text-align: center; }
.demo-browser:focus-visible { outline-offset: -2px; }
.demo-domain, .demo-search {
  flex: 0 0 auto;
  align-self: center;
  max-width: calc(100% - 1rem);
  margin: 0 0 .5rem;
  padding: .375rem .75rem;
  border: 1px solid light-dark(#00000020, #ffffff24);
  border-radius: 2rem;
  background: light-dark(#fffffff0, #292929ed);
  color: light-dark(#53535a, #c5c5cc);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  font-size: .6875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-domain { display: block; cursor: pointer; }
.demo-domain span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-domain:focus-visible { outline-offset: -3px; }
.demo-search { margin: .5rem 0 0; }
.demo-search[hidden] { display: none; }
.demo figcaption:empty { min-height: 0; margin-top: 0; }
.demo figcaption { min-height: 2.4em; margin-top: .875rem; color: light-dark(#66666d, #929297); font-size: .75rem; line-height: 1.6; }
footer { flex-direction: column; gap: .125rem; }
.footer-meta, .footer-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-links { font-size: .75rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: light-dark(#616168, #a1a1a6); text-decoration: none; }
.footer-placeholder { display: inline-flex; align-items: center; gap: .375rem; color: light-dark(#67676e, #8e8e93); }
.soon { color: light-dark(#67676e, #8e8e93); padding: .0625rem .25rem; border: 1px solid light-dark(#d4d4d9, #303033); border-radius: .25rem; font-size: .625rem; }
@media (hover: hover) and (pointer: fine) {
  .demo-link:hover { color: light-dark(#00418e, #c2dcff); }
  .footer-links a:hover { color: light-dark(#111, #fff); text-decoration: underline; text-underline-offset: .25em; }
}
@media (max-width: 420px) {
  .footer-meta { flex-direction: column; gap: 0; }
  .footer-links { gap: 0 1rem; }
}
@media (prefers-contrast: more) {
  .demo-connector, .demo figcaption, .footer-links a, .footer-placeholder { color: light-dark(#303036, #ddd); }
  .demo-surface { box-shadow: inset 0 0 0 1px light-dark(#666, #aaa); }
  .demo-heading, .demo-domain, .demo-browser kbd { color: light-dark(#303036, #ddd); }
  .demo-browser.is-selected { background: light-dark(#00000026, #ffffff33); }
}
/* Legal pages share the quiet typography and keep normal document navigation. */
.legal { display: block; width: min(100%, 43rem); text-align: left; padding: 3rem 1.5rem 4rem; }
.legal .back { display: inline-flex; min-height: 2.75rem; align-items: center; color: light-dark(#53535a, #b0b0b5); text-decoration: none; font-size: .875rem; }
.legal h1 { margin: 2rem 0 .75rem; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.15; letter-spacing: -.035em; }
.legal .updated { color: light-dark(#66666d, #929297); font-size: .8125rem; }
.legal .draft { border-left: 2px solid var(--postbox-red); padding: .25rem 0 .25rem 1rem; margin: 1.75rem 0 2rem; color: light-dark(#505057, #c0c0c5); font-size: .875rem; }
.legal h2 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.legal p, .legal li { color: light-dark(#53535a, #b0b0b5); font-size: 1rem; line-height: 1.75; }
.legal a { color: light-dark(#33333b, #d4d4d8); text-underline-offset: .2em; }
.legal ul { padding-left: 1.25rem; }
.legal code { font-size: .875em; overflow-wrap: anywhere; }

.about .credits { padding-left: 1.25rem; }
.about .credits li { margin-bottom: 1rem; padding-left: .25rem; }
.about .codex-thanks { margin-top: 2rem; color: light-dark(#66666d, #929297); font-size: .875rem; }
.footer-links a[aria-current="page"] { color: light-dark(#202124, #f5f5f5); }

/* Native top-layer popover, animated from the link. Layout stays still. */
.demo-picker:popover-open { display: flex; opacity: 1; transform: scale(1); }
@starting-style {
  .demo-picker:popover-open { opacity: 0; transform: scale(.95); }
}
.demo-picker.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .demo-link { transition: color 160ms ease; }
  .demo-link.is-pressed { transform: none; }
  .demo-picker, .demo-picker:popover-open { transform: none; }
  @starting-style { .demo-picker:popover-open { transform: none; } }
}

.download:disabled { cursor: default; }
.download:disabled:active { transform: none; }
.download .soon { color: light-dark(#ddd, #555); border-color: light-dark(#777, #bbb); }

.demo-link { position: relative; }
.demo-cursor { position: absolute; left: calc(55% - 5px); top: calc(55% - 5px); width: 28px; height: 40px; max-width: none; pointer-events: none; user-select: none; z-index: 1; }
.demo-cursor[hidden] { display: none; }
.app-icon { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .icon-frame:hover .app-icon { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .app-icon { transition: none; }
  .icon-frame:hover .app-icon { transform: none; }
  .demo-cursor { display: none; }
}

/* About: a quiet, pointer-responsive silhouette behind the content. */
.about-page { isolation: isolate; }
.about-page main, .about-page footer { position: relative; z-index: 1; }
.about { max-width: 39rem; }
.about-ocean { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.about-whale {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 84px;
  height: 84px;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  transform: translate3d(calc(100vw - 120px), calc(100svh - 160px), 0);
}
@media (hover: hover) and (pointer: fine) {
  .about-whale { display: block; }
  .about-whale.is-swimming { opacity: .24; }
}
@media (prefers-reduced-motion: reduce) {
  .about-whale { opacity: .14; }
}
@media (prefers-contrast: more) {
  .about-whale { display: none; }
}

.about-whale-art {
  width: 100%;
  height: 100%;
  background: light-dark(#0066cc, #79b4ff);
  -webkit-mask: url('assets/narwhal-silhouette.png') center / contain no-repeat;
  mask: url('assets/narwhal-silhouette.png') center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-whale-art { animation: narwhal-swim 2400ms var(--ease-in-out) infinite; animation-play-state: paused; }
  .is-swimming .about-whale-art { animation-play-state: running; }
}
@keyframes narwhal-swim {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

/* Installed apps stay visible but unavailable for unrelated links, as in Narly. */
.demo-browser:disabled { color: light-dark(#787880, #ffffff59); cursor: default; }
.demo-browser:disabled .demo-app-icon { opacity: .35; }
.demo-browser:disabled kbd { color: light-dark(#00000026, #ffffff33); }
@media (prefers-contrast: more) {
  .demo-browser:disabled { color: light-dark(#606068, #999); }
  .demo-browser:disabled kbd { color: light-dark(#666, #777); }
}

.demo-heading, .demo-domain { flex-shrink: 0; }
/* Short, readable feature notes keep the demo as the focal point. */
.tagline { margin: 0 0 .5rem; font-size: clamp(1.125rem, 3vw, 1.4rem); font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.features { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; margin: .5rem 0 1rem; padding: 0; list-style: none; text-align: left; font-size: .875rem; line-height: 1.65; color: light-dark(#616168, #a1a1a6); }
.features strong { display: block; margin-bottom: .375rem; color: light-dark(#202124, #f5f5f5); font-weight: 600; }
.features span { display: block; text-wrap: pretty; }
.feature-summary { width: fit-content; max-width: 100%; margin: 1.75rem 0 0; padding-left: 1.125rem; text-align: left; color: light-dark(#616168, #a1a1a6); font-size: .8125rem; line-height: 1.8; }
.feature-summary li::marker { color: light-dark(#9999a1, #66666d); }
.demo-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.demo-controls[hidden] { display: none; }
.layout-picker { display: flex; gap: .125rem; padding: .1875rem; margin: 0; border: 1px solid light-dark(#dedee3, #303033); border-radius: .625rem; background: light-dark(#f0f0f3, #151515); }
.layout-picker legend, .layout-picker input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.layout-picker span { display: flex; align-items: center; justify-content: center; padding: .4375rem .875rem; border-radius: .4375rem; font-size: .75rem; color: light-dark(#616168, #a1a1a6); cursor: pointer; }
.layout-picker input:checked + span { background: light-dark(#fff, #353538); color: light-dark(#202124, #f5f5f5); box-shadow: 0 1px 3px #00000012; }
.layout-picker input:focus-visible + span { outline: 2px solid light-dark(#0066cc, #79b4ff); outline-offset: 1px; }
.demo-help { font-size: .75rem; line-height: 1.75; color: light-dark(#616168, #a1a1a6); }
.demo-name { min-width: 0; }
.demo-browser kbd { width: auto; min-width: 1rem; }
.demo-picker[data-layout="horizontal"] { width: min(var(--horizontal-width, 32.5rem), calc(100vw - 2rem)); }
.demo-picker[data-layout="horizontal"] .demo-surface { flex-shrink: 0; border-radius: 1.125rem; }
.demo-picker[data-layout="horizontal"] .demo-rows { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; min-height: 4.25rem; gap: .25rem; }
.demo-picker[data-layout="horizontal"] .demo-browser { position: relative; flex: 0 0 3rem; width: 3rem; height: 4.25rem; padding: .25rem .125rem 1.25rem; justify-content: center; border-radius: .625rem; }
.demo-picker[data-layout="horizontal"] .demo-app-icon, .demo-picker[data-layout="horizontal"] .demo-app-icon img { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }
.demo-picker[data-layout="horizontal"] .demo-name, .demo-picker[data-layout="horizontal"] kbd { position: absolute; bottom: .125rem; left: 0; width: 100%; margin: 0; text-align: center; font-size: .5625rem; line-height: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-picker[data-layout="horizontal"] .demo-name { display: none; }
.demo-picker[data-layout="horizontal"] .is-selected .demo-name { display: block; }
.demo-picker[data-layout="horizontal"] .is-selected kbd { display: none; }
.demo-picker[data-layout="horizontal"].shows-shortcuts .demo-name { display: none; }
.demo-picker[data-layout="horizontal"].shows-shortcuts .is-selected kbd { display: block; }
@media (prefers-reduced-transparency: reduce) { .demo-surface, .demo-domain, .demo-search { background: light-dark(#fff, #242424); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) {
  .features, .feature-summary, .demo-help, .layout-picker span { color: light-dark(#303036, #ddd); }
  .layout-picker, .demo-domain, .demo-search { border-color: light-dark(#666, #aaa); }
}

/* A quiet footer control; keep a generous target on touch screens. */
.theme-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid light-dark(#dedee3, #303033);
  border-radius: 50%;
  background: transparent;
  color: light-dark(#616168, #a1a1a6);
}
.theme-toggle[hidden], .theme-toggle [hidden] { display: none; }
.theme-toggle span { display: flex; }
.theme-toggle svg { width: .875rem; height: .875rem; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { color: light-dark(#202124, #fff); background: light-dark(#f0f0f3, #151515); }
}
@media (prefers-contrast: more) {
  .theme-toggle { border-color: light-dark(#666, #aaa); color: light-dark(#303036, #ddd); }
}

@media (pointer: coarse) {
  .theme-toggle { width: 2.75rem; height: 2.75rem; border-color: transparent; }
}

/* Compact inset accordion; native details preserves keyboard and no-JS support. */
.getting-started {
  width: min(100%, 23rem);
  margin-top: 1.5rem;
  border: 1px solid light-dark(#e5e5e9, #262629);
  border-radius: .75rem;
  background: light-dark(#f2f2f4, #111113);
  color: light-dark(#616168, #a1a1a6);
  font-size: .8125rem;
  line-height: 1.65;
  text-align: left;
}
.getting-started summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: .75rem 1rem;
  border-radius: .6875rem;
  color: light-dark(#53535a, #b0b0b5);
  font-size: .75rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.getting-started summary::-webkit-details-marker { display: none; }
.getting-started summary svg { flex-shrink: 0; color: light-dark(#76767d, #929297); }
.getting-started[open] .accordion-plus { display: none; }
.getting-started summary:active { background: light-dark(#e9e9ed, #1c1c1f); }
.getting-started summary:focus-visible {
  outline: 2px solid light-dark(#0066cc, #79b4ff);
  outline-offset: 3px;
}
.setup-content { padding: .125rem 1rem 1rem; }
.getting-started ol { padding-left: 1.125rem; margin: .5rem 0 1rem; }
.getting-started li + li { margin-top: .75rem; }
.getting-started li::marker { color: light-dark(#76767d, #606065); }
.getting-started strong { font-weight: 500; color: light-dark(#33333b, #d4d4d8); }
.getting-started p { margin: .75rem 0 0; }
.getting-started .setup-note, .getting-started .preview-note {
  color: light-dark(#66666d, #929297);
  font-size: .75rem;
}
@media (hover: hover) and (pointer: fine) {
  .getting-started summary:hover { background: light-dark(#eaeaee, #1a1a1d); color: light-dark(#202124, #f5f5f5); }
}
@media (prefers-contrast: more) {
  .getting-started { border-color: light-dark(#666, #aaa); }
  .getting-started, .getting-started summary, .getting-started summary svg,
  .getting-started li::marker, .getting-started .setup-note, .getting-started .preview-note {
    color: light-dark(#303036, #ddd);
  }
}

/* Full-width mobile chrome takes over as the hero title reaches the top. */
.mobile-header { display: none; }
@media (max-width: 600px) {
  .mobile-header {
    position: fixed;
    z-index: 20;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(4rem + env(safe-area-inset-top));
    padding: calc(.5rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left));
    background: light-dark(#fafafaed, #18181aed);
    color: light-dark(#202124, #f5f5f5);
    box-shadow: 0 8px 24px #00000012, inset 0 -1px 0 light-dark(#0000000a, #ffffff12);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s 200ms;
  }
  .mobile-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding-inline: .5rem;
    border-radius: .75rem;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -.045em;
    text-decoration: none;
    transition: transform 120ms var(--ease-out);
  }
  .mobile-brand img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
  .mobile-brand:active { transform: scale(.97); }
  @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .mobile-header {
      background: light-dark(#fafafac2, #18181ab8);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      backdrop-filter: blur(20px) saturate(160%);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-header, .mobile-header.is-visible { transform: none; transition: opacity 150ms var(--ease-out), visibility 0s 150ms; }
  .mobile-header.is-visible { transition-delay: 0s; }
  .mobile-brand { transition: none; }
  .mobile-brand:active { transform: none; }
}
.mobile-header[data-keyboard], .mobile-header[data-keyboard] .mobile-brand { transition: none; }
.mobile-header[data-keyboard] .mobile-brand:active { transform: none; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .mobile-header {
    background: light-dark(#fafafa, #202022);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid light-dark(#666, #aaa);
  }
}

/* Secondary demo controls share the picker's glass material. */
.demo-settings, .layout-picker, .customize-button {
  background: light-dark(#ffffffad, #ffffff0d);
  border: 1px solid light-dark(#0000001c, #ffffff24);
  box-shadow: inset 0 1px 0 light-dark(#ffffffeb, #ffffff14), 0 2px 8px #00000008;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
.customize-button { display: inline-flex; align-items: center; justify-content: center; gap: .4375rem; min-height: 2.25rem; padding: .4375rem .75rem; border-radius: 2rem; color: light-dark(#616168, #b8b8c0); font-size: .75rem; transition: transform 120ms var(--ease-out), background-color 120ms ease; }
.customize-button svg { flex-shrink: 0; }
.customize-button:active { transform: scale(.97); }
.customize-button:focus-visible { transition: none; transform: none; }
.customize-button[aria-expanded="true"] { background: light-dark(#ffffffed, #ffffff18); color: light-dark(#202124, #f5f5f5); }
.layout-picker { border-radius: 2rem; }
.layout-picker span { border-radius: 2rem; }
.layout-picker input:checked + span { background: light-dark(#ffffffc9, #ffffff1a); box-shadow: inset 0 1px 0 #ffffff14, 0 1px 4px #00000012; }
.demo-settings { position: fixed; inset: auto; width: min(19rem, calc(100vw - 1.5rem)); max-height: calc(100svh - 1.5rem); margin: 0; padding: .875rem; overflow: auto; overscroll-behavior: contain; border-radius: 1.125rem; background: light-dark(#f8f8faf0, #242426ed); box-shadow: inset 0 1px 0 light-dark(#fff, #ffffff1a), 0 12px 36px #00000026; color: light-dark(#202124, #f5f5f5); text-align: left; opacity: 0; transform: scale(.97); transform-origin: top right; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), display 160ms allow-discrete, overlay 160ms allow-discrete; }
.demo-settings:popover-open { opacity: 1; transform: scale(1); }
@starting-style { .demo-settings:popover-open { opacity: 0; transform: scale(.97); } }
.demo-settings.is-instant { transition: none; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; margin: -.25rem -.25rem .75rem .25rem; }
.settings-heading strong { font-size: .8125rem; font-weight: 600; }
.settings-close { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: light-dark(#00000007, #ffffff0d); color: light-dark(#616168, #b8b8c0); font-size: 1.125rem; line-height: 1; }
.demo-settings fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 1rem; }
.demo-settings legend { padding: 0 .25rem; margin-bottom: .5rem; font-size: .6875rem; color: light-dark(#66666d, #b0b0b8); }
.demo-settings label { position: relative; cursor: pointer; }
.demo-settings input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.demo-settings label span { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.125rem; padding: .375rem .5rem; border: 1px solid transparent; border-radius: .625rem; font-size: .75rem; color: light-dark(#53535a, #b8b8c0); }
.demo-settings label img { flex-shrink: 0; object-fit: contain; }
.demo-settings input:checked + span { border-color: light-dark(#00000012, #ffffff1a); background: light-dark(#ffffffb3, #ffffff15); color: light-dark(#202124, #f5f5f5); box-shadow: inset 0 1px 0 #ffffff12, 0 1px 3px #0000000a; }
.demo-settings input:focus-visible + span { outline: 2px solid light-dark(#0066cc, #79b4ff); outline-offset: 1px; }
.size-options { display: flex; gap: .125rem; }
.size-options label { flex: 1; }
.size-options:disabled { opacity: .45; }
.size-options:disabled label { cursor: default; }
.example-options { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem .25rem; }
.example-options label span { justify-content: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .customize-button:hover, .settings-close:hover { background: light-dark(#fff, #ffffff15); }
  .demo-settings label:hover input:enabled + span { background: light-dark(#ffffff80, #ffffff0d); }
}
@media (pointer: coarse) {
  .layout-picker span, .customize-button, .demo-settings label span, .settings-close { min-height: 2.75rem; }
  /* Match the segmented control's 44px target plus its padding and border. */
  .customize-button { min-height: calc(2.75rem + .375rem + 2px); }
  .settings-close { width: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .customize-button, .demo-settings { transition: none; }
  .customize-button:active, .demo-settings, .demo-settings:popover-open { transform: none; }
  @starting-style { .demo-settings:popover-open { transform: none; } }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .demo-settings, .layout-picker, .customize-button { background: light-dark(#fafafa, #242424); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .demo-settings, .customize-button, .layout-picker { border-color: light-dark(#666, #aaa); }
  .demo-settings legend, .demo-settings label span, .app-visibility summary, .feature-summary, .customize-button { color: light-dark(#303036, #ddd); }
  .demo-settings input:checked + span { border-color: currentColor; }
}

.demo-browser[hidden] { display: none; }
.app-visibility { margin: 0 0 1rem; border-block: 1px solid light-dark(#0000000d, #ffffff12); }
.app-visibility summary { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .25rem; cursor: pointer; list-style: none; color: light-dark(#53535a, #b8b8c0); font-size: .75rem; }
.app-visibility summary::-webkit-details-marker { display: none; }
.app-visibility summary::after { content: '+'; margin-left: .25rem; }
.app-visibility[open] summary::after { content: '−'; }
#app-count { margin-left: auto; font-variant-numeric: tabular-nums; color: light-dark(#777780, #9999a1); }
.demo-settings .app-options { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem .25rem; margin-bottom: .75rem; }
.app-options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-options label span { justify-content: flex-start; font-size: .6875rem; padding-inline: .375rem; gap: .375rem; }
.app-options label span::after { content: ''; flex: 0 0 .75rem; width: .75rem; height: .75rem; margin-left: auto; border: 1px solid light-dark(#00000030, #ffffff40); border-radius: .25rem; line-height: .75rem; text-align: center; font-size: .625rem; }
.app-options input:checked + span::after { content: '✓'; border-color: currentColor; }
.app-options input:disabled + span { opacity: .5; cursor: default; }
.app-visibility summary:focus-visible { outline: 2px solid light-dark(#0066cc, #79b4ff); outline-offset: 2px; border-radius: .5rem; }

/* One optical size, stroke and label gap across the demo and download controls. */
.control-icon { display: block; width: .875rem; height: .875rem; flex: 0 0 .875rem; }
.layout-picker span { gap: .375rem; }
.customize-button { gap: .375rem; }
.download .control-icon { width: .875rem; height: .875rem; }
@media (max-width: 380px) {
  .layout-picker span { padding-inline: .5rem; }
  .customize-button { padding-inline: .5rem; }
}

/* Shared proportions, with hierarchy suited to each control's role. */
.demo-controls { gap: .625rem; }
.layout-picker {
  gap: .125rem;
  padding: .1875rem;
  border: 1px solid light-dark(#0000000d, #ffffff0f);
  border-radius: .6875rem;
  background: light-dark(#ededf0, #151517);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.layout-picker span, .customize-button, .site-header .download {
  gap: .375rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.layout-picker span {
  min-height: 1.75rem;
  padding: .25rem .625rem;
  border: 0;
  border-radius: .4375rem;
  background: transparent;
  color: light-dark(#67676f, #a2a2ab);
  box-shadow: none;
}
.layout-picker input:checked + span {
  background: light-dark(#fff, #36363b);
  color: light-dark(#252528, #f5f5f7);
  box-shadow: 0 1px 3px #00000014, inset 0 0 0 1px light-dark(#00000005, #ffffff0a);
}
.customize-button {
  min-height: 2.25rem;
  padding: .375rem .625rem;
  border: 1px solid light-dark(#00000012, #ffffff1a);
  border-radius: .6875rem;
  background: light-dark(#fafafa, #101012);
  color: light-dark(#62626b, #b4b4bc);
  box-shadow: none;
}
.customize-button[aria-expanded="true"] {
  background: light-dark(#ededf0, #29292e);
  color: light-dark(#252528, #f5f5f7);
}
.site-header .download {
  min-height: 2rem;
  padding: .3125rem .6875rem;
  border: 1px solid light-dark(#00000012, #ffffff1a);
  border-radius: .625rem;
  background: light-dark(#29292e, #e8e8ec);
  color: light-dark(#fafafa, #242428);
  box-shadow: inset 0 1px 0 light-dark(#ffffff0a, #ffffff80), 0 1px 2px #0000000a;
}
@media (hover: hover) and (pointer: fine) {
  .layout-picker label:hover input:not(:checked) + span { color: light-dark(#303036, #dddde3); }
  .customize-button:hover { background: light-dark(#f0f0f3, #1c1c20); }
}
@media (pointer: coarse) {
  .layout-picker span, .site-header .download { min-height: 2.75rem; }
  .customize-button { min-height: calc(2.75rem + .375rem + 2px); }
}
@media (max-width: 420px) and (pointer: coarse) {
  .demo-controls { gap: .375rem; }
  .layout-picker { padding: .125rem; }
  .layout-picker label { position: relative; }
  .layout-picker span {
    min-height: 2rem;
    padding: .3125rem .6875rem;
    font-size: .6875rem;
  }
  .layout-picker span::before {
    content: "";
    position: absolute;
    inset: -.375rem 0;
  }
  .customize-button {
    position: relative;
    min-height: 2.375rem;
    padding: .3125rem .625rem;
    gap: .3125rem;
    font-size: .6875rem;
  }
  .customize-button::before {
    content: "";
    position: absolute;
    inset: -.1875rem;
  }
  .customize-button .control-icon { width: .75rem; height: .75rem; flex-basis: .75rem; }
}
@media (max-width: 380px) {
  .demo-controls { gap: .375rem; }
  .layout-picker span, .customize-button { padding-inline: .4375rem; }
}
@media (prefers-contrast: more) {
  .layout-picker, .customize-button { border-color: light-dark(#666, #aaa); }
  .layout-picker span, .customize-button { color: light-dark(#303036, #ddd); }
  .layout-picker input:checked + span { outline: 1px solid currentColor; outline-offset: -1px; }
}

/* Continuous segmented selection; native radios remain the interaction layer. */
.layout-picker { position: relative; }
.layout-active {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: light-dark(#fff, #36363b);
  transition: clip-path 200ms var(--ease-in-out);
}
.layout-picker .layout-active > span {
  position: absolute;
  box-sizing: border-box;
  color: light-dark(#252528, #f5f5f7);
}
.layout-active.is-instant { transition: none; }
@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) {
  .layout-picker.has-indicator .layout-active { display: block; }
  .layout-picker.has-indicator input:checked + span {
    background: transparent;
    box-shadow: none;
    color: light-dark(#67676f, #a2a2ab);
  }
}