/* Original DotConn constellation: semantic DOM cards, no external runtime. */
.dc-tools.tools-section{padding:100px 0;background:var(--bg);overflow:hidden}
.tools-inner{position:relative}.tools-intro{text-align:center}.dc-tools h2{font-size:clamp(31px,3.5vw,48px);line-height:1.12;letter-spacing:-1.7px;font-weight:500;margin:0 0 24px}
.dc-tools .tools-description{font-size:15px;line-height:1.7;max-width:760px;margin:0 auto;color:var(--muted)}
.tools-constellation{width:min(100%,720px);aspect-ratio:1;height:auto;container-type:inline-size;--tool-size:clamp(32px,11.5cqw,60px);position:relative;margin:24px auto 0;touch-action:pan-y;cursor:grab;isolation:isolate;outline-offset:-2px}
.tools-constellation.is-dragging{cursor:grabbing}.tools-orbit{list-style:none;padding:0;margin:0;position:absolute;inset:0}
.tools-orbit>li{position:absolute;left:50%;top:50%;width:0;height:0}
.tool-card{position:absolute;left:0;top:0;width:var(--tool-size);height:var(--tool-size);margin:calc(var(--tool-size)/-2) 0 0 calc(var(--tool-size)/-2);display:grid;place-items:center;border:1px solid #ffffff24;border-radius:16px;background:linear-gradient(145deg,#272727,#121212);box-shadow:0 10px 24px #0009,inset 0 1px #ffffff15;color:var(--ink);padding:0;cursor:pointer;transition:border-color .18s ease;user-select:none;-webkit-user-select:none}
.tool-card img{width:60%;height:60%;object-fit:contain;pointer-events:none;filter:none;opacity:1}
.tool-card.is-inspected,.tool-card:focus-visible{border-color:var(--yellow);outline:none}
.tool-name{display:none}
.tools-tooltip{position:absolute;z-index:110;transform:translateX(-50%);pointer-events:none;max-width:min(240px,calc(100% - 16px));width:max-content;box-sizing:border-box;padding:8px 12px;border:1px solid #ffffff30;border-radius:10px;background:#000;color:var(--ink);box-shadow:0 8px 24px #0007;text-align:center;overflow-wrap:anywhere;font-family:var(--font-site,Helvetica,Arial,sans-serif);font-size:var(--type-body,15px);font-weight:400;line-height:var(--type-body-leading,1.7);letter-spacing:normal}
.tools-tooltip[hidden]{display:none}
.tool-detail{width:min(400px,calc(100% - 40px));box-sizing:border-box;padding:36px;border:1px solid #ffffff30;border-radius:22px;background:linear-gradient(145deg,#222,#101010);color:var(--ink);box-shadow:0 35px 100px #000b;text-align:center}.tool-detail::backdrop{background:#000b;backdrop-filter:blur(8px)}
.tool-detail-close{display:block;margin:0 0 22px auto;border:1px solid #ffffff30;border-radius:999px;padding:7px 14px;font-size:12px;line-height:20px;color:var(--muted);background:#ffffff05}.tool-detail-logo{width:100px;height:100px;display:grid;place-items:center;margin:0 auto 24px;border-radius:24px;background:#ffffff08;border:1px solid #ffffff18}.tool-detail-logo img{object-fit:contain}.tool-detail-category{font-size:12px;line-height:1.6;color:var(--muted);margin-bottom:9px}.tool-detail h3{font-size:24px;line-height:1.3;font-weight:500;margin:0 0 16px;letter-spacing:-.5px}.tool-detail-description{font-size:14px;line-height:1.7;margin-bottom:24px}.tool-detail-note{font-size:12px;line-height:1.6;color:var(--soft);margin:0}
/* Useful, complete fallback before JS and for reduced motion. */
.tools-constellation:not([data-ready]){height:auto;min-height:400px}.tools-constellation:not([data-ready]) .tools-orbit{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:24px;padding:24px 0}.tools-constellation:not([data-ready]) .tools-orbit>li{position:relative;left:auto;top:auto;width:auto;height:68px;display:grid;place-items:center}.tools-constellation:not([data-ready]) .tool-card{position:relative;margin:0}
@media(max-width:700px){.dc-tools.tools-section{padding:72px 0}.tools-constellation{margin-top:20px}.tool-card{border-radius:12px}.dc-tools .tools-description br{display:none}.tools-constellation:not([data-ready]) .tools-orbit{grid-template-columns:repeat(4,1fr);gap:20px 12px}.tool-detail{padding:26px}}
@media(prefers-reduced-motion:reduce){.tool-card,.tool-card img{transition:none}}

.tools-constellation:is([data-formation="sphere"],[data-formation="field"]) .tool-card{border-radius:50%}