@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
/* Shared skin for every page: warm paper, hairline greys, soft layered depth, rounded surfaces, pill controls and small
   spring hovers (after the MTS creative-benchmarks look). Colour, shape and motion only: each page keeps its own fonts.
   Loaded last on every page, so it overrides the page's own tokens. */
:root{
  /* one type family everywhere: hierarchy comes from size, weight and case, not from switching fonts */
  --display:"IBM Plex Sans",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Sans",system-ui,sans-serif;
  --paper:#faf9f7; --sheet:#ffffff; --ink:#1c1b1a; --muted:#767370; --rule:#e9e6e1; --hair:#dedad3;
  --accent:#2D6DE4; --accent-soft:#eaf0fc; --empty:#f1efeb;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 1px 2px rgb(28 27 26/.05);
  --shadow:0 1px 2px rgb(28 27 26/.04),0 8px 24px -12px rgb(28 27 26/.16);
  --shadow-lg:0 2px 4px rgb(28 27 26/.04),0 24px 60px -20px rgb(28 27 26/.3);
}
h1,h2,h3,h4{letter-spacing:-.015em;font-weight:600}
body{font-variant-numeric:tabular-nums;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration-color:#b8b2a9;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}

/* top bar: frosted, with the three-dot mark */
.topnav{background:rgb(255 255 255/.72)!important;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--rule)!important}
.topnav .brand{gap:9px}
.topnav .brand::before{content:"";width:27px;height:11px;flex:none;background:radial-gradient(circle at 5.5px 5.5px,#F6CF43 5.5px,transparent 6px),radial-gradient(circle at 13.5px 5.5px,#E64D35 5.5px,transparent 6px),radial-gradient(circle at 21.5px 5.5px,#2D6DE4 5.5px,transparent 6px);transition:transform .5s var(--spring)}
.topnav .brand:hover{color:var(--ink)}
.topnav .brand:hover::before{transform:scaleX(1.12)}
.navtabs a{transition:color .25s var(--ease),border-color .3s var(--ease)}

/* pill controls: chips, segmented toggles, tabs, buttons */
.chip,.pchip,.sort,.back,.close,.more,.career-more,.seg,.lens,.switch{border-radius:999px!important}
.chip{transition:transform .4s var(--spring),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
@media (hover:hover){.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}}
.seg,.lens{padding:3px;gap:2px;background:var(--paper)!important;border:1px solid var(--rule)!important;overflow:hidden}
.seg button,.lens button{border:0!important;border-radius:999px!important;transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.seg button[aria-pressed="true"],.lens button[aria-pressed="true"]{background:#fff!important;color:var(--ink)!important;box-shadow:var(--shadow-sm),0 0 0 1px var(--rule)}
.tabs{gap:2px;margin:18px 22px 0;padding:3px;border:1px solid var(--rule)!important;border-radius:999px;background:var(--paper);width:max-content;max-width:calc(100% - 44px)}
.tabs button,.tabs a.tablink{border:0!important;border-radius:999px;padding:8px 16px!important;transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm),0 0 0 1px var(--rule)}
.close,.sort,.back{transition:border-color .2s var(--ease),background .2s var(--ease),transform .4s var(--spring)}
select,input[type=search],input[type=text]{border:1px solid var(--hair)!important;border-radius:10px!important;background:#fff}

/* surfaces: rounded, soft depth, a small lift on hover */
.bench,.card,.mapcard,.qlist,.heat,.weekbars,.filters.card{border:1px solid var(--rule)!important;border-radius:18px!important;box-shadow:var(--shadow);overflow:hidden}
.clip,.rise,.member,.tribe,.take,.belief,.cx,.pair,.solo,.bg-grid>li,.pc-open,.qbtn{border-radius:14px!important}
.clip,.rise,.member,.tribe,.take,.belief,.cx,.pair,.solo{background:#fff;border:1px solid var(--rule)!important;box-shadow:var(--shadow-sm);transition:transform .5s var(--spring),box-shadow .4s var(--ease),border-color .3s var(--ease)}
@media (hover:hover){.clip:hover,.rise:hover,.member:hover,.tribe:hover,.take:hover,.belief:hover,.cx:hover,.pair:hover,.solo:hover{transform:translateY(-3px);border-color:var(--hair)!important;box-shadow:var(--shadow-lg)}}
.qrow{transition:background .25s var(--ease)}
.qrow:hover{background:var(--paper)!important}
.side,.drawer{background:#fff!important;border-left:1px solid var(--rule)!important;box-shadow:var(--shadow-lg)!important}
.drawer{animation:skinDrawerIn .45s var(--ease)}
@keyframes skinDrawerIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.tip{border-radius:10px!important;box-shadow:var(--shadow-lg)!important}
.zoom{border-radius:12px!important;overflow:hidden;box-shadow:var(--shadow)}
.av,.face img{transition:transform .4s var(--spring)}
@media (hover:hover){.face:hover .av,.member:hover .av{transform:scale(1.06)}}

/* data marks: rounded bars */
.bar{border-radius:999px;gap:2px;background:transparent}
.bar i{border-radius:999px}
.sw{border-radius:3px}

/* crux map */
.qbtn{background:#fff;border:1px solid var(--rule);box-shadow:var(--shadow-sm);transition:transform .5s var(--spring),box-shadow .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.qbtn::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgb(45 109 228/.08),transparent 60%)}
.qbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);box-shadow:var(--shadow-lg)}
@media (hover:hover){.qbtn:hover{transform:translateY(-4px);border-color:var(--hair);box-shadow:var(--shadow-lg)}.qbtn[aria-pressed="true"]:hover{border-color:var(--ink)}}
.cr{border-bottom-color:var(--rule)}
.cr::before{background:linear-gradient(90deg,var(--paper),rgb(250 249 247/0) 85%);border-radius:14px}
@media (hover:hover){.cr:hover .rank{color:var(--accent)}}
.meter{gap:7px}
.m-split{font-size:.88rem;color:var(--muted)}
.m-split b{color:var(--ink);font-variant-numeric:tabular-nums}
.m-split i{font-style:normal;color:var(--hair);margin:0 2px}
.m-link{font-size:.74rem;color:var(--muted);cursor:help}
details>summary::before{display:inline-block;width:1.1em;transition:transform .35s var(--spring)}
.q{border-left-width:2px;border-radius:0 10px 10px 0;transition:background .25s var(--ease),transform .4s var(--spring)}
.q:hover,.q:focus-visible{background:var(--paper)!important;transform:translateX(2px)}

/* gallery profile */
.item{transition:transform .5s var(--spring)}
@media (hover:hover){.tl .item:hover{transform:translateX(3px)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

select,option,button,input{font-family:inherit}