:root{
  --paper:#EDECE3; --grid:#DBDACD; --ink:#21261F; --ink-soft:#5A6055;
  --moss:#3E7B45; --moss-deep:#2C5F35; --moss-wash:#E2ECDF;
  --clay:#C4643B; --plum:#7B5EA7; --teal:#237E8C;
  --card:#FBFAF4; --line:#D6D4C6; --ghost:#DFF0DB;
  --shadow:0 1px 2px rgba(33,38,31,.08), 0 8px 24px rgba(33,38,31,.10);
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%; overflow:hidden; font-family:var(--ui); color:var(--ink); background:var(--paper)}
button{font-family:inherit; cursor:pointer}
input{font-family:inherit}

/* ---------- canvas & world ---------- */
#canvas{position:fixed; inset:0; overflow:hidden; touch-action:none; cursor:default}
body.spacepan #canvas{cursor:grab}
#canvas.panning{cursor:grabbing}
#canvas.marqueeing{cursor:crosshair}
#world{position:absolute; width:6000px; height:4000px; transform-origin:0 0;
  background-image:radial-gradient(var(--grid) 1.4px, transparent 1.4px);
  background-size:28px 28px}
#threads{position:absolute; inset:0; width:6000px; height:4000px; pointer-events:none; overflow:visible}
#threads line{stroke:var(--moss); stroke-width:1.5; stroke-dasharray:5 6; opacity:.45}
#marquee{position:fixed; border:1.5px solid var(--moss); background:rgba(62,123,69,.08);
  border-radius:6px; pointer-events:none; z-index:30}
#snapguides{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:33; overflow:visible}
#snapguides .sg{stroke:var(--clay); stroke-width:1.5; fill:none}
#snapguides .sg.center{stroke-dasharray:5 4}
#snapguides .sgt{fill:var(--clay); font:500 9.5px var(--mono); text-anchor:middle;
  paint-order:stroke; stroke:var(--paper); stroke-width:3px}

.region{position:absolute; border:1.5px dashed var(--line); border-radius:18px; pointer-events:none}
.region .rlabel{position:absolute; top:-14px; left:18px; background:var(--paper); padding:2px 10px;
  font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink-soft); letter-spacing:.02em;
  white-space:nowrap; pointer-events:auto; cursor:grab; display:flex; gap:7px; align-items:center;
  border-radius:8px}
.region .rlabel:hover{color:var(--ink); background:var(--card); box-shadow:var(--shadow)}
.region .rlabel:active{cursor:grabbing}
.region .rx{display:none; cursor:pointer; font-size:10px; font-family:var(--ui); font-weight:400}
.region .rlabel:hover .rx{display:inline}
.region .rx:hover{color:var(--clay)}
.region .rname input{font:inherit; border:1px solid var(--moss); outline:0; background:var(--card);
  border-radius:6px; padding:0 6px; width:160px; color:var(--ink)}
.region .rgrip{position:absolute; right:-8px; bottom:-8px; width:16px; height:16px; border-radius:5px;
  background:var(--card); border:1.5px solid var(--line); cursor:nwse-resize; pointer-events:auto; opacity:0;
  transition:opacity .15s}
.region:hover .rgrip{opacity:1}
.region .rgrip:hover{border-color:var(--moss)}
body.far .region{border-color:#c8c6b6}
body.far .region .rlabel{font-size:34px; top:-30px; color:var(--ink)}
body.far .region .rgrip{display:none}
body.regiondraw #canvas{cursor:crosshair}
body.drawing #canvas{cursor:crosshair}

/* ---------- canvas marks ---------- */
#marks{position:absolute; inset:0; width:6000px; height:4000px; overflow:visible; pointer-events:none}
#marks .mk{pointer-events:auto; stroke-width:2.5; stroke-linecap:round; cursor:grab}
#marks .mk:active{cursor:grabbing}
#marks .mk-arrow line{stroke-width:2.5; stroke-linecap:round}
#marks .mk-text{font-family:var(--display); font-weight:600; font-size:21px; cursor:grab; user-select:none}
#marks .msel{fill:none; stroke:var(--moss); stroke-width:1.5; stroke-dasharray:5 5; pointer-events:none; opacity:.8}
#marks .mh{fill:var(--card); stroke:var(--moss); stroke-width:1.8; pointer-events:auto}
#marks .mh:hover{fill:var(--moss-wash)}
.mtext-edit{position:absolute; min-width:40px; max-width:520px; font-family:var(--display); font-weight:600;
  font-size:21px; line-height:1.25; outline:0; background:var(--card); border:1.5px dashed var(--moss);
  border-radius:8px; padding:3px 8px; z-index:20; white-space:pre-wrap}

/* ---------- app frames ---------- */
.app{position:absolute; background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); user-select:none}
.app[data-type="sticky"]{background:#F6E9A8; border-color:#E4D584}
.app[data-type="sticky"] .app-head{background:linear-gradient(#fff5, transparent); border-bottom-color:#E4D584}
.app.selected{border-color:var(--moss); box-shadow:0 0 0 3px rgba(62,123,69,.25), var(--shadow)}
.app.ghosting{border-color:var(--moss); border-style:dashed}
.app.growing{border-color:var(--moss); border-style:dashed; background:var(--ghost)}
.app.shimmer::after{content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none;
  border:2px solid var(--shim, var(--moss)); animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.15}50%{opacity:.8}}

.app-head{display:flex; align-items:center; gap:7px; padding:8px 12px; border-bottom:1px solid var(--line);
  cursor:grab; border-radius:14px 14px 0 0; background:linear-gradient(#fff8, transparent)}
.app-head:active{cursor:grabbing}
.app-icon{font-size:13px}
.app-title{font-family:var(--display); font-weight:600; font-size:14.5px; flex:1; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0}
.app-title input{font:inherit; border:0; outline:0; background:var(--paper); border-radius:6px;
  padding:1px 6px; width:100%}
.vchip{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--line); border-radius:20px; padding:2px 8px; white-space:nowrap; flex-shrink:0}
.vchip.branch{color:var(--moss-deep); border-color:var(--moss); background:var(--moss-wash)}
.app-avs{display:flex; flex-shrink:0}
.app-avs .av{width:15px; height:15px; border-radius:50%; border:2px solid var(--card); margin-left:-5px}
.headacts{display:flex; gap:2px; flex-shrink:0}
.headacts button{border:0; background:transparent; font-size:11.5px; padding:2px 4px; border-radius:6px;
  cursor:pointer; line-height:1; color:var(--ink-soft)}
.headacts button:hover{background:var(--paper); color:var(--ink)}
.headlock{border:0; background:transparent; font-size:11px; padding:2px 3px; border-radius:6px;
  cursor:pointer; opacity:0; transition:opacity .12s; flex-shrink:0; line-height:1}
.app:hover .headlock, .app.private .headlock{opacity:.75}
.headlock:hover{opacity:1; background:var(--paper)}
.headlock.lockon{opacity:1}
.headlock:disabled{cursor:default; background:transparent}

.app-flex{display:flex; align-items:stretch}
.app-main{flex:1 1 0; min-width:0}
.app-body{position:relative}
.app-body iframe{display:block; width:100%; border:0; border-radius:0 0 14px 14px; background:transparent}
.app.has-ghostpane .app-body iframe{border-radius:0 0 0 14px}

/* Input routing: a widget is inert until you click it awake (solo-selected).
   Inert widgets pan/zoom/drag like cards; active ones take pointer + keys. */
.app-body iframe, .subpanel iframe, .ghostpane iframe{pointer-events:none}
.app.selected.solo .app-body iframe,
.app.selected.solo .subpanel iframe,
.app.selected.solo .ghostpane iframe{pointer-events:auto}
.app:not(.solo) .app-body{cursor:grab}
.app:not(.solo) .app-body:active{cursor:grabbing}

/* offscreen-rendered browser pages, composited into the widget's own frame —
   ordinary world DOM, so stacking/drag/zoom behave like any other widget */
.nativecanvas{position:absolute; z-index:2; border-radius:8px; background:#fff; pointer-events:none}
.app.selected.solo .nativecanvas{pointer-events:auto}
.nativecanvas.loading{box-shadow:inset 0 2.5px 0 var(--moss); animation:loadglow 1s ease-in-out infinite}
@keyframes loadglow{50%{box-shadow:inset 0 2.5px 0 var(--moss-wash)}}

/* private widgets — plum for the keeper, a veil for everyone else */
.app.private{border-color:var(--plum)}
.app.private .app-head{background:linear-gradient(rgba(123,94,167,.10), transparent); border-bottom-color:var(--plum)}
.app.private.selected{box-shadow:0 0 0 3px rgba(123,94,167,.25), var(--shadow)}
.app.private .vchip{border-color:var(--plum); color:var(--plum); background:rgba(123,94,167,.08)}
.tools .lockon{color:#CBB8E8}
.privveil{display:none; min-height:150px; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:22px 16px; text-align:center; background:repeating-linear-gradient(-45deg,
  rgba(123,94,167,.05), rgba(123,94,167,.05) 12px, transparent 12px, transparent 24px)}
.privveil .pv-lock{font-size:26px}
.privveil b{font-family:var(--display); font-size:14px}
.privveil .pv-note{font-size:11px; color:var(--ink-soft)}
.app.veiled .privveil{display:flex}
.app.veiled .app-flex{display:none}
.app.veiled .tier2{background:var(--card)}

/* fleeting wake hint */
.awakechip{position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); background:var(--ink);
  color:var(--paper); font-size:10px; border-radius:8px; padding:3px 10px; white-space:nowrap; z-index:4;
  pointer-events:none; opacity:.88; transition:opacity .5s}
.awakechip.fade{opacity:0}

/* typing sprout */
.typist{position:absolute; top:-11px; right:12px; font-size:11px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:1px 8px; color:var(--ink-soft);
  display:none; align-items:center; gap:5px; white-space:nowrap; z-index:2}
.typist::before{content:"✿"; color:var(--tcolor, var(--moss))}
.app.typing .typist{display:flex}

/* growing cover */
.growcover{display:none; padding:22px 18px; text-align:center; min-height:110px;
  flex-direction:column; gap:10px; align-items:center; justify-content:center}
.app.growing .growcover{display:flex}
.app.growing .app-flex{display:none}
.growcover .gsprout{font-size:30px; animation:sway 1.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.growcover .gtext{font-size:12.5px; color:var(--moss-deep); font-family:var(--mono)}
.growcover .gsub{font-size:11px; color:var(--ink-soft)}

/* subview panel (loam.openPanel — local quick detail, parent's shared data) */
.subpanel{display:none; width:0; border-left:1.5px solid var(--line); background:var(--card);
  flex-direction:column; overflow:hidden; border-radius:0 0 14px 0}
.app.has-subpanel .subpanel{display:flex; width:var(--gw, 100%)}
.subpanel .sp-head{display:flex; align-items:center; gap:8px; padding:6px 8px 5px 12px;
  border-bottom:1px solid var(--line); background:var(--paper)}
.subpanel .sp-title{flex:1; font-family:var(--display); font-weight:600; font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.subpanel .sp-x{border:0; background:transparent; color:var(--ink-soft); font-size:12px; padding:2px 6px;
  border-radius:6px}
.subpanel .sp-x:hover{background:var(--line); color:var(--ink)}
.subpanel .sp-body{flex:1; display:flex; flex-direction:column; min-height:0}
.subpanel iframe{display:block; width:100%; border:0; background:transparent}

/* ghost pane (side-by-side preview) */
.ghostpane{display:none; width:0; border-left:1.5px dashed var(--moss); background:var(--ghost);
  border-radius:0 0 14px 0; flex-direction:column; overflow:hidden}
.app.has-ghostpane .ghostpane{display:flex; width:var(--gw, 100%)}
.ghostpane .glabel{font-size:11px; font-weight:600; color:var(--moss-deep); padding:6px 10px 4px;
  display:flex; gap:6px; align-items:center; justify-content:space-between}
.ghostpane .gbody{flex:1; display:flex; flex-direction:column; min-height:0}
.ghostpane .glabel .who{font-weight:400; color:var(--ink-soft); font-size:10.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.ghostpane iframe{display:block; width:100%; border:0; flex:1; background:transparent}
.ghostbar{display:flex; align-items:center; gap:8px; padding:7px 10px; border-top:1px dashed var(--moss);
  font-size:12px}
.ghostbar b{color:var(--moss-deep); font-weight:600; flex:1; font-size:11.5px}
.ghostbar button{border-radius:8px; padding:4px 12px; font-size:12px; border:1px solid var(--moss)}
.ghostbar .keep{background:var(--moss); color:#fff; font-weight:600}
.ghostbar .discard{background:transparent; color:var(--moss-deep)}

/* new-app ghost gets a bottom bar instead of a side pane */
.newghostbar{display:none; align-items:center; gap:8px; padding:8px 12px; border-top:1.5px dashed var(--moss);
  background:var(--moss-wash); border-radius:0 0 14px 14px; font-size:12.5px}
.app.newghost .newghostbar{display:flex}
.newghostbar b{color:var(--moss-deep); font-weight:600; flex:1; font-size:12px}
.newghostbar button{border-radius:8px; padding:4px 12px; font-size:12px; border:1px solid var(--moss)}
.newghostbar .keep{background:var(--moss); color:#fff; font-weight:600}
.newghostbar .discard{background:transparent; color:var(--moss-deep)}
.app.newghost .app-body iframe{opacity:.92}

/* selection toolbar */
.tools{position:absolute; top:-46px; left:0; display:none; gap:5px; background:var(--ink);
  padding:6px; border-radius:10px; box-shadow:var(--shadow); z-index:3; white-space:nowrap}
.app.selected.solo .tools{display:flex}
.tools button{background:transparent; color:#EDECE3; border:0; border-radius:6px; padding:4px 9px;
  font-size:12px; display:flex; align-items:center; gap:5px}
.tools button[hidden]{display:none}
.tools button:hover{background:#3a4038}
.tools .sprout-btn{color:#A9D3AC; font-weight:600}
.tools .danger:hover{background:#5a2f28}

/* prompt popover on app */
.apprompt{display:none; position:absolute; left:0; right:0; bottom:-52px; background:var(--card);
  border:1.5px solid var(--moss); border-radius:12px; padding:6px 8px; box-shadow:var(--shadow);
  align-items:center; gap:8px; z-index:4}
.app.prompting .apprompt{display:flex}
.apprompt input{flex:1; border:0; outline:0; background:transparent; font-family:var(--mono);
  font-size:12.5px; color:var(--ink); min-width:0}

/* resize handles: right edge, bottom edge, corner */
.rhandle{position:absolute; right:-4px; top:0; bottom:14px; width:9px; cursor:ew-resize; z-index:6}
.rhandle::after{content:""; position:absolute; right:3px; top:50%; height:26px; width:3px;
  transform:translateY(-50%); border-radius:2px; background:var(--line); opacity:0}
.bhandle{position:absolute; left:0; right:14px; bottom:-4px; height:9px; cursor:ns-resize; z-index:6}
.bhandle::after{content:""; position:absolute; bottom:3px; left:50%; width:26px; height:3px;
  transform:translateX(-50%); border-radius:2px; background:var(--line); opacity:0}
.chandle{position:absolute; right:-5px; bottom:-5px; width:18px; height:18px; cursor:nwse-resize; z-index:6}
.chandle::after{content:""; position:absolute; right:4px; bottom:4px; width:9px; height:9px;
  border-right:2.5px solid var(--line); border-bottom:2.5px solid var(--line); border-radius:0 0 4px 0; opacity:0}
.app:hover .rhandle::after, .app.selected .rhandle::after,
.app:hover .bhandle::after, .app.selected .bhandle::after,
.app:hover .chandle::after, .app.selected .chandle::after{opacity:1}
.chandle:hover::after{border-color:var(--moss)}

/* semantic zoom tiers */
.tier2{display:none; position:absolute; inset:0; border-radius:13px; background:var(--card); z-index:5;
  flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:12px}
.tier2 .t2i{font-size:46px; line-height:1}
.tier2 .t2t{font-family:var(--display); font-weight:700; font-size:26px; line-height:1.15}
.tier2 .t2s{font-size:15px; color:var(--ink-soft); font-family:var(--mono); max-width:90%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.mid .tier2, body.far .tier2{display:flex}
.app.renaming .tier2{display:none}
.app[data-type="sticky"] .tier2{background:#F6E9A8}
body.far .tier2 .t2s{display:none}
body.far .tier2 .t2i{font-size:64px}
body.far .tier2 .t2t{font-size:34px}

/* ---------- chrome ---------- */
.topbar{position:fixed; top:14px; left:16px; right:16px; display:flex; align-items:center; gap:14px;
  pointer-events:none; z-index:40}
.topbar>*{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px; background:var(--card); border:1.5px solid var(--line);
  border-radius:12px; padding:8px 14px; box-shadow:var(--shadow)}
.brand svg{width:20px; height:20px}
.brand .name{font-family:var(--display); font-weight:700; font-size:16px}
.brand .crumb{font-size:13px; color:var(--ink-soft)}
.presence{display:flex; align-items:center; background:var(--card); border:1.5px solid var(--line);
  border-radius:12px; padding:6px 12px 6px 10px; gap:2px; box-shadow:var(--shadow)}
.presence .av{width:24px; height:24px; border-radius:50%; font-size:10px; color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:700; margin-left:-6px; border:2px solid var(--card);
  cursor:pointer; flex-shrink:0}
.presence .av.you{cursor:text}
.presence .pcount{font-size:12px; color:var(--ink-soft); margin-left:8px; white-space:nowrap}
.presence input{border:1px solid var(--moss); border-radius:8px; font-size:12px; padding:2px 7px;
  outline:0; width:110px; margin-left:6px}
.spacer{flex:1}
.spacechip{display:flex; align-items:center; gap:8px; background:var(--card); border:1.5px solid var(--line);
  border-radius:12px; padding:8px 12px; font-size:13.5px; font-weight:600; font-family:var(--display);
  color:var(--ink); box-shadow:var(--shadow); cursor:pointer; transition:border-color .13s}
.spacechip svg{width:18px; height:18px}
.spacechip .chev{font-size:10px; color:var(--ink-soft); margin-left:-1px}
.spacechip:hover{border-color:var(--moss)}

/* ---------- the spaces overlay (garden of gardens) ---------- */
.spaces{position:fixed; inset:0; background:var(--paper); z-index:80; overflow-y:auto;
  animation:spacesIn .18s ease}
.spaces[hidden]{display:none}
@keyframes spacesIn{from{opacity:0}to{opacity:1}}
.sp-head{display:flex; align-items:baseline; gap:12px; padding:26px 34px 6px; position:sticky; top:0;
  background:linear-gradient(var(--paper) 75%, transparent)}
.sp-head svg{width:24px; height:24px; align-self:center}
.sp-head h2{font-family:var(--display); font-size:24px; font-weight:700}
.sp-sub{font-size:12.5px; color:var(--ink-soft)}
.sp-close{margin-left:auto; border:1.5px solid var(--line); background:var(--card); border-radius:10px;
  width:34px; height:34px; font-size:14px; color:var(--ink-soft); align-self:center}
.sp-close:hover{border-color:var(--moss); color:var(--ink)}
.sp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
  padding:18px 34px 40px}
.sp-card{background:var(--card); border:1.5px solid var(--line); border-radius:16px; overflow:hidden;
  cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s; position:relative;
  text-align:left; padding:0}
.sp-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--moss)}
.sp-card.here{border-color:var(--moss); box-shadow:0 0 0 3px rgba(62,123,69,.18)}
.sp-thumb{display:block; width:100%; aspect-ratio:16/10; background:var(--paper);
  border-bottom:1px solid var(--line)}
.sp-body{padding:10px 14px 12px}
.sp-name{font-family:var(--display); font-weight:700; font-size:15px; display:flex; gap:7px; align-items:baseline}
.sp-name .you{font-size:9.5px; color:var(--moss-deep); background:var(--moss-wash); border-radius:8px;
  padding:1px 7px; font-family:var(--ui); font-weight:600; letter-spacing:.03em}
.sp-name input{font:inherit; border:1px solid var(--moss); border-radius:7px; padding:0 6px; outline:0;
  width:100%; background:var(--paper); color:var(--ink)}
.sp-meta{font-size:11px; color:var(--ink-soft); margin-top:3px; display:flex; gap:6px; align-items:center}
.sp-meta .dot{width:6px; height:6px; border-radius:50%; background:var(--moss); display:inline-block}
.sp-x{position:absolute; top:8px; right:8px; background:var(--card); border:1px solid var(--line);
  border-radius:8px; font-size:10px; color:var(--ink-soft); padding:3px 8px; display:none}
.sp-card:hover .sp-x{display:block}
.sp-x:hover{border-color:var(--clay); color:var(--clay)}
.sp-new{border:1.5px dashed var(--line); border-radius:16px; background:transparent; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:200px;
  color:var(--ink-soft); cursor:pointer; font-size:13px; transition:border-color .14s, color .14s}
.sp-new:hover{border-color:var(--moss); color:var(--moss-deep)}
.sp-new .big{font-size:30px; line-height:1}
.sp-new input{border:1.5px solid var(--moss); border-radius:10px; padding:7px 12px; font-size:13px;
  font-family:var(--display); font-weight:600; outline:0; background:var(--card); color:var(--ink);
  width:82%; text-align:center}
.share{display:flex; align-items:center; gap:8px; background:var(--moss); color:#fff; border:0;
  border-radius:13px; padding:10px 18px 10px 14px; font-size:13.5px; font-weight:600;
  font-family:var(--display); letter-spacing:.01em; cursor:pointer;
  box-shadow:0 2px 5px rgba(44,95,53,.28), 0 10px 26px rgba(44,95,53,.22);
  transition:transform .13s, box-shadow .13s, background .13s}
.share svg{width:17px; height:17px; color:#EAF3E9}
.share:hover{background:var(--moss-deep); transform:translateY(-1px);
  box-shadow:0 3px 7px rgba(44,95,53,.3), 0 14px 32px rgba(44,95,53,.26)}
.share:active{transform:translateY(0)}

.zoomctl{position:fixed; right:16px; bottom:18px; display:flex; flex-direction:column; background:var(--card);
  border:1.5px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); z-index:40}
.zoomctl button{border:0; background:transparent; padding:8px 11px; font-size:15px}
.zoomctl button:hover{background:var(--paper)}
.zoomctl .pct{font-family:var(--mono); font-size:10.5px; text-align:center; padding:3px 0 6px; color:var(--ink-soft)}

/* the creation dock — Apps · Draw · Region · Grow, one home for everything that adds */
.dock{position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:var(--card); border:1.5px solid var(--line); border-radius:16px; display:flex; align-items:center;
  padding:6px; gap:4px; box-shadow:var(--shadow); z-index:40}
.dbtn{display:flex; flex-direction:column; align-items:center; gap:2px; background:transparent; border:0;
  border-radius:11px; font-size:10.5px; font-weight:500; color:var(--ink-soft); padding:6px 13px 7px;
  letter-spacing:.02em; transition:background .12s}
.dbtn .di{font-size:16px; line-height:1.1; color:var(--ink)}
.dbtn:hover{background:var(--paper)}
.dbtn.active{background:var(--moss-wash); color:var(--moss-deep)}
.dbtn.active .di{color:var(--moss-deep)}
.dbtn.grow{background:var(--moss); color:#E7F0E6; margin-left:3px}
.dbtn.grow .di{color:#fff}
.dbtn.grow:hover{background:var(--moss-deep)}
.dbtn.grow.active{background:var(--moss-deep); box-shadow:0 0 0 3px rgba(62,123,69,.28); color:#fff}

/* popovers above the dock share one entrance */
@keyframes popUp{from{opacity:0; transform:translate(-50%, 7px)}to{opacity:1; transform:translate(-50%, 0)}}

/* the grow prompt — opens from the Grow button */
.growpop{position:fixed; left:50%; bottom:84px; transform:translateX(-50%); width:min(560px, 86vw);
  background:var(--card); border:2px solid var(--moss); border-radius:16px; display:flex; align-items:center;
  padding:6px 8px 6px 14px; gap:10px; box-shadow:0 8px 30px rgba(44,95,53,.25); z-index:41;
  animation:popUp .16s ease}
.growpop[hidden]{display:none}
.growpop svg{width:20px; height:20px; flex-shrink:0}
.growpop input{flex:1; border:0; outline:0; background:transparent; font-family:var(--mono); font-size:13.5px;
  padding:9px 0; color:var(--ink); min-width:0}
.growpop input::placeholder{color:#9AA093}
.growpop button{background:var(--moss); border:0; color:#fff; border-radius:10px; padding:8px 15px;
  font-size:13px; font-weight:600}
.growpop button:hover{background:var(--moss-deep)}

/* draw palette — floats above the dock */
.drawtools{position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:40;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:7px 10px;
  box-shadow:0 2px 6px rgba(33,38,31,.06), 0 12px 32px rgba(33,38,31,.14);
  display:flex; gap:7px; align-items:center; animation:popUp .16s ease}
.drawtools[hidden]{display:none}
.dt-tools{display:flex; gap:2px}
.drawtools [data-tool]{width:34px; height:34px; border:1px solid transparent; background:transparent;
  border-radius:10px; color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s; padding:0}
.drawtools [data-tool] svg{width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.drawtools [data-tool]:hover{background:var(--paper)}
.drawtools [data-tool].active{border-color:var(--moss); background:var(--moss-wash); color:var(--moss-deep)}
.drawtools .tglyph{font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1}
.dtsep{width:1px; height:22px; background:var(--line)}
.dt-swatches{display:flex; gap:6px; align-items:center; padding:0 2px}
.drawtools .sw{width:18px; height:18px; border-radius:50%; border:0; background:var(--c); padding:0;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); transition:transform .12s; position:relative}
.drawtools .sw:hover{transform:scale(1.18)}
.drawtools .sw.active{transform:scale(1.06)}
.drawtools .sw.active::after{content:""; position:absolute; inset:-4.5px; border-radius:50%;
  border:1.8px solid var(--c)}
.seg{display:flex; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px}
.seg button{width:28px; height:24px; border:0; border-radius:7px; background:transparent; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; padding:0}
.seg button svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6}
.seg button svg .fl{fill:currentColor; stroke:none}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--card); color:var(--moss-deep); box-shadow:0 1px 2px rgba(33,38,31,.12)}
.dthint{font-size:9.5px; color:var(--ink-soft); font-family:var(--mono); margin-left:2px}

/* selection prompt bar */
.selbar{position:fixed; z-index:38; background:var(--ink); border-radius:12px; display:flex; align-items:center;
  gap:8px; padding:6px 6px 6px 12px; box-shadow:var(--shadow); width:min(430px, 80vw)}
.selbar[hidden]{display:none}
.selbar .selcount{color:#A9D3AC; font-size:12px; font-weight:600; white-space:nowrap}
.selbar input{flex:1; border:0; outline:0; background:transparent; color:var(--paper);
  font-family:var(--mono); font-size:12.5px; min-width:0}
.selbar input::placeholder{color:#8a9086}
.selbar button{background:var(--moss); border:0; color:#fff; border-radius:8px; padding:6px 12px;
  font-size:12px; font-weight:600}

/* apps tray — floats above the dock */
.tray{position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:40; background:var(--card);
  border:1.5px solid var(--line); border-radius:14px; padding:10px 10px 14px; box-shadow:var(--shadow); display:none;
  grid-template-columns:repeat(5, 1fr); gap:6px; width:min(520px, 92vw);
  max-height:calc(100vh - 200px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.tray::-webkit-scrollbar{width:7px}
.tray::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
.tray.open{display:grid}
.tray button{border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:10px 8px;
  font-size:12.5px; display:flex; flex-direction:column; gap:4px; align-items:center}
.tray button:hover{border-color:var(--moss); background:var(--moss-wash)}
.tray .ti{font-size:20px}
.tray .tsep{grid-column:1/-1; border-top:1px dashed var(--line); margin:8px 0 2px; position:relative}
.tray .tsep span{position:absolute; top:-8px; left:50%; transform:translateX(-50%); background:var(--card);
  padding:0 8px; font-size:9.5px; color:var(--ink-soft); letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap}
.tray button{position:relative}
.tray .tname{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tray .tx{position:absolute; top:2px; right:4px; font-size:10px; color:var(--ink-soft); display:none;
  padding:2px 3px; border-radius:4px}
.tray button:hover .tx{display:block}
.tray .tx:hover{color:#fff; background:var(--clay)}

/* ---------- history drawer ---------- */
.drawer{position:fixed; top:0; right:0; bottom:0; width:320px; background:var(--card);
  border-left:1.5px solid var(--line); box-shadow:-8px 0 30px rgba(33,38,31,.10);
  transform:translateX(105%); transition:transform .25s ease; z-index:50; display:flex; flex-direction:column}
.drawer.open{transform:none}
.drawer header{padding:16px 18px 10px; border-bottom:1px solid var(--line); position:relative; flex-shrink:0}
.drawer header h3{font-family:var(--display); font-size:17px; font-weight:700; padding-right:24px}
.drawer header .sub{font-size:12px; color:var(--ink-soft); margin-top:2px}
.drawer .close{position:absolute; top:12px; right:12px; border:0; background:transparent; font-size:16px;
  color:var(--ink-soft)}
#braid{padding:6px 18px 0; flex-shrink:0}
.vlist{flex:1; overflow-y:auto; padding:8px 12px; min-height:80px}
.ventry{display:flex; gap:10px; padding:9px 8px; border-radius:10px; align-items:flex-start; cursor:pointer}
.ventry:hover{background:var(--paper)}
.ventry.head-v{background:var(--moss-wash)}
.vdot{width:10px; height:10px; border-radius:50%; margin-top:4px; flex-shrink:0}
.vmsg{font-family:var(--mono); font-size:11.5px; line-height:1.45; flex:1; word-break:break-word}
.vmeta{font-size:10.5px; color:var(--ink-soft); margin-top:3px; font-family:var(--ui)}
.ventry .revert{border:1px solid var(--line); background:var(--card); border-radius:7px; font-size:10.5px;
  padding:3px 8px; color:var(--ink-soft); visibility:hidden; flex-shrink:0}
.ventry:hover .revert{visibility:visible}
.ventry .revert:hover{border-color:var(--moss); color:var(--moss-deep)}
.drawer .hint{padding:10px 18px 14px; font-size:11.5px; color:var(--ink-soft); border-top:1px dashed var(--line);
  flex-shrink:0}
.pins{border-top:1px solid var(--line); padding:10px 18px; flex-shrink:0}
.pins-head{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
  margin-bottom:6px; font-weight:600}
.pins-why{cursor:help; border:1px solid var(--line); border-radius:50%; padding:0 4px; font-size:9px}
.pin-item{display:flex; gap:6px; align-items:baseline; font-size:12px; padding:3px 0}
.pin-item::before{content:"📌"; font-size:10px}
.pin-item .px{margin-left:auto; cursor:pointer; color:var(--ink-soft); font-size:10px}
.pin-add{display:flex; gap:6px; margin-top:6px}
.pin-add input{flex:1; border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:11.5px;
  outline:0; min-width:0}
.pin-add input:focus{border-color:var(--moss)}
.pin-add button{border:1px solid var(--moss); background:var(--moss-wash); color:var(--moss-deep);
  border-radius:8px; font-size:11.5px; padding:0 10px}
.mergeoffer{margin:0 12px 8px; padding:8px 10px; background:var(--moss-wash); border:1px dashed var(--moss);
  border-radius:10px; font-size:11.5px; color:var(--moss-deep)}
.offerbtn{margin:6px 18px 10px; border:1px solid var(--moss); background:var(--moss-wash);
  color:var(--moss-deep); border-radius:9px; font-size:12px; padding:6px 10px; font-weight:600}

/* ---------- collaborator cursors ---------- */
#cursors{position:fixed; inset:0; pointer-events:none; z-index:60}
.cursor{position:absolute; transition:transform .07s linear; will-change:transform}
.cursor svg{width:18px; height:18px; display:block}
.cursor .tag{margin:-2px 0 0 12px; font-size:11px; color:#fff; border-radius:8px 8px 8px 2px;
  padding:2px 8px; font-weight:600; width:max-content}

/* ---------- toasts ---------- */
#toasts{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:70; display:flex;
  flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:var(--ink); color:var(--paper); font-size:12.5px; border-radius:10px; padding:9px 16px;
  box-shadow:var(--shadow); animation:toastIn .25s ease; display:flex; gap:8px; align-items:center;
  max-width:min(560px, 88vw); pointer-events:auto}
.toast-act{background:var(--moss); color:#fff; border:0; border-radius:7px; padding:4px 12px;
  font-size:12px; font-weight:600; cursor:pointer; margin-left:4px; flex-shrink:0}
.toast-act:hover{background:var(--moss-deep)}
@keyframes toastIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1}}
.toast .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0}

/* ---------- intro ---------- */
.intro{position:fixed; left:16px; top:76px; z-index:35; width:280px; background:var(--card);
  border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow);
  font-size:12.5px; line-height:1.55; color:var(--ink-soft)}
.intro b{color:var(--ink); font-family:var(--display)}
.intro .tip{font-size:11.5px}
.intro kbd{font-family:var(--mono); background:var(--paper); border:1px solid var(--line); border-radius:5px;
  padding:0 5px; font-size:11px}
.intro .ok{margin-top:10px; border:1px solid var(--moss); color:var(--moss-deep); background:var(--moss-wash);
  border-radius:8px; padding:5px 12px; font-size:12px}

/* video lightbox (loam.openEmbed) */
#lightbox{position:fixed; inset:0; background:rgba(33,38,31,.78); z-index:85; display:flex;
  align-items:center; justify-content:center; animation:toastIn .2s ease}
.lb-frame{position:relative; width:min(940px, 88vw); aspect-ratio:16/9; background:#000;
  border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lb-frame.web{aspect-ratio:auto; height:min(84vh, 960px); background:var(--card)}
.lb-frame iframe{width:100%; height:100%; border:0}
.lb-x{position:absolute; top:10px; right:10px; background:rgba(0,0,0,.62); color:#fff; border:0;
  border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer}
.lb-x:hover{background:rgba(0,0,0,.85)}
.lb-open{position:absolute; top:10px; right:92px; background:rgba(0,0,0,.62); color:#fff;
  border-radius:8px; padding:6px 12px; font-size:12px; text-decoration:none}
.lb-open:hover{background:rgba(0,0,0,.85)}

/* connection lost veil */
#offline{position:fixed; inset:0; background:rgba(237,236,227,.7); backdrop-filter:blur(2px); z-index:90;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:18px;
  color:var(--ink-soft)}