@font-face { font-family: 'c0unt-r'; src: url('../f/c0unt-r.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'c0unt-h'; src: url('../f/c0unt-h.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'c0unt-x'; src: url('../f/c0unt-x.woff2') format('woff2'); font-display: block; }

:root { --paper: #d8d4c1; --ink: #1c1410; --night: #0b0a09; --bone: #e8e2d2; --fg: #1c1410; --bg: #d8d4c1; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--fg); }
body, button, textarea, a { font-family: 'c0unt-r', 'c0unt-h'; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; outline: none; }

#offers { position: fixed; inset: 0; pointer-events: none; }
#offers button {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
  background: transparent; border: 0; color: transparent; pointer-events: auto; cursor: pointer;
}
#offers button:focus-visible { outline: none; }

#tide {
  position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  max-width: min(58vw, 760px); max-height: 18vh; overflow: hidden; white-space: pre; font-size: 12px; line-height: 1.35;
  color: currentColor; opacity: .7; text-decoration: none;
}
#tide:hover, #tide:focus-visible { opacity: .9; outline: none; }
#v {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 0; font-size: 12px;
  opacity: .7;
}
#v:hover, #v:focus-within { opacity: .95; }
#v span { display: flex; gap: 0; }
#v a { color: currentColor; text-decoration: none; padding: 5px 6px; min-height: 26px; display: inline-flex; align-items: center; }
#v a + a { min-width: 28px; justify-content: center; }
#v a:focus-visible, #tide:focus-visible, #credit a:focus-visible { outline: none; text-decoration: underline wavy; opacity: 1; }
#credit a { color: currentColor; text-decoration: none; }
#credit {
  position: fixed; right: max(14px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top));
  font-size: 11px; color: currentColor; text-decoration: none; opacity: .66; padding: 6px;
}
#code {
  position: fixed; left: 4vw; top: 8vh; width: 92vw; height: 80vh; padding: 0; border: 0; resize: none;
  background: transparent; color: currentColor; font-size: 13px; line-height: 1.4; outline: none;
  tab-size: 2;
}
#edge { position: fixed; left: 0; right: 0; bottom: 0; height: calc(34px + env(safe-area-inset-bottom)); display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 699px) {
  #tide, #v { display: none; }
  #edge { display: block; }
  body.open #tide, body.open #v { display: flex; }
  body.open #tide { display: block; max-width: 92vw; bottom: 34px; max-height: 40vh; background: var(--bg); padding: 6px 0; }
  body.open #v { bottom: auto; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; background: var(--bg); padding: 30px 8px 8px; }
  body.open #offers { pointer-events: none; }
  body.open #offers button { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

html:not([data-begun]) #v, html:not([data-begun]) #tide { visibility: hidden; opacity: 0; }
#v, #tide { transition: opacity 2s; }