@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap');

:root { color-scheme:dark; --paper:#f1eee5; --muted:rgba(241,238,229,.56); --line:rgba(255,255,255,.14) }
* { box-sizing:border-box }
html { background:#090d0d }
body { min-height:100svh;margin:0;background:#090d0d;color:var(--paper);font-family:Manrope,Arial,sans-serif }
a { color:inherit;text-decoration:none }
.grain { position:fixed;z-index:20;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");mix-blend-mode:soft-light }

.topbar { position:fixed;z-index:10;top:0;left:0;width:100%;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;border-bottom:1px solid var(--line);background:linear-gradient(#070a0a99,transparent);pointer-events:none }
.topbar>* { pointer-events:auto }
.wordmark { display:flex;align-items:center;gap:12px;width:max-content }
.wordmark b { font-size:17px;font-weight:500;letter-spacing:.13em }
.mark { position:relative;width:20px;height:18px;display:block }
.mark i { position:absolute;width:8px;height:8px;background:#e9e5d9;transform:rotate(30deg) skew(-5deg);box-shadow:2px 2px #63665f }
.mark i:nth-child(1) { left:1px;top:0 }.mark i:nth-child(2) { right:0;top:4px }.mark i:nth-child(3) { left:3px;bottom:0 }
.topbar p,.edition { margin:0;color:rgba(241,238,229,.52);font-size:8px;letter-spacing:.28em;text-transform:uppercase }
.topbar p i { display:inline-block;width:3px;height:3px;margin:0 11px;border-radius:50%;background:#d8d1c0;vertical-align:middle }
.edition { justify-self:end }

.worlds { min-height:100svh;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(310px,1fr));gap:1px;padding:1px;background:rgba(255,255,255,.16) }
.world { --px:50%;--py:50%;position:relative;isolation:isolate;min-height:0;overflow:hidden;outline:none;background:#182124;cursor:pointer }
.world::before { content:"";position:absolute;z-index:4;inset:0;border:1px solid transparent;transition:border-color .4s,background .4s }
.world:hover::before,.world:focus-visible::before { border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.025) }
.scene { position:absolute;inset:-4%;overflow:hidden;transform:perspective(1000px) rotateX(calc((var(--py) - 50%) * -.015)) rotateY(calc((var(--px) - 50%) * .02)) scale(1.02);transition:transform .25s ease-out }
.shade { position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(4,7,8,.1) 20%,rgba(4,7,8,.12) 46%,rgba(4,7,8,.82) 100%),linear-gradient(90deg,rgba(3,6,6,.2),transparent 45%) }
.index { position:absolute;z-index:3;top:96px;right:28px;color:rgba(255,255,255,.52);font-size:9px;letter-spacing:.18em }
.copy { position:absolute;z-index:3;left:30px;right:30px;bottom:27px }
.copy p { margin:0 0 8px;color:rgba(255,255,255,.6);font-size:8px;letter-spacing:.26em;text-transform:uppercase;transition:transform .4s }
.copy h2 { margin:0;font-size:clamp(42px,5vw,78px);font-weight:300;line-height:.95;letter-spacing:-.045em;text-transform:lowercase;text-shadow:0 5px 30px #0007;transition:transform .45s }
.copy span { position:absolute;right:0;bottom:4px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.32);font-size:8px;letter-spacing:.2em;text-transform:uppercase;transform:translateY(8px);opacity:0;transition:opacity .35s,transform .35s,border-color .35s }
.copy span i { margin-left:12px;font-style:normal;font-size:12px }
.world:hover .copy h2,.world:focus-visible .copy h2 { transform:translateY(-3px) }
.world:hover .copy p,.world:focus-visible .copy p { transform:translateX(3px) }
.world:hover .copy span,.world:focus-visible .copy span { opacity:1;transform:none;border-color:#fff }

/* Snow world */
.freeride { background:#88afc6 }
.freeride .scene { background:linear-gradient(#7399b4 0%,#b7d2df 53%,#dfe8e9 100%) }
.sun { position:absolute;top:17%;right:15%;width:13%;aspect-ratio:1;border-radius:50%;background:#e9eee9;box-shadow:0 0 50px #edf4ed99 }
.mountain { position:absolute;bottom:0;clip-path:polygon(0 100%,0 53%,10% 38%,18% 47%,31% 18%,39% 35%,49% 8%,58% 39%,68% 19%,80% 46%,91% 28%,100% 44%,100% 100%);image-rendering:pixelated }
.mountain-back { inset:22% -8% 14%;background:#7892a0;opacity:.7;transform:scale(1.15) }
.mountain-mid { inset:29% -3% 4%;background:linear-gradient(135deg,#b9c9cc 35%,#6c8796 36% 50%,#d3dfe0 51%);opacity:.86 }
.mountain-front { inset:47% -8% -10%;background:linear-gradient(145deg,#f3f3ed 28%,#aabfc7 29% 42%,#e6ecea 43% 64%,#8ca7b1 65%);clip-path:polygon(0 100%,0 63%,15% 44%,29% 58%,41% 35%,54% 52%,67% 28%,81% 53%,100% 35%,100% 100%) }
.rider { position:absolute;z-index:2;left:56%;top:52%;width:45px;height:55px;filter:drop-shadow(12px 14px 9px #344b5d55);animation:ride 3.5s ease-in-out infinite }
.rider i { position:absolute;display:block;background:#ef6245;box-shadow:inset -5px -4px #a63331 }
.rider .head { width:12px;height:12px;left:17px;top:0;background:#202b36;box-shadow:inset -3px -2px #0d141b }
.rider .body { width:17px;height:25px;left:12px;top:12px;transform:skew(-12deg) }
.rider .arm { width:22px;height:6px;left:22px;top:19px;transform:rotate(22deg) }
.rider .leg { width:7px;height:20px;left:11px;top:32px;background:#253a4e;box-shadow:12px 2px #253a4e }
.rider .board { width:54px;height:4px;left:-5px;bottom:0;background:#e8be53;box-shadow:none;transform:rotate(-8deg) }
.snow-dust { position:absolute;z-index:1;width:6px;height:6px;background:#f7ffff;box-shadow:12px 5px #fff,24px -4px #fff,37px 6px #fff,50px -5px #fff,63px 1px #fff;animation:dust 1.4s linear infinite }
.dust-one { left:46%;top:64% }.dust-two { left:59%;top:61%;animation-delay:-.7s;transform:scale(.6) }

/* Forest world */
.glide { background:#597864 }
.glide .scene { background:linear-gradient(155deg,#aec7aa,#62816d 48%,#263e36) }
.glow { position:absolute;inset:-10%;background:radial-gradient(circle at 54% 25%,#e0d9a47d,transparent 32%),linear-gradient(115deg,transparent 27%,#f6e5aa1c 27% 30%,transparent 30% 38%,#fff1bb17 38% 41%,transparent 41%) }
.tree { position:absolute;bottom:0;width:90px;height:100%;filter:drop-shadow(8px 5px 12px #172c2455) }
.tree i { position:absolute;bottom:0;left:41%;width:18%;height:75%;background:#4d3b2b;box-shadow:inset -7px 0 #34291f }
.tree b { position:absolute;width:55px;height:55px;background:#42634c;box-shadow:inset -11px -10px #304b3c }
.tree b:nth-child(2) { left:8px;top:14% }.tree b:nth-child(3) { left:39px;top:24%;transform:scale(.8) }.tree b:nth-child(4) { left:0;top:34%;transform:scale(.65) }
.tree-one { left:4%;transform:scale(1.2);transform-origin:bottom }.tree-two { right:6%;transform:scale(1.45);transform-origin:bottom }.tree-three { left:31%;opacity:.62;transform:scale(.7);transform-origin:bottom }
.squirrel { position:absolute;z-index:2;left:51%;top:43%;width:76px;height:54px;animation:glide 4s ease-in-out infinite;filter:drop-shadow(10px 12px 8px #17312655) }
.squirrel i { position:absolute;display:block }.squirrel .core { left:27px;top:19px;width:27px;height:18px;background:#ad744d;box-shadow:inset -6px -5px #71482f }.squirrel .face { left:49px;top:14px;width:14px;height:14px;background:#b77b51;box-shadow:6px 8px #7e5136 }.squirrel .tail { left:5px;top:10px;width:29px;height:30px;background:#8e5d3e;box-shadow:inset 8px -7px #6d432d;transform:rotate(28deg) }.squirrel .wing { top:25px;width:39px;height:13px;background:#d7aa76 }.squirrel .left { left:16px;transform:rotate(23deg);transform-origin:right }.squirrel .right { left:47px;transform:rotate(-25deg);transform-origin:left }
.leaf { position:absolute;width:8px;height:8px;background:#d1a653;box-shadow:12px 16px #8fa35f,26px -9px #c17b49;animation:leaf 7s linear infinite }.leaf-one{left:38%;top:20%}.leaf-two{left:71%;top:33%;animation-delay:-3s}.leaf-three{left:19%;top:50%;animation-delay:-5s}

/* Hearth world */
.fireplace { background:#38231b }
.fireplace .scene { background:radial-gradient(circle at 51% 67%,#a14b22 0%,#4a281b 27%,#1b1311 67%) }
.ember-glow { position:absolute;left:35%;bottom:5%;width:32%;height:40%;border-radius:50%;background:#ff7d2b80;filter:blur(45px);animation:glow 2.6s ease-in-out infinite }
.chimney { position:absolute;left:43%;bottom:20%;width:20%;height:78%;background:#4c3127;box-shadow:inset -20px 0 #2d1e19 }
.hearth { position:absolute;left:34%;bottom:8%;width:38%;height:62%;background:#69422f;box-shadow:inset -18px -10px #3b281f,18px 15px 28px #09060566 }
.bricks { position:absolute;inset:0;opacity:.32;background:linear-gradient(#0000 93%,#1a100d 94%),linear-gradient(90deg,#0000 94%,#1a100d 95%);background-size:100% 28px,55px 100% }
.opening { position:absolute;left:19%;right:19%;bottom:15%;height:56%;overflow:hidden;background:#100907;box-shadow:inset 0 0 24px #000;border:8px solid #33221b }
.mantel { position:absolute;left:-8%;right:-8%;top:13%;height:10%;background:#8a5b3e;box-shadow:inset 0 -9px #573825,0 10px 18px #120a0766 }
.log { position:absolute;z-index:3;bottom:13%;left:17%;width:68%;height:10px;background:#5a2b1d;box-shadow:inset -10px -4px #2d1711 }.log-one{transform:rotate(12deg)}.log-two{transform:rotate(-12deg)}
.flame { position:absolute;z-index:2;bottom:18%;width:18%;height:48%;background:#f18a32;clip-path:polygon(50% 0,78% 33%,100% 68%,70% 100%,23% 94%,0 65%,34% 38%);transform-origin:bottom;filter:drop-shadow(0 0 12px #ff681f) }
.flame-one{left:23%;animation:flame 1.15s ease-in-out infinite}.flame-two{left:43%;height:58%;background:#ffc55d;animation:flame 1.4s -.5s ease-in-out infinite}.flame-three{left:58%;height:39%;animation:flame 1s -.2s ease-in-out infinite}
.spark { position:absolute;width:4px;height:4px;background:#ffc46d;box-shadow:0 0 8px #ff6b23;animation:spark 3s ease-out infinite }.spark-one{left:48%;top:38%}.spark-two{left:58%;top:46%;animation-delay:-1s}.spark-three{left:43%;top:53%;animation-delay:-2s}

/* Underwater world */
.reef { background:#083740 }
.reef .scene { background:linear-gradient(#27868a 0%,#0b5662 38%,#052832 100%) }
.water-light { position:absolute;inset:0;background:radial-gradient(ellipse at 52% -10%,#a6f5d783,transparent 48%),repeating-linear-gradient(110deg,transparent 0 14%,#a6ffdf0c 15% 17%,transparent 18% 28%);animation:water 8s ease-in-out infinite alternate }
.ray { position:absolute;top:-20%;width:12%;height:100%;background:linear-gradient(#cbffe84d,transparent);transform:rotate(-17deg);filter:blur(8px) }.ray-one{left:31%}.ray-two{left:61%;opacity:.5;transform:rotate(14deg)}
.floor { position:absolute;left:-5%;right:-5%;bottom:-15%;height:42%;background:#143e39;clip-path:polygon(0 57%,10% 45%,20% 53%,31% 30%,43% 50%,55% 39%,68% 56%,81% 34%,100% 49%,100% 100%,0 100%) }
.coral { position:absolute;z-index:1;bottom:13%;width:11px;height:23%;background:#bf684e;box-shadow:inset -4px 0 #79423a }
.coral i { position:absolute;width:9px;height:52%;background:inherit;box-shadow:inherit;transform-origin:bottom }.coral i:nth-child(1){left:-13px;bottom:28%;transform:rotate(-35deg)}.coral i:nth-child(2){left:12px;bottom:45%;transform:rotate(40deg)}.coral i:nth-child(3){left:16px;bottom:6%;height:35%;transform:rotate(58deg)}
.coral-one{left:17%}.coral-two{right:14%;height:30%;background:#a96882;transform:scale(.8)}
.fish { position:absolute;z-index:2;width:44px;height:22px;background:#e4aa48;clip-path:polygon(0 50%,19% 6%,73% 5%,100% 50%,73% 95%,19% 95%);animation:swim 8s linear infinite }.fish i{position:absolute;right:8px;top:7px;width:4px;height:4px;background:#162b31}.fish b{position:absolute;left:-11px;top:2px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:15px solid #d5793f}.fish-one{left:18%;top:35%}.fish-two{left:72%;top:57%;transform:scale(.58);animation-duration:11s;animation-delay:-4s;background:#81c1b1}
.bubble { position:absolute;bottom:12%;width:7px;height:7px;border:1px solid #c8fff1;border-radius:50%;animation:bubble 7s linear infinite }.bubble-one{left:23%}.bubble-two{left:76%;animation-delay:-2s;transform:scale(.7)}.bubble-three{left:62%;animation-delay:-4s;transform:scale(1.4)}

footer { display:none }
@keyframes ride { 0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(7px,-9px) rotate(2deg)} }
@keyframes dust { from{opacity:.9;transform:translate(20px,0)}to{opacity:0;transform:translate(-80px,25px)} }
@keyframes glide { 0%,100%{transform:translate(-8px,2px) rotate(-2deg)}50%{transform:translate(12px,-10px) rotate(3deg)} }
@keyframes leaf { 0%{transform:translate(0,-50px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(80px,340px) rotate(280deg);opacity:0} }
@keyframes glow { 50%{opacity:.68;transform:scale(.88)} }
@keyframes flame { 0%,100%{transform:scaleX(.86) skewX(-4deg)}50%{transform:scaleX(1.12) scaleY(.9) skewX(7deg)} }
@keyframes spark { 0%{transform:translate(0,80px);opacity:0}20%{opacity:1}100%{transform:translate(22px,-90px);opacity:0} }
@keyframes water { to{transform:translateX(3%);filter:hue-rotate(8deg)} }
@keyframes swim { 0%{transform:translateX(-130px)}50%{transform:translateX(110px) translateY(-8px)}51%{transform:translateX(110px) translateY(-8px) scaleX(-1)}100%{transform:translateX(-130px) scaleX(-1)} }
@keyframes bubble { from{transform:translateY(30px);opacity:0}15%{opacity:.7}to{transform:translate(30px,-380px);opacity:0} }

@media (max-width:760px) {
  .topbar { height:64px;padding:0 18px;grid-template-columns:1fr auto }.topbar p{display:none}.edition{font-size:7px}
  .worlds { display:block;padding:0;background:#090d0d }.world { display:block;height:57svh;min-height:390px;border-bottom:1px solid var(--line) }
  .index { top:84px;right:19px }.copy { left:20px;right:20px;bottom:22px }.copy h2{font-size:58px}.copy span{opacity:1;transform:none;font-size:7px}
  footer { display:flex;justify-content:space-between;padding:24px 18px 34px;color:#ffffff5c;font-size:7px;letter-spacing:.15em;text-transform:uppercase }
  .hearth { left:24%;width:55% }.chimney{left:38%;width:29%}
}
@media (max-width:430px) { .copy span{position:static;display:block;width:max-content;margin-top:16px}.world{height:61svh}.topbar .wordmark b{font-size:15px}footer span:last-child{display:none} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scene{transform:none!important} }