html.hx-view-kodu:not(#hx_) { --hx-accent: var( --hx-accent-kodu, #764452 ); --hx-tint: var( --hx-tint-kodu, #F6F1EA ); }
html.hx-view-ari:not(#hx_)  { --hx-accent: var( --hx-accent-ari, #764452 );  --hx-tint: var( --hx-tint-ari, #EEF2F8 ); }
.hx-switch:not(#hx_) {
--sw-h:   44px;
--sw-pad: 4px;
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
padding: var( --sw-pad );
border-radius: 999px;
background: var( --hx-tint, #F6F1EA );
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .06 );
isolation: isolate;
font-family: inherit;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
transition: background-color .4s;
}
.hx-switch--full:not(#hx_) { display: grid; width: 100%; }
.hx-switch--l:not(#hx_)    { --sw-h: 52px; --sw-pad: 5px; }
.hx-switch--sm:not(#hx_)   { --sw-h: 34px; }
.hx-switch--sm:not(#hx_) .hx-switch__btn { padding: 0 12px !important; font-size: 13px !important; }
.hx-switch--sm:not(#hx_) .hx-switch__ico { width: 16px; height: 16px; }
.hx-switch__pill:not(#hx_) {
position: absolute;
top: var( --sw-pad );
bottom: var( --sw-pad );
left: var( --sw-pad );
z-index: -1;
width: calc( 50% - var( --sw-pad ) );
border-radius: 999px;
background: var( --hx-accent, #764452 );
box-shadow: 0 4px 12px rgba( 0, 0, 0, .14 ), inset 0 1px 0 rgba( 255, 255, 255, .18 );
transition: transform .5s cubic-bezier( .3, 1.3, .5, 1 ), background-color .4s;
}
html.hx-view-ari:not(#hx_) .hx-switch__pill { transform: translateX( 100% ); }
.hx-switch:not(#hx_) .hx-switch__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
height: var( --sw-h );
margin: 0;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: transparent !important;
box-shadow: none;
color: var( --helix-ink, #1C1C1C ) !important;
font: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: color .3s, opacity .3s;
}
.hx-switch--l:not(#hx_) .hx-switch__btn { font-size: 16px; padding: 0 26px; }
.hx-switch:not(#hx_) .hx-switch__btn:not( [aria-pressed="true"] ):hover { opacity: .7; }
html.hx-view-kodu:not(#hx_) .hx-switch .hx-switch__btn[data-view="kodu"],
html.hx-view-ari:not(#hx_)  .hx-switch .hx-switch__btn[data-view="ari"] { color: #fff !important; }
.hx-switch__ico:not(#hx_) {
width: 18px;
height: 18px;
flex: 0 0 auto;
transition: transform .5s cubic-bezier( .3, 1.6, .5, 1 );
} html.hx-view-kodu:not(#hx_) .hx-switch__btn[data-view="kodu"] .hx-switch__ico,
html.hx-view-ari:not(#hx_)  .hx-switch__btn[data-view="ari"] .hx-switch__ico { transform: scale( 1.12 ); }
.hx-switch.is-changing:not(#hx_) .hx-switch__btn[aria-pressed="true"] .hx-switch__ico { animation: hx-sw-hop .5s cubic-bezier( .3, 1.6, .5, 1 ); }
@keyframes hx-sw-hop {
0%   { transform: translateY( 0 ) scale( 1 ); }
40%  { transform: translateY( -4px ) scale( 1.18 ); }
100% { transform: translateY( 0 ) scale( 1.12 ); }
}
.hx-switch:not(#hx_) .hx-switch__btn:focus-visible {
outline: 2px solid var( --hx-accent, #764452 );
outline-offset: 2px;
}
@media ( max-width: 480px ) {
.hx-switch:not(#hx_) .hx-switch__btn { padding: 0 16px; font-size: 14px; }
} .helix-view.hx-view-enter:not(#hx_) { animation: hx-view-in .35s ease both; }
@keyframes hx-view-in {
from { opacity: 0; transform: translateY( 8px ); }
to   { opacity: 1; transform: none; }
} .helix-switch:not(#hx_) {
position: relative;
display: inline-flex;
align-items: center;
column-gap: 4px;
padding: 4px;
border-radius: 999px;
background: var( --hx-tint, #F6F1EA );
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .06 );
line-height: 1;
user-select: none;
isolation: isolate;
}
.helix-switch__pill:not(#hx_) {
position: absolute;
top: 4px;
left: 0;
z-index: -1;
height: calc( 100% - 8px );
width: 0;
border-radius: 999px;
background: var( --hx-accent, #764452 );
box-shadow: 0 4px 12px rgba( 0, 0, 0, .14 );
transition: transform .45s cubic-bezier( .3, 1.3, .5, 1 ), width .45s cubic-bezier( .3, 1.3, .5, 1 );
pointer-events: none;
}
.helix-switch:not( .is-ready ):not(#hx_) .helix-switch__pill { opacity: 0; }
.helix-switch:not(#hx_) .helix-switch__btn {
position: relative;
z-index: 1;
margin: 0;
padding: 12px 22px;
border: 0;
border-radius: 999px;
background: transparent !important;
box-shadow: none;
color: var( --helix-ink, #1C1C1C ) !important;
font: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: color .25s;
}
.helix-switch:not(#hx_) .helix-switch__btn.helix-active { color: #fff !important; }
.helix-switch:not(#hx_) .helix-switch__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media ( max-width: 500px ) {
.helix-switch:not(#hx_) { display: flex; width: 100%; box-sizing: border-box; }
.helix-switch:not(#hx_) .helix-switch__btn {
flex: 1 1 0;
min-width: 0;
padding: 12px 8px;
font-size: 14px;
text-align: center;
}
}
@media ( prefers-reduced-motion: reduce ) {
.hx-switch__pill:not(#hx_),
.helix-switch__pill:not(#hx_),
.hx-switch__ico:not(#hx_) { transition: none; }
.helix-view.hx-view-enter:not(#hx_),
.hx-switch.is-changing:not(#hx_) .hx-switch__btn[aria-pressed="true"] .hx-switch__ico { animation: none; }
} html.hx-page-bg:not(#hx_) body { transition: background-color .5s ease; }
html.hx-page-bg.hx-view-kodu:not(#hx_) body { background-color: var( --hx-page-kodu, #FBF8F3 ); }
html.hx-page-bg.hx-view-ari:not(#hx_) body  { background-color: var( --hx-page-ari, #F2F5F9 ); }