.word-hero{--start:50vh;--space:50vh;--hue:280;--accent:var(--lightningcss-light,hsl(var(--hue) 100% 50%))var(--lightningcss-dark,hsl(var(--hue) 90% 75%));--switch:canvas;--font-size-min:14;--font-size-max:20;--font-ratio-min:1.1;--font-ratio-max:1.33;--font-width-min:375;--font-width-max:1500;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;isolation:isolate;color:canvastext;background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);padding-bottom:clamp(1rem,2.5vw,2rem);position:relative}@media (prefers-color-scheme:dark){.word-hero{--lightningcss-light: ;--lightningcss-dark:initial}}.word-hero[data-theme=dark]{--switch:#000;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark only}.word-hero[data-theme=light]{--switch:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only}.word-hero .fluid{--fluid-min:calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level,0)));--fluid-max:calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level,0)));--fluid-preferred:calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)));--fluid-type:clamp((var(--fluid-min) / 16) * 1rem, ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) + (var(--fluid-preferred) * var(--variable-unit,100vi)), (var(--fluid-max) / 16) * 1rem);font-size:var(--fluid-type)}.word-hero>header{--font-level:4;--font-size-min:24;top:calc((var(--count) - 1) * -1lh);width:100%;margin-bottom:var(--space);align-items:start;line-height:1.2;display:flex;position:sticky}.word-hero>header>div{width:100%;padding-top:calc(var(--start) - .5lh);justify-content:center;align-items:start;display:flex}.word-hero>header :is(h1,h2){top:calc(var(--start) - .5lh);margin:0;font-weight:600;position:sticky}.word-hero ul{margin:0;padding:0;font-weight:600;list-style:none}.word-hero li{--dimmed:color-mix(in oklch, canvasText, #0000 80%);background:linear-gradient(180deg, var(--dimmed) 0 calc(var(--start) - .5lh), var(--accent) calc(var(--start) - .55lh) calc(var(--start) + .55lh), var(--dimmed) calc(var(--start) + .5lh));color:#0000;background-attachment:fixed;-webkit-background-clip:text;background-clip:text}.word-hero>.panel{--font-level:4;--font-size-min:20;z-index:2;color:canvas;justify-content:center;align-items:center;width:100%;height:100vh;padding-inline:1.5rem;display:flex;position:relative}.word-hero>.panel:before{content:"";z-index:-1;background:var(--lightningcss-light,#000)var(--lightningcss-dark,#fff);border-radius:clamp(1.25rem,3vw,2.5rem);position:absolute;inset:0}.word-hero .panel-inner{text-align:center;flex-direction:column;align-items:center;gap:clamp(1.75rem,4vw,2.75rem);display:flex}.word-hero>.panel p{text-wrap:balance;margin:0;font-weight:600}.word-hero>.panel a:not(.bear-link,.cta){color:var(--accent);text-underline-offset:.1lh;text-decoration:none}.word-hero>.panel a:not(.bear-link,.cta):is(:hover,:focus-visible){text-decoration:underline}.word-hero .cta{background:var(--color-primary,#9e255f);color:var(--color-primary-foreground,#fff5fa);letter-spacing:-.01em;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;padding:.9rem 2rem;font-size:clamp(.95rem,1.5vw,1.15rem);font-weight:700;text-decoration:none;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;display:inline-flex;position:relative}.word-hero .cta:is(:hover,:focus-visible){transform:translateY(-2px)scale(1.03);box-shadow:0 12px 26px #00000040}.word-hero .cta:after{content:"click";background:var(--color-primary-300,#f7a8c8);color:var(--color-primary-950,#3d0d26);white-space:nowrap;pointer-events:none;opacity:0;transform-origin:0 100%;border-radius:999px;padding:.1rem .5rem .15rem;font-size:.7rem;font-weight:700;line-height:1.45;transition:opacity .16s,transform .22s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:calc(100% - .4rem);left:80%;transform:translateY(.4rem)rotate(-8deg)scale(.7)}.word-hero .cta:is(:hover,:focus-visible):after{opacity:1;transform:translateY(0)rotate(-8deg)scale(1)}.word-hero .bear-link{color:canvastext;aspect-ratio:1;opacity:.8;place-items:center;width:48px;display:grid;position:fixed;top:1rem;left:1rem}.word-hero .bear-link:is(:hover,:focus-visible){opacity:1}.word-hero .bear-link svg{width:75%}.word-hero>footer{z-index:2;color:color-mix(in hsl, canvas, #0000 35%);text-align:center;background:var(--lightningcss-light,#000)var(--lightningcss-dark,#fff);width:100%;padding-block:2rem;font-size:.875rem;font-weight:300;position:relative}@supports (animation-timeline:view()){.word-hero[data-animate=true]>.panel{view-timeline:--panel}.word-hero[data-animate=true]>.panel:before{transform-origin:50% 100%;animation:ease-in-out both word-hero-grow;animation-timeline:--panel;animation-range:entry 50%;scale:.9}.word-hero[data-animate=true] .panel-inner{animation:ease-in-out both word-hero-reveal;animation-timeline:--panel;animation-range:entry 50%}.word-hero[data-animate=true] .bear-link{animation:ease-in-out both word-hero-switch;animation-timeline:--panel;animation-range:entry 50%}@keyframes word-hero-switch{to{color:var(--switch)}}@keyframes word-hero-reveal{0%{opacity:0}to{opacity:1}}@keyframes word-hero-grow{to{scale:1}}}.word-hero[data-debug=true] li{outline:.05em dashed}.word-hero[data-debug=true] li:last-of-type{outline:.05em dashed canvastext}
