@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Flex";
  src: url("./fonts/google-sans-flex.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #2e2c2a;
  --sky: #f3f3f1;
  --board: #fafaf7;
  --plate: var(--board);
  --plate-press: color-mix(in srgb, var(--board) 95%, #000);
  --cell: var(--sky);
  --cell-press: color-mix(in srgb, var(--sky) 95%, #000);
  --done: #8fd14f;
  --going: #f6d64a;
  --danger: #c2375a;
  --muted: #8a9099;
  --groove: color-mix(in srgb, var(--sky) 89%, #000);
  --face: "Poppins", "Google Sans Flex", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --heavy: 700 1em var(--face);
  font-family: var(--face);
  font-weight: 700;
  color: var(--ink);
  background: repeating-linear-gradient(135deg, transparent 0 5.3px, rgba(46, 44, 42, .05) 5.3px 7.3px), var(--sky);
}

:root[data-dark] {
  color-scheme: dark;
  --ink: #ecebe6;
  --sky: #1f1e1c;
  --board: #2d2c29;
  --plate-press: color-mix(in srgb, var(--board) 90%, #fff);
  --cell-press: color-mix(in srgb, var(--sky) 90%, #fff);
  --muted: #959ba4;
  --groove: color-mix(in srgb, var(--sky) 82%, #fff);
  --lines: rgba(0, 0, 0, .16);
  background: repeating-linear-gradient(135deg, transparent 0 5.3px, var(--lines) 5.3px 7.3px), color-mix(in srgb, var(--sky) 82%, #000);
}

:root[data-dark] .page { border-color: var(--lines); }
:root[data-dark] .bar h1 { color: #cfcec8; }
:root[data-dark] .bubble, :root[data-dark] .bubble::after { background: color-mix(in srgb, var(--board) 80%, #fff); }
:root[data-dark] .bubble, :root[data-dark] .corner .icon, :root[data-dark] .game-back, :root[data-dark] .back { box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
:root[data-dark] .dock { filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, .35)); }
:root[data-dark] .card .pitch { color: color-mix(in srgb, var(--ink) 75%, transparent); }
:root[data-dark] #theme-level i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
:root[data-dark] .setting.off .ticks i.on { background: #5c6068; }
:root[data-dark] .keys .done, :root[data-dark] .keys .going { --ink: #2e2c2a; color: var(--ink); }
:root[data-dark] .upright { background: var(--sky); }
:root[data-dark] .choice, :root[data-dark] .setting-top [aria-pressed], :root[data-dark] .ticks i.on, :root[data-dark] .keys .done, :root[data-dark] .keys .going, :root[data-dark] .keys .day-pack, :root[data-dark] .perks .tick, :root[data-dark] .plate.danger, :root[data-dark] .plate.small.make-go, :root[data-dark] .loading-logo, :root[data-dark] .loading-bar i { filter: brightness(.87); }
:root[data-dark] body[data-custom] .next { filter: brightness(.87); }
:root[data-dark] .choice:active, :root[data-dark] .setting-top [aria-pressed]:active, :root[data-dark] .plate.danger:active, :root[data-dark] body[data-custom] .next:active { filter: brightness(.8); }
:root[data-dark] .make-help { color: #6bb4ff; }
:root[data-dark] .card .make-problem.ok { color: #8fd14f; }

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body { margin: 0; }
.page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 800px);
  overflow: hidden;
  transform: translateX(-50%);
  background: var(--sky);
  container-type: size;
}
@media (min-width: 801px) {
  .page { border-inline: 2px solid rgba(46, 44, 42, .05); }
}
[hidden] { display: none !important; }

#viewport { position: fixed; inset: 0; }
#viewport canvas { display: block; position: absolute; inset: 0; touch-action: none; }

button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #4da3ff; outline-offset: 3px; }

.plate {
  min-width: 180px;
  padding: 14px 28px;
  border: 0;
  border-radius: 3px;
  background: var(--plate);
  font: var(--heavy);
  font-size: 17px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .08s, filter .08s;
}

.plate:active { background: var(--plate-press); }

.icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 0;
  border-radius: 3px;
  background: var(--plate);
  font: var(--heavy);
  font-size: 26px;
  line-height: 1;
}

.icon i { display: block; width: 18px; height: 3px; border-radius: 0; background: var(--ink); }
.icon:active { background: var(--plate-press); }
.icon-space { width: 44px; }

.screen {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-screen { justify-content: center; gap: 44px; padding: 24px; }
.screen[hidden] { display: none; }
.splash-screen { justify-content: flex-start; padding: 24px; cursor: pointer; }
.splash-screen .logo-slot { position: absolute; top: 32%; left: 50%; translate: -50% -50%; transition: top .65s cubic-bezier(.45, 0, .2, 1); }
body[data-first] .splash-screen .logo-slot, body[data-loading] .splash-screen .logo-slot { top: 50%; }
body[data-loading] #tap-to-play, body[data-landing] #tap-to-play { visibility: hidden; }
.crowd-done { position: absolute; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); translate: -50% 0; }
.debug-unlock { position: absolute; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom)); translate: -50% 0; }
.splash-screen .tap-hint, .loading-slot { position: absolute; bottom: max(7vh, calc(env(safe-area-inset-bottom) + 32px)); }
.tap-hint {
  margin: 0;
  font: var(--heavy);
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  animation: breathe 1.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .35; }
  50% { opacity: .75; }
}

.logo { position: relative; }

.loading-screen { z-index: 10; background: var(--sky); transition: opacity .5s ease-out; }
.loading-screen.done { opacity: 0; pointer-events: none; }
.loading-slot { left: 50%; translate: -50% 0; display: flex; align-items: center; opacity: 1; animation: none; }
.loading-slot::before { content: "\200b"; width: 0; }
.loading-bar { width: min(160px, 40cqw); height: 4px; border-radius: 2px; background: var(--groove); overflow: hidden; }
.loading-bar i { display: block; height: 100%; background: #fff; transform: scaleX(var(--loaded, 0)); transform-origin: left; transition: transform .2s ease-out; }
.loading-logo { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 70cqw; height: auto; }

.logo-canvas { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
body[data-loading] .logo-canvas, body[data-landing] .logo-canvas { z-index: 11; }


.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
  pointer-events: none;
}

.bar > * { pointer-events: auto; }

.bar h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: var(--heavy);
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #474741;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.bar h1.howto { font-size: 16px; }

.hud .title { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pack-name { margin: 0; font: var(--heavy); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; white-space: nowrap; }

.safe-probe { position: fixed; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

.bubble {
  position: fixed;
  z-index: 3;
  right: max(12px, env(safe-area-inset-right));
  width: max-content;
  max-width: min(80cqw, 300px);
  margin: 0 0 12px;
  padding: 10px 14px;
  transform-origin: var(--tail, 50%) 100%;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(46, 44, 42, .14);
  color: var(--ink);
  font: var(--heavy);
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
}

.bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.bubble.alone::after { display: none; }
.bubble.hushed, .bubble.tucked { visibility: hidden; }
.bubble .aside { color: var(--muted); }
.veil { position: fixed; inset: 0; z-index: 20; background: var(--sky); opacity: 0; transition: opacity var(--veil, 400ms) ease; }
.veil.shut { opacity: 1; }

.next {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  animation: rise .4s ease-out both;
}

@keyframes rise {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--sky) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 18px 18px;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 5px;
  background: var(--plate);
  text-align: center;
}

.card p { margin: 0; font: var(--heavy); font-size: 18px; letter-spacing: .04em; }
.card .choice.card-title { align-self: center; font: var(--heavy); font-size: min(26px, 6.6cqw); letter-spacing: .16em; }
#howto-title { background: #4da3ff; }
#settings-title { background: #ffb640; }
#credits-title { background: #ff6fb5; }
#confirm-title { background: #c2375a; }
.card .note { font: var(--heavy); font-size: 15px; font-weight: 300; line-height: 1.35; letter-spacing: 0; }
.card .credit-lines { white-space: pre-line; overflow-wrap: anywhere; }
.back { position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.choices { display: flex; flex-direction: column; align-items: flex-start; }

.choice {
  padding: .28em .48em .4em .52em;
  border: 0;
  border-radius: 3px;
  color: #fff;
  font: var(--heavy);
  font-size: min(30px, 7.4cqw);
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: .06em .06em 0 rgba(0, 0, 0, .25);
}

.choice:active { filter: brightness(.92); }
.choices .choice + .choice { margin-top: .08em; }
.choices .choice.minor { font-size: min(18px, 4.6cqw); letter-spacing: .14em; }
.choices .choice:not(.minor) + .choice.minor,
.choices .choice:not(.minor) + .choice.minor[hidden] + .choice.minor { margin-top: .9em; }
#play { background: #8fd14f; }
#play-daily, #play-mini { display: flex; align-items: center; gap: .55em; background: #b07cff; text-align: left; }
#play-mini { background: #2fb5a5; }
#play-daily[hidden], #play-mini[hidden] { display: none; }
.choice-text { flex: 1; }
.choice-name { display: block; }
.choice-check { flex: none; width: 1em; height: 1em; }
.choice-check rect { fill: none; stroke: #fff; stroke-width: 2.4; }
.choice-check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 8; visibility: hidden; }
#play-daily.solved .choice-check path, #play-mini.solved .choice-check path { visibility: visible; }
.choice-note { display: block; margin-top: .2em; font-size: .46em; letter-spacing: .06em; text-transform: none; opacity: .92; }
.choice-note[hidden] { display: none; }
#play-daily.empty, #play-mini.empty { background: #a9a49c; }
#play-daily.empty .choice-check, #play-mini.empty .choice-check { visibility: hidden; }
#share-title { background: #b07cff; }
#share-title.mini { background: #2fb5a5; }
#share .card { width: min(380px, 100%); }
.share-next { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.share-next [hidden] { display: none; }
.share-next .choice { font-size: min(18px, 4.6cqw); letter-spacing: .14em; }
.share-next .daily { background: #b07cff; }
.share-next .mini { background: #2fb5a5; }
#share-menu { background: #ff6fb5; }
.share-box { position: relative; align-self: center; max-width: 100%; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--cell); color: inherit; text-align: center; cursor: pointer; }
.share-box:active { background: var(--cell-press); }
.share-text { margin: 0; font: var(--heavy); font-size: 16px; font-weight: 300; line-height: 1.4; letter-spacing: 0; text-align: center; white-space: pre-wrap; }
.share-copied { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: color-mix(in srgb, var(--cell) 90%, transparent); font: var(--heavy); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.share-copied[hidden] { display: none; }
.keys .day small { font-size: 12px; }
#open-credits { background: #ff6fb5; }
#reset-progress { background: #c2375a; }

.card .card-head { margin-bottom: -8px; text-align: left; }
.steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 0 1.3em; list-style: disc; text-align: left; }
.steps li { padding-left: 2px; font-size: 15px; font-weight: 300; line-height: 1.35; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.plate.small { min-width: 0; padding: 11px 18px; font-size: 13px; background: var(--cell); }
.plate.small:active { background: var(--cell-press); }
.plate.danger, .plate.danger:active { background: var(--danger); color: #fff; }
.plate.danger:active, .setting-top [aria-pressed]:active { filter: brightness(.9); }


.setting { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.setting[hidden] { display: none; }
.setting-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-top > span { font: var(--heavy); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.setting-value { color: var(--ink); }
.setting-top .plate.small { min-width: 64px; transition: transform .08s ease-out, box-shadow .08s ease-out; }
.setting-top .plate.small:active { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--groove), 5px 7px 10px rgba(46, 44, 42, .18); }
.setting-top [aria-pressed] { color: #fff; text-shadow: .06em .06em 0 rgba(0, 0, 0, .25); }
.setting-top [aria-pressed="true"], .setting-top [aria-pressed="true"]:active { background: #8fd14f; }
.setting-top [aria-pressed="false"], .setting-top [aria-pressed="false"]:active { background: #ff6b57; }
.ticks { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 44px; padding: 4px; border-radius: 3px; background: var(--cell); cursor: pointer; touch-action: none; }
.ticks i { border-radius: 2px; background: var(--plate); transition: background-color .08s; }
.ticks i.on { background: var(--fill, var(--ink)); }
#music-level { --fill: #4da3ff; }
#sound-level { --fill: #b07cff; }
#theme-level { grid-template-columns: repeat(5, 1fr); }
#theme-level i { background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(46, 44, 42, .12); }
.ticks i.chosen { position: relative; }
.ticks i.chosen::after { content: ''; position: absolute; inset: 2px; border: 3px solid var(--ink); border-radius: 2px; pointer-events: none; }
#volume-level { --fill: #b07cff; }
.setting.off .ticks i.on { background: #b8bcc2; }
#settings .card { gap: 12px; padding: 18px 16px 14px; }
#settings .card-title { margin-bottom: 4px; }
#settings .setting { gap: 6px; }
#settings .ticks { height: 34px; padding: 3px; gap: 3px; }
#settings .setting-top .plate.small { padding: 8px 14px; }
.ticks:focus-visible { outline: 3px solid #4da3ff; outline-offset: 3px; }

.card .pitch { font-size: 14px; line-height: 1.4; color: rgba(46, 44, 42, .75); }
#upsell-title { background: #8fd14f; }
.perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; align-self: center; text-align: left; }
.perks li { display: flex; align-items: center; gap: 12px; font: var(--heavy); font-size: 17px; letter-spacing: .02em; }
.perks .tick { width: 26px; height: 26px; padding: 4px; border-radius: 4px; background: var(--perk); color: #fff; }
.stores { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.store { display: flex; align-items: center; gap: 10px; width: 210px; padding: 7px 16px; border: 1px solid #a6a6a6; border-radius: 10px; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
.store:active { filter: brightness(1.3); }
.store-mark { flex: none; width: 28px; height: 28px; fill: currentColor; }
.store-text { display: flex; flex-direction: column; align-items: flex-start; font-family: -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif; line-height: 1.1; text-align: left; }
.store-text small { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.store-text b { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.store.soon { opacity: .35; cursor: default; }
#upsell-close { align-self: center; padding: 10px 28px; }
.keys .locked { opacity: .55; }

.upright { display: none; }

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .upright {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #dcdcdd;
    color: var(--ink);
    font: var(--heavy);
    font-size: 20px;
    letter-spacing: .04em;
    text-align: center;
  }
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  max-height: 60vh;
  padding: max(20px, env(safe-area-inset-bottom)) 0 calc(max(20px, env(safe-area-inset-bottom)) + 4px);
  border-radius: 5px 5px 0 0;
  background: var(--plate);
  animation: drawer .22s ease-out both;
  --rest: calc(100% - env(safe-area-inset-bottom, 0px));
}

.drawer::after, .lip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 240px;
  background: var(--plate);
}

.dock { position: fixed; inset: 0; z-index: 5; pointer-events: none; filter: drop-shadow(0 -2px 6px rgba(46, 44, 42, .14)); }
.dock .picker, .dock .drawer { pointer-events: auto; }
.dock .picker:active { background: var(--plate); }
.dock .picker:active svg { stroke: var(--muted); }

.lip {
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--plate);
  pointer-events: none;
}

@keyframes drawer {
  from { transform: translateY(var(--rest)); }
  to { transform: none; }
}

.plate.tool { width: 44px; height: 44px; min-width: 0; padding: 0; display: grid; place-items: center; line-height: 0; }
.tool svg, .back svg, .game-back svg, .picker svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.game-back svg, .picker svg { stroke-width: 2.8; }

.game-back {
  position: fixed;
  z-index: 5;
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
}

.corner {
  position: fixed;
  z-index: 21;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tools { display: flex; flex-direction: column; gap: 10px; }
.lang { position: absolute; top: 0; right: calc(100% + 10px); display: flex; flex-direction: column; gap: 10px; }
.lang[hidden], .lang-list[hidden], .lang-pick[hidden] { display: none; }
.lang-list { display: flex; flex-direction: column; gap: 10px; }
.lang .icon { box-shadow: 0 2px 6px rgba(46, 44, 42, .14); }
.lang .icon svg { display: block; width: 28px; height: 19px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(46, 44, 42, .18); }
.corner .icon, .game-back, .back { box-shadow: 0 2px 6px rgba(46, 44, 42, .14); }

.picker {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: env(safe-area-inset-bottom, 0px);
  width: 72px;
  margin-bottom: -1px;
  border-radius: 5px 5px 0 0;
  translate: -50% 0;
}

.picker svg { transition: transform .22s ease-out; }
.picker.open svg { transform: rotate(180deg); }
.beckon, .picker.beckoning { --beckon: 2.8s; }
.picker.beckoning svg { animation: beckon-press var(--beckon) ease-in-out infinite; }

.beckon {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  width: 0;
  height: 0;
  pointer-events: none;
  animation: beckon-glide var(--beckon) ease-in-out infinite;
}

.beckon::before, .beckon::after { content: ''; position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%; }
.beckon::before { border: 4px solid #fff; background: rgba(46, 44, 42, .22); box-shadow: 0 3px 10px rgba(46, 44, 42, .3); animation: beckon-press var(--beckon) ease-in-out infinite; }
.beckon::after { border: 5px solid rgba(46, 44, 42, .25); opacity: 0; animation: beckon-ripple var(--beckon) ease-out infinite; }

@keyframes beckon-glide {
  0% { translate: var(--dx) var(--dy); opacity: 0; }
  12% { translate: var(--dx) var(--dy); opacity: 1; }
  36% { translate: 0 0; opacity: 1; }
  82% { translate: 0 0; opacity: 1; }
  100% { translate: 0 0; opacity: 0; }
}

@keyframes beckon-press {
  0%, 40% { scale: 1; }
  46% { scale: .72; }
  56%, 100% { scale: 1; }
}

@keyframes beckon-ripple {
  0%, 45% { opacity: 0; scale: .7; }
  46% { opacity: 1; scale: .7; }
  76%, 100% { opacity: 0; scale: 3.4; }
}

.sound-switch[aria-pressed="true"] .sound-cross, .sound-switch[aria-pressed="false"] .sound-waves { display: none; }

.stage { position: fixed; inset: 0; background: var(--sky); }
.stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }


.menu-fab.open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-fab.open i:nth-child(2) { opacity: 0; }
.menu-fab.open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.bar.hud { justify-content: center; }
.hud .title { max-width: calc(100cqw - 150px); }

.strip {
  display: flex;
  gap: 18px;
  padding: 8px 0 10px;
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
}

.strip::-webkit-scrollbar { display: none; }
@media (pointer: fine) {
  .strip { cursor: grab; }
  .strip.dragging, .strip.dragging button { cursor: grabbing; }
}
.keys { flex: none; display: flex; gap: 10px; }

.keys button {
  --key: 84px;
  position: relative;
  width: var(--key);
  height: var(--key);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 4px;
  background: var(--cell);
}

.keys button:active { filter: brightness(.94); }
.keys .done { background: var(--done); }
.keys .going { background: var(--going); }
.keys .current::after { content: ''; position: absolute; inset: calc(var(--key) * .05); border: calc(var(--key) * .05) solid var(--ink); pointer-events: none; }
.keys b { font: var(--heavy); font-size: 26px; line-height: 1; }
.keys .pack, .keys .skip { width: auto; min-width: 132px; padding: 0 16px; }
.keys .level { width: 132px; padding: 0 10px; }
.keys .level small { max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.keys .lock { fill: none; stroke: currentColor; stroke-width: 2.4; }
.keys .pack b, .keys .skip b { font-size: 17px; letter-spacing: .04em; text-align: center; }
.keys .day-pack { color: #fff; text-shadow: .06em .06em 0 rgba(0, 0, 0, .25); }
.keys .day-pack.mini { background: #2fb5a5; }
.keys .day-pack.daily { background: #b07cff; }
.keys small { font: var(--heavy); font-size: 14px; opacity: .7; }
.strip-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; }
.strip-title { grid-column: 2; max-width: 60cqw; margin: 0; font: var(--heavy); font-size: 17px; letter-spacing: .1em; text-align: center; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-count { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; font: var(--heavy); font-size: 16px; letter-spacing: .06em; opacity: .6; }
.tick { flex: none; width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 8; }
.level-timer { position: fixed; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: calc(max(14px, env(safe-area-inset-right)) + 54px); height: 44px; margin: 0; display: flex; align-items: center; font: var(--heavy); font-size: 13px; letter-spacing: .08em; color: var(--ink); opacity: .55; font-variant-numeric: tabular-nums; pointer-events: none; }
.level-timer[hidden] { display: none; }
.keys small { display: flex; align-items: center; gap: 3px; }
.keys .corner { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; opacity: .75; }
.strip-back { grid-column: 1; grid-row: 1; justify-self: start; }

.pop-in { animation: pop-in .36s cubic-bezier(.34, 1.56, .64, 1) var(--pop-delay, 0ms) both; }
.pop-out { animation: pop-out .16s ease-in var(--pop-delay, 0ms) both; }
.drawer.closing { animation: drawer-out .22s ease-in var(--pop-delay, 0ms) both; }
.picker.rising { animation: tab-rise .22s ease-out both; }
.picker.falling { animation: tab-fall .22s ease-in var(--tab-delay, 0ms) both; }

@keyframes pop-in {
  from { opacity: 0; scale: .4; }
}

@keyframes pop-out {
  to { opacity: 0; scale: .4; }
}

@keyframes tab-rise {
  from { transform: translateY(var(--travel)); }
  to { transform: none; }
}

@keyframes tab-fall {
  from { transform: none; }
  to { transform: translateY(var(--travel)); }
}

@keyframes drawer-out {
  from { transform: none; }
  to { transform: translateY(var(--rest)); }
}

.plate.danger { text-shadow: .06em .06em 0 rgba(0, 0, 0, .25); }


#make .card { position: relative; width: min(400px, 100%); }
.make-screen { justify-content: center; padding: calc(max(14px, env(safe-area-inset-top)) + 58px) 16px max(16px, env(safe-area-inset-bottom)); }
.make-help { align-self: flex-start; margin: 0 0 -10px; padding: 0; border: 0; background: none; color: #2f86e0; font: var(--heavy); font-size: 14px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#make .plate:disabled { opacity: .4; cursor: default; }
#format .card { width: min(520px, 100%); }
#format-title { background: #4da3ff; }
.format-box { width: 100%; text-align: left; }
.format-text { margin: 0; font: 400 12.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; user-select: text; -webkit-user-select: text; }
#make-title { background: #ffb640; }
.make-text { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--cell); color: inherit; font: 400 16px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; resize: vertical; text-transform: none; user-select: text; -webkit-user-select: text; }
.make-text:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.make-text::placeholder { color: var(--muted); }
.card .make-problem { margin-top: -8px; color: var(--danger); font-size: 13px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .make-problem.ok { color: #4f9a22; }
.plate.small.make-go { background: #8fd14f; color: #fff; }
body[data-custom] #picker, body[data-custom] #lip { display: none; }
#open-make { background: #ffb640; }
body[data-custom] .next, body[data-custom] .next:active { white-space: nowrap; background: #8fd14f; color: #fff; text-shadow: .06em .06em 0 rgba(0, 0, 0, .25); }
body[data-custom] .next:active { filter: brightness(.92); }
body[data-testing] #next, body[data-testing] #next:active { min-width: 150px; background: var(--plate); color: var(--ink); text-shadow: none; transform: translateX(calc(-100% - 6px)); }
body[data-testing] #test-share { min-width: 150px; transform: translateX(6px); }