.water-words-page {
  --ink: #152b3c;
  --muted: #526471;
  --blue: #245a8d;
  --paper: #faf9f5;
  --rule: #d4dbdf;
  background: var(--paper);
  color: var(--ink);
}

.ww { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; }
.ww i { font-style: normal; font-weight: 650; }

.ww-head { display: flex; justify-content: center; padding: 22px 0 0; background: transparent; color: var(--ink); }
.ww-mark { margin: 0; }
.ww-mark svg { display: block; width: clamp(220px, 26vw, 340px); height: auto; overflow: visible; }
.ww-mark line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.ww-mark .o { fill: var(--blue); }
.ww-mark .h { fill: #9fc3d9; }
.ww-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ww-stage { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; padding: 18px 0 8px; }

/* ---- the wheel ---- */
.ww-wheel { margin: 0; max-width: min(820px, calc(100svh - 40px)); width: 100%; justify-self: center; }
.ww-wheel svg { display: block; width: 100%; height: auto; overflow: visible;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Apple SD Gothic Neo", "Hiragino Sans", "PingFang SC", sans-serif; }

.ww-band { fill: none; stroke-width: 12; stroke-linecap: butt; opacity: .9; transition: stroke-width .2s ease; }
.ww-band.is-lit { stroke-width: 20; }

.ww-word { cursor: pointer; outline: none; }
.ww-hit { fill: transparent; }
.ww-dot { fill: var(--c); transition: r .18s ease; }
.ww-word text { dominant-baseline: central; }
.ww-w { fill: var(--ink); font-size: 26px; font-weight: 500; transition: fill .15s ease; }
.ww-l { fill: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.ww-word:hover .ww-w, .ww-word:focus-visible .ww-w { fill: var(--c); }
.ww-word:focus-visible .ww-hit { fill: color-mix(in srgb, var(--c) 12%, transparent); }
.ww-word.is-on .ww-w { fill: var(--c); font-weight: 750; }
.ww-word.is-on .ww-l { fill: var(--ink); }
.ww-word.is-on .ww-dot { r: 7px; }

.ww-center { cursor: pointer; outline: none; }
.ww-core { fill: #fff; stroke: var(--rule); stroke-width: 1.5; transition: stroke .15s ease; }
.ww-center:hover .ww-core, .ww-center:focus-visible .ww-core, .ww-center.is-touring .ww-core { stroke: var(--c, var(--blue)); stroke-width: 3; }
.ww-c-cue path { fill: var(--blue); }
.ww-c-cue text { fill: var(--blue); font-size: 17px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; dominant-baseline: central; }
.ww-center.is-touring .ww-c-cue path, .ww-center.is-touring .ww-c-cue text { fill: var(--c, var(--blue)); }
.ww-ripple { fill: none; stroke: var(--c, var(--blue)); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ww-ripple.go { animation: ww-ripple 1.5s ease-out forwards; }
.ww-ripple.go.r2 { animation-delay: .22s; }
.ww-ripple.go.r3 { animation-delay: .44s; }
@keyframes ww-ripple { from { opacity: .55; transform: scale(.35); } to { opacity: 0; transform: scale(1); } }

.ww-c-word { fill: var(--ink); font-size: 88px; font-weight: 650; letter-spacing: -.02em; text-anchor: middle; dominant-baseline: central; }
.ww-c-roman { fill: var(--ink); font-size: 26px; font-weight: 400; font-style: italic; text-anchor: middle; }
.ww-c-lang { fill: var(--c, var(--muted)); font-size: 22px; font-weight: 700; text-anchor: middle; }
.ww-c-fam { fill: var(--muted); font-size: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }
.ww-c-hint { fill: var(--muted); font-size: 17px; text-anchor: middle; }

/* ---- families list ---- */
.ww-side h2 { margin: 4px 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ww-families { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ww-fam { display: grid; grid-template-columns: 10px 1fr auto; gap: 2px 10px; align-items: center; min-height: 40px; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.ww-fam { cursor: pointer; }
.ww-fam:hover .ww-fam-name, .ww-fam.is-lit .ww-fam-name { color: var(--c); }
.ww-fam.is-lit { background: color-mix(in srgb, var(--c) 9%, transparent); }
.ww-fam::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); grid-row: 1; }
.ww-fam-name { font-size: .8rem; font-weight: 700; color: var(--ink); }
.ww-fam-name small { margin-left: 4px; color: var(--muted); font-weight: 500; }
.ww-fam-play { min-height: 32px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink); font-family: inherit; font-size: .7rem; font-weight: 600; line-height: 1; cursor: pointer; }
.ww-fam-play:hover, .ww-fam-play:focus-visible { border-color: var(--c); color: var(--c); }
.ww-fam-play[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.ww-chips { grid-column: 2 / -1; display: none; flex-wrap: wrap; gap: 2px 10px; }
.ww-chip { min-height: 28px; padding: 0; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: .82rem; font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 45%, transparent); text-underline-offset: 3px; }
.ww-chip:hover, .ww-chip:focus-visible, .ww-chip.is-on { color: var(--c); text-decoration-color: var(--c); }
.ww-chip.is-on { font-weight: 750; }

/* ---- explainer + credits ---- */
.ww-explain { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 8px 24px; padding: 16px 0; border-top: 2px solid var(--ink); }
.ww-explain h2 { margin: 2px 0 0; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.ww-explain p { margin: 0; color: var(--ink); font-size: .84rem; line-height: 1.55; }

.ww-credits { border-top: 1px solid var(--rule); padding: 8px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.ww-credits summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--ink); }
.ww-credits p { margin: 0 0 8px; max-width: 80ch; }
.ww-credits ol { columns: 3 260px; column-gap: 24px; margin: 0; padding-left: 0; list-style: none; }
.ww-credits li { break-inside: avoid; padding: 2px 0; }
.ww-credits a { color: var(--blue); }
.ww-noscript { color: var(--muted); }

@media (max-width: 980px) {
  .ww-stage { grid-template-columns: 1fr; }
  .ww-explain { grid-template-columns: 1fr 1fr; }
  .ww-explain h2 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ww { padding: 0 16px 32px; }
  .ww-chips { display: flex; padding-bottom: 4px; }
  .ww-explain { grid-template-columns: 1fr; }
  .ww-stage { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ww-ripple.go { animation: none; }
  .ww-band, .ww-dot, .ww-w { transition: none; }
}