Spaces:
Running
Running
| .sed-explainer { | |
| --sed-green: #76b900; | |
| --sed-panel: #111111; | |
| --sed-muted: #b3b3b3; | |
| width: 100%; | |
| margin-top: 18px; | |
| overflow: hidden; | |
| border: 1px solid #2f2f2f; | |
| border-radius: 10px; | |
| background: #000; | |
| box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); | |
| color: #fff; | |
| font-family: "NVIDIA Sans", Inter, Arial, sans-serif; | |
| } | |
| .sed-explainer__viewport { | |
| position: relative; | |
| width: 100%; | |
| aspect-ratio: 16 / 9; | |
| min-height: 260px; | |
| background: #000; | |
| } | |
| .sed-explainer canvas { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .sed-explainer__controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-height: 44px; | |
| padding: 7px 10px; | |
| border-top: 1px solid #282828; | |
| background: #0b0b0b; | |
| } | |
| .sed-explainer__button { | |
| min-width: 68px; | |
| padding: 6px 10px; | |
| border: 1px solid #4b4b4b; | |
| border-radius: 5px; | |
| background: #181818; | |
| color: #fff; | |
| font: 600 12px/1 "NVIDIA Sans", Inter, Arial, sans-serif; | |
| cursor: pointer; | |
| } | |
| .sed-explainer__button:hover, | |
| .sed-explainer__button:focus-visible { | |
| border-color: var(--sed-green); | |
| outline: none; | |
| } | |
| .sed-explainer__timeline { | |
| flex: 1; | |
| accent-color: var(--sed-green); | |
| cursor: pointer; | |
| } | |
| .sed-explainer__time { | |
| min-width: 76px; | |
| color: var(--sed-muted); | |
| font-size: 11px; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .sed-explainer__fallback { | |
| margin: 0; | |
| padding: 10px 14px; | |
| color: var(--sed-muted); | |
| background: #000; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 640px) { | |
| .sed-explainer__viewport { min-height: 210px; } | |
| .sed-explainer__controls { gap: 6px; } | |
| .sed-explainer__button { min-width: 60px; padding-inline: 7px; } | |
| .sed-explainer__time { min-width: 62px; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .sed-explainer__button[data-action="play"] { display: none; } | |
| } | |