:root{--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--paper:#0e2530;--panel:#14303d;--line:#22495a;--ink:#e3f1f6;--muted:#93b4c2;--soft:#1c3e4d;--tile-hover:#1a3b49;--accent:#35a8cf;--accent-hover:#5bbcdc;--on-accent:#0e2530;--bad:#ff8a7a;--backdrop:#0000008c}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);font-family:var(--sans);margin:0;font-size:14px}button{font:inherit}.shell{flex-direction:column;gap:14px;height:100dvh;padding:16px 20px 20px;display:flex}.top{align-items:flex-end;gap:28px;display:flex}.brand{white-space:nowrap;align-items:center;gap:10px;padding-bottom:4px;display:flex}.logo{flex:none;width:38px;height:38px;display:flex}.logo svg{width:100%;height:100%}.brand-text{flex-direction:column;gap:2px;display:flex}.brand-name{font-family:var(--sans);font-size:22px;font-weight:700}.brand-sub{color:var(--muted);font-size:12px}.stairs{flex:1;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:6px;display:grid}.step{color:var(--muted);text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;gap:1px;padding:0;display:flex}.step-number{letter-spacing:.06em;text-transform:uppercase;font-size:11px}.step-topic{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:13px;overflow:hidden}.step-bar{width:100%;height:calc(6px + var(--rise) * 5px);background:var(--soft);border-radius:4px 4px 2px 2px;margin-top:5px;transition:background .2s}.step:hover .step-bar{background:var(--line)}.step.reached{color:var(--ink)}.step.reached .step-bar{background:color-mix(in srgb, var(--step-color) 45%, var(--paper))}.step.current .step-topic{font-weight:600}.step.current .step-bar{background:var(--accent)}.step:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}.panes{flex:1;grid-template-columns:minmax(250px,min-content) minmax(0,1fr) 340px;gap:14px;min-height:0;display:grid}.pane{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.pane-title{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;padding:12px 16px 10px;font-size:12px;font-weight:600}.workspace .pane-title{border-bottom:1px solid var(--line)}.workspace-body{flex:1;min-height:0;position:relative}.toolbox-body{flex:1;padding:0 10px 12px;position:relative;overflow-y:auto}.toolbox-body [data-category]{border-top:1px solid var(--line);margin-bottom:10px;padding:8px 4px 4px}.toolbox-body [data-category]:before{content:attr(data-category);text-transform:capitalize;color:var(--morphic-category-color);margin:0 0 4px 8px;font-size:12px;font-weight:600;display:block}.toolbox-body[data-newest=output] [data-category=output]:after,.toolbox-body[data-newest=variables] [data-category=variables]:after,.toolbox-body[data-newest=decisions] [data-category=decisions]:after,.toolbox-body[data-newest=loops] [data-category=loops]:after,.toolbox-body[data-newest=functions] [data-category=functions]:after{content:"new at this level";color:var(--on-accent);background:var(--accent);border-radius:999px;padding:1px 7px;font-size:11px;position:absolute;top:9px;right:8px}.toolbox-body [data-category]{position:relative}.output-head{justify-content:space-between;align-items:center;padding-right:12px;display:flex}.output-body{font-family:var(--mono);white-space:pre-wrap;word-break:break-word;flex:1;margin:0;padding:4px 16px 16px;font-size:13px;line-height:1.6;overflow:auto}.output-error{color:var(--bad)}.output-quiet{color:var(--muted)}.run{background:var(--accent);color:var(--on-accent);cursor:pointer;border:0;border-radius:999px;padding:6px 16px;font-weight:600}.run:hover{background:var(--accent-hover)}.quiet-button{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:999px;padding:6px 14px}.quiet-button:hover{background:var(--soft)}.confirm{border:1px solid var(--line);background:var(--panel);width:min(360px,100vw - 32px);color:var(--ink);border-radius:14px;padding:20px 22px 18px;box-shadow:0 18px 40px #0003}.confirm::backdrop{background:var(--backdrop)}.confirm p{margin:0 0 14px;font-size:15px;line-height:1.45}.confirm-check{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.confirm-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}@media (width<=800px){.shell{height:auto;padding:12px 16px 16px}.top{flex-direction:column;align-items:stretch;gap:10px}.brand{padding:0}.logo{width:30px;height:30px}.brand-text{flex-direction:row;align-items:baseline;gap:10px}.step-number{font-size:10px}.step-topic{font-size:11px}.panes{grid-template-columns:minmax(0,1fr)}.toolbox{max-height:300px}.toolbox-body [data-category]{flex-wrap:wrap;column-gap:4px;display:flex}.toolbox-body [data-category]:before{flex-basis:100%}.toolbox-body .morphic-block{flex:160px;min-width:0}.toolbox-body .morphic-block svg{max-width:100%;height:auto}.workspace{height:60vh}.output{min-height:160px}}.toolbox-body{min-width:calc(var(--morphic-toolbox-block-width,0px) + 48px)}