/* shared chrome for the live docs demos — tokens match the docs site */
:root{
  --bg0:#06090F; --bg1:#0A101B; --bg2:#0F1826;
  --line:#182639; --line2:#233650;
  --ink:#E9F1FB; --ink2:#A3B5CC; --ink3:#64799A;
  --blue:#4DA3FF; --amber:#FFB84D; --violet:#C08BFF; --mint:#4DE3AE; --rose:#FF7B92;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg0);color:var(--ink);font:400 14px/1.5 var(--body);overflow:hidden}
#root,.stage{position:absolute;inset:0}

/* boot / error banner */
.boot{
  position:absolute;inset:auto 0 0 0;top:0;display:grid;place-items:center;z-index:50;
  font:500 12px/1.6 var(--mono);color:var(--ink3);background:var(--bg0);
  text-align:center;padding:20px;
}
.boot.err{color:var(--rose)}
.boot .spin{
  display:block;width:22px;height:22px;margin:0 auto 14px;border-radius:50%;
  border:2px solid var(--line2);border-top-color:var(--blue);animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.boot .spin{animation:none}}

/* toolbar */
.bar{
  position:absolute;left:12px;top:12px;z-index:40;display:flex;gap:4px;align-items:center;
  background:rgba(10,16,27,.92);border:1px solid var(--line2);border-radius:10px;padding:5px;
}
.bar button{
  font:700 11px/1 var(--mono);color:var(--ink2);background:none;border:0;border-radius:7px;
  padding:8px 10px;cursor:pointer;display:flex;gap:6px;align-items:center;
}
.bar button:hover{color:var(--ink)}
.bar button.on{background:rgba(77,163,255,.16);color:var(--blue)}
.bar button:disabled{opacity:.35;cursor:default}
.bar button i{
  font-style:normal;font-size:9px;color:var(--ink3);border:1px solid var(--line2);
  border-radius:4px;padding:2px 4px;
}
.bar .sep{width:1px;height:18px;background:var(--line2);margin:0 4px}

/* hint + badges */
.hint{
  position:absolute;right:12px;bottom:12px;z-index:40;font:500 10px/1.4 var(--mono);
  letter-spacing:.04em;color:var(--ink3);background:rgba(10,16,27,.85);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;max-width:46ch;
}
.hint b{color:var(--ink2)}
.peer{
  position:absolute;right:12px;top:12px;z-index:40;display:flex;gap:7px;align-items:center;
  font:700 11px/1 var(--mono);color:var(--ink);
  background:rgba(10,16,27,.92);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;
}
.peer .dot{width:9px;height:9px;border-radius:50%}
.standalone{
  position:absolute;left:12px;bottom:12px;z-index:40;display:none;
  font:500 10px/1 var(--mono);color:var(--ink3);text-decoration:none;
  background:rgba(10,16,27,.85);border:1px solid var(--line);border-radius:8px;padding:7px 10px;
}
.standalone:hover{color:var(--ink)}
body.framed .standalone{display:block}

/* ------------------------------------------------ widget content */
.sticky{
  width:100%;height:100%;border-radius:6px;padding:12px 13px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
}
.sticky.lemon{background:linear-gradient(178deg,#F6E9A6,#EBD886);color:#4A3F14}
.sticky.mint{background:linear-gradient(178deg,#BDEBD3,#9ADDBB);color:#123B27}
.sticky.rose{background:linear-gradient(178deg,#F5C3CF,#EBA4B6);color:#4A1420}
.sticky textarea{
  width:100%;height:100%;background:none;border:0;outline:none;resize:none;
  font:500 13px/1.45 var(--body);color:inherit;
}
.cardw{
  width:100%;height:100%;border-radius:9px;padding:11px 13px;
  background:linear-gradient(180deg,#121E30,#0C1523);border:1px solid #2A4059;
  color:var(--ink2);display:flex;flex-direction:column;gap:4px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.cardw .t{font:700 11px/1.2 var(--mono);color:var(--ink)}
.cardw .s{font-size:11px;color:var(--ink3)}
.cardw.hold .t::after{content:" · hold me";color:var(--amber);font-weight:400}
.cardw.solid{border-color:rgba(255,123,146,.5)}
.cardw.solid .t{color:var(--rose)}
.frame{
  width:100%;height:100%;border-radius:12px;
  background:rgba(77,163,255,.05);border:1.5px dashed rgba(77,163,255,.4);
  position:relative;
}
.frame .t{
  position:absolute;left:10px;top:-9px;font:700 10px/1 var(--mono);letter-spacing:.06em;
  color:var(--blue);background:var(--bg0);padding:2px 7px;border-radius:5px;
}
.node{
  width:100%;height:100%;border-radius:9px;padding:11px 13px;
  background:linear-gradient(180deg,#121E30,#0C1523);border:1px solid #2A4059;
  display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.node .t{font:700 11px/1.2 var(--mono);color:var(--ink)}
.node .r{display:flex;justify-content:space-between;font:400 10px/1.4 var(--mono);color:var(--ink3)}
.node .r b{color:var(--mint);font-weight:500}