@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{--bg:#f5f5f3;--surface:#fff;--ink:#161718;--muted:#777a7d;--line:#dededb;--lime:#c4ff3c;--limeInk:#1c2a00;--stage:#edeeea}:root[data-theme=dark]{--bg:#0a0a0a;--surface:#111111;--ink:#f4f4f1;--muted:#9a9a97;--line:#292929;--stage:#0d0e0d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px Manrope,system-ui,sans-serif}button,input,select{font:inherit}.nav{height:72px;display:flex;align-items:center;gap:28px;max-width:1390px;padding:0 32px;margin:auto;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:500 8px/1.25 DM Mono;letter-spacing:.12em}.wordmark i{display:grid;place-items:center;width:29px;height:29px;background:var(--lime);color:#223400;border-radius:7px;font:800 10px Manrope;letter-spacing:-.05em}.wordmark b{font-weight:500}.nav nav{display:flex;gap:4px}.nav nav button,.theme{border:0;background:transparent;color:var(--muted);padding:7px 9px;cursor:pointer;font-size:11px}.nav nav button.active{color:var(--ink);font-weight:800}.search{display:flex;align-items:center;gap:8px;color:var(--muted);border-bottom:1px solid var(--line);padding:7px 0}.nav .search{width:230px;margin-left:auto}.search input{min-width:0;width:100%;border:0;background:transparent;outline:0;color:var(--ink);font-size:11px}.theme{border:1px solid var(--line);border-radius:7px;color:var(--ink)}main{max-width:1390px;margin:auto;padding:70px 32px}.intro{display:flex;align-items:end;justify-content:space-between;margin:0 0 34px}.kicker{margin:0;color:var(--muted);font:500 9px DM Mono;letter-spacing:.14em}.intro h1{max-width:660px;margin:9px 0 0;font-size:36px;line-height:1.1;letter-spacing:-.07em}.intro h1 em{font-style:normal;color:var(--muted)}.intro>p{max-width:250px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}.lab{display:grid;grid-template-columns:1.18fr .92fr 1.25fr;gap:14px}.module{position:relative;border-radius:13px;padding:1px;background:linear-gradient(135deg,#4a4a4a,#111 45%,#484848);box-shadow:0 12px 28px #00000014}.module:before{content:"";position:absolute;inset:1px;border-radius:12px;background:var(--surface);z-index:0}.module>*{position:relative;z-index:1}.module header{display:flex;align-items:start;gap:12px;padding:22px 22px 17px}.module header>span{display:grid;place-items:center;width:23px;height:23px;background:var(--lime);border-radius:5px;color:var(--limeInk);font:700 9px DM Mono}.module h2{margin:0;font-size:17px;letter-spacing:-.05em}.module header p{margin:3px 0 0;color:var(--muted);font-size:10px}.basic{min-height:490px}.basic-search{margin:0 22px 13px}.term-grid{display:grid;grid-template-columns:1fr 1fr;padding:0 14px}.term-choice{position:relative;min-height:68px;padding:12px 9px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;color:var(--ink);cursor:pointer}.term-choice:nth-child(odd){border-right:1px solid var(--line)}.term-choice b,.term-choice small{display:block}.term-choice b{font-size:11px}.term-choice small{margin-top:3px;color:var(--muted);font-size:9px}.term-choice i{position:absolute;right:9px;bottom:11px;color:var(--muted);font-style:normal}.term-choice.selected{background:var(--lime);color:var(--limeInk);border-color:var(--lime)}.term-choice.selected small,.term-choice.selected i{color:var(--limeInk)}.basic-footer{position:absolute;display:flex;justify-content:space-between;align-items:center;left:22px;right:22px;bottom:18px;color:var(--muted);font:9px DM Mono}.basic-footer button,.reset,.copy,.code-head button{border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:10px}.customize{min-height:490px}.term-tag{display:flex;justify-content:space-between;margin:0 22px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}.term-tag span{color:var(--muted);font:9px DM Mono}.parameter-list{padding:0 22px}.parameter{display:block;padding:15px 0;border-bottom:1px solid var(--line)}.parameter>span{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.parameter b{color:var(--muted);font:500 10px DM Mono}.parameter input{width:100%;margin:11px 0 4px;accent-color:#8ebd1b}.parameter small{color:var(--muted);font-size:9px}.parameter select{width:100%;margin-top:9px;padding:7px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font-size:10px}.reset{display:flex;justify-content:space-between;width:calc(100% - 44px);margin:15px 22px 0;padding:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:5px}.preview{overflow:hidden}.property-tabs{display:flex;flex-wrap:wrap;gap:5px;padding:0 22px 15px}.property-tabs button{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);padding:6px 8px;font:9px DM Mono;cursor:pointer}.property-tabs button.selected{border-color:var(--lime);background:var(--lime);color:var(--limeInk)}.stage{height:268px;display:grid;place-items:center;position:relative;margin:0 16px;background:var(--stage);overflow:hidden;border-radius:8px}.axis{position:absolute;background:color-mix(in srgb,var(--ink) 14%,transparent)}.axis.x{height:1px;left:0;right:0;top:50%}.axis.y{width:1px;top:0;bottom:0;left:50%}.stage-label{position:absolute;left:12px;top:11px;color:var(--muted);font:500 8px DM Mono;letter-spacing:.12em}.demo-card{z-index:1;width:160px;min-height:102px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:17px;box-shadow:0 18px 28px #0003;display:flex;flex-direction:column;align-items:flex-start;gap:7px}.demo-card strong{font-size:14px;letter-spacing:-.05em}.demo-card small{color:var(--muted);font:9px DM Mono}.demo-dot{width:10px;height:10px;border-radius:50%;background:var(--lime)}.demo-list{display:flex;gap:7px;z-index:1}.demo-list span{display:grid;place-items:center;width:35px;height:50px;border:1px solid var(--line);background:var(--surface);font:9px DM Mono}.origin-marker{z-index:2}.controls{display:flex;align-items:center;gap:7px;padding:15px 22px}.controls button{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}.controls .play{background:var(--lime);border-color:var(--lime);color:var(--limeInk)}.controls input{flex:1;accent-color:#8ebd1b}.controls select{padding:5px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font-size:10px}.knowledge{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:14px}.knowledge article{border-top:1px solid var(--line);padding:26px 0}.knowledge h2{margin:9px 0 13px;font-size:22px;letter-spacing:-.06em}.knowledge h2 small{color:var(--muted);font-size:12px;font-weight:500;letter-spacing:0}.knowledge p{max-width:600px;line-height:1.75;font-size:12px}.knowledge .definition{font-weight:700}.related{display:flex;gap:6px}.related button{border:1px solid var(--line);border-radius:20px;background:transparent;color:var(--ink);padding:6px 9px;cursor:pointer;font:9px DM Mono}.code-panel{position:relative;background:color-mix(in srgb,var(--ink) 4%,transparent);padding:20px!important;border-top:0!important;border-radius:9px}.code-head{display:flex;justify-content:space-between}.code-head button{color:var(--muted)}pre{min-height:128px;margin:17px 0 0;white-space:pre-wrap;word-break:break-word;font:10px/1.65 DM Mono;color:var(--ink)}.copy{position:absolute;right:18px;bottom:16px;border:1px solid var(--line);padding:7px 9px;border-radius:5px;background:var(--surface)}.empty{padding:10px;color:var(--muted);font-size:10px}@media(max-width:980px){main{padding:48px 22px}.lab{grid-template-columns:1fr 1fr}.preview{grid-column:span 2}.knowledge{grid-template-columns:1fr}.intro{align-items:start;gap:24px}.intro>p{margin-top:12px}}@media(max-width:650px){.nav{height:60px;padding:0 16px;gap:12px}.nav nav{display:none}.nav .search{width:auto;flex:1}.theme{font-size:0;border:0}.theme:first-letter{font-size:16px}.wordmark span{font-size:6px}.wordmark i{width:27px;height:27px}main{padding:36px 16px}.intro{display:block;margin-bottom:24px}.intro h1{font-size:29px}.intro>p{max-width:310px}.lab{display:block}.module{margin-bottom:12px}.basic,.customize{min-height:auto}.basic{padding-bottom:55px}.preview .stage{height:245px}.knowledge{margin-top:0}.knowledge article{padding:23px 0}.code-panel{min-height:220px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--bg:#f5f5f1;--surface:#fcfcfa;--ink:#18201d;--muted:#6e7771;--line:#d9ddd7;--lime:#c6f54b;--limeInk:#284000;--stage:#e9ede8}:root[data-theme=dark]{--bg:#141716;--surface:#1c211f;--ink:#edf0ea;--muted:#9aa39c;--line:#313834;--stage:#202622}.module{border-radius:10px;background:var(--line);box-shadow:none}.module:before{border-radius:9px}.preview-actions{display:flex;align-items:center;gap:6px;padding:0 22px 13px}.preview-actions button{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);padding:6px 7px;cursor:pointer;font:9px DM Mono}.preview-actions .play-again{margin-left:auto;color:var(--ink)}.preview-actions .toggle.active{background:var(--lime);border-color:var(--lime);color:var(--limeInk)}.preview-duration{display:block;margin:0 22px 14px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.preview-duration span{display:flex;justify-content:space-between;font-size:10px;font-weight:700}.preview-duration b{font:500 10px DM Mono;color:var(--muted)}.preview-duration input{width:100%;margin-top:8px;accent-color:#8ebd1b}.stage{gap:10px;padding:22px}.stage.compare-mode{grid-template-columns:1fr 1fr}.preview-lane{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:7px}.preview-lane>span{color:var(--muted);font:500 8px DM Mono;letter-spacing:.08em}.preview-track{position:relative;display:grid;place-items:center;flex:1;min-height:0;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:5px;background:color-mix(in srgb,var(--surface) 55%,transparent);overflow:hidden}.preview-track:before,.preview-track:after{content:"";position:absolute;background:color-mix(in srgb,var(--ink) 9%,transparent)}.preview-track:before{height:1px;left:0;right:0;top:50%}.preview-track:after{width:1px;top:0;bottom:0;left:50%}.preview-track .demo-card{position:relative;z-index:1}.stage:not(.compare-mode) .preview-lane{max-width:100%}.stage:not(.compare-mode) .preview-track{min-height:190px}@media(max-width:650px){.preview-actions{flex-wrap:wrap}.preview-actions .play-again{margin-left:0}.stage.compare-mode{grid-template-columns:1fr;height:390px}.stage.compare-mode .preview-lane{min-height:0}.stage.compare-mode .preview-track{min-height:130px}}.preview-duration span{align-items:center}.preview-duration span input{width:58px;margin:0 4px 0 auto;padding:3px 4px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);text-align:right;font:500 10px DM Mono}.preview-duration>input{width:100%;margin-top:8px;accent-color:#8ebd1b}.nav .theme{margin-left:auto}.basic-tabs{display:flex;gap:4px;padding:0 22px 13px;border-bottom:1px solid var(--line)}.basic-tabs button{border:0;border-radius:4px;background:transparent;color:var(--muted);padding:6px 7px;cursor:pointer;font:9px DM Mono}.basic-tabs button.active{background:var(--lime);color:var(--limeInk)}.basic .term-grid{padding-top:0}.basic-footer{justify-content:flex-start}.parameter-empty{padding:20px 0;color:var(--muted);font-size:10px;line-height:1.5}.preview-actions .play-again{margin-left:0}.preview-actions .toggle:last-child{margin-left:auto}.basic-tabs{overflow-x:auto;scrollbar-width:none}.basic-tabs::-webkit-scrollbar{display:none}.basic .term-grid{max-height:420px;overflow-y:auto;align-content:start}.basic{min-height:560px}.demo-sequence{position:relative;z-index:1;display:flex;gap:6px}.demo-sequence i{display:grid;place-items:center;width:34px;height:46px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--muted);font:500 9px DM Mono;font-style:normal}.basic-body{display:grid;grid-template-columns:112px minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.basic-tabs{display:flex;flex-direction:column;gap:2px;max-height:420px;padding:8px;border:0;border-right:1px solid var(--line);overflow-x:hidden;overflow-y:auto}.basic-tabs button{width:100%;padding:8px 9px;text-align:left;line-height:1.35}.basic-tabs button.active{position:relative}.basic-tabs button.active:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--limeInk)}.basic .term-grid{padding:0;max-height:420px}.basic-footer{bottom:14px}.mode-badge{color:var(--muted);font:500 8px DM Mono;letter-spacing:.12em}.manual-note{display:flex;align-items:center;gap:7px;padding:14px 22px;color:var(--muted);font:9px DM Mono}.manual-note i{color:var(--ink);font-size:14px}.preview[data-preview-mode=scroll] .stage,.preview[data-preview-mode=state] .stage,.preview[data-preview-mode=pointer] .stage{height:356px;padding:0}.scroll-demo{width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;outline:none;scroll-snap-type:y proximity}.scroll-demo::-webkit-scrollbar{display:none}.scroll-scene{position:relative;height:100%;min-height:100%;overflow:hidden;scroll-snap-align:start;background:linear-gradient(180deg,#a8d2e7,#dce9e5 52%,#b7ca9e)}.parallax-sky{position:absolute;inset:-60px 0 35%;background:linear-gradient(180deg,#7eb6d5,#dce9e5);will-change:transform}.parallax-orb{position:absolute;right:14%;top:17%;width:54px;height:54px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 12px #c6f54b26;will-change:transform}.parallax-hill{position:absolute;left:-12%;right:-12%;bottom:-15%;height:58%;border-radius:50% 50% 0 0;will-change:transform}.parallax-hill.far{bottom:-4%;background:#759b78;clip-path:polygon(0 45%,25% 0,47% 48%,72% 7%,100% 50%,100% 100%,0 100%)}.parallax-hill.near{background:#365c48;clip-path:polygon(0 42%,18% 16%,36% 50%,62% 3%,81% 38%,100% 16%,100% 100%,0 100%)}.scroll-copy{position:sticky;z-index:3;top:28px;display:flex;flex-direction:column;align-items:flex-start;width:68%;margin:0 0 0 28px;padding-top:28px;color:#13251c}.scroll-copy small{font:500 8px DM Mono;letter-spacing:.15em}.scroll-copy strong{margin-top:7px;font-size:24px;letter-spacing:-.05em}.scroll-copy span{margin-top:5px;font-size:10px}.scroll-driven-object{position:absolute;z-index:2;left:50%;top:60%;display:grid;place-items:center;width:128px;height:128px;border:1px solid rgba(19,37,28,.24);border-radius:28px;background:#ffffffb8;color:#13251c;box-shadow:0 18px 40px #13251c29;transform:translate(-50%,-50%) scale(.75);will-change:transform}.scroll-driven-object i{position:absolute;left:13px;top:13px;bottom:13px;width:3px;border-radius:3px;background:#365c48;transform:scaleY(0);transform-origin:bottom}.scroll-driven-object b{font:700 22px DM Mono}.scroll-driven-object span{font:7px DM Mono;letter-spacing:.12em}.reveal-scene{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:34px;background:var(--stage)}.reveal-scene article{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:7px;box-shadow:0 10px 24px #00000014;will-change:transform,opacity}.reveal-scene article i{grid-row:span 2;color:var(--muted);font:9px DM Mono;font-style:normal}.reveal-scene article b{font-size:12px}.reveal-scene article span{color:var(--muted);font:8px DM Mono}.scroll-meter{position:absolute;z-index:5;left:14px;right:14px;bottom:12px;height:18px;display:flex;align-items:end;gap:8px;pointer-events:none}.scroll-meter:before{content:"";position:absolute;left:0;right:34px;bottom:3px;height:2px;background:#ffffff59}.scroll-meter i{position:relative;width:calc(100% - 34px);height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left}.scroll-meter span{margin-left:auto;color:#fff;font:8px DM Mono}.state-demo{position:relative;width:calc(100% - 44px);height:calc(100% - 44px);padding:0;border:0;border-radius:8px;background:#26342e;color:#fff;overflow:hidden;cursor:pointer;text-align:left}.state-page{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .35s}.state-page i{display:grid;place-items:center;width:30px;height:30px;margin-bottom:auto;border-radius:50%;background:var(--lime);color:var(--limeInk);font:700 11px DM Mono;font-style:normal}.state-page strong{font-size:24px;letter-spacing:-.05em}.state-page small{margin-top:5px;color:#ffffff9e}.state-page .shared-object{position:absolute;right:24px;top:30px;width:58px;height:58px;border-radius:12px;background:var(--lime);transition:all .65s cubic-bezier(.22,1,.36,1)}.state-b{background:var(--lime);color:var(--limeInk);transform:translate(100%)}.state-b i{background:#26342e;color:#fff}.state-b small{color:#284000a6}.state-demo.active .state-a{transform:translate(-28%);opacity:0}.state-demo.active .state-b,.state-demo.crossfade .state-a{transform:none}.state-demo.crossfade .state-b{transform:none;opacity:0}.state-demo.crossfade.active .state-a{opacity:0}.state-demo.crossfade.active .state-b{opacity:1}.state-demo.morph .state-a .shared-object{border-radius:50%}.state-demo.morph .state-b .shared-object{width:108px;height:42px;border-radius:21px;background:#26342e}.state-demo.shared-element-transition .state-a .shared-object,.state-demo.continuity-transition .state-a .shared-object{left:24px;right:auto;top:30px}.state-demo.shared-element-transition .state-b .shared-object,.state-demo.continuity-transition .state-b .shared-object{right:24px;top:145px;background:#26342e;transform:scale(1.45)}.state-demo.layout-animation .state-a .shared-object{left:24px;right:auto}.state-demo.layout-animation .state-b .shared-object{left:50%;right:auto;top:50%;transform:translate(-50%,-50%) rotate(90deg);background:#26342e}.state-demo.accordion-collapse .state-a .shared-object{left:24px;right:24px;top:70px;width:auto;height:5px}.state-demo.accordion-collapse .state-b .shared-object{left:24px;right:24px;top:70px;width:auto;height:105px;border-radius:8px;background:#26342e}.pointer-demo{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%}.pointer-track{display:grid;place-items:center;width:calc(100% - 44px);height:220px;border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);border-radius:8px;background:color-mix(in srgb,var(--surface) 55%,transparent)}.pointer-object{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:142px;padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 12px 25px #0000001f;cursor:grab;touch-action:none;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}.pointer-object:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 20px 32px #0000002e}.pointer-object.pressed{cursor:grabbing;transform:scale(.94);transition:none}.pointer-object i{font-size:22px;color:#83ad19}.pointer-object strong{font-size:14px}.pointer-object span,.pointer-demo>small{color:var(--muted);font:8px DM Mono}.pointer-object{position:relative;overflow:hidden}.hold-progress{position:absolute!important;left:0;bottom:0;width:100%;height:4px;background:var(--lime);transform:scaleX(0);transform-origin:left}.pointer-object.holding .hold-progress{animation:hold-progress 1.2s linear forwards}@keyframes hold-progress{to{transform:scaleX(1)}}.ripple-wave{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--lime);animation:ripple-wave .55s ease-out forwards}@keyframes ripple-wave{to{transform:scale(9);opacity:0}}.reorder-list{display:flex;flex-direction:column;gap:7px;width:78%}.reorder-list .pointer-object{width:100%;min-width:0;padding:12px 16px;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;text-align:left}.reorder-list .pointer-object i{grid-row:span 2}.reorder-list .pointer-object strong,.reorder-list .pointer-object span{align-self:center}.compare-slider{position:relative;width:calc(100% - 44px);height:calc(100% - 44px);border-radius:8px;overflow:hidden}.compare-after,.compare-before{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#d8ff73,#5d8d67);color:#1f351d;font:700 22px DM Mono}.compare-before{background:linear-gradient(135deg,#7d8581,#29332f);color:#fff;clip-path:inset(0 50% 0 0)}.compare-slider>i{position:absolute;z-index:2;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translate(-1px);pointer-events:none}.compare-slider>input{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.special-scene{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:220px;overflow:hidden}.marquee-scene{display:flex;background:#24312b}.marquee-track{display:flex;flex:none;width:max-content;white-space:nowrap}.marquee-track span{padding:0 22px;color:var(--lime);font:700 22px DM Mono}.orbit-scene{background:radial-gradient(circle at center,color-mix(in srgb,var(--lime) 12%,transparent),transparent 48%)}.orbit-path{position:absolute;width:150px;height:150px;border:1px solid var(--line);border-radius:50%}.orbit-path i{position:absolute;left:50%;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 8px color-mix(in srgb,var(--lime) 18%,transparent)}.orbit-path span{position:absolute;inset:48px;border-radius:50%;background:var(--surface);border:1px solid var(--line)}.orbit-scene>b{font:700 11px DM Mono}.ambient-object,.effect-shape{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 18px 34px #00000024}.ambient-object i,.effect-shape i{width:18px;height:18px;border-radius:50%;background:var(--lime)}.ambient-object small,.effect-shape small{color:var(--muted);font:8px DM Mono}.blur-scene{background:linear-gradient(135deg,#283a31,#85aa82)}.effect-poster{display:flex;flex-direction:column;justify-content:flex-end;width:210px;height:150px;padding:20px;border-radius:12px;background:linear-gradient(160deg,var(--lime),#5d8d67);color:#19301e;box-shadow:0 20px 35px #0003}.effect-poster small{margin-bottom:auto;font:8px DM Mono}.effect-poster strong{font-size:30px;letter-spacing:-.07em}.effect-poster span{font-size:9px}.masked-art{display:flex;align-items:flex-end;width:210px;height:170px;padding:20px;background:linear-gradient(135deg,var(--lime),#32644c);color:#16321f}.masked-art i{position:absolute;width:70px;height:70px;border-radius:50%;background:#ffffff40}.masked-art strong{position:relative;font-size:20px}.line-scene svg{width:78%;max-width:300px}.line-scene path{fill:none;stroke:var(--lime);stroke-width:6;stroke-linecap:round}.skeleton-card{position:relative;width:230px;height:150px;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}.skeleton-card>i,.skeleton-card>b{display:block;background:color-mix(in srgb,var(--ink) 10%,transparent);border-radius:5px}.skeleton-card>i{width:46px;height:46px;margin-bottom:15px}.skeleton-card>b{width:92%;height:9px;margin-top:9px}.skeleton-card>b:nth-of-type(2){width:72%}.skeleton-card>b:nth-of-type(3){width:48%}.shimmer{position:absolute;inset:-30% auto -30% 0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:skew(-14deg)}.ticker-scene{display:flex;flex-direction:column;gap:12px}.ticker-window{height:50px;overflow:hidden;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.ticker-strip{display:flex;flex-direction:column}.ticker-strip b{height:50px;display:grid;place-items:center;font:700 26px DM Mono;font-variant-numeric:tabular-nums}.ticker-scene>span,.type-scene>span{color:var(--muted);font:8px DM Mono;letter-spacing:.12em}.type-scene{display:flex;flex-direction:column;gap:14px}.type-line{width:0;max-width:248px;overflow:hidden;white-space:nowrap;border-right:2px solid var(--lime)}.type-line strong{font-size:22px;letter-spacing:-.04em}.text-morph-scene strong{position:absolute;font-size:32px;letter-spacing:-.08em}.word-b{color:#79a91a}.timing-demo{display:flex;flex-direction:column;gap:8px;width:82%;position:relative;z-index:1}.timing-ruler{display:flex;justify-content:space-between;color:var(--muted);font:7px DM Mono}.timing-ruler i{font-style:normal}.timing-path{position:relative;height:52px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),color-mix(in srgb,var(--ink) 8%,transparent) 25%)}.timing-path span{position:absolute;left:8px;top:13px;width:24px;height:24px;border-radius:6px;background:var(--lime);box-shadow:0 7px 14px #00000024}.timing-demo>small{text-align:center;color:var(--muted);font:8px DM Mono}.state-demo{display:block}.state-hint{position:absolute;z-index:8;right:14px;top:12px;color:#ffffff94;font:7px DM Mono;letter-spacing:.08em}.continuity-list,.continuity-detail,.shared-gallery,.shared-detail{position:absolute;display:grid;text-align:left;transition:all .65s cubic-bezier(.22,1,.36,1)}.continuity-list{left:24px;right:24px;top:70px;grid-template-columns:52px 1fr;gap:4px 12px;padding:14px;border-radius:8px;background:#fff;color:#203129}.continuity-list i,.continuity-detail i{grid-row:span 2;border-radius:6px;background:linear-gradient(135deg,var(--lime),#6e946f)}.continuity-list b,.continuity-detail b,.shared-gallery b,.shared-detail b{align-self:end}.continuity-list small,.continuity-detail small,.shared-gallery small,.shared-detail small{align-self:start;color:#718078}.continuity-detail{inset:28px;padding:24px;grid-template-columns:1fr;grid-template-rows:110px auto auto;gap:8px;border-radius:10px;background:#fff;color:#203129;opacity:0;transform:translateY(18px)}.continuity-transition.active .continuity-list{opacity:0;transform:scale(.82) translateY(-32px)}.continuity-transition.active .continuity-detail{opacity:1;transform:none}.morph-shape{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--limeInk);transform:translate(-50%,-50%);transition:all .7s cubic-bezier(.22,1,.36,1)}.morph-shape b{width:0;overflow:hidden;opacity:0;transition:.35s}.morph-copy{position:absolute;left:30px;right:30px;bottom:28px;color:#ffffff94;font-size:9px}.morph.active .morph-shape{width:240px;height:126px;border-radius:16px}.morph.active .morph-shape b{width:60px;margin-left:8px;opacity:1}.morph.active .morph-shape>i{transform:rotate(45deg)}.shared-photo{position:absolute;z-index:3;left:28px;top:54px;width:118px;height:82px;background:linear-gradient(150deg,#c8edff 0 42%,#779f77 43% 67%,#345842 68%);border-radius:7px;transition:all .72s cubic-bezier(.22,1,.36,1)}.shared-gallery{left:28px;top:144px;width:150px;grid-template-rows:auto auto;gap:5px}.shared-gallery small,.shared-detail small{color:#ffffff85}.shared-detail{left:22px;right:22px;top:184px;display:grid;grid-template-rows:auto auto;gap:5px;opacity:0}.shared-element-transition.active .shared-photo{left:22px;top:22px;width:calc(100% - 44px);height:150px;border-radius:10px}.shared-element-transition.active .shared-gallery{opacity:0;transform:translateY(28px)}.shared-element-transition.active .shared-detail{opacity:1}.layout-items{position:absolute;left:50%;top:50%;display:grid;grid-template-columns:repeat(2,70px);gap:8px;transform:translate(-50%,-50%)}.layout-items i{display:grid;place-items:center;height:58px;border-radius:7px;background:var(--lime);color:var(--limeInk);font:700 11px DM Mono;font-style:normal;transition:all .6s cubic-bezier(.22,1,.36,1)}.layout-animation.active .layout-items{grid-template-columns:180px}.layout-animation.active .layout-items i{height:28px}.layout-copy{position:absolute;left:24px;bottom:18px;font:8px DM Mono}.accordion-row{position:absolute;left:24px;right:24px;top:52px;display:grid;grid-template-columns:1fr 20px;max-height:48px;padding:14px 15px;border-radius:7px;background:#fff;color:#203129;text-align:left;overflow:hidden;transition:max-height .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}.accordion-row i{transition:transform .4s}.accordion-row small{grid-column:1/-1;margin-top:14px;line-height:1.5;color:#69756f}.accordion-row.muted{opacity:.62}.accordion-row.row-2{top:104px}.accordion-row.row-3{top:156px}.accordion-row.row-4{top:208px}.accordion-collapse.active .accordion-row.primary{max-height:106px}.accordion-collapse.active .accordion-row.primary i{transform:rotate(180deg)}.accordion-collapse.active .accordion-row.muted{transform:translateY(54px)}.direction-page{position:absolute;inset:40px 24px 48px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;border-radius:8px;background:#fff;color:#203129;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .35s;text-align:left}.direction-page i{margin-bottom:auto;font:700 10px DM Mono;font-style:normal}.page-two{transform:translate(115%);background:var(--lime)}.direction-aware-transition.active .page-one{transform:translate(-115%)}.direction-aware-transition.active .page-two{transform:none}.direction-copy{position:absolute;left:24px;bottom:18px;color:#ffffff8c;font:8px DM Mono}.browser-chrome{position:absolute;z-index:4;left:24px;right:24px;top:28px;height:30px;display:flex;align-items:center;gap:5px;padding:0 10px;border-radius:9px 9px 0 0;background:#e9ece8}.browser-chrome i{width:6px;height:6px;border-radius:50%;background:#8d9892}.page-surface{position:absolute;inset:58px 24px 24px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:#fff;color:#203129;text-align:left;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .35s}.page-surface b{font-size:23px}.page-surface small{color:#78847d}.page-b{transform:translateY(110%);background:var(--lime)}.page-transition.active .page-a{transform:translateY(-110%)}.page-transition.active .page-b{transform:none}.view-shell{position:absolute;inset:24px;border-radius:8px;background:#fff;color:#203129;overflow:hidden;text-align:left}.view-shell nav{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #dfe4df;font-weight:700}.view-shell nav i{font-weight:400;font-style:normal;color:#738078}.view-content{position:absolute;inset:38px 0 0;padding:16px;transition:opacity .4s,transform .6s cubic-bezier(.22,1,.36,1)}.view-content b{display:block;margin-bottom:12px}.view-a i{display:inline-block;width:30%;height:70px;margin-right:3%;border-radius:6px;background:linear-gradient(135deg,#d6f5df,#73a37a)}.view-b{opacity:0;transform:translateY(12px)}.view-b i{display:block;height:92px;margin-bottom:10px;border-radius:7px;background:linear-gradient(135deg,var(--lime),#659270)}.view-b small{color:#6c7972}.view-transition.active .view-a{opacity:0;transform:scale(.96)}.view-transition.active .view-b{opacity:1;transform:none}.reveal-scene{min-height:125%;justify-content:flex-start;padding:62px 34px;gap:16px}.reveal-scene article{flex:none;width:100%;opacity:0}.scroll-spacer{display:grid;place-items:center;background:linear-gradient(180deg,#b7ca9e,#365c48);color:#ffffffa6;font:8px DM Mono}.principle-scene{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 86%,transparent),color-mix(in srgb,var(--lime) 8%,var(--stage)))}.principle-scene>small{position:absolute;left:24px;right:24px;bottom:18px;text-align:center;color:var(--muted);font:8px DM Mono}.action-track{position:relative;width:76%;height:80px;border-bottom:1px solid var(--line)}.action-track>i{position:absolute;right:10px;bottom:-4px;width:7px;height:7px;border-radius:50%;background:var(--line)}.principle-object{position:absolute;left:32%;bottom:8px;display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:var(--lime);color:var(--limeInk)}.follow-object{position:relative;width:260px;height:90px}.follow-object b,.follow-object i{position:absolute;left:105px;top:24px;border-radius:50%;background:var(--lime)}.follow-object b{z-index:3;width:52px;height:52px}.follow-object i{top:34px;width:30px;height:30px;background:#7da531}.follow-object i:nth-of-type(1){margin-left:-25px}.follow-object i:nth-of-type(2){margin-left:-48px;opacity:.72}.follow-object i:nth-of-type(3){margin-left:-68px;opacity:.45}.ground-line{position:absolute;left:22%;right:22%;top:74%;height:2px;background:var(--line)}.squash-ball{position:absolute;top:47%;width:62px;height:62px;border-radius:50%;background:var(--lime);box-shadow:0 14px 25px #00000024}.count-scene{display:flex;flex-direction:column;gap:8px;background:linear-gradient(145deg,#1d3128,#3f6b51);color:#fff}.count-scene small{font:8px DM Mono;letter-spacing:.13em;color:#ffffff8c}.count-scene strong{font:700 34px DM Mono;font-variant-numeric:tabular-nums}.count-scene span{font:8px DM Mono;color:var(--lime)}.count-scene i{width:150px;height:2px;background:var(--lime)}.tabular-scene{grid-template-columns:1fr 1fr;gap:14px;padding:22px}.numeric-compare{width:100%;padding:13px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.numeric-compare>small{display:block;margin-bottom:9px;color:var(--muted);font:7px DM Mono}.numeric-compare span{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid var(--line);font-size:10px}.numeric-compare span b{font-size:8px;color:var(--muted)}.numeric-compare span i{font-style:normal}.proportional-column span i{font-variant-numeric:proportional-nums}.tabular-column span i{font-family:DM Mono,monospace;font-variant-numeric:tabular-nums}.tabular-scene>em{grid-column:1/-1;color:var(--muted);text-align:center;font:8px DM Mono;font-style:normal}.reference-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.reference-points div{padding:12px;border-left:2px solid var(--lime);background:color-mix(in srgb,var(--ink) 3%,transparent)}.reference-points b,.reference-points span{display:block}.reference-points b{margin-bottom:5px;font-size:9px}.reference-points span{color:var(--muted);font-size:10px;line-height:1.5}@media(max-width:650px){.reference-points{grid-template-columns:1fr}.tabular-scene{grid-template-columns:1fr;overflow-y:auto}.tabular-scene>em{grid-column:1}.state-demo{width:calc(100% - 28px);height:calc(100% - 28px)}}.staging-cast{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}.staging-cast>i{display:grid;place-items:center;width:58px;height:78px;border-radius:28px 28px 12px 12px;background:var(--muted);font-style:normal}.staging-cast .staging-focus{background:var(--lime);color:var(--limeInk);box-shadow:0 0 0 12px color-mix(in srgb,var(--lime) 14%,transparent)}.staging-focus b{font:800 20px Manrope}.arcs-scene svg{position:absolute;width:78%;max-width:320px}.arcs-scene path{fill:none;stroke:var(--lime);stroke-width:3;stroke-dasharray:6 5}.arcs-scene line{stroke:var(--line);stroke-width:1}.arc-object{position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;background:var(--lime);box-shadow:0 8px 18px #00000029}.secondary-card{position:relative;display:flex;align-items:center;width:170px;height:82px;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 16px 30px #00000021}.secondary-card strong{font-size:13px}.secondary-card i{position:absolute;right:-9px;top:-9px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--limeInk);font:700 9px DM Mono;font-style:normal}.timing-principle-scene{display:flex;flex-direction:column;justify-content:center;gap:22px;padding-bottom:24px}.timing-row{position:relative;width:72%;height:34px;border-bottom:1px solid var(--line)}.timing-row b{position:absolute;left:0;bottom:8px;color:var(--muted);font:7px DM Mono}.timing-row span{position:absolute;left:50%;bottom:5px;width:24px;height:24px;border-radius:6px;background:var(--lime)}.exaggeration-scene{grid-template-columns:1fr 1fr;gap:18px;padding-bottom:24px}.exaggeration-scene>div{position:relative;display:grid;place-items:center;width:120px;height:135px;border-bottom:1px solid var(--line)}.exaggeration-scene>div>b{position:absolute;top:4px;color:var(--muted);font:7px DM Mono}.exaggeration-scene>div>span{position:absolute;bottom:12px;width:46px;height:46px;border-radius:10px;background:var(--lime)}.appeal-scene{grid-template-columns:1fr 1fr;gap:34px;padding-bottom:24px}.plain-object,.appeal-object{position:relative;width:82px;height:100px}.plain-object i{position:absolute;inset:10px;border-radius:8px;background:var(--muted);opacity:.5}.appeal-object{border-radius:38px 38px 18px 18px;background:var(--lime);box-shadow:0 14px 28px color-mix(in srgb,var(--lime) 22%,transparent)}.appeal-object>i{position:absolute;left:50%;top:-12px;width:22px;height:32px;border-radius:50% 50% 20% 20%;background:#7ca52f;transform:translate(-50%) rotate(12deg)}.appeal-object>b{position:absolute;left:18px;right:18px;top:34px;display:flex;justify-content:space-between}.appeal-object>b em{width:8px;height:12px;border-radius:50%;background:var(--limeInk)}.appeal-object>span{position:absolute;left:27px;right:27px;bottom:24px;height:10px;border-bottom:3px solid var(--limeInk);border-radius:50%}@media(max-width:650px){.basic-body{grid-template-columns:100px minmax(0,1fr)}.basic-tabs,.basic .term-grid{max-height:380px}.basic .term-grid{grid-template-columns:1fr}.term-choice:nth-child(odd){border-right:0}.preview[data-preview-mode=scroll] .stage,.preview[data-preview-mode=state] .stage,.preview[data-preview-mode=pointer] .stage{height:340px}}