.cycle-experience{max-width:1180px;margin:90px auto 100px;padding:52px 52px 28px;background:var(--paper);color:var(--ink)}
.cycle-experience:not([data-ready]) .cycle-workspace,.cycle-experience:not([data-ready]) .cycle-lesson{display:none}
.cycle-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px}
.cycle-intro h2{font:550 clamp(32px,4.1vw,52px)/1.04 var(--font-ui);letter-spacing:-.04em;margin:0}
.cycle-intro>p{font:400 17px/1.65 var(--font-ui);max-width:37ch;margin:0 0 3px}
.cycle-workspace{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:38px;align-items:center;margin-top:26px}
.cycle-object{position:relative;min-width:0}
.cycle-svg{display:block;width:100%;touch-action:pan-y;user-select:none}
.cycle-svg.is-spatial{cursor:grab;touch-action:pan-y}
.cycle-svg.is-spatial:active{cursor:grabbing}
.cycle-svg text{font-family:var(--font-ui);fill:var(--ink)}
.cycle-object-hint{display:block;text-align:center;font:400 13px/1.4 var(--font-ui);color:var(--muted);margin-top:-4px}
.cycle-loops{display:flex;flex-direction:column;gap:2px}
.cycle-loops button{display:flex;align-items:center;gap:15px;width:100%;min-height:64px;border:0;border-bottom:1px solid #d6d5cd;background:none;color:var(--ink);padding:8px 0;cursor:pointer;font:500 14px/1.4 var(--font-ui);text-align:left}
.cycle-loops button>svg{width:47px;height:39px;flex:none;fill:none;stroke:var(--loop);stroke-width:2;stroke-linejoin:round;transition:fill .18s}
.cycle-loops button:hover>svg{fill:color-mix(in srgb,var(--loop) 12%,transparent)}
.cycle-loops button[aria-pressed=true]>svg{fill:color-mix(in srgb,var(--loop) 24%,transparent)}
.cycle-mark{width:14px;height:14px;border:1px solid #8a8b80;border-radius:50%;margin-left:auto;position:relative;flex:none}
[aria-pressed=true]>.cycle-mark{background:var(--loop);border-color:var(--loop)}
[aria-pressed=true]>.cycle-mark:after{content:'';position:absolute;left:3px;top:2px;width:4px;height:6px;border:solid #fff;border-width:0 1px 1px 0;transform:rotate(45deg)}
.cycle-progress{font:400 14px/1.6 var(--font-ui);min-height:3.2em;margin:22px 0 14px}
.cycle-reveal{border:1px solid var(--ink);background:var(--ink);color:var(--paper);width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;min-height:48px;cursor:pointer;font:500 14px/1.4 var(--font-ui)}
.cycle-reveal:hover{background:#41463c}
.cycle-reveal:disabled{background:transparent;border-color:#c7c8bd;color:#717567;cursor:default}
.cycle-rotate{font:400 12px/1.5 var(--font-ui);margin-top:20px}
.cycle-rotate:not([hidden]){display:block}
.cycle-rotate input{display:block;width:100%;margin:12px 0 0;accent-color:var(--accent)}
.cycle-insight{border-top:1px solid #cecec2;margin-top:30px;padding-top:22px}
.cycle-insight p{font:400 clamp(20px,2.3vw,27px)/1.4 var(--font-serif);max-width:55ch;margin:0}
.cycle-insight em{font-style:normal;text-decoration:underline;text-decoration-color:#b9b9aa;text-underline-offset:5px}
@media(max-width:700px){.cycle-experience{margin:52px 0;padding:30px 22px 24px}.cycle-intro{display:block}.cycle-intro h2{max-width:14ch}.cycle-intro>p{margin-top:18px;font-size:16px}.cycle-workspace{display:flex;flex-direction:column;gap:22px;margin-top:12px}.cycle-object{width:100%}.cycle-actions{width:100%}.cycle-loops{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.cycle-loops button{gap:10px;min-height:54px;font-size:12px}.cycle-loops button>svg{width:35px}.cycle-progress{min-height:0;margin:18px 0}.cycle-reveal{width:auto;min-width:220px}.cycle-insight{margin-top:26px}.cycle-rotate{max-width:350px}}
@media(prefers-reduced-motion:reduce){.cycle-loops button>svg{transition:none}}