@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#29382f;background:#f9fbf7;--green:#386b4e;--line:#dde5d9;--panel:#fffffff5;--tester:190px}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:white;color:#48564b;padding:9px 12px;font-size:12px;font-weight:500}button:hover{background:#edf3e8}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #739e77;outline-offset:2px}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#2d593f}header{position:fixed;z-index:3;top:16px;left:18px;right:18px;height:43px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#283d2d;font-size:23px;font-weight:700;letter-spacing:-1px;pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 11px;box-shadow:0 2px 9px #223d2010}.logo{background:#426c4d;color:white;width:26px;height:28px;border-radius:6px;text-align:center;font-family:Georgia;font-size:25px}.top-actions{display:flex;align-items:center;gap:7px;pointer-events:auto}.local{font-size:10px;color:#829179;margin-right:8px}i{display:inline-block;width:5px;height:5px;background:#7b9b70;border-radius:50%;margin-right:5px}main{height:100%;position:relative}.canvas-wrap{position:absolute;inset:0 0 var(--tester);background-color:#fafcf8;background-image:radial-gradient(#d6dfd0 .8px,transparent .8px);background-size:20px 20px}#canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none}.toolbar{position:absolute;z-index:3;top:17px;left:50%;transform:translateX(-50%);display:flex;gap:3px;align-items:center;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 12px #3040220a;white-space:nowrap}.toolbar button{border:0;background:transparent;padding:7px 9px;height:32px;font-size:17px;display:flex;gap:6px;align-items:center}.toolbar button:hover{background:#edf3e8}.toolbar button span{font-size:11px}.separator{width:1px;height:20px;background:var(--line);margin:0 3px}.inspector{position:absolute;z-index:2;top:78px;right:18px;width:224px;max-height:calc(100dvh - var(--tester) - 132px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 16px 17px;box-shadow:0 3px 15px #3040220b}.properties-hidden .inspector{display:none}.inspector-title{font-size:11px;display:flex;justify-content:space-between;align-items:center;color:#6d7c64;border-bottom:1px solid #e9eee5;padding-bottom:10px;margin-bottom:16px}.inspector-title button{border:0;font-size:10px;padding:3px 5px}.selection-label{font-size:8px;letter-spacing:1.3px;color:#95a08b}.property-name{font-size:16px;margin:8px 0 17px;font-weight:500;overflow-wrap:anywhere}.prop-field{display:block;font-size:10px;color:#7f8f74;margin:13px 0}.prop-field input,.prop-field select{display:block;width:100%;margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:5px;background:white;color:#405638;font-size:11px}.check{display:flex;gap:6px;align-items:center;font-size:11px;color:#718366;margin:13px 0}input[type=checkbox]{accent-color:var(--green)}.prop-note{font-size:9px;line-height:1.8;color:#99a38f}.transitions-title{font-size:8px;letter-spacing:1.1px;color:#8c9982;margin:17px 0 8px;padding-top:15px;border-top:1px solid var(--line)}.transition-item{font:10px 'IBM Plex Mono',monospace;display:block;width:100%;text-align:left;margin:5px 0;padding:8px;background:#f5f8f0;border:0;overflow-wrap:anywhere}.danger{font-size:10px;color:#a76b5c;background:transparent;margin-top:13px;padding:7px 9px}.edge{fill:none;stroke:#798b79;stroke-width:1.6;marker-end:url(#arrow)}.selected-edge{stroke:#386b4e;stroke-width:2.5}.edge-hit{fill:none;stroke:transparent;stroke-width:18;cursor:pointer}.edge-text{font:11px 'IBM Plex Mono',monospace;fill:#62785a;paint-order:stroke;stroke:#fafcf8;stroke-width:7;stroke-linejoin:round;cursor:pointer}.node{cursor:grab}.node circle{fill:#f9fbf5;stroke:#8b9d7d;stroke-width:1.7}.node.selected circle{fill:#eaf1e2;stroke:#5b7b48;stroke-width:2}.node.connecting circle{stroke:#386b4e;stroke-dasharray:5 3;stroke-width:3}.node .inner{fill:none;stroke-width:1}.node text{font:12px 'DM Sans',sans-serif;fill:#4b6041;text-anchor:middle;pointer-events:none}.node .token-label{font:9px 'IBM Plex Mono',monospace;fill:#8a9a7a}.connection-preview{stroke:#386b4e;stroke-width:1.5;stroke-dasharray:6 5;fill:none;pointer-events:none}.pan-ready #canvas,.pan-ready .node{cursor:grab}.panning #canvas,.panning .node{cursor:grabbing}.canvas-status{position:absolute;left:20px;right:20px;bottom:calc(var(--tester) + 12px);display:flex;gap:18px;align-items:center;justify-content:flex-end;pointer-events:none;font-size:10px;color:#8f9c85}#modehint{padding:6px 9px;background:#fafcf8de;border-radius:5px}.tester{position:absolute;bottom:0;left:0;right:0;height:var(--tester);background:#fcfdf9;border-top:1px solid var(--line);padding:11px 22px 16px;z-index:4}.panel-title{display:flex;justify-content:space-between;align-items:center;height:29px}.panel-title h2{font-size:12px;font-weight:500;margin:0}.tester-actions{display:flex;align-items:center;gap:12px}.tester-actions button{border:0;background:transparent;font-size:16px;padding:3px 8px}.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:10px;height:calc(100% - 40px);min-height:0}.test-grid>div{min-width:0;min-height:0}.field-label{display:block;font-size:8px;color:#909e85;letter-spacing:1.3px;font-weight:600;margin-bottom:7px}textarea{resize:none;border:1px solid #dfe5da;border-radius:6px;background:#fff;color:#53634b;padding:11px;font:12px/1.7 'IBM Plex Mono',monospace;width:100%}#input{height:calc(100% - 18px)}.output-label{display:flex;justify-content:space-between}#tokens{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;height:calc(100% - 18px);overflow:auto;padding:9px;border:1px solid #e1e7dc;border-radius:6px;background:#f0f4ec}.token{border:1px solid #d5dfcb;border-radius:4px;background:#fafff6;padding:6px 9px;font:11px 'IBM Plex Mono',monospace;height:48px}.token b{display:block;font-size:8px;font-weight:500;color:#80916d;margin-bottom:5px}.token.number{background:#f9f1e1;border-color:#e8dcc4;color:#9a8052}.token.error{background:#fff0ec;color:#b54f3c;border-color:#eacac0}.empty{font-size:11px;color:#8c9783}.tester-collapsed{--tester:48px}.tester-collapsed .test-grid{display:none}dialog{border:1px solid #dce4d6;border-radius:12px;width:720px;max-width:calc(100vw - 24px);padding:24px;color:#30402c;box-shadow:0 25px 100px #24372122}dialog::backdrop{background:#26322266;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.dialog-heading h2{font-size:21px;margin:0 0 20px;font-weight:500}.export-options{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:18px;gap:10px}.export-options select{display:block;padding:8px;margin-top:7px;border:1px solid var(--line);border-radius:5px;color:#526649;background:white}#export-preview{height:280px;font-size:11px;background:#f6f8f2;resize:vertical}.export-help{font-size:10px;color:#8b9782}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}#toast{position:fixed;bottom:calc(var(--tester) + 48px);left:50%;transform:translateX(-50%);background:#304d37;color:white;padding:11px 19px;border-radius:7px;font-size:11px;display:none;z-index:10;max-width:90vw}@media(max-width:1150px){.toolbar{top:76px;left:18px;transform:none}.inspector{top:76px}.local{display:none}.canvas-status #modehint{max-width:55%;font-size:9px}}@media(max-width:650px){:root{--tester:190px}header{top:10px;left:10px;right:10px}.brand{font-size:19px;padding:5px 8px}.top-actions button{padding:8px;font-size:11px}.top-actions .primary span{display:none}.toolbar{left:10px;top:65px;gap:0;padding:4px}.toolbar button{padding:6px 8px}.toolbar button span{font-size:10px}.inspector{top:114px;right:10px;width:208px;max-height:calc(100dvh - var(--tester) - 155px);padding:12px}.canvas-status{left:12px;right:12px;gap:8px;font-size:8px}.canvas-status #modehint{font-size:8px;max-width:56%}.test-grid{gap:10px}.tester{padding:9px 12px 12px}.export-options{align-items:flex-start;flex-direction:column}#export-preview{height:250px}.prop-note{display:none}}
.minimap{position:absolute;z-index:2;bottom:calc(var(--tester) + 12px);left:18px;width:172px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fffffff0;box-shadow:0 3px 12px #3040220a;overflow:hidden}.minimap svg{display:block;width:170px;height:106px;cursor:crosshair;touch-action:none}.minimap line{stroke:#a4b397;stroke-width:2;vector-effect:non-scaling-stroke}.minimap circle{fill:#839b70}.map-viewport{fill:#719b5520;stroke:#779b61;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}@media(max-width:650px){.minimap{left:10px;width:122px;bottom:calc(var(--tester) + 12px)}.minimap svg{width:120px;height:75px}.canvas-status #modehint{max-width:52%;line-height:1.5}}
.inspector{position:fixed;z-index:5;right:auto;top:100px;left:calc(100vw - 250px);max-height:calc(100dvh - var(--tester) - 90px);box-shadow:0 10px 35px #30402224;background:#fffffff9}.inspector-title{cursor:default}@media(max-width:650px){.inspector{width:220px;right:auto}}
.inspector{width:240px;padding:11px 14px 13px}.inspector .selection-label,.inspector .property-name,.inspector .prop-note{display:none}.inspector-title{margin-bottom:9px}.inspector .prop-field{margin:10px 0}.inspector .check{display:inline-flex;margin:7px 8px 3px 0;font-size:10px;gap:4px}.inspector .transitions-title{margin:12px 0 6px;padding-top:12px}.inspector .danger{margin-top:8px}.inspector .transition-item{font-size:9px;padding:7px}.node.selected .inner{stroke-width:1.2}
kbd{font:9px 'IBM Plex Mono',monospace;border:1px solid #dfe7d8;border-radius:3px;padding:1px 4px;background:#f5f8f1;color:#899b7b;margin-left:3px}
.portal path{fill:#edf5e9;stroke:#386b4e;stroke-width:1.2}.portal text{font:10px 'IBM Plex Mono',monospace;fill:#386b4e;pointer-events:none}.portal.invalid path{stroke:#b54f3c;fill:#fff0ec}.portal.invalid text{fill:#b54f3c}.portal-wire{stroke:#386b4e;stroke-width:1.2;fill:none}.minimap path{fill:none;stroke:#a4b397;stroke-width:1;vector-effect:non-scaling-stroke}
.toolbar button[aria-pressed=true]{background:#e7efdf;color:#386b4e}.selection-box{fill:#729b4b18;stroke:#729b4b;stroke-width:1;stroke-dasharray:5 3;pointer-events:none}.selecting-mode #canvas{cursor:crosshair}.comment-label{cursor:move}.comment-label rect{fill:#fff9da;stroke:#cbb879;stroke-width:1}.comment-label text{font:11px 'DM Sans',sans-serif;fill:#756536;pointer-events:none}.comment-label.selected rect{stroke:#386b4e;stroke-width:2}.selection-summary{font-size:12px;color:#6c7e60}.prop-field textarea{display:block;margin-top:8px;font:12px/1.5 'DM Sans',sans-serif;resize:vertical}.inspector #copy-group{margin-right:6px}@media(max-width:650px){.toolbar button{padding:6px}.toolbar .separator{margin:0 2px}}
.minimap .map-comment{fill:#fff5c4;stroke:#cbb879;stroke-width:1;vector-effect:non-scaling-stroke}@media(max-width:650px){.toolbar{max-width:calc(100vw - 20px);overflow-x:auto}}

.tool-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.toolbar #layout-mode,.toolbar #layout-density{border:1px solid var(--line);border-radius:5px;background:white;color:#48564b;font-size:11px;padding:6px 4px;width:66px;height:30px}.toolbar{max-width:calc(100vw - 36px);overflow-x:auto}

.toolbar #layout-density{width:110px}

.edge-label-box{fill:#fff;stroke:#798b79;stroke-width:1;cursor:pointer}.edge-text.boxed{stroke:none}

:root{color-scheme:light}.theme-sun{display:none}#theme-toggle{display:flex;align-items:center;justify-content:center;padding:8px}
:root[data-theme=dark]{color-scheme:dark;color:#edf1f5;background:#151719;--green:#8bd5a5;--line:#46515a;--panel:#24292ef5;scrollbar-color:#687783 #24292e}
[data-theme=dark] .theme-moon{display:none}[data-theme=dark] .theme-sun{display:block}
[data-theme=dark] button{background:#292f35;color:#e9eff5}[data-theme=dark] button:hover{background:#39434c}[data-theme=dark] .primary{background:#326746;color:#f4fff8;border-color:#73af88}[data-theme=dark] .primary:hover{background:#3f7b54}
[data-theme=dark] .brand{color:#f1f5f9}[data-theme=dark] .local,[data-theme=dark] .canvas-status{color:#c0cbd5}
[data-theme=dark] .canvas-wrap{background-color:#15191d;background-image:radial-gradient(#30383e .8px,transparent .8px)}
[data-theme=dark] .toolbar button,[data-theme=dark] .tester-actions button,[data-theme=dark] .inspector-title button{background:transparent}[data-theme=dark] .toolbar button:hover{background:#39434c}[data-theme=dark] .toolbar button[aria-pressed=true]{background:#334a3d;color:#c5f5d3}
[data-theme=dark] .inspector,[data-theme=dark] .minimap,[data-theme=dark] .tester,[data-theme=dark] dialog{background:#22282e;color:#edf1f5;border-color:var(--line)}
[data-theme=dark] .inspector-title,[data-theme=dark] .transitions-title{border-color:var(--line);color:#ccd5df}
[data-theme=dark] textarea,[data-theme=dark] .prop-field input,[data-theme=dark] .prop-field select,[data-theme=dark] .export-options select,[data-theme=dark] .toolbar #layout-mode,[data-theme=dark] .toolbar #layout-density,[data-theme=dark] #export-preview{background:#171c21;color:#eff4f8;border-color:#596975}
[data-theme=dark] .prop-field,[data-theme=dark] .check,[data-theme=dark] .field-label,[data-theme=dark] .export-help,[data-theme=dark] .prop-note,[data-theme=dark] .empty,[data-theme=dark] .selection-summary{color:#c5d0da}
[data-theme=dark] .transition-item,[data-theme=dark] kbd{background:#303940;color:#e2eaf1;border-color:var(--line)}[data-theme=dark] .danger{color:#ffb5a5}
[data-theme=dark] .edge{stroke:#bdcbd7;stroke-width:1.9}[data-theme=dark] .selected-edge,[data-theme=dark] .connection-preview{stroke:#adf0c4}[data-theme=dark] #arrow path{fill:#bdcbd7}
[data-theme=dark] .edge-text{fill:#f1f5f9;stroke:#15191d}[data-theme=dark] .edge-label-box{fill:#242d35;stroke:#adbdcb}[data-theme=dark] .edge-text.boxed{stroke:none}
[data-theme=dark] .node circle{fill:#29323a;stroke:#d1dce5;stroke-width:2}[data-theme=dark] .node.selected circle{fill:#365343;stroke:#c0f2d1}[data-theme=dark] .node.connecting circle{stroke:#adf0c4}[data-theme=dark] .node .inner{fill:none}[data-theme=dark] .node text{fill:#ffffff}[data-theme=dark] .node .token-label{fill:#d2dce6}
[data-theme=dark] #modehint{background:#242d35ed;color:#cbd5df}
[data-theme=dark] #tokens{background:#171d22;border-color:var(--line)}[data-theme=dark] .token{background:#2a3931;border-color:#65816d;color:#edf6ed}[data-theme=dark] .token b{color:#c5d2c6}[data-theme=dark] .token.number{background:#403622;border-color:#71613a;color:#f1db9b}[data-theme=dark] .token.error{background:#422a25;border-color:#805146;color:#ffc7b9}
[data-theme=dark] .portal path{fill:#2c3d35;stroke:#a7debb}[data-theme=dark] .portal text{fill:#e8f9ed}[data-theme=dark] .portal-wire{stroke:#a7debb}[data-theme=dark] .portal.invalid path{fill:#442c26;stroke:#f2a28d}[data-theme=dark] .portal.invalid text{fill:#ffc3ad}
[data-theme=dark] .comment-label rect{fill:#3c3720;stroke:#a99755}[data-theme=dark] .comment-label text{fill:#f3e3a5}[data-theme=dark] .comment-label.selected rect{stroke:#eddfb2}
[data-theme=dark] .minimap path{stroke:#a9bccb}[data-theme=dark] .minimap circle{fill:#d5e4ef}[data-theme=dark] .map-viewport{fill:#a3c9e025;stroke:#c0d8e9}[data-theme=dark] .minimap .map-comment{fill:#62572b;stroke:#c4b064}
[data-theme=dark] .selection-box{fill:#a3c9e020;stroke:#b5d8ef}[data-theme=dark] dialog::backdrop{background:#06090cbb}[data-theme=dark] #toast{background:#365344;color:#f2fff6}

/* Lift dark surfaces so the canvas feels softer while labels stay legible. */
:root[data-theme=dark]{background:#303639;--line:#5b666c;--panel:#3e4549f5;scrollbar-color:#818d93 #394044}
[data-theme=dark] .canvas-wrap{background-color:#343a3e;background-image:radial-gradient(#505b60 .8px,transparent .8px)}
[data-theme=dark] .inspector,[data-theme=dark] .minimap,[data-theme=dark] .tester,[data-theme=dark] dialog{background:#3e4549}
[data-theme=dark] textarea,[data-theme=dark] .prop-field input,[data-theme=dark] .prop-field select,[data-theme=dark] .export-options select,[data-theme=dark] .toolbar #layout-mode,[data-theme=dark] .toolbar #layout-density,[data-theme=dark] #export-preview,[data-theme=dark] #tokens{background:#2d3337}
[data-theme=dark] .edge-text{stroke:#343a3e}[data-theme=dark] .edge-label-box{fill:#444d52;stroke:#c3d0d7}
[data-theme=dark] .node circle{fill:#465157;stroke:#d1dce5}[data-theme=dark] .node.selected circle{fill:#365343}
[data-theme=dark] #modehint{background:#3e4549ed}
.node.trace-highlight circle{stroke:#14864d;stroke-width:4;filter:drop-shadow(0 0 5px #42cc8066)}.node.trace-highlight text{fill:#146a3d;font-weight:700}
[data-edge].trace-highlight .edge{stroke:#159653;stroke-width:4;filter:drop-shadow(0 0 3px #42cc8066)}[data-edge].trace-highlight .edge-text{fill:#145f39;font-weight:700}
.token{cursor:help}.token:focus-visible{outline:2px solid #32875a;outline-offset:2px}
[data-theme=dark] .node.trace-highlight circle{stroke:#7ff0aa;filter:drop-shadow(0 0 6px #62e995aa)}[data-theme=dark] .node.trace-highlight text{fill:#c7ffda}
[data-theme=dark] [data-edge].trace-highlight .edge{stroke:#7ff0aa;filter:drop-shadow(0 0 4px #62e995aa)}[data-theme=dark] [data-edge].trace-highlight .edge-text{fill:#d4ffe1}

/* Use a soft neutral as the dark theme's interface and graph accent. */
:root[data-theme=dark]{--green:#e1e9ed}
[data-theme=dark] .primary{background:#dce6eb;color:#20282d;border-color:#f0f5f7}
[data-theme=dark] .primary:hover{background:#f0f5f7}
[data-theme=dark] button:focus-visible,[data-theme=dark] input:focus-visible,[data-theme=dark] textarea:focus-visible,[data-theme=dark] select:focus-visible{outline-color:#e1e9ed}
[data-theme=dark] .toolbar button[aria-pressed=true]{background:#56636a;color:#f5f8fa}
[data-theme=dark] .selected-edge,[data-theme=dark] .connection-preview{stroke:#e1e9ed}
[data-theme=dark] .node.selected circle{fill:#59666d;stroke:#e7eef2}
[data-theme=dark] .node.connecting circle{stroke:#f0f5f7}
[data-theme=dark] .token{background:#3c454a;border-color:#849198;color:#f0f4f6}
[data-theme=dark] .token b{color:#d6e0e5}
[data-theme=dark] .portal path{fill:#3d484e;stroke:#dbe5e9}
[data-theme=dark] .portal text{fill:#f2f6f8}
[data-theme=dark] .portal-wire{stroke:#dbe5e9}
[data-theme=dark] .node.trace-highlight circle{stroke:#f3f7f9;filter:drop-shadow(0 0 6px #e4edf288)}
[data-theme=dark] .node.trace-highlight text{fill:#ffffff}
[data-theme=dark] [data-edge].trace-highlight .edge{stroke:#f3f7f9;filter:drop-shadow(0 0 4px #e4edf288)}
[data-theme=dark] [data-edge].trace-highlight .edge-text{fill:#ffffff}
[data-theme=dark] .token:focus-visible{outline-color:#edf3f6}
[data-theme=dark] #toast{background:#dce6eb;color:#20282d}

/* Light blue is the accent for dark mode controls and graph highlights. */
:root[data-theme=dark]{--green:#a9d5ff}
[data-theme=dark] .primary{background:#b8ddff;color:#183047;border-color:#d7edff}
[data-theme=dark] .primary:hover{background:#cbe7ff}
[data-theme=dark] button:focus-visible,[data-theme=dark] input:focus-visible,[data-theme=dark] textarea:focus-visible,[data-theme=dark] select:focus-visible{outline-color:#a9d5ff}
[data-theme=dark] .toolbar button[aria-pressed=true]{background:#3c566c;color:#e5f3ff}
[data-theme=dark] .selected-edge,[data-theme=dark] .connection-preview{stroke:#a9d5ff}
[data-theme=dark] .node.selected circle{fill:#3d566b;stroke:#c7e5ff}
[data-theme=dark] .node.connecting circle{stroke:#b8ddff}
[data-theme=dark] .token{background:#34414a;border-color:#7997af;color:#edf7ff}
[data-theme=dark] .token b{color:#c9e5ff}
[data-theme=dark] .portal path{fill:#344958;stroke:#b7ddfa}
[data-theme=dark] .portal text{fill:#e2f2ff}
[data-theme=dark] .portal-wire{stroke:#b7ddfa}
[data-theme=dark] .node.trace-highlight circle{stroke:#c5e4ff;filter:drop-shadow(0 0 6px #75bfffaa)}
[data-theme=dark] .node.trace-highlight text{fill:#e7f5ff}
[data-theme=dark] [data-edge].trace-highlight .edge{stroke:#c5e4ff;filter:drop-shadow(0 0 4px #75bfffaa)}
[data-theme=dark] [data-edge].trace-highlight .edge-text{fill:#e7f5ff}
[data-theme=dark] .token:focus-visible{outline-color:#a9d5ff}
[data-theme=dark] #toast{background:#b8ddff;color:#183047}
[data-theme=dark] .logo{background:#b8ddff;color:#183047}

/* Color-code token types in the tester and highlight matching input text. */
.token-color-0{--token-bg:#e8f2fb;--token-border:#bcd5ec;--token-fg:#285a85;--token-accent:#3d7fb8}
.token-color-1{--token-bg:#e8f5ec;--token-border:#bfdcc8;--token-fg:#2f6643;--token-accent:#478f60}
.token-color-2{--token-bg:#fbf2df;--token-border:#ead6ad;--token-fg:#7f6224;--token-accent:#b88a33}
.token-color-3{--token-bg:#fbeaed;--token-border:#efc8cf;--token-fg:#8a3a48;--token-accent:#c25a6c}
.token-color-4{--token-bg:#f0ebfa;--token-border:#d6c8ee;--token-fg:#5c4787;--token-accent:#8567bf}
.token-color-5{--token-bg:#e6f5f3;--token-border:#bcded9;--token-fg:#2c6761;--token-accent:#3f968c}
.token-color-6{--token-bg:#fceee5;--token-border:#efd0bb;--token-fg:#8a512d;--token-accent:#c47a43}
.token-color-7{--token-bg:#ebedfa;--token-border:#cbd0ee;--token-fg:#4a518a;--token-accent:#6f79bf}
.token-color-8{--token-bg:#fbeaf4;--token-border:#eec9df;--token-fg:#863e68;--token-accent:#bf5d92}
.token-color-9{--token-bg:#eff6e4;--token-border:#d3e2b8;--token-fg:#5a6c2a;--token-accent:#8aa13c}
.token.token-tinted{background:var(--token-bg);border-color:var(--token-border);color:var(--token-fg)}
.token.token-tinted b{color:var(--token-accent)}
.input-wrap{position:relative;height:calc(100% - 18px);border:1px solid #dfe5da;border-radius:6px;background:#fff}
.input-wrap:focus-within{outline:2px solid #739e77;outline-offset:2px}
#input{position:relative;z-index:1;height:100%;border:0;border-radius:0;background:transparent;color:#53634b;caret-color:#53634b;padding:11px;scrollbar-gutter:stable}
#input:focus-visible{outline:none}
.input-highlights{position:absolute;z-index:0;inset:0;padding:11px;border-radius:5px;overflow:hidden;pointer-events:none;font:12px/1.7 'IBM Plex Mono',monospace;white-space:pre-wrap;overflow-wrap:break-word;tab-size:4;color:transparent}
.input-highlights .token-mark{background:var(--token-bg);border-radius:2px;box-shadow:inset 0 -1.5px 0 var(--token-accent)}
.input-highlights .token-mark.error{background:#ffe3dc;box-shadow:inset 0 -1.5px 0 #c25a48}
[data-theme=dark] .token-color-0{--token-bg:#25384a;--token-border:#3f6484;--token-fg:#d3e8ff;--token-accent:#7fb8e8}
[data-theme=dark] .token-color-1{--token-bg:#24382b;--token-border:#3f6a4f;--token-fg:#c9f0d6;--token-accent:#72c08d}
[data-theme=dark] .token-color-2{--token-bg:#3b3323;--token-border:#6f5b33;--token-fg:#f4dfad;--token-accent:#d9b45f}
[data-theme=dark] .token-color-3{--token-bg:#3d282d;--token-border:#71434c;--token-fg:#ffd3db;--token-accent:#e58b9b}
[data-theme=dark] .token-color-4{--token-bg:#322b43;--token-border:#5b4b7d;--token-fg:#e3d6ff;--token-accent:#b39ae6}
[data-theme=dark] .token-color-5{--token-bg:#223b38;--token-border:#3b6b64;--token-fg:#c8f2ec;--token-accent:#6fc6bb}
[data-theme=dark] .token-color-6{--token-bg:#3d2f25;--token-border:#73503a;--token-fg:#ffdbc2;--token-accent:#e19b65}
[data-theme=dark] .token-color-7{--token-bg:#2a2d45;--token-border:#4d537e;--token-fg:#d9ddff;--token-accent:#9aa5ea}
[data-theme=dark] .token-color-8{--token-bg:#3c2934;--token-border:#71445d;--token-fg:#ffd4e9;--token-accent:#e28bb9}
[data-theme=dark] .token-color-9{--token-bg:#303822;--token-border:#5b6939;--token-fg:#e6f2c4;--token-accent:#b5c86b}
[data-theme=dark] .input-wrap{background:#2d3337;border-color:#596975}
[data-theme=dark] .input-wrap:focus-within{outline-color:#a9d5ff}
[data-theme=dark] #input{background:transparent;color:#eff4f8;caret-color:#eff4f8}
[data-theme=dark] .input-highlights .token-mark.error{background:#4a2d27;box-shadow:inset 0 -1.5px 0 #e08a74}