/* Shared layout and components. Each appearance defines its own complete palette. */
:root {
  --radius-sm:4px; --radius:6px; --radius-lg:8px;
  --font:"Manrope","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Code","SFMono-Regular",Consolas,ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { min-width:0; scroll-padding-top:100px; scrollbar-color:var(--line-strong) transparent; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,summary,select { cursor:pointer; }
button { color:inherit; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(28px,2.7vw,37px); line-height:1.17; font-weight:680; letter-spacing:-1.25px; }
h2 { font-size:18px; line-height:1.35; font-weight:650; letter-spacing:-.35px; }
h3 { font-size:14px; line-height:1.45; font-weight:650; }
code,.formula,pre { font-family:var(--mono); font-variant-ligatures:none; }
code { font-size:.94em; }
[hidden] { display:none!important; }
::selection { background:var(--accent-soft); color:var(--accent); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:where(button,input,select,textarea,summary,a):focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
:where(h1,h2)[tabindex="-1"]:focus { outline:none; }
.ui-icon,.nav-icon,.icon { display:inline-block; width:18px; height:18px; flex:0 0 auto; vertical-align:middle; }
svg.ui-icon,svg.nav-icon,svg.icon { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.skip-link { position:fixed; top:-70px; left:16px; z-index:100; padding:12px 18px; border-radius:8px; background:var(--surface); border:1px solid var(--line); }
.skip-link:focus { top:12px; }

/* Navigation and application chrome. */
.app-shell { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100dvh; }
.workspace-nav,.nav-library { display:flex; align-items:center; gap:11px; width:100%; min-height:43px; padding:10px 13px; text-align:left; border:1px solid transparent; border-radius:8px; color:var(--nav-muted); background:transparent; font-size:13px; font-weight:500; line-height:1.4; }
.workspace-nav:hover,.nav-library:hover { color:var(--nav-ink); background:var(--nav-surface); }
.workspace-nav.active { color:var(--accent); background:var(--accent-soft); border-color:var(--line-strong); }
.workspace-nav .nav-icon { width:18px; height:18px; opacity:.9; }
.nav-text { flex:1; min-width:0; }
.nav-count,.count-badge { display:inline-flex; min-width:23px; height:20px; align-items:center; justify-content:center; padding:0 6px; border-radius:5px; background:var(--nav-surface); color:var(--nav-muted); font:10px var(--mono); }
.ready-dot { display:inline-block; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--green); }
.core-version,.version { color:var(--subtle); font:10px/1.5 var(--mono); }
.workspace { min-width:0; display:flex; flex-direction:column; }
.header-context { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; min-width:0; }
.header-context strong { color:var(--ink); font-weight:550; }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.header-tools > select,.language-control select { width:118px; min-height:35px; padding:6px 10px; font-size:12px; border-color:var(--line); background:var(--surface); }
.header-divider { width:1px; height:22px; background:var(--line); }
.engine-badge { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:550; white-space:nowrap; color:var(--green); border:1px solid var(--line); background:var(--surface-soft); border-radius:6px; padding:5px 9px; }
.theme-switch,.theme-control { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); }
.theme-option { display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--muted); }
.theme-option:hover { background:var(--surface-hover); color:var(--ink); }
.theme-option[aria-pressed="true"],.theme-option.active { background:var(--surface-raised); color:var(--accent); box-shadow:0 1px 4px #0000000e; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:35px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface); }
.theme-toggle:hover { background:var(--surface-hover); color:var(--accent); }
.sound-toggle { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--surface-soft); }
.sound-toggle:hover { color:var(--ink); background:var(--surface-hover); }
.sound-toggle[aria-pressed="true"] { color:var(--ink); }
.sound-toggle .ui-icon { width:16px; height:16px; }
main { width:100%; max-width:1550px; margin:0 auto; padding:36px clamp(24px,3vw,44px) 44px; flex:1; min-width:0; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; }
.app-shell[data-section="workspace"] .page-heading { margin-bottom:20px; }
.app-shell[data-section="workspace"] .page-heading .page-kicker,.app-shell[data-section="workspace"] .page-heading .subtitle { display:none; }
.app-shell[data-section="workspace"] .page-heading h1 { font-size:26px; }
.app-shell[data-section="workspace"][data-view="result"] .page-heading,.app-shell[data-section="workspace"][data-view="statistics"] .page-heading,.app-shell[data-section="workspace"] #status-message[data-status="complete"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.result-header p { display:none; }
.result-header.plan-header { margin-bottom:18px; }
.eyebrow,.page-kicker { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.subtitle { margin-top:12px; color:var(--muted); font-size:14px; line-height:1.7; max-width:760px; }
.page-meta,.page-heading-actions { display:flex; align-items:center; gap:10px; padding-top:8px; }
.workspace-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:1550px; width:100%; margin:0 auto; padding:18px clamp(24px,3vw,44px) 25px; color:var(--subtle); font-size:10px; border-top:1px solid var(--line); }
.workspace-footer > span:first-child { color:var(--muted); font-weight:600; }

/* Controls and mathematical input. */
button { transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:9px 14px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:600; line-height:1.35; text-decoration:none; white-space:nowrap; }
.button:hover { background:var(--surface-hover); border-color:var(--muted); }
.button.primary,.primary { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); box-shadow:0 1px 2px #0c342c12; }
.button.primary:hover,.primary:hover { color:var(--accent-ink); background:var(--accent-hover); border-color:var(--accent-hover); }
.button.quiet,.quiet { background:var(--surface); border-color:var(--line); color:var(--muted); }
.button.quiet:hover { color:var(--ink); border-color:var(--line-strong); }
.button.new-model { width:100%; justify-content:flex-start; min-height:42px; margin:0 0 26px; padding:10px 13px; color:var(--nav-ink); border-color:var(--nav-line); background:var(--nav-surface); }
.button.new-model:hover { background:var(--surface-hover); border-color:var(--line-strong); }
.button.new-model .ui-icon { color:var(--accent); }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:5px 0; border:0; border-radius:4px; background:transparent; color:var(--accent); font-size:12px; font-weight:600; line-height:1.4; text-decoration:none; white-space:nowrap; }
.text-button:hover { color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
button:disabled { cursor:default; opacity:.45; box-shadow:none; }
input,select,textarea { width:100%; min-width:0; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:7px; padding:10px 12px; min-height:42px; line-height:1.45; transition:border-color .15s ease,box-shadow .15s ease; }
input::placeholder,textarea::placeholder { color:var(--subtle); opacity:1; }
input:hover,select:hover,textarea:hover { border-color:var(--muted); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
input:disabled,textarea:disabled { color:var(--subtle); background:var(--surface-soft); cursor:default; }
input[type="number"] { font-variant-numeric:tabular-nums; }
textarea { display:block; resize:vertical; }
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"] { border-color:var(--danger); background:var(--danger-soft); }
label { min-width:0; }
.field-label { display:block; margin-bottom:8px; color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.005em; }
.field-hint,.muted,.plan-note { color:var(--muted); font-size:12px; line-height:1.75; margin-top:10px; }
.small-label { color:var(--muted); font-size:10px; font-weight:700; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.title-input { font-size:21px; font-weight:600; letter-spacing:-.5px; }
.formula { color:var(--ink); font-size:13px; line-height:1.75; background:var(--surface-code); tab-size:2; }
.editor-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; align-items:start; }
.editor { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.editor-section { padding:25px 28px; border-top:1px solid var(--line); }
.editor > .editor-section:first-child { border-top:0; }
.editor-section > h2 { font-size:16px; }
.model-intro { padding:25px 28px; }
.section-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:22px; }
.section-heading > div:nth-child(2) { min-width:0; flex:1; }
.section-heading h2 { font-size:15px; }
.section-heading p { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.65; }
.section-number { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; margin-top:1px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--line); border-radius:8px; font:11px var(--mono); }
.section-heading > .text-button { margin-left:auto; padding-top:3px; }
.goal-grid,.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.settings-grid { margin-top:24px; }
.variable-legend,.variable-row { display:grid; grid-template-columns:.85fr 1.45fr .9fr .8fr .8fr 28px; align-items:center; gap:10px; }
.variable-legend { margin-bottom:9px; color:var(--muted); font-size:11px; }
.variable-row { margin-bottom:10px; }
.variable-row input,.variable-row select { padding:9px 10px; font-size:12px; }
.variable-row input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.variable-row input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.remove-button { display:inline-flex; align-items:center; justify-content:center; width:28px; min-height:32px; padding:0; border:0; border-radius:6px; color:var(--subtle); background:transparent; font-size:20px; }
.remove-button:hover { color:var(--danger); background:var(--danger-soft); }
.data-row { display:grid; grid-template-columns:120px minmax(0,1fr) 28px; gap:10px; align-items:center; margin-bottom:10px; }
.data-equals { display:none; }
.constraint-row { display:grid; grid-template-columns:24px minmax(0,1fr) 28px; align-items:center; gap:10px; margin-bottom:10px; }
.constraint-index { color:var(--subtle); font:11px var(--mono); }
.constraint-row input { font-size:13px; }
.row-empty { padding:12px 0; color:var(--muted); font-size:12px; }
.syntax-help { margin-top:18px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:12px; background:var(--surface-soft); }
summary { color:var(--muted); font-size:12px; line-height:1.6; }
summary:hover { color:var(--accent); }
.syntax-help summary { color:var(--accent); font-weight:550; }
.syntax-help p { margin-top:12px; line-height:1.75; }
.syntax-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; margin-top:14px; }
.syntax-grid code { color:var(--accent); overflow-wrap:anywhere; }
.editor-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:20px 28px; border-top:1px solid var(--line); background:var(--surface-soft); }
.editor-actions p { margin-right:auto; color:var(--muted); font-size:11px; max-width:340px; }
.editor-actions .primary { min-width:140px; }
.task-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,.55fr); gap:22px; align-items:end; margin:0 0 18px; }
.task-header .title-input { min-height:47px; padding:10px 13px; background:var(--surface); font-size:18px; border-color:var(--line-strong); }
.native-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:24px; }
.native-field.wide { grid-column:1/-1; }
.native-input-grid textarea { min-height:128px; max-height:520px; padding:16px; border-color:var(--line); border-radius:9px; font-size:13px; background:var(--surface-code); }
.workspace-adapter-help { margin:0 0 22px; padding:14px 17px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--muted); font-size:12px; line-height:1.8; max-width:none; }
.algebra-expression-field { margin-top:25px; }
.algebra-expression-field input { min-height:58px; font-size:19px; }
.algebra-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.summary-panel { padding:22px; position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-soft); }
.summary-heading { display:flex; align-items:center; gap:10px; }
.summary-heading > span { color:var(--accent); font-size:24px; }
.summary-heading h2 { font-size:13px; }
.summary-metrics { display:flex; gap:30px; margin:22px 0; }
.summary-metrics strong { display:block; font-size:29px; font-weight:600; line-height:1.15; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.summary-metrics span { display:block; color:var(--muted); font-size:11px; margin-top:7px; }
.summary-rule { border-top:1px solid var(--line); margin:18px 0; }
.goal-summary { margin:10px 0 18px; color:var(--ink); font-size:12px; overflow-wrap:anywhere; }
.shape-preview { display:flex; flex-wrap:wrap; gap:5px; }
.shape-preview.matrix { display:grid; width:max-content; max-width:100%; }
.shape-cell { display:flex; align-items:center; justify-content:center; width:28px; height:29px; border:1px solid var(--line-strong); border-radius:5px; background:var(--surface); color:var(--muted); font:11px var(--mono); }
.feature-line,.summary-footnote,.coverage { color:var(--muted); font-size:11px; line-height:1.75; margin-top:12px; }
.feature-line span { color:var(--green); margin-right:7px; }
.coverage { border-top:1px solid var(--line); padding-top:16px; margin-top:20px; }

/* Shared workspace, result hierarchy and statistics. */
.workspace-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.workspace-adapter { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.workspace-adapter > strong { font-size:14px; }
.workspace-adapter .compiled-badge { margin:0; }
.workspace-toolbar .guide-actions { margin:0; justify-content:flex-end; gap:8px; }
.workspace-toolbar .button { font-size:11px; padding:8px 11px; min-height:35px; }
.workspace-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.tabs { display:flex; align-items:center; gap:6px; margin:22px 0 25px; padding:5px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.tab { display:flex; align-items:center; justify-content:center; gap:8px; min-height:37px; padding:8px 17px; border:1px solid transparent; border-radius:7px; color:var(--muted); background:transparent; font-size:12px; font-weight:550; line-height:1.4; white-space:nowrap; }
.tab:hover { color:var(--ink); background:var(--surface-hover); }
.tab.active { color:var(--accent); background:var(--surface); border-color:var(--line); box-shadow:0 1px 3px #00000005; }
.tab-number { color:var(--subtle); font:10px var(--mono); }
.tab.active .tab-number { color:var(--accent); }
[role="tabpanel"] { min-width:0; }
.plan-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin:0 0 24px; }
.plan-header h2 { font-size:25px; font-weight:650; letter-spacing:-.7px; }
.plan-header p { color:var(--muted); font-size:13px; margin-top:8px; }
.plan-actions { display:flex; flex-wrap:wrap; gap:8px; }
.compiled-badge,.availability-label { display:inline-flex; align-items:center; gap:6px; color:var(--green); background:var(--green-soft); border:1px solid transparent; border-radius:5px; padding:4px 8px; font-size:10px; font-weight:600; line-height:1.3; }
.compiled-badge { margin-bottom:10px; }
.warning-badge { color:var(--warning); background:var(--warning-soft); }
.metric-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); min-width:0; }
.metric-card > strong { display:block; margin:12px 0 7px; font:600 26px/1.2 var(--mono); letter-spacing:-1px; }
.metric-card > span,.metric-card p { color:var(--muted); font-size:11px; }
.result-statistics { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:20px 0 25px; padding:0; }
.result-statistics > div { padding:19px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); min-width:0; }
.result-statistics > div > strong { display:block; margin-bottom:6px; color:var(--ink); font:600 23px/1.3 var(--mono); letter-spacing:-.75px; font-variant-numeric:tabular-nums; }
.result-statistics > div > span { color:var(--muted); font-size:11px; }
.plan-block { margin-top:19px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.plan-block-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 22px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.plan-block-header h3 { font-size:13px; }
.plan-block-body { padding:20px 22px; }
details.plan-block > summary { list-style:revert; cursor:pointer; color:var(--ink); font-size:13px; font-weight:550; }
.identity-grid { display:grid; grid-template-columns:minmax(130px,.35fr) minmax(0,1fr); gap:13px 20px; align-items:start; font-size:12px; color:var(--muted); }
.identity-grid code { color:var(--ink); overflow-wrap:anywhere; line-height:1.65; }
pre { margin:0; padding:20px; color:var(--muted); background:var(--surface-code); font-size:12px; line-height:1.8; overflow:auto; max-height:450px; tab-size:2; }
.plan-block-body > pre { border-radius:8px; }
.stat-row { display:flex; align-items:baseline; justify-content:space-between; gap:25px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.stat-row:last-child { border-bottom:0; }
.stat-row > code { color:var(--muted); overflow-wrap:anywhere; }
.stat-row > span { text-align:right; color:var(--ink); overflow-wrap:anywhere; font-family:var(--mono); font-size:11px; }
.stats-tree { margin:11px 0; padding-left:15px; border-left:2px solid var(--line); }
.stats-tree > summary { padding:6px 0; overflow-wrap:anywhere; }
.complete-stats { margin-top:20px; border-top:1px solid var(--line); padding-top:15px; }
.complete-stats > summary { color:var(--accent); font-weight:550; }

/* Actual-data charts inherit both themes. */
.result-visualization { margin:24px 0; min-width:0; }
.result-visualization > h2 { font-size:16px; margin-bottom:7px; }
.result-visualization > p { max-width:850px; margin-top:0; color:var(--muted); font-size:12px; line-height:1.75; }
.math-chart { padding:24px 24px 20px; margin:16px 0 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; box-shadow:var(--shadow); }
.math-chart h3 { font-size:12px; color:var(--muted); font-weight:550; margin-bottom:17px; }
.math-chart svg { display:block; width:100%; height:auto; max-height:450px; font-family:var(--font); }
.math-chart svg text { font-size:11px; }
.math-chart svg text:not([fill]) { fill:var(--chart-text); }
.math-chart svg text.chart-value { font-size:22px; fill:var(--accent); }
.math-chart figcaption { display:flex; flex-wrap:wrap; gap:7px 20px; margin-top:12px; color:var(--muted); font-size:11px; line-height:1.75; overflow-wrap:anywhere; }
.chart-legend { display:inline-flex; align-items:center; gap:7px; }
.chart-legend::before { content:""; display:inline-block; width:17px; height:3px; border-radius:3px; background:var(--series-color); }
.chart-grid { stroke:var(--chart-grid); }
.chart-axis { stroke:var(--chart-axis); }
.chart-text { fill:var(--chart-text); }

/* Feedback, saved work and authoring flow. */
.status-message { margin:0 0 22px; padding:13px 16px; color:var(--green); background:var(--green-soft); border:1px solid var(--line); border-radius:8px; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.status-message.error { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }
.inline-note { margin:14px 0; padding:15px 17px; color:var(--warning); background:var(--warning-soft); border:1px solid var(--line); border-radius:8px; font-size:12px; line-height:1.75; }
.empty-state { display:flex; flex-direction:column; align-items:center; gap:18px; padding:62px 30px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface); text-align:center; }
.empty-state h2 { font-size:22px; }
.empty-state p { max-width:540px; color:var(--muted); font-size:13px; line-height:1.8; }
.library-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:0 0 24px; }
.library-heading h2 { font-size:22px; }
.library-heading p { color:var(--muted); font-size:13px; margin-top:8px; }
.library-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:23px 25px; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.library-card > div:first-child { min-width:0; }
.library-card h2 { font-size:16px; overflow-wrap:anywhere; }
.library-card p { color:var(--muted); font-size:12px; margin-top:7px; overflow-wrap:anywhere; }
.library-card .compiled-badge { margin:10px 0 0; }
.library-card-actions { display:flex; gap:8px; flex-shrink:0; }
.guide-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:19px 0; }
.guide-intro { padding:26px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.guide-intro > p { font-size:15px; color:var(--ink); line-height:1.85; max-width:900px; }
.guide-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:25px 0; }
.guide-steps li { display:flex; align-items:flex-start; gap:15px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.guide-steps li > span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; color:var(--accent); background:var(--accent-soft); border-radius:7px; font:11px var(--mono); }
.guide-steps h2 { font-size:14px; margin:3px 0 8px; }
.guide-steps p,.import-guide > p { color:var(--muted); font-size:12px; line-height:1.8; }
.import-guide { padding:27px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.import-guide > h2 { margin-bottom:10px; font-size:18px; }
.import-guide textarea { min-height:280px; max-height:560px; padding:18px; color:var(--ink); background:var(--surface-code); border-color:var(--line); font-size:12px; }
.adapter-detail-intro { padding:22px 25px; margin:0 0 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--muted); font-size:13px; line-height:1.8; }
.adapter-detail-intro .guide-actions { margin-bottom:0; }
.catalogue-list { margin:20px 0 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.catalogue-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:start; gap:16px; padding:23px 24px; border-bottom:1px solid var(--line); }
.catalogue-row:last-child { border-bottom:0; }
.catalogue-number { padding-top:1px; color:var(--subtle); font:11px/24px var(--mono); }
.catalogue-content h2,.catalogue-content h3 { font-size:15px; }
.catalogue-content > p { color:var(--muted); margin-top:7px; font-size:12px; line-height:1.75; }
.catalogue-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.example-lesson { margin-top:13px; color:var(--muted); font-size:12px; }
.example-lesson summary,.model-lesson summary { color:var(--accent); font-size:11px; }
.example-lesson p { margin-top:12px; }
.example-expectation { padding:12px 14px; margin:12px 0; border-radius:7px; background:var(--surface-soft); line-height:1.75; }
.model-lesson { margin-top:18px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); }
.model-lesson p { margin-top:10px; font-size:12px; line-height:1.8; color:var(--muted); }
.translation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.operator-row { display:grid; grid-template-columns:90px minmax(0,1fr); gap:15px; padding:14px 0; border-top:1px solid var(--line); }
.operator-row:first-child { border-top:0; padding-top:0; }
.operator-tags { display:flex; gap:6px; flex-wrap:wrap; }
.operator-tag { padding:4px 8px; border:1px solid var(--line); border-radius:5px; background:var(--surface-soft); color:var(--muted); font-size:11px; }

/* Shell details and result instrumentation. */
.nav-label { flex:1; min-width:0; }
.nav-meta { display:inline-flex; align-items:center; justify-content:center; min-width:22px; padding:1px 5px; border-radius:4px; color:var(--nav-muted); background:var(--nav-surface); font:10px/1.6 var(--mono); }
.meta-separator { margin:0 9px; color:var(--line-strong); }
.connection-pill { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:10px; color:var(--muted); background:var(--surface-soft); white-space:nowrap; }
.connection-pill::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--subtle); flex:0 0 5px; }
.connection-pill.backend-ready { color:var(--green); background:var(--green-soft); border-color:transparent; }
.connection-pill.backend-ready::before { background:var(--green); }
.page-title-row { display:flex; align-items:center; gap:14px; }
.page-description { margin-top:12px; color:var(--muted); font-size:14px; line-height:1.75; max-width:760px; }
.workspace-toolbar:has(.workspace-actions) { padding:0; margin:0 0 23px; border:0; border-radius:0; background:transparent; }
.workspace-toolbar .workspace-intro { align-items:center; justify-content:flex-start; gap:13px; }
.workspace-intro strong { display:block; font-size:15px; font-weight:650; }
.workspace-intro p { color:var(--muted); font-size:11px; line-height:1.6; margin-top:4px; }
.workspace-intro .compiled-badge { margin:0; }
.workspace-intro .text-button { margin-left:5px; }
.workspace-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.workspace-actions .calculate-button { min-width:132px; }
.workspace-actions .calculate-button .ui-icon { width:15px; height:15px; }
.workspace-main-panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; box-shadow:var(--shadow); }
.workspace-main-panel .editor { border:0; border-radius:0; box-shadow:none; }
.workspace-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:21px 27px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.workspace-panel-header h2 { font-size:15px; }
.workspace-panel-header p { color:var(--muted); font-size:12px; line-height:1.75; margin-top:5px; }
.editor-section > .workspace-panel-header,.import-guide > .workspace-panel-header { padding:0 0 20px; margin-bottom:18px; border:0; border-bottom:1px solid var(--line); background:transparent; }
.workspace-panel-header .field-count { color:var(--muted); background:var(--surface-soft); border:1px solid var(--line); border-radius:5px; padding:4px 7px; font:10px var(--mono); white-space:nowrap; }
.workspace-panel-header .small-label { display:block; margin-bottom:5px; }
.workspace-main-panel:is(#view-result,#view-statistics) { padding:25px; }
.workspace-main-panel .task-header { padding:25px 28px 0; margin-bottom:21px; }
.input-context-note { color:var(--muted); background:var(--surface-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 27px; font-size:12px; line-height:1.8; }
.input-context-note summary { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:550; }
.input-context-note summary .ui-icon { width:14px; height:14px; }
.input-context-note p { margin:10px 0 3px; }
.export-menu { position:relative; }
.export-menu > summary { list-style:none; user-select:none; }
.export-menu > summary::-webkit-details-marker { display:none; }
.export-menu > summary .ui-icon:last-child { width:13px; height:13px; color:var(--muted); }
.export-menu-panel { position:absolute; top:calc(100% + 7px); right:0; z-index:35; width:225px; max-width:calc(100vw - 35px); padding:6px; border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 12px 35px #0000001a; background:var(--surface-raised); }
.export-menu-panel .button { display:flex; justify-content:flex-start; width:100%; padding:10px; border:0; box-shadow:none; font-size:11px; }
.export-menu-panel .button:hover { background:var(--surface-hover); }
.result-summary { margin-bottom:25px; }
.result-statistics strong small { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; }
.result-statistics > .metric-card > strong { margin:12px 0 0; }
.tab-step { color:var(--subtle); font:10px var(--mono); }
.tab.active .tab-step { color:var(--accent); }
.tab-ready { width:4px; height:4px; border-radius:50%; background:var(--green); }
.result-summary-main { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.result-status { display:flex; align-items:center; gap:8px; color:var(--green); font-size:11px; font-weight:600; }
.result-status .ui-icon { width:16px; height:16px; }
.result-hero { padding:25px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.result-hero-value { color:var(--accent); font:600 clamp(30px,3vw,45px)/1.2 var(--mono); letter-spacing:-1.3px; overflow-wrap:anywhere; }
.result-hero-meta { color:var(--muted); font-size:11px; margin-top:10px; }
.validation-strip { display:flex; align-items:center; flex-wrap:wrap; gap:12px 25px; padding:14px 18px; margin:0 0 24px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); }
.validation-strip > span,.validation-strip > div { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.validation-strip .ui-icon { width:14px; height:14px; color:var(--green); }
.validation-strip .failed,.validation-strip .failed .ui-icon { color:var(--danger); }
.validation-strip .invalid,.validation-strip .invalid .ui-icon { color:var(--danger); }
.stat-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin:0 0 25px; }
.stat-summary-grid .metric-card { padding:21px; }
.result-details { margin-top:17px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.result-details > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 21px; color:var(--muted); font-size:12px; font-weight:550; background:var(--surface-soft); }
.result-details[open] > summary { border-bottom:1px solid var(--line); }
.result-details > .plan-block-body { padding:21px; }
.result-details > pre { max-height:420px; }
.project-card-icon { display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex:0 0 39px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); color:var(--accent); }
.project-card-icon .ui-icon { width:19px; height:19px; }
.library-card-copy { min-width:0; flex:1; }
.library-card:has(.project-card-icon) { justify-content:flex-start; gap:17px; }
.empty-state > .ui-icon { width:38px; height:38px; color:var(--subtle); stroke-width:1.2; }
.empty-state-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:3px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:var(--accent); }
.empty-state-icon .ui-icon { width:25px; height:25px; stroke-width:1.5; }
.section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; }
.section-toolbar .field-hint { margin:0; max-width:530px; text-align:right; }
.app-shell[data-section="runs"] .section-toolbar { flex-wrap:wrap; }
.app-shell[data-section="runs"] .section-toolbar > .button { flex-shrink:0; }
.project-card-icon.failed { color:var(--danger); background:var(--danger-soft); }

/* Responsive composition preserves input and output instead of clipping them. */
@media(min-width:1700px) { .app-shell { grid-template-columns:254px minmax(0,1fr); } .sidebar { padding:34px 22px 24px; } main { padding-top:42px; } }
@media(max-width:1250px) {
  .app-shell { grid-template-columns:212px minmax(0,1fr); }
  .editor-grid { grid-template-columns:minmax(0,1fr); }
  .summary-panel { position:static; }
  .workspace-toolbar { flex-direction:column; align-items:flex-start; gap:16px; }
  .workspace-toolbar .guide-actions { justify-content:flex-start; }
}
@media(max-width:1050px) {
  main { padding:30px 25px 35px; }
  .workspace-footer { padding-left:25px; padding-right:25px; }
  .header-tools { gap:9px; }
  .task-header { grid-template-columns:minmax(0,1fr); gap:18px; }
  .variable-legend,.variable-row { grid-template-columns:.85fr 1.4fr .9fr .8fr .8fr 25px; gap:7px; }
  .variable-row input,.variable-row select { padding-left:7px; padding-right:7px; }
  .editor-section,.model-intro,.editor-actions { padding-left:23px; padding-right:23px; }
  .translation-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:800px) {
  .app-shell { display:block; }
  .button.new-model { width:auto; min-height:35px; margin:0; padding:8px 11px; font-size:11px; }
  .workspace-nav { flex:0 0 auto; width:auto; min-height:36px; padding:8px 11px; font-size:11px; white-space:nowrap; }
  .workspace-nav .nav-icon { width:15px; height:15px; }
  .header-tools { gap:9px; }
  .header-tools > select { width:104px; font-size:11px; }
  .header-context { font-size:11px; gap:6px; }
  .header-divider { display:none; }
  main { padding:29px 22px 35px; }
  .page-heading { margin-bottom:25px; gap:16px; }
  h1 { font-size:30px; }
  .subtitle { font-size:13px; }
  .guide-steps { grid-template-columns:minmax(0,1fr); }
  .workspace-footer { padding:18px 22px 23px; }
}
@media(max-width:600px) {
  html { scroll-padding-top:20px; }
  .button.new-model { font-size:10px; padding:7px 10px; min-height:34px; }
  .workspace-nav { gap:6px; padding:7px 9px; font-size:10px; }
  .workspace-nav .nav-icon { width:14px; height:14px; }
  .header-tools { gap:7px; }
  .header-tools > select { width:99px; min-height:34px; padding:5px 8px; }
  .theme-switch { padding:2px; }
  .theme-option { width:27px; height:27px; }
  .theme-option .ui-icon { width:15px; height:15px; }
  main { padding:25px 16px 30px; }
  .page-heading { flex-direction:column; gap:15px; margin-bottom:22px; }
  h1 { font-size:29px; letter-spacing:-1px; }
  .eyebrow,.page-kicker { font-size:9px; margin-bottom:9px; }
  .subtitle { margin-top:10px; font-size:12px; line-height:1.75; }
  .page-meta,.page-heading-actions { padding:0; }
  .workspace-toolbar { padding:15px; }
  .workspace-adapter { gap:9px; }
  .workspace-adapter > strong { font-size:12px; }
  .workspace-toolbar .guide-actions { gap:7px; width:100%; }
  .workspace-toolbar .button { flex:1 1 auto; white-space:normal; min-height:36px; font-size:10px; padding:8px 9px; }
  .tabs { width:100%; gap:3px; padding:4px; margin:20px 0 22px; }
  .tab { flex:1 1 0; gap:5px; padding:8px 7px; font-size:10px; min-height:36px; }
  .tab-number { display:none; }
  .tab .ui-icon { width:14px; height:14px; }
  .task-header .title-input { font-size:17px; }
  .task-header { gap:17px; }
  .workspace-adapter-help { padding:13px 14px; font-size:11px; }
  .editor-section,.model-intro { padding:21px 17px; }
  .editor-actions { padding:17px; gap:9px; }
  .editor-actions .button { flex:1; font-size:11px; padding:10px; }
  .editor-actions .primary { min-width:0; }
  .section-heading { gap:10px; margin-bottom:19px; flex-wrap:wrap; }
  .section-heading h2 { font-size:14px; }
  .section-heading p { font-size:11px; }
  .section-heading > .text-button { margin-left:38px; margin-top:-4px; }
  .goal-grid,.settings-grid,.native-input-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .native-input-grid textarea { font-size:12px; padding:13px; min-height:125px; }
  .field-label { font-size:11px; }
  input,select,textarea { font-size:13px; }
  .field-hint { font-size:11px; }
  .variable-legend { display:none; }
  .variable-row { position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; padding:16px 14px; margin-bottom:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); }
  .variable-row label::before { content:attr(data-label); display:block; color:var(--muted); font-size:10px; margin-bottom:6px; }
  .variable-row label:nth-child(5) { padding-right:29px; }
  .variable-row .remove-button { position:absolute; right:12px; bottom:19px; }
  .data-row { grid-template-columns:83px minmax(0,1fr) 25px; gap:7px; }
  .data-row input { font-size:11px; padding-left:9px; padding-right:9px; }
  .constraint-row { grid-template-columns:18px minmax(0,1fr) 24px; gap:5px; }
  .constraint-row input { font-size:11px; padding:9px; }
  .syntax-grid { grid-template-columns:minmax(0,1fr); }
  .plan-header { flex-direction:column; gap:15px; }
  .plan-header h2 { font-size:22px; }
  .result-statistics { gap:11px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:16px 0 22px; }
  .result-statistics > div { padding:16px; }
  .result-statistics > div > strong { font-size:20px; }
  .result-statistics > div > span { font-size:10px; }
  .metric-card { padding:18px; }
  .metric-card > strong { font-size:22px; }
  .plan-block-header { padding:15px 17px; }
  .plan-block-body { padding:17px; }
  .identity-grid { grid-template-columns:minmax(0,1fr); gap:5px; }
  .identity-grid code { margin-bottom:10px; }
  pre { font-size:11px; padding:16px; }
  .math-chart { padding:18px 9px 15px; }
  .math-chart h3,.math-chart figcaption { padding:0 8px; }
  .math-chart h3 { margin-bottom:9px; }
  .math-chart svg { max-height:330px; }
  .result-visualization > h2 { font-size:15px; }
  .result-visualization > p { font-size:11px; }
  .catalogue-row { grid-template-columns:24px minmax(0,1fr); padding:20px 17px; gap:11px; }
  .catalogue-actions { grid-column:2; }
  .library-card { flex-direction:column; align-items:flex-start; padding:20px; gap:17px; }
  .library-card-actions { width:100%; }
  .library-card-actions .button { flex:1; }
  .guide-intro,.import-guide,.adapter-detail-intro { padding:20px; }
  .guide-intro > p { font-size:13px; }
  .guide-steps li { padding:19px; }
  .guide-actions .button { font-size:11px; white-space:normal; }
  .workspace-footer { padding:17px 16px 22px; font-size:9px; }
  .operator-row { grid-template-columns:minmax(0,1fr); gap:9px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media(max-width:1050px) { .connection-pill { font-size:9px; } .topbar-product { display:none; } .stat-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .connection-pill { display:none; } .sidebar-section-label { display:none; } .topbar-context { max-width:45%; } .topbar-location { font-size:11px; } .workspace-actions { justify-content:flex-start; } }
@media(max-width:600px) {
  .nav-meta { display:none; } .page-description { font-size:12px; }
  .workspace-toolbar .workspace-intro { align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .workspace-intro strong { font-size:13px; } .workspace-intro p { font-size:10px; }
  .workspace-actions { position:relative; width:100%; gap:7px; } .workspace-actions > .button { flex:1; }
  .workspace-actions .calculate-button { min-width:135px; } .export-menu { position:static; flex:0 0 auto; }
  .export-menu-panel { left:0; right:auto; max-width:100%; }
  .workspace-panel-header { padding:18px 17px; } .workspace-panel-header p { font-size:11px; }
  .workspace-main-panel .task-header { padding:21px 17px 0; }
  .workspace-main-panel:is(#view-result,#view-statistics) { padding:18px 16px; }
  .editor-section > .workspace-panel-header,.import-guide > .workspace-panel-header { padding:0 0 17px; }
  .result-statistics strong small { font-size:11px; } .tab-step { display:none; }
  .input-context-note { padding:13px 17px; font-size:11px; }
  .validation-strip { gap:11px 15px; padding:13px 15px; }
  .validation-strip > span,.validation-strip > div { font-size:10px; }
  .result-details > summary { padding:16px 17px; font-size:11px; } .result-details > .plan-block-body { padding:17px; }
  .stat-summary-grid { gap:11px; } .stat-summary-grid .metric-card { padding:17px; }
  .library-card:has(.project-card-icon) { display:grid; grid-template-columns:39px minmax(0,1fr); gap:14px; align-items:start; }
  .library-card:has(.project-card-icon) .library-card-actions { grid-column:1/-1; }
}

/* Refined Math: a typographic instrument panel, shared by both independent palettes. */
.app-shell { display:flex; flex-direction:column; min-height:100dvh; }
.workspace { flex:1; }
.atelier-masthead { color:var(--nav-ink); background:var(--nav-bg); border-bottom:1px solid var(--nav-line); }
.atelier-masthead-inner { display:flex; align-items:center; gap:32px; max-width:1536px; min-height:92px; padding:0 40px; margin:auto; }
.atelier-brand { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; color:var(--ink); }
.atelier-nav { display:flex; align-items:stretch; align-self:stretch; gap:24px; margin:auto; min-width:0; }
.atelier-nav .workspace-nav { position:relative; width:auto; padding:0; gap:8px; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--nav-muted); background:transparent; font-size:12px; font-weight:550; white-space:nowrap; }
.atelier-nav .workspace-nav:hover { color:var(--nav-ink); }
.atelier-nav .workspace-nav.active { color:var(--nav-ink); border-bottom-color:var(--ink); background:transparent; }
.atelier-nav .nav-icon { display:none; }
.atelier-nav .nav-meta { color:var(--subtle); font:9px var(--mono); background:var(--nav-surface); border:1px solid var(--line); padding:2px 5px; border-radius:4px; }
.atelier-actions { display:flex; gap:10px; flex:0 0 auto; }
.atelier-actions .button { min-height:39px; border-radius:6px; font-size:11px; }
.atelier-actions .atelier-import { border-color:var(--line); color:var(--ink); background:transparent; }
.atelier-actions .atelier-import:hover { background:var(--surface-hover); border-color:var(--line-strong); }
.atelier-actions .ui-icon { width:15px; height:15px; }
.atelier-utility { border-bottom:1px solid var(--line); }
.atelier-utility-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:1536px; min-height:50px; padding:7px 40px; margin:auto; }
.atelier-location { display:flex; align-items:center; gap:13px; min-width:0; color:var(--muted); font-size:10px; }
.atelier-location > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atelier-location-label { font:10px var(--mono); white-space:nowrap; }
.atelier-location > span[aria-hidden] { color:var(--subtle); }
.atelier-utility .header-tools { gap:16px; }
.atelier-utility .connection-pill { padding:0; border:0; background:transparent; color:var(--muted); font-size:10px; }
.atelier-utility .connection-pill.backend-ready::before { background:var(--accent); }
.atelier-utility .header-tools > select { width:106px; min-height:30px; border:0; background:transparent; padding:4px 7px; color:var(--muted); font-size:11px; }
.theme-switch { padding:3px; border:1px solid var(--line); border-radius:6px; background:var(--surface-soft); }
.theme-option { width:28px; height:26px; border-radius:3px; }
.theme-option .ui-icon { width:14px; height:14px; }
.theme-option[aria-pressed="true"] { color:var(--ink); background:var(--surface-raised); box-shadow:0 1px 3px #00000012; }
main { max-width:1456px; padding:42px 40px 64px; }
.page-heading { margin-bottom:32px; }
.page-heading h1 { font:600 clamp(32px,3.4vw,46px)/1.16 var(--font); letter-spacing:-1.8px; }
.page-kicker { color:var(--subtle); font:10px/1.5 var(--mono); letter-spacing:.12em; font-weight:400; }
.page-description { margin-top:17px; max-width:650px; color:var(--muted); font-size:14px; line-height:1.8; }
.app-shell[data-section="adapters"] main { padding-top:40px; }
.library-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,390px); gap:70px; align-items:center; padding:12px 0 42px; }
.library-hero .page-kicker { display:block; margin-bottom:22px; color:var(--warm); }
.library-hero h1 { font:550 clamp(42px,4.5vw,66px)/1.09 var(--font); letter-spacing:-3px; max-width:700px; }
.library-hero h1 span { color:var(--muted); font-weight:350; }
.library-hero .page-description { font-size:15px; line-height:1.9; max-width:570px; margin-top:22px; }
.library-hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:26px; }
.library-hero-actions .button { min-height:42px; font-size:12px; }
.library-hero-actions > a { color:var(--muted); text-decoration:none; font-size:12px; }
.library-hero-actions > a:hover { color:var(--ink); }
.workspace-footer { max-width:1456px; padding:24px 40px; font-size:10px; }
.button,input,select,textarea { border-radius:6px; }
.button { transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
.button.primary { color:var(--canvas); background:var(--ink); border-color:var(--ink); box-shadow:none; }
.button.primary:hover { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
input,select,textarea { background:var(--surface-code); }
input:hover,select:hover,textarea:hover { border-color:var(--line-strong); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
.compiled-badge,.availability-label,.section-number,.operator-tag { border-radius:4px; }
.tabs { gap:28px; padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.tab { padding:15px 2px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; font-size:12px; }
.tab.active { border-color:var(--accent); background:transparent; color:var(--ink); box-shadow:none; }
.tab:hover { color:var(--ink); background:transparent; }
.workspace-main-panel { border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }
.workspace-panel-header { background:var(--surface-soft); }
.editor-section { padding-top:29px; padding-bottom:29px; }
.editor-section > h2 { font-size:18px; }
.section-heading h2 { font-size:17px; }
.section-number { background:var(--surface-soft); color:var(--subtle); border:1px solid var(--line); }
.title-input { font-size:17px; letter-spacing:-.3px; }
.field-hint,.editor-section > p { line-height:1.8; }
.result-header h2 { font-family:var(--font); font-weight:550; font-size:29px; line-height:1.3; letter-spacing:-1px; overflow-wrap:anywhere; }
.result-details,.metric-card,.math-chart,.validation-strip { border-radius:6px; box-shadow:none; }
.metric-card { background:var(--surface-soft); }
.result-details > summary { background:var(--surface-soft); }
.result-statistics > div { background:var(--surface-soft); }
.result-visualization { max-width:100%; }
.result-visualization .math-chart svg { max-height:440px; }
.math-chart h3 { font-size:12px; }
.stat-summary-card,.stat-tile { background:var(--surface-soft); }
.catalogue-row,.saved-card,.run-card { border-color:var(--line); border-radius:8px; background:var(--surface); }
@media(max-width:1330px) {
  .atelier-masthead-inner { gap:24px; padding:0 30px; }
  .atelier-nav { gap:19px; }
  .atelier-actions .atelier-import { font-size:0; gap:0; padding:10px; }
  .atelier-utility-inner { padding-left:30px; padding-right:30px; }
  .library-hero { gap:44px; grid-template-columns:minmax(0,1fr) minmax(285px,350px); }
}
@media(max-width:1080px) {
  .atelier-masthead-inner { display:grid; grid-template-columns:1fr auto; gap:0 22px; padding-top:20px; }
  .atelier-nav { grid-row:2; grid-column:1/-1; justify-content:flex-start; width:100%; min-height:55px; margin-top:13px; gap:30px; }
  .atelier-actions .atelier-import { font-size:11px; gap:8px; }
  main { padding:34px 30px 48px; }
  .library-hero { gap:26px; }
  .library-hero h1 { font-size:46px; letter-spacing:-2px; }
  .library-hero .page-description { font-size:13px; }
  .workspace-footer { padding-left:30px; padding-right:30px; }
}
@media(max-width:760px) {
  .library-hero { grid-template-columns:minmax(0,1fr); padding-bottom:32px; }
  .library-hero .brand-study { display:none; }
  .library-hero h1 { font-size:50px; max-width:620px; }
  .library-hero .page-description { max-width:520px; font-size:14px; }
}
@media(max-width:650px) {
  .atelier-masthead-inner { padding:18px 20px 0; gap:0 10px; }
  .atelier-actions { gap:6px; }
  .atelier-actions .atelier-import { font-size:0; gap:0; padding:8px; min-height:35px; }
  .atelier-actions .atelier-new { font-size:10px; padding:8px 10px; min-height:35px; }
  .atelier-actions .atelier-new .ui-icon { display:none; }
  .atelier-nav { gap:24px; min-height:50px; margin-top:10px; overflow-x:auto; scrollbar-width:none; }
  .atelier-nav .workspace-nav { min-height:49px; flex:0 0 auto; font-size:11px; }
  .atelier-nav .nav-meta { display:none; }
  .atelier-utility-inner { padding:8px 20px; min-height:47px; flex-wrap:wrap; row-gap:8px; }
  .atelier-location { max-width:28%; font-size:10px; }
  .atelier-location-label,.atelier-location > span[aria-hidden] { display:none; }
  .atelier-utility .header-tools { gap:8px; flex-wrap:wrap; justify-content:flex-end; min-width:0; margin-left:auto; }
  .atelier-utility .connection-pill { font-size:9px; max-width:95px; white-space:normal; }
  .atelier-utility .header-tools > select { width:88px; padding:4px; font-size:10px; }
  .theme-option { width:24px; height:25px; }
  .theme-option .ui-icon { width:13px; height:13px; }
  main { padding:28px 20px 40px; }
  .app-shell[data-section="adapters"] main { padding-top:26px; }
  .library-hero { padding-top:4px; }
  .library-hero .page-kicker { font-size:9px; margin-bottom:16px; }
  .library-hero h1 { font-size:43px; letter-spacing:-1.9px; }
  .library-hero .page-description { font-size:13px; line-height:1.8; margin-top:18px; }
  .library-hero-actions { gap:15px; margin-top:22px; }
  .library-hero-actions .button { font-size:11px; }
  .page-heading h1 { font-size:33px; }
  .page-description { font-size:13px; }
  .tabs { gap:18px; }
  .tab { padding:13px 0; font-size:11px; }
  .result-header h2 { font-size:24px; }
  .workspace-footer { padding:20px; }
}
@media(max-width:380px) { .refined-signature { display:none; } .atelier-actions .atelier-new { font-size:0; padding:8px; gap:0; } .atelier-actions .atelier-new .ui-icon { display:inline-block; width:15px; height:15px; } .atelier-utility .connection-pill { max-width:75px; } .atelier-nav { gap:20px; } }

/* Preserve readable chart labels on small screens with keyboard-accessible scrolling. */
.chart-viewport { overflow-x:auto; scrollbar-width:thin; }
.chart-viewport:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media(max-width:600px) { .math-chart .chart-viewport svg { min-width:600px; max-height:none; } }

/* Product information is ordinary visible HTML, including before the app loads. */
.product-about { max-width:1300px; margin:0 auto; padding:44px 42px 58px; border-top:1px solid var(--line); }
.product-about h2 { font:400 29px/1.35 var(--display); letter-spacing:-.6px; max-width:870px; }
.product-about-lead { max-width:930px; margin-top:18px; color:var(--muted); line-height:1.9; }
.product-about-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; margin:32px 0; }
.product-about-grid h3 { margin-bottom:10px; font-size:13px; }
.product-about-grid p,.product-about-foot { color:var(--muted); font-size:12px; line-height:1.85; }
.product-about-foot { border-top:1px solid var(--line); padding-top:22px; }
[data-site-language="sk"] { display:none; }
html[lang="sk"] [data-site-language="en"] { display:none; }
html[lang="sk"] [data-site-language="sk"] { display:block; }
.bootstrap-intro { padding-top:48px; padding-bottom:48px; }
.bootstrap-intro h1 { font:400 48px/1.2 var(--display); margin-bottom:20px; }
.bootstrap-intro p { max-width:740px; margin-bottom:15px; color:var(--muted); }
.noscript-notice { display:block; padding:18px 42px; text-align:center; }
@media(max-width:650px) { .product-about { padding:32px 20px; } .product-about-grid { grid-template-columns:1fr; gap:24px; } .product-about h2 { font-size:25px; } .product-about-lead { font-size:13px; } }

/* Keep the selected example meaningful while its mathematical fields stay editable. */
.sample-brief { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr); gap:28px; margin:0 28px 24px; padding:21px 23px; background:var(--surface-soft); border-left:2px solid var(--accent); }
.sample-brief h2 { font:400 21px/1.4 var(--display); margin:6px 0 9px; }
.sample-brief p { font-size:12px; color:var(--muted); line-height:1.8; }
.sample-brief .sample-mapping { margin-top:9px; font-size:11px; }
.sample-next { border-left:1px solid var(--line); padding-left:24px; }
.sample-next > strong { display:block; margin-bottom:9px; font-size:11px; color:var(--ink); }
.sample-next details { margin-top:12px; font-size:11px; color:var(--accent); }
.sample-next details p { margin-top:9px; font-size:11px; }
@media(max-width:800px) { .sample-brief { grid-template-columns:minmax(0,1fr); gap:18px; } .sample-next { padding:16px 0 0; border-left:0; border-top:1px solid var(--line); } }
@media(max-width:600px) { .sample-brief { margin:0 17px 20px; padding:17px; } .sample-brief h2 { font-size:20px; } .sample-brief p { font-size:11px; } }

/* Handbook entry in the shared guide view. */
.handbook-entry { margin-bottom:25px; padding:27px; border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:4px; background:var(--surface); }
.handbook-entry h2 { font:400 27px/1.4 var(--display); margin:7px 0 13px; }
.handbook-entry > p { max-width:900px; color:var(--muted); font-size:13px; line-height:1.9; margin-bottom:18px; }
@media(max-width:600px) { .handbook-entry { padding:21px; } .handbook-entry h2 { font-size:24px; } }