/* The same classes style React site chrome and generated tool-page chrome. */
.brand-container { box-sizing: border-box; width: 100%; max-width: var(--site-width); margin-inline: auto; padding-inline: var(--site-gutter); }
.brand-wordmark { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.5; color: rgb(var(--ink)); user-select: none; }
.brand-home { display: inline-flex; padding-inline: .25rem; border-radius: .25rem; text-decoration: none; }
.brand-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; background: rgb(var(--canvas)); color: rgb(var(--ink)); }
.brand-header[data-scrolled="true"] { border-bottom-color: rgb(var(--line)); background: rgb(var(--canvas) / .95); }
.brand-header-inner { display: flex; align-items: center; min-height: 5rem; gap: 1rem; }
.brand-desktop-nav { display: none; align-items: center; gap: 1.75rem; margin-left: auto; }
.brand-nav-link { border-radius: .25rem; padding-block: .5rem; color: rgb(var(--muted)); font-size: .875rem; font-weight: 500; line-height: 1.5; text-decoration: none; }
.brand-nav-link:hover, .brand-nav-link[aria-current="page"] { color: rgb(var(--ink)); }
.brand-header-actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.brand-button, .tools-surface .button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-button); background: rgb(var(--canvas)); color: rgb(var(--ink)); padding: .75rem 1.25rem; min-height: 2.75rem; font-family: var(--font-sans); font-size: .875rem; font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; }
.brand-button-primary, .tools-surface .button.primary, .tools-surface .button.dark { border-color: rgb(var(--accent)); background: rgb(var(--accent)); color: rgb(var(--accent-ink)); }
.brand-button:hover, .tools-surface .button:hover { background: rgb(var(--surface-highlight)); }
.brand-button-primary:hover, .tools-surface .button.primary:hover, .tools-surface .button.dark:hover { background: rgb(var(--accent) / .9); }
.brand-button:disabled { opacity: .65; cursor: not-allowed; }
.brand-header-cta { display: none; }
.brand-menu-toggle { font: 400 .875rem/1.5 var(--font-sans); color: rgb(var(--ink)); background: transparent; border: 1px solid rgb(var(--line)); border-radius: .5rem; padding: .75rem 1rem; min-height: 2.75rem; cursor: pointer; }
.brand-theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; padding: 0; background: transparent; color: rgb(var(--muted)); cursor: pointer; }
.brand-theme-toggle:hover { color: rgb(var(--ink)); background: rgb(var(--surface)); }
.brand-theme-icon { width: 1rem; height: 1rem; display: block; }
.brand-mobile-panel { position: absolute; top: 100%; inset-inline: 0; padding: 1.5rem; border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--canvas)); max-height: calc(100dvh - 5rem); overflow: auto; }
.brand-mobile-panel nav { display: grid; gap: .5rem; }
.brand-mobile-panel .brand-nav-link { display: block; font-size: 1.125rem; }
.brand-mobile-panel .brand-button { margin-top: .5rem; }
.brand-footer { display: block; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface-highlight) / .1); padding: 4rem 0; color: rgb(var(--ink)); font: 400 .875rem/1.625 var(--font-sans); }
.brand-footer-grid { display: grid; gap: 3rem; }
.brand-footer .brand-wordmark { font-size: 1.25rem; }
.brand-footer-description { max-width: 24rem; margin: 1.25rem 0 0; color: rgb(var(--muted)); }
.brand-footer-email { display: inline-block; margin-top: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.brand-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .75rem 1.5rem; }
.brand-footer-nav a { text-decoration: none; }
.brand-footer-nav a:hover { text-decoration: underline; }
.brand-footer-heading { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.brand-footer-note { margin: 1rem 0; color: rgb(var(--muted)); }
.brand-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--line)); color: rgb(var(--muted)); }
.brand-footer-bottom p { margin: 0; }
.brand-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.brand-legal a { text-decoration: none; }
.brand-legal a:hover { text-decoration: underline; }
.brand-control, .tools-surface input:not([type="checkbox"]):not([type="radio"]), .tools-surface select, .tools-surface textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 3rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-control); padding: .75rem 1rem; background: rgb(var(--canvas)); color: rgb(var(--ink)); font: 400 1rem/1.5 var(--font-sans); }
.brand-control::placeholder, .tools-surface input::placeholder, .tools-surface textarea::placeholder { color: rgb(var(--muted)); }
.brand-control[aria-invalid="true"], .tools-surface [aria-invalid="true"] { border-color: rgb(var(--danger)); }
.brand-label { display: block; margin-bottom: .5rem; font: 500 .875rem/1.5 var(--font-sans); }
.brand-checkbox { flex-shrink: 0; width: 18px; height: 18px; margin-top: .25rem; accent-color: rgb(var(--ink)); }
.brand-header :focus-visible, .brand-footer :focus-visible, .brand-control:focus-visible, .brand-button:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 4px; }
.brand-header [hidden], .brand-footer [hidden] { display: none !important; }
@media (min-width: 1024px) { .brand-desktop-nav { display: flex; } .brand-header-actions { margin-left: 0; gap: 1.25rem; } .brand-header-cta { display: inline-flex; } .brand-menu-toggle, .brand-mobile-panel { display: none; } .brand-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .brand-header *, .brand-footer * { transition: none !important; } }
@media print { .brand-header, .brand-footer { display: none !important; } }

.tools-surface .button.small { font-size: .8125rem; padding: .5rem .875rem; min-height: 2.75rem; }
.tools-surface input[type="file"]::file-selector-button { font: 500 .875rem/1.5 var(--font-sans); background: rgb(var(--surface-highlight)); color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); border-radius: .5rem; padding: .375rem .75rem; margin-right: .75rem; cursor: pointer; }
.tools-surface button:disabled { opacity: .65; cursor: not-allowed; }
/* Printed output remains paper-coloured even when its workspace is dark. */
.tools-surface .document .empty { color: #4b5563; }
.tools-surface .document .empty b { color: #0a0a0a; }