/* Kinematic · home · viewport and canvas demo (#scene).
   One scene, two views: a sketch drawn in the browser on the left, the node graph it builds on the right.
   Everything is scoped under .vpd so nothing leaks into the rest of the page. */
.vpd{--vpd-c:var(--create);--vpd-panel:#0B0F13;--vpd-node:#151B24;--vpd-node-2:#1B222D;position:relative}
.vpd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* tabs: one per way of working */
.vpd-tabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.vpd-tabs::-webkit-scrollbar{display:none}
.vpd-tabs [role=tab]{position:relative;flex:none;display:flex;align-items:center;gap:9px;height:46px;padding:0 16px 0 14px;color:var(--mute);font-size:15px;white-space:nowrap;border-radius:4px 4px 0 0;transition:color .2s,background .2s}
.vpd-tabs [role=tab] i{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.5;transition:opacity .2s,box-shadow .2s;flex:none}
.vpd-tabs [role=tab]:hover{color:var(--fg)}
.vpd-tabs [role=tab]:hover i{opacity:.9}
.vpd-tabs [role=tab][aria-selected="true"]{color:var(--fg);background:var(--ink-2)}
.vpd-tabs [role=tab][aria-selected="true"] i{opacity:1;box-shadow:0 0 12px var(--c)}
.vpd-tabs [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--c)}
.vpd-tabs [role=tab]:focus-visible{outline:2px solid var(--c);outline-offset:-2px}

/* two panels */
.vpd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:14px}
.vpd-vp,.vpd-cv{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--vpd-panel)}
.vpd-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--line);color:var(--mute);white-space:nowrap;min-width:0}
.vpd-bar b{color:var(--fg);font-weight:500}
.vpd-bar .vpd-port{color:var(--fg);opacity:.8;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vpd-live{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}
.vpd-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.vpd.paused .vpd-live i{background:var(--dim);box-shadow:none}

.vpd-tools{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);min-height:55px;align-content:flex-start}
.vpd-tools button{height:32px;padding:0 11px;border-radius:3px;border:1px solid var(--line-2);font-size:13.5px;display:flex;align-items:center;gap:7px;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.vpd-tools button i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--c);flex:none;transition:background .2s,box-shadow .2s}
.vpd-tools button:hover{border-color:var(--fg)}
.vpd-tools button[aria-pressed="true"]{background:var(--ink-4);border-color:var(--c)}
.vpd-tools button[aria-pressed="true"] i{background:var(--c);box-shadow:0 0 9px var(--c)}
.vpd-tools button:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.vpd-tools .vpd-reset{margin-left:auto;color:var(--mute)}
.vpd-tools .vpd-reset:focus-visible{outline-color:var(--fg)}

.vpd-stage{position:relative;flex:1;min-height:430px;background:#07090C}
.vpd-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vpd-foot{display:flex;gap:14px;align-items:center;padding:9px 12px;border-top:1px solid var(--line);color:var(--dim);white-space:nowrap;min-width:0}
.vpd-foot [data-stat]{color:var(--mute)}
.vpd-foot .vpd-cap{margin-left:auto;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* the node canvas */
.vpd-cv .vpd-bar .vpd-count{color:var(--fg);opacity:.8}
.vpd-scroll:focus-visible{outline:2px solid var(--vpd-c);outline-offset:-2px}
.vpd-flash{color:var(--vpd-c);opacity:0;transition:opacity .4s;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vpd-flash.on{opacity:1}
.vpd-zoom{margin-left:auto;flex:none;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:2px 7px}
.vpd-scroll{position:relative;flex:1;min-height:440px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:rgba(243,241,236,.22) transparent;
  background-color:#0A0E13;background-image:radial-gradient(rgba(243,241,236,.075) 1px,transparent 1.2px);background-size:22px 22px;background-attachment:local}
.vpd-sizer{position:relative}
.vpd-world{position:absolute;left:0;top:0;transform-origin:0 0}
.vpd-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.vpd-wires path{fill:none}
.vpd-wires .w{stroke-width:1.7;stroke-linecap:round;opacity:.82}
.vpd-wires .w.t{stroke-width:1.1;opacity:.5}
.vpd-wires .w.new{stroke-dasharray:1 1;stroke-dashoffset:1;animation:vpdDraw .7s .18s cubic-bezier(.3,.7,.3,1) forwards}
.vpd-wires .f{stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1.5 15;opacity:.5;animation:vpdFlow 1.05s linear infinite}
.vpd-wires .f.t{stroke-width:1.6;opacity:.28;animation-duration:1.6s}
.vpd-wires .dv{stroke-width:1.3;stroke-dasharray:5 4;opacity:.75}
.vpd-wires .dvl{font:500 9.5px var(--mono);paint-order:stroke;stroke:#0A0E13;stroke-width:4px;stroke-linejoin:round}
.vpd.paused .vpd-wires .f{animation-play-state:paused}
@keyframes vpdDraw{to{stroke-dashoffset:0}}
@keyframes vpdFlow{to{stroke-dashoffset:-16.5}}

.vpd-n{position:absolute;left:0;top:0;will-change:transform}
.vpd-nb{position:relative;border:1px solid rgba(243,241,236,.15);border-radius:5px;background:var(--vpd-node);box-shadow:0 8px 22px rgba(0,0,0,.42)}
.vpd-nh{display:flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--c) 30%,var(--vpd-node));border-bottom:1px solid rgba(0,0,0,.35);font-family:var(--mono);font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;letter-spacing:0}
.vpd-nh i{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 6px var(--c)}
.vpd-nt{height:16px;padding:1px 8px 0;font-size:11px;line-height:15px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpd-np{padding:3px 0 5px}
.vpd-r{position:relative;display:flex;align-items:center;height:13px;padding:0 9px;font-size:10px;line-height:1;color:#C5CBD3;white-space:nowrap}
.vpd-r .o{margin-left:auto;text-align:right}
.vpd-r b{position:absolute;top:2.5px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--pc);background:var(--vpd-node)}
.vpd-r b.l{left:-4.5px}.vpd-r b.r{right:-4.5px}
.vpd-r b.on{background:var(--pc);box-shadow:0 0 6px var(--pc)}
.vpd-th{display:block;margin:0 8px 8px;border-radius:3px;background:#000;border:1px solid rgba(243,241,236,.1)}
.vpd-n.new .vpd-nb{animation:vpdIn .55s cubic-bezier(.2,.9,.3,1.2) both,vpdGlow 1.6s ease-out both}
.vpd-n.gone{pointer-events:none}
.vpd-n.gone .vpd-nb{animation:vpdOut .32s ease-in forwards}
@keyframes vpdIn{from{transform:translateY(-16px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes vpdGlow{0%,20%{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent),0 0 28px color-mix(in srgb,var(--c) 60%,transparent)}100%{border-color:rgba(243,241,236,.15);box-shadow:0 8px 22px rgba(0,0,0,.42)}}
@keyframes vpdOut{to{transform:scale(.92);opacity:0}}

.vpd-legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 12px;border-top:1px solid var(--line);color:var(--dim)}
.vpd-legend span{display:inline-flex;align-items:center;gap:6px}
.vpd-legend i{width:14px;height:2px;border-radius:2px;background:var(--pc)}
.vpd-legend i.dash{background:none;border-top:1.5px dashed var(--pc);height:0}

@media (max-width:1080px){
  .vpd-grid{grid-template-columns:1fr}
  .vpd-stage{flex:none;min-height:0;height:min(62vw,440px)}
  .vpd-scroll{flex:none;min-height:0;height:min(78vw,540px)}
}
@media (max-width:760px){
  .vpd-tabs [role=tab]{height:42px;padding:0 12px 0 11px;font-size:14px;gap:8px}
  .vpd-tools{padding:9px 10px;gap:5px}
  .vpd-tools button{height:31px;padding:0 9px;font-size:13px;gap:6px}
  .vpd-stage{height:min(80vw,340px)}
  .vpd-scroll{height:min(118vw,460px)}
  .vpd-foot .vpd-cap{display:none}
  .vpd-legend{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vpd-n.new .vpd-nb,.vpd-n.gone .vpd-nb,.vpd-wires .w.new{animation:none!important;stroke-dasharray:none;opacity:1}
}