/* the fabric sandbox: the chrome is as little as possible; everything that matters is stitched on the cloth */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#gl:active { cursor: grabbing; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid #f08f7c; outline-offset: 2px; border-radius: 6px; }
#sound { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink3); opacity: .8; transition: color .2s var(--ease-out), opacity .2s; }
#sound svg { width: 22px; height: 22px; } #sound .w { opacity: .25; } #sound[aria-pressed="true"] { color: var(--gold); opacity: 1; } #sound[aria-pressed="true"] .w { opacity: 1; }
#skip, #more { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; min-width: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); color: var(--ink3); font: 400 14px/1 var(--f-ar); transition: opacity .4s var(--ease-out); }
#skip { border: 1px solid var(--hair); background: rgba(10, 9, 8, .5); }
#more svg { width: 12px; height: 18px; animation: nudge 1.8s var(--ease-io) infinite; }
#skip.off, #more.off { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
#veil { position: fixed; inset: 0; pointer-events: none; transition: opacity .7s var(--ease-out);
  background: radial-gradient(ellipse 62% 55% at 50% 48%, rgba(255, 214, 160, 0.07), rgba(0, 0, 0, 0) 70%), radial-gradient(ellipse 85% 80% at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(rgba(10, 9, 8, 0.38), rgba(10, 9, 8, 0.38)), url("../img/cloth-s.jpg") center / var(--tile, 330px) var(--tile, 330px) repeat, #0d0c0b; }
#veil.gone { opacity: 0; }
/* the beat thread's knots (drawn on the cloth layer; these are their hands) */
#knots { position: fixed; top: 0; right: 0; width: 44px; height: 100%; pointer-events: none; }
#knots .knot { position: absolute; right: 0; width: 44px; height: 44px; pointer-events: auto; border-radius: 50%; }
#knots .knot:disabled { pointer-events: none; }
#skip { display: none; }