/* =========================================================
   Shared playground building blocks: puppets, scenes,
   cast/scene pickers, sponsor tool bar, AI "agent at work" panel.
   Module-specific styles live in film.css / grow.css / game.css / studio.css / labs.css.
   ========================================================= */

/* ---------- puppet (animated SVG character) ---------- */
.pup { position: relative; display: inline-block; width: 100px; aspect-ratio: 120 / 218; }
.pup .flip { width: 100%; height: 100%; transition: transform 0.35s; }
.pup svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pup .rig { transform-origin: 60px 190px; animation: pupBreathe 3.2s ease-in-out infinite; }
.pup .head { transform-origin: 60px 88px; transition: transform 0.4s; }
.pup svg g { transform-box: view-box; }
.pup .arm.f { transform-origin: 84px 96px; transition: transform 0.35s; }
.pup .arm.b { transform-origin: 36px 96px; transition: transform 0.35s; }
.pup .leg.l { transform-origin: 51px 140px; }
.pup .leg.r { transform-origin: 68px 140px; }
.pup .mouth-o { opacity: 0; }
.pup .eyes { transform-origin: 60px 58px; animation: pupBlink var(--blink, 3.4s) infinite; }
.pup.talking .mouth { opacity: 0; }
.pup.talking .mouth-o { animation: pupTalk 0.22s infinite alternate; }
.pup.walking .leg.l { animation: pupStep 0.5s ease-in-out infinite alternate; }
.pup.walking .leg.r { animation: pupStep 0.5s ease-in-out infinite alternate-reverse; }
.pup.walking .arm.f { animation: pupStep 0.5s ease-in-out infinite alternate-reverse; }
.pup.walking .arm.b { animation: pupStep 0.5s ease-in-out infinite alternate; }
.pup.walking .rig { animation: pupBounce 0.25s ease-in-out infinite alternate; }
.pup.g-wave .arm.f { animation: pupWave 0.5s ease-in-out 4 alternate; transform: rotate(-150deg); }
.pup.g-point .arm.f { transform: rotate(-80deg); }
.pup.g-raise .arm.f, .pup.g-raise .arm.b { transform: rotate(-165deg); }
.pup.g-raise .arm.b { transform: rotate(165deg); }
.pup.g-out .arm.f { transform: rotate(-45deg); }
.pup.g-out .arm.b { transform: rotate(45deg); }
.pup.g-cross .arm.f { transform: rotate(55deg) translate(-6px, 0); }
.pup.g-cross .arm.b { transform: rotate(-55deg) translate(6px, 0); }
.pup.g-shrug .arm.f { transform: rotate(-30deg); }
.pup.g-shrug .arm.b { transform: rotate(30deg); }
.pup.g-shrug .head { transform: translateY(4px); }
.pup.g-slump .rig { transform: translateY(6px) scaleY(0.96); animation: none; }
.pup.g-jump .rig { animation: pupJump 0.6s ease 2; }
.pup.g-nod .head { animation: pupNod 0.4s ease 3; }
.pup.shocked .rig { animation: pupShake 0.4s 2; }
@keyframes pupBreathe { 50% { transform: scaleY(1.012) translateY(-1px); } }
@keyframes pupBlink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes pupTalk { from { opacity: 1; transform: scaleY(0.35); transform-origin: 60px 77px; } to { opacity: 1; transform: scaleY(1); transform-origin: 60px 77px; } }
@keyframes pupStep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes pupBounce { to { transform: translateY(-3px); } }
@keyframes pupWave { from { transform: rotate(-120deg); } to { transform: rotate(-170deg); } }
@keyframes pupJump { 40% { transform: translateY(-26px); } }
@keyframes pupNod { 50% { transform: rotate(8deg) translateY(2px); } }
@keyframes pupShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- scene backdrop ---------- */
.scene-host { position: relative; overflow: hidden; background: #0b0f1f; }
.scene-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-bg .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wx i { position: absolute; top: -10%; display: block; }
.wx-rain i { width: 2px; height: 26px; background: linear-gradient(transparent, rgba(200, 220, 255, 0.75)); animation: wxFall linear infinite; }
.wx-snow i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.85; animation: wxSnow linear infinite; }
.wx-fog i { left: -40% !important; width: 180%; height: 26%; background: radial-gradient(closest-side, rgba(220, 230, 255, 0.28), transparent); animation: wxFog ease-in-out infinite alternate; }
.wx-fireflies i { width: 6px; height: 6px; border-radius: 50%; background: #e9ff8a; box-shadow: 0 0 12px 3px rgba(233, 255, 138, 0.8); top: auto; bottom: 10%; animation: wxFly ease-in-out infinite alternate; }
.wx-embers i { width: 5px; height: 5px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 10px 2px rgba(255, 140, 50, 0.8); top: auto; bottom: -5%; animation: wxRise linear infinite; }
@keyframes wxFall { to { transform: translate(-60px, 120vh); } }
@keyframes wxSnow { to { transform: translate(40px, 110vh) rotate(360deg); } }
@keyframes wxFog { from { transform: translateX(-10%); } to { transform: translateX(10%); } }
@keyframes wxFly { 0% { transform: translate(0, 0); opacity: 0.2; } 50% { opacity: 1; } 100% { transform: translate(60px, -160px); opacity: 0.3; } }
@keyframes wxRise { to { transform: translate(30px, -110vh); opacity: 0; } }

/* ---------- cast / scene pickers ---------- */
.pick-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.pc { --c: var(--film); position: relative; cursor: pointer; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); padding: 12px 12px 14px; text-align: center; font: inherit; color: inherit; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.pc.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset, 0 10px 34px color-mix(in srgb, var(--c) 25%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--panel2)), var(--panel)); }
.pc .pc-fig { width: 100%; height: 150px; display: flex; justify-content: center; align-items: flex-end; border-radius: 12px; background: radial-gradient(80px 40px at 50% 92%, color-mix(in srgb, var(--c) 30%, transparent), transparent), rgba(255, 255, 255, 0.03); margin-bottom: 6px; }
.pc .pc-fig .pup { width: 76px; }
.pc h4 { margin: 0; font-size: 16px; }
.pc .role { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--c); letter-spacing: 0.08em; text-transform: uppercase; }
.pc p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pc .n { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #0a0d1a; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.pc .yours { position: absolute; top: 8px; right: 8px; font-size: 10px; font-family: "JetBrains Mono", monospace; padding: 2px 7px; border-radius: 99px; background: rgba(182, 255, 92, 0.15); color: var(--grow); }
.pc.new { border-style: dashed; justify-content: center; min-height: 230px; }
.pc.new .plus { font-size: 34px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); margin-bottom: 8px; }
.sc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.scc { --c: var(--film); cursor: pointer; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--panel); padding: 0; font: inherit; color: inherit; text-align: left; transition: transform 0.15s, border-color 0.15s; }
.scc:hover { transform: translateY(-3px); }
.scc.on { border-color: var(--c); box-shadow: 0 0 0 2px var(--c); }
.scc .thumb { position: relative; height: 104px; }
.scc .thumb .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scc b { display: block; padding: 8px 12px 0; font-size: 14px; }
.scc small { display: block; padding: 0 12px 10px; color: var(--muted); font-size: 12px; }
.scc .n { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #0a0d1a; font-weight: 700; display: grid; place-items: center; font-size: 12px; z-index: 2; }

/* ---------- sponsor tool bar (in every track) ---------- */
.toolbar-sp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 23, 47, 0.6); }
.toolbar-sp .lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--muted); margin-right: 4px; }
.sp-tog { --c: var(--gold); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; }
.sp-tog:hover { border-color: var(--c); color: var(--text); }
.sp-tog.on { border-color: var(--c); color: #0a0d1a; background: var(--c); font-weight: 700; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.sp-tog small { font-size: 11px; opacity: 0.8; font-weight: 400; }
.sp-hint { font-size: 12.5px; color: var(--muted); flex-basis: 100%; margin-top: 2px; }
.sp-hint b { color: var(--text); }
.sp-badge { --c: var(--gold); display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap; }

/* ---------- "agent at work" panel for AI generation ---------- */
.ai-work { border: 1px solid rgba(164, 107, 255, 0.45); background: linear-gradient(180deg, rgba(164, 107, 255, 0.1), rgba(16, 23, 47, 0.6)); border-radius: 14px; padding: 14px 16px; }
.ai-work ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ai-work li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.ai-work li.on { color: var(--text); }
.ai-work li.done { color: #cfe9b8; }
.ai-work li i { font-style: normal; width: 20px; flex: none; text-align: center; }
.ai-work li.on i { animation: think 0.9s infinite; }
.ai-work .why { margin-top: 10px; font-size: 13px; color: #c9b8ff; font-style: italic; }
.ai-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-row textarea, .ai-row input { flex: 1; min-width: 220px; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ex-chips button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 99px; border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.ex-chips button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.btn.ai { background: linear-gradient(90deg, #a46bff, #ff4fa3); }

/* tabs */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); flex-wrap: wrap; }
.tabs button { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 99px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.tabs button.on { background: var(--text); color: #0a0d1a; font-weight: 700; }

/* range */
input[type="range"] { padding: 0; accent-color: var(--film); background: none; border: 0; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row output { font-family: "JetBrains Mono", monospace; font-weight: 700; min-width: 3ch; font-size: 18px; }

/* ---------- playground landing ---------- */
.pl-hero { margin-top: 18px; }
.pl-stage { position: relative; height: 470px; border-radius: 24px; border: 1px solid var(--line); overflow: hidden; }
.pl-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 10, 20, 0.92) 0%, rgba(7, 10, 20, 0.7) 42%, rgba(7, 10, 20, 0) 75%); z-index: 1; }
.pl-copy { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: min(620px, 100%); padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.pl-copy h1 { font-size: clamp(34px, 5vw, 58px); margin: 0 0 12px; }
.pl-copy h1 em { font-style: normal; background: linear-gradient(90deg, var(--film), #a46bff, var(--game)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-copy .lead { color: #d3d9f5; font-size: 18px; margin: 0 0 22px; }
.pl-actor { position: absolute; bottom: 3%; z-index: 2; animation: plIn 0.9s var(--d) both cubic-bezier(.2,.8,.2,1); }
.pl-pup .pup { width: 112px; }
@keyframes plIn { from { transform: translateY(40px); opacity: 0; } }
.pl-actor:nth-child(1) { left: 47%; } .pl-actor:nth-child(2) { left: 56%; } .pl-actor:nth-child(3) { left: 65%; }
.pl-actor:nth-child(4) { left: 74%; } .pl-actor:nth-child(5) { left: 83%; } .pl-actor:nth-child(6) { left: 91%; }
@media (max-width: 760px) {
  .pl-stage { height: 580px; } .pl-copy { justify-content: flex-start; padding: 28px 22px; }
  .pl-stage::after { background: linear-gradient(180deg, rgba(7, 10, 20, 0.94) 45%, rgba(7, 10, 20, 0.1)); }
  .pl-pup .pup { width: 70px; }
  .pl-actor:nth-child(1) { left: 0%; } .pl-actor:nth-child(2) { left: 16%; } .pl-actor:nth-child(3) { left: 32%; }
  .pl-actor:nth-child(4) { left: 48%; } .pl-actor:nth-child(5) { left: 64%; } .pl-actor:nth-child(6) { left: 80%; }
}
.pick-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 1000px) { .pick-grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pick-grid4 { grid-template-columns: 1fr; } }
.pick-grid4 .pick { padding: 22px; }
.pick-grid4 .pick h2 { font-size: 22px; }
.pick-grid4 .pick p { font-size: 14px; }
.labs-link { display: flex; gap: 16px; align-items: center; margin-top: 14px; text-decoration: none; border-left: 3px solid var(--gold); }
.labs-link > span:first-child { font-size: 36px; }
.labs-link p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.labs-link .go { margin-left: auto; font-weight: 700; color: var(--gold); white-space: nowrap; }

/* provider picker in the banner (OpenAI | AdaL) */
.mb-txt { flex: 1; min-width: 220px; }
.mb-pick { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.prov { display: inline-flex; align-items: center; gap: 6px; }
.prov small { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.prov-seg { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); }
.prov-seg button { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 99px; border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.prov-seg button.on { background: var(--text); color: #0a0d1a; font-weight: 700; }
.prov-seg button:disabled { opacity: 0.4; cursor: not-allowed; }

.prov-note { flex-basis: 100%; font-size: 12.5px; color: var(--gold); }
.adal-st { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.adal-st.ok { color: var(--grow); border-color: rgba(182, 255, 92, 0.45); }
.adal-st.warm { color: var(--gold); border-color: rgba(255, 200, 87, 0.45); white-space: normal; }
.adal-st.bad { color: #ff9b9b; border-color: rgba(255, 107, 107, 0.45); white-space: normal; }
.adal-st a { color: inherit; font-weight: 700; }

/* =========================================================
   TOOLS LIVE: sponsor tools made visible on the stage
   ========================================================= */
.tl-sticky { position: sticky; top: 64px; z-index: 35; }
.toolbar-sp.live { background: rgba(10, 14, 30, 0.92); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); padding: 8px 12px; }
.toolbar-sp.live .lbl { color: var(--grow); }
.toolbar-sp.live .sp-hint { font-size: 12px; }
.tl-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-link { transition: opacity 0.6s; }
.tl-link.gone { opacity: 0; }
.tl-dash-anim { animation: tlDash 0.6s linear infinite; }
@keyframes tlDash { to { stroke-dashoffset: -14; } }
.tl-link-t { font: 700 12px "Space Grotesk", sans-serif; paint-order: stroke; stroke: rgba(5, 8, 20, 0.85); stroke-width: 4px; }
.tl-left { position: absolute; top: 46px; left: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: min(44%, 320px); }
.tl-hud { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tl-chip { --tc: #ffc857; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px 4px 8px; border-radius: 99px; background: rgba(5, 8, 20, 0.82); border: 1.5px solid var(--tc); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 45%, transparent); }
.tl-chip b { color: var(--tc); }
.tl-chip i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #dfe5ff; }
.tl-chip.pulse { animation: tlPulse 0.7s ease; }
@keyframes tlPulse { 40% { transform: scale(1.12); box-shadow: 0 0 26px var(--tc); } }
.tl-ticker { display: flex; flex-direction: column; gap: 4px; }
.tl-ticker > div:nth-child(n+3) { display: none; }
.tl-ticker > div { --tc: #ffc857; font-size: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(5, 8, 20, 0.78); border-left: 3px solid var(--tc); color: #eef1ff; animation: tlIn 0.35s ease; transition: opacity 0.6s; }
.tl-ticker > div span { margin-right: 6px; }
.tl-ticker > div.old { opacity: 0.45; }
@keyframes tlIn { from { transform: translateX(-12px); opacity: 0; } }
.tl-callout { --tc: #ffc857; position: absolute; transform: translate(-50%, -100%); max-width: 260px; padding: 7px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 88%, #000); color: #0a0d1a; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--tc) 60%, transparent); animation: tlPop 0.4s cubic-bezier(.2, 1.6, .4, 1); transition: opacity 0.6s, transform 0.6s; z-index: 2; }
.tl-callout small { display: block; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em; opacity: 0.75; }
.tl-callout::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: color-mix(in srgb, var(--tc) 88%, #000); }
.tl-callout.gone { opacity: 0; transform: translate(-50%, -130%); }
@keyframes tlPop { from { transform: translate(-50%, -80%) scale(0.6); opacity: 0; } }
.tl-ring { filter: drop-shadow(0 0 10px var(--tc, #ffc857)) drop-shadow(0 0 3px var(--tc, #ffc857)); }
.tl-ring::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 110%; height: 18px; transform: translateX(-50%); border-radius: 50%; border: 3px solid var(--tc, #ffc857); box-shadow: 0 0 18px var(--tc, #ffc857); animation: tlRing 0.9s ease-in-out 3; pointer-events: none; }
@keyframes tlRing { 50% { transform: translateX(-50%) scale(1.15); opacity: 0.55; } }
.tl-right { position: absolute; top: 46px; right: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: 46%; }
.tl-dash { width: 190px; opacity: 0.94; padding: 8px 10px; border-radius: 12px; background: rgba(5, 8, 20, 0.86); border: 1px solid color-mix(in srgb, #ffc857 55%, transparent); font-size: 11.5px; color: #dfe5ff; }
.tl-dash-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--tc); margin-bottom: 4px; }
.tl-dash .k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px; }
.tl-dash .k div { text-align: center; background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 3px 2px; }
.tl-dash .k b { display: block; font-size: 15px; color: #fff; }
.tl-dash .k small { font-size: 9.5px; color: var(--muted); }
.tl-dash .tl-bars > div:nth-child(n+5) { display: none; }
.tl-bars > div { display: grid; grid-template-columns: 62px 1fr 22px; gap: 5px; align-items: center; margin: 2px 0; }
.tl-bars span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-bars i { display: block; height: 7px; border-radius: 4px; transition: width 0.5s; }
.tl-bars b { text-align: right; font-family: "JetBrains Mono", monospace; font-size: 10.5px; }
.tl-spark { width: 100%; height: 30px; display: block; margin-top: 4px; }
.tl-strip { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tl-strip figure { margin: 0; width: 84px; border-radius: 8px; overflow: hidden; border: 2px solid #c48bff; background: #000; box-shadow: 0 0 16px rgba(196, 139, 255, 0.5); animation: tlIn 0.4s ease; }
.tl-strip img, .tl-strip svg { display: block; width: 100%; height: 48px; object-fit: cover; }
.tl-strip figcaption { font-size: 9.5px; padding: 2px 4px; color: #fff; background: rgba(196, 139, 255, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .tl-left { top: 40px; left: 6px; max-width: 58%; } .tl-hud { gap: 4px; } .tl-chip { font-size: 10.5px; padding: 2px 8px 2px 6px; }
  .tl-right { top: 40px; right: 6px; } .tl-dash { width: 140px; font-size: 10px; } .tl-dash .tl-bars, .tl-dash .tl-spark { display: none; }
  .tl-ticker > div:nth-child(n+2) { display: none; }
  .tl-strip figure { width: 56px; } .tl-strip img, .tl-strip svg { height: 38px; }
  .tl-callout { font-size: 11px; max-width: 180px; }
}

/* Finch skills */
.sk-badge { --sk: #ff9f43; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--sk); color: var(--sk); background: color-mix(in srgb, var(--sk) 14%, rgba(5, 8, 20, 0.7)); white-space: nowrap; cursor: help; font-family: inherit; }
.sk-badge.pick { cursor: pointer; pointer-events: auto; }
.sk-badge.pick::after { content: "▾"; font-size: 9px; opacity: 0.7; }
.sk-badge.used { animation: skUsed 1s ease 2; }
@keyframes skUsed { 50% { background: var(--sk); color: #0a0d1a; box-shadow: 0 0 18px var(--sk); } }
.sk-modal { max-width: 760px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.sk-card { --sk: #ff9f43; text-align: left; font: inherit; color: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.15s, transform 0.15s; }
.sk-card:hover { border-color: var(--sk); transform: translateY(-2px); }
.sk-card.on { border-color: var(--sk); box-shadow: 0 0 0 1px var(--sk) inset; background: color-mix(in srgb, var(--sk) 12%, transparent); }
.sk-card .sk-i { font-size: 22px; }
.sk-card b { font-size: 14px; color: var(--sk); }
.sk-card b em { font-style: normal; font-size: 10px; color: var(--grow); margin-left: 4px; }
.sk-card small { color: #c9d0ee; font-size: 12px; }
.sk-card i { font-style: normal; font-size: 11px; color: var(--muted); }
.sk-assign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; }
.sk-assign > span { color: var(--muted); }
.sk-assign .sk-who { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 700px) {
  .tl-sticky { position: static; }
  .toolbar-sp.live .sp-hint { display: none; }
  .tl-ticker { display: none; }
  .tl-chip b { display: none; }
  .tl-dash { width: 112px; padding: 5px 6px; } .tl-dash .k { grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0; } .tl-dash .k b { font-size: 12px; } .tl-dash .k small, .tl-dash > small { display: none; }
  .tl-strip figure:nth-child(n+3) { display: none; }
}

/* keep the stage readable when several tools are on: compact right-hand overlays, expand on hover */
.tl-right { max-width: 30%; pointer-events: auto; }
.tl-dash { width: 150px; padding: 6px 8px; opacity: 0.9; transition: width 0.25s, opacity 0.25s; }
.tl-dash .k { margin-bottom: 0; }
.tl-dash .k b { font-size: 13px; }
.tl-dash .tl-bars, .tl-dash .tl-spark, .tl-dash > small { display: none; }
.tl-right:hover .tl-dash { width: 200px; opacity: 1; }
.tl-right:hover .tl-dash .tl-bars, .tl-right:hover .tl-dash .tl-spark { display: block; }
.tl-right:hover .tl-dash .tl-bars { display: block; }
.tl-strip { flex-wrap: nowrap; gap: 4px; }
.tl-strip figure { width: 54px; border-width: 1.5px; }
.tl-strip img, .tl-strip svg { height: 32px; }
.tl-strip figcaption { font-size: 9px !important; }
.tl-left { max-width: min(36%, 280px); }
.tl-ticker > div { font-size: 11.5px; }