/* The checkerboard is an explicit fixed light specimen surface, independent of the page theme. */
:root { color: var(--tools-text); background: var(--tools-bg); font-family: var(--tools-sans); font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input, select, textarea { font: inherit; }
[v-cloak] { display: none; }
:focus-visible { outline: 3px solid var(--tools-green); outline-offset: 3px; }
.brand { color: inherit; text-decoration: none; }
main { width: min(1120px, calc(100% - 40px)); margin: 48px auto 70px; }
.hero { text-align: center; margin: 0 auto 32px; max-width: 780px; }
.hero h1 { text-wrap: balance; margin: 12px 0; font: 500 clamp(2rem, 4vw, 3.4rem)/1.08 var(--tools-serif); letter-spacing: -.035em; }
.hero-copy { line-height: 1.6; color: var(--tools-muted); font-size: 1.15rem; }
.eyebrow { color: var(--tools-green-text); font: 700 .8rem/1.4 var(--tools-mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-proof { display: flex; justify-content: center; list-style: none; padding: 0; color: var(--tools-green-text); }
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 18px; height: 18px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 28px; border: 1px solid var(--tools-line); border-radius: 24px; background: var(--tools-surface); }
.editor, .output { min-width: 0; }
.section-heading { display: flex; gap: 10px; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 10px; }
.section-heading h2, .section-heading label { font-size: 1.05rem; font-weight: 700; margin: 0; }
.workspace label { display: block; margin: 14px 0 6px; font-weight: 600; }
.workspace .section-heading label { margin: 0; }
.workspace textarea, .workspace input:not([type=checkbox]):not([type=color]), .workspace select { width: 100%; padding: 11px 12px; border: 1px solid var(--tools-line); border-radius: 10px; background: var(--tools-bg); color: var(--tools-text); font: inherit; min-width: 0; }
.workspace textarea { resize: vertical; line-height: 1.5; font-family: var(--tools-mono, monospace); }
.workspace #equation { min-height: 170px; }
.workspace button { cursor: pointer; font: inherit; }
.downloads, .copy-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.workspace .choice { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-weight: 400; min-height: 44px; }
.choice input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--tools-action); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 11px 14px; min-height: 44px; border-radius: 10px; border: 1px solid var(--tools-line); text-decoration: none; font-weight: 700; }
.button-primary { background: var(--tools-action); color: var(--tools-on-action); border-color: var(--tools-action); }
.button-primary:hover { background: var(--tools-action-hover); }
.button-secondary { background: var(--tools-surface); color: var(--tools-text); }
button svg { width: 18px; height: 18px; flex-shrink: 0; }
.quiet { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--tools-green-text); min-height: 44px; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; font-size: .9rem; }
.workspace button:disabled { opacity: .5; cursor: default; }
.hint, .dimensions, #status { color: var(--tools-muted); font-size: .88rem; line-height: 1.5; }
#error { color: var(--tools-red); line-height: 1.5; }
#status { min-height: 1.5em; }
.preview, .large-preview { background-color: #fff; background-image: linear-gradient(45deg, #ececec 25%, transparent 25%), linear-gradient(-45deg, #ececec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ececec 75%), linear-gradient(-45deg, transparent 75%, #ececec 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.preview { color-scheme: light; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 12px; border: 1px solid var(--tools-line); overflow: auto; }
.preview img { max-width: 100%; height: auto; }
.preview .illustration { max-width: 180px; }
.preview p { color: #17242e; background: #fff; padding: 8px; }
.settings { border-top: 1px solid var(--tools-line); margin-top: 16px; padding-top: 14px; }
.settings summary { cursor: pointer; font-weight: 600; min-height: 44px; }
.scale-sample { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px; border: 1px solid var(--tools-line); border-radius: 10px; overflow: auto; }
.ex-square { display: inline-block; background: var(--tools-text); flex-shrink: 0; max-width: 100%; max-height: 100px; }
.color-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type=color] { width: 44px; min-width: 44px; height: 44px; padding: 2px; border: 1px solid var(--tools-line); background: var(--tools-surface); border-radius: 8px; }
.copy-actions { justify-content: space-between; }
.scope-note { display: flex; align-items: center; gap: 16px; margin-top: 24px; color: var(--tools-muted); line-height: 1.6; }
.scope-note img { width: 120px; flex-shrink: 0; }
dialog { max-width: calc(100vw - 32px); width: 1000px; max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid var(--tools-line); border-radius: 18px; background: var(--tools-surface); color: var(--tools-text); }
dialog::backdrop { background: rgb(0 0 0 / .55); }
.large-preview { margin-top: 16px; padding: 32px; overflow: auto; max-height: calc(100dvh - 160px); }
.large-preview img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .workspace { gap: 24px; padding: 22px; } .downloads { flex-direction: column; align-items: stretch; } }
@media (max-width: 680px) { main { width: calc(100% - 24px); margin-top: 32px; } .workspace { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; } .hero h1 { font-size: 2.2rem; } .hero-copy { font-size: 1rem; } .settings { margin-top: 12px; } .downloads { flex-direction: row; } .downloads .button { flex: 1 1 100px; } .scope-note img { display: none; } .output { display: contents; } .output > .section-heading { margin-top: 12px; } .editor { display: contents; } .editor > .settings { order: 2; } .output > .settings { order: 3; } .workspace > .editor > *, .workspace > .output > * { min-width: 0; } .workspace { gap: 10px; } .color-fields { grid-template-columns: minmax(0, 1fr); } }
.file-input { display: none; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.equation-error { color:var(--tools-red); font-size:.92rem; line-height:1.5; margin-top:12px; }
.equation-error p { margin:0; }
.error-context { overflow:auto; padding:10px; border:1px solid var(--tools-line); border-radius:8px; color:var(--tools-text); background:var(--tools-bg); font-family:var(--tools-mono); }
.error-context mark { color:inherit; background:color-mix(in srgb,var(--tools-red) 16%,transparent); text-decoration:underline wavy var(--tools-red); text-underline-offset:3px; }
.copy-format { display:flex; gap:10px; align-items:center; }
.workspace .copy-format select { width:auto; max-width:100px; margin:0; }
.copy-format button { white-space:nowrap; }