.thumb{--t-bg:#0d0d0b;--t-fg:#eeebe2;--t-ac:#c6f24e;aspect-ratio:4/3;background:var(--t-bg);width:100%;color:var(--t-fg);border:2px solid #0d0d0b;position:relative;overflow:hidden;container-type:inline-size}.thumb i,.thumb b,.thumb em,.thumb u{display:block}.thumb--recompose{--t-bg:#ffd23f;--t-fg:#0d0d0b}.thumb--brand{--t-bg:#b9a2ff;--t-fg:#0d0d0b}.thumb--serp{--t-bg:#19c37d;--t-fg:#0d0d0b}.thumb--machine{--t-bg:#8fd3ff;--t-fg:#0d0d0b}.thumb--feed{--t-bg:#ffb3d1;--t-fg:#0d0d0b}.thumb--audience{--t-bg:#0f5c4a;--t-fg:#eeebe2;--t-ac:#ffd23f}.thumb--langues{--t-bg:#ffb38a;--t-fg:#0d0d0b}.thumb__page{grid-template:"n n n".25fr"a a b"1fr"c d d"1fr/1fr 1fr 1fr;gap:6%;display:grid;position:absolute;inset:10%}.thumb__page i{background:var(--t-fg)}.thumb__page .t-nav{border-bottom:2px solid var(--t-fg);background:0 0;grid-area:n}.thumb__page .t-a{grid-area:a}.thumb__page .t-b{border:2px solid var(--t-fg);background:0 0;grid-area:b}.thumb__page .t-c{background:#fff;grid-area:c}.thumb__page .t-d{border:2px solid var(--t-fg);background:0 0;grid-area:d}.thumb__langs{grid-template-columns:1fr 1fr;gap:8%;display:grid;position:absolute;inset:14%}.thumb__langs i{font-family:var(--font-display);background:#fff;border:2px solid #0d0d0b;border-radius:999px;place-items:center;font-size:12cqi;font-style:normal;display:grid}.thumb__glyph{font-family:var(--font-serif);font-size:48cqi;line-height:1;position:absolute;bottom:-8%;left:8%}.thumb__sw{gap:6px;display:grid;position:absolute;top:10%;right:8%}.thumb__sw i{border:2px solid #0d0d0b;border-radius:50%;width:11cqi;height:11cqi}.thumb__sw i:first-child{background:#0d0d0b}.thumb__sw i:nth-child(2){background:#eeebe2}.thumb__sw i:nth-child(3){background:#ff5fa2}.thumb__sw i:nth-child(4){background:#c6f24e}.thumb__serp{color:#0d0d0b;background:#fff;align-content:start;gap:10px;padding:8% 8% 0;display:grid;position:absolute;inset:9% 9% 0}.thumb__bar{border:2px solid #0d0d0b;border-radius:999px;height:18px;margin-bottom:4px}.thumb__res{gap:5px;display:grid}.thumb__res b{background:#1a0dab;width:55%;height:9px}.thumb__res i{background:#cfcbc0;height:5px}.thumb__res i:last-child{width:70%}.thumb__res--you{background:#c6f24e;outline:3px solid #0d0d0b;margin:-6px;padding:6px}.thumb__res--you b{width:auto;height:auto;font-family:var(--font-sans);color:#1a0dab;background:0 0;font-size:12px;text-decoration:underline}.thumb__res--you i{opacity:.4;background:#0d0d0b}.thumb__chat{font-family:var(--font-sans);align-content:center;gap:10px;display:grid;position:absolute;inset:10%}.thumb__q{color:#eeebe2;background:#0d0d0b;border-radius:14px 14px 2px;justify-self:end;padding:7px 12px;font-size:12px}.thumb__a{background:#fff;border-radius:14px 14px 14px 2px;gap:6px;padding:12px;display:grid}.thumb__a i{opacity:.25;background:#0d0d0b;height:6px}.thumb__a i:nth-child(2){width:85%}.thumb__a i:nth-child(3){width:60%}.thumb__a em{color:#8fd3ff;font-family:var(--font-mono);background:#0d0d0b;border-radius:999px;justify-self:start;padding:3px 8px;font-size:10px;font-style:normal}.thumb__feed{grid-template-columns:repeat(3,1fr);gap:5px;display:grid;position:absolute;inset:8% 20%}.thumb__feed i{background:#0d0d0b}.thumb__feed i:nth-child(3n+2){background:#fff;border:2px solid #0d0d0b}.thumb__feed i:nth-child(4),.thumb__feed i:nth-child(8){background:#ff5fa2;border:2px solid #0d0d0b}.thumb__ad{grid-template-columns:1fr auto 1fr;align-items:center;gap:6%;display:grid;position:absolute;inset:12% 8%}.thumb__card,.thumb__land{color:#0d0d0b;background:#eeebe2;gap:6px;padding:10px;display:grid}.thumb__card i,.thumb__land i{opacity:.3;background:currentColor;height:6px}.thumb__card{rotate:-5deg}.thumb__card b{font-family:var(--font-mono);text-transform:uppercase;font-size:9px}.thumb__land{align-content:start;align-self:stretch}.thumb__land i:first-child{opacity:1;height:14px}.thumb__land u{background:var(--t-ac);border:2px solid #0d0d0b;height:16px;margin-top:8px}.thumb__arrow{font-family:var(--font-display);color:var(--t-ac);font-size:2rem}@media (prefers-reduced-motion:no-preference){.thumb__page{animation:t-grid 6s var(--ease-inout) infinite}.thumb__sw i{animation:t-pulse 2.4s var(--ease-inout) infinite}.thumb__sw i:nth-child(2){animation-delay:.2s}.thumb__sw i:nth-child(3){animation-delay:.4s}.thumb__sw i:nth-child(4){animation-delay:.6s}.thumb__res--you{animation:t-rise 4s var(--ease) infinite}.thumb__a{animation:t-type 4s var(--ease) infinite;transform-origin:0 100%}.thumb__feed i{animation:t-pop 5s var(--ease) infinite}.thumb__feed i:nth-child(odd){animation-delay:.3s}.thumb__arrow{animation:t-nudge 1.6s var(--ease-inout) infinite}.thumb__langs i{animation:4s step-end infinite t-speak}.thumb__langs i:nth-child(2){animation-delay:1s}.thumb__langs i:nth-child(3){animation-delay:2s}.thumb__langs i:nth-child(4){animation-delay:3s}}@keyframes t-grid{0%,40%{grid-template-areas:"n n n""a a b""c d d"}50%,90%{grid-template-areas:"n n n""b a a""d d c"}}@keyframes t-speak{0%{color:#ffb38a;background:#0d0d0b}25%,to{color:#0d0d0b;background:#fff}}@keyframes t-pulse{50%{transform:scale(.8)}}@keyframes t-rise{0%{transform:translateY(160%)}20%,to{transform:none}}@keyframes t-type{0%,10%{opacity:0;transform:scale(.4)}25%,to{opacity:1;transform:none}}@keyframes t-pop{0%,8%{transform:scale(.2)rotate(-20deg)}20%,to{transform:none}}@keyframes t-nudge{50%{transform:translate(6px)}}
