:root { --mcc-n-0 : oklch(98% 0.004 260); --mcc-n-1 : oklch(95% 0.006 260); --mcc-n-2 : oklch(88% 0.010 260); --mcc-n-3 : oklch(72% 0.012 260); --mcc-n-4 : oklch(50% 0.014 260); --mcc-n-5 : oklch(32% 0.016 260); --mcc-n-6 : oklch(16% 0.018 260);  --mcc-a-1 : oklch(93% 0.04  220); --mcc-a-3 : oklch(72% 0.14  220); --mcc-a-5 : oklch(52% 0.19  220); --mcc-a-6 : oklch(40% 0.18  220);  --mcc-surface      : var(--mcc-n-0);
--mcc-surface-up   : var(--mcc-n-1);
--mcc-border       : var(--mcc-n-2);
--mcc-text-muted   : var(--mcc-n-3);
--mcc-text-body    : var(--mcc-n-5);
--mcc-text-strong  : var(--mcc-n-6);
--mcc-accent       : var(--mcc-a-5);
--mcc-accent-hover : var(--mcc-a-6); --mcc-ease  : cubic-bezier(.4, 0, .2, 1);
--mcc-dur   : 150ms;
--mcc-dur-m : 220ms; --mcc-r-sm : 8px;
--mcc-r-md : 12px;
--mcc-r-lg : 16px;
--mcc-r-xl : 9999px; --mcc-sp-1 : 4px;
--mcc-sp-2 : 8px;
--mcc-sp-3 : 12px;
--mcc-sp-4 : 16px;
--mcc-sp-5 : 24px;
--mcc-sp-6 : 32px;
} @media (prefers-color-scheme: dark) {
:root {
--mcc-n-0 : oklch(14% 0.012 260);
--mcc-n-1 : oklch(19% 0.014 260);
--mcc-n-2 : oklch(28% 0.016 260);
--mcc-n-3 : oklch(50% 0.014 260);
--mcc-n-4 : oklch(68% 0.012 260);
--mcc-n-5 : oklch(82% 0.010 260);
--mcc-n-6 : oklch(96% 0.006 260); --mcc-a-5 : oklch(62% 0.16  220);
--mcc-a-6 : oklch(72% 0.14  220);
}
} .mcc-btn {
display         : inline-flex;
align-items     : center;
gap             : .45em;
background      : var(--mcc-bg, var(--mcc-accent));
color           : var(--mcc-fg, #fff);
font-size       : var(--mcc-fs, 17px);
font-family     : inherit;
font-weight     : 600;
line-height     : 1.2;
border          : none;
border-radius   : var(--mcc-r-xl);
padding         : .55em 1.4em;
cursor          : pointer;
transition      : filter var(--mcc-dur) var(--mcc-ease),
transform var(--mcc-dur) var(--mcc-ease); min-height      : 44px;
min-width       : 44px;
white-space     : nowrap;
}
.mcc-btn:hover  { filter: brightness(1.1);  }
.mcc-btn:active { filter: brightness(.9); transform: scale(.975); }
.mcc-btn:focus-visible {
outline        : 3px solid var(--mcc-accent);
outline-offset : 3px;
} .mcc-btn::before {
content          : "";
display          : inline-block;
flex-shrink      : 0;
width            : 1.1em;
height           : 1.1em;
background       : currentColor;
-webkit-mask     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
mask     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
} .mcc-overlay {
display         : none; position        : fixed;
inset           : 0;
z-index         : 999999;
background      : oklch(0% 0 0 / .55); align-items     : center;
justify-content : center;
padding         : var(--mcc-sp-4); opacity         : 0;
transition      : opacity var(--mcc-dur-m) var(--mcc-ease);
}
.mcc-overlay.mcc-open {
display  : flex;
opacity  : 1;
} @keyframes mcc-slide-up {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
@keyframes mcc-slide-up {
from { opacity: 0; }
to   { opacity: 1; }
}
} body.mcc-locked { overflow: hidden; } .mcc-modal {
position        : relative;
background      : var(--mcc-surface);
border          : 1px solid var(--mcc-border);
border-radius   : var(--mcc-r-lg);
padding         : var(--mcc-sp-6) var(--mcc-sp-5) var(--mcc-sp-5);
width           : min(420px, 100%);
max-height      : calc(100dvh - var(--mcc-sp-6) * 2);
overflow-y      : auto;
box-shadow      : 0 2px 4px oklch(0% 0 0 / .06),
0 8px 24px oklch(0% 0 0 / .12);
animation       : mcc-slide-up var(--mcc-dur-m) var(--mcc-ease) both; display         : flex;
flex-direction  : column;
align-items     : center;
text-align      : center;
} .mcc-modal__close {
position        : absolute;
top             : var(--mcc-sp-3);
right           : var(--mcc-sp-3);
display         : flex;
align-items     : center;
justify-content : center;
width           : 36px;
height          : 36px;
background      : var(--mcc-surface-up);
border          : 1px solid var(--mcc-border);
border-radius   : var(--mcc-r-xl);
color           : var(--mcc-text-muted);
font-size       : 1.25rem;
line-height     : 1;
cursor          : pointer;
transition      : background var(--mcc-dur) var(--mcc-ease),
color      var(--mcc-dur) var(--mcc-ease);
}
.mcc-modal__close:hover       { background: var(--mcc-border); color: var(--mcc-text-strong); }
.mcc-modal__close:focus-visible {
outline        : 3px solid var(--mcc-accent);
outline-offset : 2px;
} .mcc-modal__title {
margin          : 0 0 var(--mcc-sp-4);
font-size       : .72rem;
font-weight     : 700;
letter-spacing  : .1em;
text-transform  : uppercase;
color           : var(--mcc-text-muted); padding-right   : 44px;
width           : 100%;
} .mcc-modal__list {
list-style      : none;
margin          : 0;
padding         : 0;
width           : 100%;
display         : flex;
flex-direction  : column;
gap             : var(--mcc-sp-2);
}
.mcc-modal__list li {
width : 100%;
}
.mcc-modal__list a {
display             : flex;
align-items         : center;
justify-content     : center;
width               : 100%;
padding             : var(--mcc-sp-3) var(--mcc-sp-4);
border-radius       : var(--mcc-r-md);
background          : var(--mcc-surface-up);
border              : 1.5px solid var(--mcc-border); font-size           : clamp(22px, 6vw, 30px);
font-weight         : 700;
font-variant-numeric: tabular-nums;
letter-spacing      : .04em;
color               : var(--mcc-text-strong);
text-decoration     : none;
transition          : background var(--mcc-dur) var(--mcc-ease),
border-color var(--mcc-dur) var(--mcc-ease),
color        var(--mcc-dur) var(--mcc-ease),
transform    var(--mcc-dur) var(--mcc-ease); gap                 : .55em;
}
.mcc-modal__list a::before {
content          : "";
flex-shrink      : 0;
width            : .85em;
height           : .85em;
background       : var(--mcc-accent);
-webkit-mask     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
mask     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
transition       : background var(--mcc-dur) var(--mcc-ease);
}
.mcc-modal__list a:hover {
background   : var(--mcc-a-1);
border-color : var(--mcc-a-3);
color        : var(--mcc-a-6);
transform    : translateY(-1px);
}
.mcc-modal__list a:hover::before {
background: var(--mcc-a-6);
}
.mcc-modal__list a:active {
transform    : translateY(0);
}
.mcc-modal__list a:focus-visible {
outline        : 3px solid var(--mcc-accent);
outline-offset : 2px;
} .mcc-modal__loading {
display         : flex;
flex-direction  : column;
align-items     : center;
gap             : var(--mcc-sp-3);
padding         : var(--mcc-sp-5) 0;
color           : var(--mcc-text-muted);
font-size       : .95rem;
width           : 100%;
} .mcc-modal__skel {
width           : 100%;
height          : 62px;
border-radius   : var(--mcc-r-md);
background      : linear-gradient(
90deg,
var(--mcc-n-1) 25%,
var(--mcc-n-2) 50%,
var(--mcc-n-1) 75%
);
background-size : 200% 100%;
animation       : mcc-shimmer 1.4s var(--mcc-ease) infinite;
}
@keyframes mcc-shimmer {
0%   { background-position:  100% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.mcc-modal__skel { animation: none; }
}
.mcc-modal__error {
color      : oklch(50% .18 20);
font-size  : .9rem;
padding    : var(--mcc-sp-4) 0;
} .mcc-modal__list a { position: relative; }
.mcc-modal__list a.mcc-clicked {
background   : var(--mcc-a-1); border-color : var(--mcc-a-5); box-shadow   : inset 0 0 0 1px var(--mcc-a-3);
}
.mcc-modal__list a.mcc-clicked::before {
background : var(--mcc-a-6); } .mcc-modal__list a.mcc-clicked:hover {
background   : var(--mcc-a-1);
border-color : var(--mcc-a-5);
transform    : none;
}
.mcc-modal__list a.mcc-clicked:hover::before {
background : var(--mcc-a-6);
} .mcc-modal__list.mcc-has-pick a:not(.mcc-clicked) {
opacity : .55;
}
.mcc-modal__list.mcc-has-pick a:not(.mcc-clicked):hover {
opacity : 1;
} .mcc-btn.mcc-btn-open {
filter : brightness(.92);
} @media (prefers-color-scheme: dark) {
.mcc-modal__list a.mcc-clicked {
background   : oklch(26% 0.05 220);
border-color : var(--mcc-a-5);
box-shadow   : inset 0 0 0 1px oklch(45% 0.10 220);
}
} @media (max-width: 480px) {
.mcc-modal {
border-radius : var(--mcc-r-md);
padding       : var(--mcc-sp-5) var(--mcc-sp-4) var(--mcc-sp-4);
}
.mcc-modal__list a {
font-size : clamp(19px, 6.5vw, 24px);
padding   : var(--mcc-sp-2) var(--mcc-sp-3);
}
}