/* Fonts: Latin files load for the page text, the -ext files only when a Latin Extended character shows up */
@font-face { font-family: "Lalezar"; src: url(/fonts/lalezar-400.woff2) format("woff2"); font-weight: 400; font-display: swap; 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: "Lalezar"; src: url(/fonts/lalezar-400-ext.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/baloo2-600.woff2) format("woff2"); font-weight: 600; font-display: swap; 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: "Baloo 2"; src: url(/fonts/baloo2-600-ext.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/baloo2-700.woff2) format("woff2"); font-weight: 700; font-display: swap; 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: "Baloo 2"; src: url(/fonts/baloo2-700-ext.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/baloo2-800.woff2) format("woff2"); font-weight: 800; font-display: swap; 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: "Baloo 2"; src: url(/fonts/baloo2-800-ext.woff2) format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The album's and the ticket's Japanese line on every page (.album-jp, .tk-jp): M PLUS Rounded 1c, cut to its letters
   (written here by tools/lang-fonts.mjs between the marks) */
/* brand-jp:start */
@font-face { font-family: "LP Brand JP"; src: url(/fonts/letters-jp-brand-74c2cafb25.woff2) format("woff2"); font-weight: 800; font-display: swap; }
/* brand-jp:end */

:root {
  --yellow: #ffbd04;
  --paper: #f6f6f6;
  --ink: #000;
  /* one outline for every sticker, card, button and the ticket */
  --line: 3px;
  /* snappy bounce for the album, likes and the loop popup: ~13% overshoot, settles fast */
  --bounce: cubic-bezier(.3, 1.45, .45, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --bounce: linear(0, .045 2%, .18 5%, .62 13%, .92 19%, 1.08 25%, 1.13 29%, 1.12 33%, 1.06 40%, .99 50%, .975 56%, .985 65%, 1.003 78%, 1); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font: 12px sans-serif; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
img, video, canvas { display: block; }
button { font: inherit; color: inherit; }
/* Keyboard focus: a black ring a little away from the control, clear of the black outline every button, sticker and
   pill already has (on the black bar: a yellow one, inside it) */
:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* Text: display headings in Lalezar, copy in Baloo 2 */
h1, h2, h3 { font-family: "Lalezar", sans-serif; font-weight: 400; line-height: 1; }
p { font-family: "Baloo 2", sans-serif; line-height: 1.2; }

/* Page frame: sections stack in one centred column */
.page { display: flex; flex-direction: column; align-items: center; width: 100%; overflow-x: clip; }

/* Rive canvases fill their box */
.rive { position: relative; }
.rive canvas { width: 100%; height: 100%; }
/* (the parade's first frame as a picture, under its canvas until the canvas has drawn: site.js is-live; the compact
   title screens show only the picture) */
.ts-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-parade canvas { position: relative; }
.ts-parade.is-live .ts-poster { visibility: hidden; }

/* Yellow title screen (home) and its compact version (other pages): sun rays, the logo in the corner,
   the white outlined title and the parade walking behind the road line */
/* --pw: parade width; the road line is as thick as the characters' outline at that size (0.62%) */
.ts { --ray-y: 271px; --pw: 760px; position: relative; width: 100%; height: 900px; overflow: hidden; background: var(--yellow); }
.ts-rays {
  position: absolute; left: 50%; top: var(--ray-y); width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: repeating-conic-gradient(var(--yellow) 0 7.5deg, #ffc93a 7.5deg 15deg);
}
/* they start turning after the first paint (site.js sets rays-on) */
.rays-on .ts-rays { animation: ts-spin 120s linear infinite; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
.ts-emblem {
  position: absolute; z-index: 3; left: 24px; top: 20px; display: block; width: 56px; height: 56px;
  transform: rotate(-6deg); filter: drop-shadow(0 4px 0 #000); transition: transform .42s var(--bounce);
}
.ts-emblem img { width: 100%; height: 100%; }
@media (hover: hover) { .ts-emblem:hover { transform: rotate(6deg) scale(1.1); } }
.ts-emblem:active { transform: scale(1.1, .86); transition-duration: 80ms; }
/* The title screen's corner, across from the emblem (the home page, /loop/N, a player's page /p/N):
     <div class="ts-corner">
       <a class="mine-go" href="/p/N" hidden><span class="mine-face" data-no data-build data-walk style="--c"><canvas></canvas></span><span class="mine-go-l">My loop</span></a>
       <a class="ts-tally" href="/#players" data-n="35"><span class="ts-faces"></span><span class="ts-tally-l">The whole parade</span><b class="ts-n">35</b></a>
     </div>
   Everyone on parade: a white pill (the site's 3 px line and black drop) with the three newest players' faces in a row
   (.ts-face, each a round sticker in its colour, drawn live by gallery/app.js or profile.js once an engine is in), the
   words, and how many on parade on a black tag, counting up once the world has said (site.js). Beside it, a visitor's
   way to their own loop: the same pill with its face and the words (site.js shows it) */
.ts-corner { position: absolute; z-index: 3; right: 30px; top: 28px; display: flex; align-items: center; gap: 10px; }
.ts-tally, .mine-go {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: var(--line) solid #000; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 #000;
  color: #000; font: 800 15px/1 "Baloo 2", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .42s var(--bounce); -webkit-tap-highlight-color: transparent;
}
.mine-go { padding-right: 16px; }
.mine-go[hidden] { display: none; }
.ts-tally-l, .mine-go-l { padding-top: 3px; }
.ts-tally.is-tight .ts-tally-l { display: none; }
.ts-tally.is-tighter .ts-faces { display: none; }
/* (a visitor without a loop: the way to make one, a white face with a «?» as the album's make tile has) */
.mine-go.is-make .mine-face { display: grid; place-items: center; background: #fff; }
.mine-face i { padding-top: .14em; font: 400 22px/1 Lalezar, sans-serif; font-style: normal; color: #000; }
.ts-n { display: grid; place-items: center; min-width: 38px; height: 34px; padding: 4px 9px 0; box-sizing: border-box; border-radius: 17px; background: #000; color: var(--yellow); font: 400 20px/1 Lalezar, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (hover: hover) { :is(.ts-tally, .mine-go):hover { transform: translateY(-3px); } }
:is(.ts-tally, .mine-go):active { transform: translateY(4px); box-shadow: none; transition: none; }
/* A visitor whose loop sleeps: a window over the page (site.js), a white card in the site's line and drop with the
   loop's face as a round sticker, what an email does, the yellow way to the make page and a quiet «not now» */
.wake { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.wake-card { display: grid; justify-items: center; gap: 14px; width: min(100%, 380px); padding: 28px 24px 20px; border: var(--line) solid #000; border-radius: 28px; background: #fff; box-shadow: 0 6px 0 #000; text-align: center; }
.wake .wake-face { width: 104px; height: 104px; border-width: var(--line); }
.wake-t { font: 400 30px/1.05 Lalezar, sans-serif; letter-spacing: .01em; text-wrap: balance; }
.wake-l { max-width: 30ch; font: 600 16px/1.35 "Baloo 2", sans-serif; text-wrap: pretty; }
.wake-go { display: inline-flex; align-items: center; margin-top: 4px; padding: 13px 22px 10px; border: var(--line) solid #000; border-radius: 999px; background: var(--yellow); box-shadow: 0 4px 0 #000; color: #000; font: 800 17px/1 "Baloo 2", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .42s var(--bounce); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .wake-go:hover { transform: translateY(-3px); } }
.wake-go:active { transform: translateY(4px); box-shadow: none; transition: none; }
.wake-later { padding: 6px 12px; border: 0; background: none; color: #000; opacity: .6; font: 700 14px/1 "Baloo 2", sans-serif; letter-spacing: .04em; cursor: pointer; }
.wake-later:hover { opacity: 1; }
/* (the faces overlapping in a row, round stickers in their colours till they are drawn) */
.ts-faces { display: flex; padding-left: 8px; }
.ts-faces:empty { display: none; }
.ts-face, .mine-face { position: relative; flex: none; display: block; width: 36px; height: 36px; box-sizing: border-box; border: 2.5px solid #000; border-radius: 50%; overflow: hidden; background: var(--c, var(--yellow)); }
.ts-face { margin-left: -8px; }
.ts-face canvas, .mine-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
:is(.ts-face, .mine-face).is-live canvas { opacity: 1; }
.ts-home { color: inherit; text-decoration: none; }
.ts-title {
  position: absolute; z-index: 2; left: 50%; top: 150px; display: grid; justify-items: center; transform: translateX(-50%);
  font: 400 132px/.92 "Lalezar", sans-serif; color: #fff; white-space: nowrap; filter: drop-shadow(0 8px 0 #000);
}
.ts-title span { display: block; -webkit-text-stroke: 12px #000; paint-order: stroke fill; animation: ts-pop .6s var(--bounce) both; }
.ts-title span:first-child { rotate: -2deg; }
.ts-title span:last-child { rotate: 2deg; animation-delay: .08s; }
/* the letters ride a slow wave, one after another */
.ts-title i { display: inline-block; font-style: normal; animation: ts-wave 1.6s ease-in-out calc((var(--n, 0) + var(--o, 0)) * .09s) infinite; }
.ts-title span:last-child { --o: 1.5; }
.ts-title i:nth-child(2) { --n: 1; } .ts-title i:nth-child(3) { --n: 2; } .ts-title i:nth-child(4) { --n: 3; }
.ts-title i:nth-child(5) { --n: 4; } .ts-title i:nth-child(6) { --n: 5; }
@keyframes ts-wave { 0%, 100% { transform: none; } 50% { transform: translateY(-.06em); } }
@keyframes ts-pop { from { transform: scale(.4); opacity: 0; } }
/* (the words stay; the arrow beside them hops on the site's bounce) */
.ts-start {
  position: absolute; z-index: 2; left: 50%; top: 470px; display: flex; align-items: center; gap: 10px; transform: translateX(-50%);
  color: #000; text-decoration: none; white-space: nowrap; font: 800 17px/1 "Baloo 2", sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.ts-start::after { content: ""; margin-top: 8px; border: 7px solid transparent; border-top: 9px solid #000; animation: ts-hop 1.4s var(--bounce) infinite; }
@media (hover: hover) { .ts-start:hover::after { animation: none; transform: translateY(5px); } }
@keyframes ts-hop { 0%, 55%, 100% { transform: none; } 30% { transform: translateY(7px); } }
.ts-parade { position: absolute; z-index: 2; left: 50%; bottom: -24px; width: var(--pw); aspect-ratio: 1.9047619047619047; transform: translateX(-50%); }
.ts-road { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 81px; background: var(--paper); border-top: max(2px, calc(var(--pw) * .0062)) solid #000; }
.ts-compact { --ray-y: 206px; --pw: 640px; height: 640px; }
.ts-compact .ts-title { top: 110px; font-size: 104px; }
.ts-compact .ts-parade { bottom: -20px; }
.ts-compact .ts-road { height: 70px; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .ts { --ray-y: 260px; --pw: 700px; }
  .ts-compact { --ray-y: 206px; --pw: 640px; }
  .ts-title { font-size: 120px; }
}
@media (min-width: 810px) and (max-width: 999.98px) {
  .ts-start { top: 498px; }
}
@media (max-width: 809.98px) {
  /* phones: a shorter screen, no scroll hint; the title lower, nearer the parade, so no empty band of rays lies
     between them; the corner's pills smaller */
  .ts { --ray-y: 150px; --pw: 96vw; height: 520px; }
  .ts-emblem { left: 14px; top: 14px; width: 42px; height: 42px; }
  .ts-corner { right: 12px; top: 14px; gap: 8px; }
  .ts-tally { gap: 7px; padding: 4px 6px 4px 4px; font-size: 13px; }
  .ts-face, .mine-face { width: 30px; height: 30px; }
  .ts-n { min-width: 34px; height: 30px; font-size: 18px; }
  /* («My loop» its face only: both pills and their words would reach the emblem) */
  .mine-go { padding: 4px; }
  .mine-go-l { display: none; }
  /* (the ways to make a loop and to wake a sleeping one keep their words: a face alone wouldn't say it) */
  .mine-go:is(.is-make, .is-wake) { padding-right: 12px; }
  .mine-go:is(.is-make, .is-wake) .mine-go-l { display: inline; font-size: 12px; letter-spacing: .04em; }
  .mine-face i { font-size: 18px; }
  .ts-title { top: 118px; font-size: 72px; filter: drop-shadow(0 5px 0 #000); }
  .ts-title span { -webkit-text-stroke: 8px #000; }
  .ts-start { display: none; }
  /* feet just behind the road line, as on desktop: the artboard keeps 12.6% of its width under the feet */
  .ts-parade { bottom: calc(60px - var(--pw) * .138); }
  .ts-road { height: 60px; }
  .ts-compact { --ray-y: 132px; --pw: 92vw; height: 420px; }
  .ts-compact .ts-title { top: 74px; font-size: 64px; }
  .ts-compact .ts-parade { bottom: calc(56px - var(--pw) * .138); }
  .ts-compact .ts-road { height: 56px; }
}

/* Footer: a yellow parade ticket, tilted, straightens on hover. The main part and the stub are cut
   with round notches at the perforation (masks), the stub carries the credits */
.tk-wrap { width: 100%; display: flex; justify-content: center; padding: 50px 20px 80px; }
/* laid out and painted only once it nears the viewport; until then it stands in at about its size */
.tk-wrap { content-visibility: auto; contain-intrinsic-size: auto 330px; }
/* tilted; its hard shadow is a shape of its own with the same notches (a filter would render the tilted text soft) */
.tk { position: relative; isolation: isolate; width: min(1160px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 230px; rotate: -1.5deg; transition: rotate .42s var(--bounce); }
@media (hover: hover) { .tk:hover { rotate: 0deg; } }
.tk::before {
  content: ""; position: absolute; inset: 9px 0 -9px; z-index: -1; border-radius: 26px; background: #000;
  -webkit-mask: radial-gradient(circle 18px at calc(100% - 230px) 0, transparent 17px, #000 18px), radial-gradient(circle 18px at calc(100% - 230px) 100%, transparent 17px, #000 18px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 18px at calc(100% - 230px) 0, transparent 17px, #000 18px), radial-gradient(circle 18px at calc(100% - 230px) 100%, transparent 17px, #000 18px);
  mask-composite: intersect;
}
.tk-main, .tk-stub { position: relative; background: var(--yellow); border: var(--line) solid #000; }
.tk-main {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; padding: 30px 40px 30px; border-right: 0; border-radius: 26px 0 0 26px;
  -webkit-mask: radial-gradient(circle 18px at 100% 0, transparent 17px, #000 18px) top right / 100% 51% no-repeat, radial-gradient(circle 18px at 100% 100%, transparent 17px, #000 18px) bottom right / 100% 51% no-repeat;
  mask: radial-gradient(circle 18px at 100% 0, transparent 17px, #000 18px) top right / 100% 51% no-repeat, radial-gradient(circle 18px at 100% 100%, transparent 17px, #000 18px) bottom right / 100% 51% no-repeat;
}
.tk-stub {
  display: grid; align-content: space-between; justify-items: center; gap: 14px; padding: 26px 20px; text-align: center;
  border-left: var(--line) dashed #000; border-radius: 0 26px 26px 0;
  -webkit-mask: radial-gradient(circle 18px at 0 0, transparent 17px, #000 18px) top left / 100% 51% no-repeat, radial-gradient(circle 18px at 0 100%, transparent 17px, #000 18px) bottom left / 100% 51% no-repeat;
  mask: radial-gradient(circle 18px at 0 0, transparent 17px, #000 18px) top left / 100% 51% no-repeat, radial-gradient(circle 18px at 0 100%, transparent 17px, #000 18px) bottom left / 100% 51% no-repeat;
}
.tk-admit { font: 800 14px/1 "Baloo 2", sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.tk-title { font-size: 96px; line-height: .95; color: #fff; -webkit-text-stroke: 10px #000; paint-order: stroke fill; text-wrap: balance; }
/* (its Japanese in the site's own Japanese face, cut to these letters for every page: tools/lang-fonts.mjs) */
.tk-jp { font: 800 26px/1 "LP Brand JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif; letter-spacing: .1em; }
.tk-stamps { display: flex; flex-wrap: wrap; gap: 14px; }
.tk-stamp {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 7px 10px; border: 3px solid #000; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 #000;
  color: #000; text-decoration: none; font: 800 15px/1 "Baloo 2", sans-serif; -webkit-tap-highlight-color: transparent; transition: transform .42s var(--bounce);
}
.tk-stamp svg { width: 22px; height: 22px; fill: none; stroke: #000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .tk-stamp:hover { transform: translateY(-4px) rotate(-3deg); } }
.tk-stamp:active { transform: scale(1.08, .86); transition-duration: 80ms; }
.tk-lead { font-size: 17px; font-weight: 700; }
.tk-no { font: 400 30px/1 Lalezar, sans-serif; }
.tk-fine { font: 700 12px/1.5 "Baloo 2", sans-serif; }
.tk-fine a { display: inline-block; padding: 3px 0; color: #000; } /* (24 px tall to press, in the small print) */
/* vector bars: a striped gradient breaks into steps once the ticket is tilted */
.tk-bars { display: block; width: 140px; height: 74px; fill: #000; }
@media (max-width: 809.98px) {
  .tk-wrap { padding: 40px 16px 60px; contain-intrinsic-size: auto 560px; }
  .tk { grid-template-columns: minmax(0, 1fr); rotate: -1deg; }
  .tk::before { -webkit-mask: none; mask: none; border-radius: 22px; }
  .tk-main { padding: 22px 18px; border-right: var(--line) solid #000; border-radius: 22px 22px 0 0; -webkit-mask: none; mask: none; }
  .tk-stub { grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; gap: 10px; border-left: var(--line) solid #000; border-top: var(--line) dashed #000; border-radius: 0 0 22px 22px; -webkit-mask: none; mask: none; }
  .tk-stub > .tk-fine { grid-column: 1 / -1; }
  .tk-title { font-size: 58px; -webkit-text-stroke: 7px #000; }
  .tk-jp { font-size: 18px; }
  .tk-admit { font-size: 11px; letter-spacing: .16em; }
  .tk-stamps { gap: 10px; }
  .tk-lead { font-size: 15px; }
  .tk-bars { width: 110px; height: 50px; }
}

/* Likes: heart + count on a loop (site.js adds the button), a pop and sparks on like,
   a big heart on double tap */
.like {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 7px;
  border: 0; border-radius: 15px; background: rgba(255, 255, 255, .92); color: #000; cursor: pointer;
  font: 700 15px/1 "Baloo 2", sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: transform .42s var(--bounce);
}
.like.is-empty { padding: 0 6px; }
.like-n { padding-top: 2px; font-variant-numeric: tabular-nums; }
.like-n:empty { display: none; }
.like svg { width: 18px; height: 18px; overflow: visible; }
.like path, .like-big path { stroke: #000; stroke-linejoin: round; }
.like path { fill: transparent; stroke-width: 2.2; transition: fill .2s; }
.like[aria-pressed="true"] path { fill: var(--yellow); }
@media (hover: hover) { .like:hover { transform: scale(1.08); } }
.like:active { transform: scale(1.08, .86); transition-duration: 80ms; }
.like.is-pop svg { animation: like-pop .46s cubic-bezier(.3, 0, .2, 1); }
@keyframes like-pop { 20% { transform: scale(1.4, .66); } 45% { transform: scale(.82, 1.28); } 70% { transform: scale(1.08, .94); } 100% { transform: none; } }
.like-burst { position: absolute; left: 16px; top: 15px; pointer-events: none; }
.like-burst i {
  position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 1.5px #000;
  transform: rotate(var(--a)); animation: like-spark .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes like-spark { to { transform: rotate(var(--a)) translateY(-20px) scale(.3); opacity: 0; } }
.like-big { position: absolute; left: 50%; top: 50%; z-index: 1; width: 76px; height: 76px; margin: -38px; pointer-events: none; animation: like-big .8s forwards; }
.like-big svg { width: 100%; height: 100%; overflow: visible; }
.like-big path { fill: var(--yellow); stroke-width: 1.4; }
@keyframes like-big {
  0% { transform: scale(.2); opacity: 0; }
  18% { transform: scale(1.15); opacity: 1; }
  32% { transform: scale(.95); }
  45%, 75% { transform: scale(1); opacity: 1; }
  100% { transform: translateY(-14px) scale(1.05); opacity: 0; }
}

/* Pages in another language (lang.js): the words site.js changes wait unseen for it, and the Latin labels' wide
   letter-spacing is narrowed for Japanese, Chinese and Korean letters */
.tr-wait [data-t], .tr-wait [data-t-html], .tr-wait [data-tr], .tr-wait [data-tr-html], .tr-wait time[data-date] { visibility: hidden; }
:root:is([lang="ja"], [lang="zh"], [lang="ko"]) :is(.ts-count, .ts-start, .tk-admit, .album-sub, .tix-kick, .ts-tally-l, .mine-go, .heap-k) { letter-spacing: .06em; }
/* (lines break between phrases, not inside a word: Japanese by phrase where the browser can, Korean by word; the
   intro's title, one line in English, may take two) */
:root[lang="ja"] { word-break: auto-phrase; }
:root[lang="ko"] { word-break: keep-all; }
:root:is([lang="ja"], [lang="zh"], [lang="ko"], [lang="ru"], [lang="es"]) .intro h2 { white-space: normal; text-align: center; text-wrap: balance; }
@media (max-width: 809.98px) { :root:is([lang="ja"], [lang="zh"], [lang="ko"], [lang="ru"], [lang="es"]) .intro h2 { font-size: 40px; } }

/* What's new (build.mjs): the newest as a black bar over every page but /news (closed, it stays away till a newer one:
   lang.js marks the page with the one closed), and the latest few as cards above the footer's ticket */
.nw-bar { position: relative; z-index: 10; display: flex; align-items: center; width: 100%; background: #000; }
.nw-bar-go { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 8px 7px 48px; color: var(--yellow); text-decoration: none; font: 800 15px/1.2 "Baloo 2", sans-serif; }
.nw-bar-new { flex: none; padding: 5px 10px 3px; border-radius: 999px; background: var(--yellow); color: #000; font-size: 11px; letter-spacing: .14em; }
.nw-bar-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-bar-arrow { flex: none; width: 16px; height: 12px; transition: transform .3s var(--bounce); }
.nw-bar-arrow path { fill: none; stroke: var(--yellow); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .nw-bar-go:hover .nw-bar-arrow { transform: translateX(4px); } .nw-bar-go:hover .nw-bar-line { text-decoration: underline; } }
.nw-bar-x { flex: none; display: grid; place-items: center; width: 40px; height: 36px; margin-right: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.nw-bar-x svg { width: 16px; height: 16px; }
.nw-bar :focus-visible { outline-color: var(--yellow); outline-offset: -4px; }
.nw-recent { width: min(1160px, 100%); box-sizing: border-box; padding: 40px 20px 0; }
.nw-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 6px 16px; }
.nw-recent-head h2 { font-size: 44px; }
.nw-all { font: 800 15px/1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #000; }
.nw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.nw-card { display: grid; gap: 8px; align-content: start; padding: 14px 16px 16px; background: #fff; border: var(--line) solid #000; border-radius: 18px; box-shadow: 0 5px 0 #000; color: #000; text-decoration: none; transition: transform .42s var(--bounce); }
@media (hover: hover) { .nw-card:hover { transform: translateY(-4px); } }
.nw-card time { justify-self: start; padding: 5px 10px 3px; border-radius: 999px; background: var(--yellow); border: 2.5px solid #000; font: 800 12px/1 "Baloo 2", sans-serif; letter-spacing: .08em; rotate: -3deg; }
.nw-card b { font: 400 22px/1.1 Lalezar, sans-serif; text-wrap: balance; }
/* (one entry so far: a narrow row, not a block of one card) */
.nw-recent:has(.nw-card:only-child) { padding-top: 26px; }
.nw-recent:has(.nw-card:only-child) .nw-recent-head { margin-bottom: 10px; }
.nw-recent:has(.nw-card:only-child) .nw-recent-head h2 { font-size: 30px; }
.nw-cards:has(> .nw-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.nw-card:only-child { display: flex; align-items: center; gap: 14px; padding: 10px 16px; box-shadow: 0 4px 0 #000; }
.nw-card:only-child time { flex: none; }
.nw-card:only-child b { font-size: 20px; }
@media (max-width: 809.98px) {
  .nw-bar-go { padding-left: 12px; justify-content: flex-start; font-size: 14px; }
  .nw-recent { padding: 30px 16px 0; }
  .nw-recent-head h2 { font-size: 34px; }
  .nw-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nw-card b { font-size: 20px; }
}

/* A word for a moment over what it is about («Link copied!», a heart the server didn't take): a white speech bubble as a
   player's page's notes are (3 px line, a flat drop), its tail one piece with it, pointing down at the thing. .lp-tip
   sits in its button (hidden till it shows), .lpg-say is put over the page (gallery/app.js) */
.lp-tip, .lpg-say { position: absolute; z-index: 5; padding: 7px 13px 4px; border: var(--line) solid #000; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 #000; color: #000; font: 800 13px/1.2 "Baloo 2", sans-serif; letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.lp-tip { left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); }
.lp-tip[hidden] { display: none; }
.lpg-say { z-index: 40; transform: translate(-50%, -100%); white-space: normal; width: max-content; max-width: min(240px, 80vw); text-align: center; }
.lp-tip::after, .lpg-say::after {
  content: ""; position: absolute; left: calc(50% - 17px); top: calc(100% - 1px); width: 34px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-17 -1 34 34'%3E%3Cpath d='M-14 4.5L0 24L14 4.5Z'/%3E%3Cpath d='M-14 -1H14V1.5L0 21L-14 1.5Z' fill='%23fff'/%3E%3Cpath d='M-14 1.5L0 21L14 1.5' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* (the films playing for the canvases that show them: site.js) */
.film-deck { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.film-deck video { width: 1px; height: 1px; }
/* Home page */

/* (its main part stacks and centres its sections as the page does) */
.home { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* Section heading */
.intro { width: 1200px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 30px 20px; overflow: hidden; }
/* (its kicker over it, as the site's tickets have: .tix-kick) */
.intro-kick { margin-bottom: 4px; font: 800 13px/1 "Baloo 2", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.intro h2 { font-size: 56px; line-height: 1.3; white-space: pre; }
.intro p { width: 500px; font-size: 22px; font-weight: 700; text-align: center; white-space: pre-wrap; overflow-wrap: break-word; text-wrap: balance; }

/* Loop album: tiles on a squared page (gallery/gallery.css); the tabs on top switch the set */
.loops { width: 1200px; display: flex; flex-direction: column; padding: 20px 20px 10px; overflow-anchor: none; }
/* The album and the cards under it are laid out and painted only once they near the viewport;
   until then they stand in at about their size (auto: the last size they had) */
.loops { content-visibility: auto; contain-intrinsic-size: auto 1900px; }
.duo { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.album-tabs { position: relative; z-index: 1; display: flex; gap: 6px; padding-left: 24px; margin-bottom: -3px; }
.album-tab {
  padding: 9px 18px 6px; border: 3px solid #000; border-bottom: 0; border-radius: 14px 14px 0 0; cursor: pointer;
  background: #fbcf6f; color: #000; font: 800 17px/1.2 "Baloo 2", sans-serif; letter-spacing: .01em; white-space: nowrap;
  transform-origin: bottom; -webkit-tap-highlight-color: transparent;
  transition: padding .42s var(--bounce), background-color .2s, transform .42s var(--bounce);
}
.album-tab[aria-pressed="true"] { padding-top: 13px; background: var(--yellow); }
/* the word bubble over the players' tab for a visitor who has never opened it (gallery/app.js): the site's .lp-tip,
   placed by its script, its tail at the tab; it pops in once the tabs are in sight and bobs a little */
.album-tabs > .tab-hint { left: 0; bottom: calc(100% + 16px); transform: none; width: max-content; max-width: min(280px, calc(100vw - 20px)); white-space: normal; text-align: center; text-wrap: balance;
  opacity: 0; scale: .6; transform-origin: var(--tail, 50%) 130%; pointer-events: none; transition: opacity .2s, scale .45s var(--bounce); }
.album-tabs > .tab-hint.on { opacity: 1; scale: 1; animation: tab-hint 2.6s ease-in-out .6s infinite; }
.album-tabs > .tab-hint::after { left: calc(var(--tail, 50%) - 17px); }
@keyframes tab-hint { 50% { translate: 0 -4px; } }
.loops.with-hint { padding-top: 84px; }
.album-tab:active { transform: scale(1.06, .88); transition-duration: 80ms; }
.album {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: 24px 24px 0; border: 3px solid #000; border-radius: 22px;
  background-color: var(--paper);
  background-image: linear-gradient(#e4e1da 1px, transparent 1px), linear-gradient(90deg, #e4e1da 1px, transparent 1px);
  background-size: 22px 22px;
}
.album-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.album-jp { font: 800 28px/1.1 "LP Brand JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif; letter-spacing: .02em; }
.album-sub { font: 700 14px/1.2 "Baloo 2", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; }

/* Sticker: the loop as a die-cut sticker (white edge, black outline) with a slight tilt that straightens on hover.
   Its number is a tag in the loop's colour stuck on the top-left corner, the heart sits on the bottom-right one. */
.st {
  position: relative; display: block; padding: 8px;
  border: var(--line) solid #000; border-radius: 26px; background: #fff; box-shadow: 0 4px 0 #000;
  transform: rotate(var(--r, 0deg)); transition: transform .42s var(--bounce), box-shadow .2s;
}
.st[hidden] { display: none; }
/* on hover the sticker straightens and lifts */
@media (hover: hover) { .st:hover { z-index: 1; transform: translateY(-6px) scale(1.04); box-shadow: 0 7px 0 #000; } }
.st:has(.st-face:active) { transform: scale(1.04, .94); transition-duration: 80ms; }
.st-face { display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #efefef; -webkit-tap-highlight-color: transparent; }
.st-face > video, .st-face > canvas, .st-face > img { width: 100%; height: 100%; object-fit: cover; }
.st-no {
  position: absolute; z-index: 2; left: -10px; top: -12px; rotate: -8deg; padding: 7px 10px 2px; pointer-events: none;
  border: var(--line) solid #000; border-radius: 12px; background: var(--c, var(--yellow)); box-shadow: 0 3px 0 #000;
  font: 400 26px/1 Lalezar, sans-serif; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill;
}
.st-foot { position: absolute; z-index: 2; right: -8px; bottom: -10px; display: flex; }
/* A duel (gallery/duel.js draws its loops): one screen cut in two along a slanted seam (a black band edged in white),
   each half its colour, strong (--h set by site.js: its loop's, the notes' blue for a grey, white or pale one), with a
   player's page's hearts drifting on it in a deeper tone, the loop walking on a road of that tone, «VS» on the seam;
   till the loop walks, its film's first picture on the ground. On the walk-off a half is the button that picks it */
/* (--slant: how far the seam leans; --feet / --tall: where a loop's feet are and how tall it is, as parts of its canvas:
   gallery/duel.js) */
.duel { --slant: 28px; --feet: .88; --tall: .7; --road: dark; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: var(--line) solid #000; border-radius: 26px; background: #000; box-shadow: 0 8px 0 #000; isolation: isolate; }
.duel-side {
  --g: color-mix(in srgb, var(--h, var(--c, var(--yellow))) 82%, #fff);
  position: relative; display: block; min-width: 0; height: 100%; padding: 0; border: 0; overflow: hidden; background: var(--g); color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent; transition: filter .4s, background-color .35s;
}
/* (the seam: the left half reaches over the middle at the top, the right one at the foot, a black gap between) */
.duel-side[data-side="0"] { margin-right: calc(var(--slant) / -2); clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.duel-side[data-side="1"] { margin-left: calc(var(--slant) / -2); clip-path: polygon(calc(var(--slant) + 6px) 0, 100% 0, 100% 100%, 6px 100%); }
.duel-side::before {
  content: ""; position: absolute; inset: -72px 0 0 -72px; z-index: 0; opacity: .16; pointer-events: none; background: color-mix(in srgb, var(--h, var(--c, var(--yellow))) 72%, #000);
  animation: duel-drift 10s linear infinite; will-change: translate; transition: background-color .35s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M18 27c-4-3-7-5.5-7-8.6 0-2 1.6-3.6 3.6-3.6 1.4 0 2.6.7 3.4 1.9.8-1.2 2-1.9 3.4-1.9 2 0 3.6 1.6 3.6 3.6 0 3.1-3 5.6-7 8.6zM54 63c-4-3-7-5.5-7-8.6 0-2 1.6-3.6 3.6-3.6 1.4 0 2.6.7 3.4 1.9.8-1.2 2-1.9 3.4-1.9 2 0 3.6 1.6 3.6 3.6 0 3.1-3 5.6-7 8.6z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 72px 72px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M18 27c-4-3-7-5.5-7-8.6 0-2 1.6-3.6 3.6-3.6 1.4 0 2.6.7 3.4 1.9.8-1.2 2-1.9 3.4-1.9 2 0 3.6 1.6 3.6 3.6 0 3.1-3 5.6-7 8.6zM54 63c-4-3-7-5.5-7-8.6 0-2 1.6-3.6 3.6-3.6 1.4 0 2.6.7 3.4 1.9.8-1.2 2-1.9 3.4-1.9 2 0 3.6 1.6 3.6 3.6 0 3.1-3 5.6-7 8.6z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 72px 72px;
}
@keyframes duel-drift { to { translate: 72px 72px; } }
/* (its colour coming up: under the pointer a little, picked more) */
.duel-side::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--h, var(--c, var(--yellow))); opacity: 0; pointer-events: none; transition: opacity .4s; }
.duel-live, .duel-poster { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.duel-live { opacity: 0; transition: opacity .3s; }
.duel-side.is-live .duel-live { opacity: 1; }
/* (the film's first picture: its grey ground multiplied away on the half's colour, its edges faded, gone once the loop
   walks) */
.duel-poster {
  inset: 10% 6% 4%; width: auto; height: auto; background: center bottom / contain no-repeat; mix-blend-mode: multiply; transition: opacity .3s;
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent);
}
.duel-side.is-live .duel-poster { opacity: 0; }
.duel.is-on .duel-poster { display: none; }
/* (the two face each other: the left one turned round) */
.duel-side[data-side="0"] :is(.duel-live, .duel-poster) { transform: scaleX(-1); }
.duel-side .st-no { top: auto; bottom: 14px; left: 18px; rotate: -5deg; }
.duel-side[data-side="1"] .st-no { left: auto; right: 18px; rotate: 5deg; }
/* (the seam: a black band edged in white over the halves' gap, from the middle's top to its foot as they meet: two
   clipped parallelograms, whose edges are smooth where a turned stripe's would be stepped. --mid: where the halves meet,
   --seam-w / --seam-b: the band's width and its black's) */
.duel { --mid: 50%; --seam-w: 10px; --seam-b: 6px; }
.duel-seam, .duel-seam::after {
  position: absolute; z-index: 1; inset: 0; pointer-events: none; background: #fff;
  --t: calc(var(--mid) + var(--slant) / 2 + 3px); --f: calc(var(--mid) - var(--slant) / 2 + 3px); --e: calc(var(--seam-w) / 2);
  clip-path: polygon(calc(var(--t) - var(--e)) 0, calc(var(--t) + var(--e)) 0, calc(var(--f) + var(--e)) 100%, calc(var(--f) - var(--e)) 100%);
}
.duel-seam::after { content: ""; z-index: 0; background: #000; --e: calc(var(--seam-b) / 2); }
/* (where color-mix is unknown: the halves in their plain colours, rather than none over the black) */
@supports not (color: color-mix(in srgb, red, red)) {
  .duel-side { --g: var(--h, var(--c, var(--yellow))); }
  .duel-side::before { background: #000; opacity: .08; }
}
.duel-vs { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; font: 400 104px/1 Lalezar, sans-serif; color: #fff; -webkit-text-stroke: 9px #000; paint-order: stroke fill; rotate: -6deg; pointer-events: none; }
.duel-pct { position: absolute; z-index: 2; left: 50%; top: 9%; translate: -50% 0; font: 400 72px/1 Lalezar, sans-serif; color: #fff; -webkit-text-stroke: 9px #000; paint-order: stroke fill; pointer-events: none; }
.duel-pct:empty { display: none; }
/* (a loop's answer: a player's page's emote bubble (profile.css .pf-say), its tail's tip over the loop's head, as big
   as a third of the loop) */
.duel-say {
  --s: clamp(54px, calc(var(--lh, 160px) * .34), 120px);
  position: absolute; z-index: 3; width: var(--s); height: var(--s); margin: calc(var(--s) * -1) 0 0 calc(var(--s) * -.5); padding: calc(var(--s) * .14) calc(var(--s) * .19) calc(var(--s) * .3); box-sizing: border-box; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M9 3h32a6 6 0 0 1 6 6v22a6 6 0 0 1-6 6H31l-6 9-6-9H9a6 6 0 0 1-6-6V9a6 6 0 0 1 6-6z' fill='%23fff' stroke='%23141414' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 50% 100%; animation: duel-say 2.4s cubic-bezier(.33, 1, .68, 1) forwards;
}
.duel-say svg { width: 100%; height: 100%; display: block; }
@keyframes duel-say { 0% { scale: .01; } 7% { scale: 1.14; } 12% { scale: 1; } 70% { opacity: 1; translate: 0 0; } 100% { scale: 1; translate: 0 -50px; opacity: 0; } }
/* Holo: a loop that holds a title gets a foil sticker and a ribbon saying which title. The foil shifts by fading
   between two foil layers: an opacity animation runs on the compositor, a moving gradient would repaint every frame */
.st.holo::before, .st.holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.st.holo::before { background: linear-gradient(115deg, #ffb3e6, #9fdcff 25%, #ffe873 50%, #a6f7c0 75%, #c9a8ff); }
.st.holo::after { background: linear-gradient(65deg, #ffe873, #a6f7c0 25%, #c9a8ff 50%, #ffb3e6 75%, #9fdcff); opacity: 0; will-change: opacity; animation: holo 5s ease-in-out infinite alternate; }
.st.holo > .st-face { position: relative; z-index: 1; }
@keyframes holo { 0%, 30% { opacity: 0; } 100% { opacity: 1; } }
/* the title: a foil band across the top-right corner, cut by the sticker's edge */
.st-sash { position: absolute; z-index: 2; inset: 0; border-radius: 23px; overflow: hidden; pointer-events: none; }
.st-sash > span {
  position: absolute; right: -44px; top: 26px; width: 180px; rotate: 45deg; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 0 3px; border-block: var(--line) solid #000; background: linear-gradient(115deg, #ffb3e6, #9fdcff 30%, #ffe873 55%, #a6f7c0 80%, #c9a8ff);
  font: 800 10px/1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.st-sash svg { flex: none; width: 13px; height: 13px; margin-top: -2px; overflow: visible; }
.st-foot .like { position: relative; height: 38px; padding: 0 12px 0 9px; border: var(--line) solid #000; border-radius: 19px; background: #fff; box-shadow: 0 3px 0 #000; }
.st-foot .like.is-empty { padding: 0 8px; }
/* (a finger-sized place to press around the pill) */
.st-foot .like::before { content: ""; position: absolute; inset: -8px; }

/* One loop, big: a card that grows out of its tile (/loop/N), over the site's one dark (a player's page's cards too) */
html.lp-open { overflow: hidden; }
.lp { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-content: center; gap: 18px; padding: 20px; background: rgba(12, 10, 6, .62); overscroll-behavior: contain; }
.lp[hidden] { display: none; }
.lp-card {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 130px); max-height: calc(100svh - 130px); overflow: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 12px; border: 3px solid #000; border-radius: 28px; background: #fff; box-shadow: 0 8px 0 #000;
}
/* (number and cross where they stand beside the title and its two lines, a walk-off record under them or not) */
.lp-head { display: flex; align-items: flex-start; gap: 12px; padding: 2px 2px 0; }
.lp-no { position: static; flex: none; rotate: -6deg; margin-top: 5px; }
.lp-title { flex: 1; min-width: 0; padding-top: 6px; font-size: 36px; }
/* the loop's name and mood under its number (src/loops.json, the words of its GIPHY tags) */
.lp-named { flex: 1; min-width: 0; padding-top: 6px; }
.lp-named .lp-title { padding-top: 0; }
.lp-name { display: block; margin-top: 3px; font: 800 15px/1.25 "Baloo 2", sans-serif; }
.lp-mood { margin-top: 1px; color: #555; font: 600 14px/1.25 "Baloo 2", sans-serif; }
.lp-mood[hidden] { display: none; }
.lp-close {
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border: 3px solid #000; border-radius: 50%; background: #fff; cursor: pointer; transition: transform .42s var(--bounce);
}
.lp-close > svg:last-child { width: 18px; height: 18px; }
/* a hat sitting on top of the button, lifted on hover */
.lp-hat { position: absolute; left: 5px; top: -13px; width: 30px; height: 18px; transform-origin: 50% 100%; transition: transform .42s var(--bounce); }
@media (hover: hover) { .lp-close:hover .lp-hat { transform: translateY(-6px) rotate(-10deg); } }
/* (on its tile's ground, framed as its tile: the film's grey taken by the loop's colour) */
.lp-face { position: relative; aspect-ratio: 1; border: 3px solid #000; border-radius: 18px; overflow: hidden; background: var(--tint, #efefef); box-shadow: 0 4px 0 #000; touch-action: pan-y; }
/* (on a short screen the face gets smaller, square and centred, so the row under it stays on screen at its full width:
   the rest of the card is about 184 px tall) */
.lp-card > .lp-face { flex: none; align-self: center; width: min(100%, max(200px, calc(100vh - 320px))); width: min(100%, max(200px, calc(100svh - 320px))); }
.lp-face > video, .lp-face > img { position: relative; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* (its poster, under the film till the film has a frame) */
.lp-face > .lp-still { position: absolute; inset: 0; }
.lp-face.has-film > .lp-still { visibility: hidden; }
.lp-actions { position: relative; display: flex; align-items: center; gap: 8px; }
/* the arrows sit under the card */
.lp-nav { display: flex; gap: 22px; }
.lp-nav .lp-round { width: 56px; height: 56px; box-shadow: 0 5px 0 #000; }
.lp-nav .lp-round svg { width: 24px; height: 24px; }
.lp-btn, .lp-round { border: 3px solid #000; background: #fff; box-shadow: 0 3px 0 #000; color: #000; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .42s var(--bounce); }
.lp-btn { position: relative; height: 44px; padding: 3px 16px 0; border-radius: 22px; font: 700 16px/1 "Baloo 2", sans-serif; white-space: nowrap; }
.lp-round { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.lp-round svg { width: 20px; height: 20px; }
@media (hover: hover) { .lp-btn:hover, .lp-round:hover { transform: translateY(-3px); } }
.lp-btn:active, .lp-round:active, .lp-close:active { transform: scale(1.08, .86); transition-duration: 80ms; }
/* the download right of the heart; sharing on a row under them: buttons with their words on them (a player's page's
   .pf-mini), no tips */
.lp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 0 4px; }
.lp-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 3px 16px 0 13px; border: var(--line) solid #000; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 #000; color: #000; font: 800 13px/1 "Baloo 2", sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .42s var(--bounce); }
.lp-pill[hidden] { display: none; }
.lp-pill > svg { width: 19px; height: 19px; flex: none; margin-top: -3px; }
.lp-pill > .lp-x { width: 15px; height: 15px; }
@media (hover: hover) { .lp-pill:hover { transform: translateY(-2px); } }
.lp-pill:active { transform: translateY(4px); box-shadow: none; transition: none; }
.lp-get { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding-left: 13px; background: var(--yellow); }
.lp-get svg { width: 18px; height: 18px; margin-top: -3px; }
.lp-get[aria-expanded="true"] { background: #f2ab00; }
/* the files: a menu that opens upward over the picture, so the card keeps its size */
.lp-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 2; display: grid; gap: 2px; width: 236px; padding: 6px;
  border: 3px solid #000; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #000;
}
.lp-menu[hidden] { display: none; }
.lp-menu a { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 7px; border-radius: 12px; color: #000; text-decoration: none; font: 700 16px/1 "Baloo 2", sans-serif; }
.lp-menu a span { color: #6b6b6b; font-weight: 600; font-size: 13px; }
.lp-menu a:hover, .lp-menu a:focus-visible { background: var(--yellow); }
.lp-menu small { padding: 7px 10px 4px; border-top: 2px dashed #e2e2e2; color: #6b6b6b; font: 600 12px/1.3 "Baloo 2", sans-serif; }
/* the heart goes left, big; with no likes yet it says Like */
.lp-like { flex: none; }
.lp-like .like, .lp-like .like.is-empty { position: static; height: 46px; padding: 0 18px 0 14px; border: var(--line) solid #000; box-shadow: none; font-size: 18px; gap: 7px; }
.lp-like .like-n:empty { display: inline; }
.lp-like .like-n:empty::before { content: attr(data-like); }
.lp-like .like svg { width: 24px; height: 24px; }
.lp-like .like-burst { left: 26px; top: 20px; }
/* Under the album: room below its last row, and where its end is watched for the next ones (gallery/app.js) */
.loops-foot { width: 100%; display: flex; justify-content: center; padding: 18px 0 40px; }

/* The walk-off and the world's queue: two admission tickets side by side (stacked on phones), each a window above a
   perforation and the words on the stub, on a band of blue rays across the page (as the title screen's yellow ones);
   the big ticket (the footer) stays on the paper below it. The padding below keeps the tilted tickets' shadows inside
   the paint clip that content-visibility brings */
.duo-band { width: 100%; display: flex; justify-content: center; margin-top: 60px; border-block: var(--line) solid #000;
  background: radial-gradient(circle at 50% 50%, #63b0fd 0 40px, rgba(99, 176, 253, .85) 90px, rgba(99, 176, 253, 0) 300px),
    #5aaafa repeating-conic-gradient(from 0deg at 50% 50%, #5aaafa 0 7.5deg, #6cb6ff 7.5deg 15deg); }
/* (the rays meet between the tickets: a soft glow there, so no point of thin spikes shows) */
.duo-band ~ .tk-wrap { padding-top: 90px; }
.duo { width: 1200px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 60px 20px 64px; }
.tix { position: relative; display: grid; grid-template-rows: 250px auto; border: var(--line) solid #000; border-radius: 26px; background: #fff; box-shadow: 0 8px 0 #000; color: #000; text-decoration: none; overflow: hidden; transition: transform .42s var(--bounce); }
.duo-walk { rotate: -1.2deg; } .duo-build { rotate: 1.2deg; }
/* (a device without a loop of its own: the way to bring one here, under the ticket that makes one) */
.duo-have { grid-column: 1 / -1; justify-self: end; margin: -12px 0 0; }
.duo-have[hidden] { display: none; }
.duo-have-go { display: inline-flex; align-items: center; height: 44px; padding: 3px 18px 0; border: var(--line) solid #000; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 #000; color: #000; font: 800 13px/1 "Baloo 2", sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .42s var(--bounce); }
@media (hover: hover) { .duo-have-go:hover { transform: translateY(-2px); } }
.duo-have-go:active { transform: translateY(4px); box-shadow: none; transition: none; }
@media (max-width: 809.98px) { .duo-have { justify-self: center; } }
@media (hover: hover) { .tix:hover { transform: translateY(-6px) scale(1.02); } }
.tix:active { transform: scale(1.03, .95); transition-duration: 80ms; }
/* the window: the album's paper with today's duel on it, or a moment of the world */
.tix-win { position: relative; display: flex; align-items: center; justify-content: center; margin: 14px 14px 0; border: var(--line) solid #000; border-radius: 18px; overflow: hidden; background: #f9c48a; }
.tix-paper { background-color: #fff; background-image: linear-gradient(#e4e1da 1px, transparent 1px), linear-gradient(90deg, #e4e1da 1px, transparent 1px); background-size: 22px 22px; background-position: center; }
.tix-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* (the make ticket's window: a visitor's own loop walking in its colour, else the «?» loop to make, on the album's
   make tile's paper: gallery/app.js) */
.tix-make { height: 250px; background: #fffdf3; }
.tix-live { position: absolute; inset: 0; width: 100%; height: 100%; }
/* (today's duel filling the window: the walk-off's screen in small, the window's own edge round it) */
.tix-duel.duel { width: 100%; height: 250px; border: 0; border-radius: 0; box-shadow: none; }
.tix-vs.duel-vs { font-size: 58px; -webkit-text-stroke: 6px #000; }
/* the stub: under the perforation (its two notches the page's paper) */
.tix-stub { position: relative; display: grid; gap: 10px; justify-items: start; margin-top: 18px; padding: 22px 26px 24px; border-top: var(--line) dashed #000; }
.tix-stub::before, .tix-stub::after { content: ""; position: absolute; top: -17px; width: 30px; height: 30px; border: var(--line) solid #000; border-radius: 50%; background: #5aaafa; }
.tix-stub::before { left: -18px; } .tix-stub::after { right: -18px; }
.tix-kick { font: 800 13px/1 "Baloo 2", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.tix-head { font: 400 40px/1.02 Lalezar, sans-serif; text-wrap: balance; }
/* (a newcomer is told what a loop of their own comes with: its page) */
.tix-line { max-width: 32ch; margin-top: -2px; font: 700 16px/1.35 "Baloo 2", sans-serif; text-wrap: pretty; }
.tix-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.tix-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px 10px; border: var(--line) solid #000; border-radius: 999px; background: var(--yellow); box-shadow: 0 5px 0 #000; font: 800 15px/1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tix-cta::after { content: ""; width: 8px; height: 8px; margin: -2px 2px 0 0; border-top: 3.5px solid; border-right: 3.5px solid; rotate: 45deg; }
.tix-no { font: 400 26px/1 Lalezar, sans-serif; white-space: nowrap; }
/* the opening's list: a wide ticket under the two, the words on the left, the email on the stub past an upright
   perforation (its notches the band's blue); stacked on phones with the perforation across, as the two above */
.duo-mail { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); border: var(--line) solid #000; border-radius: 26px; background: #fff; box-shadow: 0 8px 0 #000; overflow: hidden; rotate: -.6deg; }
.mail-words { display: grid; gap: 12px; align-content: center; justify-items: start; padding: 30px 34px 32px; }
.mail-say { max-width: 44ch; font: 700 17px/1.4 "Baloo 2", sans-serif; }
.mail-stub { position: relative; display: grid; align-content: center; padding: 30px 34px 32px; border-left: var(--line) dashed #000; }
.mail-stub::before, .mail-stub::after { content: ""; position: absolute; left: -17px; width: 30px; height: 30px; border: var(--line) solid #000; border-radius: 50%; background: #5aaafa; }
.mail-stub::before { top: -18px; } .mail-stub::after { bottom: -18px; }
.mail-ask, .mail-done { display: grid; gap: 12px; }
.mail-ask[hidden], .mail-done[hidden], .mail-note[hidden] { display: none; }
.mail-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mail-in { flex: 1 1 190px; min-width: 0; height: 52px; box-sizing: border-box; padding: 4px 20px 0; border: var(--line) solid #000; border-radius: 999px; background: #fff; color: #000; font: 700 17px/1 "Baloo 2", sans-serif; }
.mail-in::placeholder { color: #8a867e; }
.mail-in:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.mail-go { flex: none; height: 52px; box-sizing: border-box; justify-content: center; cursor: pointer; transition: transform .42s var(--bounce); }
@media (hover: hover) { .mail-go:hover { transform: translateY(-3px); } }
.mail-go:active { transform: scale(1.06, .9); transition-duration: 80ms; }
.mail-go:disabled { cursor: default; opacity: .6; transform: none; }
.mail-note { font: 800 15px/1.35 "Baloo 2", sans-serif; }
.mail-fine { font: 700 13px/1.5 "Baloo 2", sans-serif; color: #4a4740; }
.mail-fine a { color: #000; }
.mail-loop { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* the loop's walk-off record in the popup: words under its mood (nothing between its film and its buttons that could
   be taken for one), its titles a ribbon across the film's corner, as its tile in the album has */
.lp-duel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.lp-duel[hidden] { display: none; }
.lp-face { container-type: inline-size; }
.lp-face > .rib { position: absolute; z-index: 3; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lp-face > .rib > span {
  position: absolute; right: -16cqw; top: 9cqw; width: 64cqw; rotate: 45deg; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0 5px;
  border-block: 3px solid #000; background: linear-gradient(115deg, #ffb3e6, #9fdcff 30%, #ffe873 55%, #a6f7c0 80%, #c9a8ff);
  font: 800 min(13px, calc(60cqw / var(--n, 14)))/1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #000;
}
.lp-face > .rib-champ > span { background: linear-gradient(115deg, #4a9cf5, #a9d4ff 30%, #5aaafa 55%, #d6ebff 80%, #4a9cf5); }
.lp-face > .rib svg { flex: none; width: 1.3em; height: 1.3em; margin-top: -.2em; overflow: visible; }
.lp-rate b { font-weight: 800; }
/* (each a bubble: thinner than a button and with no shadow under it, so none reads as one to press) */
.lp-duel > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 3px; border: 2px solid #000; border-radius: 999px; background: #fff; color: #000; font: 800 12px/1 "Baloo 2", sans-serif; white-space: nowrap; }
.lp-duel > .lp-crown { background: var(--yellow); }
.lp-duel > .lp-title-too { background: linear-gradient(115deg, #ffb3e6, #9fdcff 30%, #ffe873 55%, #a6f7c0 80%, #c9a8ff); }
.lp-duel > .lp-title-too.t-champ { background: linear-gradient(115deg, #4a9cf5, #a9d4ff 30%, #5aaafa 55%, #d6ebff 80%, #4a9cf5); }
.lp-duel > .lp-more { background: #fff; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .intro, .loops { width: 100%; }
  .st { padding: 6px; border-radius: 22px; }
  .st-face { border-radius: 16px; }
  .st-no { left: -8px; top: -10px; padding: 6px 8px 1px; font-size: 22px; -webkit-text-stroke-width: 4px; }
  .st-foot { right: -6px; bottom: -9px; }
  .st-foot .like { height: 34px; padding: 0 10px 0 7px; font-size: 14px; }
  .st-foot .like.is-empty { padding: 0 7px; }
  .st-sash { border-radius: 19px; }
  .st-sash > span { right: -48px; top: 20px; font-size: 8.5px; }
  .st-sash svg { width: 11px; height: 11px; }
  .duo { width: 100%; }
  .tix-duel.duel, .tix-make { height: 220px; }
  .tix-head { font-size: 34px; }
}

@media (max-width: 809.98px) {
  .intro, .loops { width: 100%; }
  .intro h2 { font-size: 48px; }
  .intro p { width: 100%; font-size: 18px; }
  .loops { padding: 20px 14px 10px; contain-intrinsic-size: auto 1700px; }
  .album-tabs { padding-left: 12px; }
  .album-tab { padding: 8px 12px 5px; font-size: 15px; }
  .album-tab[aria-pressed="true"] { padding-top: 11px; }
  .album { gap: 18px; padding: 18px 12px 0; }
  .album-jp { font-size: 22px; }
  .album-sub { font-size: 12px; }
  .st { padding: 6px; border-radius: 22px; }
  .st-face { border-radius: 16px; }
  .st-no { left: -8px; top: -10px; padding: 6px 8px 1px; font-size: 21px; -webkit-text-stroke-width: 4px; }
  .st-foot { right: -6px; bottom: -9px; }
  .st-foot .like { height: 34px; padding: 0 10px 0 7px; font-size: 14px; }
  .st-foot .like.is-empty { padding: 0 7px; }
  .st-sash { border-radius: 19px; }
  .st-sash > span { right: -48px; top: 20px; font-size: 8.5px; }
  .st-sash svg { width: 11px; height: 11px; }
  .lp { padding: 12px; }
  .lp-title { font-size: 30px; }
  .duo-band { margin-top: 40px; }
  .duo-band ~ .tk-wrap { padding-top: 60px; }
  .duo { width: 100%; grid-template-columns: 1fr; gap: 30px; padding: 44px 16px 50px; contain-intrinsic-size: auto 1360px; }
  .duo-mail { grid-template-columns: 1fr; rotate: -.8deg; }
  .mail-words { gap: 10px; padding: 24px 20px 22px; }
  .mail-say { font-size: 16px; }
  .mail-stub { margin-top: 0; padding: 22px 20px 24px; border-left: 0; border-top: var(--line) dashed #000; }
  .mail-stub::before, .mail-stub::after { top: -17px; bottom: auto; }
  .mail-stub::before { left: -18px; } .mail-stub::after { left: auto; right: -18px; }
  .mail-in, .mail-go { height: 50px; }
  .tix { grid-template-rows: 210px auto; }
  .tix-win { margin: 12px 12px 0; }
  .tix-duel.duel, .tix-make { height: 200px; }
    .tix-vs.duel-vs { font-size: 46px; -webkit-text-stroke: 5px #000; }
  .tix-stub { padding: 20px 20px 22px; }
  .tix-head { font-size: 32px; }
  .tix-cta { padding: 12px 18px 9px; font-size: 14px; }
  .tix-no { font-size: 22px; }
}
/* small phones: the kicker on one line, the stub's button and number side by side without touching; the album's three
   tabs a little smaller, so the last one isn't cut at the right edge (375 and 360 px) */
@media (max-width: 400px) {
  .album-tabs { gap: 4px; padding-left: 8px; }
  .album-tab { padding: 8px 9px 5px; font-size: 14px; }
  .tix-kick { font-size: 11.5px; letter-spacing: .14em; }
  .tix-row { flex-wrap: wrap; gap: 10px; }
  .tix-cta { padding: 11px 14px 8px; font-size: 13px; letter-spacing: .05em; }
  .tix-no { font-size: 20px; }
}

/* Players' loops as album stickers with their stills (a player's page's «more players' loops», site.js) */
.loops-foot[hidden] { display: none; }
.st.pls .st-face { width: 100%; padding: 0; border: 0; cursor: pointer; }
.st.pls .st-face > img { display: block; }
.st.pls:not(:has(img, video, canvas)) .st-face { background: #efefef linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) 0 0 / 220% 100%; animation: pl-wait 1.2s linear infinite; }
@keyframes pl-wait { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.pl-make-btn { display: inline-flex; align-items: center; background: var(--yellow); text-decoration: none; }

/* Halloween (lang.js sets .halloween on the visitor's 31 October): the yellow turns pumpkin orange, the page below the
   title screen goes dark, the album stays a light page on the dark table; zombie legs walk the title screen (site.js) */
.halloween { --yellow: #ff7a12; --paper: #16100c; --night: #ff7a12; --ray: #ff8a2e; --glow: #ff9a48; --moon: #000;
  --tab: #ffb877; --text: #fff1e2; }
.halloween .ts { background: var(--night); }
.halloween .ts-rays { background: repeating-conic-gradient(var(--night) 0 7.5deg, var(--ray) 7.5deg 15deg); }
.halloween :is(.ts-count, .ts-start) { color: var(--moon); }
.halloween .ts-start::after { border-top-color: var(--moon); }
.halloween .ts-road { border-top-color: var(--moon); }
.halloween .ts-poster { display: none; }
.halloween :is(.intro, .nw-recent-head h2, .nw-all) { color: var(--text); }
.halloween .album { background-color: #f6f6f6; }
.halloween .album-tab { background: var(--tab); }
.halloween .album-tab[aria-pressed="true"] { background: var(--yellow); }
.halloween .duo-band { background: radial-gradient(circle at 50% 50%, var(--glow) 0 40px, color-mix(in srgb, var(--glow) 85%, transparent) 90px, transparent 300px),
  var(--night) repeating-conic-gradient(from 0deg at 50% 50%, var(--night) 0 7.5deg, var(--ray) 7.5deg 15deg); }
.halloween :is(.tix-stub, .mail-stub)::before, .halloween :is(.tix-stub, .mail-stub)::after { background: var(--night); }
.halloween :focus-visible { outline-color: var(--yellow); }
/* The album's tiles (gallery/app.js; the 35's markup: build.mjs tile()). A tile: the loop's own ground (the 35: its
   colour paled; a player's: its place), the loop walking on a road its own outline's weight, a number tag in its colour
   that opens into its name, its heart; the site's frame (3 px line, a flat black drop). Until the engine has drawn it,
   its film's first frame (the 35) or its place's picture (a player's) stands in, laid as the live tile lays the loop, so
   nothing moves when it comes. The whole tile is a link (.tile-go over it); the heart and the tag sit above that */
.lpg { container-type: inline-size; }
/* (columns as many as fit a tile of 160 px; rows as tall as a 2:3 tile, so a big tile is exactly two by two) */
.lpg .grid { --cols: 2; --gap: 8px; --tw: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: calc(var(--tw) * 1.5); grid-auto-flow: dense; gap: var(--gap); padding-bottom: 8px; }
@container (min-width: 496px) { .lpg .grid { --cols: 3; } }
@container (min-width: 560px) { .lpg .grid { --gap: 14px; } }
@container (min-width: 682px) { .lpg .grid { --cols: 4; } }
@container (min-width: 856px) { .lpg .grid { --cols: 5; } }
@container (min-width: 1030px) { .lpg .grid { --cols: 6; } }
.lpg .tile {
  position: relative; display: block; min-width: 0; border: var(--line) solid #000; border-radius: 18px; box-shadow: 0 4px 0 #000; overflow: hidden;
  background: var(--tint, #e9e9e6); color: #000; text-decoration: none; container-type: size; transition: transform .42s var(--bounce), box-shadow .2s; -webkit-tap-highlight-color: transparent;
}
.lpg .tile[hidden] { display: none; }
.lpg .tile.big { grid-column: span 2; grid-row: span 2; }
/* (a phone shows a dozen of the 35 till the button under them: before the script, by the page's own order) */
@media (max-width: 809.98px) { .lpg .grid[data-step="0"] > .tile:not(.tile-make):nth-child(n + 13) { display: none; } }
@media (min-width: 810px) { .lpg .grid[data-step="0"] + .lpg-foot { display: none; } }
/* the stand-in: the film's frame in artboard units (600 = the frame, the road at 470.5, the loop's middle at 295),
   laid as the live tile lays its loop (300 units across, the feet at 86 % of the height); its grey taken by the tile's
   colour */
.lpg .tile-pic { position: absolute; left: -48.333cqw; top: calc(86cqh - 156.833cqw); width: 200cqw; height: 200cqw; max-width: none; mix-blend-mode: multiply; pointer-events: none; }
.lpg .tile-place { background: var(--pic) 50% 0 / cover; }
.lpg .tile-rays { background: repeating-conic-gradient(from 0deg at 50% 69%, #ffbd04 0 7.5deg, #ffc93a 7.5deg 15deg); }
.lpg .tile-paper { background: #fff linear-gradient(#e4e1da 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, #e4e1da 1px, transparent 1px) 0 0 / 18px 18px; }
.lpg .tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lpg .tile.is-live canvas { opacity: 1; }
.lpg .tile.is-live .tile-pic { visibility: hidden; transition: visibility 0s .3s; }
.lpg .tile-go { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.lpg .tile-go:focus-visible { outline: none; }
.lpg .tile:has(.tile-go:focus-visible) { outline: 3px solid #000; outline-offset: 4px; }
/* lifted under the pointer, its drop longer; its number tag opens into its name */
@media (hover: hover) {
  .lpg .tile:not(.tile-make):hover { z-index: 1; transform: translateY(-4px); box-shadow: 0 8px 0 #000; }
  .lpg .tile:hover .tag { gap: 6px; }
  .lpg .tile:hover .tag i { max-width: calc(100cqw - 44px); padding: 3px 3px 2px; margin: -3px -3px -2px; }
}
.lpg .tile:active { transform: scale(1.03, .96); transition-duration: 80ms; }
/* its number: a tag in its colour (the site's), straight in the album's even rows; its name in it, opening out */
.lpg .tag {
  position: absolute; z-index: 3; left: 8px; top: 9px; display: flex; align-items: baseline; gap: 0; max-width: calc(100% - 16px); padding: 4px 7px 0; border: 2.5px solid #000; border-radius: 9px;
  background: var(--c, var(--yellow)); box-shadow: 0 2px 0 #000; font: 400 16px/1 Lalezar, sans-serif; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill;
  pointer-events: none; transition: gap .3s;
}
.lpg .tag b { font: inherit; }
/* (the name smaller, its outline lighter, the space between its words kept from the outline) */
.lpg .tag i { padding: 0; margin: 0; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13px/1 Lalezar, "M PLUS Rounded 1c", sans-serif; font-style: normal; -webkit-text-stroke-width: 3px; word-spacing: .2em; transition: max-width .35s var(--bounce); }
/* honours: the tag in foil (the most loved, the walk-off champ); yours: its own colour with a shine, «that's you» on it
   always */
.lpg .tag-loved { background: linear-gradient(110deg, #ff8fd4, #7fd0ff 25%, #ffe04d 50%, #7cf0a8 75%, #ff8fd4); }
.lpg .tag-champ { background: linear-gradient(110deg, #4a9cf5, #a9d4ff 25%, #5aaafa 50%, #d6ebff 75%, #4a9cf5); }
.lpg .tag-you { gap: 6px; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .55) 42%, transparent 58%), var(--c); }
.lpg .tag-you i { max-width: calc(100cqw - 44px); padding: 3px 3px 2px; margin: -3px -3px -2px; }
/* the honoured: a foil frame inside the black one, and the site's foil sash across the corner saying why */
.lpg .tile:is(.loved, .champ)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; padding: 5px; border-radius: 15px; pointer-events: none;
  background: linear-gradient(115deg, #ffb3e6, #9fdcff 25%, #ffe873 50%, #a6f7c0 75%, #c9a8ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lpg .tile.champ:not(.loved)::after { background: linear-gradient(115deg, #4a9cf5, #a9d4ff 25%, #5aaafa 50%, #d6ebff 75%, #4a9cf5); }
.lpg .rib { position: absolute; z-index: 3; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
/* (sized by the tile, the site's sticker's sash at a 160 px tile; smaller words when they are long, so they fit) */
.lpg .rib > span {
  position: absolute; right: -30cqw; top: 17cqw; width: 120cqw; rotate: 45deg; display: flex; align-items: center; justify-content: center; gap: 3cqw; padding: 3.6cqw 0 1.8cqw;
  border-block: 3px solid #000; background: linear-gradient(115deg, #ffb3e6, #9fdcff 30%, #ffe873 55%, #a6f7c0 80%, #c9a8ff);
  font: 800 min(6.4cqw, 13px, calc(118cqw / var(--n, 14)))/1 "Baloo 2", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #000;
}
.lpg .rib-champ > span { background: linear-gradient(115deg, #4a9cf5, #a9d4ff 30%, #5aaafa 55%, #d6ebff 80%, #4a9cf5); }
.lpg .rib svg { flex: none; width: 1.3em; height: 1.3em; margin-top: -.2em; overflow: visible; }
/* back from its page: a yellow ring for a moment */
.lpg .tile.back-here { box-shadow: 0 0 0 5px var(--yellow), 0 0 0 8px #000, 0 12px 0 #000; transition: box-shadow .3s; }

/* the heart: the site's like on the tile, beating on the loop's footfalls; the fill rises inside it (the tile hovered:
   a third; the heart itself: two thirds; given: all, in your loop's colour) */
.lpg .hb {
  position: absolute; z-index: 3; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 9px 0 7px; border: 2.5px solid #000; border-radius: 14px;
  background: #fff; box-shadow: 0 2px 0 #000; font: 700 13px/1 "Baloo 2", sans-serif; color: #000; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: scale .35s cubic-bezier(.34, 1.56, .64, 1), translate .08s, box-shadow .08s; transform-origin: 70% 60%;
}
/* (a finger's room round it: 44 px at least) */
.lpg .hb::before { content: ""; position: absolute; inset: -10px -8px; }
/* (a player's page's notes, how many: the heart's pair in the other corner, not a button: no drop under it) */
.lpg .nb { position: absolute; z-index: 3; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 7px; border: 2.5px solid #000; border-radius: 14px; background: #fff; font: 700 13px/1 "Baloo 2", sans-serif; color: #000; font-variant-numeric: tabular-nums; pointer-events: none; }
.lpg .nb svg { flex: none; width: 16px; height: 15px; margin-top: -1px; }
.lpg .hb-n { position: relative; display: inline-grid; overflow: hidden; padding-top: 2px; font-variant-numeric: tabular-nums; }
.lpg .hb-n:empty { display: none; }
.lpg .hb-n b { grid-area: 1 / 1; font: inherit; }
.lpg .hb svg { width: 15px; height: 15px; overflow: visible; animation: hb-beat var(--beat, .6s) linear infinite; }
@keyframes hb-beat { 0% { scale: 1; } 12% { scale: 1.14; } 40% { scale: 1; } 100% { scale: 1; } }
.lpg .hb .hb-fill { fill: var(--mine, var(--yellow)); transform-box: fill-box; transform: translateY(100%); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.lpg .hb[aria-pressed="true"] .hb-fill { transform: none; }
.lpg .hb .hb-line { fill: none; stroke: #000; stroke-width: 2.4; stroke-linejoin: round; }
@media (hover: hover) {
  .lpg .tile:hover .hb { scale: 1.12; }
  .lpg .tile:hover .hb .hb-fill { transform: translateY(50%); }
  .lpg .tile .hb:hover .hb-fill { transform: translateY(18%); }
  .lpg .tile .hb[aria-pressed="true"] .hb-fill { transform: none; }
}
/* pressed like a key: down into its drop */
.lpg .hb:active { translate: 0 2px; box-shadow: 0 0 0 #000; }
.lpg .hb-burst { position: absolute; left: 14.5px; top: 50%; width: 0; height: 0; pointer-events: none; }
.lpg .hb-ring { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; box-sizing: border-box; border: 9px solid var(--yellow); border-radius: 50%; transform: scale(.1); }
.lpg .hb-dot { position: absolute; left: calc(-2.5px * var(--r)); top: calc(-2.5px * var(--r)); width: calc(5px * var(--r)); height: calc(5px * var(--r)); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.2px #000; transform: scale(0); }
/* a loop given a heart answers: the world's speech bubble with a heart, out of its head with a little overshoot, up
   and gone */
.lpg .say { position: absolute; z-index: 4; width: 42px; height: 42px; margin: -42px 0 0 -21px; padding: 6px 8px 13px; box-sizing: border-box; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M9 3h32a6 6 0 0 1 6 6v22a6 6 0 0 1-6 6H31l-6 9-6-9H9a6 6 0 0 1-6-6V9a6 6 0 0 1 6-6z' fill='%23fff' stroke='%23141414' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 50% 100%; pointer-events: none; animation: say 1.8s cubic-bezier(.33, 1, .68, 1) forwards; }
.lpg .say svg { display: block; width: 100%; height: 100%; }
@keyframes say { 0% { scale: .01; translate: 0 0; } 8% { scale: 1.12; } 13% { scale: 1; } 60% { opacity: 1; } 100% { scale: 1; translate: 0 -56px; opacity: 0; } }

/* the last tile: the way to make your own (or change yours), a dashed sticker; a white loop with a question mark
   walks its road (app.js); till then a white head with the mark stands on the road */
.lpg .tile-make { border-style: dashed; background: #fffdf3; box-shadow: none; }
.lpg .tile-make b { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 5cqh; text-align: center; font: 400 min(22px, 12cqw)/1 Lalezar, "M PLUS Rounded 1c", sans-serif; text-wrap: balance; }
.lpg .tile-make::before { content: ""; position: absolute; left: 12%; right: 12%; top: calc(80cqh - 2px); height: 3px; border-radius: 2px; background: #000; }
.lpg .make-q { position: absolute; left: 50%; top: 34cqh; width: 46cqw; aspect-ratio: 1; translate: -50% 0; display: grid; place-items: center; border: var(--line) solid #000; border-radius: 50%; background: #fff; transition: opacity .3s; }
.lpg .make-q i { font: 400 24cqw/1 Lalezar, sans-serif; font-style: normal; padding-top: 4cqw; }
.lpg .tile-make.is-live .make-q, .lpg .tile-make.is-live::before { opacity: 0; }
@media (hover: hover) { .lpg .tile-make:hover { transform: translateY(-4px) rotate(-1deg); } }

/* /loop/N's next in the parade: a row of them (four on narrower screens) */
@media (max-width: 1099.98px) { .lpg-next .tile:nth-child(n + 5) { display: none; } }

/* yours out of sight: a chip at the bottom of the screen, your loop's face in it, a way to its page */
.you-dock { position: fixed; z-index: 6; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: -50% 160%; display: flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; border: var(--line) solid #000; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 #000; color: #000; text-decoration: none; transition: translate .45s var(--bounce); }
.you-dock.on { translate: -50% 0; }
.you-dock-face { position: relative; width: 46px; height: 46px; flex: none; border: 2.5px solid #000; border-radius: 50%; overflow: hidden; background: var(--c); }
.you-dock-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.you-dock-t { display: grid; line-height: 1.05; }
.you-dock-t b { font: 800 13px/1.1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.you-dock-t i { font: 400 16px/1 Lalezar, sans-serif; font-style: normal; }

/* the home page's floor of hearts: the whole width at the very bottom, the footer's ticket standing over its top; how
   many, a tilted sticker over it (as a player's page counts its hearts), its words a kicker above it; yours, a tag in
   your colour */
.heap-floor { position: relative; z-index: 0; width: 100%; pointer-events: none; }
.heap-floor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tk-wrap { position: relative; z-index: 1; }
.heap-count { position: absolute; z-index: 2; left: 16px; bottom: 18px; display: grid; justify-items: start; gap: 8px; max-width: calc(100% - 32px); }
.heap-floor:not(.on) .heap-count { visibility: hidden; }
/* (its words on a white label of their own: the heap's hearts pile up behind them) */
.heap-k { padding: 6px 10px 4px; border: 2.5px solid #000; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 #000; font: 800 12px/1 "Baloo 2", sans-serif; letter-spacing: .14em; text-transform: uppercase; rotate: -2deg; }
.heap-n { display: inline-flex; align-items: center; gap: 7px; height: 52px; padding: 0 16px 0 12px; border: var(--line) solid #000; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #000; font: 400 32px/1 Lalezar, sans-serif; rotate: -4deg; }
.heap-n svg { width: 28px; height: 28px; flex: none; overflow: visible; fill: var(--yellow); stroke: #000; stroke-width: 2.4; stroke-linejoin: round; margin-top: -3px; }
.heap-n b { font-weight: 400; padding-top: 5px; }
.heap-count em { padding: 5px 9px 2px; border: 2.5px solid #000; border-radius: 9px; background: var(--c, var(--yellow)); box-shadow: 0 2px 0 #000; font: 400 15px/1 Lalezar, "M PLUS Rounded 1c", sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; rotate: 3deg; }
.heap-count em[hidden] { display: none; }
.heap-fly { position: fixed; z-index: 30; width: 0; height: 0; pointer-events: none; }
.heap-fly i { position: absolute; left: -15px; top: -14px; width: 30px; height: 28px; display: block; }
.heap-fly svg { width: 100%; height: 100%; overflow: visible; fill: var(--mine, var(--yellow)); stroke: #000; stroke-width: 2.3; stroke-linejoin: round; }
/* ko: the letters of the site's words in this language (Jua, cut to them: tools/lang-fonts.mjs), under
   the site's own family names for these ranges only: titles and heavy words in the heavy face, the rest in the body one */
@font-face { font-family: "Lalezar"; src: url(/fonts/letters-ko-display-9455308263.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+1100-11FF, U+2E80-2FDF, U+3000-30FF, U+3130-318F, U+31F0-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; size-adjust: 88%; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/letters-ko-display-9455308263.woff2) format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+1100-11FF, U+2E80-2FDF, U+3000-30FF, U+3130-318F, U+31F0-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; size-adjust: 96%; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/letters-ko-display-9455308263.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+1100-11FF, U+2E80-2FDF, U+3000-30FF, U+3130-318F, U+31F0-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; size-adjust: 96%; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/letters-ko-display-9455308263.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+1100-11FF, U+2E80-2FDF, U+3000-30FF, U+3130-318F, U+31F0-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; size-adjust: 96%; }