.dl{--ink:#263238;--outer:#1268a0;--inner:#087b69;--line:#586771;color:var(--ink);font-family:system-ui,sans-serif;container-type:inline-size;margin:28px 0;letter-spacing:0}
.dl *{box-sizing:border-box;letter-spacing:0}.dl [hidden]{display:none!important}
.dl .dl-layout{display:grid;grid-template-columns:minmax(175px,.65fr) minmax(0,1.4fr);gap:22px;align-items:start}
.dl .dl-settings,.dl .dl-player{min-width:0}
.dl h3,.dl h4{font-size:18px;line-height:1.5;margin:0 0 14px;padding:0;border:0;background:none;color:var(--ink)}.dl h4{font-size:15px;margin-top:16px}
.dl label{display:grid;gap:6px;font-size:14px;font-weight:600;min-width:0}.dl .dl-inputs{display:grid;gap:12px}
.dl button,.dl input{font:inherit;font-size:14px;line-height:1.4;border:1px solid #bac8c2;border-radius:4px;color:var(--ink);background:white;max-width:100%;min-height:42px}
.dl input{width:100%;padding:9px}.dl button{padding:9px 7px;cursor:pointer;white-space:normal;font-weight:600}.dl button:hover{background:#eef5f2}.dl button:disabled{opacity:.45;cursor:default}
.dl button:focus-visible,.dl input:focus-visible,.dl summary:focus-visible{outline:3px solid #1268a0;outline-offset:2px}
.dl .dl-config,.dl .dl-feedback,.dl .dl-error{font-size:14px;line-height:1.7;margin:10px 0}.dl .dl-error:empty{display:none}.dl .dl-error{color:#a32c36}
.dl .dl-quiz{display:grid;gap:10px;border-top:1px solid #dbe3df;padding-top:16px;margin-top:16px}.dl .dl-quiz button{background:var(--outer);color:white}.dl .dl-feedback{min-height:48px}
.dl .dl-presets{display:grid;gap:7px}.dl .dl-presets button{text-align:left;font-size:13px}
.dl .dl-console{position:sticky;top:76px;z-index:3;background:#fff;border-top:2px solid var(--inner);border-bottom:1px solid #dbe3df;padding:8px 12px;box-shadow:0 2px 4px #0000000a}
.dl .dl-readout{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:10px;align-items:center}.dl .dl-mini-grid{height:118px}.dl .dl-mini-grid>span{font-size:12px;display:block;margin-bottom:4px}
.dl .dl-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dl .dl-values span{font-size:12px;display:block}.dl .dl-values strong{font-size:24px;line-height:1.4;font-variant-numeric:tabular-nums}.dl .dl-values div:first-child{color:var(--outer)}.dl .dl-values div:nth-child(2){color:var(--inner)}
.dl .dl-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}.dl .dl-actions button{font-size:13px;padding:7px 2px}
.dl .dl-status{font-size:13px;line-height:1.5;min-height:4.5em;margin:7px 0 0}
.dl .dl-diagram svg{display:block;width:100%;height:auto;max-width:520px;margin:12px auto}
.dl .dl-edges path{fill:none;stroke:var(--line);stroke-width:2;marker-end:url(#dl-arrow)}.dl marker path{fill:var(--line)}
.dl .dl-edge-labels text{font-size:15px;fill:#45555e;text-anchor:middle}
.dl .dl-node rect,.dl .dl-node polygon{fill:#fff;stroke:var(--line);stroke-width:2}.dl .dl-node text{font-size:17px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.dl .dl-outer rect,.dl .dl-outer polygon{stroke:var(--outer);fill:#f2f7fc}.dl .dl-inner rect,.dl .dl-inner polygon{stroke:var(--inner);fill:#f0f8f4}.dl .dl-terminal rect{fill:#f4f6f7}
.dl .dl-node.is-active rect,.dl .dl-node.is-active polygon{stroke:#b65e09;stroke-width:4;fill:#fff4da}.dl .dl-edges path.is-active{stroke:#b65e09;stroke-width:3}
.dl .dl-grid{display:grid;gap:2px;grid-auto-rows:14px;width:max-content;max-width:100px}.dl .dl-cell{display:flex;align-items:center;justify-content:center;border:1px solid #c7d2cf;background:#f5f7f6;font-size:10px;line-height:1;min-width:0;color:#506259;font-variant-numeric:tabular-nums}
.dl .dl-cell.is-painted{background:#e4f2ec;border-color:var(--inner);color:#075c4d}.dl .dl-cell.is-current{outline:3px solid #b65e09;outline-offset:-3px;font-weight:700;background:#fff4da}
.dl .dl-grid-note{font-size:13px;line-height:1.6;margin:10px 0}.dl details{border-top:1px solid #dbe3df;margin-top:16px;padding:12px 0}.dl summary{font-size:15px;font-weight:600;cursor:pointer}.dl details p,.dl .dl-history ol{font-size:14px;line-height:1.7}.dl .dl-history ol{max-height:220px;overflow:auto;padding-left:24px}
@container(max-width:590px){.dl .dl-layout{grid-template-columns:1fr;gap:20px}.dl .dl-inputs{grid-template-columns:1fr 1fr}.dl .dl-presets{grid-template-columns:1fr 1fr}.dl .dl-console{top:0}.dl .dl-diagram svg{max-width:430px}.dl .dl-feedback{min-height:0}}
@media(max-width:600px){.dl .dl-console{top:0}}