/* Direction colors are assigned by CubeRenderer's shared semantic palette. */
.hero-directions button[data-direction],
:is(#th-expert-page,#th-ivan-page) .th-face-buttons button[data-direction]{box-shadow:inset 4px 0 0 var(--direction-color);padding-left:14px}
.hero-directions button[data-direction][aria-pressed=true],
:is(#th-expert-page,#th-ivan-page) .th-face-buttons button[data-direction][aria-pressed=true]{background:rgba(var(--direction-rgb),.23);color:#131a2d;border-color:var(--direction-color)}
.hero-directions button[data-direction][aria-pressed=true]>span,
:is(#th-expert-page,#th-ivan-page) .th-face-buttons button[data-direction][aria-pressed=true]>span{color:#131a2d}
.hero-directions button[data-direction]:hover,
:is(#th-expert-page,#th-ivan-page) .th-face-buttons button[data-direction]:hover{background:rgba(var(--direction-rgb),.14)}
.direction-tabs button[data-direction]{border-bottom-color:var(--direction-color);padding-inline:8px}
.direction-tabs button[data-direction][aria-pressed=true]{color:#131a2d;background:rgba(var(--direction-rgb),.23);border-bottom-color:var(--direction-color)}
#topic-grid[data-direction] .topic-cell[aria-pressed=true]{color:#131a2d;background:rgba(var(--direction-rgb),.23);border-color:var(--direction-color);box-shadow:inset 0 0 0 1px var(--direction-color)}
#topic-grid[data-direction] .topic-cell[aria-pressed=true] .topic-index,
#topic-grid[data-direction] .topic-cell[aria-pressed=true] .topic-index i{color:#131a2d}