.technique{--t: 1;container-type:inline-size;display:flex;align-items:center;gap:20px;margin:0 0 32px;padding:12px 20px 12px 12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.technique[data-speed=slow]{--t: 5}.technique-scene{flex:none;width:104px;height:120px;border-radius:var(--radius-md);background:radial-gradient(70% 60% at 50% 55%,var(--color-highlight-light),transparent 72%);perspective:420px}.ct-svg{display:block;width:100%;height:100%;overflow:visible;transform:rotateX(24deg);transform-origin:50% 80%;animation:ctSway 9s ease-in-out infinite}@keyframes ctSway{0%,to{transform:rotateX(24deg) rotate(-6deg)}50%{transform:rotateX(18deg) rotate(4deg)}}.ct-floor{fill:#00000059;filter:blur(6px)}.technique--jitter .ct-rig{animation:ctTremble calc(.07s * var(--t)) linear infinite}@keyframes ctTremble{0%,to{transform:translate(0)}25%{transform:translate(1.2px,-.8px)}50%{transform:translate(-1px,1px)}75%{transform:translate(.8px,.6px)}}.ct-btn-left{fill:var(--color-highlight);opacity:0;animation:ctBtnFlash calc(.12s * var(--t)) linear infinite}.technique--kohi .ct-btn-left{animation-duration:calc(.16s * var(--t))}@keyframes ctBtnFlash{0%,30%,to{opacity:0}50%{opacity:.28}}.ct-crease{fill:none;stroke:#82462d59;stroke-width:1;stroke-linecap:round}.ct-nail{stroke:#a05a3c40;stroke-width:.6}.ct-knuckle{fill:#ffeee173}.ct-tendon{fill:none;stroke:#ffe8d647;stroke-width:2.4;stroke-linecap:round}.ct-cuff{fill:none;stroke:#ffffff2e;stroke-width:1.2}.ct-finger{transform-box:fill-box;transform-origin:50% 100%}.ct-finger--press-a,.ct-finger--press-b{animation:ctFingerTap calc(.12s * var(--t)) ease-in-out infinite}.technique--kohi .ct-finger--press-a,.technique--kohi .ct-finger--press-b{animation:ctFingerRoll calc(.32s * var(--t)) ease-in-out infinite}.technique--kohi .ct-finger--press-b,.technique--kohi .ct-ripple--press-b{animation-delay:calc(-.16s * var(--t))}@keyframes ctFingerTap{0%,to{transform:scaleY(1)}50%{transform:scaleY(.95)}}@keyframes ctFingerRoll{0%,50%,to{transform:scaleY(1)}25%{transform:scaleY(.93)}}.ct-ripple{fill:none;stroke:var(--color-highlight);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ctRipple calc(.12s * var(--t)) ease-out infinite}.technique--kohi .ct-ripple{animation-duration:calc(.32s * var(--t))}@keyframes ctRipple{0%,45%{transform:scale(.4);opacity:0}50%{transform:scale(.6);opacity:1}to{transform:scale(2);opacity:0}}.technique-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.technique-title{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.2;color:var(--color-text)}.technique-lead{margin:0;font-size:13px;line-height:1.5;color:var(--color-text-secondary)}.technique-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:12px;border-top:1px solid var(--color-border)}.technique-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0}.technique-facts dt{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.technique-facts dd{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--color-text)}.technique-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.technique-speed{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg)}.technique-speed-btn{padding:4px 10px;border:0;border-radius:999px;background:transparent;color:var(--color-text-secondary);font:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}.technique-speed-btn:hover{color:var(--color-text)}.technique-speed-btn.is-active{background:var(--color-highlight);color:#fff}.technique-compare{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--color-highlight);text-decoration:none}.technique-compare svg{flex:none;transition:transform .2s}.technique-compare:hover{color:var(--color-highlight-hover)}.technique-compare:hover svg{transform:translate(3px)}@container (max-width: 480px){.technique-scene{width:76px;height:88px}.technique-body{gap:8px}}@media(max-width:768px),(hover:none)and (pointer:coarse){.technique{display:none}}@media(prefers-reduced-motion:reduce){.technique{--t: 6}.ct-svg{animation:none}}
