*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Neucha",var(--font-body)}

.learn{font-family:"Neucha",var(--font-body);--learn-ink:#243F3D;--learn-shadow:color-mix(in srgb,#B98A45 30%,transparent);position:relative;min-height:100vh;overflow:hidden;display:grid;align-content:center;justify-items:center;gap:clamp(1.75rem,4.5vh,3rem);background:var(--color-sand-100);padding:var(--space-12) clamp(var(--gutter),6vw,7rem)}
.learn__label{position:absolute;left:var(--space-6);top:var(--space-4);z-index:3;font:600 16px/1 system-ui,sans-serif;color:var(--color-peach-700);opacity:.7}
.learn__bg{position:absolute;left:-34vw;top:0;width:140vw;height:auto;transform:translateY(-30%);pointer-events:none}

.learn__poem{position:relative;z-index:2;margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,2vh,1.5rem);font-weight:400}
.learn__line{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2vw,2rem)}
.learn__thin{font-size:clamp(3rem,5.5vw,5rem);line-height:1;text-transform:uppercase;letter-spacing:.03em;color:var(--color-white);text-shadow:.05em .04em 0 var(--color-teal-400)}
.learn__thin--small{display:block;padding:.12em .5em .08em;font-size:clamp(2.25rem,3.9vw,3.5rem);line-height:1.15;letter-spacing:.09em;text-align:center;color:var(--learn-sub,var(--color-white));text-shadow:var(--learn-sub-shadow,none);background:var(--color-teal-400)}
.learn__char{display:inline-block;transform:translateY(var(--y)) rotate(var(--a)) scaleY(var(--s));transform-origin:50% 100%}
.learn__plate{padding:.05em .35em .02em;font-size:clamp(3rem,5.5vw,5rem);line-height:1.05;color:var(--color-white);background:var(--color-peach-400);transform:rotate(-3deg)}
.learn__brush{display:block;height:clamp(6rem,11vw,10rem);width:auto;max-width:90vw;overflow:visible}
.learn__ink{fill:none;stroke:var(--color-white);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.learn__shadow{fill:none;stroke:var(--color-peach-400);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.learn__cap{font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.3;color:var(--color-peach-700)}

.learn__thing,.learn__pic{display:block}
.learn__thing svg,.learn__pic svg{display:block;width:100%;height:auto}
.learn__thing{position:absolute;z-index:1;width:clamp(8rem,13vw,12rem)}
.learn__thing--a{left:6vw;top:12vh;--r:-10deg}
.learn__thing--b{right:7vw;top:14vh;--r:8deg}
.learn__thing--c{left:8vw;bottom:10vh;--r:6deg}
.learn__thing--d{right:6vw;bottom:12vh;--r:-8deg}

.learn__kicker{position:relative;z-index:2;margin:0;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;text-transform:uppercase;letter-spacing:.05em;font-weight:400;color:var(--color-peach-400)}
.learn__ladder{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(.75rem,2.5vh,1.75rem);width:100%;max-width:60rem}
.learn__step{display:grid;align-items:center;column-gap:var(--space-6)}
.learn__step--right{grid-template-columns:auto auto;justify-content:start;margin-left:6%}
.learn__step--left{grid-template-columns:auto auto;justify-content:end;margin-right:6%}
.learn__step .learn__cap{grid-column:1/-1;margin-top:var(--space-1)}
.learn__step--left .learn__cap{text-align:right}
.learn__step .learn__pic{width:clamp(4.5rem,6.5vw,6rem)}
.learn__brush--step{height:clamp(4.5rem,7.5vw,6.5rem)}
.learn__plate--big{justify-self:start}

.learn__poem--compact .learn__brush{height:clamp(5rem,9vw,8rem)}
.learn__pics{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);width:100%;max-width:70rem}
.learn__picitem{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}
.learn__picitem .learn__pic{width:clamp(6rem,9vw,8rem)}
.learn__picname{font-size:clamp(1.75rem,2.4vw,2.25rem);line-height:1;text-transform:uppercase;letter-spacing:.03em;color:var(--color-teal-400);text-shadow:-2px 2px 0 var(--color-white)}

.learn__button{position:relative;z-index:2;display:inline-flex;align-items:center;border-radius:999px;padding:var(--space-4) var(--space-12);background:var(--color-peach-400);color:var(--color-white);font-size:clamp(1.5rem,2vw,1.875rem);line-height:1;text-decoration:none;box-shadow:-5px 5px 0 var(--color-peach-700);transition:transform .2s ease}
.learn__button:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.learn__button:active{transform:scale(.97);transition-duration:.08s}
@media (hover:hover){.learn__button:hover{transform:translate(2px,-2px)}}

.learn__poem .learn__thin,.learn__poem .learn__plate,.learn__poem .learn__brush,.learn__thing,.learn__kicker,.learn__step,.learn__picitem,.learn__button{opacity:0}
.learn__thing{transform:rotate(var(--r))}
.learn__poem .learn__plate{transform:rotate(-3deg)}
.learn--play .learn__poem .learn__thin,.learn--play .learn__poem .learn__brush,.learn--play .learn__step,.learn--play .learn__picitem,.learn--play .learn__button{animation:learn-in .5s ease-out var(--d,0s) forwards}
.learn--play .learn__kicker{animation:learn-in .5s ease-out .05s forwards}
.learn--play .learn__poem .learn__plate{animation:learn-plate .45s cubic-bezier(.3,1.4,.5,1) var(--d) forwards}
.learn--play .learn__thing{animation:learn-thing .6s cubic-bezier(.3,1.3,.5,1) var(--d) forwards}
@keyframes learn-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes learn-plate{from{opacity:0;transform:rotate(-3deg) scale(.7)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes learn-thing{from{opacity:0;transform:rotate(var(--r)) scale(.6)}to{opacity:1;transform:rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){
  .learn__poem .learn__thin,.learn__poem .learn__plate,.learn__poem .learn__brush,.learn__thing,.learn__kicker,.learn__step,.learn__picitem,.learn__button{opacity:1}
  .learn--play *{animation:none!important}
}

@media(max-width:600px){
  .learn__poem{width:100%;min-width:0}
  .learn__line{width:100%;max-width:100%;min-width:0;gap:.55rem}
  .learn__poem .learn__brush{width:100%;height:auto;max-width:100%}
  .learn__line:first-child .learn__thin,.learn__line:first-child .learn__plate{font-size:clamp(1.4rem,6.9vw,2.6rem)}
  .learn__thin--small{display:block;width:100%;font-size:clamp(1.35rem,5.8vw,2rem);text-align:center;line-height:1.3}
}
.learn__poem{width:min(100%,88rem);min-width:0;gap:clamp(1.25rem,2.8vh,1.75rem)}
.learn__line{max-width:100%}
.learn__poem .learn__brush{width:min(88rem,90vw);height:auto;max-width:100%}
@media(max-width:600px){.learn__poem{gap:1.25rem}.learn__poem .learn__brush{width:100%}}
@media(min-width:601px) and (max-height:600px){
  .learn__thing{width:clamp(4.5rem,6vw,6rem)}
  .learn__thing--a{left:3vw;top:5vh}
  .learn__thing--b{right:3vw;top:5vh}
  .learn__thing--c{left:3vw;bottom:3vh}
  .learn__thing--d{right:3vw;bottom:3vh}
}
.learn__thing{width:clamp(6.8rem,11vw,10.2rem)}
@media(min-width:601px) and (max-height:600px){.learn__thing{width:clamp(4.5rem,6vw,6rem)}}