@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/v/https/opendesigner.dev/fonts/hanken-300-700.woff2) format('woff2')}@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/v/https/opendesigner.dev/fonts/sourcecodepro-400.woff2) format('woff2')}@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/v/https/opendesigner.dev/fonts/sourcecodepro-500.woff2) format('woff2')}:root{--surface: #fcfdff;--surface-raised: #ffffff;--surface-sunken: #f2f4f9;--line: #cdd2dc;--line-strong: #808793;--ink: #222428;--ink-muted: #515762;--accent: #2338ff;--accent-text: #1c31ce;--on-accent: #ffffff;--accent-soft: #e3ecff;--highlight: #2338ff;--on-highlight: #ffffff;--focus-ring: #2338ff;--shadow-raised: none;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--space-64: 64px;--space-80: 80px;--radius-detail: 6px;--radius-control: 12px;--radius-container: 16px;--radius-overlay: 24px;--radius-full: 9999px;color-scheme: light;}.theme-cobalt{--surface: #2338ff;--surface-raised: #1e2fe6;--surface-sunken: #1c31ce;--line: #537eff;--line-strong: #d7e3ff;--ink: #ffffff;--ink-muted: #d7e3ff;--accent: #ffffff;--accent-text: #ffffff;--on-accent: #2338ff;--accent-soft: #1e2fe6;--highlight: #ffffff;--on-highlight: #2338ff;--focus-ring: #ffffff;}*,*::before,*::after{box-sizing: border-box;}html{-webkit-text-size-adjust: 100%;scroll-padding-top: 96px;}body{margin: 0;background: var(--surface-raised);color: var(--ink);font: 400 16px/24px "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;font-kerning: normal;letter-spacing: -0.02em;}img{max-width: 100%;height: auto;display: block;}a{color: var(--accent-text);text-underline-offset: 3px;text-decoration-thickness: 1px;}code,pre,.code,.tree code,.mono,.num,.kicker{font-family: "Source Code Pro",ui-monospace,Menlo,Consolas,monospace;}.num{font-variant-numeric: tabular-nums;}.kicker{font-size: 11px;line-height: 16px;letter-spacing: .07em;text-transform: uppercase;color: var(--ink-muted);font-weight: 500;}:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 2px;}.skip{position: absolute;left: -9999px;top: 8px;z-index: 20;background: var(--surface-raised);padding: 8px 16px;border: 1px solid var(--line);}.skip:focus{left: 16px;}svg.arrow{width: 14px;height: 14px;flex: none;}.t-hero{font-size: clamp(34px,4.2vw,56px);line-height: 1.12;font-weight: 400;letter-spacing: -0.03em;margin: 0;max-width: 24ch;text-wrap: balance;}.t-hero strong{font-weight: 600;}.t-h1{font-size: clamp(32px,3.6vw,48px);line-height: 1.12;font-weight: 400;letter-spacing: -0.03em;margin: 0;text-wrap: balance;}.t-h2{font-size: clamp(24px,2.4vw,32px);line-height: 1.2;font-weight: 400;letter-spacing: -0.02em;margin: 0;text-wrap: balance;}.t-h3{font-size: 21px;line-height: 28px;font-weight: 500;letter-spacing: -0.01em;margin: 0 0 20px;}.lede{font-size: 17px;line-height: 27px;color: var(--ink-muted);max-width: 62ch;margin: 20px 0 0;text-wrap: pretty;letter-spacing: -0.026em;}.bar{position: sticky;top: 0;z-index: 10;background: color-mix(in srgb,var(--surface-raised) 92%,transparent);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-bottom: 1px solid var(--line);}/* one shell on every page (owner,2026-10-21: "top nav changes in each and every page";preflight check 44): the header,footer,docs layout,showcase and library all share --shell,so nothing but the content moves between pages. site/check_chrome.py checks it. */ :root{--shell: 1280px;}.bar-in{display: flex;align-items: center;gap: 40px;height: 60px;max-width: var(--shell);margin-inline: auto;padding-inline: 24px;}.brand{color: var(--ink);display: flex;width: 224px;flex: none;}.lockup{height: 22px;width: auto;}.top-nav{display: flex;gap: 24px;flex: 1;}.top-nav a{color: var(--ink);text-decoration: none;font-weight: 500;font-size: 14px;letter-spacing: -0.011em;}.top-nav a:hover{color: var(--accent-text);}.top-nav a[aria-current]{color: var(--ink);text-decoration: underline;text-underline-offset: 6px;}.gh-btn{display: inline-flex;align-items: center;gap: 8px;min-height: 36px;padding: 0 12px;border: 1px solid var(--line);background: var(--surface-raised);color: var(--ink);text-decoration: none;font: 500 12px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;}.gh-btn:hover{border-color: var(--line-strong);}.gh-count:not(:empty){padding-left: 8px;border-left: 1px solid var(--line);color: var(--ink-muted);font-variant-numeric: tabular-nums;}@media (max-width: 720px){.top-nav{gap: 16px;justify-content: flex-end;}.top-nav a:nth-child(n+3):not(.nav-lib){display: none;}.bar-in{gap: 16px;padding-inline: 16px;}.brand{width: auto;}}.layout{display: grid;grid-template-columns: 224px minmax(0,1fr);max-width: var(--shell);margin-inline: auto;}.side{border-right: 1px solid var(--line);}.side-desk{position: sticky;top: 60px;max-height: calc(100vh - 60px);overflow-y: auto;padding: 32px 24px 48px;}.side-mobile{display: none;}.side-group + .side-group{margin-top: 24px;}.side-h{margin: 0 0 8px;}.side ul{list-style: none;margin: 0;padding: 0;display: grid;gap: 2px;}.side a{display: block;padding: 5px 10px;margin-inline: -10px;color: var(--ink);text-decoration: none;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.side a:hover{background: var(--surface-sunken);}.side a[aria-current]{background: var(--accent-soft);color: var(--accent-text);font-weight: 500;}.main{min-width: 0;padding: 40px 40px 96px;}@media (max-width: 1000px){.layout{grid-template-columns: 1fr;}.side{border-right: 0;border-bottom: 1px solid var(--line);}.side-desk{display: none;}.side-mobile{display: block;padding: 0 24px;}.side-mobile summary{cursor: pointer;min-height: 48px;display: flex;align-items: center;font: 500 12px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;}.side-mobile nav{padding: 8px 0 24px;display: grid;grid-template-columns: repeat(auto-fill,minmax(200px,1fr));gap: 24px;}.side-mobile .side-group + .side-group{margin-top: 0;}.main{padding: 32px 24px 80px;}}@media (max-width: 640px){.main{padding: 28px 16px 64px;}.side-mobile{padding: 0 16px;}}.btn{display: inline-flex;align-items: center;justify-content: center;gap: 10px;min-height: 44px;padding: 0 18px;border: 1px solid transparent;font: 500 12px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .07em;text-transform: uppercase;text-decoration: none;cursor: pointer;color: var(--ink);}.btn.primary{background: var(--accent);border-color: var(--accent);color: var(--on-accent);}.btn.primary:hover{background: var(--accent-text);border-color: var(--accent-text);}.btn.secondary{background: var(--accent-soft);}.btn.secondary:hover{background: color-mix(in srgb,var(--accent) 16%,var(--surface-raised));}.btn.ghost{background: var(--surface-sunken);color: var(--ink-muted);}.btn.ghost:hover{color: var(--ink);}.btn.text{color: var(--accent-text);padding-inline: 8px;background: none;}.cta-row{display: flex;flex-wrap: wrap;gap: 12px;align-items: center;margin-top: 32px;}.copy{font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;min-height: 32px;padding: 0 10px;border: 1px solid var(--line);background: var(--surface-raised);color: var(--ink);cursor: pointer;flex: none;}.code{position: relative;margin: 24px 0;}.code pre{margin: 0;padding: 16px 104px 16px 20px;background: var(--surface-sunken);border: 1px solid var(--line);overflow-x: auto;font-size: 13.5px;line-height: 22px;letter-spacing: -0.0085em;}.code .copy{position: absolute;top: 11px;right: 11px;min-height: 32px;}@media (max-width: 640px){.code pre{padding: 16px 92px 16px 16px;}}:not(pre)>code{font-size: 0.9em;background: var(--surface-sunken);border: 1px solid var(--line);padding: 0 5px;overflow-wrap: anywhere;}.more{display: inline-flex;align-items: center;gap: 6px;font-weight: 500;font-size: 15px;color: var(--ink);text-decoration: none;letter-spacing: -0.016em;}.more:hover{color: var(--accent-text);}.more svg,.intro svg,.rows svg{flex: none;}.duo{margin: 0;}.duo-frame{position: relative;background: var(--accent);overflow: hidden;isolation: isolate;}.duo-frame img{width: 100%;height: 100%;object-fit: cover;filter: grayscale(1) contrast(1.12) brightness(1.04);mix-blend-mode: screen;}.duo-glasswall img{filter: grayscale(1) contrast(1.6) brightness(0.82);}.duo figcaption{font-size: 12px;line-height: 16px;color: var(--ink-muted);margin-top: 8px;letter-spacing: 0;}.duo figcaption a{color: var(--ink-muted);}.hero{padding: 16px 0 8px;}.intro{display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0;margin: 0 0 32px;background: var(--surface-sunken);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.intro>span{padding: 8px 14px 8px 0;color: var(--ink-muted);flex: 1 1 220px;}.intro-dot{width: 7px;height: 7px;flex: 0 0 7px !important;margin: 0 12px 0 14px;background: var(--ok);padding: 0 !important;}.intro a{display: inline-flex;align-items: center;gap: 6px;padding: 8px 14px;border-left: 1px solid var(--line);color: var(--ink);text-decoration: none;font-weight: 500;}.intro a:hover{color: var(--accent-text);}.works{margin: 24px 0 0;font-size: 14px;line-height: 20px;color: var(--ink-muted);display: flex;gap: 14px;align-items: baseline;flex-wrap: wrap;letter-spacing: -0.011em;}.block{padding-top: 40px;margin-top: 56px;border-top: 1px solid var(--line);}.block>.kicker,.block-head .kicker{display: block;margin-bottom: 12px;}.block-head{display: flex;justify-content: space-between;align-items: flex-end;gap: 24px;flex-wrap: wrap;margin-bottom: 28px;}.block-head>div{min-width: 0;}.block>.t-h2{margin-bottom: 32px;}@media (max-width: 640px){.block{padding-top: 32px;margin-top: 40px;}}.stages{list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 32px;}.stages li{border-top: 1px solid var(--line);padding-top: 16px;}.stages .num{font-size: 12px;color: var(--ink-muted);display: block;margin-bottom: 12px;letter-spacing: 0;}.stages h3{font-size: 20px;line-height: 28px;font-weight: 500;letter-spacing: -0.01em;margin: 0;}.stages p{color: var(--ink-muted);margin: 8px 0 0;font-size: 15px;line-height: 24px;letter-spacing: -0.016em;}@media (max-width: 900px){.stages{grid-template-columns: 1fr;gap: 24px;}}.roles{display: grid;gap: 0;border-top: 1px solid var(--line);}.role{display: grid;grid-template-columns: 112px minmax(0,1fr);gap: 24px;padding: 28px 0;border-bottom: 1px solid var(--line);align-items: start;}.role-photo .duo-frame{aspect-ratio: 1;width: 112px;}.role-photo figcaption{display: none;}.role-text{min-width: 0;}.role h3{font-size: 18px;line-height: 26px;font-weight: 500;margin: 0 0 8px;}.role ul{margin: 0 0 12px;padding-left: 18px;color: var(--ink-muted);display: grid;gap: 6px;font-size: 15px;line-height: 24px;letter-spacing: -0.016em;}.role .more{margin: 0;}.roles-credit{font-size: 12px;line-height: 16px;color: var(--ink-muted);margin: 10px 0 0;letter-spacing: 0;}.roles-credit a{color: var(--ink-muted);}@media (max-width: 560px){.role{grid-template-columns: 72px 1fr;gap: 16px;}.role-photo .duo-frame{width: 72px;}}.split{display: grid;grid-template-columns: minmax(0,5fr) minmax(0,7fr);gap: 48px;align-items: start;}@media (max-width: 1100px){.split{grid-template-columns: 1fr;gap: 32px;}}.split .lede{margin-bottom: 28px;}.tree{list-style: none;margin: 0;padding: 0 20px;background: var(--surface-raised);border: 1px solid var(--line);}.tree li{display: flex;justify-content: space-between;gap: 16px;padding: 12px 0;border-top: 1px solid var(--line);}.tree li:first-child{border-top: 0;}.tree code{font-size: 13.5px;background: none;border: 0;padding: 0;}.tree span{color: var(--ink-muted);text-align: right;font-size: 14px;letter-spacing: -0.011em;}.shot{margin: 0;}.shot .frame{display: flex;gap: 7px;padding: 12px 14px;background: var(--surface-sunken);border: 1px solid var(--line);border-bottom: 0;}.shot .frame span{width: 10px;height: 10px;border-radius: 50%;background: var(--line);}.shot img{width: 100%;border: 1px solid var(--line);}.shot figcaption{font-size: 12px;line-height: 16px;color: var(--ink-muted);margin-top: 10px;letter-spacing: 0;}.rows{list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(2,minmax(0,1fr));column-gap: 32px;border-bottom: 1px solid var(--line);}.rows li{border-top: 1px solid var(--line);}.rows a{display: flex;align-items: center;gap: 12px;min-height: 52px;color: var(--ink);text-decoration: none;}.rows .row-n{font-size: 12px;color: var(--ink-muted);width: 24px;flex: none;letter-spacing: 0;}.rows .row-t{flex: 1;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;}.rows .row-s{font-size: 12px;color: var(--ink-muted);letter-spacing: 0;}.rows svg{color: var(--ink-muted);}.rows a:hover .row-t{color: var(--accent-text);}.rows a:hover svg{color: var(--accent-text);}@media (max-width: 760px){.rows{grid-template-columns: 1fr;}}.status{list-style: none;margin: 20px 0 0;padding: 0;}.status li{padding: 12px 0 12px 22px;border-top: 1px solid var(--line);position: relative;font-size: 15px;line-height: 24px;letter-spacing: -0.016em;}.status li::before{content: "";position: absolute;left: 2px;top: 21px;width: 7px;height: 7px;background: var(--accent);}.ghcard{padding: 24px;background: var(--surface-raised);border: 1px solid var(--line);}.gh-top{display: flex;align-items: center;gap: 10px;font-size: 16px;letter-spacing: -0.02em;}.gh-top a{color: var(--ink);text-decoration: none;}.gh-top svg{width: 20px;height: 20px;}.gh-stats{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 16px;margin: 20px 0;}.gh-stats dt{font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .07em;text-transform: uppercase;color: var(--ink-muted);}.gh-stats dd{margin: 4px 0 0;font-size: 17px;line-height: 26px;font-variant-numeric: tabular-nums;font-family: "Source Code Pro",ui-monospace,monospace;}@media (max-width: 560px){.gh-stats{grid-template-columns: repeat(2,minmax(0,1fr));}}.gh-actions{display: flex;flex-wrap: wrap;gap: 8px;}.ghcard .note{font-size: 12px;line-height: 16px;color: var(--ink-muted);margin: 16px 0 0;letter-spacing: 0;}.faq{border-bottom: 1px solid var(--line);}.qa{border-top: 1px solid var(--line);}.qa summary{list-style: none;cursor: pointer;display: flex;justify-content: space-between;align-items: center;gap: 24px;padding: 16px 0;}.qa summary::-webkit-details-marker{display: none;}.qa summary h3,.qa summary h2{margin: 0;font-size: 17px;line-height: 26px;font-weight: 500;letter-spacing: -0.026em;}.qa summary::after{content: "+";font-family: "Source Code Pro",ui-monospace,monospace;font-size: 18px;color: var(--ink-muted);flex: none;}.qa[open] summary::after{content: "\2212";}.qa .ans{color: var(--ink-muted);padding: 0 0 20px;max-width: 70ch;}.qa .ans p{margin: 0 0 12px;}.doc-grid{display: grid;grid-template-columns: minmax(0,1fr) 168px;gap: 48px;}@media (max-width: 1240px){.doc-grid{grid-template-columns: minmax(0,1fr);}.toc{display: none;}}.toc{position: sticky;top: 92px;align-self: start;max-height: calc(100vh - 120px);overflow-y: auto;}.toc .side-h{margin-bottom: 10px;}.toc ul{list-style: none;margin: 0;padding: 0 0 0 12px;border-left: 1px solid var(--line);display: grid;gap: 8px;}.toc a{color: var(--ink-muted);text-decoration: none;font-size: 13px;line-height: 20px;letter-spacing: -0.006em;}.toc a:hover{color: var(--ink);}.crumb{display: flex;flex-wrap: wrap;gap: 8px;font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;color: var(--ink-muted);margin-bottom: 20px;}.crumb a{color: var(--ink-muted);text-decoration: none;}.crumb a:hover{color: var(--accent-text);}.meta{font-size: 13px;line-height: 20px;color: var(--ink-muted);margin: 16px 0 0;letter-spacing: -0.006em;}.meta a{color: var(--ink-muted);}.prose{margin-top: 36px;}.prose>:first-child{margin-top: 0;}.prose h2{font-size: clamp(22px,2.2vw,26px);line-height: 1.25;font-weight: 500;letter-spacing: -0.02em;margin: 72px 0 16px;padding-top: 24px;border-top: 1px solid var(--line);}.prose h3{font-size: 18px;line-height: 26px;font-weight: 600;margin: 32px 0 8px;}.prose p,.prose li{font-size: 17px;line-height: 27px;letter-spacing: -0.026em;}.prose p{margin: 0 0 20px;}.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>blockquote,.dev-body>p,.dev-body>ul,.dev-body>ol{max-width: 70ch;}.prose li{margin: 6px 0;}.prose ul,.prose ol{padding-left: 22px;margin: 0 0 16px;}.prose li::marker{color: var(--ink-muted);}.prose blockquote{margin: 24px 0;padding: 12px 20px;border-left: 2px solid var(--accent);}.prose blockquote p{margin: 0;color: var(--ink);}.prose .qa summary h2{border: 0;padding: 0;margin: 0;font-size: 17px;letter-spacing: -0.026em;}.table-wrap{overflow-x: auto;margin: 32px 0;border: 1px solid var(--line);}.prose table{border-collapse: collapse;width: 100%;font-size: 14.5px;line-height: 22px;letter-spacing: -0.0135em;}.prose th,.prose td{text-align: left;vertical-align: top;padding: 10px 14px;border-top: 1px solid var(--line);}.prose thead th{border-top: 0;background: var(--surface-sunken);font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;color: var(--ink-muted);}.prevnext{display: grid;grid-template-columns: 1fr 1fr;gap: 16px;margin-top: 64px;}.prevnext a{display: grid;gap: 4px;padding: 16px 20px;border: 1px solid var(--line);text-decoration: none;color: var(--ink);font-weight: 500;}.prevnext a span{font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;color: var(--ink-muted);}.prevnext a:hover{border-color: var(--accent);}.prevnext .next{text-align: right;grid-column: 2;}@media (max-width: 560px){.prevnext{grid-template-columns: 1fr;}.prevnext .next{grid-column: 1;}}.page-head{padding: 16px 0 8px;max-width: 860px;}.filters{display: flex;flex-wrap: wrap;gap: 6px;margin-top: 28px;}.filter{display: inline-flex;align-items: center;gap: 6px;min-height: 32px;padding: 0 10px;border: 1px solid var(--line);background: var(--surface-raised);color: var(--ink);cursor: pointer;font: 500 12px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .02em;}.filter .num{color: var(--ink-muted);}.filter:hover{border-color: var(--line-strong);}.filter.is-on{background: var(--ink);border-color: var(--ink);color: var(--surface-raised);}.filter.is-on .num{color: color-mix(in srgb,var(--surface-raised) 70%,transparent);}.show-cat .t-h2{margin-bottom: 24px;}.t-h3.sub{margin: 32px 0 16px;font-size: 16px;}.pieces{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));gap: 32px 24px;}.pieces.portrait{grid-template-columns: repeat(auto-fill,minmax(min(100%,168px),1fr));}.piece{margin: 0;min-width: 0;}.piece-link{display: block;overflow: hidden;border: 1px solid var(--line);background: var(--surface-sunken);}.piece-link img{width: 100%;height: 100%;object-fit: cover;object-position: top center;border: 0;transition: transform .25s ease;}.piece-link:hover img{transform: scale(1.015);}.piece figcaption{display: grid;gap: 4px;margin-top: 10px;font-size: 13.5px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.0085em;}.piece figcaption strong{color: var(--ink);font-weight: 500;font-size: 14px;letter-spacing: -0.011em;}.piece-meta{font-size: 12.5px;color: var(--ink-subtle,var(--ink-muted));letter-spacing: -0.003em;}.piece-note{color: var(--ink);}.visually-hidden{position: absolute;width: 1px;height: 1px;margin: -1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;}.slides{position: relative;overflow: hidden;border: 1px solid var(--line);border-radius: var(--r-card);background: var(--surface-sunken);}.sl-track{display: flex;height: 100%;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;overscroll-behavior-x: contain;}.sl-track::-webkit-scrollbar{display: none;}.slides .slide{flex: 0 0 100%;height: 100%;scroll-snap-align: start;scroll-snap-stop: always;border: 0;border-radius: 0;}.sl-arrow{position: absolute;top: 50%;display: grid;place-items: center;width: 32px;height: 32px;margin-top: -16px;padding: 0;border: 0;border-radius: 50%;background: rgb(255 255 255 / .94);color: #14161c;box-shadow: 0 0 0 1px rgb(0 0 0 / .06),0 2px 8px rgb(0 0 0 / .16);cursor: pointer;opacity: 0;transition: opacity 160ms ease,transform 160ms var(--ease-out-strong,ease-out);}.sl-prev{left: 10px;}.sl-next{right: 10px;}.sl-arrow:disabled{visibility: hidden;}.sl-arrow:active{transform: scale(0.94);}.slides:focus-within .sl-arrow{opacity: 1;}@media (hover: hover) and (pointer: fine){.slides:hover .sl-arrow{opacity: 1;}}.piece-head{display: flex;align-items: center;justify-content: space-between;gap: 12px;}.piece-head strong{min-width: 0;}.sl-dots{position: relative;flex: none;display: flex;gap: 10px;padding: 0 6px;}.sl-dot{width: 6px;height: 6px;border-radius: 50%;background: var(--ink);opacity: .22;}.sl-pill{position: absolute;left: 0;top: 0;width: 18px;height: 6px;border-radius: 3px;background: var(--ink);transition: transform 320ms var(--ease-out-strong,ease-out);}@media (prefers-reduced-motion: reduce){.sl-pill,.sl-arrow{transition: none;}}.tags{display: flex;flex-wrap: wrap;gap: 4px;margin-top: 4px;}.tag{display: inline-block;padding: 1px 6px;border: 1px solid var(--line);font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;color: var(--ink-muted);}.tag.review{border-style: dashed;color: var(--warn);border-color: var(--warn);}.lb{border: 0;padding: 0;margin: 0;inset: 0;width: 100vw;max-width: 100vw;height: 100dvh;max-height: 100dvh;background: #0c0d10;color: var(--surface-raised);}.lb::backdrop{background: #0c0d10;}.lb[open]{display: grid;grid-template-rows: auto 1fr;}.lb-bar{display: flex;justify-content: space-between;gap: 16px;align-items: flex-start;padding: 14px 20px;border-bottom: 1px solid rgb(255 255 255 / .12);}.lb-text{display: grid;gap: 2px;min-width: 0;}.lb-title{font-size: 15px;font-weight: 500;letter-spacing: -0.016em;}.lb-blurb{font-size: 13px;line-height: 18px;color: rgb(255 255 255 / .7);letter-spacing: -0.006em;}.lb-tags{color: rgb(255 255 255 / .55);}.lb-actions{display: flex;gap: 6px;flex: none;}.lb-actions a,.lb-actions button{min-height: 34px;padding: 0 12px;border: 1px solid rgb(255 255 255 / .25);background: transparent;color: var(--surface-raised);font: 500 12px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .04em;text-transform: uppercase;text-decoration: none;display: inline-flex;align-items: center;cursor: pointer;}.lb-actions a:hover,.lb-actions button:hover{background: rgb(255 255 255 / .12);}.lb-stage{display: grid;place-items: center;padding: 20px;min-height: 0;}.lb-img{max-width: 100%;max-height: calc(100vh - 110px);width: auto;height: auto;object-fit: contain;}@media (max-width: 640px){.lb-bar{flex-direction: column;}.lb-blurb{display: none;}.lb-stage{padding: 12px;}.lb-img{max-height: calc(100vh - 150px);}}/* footer: three short columns,then every docs page by section,with room around them;every link stays on one line (owner,2026-11-01: "make the footer spacious";and keep every link that matters for search and AI answers) */ .foot{border-top: 1px solid var(--line);background: var(--surface-raised);}.foot-in{display: grid;grid-template-columns: minmax(0,1fr) minmax(0,3fr);gap: var(--space-48);max-width: var(--shell);margin-inline: auto;padding: var(--space-80) 24px 0;}.foot-brand{color: var(--ink);display: grid;gap: var(--space-16);align-content: start;}.foot-brand p{margin: 0;color: var(--ink-muted);font-size: 14px;line-height: 22px;letter-spacing: -0.011em;}.foot-cols{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: var(--space-32);}.foot-docs{width: calc(100% - 48px);max-width: calc(var(--shell) - 48px);margin: var(--space-64) auto 0;padding-top: var(--space-32);border-top: 1px solid var(--line);}.foot-docs-head{display: flex;justify-content: space-between;align-items: center;gap: var(--space-16);margin-bottom: var(--space-24);}.foot-docs-head .kicker{margin: 0;color: var(--ink);}.foot-docs-head a{color: var(--accent-text);font-size: 14px;line-height: 24px;display: inline-flex;align-items: center;min-height: 24px;letter-spacing: -0.011em;}.foot-docs-cols{display: grid;grid-template-columns: repeat(5,minmax(0,1fr));gap: var(--space-32);}.foot-h{margin: 0 0 var(--space-16);}.foot ul{list-style: none;padding: 0;margin: 0;display: grid;gap: var(--space-12);}.foot ul a{color: var(--ink);text-decoration: none;font-size: 15px;line-height: 24px;white-space: nowrap;display: inline-flex;align-items: center;gap: 8px;min-height: 24px;letter-spacing: -0.016em;}.foot ul a:hover{color: var(--accent-text);text-decoration: underline;}.foot-docs ul{gap: var(--space-8);}.foot-docs ul a{font-size: 14px;color: var(--ink-muted);letter-spacing: -0.011em;}.foot-docs ul a:hover{color: var(--accent-text);}.foot-docs + .foot-legal{margin-top: var(--space-48);}.foot-ver{font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;padding: 2px 8px;border-radius: var(--r-pill);background: var(--accent-soft);color: var(--accent-text);}.foot-legal{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: baseline;gap: var(--space-12) var(--space-32);width: calc(100% - 48px);max-width: calc(var(--shell) - 48px);margin: var(--space-64) auto 0;padding: var(--space-24) 0 var(--space-32);font-size: 12px;line-height: 18px;color: var(--ink-muted);border-top: 1px solid var(--line);letter-spacing: 0;}.foot-legal p{margin: 0;max-width: 65ch;}.foot-meta{display: flex;flex-wrap: wrap;gap: var(--space-8) var(--space-16);font-family: "Source Code Pro",ui-monospace,monospace;white-space: nowrap;}.foot-meta a{color: var(--ink-muted);display: inline-flex;align-items: center;min-height: 24px;}.foot-meta span{display: inline-flex;align-items: center;min-height: 24px;}@media (max-width: 1100px){.foot-in{grid-template-columns: minmax(0,1fr);}.foot-docs-cols{grid-template-columns: repeat(3,minmax(0,1fr));gap: var(--space-32);}}@media (max-width: 700px){.foot-in{padding: var(--space-64) 16px 0;}.foot-cols{grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--space-32) var(--space-16);}.foot-legal{width: calc(100% - 32px);margin-top: var(--space-48);}.foot-docs{width: calc(100% - 32px);margin-top: var(--space-48);}.foot-docs-cols{grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--space-32) var(--space-16);}}@media (max-width: 400px){.foot ul a{font-size: 14px;letter-spacing: -0.011em;}.foot-docs-cols{grid-template-columns: minmax(0,1fr);gap: var(--space-24);}}@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}.piece-link img{transition: none;}.piece-link:hover img{transform: none;}}.sticker{--st-bg: var(--accent);--st-fg: var(--on-accent);--tilt: -2deg;display: inline-flex;align-items: center;gap: 6px;padding: 3px 11px 4px;white-space: nowrap;font: 700 12px/16px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: .01em;text-transform: none;color: var(--st-fg);background-color: var(--st-bg);background-image: linear-gradient(180deg,rgb(255 255 255 / .24),rgb(255 255 255 / 0) 62%);border: 3px solid #fff;border-radius: 999px;box-shadow: 0 0 0 1px rgb(20 21 23 / .14),0 1px 1px rgb(20 21 23 / .14),0 5px 10px -3px rgb(20 21 23 / .32);transform: rotate(var(--tilt));}.sticker:nth-child(4n+2){--tilt: 1.5deg;}.sticker:nth-child(4n+3){--tilt: -1deg;}.sticker:nth-child(4n){--tilt: 2.5deg;}.sticker.ink{--st-bg: var(--ink);--st-fg: #fff;}.sticker.paper{--st-bg: #fff;--st-fg: var(--ink);box-shadow: 0 0 0 1px rgb(20 21 23 / .22),inset 0 0 0 1px var(--line),0 5px 10px -3px rgb(20 21 23 / .28);}.sticker.lime{--st-bg: #d4f53c;--st-fg: #1a2200;}.sticker.sky{--st-bg: #cfe0ff;--st-fg: #12205e;}.sticker.pink{--st-bg: #ffc6e3;--st-fg: #4d0d2f;}.sticker.lg{font-size: 14px;line-height: 18px;padding: 5px 14px 6px;border-width: 4px;letter-spacing: -0.011em;}.stickers{display: flex;flex-wrap: wrap;gap: 8px 6px;align-items: center;padding: 4px 2px;}@media (prefers-reduced-motion: reduce){.sticker{transform: none;}}.doc-stickers{margin: 0 0 18px;}.legend{margin-top: 18px;gap: 10px 8px;}.legend .kicker{margin-right: 6px;}.cmd{display: flex;align-items: center;gap: 12px;margin-top: 16px;max-width: 640px;padding: 6px 6px 6px 14px;border: 1px solid var(--line);background: var(--surface-sunken);min-width: 0;}.cmd code{flex: 1;min-width: 0;overflow-x: auto;white-space: nowrap;background: none;border: 0;padding: 0;font-size: 13px;letter-spacing: -0.006em;}@media (max-width: 560px){.cmd .kicker{display: none;}}.checks{list-style: none;margin: 0;padding: 0;border-top: 1px solid var(--line);}.checks li{display: grid;grid-template-columns: 20px 1fr;gap: 12px;padding: 14px 0;border-bottom: 1px solid var(--line);font-size: 15px;line-height: 24px;color: var(--ink-muted);letter-spacing: -0.016em;}.checks strong{color: var(--ink);font-weight: 500;}.check{width: 18px;height: 18px;margin-top: 3px;background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%231c31ce' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat;}.starts{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));border: 1px solid var(--line);}.start{position: relative;display: grid;gap: 6px;align-content: start;padding: 20px 20px 44px;color: var(--ink);text-decoration: none;border-right: 1px solid var(--line);min-width: 0;}.start:last-child{border-right: 0;}.start strong{font-size: 17px;line-height: 24px;font-weight: 500;letter-spacing: -0.026em;}.start>span:not(.kicker){font-size: 14px;line-height: 21px;color: var(--ink-muted);letter-spacing: -0.011em;}.start svg{position: absolute;left: 20px;bottom: 18px;color: var(--ink-muted);}.start:hover{background: var(--surface-sunken);}.start:hover strong,.start:hover svg{color: var(--accent-text);}@media (max-width: 1100px){.starts{grid-template-columns: repeat(2,minmax(0,1fr));}.start:nth-child(2){border-right: 0;}.start:nth-child(-n+2){border-bottom: 1px solid var(--line);}}@media (max-width: 560px){.starts{grid-template-columns: 1fr;}.start{border-right: 0;border-bottom: 1px solid var(--line);}.start:last-child{border-bottom: 0;}}@media (max-width: 560px){.intro a{flex: 1 0 100%;border-left: 0;border-top: 1px solid var(--line);}}/* iOS geometry and letter spacing. Owner,2026-10-14: "use iOS style rounded edges with iOS kerning everywhere instead of sharp corners". Radii are the brand tokens (6 / 12 / 16 / 24) with capsules for buttons. Where the browser draws corner-shape,the surfaces in the @supports lists take Apple's continuous corner: superellipse(1.35) at 1.22 times the radius,within 0.4% of the radius of SwiftUI's own curve (synthesis/levers.json formulas.radius.continuous;tools/fit_corner.py). The squircle keyword is squarer than iOS. --corner-k scales the radius of that box only: every element resets it to 1,so the boxes inside keep the plain radius,whose circular arc is itself within 1.4% of the radius of Apple's curve. Capsules and circles keep round ends. Letter spacing for text up to 19px is Apple's SF Pro tracking table (HIG,Typography,tracking values;synthesis/levers.json formulas.type.tracking.sfPro): build.py apple_tracking() gives every rule that sets a text size the table's value for that size,because letter-spacing is inherited in pixels and a hand-set value goes wrong as soon as a child changes size. Headings from 20px are set by eye below: from 20 pt Apple loosens SF Pro Display,which is drawn tighter than Hanken Grotesk,so the table would loosen these headings (the owner tightened the hero to -0.01em,2026-10-20). The engine follows the same rule for a face that is not SF Pro. Monospace and uppercase labels keep their own spacing. */ :root{--r-detail: var(--radius-detail);--r-control: var(--radius-control);--r-card: var(--radius-container);--r-panel: var(--radius-overlay);--r-pill: 999px;}@supports (corner-shape: superellipse(1.35)){*,::before,::after{--corner-k: 1;--r-detail: calc(var(--radius-detail) * var(--corner-k));--r-control: calc(var(--radius-control) * var(--corner-k));--r-card: calc(var(--radius-container) * var(--corner-k));--r-panel: calc(var(--radius-overlay) * var(--corner-k));}}code,pre,.mono,.num,.code,.tree code{letter-spacing: 0;}.t-hero{letter-spacing: 0.008em;}.t-hero strong{letter-spacing: inherit;}.t-h1{letter-spacing: 0.01em;}.t-h2{letter-spacing: 0.008em;}.t-h3{letter-spacing: -0.018em;}.t-h3.sub{letter-spacing: -0.02em;}.prose h2{letter-spacing: 0;}.prose h3,.role h3{letter-spacing: -0.025em;}.stages h3{letter-spacing: -0.023em;}.btn{font: 600 15px/20px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.016em;text-transform: none;border-radius: var(--r-pill);padding: 0 20px;}.gh-btn{font: 600 14px/20px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.011em;text-transform: none;border-radius: var(--r-pill);}.copy{font: 600 13px/18px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.006em;text-transform: none;border-radius: var(--r-pill);padding: 0 12px;}.filter{font: 500 13px/18px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.006em;border-radius: var(--r-pill);padding: 0 12px;}.lb-actions a,.lb-actions button{font: 600 13px/18px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.006em;text-transform: none;border-radius: var(--r-pill);}.crumb{font: 500 13px/18px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.006em;text-transform: none;}.side-mobile summary{font: 600 15px/20px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.016em;text-transform: none;}.skip,.intro{border-radius: var(--r-pill);overflow: hidden;}.intro-dot,.status li::before,.check{border-radius: 50%;}.cmd,.side a,.side-mobile nav a{border-radius: var(--r-control);}.cmd{padding-left: 16px;}:not(pre)>code{border-radius: var(--r-detail);}.code pre,.tree,.prevnext a,.table-wrap,.piece-link,.duo-frame,.lb-img{border-radius: var(--r-card);}.ghcard,.starts{border-radius: var(--r-panel);overflow: hidden;}.shot .frame{border-radius: var(--r-panel) var(--r-panel) 0 0;}.shot img{border-radius: 0 0 var(--r-panel) var(--r-panel);}.role-photo .duo-frame{border-radius: var(--r-card);}@supports (corner-shape: superellipse(1.35)){.cmd,.side a,:not(pre)>code,.code pre,.tree,.prevnext a,.table-wrap,.piece-link,.duo-frame,.lb-img,.ghcard,.starts,.shot .frame,.shot img{corner-shape: superellipse(1.35);--corner-k: 1.22;}}@media (max-width: 560px){.intro{border-radius: var(--r-card);}}.stickers .sticker,.legend .sticker{transform: none;}.sticker::before{content: "";width: 12px;height: 12px;flex: none;background: currentColor;-webkit-mask: var(--icon) center / contain no-repeat;mask: var(--icon) center / contain no-repeat;}.sticker:not([data-icon])::before{display: none;}.sticker[data-icon="building"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14V3h7v11M10 7h3v7M1.5 14h13M5.5 5.5h2M5.5 8.5h2M5.5 11.5h2'/%3E%3C/svg%3E");}.sticker[data-icon="person"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5' r='2.6'/%3E%3Cpath d='M3 14c.6-2.8 2.6-4.3 5-4.3s4.4 1.5 5 4.3'/%3E%3C/svg%3E");}.sticker[data-icon="brush"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5 7.5 8.5'/%3E%3Cpath d='M7.2 8.8c-1.6-.3-3.3.6-3.6 2.4-.2 1.2-.7 1.9-1.6 2.3 2.7.9 5.6.3 6-2.2.1-.9-.3-1.9-.8-2.5z'/%3E%3C/svg%3E");}.sticker[data-icon="tag"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.5h6l6 6-5.5 5.5-6-6z'/%3E%3Ccircle cx='5.2' cy='5.7' r='.9'/%3E%3C/svg%3E");}.sticker[data-icon="wrench"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2.2a3.2 3.2 0 0 0-3.4 4.4L2.6 11.1a1.5 1.5 0 0 0 2.1 2.1l4.5-4.5a3.2 3.2 0 0 0 4.4-3.4l-2 2-1.9-.4-.4-1.9z'/%3E%3C/svg%3E");}.sticker[data-icon="layers"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2 14 5 8 8 2 5z'/%3E%3Cpath d='M2 8l6 3 6-3M2 11l6 3 6-3'/%3E%3C/svg%3E");}.sticker[data-icon="play"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.2v9.6L12.5 8z'/%3E%3C/svg%3E");}.sticker[data-icon="compass"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M10.4 5.6 9 9 5.6 10.4 7 7z'/%3E%3C/svg%3E");}.sticker[data-icon="bulb"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5h4M6.5 14.5h3M5.2 10c-1-1-1.7-2.2-1.7-3.6a4.5 4.5 0 0 1 9 0c0 1.4-.7 2.6-1.7 3.6-.4.4-.6 1-.6 1.6H5.8c0-.6-.2-1.2-.6-1.6z'/%3E%3C/svg%3E");}.sticker[data-icon="book"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5c1.8-.6 3.8-.6 5.5.6 1.7-1.2 3.7-1.2 5.5-.6v9.5c-1.8-.6-3.8-.6-5.5.6-1.7-1.2-3.7-1.2-5.5-.6z'/%3E%3Cpath d='M8 4.1v9.5'/%3E%3C/svg%3E");}.sticker[data-icon="check"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");}.sticker[data-icon="cross"]{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");}.sticker.ink{font: 600 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;}.sticker.paper{border-radius: 8px;font-weight: 600;}.piece{position: relative;}.piece-stuck{position: absolute;top: -10px;right: -8px;z-index: 2;display: flex;flex-direction: column;align-items: flex-end;gap: 6px;pointer-events: none;}.piece-stuck .sticker{transform: rotate(4deg);font: 600 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .05em;text-transform: uppercase;}.piece-stuck .sticker + .sticker{transform: rotate(-3deg);margin-right: 10px;}.doc{position: relative;}.doc-stickers{position: absolute;top: -6px;right: 0;margin: 0;}.doc-stickers .sticker{transform: rotate(5deg);}@media (max-width: 640px){.doc-stickers{position: static;margin: 0 0 14px;}.doc-stickers .sticker{transform: rotate(-2deg);}}@media (prefers-reduced-motion: reduce){.piece-stuck .sticker,.doc-stickers .sticker{transform: none;}}@media (max-width: 400px){.top-nav a:nth-child(n+2){display: none;}}@media (max-width: 420px){.bar-in{gap: 12px;}.gh-btn>span:not(.gh-count){display: none;}.gh-btn{padding: 0 10px;}}@media (max-width: 360px){.bar-in{gap: 8px;}.top-nav{gap: 12px;}.gh-btn{padding: 0 8px;gap: 6px;}}@media (pointer: coarse){.bar-in>.brand,.top-nav a{padding-block: 11px;margin-block: -11px;}.crumb a{padding-block: 13px;margin-block: -13px;}.crumbs a{padding-block: 12px;margin-block: -12px;}/* "more" links sit under rules that set their own top margin,so they grow their hit area with a pseudo-element */ .gh-btn,a.more{position: relative;}.gh-btn::after{content: "";position: absolute;inset: -4px;}a.more::after{content: "";position: absolute;inset: -11px 0;}}.btn,.copy,.gh-btn,.filter,.tablist [role="tab"],.lb-actions button{transition: transform 160ms cubic-bezier(0.23,1,0.32,1),background-color 160ms ease,border-color 160ms ease,color 160ms ease;}.btn:active,.copy:active,.gh-btn:active,.filter:active,.tablist [role="tab"]:active,.lb-actions button:active{transform: scale(0.97);}@media (prefers-reduced-motion: reduce){.btn:active,.copy:active,.gh-btn:active,.filter:active,.tablist [role="tab"]:active,.lb-actions button:active{transform: none;}}/* No widows (owner,2026-10-15: "the word 'it' is always on the next line"). Headings and short centred lines balance their lines;paragraphs,list items and captions avoid a lone last word. site/check_layout.py check 9 measures it at every width. */ h1,h2,h3,h4,.t-hero,.t-h1,.t-h2,.t-h3,.h-title,.h-h2,.h-h3,.h-end-lede,.h-cmd-label,figcaption,.kicker{text-wrap: balance;}p,li,dd,.lede,.h-lede,.prose p,.prose li{text-wrap: pretty;}/* short card text balances (Chrome's "pretty" leaves some lone last words);long captions use "pretty",which works past six lines */ .bento-card>p,.who-card>p,.craft-card>p,.h-step>p{text-wrap: balance;}.fig>figcaption{text-wrap: pretty;}@media (max-width: 380px){.t-h1{font-size: 28px;}}.code pre{white-space: pre-wrap;overflow-wrap: anywhere;}code .w{white-space: nowrap;}.code pre{padding-right: 16px;overflow-wrap: normal;text-indent: 2ch hanging each-line;}.code pre::before{content: "";float: right;width: 80px;height: 28px;}@media (max-width: 640px){.piece-stuck{right: 4px;}.filters{flex-wrap: nowrap;overflow-x: auto;scrollbar-width: none;margin-inline: -16px;padding-inline: 16px;}.filters::-webkit-scrollbar{display: none;}.filters .filter{flex: none;}}:not(pre)>code{-webkit-box-decoration-break: clone;box-decoration-break: clone;overflow-wrap: break-word;}.ev-stats{display: grid;grid-template-columns: minmax(0,1fr);gap: 12px;margin: 24px 0;}@media (min-width: 560px){.ev-stats[data-n="2"],.ev-stats[data-n="4"]{grid-template-columns: repeat(2,minmax(0,1fr));}.ev-stats[data-n="3"]{grid-template-columns: repeat(3,minmax(0,1fr));}}.ev-stat{padding: 16px 18px;border: 1px solid var(--line);border-radius: var(--r-card);background: var(--surface-raised);}.ev-stat .kicker{margin: 0 0 8px;}.ev-big{margin: 0;font-size: 20px;line-height: 26px;font-weight: 600;color: var(--ink);text-wrap: balance;}.ev-sub{margin: 6px 0 0;font-size: 13.5px;line-height: 20px;color: var(--ink-muted);text-wrap: pretty;letter-spacing: -0.0085em;}.ev-desc{font-size: 13px;line-height: 19px;color: var(--ink-muted);letter-spacing: -0.006em;}.ev-meta{margin: -12px 0 24px;font-size: 13px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.006em;}.ev-table td.n{white-space: nowrap;}.top-nav .nav-lib{display: inline-flex;align-items: center;gap: 6px;}.top-nav .nav-ic{flex: none;}.top-nav a{white-space: nowrap;}@media (min-width: 721px) and (max-width: 900px){.top-nav a:nth-child(n+3):not(.nav-lib){display: none;}.top-nav .nav-lib{order: 3;}}@media (max-width: 720px){.top-nav .nav-lib{order: 3;}}@media (max-width: 1024px){.top-nav .nav-lib-t{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;}.top-nav .nav-lib{min-width: 24px;min-height: 24px;justify-content: center;}}@media (max-width: 480px) and (min-width: 401px){.top-nav a:nth-child(2){display: none;}}/* the tour (/tour/,"How OpenDesigner works"): one quiet entry at the top of the docs sidebar,on every docs page (owner,2026-11-03: "there should be many entry points so that this is not missed") */ .side a.side-tour{display: grid;gap: 2px;margin: 0 -10px 24px;padding: 12px 14px;border: 1px solid var(--line);border-radius: var(--r-card);background: var(--accent-soft);color: var(--ink);}.side a.side-tour:hover{background: var(--accent-soft);border-color: var(--accent);}.side-tour .kicker{color: var(--accent-text);}.side-tour strong{display: flex;align-items: center;gap: 6px;font-weight: 600;}.side-mobile a.side-tour{margin: 0;}@supports (corner-shape: superellipse(1.35)){.side a.side-tour{corner-shape: superellipse(1.35);--corner-k: 1.22;}}/* "For developers": commands,paths and flags folded after the plain explanation (site/README.md,"Plain first") */ .dev-fold{margin: 40px 0;border-block: 1px solid var(--line);}.dev-fold>summary{display: flex;align-items: center;gap: 10px;min-height: 48px;cursor: pointer;list-style: none;font: 500 13px/20px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;color: var(--ink-muted);}.dev-fold>summary::-webkit-details-marker{display: none;}.dev-fold>summary::before{content: "+";flex: none;width: 12px;}.dev-fold[open]>summary::before{content: "\2212";}.dev-fold>summary:hover{color: var(--ink);}.dev-fold>.dev-body{padding: 4px 0 24px;}.dev-fold>.dev-body>:last-child{margin-bottom: 0;}:root{--ok: #1a6b3a;--ok-soft: #e4f3e8;--warn: #8a5300;--warn-soft: #fff2d6;--bad: #a32d2d;--bad-soft: #fde7e7;}.fig{margin: 40px 0;}.fig>figcaption{font-size: 13px;line-height: 20px;color: var(--ink-muted);margin-top: 12px;max-width: 65ch;letter-spacing: -0.006em;}.fig>figcaption a{color: var(--ink-muted);}.mono,.num,.kicker{font-family: "Source Code Pro",ui-monospace,Menlo,monospace;}.num{font-variant-numeric: tabular-nums;}.kicker{font-size: 11px;line-height: 16px;letter-spacing: .07em;text-transform: uppercase;color: var(--ink-muted);font-weight: 500;}.fig-panel{position: relative;overflow: hidden;border: 1px solid var(--line);padding: 28px;background-color: var(--surface);}.fig-scene{grid-template-columns: minmax(0,1fr);position: relative;overflow: hidden;isolation: isolate;border-radius: var(--radius-detail);background: var(--accent) center / cover no-repeat;padding: 48px 24px;display: grid;place-items: center;min-height: 340px;}.fig-scene::after{content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;opacity: .28;mix-blend-mode: overlay;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/v/https/opendesigner.dev/%23g)'/%3E%3C/svg%3E");}.fig-scene>*{position: relative;z-index: 2;}@media (max-width: 640px){.fig-panel{padding: 16px;border-radius: 16px;}.fig-scene{padding: 32px 16px;min-height: 280px;}}.fig-card{width: 100%;max-width: 440px;background: var(--surface-raised);border: 1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius: var(--radius-detail);overflow: hidden;box-shadow: 0 1px 2px rgb(20 21 23 / .08),0 24px 48px -24px rgb(20 21 23 / .4);}.fig-card.wide{max-width: 640px;}.fig-card-h{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 6px 12px;padding: 12px 16px;border-bottom: 1px solid var(--line);background: var(--surface);}.fig-card-b{padding: 16px;}.fig-card-f{padding: 12px 16px;border-top: 1px solid var(--line);background: var(--surface);font-size: 13px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.006em;}.fig-card .big{font-size: 28px;line-height: 36px;letter-spacing: -.01em;}.menu-dots{width: 28px;height: 28px;border: 1px solid var(--line);border-radius: var(--radius-detail);display: grid;place-items: center;color: var(--ink);font-size: 14px;letter-spacing: 1px;}.chip{display: inline-flex;align-items: center;gap: 6px;min-height: 22px;padding: 0 8px;font-family: "Source Code Pro",ui-monospace,monospace;letter-spacing: .02em;border-radius: var(--radius-detail);font-size: 12px;line-height: 16px;font-weight: 500;background: var(--surface-sunken);color: var(--ink-muted);white-space: nowrap;}.chip.dot::before{content: "";width: 6px;height: 6px;border-radius: 50%;background: currentColor;flex: none;}.chip.ok{background: var(--ok-soft);color: var(--ok);}.chip.warn{background: var(--warn-soft);color: var(--warn);}.chip.bad{background: var(--bad-soft);color: var(--bad);}.chip.accent{background: var(--accent-soft);color: var(--accent-text);}.chip.ink{background: var(--ink);color: var(--surface-raised);}.tag-missing{display: inline-flex;align-items: center;gap: 6px;padding: 2px 8px;border: 1px dashed var(--line-strong);border-radius: var(--radius-detail);font-size: 12px;line-height: 16px;color: var(--ink-muted);background: var(--surface-raised);letter-spacing: 0;}.dodont{display: grid;grid-template-columns: 1fr 1fr;gap: 16px;}.dodont>div{border: 1px solid var(--line);border-radius: var(--radius-detail);background: var(--surface-raised);padding: 16px;min-width: 0;}.dd-h{display: flex;align-items: center;gap: 8px;font-weight: 600;font-size: 15px;line-height: 20px;margin: 0;letter-spacing: -0.016em;}.dd-h{flex-wrap: wrap;}.dd-h::before{display: inline-flex;align-items: center;padding: 2px 10px 3px;border: 3px solid #fff;border-radius: 999px;font: 700 12px/16px "Hanken Grotesk",system-ui,sans-serif;box-shadow: 0 0 0 1px rgb(20 21 23 / .14),0 4px 8px -3px rgb(20 21 23 / .3);transform: rotate(-2deg);flex: none;}.do .dd-h{color: var(--ink);}.do .dd-h::before{content: "Do";background: #d4f53c;color: #1a2200;}.dont .dd-h{color: var(--ink);}.dont .dd-h::before{content: "Don\2019 t";background: #ffc6e3;color: #4d0d2f;transform: rotate(1.5deg);}.dd-why{font-size: 14px;line-height: 20px;color: var(--ink-muted);margin: 6px 0 14px;letter-spacing: -0.011em;}.dd-art{border: 1px solid var(--line);border-radius: var(--radius-detail);background: var(--surface-sunken);padding: 14px;overflow: hidden;}@media (max-width: 640px){.dodont{grid-template-columns: 1fr;}}.ann-grid{display: grid;grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);gap: 24px;align-items: start;}@media (max-width: 760px){.ann-grid{grid-template-columns: 1fr;}}.ann-dot{display: inline-grid;place-items: center;width: 22px;height: 22px;border-radius: 50%;background: var(--accent);color: var(--on-accent);font: 600 12px/1 "Source Code Pro",ui-monospace,monospace;box-shadow: 0 0 0 3px var(--surface-raised);}.ann-dot.abs{position: absolute;z-index: 2;}.ann-legend{list-style: none;margin: 0;padding: 0;display: grid;gap: 10px;}.ann-legend li{display: grid;grid-template-columns: 22px 1fr;gap: 10px;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.ann-legend strong{font-weight: 600;}.ann-legend span{color: var(--ink-muted);}.flow{display: flex;align-items: stretch;gap: 8px;}.flow-box{flex: 1;min-width: 0;display: grid;gap: 4px;align-content: start;padding: 12px;border: 1px solid var(--line);border-radius: var(--radius-detail);background: var(--surface-raised);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.flow-box.accent{border-color: var(--accent);box-shadow: inset 0 0 0 1px var(--accent);}.flow-box.card{display: flex;flex-direction: column;padding: 0;gap: 0;overflow: hidden;}.flow-box.card>.fig-card-f{margin-top: auto;}.flow-box .kicker{margin-bottom: 2px;}.flow-arrow{flex: none;align-self: center;width: 20px;height: 20px;color: var(--line-strong);}@media (max-width: 640px){.flow{flex-direction: column;}.flow-arrow{transform: rotate(90deg);margin-inline: auto;}}.hero-fig{margin: 48px 0 0;}.hero-fig .fig-scene{padding: 40px 32px;min-height: 460px;}.hero-comp{display: flex;gap: 20px;align-items: flex-start;justify-content: center;width: 100%;max-width: 900px;}.hero-side{display: grid;gap: 16px;width: 340px;flex: none;margin-top: 36px;}.hero-side .code-lines{font-size: 12px;line-height: 20px;padding: 12px 14px;letter-spacing: 0;}.shape-opts{display: grid;grid-template-columns: repeat(4,1fr);gap: 10px;}.opt{display: grid;gap: 6px;justify-items: center;padding: 12px 8px 10px;border: 1px solid var(--line);border-radius: var(--radius-detail);background: var(--surface);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.opt.is-rec{border-color: var(--accent);box-shadow: inset 0 0 0 1px var(--accent);background: var(--accent-soft);}.opt-art{width: 56px;height: 36px;background: var(--accent);display: block;}.opt-l{font-weight: 500;}.opt-s{font-size: 12px;color: var(--ink-muted);letter-spacing: 0;}.rec{display: grid;grid-template-columns: auto 1fr;gap: 10px;align-items: start;margin-top: 14px;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.hero-fig .fig-scene{container-type: inline-size;}@media (max-width: 900px){.hero-fig .fig-scene{padding: 24px 16px;}}@container (max-width: 880px){.hero-comp{flex-direction: column;align-items: center;}.hero-comp>.fig-card,.hero-side .fig-card{width: 100%;min-width: 0;max-width: 540px !important;}.hero-side{width: 100%;max-width: 540px;margin: 0;grid-template-columns: minmax(0,1fr);}}@media (max-width: 560px){.shape-opts{grid-template-columns: repeat(2,1fr);}}.ui-btn{display: inline-flex;align-items: center;justify-content: center;min-height: 36px;padding: 0 14px;border-radius: var(--radius-detail);font-size: 14px;font-weight: 500;background: var(--accent);color: var(--on-accent);letter-spacing: -0.011em;}.ui-btn.secondary{background: var(--surface-raised);color: var(--ink);border: 1px solid var(--line-strong);}.ui-input{display: flex;align-items: center;min-height: 36px;padding: 0 12px;border: 1px solid var(--line-strong);border-radius: var(--radius-detail);background: var(--surface-raised);font-size: 14px;color: var(--ink-muted);letter-spacing: -0.011em;}.ui-row{display: flex;align-items: center;gap: 8px;flex-wrap: wrap;}.ui-focus{outline: 2px solid var(--focus-ring);outline-offset: 2px;}.swatch{display: inline-block;width: 28px;height: 28px;border-radius: var(--radius-detail);border: 1px solid rgb(0 0 0 / .08);}.ramp{display: flex;gap: 3px;}.ramp span{flex: 1;height: 28px;border-radius: 4px;}.fig-bar{height: 8px;border-radius: 4px;background: var(--surface-sunken);overflow: hidden;}.fig-bar>span{display: block;height: 100%;background: var(--accent);border-radius: 4px;}.kv{display: grid;grid-template-columns: auto 1fr;gap: 6px 16px;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.kv dt{color: var(--ink-muted);}.kv dd{margin: 0;}.rule{border-top: 1px dashed var(--line);margin: 12px 0;}.fig table.mini{border-collapse: collapse;width: 100%;font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.fig table.mini th,.fig table.mini td{text-align: left;padding: 8px 10px;border-top: 1px solid var(--line);}.fig table.mini thead th{border-top: 0;font-weight: 600;color: var(--ink-muted);}.code-lines{margin: 0;padding: 12px 14px;font-size: 12.5px;line-height: 20px;background: var(--surface-sunken);border: 1px solid var(--line);border-radius: var(--radius-detail);overflow-x: auto;white-space: pre;letter-spacing: -0.003em;}.fig .code-lines{white-space: pre-wrap;overflow-wrap: anywhere;overflow-x: visible;}.code-lines .c{color: var(--ink-muted);}.code-lines .k{color: var(--accent-text);}.code-lines .bad{color: var(--bad);}.code-lines .ok{color: var(--ok);}.prose .fig p{font-size: 14px;line-height: 20px;margin: 0;letter-spacing: -0.011em;}.prose .fig .dd-why{margin: 6px 0 14px;}.prose .fig ul,.prose .fig ol{margin: 0;padding-left: 18px;}.prose .fig li{font-size: 14px;line-height: 20px;margin: 2px 0;letter-spacing: -0.011em;}.prose .fig .ann-legend{padding-left: 0;}.prose .fig .ann-legend li{margin: 0;}.ann-legend .ann-dot{color: var(--on-accent);}.fig-card-f .chip,.fig-card-b .chip{white-space: normal;height: auto;}.fig-panel{border-radius: var(--r-card);}.fig-scene{border-radius: var(--r-panel);}.fig-card{border-radius: var(--r-card);}.fig-card-h{border-radius: 0;}.chip,.ui-btn,.fig-bar,.fig-bar>span,.tag-missing{border-radius: var(--r-pill);}.ui-input,.opt,.flow-box,.dd-art,.code-lines,.dodont>div{border-radius: var(--r-control);}.dodont>div{border-radius: var(--r-card);}.swatch,.ramp span{border-radius: var(--r-detail);}.fig .kicker{letter-spacing: .07em;}.fig .mono,.fig .num,.fig code,.fig pre,.fig .code-lines,.fig .chip{letter-spacing: 0;}@supports (corner-shape: superellipse(1.35)){.fig-panel,.fig-scene,.fig-card,.ui-input,.opt,.flow-box,.dd-art,.code-lines,.dodont>div{corner-shape: superellipse(1.35);--corner-k: 1.22;}}.dodont>div{position: relative;padding-top: 22px;}.dd-h::before{position: absolute;top: -12px;left: 12px;padding-left: 22px;background-repeat: no-repeat;background-position: 8px 50%;background-size: 11px;}.do .dd-h::before{background-repeat: no-repeat;background-position: 8px 50%;background-size: 11px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a2200' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");transform: rotate(-3deg);}.dont .dd-h::before{background-repeat: no-repeat;background-position: 8px 50%;background-size: 11px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234d0d2f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");transform: rotate(2.5deg);}.dd-h{gap: 0;}.fig .mono,.fig code,.flow-box,.dd-art span{overflow-wrap: anywhere;}.fig .chip{max-width: 100%;white-space: normal;overflow-wrap: anywhere;}.fig-panel{container-type: inline-size;}.grid-even{grid-template-columns: repeat(2,minmax(0,1fr));}@container (min-width: 760px){.grid-even{grid-template-columns: repeat(4,minmax(0,1fr));}}@container (max-width: 360px){.grid-even{grid-template-columns: minmax(0,1fr);}}.dodont>div{display: flex;flex-direction: column;}.dodont .dd-art{flex: 1;}/* Phone audit,2026-10-15: a chip never breaks inside a word ("Defaul / t");only chips marked .wrap (long file names) may wrap. */ .fig .chip{white-space: nowrap;overflow-wrap: normal;}.fig .chip.wrap{white-space: normal;overflow-wrap: anywhere;}.tag-missing{white-space: nowrap;}@media (max-width: 560px){table.mini,table.mini tbody,table.mini tr,table.mini td{display: block;}table.mini thead{display: none;}table.mini tr{padding: 12px 0;border-top: 1px solid var(--line);}table.mini td{border: 0 !important;padding: 0 !important;}table.mini td + td{margin-top: 8px;}}.fig .kicker{font-size: 12px;line-height: 16px;}/* Labels and short keys never break inside a word ("CORNER / S","compos / e");only names in .mono and code may. */ .fig .kicker,.fig .kv dt{overflow-wrap: normal;}/* A word or token in .nw stays whole: a flag never splits as "-" / "-why",a name never at its hyphen ("radius-" / "8);"). */ .fig .nw{white-space: nowrap;}@media (max-width: 480px){.rec{grid-template-columns: minmax(0,1fr);gap: 8px;}.rec>.chip{justify-self: start;}}@container (max-width: 313px){.fig svg.dsp-art .lbl,.fig svg.dsp-art .lbl-g text{font-size: 17px;letter-spacing: -0.026em;}.fig svg.dsp-art .mk circle{r: 14px;}.fig svg.dsp-art .mk text{font-size: 16px;letter-spacing: -0.02em;}}.fig .ct-row{display: grid;grid-template-columns: 56px minmax(0,1fr) auto;align-items: center;gap: 6px 12px;}@container (max-width: 300px){.fig .ct-row{grid-template-columns: 56px minmax(0,1fr);}.fig .ct-row>:first-child{grid-row: span 2;}.fig .ct-row>.chip{justify-self: start;}}.fig .tier{grid-template-columns: 96px minmax(0,1fr);gap: 4px 12px;}.fig .tier>.kicker{grid-row: span 2;}@container (max-width: 420px){.fig .tier{grid-template-columns: minmax(0,1fr);}.fig .tier>.kicker{grid-row: auto;}}/* Stacked Do and Don't panels on phones: room for the next panel's sticker,so it never touches the panel above. */ @media (max-width: 640px){.dodont{gap: 28px;}}.fig-scene{--scene-r: var(--r-panel);}.hh-file{--card-r: var(--r-card);}@media (max-width: 640px){.fig-scene .hh .fig-card{border-radius: calc(var(--scene-r) - 16px);}.hh-file{--card-r: calc(var(--scene-r) - 16px);}}@media (max-width: 640px){.fig-panel{border-radius: 16px;}}:root{--ok:#00652c;--ok-soft:#ebf7ed;--warn:#845d00;--warn-soft:#f8f4ec;--bad:#a82321;--bad-soft:#fff1ef;}.home{overflow-x: clip;}.h-hero,.h-sec,.h-end{max-width: var(--shell);margin-inline: auto;padding-inline: 24px;}@media (max-width: 640px){.h-hero,.h-sec,.h-end{padding-inline: 16px;}}.h-hero{padding-top: 72px;text-align: center;}.h-flag{margin: 0 0 28px;display: flex;justify-content: center;}.h-flag .sticker{transform: rotate(-3deg);}.h-title{font-size: clamp(38px,6.2vw,76px);line-height: 1.04;font-weight: 400;letter-spacing: -0.01em;margin: 0 auto;max-width: 15em;text-wrap: balance;}.h-title strong{font-weight: 600;}.h-eyebrow{display: block;margin: 0 auto 14px;color: var(--ink-muted);font: 500 13px/18px "Source Code Pro",ui-monospace,monospace;letter-spacing: .08em;text-transform: uppercase;}.h-lede{font-size: 19px;line-height: 30px;letter-spacing: -0.024em;color: var(--ink-muted);max-width: 62ch;margin: 24px auto 0;text-wrap: pretty;}.h-cta{display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin-top: 36px;}.btn.lg{min-height: 52px;padding: 0 26px;font-size: 16px;line-height: 22px;letter-spacing: -0.02em;}.btn.text svg{width: 18px;height: 18px;}.h-cmd{margin: 20px auto 0;text-align: left;}.h-works{display: flex;flex-wrap: wrap;justify-content: center;align-items: baseline;gap: 8px 22px;margin: 28px auto 0;font-size: 15px;line-height: 22px;color: var(--ink-muted);letter-spacing: -0.016em;}@media (max-width: 640px){.h-hero{padding-top: 40px;}.h-lede{font-size: 17px;line-height: 27px;}.h-works{gap: 6px 14px;font-size: 14px;}}.home-hero{margin: 56px 0 0;text-align: left;}.home-hero .fig-scene{padding: 56px 40px;min-height: 0;place-items: start center;}.home-hero>figcaption{text-align: center;max-width: 72ch;margin-inline: auto;}.hh{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 20px;width: 100%;max-width: 1080px;align-items: start;}.hh .fig-card{max-width: none;}.hh-file{margin-top: 40px;}.hh-ui{margin-top: 80px;}.hh-q{margin: 0 0 14px;font-size: 16px;line-height: 23px;font-weight: 500;letter-spacing: -0.02em;}.hh-you{display: flex;justify-content: flex-end;align-items: center;gap: 8px;margin: 0 0 14px;}.hh-bubble{background: var(--accent);color: var(--on-accent);padding: 7px 12px;border-radius: 16px 16px 4px 16px;font-size: 15px;line-height: 20px;font-weight: 500;letter-spacing: -0.016em;}.hh-answers{list-style: none;margin: 0;padding: 0;border-top: 1px solid var(--line);}.hh-answers li{display: flex;align-items: center;gap: 8px;padding: 8px 0;border-bottom: 1px solid var(--line);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.hh-answers .kicker{width: 64px;flex: none;}.hh-sw{display: inline-block;width: 14px;height: 14px;border-radius: 4px;flex: none;}.hh-file .code-lines{border: 0;border-radius: 0;background: var(--surface-raised);font-size: 12.5px;letter-spacing: -0.003em;}.hh-md{margin: 0;padding: 12px 16px;border-top: 1px solid var(--line);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.hh-md .kicker{display: block;margin-bottom: 4px;}.hh-app{padding: 16px;background: var(--x-bg);color: var(--x-text);}.hh-row{display: flex;justify-content: space-between;align-items: center;gap: 8px;}.hh-title{font-size: 17px;line-height: 22px;font-weight: 650;letter-spacing: -0.026em;}.hh-pill{background: var(--x-soft);color: var(--x-soft-text);border-radius: var(--x-r);padding: 2px 8px;font-size: 12px;line-height: 16px;font-weight: 500;white-space: nowrap;letter-spacing: 0;}.hh-sub{margin: 4px 0 0;color: var(--x-muted);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.hh-amt{margin: 12px 0 8px;font-size: 24px;line-height: 30px;font-weight: 650;letter-spacing: 0;}.hh-lines>div{display: flex;justify-content: space-between;gap: 12px;padding: 7px 0;border-top: 1px solid var(--x-sep);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.hh-actions{display: flex;justify-content: flex-end;gap: 8px;margin-top: 14px;}.hh-btn{display: inline-flex;align-items: center;height: var(--x-h);padding: 0 12px;border: 1px solid var(--x-border);border-radius: var(--x-r);background: var(--x-raised);font-size: 14px;font-weight: 500;white-space: nowrap;letter-spacing: -0.011em;}.hh-btn.primary{background: var(--x-primary);border-color: var(--x-primary);color: var(--x-on);}@media (max-width: 960px){.home-hero .fig-scene{padding: 24px 14px;}.hh{grid-template-columns: minmax(0,1fr);max-width: 480px;gap: 14px;}.hh-file,.hh-ui{margin-top: 0;}}.h-sec{padding-top: 128px;}@media (max-width: 640px){.h-sec{padding-top: 88px;}}.h-head{max-width: 780px;margin-bottom: 44px;}.h-head .h-lede,.h-split .h-lede{margin: 16px 0 0;text-align: left;font-size: 18px;line-height: 28px;letter-spacing: -0.025em;}.h-head-row{max-width: none;display: flex;justify-content: space-between;align-items: flex-end;gap: 24px;flex-wrap: wrap;}.h-head-row>div{max-width: 780px;}.h-h2{font-size: clamp(30px,3.6vw,48px);line-height: 1.1;font-weight: 400;letter-spacing: 0.008em;margin: 12px 0 0;text-wrap: balance;}.h-sec .fig{margin: 0;}.h-split{display: grid;grid-template-columns: minmax(0,5fr) minmax(0,7fr);gap: 56px;align-items: start;}.h-split .tree{margin-top: 28px;}@media (max-width: 1100px){.h-split{grid-template-columns: minmax(0,1fr);gap: 36px;}}.h-fine{margin: 16px 0 0;font-size: 13px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.006em;}.h-fine a{color: var(--ink-muted);}.h-exports{display: flex;flex-wrap: wrap;align-items: center;gap: 6px;margin: 20px 0 0;}.h-exports .kicker{margin-right: 6px;}.h-steps{list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 16px;}.h-step{display: flex;flex-direction: column;padding: 24px;background: var(--surface);border: 1px solid var(--line);border-radius: var(--r-panel);min-width: 0;}.h-n{font-size: 12px;line-height: 16px;color: var(--accent-text);font-weight: 500;letter-spacing: 0;}.h-step h3{margin: 14px 0 8px;font-size: 20px;line-height: 26px;font-weight: 500;letter-spacing: -0.023em;}.h-step p{margin: 0;font-size: 15px;line-height: 23px;color: var(--ink-muted);letter-spacing: -0.016em;}.h-step .vg{margin-top: auto;padding-top: 24px;}@media (max-width: 1100px){.h-steps{grid-template-columns: repeat(2,minmax(0,1fr));}}@media (max-width: 640px){.h-steps{grid-template-columns: minmax(0,1fr);}}.vg-files,.vg-qs{list-style: none;margin: 0;padding: 4px 12px;background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--r-control);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.vg-files li{display: flex;justify-content: space-between;align-items: center;gap: 8px;padding: 7px 0;border-top: 1px solid var(--line);}.vg-files li:first-child,.vg-qs li:first-child{border-top: 0;}.vg-files .mono{font-size: 12.5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0;letter-spacing: -0.003em;}.vg-qs{counter-reset: q;}.vg-qs li{counter-increment: q;display: flex;gap: 8px;padding: 7px 8px;margin-inline: -8px;border-top: 1px solid var(--line);}.vg-qs li::before{content: counter(q);font-family: "Source Code Pro",ui-monospace,monospace;color: var(--ink-muted);width: 12px;flex: none;}.vg-qs li.on{background: var(--accent-soft);color: var(--accent-text);border-radius: var(--r-detail);font-weight: 500;border-top-color: transparent;}.vg-qs li.on + li{border-top-color: transparent;}.vg-term{background: var(--surface-raised);font-size: 12px;line-height: 19px;white-space: pre-wrap;letter-spacing: 0;}.h-zoom{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 22px;margin: 16px 0 0;padding: 14px 22px;border: 1px solid var(--line);border-radius: var(--r-card);font-size: 15px;line-height: 22px;color: var(--ink-muted);letter-spacing: -0.016em;}.h-zoom strong{color: var(--ink);font-weight: 500;}.h-zoom .more{margin-left: auto;}@media (max-width: 640px){.h-zoom .more{margin-left: 0;}}[role="tabpanel"][hidden]{display: none;}.tablist{display: flex;flex-wrap: wrap;gap: 8px;}.tablist [role="tab"]{cursor: pointer;font: 600 14px/20px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.011em;color: var(--ink);background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--r-pill);min-height: 40px;padding: 0 16px;}.tablist [role="tab"]:hover{border-color: var(--line-strong);}.tablist [role="tab"][aria-selected="true"]{background: var(--ink);border-color: var(--ink);color: var(--surface-raised);}.demo-tabs{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 12px;}.demo-tabs [role="tab"]{display: grid;gap: 2px;text-align: left;padding: 14px 18px;border-radius: var(--r-card);min-height: 0;}.demo-tabs [role="tab"] strong{font-size: 17px;line-height: 22px;letter-spacing: -0.026em;}.demo-tabs [role="tab"] span{font-weight: 400;font-size: 14px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.011em;}.demo-tabs [role="tab"][aria-selected="true"]{background: var(--accent-soft);border-color: var(--accent);color: var(--accent-text);box-shadow: inset 0 0 0 1px var(--accent);}.demo-tabs [role="tab"][aria-selected="true"] span{color: var(--accent-text);}@media (max-width: 760px){.demo-tabs{grid-template-columns: minmax(0,1fr);}}.demo-panel{display: grid;grid-template-columns: minmax(0,5fr) minmax(0,6fr);gap: 32px;margin-top: 16px;padding: 28px;background: var(--surface);border: 1px solid var(--line);border-radius: var(--r-panel);}@media (max-width: 960px){.demo-panel{grid-template-columns: minmax(0,1fr);padding: 20px;gap: 24px;}}.demo-answers dl{margin: 10px 0 24px;}.demo-answers dl>div{display: grid;grid-template-columns: 132px minmax(0,1fr);gap: 12px;padding: 9px 0;border-top: 1px solid var(--line);align-items: baseline;}.demo-answers dt{font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .07em;text-transform: uppercase;color: var(--ink-muted);}.demo-answers dd{margin: 0;font-size: 15px;line-height: 22px;letter-spacing: -0.016em;display: flex;align-items: center;gap: 6px;flex-wrap: wrap;}.demo-values dd{font-family: "Source Code Pro",ui-monospace,monospace;font-size: 14px;letter-spacing: 0;}.demo-note{margin: 0;padding: 12px 14px;background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--r-control);font-size: 14px;line-height: 21px;color: var(--ink-muted);letter-spacing: -0.011em;}.demo-stage{display: grid;place-items: center;padding: 40px 24px;border-radius: var(--r-card);border: 1px solid var(--line);min-width: 0;background: var(--surface-sunken) radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.2px) 0 0 / 16px 16px;}@media (max-width: 640px){.demo-stage{padding: 20px 12px;}.demo-answers dl>div{grid-template-columns: 104px minmax(0,1fr);}}.x-card{width: 100%;max-width: 400px;background: var(--x-raised);color: var(--x-text);border: 1px solid var(--x-sep);border-radius: calc(var(--x-rc) * var(--corner-k,1));padding: calc(var(--x-inset) * 2);font-size: var(--x-body);line-height: 1.45;letter-spacing: 0;box-shadow: 0 1px 2px rgb(20 21 23 / .06),0 18px 40px -24px rgb(20 21 23 / .35);}.x-head{display: flex;justify-content: space-between;align-items: center;gap: 10px;}.x-title{font-size: var(--x-title);line-height: 1.25;font-weight: var(--x-wh);}.x-chip{background: var(--x-soft);color: var(--x-soft-text);border-radius: var(--x-r);padding: 2px 8px;font-size: var(--x-label);line-height: 1.4;font-weight: 500;white-space: nowrap;}.x-sub{margin: 4px 0 0;color: var(--x-muted);}.x-big{margin: 14px 0 6px;font-size: var(--x-headline);line-height: 1.15;font-weight: var(--x-wh);}.x-field{display: grid;gap: 6px;margin: 16px 0 8px;}.x-field>span:first-child{font-size: var(--x-label);font-weight: 500;}.x-input{display: flex;align-items: center;height: var(--x-h);padding: 0 12px;border: 1px solid var(--x-border);border-radius: var(--x-r);background: var(--x-raised);}.x-hint{font-size: var(--x-label);color: var(--x-muted);}.x-rows{margin-top: 8px;}.x-rows>div{display: flex;justify-content: space-between;gap: 12px;padding: 8px 0;border-top: 1px solid var(--x-sep);}.x-rows>div>span:last-child{color: var(--x-muted);}.x-actions{display: flex;justify-content: flex-end;flex-wrap: wrap;gap: 8px;margin-top: 16px;}.x-btn{display: inline-flex;align-items: center;justify-content: center;height: var(--x-h);padding: 0 14px;border: 1px solid var(--x-border);border-radius: var(--x-r);background: var(--x-raised);font-weight: 500;white-space: nowrap;}.x-btn.primary{background: var(--x-primary);border-color: var(--x-primary);color: var(--x-on);}.x-card .num,.hh-app .num{font-family: inherit;font-variant-numeric: tabular-nums;letter-spacing: 0;}.bento{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 16px;}.bento-card{display: flex;flex-direction: column;padding: 24px;background: var(--surface);border: 1px solid var(--line);border-radius: var(--r-panel);min-width: 0;}.bento-card.span-2{grid-column: span 2;}.bento-card h3{margin: 0 0 8px;font-size: 18px;line-height: 24px;font-weight: 600;letter-spacing: -0.025em;}.bento-card p{margin: 0;font-size: 15px;line-height: 23px;color: var(--ink-muted);letter-spacing: -0.016em;}.bento-card .vg{margin-top: auto;padding-top: 20px;}@media (max-width: 1000px){.bento{grid-template-columns: repeat(2,minmax(0,1fr));}}@media (max-width: 640px){.bento{grid-template-columns: minmax(0,1fr);}.bento-card.span-2{grid-column: auto;}}.vg-log{padding: 12px 14px;background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--r-control);}.vg-log p{margin: 0 0 8px;color: var(--ink);}.vg-log p:last-child{margin: 0;}.vg-log .mono{font-size: 13px;letter-spacing: -0.006em;}.bento-card .vg-why{font-size: 14px;line-height: 21px;color: var(--ink);letter-spacing: -0.011em;}.vg-floor{display: flex;align-items: center;gap: 10px;flex-wrap: wrap;}.vg-aa{display: grid;place-items: center;width: 52px;height: 40px;background: var(--surface-raised);border: 1px solid var(--line);border-radius: var(--r-control);font-size: 22px;font-weight: 600;}.vg-target{width: 24px;height: 24px;border: 1.5px dashed var(--accent);border-radius: var(--r-detail);background: var(--accent-soft);}.vg-floor .num{font-size: 15px;letter-spacing: -0.016em;}.bento-card p.vg-lock,.bento-card p.vg-from{display: flex;flex-wrap: wrap;gap: 6px;align-items: center;color: var(--ink);}.vg-lock .mono{font-size: 14px;margin-right: 4px;letter-spacing: -0.011em;}.bento-card .vg-big{margin: 0;font-size: 64px;line-height: 64px;font-weight: 300;color: var(--accent-text);letter-spacing: 0;}.bento-card .stickers{padding: 2px 0;}.ex-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 28px 20px;}.ex{color: var(--ink);text-decoration: none;min-width: 0;}.ex-img{display: block;aspect-ratio: 16 / 10;overflow: hidden;border: 1px solid var(--line);border-radius: var(--r-card);background: var(--surface-sunken);}.ex-img img{width: 100%;height: 100%;object-fit: cover;object-position: top left;transition: transform .25s ease;}.ex:hover .ex-img img{transform: scale(1.015);}.ex-cap{display: flex;gap: 8px;align-items: baseline;margin-top: 10px;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.ex-cap strong{font-weight: 600;}.ex-cap span{color: var(--ink-muted);}@media (max-width: 900px){.ex-grid{grid-template-columns: repeat(2,minmax(0,1fr));}}@media (max-width: 560px){.ex-grid{grid-template-columns: minmax(0,1fr);}}.who{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 16px;}.who-card{display: flex;flex-direction: column;padding: 24px;border: 1px solid var(--line);border-radius: var(--r-panel);color: var(--ink);text-decoration: none;background: var(--surface-raised);}.who-card:hover{border-color: var(--accent);}.who-card h3{margin: 0 0 8px;font-size: 18px;line-height: 24px;font-weight: 600;letter-spacing: -0.025em;}.who-card p{margin: 0 0 20px;font-size: 15px;line-height: 23px;color: var(--ink-muted);letter-spacing: -0.016em;}.who-card .more{margin-top: auto;font-size: 14px;letter-spacing: -0.011em;}.who-card:hover .more{color: var(--accent-text);}@media (max-width: 1100px){.who{grid-template-columns: repeat(2,minmax(0,1fr));}}@media (max-width: 560px){.who{grid-template-columns: minmax(0,1fr);}}.inst-panel{margin-top: 20px;max-width: 860px;}.inst-panel>p{margin: 0;font-size: 16px;line-height: 25px;color: var(--ink-muted);letter-spacing: -0.02em;}.inst-panel .code{margin: 16px 0;}.inst-panel .code pre{white-space: pre-wrap;overflow-wrap: anywhere;}.inst-then{font-weight: 500;color: var(--ink) !important;}.h-end{margin-top: 128px;}.h-end-photo{position: relative;isolation: isolate;overflow: hidden;display: grid;place-items: center;padding: 96px 24px;border-radius: var(--r-panel);background: var(--accent) center 72% / cover no-repeat;}.h-end-photo::after{content: "";position: absolute;inset: 0;z-index: -1;opacity: .28;mix-blend-mode: overlay;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/v/https/opendesigner.dev/%23g)'/%3E%3C/svg%3E");}.h-end-card{width: 100%;max-width: 640px;padding: 40px;text-align: center;background: var(--surface-raised);border-radius: var(--r-panel);box-shadow: 0 1px 2px rgb(20 21 23 / .1),0 30px 60px -30px rgb(20 21 23 / .5);}.h-end-card .h-h2{margin-bottom: 24px;}.h-end-card .cmd{margin-inline: auto;text-align: left;}.h-end-card .h-cta{margin-top: 20px;}.h-credit{margin: 10px 0 0;font-size: 12px;line-height: 16px;color: var(--ink-muted);letter-spacing: 0;}.h-credit a{color: var(--ink-muted);}@media (max-width: 640px){.h-end-photo{padding: 40px 12px;}.h-end-card{padding: 28px 18px;}}.home + .foot{margin-top: 96px;}@supports (corner-shape: superellipse(1.35)){.h-step,.demo-panel,.demo-stage,.demo-tabs [role="tab"],.bento-card,.ex-img,.who-card,.h-end-photo,.h-end-card,.vg-files,.vg-qs,.vg-log,.h-zoom,.x-card{corner-shape: superellipse(1.35);--corner-k: 1.22;}}.h-h3{margin: 0;font-size: 22px;line-height: 28px;font-weight: 500;letter-spacing: -0.012em;}.h-sub{margin: 64px 0 28px;}.h-files{margin-top: 64px;}.h-files .h-lede{font-size: 17px;line-height: 27px;letter-spacing: -0.026em;}.craft{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 16px;}.craft-card{display: flex;flex-direction: column;padding: 20px;border: 1px solid var(--line);border-radius: var(--r-panel);background: var(--surface-raised);color: var(--ink);text-decoration: none;}.craft-card:hover{border-color: var(--accent);}.craft-card h3{margin: 16px 0 6px;font-size: 18px;line-height: 24px;font-weight: 600;letter-spacing: -0.025em;}.craft-card p{margin: 0 0 16px;font-size: 15px;line-height: 23px;color: var(--ink-muted);letter-spacing: -0.016em;}.craft-card .more{margin-top: auto;font-size: 14px;letter-spacing: -0.011em;}.craft-card:hover .more{color: var(--accent-text);}.craft-card .vg{position: relative;display: block;height: 96px;border-radius: var(--r-card);background: var(--surface-sunken);overflow: hidden;}.craft-card .vg i{position: absolute;display: block;}@media (max-width: 1100px){.craft{grid-template-columns: repeat(2,minmax(0,1fr));}}@media (max-width: 560px){.craft{grid-template-columns: minmax(0,1fr);}}.craft-motion .vg i{left: 16px;width: 14px;height: 14px;border-radius: 50%;background: var(--line-strong);}.craft-motion .vg i:nth-child(1){top: 20px;}.craft-motion .vg i:nth-child(2){top: 41px;background: var(--accent);}.craft-motion .vg i:nth-child(3){top: 62px;}.craft-card:hover .vg i:nth-child(2),.craft-card:focus-visible .vg i:nth-child(2){animation: craft-glide 2.4s cubic-bezier(0.23,1,0.32,1) infinite;}@keyframes craft-glide{0%,12%{transform: translateX(0);opacity: 1;}55%,80%{transform: translateX(160px);opacity: 1;}92%{transform: translateX(160px);opacity: 0;}100%{transform: translateX(0);opacity: 0;}}.craft-ux .vg i{top: 18px;width: calc(50% - 24px);height: 60px;border-radius: var(--r-control);background: var(--surface-raised);border: 1px solid var(--line);}.craft-ux .vg i:nth-child(1){left: 16px;box-shadow: inset 0 -14px 0 var(--ok-soft);}.craft-ux .vg i:nth-child(2){right: 16px;box-shadow: inset 0 -14px 0 var(--bad-soft);}.craft-ux .vg i:nth-child(3){display: none;}.craft-ui .vg i:nth-child(1){inset: 16px 24px;border-radius: 20px;background: var(--surface-raised);border: 1px solid var(--line);}.craft-ui .vg i:nth-child(2){inset: 28px 36px;border-radius: 8px;background: var(--accent-soft);}.craft-ui .vg i:nth-child(3){display: none;}.craft-res .vg i{left: 20px;height: 8px;border-radius: 4px;background: var(--line-strong);}.craft-res .vg i:nth-child(1){top: 26px;width: 58%;background: var(--accent);}.craft-res .vg i:nth-child(2){top: 44px;width: 72%;}.craft-res .vg i:nth-child(3){top: 62px;width: 46%;}@media (prefers-reduced-motion: reduce){.craft-motion .vg i:nth-child(2){animation: none;transform: translateX(160px);}}@supports (corner-shape: superellipse(1.35)){.craft-card,.craft-card .vg{corner-shape: superellipse(1.35);--corner-k: 1.22;}}.h-works{display: grid;justify-items: center;gap: 14px;margin: 32px auto 0;}.h-works .kicker{margin: 0;}.hosts{list-style: none;margin: 0;padding: 0;display: flex;flex-wrap: wrap;justify-content: center;gap: 10px 28px;}.hosts li{display: inline-flex;align-items: center;gap: 8px;font-size: 15px;line-height: 22px;letter-spacing: -0.016em;color: var(--ink);}.hosts .logo{color: var(--ink);flex: none;}@media (max-width: 640px){.hosts{gap: 10px 18px;}.hosts li{font-size: 14px;}}.tablist [role="tab"]{display: inline-flex;align-items: center;gap: 6px;}.tablist [role="tab"] .logo{flex: none;}.tablist [role="tab"] .logo + .logo{margin-left: -2px;}[role="tabpanel"]:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 4px;border-radius: var(--r-card);}.hh-bubble{display: inline-flex;align-items: center;gap: 8px;}.hh-bubble .hh-sw{box-shadow: 0 0 0 1.5px rgb(255 255 255 / .8);}.h-end-photo{grid-template-columns: minmax(0,640px);justify-content: center;}.h-end-card{min-width: 0;}.h-end-lede{margin: 0 auto;max-width: 40ch;font-size: 17px;line-height: 26px;color: var(--ink-muted);letter-spacing: -0.026em;}.h-files{align-items: center;}.bento-card .vg-big{font-size: 48px;line-height: 48px;}.h-announce{display: inline-flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 4px 0;margin: 0 0 28px;padding: 4px;border: 1px solid var(--line);border-radius: var(--r-pill);background: var(--surface-raised);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.h-pill-tag{padding: 4px 12px;border-radius: var(--r-pill);background: var(--accent-soft);color: var(--accent-text);font-weight: 600;}.h-announce a{display: inline-flex;align-items: center;gap: 6px;padding: 4px 12px 4px 12px;color: var(--ink);text-decoration: none;font-weight: 500;}.h-announce a:hover{color: var(--accent-text);}.hosts li{flex-direction: column;gap: 8px;width: 92px;text-align: center;font-size: 13px;line-height: 18px;color: var(--ink-muted);letter-spacing: -0.006em;}.host-tile{display: grid;place-items: center;width: 48px;height: 48px;border: 1px solid var(--line);border-radius: calc(14px * var(--corner-k,1));background: var(--surface-raised);box-shadow: 0 1px 2px rgb(20 21 23 / .05);}.hosts{gap: 16px 8px;}@media (max-width: 640px){.hosts li{width: 76px;}.host-tile{width: 44px;height: 44px;border-radius: calc(12px * var(--corner-k,1));}}@supports (corner-shape: superellipse(1.35)){.host-tile{corner-shape: superellipse(1.35);--corner-k: 1.22;}}.hh{grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);}.hh-ask{margin-top: 72px;}.hh-file{margin-top: 36px;}.hh-ui{margin-top: 0;box-shadow: 0 2px 4px rgb(20 21 23 / .1),0 40px 80px -32px rgb(20 21 23 / .55);}@media (max-width: 960px){.hh{grid-template-columns: minmax(0,1fr);}.hh-ask,.hh-file,.hh-ui{margin-top: 0;}}.hh-bubble{background: var(--ink);color: #fff;}.hh-bubble .hh-sw{box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9);}.hosts li{width: auto;min-width: 84px;white-space: nowrap;}@media (max-width: 640px){.hosts{gap: 14px 0;}.hosts li{width: 25%;min-width: 0;white-space: normal;font-size: 12px;line-height: 16px;}.h-announce{border-radius: var(--r-card);}}.h-cta{align-items: center;gap: 12px 28px;}.h-link{display: inline-flex;align-items: center;gap: 6px;min-height: 44px;font-size: 16px;line-height: 22px;font-weight: 600;letter-spacing: -0.02em;color: var(--ink);text-decoration: none;}.h-link:hover{color: var(--accent-text);}.h-link svg{transform: rotate(45deg);}.h-cmd-wrap{display: grid;justify-items: center;gap: 8px;margin-top: 32px;}.h-cmd-label{margin: 0;font-size: 13px;line-height: 18px;color: var(--ink-muted);letter-spacing: -0.006em;}.h-cmd-wrap .h-cmd{margin: 0;width: 100%;max-width: 560px;}.hh{grid-template-columns: repeat(3,minmax(0,1fr));align-items: stretch;}.hh-ask,.hh-file,.hh-ui{margin-top: 0;display: flex;flex-direction: column;}.hh-ui{box-shadow: 0 1px 2px rgb(20 21 23 / .08),0 24px 48px -24px rgb(20 21 23 / .4);}.hh .fig-card-h{min-height: 49px;box-sizing: border-box;}.hh-ask .fig-card-b{flex: 1;}.hh-file .hh-md{flex: 1;}.hh-ui .hh-app{flex: 1;display: flex;flex-direction: column;}.hh-ui .hh-actions{margin-top: auto;padding-top: 14px;}@media (max-width: 960px){.hh{grid-template-columns: minmax(0,1fr);}}.h-files{align-items: start;}.home-hero .fig-scene{padding: 40px;}@media (max-width: 1100px){.hh{grid-template-columns: minmax(0,1fr);max-width: 520px;gap: 16px;}}@media (max-width: 640px){.home-hero .fig-scene{padding: 16px;}}/* Motion (owner,2026-10-15: "use the Emil Kowalski skill to introduce motion to the landing page"). House standards from his work: a purpose for every movement,strong ease-out curves,transform and opacity only,nothing from scale(0),stagger 30-80 ms,no animation on keyboard actions,hover gated to fine pointers,and reduced motion means gentler,not none. */ :root{--ease-out-strong: cubic-bezier(0.23,1,0.32,1);}@keyframes h-rise{from{opacity: 0;transform: translateY(10px);}to{opacity: 1;transform: none;}}.h-announce,.h-title,.h-hero>.h-lede,.h-cta,.h-cmd-wrap{animation: h-rise 640ms var(--ease-out-strong) both;}.h-title{animation-delay: 60ms;}.h-hero>.h-lede{animation-delay: 120ms;}.h-cta{animation-delay: 180ms;}.h-cmd-wrap{animation-delay: 240ms;}/* 1b. The headline acts out what it says: its letters arrive loosely spaced and settle together (site.js,"gather"). Until the script takes over,the title waits hidden;if the script never runs,it rises on its own at 1.2 s. */ @media (prefers-reduced-motion: no-preference){.h-title.g-wait{animation-delay: 1200ms;}}.g-w{white-space: nowrap;}.g-c{display: inline-block;}.home-hero .fig-scene{animation: h-fade 800ms var(--ease-out-strong) 200ms both;}@keyframes h-fade{from{opacity: 0;}to{opacity: 1;}}@keyframes h-card{from{opacity: 0;transform: translateY(16px) scale(0.98);}to{opacity: 1;transform: none;}}.hh>.fig-card{animation: h-card 700ms var(--ease-out-strong) both;}.hh>.hh-ask{animation-delay: 420ms;}.hh>.hh-file{animation-delay: 540ms;}.hh>.hh-ui{animation-delay: 660ms;}.reveal-wait{opacity: 0;transform: translateY(12px);}.home .reveal{transition: opacity 600ms var(--ease-out-strong),transform 600ms var(--ease-out-strong);transition-delay: calc(var(--i,0) * 50ms);}@media (hover: hover) and (pointer: fine){.who-card,.craft-card,.ex{transition: transform 200ms var(--ease-out-strong),border-color 200ms ease;}.who-card:hover,.craft-card:hover,.ex:hover{transform: translateY(-2px);}}@keyframes panel-in{from{opacity: 0;transform: translateY(4px);}to{opacity: 1;transform: none;}}[role="tabpanel"].is-entering{animation: panel-in 220ms var(--ease-out-strong);}@media (prefers-reduced-motion: reduce){.h-announce,.h-title,.h-hero>.h-lede,.h-cta,.h-cmd-wrap,.hh>.fig-card,.home-hero .fig-scene{animation: h-fade 200ms ease both;animation-delay: 0ms;}.reveal-wait{transform: none;}.home .reveal{transition: opacity 200ms ease;transition-delay: 0ms;}.who-card:hover,.craft-card:hover,.ex:hover{transform: none;}[role="tabpanel"].is-entering{animation: h-fade 150ms ease;}}/* Nested corners (owner,2026-10-21,"fix it everywhere"): the bezel's radius is the stage's minus the stage padding,and the picture's is the bezel's minus its rim,so each pair of curves runs parallel (site/check_layout.py check 14). The padding is in vw,not %,so it resolves to the same length on the stage and on the bezel inside it. */ .stage{--stage-pad: clamp(16px,3vw,48px);position: relative;isolation: isolate;overflow: hidden;display: grid;place-items: center;padding: var(--stage-pad);border-radius: var(--r-panel);background: var(--accent) center / cover no-repeat;}.stage::after{content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;opacity: .26;mix-blend-mode: overlay;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/v/https/opendesigner.dev/%23g)'/%3E%3C/svg%3E");}.stage-in{--rim: 6px;--in-r: max(2px,calc(var(--r-panel) - var(--stage-pad)));position: relative;z-index: 2;width: 100%;padding: var(--rim);border-radius: var(--in-r);background: rgb(255 255 255 / .34);box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5),0 2px 4px rgb(10 14 40 / .12),0 32px 64px -28px rgb(10 14 40 / .6);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}.stage-in img,.stage-in picture{display: block;width: 100%;height: auto;border-radius: max(2px,calc(var(--in-r) - var(--rim)));}@supports (corner-shape: superellipse(1.35)){.stage,.stage-in,.stage-in img{corner-shape: superellipse(1.35);--corner-k: 1.22;}}.shot.staged{margin: 0;}.shot.staged figcaption{margin-top: 12px;font-size: 13px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.006em;}.shot.staged figcaption a{color: var(--ink-muted);}.screens{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 20px;}.screen{margin: 0;min-width: 0;}.screen.big{grid-column: 1 / -1;}.screen.big .stage{--stage-pad: clamp(16px,4vw,64px);}.screen figcaption{display: flex;gap: 8px;align-items: baseline;margin-top: 12px;font-size: 15px;line-height: 22px;letter-spacing: -0.016em;}.screen figcaption strong{font-weight: 600;}.screen figcaption span{color: var(--ink-muted);}@media (max-width: 760px){.screens{grid-template-columns: minmax(0,1fr);}}.demo-stage{background-color: var(--accent);background-position: center;background-size: cover;border: 0;position: relative;isolation: isolate;overflow: hidden;}.demo-stage::after{content: "";position: absolute;inset: 0;z-index: -1;opacity: .26;mix-blend-mode: overlay;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/v/https/opendesigner.dev/%23g)'/%3E%3C/svg%3E");}.demo-stage .x-card{position: relative;z-index: 1;box-shadow: 0 2px 4px rgb(10 14 40 / .12),0 32px 64px -28px rgb(10 14 40 / .6);}.h-steps{grid-auto-rows: auto;}.h-step{display: grid;grid-row: span 4;grid-template-rows: subgrid;row-gap: 0;}.h-step h3{margin: 14px 0 8px;font-size: 18px;line-height: 24px;font-weight: 600;letter-spacing: -0.025em;}.h-step .vg{margin-top: 0;padding-top: 24px;display: flex;}.h-step .vg>*{flex: 1;}.tablist.demo-tabs [role="tab"]{display: grid;align-content: start;gap: 2px;}.hh-ask .fig-card-b{display: flex;flex-direction: column;}.hh-answers{margin-top: auto;}.home p.kicker{margin: 0;}.h-head-row{align-items: last baseline;}.h-h3{font-size: clamp(24px,2.2vw,30px);line-height: 1.2;font-weight: 400;letter-spacing: 0.006em;}.h-head .h-lede,.h-split .h-lede{max-width: 54ch;}.h-sec .fig>figcaption,.h-fine{max-width: 72ch;}.h-step h3,.bento-card h3,.who-card h3,.craft-card h3{text-wrap: balance;}.h-step p,.bento-card p,.who-card p,.craft-card p{text-wrap: pretty;}.craft-card{padding: 24px;}.h-step,.bento-card,.demo-panel,.who-card,.craft-card{background: var(--surface-raised);}.h-step .vg>*,.bento-card .vg>*,.demo-stage{border-radius: var(--r-detail);}.craft-card{--cc-r: var(--r-panel);}.craft-card .vg{border-radius: max(2px,calc(var(--cc-r) - 25px));}.hosts li{width: 96px;min-width: 0;white-space: normal;}.tablist:not(.demo-tabs) [role="tab"][aria-selected="true"]{background: var(--accent-soft);border-color: var(--accent);color: var(--accent-text);box-shadow: inset 0 0 0 1px var(--accent);}.h-split .status{margin-top: 44px;}.tree li{align-items: baseline;}@media (max-width: 400px){.demo-stage{padding: 12px 8px;}.x-card{padding: var(--x-inset);}}@media (max-width: 380px){.h-title{font-size: 33px;line-height: 1.08;}}.piece figcaption span,.screen figcaption{text-wrap: balance;}.nav-book{font: 600 14px/20px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.011em;color: var(--ink);text-decoration: none;padding: 8px 4px;}.nav-book:hover{color: var(--accent-text);}@media (min-width: 421px){.bar-in{gap: 24px;}}.bar-in .top-nav{flex: 1;}@media (max-width: 720px){.nav-book{display: none;}}.h-book{display: grid;grid-template-columns: minmax(0,1fr) auto;gap: 24px 48px;align-items: end;padding: 40px;border: 1px solid var(--line);border-radius: var(--r-panel);background: var(--surface-raised);}.h-book .h-lede{margin-top: 16px;text-wrap: balance;}.h-book-act{display: grid;justify-items: start;gap: 12px;}@media (max-width: 860px){.h-book{grid-template-columns: minmax(0,1fr);padding: 28px 20px;}}.h-soon{display: inline-flex;align-items: center;min-height: 44px;font-size: 15px;font-weight: 600;color: var(--ink-muted);letter-spacing: -0.016em;}.h-contrib{display: flex;flex-wrap: wrap;align-items: baseline;gap: 8px 18px;margin: 20px 0 0;font-size: 15px;line-height: 22px;letter-spacing: -0.016em;}.h-contrib a{color: var(--ink);font-weight: 500;text-underline-offset: 3px;}.h-contrib a:hover{color: var(--accent-text);}.h-end-card .h-cta{gap: 12px 24px;}.h-first{padding-top: 56px;}.book-title{max-width: 18ch;margin-top: 8px;}.book-lede{margin-top: 16px !important;}.book-grid{display: grid;grid-template-columns: minmax(0,3fr) minmax(0,2fr);gap: 20px;margin: 40px 0 20px;align-items: stretch;}@media (max-width: 860px){.book-grid{grid-template-columns: minmax(0,1fr);}}.book-card{display: flex;flex-direction: column;padding: 28px;border: 1px solid var(--line);border-radius: var(--r-panel);background: var(--surface-raised);}.book-card.later{background: var(--surface-sunken);}.book-card h2{margin: 12px 0 8px;font-size: 24px;line-height: 30px;font-weight: 600;letter-spacing: 0.003em;}.book-card>p:not(.kicker){margin: 0;font-size: 16px;line-height: 25px;color: var(--ink-muted);letter-spacing: -0.02em;}.book-card>p.kicker{margin: 0;}.book-dl{margin: 20px 0 24px;border-top: 1px solid var(--line);}.book-dl>div{display: grid;grid-template-columns: 140px minmax(0,1fr);gap: 12px;padding: 12px 0;border-bottom: 1px solid var(--line);}.book-dl dt{font: 500 11px/18px "Source Code Pro",ui-monospace,monospace;letter-spacing: .07em;text-transform: uppercase;color: var(--ink-muted);}.book-dl dd{margin: 0;font-size: 15px;line-height: 22px;letter-spacing: -0.016em;}@media (max-width: 560px){.book-dl>div{grid-template-columns: minmax(0,1fr);gap: 4px;}}.book-act{margin-top: auto;}.book-card .h-soon{margin-top: auto;}@supports (corner-shape: superellipse(1.35)){.h-book,.book-card{corner-shape: superellipse(1.35);--corner-k: 1.22;}}.h-sec .h-lede,.h-book .h-lede{margin-left: 0;margin-right: 0;}.hosts li{width: auto;min-width: 96px;white-space: nowrap;padding-inline: 4px;}@media (max-width: 640px){.hosts li{width: auto;min-width: 88px;}}/* Opposite actions sit as far apart as the row allows,the secondary on the left and the primary on the right,on one row at every width (owner,2026-10-15: "maximum distance between two opposite CTAs so that there is no wrong action"). */ .x-actions,.hh-actions{justify-content: space-between;flex-wrap: nowrap;}.x-btn,.hh-btn{height: auto;min-height: var(--x-h);padding-block: 6px;white-space: normal;text-align: center;line-height: 1.2;}@media (max-width: 439px){.x-btn{font-size: 13px;padding-inline: 8px;white-space: nowrap;letter-spacing: -0.006em;}}@media (max-width: 640px){.demo-panel{padding: 16px;}.demo-stage{padding: 20px 8px;}.h-pill-tag{display: none;}.h-announce a{padding: 4px 8px;}}.btn{white-space: nowrap;}@media (max-width: 380px){.btn.lg{padding: 0 18px;font-size: 15px;}.book-card{padding: 20px;}}#evals .ev-stats{margin-top: 32px;}@media (min-width: 1024px){#evals .ev-stats[data-n="4"]{grid-template-columns: repeat(4,minmax(0,1fr));}}.h-more{margin: 20px 0 0;text-align: center;}.au{--au-issue: #c8202e;--au-ok: #12804a;margin-top: 8px;}.au-bar{display: flex;flex-wrap: wrap;align-items: center;gap: 12px 16px;}.au:not(.on) .au-bar .tablist,.au:not(.on) .au-replay{display: none;}.au-replay{display: inline-flex;align-items: center;gap: 6px;min-height: 40px;padding: 0 14px;border: 1px solid var(--line);border-radius: var(--r-pill);background: var(--surface-raised);color: var(--ink);font: 600 14px/20px "Hanken Grotesk",system-ui,sans-serif;cursor: pointer;transition: transform 160ms var(--ease-out-strong),border-color 150ms ease;letter-spacing: -0.011em;}.au-replay svg{width: 15px;height: 15px;}.au-replay:active{transform: scale(0.97);}@media (hover: hover) and (pointer: fine){.au-replay:hover{border-color: var(--line-strong);}}.au-status{flex: 1 1 260px;margin: 0;color: var(--ink-muted);font-size: 15px;line-height: 22px;text-align: right;letter-spacing: -0.016em;}.au-status b{color: var(--ink);font-weight: 600;}.au-body{display: grid;grid-template-columns: minmax(0,1fr) 320px;gap: 28px;margin-top: 16px;align-items: start;}.au-photo{--stage-pad: clamp(14px,3vw,40px);}.au .stage-in{--rim: 5px;}.au-win{overflow: hidden;border-radius: max(2px,calc(var(--in-r) - var(--rim)));background: #fdfdfd;}.au-chrome{display: flex;align-items: center;gap: 12px;height: 34px;padding: 0 12px;border-bottom: 1px solid #ebebeb;background: #f4f4f4;}.au-dots{display: flex;gap: 6px;}.au-dots i{width: 9px;height: 9px;border-radius: 50%;background: #d2d2d2;}.au-url{flex: 1;max-width: 340px;margin: 0 auto;padding: 2px 12px;border-radius: 7px;background: #fff;color: #575757;font: 500 12px/18px "Source Code Pro",ui-monospace,monospace;text-align: center;letter-spacing: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.au-stage{position: relative;overflow: hidden;background: #f9fafb;}.au-page{position: absolute;left: 0;top: 0;width: 1200px;transform-origin: 0 0;transform: scale(var(--k,0.6));}.au-cam{position: absolute;left: 0;top: 0;width: 100%;height: 100%;transform-origin: 0 0;}@media (max-width: 1000px){.au-stage{--k: 0.62;}}@media (max-width: 700px){.au-stage{--k: 0.27;}}.au-after{position: absolute;inset: 0;background: #fdfdfd;clip-path: inset(0 0 100% 0);}.au-mk{position: absolute;z-index: 2;opacity: 0;border: calc(2px * var(--zs,1)) dashed var(--au-issue);border-radius: calc(5px * var(--zs,1));box-shadow: 0 0 0 calc(1px * var(--zs,1)) rgb(255 255 255 / .9);pointer-events: none;}.au-mk b,.au-ok b{position: absolute;top: calc(-11px * var(--zs,1));left: calc(-11px * var(--zs,1));display: grid;place-items: center;width: calc(22px * var(--zs,1));height: calc(22px * var(--zs,1));border-radius: 50%;color: #fff;font: 600 calc(12px * var(--zs,1))/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0;box-shadow: 0 0 0 calc(2px * var(--zs,1)) #fff;}.au-mk b{background: var(--au-issue);}.au-mk.hl{border-style: solid;}.au-ok{position: absolute;z-index: 2;opacity: 0;pointer-events: none;}.au-ok b{background: var(--au-ok);}.au-ok b svg{width: calc(12px * var(--zs,1));height: calc(12px * var(--zs,1));}.au-line{position: absolute;left: 0;right: 0;top: 0;height: 0;opacity: 0;pointer-events: none;}.au-line::before{content: "";position: absolute;left: 0;right: 0;bottom: 0;height: calc(56px * var(--zs,1));background: linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent) 9%,transparent));}.au-line::after{content: "";position: absolute;left: 0;right: 0;bottom: calc(-1px * var(--zs,1));height: calc(2px * var(--zs,1));background: var(--accent);box-shadow: 0 0 12px color-mix(in srgb,var(--accent) 55%,transparent);}.au-line.fix::before{background: linear-gradient(to bottom,transparent,color-mix(in srgb,var(--au-ok) 12%,transparent));}.au-line.fix::after{background: var(--au-ok);box-shadow: 0 0 12px color-mix(in srgb,var(--au-ok) 55%,transparent);}.au-tag{position: absolute;right: 12px;bottom: 8px;padding: 3px 9px;border-radius: 999px;background: var(--accent);color: var(--on-accent);font: 600 12px/18px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0;white-space: nowrap;}.au-line.fix .au-tag{background: var(--au-ok);color: #fff;}.au-callout{position: absolute;z-index: 3;display: flex;gap: 8px;align-items: flex-start;max-width: 260px;padding: 8px 12px 9px 9px;border-radius: 10px;background: #1c1d21;color: #fff;font: 500 13px/18px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0;box-shadow: 0 8px 24px rgb(0 0 0 / .22);opacity: 0;pointer-events: none;}.au-callout b{flex: none;display: grid;place-items: center;width: 20px;height: 20px;border-radius: 50%;background: var(--au-issue);font-size: 11px;letter-spacing: 0.006em;}.au-tokens{position: absolute;z-index: 3;left: 14px;bottom: 14px;display: grid;gap: 4px;padding: 10px 12px 9px;border-radius: 12px;background: #fff;box-shadow: 0 0 0 1px rgb(0 0 0 / .06),0 10px 30px rgb(10 14 40 / .16);opacity: 0;pointer-events: none;}.au-tokens svg{width: 132px;height: 40px;}.au-tokens span{color: #575757;font: 600 11px/14px "Source Code Pro",ui-monospace,monospace;letter-spacing: .04em;text-transform: uppercase;}.au-chip{position: absolute;z-index: 4;left: 0;top: 0;padding: 3px 9px 3px 7px;border-radius: 999px;background: #fff;color: var(--au-ok);box-shadow: 0 0 0 1px color-mix(in srgb,var(--au-ok) 45%,transparent),0 6px 18px rgb(0 0 0 / .14);font: 600 12px/18px "Source Code Pro",ui-monospace,monospace;letter-spacing: 0;white-space: nowrap;pointer-events: none;}.au-list{margin: 0;padding: 0;list-style: none;display: grid;gap: 2px;}.au-list li{display: flex;gap: 12px;align-items: flex-start;padding: 9px 10px;border-radius: var(--r-card);transition: background-color 150ms ease;}.au-list li[hidden]{display: none;}@media (hover: hover) and (pointer: fine){.au-list li:hover{background: var(--surface-sunken);}}.au-list .n{flex: none;display: grid;place-items: center;width: 24px;height: 24px;border-radius: 50%;background: var(--au-issue);color: #fff;font: 600 12px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0;transition: background-color 200ms ease;}.au-list .n svg{width: 12px;height: 12px;display: none;}.au-list li.done .n{background: var(--au-ok);}.au-list li.done .n span{display: none;}.au-list li.done .n svg{display: block;}.au-list h3{margin: 1px 0 2px;font-size: 15px;line-height: 21px;font-weight: 600;text-wrap: balance;letter-spacing: -0.016em;}.au-list p{margin: 0;color: var(--ink-muted);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.au-list .g,.au-list .s{display: none;}.au-list li.done h3,.au-list li.done .m{display: none;}.au-list li.done .g{display: block;margin-top: 1px;color: var(--ink);font-weight: 500;text-wrap: pretty;}.au-list li.done .s{display: block;margin-top: 2px;color: var(--au-ok);font-size: 13px;line-height: 18px;font-weight: 600;font-variant-numeric: tabular-nums;letter-spacing: -0.006em;}.au-empty{margin: 0;padding: 9px 10px;color: var(--ink-muted);font-size: 15px;line-height: 22px;letter-spacing: -0.016em;}.au-empty[hidden],.au-cap[hidden]{display: none;}.au-cap{display: none;}@media (max-width: 400px){.au-replay{position: relative;width: 40px;padding: 0;justify-content: center;}.au-replay span{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;}}@media (max-width: 1000px){.au-body{grid-template-columns: minmax(0,1fr);gap: 12px;}.au-status{text-align: left;flex-basis: 100%;min-height: 44px;}}@media (max-width: 700px){.au-callout,.au-tag,.au-tokens,.au-chip{display: none;}.au-cap:not([hidden]){display: flex;gap: 8px;align-items: flex-start;min-height: 44px;margin: 10px 2px 0;color: var(--ink);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.au-cap b{flex: none;display: grid;place-items: center;width: 20px;height: 20px;border-radius: 50%;background: var(--au-issue);color: #fff;font: 600 11px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0.006em;}.au-cap.ok b{background: var(--au-ok);}.au-mk{border-width: calc(1.5px * var(--zs,1));}.au-mk b{top: calc(-9px * var(--zs,1));left: calc(-9px * var(--zs,1));width: calc(18px * var(--zs,1));height: calc(18px * var(--zs,1));font-size: calc(11px * var(--zs,1));box-shadow: 0 0 0 calc(1.5px * var(--zs,1)) #fff;}.au-ok b{top: calc(-9px * var(--zs,1));left: calc(-9px * var(--zs,1));width: calc(18px * var(--zs,1));height: calc(18px * var(--zs,1));box-shadow: 0 0 0 calc(1.5px * var(--zs,1)) #fff;}.au-ok b svg{width: calc(11px * var(--zs,1));height: calc(11px * var(--zs,1));}.au-chrome{height: 28px;}.au-url{font-size: 11px;}.au-list li{padding: 8px 4px;}}.home .tabs.tabs-on:not(.tr-engine){display: grid;grid-template-columns: minmax(0,1fr);}.home .tabs.tabs-on:not(.tr-engine)>[role="tabpanel"]{grid-row: 2;grid-column: 1;min-width: 0;}.home .tabs.tabs-on:not(.tr-engine)>[role="tabpanel"][hidden]{display: block;visibility: hidden;}.home .tabs.demo.tabs-on:not(.tr-engine)>.demo-panel[hidden]{display: grid;}.au-more{display: none;}@media (max-width: 1000px){[data-au].on .au-side{display: grid;grid-template-columns: minmax(0,1fr);align-content: start;}[data-au].on .au-side>.au-empty,[data-au].on .au-side>.au-more{grid-row: 1;grid-column: 1;}[data-au].on .au-side>.au-empty[hidden]{display: block;visibility: hidden;}[data-au].on .au-more{display: inline-flex;justify-self: start;align-items: center;min-height: 44px;margin: 0;padding: 0 10px;border: 0;background: none;color: var(--accent-text);font: 600 15px/22px "Hanken Grotesk",system-ui,sans-serif;cursor: pointer;letter-spacing: -0.016em;}[data-au].on .au-more[hidden]{visibility: hidden;}[data-au].on .au-more:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 2px;border-radius: var(--r-card);}[data-au].on:not(.au-open) .au-list{display: none;}}.cr{--cr-out: cubic-bezier(0.23,1,0.32,1);--cr-inout: cubic-bezier(0.77,0,0.175,1);--cr-drawer: cubic-bezier(0.32,0.72,0,1);--cr-ring: color-mix(in srgb,var(--ink) 13%,transparent);--cr-lift: 0 0 0 1px var(--cr-ring),0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent),0 10px 24px -12px color-mix(in srgb,var(--ink) 34%,transparent);}.cr .dd-art{overflow: visible;}.cr-meta{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 2px 12px;font: 400 12px/16px "Source Code Pro",ui-monospace,Menlo,monospace;letter-spacing: 0;color: var(--ink-muted);}.cr-meta>*{min-width: 0;overflow-wrap: anywhere;}.cr-meta b{font-weight: 500;color: var(--ink);}.cr-meta.stack{flex-direction: column;align-items: flex-start;}.cr-stage{position: relative;display: grid;gap: 12px;min-width: 0;border-radius: var(--r-control);}.cr-stage:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 4px;}.cr-foot{display: flex;flex-wrap: wrap;gap: 4px 16px;margin-top: 10px;font-size: 13px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.006em;}.cr-hint{display: inline-flex;align-items: center;gap: 8px;}.cr-hint::before{content: "";width: 8px;height: 8px;border-radius: 50%;background: var(--ok);flex: none;}.cr-hint-paused,.cr-rm{display: none;}.cr:is(:hover,:focus-within) .cr-loop{animation-play-state: paused;}.cr:is(:hover,:focus-within) .cr-hint::before{background: var(--warn);}.cr:is(:hover,:focus-within) .cr-hint-play{display: none;}.cr:is(:hover,:focus-within) .cr-hint-paused{display: inline;}@media (prefers-reduced-motion: reduce){.cr .cr-loop{animation: none !important;}.cr .cr-hint{display: none;}.cr .cr-rm{display: inline;}}.cr-ui{font-size: 14px;line-height: 20px;color: var(--ink);letter-spacing: -0.011em;}.cr-pill{display: inline-flex;align-items: center;justify-content: center;gap: 6px;min-height: 32px;padding: 0 14px;border-radius: var(--r-pill);background: var(--surface-raised);box-shadow: 0 0 0 1px var(--cr-ring);font-weight: 600;font-size: 13px;line-height: 18px;color: var(--ink);white-space: nowrap;letter-spacing: -0.006em;}.cr-pill.solid{background: var(--accent);color: var(--on-accent);box-shadow: none;}.cr-pill.danger{background: var(--bad);color: var(--on-accent);box-shadow: none;}.cr-pop{background: var(--surface-raised);border-radius: var(--r-control);box-shadow: var(--cr-lift);}.cr-win{position: relative;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: 0 0 0 1px var(--cr-ring);contain: paint;}.cr-skel{display: grid;gap: 8px;padding: 14px;}.cr-skel i{display: block;height: 8px;border-radius: 4px;background: var(--surface-sunken);}.cr-skel i:nth-child(1){width: 46%;height: 10px;background: color-mix(in srgb,var(--ink) 14%,var(--surface-sunken));}.cr-skel i:nth-child(2){width: 88%;}.cr-skel i:nth-child(3){width: 72%;}.cr-skel i:nth-child(4){width: 80%;}.cr-skel i:nth-child(5){width: 56%;}.cr-center{display: grid;justify-items: center;}.cr-lane{display: grid;grid-template-columns: 44px minmax(0,1fr);gap: 14px;align-items: center;padding: 14px 0;border-top: 1px solid var(--line);}.cr-lane:first-child{border-top: 0;padding-top: 0;}.cr-lane:last-child{padding-bottom: 0;}.cr-lane-b{display: grid;gap: 10px;min-width: 0;}.cr-curve{width: 44px;height: 44px;display: block;}.cr-curve .ax{fill: none;stroke: var(--line);stroke-width: 1.5;}.cr-curve .ln{fill: none;stroke: currentColor;stroke-width: 2.5;stroke-linecap: round;}.cr-track{position: relative;height: 16px;container-type: inline-size;}.cr-track::before{content: "";position: absolute;left: 0;right: 0;top: 7px;height: 2px;border-radius: 1px;background: var(--line);}.cr-track::after{content: "";position: absolute;right: 0;top: 0;width: 2px;height: 16px;border-radius: 1px;background: var(--line-strong);}.cr-dot{position: absolute;left: 0;top: 1px;width: 14px;height: 14px;border-radius: 50%;background: currentColor;transform: translateX(calc(100cqw - 14px));}.cr-dot.cr-loop{animation: cr-race 2.4s var(--cr-ease) infinite;}@keyframes cr-race{0%{transform: translateX(0);opacity: 1;}41.67%,80%{transform: translateX(calc(100cqw - 14px));opacity: 1;}88%{transform: translateX(calc(100cqw - 14px));opacity: 0;}89%{transform: translateX(0);opacity: 0;}100%{transform: translateX(0);opacity: 1;}}.cr-scene{position: relative;height: 158px;}.cr-trigger{width: 64px;}.cr-menu{position: absolute;top: 40px;left: 0;width: 164px;padding: 4px;display: grid;gap: 2px;transform-origin: 32px -6px;}.cr-menu{--menu-r: var(--r-control);}.cr-menu>span{padding: 6px 10px;border-radius: calc(var(--menu-r) - 4px);font-size: 14px;line-height: 20px;white-space: nowrap;letter-spacing: -0.011em;}.cr-menu>.on{background: var(--accent-soft);color: var(--accent-text);font-weight: 500;}.cr-menu.o-center{transform-origin: center;}.cr-origin{position: absolute;z-index: 2;width: 14px;height: 14px;margin: -7px 0 0 -7px;border-radius: 50%;box-shadow: 0 0 0 2px var(--accent),inset 0 0 0 1px var(--surface-raised);pointer-events: none;}.cr-origin::after{content: "";position: absolute;left: 5px;top: 5px;width: 4px;height: 4px;border-radius: 50%;background: var(--accent);}.cr-d180{animation: cr-d180 2.4s var(--cr-out) infinite;}.cr-d400{animation: cr-d400 2.4s var(--cr-out) infinite;}@keyframes cr-d180{0%{opacity: 0;transform: scale(0.95);}7.5%,70%{opacity: 1;transform: none;}77.5%,100%{opacity: 0;transform: scale(0.95);}}@keyframes cr-d400{0%{opacity: 0;transform: scale(0.95);}16.67%,70%{opacity: 1;transform: none;}86.67%,100%{opacity: 0;transform: scale(0.95);}}.cr-zero{animation: cr-zero 2.4s var(--cr-out) infinite;}.cr-soft{animation: cr-soft 2.4s var(--cr-out) infinite;}@keyframes cr-zero{0%{transform: scale(0);}8.33%,70%{transform: none;}78.33%,100%{transform: scale(0);}}@keyframes cr-soft{0%{opacity: 0;transform: scale(0.95);}8.33%,70%{opacity: 1;transform: none;}78.33%,100%{opacity: 0;transform: scale(0.95);}}.cr-grow{animation: cr-grow 3s var(--cr-out) infinite;}@keyframes cr-grow{0%{opacity: 0;transform: scale(0.9);}20%,65%{opacity: 1;transform: none;}85%,100%{opacity: 0;transform: scale(0.9);}}.cr-press-art{display: grid;justify-items: center;gap: 14px;padding: 22px 14px 16px;}.cr-btn{appearance: none;border: 0;margin: 0;min-height: 44px;padding: 0 22px;border-radius: var(--r-pill);background: var(--accent);color: var(--on-accent);font: 600 15px/20px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: -0.016em;cursor: pointer;touch-action: manipulation;-webkit-tap-highlight-color: transparent;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;}.cr-btn:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 2px;}.cr-btn.pressable{transition: transform 160ms var(--cr-out);}.cr-btn.pressable:active{transform: scale(0.97);}@media (prefers-reduced-motion: reduce){.cr-btn.pressable:active{transform: none;background: var(--accent-text);}}.cr-hold{position: relative;background: var(--bad-soft);color: var(--bad);box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--bad) 35%,transparent);}.cr-hold-fill{position: absolute;inset: 0;display: grid;place-items: center;border-radius: inherit;background: var(--bad);color: var(--on-accent);clip-path: inset(0 100% 0 0);pointer-events: none;}.cr-hold.snappy{transition: transform 160ms var(--cr-out);}.cr-hold.snappy .cr-hold-fill{transition: clip-path 200ms var(--cr-out);}.cr-hold.snappy:active .cr-hold-fill{transition: clip-path 2s linear;clip-path: inset(0 0 0 0);}.cr-hold.even .cr-hold-fill{transition: clip-path 2s linear;}.cr-hold.even:active .cr-hold-fill{clip-path: inset(0 0 0 0);}.cr-hold:active{transform: scale(0.97);}@media (prefers-reduced-motion: reduce){.cr .cr-hold.snappy .cr-hold-fill{transition: clip-path 200ms var(--cr-out) !important;}.cr .cr-hold.snappy:active .cr-hold-fill,.cr .cr-hold.even .cr-hold-fill{transition: clip-path 2s linear !important;}.cr-hold:active{transform: none;}}.cr-toastwin{height: 136px;}.cr-toast{position: absolute;right: 12px;bottom: 12px;display: flex;align-items: center;gap: 8px;max-width: calc(100% - 24px);padding: 10px 14px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: var(--cr-lift);font-size: 14px;line-height: 20px;white-space: nowrap;letter-spacing: -0.011em;}.cr-toast::before{content: "";width: 8px;height: 8px;border-radius: 50%;background: var(--ok);flex: none;}.cr-t-same{animation: cr-t-same 3s var(--cr-out) infinite;}.cr-t-away{animation: cr-t-away 3s var(--cr-out) infinite;}@keyframes cr-t-same{0%{opacity: 0;transform: translateY(calc(100% + 12px));}10%,70%{opacity: 1;transform: none;}78.33%,100%{opacity: 0;transform: translateY(calc(100% + 12px));}}@keyframes cr-t-away{0%{opacity: 0;transform: translateY(calc(100% + 12px));}10%,70%{opacity: 1;transform: none;}80%,100%{opacity: 0;transform: translateY(-150%);}}.cr-list{display: grid;gap: 6px;}.cr-row{display: flex;align-items: center;gap: 10px;min-width: 0;padding: 8px 10px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: 0 0 0 1px var(--cr-ring);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.cr-row>i{width: 22px;height: 22px;border-radius: 50%;background: var(--accent-soft);flex: none;}.cr-row>span{flex: 1;min-width: 0;}.cr-row>small{font: 400 12px/16px "Source Code Pro",ui-monospace,monospace;color: var(--ink-muted);}.cr-rise{animation: cr-rise 2.4s var(--cr-out) calc(var(--i,0) * 50ms) infinite both;}.cr-rise-all{animation: cr-rise 2.4s var(--cr-out) infinite both;}@keyframes cr-rise{0%{opacity: 0;transform: translateY(8px);}12.5%,75%{opacity: 1;transform: none;}85%,100%{opacity: 0;transform: translateY(8px);}}.cr-switches{display: grid;justify-items: center;gap: 10px;padding: 12px 0 4px;}.cr-switch{position: relative;display: inline-flex;align-items: center;gap: 12px;min-height: 44px;padding: 0 4px;font-size: 15px;line-height: 20px;cursor: pointer;user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;letter-spacing: -0.016em;}.cr-switch input{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer;}.cr-sw{position: relative;width: 52px;height: 32px;border-radius: var(--r-pill);background: var(--line-strong);flex: none;}.cr-sw::before{content: "";position: absolute;inset: 0;border-radius: inherit;background: var(--accent);opacity: 0;}.cr-knob{position: absolute;top: 3px;left: 3px;width: 26px;height: 26px;border-radius: 50%;background: var(--surface-raised);box-shadow: 0 1px 3px color-mix(in srgb,var(--ink) 30%,transparent);}.cr-switch input:focus-visible + .cr-sw{outline: 2px solid var(--focus-ring);outline-offset: 2px;}.cr-switch input:checked + .cr-sw::before{opacity: 1;}.cr-switch input:checked + .cr-sw .cr-knob{transform: translateX(20px);}.cr-sw-t .cr-knob{transition: transform 400ms ease;}.cr-sw-t .cr-sw::before{transition: opacity 400ms ease;}.cr-sw-k .cr-knob{animation: cr-knob-off 400ms ease both;}.cr-sw-k .cr-sw::before{animation: cr-fill-off 400ms ease both;}.cr-sw-k input:checked + .cr-sw .cr-knob{animation: cr-knob-on 400ms ease both;}.cr-sw-k input:checked + .cr-sw::before{animation: cr-fill-on 400ms ease both;}@keyframes cr-knob-on{from{transform: none;}to{transform: translateX(20px);}}@keyframes cr-knob-off{from{transform: translateX(20px);}to{transform: none;}}@keyframes cr-fill-on{from{opacity: 0;}to{opacity: 1;}}@keyframes cr-fill-off{from{opacity: 1;}to{opacity: 0;}}.cr-sheetwin{height: 132px;}.cr-sheet{position: absolute;left: 12px;right: 12px;bottom: 12px;padding: 12px 14px;display: grid;gap: 4px;}.cr-sheet b{font-weight: 600;}.cr-sheet span{color: var(--ink-muted);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-cut{animation: cr-cut 2.4s linear infinite;}.cr-fade{animation: cr-fade 2.4s ease infinite;}@keyframes cr-cut{0%,9.99%{opacity: 0;}10%,69.99%{opacity: 1;}70%,100%{opacity: 0;}}@keyframes cr-fade{0%{opacity: 0;}8.33%,70%{opacity: 1;}78.33%,100%{opacity: 0;}}.cr-freq{display: grid;}.cr-freq-row{display: grid;grid-template-columns: minmax(0,1fr) minmax(0,220px);gap: 8px 24px;align-items: center;padding: 14px 0;border-top: 1px solid var(--line);}.cr-freq-row:first-child{border-top: 0;padding-top: 0;}.cr-freq-row:last-child{padding-bottom: 0;}.cr-freq-k{display: grid;gap: 2px;min-width: 0;}.cr-freq-k strong{font-weight: 600;font-size: 15px;line-height: 22px;letter-spacing: -0.016em;}.cr-freq-k span:not(.kicker){font-size: 14px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.011em;}.cr-freq-v{display: grid;gap: 8px;justify-items: start;min-width: 0;}.cr-freq-v .fig-bar{width: 100%;}@media (max-width: 560px){.cr-freq-row{grid-template-columns: minmax(0,1fr);}}.cr-steps{display: grid;gap: 20px;}.cr-steps-h{display: flex;flex-wrap: wrap;align-items: center;gap: 6px 10px;margin-bottom: 10px;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.cr-steps .flow-box{font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.cr-steps .flow-box span:not(.kicker){font-size: 13px;line-height: 18px;color: var(--ink-muted);letter-spacing: -0.006em;}.cr-steps .flow-box.is-skipped{background: var(--surface-sunken);border-style: dashed;color: var(--ink-muted);}.cr-steps-note{margin-top: 8px;font-size: 13px;line-height: 18px;color: var(--ink-muted);letter-spacing: -0.006em;}.cr-cmd{padding: 6px;}.cr-cmd-in{display: flex;align-items: center;justify-content: space-between;gap: 8px;padding: 6px 8px 10px;margin-bottom: 6px;border-bottom: 1px solid var(--line);color: var(--ink-muted);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.cr-cmd-list{position: relative;display: grid;}.cr-cmd-list>span{position: relative;z-index: 1;height: 32px;display: flex;align-items: center;padding: 0 10px;font-size: 14px;line-height: 20px;white-space: nowrap;letter-spacing: -0.011em;}.cr-hl{position: absolute;left: 0;right: 0;top: 0;height: 32px;border-radius: var(--r-detail);background: var(--accent-soft);box-shadow: inset 2px 0 0 var(--accent);transform: translateY(128px);}.cr-key{position: relative;display: inline-grid;place-items: center;min-width: 26px;height: 26px;padding: 0 6px;border-radius: var(--r-detail);background: var(--surface-raised);box-shadow: 0 0 0 1px var(--cr-ring),0 1px 0 1px var(--cr-ring);font: 500 13px/1 "Source Code Pro",ui-monospace,monospace;color: var(--ink);}.cr-key::after{content: "";position: absolute;inset: -3px;border-radius: 8px;box-shadow: 0 0 0 2px var(--accent);opacity: 0;}.cr-key.cr-loop::after{animation: cr-keyflash 2.4s linear infinite;}.cr:is(:hover,:focus-within) .cr-key.cr-loop::after{animation-play-state: paused;}@media (prefers-reduced-motion: reduce){.cr .cr-key.cr-loop::after{animation: none !important;}}.cr-hl-jump{animation: cr-hl-jump 2.4s step-end infinite;}.cr-hl-ease{animation: cr-hl-ease 2.4s var(--cr-out) infinite;}@keyframes cr-hl-jump{0%{transform: translateY(0);}25%{transform: translateY(32px);}37.5%{transform: translateY(64px);}50%{transform: translateY(96px);}62.5%,100%{transform: translateY(128px);}}@keyframes cr-hl-ease{0%,25%{transform: translateY(0);}33.33%,37.5%{transform: translateY(32px);}45.83%,50%{transform: translateY(64px);}58.33%,62.5%{transform: translateY(96px);}70.83%,99.9%{transform: translateY(128px);}100%{transform: translateY(0);}}@keyframes cr-keyflash{0%,24.9%{opacity: 0;}25%,29%{opacity: 1;}29.1%,37.4%{opacity: 0;}37.5%,41.5%{opacity: 1;}41.6%,49.9%{opacity: 0;}50%,54%{opacity: 1;}54.1%,62.4%{opacity: 0;}62.5%,66.5%{opacity: 1;}66.6%,100%{opacity: 0;}}@property --cr-warm{syntax: "<number>";inherits: true;initial-value: 0;}.cr-toolsart{display: grid;justify-items: center;gap: 12px;padding: 44px 14px 16px;}.cr-tools{--cr-warm: 0;position: relative;display: inline-flex;gap: 4px;padding: 4px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: var(--cr-lift);transition: --cr-warm 0s;}.cr-tool{position: relative;display: grid;place-items: center;width: 36px;height: 36px;padding: 0;border: 0;border-radius: var(--r-detail);background: none;color: var(--ink);cursor: default;touch-action: manipulation;-webkit-tap-highlight-color: transparent;}.cr-tool svg{width: 18px;height: 18px;display: block;}.cr-tool:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 2px;}.cr-tip{position: absolute;bottom: calc(100% + 10px);left: 50%;translate: -50% 0;padding: 4px 8px;border-radius: var(--r-detail);background: var(--ink);color: var(--surface-raised);font: 600 12px/16px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0;white-space: nowrap;pointer-events: none;opacity: 0;transform-origin: 50% 100%;}@keyframes cr-tip-in{from{opacity: 0;transform: scale(0.97);}to{opacity: 1;transform: none;}}@keyframes cr-tip-fade{from{opacity: 0;}to{opacity: 1;}}@media (hover: hover) and (pointer: fine){.cr-tools.slow .cr-tool:hover .cr-tip{animation: cr-tip-in 125ms var(--cr-out) 500ms both;}.cr-tools.warm:hover{--cr-warm: 1;transition: --cr-warm 0s 625ms;}.cr-tools.warm .cr-tool:hover .cr-tip{animation: cr-tip-in calc((1 - var(--cr-warm)) * 125ms) var(--cr-out) calc((1 - var(--cr-warm)) * 500ms) both;}}.cr-tools.slow .cr-tool:focus-visible .cr-tip{animation: cr-tip-in 125ms var(--cr-out) 500ms both;}.cr-tools.warm:focus-within{--cr-warm: 1;transition: --cr-warm 0s 625ms;}.cr-tools.warm .cr-tool:focus-visible .cr-tip{animation: cr-tip-in calc((1 - var(--cr-warm)) * 125ms) var(--cr-out) calc((1 - var(--cr-warm)) * 500ms) both;}@media (prefers-reduced-motion: reduce){.cr .cr-tools{transition: --cr-warm 0s !important;}.cr .cr-tools.warm:focus-within{transition: --cr-warm 0s 625ms !important;}.cr .cr-tools .cr-tool:focus-visible .cr-tip{animation-name: cr-tip-fade !important;animation-duration: 125ms !important;animation-delay: 500ms !important;animation-fill-mode: both !important;}.cr .cr-tools.warm .cr-tool:focus-visible .cr-tip{animation-duration: calc((1 - var(--cr-warm)) * 125ms) !important;animation-delay: calc((1 - var(--cr-warm)) * 500ms) !important;}}@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine){.cr .cr-tools.warm:hover{transition: --cr-warm 0s 625ms !important;}.cr .cr-tools .cr-tool:hover .cr-tip{animation-name: cr-tip-fade !important;animation-duration: 125ms !important;animation-delay: 500ms !important;animation-fill-mode: both !important;}.cr .cr-tools.warm .cr-tool:hover .cr-tip{animation-duration: calc((1 - var(--cr-warm)) * 125ms) !important;animation-delay: calc((1 - var(--cr-warm)) * 500ms) !important;}}.cr-touch-note{display: none;font-size: 13px;line-height: 18px;color: var(--ink-muted);text-align: center;letter-spacing: -0.006em;}@media (hover: none){.cr-touch-note{display: block;}}.cr-stackwin{height: 264px;}.cr-stack{position: absolute;right: 16px;bottom: 16px;width: 228px;max-width: calc(100% - 32px);height: 48px;}.cr-stack>div{position: absolute;left: 0;right: 0;bottom: 0;height: 48px;display: flex;align-items: center;gap: 8px;padding: 0 8px 0 14px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: var(--cr-lift);font-size: 14px;line-height: 20px;white-space: nowrap;transform-origin: 50% 0;transition: transform 400ms ease;letter-spacing: -0.011em;}.cr-stack>div>span{flex: 1;min-width: 0;}.cr-stack>.t0{z-index: 3;}.cr-stack>.t1{z-index: 2;transform: translateY(-14px) scale(0.95);}.cr-stack>.t2{z-index: 1;transform: translateY(-28px) scale(0.9);}.cr-stack:focus-within>.t1{transform: translateY(-62px);}.cr-stack:focus-within>.t2{transform: translateY(-124px);}@media (hover: hover) and (pointer: fine){.cr-stack::after{content: "";position: absolute;left: 0;right: 0;bottom: 100%;height: 0;}.cr-stack:hover::after{height: 124px;}.cr-stack:hover>.t1{transform: translateY(-62px);}.cr-stack:hover>.t2{transform: translateY(-124px);}}.cr-undo{appearance: none;border: 0;margin: 0;min-height: 32px;padding: 0 12px;border-radius: var(--r-pill);background: var(--ink);color: var(--surface-raised);font: 600 13px/18px "Hanken Grotesk",system-ui,sans-serif;cursor: pointer;touch-action: manipulation;flex: none;letter-spacing: -0.006em;}.cr-undo:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 2px;}.cr-pile{position: absolute;left: 12px;right: 12px;top: 12px;display: grid;gap: 6px;}.cr-pile>div{display: flex;flex-wrap: wrap;align-items: center;gap: 6px 8px;min-width: 0;padding: 7px 8px 7px 12px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: var(--cr-lift);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-pile>div>span:first-child{flex: 1 1 112px;min-width: 0;}.cr-pile .chip{flex: none;}.cr-phones{display: grid;justify-items: center;}.cr-phone{position: relative;width: 168px;height: 300px;border-radius: 30px;background: var(--surface-raised);box-shadow: 0 0 0 6px var(--ink),0 0 0 7px var(--cr-ring);contain: paint;}.cr-phone .cr-skel{padding: 28px 16px 16px;}.cr-scrim{position: absolute;inset: 0;background: color-mix(in srgb,var(--ink) 40%,transparent);}.cr-drawer{position: absolute;left: 0;right: 0;bottom: 0;height: 58%;padding: 10px 16px 16px;display: grid;align-content: start;gap: 8px;border-radius: 22px 22px 0 0;background: var(--surface-raised);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-drawer::before{content: "";justify-self: center;width: 36px;height: 5px;border-radius: 3px;background: var(--line-strong);}.cr-drawer b{font-weight: 600;font-size: 15px;line-height: 20px;letter-spacing: -0.016em;}.cr-drawer .cr-pill{justify-self: stretch;margin-top: 6px;}.cr-dialog{position: absolute;left: 14px;right: 14px;top: 50%;translate: 0 -50%;padding: 14px;display: grid;gap: 6px;border-radius: 18px;background: var(--surface-raised);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-dialog b{font-weight: 600;font-size: 15px;line-height: 20px;letter-spacing: -0.016em;}.cr-dialog .cr-pill{min-height: 28px;font-size: 12px;letter-spacing: 0;}.cr-dialog .cr-pill.ghost{box-shadow: none;background: var(--surface-sunken);}.cr-dialog-row{display: flex;justify-content: flex-end;gap: 6px;margin-top: 4px;}.cr-sheet-up{animation: cr-sheet-up 3s var(--cr-drawer) infinite;}.cr-scrim-in{animation: cr-scrim-in 3s var(--cr-drawer) infinite;}@keyframes cr-sheet-up{0%{transform: translateY(100%);}16.67%,66.67%{transform: none;}83.33%,100%{transform: translateY(100%);}}@keyframes cr-scrim-in{0%{opacity: 0;}16.67%,66.67%{opacity: 1;}83.33%,100%{opacity: 0;}}.cr-form{display: grid;gap: 6px;padding: 14px;}.cr-form label,.cr-form .lab{font-size: 13px;line-height: 18px;font-weight: 600;letter-spacing: -0.006em;}.cr-field{display: flex;align-items: center;min-height: 40px;padding: 0 12px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: 0 0 0 1px var(--line-strong);font-size: 16px;line-height: 22px;color: var(--ink);min-width: 0;overflow-wrap: anywhere;letter-spacing: -0.02em;}.cr-field.bad{box-shadow: 0 0 0 2px var(--bad);}.cr-err{display: flex;gap: 6px;align-items: flex-start;font-size: 13px;line-height: 18px;color: var(--bad);letter-spacing: -0.006em;}.cr-err svg{width: 16px;height: 16px;flex: none;margin-top: 1px;}.cr-form .cr-pill{justify-self: start;margin-top: 8px;}.cr-modalwin{min-height: 236px;}.cr-modalwin .cr-scrim{z-index: 1;}.cr-alert{position: absolute;z-index: 2;left: 50%;top: 50%;translate: -50% -50%;width: min(220px,calc(100% - 24px));padding: 14px;display: grid;gap: 6px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: var(--cr-lift);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-alert b{font-size: 15px;line-height: 20px;font-weight: 600;letter-spacing: -0.016em;}.cr-alert .cr-pill{justify-self: end;min-height: 28px;font-size: 12px;letter-spacing: 0;}.cr-alert .cr-dialog-row .cr-pill{justify-self: auto;}.cr-alert .cr-pill.ghost{box-shadow: none;background: var(--surface-sunken);}.cr-inbox{display: grid;gap: 0;padding: 6px 12px 12px;}.cr-inbox>div{display: flex;align-items: center;gap: 10px;min-width: 0;padding: 9px 2px;border-top: 1px solid var(--line);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-inbox>div:first-child{border-top: 0;}.cr-inbox>div>i{width: 20px;height: 20px;border-radius: 50%;background: var(--accent-soft);flex: none;}.cr-inbox>div>span{flex: 1;min-width: 0;overflow-wrap: anywhere;}.cr-inbox>div.gone{opacity: .45;text-decoration: line-through;text-decoration-color: var(--ink-muted);}.cr-toast.still{position: absolute;right: 12px;bottom: 12px;left: 12px;justify-content: space-between;white-space: normal;padding: 6px 6px 6px 14px;}.cr-toast.still>span:first-child{flex: 1;min-width: 0;}.cr-toast.still>.cr-pill{flex: none;}.cr-toast.still .cr-undo{min-height: 30px;}.cr-swipe{display: grid;gap: 10px;}.cr-lanebox{position: relative;height: 72px;border-radius: var(--r-control);background: var(--surface-raised);box-shadow: 0 0 0 1px var(--cr-ring);contain: paint;}.cr-lanebox .cr-toast{left: 12px;right: auto;bottom: 10px;z-index: 1;}.cr-lanebox .cr-ghost{opacity: .35;}.cr-mark{position: absolute;top: 6px;bottom: 6px;width: 0;border-left: 2px dashed var(--line-strong);}.cr-mark span{position: absolute;top: -2px;right: 6px;font: 500 11px/14px "Source Code Pro",ui-monospace,monospace;color: var(--ink-muted);white-space: nowrap;}.cr-flick{position: absolute;height: 2px;background: var(--accent);top: 50%;}.cr-flick::after{content: "";position: absolute;right: -2px;top: -4px;border: 5px solid transparent;border-left: 7px solid var(--accent);border-right: 0;}.cr-swipe .cr-meta{justify-content: flex-start;}.cr-ann{position: relative;}.cr-ann .ann-dot.abs{transform: translate(-50%,-50%);}.cr-spec{display: grid;gap: 18px;padding: 8px 0;}.cr-spec-display{font-size: 34px;line-height: 1.05;font-weight: 600;letter-spacing: -0.02em;margin: 0;}.cr .cr-spec .cr-spec-display{letter-spacing: -0.02em;}.cr-spec-label{font-size: 11px;line-height: 16px;font-weight: 600;text-transform: uppercase;}.cr .cr-spec .cr-spec-label{letter-spacing: 0.07em;}.cr-spec-body{font-size: 16px;line-height: 1.5;max-width: 65ch;margin: 0;letter-spacing: -0.02em;}.cr .cr-spec .cr-spec-body{letter-spacing: 0;}.cr-ann-wrap{position: relative;padding-left: 30px;}.cr-ann-wrap>.ann-dot{position: absolute;left: 0;top: 2px;}.cr-amounts{display: grid;gap: 0;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;}.cr-amounts>div{display: flex;justify-content: space-between;gap: 12px;padding: 7px 0;border-top: 1px solid var(--line);}.cr-amounts>div:first-child{border-top: 0;}.cr-amounts .v{text-align: right;white-space: nowrap;}.cr-amounts .tab{font-variant-numeric: tabular-nums;}.cr-amounts .pn1{margin-inline: -0.11em;}.cr .cr-amounts{letter-spacing: 0;}.cr-guide{position: relative;}.cr-guide::after{content: "";position: absolute;top: 0;bottom: 0;right: 2ch;border-right: 1px dashed var(--accent);opacity: .7;}.cr-card-demo{padding: 16px;border-radius: var(--r-control);background: var(--surface-raised);display: grid;gap: 4px;font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.cr-card-demo b{font-weight: 600;font-size: 15px;letter-spacing: -0.016em;}.cr-card-demo span{color: var(--ink-muted);}.cr-card-demo.hard{box-shadow: none;border: 1px solid var(--line-strong);}.cr-card-demo.soft{box-shadow: var(--cr-lift);}.cr-cards{display: grid;gap: 14px;padding: 6px;}.cr-settings{display: grid;gap: 0;padding: 4px 14px;}.cr-settings>div{display: flex;justify-content: space-between;align-items: baseline;flex-wrap: wrap;gap: 4px 12px;padding: 10px 0;border-top: 1px solid var(--line);font-size: 14px;line-height: 20px;letter-spacing: -0.011em;}.cr-settings>div:first-child{border-top: 0;}.cr-settings em{font-style: italic;}.cr-settings u{text-decoration: underline;text-underline-offset: 3px;}.cr-settings a{color: var(--accent-text);}.cr-settings .muted{color: var(--ink-muted);}.cr-edgewin{height: 196px;}.cr-bar{position: absolute;left: 0;right: 0;top: 0;z-index: 2;height: 44px;display: flex;align-items: center;justify-content: space-between;padding: 0 14px;font-weight: 600;font-size: 14px;background: color-mix(in srgb,var(--surface-raised) 86%,transparent);letter-spacing: -0.011em;}.cr-bar.line{box-shadow: 0 1px 0 var(--line-strong);}.cr-bar.fadeedge::after{content: "";position: absolute;left: 0;right: 0;top: 100%;height: 18px;background: linear-gradient(var(--surface-raised),color-mix(in srgb,var(--surface-raised) 0%,transparent));pointer-events: none;}.cr-feed{position: absolute;left: 0;right: 0;top: 34px;display: grid;gap: 8px;padding: 0 14px;}.cr-feed>div{display: flex;gap: 10px;align-items: center;padding: 8px 10px;border-radius: var(--r-control);background: var(--surface-sunken);font-size: 13px;line-height: 18px;letter-spacing: -0.006em;}.cr-feed>div>i{width: 22px;height: 22px;border-radius: 50%;background: var(--accent-soft);flex: none;}.cr-measure{position: relative;display: grid;place-items: center;min-height: 168px;}.cr-hit{position: relative;width: 44px;height: 44px;display: grid;place-items: center;border-radius: var(--r-detail);outline: 1.5px dashed var(--accent);outline-offset: -1px;background: var(--accent-soft);}.cr-hit-floor{position: absolute;left: 10px;top: 10px;width: 24px;height: 24px;outline: 1.5px solid var(--ok);outline-offset: -1px;border-radius: 4px;}.cr-hit-icon{position: relative;width: 20px;height: 20px;display: grid;place-items: center;border-radius: 4px;background: var(--surface-raised);color: var(--ink);box-shadow: 0 0 0 1px var(--cr-ring);}.cr-hit-icon svg{width: 14px;height: 14px;}.cr-focus-demo{display: inline-flex;align-items: center;justify-content: center;min-height: 40px;padding: 0 18px;border-radius: var(--r-pill);background: var(--accent);color: var(--on-accent);font-weight: 600;font-size: 14px;outline: 2px solid var(--focus-ring);outline-offset: 2px;letter-spacing: -0.011em;}.cr-dim{font: 500 12px/16px "Source Code Pro",ui-monospace,monospace;color: var(--ink-muted);white-space: nowrap;}.cr-fills{display: grid;gap: 14px;}.cr-fill{display: flex;align-items: center;gap: 12px;min-width: 0;}.cr-fill>.s{flex: none;display: inline-flex;align-items: center;justify-content: center;min-width: 104px;min-height: 36px;padding: 0 14px;border-radius: var(--r-pill);font-weight: 600;font-size: 14px;line-height: 18px;letter-spacing: -0.011em;}.cr-fill>.m{flex: 1;min-width: 0;font-size: 13px;line-height: 18px;overflow-wrap: anywhere;letter-spacing: -0.006em;}.cr-fill>.m .mono{font-size: 12px;color: var(--ink-muted);letter-spacing: 0;}.cr-fill>.chip{flex: none;}.cr-fills{container-type: inline-size;}@container (max-width: 360px){.cr-fill{flex-wrap: wrap;row-gap: 6px;}.cr-fill>.m{flex-basis: 100%;order: 3;}}.cr-src{display: grid;gap: 10px;}.cr-phones .cr-stage{justify-items: center;}.cr-measures{display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-end;gap: 24px 32px;padding: 8px 0;}.cr-mitem{display: grid;justify-items: center;gap: 10px;}.cr-mitem>.cr-field{justify-content: flex-start;}/* Decoration,direction A "Press proof" (owner's choice,2026-10-15,from three previews): the marks a print designer leaves on a proof sheet. Flat cobalt and ink,1-1.5 px rules,monospace labels,crop marks,a rubber stamp,numbered section tabs,line pictograms and spec callouts that show real values. Every mark explains the product;nothing floats for its own sake. Two faces only (Hanken Grotesk,Source Code Pro). Decorative SVGs are aria-hidden;rotation stops under reduced motion. */ .rot{transform: rotate(var(--r,0deg));}@media (prefers-reduced-motion: reduce){.rot{transform: none;}}.a-plate{position: relative;}.a-crop{position: absolute;overflow: visible;fill: none;stroke: var(--ink);stroke-width: 1;z-index: 3;}.a-crop.tl{left: 0;top: 0;}.a-crop.tr{right: 0;top: 0;transform: scaleX(-1);}.a-crop.bl{left: 0;bottom: 0;transform: scaleY(-1);}.a-crop.br{right: 0;bottom: 0;transform: scale(-1);}.a-reg{position: absolute;left: 50%;top: -34px;width: 22px;height: 22px;margin-left: -11px;fill: none;stroke: var(--ink);stroke-width: 1;}.a-reg-q{fill: var(--ink);stroke: none;}@media (max-width: 640px){.a-crop,.a-reg{display: none;}}.hh-file{overflow: visible;position: relative;}.hh-file>.fig-card-h{border-radius: calc(var(--card-r) - 1px) calc(var(--card-r) - 1px) 0 0;}.hh-file>.fig-card-f{border-radius: 0 0 calc(var(--card-r) - 1px) calc(var(--card-r) - 1px);}.a-stamp{--r: -5deg;position: absolute;z-index: 3;right: -20px;bottom: -30px;width: 84px;height: 84px;}@media (max-width: 1100px){.a-stamp{display: none;}}.a-idx{display: flex;align-items: center;gap: 10px;color: var(--ink);}.a-idx-n{display: inline-grid;place-items: center;min-width: 28px;height: 20px;padding: 0 6px;border-radius: 6px;background: var(--accent);color: var(--on-accent);letter-spacing: .04em;}.a-idx::after{content: "";width: 80px;height: 13px;flex: none;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='13'%3E%3Cg fill='none' stroke='%23222428'%3E%3Cpath d='M0 6.5H66M73.5 0V13M67 6.5H80'/%3E%3Ccircle cx='73.5' cy='6.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat;}.h-step{position: relative;}.a-pict{position: absolute;top: 20px;right: 20px;width: 48px;height: 32px;fill: none;stroke: var(--ink);stroke-width: 1.25;stroke-linejoin: round;}.a-pict .a-pf{stroke: var(--line-strong);stroke-width: 1;}.x-card{position: relative;}.a-call{position: absolute;z-index: 2;display: flex;align-items: center;gap: 6px;white-space: nowrap;padding: 2px 7px;border-radius: 6px;background: #fff;font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .02em;color: var(--accent-text);box-shadow: 0 1px 2px rgb(10 14 40 / .18);}.a-call b{font-weight: 500;color: var(--ink);}.a-call::before{content: "";position: absolute;width: 1px;background: #fff;}.a-call::after{content: "";position: absolute;width: 5px;height: 5px;border-radius: 50%;background: #fff;box-shadow: 0 0 0 1px var(--accent-text);}.a-call-top{left: -2px;bottom: calc(100% + 12px);}.a-call-top::before{left: 9px;top: 100%;height: 12px;}.a-call-top::after{left: 7px;top: calc(100% + 10px);}.a-call-bot{right: 18px;top: calc(100% + 14px);}.a-call-bot::before{right: 30px;bottom: 100%;height: 28px;}.a-call-bot::after{right: 28px;bottom: calc(100% + 26px);}.a-dim{position: absolute;z-index: 2;right: -18px;bottom: calc(var(--x-inset) * 2);height: var(--x-h);width: 7px;border: 1px solid #fff;border-left: 0;}.a-dim span{position: absolute;left: 11px;top: 50%;transform: translateY(-50%);padding: 0 4px;border-radius: 4px;background: #fff;font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;color: var(--accent-text);}.demo-stage{padding-block: 64px;}@media (max-width: 640px){.a-call,.a-dim{display: none;}.demo-stage{padding-block: 24px;}}.a-rstamp{--r: 3deg;display: inline-block;padding: 2px 7px;background: #fff;color: var(--accent);border: 1.5px solid var(--accent);border-radius: 4px;outline: 1px solid var(--accent);outline-offset: 2px;font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .07em;text-transform: uppercase;filter: url(#a-ink);}.piece-stuck .a-rstamp + .a-rstamp{--r: -2deg;margin-right: 10px;}.a-tags{display: flex;flex-wrap: wrap;align-items: center;gap: 6px;margin-top: 6px;}.a-tag{display: inline-flex;align-items: center;height: 22px;padding: 0 8px;border-radius: 6px;white-space: nowrap;font: 600 12px/16px "Hanken Grotesk",system-ui,sans-serif;letter-spacing: 0;}.a-aud{position: relative;padding-left: 18px;background: var(--accent);color: var(--on-accent);border-radius: 6px 11px 11px 6px;}.a-aud::before{content: "";position: absolute;left: 7px;top: 8px;width: 6px;height: 6px;border-radius: 50%;background: var(--surface-raised);}.a-sty{border: 1.25px solid var(--ink);color: var(--ink);font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;}.a-ind{border: 1.25px dashed var(--ink);color: var(--ink);background: #fff;}.legend .a-tag,.legend .a-rstamp{flex: none;}.a-card{--r: 3deg;display: inline-flex;align-items: stretch;border: 1.5px solid var(--ink);border-radius: 6px;background: #fff;overflow: hidden;}.a-card-k{display: grid;place-items: center;padding: 6px 10px;font: 500 11px/16px "Source Code Pro",ui-monospace,monospace;letter-spacing: .07em;text-transform: uppercase;color: var(--ink);}.a-card-n{display: flex;align-items: center;white-space: nowrap;padding: 0 9px;background: var(--accent);color: var(--on-accent);font: 500 14px/20px "Source Code Pro",ui-monospace,monospace;letter-spacing: 0;}.a-card-n small{font-size: 11px;letter-spacing: 0.006em;}.doc-stickers .a-card{transform: rotate(3deg);}@media (max-width: 640px){.doc-stickers .a-card{transform: rotate(-2deg);}}@media (prefers-reduced-motion: reduce){.doc-stickers .a-card{transform: none;}}.sticker{border: 1.25px solid var(--ink);box-shadow: none;background-image: none;border-radius: 6px;padding: 2px 8px;}.sticker.paper{box-shadow: none;}.dd-h::before{border: 1.5px solid currentColor !important;box-shadow: none !important;border-radius: 4px !important;padding: 1px 7px !important;background: #fff !important;font: 500 11px/16px "Source Code Pro",ui-monospace,monospace !important;letter-spacing: .07em;text-transform: uppercase;outline: 1px solid currentColor;outline-offset: 2px;}.do .dd-h::before{color: var(--ok) !important;}.dont .dd-h::before{color: var(--bad) !important;}/* The changelog page (/docs/changelog/): its own page,not a docs page. One reading column;on wide screens each day's date sits in a sticky rail to the left (the pattern of Linear's and Raycast's changelogs). Built only on the site's tokens;flat,separated by rules,the accent kept to links (brand/DESIGN.md). */ .cl-wrap{max-width: 960px;margin-inline: auto;padding: 64px 24px 96px;}.cl-head{margin-left: 184px;max-width: 680px;padding-bottom: 40px;}.cl-lede{margin: 16px 0 0;font-size: 19px;line-height: 29px;color: var(--ink-muted);text-wrap: pretty;letter-spacing: -0.024em;}.cl-facts{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 16px;margin: 24px 0 0;font-size: 14px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.011em;}.cl-ver{font: 500 13px/20px "Source Code Pro",ui-monospace,monospace;color: var(--ink);padding: 2px 10px;border: 1px solid var(--line);border-radius: var(--r-pill);background: var(--surface-sunken);}.cl-links{display: flex;flex-wrap: wrap;gap: 4px 20px;margin: 12px 0 0;font-size: 14px;line-height: 24px;letter-spacing: -0.011em;}.cl-links a{display: inline-flex;align-items: center;min-height: 24px;}.cl-head details{margin-top: 28px;border-block: 1px solid var(--line);}.cl-page summary{display: flex;align-items: center;gap: 8px;min-height: 44px;cursor: pointer;list-style: none;font-size: 14px;line-height: 20px;color: var(--ink-muted);letter-spacing: -0.011em;}.cl-page summary::-webkit-details-marker{display: none;}.cl-page summary::before{content: "+";flex: none;width: 12px;font: 16px/20px "Source Code Pro",ui-monospace,monospace;color: var(--ink-muted);}.cl-page details[open]>summary::before{content: "\2212";}.cl-page summary:hover{color: var(--ink);}.cl-update>summary{font-size: 15px;font-weight: 500;color: var(--ink);letter-spacing: -0.016em;}.cl-update>.prose{margin: 4px 0 20px;}.cl-update .prose p,.cl-update .prose li{font-size: 15px;line-height: 24px;letter-spacing: -0.016em;}.cl-day{display: grid;grid-template-columns: 160px minmax(0,1fr);gap: 24px;padding: 40px 0;border-top: 1px solid var(--line);scroll-margin-top: 60px;}.cl-date{position: sticky;top: 92px;align-self: start;margin: 0;font: 500 13px/28px "Source Code Pro",ui-monospace,monospace;letter-spacing: 0;color: var(--ink-muted);}.cl-items{max-width: 680px;min-width: 0;}.cl-entry + .cl-entry{margin-top: 36px;}.cl-title{display: flex;flex-wrap: wrap;align-items: baseline;column-gap: 10px;margin: 0 0 8px;}.cl-entry h3{margin: 0;font-size: 20px;line-height: 28px;font-weight: 500;letter-spacing: -0.01em;color: var(--ink);text-wrap: balance;}.cl-tag{flex: none;padding: 0 8px;position: relative;top: -2px;font: 500 11px/20px "Source Code Pro",ui-monospace,monospace;letter-spacing: .06em;text-transform: uppercase;color: var(--ink-muted);border: 1px solid var(--line);border-radius: var(--r-pill);}.cl-tag.is-new{text-transform: none;letter-spacing: 0;color: var(--accent-text);background: var(--accent-soft);border-color: transparent;}.cl-body.prose{margin-top: 0;color: var(--ink-muted);}.cl-body.prose p,.cl-body.prose li{font-size: 16px;line-height: 26px;letter-spacing: -0.02em;}.cl-body>:last-child{margin-bottom: 0;}.cl-more>summary{min-height: 32px;}.cl-more[open]>summary{margin-bottom: 8px;}.cl-log{margin-top: 24px;}.cl-items>.cl-log:first-child{margin-top: 0;}.cl-log>summary{min-height: 28px;}.cl-log ul{list-style: none;margin: 8px 0 0;padding: 0 0 0 22px;border-left: 1px solid var(--line);}.cl-log li{margin: 0;padding: 4px 0;font-size: 14px;line-height: 22px;color: var(--ink-muted);letter-spacing: -0.011em;}.cl-sha{font: 12px/22px "Source Code Pro",ui-monospace,monospace;margin-left: 4px;white-space: nowrap;}.cl-older{margin: 0;padding-top: 32px;border-top: 1px solid var(--line);font-size: 14px;color: var(--ink-muted);letter-spacing: -0.011em;}@media (max-width: 900px){.cl-head{margin-left: 0;}.cl-day{grid-template-columns: minmax(0,1fr);gap: 12px;padding: 32px 0;}.cl-date{position: static;}}@media (max-width: 640px){.cl-wrap{padding: 40px 16px 64px;}.cl-lede{font-size: 17px;line-height: 27px;letter-spacing: -0.026em;}.cl-entry h3{font-size: 18px;line-height: 26px;}}.caps{display:contents;letter-spacing:0}.kicker .caps,.gh-btn .caps,.side-mobile summary .caps,.btn .caps,.copy .caps,.gh-stats dt .caps,.crumb .caps,.prose thead th .caps,.prevnext a span .caps,.filter .caps,.lb-actions a .caps,.lb-actions button .caps,.sticker .caps,.t-hero .caps,.t-h1 .caps,.t-h2 .caps,.sticker.ink .caps,.piece-stuck .sticker .caps,.dev-fold>summary .caps,.menu-dots .caps,.chip .caps,.fig .kicker .caps,.h-eyebrow .caps,.h-h2 .caps,.demo-answers dt .caps,.h-h3 .caps,.book-card h2 .caps,.book-dl dt .caps,.au-tokens span .caps,.cr-spec-label .caps,.cr .cr-spec .cr-spec-label .caps,.a-idx-n .caps,.a-call .caps,.a-rstamp .caps,.a-sty .caps,.a-card-k .caps,.cl-tag .caps,.tr-path h3 .caps,.tr-dl dt .caps,.tr-ov-t thead th .caps,[style*="uppercase"] .caps,[style*="letter-spacing:."] .caps,[style*="letter-spacing:0."] .caps,[style*="letter-spacing: ."] .caps{letter-spacing:inherit}:where(.layout,.bar,.foot) :where(strong,b,th,h1,h2,h3,h4,h5,h6){font-weight:500}:is(.layout,.bar,.foot) .kicker{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .t-hero{font-size:39px;font-weight:400}:is(.layout,.bar,.foot) .t-hero strong{font-weight:500}:is(.layout,.bar,.foot) .t-h1{font-size:39px;font-weight:400}:is(.layout,.bar,.foot) .t-h2{font-size:25px;font-weight:400}:is(.layout,.bar,.foot) .t-h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .lede{font-size:16px}:is(.layout,.bar,.foot) .top-nav a{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .gh-btn{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .side a{font-size:13px}:is(.layout,.bar,.foot) .side a[aria-current]{font-weight:500}@media (max-width: 1000px){:is(.layout,.bar,.foot) .side-mobile summary{font-size:13px;font-weight:500}}:is(.layout,.bar,.foot) .btn{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .copy{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .code pre{font-size:13px}:is(.layout,.bar,.foot) :not(pre)>code{font-size:13px}:is(.layout,.bar,.foot) .more{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .duo figcaption{font-size:13px}:is(.layout,.bar,.foot) .intro{font-size:13px}:is(.layout,.bar,.foot) .intro a{font-weight:500}:is(.layout,.bar,.foot) .works{font-size:13px}:is(.layout,.bar,.foot) .stages .num{font-size:13px}:is(.layout,.bar,.foot) .stages h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .stages p{font-size:16px}:is(.layout,.bar,.foot) .role h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .role ul{font-size:16px}:is(.layout,.bar,.foot) .roles-credit{font-size:13px}:is(.layout,.bar,.foot) .tree code{font-size:13px}:is(.layout,.bar,.foot) .tree span{font-size:13px}:is(.layout,.bar,.foot) .shot figcaption{font-size:13px}:is(.layout,.bar,.foot) .rows .row-n{font-size:13px}:is(.layout,.bar,.foot) .rows .row-t{font-size:16px}:is(.layout,.bar,.foot) .rows .row-s{font-size:13px}:is(.layout,.bar,.foot) .status li{font-size:16px}:is(.layout,.bar,.foot) .gh-top{font-size:16px}:is(.layout,.bar,.foot) .gh-stats dt{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .gh-stats dd{font-size:16px}:is(.layout,.bar,.foot) .ghcard .note{font-size:13px}:is(.layout,.bar,.foot) .qa summary h3,:is(.layout,.bar,.foot) .qa summary h2{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .qa summary::after{font-size:20px}:is(.layout,.bar,.foot) .toc a{font-size:13px}:is(.layout,.bar,.foot) .crumb{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .meta{font-size:13px}:is(.layout,.bar,.foot) .prose h2{font-size:25px;font-weight:500}:is(.layout,.bar,.foot) .prose h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .prose p,:is(.layout,.bar,.foot) .prose li{font-size:16px}:is(.layout,.bar,.foot) .prose .qa summary h2{font-size:16px}:is(.layout,.bar,.foot) .prose table{font-size:16px}:is(.layout,.bar,.foot) .prose thead th{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .prevnext a{font-weight:500}:is(.layout,.bar,.foot) .prevnext a span{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .filter{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .t-h3.sub{font-size:16px}:is(.layout,.bar,.foot) .piece figcaption{font-size:13px}:is(.layout,.bar,.foot) .piece figcaption strong{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .piece-meta{font-size:13px}:is(.layout,.bar,.foot) .tag{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .lb-title{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .lb-blurb{font-size:13px}:is(.layout,.bar,.foot) .lb-actions a,:is(.layout,.bar,.foot) .lb-actions button{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .foot-brand p{font-size:13px}:is(.layout,.bar,.foot) .foot-docs-head a{font-size:13px}:is(.layout,.bar,.foot) .foot ul a,.foot ul a{font-size:16px}:is(.layout,.bar,.foot) .foot-docs ul a{font-size:13px}:is(.layout,.bar,.foot) .foot-ver{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .foot-legal{font-size:13px}@media (max-width: 400px){:is(.layout,.bar,.foot) .foot ul a,.foot ul a{font-size:13px}}:is(.layout,.bar,.foot) .sticker{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .sticker.lg{font-size:13px}:is(.layout,.bar,.foot) .cmd code{font-size:13px}:is(.layout,.bar,.foot) .checks li{font-size:16px}:is(.layout,.bar,.foot) .checks strong{font-weight:500}:is(.layout,.bar,.foot) .start strong{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .start>span:not(.kicker){font-size:13px}:is(.layout,.bar,.foot) .btn{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .gh-btn{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .copy{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .filter{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .lb-actions a,:is(.layout,.bar,.foot) .lb-actions button{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .crumb{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .side-mobile summary{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .sticker.ink{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .sticker.paper{font-weight:500}:is(.layout,.bar,.foot) .piece-stuck .sticker{font-size:13px;font-weight:500}@media (max-width: 380px){:is(.layout,.bar,.foot) .t-h1{font-size:25px}}:is(.layout,.bar,.foot) .ev-big{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .ev-sub{font-size:13px}:is(.layout,.bar,.foot) .ev-desc{font-size:13px}:is(.layout,.bar,.foot) .ev-meta{font-size:13px}:is(.layout,.bar,.foot) .side-tour strong{font-weight:500}:is(.layout,.bar,.foot) .dev-fold>summary{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .fig>figcaption{font-size:13px}:is(.layout,.bar,.foot) .kicker{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .fig-card-f{font-size:13px}:is(.layout,.bar,.foot) .fig-card .big{font-size:25px}:is(.layout,.bar,.foot) .menu-dots{font-size:13px}:is(.layout,.bar,.foot) .chip{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .tag-missing{font-size:13px}:is(.layout,.bar,.foot) .dd-h{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .dd-h::before{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .dd-why{font-size:13px}:is(.layout,.bar,.foot) .ann-dot{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .ann-legend li{font-size:13px}:is(.layout,.bar,.foot) .ann-legend strong{font-weight:500}:is(.layout,.bar,.foot) .flow-box{font-size:13px}:is(.layout,.bar,.foot) .hero-side .code-lines{font-size:13px}:is(.layout,.bar,.foot) .opt{font-size:13px}:is(.layout,.bar,.foot) .opt-l{font-weight:500}:is(.layout,.bar,.foot) .opt-s{font-size:13px}:is(.layout,.bar,.foot) .rec{font-size:13px}:is(.layout,.bar,.foot) .ui-btn{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .ui-input{font-size:13px}:is(.layout,.bar,.foot) .kv{font-size:13px}:is(.layout,.bar,.foot) .fig table.mini{font-size:13px}:is(.layout,.bar,.foot) .fig table.mini thead th{font-weight:500}:is(.layout,.bar,.foot) .code-lines{font-size:13px}:is(.layout,.bar,.foot) .prose .fig p{font-size:13px}:is(.layout,.bar,.foot) .prose .fig li{font-size:13px}:is(.layout,.bar,.foot) .fig .kicker{font-size:13px}:is(.layout,.bar,.foot) .h-title{font-weight:400}:is(.layout,.bar,.foot) .h-title strong{font-weight:500}:is(.layout,.bar,.foot) .h-eyebrow{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .h-lede{font-size:20px}:is(.layout,.bar,.foot) .btn.lg{font-size:16px}:is(.layout,.bar,.foot) .h-works{font-size:16px}@media (max-width: 640px){:is(.layout,.bar,.foot) .h-lede{font-size:16px}:is(.layout,.bar,.foot) .h-works{font-size:13px}}:is(.layout,.bar,.foot) .hh-q{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .hh-bubble{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .hh-answers li{font-size:13px}:is(.layout,.bar,.foot) .hh-file .code-lines{font-size:13px}:is(.layout,.bar,.foot) .hh-md{font-size:13px}:is(.layout,.bar,.foot) .hh-title{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .hh-pill{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .hh-sub{font-size:13px}:is(.layout,.bar,.foot) .hh-amt{font-size:25px;font-weight:500}:is(.layout,.bar,.foot) .hh-lines>div{font-size:13px}:is(.layout,.bar,.foot) .hh-btn{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .h-head .h-lede,:is(.layout,.bar,.foot) .h-split .h-lede{font-size:20px}:is(.layout,.bar,.foot) .h-h2{font-weight:400}:is(.layout,.bar,.foot) .h-fine{font-size:13px}:is(.layout,.bar,.foot) .h-n{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .h-step h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .h-step p{font-size:16px}:is(.layout,.bar,.foot) .vg-files,:is(.layout,.bar,.foot) .vg-qs{font-size:13px}:is(.layout,.bar,.foot) .vg-files .mono{font-size:13px}:is(.layout,.bar,.foot) .vg-qs li.on{font-weight:500}:is(.layout,.bar,.foot) .vg-term{font-size:13px}:is(.layout,.bar,.foot) .h-zoom{font-size:16px}:is(.layout,.bar,.foot) .h-zoom strong{font-weight:500}:is(.layout,.bar,.foot) .tablist [role="tab"]{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .demo-tabs [role="tab"] strong{font-size:16px}:is(.layout,.bar,.foot) .demo-tabs [role="tab"] span{font-size:13px;font-weight:400}:is(.layout,.bar,.foot) .demo-answers dt{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .demo-answers dd{font-size:16px}:is(.layout,.bar,.foot) .demo-values dd{font-size:13px}:is(.layout,.bar,.foot) .demo-note{font-size:13px}:is(.layout,.bar,.foot) .x-chip{font-weight:500}:is(.layout,.bar,.foot) .x-field>span:first-child{font-weight:500}:is(.layout,.bar,.foot) .x-btn{font-weight:500}:is(.layout,.bar,.foot) .bento-card h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .bento-card p{font-size:16px}:is(.layout,.bar,.foot) .vg-log .mono{font-size:13px}:is(.layout,.bar,.foot) .bento-card .vg-why{font-size:13px}:is(.layout,.bar,.foot) .vg-aa{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .vg-floor .num{font-size:16px}:is(.layout,.bar,.foot) .vg-lock .mono{font-size:13px}:is(.layout,.bar,.foot) .bento-card .vg-big{font-size:76px;font-weight:400}:is(.layout,.bar,.foot) .ex-cap{font-size:13px}:is(.layout,.bar,.foot) .ex-cap strong{font-weight:500}:is(.layout,.bar,.foot) .who-card h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .who-card p{font-size:16px}:is(.layout,.bar,.foot) .who-card .more{font-size:13px}:is(.layout,.bar,.foot) .inst-panel>p{font-size:16px}:is(.layout,.bar,.foot) .inst-then{font-weight:500}:is(.layout,.bar,.foot) .h-credit{font-size:13px}:is(.layout,.bar,.foot) .h-h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .h-files .h-lede{font-size:16px}:is(.layout,.bar,.foot) .craft-card h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .craft-card p{font-size:16px}:is(.layout,.bar,.foot) .craft-card .more{font-size:13px}:is(.layout,.bar,.foot) .hosts li{font-size:16px}@media (max-width: 640px){:is(.layout,.bar,.foot) .hosts li{font-size:13px}}:is(.layout,.bar,.foot) .h-end-lede{font-size:16px}:is(.layout,.bar,.foot) .bento-card .vg-big{font-size:49px}:is(.layout,.bar,.foot) .h-announce{font-size:13px}:is(.layout,.bar,.foot) .h-pill-tag{font-weight:500}:is(.layout,.bar,.foot) .h-announce a{font-weight:500}:is(.layout,.bar,.foot) .hosts li{font-size:13px}@media (max-width: 640px){:is(.layout,.bar,.foot) .hosts li{font-size:13px}}:is(.layout,.bar,.foot) .h-link{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .h-cmd-label{font-size:13px}:is(.layout,.bar,.foot) .shot.staged figcaption{font-size:13px}:is(.layout,.bar,.foot) .screen figcaption{font-size:16px}:is(.layout,.bar,.foot) .screen figcaption strong{font-weight:500}:is(.layout,.bar,.foot) .h-step h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .h-h3{font-weight:400}@media (max-width: 380px){:is(.layout,.bar,.foot) .h-title{font-size:39px}}:is(.layout,.bar,.foot) .nav-book{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .h-soon{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .h-contrib{font-size:16px}:is(.layout,.bar,.foot) .h-contrib a{font-weight:500}:is(.layout,.bar,.foot) .book-card h2{font-size:25px;font-weight:500}:is(.layout,.bar,.foot) .book-card>p:not(.kicker){font-size:16px}:is(.layout,.bar,.foot) .book-dl dt{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .book-dl dd{font-size:16px}@media (max-width: 439px){:is(.layout,.bar,.foot) .x-btn{font-size:13px}}@media (max-width: 380px){:is(.layout,.bar,.foot) .btn.lg{font-size:16px}}:is(.layout,.bar,.foot) .au-replay{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-status{font-size:16px}:is(.layout,.bar,.foot) .au-status b{font-weight:500}:is(.layout,.bar,.foot) .au-url{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-tag{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-callout{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-callout b{font-size:13px}:is(.layout,.bar,.foot) .au-tokens span{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-chip{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-list .n{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-list h3{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .au-list p{font-size:13px}:is(.layout,.bar,.foot) .au-list li.done .g{font-weight:500}:is(.layout,.bar,.foot) .au-list li.done .s{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-empty{font-size:16px}@media (max-width: 700px){:is(.layout,.bar,.foot) .au-cap:not([hidden]){font-size:13px}:is(.layout,.bar,.foot) .au-cap b{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .au-url{font-size:13px}}@media (max-width: 1000px){:is(.layout,.bar,.foot) [data-au].on .au-more{font-size:16px;font-weight:500}}:is(.layout,.bar,.foot) .cr-meta{font-size:13px;font-weight:400}:is(.layout,.bar,.foot) .cr-meta b{font-weight:500}:is(.layout,.bar,.foot) .cr-foot{font-size:13px}:is(.layout,.bar,.foot) .cr-ui{font-size:13px}:is(.layout,.bar,.foot) .cr-pill{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-menu>span{font-size:13px}:is(.layout,.bar,.foot) .cr-menu>.on{font-weight:500}:is(.layout,.bar,.foot) .cr-btn{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cr-toast{font-size:13px}:is(.layout,.bar,.foot) .cr-row{font-size:13px}:is(.layout,.bar,.foot) .cr-row>small{font-size:13px;font-weight:400}:is(.layout,.bar,.foot) .cr-switch{font-size:16px}:is(.layout,.bar,.foot) .cr-sheet b{font-weight:500}:is(.layout,.bar,.foot) .cr-sheet span{font-size:13px}:is(.layout,.bar,.foot) .cr-freq-k strong{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cr-freq-k span:not(.kicker){font-size:13px}:is(.layout,.bar,.foot) .cr-steps-h{font-size:13px}:is(.layout,.bar,.foot) .cr-steps .flow-box{font-size:13px}:is(.layout,.bar,.foot) .cr-steps .flow-box span:not(.kicker){font-size:13px}:is(.layout,.bar,.foot) .cr-steps-note{font-size:13px}:is(.layout,.bar,.foot) .cr-cmd-in{font-size:13px}:is(.layout,.bar,.foot) .cr-cmd-list>span{font-size:13px}:is(.layout,.bar,.foot) .cr-key{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-tip{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-touch-note{font-size:13px}:is(.layout,.bar,.foot) .cr-stack>div{font-size:13px}:is(.layout,.bar,.foot) .cr-undo{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-pile>div{font-size:13px}:is(.layout,.bar,.foot) .cr-drawer{font-size:13px}:is(.layout,.bar,.foot) .cr-drawer b{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cr-dialog{font-size:13px}:is(.layout,.bar,.foot) .cr-dialog b{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cr-dialog .cr-pill{font-size:13px}:is(.layout,.bar,.foot) .cr-form label,:is(.layout,.bar,.foot) .cr-form .lab{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-field{font-size:16px}:is(.layout,.bar,.foot) .cr-err{font-size:13px}:is(.layout,.bar,.foot) .cr-alert{font-size:13px}:is(.layout,.bar,.foot) .cr-alert b{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cr-alert .cr-pill{font-size:13px}:is(.layout,.bar,.foot) .cr-inbox>div{font-size:13px}:is(.layout,.bar,.foot) .cr-mark span{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-spec-display{font-size:39px;font-weight:500}:is(.layout,.bar,.foot) .cr-spec-label{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-spec-body{font-size:16px}:is(.layout,.bar,.foot) .cr-amounts{font-size:16px}:is(.layout,.bar,.foot) .cr-card-demo{font-size:13px}:is(.layout,.bar,.foot) .cr-card-demo b{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cr-settings>div{font-size:13px}:is(.layout,.bar,.foot) .cr-bar{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-feed>div{font-size:13px}:is(.layout,.bar,.foot) .cr-focus-demo{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-dim{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-fill>.s{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cr-fill>.m{font-size:13px}:is(.layout,.bar,.foot) .cr-fill>.m .mono{font-size:13px}:is(.layout,.bar,.foot) .a-call{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-call b{font-weight:500}:is(.layout,.bar,.foot) .a-dim span{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-rstamp{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-tag{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-sty{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-card-k{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-card-n{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .a-card-n small{font-size:13px}:is(.layout,.bar,.foot) .dd-h::before{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cl-lede{font-size:20px}:is(.layout,.bar,.foot) .cl-facts{font-size:13px}:is(.layout,.bar,.foot) .cl-ver{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cl-links{font-size:13px}:is(.layout,.bar,.foot) .cl-page summary{font-size:13px}:is(.layout,.bar,.foot) .cl-page summary::before{font-size:16px}:is(.layout,.bar,.foot) .cl-update>summary{font-size:16px;font-weight:500}:is(.layout,.bar,.foot) .cl-update .prose p,:is(.layout,.bar,.foot) .cl-update .prose li{font-size:16px}:is(.layout,.bar,.foot) .cl-date{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cl-entry h3{font-size:20px;font-weight:500}:is(.layout,.bar,.foot) .cl-tag{font-size:13px;font-weight:500}:is(.layout,.bar,.foot) .cl-body.prose p,:is(.layout,.bar,.foot) .cl-body.prose li{font-size:16px}:is(.layout,.bar,.foot) .cl-log li{font-size:13px}:is(.layout,.bar,.foot) .cl-sha{font-size:13px}:is(.layout,.bar,.foot) .cl-older{font-size:13px}@media (max-width: 640px){:is(.layout,.bar,.foot) .cl-lede{font-size:16px}:is(.layout,.bar,.foot) .cl-entry h3{font-size:20px}}:is(.layout,.bar,.foot) :not(pre)>code{font-size:13px}:is(.layout,.bar,.foot) :is(h1,h2,h3,h4) code{font-size:inherit}@media (min-width: 1024px){:is(.layout,.bar,.foot) .t-hero{font-size:49px;font-weight:400}:is(.layout,.bar,.foot) .t-h1{font-size:49px;font-weight:400}:is(.layout,.bar,.foot) .t-h2{font-size:25px;font-weight:400}:is(.layout,.bar,.foot) .prose h2{font-size:25px;font-weight:500}}