/* Demo shell. Tokens only inside the plugin window; no shadows, blur, filters or glow. */
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#2f3033;font-family:var(--type-ui);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-skin=paper] body{background:#c9c6be}
#vp{position:fixed;left:0;top:0;right:0;bottom:44px;display:flex;align-items:center;justify-content:center}
#win{position:absolute;left:0;top:0;width:1200px;height:800px;transform-origin:0 0;overflow:hidden;background:var(--chassis);touch-action:none}
#win .inst{position:absolute;inset:0}
#modal{z-index:20}
#modal.overlay-only{background:transparent}
#ov{position:absolute;inset:0;z-index:40;pointer-events:none}
#ov>*{pointer-events:auto}
#ov .catcher{position:absolute;inset:0;background:transparent}
#ov .d3-scrim,#ov .d6-scrim{pointer-events:none}
/* interaction affordances */
#win .knob svg{cursor:ns-resize;touch-action:none}
#win .knob .v{cursor:text}
#win .mode span,#win .tabs span,#win .seg span,#win .btn,#win .dd,#win .cell,#win .chip,#win .pill,#win .lcd small,#win .lcd b,#win .d3-menu-row,#win .stp .sv,#win .tb tr,#win [class*=pick-]{cursor:pointer}
#win .mbar{cursor:ew-resize;touch-action:none}
#win .stp .sv{cursor:ns-resize}
#win .knob.dragging svg{cursor:grabbing}
.ghost{position:absolute;z-index:50;pointer-events:none!important;opacity:.9}
.drop-ok svg .kb{fill:var(--accent-on-display)}
.tour-hl{outline:2px solid var(--accent-on-display);outline-offset:3px}
.flash{opacity:.55}
#ov .d3-menu-row.dis{opacity:.4}
.d3-field input{-webkit-user-select:text;user-select:text}
/* demo bar: flat, outside the plugin window */
#bar{position:fixed;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#1c1d1f;color:#e6e4df;font:13px/1 Outfit,'Barlow',system-ui,sans-serif;white-space:nowrap;overflow-x:auto}
html[data-skin=paper] #bar{background:#141518;color:#e9e6df}
#bar button{font:inherit;color:inherit;background:#34353a;border:0;border-radius:5px;height:28px;padding:0 10px;cursor:pointer}
#bar button.on{background:#e6e4df;color:#16171a}
#bar .db-seg{display:inline-flex;gap:2px;background:#34353a;border-radius:6px;padding:2px}
#bar .db-seg button{height:24px;background:transparent}
#bar .db-seg button.on{background:#e6e4df;color:#16171a}
#bar .db-title{font-family:'Barlow Condensed';font-weight:800;font-size:19px;margin-right:4px}
#bar .db-link{color:#9a9ba1;text-decoration:none;margin-right:4px}
#bar .db-hint{color:#8e8f95;margin-left:auto}
#db-cap{display:inline-flex;align-items:center;gap:8px;margin-left:8px;flex:1;min-width:0}
#db-cap[hidden]{display:none}
#db-step{font-family:'IBM Plex Mono';font-size:11px;color:#9dceb0}
html[data-skin=paper] #db-step{color:#ff7a5c}
#db-text{flex:1;overflow:hidden;text-overflow:ellipsis}
#bar.touring .db-hint{display:none}
@media (max-height:500px){#vp{bottom:36px}#bar{height:36px;font-size:12px;gap:6px}#bar button{height:24px;padding:0 8px}#bar .db-hint,#bar .db-link{display:none}}