/* /particles/ — a sphere of glowing particles on black. Studio fonts; the sphere is drawn by particles.js. */
.pt-stage { position: relative; height: calc(100svh - 74px); min-height: 520px; background: #000; color: #e9f3f6; overflow: hidden; isolation: isolate; }
.pt-canvas { position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; outline: none; }
.pt-canvas:active { cursor: grabbing; }
.pt-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }

/* if WebGL can't run, the share image stands in */
.pt-still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pt-nogl .pt-still { display: block; }

.pt-words { position: absolute; left: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad)); bottom: 8svh; z-index: 2; max-width: 30rem; pointer-events: none; text-shadow: 0 0 18px #000, 0 0 6px #000; }
.pt-words h1 { margin: 0 0 .8rem; font: 700 clamp(1.9rem, 3.6vw, 3rem)/1.05 var(--f-display); color: #fff; max-width: 15ch; text-wrap: balance; }
.pt-other { display: inline-block; margin-top: .9rem; pointer-events: auto; font: 500 .95rem var(--f-body); color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
.pt-other:hover { text-decoration-color: #fff; }
.pt-words p { margin: 0; font: 400 1.02rem/1.55 var(--f-body); color: rgba(233, 243, 246, .72); max-width: 34ch; }

/* top right, out of the sphere's way, on a dark glass bar so the scattered dots can't swamp it */
.pt-controls { position: absolute; right: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad)); top: 22px; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 26px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 2 * var(--pad)); background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pt-colours { display: flex; gap: 4px; }
.pt-colours + .pt-colours { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .16); }
.pt-colours button, .pt-scatter { font: 500 .86rem var(--f-body); color: rgba(233, 243, 246, .8); background: none; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.pt-colours button span { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.pt-colours button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.pt-colours button:hover, .pt-scatter:hover { color: #fff; }
.pt-scatter { border: 1px solid rgba(255, 255, 255, .22); padding: 9px 18px; }
.pt-scatter[aria-pressed="true"] { background: rgba(255, 255, 255, .12); }
.pt-colours button:focus-visible, .pt-scatter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pt-nogl .pt-canvas, .pt-nogl .pt-controls { display: none; }

.pt-after__in { max-width: 760px; }
.pt-after h2 { margin: 0 0 18px; font-size: clamp(2rem, 4vw, 3rem); }
.pt-after p { color: var(--ink-2); font-size: 1.1rem; }

@media (max-width: 800px) {
  .pt-stage { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .pt-canvas { position: relative; height: 62svh; }
  .pt-nogl .pt-still { position: relative; height: 62svh; }
  .pt-words, .pt-controls { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--pad); }
  .pt-controls { order: 2; top: auto; align-self: flex-start; flex-wrap: wrap; margin: 0 var(--pad) 26px; padding: 6px; border-radius: 22px; }
  .pt-words { order: 1; padding-block: 6px 20px; }
  .pt-colours { flex-wrap: wrap; }
  .pt-colours + .pt-colours { padding-left: 0; border-left: 0; }
  .pt-controls { justify-content: flex-start; }
}