:root{ --cb-bg: #0f1218;
--cb-bg-2: #131826;
--cb-text: #f3f6ff;
--cb-muted: #b7c2d6;
--cb-line: rgba(255,255,255,.12);
--cb-overlay: rgba(6,8,12,.55); --cb-accent: #8b5cf6; --cb-accent-2: #22c1c3; --cb-accept: #16a34a;
--cb-accept-2: #22c55e;
--cb-reject: #2b2f3c; --cb-radius: 16px;
--cb-radius-lg: 20px;
--cb-blur: 14px;
--cb-shadow: 0 24px 80px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.04) inset; --cb-pad-x: clamp(16px, 3vw, 26px);
--cb-pad-y: clamp(14px, 2.2vw, 22px);
--cb-gap: clamp(12px, 2vw, 18px); --cb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; --cb-z: 2147483000; } .visually-hidden{
position:absolute !important;
height:1px; width:1px;
overflow:hidden; clip:rect(1px,1px,1px,1px);
white-space:nowrap; border:0; padding:0; margin:-1px;
} @media print{
#cookie-banner,
#cookie-preferences,
#cookie-overlay{ display:none !important; }
} .cookie-overlay{
position:fixed; inset:0;
background:var(--cb-overlay);
-webkit-backdrop-filter:saturate(140%) blur(2px);
backdrop-filter:saturate(140%) blur(2px);
opacity:0; visibility:hidden;
transition:opacity .28s ease, visibility .28s ease;
z-index:calc(var(--cb-z) - 1);
}
.cookie-overlay.visible{
opacity:1; visibility:visible;
} .cookie-banner{
position:fixed;
left: clamp(12px, 3vw, 28px);
right: clamp(12px, 3vw, 28px);
bottom: clamp(12px, 3vw, 28px);
z-index:var(--cb-z);
font-family:var(--cb-font);
pointer-events:none;
opacity:0;
transform: translateY(18px) scale(.98);
transition: transform .38s cubic-bezier(.2,.9,.2,1), opacity .38s ease;
width: fit-content;
justify-self: center;
}
.cookie-banner.visible{
pointer-events:auto;
opacity:1;
transform: translateY(0) scale(1);
}
.cookie-banner .cookie-popup{
color:var(--cb-text);
background: #0a0716;
border:1px solid var(--cb-line);
border-radius: var(--cb-radius-lg);
box-shadow: var(--cb-shadow);
-webkit-backdrop-filter: blur(var(--cb-blur));
backdrop-filter: blur(var(--cb-blur));
padding: var(--cb-pad-y) var(--cb-pad-x);
display:grid;
gap: var(--cb-gap);
justify-self: center;
} #cookie-banner-desc {
line-height:1.6;
font-size: clamp(14px, 1.6vw, 16px);
color:var(--cb-text);
margin-bottom: 20px;
}
#cookie-banner .cookie-credit{
color:var(--cb-muted) !important;
font-size:12px !important;
line-height:1.4;
justify-self: center;
padding: 7px;
border: 1px solid #27004f;
border-radius: 9px;
background: #0e1231;
}
#cookie-banner .cookie-credit a{
color:inherit;
text-decoration: none;
} .cookie-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-top: 2px;
justify-self: center;
} .cookie-actions button,
#saveCookiePreferences,
#cookie-preferences button{
-webkit-tap-highlight-color: transparent;
appearance:none;
border:0;
border-radius:12px;
padding:11px 14px;
font-family:var(--cb-font);
font-weight:600;
font-size:14px;
line-height:1;
cursor:pointer;
transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
will-change: transform;
outline: none;
width: fit-content;
justify-self: center;
color:white;
} #acceptCookies{
background: rebeccapurple;
color:white;
}
#acceptCookies:hover{ transform: translateY(-1px); }
#acceptCookies:active{ transform: translateY(0); }
#rejectCookies{
background: rebeccapurple;
color: white;
border:1px solid rgba(255,255,255,.06);
}
#rejectCookies:hover{ transform: translateY(-1px); }
#rejectCookies:active{ transform: translateY(0); }
#openPreferences{
background: rebeccapurple;
color: white;
border:1px solid var(--cb-line);
}
#openPreferences:hover{
border-color:rgba(255,255,255,.22);
transform: translateY(-1px);
}
#openPreferences:active{ transform: translateY(0); }
#cookie-policy-link{
background: transparent;
color: var(--cb-muted);
border:1px dashed rgba(255,255,255,.18);
}
#cookie-policy-link:hover{
color: var(--cb-text);
border-style: solid;
transform: translateY(-1px);
}
#cookie-policy-link:active{ transform: translateY(0); } .cookie-actions button:focus-visible,
#saveCookiePreferences:focus-visible,
#openPreferences:focus-visible,
#rejectCookies:focus-visible,
#acceptCookies:focus-visible,
#cookie-policy-link:focus-visible{
outline: 2px solid transparent;
box-shadow:
0 0 0 2px rgba(255,255,255,.12),
0 0 0 4px color-mix(in oklab, var(--cb-accent) 70%, white 30%);
} .cookie-preferences{
position: fixed;
z-index: var(--cb-z);
top: 50%;
left: 50%;
width: min(820px, calc(100vw - 28px));
max-height: min(86vh, 820px);
transform: translate(-50%, calc(-50% + 8px)) scale(.985);
opacity: 0;
visibility: hidden;
pointer-events:none;
display:grid;
grid-template-rows: auto 1fr auto;
gap: 0;
color: var(--cb-text);
background:
radial-gradient(1200px 600px at 100% -10%, rgba(139,92,246,.09) 0%, rgba(139,92,246,0) 60%),
var(--cb-bg);
border:1px solid var(--cb-line);
border-radius: clamp(16px, 2.6vw, 22px);
box-shadow: var(--cb-shadow);
-webkit-backdrop-filter: blur(var(--cb-blur));
backdrop-filter: blur(var(--cb-blur));
overflow: hidden;
transition: opacity .28s ease, transform .34s cubic-bezier(.2,.9,.2,1), visibility .28s ease;
font-family: var(--cb-font);
padding: 0; } .cookie-preferences.open{
transform: translate(-50%, -50%) scale(1);
opacity: 1;
visibility: visible;
pointer-events:auto;
} #cookie-prefs-title{
margin:0;
font-size: clamp(18px, 2.2vw, 22px);
line-height:1.25;
letter-spacing:.2px;
padding: calc(var(--cb-pad-y) + 2px) var(--cb-pad-x);
background:
linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 80%),
linear-gradient(90deg, color-mix(in oklab, var(--cb-accent) 40%, transparent) 0%, transparent 60%);
border-bottom: 1px solid var(--cb-line);
color: white;
} #cookie-prefs-desc{
margin:0;
padding: 6px var(--cb-pad-x) 6px var(--cb-pad-x);
color: var(--cb-muted);
font-size: clamp(13px, 1.5vw, 14px);
border-bottom: 1px solid rgba(255,255,255,.06);
} .cookie-group{
margin: 0;
padding: calc(var(--cb-pad-y) + 2px) var(--cb-pad-x) var(--cb-pad-y) var(--cb-pad-x);
border:0;
min-height: 0;
overflow:auto;
display:grid;
grid-template-columns: 1fr;
gap: 8px 0;
}
.cookie-group legend{ display:none; } .cookie-toggle-label{
display:flex;
align-items:center;
gap: 12px;
font-weight: 600;
cursor: pointer;
padding: 10px 0 8px 0;
user-select:none;
position:relative;
isolation:isolate;
color:white;
}
.cookie-toggle-label:hover{
color: var(--cb-text);
}
.cookie-toggle-label:focus-within{
outline: 2px solid transparent;
box-shadow:
0 0 0 2px rgba(255,255,255,.08),
0 0 0 6px color-mix(in oklab, var(--cb-accent) 55%, white 25%);
border-radius: 14px;
padding-left: 8px;
margin-left: -8px;
} .cookie-desc{
margin: 0 0 10px 56px; 
color: var(--cb-muted);
font-size: 13px;
line-height:1.55;
} .cookie-toggle-label > input[type="checkbox"]{
position:absolute;
opacity:0;
inline-size: 1px;
block-size: 1px;
margin: -1px; border:0; padding:0;
} .toggle-switch{
--h: 24px;
--w: 44px;
inline-size: var(--w);
block-size: var(--h);
border-radius: calc(var(--h) * 0.75);
background: #1b2233;
border:1px solid rgba(255,255,255,.12);
position:relative;
transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
flex: 0 0 var(--w);
box-shadow: inset 0 1px 1px rgba(255,255,255,.04);
}
.toggle-switch::after{
--size: 18px;
content:"";
position:absolute;
top: 50%;
left: 3px;
translate: 0 -50%;
inline-size: var(--size);
block-size: var(--size);
border-radius: 999px;
background: linear-gradient(180deg, #ffffff 0%, #cfd8ea 100%);
box-shadow: 0 2px 6px rgba(0,0,0,.35);
transition: left .22s ease, background .22s ease, box-shadow .22s ease;
} .cookie-toggle-label > input[type="checkbox"]:checked + .toggle-switch{
background: linear-gradient(180deg, color-mix(in oklab, var(--cb-accent) 70%, #000 0%) 0%, color-mix(in oklab, var(--cb-accent) 55%, #000 0%) 100%);
border-color: color-mix(in oklab, var(--cb-accent) 60%, white 10%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 2px rgba(139,92,246,.18);
}
.cookie-toggle-label > input[type="checkbox"]:checked + .toggle-switch::after{
left: calc(100% - 3px - 18px);
} .cookie-toggle-label > input[disabled] + .toggle-switch{
filter: grayscale(.2) brightness(.9);
opacity:.8;
cursor: not-allowed;
}
.cookie-toggle-label > input[disabled] ~ *{
cursor: not-allowed;
} #saveCookiePreferences{
margin: 0;
background: linear-gradient(180deg, color-mix(in oklab, var(--cb-accent) 88%, white 0%) 0%, color-mix(in oklab, var(--cb-accent) 68%, black 0%) 100%);
color: #0a0912;
box-shadow: 0 10px 28px color-mix(in oklab, var(--cb-accent) 25%, black 75%);
border-radius: 0 0 clamp(16px, 2.6vw, 22px) clamp(16px, 2.6vw, 22px);
padding: 14px 18px;
font-size: 15px;
width: 100%;
border-top: 1px solid rgba(255,255,255,.07);
}
#saveCookiePreferences:hover{ transform: translateY(-1px); }
#saveCookiePreferences:active{ transform: translateY(0); } .cookie-preferences .cookie-credit{
color: var(--cb-muted) !important;
padding: 10px var(--cb-pad-x) 14px var(--cb-pad-x);
margin: 0;
border-top: none;
background: none;
font-size: 12px !important;
} @media (max-width: 720px){
.cookie-actions{
gap:8px;
}
.cookie-actions button{
flex: 1 1 auto;
min-width: 42%;
text-align:center;
padding: 12px 14px;
}
#cookie-policy-link{
flex-basis: 100%;
order: 4;
}
.cookie-desc{
margin-left: 0; 
}
} @media (prefers-reduced-motion: reduce){
.cookie-banner,
.cookie-preferences,
.cookie-overlay,
.cookie-actions button,
#saveCookiePreferences{
transition: none !important;
}
.cookie-banner{
transform:none !important; opacity:1 !important;
}
.cookie-preferences{
transform: translate(-50%, -50%) !important;
}
} #cookie-banner a{
color: color-mix(in oklab, var(--cb-accent) 75%, white 25%);
text-decoration: underline;
text-underline-offset: 2px;
}
#cookie-banner a:hover{
color: var(--cb-text);
}
#cookie-banner [data-reveal],
#cookie-preferences [data-reveal]{
will-change: transform, opacity;
}
@media (max-width: 380px){
.cookie-banner{
left: 10px; right: 10px; bottom: 10px;
}
}
.cookie-banner :where(a):focus-visible,
.cookie-preferences :where(a):focus-visible{
outline: 2px solid transparent;
box-shadow:
0 0 0 2px rgba(255,255,255,.12),
0 0 0 4px color-mix(in oklab, var(--cb-accent) 70%, white 30%);
border-radius: 8px;
}
html.scroll-lock, body.scroll-lock{
overflow: hidden;
}
#manage-cookies-inline{
-webkit-tap-highlight-color: transparent;
appearance: none;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 0;
border-radius: 12px;
background: yellow;
color: black;
font: 600 14px/1 var(--cb-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif);
text-decoration: none;
cursor: pointer;
box-shadow:
0 10px 26px rgba(255,214,10,.28),
0 1px 0 rgba(255,255,255,.35) inset;
transform: translateY(0);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease, background-color .2s ease;
}
#manage-cookies-inline::before{
content: "";
inline-size: 16px;
block-size: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 3h11l5 5v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v16h14V9h-5a1 1 0 0 1-1-1V5H5zm9 0v2h2V5h-2zM7 13h10v6H7v-6z'/></svg>") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 3h11l5 5v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v16h14V9h-5a1 1 0 0 1-1-1V5H5zm9 0v2h2V5h-2zM7 13h10v6H7v-6z'/></svg>") no-repeat center / contain;
}
#manage-cookies-inline:hover{
transform: translateY(-1px);
box-shadow:
0 14px 32px rgba(255,214,10,.34),
0 1px 0 rgba(255,255,255,.45) inset;
filter: saturate(1.05);
}
#manage-cookies-inline:active{
transform: translateY(0);
box-shadow:
0 6px 18px rgba(255,214,10,.28),
0 0 0 rgba(0,0,0,0) inset;
}
#manage-cookies-inline:focus-visible{
outline: 2px solid transparent;
box-shadow:
0 0 0 2px rgba(0,0,0,.18),
0 0 0 5px var(--cb-inline-ring),
0 10px 26px rgba(255,214,10,.28);
}
#manage-cookies-inline[disabled],
#manage-cookies-inline[aria-disabled="true"]{
opacity: .6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
@media (max-width: 520px){
#manage-cookies-inline{
width: 100%;
justify-content: center;
}
}
:root{
--cb-z-root: 2147483000;
--cb-z-banner: 2147483700; 
--cb-z-overlay: 2147483600; 
--cb-z-dialog: 2147483800; 
}
.cookie-banner{ z-index: var(--cb-z-banner) !important; }
.cookie-overlay{ z-index: var(--cb-z-overlay) !important; }
.cookie-preferences{ z-index: var(--cb-z-dialog) !important; }
.cookie-preferences.open ~ #cookie-banner{
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(6px) scale(.98);
transition: opacity .2s ease, transform .2s ease;
}
#cookie-banner,
#cookie-banner:focus,
#cookie-banner:focus-visible,
#cookie-banner .cookie-popup:focus,
#cookie-banner .cookie-popup:focus-visible{
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important; 
}
.cookie-preferences{
visibility: visible !important;               
opacity: 0 !important;
pointer-events: none !important;
transform: translate(-50%, calc(-50% + 8px)) scale(.985) !important;
transition: opacity .34s cubic-bezier(.2,.9,.2,1),
transform .34s cubic-bezier(.2,.9,.2,1) !important;
}
.cookie-preferences.open{
opacity: 1 !important;
pointer-events: auto !important;
transform: translate(-50%, -50%) scale(1) !important;
}
.cookie-preferences.open ~ #cookie-banner{
visibility: visible !important;            
opacity: 0 !important;                       
pointer-events: none !important;              
transform: translateY(6px) scale(.98);
transition: opacity .2s ease, transform .2s ease;
}
html:has(.cookie-overlay.visible),
html:has(.cookie-preferences.open){
overflow: hidden !important;
}
html.scroll-lock:not(:has(.cookie-overlay.visible)):not(:has(.cookie-preferences.open)){
overflow: auto !important;
}
body.scroll-lock:not(:has(.cookie-overlay.visible)):not(:has(.cookie-preferences.open)){
overflow: auto !important;
}
[inert] { pointer-events: none !important; }
[inert] * { pointer-events: none !important; } .cookie-preferences:focus,
.cookie-preferences:focus-visible{
outline: none !important;
box-shadow: var(--cb-shadow) !important; }
.cookie-preferences.open:has(:focus),
.cookie-preferences.open:has(:focus-visible){
box-shadow: var(--cb-shadow) !important;
}