:root{--ink:#10302f;--bg:#e9eeec;--panel:#fbfcfb;--line:#c9d4d1;--amber:#f2a900;--new:#2f9e6e;--mono:'JetBrains Mono',monospace}
body{font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex;flex-direction:column}
.navbar{background:var(--ink)}
.brand{font-weight:700;letter-spacing:.2px}
main{flex:1;min-height:0}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:10px;height:100%;display:flex;flex-direction:column;overflow:hidden}
.bar{padding:.5rem .75rem;border-bottom:1px solid var(--line);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.CodeMirror{flex:1;height:auto;font:14px/1.6 var(--mono)}
.CodeMirror-gutters{background:#f0f4f2}
.cur-line{background:#ffe9a8!important}
#out{font:13px var(--mono);background:#0e2524;color:#d7f5e8;padding:.6rem .8rem;height:130px;overflow:auto;white-space:pre-wrap;margin:0}
#out.err{color:#ffb4a8}
#stage{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.75rem}
.frame{border:2px solid var(--ink);border-radius:8px;background:#fff;animation:push .35s ease-out}
.frame.top{border-color:var(--amber);box-shadow:0 0 0 3px #f2a90033}
.frame h6{margin:0;padding:.3rem .7rem;background:var(--ink);color:#fff;font:600 13px var(--mono)}
.frame.top h6{background:var(--amber);color:var(--ink)}
.vars{display:flex;flex-wrap:wrap;gap:.6rem;padding:.7rem}
.var{border:1.5px solid var(--line);border-radius:6px;min-width:90px;background:#fff;transition:background .3s,border-color .3s}
.var .n{font:600 12px var(--mono);padding:.15rem .5rem;border-bottom:1px solid var(--line);background:#f0f4f2}
.var .v{font:13px var(--mono);padding:.35rem .5rem;word-break:break-all}
.var small{color:#6b807c;font-size:10px;display:block}
.var.changed{animation:flash .9s ease-out;border-color:var(--amber)}
.var.fresh{animation:pop .5s ease-out;border-color:var(--new)}
.cells{display:flex;gap:0;flex-wrap:wrap}
.cells span{border:1.5px solid var(--ink);margin:0 -1.5px 3px 0;padding:.15rem .5rem;font:13px var(--mono);background:#fff}
@keyframes flash{0%{background:var(--amber);transform:scale(1.08)}100%{background:#fff;transform:scale(1)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes push{0%{transform:translateY(-20px);opacity:0}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.empty{color:#6b807c;margin:auto;text-align:center}
.err-line{background:#ffc9c0!important}
@media(max-width:991px){body{height:auto;min-height:100vh}main{flex:none}.col-lg-6{height:90vh!important;margin-bottom:.5rem}}
.navlink{color:#ffffffb3;text-decoration:none;font-size:.95rem;padding:.2rem 0;border-bottom:2px solid transparent}
.navlink:hover{color:#fff}
.navlink.active{color:#fff;border-bottom-color:var(--amber)}
.navlink:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}