:root{
  --ink:#0A0F16; --surface:#121A24; --surface-2:#18222E; --line:#263544; --line-soft:#1C2734;
  --text:#D6DFE9; --text-2:#92A3B4; --text-3:#61717F;
  --accent:#45A9E2; --accent-dim:#2C6F97; --sketch:#E3A44C; --ok:#58B47C; --crit:#E0705E;
  --teal:#4FBFB0; --violet:#9C8CE0;
  --sans:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --disp:'Archivo','IBM Plex Sans',sans-serif;
  --edfs:13.5px; --edlh:22px;
  --ed-bg:#0D141C; --gutter-bg:#0B121A; --gutter-fg:#3A4756; --comment:#4A5A6B; --num:#C0A5E8;
  --canvas-bg:#0A0F16; --pop:rgba(18,26,36,.98); --pop-2:rgba(24,34,46,.92); --shadow:rgba(0,0,0,.45);
  --scroll:#2C3A49; --scroll-hover:#3E5064; --sel:rgba(69,169,226,.28); --accent-soft:rgba(69,169,226,.14);
  --sketch-soft:rgba(227,164,76,.10); --crit-text:#EFA096; --handle-bg:#0F1A26;
}
/* the light theme: the same chrome on white — for people who work in daylight, and for the export */
:root[data-theme="light"]{
  --ink:#EEF1F5; --surface:#FFFFFF; --surface-2:#F3F5F8; --line:#D5DCE4; --line-soft:#E6EAEF;
  --text:#16202B; --text-2:#4E5F70; --text-3:#7A8A98;
  --accent:#1F7FBF; --accent-dim:#6FA9D1; --sketch:#B8791F; --ok:#3C9A62; --crit:#C8503F;
  --teal:#2E9A8C; --violet:#7B6FC0;
  --ed-bg:#FFFFFF; --gutter-bg:#F6F8FA; --gutter-fg:#A3AFBB; --comment:#8A98A8; --num:#7B6FC0;
  --canvas-bg:#FFFFFF; --pop:rgba(255,255,255,.98); --pop-2:rgba(255,255,255,.94); --shadow:rgba(20,30,40,.18);
  --scroll:#C9D2DB; --scroll-hover:#AEBAC6; --sel:rgba(31,127,191,.18); --accent-soft:rgba(31,127,191,.12);
  --sketch-soft:rgba(184,121,31,.10); --crit-text:#B2432F; --handle-bg:#FFFFFF;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body.play{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit}
.grow{flex:1}

.topbar{display:flex;align-items:center;gap:14px;padding:0 16px;height:48px;flex:none;
  background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:15.5px;
  color:var(--text);text-decoration:none;letter-spacing:-.02em}
.brand i{width:13px;height:13px;border:2px solid var(--accent);border-radius:3px;display:block;position:relative}
.brand i::after{content:'';position:absolute;inset:2px 2px auto auto;width:4px;height:4px;background:var(--accent)}
.sep{width:1px;height:18px;background:var(--line)}
.where{font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.tb{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--text-2);
  font-family:var(--mono);font-size:11.5px;padding:6px 12px;cursor:pointer;text-decoration:none;display:inline-block}
.tb:hover{border-color:var(--accent-dim);color:var(--text)}
.tb.ico{padding:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;position:relative}
.tb.ico svg{display:block}
.tb.ico .sun{display:none} :root[data-theme="light"] .tb.ico .moon{display:none} :root[data-theme="light"] .tb.ico .sun{display:block}
.tb.ico.done{border-color:var(--ok);color:var(--ok)}
.menuwrap{position:relative;display:inline-flex}
.menu{position:absolute;top:100%;right:0;margin-top:6px;min-width:190px;z-index:30;background:var(--pop);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px var(--shadow);padding:4px;display:flex;flex-direction:column}
.menu button{background:none;border:0;border-radius:5px;text-align:left;padding:7px 10px;color:var(--text);font-family:var(--mono);font-size:12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.menu button i{font-style:normal;color:var(--text-3);font-size:11px}
.menu button:hover{background:var(--accent-soft);color:var(--accent)}
.tb.ico.off{opacity:.45}
.tb.ico[data-badge]::after{content:attr(data-badge);position:absolute;top:100%;right:0;transform:translateY(6px);white-space:nowrap;max-width:min(420px,80vw);white-space:normal;width:max-content;text-align:left;
  font-family:var(--mono);font-size:10.5px;color:var(--text);background:var(--pop);border:1px solid var(--line);border-radius:5px;padding:3px 7px;z-index:20}

.cols{flex:1;display:grid;grid-template-columns:42fr 6px 58fr 6px 360px;min-height:0;min-width:0}
.divider{background:var(--line);cursor:col-resize;position:relative}
.divider::after{content:'';position:absolute;inset:0 -4px;}
.divider:hover{background:var(--accent-dim)}
.tb.icon.off{opacity:.45;text-decoration:line-through}
.tb.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tb.bad{border-color:var(--crit);text-decoration:none;opacity:1}
.tb.bad::after{content:attr(data-badge);margin-left:6px;color:var(--crit-text);font-weight:600}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.pane.editor{overflow:hidden}
.paneh{display:flex;align-items:center;gap:10px;height:38px;flex:none;padding:0 14px;
  background:var(--surface-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--text-3)}
.paneh .fn{color:var(--text)}
.paneh .hint{color:var(--text-3)}

.edwrap{position:relative;flex:1;min-height:0;background:var(--ed-bg);overflow:hidden;display:flex}
.gutter{margin:0;padding:16px 10px 16px 14px;flex:none;overflow:hidden;text-align:right;
  font-family:var(--mono);font-size:var(--edfs);line-height:var(--edlh);color:var(--gutter-fg);
  background:var(--gutter-bg);border-right:1px solid var(--line-soft);user-select:none;white-space:pre}
.edinner{position:relative;flex:1;min-width:0}
#hl,#ed{margin:0;padding:16px 18px;font-family:var(--mono);font-size:var(--edfs);line-height:var(--edlh);
  white-space:pre;tab-size:2;border:0;position:absolute;inset:0;overflow:auto}
#hl{color:var(--text-2);pointer-events:none;z-index:0}
#ed{background:transparent;color:transparent;caret-color:var(--accent);resize:none;z-index:1;outline:none}
#ed::selection{background:var(--sel)}
#hl .k{color:var(--accent);font-weight:500}
#hl .v{color:var(--violet)}
#hl .a{color:var(--teal)}
#hl .s{color:var(--sketch)}
#hl .n{color:var(--num)}
#hl .c{color:var(--comment);font-style:italic}

.diag{flex:none;padding:9px 14px;font-family:var(--mono);font-size:11.5px;border-top:1px solid var(--line)}
.diag.err{background:rgba(224,112,94,.10);color:var(--crit-text)}
.diag.warn{background:var(--sketch-soft);color:var(--sketch)}
.diag.note{background:rgba(127,182,218,.07);color:var(--text-2)}
.diag a.dg{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.diag a.dg:hover{border-bottom-style:solid}
.diag a.dg.info{opacity:.8}

.lensbar{flex-wrap:wrap;height:auto;min-height:38px;padding:6px 14px;gap:10px}
.seg{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;flex:none}
.seg button{background:var(--surface);border:0;color:var(--text-3);font-family:var(--mono);
  font-size:11.5px;padding:5px 13px;cursor:pointer}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px dashed var(--line);
  border-radius:12px;color:var(--text-3);font-family:var(--mono);font-size:11px;padding:4px 11px;cursor:pointer}
.chip:hover{border-color:var(--sketch);color:var(--text-2)}
.chip.on{border-style:solid;border-color:var(--sketch);color:var(--sketch);background:var(--sketch-soft)}
.chip b{font-weight:500} .chip i{font-style:normal;opacity:.55}
.dirtytag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sketch);border-radius:5px;
  padding:4px 8px 4px 11px;color:var(--sketch);font-family:var(--mono);font-size:11px;background:var(--sketch-soft)}
.dirtytag button{background:var(--sketch);border:0;border-radius:4px;color:#1B1206;font-family:var(--mono);
  font-size:11px;padding:4px 10px;cursor:pointer;font-weight:500}
.dirtytag button.ghost{background:transparent;color:var(--sketch);border:1px solid rgba(227,164,76,.45)}

.canvas{flex:1;min-height:0;background:var(--canvas-bg)}
/* a thin running line under the lens bar while the layout engine works in its worker */
.stage::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;transition:opacity .2s}
body.laying .stage::before{opacity:1;animation:acbusy 1.1s linear infinite}
@keyframes acbusy{from{background-position:-40% 0}to{background-position:140% 0}}
.canvas{padding:0;display:block;position:absolute;inset:0;overflow:hidden;touch-action:none;
  user-select:none;-webkit-user-select:none}
.canvas svg *{user-select:none;-webkit-user-select:none}
.canvas svg .node.snapped rect,.canvas svg .node.snapped path,.canvas svg .node.snapped circle,
.canvas svg .node.snapped ellipse{stroke:var(--sketch)}
.canvas svg.dia{display:block;width:100%;height:100%;max-width:none;max-height:none}
.canvas .empty{color:var(--crit);font-family:var(--mono);font-size:12px;padding:20px}

.term-body{overflow-y:auto;padding:9px 14px 4px;font-family:var(--mono);font-size:11.5px;line-height:1.7}
.tl{display:flex;gap:9px}
.tp{color:var(--accent);flex:none;width:56px}
.tc{color:var(--text)}
.tr{color:var(--text-3)} .tr.e{color:var(--crit-text)}
.tr b{color:var(--ok);font-weight:400}
.term-in{display:flex;gap:9px;align-items:center;padding:6px 14px 10px;font-family:var(--mono);font-size:11.5px}
.term-in input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-family:var(--mono);font-size:11.5px}
.term-in input::placeholder{color:var(--text-3)}

.stage{flex:1;min-height:0;position:relative}
.zoompill{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:4px;
  padding:5px 8px;border-radius:10px;background:var(--pop-2);border:1px solid var(--line);
  backdrop-filter:blur(10px);box-shadow:0 6px 20px var(--shadow);z-index:5}
.zoompill button{background:transparent;border:0;border-radius:6px;color:var(--text-2);
  font-family:var(--mono);font-size:14px;min-width:26px;height:26px;cursor:pointer;line-height:1}
.zoompill button:hover{background:var(--surface-2);color:var(--text)}
#zpct{font-family:var(--mono);font-size:11.5px;color:var(--text);min-width:44px;text-align:center;user-select:none}
.pillsep{width:1px;height:16px;background:var(--line);margin:0 3px}

.termh{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.termh button{background:transparent;border:0;color:var(--text-3);font-size:15px;cursor:pointer;line-height:1;padding:0 4px}
.termh button:hover{color:var(--text)}
.termpane{background:var(--gutter-bg);min-width:0}
.termwrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.term-body{flex:1;min-height:0}
.paneh .x{background:transparent;border:0;color:var(--text-3);font-size:14px;cursor:pointer;padding:0 4px}
.paneh .x:hover{color:var(--text)}
.topbar .dirtytag{margin-right:4px}

/* ── palette, inspector ─────────────────────────────────────────── */
.chips{position:absolute;left:16px;top:14px;display:flex;flex-wrap:wrap;gap:5px;max-width:320px;z-index:5}
.ctx{position:absolute;z-index:9;background:var(--pop);border:1px solid var(--line);border-radius:8px;
  padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:3px;min-width:230px;box-shadow:0 10px 30px var(--shadow)}
.ctx .h{grid-column:1/-1;font-family:var(--mono);font-size:10px;color:var(--text-3);padding:4px 8px 2px;text-transform:uppercase;letter-spacing:.04em}
.ctx button{background:transparent;border:0;border-radius:5px;color:var(--text-2);text-align:left;
  font-family:var(--mono);font-size:11px;padding:5px 9px;cursor:pointer}
.ctx button:hover{background:var(--accent-soft);color:var(--text)}
.ctx button::before{content:'+ ';opacity:.5}
.pal{background:var(--pop-2);border:1px solid var(--line);border-radius:6px;color:var(--text-2);
  font-family:var(--mono);font-size:10.5px;padding:5px 9px;cursor:pointer;backdrop-filter:blur(8px)}
.pal:hover{border-color:var(--accent-dim);color:var(--text)}
.pal::before{content:'+ ';opacity:.5}

.insp{position:absolute;right:14px;top:14px;width:264px;max-height:calc(100% - 28px);overflow-y:auto;
  background:var(--pop);border:1px solid var(--line);border-radius:10px;z-index:6;
  box-shadow:0 10px 30px var(--shadow);backdrop-filter:blur(10px);padding:10px 12px 12px}
.insph{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.insph .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.insph .x,.insprel .x{background:transparent;border:0;color:var(--text-3);font-size:15px;cursor:pointer;line-height:1;padding:0 3px}
.insph .x:hover,.insprel .x:hover{color:var(--crit)}
.inspf{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.inspagents{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:8px}
.agchip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border:1px solid var(--line);border-radius:5px;
  font-family:var(--mono);font-size:10.5px;color:var(--text-2);background:var(--surface-2)}
.agchip b{font-weight:500} .agchip .x{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:12px;line-height:1;padding:0 2px}
.agchip .x:hover{color:var(--crit)}
.inspagents input{width:82px;background:var(--surface-2);border:1px dashed var(--line);border-radius:5px;color:var(--text);padding:3px 7px;font-size:10.5px}
.inspagents input:focus{outline:none;border-color:var(--accent-dim)}
.inspf .l{width:48px;flex:none;font-family:var(--mono);font-size:10.5px;color:var(--text-3)}
.inspf input,.inspf select{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;color:var(--text);font-family:var(--sans);font-size:12.5px;padding:5px 8px}
.inspf input.mono,.inspf select{font-family:var(--mono);font-size:11.5px}
.inspf input:focus,.inspf select:focus{outline:none;border-color:var(--accent-dim)}
.inspacts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.inspacts button{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;
  color:var(--text-2);font-family:var(--mono);font-size:11px;padding:6px 8px;cursor:pointer;white-space:nowrap}
.inspacts button:hover{border-color:var(--accent-dim);color:var(--text)}
.inspacts button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.inspacts button.danger:hover{border-color:var(--crit);color:var(--crit)}
.insplbl{margin:12px 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.insprels{display:flex;flex-direction:column;gap:3px}
.insprel{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  background:var(--surface-2);border-radius:4px;padding:4px 7px}
.insprel .o{color:var(--accent)} .insprel .v{color:var(--violet)}
.insprel .ptr{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.insprel .rev{color:var(--text-3)}
.canvas svg .node.selected rect,.canvas svg .node.selected path,
.canvas svg .node.selected circle,.canvas svg .node.selected ellipse{stroke:var(--accent);stroke-width:2.2}

/* ── terminal: resizable, suggestions upward ─────────────────────── */
.sug-box{position:absolute;bottom:44px;left:14px;right:14px;z-index:7;display:flex;flex-direction:column;
  min-width:250px;background:var(--pop);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 -8px 26px var(--shadow);overflow:hidden;z-index:8}
.sug{background:transparent;border:0;text-align:left;color:var(--text-2);font-family:var(--mono);
  font-size:11.5px;padding:6px 12px;cursor:pointer}
.sug:hover,.sug.on{background:var(--accent-soft);color:var(--text)}
.inspacts button.primary{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.inspacts button:disabled{opacity:.4;cursor:not-allowed}
.canvas svg .hnd{fill:var(--canvas-bg);stroke:var(--accent);stroke-width:1.4}
.canvas svg .hnd:hover{fill:var(--accent)}

/* + attribute row: key and value side by side */
.inspadd input{min-width:0}
.inspadd input:first-of-type{flex:0 0 36%}

/* resources table — the projection of the placement blocks */
.captable{position:absolute;inset:0;overflow:auto;padding:22px 26px;background:var(--ink);z-index:5}
.stage.tabular .chips,.stage.tabular .zoompill,.stage.tabular .insp{display:none}
/* the current phase lights up what belongs to it alone */
.canvas svg[data-phase] .node[data-phase] > rect:first-of-type{stroke:var(--sketch)}
.canvas svg[data-phase] .node[data-phase] > path:first-of-type{stroke:var(--sketch)}
.captable h3{margin:18px 0 8px;font-size:13px;font-weight:600;color:var(--text)}
.captable h3:first-child{margin-top:0}
.captable table{border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;min-width:520px}
.captable th,.captable td{padding:5px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.captable th{font-weight:500;color:var(--text-3);font-family:var(--mono);font-size:10.5px}
.captable td:first-child,.captable th:first-child{text-align:left}
.captable td.k{color:var(--text-3);font-family:var(--mono);font-size:10.5px;text-align:left}
.captable tr.total td{font-weight:600;border-top:1px solid var(--text-3);border-bottom:none;background:var(--surface-2);color:var(--text)}
.captable tr.total td:first-child{border-radius:6px 0 0 6px}
.captable table.grand{margin-top:22px;border:1px solid var(--ok);border-radius:8px;overflow:hidden}
.captable tr.grand td{font-weight:700;background:rgba(88,180,124,.12);color:var(--text);border-bottom:none;padding:8px 12px}
.captable tr.demand td{color:var(--text-3);font-style:italic}
.captable .empty{color:var(--text-3);max-width:560px;line-height:1.55;font-size:12.5px}
.captable code{font-family:var(--mono);color:var(--text)}
.captable th.moment{color:var(--text)}
[hidden]{display:none!important}
.insprel input.sizing{flex:1;min-width:60px;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-2);
  font-family:var(--mono);font-size:10.5px;padding:2px 5px}
.insprel input.sizing:hover,.insprel input.sizing:focus{border-color:var(--line);outline:none;background:var(--surface-2);color:var(--text)}
.captable tr.load td{color:var(--text-3);font-size:10.5px;border-bottom:1px solid var(--line)}
.captable tr.load.over td{color:var(--crit)}
.tb.sel{appearance:none;-webkit-appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 8px) 55%;background-size:4px 4px;background-repeat:no-repeat;cursor:pointer;max-width:220px}

/* scrollbars: thin, quiet, the colour of the chrome — the code pane, the
   terminal, the inspector and the resources table all share them */
.play *{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.play *::-webkit-scrollbar{width:7px;height:7px}
.play *::-webkit-scrollbar-track{background:transparent}
.play *::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:1px solid transparent;background-clip:padding-box}
.play *::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:padding-box}
.play *::-webkit-scrollbar-corner{background:transparent}
#ed::-webkit-scrollbar-thumb{background:var(--scroll-hover);background-clip:padding-box}

/* ---- arrows: hit area, selection, handles (edges.js) ---- */
.edge .hit{pointer-events:stroke;cursor:pointer}
.edge:hover .ep{stroke-width:2.2}
.edge.selected .ep{stroke:var(--sketch);stroke-width:2}
.edge.selected .elbg{stroke:var(--sketch);stroke-width:.6}
.ehandles .eh{fill:var(--handle-bg);stroke:var(--sketch);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ehandles .eh.seg{fill:var(--sketch);opacity:.85}
.ehandles .eh.end{fill:var(--sketch);stroke:var(--canvas-bg)}
.ehandles .eh:hover{fill:#F5C97A}
.ehandles.dragging .eh{pointer-events:none}
.node.drop > rect,.node.drop > path,.node.drop > ellipse{stroke:var(--sketch) !important;stroke-width:2.4 !important;stroke-dasharray:none !important}
.insp .val{font-family:var(--mono);font-size:11px;color:var(--text-2)}
.insphint{margin:10px 0 0;font-size:10.5px;line-height:1.45;color:var(--text-3)}
.canvas svg .guides line{stroke:var(--accent);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.ehandles .eh.label{fill:transparent;stroke:var(--sketch);stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.ehandles .eh.label:hover{fill:rgba(227,164,76,.12)}
.hotspots .hs{fill:var(--canvas-bg);stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke;pointer-events:none}

/* the hand: Space held */
.canvas.hand{cursor:grab} .canvas.hand:active{cursor:grabbing} .canvas.hand svg .node{cursor:grab}
/* keys & gestures */
.helpwrap{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:24px}
.help{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px var(--shadow);max-width:860px;width:100%;max-height:100%;overflow:auto;padding:16px 22px 20px;font-size:13px}
.help header{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--text-2);margin-bottom:8px}
.help header b{color:var(--text);font-family:var(--sans);font-size:15px}
.helpcols{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.help h4{margin:14px 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.help dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:baseline}
.help dt{color:var(--text-2);white-space:nowrap} .help dd{margin:0;color:var(--text)}
.help kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;background:var(--surface-2);color:var(--text)}
.help code{font-family:var(--mono);color:var(--accent)}
@media (max-width:720px){.helpcols{grid-template-columns:1fr}}
/* the arrow's verb as a choice, and the verb for the next connection */
.insprel select.v{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;color:var(--accent);font-family:var(--mono);font-size:10.5px;padding:2px 4px}
.inspacts select.verb{flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;color:var(--text-2);font-family:var(--mono);font-size:11px;padding:0 6px}
#ed.dropping{outline:2px dashed var(--accent);outline-offset:-4px}

/* embedded (?embed=1): the editor and the picture, nothing else; a corner link opens the real thing */
body.play.embed .topbar,body.play.embed #diag{display:none}
body.play.embed .cols{grid-template-columns:38fr 6px 62fr 0 0 !important}
body.play.embed .paneh .hint{display:none}
body.play.embed .embed-open{display:inline-flex}
.embed-open{display:none;position:absolute;right:12px;top:10px;z-index:7;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--text-2);
  background:var(--pop-2);border:1px solid var(--line);border-radius:6px;padding:5px 9px;text-decoration:none}
.embed-open:hover{color:var(--accent);border-color:var(--accent-dim)}

/* a phone: one word before the editor (narrow.js) */
.narrow{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--ink)}
.narrow[hidden]{display:none}
body.narrow-on>:not(.narrow){display:none}
.narrow-card{max-width:420px;display:flex;flex-direction:column;gap:14px}
.narrow-card h2{margin:12px 0 0;font-family:var(--disp);font-size:26px;line-height:1.15;letter-spacing:-.02em}
.narrow-card p{margin:0 0 6px;color:var(--text-2);font-size:15.5px;line-height:1.6}
.nbtn{display:block;text-align:center;padding:13px 18px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font:500 14px var(--mono);text-decoration:none;cursor:pointer}
.nbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}