/* One unit: the bowl's width. Bowls sit two units apart, both ways: 12 by 6 on a wide screen, 6 by 12 on a narrow one. */
:root { color-scheme: dark; --ink: #f1f4f5; --dim: #9aa5ab; --line: rgba(255,255,255,.16);
  --gw: min(100vw, 1440px, calc((100svh - 190px) * 2)); --u: calc(var(--gw) / 24);
  --text: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
@media (max-width: 899.98px) { :root { --gw: 100vw; --u: calc(var(--gw) / 12); } }
* { box-sizing: border-box; }
html { background: #000; overflow-x: clip; }
body { margin: 0; background: #000; color: var(--ink); font: 15px/1.5 var(--text); -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top, 0px) 0 calc(env(safe-area-inset-bottom, 0px) + 40px); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.col { width: var(--gw); max-width: 100%; margin-inline: auto; padding-inline: max(16px, calc(var(--u) / 2)); }
.top { display: flex; align-items: center; height: max(56px, calc(var(--u) * 1.2)); }
.mark { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; }
.grid { position: relative; width: var(--gw); aspect-ratio: 2 / 1; margin-inline: auto; background: #000; }
@media (max-width: 899.98px) { .grid { aspect-ratio: 1 / 2; } }
.grid img, .grid video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.grid > video { opacity: 0; transition: opacity .6s; } .grid > video.on { opacity: 1; }
/* a clicked bowl: its own recording at the app's real size, grown from its place; the rest dims */
.grid picture, .grid > video { transition: opacity .25s; }
.grid.live picture { visibility: hidden; }
.grid.picked picture, .grid.picked > video.on { opacity: .16; }
.gap { position: absolute; background: #000; }
.one { position: absolute; width: 240px; height: 240px; cursor: pointer; mix-blend-mode: screen; }
.big { position: relative; width: 240px; height: 240px; transform-origin: center; animation: grow .34s cubic-bezier(.2,.7,.2,1) both; }
.big canvas, .big video { position: absolute; inset: 0; width: 240px; height: 240px; display: block; }
.big video { opacity: 0; transition: opacity .18s; } .big video.on { opacity: 1; }
.one span { position: absolute; left: -40px; right: -40px; top: 212px; text-align: center; font-size: 14px; font-weight: 500; text-shadow: 0 0 12px #000, 0 0 4px #000; animation: fade .3s .22s both; }
@keyframes grow { from { transform: translate(var(--dx), var(--dy)) scale(var(--from)); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.line { margin-block: 0; padding-block: max(20px, calc(var(--u) * .45)) 0; text-align: center; font-weight: 500;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.buy { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-block: 26px 10px; }
.btn { border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; min-width: 168px; display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.btn[href]:hover { background: var(--ink); color: #000; }
.btn b { font-weight: 600; } .btn small, .fine { color: var(--dim); font-size: 12.5px; }
.fine { text-align: center; margin: 6px auto 0; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--dim); font-size: 12.5px; padding-block: 26px 0; }
.text { max-width: 720px; } .text h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
.hole { background: #ffd24a; color: #000; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .grid > video { display: none; } }