@font-face {
  font-family: 'Inter';
  src: url('/assets/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0d1016;
  --surface: #13171e;
  --surface-raised: #191e26;
  --text: #edf0f4;
  --muted: #939aa6;
  --line: #292e37;
  --accent: #5ac1fe;
  --on-accent: #0d1922;
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
a:hover { color: var(--accent); }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
button { color: inherit; }
::selection { background: #5ac1fe40; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: clamp(52px, 5.8vw, 82px); font-weight: 520; line-height: 1.04; letter-spacing: -.065em; }
h1 em, h2 em { font-style: normal; color: var(--muted); }
h2 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.16; letter-spacing: -.05em; font-weight: 500; }
h3 { font-size: 19px; line-height: 1.4; font-weight: 520; letter-spacing: -.03em; }
code, pre, kbd { font-family: var(--mono); }
.wrap { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: var(--accent); color: var(--on-accent); z-index: 20; }
.skip-link:focus { top: 16px; }
.site-header { min-height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 570; letter-spacing: -.035em; white-space: nowrap; }
.site-header nav { display: flex; align-items: center; gap: 32px; font-size: 12px; }
.site-header nav > a { padding-block: 10px; }
.site-header nav > a:not(.nav-download) { color: var(--muted); }
.site-header nav > a:hover { color: var(--accent); }
.nav-download { display: flex; gap: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 14px !important; }
.hero { padding-top: 72px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 550; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow-line { width: 20px; height: 1px; background: var(--accent); }
.hero-copy h1 { margin-top: 24px; }
.hero-description { max-width: 460px; margin-top: 24px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 44px; border-radius: var(--radius-md); padding: 10px 18px; font-weight: 600; font-size: 12px; transition: background .16s, transform .16s; }
.button.primary { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; }
.button.primary:hover { background: color-mix(in srgb, var(--accent), white 16%); transform: translateY(-1px); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; }
.release-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; margin-top: 14px; }
.release-note > span { opacity: .6; }
.native-heading { display: flex; justify-content: space-between; gap: 64px; align-items: flex-end; }
.hero-native .hero-copy { max-width: 760px; }
.hero-native h1 { font-size: clamp(52px, 5.3vw, 74px); }
.hero-native h1 em { color: var(--accent); }
.hero-aside { width: 238px; flex: 0 0 238px; padding-bottom: 7px; }
.mini-file { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; font-family: var(--mono); font-size: 11px; transform: rotate(-3deg); }
.mini-file > span:first-child { font-size: 25px; color: var(--muted); }
.mini-file small { display: block; font: 9px/1.8 var(--body); color: var(--muted); }
.file-check { margin-left: auto; color: var(--accent); }
.hero-aside > p { margin-top: 27px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.preview-jump { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 11px; }
.preview-jump span { font-size: 23px; color: var(--accent); }
.hero-product { margin-top: 48px; }

/* The preview uses the app's Ayu palette independently of the page concept. */
.demo-container { min-width: 0; text-align: left; font-family: 'Inter', sans-serif; letter-spacing: normal; }
.demo-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; margin-bottom: 12px; }
.demo-caption > span { display: inline-flex; gap: 8px; align-items: center; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
.theme-picker { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.theme-picker button { border: 0; background: transparent; padding: 2px 10px; border-radius: var(--radius-sm); font-size: 10px; color: var(--muted); }
.theme-picker button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); }
.app-window { --app-bg: #0d1016; --app-top: #16191f; --app-sidebar: #101319; --app-line: #292a2c; --app-text: #bebcb8; --app-muted: #92959b; --app-hover: #202730; --app-blue: #5ac1fe; --app-green: #aad47b; --app-amber: #e6b673; --app-key: #a3c9e0; --app-number: #d2a6e4; background: var(--app-bg); border: 1px solid #363b44; border-radius: var(--radius-lg); overflow: hidden; color: var(--app-text); box-shadow: 0 24px 70px #0003, 0 2px 4px #0002; font-size: 11px; }
.app-window.light { --app-bg: #fcfcfc; --app-top: #ececed; --app-sidebar: #f5f5f5; --app-line: #d7d9dd; --app-text: #454b52; --app-muted: #676d76; --app-hover: #e8edf2; --app-blue: #1578ad; --app-green: #47720b; --app-amber: #8b5400; --app-key: #235b7d; --app-number: #8952a1; }
.window-title { height: 35px; background: var(--app-top); border-bottom: 1px solid var(--app-line); display: flex; align-items: center; justify-content: center; position: relative; font-size: 10px; }
.traffic-lights { position: absolute; left: 14px; display: flex; gap: 6px; }
.traffic-lights i { width: 8px; height: 8px; border-radius: 50%; background: #ff6058; }
.traffic-lights i:nth-child(2) { background: #ffbd2e; }
.traffic-lights i:nth-child(3) { background: #28c840; }
.window-symbol { position: absolute; right: 14px; font-size: 16px; color: var(--app-muted); }
.app-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 466px; }
.app-sidebar { position: relative; padding: 15px 10px 48px; background: var(--app-sidebar); border-right: 1px solid var(--app-line); }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; font-size: 11px; font-weight: 550; }
.sidebar-heading span { font-size: 18px; color: var(--app-muted); }
.search-display { display: flex; align-items: center; gap: 7px; margin: 14px 3px 20px; padding: 5px 7px; border: 1px solid var(--app-line); border-radius: var(--radius-sm); color: var(--app-muted); font-size: 9px; }
.search-display > span { font-size: 16px; line-height: 1; }
.search-display kbd { margin-left: auto; font-size: 8px; }
.collection-name, .folder-name { padding: 7px 5px; }
.collection-name { font-weight: 500; }
.folder-name { padding-left: 15px; color: var(--app-muted); font-size: 10px; }
.request-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 30px; text-align: left; border: 0; background: transparent; color: var(--app-text); border-radius: var(--radius-sm); font-size: 10px; }
.request-item:hover, .request-item.selected { background: var(--app-hover); }
.method { font: 600 9px/1.5 var(--mono); }
.method.get { color: var(--app-green, #a8d78b); }
.method.post { color: var(--app-amber, #e6b673); }
.request-item .method { width: 29px; flex: 0 0 29px; }
.sidebar-bottom { position: absolute; bottom: 13px; left: 16px; right: 16px; display: flex; align-items: center; gap: 7px; color: var(--app-muted); font-size: 9px; }
.local-dot { display: inline-block; width: 5px; height: 5px; background: var(--app-green, #a8d78b); border-radius: 50%; }
.sidebar-bottom .local-dot { margin-left: auto; }
.app-main { min-width: 0; }
.mobile-samples { display: none; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--app-line); font-size: 9px; }
.mobile-samples > span { color: var(--app-muted); }
.mobile-samples button { border: 0; background: transparent; color: var(--app-muted); padding: 5px 7px; border-radius: var(--radius-sm); font-size: 9px; }
.mobile-samples button.selected { background: var(--app-hover); color: var(--app-text); }
.app-tabs { height: 35px; display: flex; align-items: stretch; background: var(--app-top); border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 10px; }
.active-app-tab, .inactive-app-tab { display: flex; align-items: center; gap: 9px; padding: 0 16px; border-right: 1px solid var(--app-line); }
.active-app-tab { background: var(--app-bg); color: var(--app-text); margin-bottom: -1px; }
.active-app-tab > span:last-child { margin-left: 20px; color: var(--app-muted); }
.tab-add { align-self: center; padding: 0 13px; font-size: 17px; }
.request-panel { padding: 15px 18px 18px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--app-muted); font-size: 9px; white-space: nowrap; }
.breadcrumbs strong { font-weight: 500; color: var(--app-text); }
.protocol { border: 1px solid var(--app-line); border-radius: var(--radius-sm); padding: 3px 7px; font-size: 8px; }
.url-row { display: flex; align-items: stretch; gap: 8px; margin-top: 13px; }
.url-field { display: flex; flex: 1; min-width: 0; gap: 14px; align-items: center; border: 1px solid var(--app-line); border-radius: var(--radius-md); padding: 8px 12px; }
.url-field > .method { padding-right: 12px; border-right: 1px solid var(--app-line); }
.url-field code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.variable { color: var(--app-amber); }
.send-button { display: flex; align-items: center; justify-content: space-between; gap: 19px; background: var(--app-blue); color: var(--app-bg); border: 0; border-radius: var(--radius-md); padding: 7px 14px; font-size: 10px; font-weight: 600; }
.send-button:hover { filter: brightness(1.1); }
.request-sections { display: flex; gap: 16px; border-bottom: 1px solid var(--app-line); margin-top: 13px; }
.request-sections button { position: relative; color: var(--app-muted); background: transparent; border: 0; padding: 7px 0; font-size: 9px; }
.request-sections button.active { color: var(--app-text); }
.request-sections button.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--app-blue); }
.request-sections button > span { font-size: 8px; margin-left: 3px; color: var(--app-muted); }
.parameters { margin-top: 9px; border: 1px solid var(--app-line); border-radius: var(--radius-sm); min-height: 56px; }
.parameter-head, .parameter-row { display: grid; grid-template-columns: 30px 1fr 1fr; font-size: 9px; align-items: center; min-height: 27px; }
.parameter-head { color: var(--app-muted); background: var(--app-top); border-bottom: 1px solid var(--app-line); }
.parameter-head > *, .parameter-row > * { padding-inline: 10px; }
.parameter-head > :last-child, .parameter-row > :last-child { border-left: 1px solid var(--app-line); }
.checked { color: var(--app-blue); }
.request-body { padding: 7px 10px; margin: 0; font-size: 9px; white-space: pre-wrap; }
.response-panel { border-top: 1px solid var(--app-line); }
.response-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 18px 7px; font-size: 10px; }
.response-status { color: var(--app-green); font: 9px var(--mono); }
.response-status i { color: var(--app-muted); font-style: normal; margin: 0 5px; }
.response-tabs { display: flex; align-items: center; gap: 18px; padding: 2px 18px 7px; color: var(--app-muted); border-bottom: 1px solid var(--app-line); font-size: 9px; }
.response-tabs > .active { color: var(--app-text); }
.response-format { margin-left: auto; font: 8px var(--mono); }
.code-response { padding: 11px 0; overflow: auto; min-height: 183px; }
.code-response pre { margin: 0; font-size: 10px; line-height: 1.65; white-space: pre; }
.code-response b { display: inline-block; width: 39px; margin-right: 13px; text-align: right; color: var(--app-muted); font-size: 9px; font-weight: 400; user-select: none; }
.app-window .key { color: var(--app-key); }
.app-window .string { color: var(--app-green); }
.app-window .number { color: var(--app-number); }
.app-statusbar { display: flex; justify-content: space-between; padding: 5px 13px; color: var(--app-muted); background: var(--app-top); border-top: 1px solid var(--app-line); font-size: 8px; }
.app-statusbar > span { display: inline-flex; align-items: center; gap: 6px; }
.demo-footnote { margin-top: 12px; text-align: center; color: var(--muted); font-size: 9px; }

.principles { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 34px 0 40px; color: var(--muted); font-size: 11px; }
.principles > span { display: flex; gap: 9px; align-items: center; }
.principles i { font-size: 18px; font-style: normal; color: var(--text); }
.workflow-section { padding-top: 100px; }
.section-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 96px; }
.section-intro > .eyebrow { grid-column: 1 / -1; }
.section-intro > p:last-child { color: var(--muted); max-width: 310px; align-self: end; font-size: 14px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.feature { padding: 25px; background: var(--surface); }
.feature + .feature { border-left: 1px solid var(--line); }
.feature-index { font: 9px var(--mono); letter-spacing: .045em; color: var(--muted); }
.feature h3 { margin-top: 26px; }
.feature p { font-size: 12px; line-height: 1.8; color: var(--muted); margin-top: 10px; }
.collection-visual, .shortcuts-visual, .response-visual { height: 147px; margin-top: 26px; font-size: 11px; }
.collection-visual > div { padding: 5px 9px; }
.collection-visual .indent { margin-left: 14px; color: var(--muted); }
.collection-visual .indent-twice { margin-left: 27px; display: flex; align-items: center; gap: 10px; }
.collection-visual .indent-twice:nth-child(3) { background: var(--surface-raised); border-radius: var(--radius-sm); }
.shortcuts-visual { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 13px; color: var(--muted); }
.shortcuts-visual > div { display: flex; gap: 5px; }
.shortcuts-visual kbd { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 24px; font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm); color: var(--text); }
.response-visual { padding-top: 19px; }
.sample-label { font: 8px var(--mono); color: var(--muted); }
.response-visual > div { display: flex; justify-content: space-between; gap: 5px; margin: 16px 0; font-size: 9px; color: var(--muted); }
.response-ok { color: var(--accent); }
.response-visual code { font-size: 10px; }
.response-visual code > span { color: var(--muted); }
.response-visual code em { font-style: normal; color: var(--accent); }
.local-section { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 80px; padding-top: 116px; }
.local-copy h2 { margin-top: 20px; }
.local-copy > p:not(.eyebrow) { color: var(--muted); margin-top: 22px; font-size: 13px; max-width: 350px; }
.local-copy > a { margin-top: 25px; }
.local-details { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 36px; color: var(--muted); font-size: 10px; }
.file-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.file-title, .file-footer { display: flex; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 10px; }
.file-title > span:last-child { color: var(--muted); font: 9px var(--mono); }
.file-card pre { margin: 0; padding: 26px 24px; overflow: auto; font-size: 10px; line-height: 2; }
.file-card .comment { color: var(--muted); }
.file-card .key { color: var(--text); }
.file-card .string { color: var(--accent); }
.file-card .number { color: var(--muted); }
.file-footer { border-top: 1px solid var(--line); border-bottom: 0; justify-content: flex-start; gap: 9px; color: var(--muted); font: 9px var(--mono); }
.faq-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; margin-top: 116px; padding-top: 72px; border-top: 1px solid var(--line); }
.faq-section h2 { margin-top: 20px; font-size: 35px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; padding: 22px 0; font-size: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); font-size: 12px; margin: -3px 30px 23px 0; }
.faq-list details p a { text-decoration: underline; text-underline-offset: 3px; }
.download-section { text-align: center; padding-block: 112px 96px; }
.download-section img { margin: 0 auto 24px; }
.download-section .eyebrow { justify-content: center; }
.download-section h2 { margin-top: 18px; font-size: 48px; }
.download-section > p:not(.eyebrow, .release-note) { color: var(--muted); margin-top: 20px; font-size: 13px; }
.download-section > .button { margin-top: 28px; }
.download-section .release-note { justify-content: center; margin-top: 17px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-block: 25px; color: var(--muted); font-size: 10px; }
.site-footer .brand { font-size: 12px; color: var(--text); }
.site-footer > div { display: flex; gap: 24px; }

/* Ten compositions; shared product UI and factual content. */
.theme-field-notes { --bg: #f2f0e9; --surface: #eae7de; --surface-raised: #e0ddd2; --text: #303832; --muted: #6b7069; --line: #d1d3c7; --accent: #3e604d; --on-accent: #fff; color-scheme: light; --display: Georgia, 'Times New Roman', serif; }
.theme-field-notes h1 { font-weight: 400; letter-spacing: -.06em; font-size: 78px; line-height: 1.08; }
.theme-field-notes h1 em { font-style: italic; color: var(--accent); }
.hero-editorial { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0 80px; }
.editorial-note { display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--line); padding: 6px 0 0 52px; }
.note-number { font: 9px var(--mono); color: var(--muted); }
.editorial-note img { width: 104px; margin-top: 30px; }
.editorial-note p { font: 26px/1.4 Georgia, serif; margin-top: 23px; }
.hand-rule { width: 58px; height: 1px; margin-top: 25px; background: var(--accent); }
.hero-editorial > .hero-product { grid-column: 1 / -1; margin-top: 64px; }
.theme-field-notes .feature-grid { border-inline: 0; border-radius: 0; }
.theme-field-notes .feature { background: transparent; }
.theme-field-notes .method.get, .theme-paper-trail .method.get, .theme-focus .method.get, .theme-signal .method.get { color: var(--app-green, #47720b); }
.theme-field-notes .method.post, .theme-paper-trail .method.post, .theme-focus .method.post, .theme-signal .method.post { color: var(--app-amber, #8b5400); }

.theme-workbench { --bg: #101216; --surface: #181b21; --surface-raised: #252b34; --accent: #89b4fa; }
.hero-workbench { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; padding-top: 64px; }
.hero-workbench h1 { font-size: 67px; }
.hero-workbench h1 em { color: var(--accent); }
.hero-workbench .hero-product { align-self: center; margin-top: 0; }
.hero-workbench .hero-description { font-size: 13px; }
.hero-workbench .hero-actions { gap: 16px; }
.hero-workbench .app-layout { grid-template-columns: 155px minmax(0, 1fr); }
.hero-workbench .search-display kbd { display: none; }
.hero-workbench .request-item { padding-left: 14px; gap: 5px; }
.hero-workbench .breadcrumbs { gap: 5px; font-size: 8px; }
.workbench-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 18px 0; border-block: 1px solid var(--line); font: 10px var(--mono); color: var(--muted); }
.theme-workbench .principles { border-bottom: 0; }
.theme-workbench .feature-grid { gap: 16px; border: 0; border-radius: 0; }
.theme-workbench .feature { border: 1px solid var(--line); border-radius: var(--radius-md); }

.theme-blueprint { --bg: #0c2035; --surface: #102840; --surface-raised: #173b55; --text: #e0f0fa; --muted: #96b5c9; --line: #345067; --accent: #80d7f5; --body: var(--mono); --display: var(--mono); }
.hero-blueprint { position: relative; padding: 52px 40px 0; border-inline: 1px solid var(--line); background-image: linear-gradient(#80d7f507 1px, transparent 1px), linear-gradient(90deg, #80d7f507 1px, transparent 1px); background-size: 28px 28px; }
.blueprint-coordinate { position: absolute; right: 16px; top: 16px; color: var(--muted); font-size: 8px; }
.hero-blueprint h1 { font-size: 64px; letter-spacing: -.07em; }
.hero-blueprint h1 em { color: var(--accent); }
.hero-blueprint .hero-description { max-width: 520px; font-size: 13px; }
.blueprint-label { display: flex; justify-content: space-between; padding-top: 36px; margin-top: 36px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 9px; }
.hero-blueprint .hero-product { margin-top: 24px; }
.theme-blueprint .feature-grid, .theme-blueprint .file-card, .theme-blueprint .button { border-radius: 0; }

.theme-signal { --bg: #eceee8; --surface: #e3e6dc; --surface-raised: #d9dfd0; --text: #171f1c; --muted: #626b60; --line: #c5cbbf; --accent: #283e21; --on-accent: #f3f6ec; color-scheme: light; }
.hero-signal { display: grid; grid-template-columns: 1fr 180px; }
.hero-signal h1 { font-size: 105px; font-weight: 680; line-height: .95; letter-spacing: -.085em; }
.hero-signal h1 em { color: var(--text); }
.hero-signal .hero-description { max-width: 500px; }
.signal-label { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 6px 0 10px; text-align: right; font-size: 12px; line-height: 1.15; letter-spacing: .02em; }
.hero-signal > .hero-product { grid-column: 1 / -1; margin-top: 50px; border-top: 3px solid var(--text); padding-top: 25px; }
.theme-signal .feature-grid { border: 0; border-radius: 0; }
.theme-signal .feature { background: transparent; padding-left: 0; padding-right: 32px; }
.theme-signal .feature + .feature { padding-left: 32px; }

.theme-night-flight { --bg: #151614; --surface: #1d201b; --surface-raised: #303128; --text: #e9e8dc; --muted: #9c9e8e; --line: #34382d; --accent: #d8c387; --on-accent: #25251c; }
.hero-flight { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 40px; }
.hero-flight h1 { font-size: 80px; }
.hero-flight h1 em { color: var(--accent); }
.flight-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 350px; }
.flight-art img { position: relative; z-index: 1; width: 208px; transform: rotate(-10deg); }
.flight-art > span { position: absolute; bottom: 8px; color: var(--muted); font: 8px var(--mono); letter-spacing: .15em; }
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; width: 310px; height: 310px; }
.orbit-two { width: 400px; height: 400px; border-style: dashed; opacity: .55; }
.hero-flight > .hero-product { grid-column: 1 / -1; margin-top: 60px; }
.theme-night-flight .app-window { box-shadow: 0 0 110px #d8c38708, 0 24px 70px #0003; }

.theme-paper-trail { --bg: #f7f6f2; --surface: #efeee8; --surface-raised: #e3e5dc; --text: #2b342f; --muted: #69726c; --line: #d6dbd2; --accent: #47644f; --on-accent: #fff; color-scheme: light; }
.hero-paper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding-block: 100px 80px; }
.hero-paper h1 { font-size: 64px; }
.hero-paper h1 em { color: var(--accent); }
.hero-paper .hero-description { max-width: 380px; font-size: 14px; }
.paper-art { transform: rotate(2deg); min-width: 0; }
.paper-folder { border: 1px solid var(--line); background: #e5e8df; padding: 14px 16px; border-radius: 8px 8px 0 0; margin-inline: 16px; font: 11px var(--mono); display: flex; gap: 9px; }
.file-git { margin-left: auto; font: 9px var(--body); color: var(--muted); }
.paper-art .file-card { background: #fffefa; box-shadow: 8px 12px 0 #e8e9e1; }
.paper-art .file-card pre { padding: 26px 18px; font-size: 10px; }
.paper-caption { text-align: center; color: var(--muted); font-size: 10px; margin-top: 28px; }
.paper-product { max-width: 960px; }

.theme-focus { --bg: #f5f6f8; --surface: #eceef2; --surface-raised: #e1e4eb; --text: #262b33; --muted: #727782; --line: #d9dde4; --accent: #333e50; --on-accent: #fff; color-scheme: light; }
.hero-focus { text-align: center; padding-top: 56px; }
.focus-icon { margin-inline: auto; width: 68px; }
.hero-focus .eyebrow { justify-content: center; margin-top: 24px; }
.hero-focus .eyebrow-line { display: none; }
.hero-focus h1 { font-size: 76px; }
.hero-focus .hero-description { margin-inline: auto; }
.hero-focus .hero-actions, .hero-focus .release-note { justify-content: center; }
.hero-focus > .hero-product { max-width: 940px; margin: 55px auto 0; }
.theme-focus .feature-grid { border: 0; gap: 28px; }
.theme-focus .feature { background: transparent; border: 0; padding-inline: 0; }

.theme-terminal { --bg: #0b1410; --surface: #101e16; --surface-raised: #1b2e21; --text: #d0e4d1; --muted: #8da792; --line: #2a4030; --accent: #a4d9a1; --on-accent: #0b2010; --display: var(--mono); --body: var(--mono); --radius-md: 3px; --radius-lg: 4px; }
.hero-terminal { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 55px; padding-block: 76px 30px; }
.hero-terminal h1 { font-size: 54px; line-height: 1.2; letter-spacing: -.055em; }
.hero-terminal h1 em { color: var(--accent); }
.hero-terminal .eyebrow { display: none; }
.hero-terminal .hero-description { font-size: 12px; }
.hero-terminal .hero-product { margin-top: 0; }
.terminal-prompt { color: var(--muted); font-size: 10px; }
.terminal-prompt > span { color: var(--accent); }
.terminal-log { border-left: 1px solid var(--line); margin-top: 30px; padding-left: 16px; color: var(--muted); font-size: 9px; line-height: 2.2; }
.terminal-log span { color: var(--accent); }
.hero-terminal .app-sidebar { display: none; }
.hero-terminal .mobile-samples { display: flex; }
.hero-terminal .app-layout { grid-template-columns: minmax(0, 1fr); }
.hero-terminal .hero-actions { gap: 16px; }
.theme-terminal .principles { font-size: 9px; }

.theme-current { --bg: #101820; --surface: #17232e; --surface-raised: #253543; --text: #eef4f7; --muted: #9aaebb; --line: #2c404f; --accent: #75ccf5; }
.theme-current .site-header { border: 0; }
.hero-current { background: #83d3f7; padding-top: 0; position: relative; }
.current-inner { padding-top: 64px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; color: #0e3047; }
.hero-current .hero-copy { --muted: #365b71; --accent: #103851; --on-accent: #eff9ff; }
.hero-current h1 { font-size: 88px; }
.hero-current h1 em { color: #103851; }
.current-art { align-self: center; text-align: center; }
.current-art > span { font-size: 125px; letter-spacing: -.09em; line-height: 1; font-weight: 600; }
.current-art > span > span { font-size: 80px; vertical-align: top; }
.current-art p { font: 9px var(--mono); letter-spacing: .2em; margin-top: 20px; }
.hero-current > .hero-product { position: relative; padding-bottom: 8px; background: linear-gradient(transparent 42%, var(--bg) 42%); }
.hero-current::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 355px; background: var(--bg); z-index: 0; }
.hero-current .hero-product { z-index: 1; }
.hero-current .demo-caption { color: #26465b; }
.hero-current .theme-picker { border-color: #47778e; }
.hero-current .theme-picker button { color: #26465b; }
.hero-current .theme-picker button[aria-pressed="true"] { background: #103851; color: #eff9ff; }

/* Review gallery is separate from the public landing page. */
.review-bar { background: var(--surface-raised); border-bottom: 1px solid var(--line); font: 10px var(--mono); }
.review-bar > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 10px; }
.review-bar a { text-decoration: underline; text-underline-offset: 3px; }
.gallery-intro { padding-block: 76px 48px; }
.gallery-intro h1 { margin-top: 20px; font-size: 64px; }
.gallery-intro > p:last-child { max-width: 630px; margin-top: 24px; color: var(--muted); font-size: 15px; }
.gallery-pick { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 28px; border-radius: 8px; background: var(--surface); margin-bottom: 40px; }
.gallery-pick h2 { font-size: 26px; margin: 8px 0; }
.gallery-pick p:last-child { max-width: 730px; font-size: 12px; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 70px; }
.variant-card { min-width: 0; }
.variant-preview { display: block; aspect-ratio: 1280 / 800; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); transition: border-color .2s, transform .2s; }
.variant-preview:hover { border-color: var(--accent); transform: translateY(-3px); }
.variant-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.variant-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; }
.variant-card-heading h2 { font-size: 20px; letter-spacing: -.04em; }
.variant-card-heading h2 > span { font: 10px var(--mono); color: var(--muted); margin-right: 8px; }
.variant-card-heading > span { font: 10px var(--mono); color: var(--accent); }
.variant-card > p { color: var(--muted); font-size: 12px; margin-top: 7px; }
.variant-card details { font-size: 11px; margin-top: 12px; color: var(--muted); }
.variant-card summary { cursor: pointer; color: var(--text); }
.variant-card details p { margin-top: 9px; }
.comparison-section { padding: 40px 0 80px; border-top: 1px solid var(--line); }
.comparison-section > p { color: var(--muted); max-width: 650px; margin: 20px 0 28px; font-size: 12px; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.comparison-table th, .comparison-table td { border-bottom: 1px solid var(--line); padding: 16px 18px 16px 0; vertical-align: top; }
.comparison-table th { color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; }
.comparison-table td:last-child { color: var(--muted); font-size: 11px; width: 68%; }

@media (min-width: 1450px) {
  .wrap { width: min(1200px, calc(100% - 120px)); }
  .hero-native h1 { font-size: 80px; }
  .hero-native .hero-copy { max-width: 850px; }
}

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 64px); }
  .hero-native h1 { font-size: 57px; }
  .hero-aside { width: 190px; flex-basis: 190px; }
  .native-heading { gap: 32px; }
  .mini-file { padding: 10px; gap: 8px; font-size: 10px; }
  .mini-file small { font-size: 8px; }
  .hero-workbench { grid-template-columns: 230px minmax(0, 1fr); gap: 25px; }
  .hero-workbench h1 { font-size: 56px; }
  .hero-workbench .app-sidebar { display: none; }
  .hero-workbench .mobile-samples { display: flex; }
  .hero-workbench .app-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-terminal { gap: 28px; }
  .hero-terminal h1 { font-size: 43px; }
  .hero-paper { gap: 36px; }
  .hero-paper h1 { font-size: 51px; }
  .hero-flight h1 { font-size: 65px; }
  .orbit-two { width: 320px; height: 320px; }
  .orbit-one { width: 250px; height: 250px; }
  .flight-art img { width: 170px; }
  .feature { padding: 22px; }
  .local-section, .faq-section { gap: 48px; }
  .current-inner { gap: 30px; }
  .hero-current h1 { font-size: 70px; }
  .current-art > span { font-size: 100px; }
  .current-art > span > span { font-size: 60px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { min-height: 76px; }
  .brand { font-size: 14px; gap: 8px; }
  .brand img { width: 30px; }
  .site-header nav { gap: 18px; }
  .site-header nav > a:first-child { display: none; }
  .site-header nav > a { font-size: 10px; }
  .nav-download { gap: 10px; }
  .hero { padding-top: 48px; }
  .hero-native h1 { font-size: clamp(44px, 8.5vw, 62px); }
  .hero-native h1 br:first-of-type { display: block; }
  .native-heading { display: block; }
  .hero-aside { display: none; }
  .hero-description { font-size: 14px; max-width: 440px; }
  .hero-product { margin-top: 36px; }
  .app-layout { grid-template-columns: 155px minmax(0, 1fr); }
  .app-sidebar { padding-inline: 6px; }
  .search-display kbd { display: none; }
  .request-item { padding-left: 13px; gap: 7px; }
  .request-panel { padding: 12px; }
  .breadcrumbs { font-size: 8px; gap: 5px; }
  .principles { display: grid; grid-template-columns: 1fr 1fr; justify-items: start; gap: 14px; font-size: 10px; padding-block: 28px; }
  .workflow-section { padding-top: 65px; }
  .section-intro { display: block; }
  .section-intro h2 { margin-top: 20px; }
  .section-intro > p:last-child { margin-top: 20px; max-width: 380px; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .feature { padding: 25px; }
  .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }
  .collection-visual, .shortcuts-visual, .response-visual { max-width: 300px; height: 132px; margin-top: 20px; }
  .feature h3 { margin-top: 20px; }
  .feature p { max-width: 360px; }
  .local-section { grid-template-columns: 1fr; padding-top: 65px; gap: 30px; }
  .local-copy > p:not(.eyebrow) { max-width: 440px; }
  .local-details { margin-top: 25px; }
  .faq-section { grid-template-columns: 1fr; margin-top: 65px; padding-top: 50px; gap: 30px; }
  .download-section { padding-block: 75px 65px; }
  .download-section h2 { font-size: 41px; }
  .site-footer { flex-wrap: wrap; gap: 18px; }
  .site-footer > span { display: none; }
  .hero-editorial { grid-template-columns: 1fr; }
  .theme-field-notes h1 { font-size: 58px; }
  .editorial-note { display: none; }
  .hero-editorial > .hero-product { margin-top: 36px; }
  .hero-workbench { grid-template-columns: 1fr; gap: 36px; }
  .hero-workbench h1 { font-size: 64px; }
  .hero-workbench .hero-description { max-width: 350px; }
  .hero-workbench .app-sidebar { display: block; }
  .hero-workbench .app-layout { grid-template-columns: 155px minmax(0, 1fr); }
  .workbench-meta { gap: 15px; font-size: 8px; }
  .hero-blueprint { padding-inline: 16px; }
  .hero-blueprint h1 { font-size: 47px; }
  .blueprint-label { font-size: 7px; gap: 12px; }
  .hero-signal { grid-template-columns: 1fr; }
  .hero-signal h1 { font-size: clamp(58px, 10vw, 82px); }
  .signal-label { display: none; }
  .theme-signal .feature + .feature { padding-left: 0; }
  .hero-flight { grid-template-columns: 1fr; }
  .hero-flight h1 { font-size: 68px; }
  .flight-art { display: none; }
  .hero-flight > .hero-product { margin-top: 36px; }
  .hero-paper { grid-template-columns: 1fr; padding-block: 50px; gap: 40px; }
  .hero-paper h1 { font-size: 59px; }
  .paper-art { transform: none; }
  .hero-focus h1 { font-size: 60px; }
  .hero-terminal { grid-template-columns: 1fr; gap: 32px; padding-bottom: 0; }
  .hero-terminal h1 { font-size: 52px; }
  .hero-terminal .hero-description { max-width: 440px; }
  .terminal-log { font-size: 10px; }
  .hero-current { padding-top: 0; }
  .current-inner { display: block; padding-top: 44px; }
  .hero-current h1 { font-size: 66px; }
  .current-art { display: none; }
  .review-bar > div { font-size: 8px; gap: 12px; }
  .gallery-intro { padding-top: 50px; }
  .gallery-intro h1 { font-size: 48px; }
  .gallery-pick { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .gallery-pick .button { justify-self: start; }
  .gallery-grid { grid-template-columns: 1fr; }
  .comparison-table th, .comparison-table td { padding: 14px 10px 14px 0; font-size: 10px; }
  .comparison-table td:last-child { width: 56%; font-size: 10px; }
}

@media (max-width: 480px) {
  .site-header nav > a:nth-child(2) { display: none; }
  .hero-actions { gap: 17px; }
  .button { padding-inline: 14px; font-size: 11px; }
  .hero-actions .text-link { font-size: 10px; gap: 6px; }
  .eyebrow { font-size: 8px; }
  .demo-caption { font-size: 8px; }
  .theme-picker button { font-size: 8px; padding: 3px 7px; }
  .app-sidebar, .hero-workbench .app-sidebar { display: none; }
  .mobile-samples { display: flex; }
  .app-layout, .hero-workbench .app-layout { grid-template-columns: minmax(0, 1fr); min-height: 443px; }
  .window-title { height: 31px; }
  .app-tabs { height: 33px; font-size: 9px; }
  .active-app-tab, .inactive-app-tab { padding-inline: 10px; gap: 6px; }
  .inactive-app-tab { font-size: 8px; }
  .active-app-tab > span:last-child { margin-left: 8px; }
  .breadcrumbs { font-size: 7px; gap: 4px; }
  .protocol { padding: 3px 5px; font-size: 7px; }
  .url-field { padding: 7px 8px; gap: 8px; }
  .url-field > .method { padding-right: 8px; font-size: 8px; }
  .url-field code { font-size: 9px; }
  .send-button { padding-inline: 10px; gap: 8px; }
  .response-heading { padding-inline: 12px; }
  .response-status { font-size: 8px; }
  .code-response pre { font-size: 9px; line-height: 1.8; }
  .code-response b { width: 25px; margin-right: 9px; }
  .demo-footnote { font-size: 8px; }
  .principles { column-gap: 8px; font-size: 8px; }
  .principles > span { gap: 6px; }
  .principles i { font-size: 15px; }
  .file-card pre, .paper-art .file-card pre { font-size: 9px; padding: 20px 15px; }
  .file-title, .file-footer { padding-inline: 15px; }
  .hero-paper h1 { font-size: 50px; }
  .theme-field-notes h1 { font-size: 48px; }
  .hero-blueprint h1 { font-size: 38px; }
  .hero-blueprint .hero-actions { gap: 12px; }
  .hero-blueprint .button { font-size: 9px; padding-inline: 10px; }
  .hero-blueprint .text-link { font-size: 8px; }
  .hero-terminal h1 { font-size: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}