.sld { margin: 0; }
.sld-panel {
  position: relative; overflow: hidden; background: #F6EEE9; color: #441C47;
  aspect-ratio: 16 / 7; display: grid; place-items: center;
  touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sld-drag { cursor: grabbing; }
.sld-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sld-arc, .sld-tk, .sld-needle { fill: none; stroke: #441C47; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sld-arc { opacity: .25; }
.sld-tk { opacity: .25; }
.sld-tk.sld-maj { opacity: .4; }
.sld-needle { opacity: .35; }
.sld-dot { fill: #964785; }
.sld-num { font: 500 13px var(--font-body); letter-spacing: .08em; fill: #441C47; opacity: .4; }
.sld-hot { stroke: #964785; stroke-width: 2; opacity: .75; transition: opacity .5s var(--ease); transform-box: fill-box; transform-origin: 50% 100%; }
.sld-snap .sld-hot { opacity: 1; }
.sld-hot.sld-pulse { animation: sld-pulse .9s var(--ease); }
@keyframes sld-pulse { 0% { transform: scale(1, 1); } 35% { transform: scale(2.2, 1.55); } 100% { transform: scale(1, 1); } }

.sld-stagew { position: relative; z-index: 1; display: inline-block; margin-top: -2%; }
.sld-word {
  font-family: var(--font-marquee); font-weight: 400; line-height: 1; color: #441C47;
  font-size: clamp(64px, 11vw, 180px); letter-spacing: .04em; white-space: nowrap;
  transform-origin: 50% 100%; will-change: transform; padding: 0 .04em;
}
.sld-ul { position: absolute; left: 0; right: 0; bottom: -.12em; height: 1px; background: #B08A64; transform: scaleX(0); opacity: 0; transform-origin: 0 50%; transition: transform .7s var(--ease), opacity .3s; font-size: clamp(64px, 11vw, 180px); }
.sld-snap .sld-ul { transform: scaleX(1); opacity: 1; }

.sld-info { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; text-align: center; height: 1.4em; pointer-events: none; }
.sld-info .label { position: absolute; left: 0; right: 0; top: 0; color: #441C47; transition: opacity .5s var(--ease); }
.sld-read { opacity: .65; }
.sld-tag { opacity: 0; }
.sld-snap .sld-read { opacity: 0; }
.sld-snap .sld-tag { opacity: 1; color: #441C47; }

.sld-ctl { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 0 0; margin-top: 0; }
.sld-end { white-space: nowrap; }
.sld-btns { grid-column: 1 / -1; display: flex; gap: 6px; }
.sld-pill { padding: 8px 12px; border: 1px solid var(--hair); font: 500 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: none; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.sld-pill:hover { background: var(--ink); color: var(--paper); }
.sld-ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.sld-ctl input::-webkit-slider-runnable-track { height: 1px; background: color-mix(in srgb, var(--ink) 50%, transparent); }
.sld-ctl input::-moz-range-track { height: 1px; background: color-mix(in srgb, var(--ink) 50%, transparent); }
.sld-ctl input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -7px; background: var(--ink); border: 0; border-radius: 0; }
.sld-ctl input::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 0; border-radius: 0; }
.sld-ctl input:focus-visible, .sld-pill:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

@media (max-width: 640px) {
  .sld-panel { aspect-ratio: 1 / 1; }
  .sld-word, .sld-ul { font-size: clamp(34px, 12.5vw, 64px); }
  .sld-svg { top: 8%; height: 62%; }
  .sld-info { bottom: 14px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .sld-hot.sld-pulse { animation: none; } }