@font-face{font-family:"Lilita One";src:url(/fonts/LilitaOne-Regular.ttf) format("truetype");font-display:swap}
:root{
  --night:#0B1437; --dusk:#1C2D63; --hill:#22397A; --snow:#F4F8FE; --drift:#E3ECFA;
  --sign:#1E7A46; --gold:#FFE27A; --sleigh:#C0392B; --ink:#14204A; --soft:#4B5B88;
  --display:"Lilita One","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --body:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --stars:radial-gradient(1.6px 1.6px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 28% 62%,#cfe0ff 50%,transparent 51%),
    radial-gradient(2px 2px at 44% 26%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 61% 48%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 77% 14%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 90% 58%,#fff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 6% 78%,#cfe0ff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 52% 82%,#fff 50%,transparent 51%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:1.125rem/1.6 var(--body);color:var(--ink);background:var(--snow)}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,.brand,.pitch,.sign b,.store b{font-family:var(--display);font-weight:400;letter-spacing:.01em}
h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.1;margin:0 0 .5em}
p{margin:0 0 1em}
a{color:#1B55B8;text-underline-offset:.15em}
a:focus-visible,.scroller:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:10;background:#fff;padding:8px 12px;border-radius:8px}

/* night sky shared by the header, hero, edition road, party band and page mastheads */
.top,.hero,.horizon,.party,.masthead,.foot{color:#fff;background-color:var(--night)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:14px clamp(16px,4vw,48px)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:1.5rem}
.brand img{width:40px;height:40px;border-radius:10px}
.top nav{display:flex;gap:6px 22px;flex-wrap:wrap}
.top nav a{color:#CFE0FF;text-decoration:none;font-weight:600;padding:6px 0}
.top nav a:hover{color:#fff;text-decoration:underline}

.hill{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(44px,7vw,90px)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(20px,3vw,44px) clamp(16px,4vw,48px) clamp(80px,10vw,140px);
  background-image:var(--stars),linear-gradient(#0B1437,#1C2D63 70%,#2A4580)}
.hero h1{margin:0 0 6px}
.hero h1 img{width:min(420px,78vw)}
.pitch{font-size:clamp(1.5rem,1rem + 2vw,2.25rem);line-height:1.15;color:var(--gold);margin:0 0 .5em}
.lede{max-width:34em;color:#E3ECFF}
.get{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:1.4em}
.get p{margin:0;font-size:1rem;line-height:1.4;color:#CFE0FF}
.get.center{justify-content:center}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:60px;padding:8px 26px 8px 58px;border-radius:14px;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9s-1.900-.9-3.100-.8c-1.6 0-3.100.900-3.900 2.400-1.700 2.900-.4 7.200 1.200 9.500.8 1.100 1.700 2.400 3 2.400 1.200-.1 1.700-.8 3.100-.8s1.900.8 3.200.7c1.300 0 2.100-1.200 2.900-2.300.9-1.300 1.300-2.600 1.300-2.700-.100 0-2.700-1-2.800-4zM14 5.600c.700-.800 1.100-1.900 1-3-1 0-2.100.6-2.800 1.400-.6.700-1.200 1.900-1 3 1.100.1 2.200-.6 2.800-1.400z'/%3E%3C/svg%3E") 18px 50%/28px no-repeat;
  color:#fff;text-decoration:none;border:1.5px solid #A6B4D8;line-height:1.1}
.store small{font-size:.75rem;font-family:var(--body)}
.store b{font-size:1.5rem;font-family:var(--body);font-weight:600;letter-spacing:0}
.store.soon{background-color:#182452}

/* device frames: the screenshots keep their true proportions */
figure{margin:0}
.tv{background:#04060F;padding:1.1%;border-radius:clamp(8px,1.2vw,16px);box-shadow:0 0 0 1px #2B375F,0 24px 60px rgba(4,8,28,.55);position:relative}
.tv img{width:100%;border-radius:clamp(3px,.5vw,6px)}
.tv::after{content:"";position:absolute;left:38%;right:38%;top:100%;height:clamp(5px,.9vw,10px);background:#111830;border-radius:0 0 8px 8px}
.phone{background:#04060F;padding:clamp(6px,1.1vw,11px);border-radius:clamp(20px,3.6vw,38px);box-shadow:0 0 0 1px #2B375F,0 18px 40px rgba(20,32,74,.28)}
.phone img{width:100%;border-radius:clamp(14px,2.6vw,28px)}

/* snow sections */
.play{padding:clamp(40px,7vw,96px) clamp(16px,4vw,48px);display:grid;gap:clamp(48px,8vw,110px)}
.play.after{background:var(--snow)}
.row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto;width:100%}
.row.flip>figure{order:2}
.row p{max-width:32em;color:#27356A}

/* the road of editions: skylines on the horizon, a highway sign in the snow under each */
.horizon{padding:clamp(48px,7vw,90px) 0 0;background-image:var(--stars),linear-gradient(#0B1437,#1C2D63)}
.horizon .inner{padding:0 clamp(16px,4vw,48px);max-width:46em}
.horizon .inner p{color:#D5E1FB}
.scroller{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#5C74B8 transparent;scroll-snap-type:x proximity}
.road{--w:clamp(236px,16.6vw,330px);list-style:none;margin:0;padding:clamp(20px,3vw,40px) clamp(16px,4vw,48px) 0;display:flex;gap:clamp(14px,2vw,40px);width:max-content;justify-content:center;min-width:100%;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;bottom:158px;height:16px;background:var(--hill);border-radius:60% 60% 0 0/100% 100% 0 0}
.road::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:var(--snow);border-radius:50% 50% 0 0/22px 22px 0 0}
.stop{width:var(--w);scroll-snap-align:center;position:relative;z-index:1}
.sky{width:100%}
.sign{height:160px;display:grid;justify-items:center;align-content:start;position:relative;margin-top:-6px}
.sign::before,.sign::after{content:"";position:absolute;top:60px;bottom:0;width:7px;background:#8A93A8;left:26%}
.sign::after{left:auto;right:26%}
.sign b,.sign span,.sign i{position:relative;z-index:1;background:var(--sign);color:#fff;width:82%;text-align:center}
.sign b{font-size:1.75rem;line-height:1;padding:18px 8px 4px;border:4px solid #fff;border-bottom:0;border-radius:14px 14px 0 0;margin-top:14px}
.sign span{font-size:1rem;padding:2px 8px 0;border-inline:4px solid #fff}
.sign i{font-style:normal;font-weight:700;font-size:1rem;color:var(--gold);padding:0 8px 12px;border:4px solid #fff;border-top:0;border-radius:0 0 14px 14px}
.sign.free i{color:#B9F2C8}

/* party band */
.party{position:relative;padding:clamp(48px,7vw,96px) clamp(16px,4vw,48px) clamp(100px,14vw,180px);background-image:var(--stars),linear-gradient(#131C4A,#3A1E3A 120%)}
.party .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.party h2{color:var(--gold)}
.party p{color:#E3ECFF;max-width:32em}

.closing{text-align:center;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px) clamp(56px,8vw,100px);background:var(--snow)}
.closing p{max-width:38em;margin-inline:auto;color:#27356A}
.closing .store.soon{background-color:#182452}

/* footer */
.foot{text-align:center;padding:36px 20px 44px;font-size:1rem}
.foot .made{font-family:var(--display);font-size:1.375rem;margin:0 0 10px}
.foot a{color:#fff}
.foot nav{display:flex;gap:6px 20px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot .fine{color:#93A5D6;font-size:.875rem;margin:0}

/* inner pages */
.masthead{position:relative;padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px) clamp(80px,11vw,150px);background-image:var(--stars),linear-gradient(#0B1437,#1C2D63)}
.masthead .inner{max-width:760px;margin:0 auto}
.masthead h1{font-size:clamp(2.25rem,1.4rem + 4vw,4rem);line-height:1.05;margin:0 0 .25em}
.masthead p{color:#D5E1FB;font-size:1.25rem;margin:0;max-width:30em}
.prose{max-width:calc(760px + 2*clamp(16px,4vw,48px));margin:0 auto;padding:clamp(20px,3vw,36px) clamp(16px,4vw,48px) clamp(56px,8vw,96px)}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:1.8em 0 .5em;color:var(--night)}
.prose li{margin-bottom:.4em}
.prose figure{margin:1.2em 0 1.6em}
.tablewrap{overflow-x:auto;margin:1em 0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--drift)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:1rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--drift);vertical-align:top}
tr:first-child th{background:var(--sign);color:#fff;font-weight:700}
tr:last-child>*{border-bottom:0}
details{background:#fff;border-radius:14px;margin:10px 0;box-shadow:0 0 0 1px var(--drift)}
summary{font-weight:700;cursor:pointer;padding:14px 18px;list-style-position:outside;margin-left:1.2em}
details p{margin:0;padding:0 18px 16px}
.btn{display:inline-block;background:var(--sign);color:#fff;text-decoration:none;font-family:var(--display);font-size:1.375rem;padding:10px 26px;border-radius:999px;border:3px solid #fff;box-shadow:0 0 0 3px var(--sign)}

@media (max-width:860px){
  .hero,.row,.party .inner{grid-template-columns:minmax(0,1fr)}
  .row.flip>figure{order:0}
  .hero-text{text-align:left}
}
@media (max-width:520px){
  body{font-size:1.0625rem}
  .top{justify-content:center}
}