/* Motion is an explanation of geometry, always initiated by the user. */
:root{--guide-ink:#eeeeee;--guide-signal:#ffe500;--guide-muted:#777;--guide-line:#383838}
.toolbar{height:72px;gap:10px}
.studio{height:calc(100dvh - 136px);grid-template-columns:214px minmax(0,1fr) 312px}
.tools{gap:3px;flex-shrink:0}
.tools button{flex-direction:column;gap:2px;min-width:51px;padding:5px 6px;min-height:56px}
.tools button .tool-name{font-size:10px;line-height:16px}
.tools button:nth-child(3),.tools button:nth-child(8),.tools button:nth-child(11){margin-left:9px}
.tools button .tool-demo{width:39px;height:27px}
.tools button[aria-pressed=true]{background:#252319;border-color:#756d24}
.view-options button{display:flex;align-items:center;gap:4px;font-size:9px;padding:7px 6px}
.view-options .tool-demo{width:24px;height:20px}
.tool-demo{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--guide-ink);flex-shrink:0}
.demo-reference{stroke:var(--guide-ink)}
.demo-follower{stroke:var(--guide-signal)}
.demo-muted{stroke:var(--guide-muted);opacity:.7}
.demo-guide{stroke:var(--guide-muted);stroke-dasharray:3 4;stroke-width:1}
.demo-centre{stroke:var(--guide-muted);stroke-width:1}
.demo-contact{fill:var(--guide-signal);stroke:none}
.demo-fill{fill:var(--guide-signal);stroke:none}
.demo-type{font:32px 'IBM Plex Mono',monospace;fill:var(--guide-signal);stroke:none}
.demo-small{font:10px 'IBM Plex Mono',monospace;fill:var(--guide-ink);stroke:none}
.demo-match-radius{transform:translate(86px,38px)}
.demo-size-source{transform:translate(33px,38px)}
.demo-size-follower{transform:translate(89px,38px)}
.demo-orbit,.demo-slot{transform-origin:60px 38px}
.demo-smooth{transform-origin:60px 38px}
.is-playing .demo-motion,:focus-visible>.tool-demo .demo-motion{animation-duration:3.6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.is-playing .demo-share-centre,:focus-visible>.tool-demo .demo-share-centre{animation-name:guide-centre}
.is-playing .demo-match-radius,:focus-visible>.tool-demo .demo-match-radius{animation-name:guide-radius}
.is-playing .demo-touch,:focus-visible>.tool-demo .demo-touch{animation-name:guide-touch}
.is-playing .demo-align-y,:focus-visible>.tool-demo .demo-align-y{animation-name:guide-y}
.is-playing .demo-align-x,:focus-visible>.tool-demo .demo-align-x{animation-name:guide-x}
.is-playing .demo-orbit,:focus-visible>.tool-demo .demo-orbit{animation-name:guide-orbit}
.is-playing .demo-travel,:focus-visible>.tool-demo .demo-travel{animation-name:guide-travel}
.is-playing .demo-smooth,:focus-visible>.tool-demo .demo-smooth{animation-name:guide-smooth}
.is-playing .demo-reveal,:focus-visible>.tool-demo .demo-reveal{animation-name:guide-reveal;stroke-dasharray:240;stroke-dashoffset:0}
.is-playing .demo-result,:focus-visible>.tool-demo .demo-result{animation-name:guide-result}
.is-playing .demo-attach,:focus-visible>.tool-demo .demo-attach{animation-name:guide-attach}
.is-playing .demo-size-source,:focus-visible>.tool-demo .demo-size-source{animation-name:guide-size-source}
.is-playing .demo-size-follower,:focus-visible>.tool-demo .demo-size-follower{animation-name:guide-size-follower}
.is-playing .demo-mirror-source,:focus-visible>.tool-demo .demo-mirror-source{animation-name:guide-mirror-source}
.is-playing .demo-mirror-copy,:focus-visible>.tool-demo .demo-mirror-copy{animation-name:guide-mirror-copy}
.is-playing .demo-copy-reveal,:focus-visible>.tool-demo .demo-copy-reveal{animation-name:guide-result}
.is-playing .demo-slot,:focus-visible>.tool-demo .demo-slot{animation-name:guide-slots}
.demo-slot-0{--slot:0deg}.demo-slot-1{--slot:-17deg}.demo-slot-2{--slot:-24deg}.demo-slot-3{--slot:35deg}.demo-slot-4{--slot:20deg}.demo-slot-5{--slot:33deg}
.is-playing .demo-flow-node,:focus-visible>.tool-demo .demo-flow-node{animation-name:guide-y}
.is-playing .demo-flow-last,:focus-visible>.tool-demo .demo-flow-last{animation-name:guide-flow}
.is-playing .demo-gap-y,:focus-visible>.tool-demo .demo-gap-y{animation-name:guide-gap-y}
.is-playing .demo-handles,:focus-visible>.tool-demo .demo-handles{animation-name:guide-handles}
@keyframes guide-centre{0%,15%{transform:translate(-27px,-11px)}45%,85%{transform:translate(0,0)}100%{transform:translate(-27px,-11px)}}
@keyframes guide-radius{0%,15%,100%{transform:translate(86px,38px) scale(.5)}45%,85%{transform:translate(86px,38px) scale(1)}}
@keyframes guide-touch{0%,15%,100%{transform:translate(20px,0)}45%,85%{transform:translate(0,0)}}
@keyframes guide-y{0%,15%,100%{transform:translate(0,-20px)}45%,85%{transform:translate(0,0)}}
@keyframes guide-x{0%,15%,100%{transform:translate(27px,0)}45%,85%{transform:translate(0,0)}}
@keyframes guide-orbit{0%,15%{transform:rotate(-65deg)}70%,100%{transform:rotate(295deg)}}
@keyframes guide-travel{0%,100%{transform:translate(-7px,7px)}50%{transform:translate(7px,-7px)}}
@keyframes guide-smooth{0%,15%,100%{transform:rotate(-40deg)}45%,85%{transform:rotate(0deg)}}
@keyframes guide-reveal{0%,15%,100%{stroke-dashoffset:240;opacity:.25}55%,85%{stroke-dashoffset:0;opacity:1}}
@keyframes guide-result{0%,15%,100%{opacity:0}45%,85%{opacity:1}}
@keyframes guide-attach{0%,15%,100%{transform:translate(-18px,-13px)}45%,85%{transform:translate(0,0)}}
@keyframes guide-size-source{0%,15%,100%{transform:translate(33px,38px) scale(.7)}55%,85%{transform:translate(33px,38px) scale(1.2)}}
@keyframes guide-size-follower{0%,15%,100%{transform:translate(89px,38px) scale(.7)}55%,85%{transform:translate(89px,38px) scale(1.2)}}
@keyframes guide-mirror-source{0%,100%{transform:translate(6px,5px)}50%{transform:translate(-6px,-5px)}}
@keyframes guide-mirror-copy{0%,100%{transform:translate(-6px,5px)}50%{transform:translate(6px,-5px)}}
@keyframes guide-slots{0%,15%,100%{transform:rotate(var(--slot))}45%,85%{transform:rotate(0deg)}}
@keyframes guide-flow{0%,15%,100%{transform:translate(-17px,17px)}45%,85%{transform:translate(0,0)}}
@keyframes guide-gap-y{0%,15%,100%{transform:translate(0,9px)}45%,85%{transform:translate(0,0)}}
@keyframes guide-handles{0%,15%,100%{opacity:1}45%,85%{opacity:0}}
.inspector-header{padding:13px 16px}
.guide-tabs{display:flex;border-bottom:1px solid var(--guide-line);gap:0}
.guide-tabs button{border:0;flex:1;min-width:0;padding:12px 4px;font-size:10px;color:#a8a8a8}
.guide-tabs button[aria-selected=true]{color:var(--guide-signal);background:#222117;box-shadow:inset 0 -2px var(--guide-signal)}
.inspector-tabs{position:sticky;top:0;z-index:4;background:#151515}
.construction{border-top:0;padding:0 14px 18px}
#tool-categories{margin:0 -14px}
#tool-categories button{font-size:10px;padding:11px 3px}
#tool-guide{border-bottom:1px solid var(--guide-line);padding:12px 0;display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px}
.guide-heading{display:flex;align-items:center;justify-content:space-between;color:#aaa;font-size:9px;grid-column:1/-1;margin-bottom:5px}
.guide-heading button{padding:4px 8px;font-size:9px}
.guide-picture{position:relative;height:68px;margin:0;display:flex;justify-content:center;align-items:center}
.guide-picture .tool-demo{width:98px;height:65px}
.guide-title{align-self:center;min-width:0}
.guide-title small{display:block;font-size:8px;color:#888;margin-top:5px}
.preview-caption{position:absolute;bottom:0;right:0;color:#777;font-size:8px}
.construction #tool-guide h3{font-size:13px;line-height:1.45;color:#eee;margin:0 0 2px;font-weight:400}
.guide-term{font-size:9px;color:var(--guide-signal)}
.construction .guide-description{grid-column:1/-1;font-size:10px;color:#b8b8b8;line-height:1.7;margin:6px 0 10px}
.construction .guide-legend{grid-column:1/-1;font-size:8px;color:#999;display:flex;align-items:center;gap:5px;margin:0 0 10px}
.legend-white,.legend-yellow{width:8px;height:2px;background:var(--guide-ink);display:inline-block;flex:none}
.legend-yellow{background:var(--guide-signal);margin-left:6px}
#guide-readiness{grid-column:1/-1;font-size:9px;color:#aaa;line-height:1.65;padding:9px 0;border-top:1px dashed #383838;overflow-wrap:anywhere}
#guide-readiness.is-ready{color:#dcd59a}
#guide-apply{grid-column:1/-1;width:100%;font-size:10px;padding:9px;white-space:normal}
#guide-apply:disabled{opacity:1;background:#242424;border-color:#3a3a3a;color:#777}
.construction .tool-library-hint{font-size:9px;line-height:1.6;color:#999;margin:13px 0 10px}
.constraint-grid,.boolean-actions,.generator-actions,.attachment-actions{gap:7px}
.preview-action,.constraint-grid .preview-action,.generator-actions .preview-action,.boolean-actions .preview-action,.attachment-actions .preview-action,.flow-actions .preview-action{display:grid;grid-template-columns:1fr;text-align:left;white-space:normal;padding:9px 10px;gap:3px;align-content:start;background:#191919;min-height:103px}
.preview-action .tool-demo{width:77px;height:43px;margin:0 auto 3px}
.preview-action .tool-name{font-size:10px;line-height:1.4;color:#eee}
.preview-action .tool-outcome{font-size:8px;color:#a0a0a0;line-height:1.5}
.preview-action.is-unavailable{border-style:dashed}
.preview-action.is-unavailable .tool-name{color:#b4b4b4}
.preview-action[aria-pressed=true]{border-style:solid;border-color:#93872d;background:#262319}
.preview-action[aria-pressed=true] .tool-name{color:var(--guide-signal)}
.preview-action:hover{border-color:#aaa;background:#242424}
.generator-actions{margin-top:10px}
.generator-actions button:last-child{grid-column:auto}
.generator-actions{grid-template-columns:1fr}
.generator-actions .preview-action{grid-template-columns:80px 1fr;min-height:70px;align-items:center}
.generator-actions .tool-demo{grid-row:span 2}
.flow-actions{margin-top:12px}
.flow-actions select{font-size:10px;padding:9px}
.construction #relationship-hint{font-size:9px;line-height:1.7;color:#aaa;margin:14px 0}
.construction .relationships-panel{padding:15px 0;border-top:1px solid #383838;border-bottom:0}
.relationships-panel h3{text-transform:none;letter-spacing:0;font-size:12px}
.relationships-panel .panel-note{padding:0;font-size:10px;line-height:1.7}
.relationships-panel .checks{font-size:10px;gap:7px;align-items:center;margin:12px 0}
.relationships-panel .blank-button{position:static;width:100%;margin:12px 0;white-space:normal}
.attachment-card .checks{font-size:10px}
.align-grid button{padding:5px 1px;display:flex;flex-direction:column;align-items:center;gap:2px}
.align-grid .tool-demo{width:35px;height:27px}
.align-grid .tool-name{font-size:8px;line-height:1.5}
.two-actions [data-guide-key]{display:flex;flex-direction:column;align-items:center;gap:3px}
.two-actions .tool-demo{width:55px;height:31px}
.two-actions .tool-name{font-size:9px}
#tool-tooltip{position:fixed;z-index:30;width:264px;padding:15px;background:#1b1b1b;border:1px solid #777;box-shadow:0 8px 30px #0008;pointer-events:none}
#tool-tooltip .tool-demo{height:88px;margin:0 auto 8px;width:140px}
#tool-tooltip b{font-size:12px;line-height:1.5;font-weight:400}
#tool-tooltip p{font-size:10px;line-height:1.7;color:#b8b8b8;margin:7px 0 10px}
#tool-tooltip small{font-size:9px;color:var(--guide-signal)}
@media(min-width:1800px){.studio{height:calc(100dvh - 142px);grid-template-columns:238px minmax(0,1fr) 332px}}
@media(max-width:1350px){.brand span{display:none}.tools button{padding:5px 3px;min-width:46px}.tools button .tool-name{font-size:9px}.tools button:nth-child(3),.tools button:nth-child(8),.tools button:nth-child(11){margin-left:5px}.view-options button{gap:0}.view-options .tool-demo{display:none}.history{padding-right:3px}.studio{grid-template-columns:185px minmax(0,1fr) 294px}}
@media(max-width:1180px){.tools button .tool-name{font-size:9px}.tools button{min-width:43px}.studio{grid-template-columns:163px minmax(0,1fr) 280px}.view-options button{font-size:8px;padding:7px 5px}.toolbar{gap:5px}.tools button:nth-child(3),.tools button:nth-child(8),.tools button:nth-child(11){margin-left:3px}}
@media(max-width:960px){.toolbar{overflow-x:auto;gap:6px}.tools button{min-width:45px}.view-options{flex-shrink:0}.studio{grid-template-columns:143px minmax(0,1fr) 264px}.tools button .tool-name{font-size:9px}}
@media(max-width:720px){.toolbar{height:69px}.studio{height:auto;grid-template-columns:1fr}.right-panel{display:block;overflow:visible}.inspector-tabs{position:static}.construction{border-left:0}.constraint-grid,.boolean-actions,.attachment-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-action .tool-demo{width:94px;height:52px}.guide-description{max-width:460px}.blank-button{top:170px}#tool-tooltip{width:min(264px,calc(100vw - 16px))}.right-panel #appearance-panel{border-left:0}.canvas-section{min-height:400px;height:58dvh}}
@media(prefers-reduced-motion:reduce){.demo-motion{animation:none!important}.guide-heading button{display:none}.is-playing .demo-reveal{stroke-dasharray:none;stroke-dashoffset:0}}