:root { color-scheme: dark; --bg: oklch(17.8% 0 0); --ink: oklch(90% .008 85); --muted: oklch(67% .008 85); }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100svh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink); background: radial-gradient(ellipse at 50% 40%, oklch(22% .006 80), transparent 58%); }
header, footer { padding: 32px 40px; font: 11px/1.5 'Courier New', monospace; letter-spacing: .12em; color: var(--muted); }
header { text-transform: lowercase; }
main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 72px; }
.liquid {
  position: relative;
  display: block;
  flex: none;
  width: clamp(300px, 37vw, 460px);
  max-width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  margin: -44px 0 -44px;
  background: transparent;
  color: inherit;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.liquid:active, .liquid.is-dragging { cursor: grabbing; }
.liquid:focus-visible { outline: 1px solid var(--muted); outline-offset: -40px; }
.liquid:disabled { cursor: default; touch-action: auto; }
.liquid-poster, .liquid-surface { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.liquid-poster { object-fit: contain; transform: scale(.79); -webkit-user-drag: none; }
.liquid-surface { opacity: 0; }
.liquid.is-ready .liquid-surface { opacity: 1; }
.liquid.is-ready .liquid-poster { visibility: hidden; }
h1 { margin: 0; max-width: 100%; font: 400 clamp(32px, 5.4vw, 76px)/1.15 'Times New Roman', Times, serif; letter-spacing: -.035em; text-wrap: balance; text-align: center; }
h1 em { font-weight: 400; }
footer { text-align: center; padding-bottom: 28px; font-size: 10px; }
@media (max-width: 480px) { header { padding: 24px; } main { padding-bottom: 56px; } }
@media (prefers-reduced-motion: reduce) { .liquid { cursor: default; } }