.effort-demo{margin:32px 0 36px}.effort-demo .ef-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:228px;padding:48px 20px;border-radius:14px;background:var(--plate);box-shadow:inset 0 0 0 1px var(--hair);font:400 15px/1.55 var(--sans);-webkit-tap-highlight-color:transparent}.effort-demo figcaption{margin-top:10px;text-align:center;font-size:.8rem;line-height:1.5;color:var(--muted)}.effort-demo figcaption a{color:inherit}@media(prefers-color-scheme:dark){.effort-demo .ef-stage{background:#0f0f0f}}.effort-demo .ef-look{display:grid;justify-items:center;width:min(100%,320px)}.effort-demo .is-light{--panel: #ffffff;--line: #e4e4e7;--fg: #09090b;--muted: #71717a;--soft: #a1a1aa;--faint: #a1a1aa;--track: #f4f4f5;--hair: rgb(0 0 0 / .05);--tick: #d4d4d8;--tick-on: rgb(255 255 255 / .9);--shadow: 0 10px 24px -8px rgb(0 0 0 / .18), 0 2px 6px -2px rgb(0 0 0 / .1);--rain-l: .6;--focus: #2347ff}.effort-demo .is-dark{--panel: #171717;--line: #232323;--fg: #e6e6e6;--muted: #858585;--soft: #6e6e6e;--faint: #5e5e5e;--track: #262626;--hair: rgb(255 255 255 / .03);--tick: #505050;--tick-on: rgb(255 255 255 / .45);--shadow: 0 12px 30px -12px rgb(0 0 0 / .8);--rain-l: .8;--focus: #8baec3}.effort-demo.v-hole{--c1: #f6c08a;--c2: #c25a1e;--night: radial-gradient(circle at 94% 50%, #2b1306, #060507 60%);--name-l: #b45f0c;--name-d: #ffb45e}.effort-demo.v-aurora{--c1: #9ff5cf;--c2: #19b98a;--night: linear-gradient(180deg, #071526, #03090f);--name-l: #0f8a63;--name-d: #7cf2c0}.effort-demo.v-star{--c1: #f5b4ea;--c2: #9d6bff;--night: linear-gradient(180deg, #1c0e36, #0e0721);--name-l: #a03cc6;--name-d: #f2b2f5}.effort-demo.v-pixel{--c1: #9fd4ff;--c2: #4a7dff;--night: linear-gradient(180deg, #0d1a3d, #070c22);--name-l: #1b6ad0;--name-d: #8fc3e6}.effort-demo.v-rock{--c1: #e6b48a;--c2: #a0602f;--night: linear-gradient(180deg, #2a2d36, #1e2027);--name-l: #b8561c;--name-d: #ffb27a}.effort-demo.v-eureka{--c1: #a9b9ff;--c2: #2347ff;--night: linear-gradient(180deg, #0b1757, #060c35);--name-l: #2347ff;--name-d: #93a6ff}.effort-demo.v-lab{--c1: #a9b9ff;--c2: #2347ff;--night: linear-gradient(180deg, #08104a, #050a3a);--name-l: #2347ff;--name-d: #8fa2ff}.effort-demo.v-think,.effort-demo.v-swarm{--c1: #f0b59b;--c2: #d97757;--night: linear-gradient(180deg, #25211d, #161412);--name-l: #c0532d;--name-d: #f0a07c}.effort-demo .menu{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:4px;color:var(--fg);text-align:left}.effort-demo .effort{padding:12px 12px 8px}.effort-demo .ehead{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;line-height:1.2;color:var(--muted)}.effort-demo .elab{display:inline-grid;font-size:13px;font-weight:600;color:var(--fg)}.effort-demo .elab>span{grid-area:1 / 1;white-space:nowrap}.effort-demo .is-light .named{color:var(--name-l)}.effort-demo .is-dark .named{color:var(--name-d)}.effort-demo .ehelp{margin-left:auto;color:var(--faint);flex:none}.effort-demo .eends{display:flex;justify-content:space-between;font-size:11.5px;line-height:1.2;color:var(--soft);margin:10px 0 7px}.effort-demo .erail{--thumb: calc(13px + var(--e) * (100% - 26px));position:relative;height:30px}.effort-demo .etrack{position:absolute;inset:0;border-radius:9px;overflow:hidden;background:var(--track);box-shadow:inset 0 0 0 1px var(--hair)}.effort-demo .etrack>*{position:absolute;pointer-events:none}.effort-demo .ecool{--tone: color-mix(in oklch, var(--c1), var(--c2) calc(var(--e) * 100%));top:0;bottom:0;left:0;width:calc(var(--thumb) + 11px);border-radius:9px;background:linear-gradient(90deg,color-mix(in oklch,var(--tone) 8%,var(--track)),color-mix(in oklch,var(--tone) 72%,var(--track)));opacity:calc(1 - var(--h));transition:width .22s cubic-bezier(.2,.85,.3,1),opacity .18s}.effort-demo .edark{inset:0;background:var(--night);opacity:var(--h);transition:opacity .18s}.effort-demo .efx{inset:0;width:100%;height:100%;opacity:var(--h);transition:opacity .2s}.effort-demo .eticks{inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 11.5px;transition:opacity .3s .1s}.effort-demo .eticks i{width:3px;height:3px;border-radius:50%;background:var(--tick)}.effort-demo .eticks i.rec{width:2px;height:10px;border-radius:2px;margin-inline:.5px}.effort-demo .eticks i.on{background:var(--tick-on)}.effort-demo .is-top .eticks{opacity:0;transition:none}.effort-demo .eglow{position:absolute;z-index:1;left:-48px;top:-48px;width:calc(100% + 96px);height:calc(100% + 96px);pointer-events:none;opacity:var(--h);transition:opacity .25s}.effort-demo .ethumb{position:absolute;z-index:2;top:50%;left:var(--thumb);translate:-50% -50%;display:grid;place-items:center;pointer-events:none;transition:left .22s cubic-bezier(.2,.85,.3,1)}.effort-demo .ethumb svg{display:block;overflow:visible;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .2));transition:opacity .2s,scale .2s,filter .3s}.effort-demo .ethumb.pop{animation:ef-pop .55s cubic-bezier(.2,.9,.3,1.25)}@keyframes ef-pop{0%{scale:1;filter:none}30%{scale:1.32;filter:brightness(1.9)}to{scale:1;filter:none}}.effort-demo .erail input{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab}.effort-demo .erail input:active{cursor:grabbing}.effort-demo .erail input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;background:transparent;border:0}.effort-demo .erail input::-moz-range-thumb{width:26px;height:26px;background:transparent;border:0}.effort-demo .erail input:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px}.effort-demo .erec{position:relative;height:15px;margin-top:7px;font-size:11px;line-height:15px;color:var(--soft)}.effort-demo .erec span{position:absolute;left:calc(13px + (100% - 26px)/5);translate:-50% 0;white-space:nowrap}.effort-demo.v-hole .is-top .ethumb svg{opacity:0}.effort-demo.v-aurora .is-top .ethumb svg{filter:drop-shadow(0 0 3px rgb(200 255 225 / .7))}.effort-demo.v-star .is-top .ethumb svg{animation:ef-spin 9s linear infinite;filter:drop-shadow(0 0 4px rgb(255 190 240 / .95))}@keyframes ef-spin{to{rotate:360deg}}.effort-demo.v-pixel .streaks{transition:opacity .2s}.effort-demo.v-pixel .is-top .streaks{opacity:0}.effort-demo.v-pixel .is-top .ethumb svg{filter:drop-shadow(0 0 3px rgb(170 225 255 / .95))}.effort-demo.v-rock .heat{opacity:0;transition:opacity .3s}.effort-demo.v-rock .is-top .heat{opacity:1}.effort-demo.v-rock .is-top .ethumb svg{animation:ef-tumble 2.8s ease-in-out infinite alternate;filter:drop-shadow(0 0 1.5px rgb(255 196 150 / .95)) drop-shadow(0 0 5px rgb(255 96 48 / .7))}@keyframes ef-tumble{0%{rotate:-9deg;translate:0 -.5px}to{rotate:8deg;translate:0 .5px}}.effort-demo.v-eureka .liq{translate:0 calc((1 - var(--e)) * 5px);transition:translate .3s,fill .3s}.effort-demo.v-eureka .glass{transition:stroke .3s}.effort-demo.v-eureka .bb{fill:#fff;opacity:0}.effort-demo.v-eureka .is-top .liq{fill:#6f8cff}.effort-demo.v-eureka .is-top .glass{stroke:#b4c2ff}.effort-demo.v-eureka .is-top .bb{animation:ef-rise 1.1s ease-in infinite}.effort-demo.v-eureka .is-top .b2{animation-delay:-.4s}.effort-demo.v-eureka .is-top .b3{animation-delay:-.75s}.effort-demo.v-eureka .is-top .ethumb svg{filter:drop-shadow(0 0 4px rgb(140 165 255 / .9))}@keyframes ef-rise{0%{translate:0 0;opacity:0}25%{opacity:.95}to{translate:0 -7px;opacity:0}}.effort-demo .ethumb.kick .llmark{animation:ef-llkick .26s ease-out}@keyframes ef-llkick{0%{scale:1}35%{scale:1.14}to{scale:1}}@property --ef-hue{syntax: "<number>"; inherits: true; initial-value: 0;}.effort-demo .elab .rain{animation:ef-hue 3.2s linear infinite}.effort-demo .elab .rain span{color:oklch(var(--rain-l) .16 calc(var(--ef-hue) + var(--i) * 30))}@keyframes ef-hue{to{--ef-hue: 360}}.effort-demo .clawd{transform-origin:50% 100%}.effort-demo .clawd .legs-b{opacity:0}.effort-demo .clawd .eyes{transform-box:fill-box;transform-origin:center;animation:ef-blink 3.8s infinite}.effort-demo .is-top .clawd{animation:ef-bob .34s linear infinite}.effort-demo .ethumb.pop .clawd{animation:ef-hop .5s cubic-bezier(.3,.7,.4,1)}.effort-demo .ethumb.kick .clawd{animation:ef-kick .26s ease-out}.effort-demo .is-top .ethumb .clawd{filter:drop-shadow(0 0 3px rgb(240 150 110 / .7))}.effort-demo.v-think .is-top .clawd .legs-a{animation:ef-legs .34s linear infinite}.effort-demo.v-think .is-top .clawd .legs-b{animation:ef-legs .34s linear infinite -.17s}@keyframes ef-blink{0%,93%,to{scale:1 1}95%{scale:1 .1}}@keyframes ef-bob{0%,50%{translate:0 0}50.01%,to{translate:0 -1px}}@keyframes ef-hop{0%{translate:0 0;scale:1 1}15%{translate:0 1px;scale:1.12 .82}45%{translate:0 -8px;scale:.94 1.08}75%{translate:0 0;scale:1.08 .9}to{translate:0 0;scale:1 1}}@keyframes ef-kick{0%{scale:1 1}35%{scale:1.12 .84}to{scale:1 1}}@keyframes ef-legs{0%,50%{opacity:1}50.01%,to{opacity:0}}@media(prefers-reduced-motion:reduce){.effort-demo *,.effort-demo *:before,.effort-demo *:after{animation:none!important;transition:none!important}}
