/* finesse · component: course-story · register=brand · tokens inherited from website */
course-story { display: block; position: relative; width: 100%; background: #000; color: var(--foreground, #fff); }
course-story canvas { display: block; width: 100%; height: auto; aspect-ratio: 600 / 650; }
course-story .story-controls { display: flex; align-items: center; gap: 10px; padding: 0 20px 10px; color: #aaa; font: 11px var(--sans, sans-serif); }
course-story button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #bbb; font: inherit; cursor: pointer; white-space: nowrap; }
course-story button:active { transform: translateY(1px); background: #171717; }
course-story button:focus-visible, course-story input:focus-visible { outline: 2px solid var(--brand, #ff8a1f); outline-offset: 3px; }
@media (hover: hover) { course-story button:hover { color: #fff; background: #141414; } }
course-story input { flex: 1; min-width: 30px; height: 24px; accent-color: var(--brand, #ff8a1f); cursor: pointer; }
course-story output { width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
course-story .story-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
course-story .story-error { color: #bcbcbc; font-size: 12px; text-align: center; padding: 8px; margin: 0; }
.feature-visual:has(course-story) { background: #000; display: flex; align-items: center; border-radius: 0; }
@media (max-width: 400px) { course-story .story-controls { padding-inline: 8px; gap: 3px; } }
@media (prefers-reduced-motion: reduce) { course-story *, course-story *::before { animation: none !important; transition: none !important; } }