#connection-panel,#precision-panel{padding:18px 16px;border-top:1px solid #383838}
#connection-panel h3,#precision-panel h3{font-size:11px;font-weight:400;margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em}
#connection-panel h3 small{float:right;text-transform:none;color:#888;font-size:9px;letter-spacing:0}
.control-note{font-size:9px;color:#999;line-height:1.75;margin:8px 0 12px;white-space:normal}
.wide-control{width:100%;margin-top:7px;font-size:10px;padding:9px 5px}
.connection-card{border:1px solid #393939;margin-top:12px}
.connection-card>summary{cursor:pointer;display:flex;align-items:center;gap:7px;padding:12px 9px;font-size:10px;list-style:none}
.connection-card>summary::after{content:'＋';margin-left:auto;color:#999}
.connection-card[open]>summary::after{content:'−'}
.connection-card>summary small{color:#888;font-size:8px;margin-left:auto}
.connection-card>summary span:nth-child(2){white-space:normal;line-height:1.5}
.connection-body{padding:0 10px 10px;border-top:1px solid #292929}
.connection-body select{font-size:9px;text-overflow:ellipsis}
.rule-light{width:5px;height:5px;flex:none;background:#ffe500;border-radius:50%}
.rule-light.paused{background:transparent;border:1px solid #888}
.rule-actions{border-top:1px solid #333;margin-top:12px;padding-top:9px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.rule-actions button{font-size:9px;padding:7px 5px}
.rule-actions .checks,.connection-body .checks{font-size:9px;line-height:1.6;gap:6px}
.reference-link{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;font-size:9px;margin-top:6px;padding:8px 5px;color:#bbb;border-color:#333}
.followers-heading{font-size:10px;font-weight:400;margin:16px 0 6px;color:#ccc}
.formula-note{font-size:8px;line-height:1.6;color:#c1b944;overflow-wrap:anywhere;display:block;margin-top:4px}
.selection-metrics{font-size:8px;color:#888;line-height:1.6;margin:0 0 12px}
.precision-section{border-top:1px solid #333;margin-top:13px;padding-top:12px}
.precision-section>summary{font-size:10px;color:#ccc;cursor:pointer;margin-bottom:6px}
.precision-section .field{font-size:9px}
.precision-inline{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:end}
.precision-inline .field{margin-bottom:0}
.precision-inline button{height:34px;padding:8px 3px;font-size:9px}
.copy-illustration{width:100%;height:58px;color:#aaa;border:1px solid #333;margin-top:9px;background:#151515}
.copy-illustration.keep .copy-reference{opacity:.2}.copy-illustration.detach .copy-reference,.copy-illustration.detach .copy-tether,.copy-illustration.references .copy-tether{display:none}
.copy-illustration.keep .copy-follower{transform-origin:88px 28px}
.precision-section:hover .copy-illustration.keep .copy-follower{animation:connected-copy 2.8s ease-in-out infinite}
.precision-section:hover .copy-illustration.references .copy-reference,.precision-section:hover .copy-illustration.references .copy-follower{animation:independent-copy 2.8s ease-in-out infinite}
.precision-section:hover .copy-illustration.detach .copy-follower{animation:independent-copy 2.8s ease-in-out infinite}
@keyframes connected-copy{0%,100%{transform:rotate(0)}50%{transform:rotate(-55deg)}}
@keyframes independent-copy{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#selection-toolbar{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center}
@media(prefers-reduced-motion:reduce){.copy-illustration *{animation:none!important}}

.property-navigation{display:flex;gap:5px;padding:10px 15px;border-bottom:1px solid #333;background:#151515;position:sticky;top:44px;z-index:2}.property-navigation button{flex:1;font-size:9px;padding:7px 3px}.property-navigation button:hover{color:#ffe500}

#selection-toolbar{width:max-content}.connection-card,.precision-section,#inspector,#connection-panel,#precision-panel{scroll-margin-top:120px}.rule-formula{margin:6px 0 12px;font-size:9px}.rule-formula summary{cursor:pointer;color:#aaa}.rule-formula button{width:100%;font-size:9px;padding:7px 4px}
/* Every active tool has a visible, actionable explanation. */
.tools .tool-group{display:flex;align-items:center;position:relative;gap:2px;padding:10px 5px 0}
.tools .tool-group+.tool-group{border-left:1px solid #333;margin-left:5px;padding-left:10px}
.tool-group-label{position:absolute;top:0;left:9px;color:#888;font-size:7px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.tools .tool-group button{margin-left:0;min-height:48px;padding:3px 5px}
.tools .tool-group button .tool-demo{height:24px}
#tool-coach{height:50px;padding:5px 16px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #363636;background:#171717}
.coach-picture{width:43px;height:35px;flex:none;color:#ddd}
.coach-copy{min-width:0;flex:1}
.coach-copy b{font-size:10px;font-weight:400;color:#ffe500;display:block;line-height:1.5}
.coach-copy small{font-size:8px;color:#aaa;margin-left:12px}
.coach-copy p{font-size:9px;color:#bdbdbd;line-height:1.6;margin:2px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.coach-actions{display:flex;gap:6px;flex:none}
.coach-actions button{font-size:9px;padding:7px 8px;background:transparent}
#coach-explain{border-color:#6b642a;color:#ddd}
.studio{height:calc(100dvh - 186px)}
#active-tool-dialog{max-width:440px;padding:30px}
#active-tool-close{position:absolute;right:14px;top:12px;padding:4px 7px;border:0;font-size:20px}
.tool-explanation-eyebrow{font-size:9px;color:#a5a5a5;letter-spacing:.05em}
.active-tool-picture{height:155px;width:245px;margin:18px auto 25px}
#active-tool-dialog h2{font-size:20px;line-height:1.5}
#active-tool-dialog .explanation-next{border-top:1px solid #444;padding-top:14px;color:#ffe500}
#active-tool-done{width:100%;margin-top:15px;font-size:11px}
.demo-transform-scale,.demo-transform-rotate{transform-origin:60px 38px}
.is-playing .demo-transform-scale{animation-name:precision-scale}
.is-playing .demo-transform-rotate{animation-name:precision-turn}
@keyframes precision-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes precision-turn{0%,100%{transform:rotate(0deg)}50%{transform:rotate(40deg)}}
.transform-pivot-preview{display:flex;align-items:center;border:1px solid #383838;margin:10px 0 14px;color:#bbb;padding:4px 8px;background:#121212}
.transform-pivot-preview svg{width:115px;height:53px;flex:none}
.transform-pivot-preview span{font-size:8px;line-height:1.6}
.fit-fields{gap:7px;margin-top:12px}.fit-fields .field{margin-bottom:0}.fit-fields button{font-size:9px;padding:7px 5px}
[data-transform]{cursor:crosshair}
[data-transform^=scale]{cursor:nwse-resize}
[data-transform=scale-ne],[data-transform=scale-sw]{cursor:nesw-resize}
[data-transform=pivot]{cursor:move}
@media(min-width:1800px){.studio{height:calc(100dvh - 192px)}}
@media(max-width:1180px){.tools .tool-group button{min-width:40px;padding:3px}.tools .tool-group{padding-left:3px;padding-right:3px}.tools .tool-group+.tool-group{padding-left:6px;margin-left:3px}.coach-copy p{font-size:8px}.coach-actions button{padding:7px 5px;font-size:8px}}
@media(max-width:960px){#tool-coach{gap:8px;padding:5px 10px}.coach-actions #coach-construction{display:none}.coach-picture{width:35px}.coach-copy small{display:none}}
@media(max-width:720px){.studio{height:auto}#tool-coach{height:68px;padding:8px}.coach-copy p{white-space:normal;line-height:1.5;font-size:8px}.coach-actions{flex-direction:column;gap:3px}.coach-actions button{padding:4px;font-size:8px}.coach-actions #coach-connections{display:none}.coach-actions #coach-precision{display:none}.tool-group-label{top:0}.tools .tool-group{padding-top:10px}.blank-button{top:238px}}
@media(prefers-reduced-motion:reduce){.demo-transform-scale,.demo-transform-rotate{animation:none!important}}