/* Shared styles for the home page, the game pages and the contact page.
   The privacy pages keep their own stylesheet in privacy/style.css. */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/instrument-sans.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/instrument-sans-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#141414; --paper:#F4F3EF; --card:#fff; --muted:#5c5c5c; --line:#d9d7d0;
  --blue:#4FB3F6; --yellow:#FFD500; --pink:#FF8AE0;
  --rule:1.5px solid var(--ink);
  --wrap:1200px; --gutter:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{background:var(--paper);color:var(--ink);
  font:400 17px/1.6 'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:10;padding:8px 12px;background:var(--yellow);border:var(--rule)}

/* Header */
.site-head{background:var(--paper);border-bottom:var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:36px}
.brand span{font:600 17px/1 'Instrument Sans',sans-serif;letter-spacing:-.01em;white-space:nowrap}
.brand span i{font-style:normal;font-weight:400;color:var(--muted)}
.site-nav{display:flex;gap:28px;font:500 16px/1 'Instrument Sans',sans-serif}
.site-nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{border-color:var(--ink)}
.site-nav a[aria-current="page"]{border-color:var(--ink)}

/* Type */
h1,h2,h3{font-family:'Instrument Sans',sans-serif;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
h2{font-size:clamp(30px,3.4vw,44px);line-height:1.05}
p{text-wrap:pretty}
.muted{color:var(--muted)}
.more{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.more:hover{opacity:.65}

/* Google Play badge */
.gp{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 14px;background:#000;color:#fff;
  border:1.5px solid #000;border-radius:11px;text-decoration:none;transition:transform .15s ease}
a.gp:hover{transform:translateY(-2px)}
.gp svg{width:22px;height:25px;flex:none}
.gp span{display:flex;flex-direction:column;font:600 19px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.01em}
.gp small{font:500 10px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.08em;margin-bottom:3px}
.soon-note{display:inline-block;padding:10px 14px;border:1.5px dashed currentColor;border-radius:11px;font-weight:600;font-size:15px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* Buttons */
.pill{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:var(--rule);border-radius:999px;background:#fff;
  font:600 16px/1 'Instrument Sans',sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.pill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.pill-yellow{background:var(--yellow)}

/* Floating pixel icons */
.floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floats .f{position:absolute;animation:bob 6s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 4deg))}}

/* Home: hero */
.hero{position:relative;overflow:hidden;background:var(--blue);border-bottom:var(--rule)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:84px}
.hero .boss{width:84px;margin-bottom:18px;transform:rotate(-6deg);filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.hero h1{font-size:clamp(42px,5.6vw,80px);line-height:.98;letter-spacing:-.045em;max-width:13ch}
.hero p{margin:22px 0 30px;max-width:40ch;font-size:clamp(18px,1.6vw,21px);line-height:1.45}
.hero .f1{width:70px;left:46%;top:9%;--r:-10deg}
.hero .f2{width:62px;right:3%;top:8%;--r:8deg;animation-delay:-2s}
.hero .f3{width:76px;left:3%;bottom:6%;--r:6deg;animation-delay:-4s}
.hero .f4{width:58px;right:44%;bottom:8%;--r:-6deg;animation-delay:-1s}
.hero .f5{width:48px;right:2%;bottom:12%;--r:10deg;animation-delay:-3s}
.hero .f6{width:54px;left:47%;top:52%;--r:-4deg;animation-delay:-5s}
.pile{position:relative;height:clamp(300px,34vw,440px)}
.sticker{position:absolute;width:clamp(110px,12vw,168px);transition:transform .2s ease}
.sticker img{width:100%;border-radius:23%;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.sticker:hover{z-index:5}
.p1{left:2%;top:4%;transform:rotate(-9deg)}
.p2{left:38%;top:0;transform:rotate(6deg)}
.p3{left:20%;top:38%;transform:rotate(-3deg);z-index:2}
.p4{right:2%;top:30%;transform:rotate(11deg)}
.p5{left:56%;top:58%;transform:rotate(-8deg)}
.p1:hover{transform:rotate(-14deg) scale(1.06)}
.p2:hover{transform:rotate(12deg) scale(1.06)}
.p3:hover{transform:rotate(-8deg) scale(1.06)}
.p4:hover{transform:rotate(16deg) scale(1.06)}
.p5:hover{transform:rotate(-13deg) scale(1.06)}

/* Home: ticker */
.ticker{overflow:hidden;background:var(--ink);color:var(--yellow);border-bottom:var(--rule)}
.ticker-track{display:flex;align-items:center;gap:28px;width:max-content;padding:14px 0;animation:tick 28s linear infinite;
  font:600 22px/1 'Instrument Sans',sans-serif;letter-spacing:-.01em;white-space:nowrap;will-change:transform}
.ticker-track img{width:28px;height:28px}
@keyframes tick{to{transform:translateX(-50%)}}

/* Home: game cards */
.games{padding:80px 0 88px}
.games-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:36px}
.games-head h2{font-size:clamp(36px,4.4vw,60px);line-height:1}
.games-head p{max-width:36ch;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:20px;overflow:hidden;
  background:var(--card);color:var(--card-ink);border:var(--rule);border-radius:26px;box-shadow:8px 8px 0 var(--ink);
  padding:26px 0 0 26px;min-height:400px;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.card-text{display:flex;flex-direction:column;padding-bottom:26px}
.card-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.card-icon{width:76px;height:76px;border-radius:23%;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-5deg)}
.tag{padding:7px 12px 6px;border:var(--rule);border-radius:999px;background:var(--yellow);color:var(--ink);
  font:600 12px/1 'Instrument Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;transform:rotate(4deg)}
.tag-soon{background:#fff}
.card h3{font-size:clamp(26px,2.4vw,32px);line-height:1.05}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.card .genre{margin-top:6px;font-weight:600;font-size:14px;opacity:.75}
.card .desc{margin:12px 0 22px;font-size:16px;line-height:1.5}
.card .actions{margin-top:auto;gap:12px}
.card .gp{padding:7px 14px 7px 11px}
.card .gp span{font-size:16px}
.card .pill{padding:10px 16px;font-size:15px}
.shot.phone{align-self:end;display:block;width:168px;margin-right:-6px;margin-bottom:-60px;transform:rotate(5deg);transform-origin:bottom left;
  border:6px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:-6px 6px 0 rgba(0,0,0,.18);background:var(--ink)}
.shot.phone img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top}
.card-wide{grid-template-columns:1fr;min-height:0;padding-right:26px}
.cards > .card:first-child{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) 230px 230px;column-gap:28px;padding:34px 34px 0 34px}
.cards > .card:first-child .card-text{padding-bottom:34px}
.cards > .card:first-child h3{font-size:clamp(32px,3.4vw,48px)}
.cards > .card:first-child .desc{font-size:18px;max-width:40ch}
.cards > .card:first-child .shot.phone{width:230px;margin:0 0 -70px}
.cards > .card:first-child .shot.phone + .shot.phone{transform:rotate(-4deg);transform-origin:bottom right}
.card-wide .card-text{padding-bottom:6px}
/* An even number of cards after the first leaves the last one alone on
   its row: let it span the row and show two phones. */
.cards > .card:nth-child(even):last-child{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) 168px 168px;column-gap:28px;padding-right:34px}
.cards > .card:nth-child(even):last-child .desc{max-width:52ch}
.cards > .card:nth-child(even):last-child .shot.phone + .shot.phone{transform:rotate(-4deg);transform-origin:bottom right}
.shot.wide{display:block;margin:0 0 -40px;transform:rotate(-2deg);border:5px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:6px 6px 0 rgba(0,0,0,.2);background:var(--ink)}
.shot.wide img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center}

/* Home: about */
.studio{position:relative;overflow:hidden;background:var(--yellow);border-top:var(--rule);border-bottom:var(--rule)}
.studio .wrap{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:48px;padding-top:80px;padding-bottom:84px}
.studio h2{font-size:clamp(36px,4.4vw,60px);line-height:1}
.studio p + p{margin-top:14px}
.studio .body{max-width:60ch;font-size:18px}
.studio-art{position:absolute;animation:bob 7s ease-in-out infinite;will-change:transform}
.studio-art.a1{width:84px;left:4%;bottom:12%;--r:-8deg}
.studio-art.a2{width:60px;right:4%;top:14%;--r:10deg;animation-delay:-3s}

/* Game pages: the shared skeleton. Each game restyles it to look like
   its own interface in assets/themes/<slug>.css. */
.g-hero{background:#1d1915;color:#f4efe6;border-bottom:var(--rule)}
.g-hero .wrap{padding-top:28px;padding-bottom:64px}
.crumbs{font-size:15px;opacity:.8;margin-bottom:36px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.g-hero-grid{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.g-kicker{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;opacity:.85}
.title{display:flex;align-items:center;gap:18px}
.title img{width:72px;height:72px;border-radius:22%;flex:none}
.g-hero h1{font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.04em}
.g-hero .lede{margin:22px 0 28px;max-width:38ch;font-size:19px;line-height:1.5}
.g-hero .cover{border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.g-hero .more{color:inherit}

.g-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;padding-top:64px;padding-bottom:56px}
.g-about{align-self:start}
.g-side{display:flex;flex-direction:column;gap:28px}
.g-panel{background:var(--card);border:var(--rule);border-radius:16px;padding:28px 30px 30px}
.g-panel h2{font-size:26px;margin-bottom:16px;letter-spacing:-.02em}
.g-about p{margin-bottom:16px;max-width:62ch}
.g-about p:last-child{margin-bottom:0}
.g-about h3{font-family:inherit;font-size:17px;font-weight:700;margin:18px 0 6px}
.g-about .actions{margin-top:22px}
.g-facts dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.g-facts dt{color:var(--muted)}
.g-facts dd{font-weight:600;text-align:right}
.g-facts .links{display:flex;flex-direction:column;gap:10px;margin-top:18px;font-size:15px}

.g-gallery{padding:8px 0 80px}
.g-gallery h2{font-size:clamp(28px,3vw,40px);margin-bottom:24px}
.shots-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.shots-grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots-grid figure{margin:0}
.shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot-btn img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:18px;border:4px solid var(--ink);transition:transform .2s ease}
.shots-grid.wide .shot-btn img{aspect-ratio:16/9;border-radius:12px}
.shot-btn:hover img{transform:translateY(-4px)}
.shots-grid figcaption{margin-top:10px;font-size:14px;line-height:1.35;opacity:.8}

.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.lightbox::backdrop{background:rgba(0,0,0,.86)}
.lightbox[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.lightbox img{max-width:min(92vw,1200px);max-height:80vh;width:auto;height:auto;border-radius:14px}
.lb-cap{color:#fff;font-size:15px;text-align:center;padding:0 60px}
.lightbox button{position:absolute;width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.5);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-prev{left:16px;top:50%}
.lb-next{right:16px;top:50%}
.lb-close{right:16px;top:16px}

.others{border-top:var(--rule);padding:56px 0 64px}
.others h2{font-size:28px;margin-bottom:22px}
.others ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.others a{display:flex;align-items:center;gap:14px;padding:14px;border:var(--rule);border-radius:14px;background:var(--card);text-decoration:none;font-weight:600;line-height:1.2}
.others a:hover{background:var(--yellow)}
.others img{width:48px;height:48px;border-radius:22%;flex:none}
.others small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:3px}

/* Contact */
.page-title{position:relative;overflow:hidden;border-bottom:var(--rule);background:var(--pink)}
.page-title .wrap{position:relative}
.page-title .f1{width:80px;right:8%;top:22%;--r:-8deg}
.page-title .f2{width:58px;right:24%;bottom:14%;--r:10deg;animation-delay:-3s}
.page-title .wrap{padding-top:64px;padding-bottom:64px}
.page-title h1{font-size:clamp(44px,6vw,80px);line-height:.95;letter-spacing:-.045em}
.page-title p{margin-top:18px;max-width:44ch;font-size:19px}
.mailbox{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.mailbox a.addr{font:600 clamp(20px,2.4vw,30px)/1.2 'Instrument Sans',sans-serif;text-decoration:none;border-bottom:2.5px solid var(--ink);word-break:break-all}
.btn-old{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:var(--rule);border-radius:999px;background:var(--paper);
  font:600 15px/1 'Instrument Sans',sans-serif;color:var(--ink);cursor:pointer;text-decoration:none}
.btn-old:hover{background:#fff}
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-top:64px;padding-bottom:72px}
.topic{background:var(--card);border:var(--rule);border-radius:14px;padding:26px 28px 28px}
.topic h2{font-size:24px;margin-bottom:10px;letter-spacing:-.02em}
.topic p + p{margin-top:10px}
.topic ul{margin:10px 0 0 20px}
.topic li{margin-bottom:4px}

/* Footer */
.site-foot{border-top:var(--rule);padding:48px 0 40px;font-size:15px}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-foot h2{font-size:15px;letter-spacing:0;margin-bottom:12px}
.site-foot ul{list-style:none}
.site-foot li{margin-bottom:7px}
.site-foot li a{text-decoration:none}
.site-foot li a:hover{text-decoration:underline}
.site-foot .legal{margin-top:40px;color:var(--muted);font-size:14px}

@media (max-width:1100px){
  .card{grid-template-columns:minmax(0,1fr) 140px}
  .cards > .card:first-child{grid-template-columns:minmax(0,1fr) 180px 180px}
  .cards > .card:first-child .shot.phone{width:180px}
  .shot.phone{width:140px}
  .cards > .card:nth-child(even):last-child{grid-template-columns:minmax(0,1fr) 140px 140px}
  .others ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero .wrap,.g-hero-grid{grid-template-columns:1fr;gap:28px}
  .g-hero .cover{order:-1}
  .g-body .wrap{grid-template-columns:1fr}
  .shots-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shots-grid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pile{height:300px;max-width:520px}
  .cards{grid-template-columns:1fr}
  .others ul{grid-template-columns:repeat(2,1fr)}
  .studio .wrap{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .topics{grid-template-columns:1fr}
  .hero .wrap{padding-top:40px;padding-bottom:56px}
  .hero .boss{width:64px}
  .pile{height:250px}
  .sticker{width:104px}
  .hero .f1,.hero .f4{display:none}
  .games{padding:56px 0 64px}
  .card{grid-template-columns:minmax(0,1fr) 112px;padding:22px 0 0 20px;min-height:0;box-shadow:6px 6px 0 var(--ink)}
  .card-wide{grid-template-columns:1fr;padding-right:20px}
  .shot.phone{width:112px;border-width:4px;border-radius:20px;margin-bottom:-40px}
  .card-icon{width:60px;height:60px}
  .cards > .card:first-child{grid-template-columns:minmax(0,1fr) 112px;padding:22px 0 0 20px}
  .cards > .card:first-child .shot.phone{width:112px;margin-bottom:-40px}
  .cards > .card:first-child .shot.phone + .shot.phone{display:none}
  .cards > .card:first-child .card-text{padding-bottom:22px}
  .cards > .card:nth-child(even):last-child{grid-template-columns:minmax(0,1fr) 112px;padding-right:0}
  .cards > .card:nth-child(even):last-child .shot.phone + .shot.phone{display:none}
  .studio .wrap{padding-top:56px;padding-bottom:64px}
  .studio-art{display:none}
  .g-hero .wrap{padding-bottom:44px}
  .shots-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .shots-grid.wide{grid-template-columns:1fr}
  .g-panel{padding:22px 20px 24px}
  .crumbs{margin-bottom:22px}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .site-foot .cols > div:first-child{grid-column:1 / -1}
}
@media (max-width:520px){
  .brand span i{display:none}
  .site-nav{gap:18px;font-size:15px}
  .others ul{grid-template-columns:1fr}
  .title img{width:56px;height:56px}
}
@media (max-width:380px){
  .brand span{display:none}
}
@media (max-width:420px){
  .card,.cards > .card:first-child,.cards > .card:nth-child(even):last-child{grid-template-columns:1fr;padding-right:20px}
  .shot.phone,.cards > .card:first-child .shot.phone{justify-self:end;width:150px;margin:-10px 10px -50px 0}
}
@media (prefers-reduced-motion:reduce){
  a.gp,.pill,.card,.sticker{transition:none}
  .floats .f,.studio-art,.ticker-track{animation:none}
}

/* Loading screen (assets/loader.js). Only shown while <html> has
   .is-loading, which an inline script in <head> sets, so with scripts off
   nobody ever sees it. The 5s animation is a safety net. */
.loader{display:none}
.is-loading .loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--loader-bg,var(--blue));color:var(--loader-ink,var(--ink));animation:loaderSafety .3s 5s forwards}
.is-loading body{overflow:hidden}
.is-loaded .loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--loader-bg,var(--blue));color:var(--loader-ink,var(--ink));opacity:0;transform:scale(1.04);pointer-events:none;transition:opacity .4s ease,transform .4s ease}
@keyframes loaderSafety{to{opacity:0;visibility:hidden}}
.loader-stage{position:relative;width:132px;height:140px}
.loader-logo{position:absolute;left:50%;bottom:22px;width:120px;margin-left:-60px;transform-origin:50% 100%;animation:bossHop .9s cubic-bezier(.3,.7,.4,1) infinite;;will-change:transform}
.loader-shadow{position:absolute;left:50%;bottom:6px;width:84px;height:12px;margin-left:-42px;border-radius:50%;background:rgba(0,0,0,.22);animation:bossShadow .9s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes bossHop{0%,100%{transform:translateY(0) scale(1.08,.9)}12%{transform:translateY(0) scale(.94,1.06)}45%{transform:translateY(-34px) rotate(-6deg)}
  60%{transform:translateY(-38px) rotate(5deg)}88%{transform:translateY(0) scale(1.04,.96)}}
@keyframes bossShadow{0%,100%{transform:scale(1)}50%{transform:scale(.55);opacity:.55}}
.loader-bar{position:relative;width:min(300px,72vw);height:26px;padding:4px;border:3px solid var(--loader-line,var(--ink));background:var(--loader-track,#fff);
  box-shadow:5px 5px 0 var(--loader-line,var(--ink))}
.loader-bar i{display:block;height:100%;width:0;background:var(--loader-fill,var(--yellow));
  background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(0,0,0,.14) 14px 18px)}
.loader-row{display:flex;align-items:center;gap:14px;font:700 15px/1 'Instrument Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.loader-row img{width:24px;height:24px;animation:pickup 1.2s ease-in-out infinite}
.loader-row img:nth-child(2){animation-delay:.2s}
.loader-row img:nth-child(3){animation-delay:.4s}
@keyframes pickup{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}
.loader-pct{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.loader-logo,.loader-shadow,.loader-row img{animation:none}}
@media (max-width:760px){.page-title .floats{display:none}}