/* The Ring, abdaishere.com full-screen view.
   The site's "Signal" tokens (web/site.css, dark), its type and its measured font fallbacks, the chrome
   (beat, side readout, Sound, Pause, Normal view, dots), the six sides, and the drum: six faces round a
   horizontal axis in CSS 3D, the camera just behind the axis, so the face in front fills the screen and
   the edges of the faces above and below lean away from it.

   Two layouts. html.ringing (set before first paint) is the turning drum. Anything else, which is
   reduced motion (html.rm) or no script at all, is a plain page: the six sides stacked in the same
   order with the same words and links, a still hexagon outline behind them.

   Per frame the script writes transform and opacity only. Nothing that paints (box-shadow, filter,
   backdrop-filter, gradients) changes while the ring turns; the layers that carry them are composited
   once and then only moved or faded. */

@font-face { font-family: "Bricolage"; src: url(../../fonts/bricolage-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(../../fonts/plex-sans-var.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../../fonts/jetbrains-mono-var.woff2) format("woff2"); font-weight: 100 800; font-display: optional; }
/* the site's measured fallbacks, so the swap does not move a line */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Black"), local("Arial-Black"); size-adjust: 90%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; src: local("Arial"); size-adjust: 101.5%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback"; src: local("Consolas"); size-adjust: 109%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --bpm: 120;
  /* web/site.css, dark column; ratios against --bg measured with the WCAG formula */
  --bg: #0A0B0F; --ground: #08090C; --line: #23262E;
  --ink: #F4F4F0;     /* 17.8:1 */
  --mid: #A8ADB8;     /*  8.7:1 */
  --mut: #8B919E;     /*  6.2:1 */
  --signal: #F5A524;  /*  9.6:1 as text */
  --on-signal: #0A0B0F; --miss: #E11D48;
  --display: "Bricolage", "Bricolage Fallback", system-ui, sans-serif;
  --sans: "Plex Sans", "Plex Fallback", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Mono Fallback", ui-monospace, Consolas, monospace;
  --pad: clamp(1rem, 4vw, 3rem);
  --t: 140ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --top: 3.5rem;
  /* the drum: the face in front is 80 % of the large viewport (84 % on a phone); the script sets the
     same numbers, so its first write moves nothing */
  --face: 80lvh; --persp: calc(80lvh / 1.1547 * 1.15);
}
@supports not (height: 1lvh) { :root { --face: 80vh; --persp: calc(80vh / 1.1547 * 1.15); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--signal); color: var(--on-signal); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 90; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.5rem; }
.vh-probe { position: fixed; left: 0; top: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- chrome */
.chrome { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--top); display: flex; align-items: center; gap: 0.75rem; padding: 0 var(--pad); padding-top: env(safe-area-inset-top, 0); pointer-events: none; }
.chrome > * { pointer-events: auto; }
.where { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.where b { font-weight: 500; color: var(--ink); }
.beat { position: relative; width: 24px; height: 24px; flex: none; }
.beat-ring { position: absolute; inset: 0; width: 24px; height: 24px; }
.beat-dot { position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--mut)); transition: background-color 300ms; }
.ctl { display: flex; align-items: center; gap: 0.5rem; }
.btn-plain { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 44px; min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--mid); font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color var(--t), border-color var(--t); }
.btn-plain:hover { color: var(--ink); border-color: var(--ink); }
.btn-plain svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sound[aria-pressed="true"] { color: var(--ink); border-color: var(--mid); }
.sound[aria-pressed="true"] .s-off, .sound:not([aria-pressed="true"]) .s-on { display: none; }
.pause .i-play, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[aria-pressed="true"] { color: var(--ink); border-color: var(--mid); }
.normal { color: var(--ink); border-color: var(--mut); }
.dots { position: fixed; z-index: 50; right: calc(var(--pad) * 0.5); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; }
.dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1.5px solid var(--mut); transition: transform 200ms var(--ease-out), background-color 200ms, border-color 200ms; }
.dot:hover::before { border-color: var(--ink); }
.dot[aria-current]::before { background: var(--c); border-color: var(--c); transform: scale(1.4); }
.dot:focus-visible { outline-offset: -6px; border-radius: 50%; }
.burst { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
.spacer { width: 1px; height: 0; }
.still-ring { display: none; }

/* ---------------------------------------------------------------- content, shared by all sides */
.kicker { display: flex; align-items: baseline; gap: 0.6rem; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.kicker .no { color: var(--signal); }
.label { font: 500 0.75rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.cap { font: 400 0.75rem/1.5 var(--mono); color: var(--mut); }
/* the plate's layer and height, read from the G-code as it is laid; numbers fixed-width so nothing shifts */
.plate-read { display: block; color: var(--mid); font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 1.5em; contain: layout paint; }
html.plate-fallback .plate-read, .save-data .plate-read { display: none; }
.small { font: 400 0.8125rem/1.5 var(--mono); color: var(--mut); }
.head { font: 700 clamp(1.5rem, 3.4vh + 0.6vw, 2.75rem)/1.08 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.head.xl { font-size: clamp(2.25rem, 6.5vh + 1vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; }
.links, .social { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.more { display: inline-block; min-height: 44px; padding-block: calc((44px - 1.45em) / 2); font-size: 0.9375rem; line-height: 1.45; color: var(--mid); }
.more:hover { color: var(--ink); }
.more svg, .kit svg { display: inline-block; vertical-align: -0.12em; margin-left: 0.3em;   /* no space before it: the underline stops at the word */ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0 1.3rem; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); font: 600 0.9375rem var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t); }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.75rem; }
.addr { font: 400 0.8125rem/1.4 var(--mono); color: var(--mid); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.from { font: 500 0.45em/1 var(--mono); color: var(--mut); text-decoration: line-through; text-decoration-thickness: 1px; }
.to { font: 400 0.36em/1 var(--mono); color: var(--mut); letter-spacing: 0.02em; }
.u { font: 500 0.36em/1 var(--mono); color: var(--signal); letter-spacing: 0.04em; }

/* side 1 */
.name { font: 800 clamp(3rem, 10.5vh + 1vw, 9.5rem)/0.86 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.claim { font: 700 clamp(1.5rem, 4vh + 0.6vw, 3.25rem)/1.05 var(--display); letter-spacing: -0.03em; }
.otw { max-width: 44ch; font-size: clamp(1.0625rem, 1.2vh + 0.5vw, 1.25rem); color: var(--mid); text-wrap: pretty; }
.now { font: 500 0.875rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--mid); }
.stats { display: grid; gap: clamp(0.75rem, 2.4vh, 1.5rem); }
.stat { display: grid; gap: 0.15rem; padding-top: clamp(0.5rem, 1.6vh, 1rem); border-top: 1px solid var(--line); }
.stat-k { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.stat-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 0.35em; font: 800 clamp(2rem, 6vh, 3.75rem)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 0.9375rem; color: var(--mid); }
.val { white-space: nowrap; }

/* side 2 */
.net { display: grid; gap: 0.5rem; }
.net-box { position: relative; aspect-ratio: 16 / 10; }
.net-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp { position: absolute; left: 50%; top: 50%; translate: -50% 16px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.06em; color: var(--signal); white-space: nowrap; }
.bars { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 0.6rem 0.9rem; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.bars .v { color: var(--ink); text-transform: none; letter-spacing: 0.02em; font-size: 0.875rem; }
.bars .track { height: 14px; background: var(--line); border-radius: 1px; overflow: hidden; }
.bars .bar { display: block; height: 100%; width: 100%; background: var(--mid); }
/* to scale: about 10 min of 2 h+ is one twelfth */
.bars .bar.now { width: 8.33%; background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out) 150ms; }
.is-lit .bars .bar.now, html:not(.ringing) .bars .bar.now { transform: none; }
.method ul { display: grid; gap: 0.45rem; margin-top: 0.5rem; }
.method li { max-width: 68ch; padding-left: 1rem; border-left: 1px solid var(--line); font-size: clamp(1.0625rem, 1.1vh + 0.4vw, 1.125rem); color: var(--mid); text-wrap: pretty; }

/* side 3 */
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1rem 2rem; }
.nums li { display: grid; gap: 0.2rem; }
.nums .n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 0.3em; font: 800 clamp(2rem, 6vh, 3.75rem)/1 var(--display); letter-spacing: -0.04em; }
.nums .l { font-size: 0.9375rem; color: var(--mid); }
.kit { font-size: 0.875rem; color: var(--mid); }
.kit a { display: inline-block; min-height: 44px; padding-block: calc((44px - 1.45em) / 2); line-height: 1.45; color: inherit; }
.kit a:hover { color: var(--ink); }
.shots { display: grid; grid-template-columns: 1fr 1.22fr 1fr; gap: clamp(0.5rem, 1.2vw, 1rem); align-items: center; }
.shot { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); aspect-ratio: 9 / 16; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.1rem 0 0.9rem; border-radius: 999px; background: rgba(8, 9, 12, 0.82); border: 1px solid rgba(244, 244, 240, 0.4); color: var(--ink); font: 600 0.875rem var(--sans); text-decoration: none; white-space: nowrap; transition: background-color var(--t), color var(--t); }
.play:hover { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.play svg { width: 18px; height: 18px; fill: currentColor; }
.tapzone { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; visibility: hidden; opacity: 0; transition: opacity 600ms, visibility 0s 600ms; }
.tapzone.show { visibility: visible; opacity: 1; transition: opacity 600ms; }
.hint { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.9rem 0 0.5rem; border: 1px solid rgba(245, 165, 36, 0.55); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.8125rem var(--mono); letter-spacing: 0.04em; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.hint-pulse { position: relative; width: 24px; height: 24px; }
.hint-pulse canvas { position: absolute; inset: 0; width: 24px; height: 24px; }
.hint-pulse i { position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); opacity: 0; }
.hint-pulse::after { content: ""; position: absolute; left: 7.25px; top: 7.25px; width: 9.5px; height: 9.5px; border-radius: 50%; border: 1.5px solid var(--signal); }
.hits { font: 500 0.8125rem var(--mono); color: var(--mid); font-variant-numeric: tabular-nums; min-width: 12ch; white-space: nowrap; }
.side:focus { outline: none; }

/* side 4 */
.big { display: inline-block; padding-block: max(0px, calc((44px - 1.15em) / 2)); font: 600 clamp(1.25rem, 3.2vh + 0.8vw, 2.5rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--signal); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.big:hover { color: var(--ink); }
/* measured by the page itself as it runs, never typed in */
.receipt { min-height: 1.5em; font-variant-numeric: tabular-nums; }
.foot { display: grid; gap: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }

/* side 5 */
.lines { display: grid; gap: 0.5rem; }
.lines li { max-width: 46ch; color: var(--mid); text-wrap: pretty; }
.plate { position: relative; display: grid; gap: 0.5rem; }
.plate-box { position: relative; aspect-ratio: 16 / 10; }
.plate .pieces { order: 2; } .plate > .cap { order: 3; }
.plate-box canvas, .plate-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-glow { opacity: 0.32; mix-blend-mode: screen; }   /* drawn small and stretched: the stretch is the blur */
.plate-still { display: none; object-fit: contain; }
.save-data .plate-still { display: block; }
.save-data .plate-box canvas { display: none; }
/* the G-code did not arrive: the still stands in, in either layout */
html.plate-fallback .plate-box canvas, html.rm.plate-fallback .plate-box canvas { display: none; }
html.plate-fallback .plate-still, html.rm.plate-fallback .plate-still { display: block; }
.pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.piece { display: grid; gap: 0.35rem; opacity: 0; translate: 0 14px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); }
.piece:nth-child(2) { transition-delay: 160ms; }
.built .piece, html:not(.ringing) .piece { opacity: 1; translate: 0 0; }
/* width: 100%, not the 800 px width attribute: before its lazy src arrives the image laid out at 800 x 500,
   so side 5 measured 403 px taller than it is and the phone dwell scrolled it off the top */
.piece img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--ground); }
.piece figcaption { font: 400 0.8125rem/1.4 var(--mono); color: var(--mid); }
.tag { display: inline-block; padding: 0.05rem 0.4rem; border: 1px solid var(--mut); border-radius: 2px; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }

/* side 6 */
.facts { display: grid; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 0.75rem/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.facts dd { font-size: 1.0625rem; }
.clock { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--signal); }
.path { counter-reset: p; display: grid; border-top: 1px solid var(--line); }
.path li { counter-increment: p; display: grid; grid-template-columns: 2.5rem 1fr; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.path li::before { content: counter(p, decimal-leading-zero); font: 500 0.75rem/1.9 var(--mono); color: var(--mut); }
.path li:first-child { color: var(--ink); }
.path li:not(:first-child) { color: var(--mid); }
.close { max-width: 60ch; font: 400 0.875rem/1.6 var(--mono); color: var(--mid); }
.again { font: 500 0.75rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }

/* ---------------------------------------------------------------- side layouts
   .side-in centres its content, "safe" so a side taller than its box (a phone's stacked extras)
   overflows downward only. */
.side { overflow: clip; }
.side-in { width: min(100% - 2 * var(--pad) - 6rem, 80rem); margin-inline: auto;   /* 6rem: the dot rail keeps a 45 px gutter from the content's right edge at 1440 */ display: flex; flex-direction: column; justify-content: safe center; gap: clamp(0.75rem, 2.4vh, 1.75rem); }
#hello .side-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "k k" "n n" "c s"; align-content: safe center; column-gap: clamp(2rem, 5vw, 5rem); row-gap: clamp(0.5rem, 1.6vh, 1.1rem); }
.hello-copy { grid-area: c; display: flex; flex-direction: column; gap: clamp(0.75rem, 2.2vh, 1.4rem); align-self: start; }
#hello .kicker { grid-area: k; } #hello .name { grid-area: n; margin-bottom: clamp(0.25rem, 1.5vh, 1rem); } #hello .cta { padding-top: 0.25rem; } #hello .stats { grid-area: s; align-self: start; }
.ej-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ej-main { display: grid; gap: clamp(1rem, 2.6vh, 1.75rem); }
.ej-main .method { padding-top: clamp(0.75rem, 2.4vh, 1.75rem); border-top: 1px solid var(--line); }
.pb-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.pb-copy { display: grid; gap: clamp(0.75rem, 2.2vh, 1.5rem); justify-items: start; }
.shots { max-width: calc(58vh * 1.14); justify-self: end; width: 100%; }
#contact .side-in { gap: clamp(0.9rem, 2.6vh, 1.75rem); }
.pr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.pr-copy { display: grid; gap: clamp(0.75rem, 2vh, 1.25rem); justify-items: start; }
.plate .pieces { width: 72%; margin: -13% 0 0 auto; position: relative; }
.plate-box { max-height: 52vh; }
@media (min-width: 48rem) and (max-height: 50rem) { .plate-box { max-height: 44vh; } .plate .pieces { margin-top: -9%; } }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.ab-me { display: grid; gap: clamp(1rem, 3vh, 2rem); }
.ab-path { display: grid; gap: 0.6rem; }

/* ---------------------------------------------------------------- the drum (html.ringing) */
.ringing body { overscroll-behavior-y: none; }
.ringing .chrome { background: linear-gradient(180deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.75) 62%, rgba(8,9,12,0) 100%); }
.ringing .spacer { height: 725vh; height: 725lvh; }   /* six sides of one viewport, a quarter hold, the second Hello */
.ringing .stage { position: fixed; inset: 0; overflow: hidden; perspective: var(--persp); perspective-origin: 50% 50%; background: radial-gradient(120% 70% at 50% 50%, #0E1015 0%, var(--ground) 70%); contain: strict; }
/* the drum is a 3D group, not a surface: it must not catch taps meant for the faces inside it */
.ringing .drum { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.ringing .side { pointer-events: auto; }
/* will-change: transform keeps each face's raster through the side 4 camera swing (the faces shrink to
   show the hexagon; without it Chrome re-rasters six face-sized layers as their scale changes) */
.ringing .side { position: absolute; left: 0; top: calc(50% - var(--face) / 2); width: 100%; height: var(--face); transform-style: flat; backface-visibility: visible; will-change: transform; background: linear-gradient(180deg, #0D0F14 0%, #0A0B0F 14%, #0A0B0F 86%, #0D0F14 100%); }
/* the drum at rest on Hello, as the script will first draw it, so the first paint is the first frame:
   face i turned i * 60 degrees round the axis at radius face * cos 30, the drum pushed out by the same */
.ringing .drum { transform: translateZ(calc(var(--face) * 0.8660254)); }
.ringing .side { --r: calc(var(--face) * -0.8660254); }
.ringing .side[data-side="1"] { transform: rotateX(60deg) translateZ(var(--r)); }
.ringing .side[data-side="2"] { transform: rotateX(120deg) translateZ(var(--r)); visibility: hidden; }
.ringing .side[data-side="3"] { transform: rotateX(180deg) translateZ(var(--r)); visibility: hidden; }
.ringing .side[data-side="4"] { transform: rotateX(240deg) translateZ(var(--r)); visibility: hidden; }
.ringing .side[data-side="5"] { transform: rotateX(300deg) translateZ(var(--r)); }
.ringing .side[data-side="0"] { transform: translateZ(var(--r)); }
.ringing .side[data-side="0"] .edge.col { opacity: 0.78; }
.ringing .side[data-side="1"] .edge.col, .ringing .side[data-side="5"] .edge.col { opacity: 0.32; }
/* The content centres in the face with auto margins, which fall to zero when it overflows (a phone's
   stacked extras), so the top is never cut. Auto margins do this everywhere; "safe center" only in
   Safari 17.6 and later. */
.ringing .side { display: flex; flex-direction: column; }
.ringing .side-in { position: relative; z-index: 1; flex: none; margin-block: auto; padding-block: clamp(0.75rem, 2.5vh, 2rem); will-change: opacity; }
.edge { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* a phone side whose extras are still below the edge fades out there, so a cut line reads as "more",
   not as a fault; it clears as the dwell brings the last line up */
.side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,11,15,0), #0A0B0F 85%); opacity: 0; transition: opacity 250ms; }
.ringing .side.more-below::after { opacity: 1; }
/* the base ring: a hairline at each vertex of the hexagon, as the site draws everything */
.edge.base { border-block: 1px solid #3A3F4C; background: repeating-linear-gradient(90deg, rgba(244,244,240,0.045) 0 1px, transparent 1px calc(100% / 12)); }
/* a face's own colour: the edge burns and bleeds a little light into the face. Two thin strips, one per
   edge, not a layer the size of the face: the compositor blends only what glows */
.edge.col { inset: auto 0; height: 40px; opacity: 0; will-change: opacity; }
.edge.col.top { top: 0; border-top: 2px solid var(--c); box-shadow: inset 0 22px 34px -26px var(--c), 0 -8px 18px -8px var(--c); }
.edge.col.bot { bottom: 0; border-bottom: 2px solid var(--c); box-shadow: inset 0 -22px 34px -26px var(--c), 0 8px 18px -8px var(--c); }
/* down the axis, a lit face reads as a wall of light, like the game's bloom */
.edge.wash { visibility: hidden; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c) 30%, transparent) 55%, color-mix(in srgb, var(--c) 6%, transparent) 100%); opacity: 0; will-change: opacity; }
.ringing #polyball { background: radial-gradient(90% 80% at 75% 50%, #12131A 0%, var(--ground) 70%); }
.vignette { display: none; }
/* above and below the face in front, the ring falls into the dark; two bands, nothing over the face */
.ringing .vignette { display: block; position: fixed; left: 0; right: 0; height: calc((100vh - var(--face)) / 2 + 2px); pointer-events: none; z-index: 2; }
.ringing .vignette.top { top: 0; background: linear-gradient(180deg, rgba(8,9,12,0.9), rgba(8,9,12,0)); }
.ringing .vignette.bot { bottom: 0; background: linear-gradient(0deg, rgba(8,9,12,0.9), rgba(8,9,12,0)); }
.ringing.tapping .stage { cursor: pointer; }

/* ---------------------------------------------------------------- the plain page (reduced motion, no script) */
html:not(.ringing) .still-ring { display: block; position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: 0.18; }
html:not(.ringing) .pause { display: none; }
html:not(.ringing) .side { position: relative; max-width: 84rem; margin: 0 auto; padding: calc(var(--top) + 2.5rem) var(--pad) 3rem; }
html:not(.ringing) .side + .side { border-top: 1px solid var(--line); }
html:not(.ringing) .side-in { width: 100%; }
html:not(.ringing) .chrome { background: rgba(10, 11, 15, 0.94); border-bottom: 1px solid var(--line); }
html:not(.ringing) .again { display: none; }
html:not(.ringing) main { position: relative; z-index: 1; padding-bottom: 4rem; }
html:not(.ringing) .tapzone { visibility: visible; opacity: 1; }
html:not(.rm):not(.ringing) .tapzone, html:not(.rm):not(.ringing) .dots, html:not(.rm):not(.ringing) .ctl > button { display: none; }
html:not(.ringing) .plate-box canvas { display: none; }
html:not(.ringing) .plate-still { display: block; }
html.rm:not(.save-data) .plate-box canvas { display: block; }
html.rm:not(.save-data) .plate-still { display: none; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 47.99rem) {
  :root { --face: 84lvh; --persp: calc(84lvh / 1.1547 * 1.15); }
  .chrome { gap: 0.4rem; }
  .ctl { gap: 0.35rem; }
  .ctl .say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ctl .btn-plain { padding: 0 0.6rem; }
  .ctl .normal .say { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .where .where-name { display: none; }
  .dots { top: auto; bottom: env(safe-area-inset-bottom, 0); left: 50%; right: auto; translate: -50% 0; flex-direction: row; }
  .ringing .spacer { height: 1050vh; height: 1050lvh; }   /* six sides of one and a half viewports, a half hold, the second Hello */
  .ringing .side-in { padding-block: 0.6rem; }
  html:not(.ringing) main { padding-bottom: 5rem; }
  html:not(.ringing) .dots { background: rgba(10, 11, 15, 0.94); left: 0; right: 0; translate: none; justify-content: center; }

  .side-in { width: calc(100% - 2.25rem); gap: 0.85rem; }
  .head { font-size: 1.375rem; }
  .head.xl { font-size: 2.35rem; }
  .more { font-size: 1rem; }
  #hello .side-in { display: flex; gap: 0.7rem; }
  .hello-copy { display: contents; }
  #hello .cta { order: 1; }
  .name { font-size: 3.6rem; }
  .claim { font-size: 1.6rem; }
  .otw { font-size: 1.0625rem; }
  .now { font: 400 1.0625rem/1.4 var(--sans); letter-spacing: 0; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .stat { padding-top: 0.5rem; align-content: start; }
  .stat-k { font-size: 0.6875rem; letter-spacing: 0.08em; }
  /* a chip: the before value on a small line, the figure and its unit whole on the next */
  .stat-v { display: block; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.05; }
  .stat-v .from, .stat-v .to { font-size: 0.56em; letter-spacing: 0; }
  .stat-v .val { display: block; margin-top: 0.2rem; }
  .stat-v:not(:has(.from))::before { content: "\200B"; display: block; }   /* the empty before line, so the figures align */
  .stat-v .u { font-size: 0.5em; letter-spacing: 0; }
  .stat-l { font-size: 0.8125rem; line-height: 1.3; }
  .seework { display: none; }
  .cta .btn { flex: 1 1 0; padding: 0 0.9rem; }
  .addr { flex-basis: 100%; font-size: 0.875rem; }
  .ej-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .ej-main { order: -1; gap: 0.85rem; }
  .net-box { aspect-ratio: 16 / 6.5; }
  /* the caption rides on the drawing, bottom centre (clear of the nodes), so it is on screen whenever
     the drawing is, not a line below the face that only the dwell brings up */
  .net { position: relative; }
  .net .cap { position: absolute; left: 50%; bottom: 0.15rem; translate: -50% 0; white-space: nowrap; }
  .method li { font-size: 1.0625rem; }
  .pb-grid, .pb-copy, .shots { display: contents; }
  #polyball .side-in { display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr); grid-template-areas: "k k" "h h" "n n" "m l" "m t" "z z" "x y"; align-content: safe center; gap: 0.75rem 1rem; }
  #polyball .kicker { grid-area: k; } #polyball .head { grid-area: h; } .nums { grid-area: n; } #polyball .links { grid-area: l; flex-direction: column; align-self: end; }
  #polyball .kit { grid-area: t; align-self: start; } .s-main { grid-area: m; } .s-home { grid-area: x; } .s-fever { grid-area: y; } #polyball .tapzone { grid-area: z; }
  .nums { gap: 0.75rem 1.25rem; }
  .nums .n { font-size: 2.1rem; }
  .play { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pr-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .plate .pieces { width: 100%; margin: 0.25rem 0 0; }
  .plate-box { max-height: none; aspect-ratio: 16 / 8.5; }
  .lines li { font-size: 1.0625rem; }
  .ab-grid { grid-template-columns: 1fr; gap: 1rem; }
  .ab-me { gap: 0.85rem; }
  .facts div { grid-template-columns: 7.5rem 1fr; padding: 0.4rem 0; }
  .facts dd, .path li { font-size: 1.0625rem; }
  .close { font: 400 1.0625rem/1.5 var(--sans); }
  .path li { padding: 0.35rem 0; }
  .big { font-size: 1.3rem; }
  .hint { padding: 0 0.75rem 0 0.4rem; gap: 0.4rem; font-size: 0.75rem; }
  .tapzone { gap: 0.5rem; }
  .hits { min-width: 0; font-size: 0.75rem; }
  .edge.wash { visibility: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent) 0%, color-mix(in srgb, var(--c) 42%, transparent) 60%, color-mix(in srgb, var(--c) 12%, transparent) 100%); }
}

/* a tablet in portrait: side 3's three panels get a row of their own under the copy; beside it they
   were postage stamps */
@media (min-width: 48rem) and (max-width: 64rem) and (orientation: portrait) {
  .pb-grid { grid-template-columns: 1fr; gap: clamp(1rem, 2.5vh, 1.5rem); }
  .pb-copy { gap: clamp(0.6rem, 1.6vh, 1rem); }
  #polyball .head { font-size: clamp(1.5rem, 2.6vh + 0.4vw, 2rem); }
  .shots { justify-self: start; max-width: calc(30vh * 0.5625 * 3.3); }
}

@media (prefers-contrast: more) {
  :root { --mut: #A8ADB8; --line: #3A3F4C; }
}
@media (forced-colors: active) {
  .edge, .still-ring { display: none; }
  .ringing .vignette { background: Canvas; }   /* the neighbours' edges, above and below the face, stay out of the way */
  .dot::before { border-color: CanvasText; }
  .dot[aria-current]::before { background: Highlight; border-color: Highlight; }
}