*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0e0e0c;--paper:#f4f2eb;--paper2:#ece9df;--paper3:#e0ddd1;
  --line:#ccc9b8;--muted:#9a9890;
  --blue:#1a5cff;--blue-bg:#dce8ff;
  --amber:#a05000;--amber-bg:#fdf0dc;
  --green:#0a6e42;--green-bg:#d2f0e2;
  --violet:#5020a0;--violet-bg:#ece4ff;
  --red:#b02020;--red-bg:#fce8e6;
  --edge:#aaa89a;
}
html,body{height:100%;overflow:hidden;font-family:'Bricolage Grotesque',sans-serif;background:var(--paper);color:var(--ink)}
header{height:50px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:12px;background:var(--paper);z-index:10;flex-shrink:0}
.logo{font-size:17px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.logo-box{width:24px;height:24px;background:var(--ink);border-radius:5px;display:grid;place-items:center}
.logo-box svg{width:13px;height:13px;stroke:#f4f2eb;stroke-width:2;fill:none;stroke-linecap:round}
.logo sub{font-weight:400;font-size:11px;color:var(--muted);vertical-align:middle;margin-left:2px}
.examples{flex:1;display:flex;gap:5px;overflow-x:auto;padding:0 4px;scrollbar-width:none}
.examples::-webkit-scrollbar{display:none}
.ex{white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:10px;padding:3px 11px;border:1px solid var(--line);border-radius:20px;cursor:pointer;background:var(--paper2);color:var(--muted);transition:.12s}
.ex:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.hbtns{display:flex;gap:5px;flex-shrink:0}
.btn{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:500;padding:5px 12px;border-radius:7px;border:1px solid var(--line);background:var(--paper2);cursor:pointer;color:var(--ink);transition:.12s;display:flex;align-items:center;gap:4px;white-space:nowrap}
.btn:hover{background:var(--paper3)}
.btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-dark:hover{background:#222}
.ws{display:grid;grid-template-columns:400px 1fr;height:calc(100vh - 50px)}
.ed{border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}
.panel-top{padding:8px 14px;border-bottom:1px solid var(--line);background:var(--paper2);display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;transition:.2s}
.dot.err{background:var(--red)}.dot.busy{background:var(--amber)}
#lc{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px}
#nc{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted)}
#editor-wrap{flex:1;position:relative;overflow:hidden;background:var(--paper)}
#hl-layer,#ta{
  position:absolute;top:0;left:0;width:100%;height:100%;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.8;
  padding:18px;tab-size:2;white-space:pre-wrap;word-wrap:break-word;
  overflow:auto;border:none;outline:none;resize:none;
}
#ta{
  background:transparent;color:transparent;caret-color:var(--ink);
  z-index:2;
}
#ta::placeholder{color:var(--line)}
#hl-layer{
  background:var(--paper);color:var(--ink);
  pointer-events:none;z-index:1;
  overflow:hidden;
}
/* Token colours */
.kw-struct  { color:#0a6e42; font-weight:500; }  /* START END STOP */
.kw-io      { color:#5020a0; font-weight:500; }  /* INPUT OUTPUT RETURN DISPLAY */
.kw-cond    { color:#a05000; font-weight:500; }  /* IF ELSE ENDIF */
.kw-loop    { color:#1a5cff; font-weight:500; }  /* WHILE FOR DO ENDWHILE ENDFOR */
.kw-call    { color:#b0306a; font-weight:500; }  /* CALL FUNCTION */
.kw-prep    { color:#0077aa; font-weight:500; }  /* PREP INIT INITIALIZE */
.kw-flow    { color:#b02020; font-weight:500; }  /* BREAK CONTINUE */
.kw-switch  { color:#6a3d9a; font-weight:500; }  /* SWITCH CASE DEFAULT ENDSWITCH */
.kw-misc    { color:#aaa89a; font-weight:400; }  /* COMMENT CONNECTOR */
.cm-comment { color:#aaa89a; font-style:italic; }
.errbar{display:none;padding:7px 14px;background:var(--red-bg);color:var(--red);font-size:11px;font-family:'IBM Plex Mono',monospace;border-top:1px solid #f0bfbf;flex-shrink:0}
.ed-foot{padding:7px 12px;border-top:1px solid var(--line);background:var(--paper2);display:flex;align-items:center;gap:8px;flex-shrink:0}
.cv{display:flex;flex-direction:column;background:var(--paper2);overflow:hidden}
.cv-top{border-bottom:1px solid var(--line);padding:7px 14px;background:var(--paper);display:flex;align-items:center;gap:10px;flex-shrink:0}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-right:auto}
.leg{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.lsw{width:11px;height:11px;border:1px solid;flex-shrink:0}
.cv-body{flex:1;overflow:auto;padding:28px;background-image:radial-gradient(circle,var(--line) 1px,transparent 1px);background-size:22px 22px;background-color:var(--paper2);display:flex;align-items:flex-start;justify-content:center}
#fsvg{display:none;background:var(--paper);border-radius:10px;border:1px solid var(--line);filter:drop-shadow(0 4px 20px rgba(0,0,0,.07));overflow:visible;flex-shrink:0}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px;color:var(--muted)}
.empty-box{width:52px;height:52px;border:1.5px dashed var(--line);border-radius:10px;display:grid;place-items:center}
.empty-box svg{width:22px;height:22px;stroke:var(--line);fill:none;stroke-width:1.5;stroke-linecap:round}
.empty h3{font-size:14px;font-weight:500;color:var(--line)}
.empty p{font-size:11px;text-align:center;max-width:220px;line-height:1.6}
.drawer{width:380px;border-left:1px solid var(--line);background:var(--paper);position:fixed;right:-400px;top:50px;bottom:0;transition:right .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;z-index:20;box-shadow:-4px 0 20px rgba(0,0,0,.07)}
.drawer.open{right:0}
.dr-inner{padding:18px}
.dr-close{position:absolute;top:10px;right:10px;width:26px;height:26px;border:1px solid var(--line);border-radius:5px;background:var(--paper2);cursor:pointer;display:grid;place-items:center;font-size:15px;color:var(--muted)}
.dr-close:hover{background:var(--paper3)}
.dr h2{font-size:15px;font-weight:600;margin-bottom:14px}
.dr-sect{margin-bottom:18px}
.dr-sect h3{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.kw{display:flex;align-items:flex-start;gap:9px;margin-bottom:6px;padding:7px 10px;background:var(--paper2);border-radius:5px;border:1px solid var(--line)}
.kw code{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;color:var(--blue);min-width:88px;flex-shrink:0;margin-top:1px}
.kw span{font-size:11px;color:var(--muted);line-height:1.5}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--ink);color:var(--paper);font-size:12px;padding:7px 16px;border-radius:20px;transition:.22s;z-index:100;pointer-events:none;white-space:nowrap}
.toast.on{transform:translateX(-50%) translateY(0)}