:host{display: block; box-sizing: border-box; width: 100%; font: 400 12px/1.5 var(--font-body),Inter,sans-serif; color: var(--color-text-secondary); container-type: inline-size; --safe: 24px; --height: 420px; --swap: 450ms; --structure: 650ms; --large: 900ms; --ease: cubic-bezier(.16,1,.3,1);}
:host([data-preset="split"]){max-width: 520px; place-self: center; margin-inline: auto;}
*{box-sizing: border-box;}
h3, p{margin: 0px;}
button{font: inherit; color: inherit; cursor: pointer; background: none; border: 0px;}
button:focus-visible{outline: 2px solid var(--color-primary-hover); outline-offset: 2px;}
button:hover{color: var(--color-text-primary);}
strong, h3{color: var(--color-text-primary); font-weight: 550;}
h3{font-size: 18px; line-height: 1.3; letter-spacing: -0.02em;}
small{font-size: 11px; color: var(--color-text-muted);}
.frame{height: var(--height); width: 100%; border: 1px solid var(--technical-frame-border); border-radius: 6px; box-shadow: none; background: var(--technical-material); overflow: hidden; display: grid; grid-template-rows: 46px minmax(0px, 1fr) 46px; position: relative;}
.frame.pure{grid-template-rows: minmax(0px, 1fr);}
.canvas{padding: var(--safe); min-width: 0px; min-height: 0px; display: flex; flex-direction: column; justify-content: center; gap: 16px;}
.pure .canvas{padding-bottom: 54px;}
.nodes{display: grid; grid-template-columns: repeat(var(--cols,3),minmax(0,1fr)); gap: 10px;}
.node{border: 1px solid var(--technical-frame-border); border-radius: 4px; padding: 12px; text-align: left; background: var(--technical-bg-panel); display: flex; flex-direction: column; gap: 6px; min-width: 0px; transition: border-color var(--swap) var(--ease),background var(--swap) var(--ease); position: relative;}
.node strong{font-size: 12px; line-height: 1.35; overflow-wrap: anywhere;}
.node[data-active="true"]{background: var(--color-primary-tint); border-color: var(--color-primary);}
.node[data-active="true"] small{color: var(--color-text-accent);}
.node .index{font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;}
.focus{border-top: 1px solid var(--technical-frame-border); padding-top: 12px; min-height: 72px; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;}
.focus .number{color: var(--color-text-accent); font-size: 12px;}
.focus h3{font-size: 16px;}
.focus p{font-size: 12px; margin-top: 5px;}
.focus .number{padding-top: 1px;}
.axes-scene{display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: center;}
.axes-scene svg{height: 200px; width: 100%;}
.axes-scene svg path, .axes-scene svg circle{fill: var(--color-primary-tint); stroke: var(--technical-frame-border); stroke-width: 1; vector-effect: non-scaling-stroke;}
.axes-scene svg path.active, .axes-scene svg circle{stroke: var(--color-primary);}
.axes-scene .nodes{--cols: 1; gap: 8px;}
.axes-scene .node{padding: 8px;}
.frame[data-running="false"], .frame[data-running="false"] *, .frame[data-running="false"]::before, .frame[data-running="false"]::after, .frame[data-running="false"] ::before, .frame[data-running="false"] ::after{animation-play-state: paused !important; transition: none !important;}
.frame[data-reduced="true"], .frame[data-reduced="true"] *, .frame[data-reduced="true"]::before, .frame[data-reduced="true"]::after, .frame[data-reduced="true"] ::before, .frame[data-reduced="true"] ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
@keyframes swap-a { 
  0% { opacity: 0.72; translate: 0px 3px; }
  100% { opacity: 1; translate: 0px; }
}
@keyframes swap-b { 
  0% { opacity: 0.72; translate: 0px 3px; }
  100% { opacity: 1; translate: 0px; }
}
@media (max-width: 900px) {:host{--safe: 20px; --height: 480px;}
.nodes{--cols: 2;}
.frame .canvas{gap: 12px;}
.focus{min-height: 96px;}
.node{padding: 9px;}
.node strong{font-size: 12px;}
.axes-scene{grid-template-columns: 1fr 1fr; gap: 8px;}
.axes-scene svg{height: 180px;}
.pure .canvas{padding-bottom: 54px;}}
@container (max-width: 530px) {.nodes{grid-template-columns: repeat(2, minmax(0px, 1fr));}
 .axes-scene .nodes{grid-template-columns: 1fr;}}
.node{display: grid; grid-template-columns: 18px minmax(0px, 1fr); align-items: center; gap: 8px; padding: 8px 10px;}
.node .index{align-self: center;}
.node strong{grid-column: 2;}
:host{--safe: 24px; --height: var(--desktop-height); --swap: 450ms; --structure: 650ms; --ease: cubic-bezier(.16,1,.3,1);}
.frame{height: var(--height); isolation: isolate;}
.canvas{justify-content: center; gap: 16px;}
.pure .canvas{padding-bottom: 48px;}
@media (max-width: 900px) {:host{--height: var(--mobile-height); --safe: 20px;}}
.frame[data-running="false"], .frame[data-running="false"] *, .frame[data-running="false"]::before, .frame[data-running="false"]::after, .frame[data-running="false"] ::before, .frame[data-running="false"] ::after{animation-play-state: paused !important; transition: none !important;}
.source-controls{display: flex; gap: 8px; align-items: center; position: absolute; right: 18px; bottom: 8px; z-index: 3; height: 26px;}
.source-controls button{font: 400 12px/1.4 var(--font-body),Inter,sans-serif; border: 0px; background: transparent; color: var(--color-text-muted); padding: 3px 5px;}
.source-controls button:focus-visible{outline: 2px solid var(--color-primary-hover);}
:host{--desktop-height:360px;--mobile-height:360px}

.frame[data-running=true] .focus h3{animation:var(--swap-name) var(--swap) var(--ease) both}

.source-controls button[data-pause]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.source-controls button[data-pause] svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
.source-controls{height:44px;bottom:0}