/* Homepage "Not a timer wearing a jersey": a tour of the real (classic) ref screen. Each list item
 * spotlights its part of the screen (controls-tour.js). The phone bezel comes from try/try-demo.css. */
.ct{position:relative;display:flex;align-items:center;justify-content:center;gap:18px}
.ct-phone{position:relative;width:min(100%,290px)}
.ct-screen{position:relative}
.ct-screen img{display:block;width:100%;height:auto}
.ct-spot{position:absolute;border-radius:12px;opacity:0;transition:opacity .3s,box-shadow .3s;pointer-events:none}
.ct-spot b,.ct-badge b{position:absolute;top:-13px;left:-6px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--v3-blue,#2f5fe0);color:#fff;font-size:13px;font-weight:900;box-shadow:0 0 0 3px #0b1020}
/* The active spot keeps its area bright and dims everything else on the screen. */
.ct-spot.is-on{opacity:1;box-shadow:0 0 0 3px #8fb0ff,0 0 0 999px rgba(5,8,16,.62)}
.ct-badge{position:absolute;left:50%;top:84.5%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#151c33;border:1px solid #2a3352;color:#d8e3ff;font-size:11.5px;font-weight:800;white-space:nowrap}
/* Step 4 highlights the badge itself (it stays visible in every step). */
.ct-badge{z-index:1;transition:box-shadow .3s}
.ct-badge b{display:none}
.ct-badge.is-on{box-shadow:0 0 0 3px #8fb0ff,0 0 0 999px rgba(5,8,16,.62)}
.ct-badge.is-on b{display:grid}
.ct-badge i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
/* Volume keys on the bezel's left edge, lit for step 5 */
.ct-rocker{position:absolute;left:-4px;top:22%;display:grid;gap:8px}
.ct-rocker span{display:block;width:4px;height:34px;border-radius:3px 0 0 3px;background:#2a3352;transition:background .3s,box-shadow .3s}
.ct.is-5 .ct-rocker span{background:#8fb0ff;box-shadow:0 0 10px #8fb0ff}
.ct-clicker{width:58px;flex:none;opacity:.35;transform:translateY(8px);transition:opacity .3s,transform .3s}
.ct-clicker svg{display:block;width:100%;height:auto}
.ct-clicker small{display:block;margin-top:6px;font-size:11px;font-weight:800;text-align:center;color:var(--v3-body,#475569);text-transform:uppercase;letter-spacing:.06em}
.ct.is-5 .ct-clicker{opacity:1;transform:none}
.ct.is-5 .ct-clicker .ct-press{animation:ct-press 1.2s ease-in-out infinite}
@keyframes ct-press{0%,60%,100%{transform:none}30%{transform:translateY(2px)}}
/* The list: the active item reads as selected */
.v3-steps[data-ct-steps] li{cursor:pointer;border-radius:14px;transition:background .25s,box-shadow .25s;outline:none}
.v3-steps[data-ct-steps] li.is-on{background:var(--v3-blue-soft,#eef3ff);box-shadow:inset 0 0 0 2px var(--v3-blue,#2f5fe0)}
.v3-steps[data-ct-steps] li:focus-visible{box-shadow:inset 0 0 0 2px var(--v3-blue,#2f5fe0)}
@media (prefers-reduced-motion:reduce){.ct-spot,.ct-rocker span,.ct-clicker,.v3-steps[data-ct-steps] li{transition:none}.ct.is-5 .ct-clicker .ct-press{animation:none}}
@media (max-width:640px){.ct{gap:10px}.ct-phone{width:min(76%,260px)}.ct-clicker{width:44px}}