:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#e6eddc;--panel:#fbfcf7;--ink:#26331f;--mute:#667260;--line:#c9d4bd;--code:#1f2a1a;--codeink:#e8f0d8;--husk:#3f8f48}
@media (prefers-color-scheme:dark){:root{--bg:#141b11;--panel:#1d2619;--ink:#e6efd9;--mute:#98a78f;--line:#33422d;--code:#0e130c;--codeink:#dfe9cc}}
html,body{height:100%}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 "Trebuchet MS","Segoe UI",system-ui,sans-serif;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--husk);color:#fff;flex-wrap:wrap}
h1{margin:0;font-size:24px;font-weight:800}.sp{flex:1}.ver{font-size:12px;opacity:.9}
header input{font:inherit;border:0;border-radius:8px;padding:5px 10px;width:200px;background:rgba(255,255,255,.2);color:#fff}
button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:7px 14px;font-weight:700}
button:focus-visible,input:focus-visible,select:focus-visible,.blk:focus-visible{outline:3px solid #fff;outline-offset:1px}
button:disabled{opacity:.45;cursor:default}
.ghost{background:rgba(255,255,255,.18);color:#fff}.run{background:#f2b705;color:#2b2100}.stop{background:#c4452f;color:#fff}
main{flex:1;min-height:0;display:grid;grid-template-columns:230px 1fr 340px;gap:10px;padding:10px}
section{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:auto;min-height:0}
h2{margin:0;padding:10px 12px 4px;font-size:14px;color:var(--mute)}h3{margin:12px 2px 4px;font-size:12px;color:var(--mute);font-weight:700}
#pal{padding:0 10px 12px}#pal .blk{margin:6px 0;cursor:grab}#ws{padding:14px 14px 20px;min-height:200px}
.modline{margin:0;padding:8px 14px;color:var(--mute);font-size:13px}.modline button{padding:2px 8px;font-size:12px;background:var(--line);color:var(--ink)}
.blk{border-radius:9px;color:#fff;font-weight:700;padding:6px 8px;box-shadow:0 2px 0 rgba(0,0,0,.22)}
.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.c-out,.c-note{background:#f2b705;color:#2b2100}.c-var{background:#e8782a}.c-ctl{background:var(--husk)}.c-mod{background:#2a8f9c}.c-mem{background:#8a5fc4}.c-desk{background:#6b7a8f}
.blk input,.blk select{font:inherit;font-weight:600;border:0;border-radius:14px;padding:3px 10px;background:#fff;color:#222;max-width:100%}
.x{margin-left:auto;background:rgba(0,0,0,.2);color:inherit;padding:0 8px;border-radius:50%;line-height:22px}
.c{margin:6px 0 2px 14px;padding:2px 0 2px 8px;border-left:10px solid rgba(0,0,0,.2);min-height:26px}
.dz{height:7px;border-radius:4px}.dz.over{height:30px;background:rgba(63,143,72,.35);outline:2px dashed var(--husk)}
.empty{color:var(--mute);padding:6px}
aside{display:flex;flex-direction:column;gap:10px;min-height:0}aside section{flex:1}
pre{margin:0;padding:10px 12px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;background:var(--code);color:var(--codeink);height:calc(100% - 34px)}
#out .o{color:#ffe27a}#out .e{color:#ff9a8a}#out .s{color:#9bb08f}
.bar{display:flex;align-items:center;padding-right:8px}.bar h2{flex:1}.bar button{background:var(--line);color:var(--ink);padding:2px 10px;margin-left:4px;font-size:12px}
footer{padding:6px 16px;font-size:12px;color:var(--mute)}
@media(max-width:900px){html,body{height:auto}main{grid-template-columns:1fr}aside section{min-height:220px}}

.simple{display:flex;align-items:center;gap:4px;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:700}
select.ghost{border:0;border-radius:8px;padding:7px 10px;font:inherit;font-weight:700}select.ghost option{color:#222}
body.simple-on [data-adv]{display:none}
.help{margin:10px 14px 0;padding:10px 14px;border-radius:10px;background:rgba(242,183,5,.18);border:1px solid #f2b705;font-size:14px}
.help ol{margin:6px 0 8px;padding-left:20px}.help button{background:#f2b705;color:#2b2100;padding:3px 12px}
.err-hl{outline:4px solid #ff3b30;outline-offset:2px}
.friend{margin:6px 0;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.07);border-left:5px solid #ff6b5b;color:#fff;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;font-size:14px}
.friend.warn{border-color:#f2b705}.friend.note{border-color:#9bb08f}
.friend b{display:block}.friend .hint{display:block;color:#ffe27a;margin-top:2px}.friend small{display:block;margin-top:4px;color:#9bb08f;font:12px ui-monospace,Menlo,Consolas,monospace}