.hero-animation{--hero-crossfade: .2s;--hero-ruby-size: .5em;text-align:center}.hero-stack{display:grid;grid-template-areas:"layer";justify-items:center}.hero-stack-inline{display:inline-grid;grid-template-areas:"layer";vertical-align:baseline}.hero-stack>*,.hero-stack-inline>*{grid-area:layer;opacity:0;visibility:hidden;transition:opacity var(--hero-crossfade) ease-in-out,visibility 0s linear var(--hero-crossfade)}.hero-stack>[data-active=true],.hero-animation[data-furigana=off] .hero-stack-inline>[data-layer=off],.hero-animation[data-furigana=on] .hero-stack-inline>[data-layer=on]{opacity:.99;visibility:visible;transition-delay:0s}.hero-animation-line{font-size:clamp(1rem,8vw,2rem);line-height:1.5;transition:opacity var(--hero-crossfade) ease-in-out}@media(min-width:48rem){.hero-animation-line{font-size:clamp(2rem,10vw,3rem)}}@media(min-width:64rem){.hero-animation-line{font-size:clamp(2.25rem,12cqi,5.5rem)}}.hero-animation[data-furigana=on] .hero-animation-line{opacity:.85}.hero-animation[data-furigana=off] .hero-animation-line{opacity:.65}.hero-animation-unit{white-space:nowrap}.hero-ruby{ruby-position:over}.hero-ruby rt{font-size:var(--hero-ruby-size);opacity:0;visibility:hidden;transition:opacity var(--hero-crossfade) ease-in-out,visibility 0s linear var(--hero-crossfade)}.hero-animation[data-furigana=on] .hero-ruby rt{opacity:.99;visibility:visible;transition-delay:0s}@media(prefers-reduced-motion:reduce){.hero-animation{--hero-crossfade: 1ms}.hero-stack>*,.hero-stack-inline>*,.hero-ruby rt{transition-delay:0s}}.landing-reader-frame{--landing-reader-h: 40svh;--landing-reader-fade-h: 10rem;position:relative;height:var(--landing-reader-h);padding:.5rem 1rem;background-color:var(--color-card);border-radius:var(--radius-lg);overflow:hidden}.landing-reader-frame:after{content:"";position:absolute;inset-inline:0;bottom:0;height:var(--landing-reader-fade-h);background:linear-gradient(to bottom,transparent,var(--color-card));pointer-events:none}@media(min-width:64rem){.landing-reader-frame{--landing-reader-h: min(60svh, 32rem);padding:1rem 2rem}}.showcase-section{--showcase-heading-h: 6.5rem;--showcase-heading-padding-block-start: 2rem;--showcase-heading-padding-block-end: 2rem;--showcase-visual-h: 0px;--showcase-heading-gap: 1rem;scroll-margin-top:calc(var(--public-header-h) + 1rem);padding-block:6rem}@media(min-width:64rem){.showcase-section{--showcase-heading-gap: 2rem;--showcase-heading-padding-block-end: 5rem;padding-block:8rem}}.showcase-heading{position:sticky;top:var(--public-header-offset);z-index:1;background-color:var(--color-background);padding-block-start:var(--showcase-heading-padding-block-start);padding-block-end:var(--showcase-heading-padding-block-end);border-block-end:var(--showcase-visual-h) solid transparent;background-clip:padding-box;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.5rem}.showcase-heading>*{pointer-events:auto}.showcase-grid{margin-block-start:calc(var(--showcase-heading-gap) - var(--showcase-visual-h));display:grid;gap:2rem}@media(min-width:64rem){.showcase-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.showcase-grid[data-visual-column=end]>.showcase-sticky-visual{order:1}}.showcase-grid>*{min-width:0}.showcase-sticky-visual{position:sticky;top:calc(var(--public-header-offset) + var(--showcase-heading-h));z-index:0;background-color:var(--color-background);padding-block-end:1rem;align-self:start}.showcase-section[data-pinned-heights=measured] .showcase-heading,.showcase-section[data-pinned-heights=measured] .showcase-sticky-visual{transition:top var(--public-header-transition) ease}.showcase-step{min-height:50svh;padding-block-end:2rem;display:flex;flex-direction:column;justify-content:flex-start}@media(min-width:64rem){.showcase-step{min-height:60svh;padding-block-end:3rem}}.showcase-visual-stack{display:grid;grid-template-areas:"layer"}.showcase-visual-stack>*{grid-area:layer;opacity:0;visibility:hidden;transition:opacity var(--showcase-crossfade) ease-in-out,visibility 0s linear var(--showcase-crossfade)}.showcase-visual-stack>[data-active=true]{opacity:.99;visibility:visible;transition-delay:0s}.showcase-frame{--showcase-crossfade: .22s;--showcase-frame-ratio: 16 / 10;--showcase-frame-max-h: 42svh;width:100%;max-width:calc(var(--showcase-frame-max-h) * var(--showcase-frame-ratio));aspect-ratio:var(--showcase-frame-ratio);margin-inline:auto;overflow:hidden}.showcase-frame[data-ratio=browser]{--showcase-frame-ratio: 840 / 564;max-width:min(calc(var(--showcase-frame-max-h) * var(--showcase-frame-ratio)),calc(100% * var(--showcase-frame-ratio) * 10 / 16))}@media(min-width:64rem){.showcase-frame{--showcase-frame-max-h: min(60svh, 32rem)}}.showcase-frame>img{width:100%;height:100%;object-fit:contain;object-position:center top}@media(prefers-reduced-motion:reduce){.showcase-visual-stack>*{transition:none}}.key-visual-canvas{position:relative;flex:none;inline-size:1440px;block-size:650px;pointer-events:none;-webkit-user-select:none;user-select:none}.key-visual-item{position:absolute;left:var(--key-visual-x);top:var(--key-visual-y);color:var(--brand-foreground);font-family:var(--font-japanese);font-size:var(--key-visual-size);line-height:1;opacity:var(--key-visual-opacity);white-space:pre}.takuan-scene{bottom:-3rem;inline-size:min(18.75rem,calc(100% - 2rem));inset-inline-start:50%;opacity:0;transform:translate(-50%,1rem);transition:opacity .3s ease-out,transform .3s ease-out}.takuan-scene[data-visible=true]{opacity:1;transform:translate(-50%)}@media(min-width:64rem){.takuan-scene{bottom:-4.375rem;inline-size:15.75rem;inset-inline-start:calc(50% - 36rem);transform:translateY(1rem)}.takuan-scene[data-visible=true]{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.takuan-scene{transition:none}}
