:root { color-scheme: light; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
.sdd-demo { --ink: #172033; --muted: #647186; --line: #dbe1ea; --purple: #522d80; --blue: #1769aa; --green: #18734a; --orange: #ac4216; height: 100dvh; padding: 12px 18px 6px; display: flex; flex-direction: column; gap: 10px; }
.sdd-demo [hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
h2 { font-size: 15px; font-weight: 650; }
h3 { font-size: 12px; color: var(--muted); font-weight: 600; }
a { color: var(--purple); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { border: 1px solid #bcc6d4; background: white; border-radius: 5px; padding: 6px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--purple); background: #f6f1fb; }
button:disabled { opacity: .42; cursor: not-allowed; }
:focus-visible { outline: 3px solid #85b2d8; outline-offset: 2px; }
.sdd-primary { color: white; background: var(--orange); border-color: var(--orange); font-weight: 600; }
button.sdd-primary:hover { color: white; background: #923710; }
input[type=text], textarea { border: 1px solid #aeb9c9; border-radius: 5px; background: #fbfcfe; padding: 7px 9px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 0; }
textarea { resize: none; tab-size: 2; width: 100%; }
.sdd-app-header, .sdd-tools, .sdd-card > header, dialog > header { display: flex; align-items: center; gap: 12px; }
.sdd-app-header { flex-shrink: 0; }
.sdd-app-header > a { font-size: 12px; margin-right: 4px; }
.sdd-tools { margin-left: auto; gap: 6px; }
.sdd-tools button { font-size: 12px; }
.sdd-presets { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sdd-presets button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 7px 14px; color: var(--muted); }
.sdd-presets button.is-active { border-bottom-color: var(--purple); color: var(--purple); font-weight: 650; }
.sdd-toolbar { flex-shrink: 0; }
.sdd-progress { display: flex; align-items: center; gap: 8px; }
.sdd-progress input { flex: 1; min-width: 40px; accent-color: var(--purple); }
#sdd-count, #sdd-run-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sdd-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 12px; flex: 1; min-height: 0; }
.sdd-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; min-height: 0; min-width: 0; }
.sdd-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: white; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.sdd-card > header { flex-shrink: 0; padding: 9px 12px; border-bottom: 1px solid var(--line); min-height: 43px; }
.sdd-card > header button { margin-left: auto; font-size: 11px; padding: 3px 7px; }
.sdd-card > header span { margin-left: auto; font: 11px ui-monospace, monospace; color: var(--muted); }
.sdd-controls { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sdd-controls label { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
#sdd-input { height: 38px; }
#sdd-tree-section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#sdd-tree { flex: 1; min-height: 0; }
.sdd-diagram { min-height: 0; overflow: auto; background: #fcfdff; }
.sdd-diagram svg { width: 100%; height: 100%; display: block; }
.sdd-tree-edge { stroke: #a0aec1; stroke-width: 1.5; }
.sdd-tree-node rect { fill: white; stroke: #adb9ca; stroke-width: 1.4; }
.sdd-tree-node text { fill: var(--ink); font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sdd-tree-node .sdd-tree-small { fill: var(--muted); font-size: 10px; font-weight: 400; }
.sdd-tree-node[role=button] { cursor: pointer; }
.sdd-tree-node.is-selected rect { stroke: var(--purple); stroke-width: 2.5; }
.sdd-tree-node.is-current rect { fill: #fff3e9; stroke: var(--orange); stroke-width: 2.5; }
.sdd-tree-node.is-dependency rect { fill: #edf6fd; stroke: var(--blue); stroke-width: 2; }
.sdd-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 7px 10px; font-size: 10px; border-top: 1px solid var(--line); color: var(--muted); }
.sdd-inherited { color: var(--blue); }.sdd-synthesized { color: var(--green); }.sdd-current { color: var(--orange); }
.sdd-tree-tools { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; font-size: 11px; color: var(--muted); }
.sdd-tree-tools button { padding: 2px 6px; font-size: 11px; }
#sdd-translation-state { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
#sdd-dependencies { display: flex; flex-direction: column; gap: 8px; }
.sdd-production { font: 600 15px/1.5 ui-monospace, monospace; }
.sdd-equation { background: #f3eff8; border-left: 3px solid var(--purple); padding: 10px; font: 13px/1.6 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.sdd-attribute-values { margin: 0; display: grid; gap: 5px; }
.sdd-attribute-values > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5px; border-bottom: 1px solid #edf0f4; padding-bottom: 5px; }
.sdd-attribute-values dt { overflow-wrap: anywhere; font: 12px ui-monospace, monospace; color: var(--blue); }
.sdd-attribute-values dd { margin: 2px 0 0; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.sdd-attribute-values button { padding: 0; border: 0; color: var(--blue); background: none; font: inherit; }
.sdd-value { padding: 9px; border: 1px solid #dceade; border-radius: 4px; background: #f3faf5; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.sdd-note { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
#sdd-result { flex: 1; }
#sdd-result-note { padding: 8px 12px; border-top: 1px solid var(--line); max-height: 65px; overflow: auto; flex-shrink: 0; }
pre { margin: 0; padding: 12px; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sdd-source-lines, .sdd-ir-list { list-style: none; margin: 0; padding: 8px 0; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sdd-source-lines li { display: flex; gap: 9px; padding: 2px 10px; }
.sdd-source-lines code { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.sdd-line-number { color: var(--muted); min-width: 2ch; text-align: right; user-select: none; flex-shrink: 0; }
.sdd-ir-list button { display: flex; gap: 8px; align-items: baseline; text-align: left; width: 100%; padding: 3px 10px; border: 0; border-radius: 0; background: transparent; font: inherit; }
.sdd-ir-list code { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.sdd-ir-list small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.sdd-source-lines .is-current, .sdd-ir-list .is-current { background: #fff0df; box-shadow: inset 3px 0 var(--orange); }
.sdd-ir-list .is-visited { border-left: 3px solid var(--green); }
.sdd-ir-list .is-skipped { color: #8893a4; }
.sdd-row { display: flex; gap: 6px; align-items: center; padding: 8px 12px; }
.sdd-row label { font-size: 11px; color: var(--muted); }
.sdd-row select { min-width: 0; flex: 1; font-size: 12px; }
.is-program #sdd-tree-section { display: none; }
.is-program:not(.is-editing) #sdd-form { display: none; }
.is-program #sdd-source-preview { flex: 1; }
.is-program.is-editing #sdd-source-preview { display: none; }
.is-program.is-editing #sdd-form { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.is-program #sdd-input { grid-column: 1 / -1; height: 100%; }
.is-program #sdd-form button { grid-column: 2; }
#sdd-runtime { padding: 10px 12px; border-top: 1px solid var(--line); }
.sdd-run-form { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.sdd-run-form label { grid-column: 1/-1; font-size: 11px; color: var(--muted); }
#sdd-env { width: 100%; }
#sdd-run-status { font-size: 12px; color: var(--green); margin-top: 7px; overflow-wrap: anywhere; }
.sdd-runtime-state { display: none; }
.is-running #sdd-translation-controls, .is-running #sdd-translation-state { display: none; }
.is-running #sdd-runtime { flex: 1; min-height: 0; border: 0; display: flex; flex-direction: column; }
.is-running .sdd-runtime-state { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; margin-top: 12px; }
#sdd-run-action { font: 12px/1.5 ui-monospace, monospace; padding: 8px; background: #fff3e9; overflow-wrap: anywhere; max-height: 90px; overflow: auto; }
#sdd-run-values, #sdd-run-output { padding: 8px; background: #f5f7fb; border-radius: 4px; overflow: auto; min-height: 40px; }
#sdd-run-values { flex: 1; } #sdd-run-output { flex: .45; }
.sdd-status { color: var(--muted); font-size: 11px; flex-shrink: 0; min-height: 16px; }
.sdd-status.is-error, #sdd-run-status.is-error { color: #a62a2a; }
.sdd-status.is-stale { color: #895115; }
.sdd-demo.is-stale #sdd-tree-section { visibility: hidden; }
dialog { color: var(--ink); border: 1px solid var(--line); border-radius: 9px; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; box-shadow: 0 12px 60px #17203333; }
dialog::backdrop { background: #17203355; }
dialog > header { position: sticky; top: 0; z-index: 1; background: white; border-bottom: 1px solid var(--line); padding: 12px 16px; }
dialog > header button { margin-left: auto; }
dialog footer { position: sticky; bottom: 0; padding: 10px 16px; background: white; border-top: 1px solid var(--line); text-align: right; }
.sdd-pad { padding: 12px 16px; }
dialog p { margin: 0 0 12px; } dialog li { margin-bottom: 5px; }
dialog label { display: block; margin-bottom: 5px; }
#sdd-source { height: 42dvh; min-height: 160px; }
.sdd-help { margin-top: 12px; } summary { cursor: pointer; color: var(--purple); }
.sdd-table-wrap { overflow: auto; max-height: 45dvh; }
.sdd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sdd-table th, .sdd-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.sdd-table th { position: sticky; top: 0; background: #f5f7fb; }
.sdd-table td:nth-child(4) { min-width: 220px; }.sdd-table td:last-child { min-width: 180px; white-space: pre-wrap; }
.sdd-table tr.is-current { background: #fff3e9; }.sdd-table tr.is-pending { color: var(--muted); }
.sdd-table button { padding: 2px 5px; font: 12px ui-monospace, monospace; }
#sdd-full-value { max-height: 25dvh; overflow: auto; }
@media (max-width: 900px) {
 .sdd-demo { padding: 8px; gap: 7px; }
 .sdd-presets button { padding: 6px 8px; font-size: 12px; }
 .sdd-main { gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
 .sdd-workspace { gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
 .sdd-progress button { padding: 5px 7px; font-size: 12px; }
}
@media (max-width: 650px) {
 .sdd-demo { padding: 6px; gap: 6px; }
 h1 { font-size: 16px; }.sdd-app-header { gap: 7px; }.sdd-tools { gap: 4px; }.sdd-tools button { padding: 4px 6px; }
 .sdd-app-header > a { font-size: 10px; }
 .sdd-presets { flex-wrap: wrap; }.sdd-presets button { flex: 1 0 auto; padding: 4px 7px; font-size: 11px; }
 .sdd-progress { flex-wrap: wrap; gap: 5px; }.sdd-progress input { min-width: 50px; }
 #sdd-count, #sdd-run-count { font-size: 10px; }
 .sdd-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
 .sdd-workspace { display: contents; }
 .sdd-input-card { grid-column: 1; grid-row: 1; }
 .sdd-result-card { grid-column: 2; grid-row: 1; }
 .sdd-state-card { grid-column: 1/-1; grid-row: 2; }
 .sdd-card > header { padding: 6px; min-height: 34px; gap: 4px; }.sdd-card h2 { font-size: 12px; }
 .sdd-card > header span { display: none; }
 .sdd-controls { padding: 6px; gap: 4px; }.sdd-controls button { padding: 4px; font-size: 11px; }
 #sdd-input { font-size: 11px; padding: 5px; }
 .sdd-legend { display: none; }.sdd-tree-tools { font-size: 10px; padding: 4px; }
 .sdd-row { padding: 5px; gap: 4px; }.sdd-row label { display: none; }.sdd-row select { width: 80px; font-size: 10px; padding: 5px 2px; }.sdd-row button { padding: 4px; font-size: 11px; }
 #sdd-result-note { padding: 5px; font-size: 10px; max-height: 35px; }
 .sdd-source-lines, .sdd-ir-list { font-size: 11px; }.sdd-source-lines li, .sdd-ir-list button { padding: 2px 4px; gap: 4px; }.sdd-ir-list small { display: none; }
 #sdd-dependencies { gap: 6px; display: grid; grid-template-columns: 1fr 1fr; }
 .sdd-production, .sdd-equation { grid-column: 1; }.sdd-production { font-size: 12px; }.sdd-equation { font-size: 11px; padding: 6px; }
 #sdd-dependencies > .sdd-note { grid-column: 2; grid-row: 1; }
 #sdd-dependencies > h3 { display: none; }
 .sdd-attribute-values { grid-column: 2; grid-row: 2 / span 2; }.sdd-attribute-values dt, .sdd-attribute-values dd, .sdd-value { font-size: 11px; }
 .sdd-value { grid-column: 1; padding: 6px; }
 #sdd-translation-state { padding: 8px; }
 #sdd-runtime { padding: 7px 8px; }.sdd-run-form label { display: none; }
 .is-running .sdd-runtime-state { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 4px; margin-top: 6px; }
 #sdd-run-action { grid-column: 1/-1; font-size: 11px; padding: 5px; }
 .sdd-runtime-state h3:first-of-type { grid-column: 1; grid-row: 2; }.sdd-runtime-state h3:last-of-type { grid-column: 2; grid-row: 2; }
 #sdd-run-values { grid-column: 1; grid-row: 3; }#sdd-run-output { grid-column: 2; grid-row: 3; }
 #sdd-run-values, #sdd-run-output { font-size: 11px; padding: 5px; }
 .sdd-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

#sdd-rule-error { color: #a62a2a; }

.sdd-many-attributes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
.sdd-many-attributes > div { display: block; }
.sdd-many-attributes dd { font-size: 11px; }
@media (max-width: 650px) { .sdd-many-attributes { grid-template-columns: 1fr; } }