:root {
  --tile-off-bg: rgba(255,248,235,.78); --tile-off-fg: #1c2620;
  --tile-on-bg: rgba(12,18,16,.62);     --tile-on-fg: #fff6e6;
  --tile-stroke: rgba(255,248,235,.55); --ab-fg: #fff6e6;
  --shadow: drop-shadow(0 2px 3px rgba(0,0,0,.45)) drop-shadow(0 10px 24px rgba(0,0,0,.55));
}
body { margin: 0; background-color: #111111; }
body::before, body::after { content: ''; position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
body::before {
  width: max(100vw, 100lvh * 1900 / 820); height: max(100lvh, 100vw * 820 / 1900);
  background: url('bg3.webp') center / cover no-repeat;
  will-change: transform;
  animation: bg-pan 60s ease-in-out infinite alternate;
}
body::after {
  width: 100vw; height: 100lvh;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55));
}
@keyframes bg-pan {
  from   { transform: translateX(calc(100vw - 100%)); }
  to     { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transform: translateX(calc((100vw - 100%) * .7)); }
}
a { color: #bdbdbd; } a:hover { color: #ffffff; }

main {
  min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: 48px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #ffffff;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

.logo { width: min(100%, 880px); }
.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 1.468%; }
.ab-row { display: flex; justify-content: flex-end; margin-top: 1.45%; padding-right: 1.35%; }

.tile {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; border-radius: 10%; -webkit-tap-highlight-color: transparent;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .12s ease, box-shadow .15s ease;
}
@media (hover: hover) { .tile:hover { transform: scale(1.08); } }
.tile:active { transform: scale(.96); }
.tile:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 4px; }
.tile svg { display: block; width: 100%; height: auto; }
.tile rect, .tile path { transition: fill .18s ease; }
.tiles .tile { filter: drop-shadow(0 3px 8px rgba(0,0,0,.28)); }
.tile.ab svg { filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.7)) var(--shadow); }
.tiles .tile rect { fill: var(--tile-off-bg); stroke: var(--tile-stroke); }
.tiles .tile path { fill: var(--tile-off-fg); }
.tiles .tile[aria-pressed="true"] rect { fill: var(--tile-on-bg); }
.tiles .tile[aria-pressed="true"] path { fill: var(--tile-on-fg); }
.tile.ab path { fill: var(--ab-fg); }
.secret {
  color: var(--ab-fg); text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.6);
}
.tile.ab { width: 10.34%; border-radius: 4px; }
.tile.ab svg { overflow: visible; }
.tiles .tile { position: relative; }
.tiles .tile svg.bit {
  position: absolute; left: 50%; top: 100%; width: 37%; margin: 12% 0 0 -18.5%;
  overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.7));
}
.tiles .tile svg.bit path { fill: var(--ab-fg); transition: none; }
.logo .bitsum {
  position: absolute; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.7));
}
.logo .bitsum path { fill: var(--ab-fg); }
.logo.live .tiles .tile svg.bit, .logo.live .bitsum { opacity: 1; transition-delay: .35s; }
.logo, .ab-row { transition: transform .6s cubic-bezier(.5, 0, .2, 1); }
.ab-row { pointer-events: none; }
.ab-row .tile.ab { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .logo, .ab-row { transition: none; } }

.logo { position: relative; }
.secret {
  position: absolute; top: 100%; left: 0; right: 0;
  margin: 32px auto 0; text-align: center; font-size: 18px; word-break: break-all;
  width: fit-content; max-width: 100%; box-sizing: border-box; padding: 8px 16px;
  background: rgba(12,18,16,.6); border: 1px solid rgba(255,248,235,.25); border-radius: 8px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}


.hud {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 6px 14px; white-space: nowrap; pointer-events: none;
  font: 13px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ab-fg);
  background: rgba(12,18,16,.7); border: 1px solid rgba(255,248,235,.25); border-radius: 999px;
  transition: opacity .4s ease;
}
.hud.fade { opacity: 0; }