/* ---------- how I think: rotating ring + the stage it narrates ---------- */
.think{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:center}
@media (min-width:1000px){.think{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7)}}
.think-ring{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);overflow:clip;padding-block:var(--s-2)}
.ring{position:relative;width:min(320px,100%);aspect-ratio:1}
.ring::before{content:"";position:absolute;inset:38px;border-radius:50%;border:1px dashed var(--line)}
.ring-rot{position:absolute;inset:0;transition:transform 1s var(--ease)}
.node{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;transition:transform 1s var(--ease)}
.node button{width:100%;height:100%;border-radius:50%;background:var(--chip);font-size:12px;line-height:14px;font-weight:600;letter-spacing:-.03em;color:var(--ink-2);transition:background-color var(--d-med) ease,color var(--d-med) ease,transform var(--d-med) var(--ease)}
.node button:hover{color:var(--ink-1)}
.node.on button{background:var(--ink-1);color:var(--bg);transform:scale(1.1)}
.ring-c{position:absolute;inset:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.ring-c .t-h3{font-size:20px;line-height:24px}
.fade{animation:rise var(--d-med) var(--ease)}
.pause{font-size:var(--fs-caption);color:var(--ink-2);letter-spacing:.02em;padding:6px 12px;border-radius:var(--r-pill);transition:background-color var(--d-fast) ease}
.pause:hover{background:var(--chip)}
.think-stage{margin:0;min-width:0}
.think-canvas{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:var(--r-media);background:var(--surface);overflow:hidden}
.anim{position:absolute;inset:3% 4%;opacity:0;transition:opacity var(--d-slow) var(--ease)}
.anim.on{opacity:1}
.think-cap{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.think-cap .t-h3{min-height:44px;max-width:44ch}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:4px;font-size:13px;letter-spacing:-.01em;color:var(--ink-2)}
.flow li{display:flex;align-items:center;transition:color var(--d-med) ease}
.flow li+li::before{content:"→";margin:0 8px;color:var(--ink-2);opacity:.45}
.flow li.on{color:var(--ink-1);font-weight:600}

/* ---- process loops (inline SVG). Base styles = finished state; keyframes play only on the live, selected stage ---- */
.anim-svg{display:block;width:100%;height:100%;overflow:visible}
.anim-svg *{animation-play-state:paused!important}
.think-stage.live .anim.on .anim-svg *{animation-play-state:running!important}
.anim-svg .paper{fill:var(--paper)}
.anim-svg .grid{stroke:var(--line);stroke-width:.6}
.anim-svg .dot{fill:var(--skel)}
.anim-svg .ln{fill:none;stroke:var(--ink-1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.anim-svg .ln.d{stroke-dasharray:1;stroke-dashoffset:0}
.anim-svg .ln.soft{stroke:var(--ink-2)}
.anim-svg .ln.thin{stroke-width:1.1}
.anim-svg .note{fill:var(--chip);stroke:var(--line)}
.anim-svg .mono{font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--ink-2);letter-spacing:.04em}
.anim-svg .hand{font:italic 500 15px/1 var(--sans);letter-spacing:-.02em;fill:var(--ink-1)}
.anim-svg .cap{font:500 8.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-2)}
.anim-svg .ui{font:600 10px/1 var(--sans);letter-spacing:-.01em;fill:var(--ink-1)}
.anim-svg .ui.sm{font-size:8.5px;font-weight:500;fill:var(--ink-2)}
.anim-svg .c{text-anchor:middle}
.anim-svg .inv{fill:var(--bg)}
.anim-svg .inv-ln{fill:none;stroke:var(--bg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.anim-svg .ink{fill:var(--ink-1)}
.anim-svg .skel{fill:var(--skel)}
.anim-svg .soft-f{fill:var(--ink-2);opacity:.55}
.anim-svg .chipf{fill:var(--chip)}
.anim-svg .comp{fill:var(--paper);stroke:var(--line)}
.anim-svg .comp.lift{stroke:var(--ink-1)}
.anim-svg .frame{fill:var(--paper);stroke:var(--line)}
.anim-svg .wire{fill:var(--skel)}
.anim-svg .wire-o{fill:none;stroke:var(--ink-2);stroke-dasharray:3 3}
.anim-svg .outline{fill:none;stroke:var(--ink-1);stroke-width:1.2}
.anim-svg .sel{fill:none;stroke:var(--ink-1);stroke-width:1}
.anim-svg .hdl{fill:var(--paper);stroke:var(--ink-1)}
.anim-svg .cursor{fill:var(--ink-1);stroke:var(--paper);stroke-width:1;stroke-linejoin:round}
.anim-svg .pen path{fill:var(--ink-1)}.anim-svg .pen .pen-tip{fill:var(--ink-2)}
.anim-svg .guide{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 4;opacity:.9}
.anim-svg .focus{fill:none;stroke:var(--ink-1);stroke-width:1;stroke-dasharray:2 2}
.anim-svg .bugc{fill:var(--paper);stroke:var(--ink-2);stroke-dasharray:2 2}
.anim-svg .ripple{fill:none;stroke:var(--ink-1);stroke-width:1.2}
.anim-svg .st1{stop-color:var(--m2)}.anim-svg .st2{stop-color:var(--m3)}
@keyframes pen{0%,3%{transform:translate(64px,48px);opacity:0}5%{transform:translate(64px,48px);opacity:1}12%{transform:translate(168px,250px)}20%{transform:translate(150px,198px)}25%{transform:translate(384px,60px)}32%{transform:translate(246px,93px)}40%{transform:translate(360px,240px)}50%{transform:translate(246px,70px)}62%{transform:translate(394px,198px);opacity:1}70%,100%{transform:translate(470px,300px);opacity:0}}
@keyframes dr5{0%,5%{stroke-dashoffset:1;opacity:1}13%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr12{0%,12%{stroke-dashoffset:1;opacity:1}16%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr13{0%,13%{stroke-dashoffset:1;opacity:1}17%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr15{0%,15%{stroke-dashoffset:1;opacity:1}18%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr16{0%,16%{stroke-dashoffset:1;opacity:1}19%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr17{0%,17%{stroke-dashoffset:1;opacity:1}21%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr19{0%,19%{stroke-dashoffset:1;opacity:1}22%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr20{0%,20%{stroke-dashoffset:1;opacity:1}23%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr21{0%,21%{stroke-dashoffset:1;opacity:1}24%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ap14{0%,14%{opacity:0;transform:translateY(6px)}19%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes dr24{0%,24%{stroke-dashoffset:1;opacity:1}30%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr27{0%,27%{stroke-dashoffset:1;opacity:1}30%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr28{0%,28%{stroke-dashoffset:1;opacity:1}31%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr29{0%,29%{stroke-dashoffset:1;opacity:1}32%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr31{0%,31%{stroke-dashoffset:1;opacity:1}36%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr35{0%,35%{stroke-dashoffset:1;opacity:1}37%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr37{0%,37%{stroke-dashoffset:1;opacity:1}43%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr40{0%,40%{stroke-dashoffset:1;opacity:1}43%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr41{0%,41%{stroke-dashoffset:1;opacity:1}44%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr43{0%,43%{stroke-dashoffset:1;opacity:1}47%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr46{0%,46%{stroke-dashoffset:1;opacity:1}48%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ap48{0%,48%{opacity:0;transform:translateY(6px)}53%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes ap52{0%,52%{opacity:0;transform:translateY(6px)}57%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes dr55{0%,55%{stroke-dashoffset:1;opacity:1}59%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dr60{0%,60%{stroke-dashoffset:1;opacity:1}64%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes drag{0%,34%{transform:none;opacity:0}36%{transform:none;opacity:1}52%{transform:translate(158px,174px)}55%{transform:translate(158px,172px);opacity:1}58%,100%{transform:translate(158px,172px);opacity:0}}
@keyframes ap26{0%,26%{opacity:0;transform:translateY(6px)}31%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes ap3{0%,3%{opacity:0;transform:translateY(6px)}8%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes sg9_70{0%,9%{opacity:0}12%,67%{opacity:1}70%,100%{opacity:0}}
@keyframes sg13_62{0%,13%{opacity:0}16%,59%{opacity:1}62%,100%{opacity:0}}
@keyframes sg17_66{0%,17%{opacity:0}20%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes sg18_66{0%,18%{opacity:0}21%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes sg19_66{0%,19%{opacity:0}22%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes sg22_56{0%,22%{opacity:0}25%,53%{opacity:1}56%,100%{opacity:0}}
@keyframes rf66{0%,66%{opacity:0}70%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes rf58{0%,58%{opacity:0}62%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes rf62{0%,62%{opacity:0}66%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes rf55{0%,55%{opacity:0;transform:scale(.96)}58%{opacity:1;transform:scale(1.02)}61%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes sel{0%,72%{opacity:0}75%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes typ{0%,24%{transform:scaleX(0)}36%,41%{transform:scaleX(1)}44%,100%{transform:scaleX(1)}}
@keyframes prog{0%,43%{transform:scaleX(0)}58%,100%{transform:scaleX(1)}}
@keyframes press{0%,76%{transform:none}78%{transform:scale(.95)}81%,100%{transform:none}}
@keyframes rip{0%,77%{opacity:0;transform:scale(.3)}79%{opacity:.5}88%,100%{opacity:0;transform:scale(1.6)}}
@keyframes cur3{0%,66%{transform:translate(420px,280px);opacity:0}70%{opacity:1}76%,84%{transform:translate(176px,200px);opacity:1}92%,100%{transform:translate(176px,200px);opacity:0}}
@keyframes sg0_30{0%,0%{opacity:0}3%,27%{opacity:1}30%,100%{opacity:0}}
@keyframes sg30_57{0%,30%{opacity:0}33%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes ph3{0%,57%{opacity:0}61%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes live{0%,62%{opacity:0}66%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes rg1{0%,56%{transform:translate(10px,4px) rotate(-3deg)}63%,100%{transform:none}}
@keyframes rg2{0%,57%{transform:translate(-8px,3px)}64%,100%{transform:none}}
@keyframes rg3{0%,58%{transform:translate(14px,6px) rotate(4deg)}65%,100%{transform:none}}
@keyframes rg4{0%,59%{transform:translate(10px,-4px)}65%,100%{transform:none}}
@keyframes rg5{0%,59%{transform:translate(-6px,3px)}66%,100%{transform:none}}
@keyframes rg6{0%,60%{transform:translate(14px,2px)}66%,100%{transform:none}}
@keyframes btn{0%,60%{opacity:0}64%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes sg0_60{0%,0%{opacity:0}3%,57%{opacity:1}60%,100%{opacity:0}}
@keyframes rg7{0%,60%{transform:translate(14px,-6px)}67%,100%{transform:none}}
@keyframes sg22_60{0%,22%{opacity:0}25%,57%{opacity:1}60%,100%{opacity:0}}
@keyframes sg22_41{0%,22%{opacity:0}25%,38%{opacity:1}41%,100%{opacity:0}}
@keyframes sg41_60{0%,41%{opacity:0}44%,57%{opacity:1}60%,100%{opacity:0}}
@keyframes bug{0%,36%{opacity:1;transform:scale(1)}42%,100%{opacity:0;transform:scale(0)}}
@keyframes hov{0%,55%{opacity:0}58%,68%{opacity:1}71%,100%{opacity:0}}
@keyframes cur4{0%,48%{transform:translate(300px,280px);opacity:0}52%{opacity:1}57%,68%{transform:translate(124px,196px);opacity:1}74%,100%{transform:translate(160px,250px);opacity:0}}
@keyframes sg4_46{0%,4%{opacity:0}7%,43%{opacity:1}46%,100%{opacity:0}}
@keyframes sg0_48{0%,0%{opacity:0}3%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes hd{0%,48%{opacity:0}53%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes sn1{0%,14%{transform:translate(7px,2px)}20%,100%{transform:none}}
@keyframes sn2{0%,16%{transform:translate(-5px,1px)}22%,100%{transform:none}}
@keyframes sn3{0%,18%{transform:translate(9px,6px)}25%,100%{transform:none}}
@keyframes sn4{0%,21%{transform:translate(-4px,10px)}28%,100%{transform:none}}
@keyframes sn5{0%,24%{transform:translate(11px,5px)}31%,100%{transform:none}}
@keyframes ap72{0%,72%{opacity:0;transform:translateY(6px)}77%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes ap84{0%,84%{opacity:0;transform:translateY(6px)}89%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes sg0_14{0%,0%{opacity:0}3%,11%{opacity:1}14%,100%{opacity:0}}
@keyframes sg14_34{0%,14%{opacity:0}17%,31%{opacity:1}34%,100%{opacity:0}}
@keyframes sg34_46{0%,34%{opacity:0}37%,43%{opacity:1}46%,100%{opacity:0}}
@keyframes sg46_82{0%,46%{opacity:0}49%,79%{opacity:1}82%,100%{opacity:0}}
@keyframes ul82{0%,82%{opacity:0}85%,92%{opacity:1}97%,100%{opacity:0}}