/* 08 Technology, concept B (mockup). One dark page block with three stations that take turns
   being live: commentary as a sound wave, Sportinho as the Signal sphere, tracking as a route. */
body { margin: 0; background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
.tb__note { margin: 0; padding: 14px 24px; font-family: var(--mono); font-size: 13px; color: var(--slate); }
.tb { --bg: #0d1018; --panel: #141824; --edge: rgba(255, 255, 255, 0.08); --txt: #eef1f7; --mute: rgba(238, 241, 247, 0.55); background: var(--bg); color: var(--txt); }
.tb__inner { box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-rows: auto 1fr; gap: clamp(28px, 5vh, 48px); }
/* The mockup page draws the block itself; in the deck, .page and .block do it. */
.tb--mock { box-sizing: border-box; min-height: calc(100vh - 48px); margin: 0 12px 12px; padding: clamp(40px, 6vh, 72px) 0 clamp(32px, 5vh, 56px); border-radius: 32px; }

/* Heading: page number and chapter, title, and the sound switch on the right. */
.tb__head { display: grid; gap: 12px; }
.tb__idx { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 14px; color: var(--mute); }
.tb__idx b { font-family: var(--display); font-stretch: var(--display-stretch); font-weight: 800; font-size: 22px; line-height: 1; color: #6f97ff; }
.tb__idx span { padding-left: 12px; border-left: 1px solid var(--edge); font-weight: 600; color: var(--txt); }
.tb__idx em { font-style: normal; }
.tb__title { margin: 0; font-family: var(--display); font-stretch: var(--display-stretch); font-weight: 800; font-size: clamp(32px, 3vw, 46px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.tb__title em { font-style: normal; color: #6f97ff; }

/* Stations: three panels; the live one is bright, the others rest. Under each visual a fixed
   one-line title and one-line description, and a play button on the two voice stations. */
.tb__stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.st { display: grid; grid-template-rows: 1fr auto; gap: 16px; padding: 16px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); opacity: 0.55; transition: opacity 600ms ease-out, box-shadow 600ms ease-out; }
.st.is-live { opacity: 1; box-shadow: inset 0 0 0 1px rgba(111, 151, 255, 0.45); }
.st__stage { position: relative; min-height: clamp(240px, 38vh, 380px); border-radius: 14px; background: #0a0d14; overflow: hidden; }
.st__live { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(111, 151, 255, 0.14); font: 500 11px/1.4 var(--mono); color: #9db7ff; opacity: 0; transition: opacity 300ms ease-out; }
.st__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6f97ff; animation: st-blink 1.2s ease-in-out infinite; }
.st.is-live .st__live { opacity: 1; }
@keyframes st-blink { 50% { opacity: 0.25; } }
.st__wave, .st__sphere { position: absolute; inset: 0; width: 100%; height: 100%; }
.st__sphere { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.st__foot { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.st__words { flex: 1; min-width: 0; display: grid; gap: 4px; }
.st__name { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st__text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st__play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #2f5ff5; color: #fff; cursor: pointer; transition: transform 160ms ease-out, background-color 200ms ease-out; }
.st__play:hover { background: #4472ff; }
.st__play:active { transform: scale(0.97); }
.st__play:focus-visible { outline: 2px solid #9db7ff; outline-offset: 2px; }
.st__play .st__i-pause, .st__play[aria-pressed="true"] .st__i-play { display: none; }
.st__play[aria-pressed="true"] .st__i-pause { display: block; }

/* Tracking: a quiet street plan, the route draws itself and a dot runs it. */
.st__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.st__grid path { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.st__streets { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 6; stroke-linecap: round; }
.st__route { fill: none; stroke: #6f97ff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.st__dot { fill: #fff; stroke: #6f97ff; stroke-width: 3; }
.st__stats { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; gap: 22px; margin: 0; font-size: 14px; font-weight: 500; color: var(--mute); }
.st__stats b { font-family: var(--display); font-stretch: var(--display-stretch); font-weight: 800; font-size: 22px; color: var(--txt); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { .tb__stations { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .st, .st__live { transition: none; } .st__live::before { animation: none; } }