.brand{perspective:700px;display:block;width:220px;height:54px;flex-shrink:0}
.brand-cube{position:relative;display:block;width:100%;height:54px;transform-style:preserve-3d;transition:transform 850ms cubic-bezier(.16,1,.3,1)}
.brand-face{position:absolute;inset:0;display:flex;align-items:center;gap:14px;backface-visibility:hidden}
.brand-front{transform:translateZ(27px)}
.brand-plugin{transform:rotateX(90deg) translateZ(27px)}
.brand.plugin-active .brand-cube{transform:rotateX(-90deg)}
.brand .brand-plugin img,header.over-image .brand .brand-plugin img{filter:none}
.brand-plugin .brand-label{color:#ff6b16}
.subd-workbench{display:grid;grid-template-columns:1.35fr 1fr;gap:7vw;align-items:center}
.subd-preview{position:relative;background:#e7e9e0;aspect-ratio:1.1;overflow:hidden}
.shape-preview{width:100%;height:100%;padding:24px;filter:drop-shadow(0 30px 18px #26352118)}
.shape-faces{animation:fade 600ms var(--ease)}
.mesh-accent{stroke:#ff6b16;stroke-width:4;fill:none;stroke-linejoin:round}
.preview-caption{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em}
.preview-caption span:last-child{font-size:8px;color:var(--muted)}
.subd-controls>p{margin-top:22px;max-width:410px;line-height:1.9}
.tool-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:32px}
.tool-picker button{padding:14px 5px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;align-items:center;font-size:9px;transition:background 300ms,border-color 300ms}
.tool-picker button svg{width:42px;height:44px;color:#213342}
.tool-picker .accent{stroke:#ff6b16}
.tool-picker button:hover,.tool-picker button[aria-pressed=true]{background:#fff9ef;border-color:#ff6b16}
.subd-controls .demo-note{font-size:11px;color:var(--muted)}
@media(max-width:1000px){.brand{width:200px}header nav{gap:16px}.subd-workbench{gap:35px}}
@media(max-width:700px){.brand{width:176px;height:46px}.brand-cube{height:46px}.brand-face{gap:8px}.brand-front{transform:translateZ(23px)}.brand-plugin{transform:rotateX(90deg) translateZ(23px)}.subd-workbench{grid-template-columns:1fr;gap:32px}.tool-picker{gap:8px}.shape-preview{padding:10px}}
@media(prefers-reduced-motion:reduce){.brand-cube{transition:none}.shape-faces{animation:none}}

.brand .brand-cube,.brand .brand-face{margin:0;text-align:left}.brand .brand-face{display:flex}