/* Presentation-only affordances. The underlying controls and audio remain the Studio's. */
.example-header{display:flex;align-items:center;gap:10px;padding:0 12px;background:#131518;border-bottom:1px solid #292c31;flex-shrink:0;font:500 14px Archivo_500Medium,Arial,sans-serif;color:#ebe7dd}
.example-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The field on top is one dark surface: its header lies over the animation and carries no
   ground of its own, so the window reads as animation with a name on it — no bar, and no
   strip of empty ground between the name and the thing it names. */
.visual-header{position:absolute;top:0;left:0;right:0;z-index:2;background:transparent;border-bottom:0}
.visual-surface{position:relative;display:flex;cursor:crosshair;background:#0a0b0d;outline:none}
.visual-surface:hover{box-shadow:inset 0 0 0 1px #ffffff15}.visual-surface:focus-visible{outline:2px solid #ebe7dd;outline-offset:-3px}.visual-surface:active{box-shadow:inset 0 0 0 2px #ffffff28}
.example-next{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:#b9bbc2;font:400 12px Archivo_400Regular,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.example-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.example-next:hover{background:#25272d;color:#fff}.example-next:active{background:#353840}.example-next:focus-visible{outline:2px solid #ebe7dd;outline-offset:-2px}
.example-header .live-play{min-height:36px}
@media(max-width:699px){.example-header{padding:0 10px;gap:4px}.instrument-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 46px}.instrument-header .live-play{grid-column:1/-1;min-height:44px}.example-name{font-size:14px}.example-next{font-size:11px;padding:0 6px}.example-next svg{width:14px}.visual-header .example-next{min-width:110px}}
.capsule-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:48px 24px;color:#ebe7dd;font:16px Arial,sans-serif;background:#0a0b0d;min-height:500px;text-align:center}
.capsule-loading p{margin:0}
/* The Bildmarke: the outline from the brand, one law in packages/brand/src/intro.json.
   Its own class — the launch overlay injects .m-mark rules of its own into this page. */
.capsule-mark{display:block;fill:#ebe7dd;flex:none;width:132px;height:132px}
.capsule-mark-small{width:22px;height:22px}
/* A capsule takes as long as it takes; the mark pulses from near-dark to a soft 60% paper
   tone rather than pretending to a percentage. Timing and curve: packages/brand intro.json. */
.capsule-mark-waiting{animation:capsule-waiting 2400ms cubic-bezier(0.4,0,0.2,1) infinite}
@keyframes capsule-waiting{0%,100%{opacity:.1}50%{opacity:.6}}
.capsule-download{color:#ebe7dd;font:13px Arial,sans-serif;text-underline-offset:4px;padding:12px 4px;white-space:nowrap}
.capsule-download:hover{color:#fff}.capsule-download:focus-visible{outline:2px solid #ebe7dd;outline-offset:2px}
.live-play{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:30px;padding:5px 12px;border:1px solid #ebe7dd;border-radius:5px;background:#ebe7dd;color:#0a0b0d;font:500 13px Archivo_500Medium,Arial,sans-serif;cursor:pointer;white-space:nowrap;transition:background .18s,box-shadow .18s}
.live-play:hover{background:#fff;box-shadow:0 0 0 3px #ffffff12}.live-play:active{transform:translateY(1px)}.live-play:focus-visible{outline:2px solid #ebe7dd;outline-offset:3px}.live-play svg{width:12px;height:12px;fill:currentColor;flex:none}
.live-play[aria-pressed=true]{background:transparent;border-color:#65666a;color:#ebe7dd}.live-play[aria-pressed=true] svg{color:#ff5a1f}
.live-play-cue{animation:play-invitation 2.4s ease-in-out 3}
.start-cue{position:absolute;pointer-events:none;z-index:2;border:1.5px solid #f8f4e8;border-radius:5px;animation:play-invitation 2.4s ease-in-out 3}
@keyframes play-invitation{0%,100%{box-shadow:0 0 0 0 #ebe7dd00}50%{box-shadow:0 0 0 5px #ebe7dd26}}
.audio-monitor{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;color:#ebe7dd;background:#0a0b0d;font-family:Archivo_400Regular,Arial,sans-serif}
.audio-monitor canvas{display:block;width:100%;flex:1;min-height:0}
.monitor-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 16px 18px;padding-top:12px;border-top:1px solid #292c31}
.monitor-values>div{display:flex;flex-direction:column;gap:6px}.monitor-values span{font-size:11px;color:#9b9da3}.monitor-values small{font-size:10px;margin-left:3px}.monitor-values output{font:400 22px/1.15 IBMPlexMono_400Regular,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.05em}
@media(prefers-reduced-motion:reduce){.live-play-cue,.start-cue{animation:none}.live-play{transition:none}.capsule-mark-waiting{animation:none;opacity:.6}}
@media(max-width:699px){.live-play{min-height:40px;padding:7px 12px}.capsule-download{min-height:44px;display:flex;align-items:center}.capsule-loading .capsule-mark{width:104px;height:104px}}