#roof{overflow:hidden}
#roof .roof-in{max-width:720px;margin:0 auto;padding-inline:16px;text-align:center}

#roof .roof-h{font-family:'Suez One',serif;font-weight:400;color:rgb(70,89,90);font-size:clamp(25px,3.2vw,38px);line-height:1.35;margin:0 0 6px}
#roof .en{direction:ltr;unicode-bidi:isolate;white-space:nowrap}

#roof .roof-stage{direction:ltr;position:relative;width:min(560px,100%);margin:0 auto 28px}

@media (max-width:560px){
  #roof .roof-stage{width:86%}
  #meaning .shem-stage{max-width:220px}
  #meaning .shem-hit::after{width:12px;height:12px;margin-inline-start:-6px;inset-block-start:-12px;border-width:0 3px 3px 0}
  #meaning .shem-hit-wave::after{inset-inline-start:var(--wave-arrow,64%)}
}
#roof .tv{position:relative;width:100%;aspect-ratio:1000/1202;transform-origin:50% 100%}
#roof .tv-body{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
#roof .tv-screen{position:absolute;left:8.9%;top:46.1%;width:62.7%;height:42.9%;border-radius:9% / 11%;overflow:hidden;background:#141b1a;box-shadow:inset 0 0 18px rgba(0,0,0,.55)}
#roof .tv-screen .pic{position:absolute;inset:0;z-index:2;transform-origin:50% 50%}
#roof .tv-screen .clip{position:absolute;inset:0;transform-origin:50% 50%}
#roof .tv-screen .frame{position:absolute;inset:0;opacity:0}
#roof .tv-screen .frame.on{opacity:1}
#roof .tv-screen .frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;filter:saturate(.92) contrast(1.05)}
#roof .tv-screen canvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;opacity:0;pointer-events:none;mix-blend-mode:screen}
#roof .tv-glass{position:absolute;inset:0;z-index:7;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 58%,rgba(0,0,0,.42) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,rgba(0,0,0,0) 1px 3px)}
@keyframes roofFlicker{0%,100%{transform:none;filter:none}10%{transform:translateY(-3%)}20%{transform:translateX(2%) skewX(-3deg);filter:brightness(1.4)}30%{transform:translateY(5%)}45%{transform:none;filter:brightness(.7)}60%{transform:translateY(-8%) scaleY(1.06)}75%{transform:translateX(-2%);filter:brightness(1.25)}88%{transform:translateY(2%)}}
#roof .tv-screen.flicker .clip{animation:roofFlicker .45s steps(6,end) infinite}
@keyframes roofRoll{0%{transform:translateY(0)}40%{transform:translateY(-14%) scaleY(1.08)}100%{transform:none}}
#roof .tv-screen .clip.roll{animation:roofRoll .3s ease-out}
#roof .tv-screen.cold .pic{opacity:0}
@keyframes roofOn{0%{transform:scale(.02,.01);filter:brightness(5);opacity:1}35%{transform:scale(1,.012);filter:brightness(4)}70%{transform:scale(1,1.04);filter:brightness(1.6)}100%{transform:none;filter:none}}
#roof .tv-screen.warm .pic{animation:roofOn .55s cubic-bezier(.2,.7,.3,1)}
@keyframes roofThump{0%{transform:none}14%{transform:translateY(1.2%) scaleY(.985) rotate(-.9deg)}38%{transform:translateY(-.5%) rotate(.6deg)}64%{transform:rotate(-.25deg)}100%{transform:none}}
#roof .tv.thump{animation:roofThump .45s cubic-bezier(.2,.8,.3,1)}

#roof .bot{position:absolute;z-index:3;width:22%;aspect-ratio:450/600;pointer-events:none}
#roof .bot .lift{position:absolute;inset:0;transform-origin:50% 92%}
#roof .bot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transform:translateY(calc((1 - var(--feet,.9)) * 100%))}
#roof .bot img.on{opacity:1}
#roof .bot.ge img[data-p="crouch"]{transform-origin:50% 92%;transform:translateY(8%) scale(1.05,.88)}
#roof .bot::after{content:"";position:absolute;left:28%;right:28%;bottom:-1.5%;height:5%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(40,30,20,.35),rgba(40,30,20,0) 70%);transition:opacity .15s}
#roof .bot.air::after{opacity:.35}
#roof .bot.cl{left:5%;bottom:60.2%;width:24%}
#roof .bot.gp{left:33%;bottom:61.5%}
#roof .bot.ge{left:74%;bottom:59.6%}
@keyframes roofStomp{0%{transform:none;animation-timing-function:linear}30%{transform:none;animation-timing-function:cubic-bezier(.2,.7,.4,1)}62%{transform:translateY(-34%);animation-timing-function:cubic-bezier(.6,0,.9,.5)}100%{transform:none}}
#roof .bot.jump .lift{animation:roofStomp .5s both}

#roof .roof-box{position:relative;background:#fff;border-radius:16px;padding:24px 30px;max-width:min(640px,100%);margin:0 auto 22px;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 14px 36px -18px rgba(60,40,20,.38)}
#roof .roof-box::before,#roof .roof-box::after{content:"";position:absolute;width:22px;height:22px;border:3px solid #D95B2E;opacity:.85}
#roof .roof-box::before{inset-block-start:12px;inset-inline-start:12px;border-inline-end:0;border-block-end:0;border-start-start-radius:5px}
#roof .roof-box::after{inset-block-end:12px;inset-inline-end:12px;border-inline-start:0;border-block-start:0;border-end-end-radius:5px}
#roof .roof-box p{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.7;color:rgb(70,89,90);text-align:center}
#roof .roof-box p:last-child{margin-bottom:0}
#roof .roof-btn{display:inline-block;background:#46595A;color:#fff;text-decoration:none;font:700 17px/1 'Assistant',sans-serif;padding:15px 30px;border-radius:999px}

#roof{padding-bottom:40px}
#roof .roof-box{margin-bottom:0}
#roof + #tracks{padding-top:48px}

#roof .roof-rv{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
#roof .roof-rv.in{opacity:1;transform:none}
@media (max-width:560px){#roof .roof-box{padding:22px 22px}}
@media (prefers-reduced-motion:reduce){
  #roof .tv-screen.flicker .clip,#roof .tv-screen .clip.roll,#roof .tv.thump,#roof .bot .lift,#roof .tv-screen.warm .pic{animation:none!important}
  #roof .roof-rv{opacity:1;transform:none}
}

html.hw-lid-js #roof{display:grid;grid-template-rows:0fr;padding-block:0!important;overflow:hidden;
  transition:grid-template-rows .9s cubic-bezier(.2,.7,.2,1),padding .9s}
html.hw-lid-js #roof>.roof-in{min-height:0;overflow:hidden}
html.hw-lid-js #roof.open{grid-template-rows:1fr;padding-block:16px 40px!important}
html.hw-lid-js #roof .hw-seam{display:none}
.lid-wrap{display:none}
html.hw-lid-js .lid-wrap{display:block;position:relative;padding:150px 16px 56px;background:#fff}
@media (min-width:900px){html.hw-lid-js .lid-wrap{padding-top:180px}}
.lid-wrap.opened{padding-bottom:0!important}
.lid{--bw:min(250px,64vw);position:relative;max-width:560px;margin:0 auto;height:22px;border-radius:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#fff,#EEF1F0);box-shadow:0 10px 24px -12px rgba(20,32,30,.35),inset 0 0 0 1px rgba(70,89,90,.18),inset 0 1px 0 #fff;
  transition:background .5s,box-shadow .5s}
@media (min-width:900px){.lid{--bw:290px}}
.lid:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.lid::after{content:"";position:absolute;left:calc(50% - 11px);top:0;width:22px;height:22px;background:#46595A;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:hwcue 1.8s ease-in-out infinite;transition:opacity .4s}
.lid-wrap.opened .lid{background:transparent;box-shadow:none;cursor:default}
.lid-wrap.opened .lid::after{opacity:0;animation:none}
.lid-bot{position:absolute;bottom:calc(100% - 9px);left:50%;width:var(--bw);aspect-ratio:620/400;translate:-46.5% 0;direction:ltr}
.lid-bot>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;opacity:0;pointer-events:none}
.lid-bot>img.on{opacity:1}
.lid-face{position:absolute;left:10.5%;top:36%;width:24%;height:30%;transform:rotate(-13deg);pointer-events:none}
.lid-eyes{position:absolute;inset:0;transition:transform .25s ease-out}
.lid-eye{position:absolute;top:22%;width:27%;height:30%;background:#B9F4F4;border-radius:3px 3px 60% 60% / 3px 3px 80% 80%;
  box-shadow:0 0 6px 1px rgba(120,235,235,.85),0 0 14px rgba(120,235,235,.45);transform-origin:50% 40%;transition:transform .12s,height .2s,top .2s,border-radius .2s}
.lid-eye.l{left:8%}.lid-eye.r{left:58%}
.lid-mouth{position:absolute;left:38%;top:72%;width:22%;height:5%;border-radius:3px;background:#B9F4F4;box-shadow:0 0 6px rgba(120,235,235,.7)}
.lid-face.blink .lid-eye{transform:scaleY(.08)}
.lid-face.wide .lid-eye{height:44%;top:15%;border-radius:50%}

.lid-b{position:absolute;z-index:3;bottom:calc(100% + var(--bw)*.645*.84);right:calc(50% + var(--bw)*.245 - 44px);
  background:#fff;color:#46595A;font:400 18px/1 'Suez One',serif;padding:11px 17px 12px;border-radius:16px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(20,32,30,.16),inset 0 0 0 1px rgba(70,89,90,.15);transform-origin:70% 100%;
  opacity:0;transform:scale(.4) rotate(-3deg);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.4,1)}
.lid-b.on{opacity:1;transform:rotate(-3deg)}
.lid-b::after{content:"";position:absolute;bottom:-6px;right:22px;width:13px;height:13px;background:#fff;transform:rotate(45deg)}
.lid-b .dots{display:inline-flex;gap:3px;margin-inline-start:2px}
.lid-b .dots i{width:4px;height:4px;border-radius:50%;background:currentColor;display:inline-block;animation:lidDot 1.1s infinite}
.lid-b .dots i:nth-child(2){animation-delay:.18s}.lid-b .dots i:nth-child(3){animation-delay:.36s}
@keyframes lidDot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.lid-wrap.opened .lid-b{opacity:0}
@media (prefers-reduced-motion:reduce){
  .lid::after,.lid-b .dots i{animation:none}
  html.hw-lid-js #roof{transition:none}
}

.ending .digital-grid{max-width:980px;margin:0 auto 40px;padding-inline:16px;text-align:start}
.ending .digital-copy h2{color:#fff}
.ending .digital-copy p{color:#E7E3D9}
.ending .digital-ph{box-shadow:0 14px 34px rgba(0,0,0,.35)}
@media (max-width:900px){.ending .digital-grid{text-align:center}}