@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/inter-latin-variable.woff2)format("woff2")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--cp-bg:#f7f4ef;--cp-bg-elevated:#fcfbf8;--cp-surface:#fff;--cp-surface-soft:#f5f5f5;--cp-border:#dedede;--cp-border-strong:#919191;--cp-text:#242424;--cp-text-muted:#5c5c5c;--cp-text-soft:#6f6f6f;--cp-accent:#b11f4b;--cp-accent-hover:#9a1a41;--cp-accent-soft:#b11f4b14;--cp-accent-fg:#fff;--cp-success:#16a34a;--cp-danger:#dc2626;--cp-warning:#f59e0b;--cp-link:#0078d4;--cp-shadow:0 18px 48px #0000001f;--cp-overlay:#fffc;--cp-panel:#ffffffdb;--cp-panel-strong:#fffffff5;--cp-sheen:#ffffff8c;--cp-highlight:#b11f4b1f}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--cp-bg:#3d3b3a;--cp-bg-elevated:#343231;--cp-surface:#292929;--cp-surface-soft:#2e2e2e;--cp-border:#474747;--cp-border-strong:#5f5f5f;--cp-text:#dedede;--cp-text-muted:#919191;--cp-text-soft:#b0b0b0;--cp-accent:#fd8ea1;--cp-accent-hover:#fb7b91;--cp-accent-soft:#fd8ea124;--cp-accent-fg:#1a1a1a;--cp-success:#4ade80;--cp-danger:#f87171;--cp-warning:#fbbf24;--cp-link:#4da6ff;--cp-shadow:0 18px 48px #00000052;--cp-overlay:#292929e0;--cp-panel:#292929b8;--cp-panel-strong:#292929f5;--cp-sheen:#ffffff0a;--cp-highlight:#fd8ea11f}:root{--cp-stage-bg:#e1e1e1;--cp-stage-ink:#000;--cp-wireframe-ink:#8b5cf6;--cp-photo-ink:#000;--cp-diffuser-tint:var(--cp-photo-ink);--cp-frost-tint:#fff;--cp-clear:#0000;--cp-study-border:#00000018;--cp-study-ring:#00000005;--cp-control-text:#000000c2;--cp-control-muted:#00000061;--cp-control-divider:#00000013;--cp-control-hover:#0000000b;--cp-dock-border:#0001;--cp-dock-shadow:inset 0 1px 0 #ffffffdb, 0 1px 2px #00000006, 0 8px 24px #00000012, 0 24px 60px #0000000e;--cp-selected-shadow:0 0 0 .5px #00000014, 0 1px 2px #0001, 0 4px 9px #00000009;--cp-selected-surface:#ffffffeb;--cp-study-font:"Inter", "Segoe UI", sans-serif}html[data-theme=dark]{--cp-stage-bg:#292929;--cp-stage-ink:#ededed;--cp-wireframe-ink:#a78bfa;--cp-study-border:#ffffff21;--cp-study-ring:#ffffff06;--cp-control-text:#fffc;--cp-control-muted:#fff6;--cp-control-divider:#ffffff1a;--cp-control-hover:#ffffff0e;--cp-dock-border:#ffffff0f;--cp-dock-shadow:inset 0 1px 0 #ffffff14, 0 1px 2px #0000001f, 0 8px 24px #0003;--cp-selected-shadow:0 0 0 .5px #ffffff14, 0 1px 2px #0000001f, 0 4px 9px #0000001a;--cp-selected-surface:#242424}html{font-family:var(--cp-study-font);letter-spacing:0;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{background:var(--cp-stage-bg);min-width:280px;color:var(--cp-stage-ink);margin:0}button,input,select{font:inherit}:focus-visible{outline:2px solid var(--cp-stage-ink);outline-offset:4px}.study-page{place-items:center;min-height:100svh;padding:40px 40px 120px;display:grid;overflow-x:clip}.animation-layout{grid-template-columns:minmax(0,1fr) 400px;align-items:center;gap:48px;width:min(1280px,100%);display:grid}.preview-stack{justify-self:center;gap:12px;width:min(500px,100%);min-width:0;display:grid}.animation-stage{min-width:0}.preview-stage{aspect-ratio:1.6;place-items:center;display:grid}.fold-replay{background:var(--cp-clear);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;border:0;width:93%;margin:0;padding:0;display:block}.fold-replay:active{cursor:grabbing}.fold-replay:focus-visible{outline-offset:12px}.fold-frame{aspect-ratio:2;isolation:isolate;width:100%;position:relative;container-type:inline-size}.screen-aperture,.screen-canvas,.screen-fallback{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.screen-fallback{object-fit:cover}.screen-canvas{opacity:0}.fold-frame[data-renderer=ready] .screen-canvas{opacity:1}.fold-frame[data-renderer=ready] .screen-fallback{visibility:hidden}.renderer-notice{background:var(--cp-surface);color:var(--cp-text);border-radius:4px;padding:8px;font-size:11px;display:none;position:absolute;bottom:8px;left:8px;right:8px}.fold-frame[data-renderer=unavailable] .renderer-notice{display:block}.screen-guides{width:100%;height:100%;inset:0}.screen-left-guide{stroke:var(--cp-accent-fg)}.screen-right-guide{stroke:var(--cp-accent)}.screen-guides line{stroke-width:1px;stroke-dasharray:3 4}.geometry-left-probe,.geometry-right-probe{stroke:var(--cp-stage-ink);stroke-width:.9px;stroke-dasharray:2 3}.geometry-right-probe{stroke:var(--cp-accent)}.fold-face{background:var(--cp-photo-ink);pointer-events:none;position:absolute;overflow:hidden}.fold-photo{object-fit:cover;-webkit-user-select:none;user-select:none;display:block;position:absolute}.fold-blur-layer,.fold-shade{pointer-events:none;position:absolute;inset:0}.fold-blur-layer{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.fold-guides{fill:none;pointer-events:none;position:absolute;overflow:visible}.fold-guides line,.fold-guides rect,.fold-guides polygon{vector-effect:non-scaling-stroke;stroke-width:1px}.guide-flat-frame{stroke:var(--cp-control-muted);stroke-dasharray:4 4}.guide-hinge{stroke:var(--cp-accent);stroke-dasharray:3 3}.guide-turning-frame{stroke:var(--cp-accent)}.fold-guides circle{fill:var(--cp-accent)}.layer-controls.layer-controls-book{flex-wrap:wrap;gap:6px 10px}.motion-study{border:1px solid var(--cp-dock-border);background:var(--cp-stage-bg);width:100%;min-width:0;box-shadow:var(--cp-selected-shadow);color:var(--cp-control-text);font-variant-numeric:tabular-nums;border-radius:8px;align-self:center;font-size:13px;line-height:1.5}.study-header{justify-content:space-between;align-items:center;gap:12px;padding:20px 20px 12px;display:flex}.study-header h2{margin:0;font-size:16px;font-weight:600}.study-sources{align-items:center;gap:4px;display:flex}.source-link,.source-icon{min-height:32px;color:var(--cp-text-soft);background:var(--cp-control-hover);box-shadow:inset 0 -1px 0 var(--cp-dock-border);border-radius:999px;justify-content:center;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:1;text-decoration:none;transition:background-color .16s,color .16s,transform .16s;display:inline-flex}.source-link{background:var(--cp-control-hover);box-shadow:inset 0 -1px 0 var(--cp-dock-border);padding:0 12px}.source-icon{width:32px}.source-link:hover,.source-icon:hover{color:var(--cp-stage-ink);background:var(--cp-control-divider)}.study-tabs{border-bottom:1px solid var(--cp-study-border);grid-template-columns:1fr 1fr;gap:6px;padding:0 20px 16px;display:grid}.study-tabs button{background:var(--cp-control-hover);height:34px;color:var(--cp-text-muted);cursor:pointer;border:0;border-radius:999px;padding:0 12px;font-size:13px}.study-tabs button:hover{background:var(--cp-control-divider)}.study-tabs button[aria-selected=true]{background:var(--cp-control-text);color:var(--cp-selected-surface)}.study-body{padding:12px 20px 16px}.motion-technique h3{margin:0;font-size:14px;font-weight:600}.motion-technique p{min-height:54px;color:var(--cp-text-muted);margin:6px 0 0;font-size:12px;line-height:18px}.technique-apply{min-height:0;color:var(--cp-control-text);gap:6px;margin-top:8px;font-weight:500;display:flex}.technique-apply:before{content:"→";color:var(--cp-text-muted);font-weight:400}.motion-moments{margin-top:14px}.moments-heading{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.moments-heading h3,.motion-tests legend{margin:0;font-size:12px;font-weight:600}.motion-tests{border:0;border-top:1px solid var(--cp-dock-border);gap:2px;min-width:0;margin:14px 0 0;padding:12px 0 0;display:grid}.motion-tests legend{float:left;width:100%;margin-bottom:6px;padding:0}.motion-tests label{cursor:pointer;grid-template-columns:14px minmax(0,1fr);align-items:center;column-gap:8px;min-height:26px;font-size:12px;display:grid}.motion-tests input{width:14px;height:14px;accent-color:var(--cp-stage-ink);cursor:pointer;margin:0}.test-watch{color:var(--cp-text-muted);grid-column:2;margin-bottom:4px;font-size:11px;line-height:15px}.key-poses{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px;display:grid}.key-pose{background:var(--cp-control-hover);min-width:0;color:var(--cp-text-soft);box-shadow:inset 0 -1px 0 var(--cp-dock-border);cursor:pointer;border:0;border-radius:8px;flex-direction:column;align-items:center;padding:8px 4px;font-weight:500;transition:background-color .16s,color .16s,transform .16s;display:flex}.key-pose:hover{background:var(--cp-control-divider);color:var(--cp-control-text)}.key-pose[aria-pressed=true]{background:var(--cp-control-text);color:var(--cp-selected-surface)}.pose-image{place-items:center;width:100%;height:44px;padding:0 2px;display:grid}.pose-name{margin-top:6px;font-size:12px;line-height:1}.playback-footer{--footer-control-size:56px;--footer-icon-size:22px;--footer-font-size:14px;z-index:20;padding:16px 40px max(20px, env(safe-area-inset-bottom));background:var(--cp-stage-bg);pointer-events:none;position:fixed;inset:auto 0 0}.controls-wrap{pointer-events:auto;align-items:center;gap:20px;width:min(1280px,100%);margin:0 auto;display:flex}.controls-dock{grid-template-columns:var(--footer-control-size) minmax(0, 1fr) var(--footer-control-size);flex:448px;align-items:center;gap:12px;min-width:0;max-width:448px;display:grid}.controller-button,.playback-option{height:var(--footer-control-size);color:var(--cp-text-soft);background:var(--cp-control-hover);box-shadow:inset 0 -1px 0 var(--cp-dock-border);font-size:var(--footer-font-size);cursor:pointer;border:0;border-radius:999px;font-weight:500;line-height:1;transition:background-color .16s,color .16s,transform .16s}.controller-button svg,.playback-option svg:not(.duration-chevron){width:var(--footer-icon-size);height:var(--footer-icon-size)}.controller-button{width:var(--footer-control-size);place-items:center;padding:0;display:grid}.timeline-scrubber{height:var(--footer-control-size);background:var(--cp-control-hover);min-width:0;box-shadow:inset 0 -1px 0 var(--cp-dock-border);border-radius:999px;position:relative;overflow:hidden}.scrubber-fill{width:var(--progress);border-radius:inherit;background:var(--cp-dock-border);pointer-events:none;position:absolute;inset:0 auto 0 0}.scrubber-copy{-webkit-user-select:none;user-select:none;pointer-events:none;height:100%;color:var(--cp-control-text);grid-template-columns:6px minmax(0,1fr) 5ch;align-items:center;gap:12px;padding:0 18px;font-size:17px;font-weight:550;line-height:1;display:grid;position:relative}.scrubber-copy output{color:var(--cp-text-muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.scrubber-grip{background:var(--cp-border-strong);opacity:.4;border-radius:50%;height:14px}.scrubber-label{white-space:nowrap}.timeline-range{appearance:none;touch-action:none;opacity:0;cursor:grab;border:0;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.timeline-range::-webkit-slider-thumb{appearance:none;width:1px;height:var(--footer-control-size)}.timeline-range::-moz-range-thumb{width:1px;height:var(--footer-control-size);border:0}.timeline-range:active{cursor:grabbing}.timeline-scrubber:has(:focus-visible){outline:2px solid var(--cp-stage-ink);outline-offset:4px}.playback-options{flex:none;grid-template-columns:96px 96px 128px;gap:8px;display:grid}.playback-option{-webkit-user-select:none;user-select:none;white-space:nowrap;justify-content:center;align-items:center;gap:6px;min-width:0;padding:0 8px;display:flex;position:relative}.playback-option svg{pointer-events:none;flex-shrink:0}.playback-toggle input{opacity:0;width:100%;height:100%;cursor:inherit;margin:0;position:absolute;inset:0}.playback-toggle:has(:checked){background:var(--cp-control-text);color:var(--cp-selected-surface)}.playback-toggle:has(:focus-visible){outline:2px solid var(--cp-stage-ink);outline-offset:4px}.playback-option:disabled{opacity:.45;cursor:default}.playback-option:has(:disabled){opacity:.45;cursor:default}.playback-duration{text-align:left;font-variant-numeric:tabular-nums;justify-content:flex-start;width:100%;padding:0 26px 0 40px}.playback-duration[data-state=open]{background:var(--cp-control-divider);color:var(--cp-control-text)}.duration-icon,.duration-chevron{position:absolute;top:50%;transform:translateY(-50%)}.duration-icon{left:12px}.duration-chevron{right:12px}.playback-duration[data-state=open] .duration-chevron{transform:translateY(-50%)rotate(180deg)}.duration-menu{z-index:30;width:max(160px, var(--radix-select-trigger-width));max-width:calc(100vw - 24px);max-height:var(--radix-select-content-available-height);border:1px solid var(--cp-dock-border);background:var(--cp-stage-bg);color:var(--cp-control-text);box-shadow:var(--cp-dock-shadow);border-radius:8px;padding:4px;font-size:14px;font-weight:500;line-height:1;overflow:hidden}.duration-menu-item{-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:4px;outline:none;align-items:center;min-height:40px;padding:10px 36px 10px 12px;display:flex;position:relative}.duration-menu-item[data-highlighted]:not([data-state=checked]){background:var(--cp-control-hover)}.duration-menu-item[data-state=checked]{background:var(--cp-control-text);color:var(--cp-selected-surface)}.duration-check{place-items:center;display:grid;position:absolute;right:12px}.creator-credit{min-height:40px;color:var(--cp-control-text);white-space:nowrap;border-radius:4px;flex:none;align-items:center;gap:10px;margin-left:auto;font-size:12px;line-height:18px;text-decoration:none;display:flex}.creator-credit img{object-fit:cover;border-radius:50%;flex-shrink:0;width:32px;height:32px;display:block}.creator-prefix{color:var(--cp-text-soft)}.creator-name{font-weight:500}.creator-credit:hover .creator-name,.creator-credit:focus-visible .creator-name{text-underline-offset:3px;text-decoration:underline}:is(.controller-button,.playback-option,.key-pose,.source-link,.source-icon):active:not(:disabled):not(:has(:disabled)){transform:scale(.96)}@media (hover:hover){:is(.controller-button:hover:not(:disabled),.playback-option:hover:not(:disabled):not(:has(:checked,:disabled))){color:var(--cp-control-text);background:var(--cp-control-divider)}.timeline-scrubber:hover{background:var(--cp-control-divider)}}@media (width<=1050px){.study-page{padding:28px 24px 120px}.animation-layout{grid-template-columns:minmax(0,1fr);gap:28px;width:min(560px,100%)}.playback-footer{--footer-control-size:48px;--footer-icon-size:20px;--footer-font-size:13px;padding-inline:24px}.controls-wrap{gap:12px}.playback-options{grid-template-columns:var(--footer-control-size) var(--footer-control-size) 112px;gap:6px}.playback-toggle span,.scrubber-grip,.creator-prefix{display:none}.scrubber-copy{grid-template-columns:minmax(0,1fr) 5ch;gap:8px;padding:0 12px;font-size:14px}}@media (width<=640px){.playback-footer{--footer-control-size:36px;--footer-icon-size:18px;--footer-font-size:12px;padding:12px 16px max(12px, env(safe-area-inset-bottom))}.controls-wrap{gap:6px}.controls-dock{gap:4px}.playback-options{grid-template-columns:var(--footer-control-size) var(--footer-control-size) 76px;gap:4px}.playback-duration{padding:0 18px 0 8px}.duration-icon,.creator-copy,.scrubber-label{display:none}.creator-credit{gap:0;min-height:36px}.scrubber-copy{grid-template-columns:minmax(0,1fr);gap:0;padding:0 4px;font-size:12px}.scrubber-copy output{text-align:center}}@media (width<=520px){.study-page{padding:20px 16px 104px}}@media (width<=360px){.study-header,.study-body{padding-inline:16px}.motion-technique p{min-height:72px}.technique-apply{min-height:0}.playback-footer{--footer-control-size:28px;--footer-icon-size:16px;padding-inline:8px}.controls-wrap{gap:4px}.controls-dock{grid-template-columns:var(--footer-control-size) minmax(36px, 1fr) var(--footer-control-size)}.playback-options{grid-template-columns:var(--footer-control-size) var(--footer-control-size) 64px}.playback-duration{padding-inline:6px 16px}.duration-chevron{right:4px}.scrubber-copy{padding-inline:0}.creator-credit{min-height:32px}}@media (prefers-reduced-motion:reduce){.controller-button,.playback-option,.key-pose,.source-link,.source-icon{transition:none}}@media (forced-colors:active){.controller-button,.timeline-scrubber,.playback-option,.key-pose,.source-link,.source-icon{border:1px solid buttontext}.key-pose[aria-pressed=true]{outline-offset:-2px;outline:2px solid highlight}.playback-toggle:has(:checked){outline-offset:-2px;outline:2px solid highlight}}
