/* Public pages only. The notebook and its embedded document keep their own themes. */
html:has(> body.site-public):not([data-theme]) { color-scheme: light; }
.site-public { --app-background: var(--bg); --app-surface: var(--surface); --app-raised: var(--surface-2); --app-active: var(--accent-soft); --app-text: var(--ink); --app-muted: var(--ink-3); --app-border: var(--line); --app-invalid: var(--err); --workspace-accent: var(--accent); --workspace-accent-text: var(--accent); --font-sans: var(--font-ui); --font-mono: var(--font-code); --tools-success: var(--ok); --tools-danger: var(--err); --tools-on-accent: var(--accent-ink); font: 400 var(--fs-body)/1.6 var(--font-ui); color: var(--ink); background: var(--bg); }
.site-public :is(h1,h2,h3) { color: var(--ink); text-wrap: balance; }
.site-public h1, .site-public .dev-tools-intro h1 { font-size: var(--fs-2xl); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.site-public h2 { font-size: var(--fs-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.site-public h3 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 650; }
.site-public a { text-decoration: none; }
.site-public a:hover { text-decoration: underline; }
.site-public :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-public :is(main,section,article,aside,figure,nav,div) { min-width: 0; }
.site-public :is(p,li,dd) { overflow-wrap: anywhere; }
.site-public .site-header { top: 0; width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
.site-public .site-header > .container { gap: var(--s-4); }
.site-public .site-actions > [data-theme-control] { display: none; }
.site-public .site-header > .container { gap: var(--s-2); }
.site-public .site-actions { gap: var(--s-1); }
.site-public .site-menu:not([open]) > .site-menu__panel { display: none; }
.site-public .site-mobile-theme { justify-content: start; min-height: 48px; padding-inline: var(--gutter); border-radius: 0; }
.site-public .brand { flex: none; font-size: var(--fs-lg); gap: var(--s-2); color: var(--ink); }
.site-public .brand svg { flex: none; }
.site-public .site-nav { margin-left: var(--s-2); }
.site-public .site-nav a { color: var(--ink-2); }
.site-public .site-nav a[data-active] { color: var(--ink); }
.site-public .site-footer { margin-top: var(--s-8); padding-block: var(--s-7); border-top: 1px solid var(--line); }
.site-footer > .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6); }
.site-footer p { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--fs-sm); }
.site-footer nav { display: flex; align-content: start; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5); max-width: 560px; }
.site-footer nav a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-ui); }
.site-public .ui-btn { text-decoration: none; }
.site-public .ui-btn--primary { color: var(--accent-ink); }
.site-public .ui-btn--marker { color: var(--marker-ink); }
.site-public .breadcrumbs, .site-public .tools-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.site-public :is(.breadcrumbs,.tools-breadcrumb) a { color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--s-1); }
.site-public :is(.breadcrumbs,.tools-breadcrumb) svg { display: none; }
.site-public .dev-tools-page { background: transparent; min-height: 70dvh; }
.site-public .offline-status { position: fixed; z-index: 60; right: var(--gutter); bottom: var(--s-4); max-width: calc(100vw - var(--gutter) * 2); padding: var(--s-3) var(--s-4); gap: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.site-public .offline-status button { color: var(--accent); font-weight: 600; }
.site-public .workspace { --workspace-accent: var(--accent); --workspace-accent-text: var(--accent); --app-background: var(--bg); --app-surface: var(--surface); --app-raised: var(--surface-2); --app-active: var(--accent-soft); --app-text: var(--ink); --app-muted: var(--ink-3); --app-border: var(--line); --tools-on-accent: var(--accent-ink); }
.site-public .dev-tools-switcher:not([open]) > .dev-tools-catalog { display: none; }
.site-public .dev-tools-main { padding: var(--s-4) var(--gutter) var(--s-7); }
.site-public .dev-tools-intro { margin: 0 0 var(--s-4); }
.site-public .dev-tools-intro h1 { margin: 0; }
.site-public .dev-tools-intro > .dev-tools-page-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 76ch; margin-top: var(--s-2); margin-bottom: 0; font-size: var(--fs-ui); line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.site-public .dev-tools-layout { display: block; position: relative; }
.site-public .wb-page-nav { display: flex; justify-content: space-between; align-items: start; gap: var(--s-3); margin-bottom: var(--s-3); }
.site-public .wb-page-nav { min-height: 32px; }
.site-public .wb-loading { min-height: calc(100dvh - var(--header-h) - var(--s-9)); }
.site-public .wb-page-nav .dev-tools-switcher { margin-bottom: 0; }
.site-public .wb-page-nav .tools-breadcrumb { padding-top: var(--s-1); margin-bottom: 0; }
.site-public .wb-page-nav .dev-tools-catalog { left: auto; right: 0; }
.site-public .dev-tools-switcher { margin-bottom: var(--s-3); background: var(--surface); border-radius: var(--r-sm); width: max-content; max-width: 100%; position: relative; }
.site-public .dev-tools-switcher > summary { padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); }
.site-public .dev-tools-switcher > summary > span { display: none; }
.site-public .dev-tools-catalog { position: absolute; z-index: 20; top: calc(100% + var(--s-2)); left: 0; width: min(360px, calc(100vw - var(--gutter) * 2)); max-height: 60dvh; overflow: auto; box-shadow: var(--shadow-pop); background: var(--surface); }
.site-public .dev-tools-catalog h2 { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }
.site-public .dev-tool-content { padding: 0; border: 0; border-radius: 0; background: transparent; }
.site-public .wb { display: grid; gap: var(--s-3); container-type: normal; }
.site-public .wb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); }
.site-public .wb-toolbar .utility-direction { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: 0; padding: var(--s-1); border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); }
.site-public .utility-direction legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-public .utility-direction label { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); border: 0; border-radius: var(--r-sm); }
.site-public .utility-direction label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.site-public .utility-direction input { position: absolute; opacity: 0; width: 1px; }
.site-public .utility-direction label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.site-public .utility-options { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.site-public .utility-options label { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.site-public .utility-options :is(input,select), .site-public .regex-generated input { height: 36px; min-width: 0; max-width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--r-sm); font-size: var(--fs-ui); }
.site-public .utility-extra-options { margin: 0; font-size: var(--fs-sm); }
.site-public .utility-extra-options[open] { flex: 1 1 100%; }
.site-public .utility-extra-options .utility-options { padding-block: var(--s-3); }
.site-public .utility-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.site-public .wb-toolbar > .utility-actions { margin-left: auto; }
.site-public .utility-actions :is(button,a), .site-public .timestamp-copy button, .site-public .regex-generated button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 36px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 600 var(--fs-sm)/1.3 var(--font-ui); text-decoration: none; }
.site-public .utility-actions button:hover { background: var(--surface-2); }
.site-public .utility-actions .utility-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); order: 3; }
.site-public .utility-actions .utility-primary:hover { background: var(--accent-hover); }
.site-public .wb-panes { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-3); }
.site-public .wb-panes > :is(.utility-input-panel,.utility-result,.utility-output-empty) { display: flex; flex-direction: column; height: clamp(240px,42dvh,440px); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.site-public .utility-input-panel:focus-within { border-color: var(--accent); }
.site-public .utility-input-label { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; font-size: var(--fs-sm); font-weight: 600; }
.site-public .utility-input-label > .utility-panel-heading { flex: none; min-height: 40px; padding: var(--s-2) var(--s-4); color: var(--ink-2); display: flex; flex-wrap: wrap; justify-content: start; gap: var(--s-1) var(--s-2); font-size: var(--fs-sm); line-height: 1.5; }
.site-public .utility-input-count { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.site-public .utility-input-label textarea { flex: 1; width: 100%; min-height: 0; height: 100%; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: var(--s-3) var(--s-4); color: var(--ink); font: 400 var(--fs-ui)/1.6 var(--font-code); tab-size: 2; resize: none; white-space: pre; overflow: auto; }
.site-public :is(.wb-base64,.wb-url,.wb-escape,.wb-jwt) :is(textarea,.utility-result > pre) { white-space: pre-wrap; overflow-wrap: anywhere; }
.site-public .wb-panes > :is(.utility-result,.utility-output-empty) { background: var(--surface-2); }
.site-public :is(.utility-result,.utility-output-empty) > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: 40px; margin: 0; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.site-public .utility-result > h3 span { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.site-public .utility-result > pre { flex: 1; min-height: 0; max-height: none; margin: 0; padding: var(--s-3) var(--s-4); border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--fs-ui)/1.6 var(--font-code); overflow: auto; white-space: pre; }
.site-public :is(.utility-result,.utility-output-empty) > h3, .site-public .utility-result > .utility-actions { flex: none; }
.site-public .utility-result > .utility-actions { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.site-public .utility-copy-control button { min-width: var(--s-9); }
.site-public .utility-output-empty > div { display: grid; align-content: center; justify-items: center; flex: 1; min-height: 0; border: 0; padding: var(--s-5); background: transparent; color: var(--ink-3); font-size: var(--fs-ui); text-align: left; }
.site-public .utility-output-empty > div > span { font-size: var(--fs-sm); margin-top: var(--s-2); }
.site-public .utility-error, .site-public .utility-result-error { margin: var(--s-2); padding: var(--s-3); border-radius: var(--r-sm); background: var(--err-soft); color: var(--err); font-size: var(--fs-ui); overflow: auto; }
.site-public .utility-result > p { margin: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.site-public .utility-copy-success, .site-public .utility-copy-feedback, .site-public .utility-result-feedback { color: var(--ok); background: var(--ok-soft); border-color: var(--ok); box-shadow: none; }
.site-public .ui-status { padding-inline: var(--s-1); font-size: var(--fs-xs); color: var(--ink-3); }
.site-public .ui-status__right > span { display: none; }
.site-public .tool-below { display: grid; gap: var(--s-7); margin: var(--s-8) 0 var(--s-7); }
.site-public .utility-help { max-width: none; margin: 0; color: var(--ink); font-size: var(--fs-body); }
.site-public .utility-help h2 { font-size: var(--fs-2xl); margin-bottom: var(--s-5); }
.site-public .utility-help h3 { font-size: var(--fs-xl); margin: var(--s-6) 0 var(--s-3); }
.site-public .utility-help-example { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-4); }
.site-public .utility-help pre { background: var(--surface-2); border-color: var(--line); font: 400 var(--fs-sm)/1.65 var(--font-code); white-space: pre; overflow: auto; }
.site-public .tool-aside { align-self: start; }
.site-public .utility-details { display: block; margin: 0; padding: var(--s-4); border: 0; background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-ui); }
.site-public .utility-details summary { font-weight: 600; color: var(--ink); }
.site-public .utility-details p { margin-top: var(--s-3); }
.site-public .tools-related { display: grid; gap: 0; margin-top: var(--s-6); padding: 0; }
.site-public .tools-related > span { font-size: var(--fs-lg); color: var(--ink); margin-bottom: var(--s-3); font-weight: 650; }
.site-public .tools-related a { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink-2); }
.site-public .dev-tools-storage-details { margin-top: var(--s-6); max-width: 72ch; font-size: var(--fs-ui); color: var(--ink-2); }
.site-public .dev-tools-storage-note { margin: var(--s-3) 0; font-size: var(--fs-ui); }
.site-public .timestamp-input-help, .site-public .timestamp-interpretation { padding: var(--s-3) var(--s-4); margin: 0; }
.site-public .timestamp-interpretation > p { margin-block: var(--s-2) var(--s-3); }
.site-public .wb-timestamp .utility-input-label { flex: none; padding-bottom: var(--s-4); }
.site-public .wb-timestamp .timestamp-input { width: calc(100% - 2 * var(--s-4)); margin: var(--s-2) var(--s-4) 0; }
.site-public .timestamp-detection { flex: 1; margin: 0; padding: var(--s-4); border-top: 1px solid var(--line); }
.site-public .timestamp-detection legend { float: left; width: 100%; margin-bottom: var(--s-2); }
.site-public .timestamp-detection > p { clear: both; margin-top: 0; }
.site-public .wb-timestamp .utility-input-panel { overflow: auto; }
.site-public .wb-panes--inspector > :is(.utility-input-panel,.utility-result,.utility-output-empty) { height: auto; min-height: 320px; }
.site-public .timestamp-values { display: grid; flex: 1; min-height: 0; overflow: auto; gap: 0; margin: 0; }
.site-public .timestamp-value { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: var(--s-3) var(--s-4); gap: var(--s-3); }
.site-public .timestamp-value dd { font-size: var(--fs-ui); }
.site-public .timestamp-json { flex: none; margin: 0; padding: var(--s-3) var(--s-4); }
.site-public .timestamp-json pre { min-height: 0; }
.site-public .wb-toolbar:has(.regex-builder) { display: grid; grid-template-columns: minmax(0,1fr); }
.site-public .wb-toolbar > .regex-builder { border: 0; margin: 0; padding: 0; }
.site-public .wb-pattern { display: grid; gap: var(--s-2); }
.site-public .wb-pattern > h3 { font-size: var(--fs-sm); margin: 0; }
.site-public .regex-generated { display: flex; gap: var(--s-2); }
.site-public .regex-generated input { flex: 1; width: 100%; font-family: var(--font-code); }
.site-public .regex-quick-options { font-size: var(--fs-sm); }
.site-public .regex-advanced { margin: 0; padding-block: var(--s-2); font-size: var(--fs-sm); }
.site-public .regex-advanced .utility-options { padding-block: var(--s-3); }
.site-public .wb-builder { border-top: 1px solid var(--line); padding-top: var(--s-2); font-size: var(--fs-sm); }
.site-public .wb-builder > summary { padding-block: var(--s-2); color: var(--ink-2); }
.site-public :is(.wb-builder,.regex-advanced,.regex-line-picker,.regex-preview,.regex-json,.timestamp-json,.timestamp-interpretation,.utility-extra-options,.utility-details,.dev-tools-storage-details) > summary { width: 100%; gap: var(--s-3); padding-inline: var(--s-3); }
.site-public .wb-builder > summary { min-height: 40px; font-weight: 600; color: var(--ink); }
.site-public .wb-builder[open] > summary { background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s-3); }
.site-public .dev-tools-switcher > summary { display: flex; align-items: center; gap: var(--s-3); }
.site-public .wb-builder h3 { font-size: var(--fs-ui); margin: var(--s-3) 0; }
.site-public .regex-match-navigation { flex: none; padding: var(--s-2) var(--s-4); }
.site-public .regex-input { flex: 1; min-height: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.site-public .regex-input .cm-editor { height: 100%; }
.site-public .regex-input .cm-scroller { overflow: auto; }
.site-public .regex-input-match { background: var(--marker-soft); box-shadow: inset 0 -2px 0 var(--marker); border: 0; }
.site-public .regex-active-match { background: var(--marker); color: var(--marker-ink); outline: 0; }
.site-public .regex-empty-match { border-color: var(--marker); }
.site-public :is(.regex-range-selected,.regex-range-derived) { background-image: none; border: 1px dashed currentColor; }
.site-public :is(.regex-color-0,.regex-color-4) { --regex-color: var(--accent); background-color: var(--accent); color: var(--accent-ink); }
.site-public :is(.regex-color-1,.regex-color-5) { --regex-color: var(--ok); background-color: var(--ok-soft); color: var(--ok); }
.site-public .regex-color-2 { --regex-color: var(--err); background-color: var(--err-soft); color: var(--err); }
.site-public .regex-color-3 { --regex-color: var(--warn); background-color: var(--warn-soft); color: var(--warn); }
.site-public .regex-pattern-menu { box-shadow: var(--shadow-pop); }
.site-public .utility-result > .utility-result-feedback { color: var(--ok); background: var(--ok-soft); border-color: var(--ok); }
.site-public .utility-result > .utility-result-error, .site-public .utility-copy-feedback.utility-copy-error { color: var(--err); background: var(--err-soft); border-color: var(--err); }
.site-public .regex-match-results { flex: 1; min-height: 0; overflow: auto; margin: 0; }
.site-public .regex-match-results > p { margin: 0; padding: var(--s-3) var(--s-4); color: var(--ink-2); }
.site-public .regex-match-results :is(th,td) { padding: var(--s-2) var(--s-4); }
.site-public .regex-match-results :is(ol,dl) { margin: var(--s-2) 0; }
.site-public .regex-match-results ol { padding-left: var(--s-5); }
.site-public .regex-match-table-scroll { border: 0; border-radius: 0; max-height: none; }
.site-public .regex-json { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.site-public .regex-json pre { max-height: 240px; }
.site-public .tools-directory-hero { border: 0; border-radius: 0; padding: var(--s-6) 0 var(--s-4); background: transparent; }
.site-public .tools-directory-hero h1 { font-size: var(--fs-3xl); max-width: 24ch; margin-bottom: var(--s-3); }
.site-public .tools-directory-hero > p { color: var(--ink-2); font-size: var(--fs-lg); }
.site-public .tools-benefits { gap: var(--s-3) var(--s-5); margin: var(--s-5) 0; }
.site-public .tools-benefits li { padding: 0; background: transparent; color: var(--ink-2); font-size: var(--fs-ui); }
.site-public .tools-directory-search { max-width: 100%; font-size: var(--fs-sm); color: var(--ink-2); }
.site-public .tools-directory-search > span { background: var(--surface); border-color: var(--line-strong); border-radius: var(--r-sm); }
.site-public .tools-directory-search input { border: 0; outline-offset: var(--s-1); padding-block: var(--s-3); font-size: var(--fs-ui); background: transparent; color: var(--ink); }
.site-public .tools-category-filters { margin-top: var(--s-4); }
.site-public .tools-category-filters button { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.site-public .tools-directory-count { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.site-public :is(.tools-card-grid,.compact-tool-grid) { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-4); }
.site-public :is(.tools-directory-card,.ui-tool) { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--s-1) var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--ink); }
.site-public :is(.tools-directory-card,.ui-tool):hover { border-color: var(--accent); background: var(--surface); }
.site-public .tools-card-top { display: block; grid-row: 1 / span 3; margin: 0; }
.site-public :is(.tools-card-icon,.ui-tool__icon) { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.site-public :is(.tools-directory-card h2,.ui-tool h3) { font-size: var(--fs-body); letter-spacing: 0; line-height: 1.3; margin: 0; font-weight: 600; }
.site-public :is(.tools-directory-card p,.ui-tool p) { grid-column: 2; margin: 0; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.45; }
.site-public :is(.tools-card-category,.tool-category) { grid-column: 2; grid-row: 3; margin-top: var(--s-2); color: var(--ink-3); font-size: var(--fs-sm); }
.site-public .guide-main { position: relative; padding-top: var(--s-5); }
.site-public .directory-hero { padding-block: var(--s-5); }
.site-public .guide-intro { margin-top: var(--s-3); max-width: 60ch; font-size: var(--fs-lg); color: var(--ink-2); }
.site-public .directory-hero .ui-btn { margin-top: var(--s-5); }
.site-public .guide-facts { margin-top: var(--s-4); font-size: var(--fs-ui); color: var(--ink-3); }
.site-public .privacy-note { margin-block: var(--s-5); }
.site-public .privacy-mark { flex: none; color: var(--accent); }
.site-public .privacy-mark svg { width: 20px; height: 20px; }
.site-public .privacy-note p { margin-top: var(--s-1); }
.site-public .directory-jumps { display: flex; overflow: auto; position: sticky; top: var(--header-h); z-index: 10; gap: var(--s-2); padding-block: var(--s-3); border-bottom: 1px solid var(--line); background: var(--bg); }
.site-public .directory-jumps a { flex: none; }
.site-public .directory-group { margin-top: var(--s-7); scroll-margin-top: calc(var(--header-h) + var(--s-8)); }
.site-public .directory-group h2 { margin-bottom: var(--s-4); font-size: var(--fs-xl); }
.site-public .tool-grid, .site-public .editor-guide-grid:not(.compact-tool-grid) { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 var(--s-5); }
.site-public .tool-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-2); border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink); text-decoration: none; }
.site-public .tool-card:hover { background: var(--surface-2); }
.site-public .tool-card-tag { grid-row: 1 / span 2; align-self: center; width: 48px; height: 36px; font-size: var(--fs-xs); }
.site-public .tool-card h3 { font-size: var(--fs-body); margin: 0; }
.site-public .tool-card p { grid-column: 2; font-size: var(--fs-ui); color: var(--ink-2); margin: 0; }
.site-public .guide-callout { margin-block: var(--s-7); }
.site-public .guide-callout h2 { font-size: var(--fs-xl); margin-top: 0; }
.site-public .guide-callout p { margin-top: var(--s-3); }
.site-public .guide-callout a { display: inline-block; margin-top: var(--s-3); }
.site-public .guide-browser { position: absolute; top: var(--s-5); right: var(--gutter); margin: 0; width: max-content; max-width: 100%; }
.site-public .guide-main:has(.guide-browser) > .breadcrumbs { min-height: 36px; padding-right: calc(var(--s-9) + var(--s-6)); }
.site-public .guide-main:has(.guide-browser) > .breadcrumbs :is(span,a:first-child) { display: none; }
.site-public .guide-browser > summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-sm); list-style: none; }
.site-public .guide-browser-current { display: none; }
.site-public .guide-browser-menu { position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 30; width: min(360px,calc(100vw - var(--gutter) * 2)); max-height: min(70dvh,560px); overflow: auto; padding: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.site-public .guide-browser-menu p { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; padding: var(--s-2); }
.site-public .guide-browser-menu ul { list-style: none; margin: 0; padding: 0; }
.site-public .guide-browser-menu a { display: block; min-height: 36px; padding: var(--s-2); border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-ui); }
.site-public .guide-browser-menu a:hover { background: var(--surface-2); }
.site-public .guide-browser-menu a[aria-current] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.site-public .guide-hero { padding-block: var(--s-4); }
.site-public .guide-hero > div { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: var(--s-3) var(--s-5); }
.site-public .guide-hero h1 { flex: 1; }
.site-public .guide-hero .guide-intro { grid-column: 1 / -1; order: 3; margin: 0; }
.site-public .public-editor { margin-block: var(--s-4) var(--s-5); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.site-public .public-editor-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); }
.site-public .public-editor-heading h2 { font-size: var(--fs-ui); }
.site-public .public-editor-heading p { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-1); }
.site-public .public-editor-heading > a { flex: none; font-size: var(--fs-sm); }
.site-public .public-editor-status { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-ui); }
.site-public .wb-embed { margin-top: var(--s-4); width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; height: clamp(420px,70dvh,640px); }
.site-public .public-editor-frame { width: 100%; height: 100%; display: block; border: 0; }
.site-public .public-editor-footnote { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--fs-sm); max-width: 100ch; }
.site-public .guide-toc { display: none; }
.site-public .guide-layout { margin-top: var(--s-7); }
.site-public .guide-article { max-width: 720px; }
.site-public .guide-section { margin-bottom: var(--s-7); }
.site-public .guide-section h2 { margin-top: 0; }
.site-public .guide-section p { margin-top: var(--s-3); }
.site-public .guide-example { margin: var(--s-6) 0 var(--s-7); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.site-public .example-bar { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.site-public .example-dot { display: none; }
.site-public .example-mode { margin-left: auto; }
.site-public .guide-example pre { border: 0; border-radius: 0; margin: 0; }
.site-public .guide-example figcaption { padding: var(--s-4); font-size: var(--fs-sm); color: var(--ink-2); }
.site-public .guide-example figcaption a { display: block; width: max-content; margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.site-public .guide-screenshot { margin: var(--s-6) 0; }
.site-public .guide-screenshot img { display: block; border: 1px solid var(--line); border-radius: var(--r-md); height: auto; }
.site-public .guide-screenshot figcaption { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-3); }
.site-public .guide-sequence { display: grid; gap: var(--s-3); margin-block: var(--s-6); }
.site-public .guide-sequence a { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); }
.site-public .guide-sequence span { font-size: var(--fs-sm); color: var(--ink-3); }
.site-public .directory-back { display: inline-block; margin-top: var(--s-5); font-size: var(--fs-ui); }
.site-public .changelog-intro { margin-block: var(--s-5) var(--s-7); }
.site-public .release-entry { border-top: 1px solid var(--line); padding-top: var(--s-6); margin-top: var(--s-6); }
.site-public .release-entry-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.site-public .release-entry-heading time { font-size: var(--fs-sm); color: var(--ink-3); }
.site-public .release-latest { display: inline-block; margin-left: var(--s-3); padding: var(--s-1) var(--s-2); font-size: var(--fs-xs); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.site-public .release-notes h3 { font-size: var(--fs-body); margin-top: var(--s-5); }
.site-public .release-notes ul { padding-left: var(--s-5); margin-block: var(--s-3); }
.site-public .release-notes li { margin-top: var(--s-2); }
.site-public .not-found { min-height: 60dvh; padding-block: var(--s-8); }
.site-public .not-found p { margin-block: var(--s-5); }
@media(min-width:640px) {
  .site-public .guide-hero > div { grid-template-columns: minmax(0,1fr) auto; }
  .site-public .guide-main:has(.guide-browser) > .breadcrumbs :is(span,a:first-child) { display: inline; }
  .site-public .ui-status__right > span { display: inline; }
  .site-public .dev-tools-intro > .dev-tools-page-description { -webkit-line-clamp: 2; }
  .site-public :is(.tools-card-grid,.compact-tool-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-public .utility-help-example { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-public .guide-sequence { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-public .guide-sequence a:last-child { text-align: right; }
  .site-public .wb-embed { height: clamp(480px,72dvh,780px); }
}
@media(min-width:900px) {
  .site-public .wb-panes { grid-template-columns: minmax(0,1fr) minmax(0,1fr); height: clamp(360px,calc(100dvh - 370px),780px); }
  .site-public .wb-panes > :is(.utility-input-panel,.utility-result,.utility-output-empty) { height: 100%; }
  .site-public .wb-panes--inspector { grid-template-columns: minmax(0,2fr) minmax(0,3fr); min-height: 320px; }
  .site-public .wb-panes--inspector > :is(.utility-input-panel,.utility-result,.utility-output-empty) { height: 100%; min-height: 0; }
  .site-public .wb-jwt .wb-panes { height: clamp(320px,calc(100dvh - 430px),780px); }
  .site-public .wb-jwt .utility-result { overflow: auto; }
  .site-public .wb-regex .wb-panes { height: clamp(240px,calc(100dvh - 550px),680px); grid-template-columns: minmax(0,11fr) minmax(0,9fr); }
  .site-public .tool-grid, .site-public .editor-guide-grid:not(.compact-tool-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-public .tools-directory-hero { display: grid; grid-template-columns: minmax(0,1fr) 320px; column-gap: var(--s-7); }
  .site-public .tools-directory-hero :is(h1,p,.tools-benefits) { grid-column: 1; }
  .site-public .tools-directory-search { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .site-public .tools-category-filters { grid-column: 1 / -1; }
  .site-public .wb-pattern { grid-template-columns: minmax(0,1fr) auto; }
  .site-public .wb-pattern > h3 { grid-column: 1 / -1; }
  .site-public .wb-pattern .regex-advanced { grid-column: 1 / -1; }
}
@media(min-width:1024px) {
  .site-public .tool-below { grid-template-columns: minmax(0,1fr) 340px; }
  .site-public .tool-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  .site-public :is(.tools-card-grid,.compact-tool-grid) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .site-public .guide-main:has(.directory-jumps) { display: grid; grid-template-columns: 220px minmax(0,1fr); column-gap: var(--s-7); }
  .site-public .guide-main > :is(.breadcrumbs,.directory-hero,.privacy-note) { grid-column: 1 / -1; }
  .site-public .directory-jumps { display: grid; align-self: start; top: calc(var(--header-h) + var(--s-5)); border: 0; }
  .site-public .directory-groups { grid-column: 2; }
  .site-public .directory-groups > .directory-group:first-child { margin-top: var(--s-3); }
}
@media(min-width:1100px) {
  .site-public.layout-reading:has(.guide-layout) { --container: 1088px; }
  .site-public .guide-layout { display: grid; grid-template-columns: minmax(0,720px) 240px; column-gap: var(--s-8); justify-content: start; }
  .site-public .guide-toc { display: block; grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .site-public .guide-article { grid-column: 1; grid-row: 1; }
}
@media(pointer:coarse) {
  .site-public :is(button,summary,select,.site-footer a,.guide-browser-menu a,.directory-jumps a) { min-height: 44px; }
}
/* Leave room for at least one match below the table header and result actions. */
@media(min-width:900px) and (max-height:760px) {
  .site-public .wb-regex .wb-panes { height: 360px; }
}
@media(max-width:899px) {
  .site-public .wb-regex .utility-result { min-height: 360px; }
}
.toc { display: grid; gap: var(--s-1); font-size: var(--fs-ui); }
.toc a { display: block; padding: var(--s-2) var(--s-3); color: var(--ink-2); border-radius: var(--r-sm); }
.toc a:hover { background: var(--surface-2); }
.toc a[aria-current="location"] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--marker); background: var(--surface-2); }
.toc-heading { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; padding: var(--s-2) var(--s-3); }
@media(min-width:768px) { .site-public .site-actions > [data-theme-control] { display: inline-flex; } .site-public .site-header > .container { gap: var(--s-5); } .site-public .site-actions { gap: var(--s-2); } }
/* Homepage: eight sections, with the actual notebook as the opening preview. */
.site-public .hero { padding-block: var(--s-7); }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
.site-public .hero h1 { font-size: var(--fs-hero); line-height: 1.08; letter-spacing: -.035em; max-width: 16ch; }
.hero .accent-text { color: var(--accent); }
.hero__lede { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--fs-lg); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.hero__cta .text-button { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); font-weight: 600; min-height: 44px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); color: var(--ink-2); font-size: var(--fs-ui); }
.hero__trust span { display: inline-flex; gap: var(--s-2); align-items: center; }
.shot { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.hero-shot { box-shadow: var(--shadow-pop); }
.shot a { display: block; color: var(--ink-3); text-decoration: none; }
.shot a:hover { text-decoration: none; }
.shot a:hover .preview-expand { text-decoration: underline; }
.shot a:focus-visible { outline-offset: -3px; }
.preview-bar { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); }
.preview-expand { margin-left: auto; color: var(--accent); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { flex: 1; padding: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-ui); color: var(--ink-2); }
.caption-tag { display: block; margin-bottom: var(--s-1); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.site-public main > :is(.developer-tools-section,.showcase,.features,.storage-section,.editor-guides,.faq) { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.site-public .section-head h2, .site-public #preview-heading { font-size: var(--fs-3xl); max-width: 22ch; line-height: 1.15; }
.section-head p { width: 100%; max-width: 56ch; color: var(--ink-2); font-size: var(--fs-lg); }
.section-head > a { font-size: var(--fs-ui); font-weight: 600; }
.preview-gallery { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-5); margin-top: var(--s-6); }
.preview-footnote { margin-top: var(--s-5); color: var(--ink-3); font-size: var(--fs-sm); }
.bento-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-5); }
.feature { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.site-public .feature h3 { display: flex; align-items: center; gap: var(--s-3); font-size: clamp(1.125rem, 1rem + .3vw, 1.375rem); text-wrap: pretty; }
.feature__demo { margin-top: auto; container-type: inline-size; }
.feature__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); }
.feature__text p { max-width: 46ch; margin-top: var(--s-3); color: var(--ink-2); }
.feature__text > a { display: inline-block; margin-top: var(--s-4); font-size: var(--fs-ui); }
.feature__demo > :is(.note-demo,.json-demo,.code-demo,.diff-demo) { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.demo-heading,.code-demo-top { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); min-height: 40px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); }
.demo-toggle { margin-left: auto; padding: var(--s-1) var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--accent); font-size: var(--fs-sm); }
.note-demo label { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--fs-ui); }
.note-demo input { accent-color: var(--accent); width: 16px; height: 16px; }
.note-demo label:has(input:checked) span { text-decoration: line-through; color: var(--ink-3); }
.note-tags { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.note-tags span,.data-pill { padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); }
.site-public :is(.json-demo,.code-demo) pre { margin: 0; padding: var(--s-4); overflow: auto; font: 400 var(--fs-sm)/1.65 var(--font-code); background: var(--surface-2); color: var(--ink); }
.site-public :is(.code-key,.code-purple,.code-blue) { color: var(--accent); }
.site-public :is(.code-string,.code-green) { color: var(--accent-hover); }
.site-public .code-bool { color: var(--warn); }
.json-demo table { width: 100%; border-collapse: collapse; font: 400 var(--fs-ui)/1.6 var(--font-code); text-align: left; }
.json-demo :is(th,td) { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.code-demo-top > span:last-child { margin-left: auto; }
.code-demo-bottom { display: flex; justify-content: space-between; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }
.demo-hint,.compare-footer { display: block; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.diff-demo { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-3); padding: var(--s-4); }
.diff-label { display: block; font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s-3); }
.diff-demo code { display: block; font-size: var(--fs-sm); line-height: 1.8; overflow-wrap: anywhere; }
.diff-demo > div:last-child { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.diff-arrow { display: none; }
.removed { background: var(--err-soft); color: var(--err); }
.added { background: var(--ok-soft); color: var(--ink); }
.storage-panel { display: grid; gap: var(--s-7); align-items: center; }
.site-public .storage-copy h2 { font-size: var(--fs-3xl); }
.storage-copy p { margin-top: var(--s-5); color: var(--ink-2); max-width: 56ch; }
.storage-copy > a { display: inline-block; margin-top: var(--s-5); font-size: var(--fs-ui); }
.storage-visual { display: grid; place-items: center; gap: var(--s-6); padding: var(--s-6); background: var(--surface-2); border-radius: var(--r-lg); }
.local-notebook { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.notebook-symbol { color: var(--accent); }
.local-notebook > span:last-child { color: var(--ink-3); font-size: var(--fs-ui); }
.backup-chip { display: grid; justify-items: center; gap: var(--s-3); font-size: var(--fs-ui); }
.backup-chip small { display: block; margin-top: var(--s-1); color: var(--ink-3); font-size: var(--fs-sm); }
.site-public .editor-guides .ui-row { grid-template-columns: 40px minmax(0,1fr); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; }
.site-public .editor-guides .ui-row:hover { border-color: var(--accent); }
.site-public .editor-guides .editor-guide-grid { gap: var(--s-3); }
.editor-guides .ui-row__tile { grid-row: 1 / span 2; }
.site-public .editor-guides h3 { font-size: var(--fs-body); }
.editor-guides .ui-row p { grid-column: 2; font-size: var(--fs-ui); color: var(--ink-2); }
.editor-guides-more { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); font-size: var(--fs-ui); color: var(--ink-3); }
.site-public .faq { display: grid; gap: var(--s-6); }
.site-public .faq .section-head { display: block; margin-bottom: 0; }
.site-public .faq .section-head p { margin-top: var(--s-3); }
.cta-band { padding-block: var(--s-8); background: var(--band-bg); color: var(--band-ink); }
.site-public .cta-band h2 { color: var(--band-ink); font-size: var(--fs-3xl); max-width: 16ch; }
.cta-band p { color: var(--band-ink); margin-top: var(--s-3); }
.cta-band .ui-btn { margin-top: var(--s-5); }
.site-public:has(.cta-band) .site-footer { margin-top: 0; }
.site-public:has(.cta-band) .site-footer nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-3) var(--s-5); }
.site-public .compact-tool-grid .ui-tool { grid-template-columns: 40px minmax(0,1fr) 16px; align-content: start; padding: var(--s-5) var(--s-4); }
.compact-tool-grid .ui-tool__icon { grid-row: 1 / span 2; }
.compact-tool-grid .ui-tool::after { content: '→'; grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--accent); }
.compact-tool-grid .ui-tool h3 { grid-column: 2; }
.preview-dialog { width: min(1440px,calc(100vw - var(--s-6))); max-height: calc(100dvh - var(--s-6)); padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.preview-dialog::backdrop { background: color-mix(in srgb,var(--ink) 70%,transparent); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.site-public .dialog-top h2 { font-size: var(--fs-lg); }
.dialog-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); }
.preview-dialog img { display: block; width: 100%; height: auto; }
.preview-dialog p { margin-top: var(--s-4); font-size: var(--fs-ui); }
.preview-open { overflow: hidden; }
@media(min-width:640px) { .preview-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } .preview-gallery > :last-child { grid-column: 1 / -1; } }
@container(min-width:420px) { .diff-demo { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .diff-demo > div:last-child { border-top: 0; border-left: 1px solid var(--line); padding-top: 0; padding-left: var(--s-4); } }
@media(min-width:900px) { .preview-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); } .preview-gallery > :last-child { grid-column: auto; } .storage-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-8); } }
@media(min-width:1024px) {
  .bento-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero__grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); column-gap: var(--s-8); align-items: center; }
  .site-public .hero { padding-block: var(--s-8) var(--s-7); }
  .site-public .faq { grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: var(--s-8); }
  .faq .section-head { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
}
@media(min-width:768px) {
  .section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-7); }
  .section-head p { width: auto; }
  .cta-band > .container { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 var(--s-7); }
  .cta-band .ui-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .site-public:has(.cta-band) .site-footer nav { grid-template-columns: repeat(3,auto); }
}
@media(max-width:639px) {
  .site-public main > :is(.developer-tools-section,.showcase,.features,.storage-section,.editor-guides,.faq) { padding-block: var(--s-7); }
  .feature { padding: var(--s-4); }
  .hero__trust { gap: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
}

/* Generators need settings and output, with no empty document input surface. */
.site-public .wb-panes.wb-panes--generator { grid-template-columns: minmax(0,1fr); height: auto; }
.site-public .wb-panes--generator > .utility-input-panel { height: auto; padding: var(--s-3) var(--s-4); }
.site-public .wb-panes--generator > .utility-input-panel p { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.6; }
.site-public .wb-panes--generator > :is(.utility-result,.utility-output-empty) { height: clamp(240px,42dvh,440px); }
.site-public .utility-help-example:has(> figure:only-child) { grid-template-columns: minmax(0,1fr); }
.site-public .wb-hash > .checksum-source { margin: 0; }
@media(min-width:900px) {
  .site-public .wb-hash .wb-panes { height: clamp(280px,calc(100dvh - 470px),680px); }
}

@media(max-width:639px) {
  .site-public .wb-hash .utility-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .site-public .wb-hash .utility-options label { display: grid; flex: none; gap: var(--s-1); }
  .site-public .wb-hash .utility-options label:first-child { grid-column: 1 / -1; }
  .site-public .wb-hash .utility-options :is(select,input) { width: 100%; }
}

.site-open-short { display: none; }
@media(max-width:359px) { .site-open-long { display: none; } .site-open-short { display: inline; } }