/* Global solid accent tokens and the automatic color cycle. */
@property --accent-ui{syntax:"<color>";inherits:true;initial-value:#f40018}
@property --accent-button{syntax:"<color>";inherits:true;initial-value:#e00016}
@property --accent-ink{syntax:"<color>";inherits:true;initial-value:#f40018}
:root{transition:none}
.play-button,.comparison-panel .comparison-play,.segment button[aria-pressed=true]:not(:disabled),.get-section .contact-cta,.service-card[data-service=synthetic] .service-cta{background:var(--accent-button);color:var(--accent-foreground);border-color:var(--accent-ui)}
.play-button .ui-icon,.segment button[aria-pressed=true]:not(:disabled) .ui-icon{filter:var(--accent-icon-filter)}
.icon-button[aria-pressed=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ui)}
.icon-button[aria-pressed=true] .ui-icon{filter:none}
.repeat-one{color:var(--accent-ink)}
.track.active{border-left-color:var(--accent-ui)}
:focus-visible,.service-card .service-cta:focus-visible,.get-section .contact-cta:focus-visible,.sales-rail a:focus-visible{outline-color:var(--accent-focus)}
.play-button,.segment button,.service-cta,.contact-cta,.icon-button,.track,.get-section::before{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,box-shadow 200ms ease,outline-color 200ms ease}
@media(hover:hover) and (pointer:fine){
 .play-button:hover,.get-section .contact-cta:hover,.service-card .service-cta:hover,.segment button[aria-pressed=true]:not(:disabled):hover{background:var(--accent-hover);color:var(--accent-foreground);border-color:var(--accent-ui)}
 .service-card[data-service=human] .service-cta:hover,.service-card[data-service=dataset] .service-cta:hover{background:var(--accent-hover);color:var(--accent-foreground);border-color:var(--accent-ui)}
}
.play-button:active,.get-section .contact-cta:active,.service-card .service-cta:active,.segment button[aria-pressed=true]:not(:disabled):active{background:var(--accent-active);color:var(--accent-foreground);border-color:var(--accent-ui)}
/* All solid accent areas follow the same slow color cycle. */
@property --accent-hover{syntax:"<color>";inherits:true;initial-value:#c50013}
@property --accent-active{syntax:"<color>";inherits:true;initial-value:#b30012}
@property --accent-focus{syntax:"<color>";inherits:true;initial-value:#ff8491}
@property --accent-soft{syntax:"<color>";inherits:true;initial-value:#f4001812}
@property --accent-faint{syntax:"<color>";inherits:true;initial-value:#f4001805}
@property --accent-tint{syntax:"<color>";inherits:true;initial-value:#f400181c}
@property --accent-border{syntax:"<color>";inherits:true;initial-value:#f4001860}
@property --accent-line{syntax:"<color>";inherits:true;initial-value:#f4001880}
:root[data-accent-mode=cycle]{transition:--accent-ui 1600ms ease,--accent-button 1600ms ease,--accent-hover 1600ms ease,--accent-active 1600ms ease,--accent-ink 1600ms ease,--accent-focus 1600ms ease,--accent-soft 1600ms ease,--accent-faint 1600ms ease,--accent-tint 1600ms ease,--accent-border 1600ms ease,--accent-line 1600ms ease}
:root[data-accent-mode=cycle] .play-button,
:root[data-accent-mode=cycle] .segment button,
:root[data-accent-mode=cycle] .service-cta,
:root[data-accent-mode=cycle] .contact-cta,
:root[data-accent-mode=cycle] .icon-button,
:root[data-accent-mode=cycle] .track,
:root[data-accent-mode=cycle] .get-section::before{transition:none}
@media(prefers-reduced-motion:reduce){:root[data-accent-mode=cycle]{transition:none}}

:root[data-theme-switching=true]{transition:none!important}