.design-cycle { padding:25px var(--gutter) 65px;background:var(--paper);color:var(--ink);scroll-margin-top:110px; }
.cycle-diagram { width:min(100%,46svh,600px);aspect-ratio:1;margin:auto;position:relative; }
.cycle-track { position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--line);stroke-width:1; }
.cycle-arc { stroke:var(--ink);stroke-width:1.5;stroke-dasharray:17 83;transform-origin:300px 300px;transform:rotate(-90deg);transition:transform 650ms cubic-bezier(.22,1,.36,1); }
.cycle-tabs { position:absolute;inset:0; }
.cycle-tab { position:absolute;min-height:48px;padding:10px 16px;background:var(--paper);color:var(--muted);font:inherit;font-size:clamp(15px,1.65vw,23px);line-height:1.1;transform:translate(-50%,-50%);transition:color 180ms ease-out; }
.cycle-tab::after { content:'';position:absolute;bottom:3px;left:16px;right:16px;height:1px;background:currentColor;opacity:0; }
.cycle-tab[aria-selected=true] { color:var(--ink); }
.cycle-tab { min-width:48px; }
.cycle-tab[aria-selected=true]::after { opacity:1; }
.cycle-tab:nth-child(1) { left:50%;top:13.33%; }
.cycle-tab:nth-child(2) { left:84.87%;top:38.67%; }
.cycle-tab:nth-child(3) { left:71.55%;top:79.66%; }
.cycle-tab:nth-child(4) { left:28.45%;top:79.66%; }
.cycle-tab:nth-child(5) { left:15.13%;top:38.67%; }
.cycle-tab:focus-visible,.cycle-pagination button:focus-visible,.cycle-panel:focus-visible { outline:2px solid currentColor;outline-offset:5px; }
.cycle-model { position:absolute;inset:30%;perspective:800px; }
.cycle-piece { position:absolute;width:28%;height:28%;left:36%;top:36%;border:1px solid var(--ink);background:var(--paper);transform-origin:center;transition:transform 650ms cubic-bezier(.22,1,.36,1),opacity 250ms ease-out; }
.cycle-piece::before,.cycle-piece::after { content:'';position:absolute;background:var(--ink);height:1px;left:16%;right:16%;top:35%;opacity:.5; }
.cycle-piece::after { top:54%;right:36%; }
.cycle-detail { max-width:980px;margin:0 auto; }
.cycle-panels { min-height:225px; }
.cycle-pagination { display:flex;align-items:center;justify-content:space-between;max-width:220px;margin:0 auto 12px; }
.cycle-pagination[hidden] { display:none; }
.cycle-pagination button { width:48px;height:48px;font-size:26px;background:transparent;color:inherit; }
.cycle-count { font-size:14px;font-variant-numeric:tabular-nums;color:var(--muted); }
.cycle-panel { max-width:660px;margin:0 auto 45px;text-align:center; }
.cycle-panel h3 { font-size:clamp(44px,5vw,72px);letter-spacing:-.055em;line-height:1.04;margin-bottom:18px; }
.cycle-panel p { font-size:clamp(17px,1.6vw,23px);line-height:1.5; }
.design-cycle:not(.is-interactive) .cycle-tabs,.design-cycle:not(.is-interactive) .cycle-model,.design-cycle:not(.is-interactive) .cycle-track { display:none; }
.design-cycle:not(.is-interactive) .cycle-diagram { display:none; }
.design-cycle[data-cycle-step="3"] .cycle-piece { border-color:#46494f; }
[data-theme=dark] .design-cycle[data-cycle-step="3"] .cycle-piece { border-color:#a8abb1; }
.design-cycle.is-keyboard .cycle-piece,.design-cycle.is-keyboard .cycle-arc { transition:none; }
@media (max-width:640px) {
 .design-cycle { padding:12px 4px 48px; }
 .cycle-tab { padding:10px 8px;font-size:clamp(13px,3.5vw,18px); }
 .cycle-tab::after { left:8px;right:8px; }
 .cycle-detail { padding:0 18px; }
 .cycle-pagination { margin-bottom:25px; }
 .cycle-panel { margin-bottom:0; }
 .cycle-panel h3 { font-size:48px; }
 .cycle-panel p { font-size:17px; }
 .cycle-model { inset:32%; }
 .cycle-diagram { width:min(100%,380px); }
 .cycle-panels { min-height:300px; }
}
@media (prefers-reduced-motion:reduce) {
 .cycle-piece,.cycle-arc,.cycle-tab { transition:none; }
}