/* Tinkerhall demo: a gear pair you can turn, reverse and slow down, with the ratio read out live. */
:root { --accent-text: #3a3ab0; --solid: #4a4ac7; --on-solid: #ffffff; --gear-a: #4a4ac7; --gear-b: #1f9ab8; --demo-shadow: 0 30px 70px rgba(0,0,0,.18); }
@media (prefers-color-scheme: dark) { :root { --accent-text: #b4b8ff; --solid: #9aa0f5; --on-solid: #121a30; --gear-a: #9aa0f5; --gear-b: #52c4dc; --demo-shadow: 0 30px 70px rgba(0,0,0,.5); } }
.card a { color: var(--accent-text); }
.demo-wrapper { position: relative; max-width: 900px; margin: -120px auto 40px; }
.demo-wrapper ~ .shot { margin-top: 0; }
.demo-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: none; text-align: center; }
@media (max-width: 640px) { .demo-wrapper { margin-top: -88px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.th-box { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 24px; padding: 28px clamp(18px, 4vw, 34px); border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--demo-shadow); }
.th-stage { flex: 1 1 320px; max-width: 440px; }
.th-stage svg { width: 100%; height: auto; display: block; }
.th-gear { transition: filter .2s; }
.th-gear.is-active { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--signal) 70%, transparent)); }
.th-mark { fill: var(--signal); }
.th-copy { flex: 1 1 260px; max-width: 340px; }
.th-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.th-desc { margin: 0 0 14px; color: var(--muted); }
.th-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.th-btn { font: inherit; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--wash); color: var(--accent-text); cursor: pointer; }
.th-btn:hover { border-color: var(--solid); }
.th-btn.primary { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.th-btn:focus-visible, .th-speed:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.th-speed-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.th-speed-row label { font-size: 14px; font-weight: 600; min-width: 48px; }
.th-speed { flex: 1; min-height: 44px; accent-color: var(--solid); }
.th-readout { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--wash); font-size: 15px; font-variant-numeric: tabular-nums; }
.th-readout strong { color: var(--accent-text); }

/* Free-model picker */
.fm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.fm-tab { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--wash); color: var(--accent-text); cursor: pointer; }
.fm-tab[aria-selected="true"] { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.fm-tab:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.fm-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.fm-panel[hidden] { display: none; }
.fm-panel img { width: 100%; height: auto; border-radius: 14px; background: #f2f2ee; }
.fm-meta { margin: 0 0 2px; font-size: 14px; color: var(--muted); }
.fm-text h3 { margin: 0 0 8px; font-size: 22px; }
.fm-facts { margin: 12px 0 0; padding: 0; list-style: none; }
.fm-facts li { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--wash); font-size: 15px; }
.fm-facts span { display: block; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .fm-panel { grid-template-columns: 1fr; } }