:root { color-scheme:dark;scroll-behavior:smooth; }
* { box-sizing:border-box; }
html,body { margin:0;min-width:320px; }
body.maths-labs-page { overflow-x:hidden;background:#080d12;color:#f4f8f7;font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif; }
.maths-labs-page a { color:inherit;text-decoration:none; }
.maths-labs-page img { display:block;max-width:100%; }
.maths-labs-page button { font:inherit; }
.maths-labs-page [hidden] { display:none !important; }
.maths-container,.labs-container { width:min(calc(100% - 3rem),74rem);margin-inline:auto; }

.maths-labs-page #site-header {
  --shell-ink:#f3fbf8;--shell-text:#afc1c2;--shell-surface:#10171c;--shell-soft:#19242b;--shell-line:#2b3940;--shell-teal:#8edbd4;--shell-mint:#173b3e;
  color-scheme:dark;color:var(--shell-ink);
}
.maths-labs-page #site-header .future-header__pill,
.maths-labs-page #site-header .future-header.is-condensed .future-header__pill { border-color:rgba(255,255,255,.08);background:rgba(9,14,18,.72);box-shadow:0 10px 38px rgba(0,0,0,.2); }
.maths-labs-page #site-header .future-brand strong { color:#f3fbf8; }
.maths-labs-page #site-header .future-brand small,
.maths-labs-page #site-header .desktop-nav>a,
.maths-labs-page #site-header .nav-disclosure>summary { color:#afc1c2; }
.maths-labs-page #site-header .desktop-nav>a:hover,
.maths-labs-page #site-header .nav-disclosure>summary:hover,
.maths-labs-page #site-header .nav-disclosure[open]>summary { background:#173b3e;color:#b9f1ec; }
.maths-labs-page #site-header .icon-button,
.maths-labs-page #site-header .menu-button { background:#19242b;color:#f3fbf8; }

.labs-hero { position:relative;display:grid;min-height:100svh;align-items:center;overflow:hidden;padding:8rem max(1.5rem,calc((100vw - 74rem)/2)) 4.5rem;background:radial-gradient(circle at 78% 35%,rgba(17,140,140,.22),transparent 25%),radial-gradient(circle at 42% 112%,rgba(242,187,22,.11),transparent 32%),linear-gradient(135deg,#070b10 0%,#0b1419 48%,#081518 100%);isolation:isolate; }
.labs-hero::before { position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;content:"";mask-image:linear-gradient(to right,#000,transparent 72%); }
.labs-hero__aurora { position:absolute;z-index:-1;top:13%;right:3%;width:min(52vw,44rem);height:min(52vw,44rem);border:1px solid rgba(186,217,206,.08);border-radius:50%;box-shadow:0 0 0 6rem rgba(17,140,140,.025),0 0 0 13rem rgba(17,140,140,.018); }
.labs-hero__content { position:relative;z-index:4;width:min(46rem,59%); }
.labs-eyebrow { margin:0;color:#f2bb16;font-size:.69rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; }
.labs-lockup { display:flex;align-items:center;gap:.8rem;margin:1.4rem 0 clamp(2.3rem,6vh,4.8rem); }
.labs-lockup img { width:3.7rem;height:3.7rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.labs-lockup>div { display:grid;line-height:.88; }
.labs-lockup span { color:#a8bfbc;font-size:.66rem;font-weight:800;letter-spacing:.18em; }
.labs-lockup strong { margin-top:.32rem;font-size:1.05rem;letter-spacing:.03em; }
.labs-hero h1 { max-width:48rem;margin:0;font-size:clamp(3.7rem,7.8vw,7.4rem);letter-spacing:-.075em;line-height:.83; }
.labs-hero h1 em { color:#91ddd6;font-style:normal; }
.labs-hero__content>p:not(.labs-eyebrow) { max-width:36rem;margin:1.8rem 0 0;color:#a9b8b8;font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.7; }
.labs-hero__action { display:flex;width:max-content;align-items:center;gap:.8rem;margin-top:2.2rem;border:1px solid rgba(255,255,255,.15);border-radius:.85rem;background:rgba(255,255,255,.07);padding:.85rem 1rem;color:#eef8f5;font-size:.8rem;font-weight:800;backdrop-filter:blur(12px);transition:background 180ms ease,border-color 180ms ease,transform 180ms ease; }
.labs-hero__action:hover,.labs-hero__action:focus-visible { border-color:#91ddd6;background:rgba(145,221,214,.12);transform:translateY(-2px); }
.labs-hero__action span { color:#f2bb16;font-size:1.05rem; }
.labs-hero__art { position:absolute;z-index:2;top:15%;right:max(-2rem,calc((100vw - 80rem)/2));width:min(44vw,38rem);height:72%;pointer-events:none; }
.labs-hero__poster { position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:1.25rem;background:#131d22;box-shadow:0 30px 70px rgba(0,0,0,.45); }
.labs-hero__poster img { width:100%;height:100%;object-fit:cover; }
.labs-hero__poster--airways { z-index:3;right:0;bottom:3%;width:72%;height:56%;transform:rotate(3deg); }
.labs-hero__poster--botanics { z-index:2;top:0;left:0;width:62%;height:48%;transform:rotate(-5deg); }
.labs-hero__poster--botanics img { filter:saturate(.84) contrast(1.04); }
.labs-hero__poster--shakes { z-index:4;top:19%;right:0;width:34%;height:26%;transform:rotate(7deg); }
.labs-hero__poster--shakes img { object-position:70% center; }
.labs-hero__rail { position:absolute;right:0;bottom:0;left:0;display:flex;justify-content:space-around;gap:2rem;border-top:1px solid rgba(255,255,255,.08);background:rgba(3,7,9,.35);padding:1rem;color:#627374;font-size:.59rem;font-weight:800;letter-spacing:.15em; }

.labs-section { padding:clamp(5.5rem,10vw,9rem) 0; }
.labs-heading { display:grid;align-items:end;gap:3rem;grid-template-columns:minmax(0,1.1fr) minmax(17rem,.55fr);margin-bottom:clamp(2.2rem,5vw,4rem); }
.labs-heading h2 { margin:.7rem 0 0;font-size:clamp(2.7rem,5.5vw,5rem);letter-spacing:-.065em;line-height:.92; }
.labs-heading>p { margin:0;color:#9cabad;font-size:.88rem;line-height:1.65; }

.labs-featured { background:#0c1217; }
.lab-tag { display:inline-flex;align-items:center;gap:.4rem;border-radius:.45rem;background:#f2bb16;padding:.38rem .58rem;color:#2b2000;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.lab-tag--locked { background:rgba(255,255,255,.14);color:#e8efed;backdrop-filter:blur(8px); }
.lab-locked-note { display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:.6rem;padding:.65rem .8rem;color:#b9c4c4; }
.lab-carousel { display:grid;min-height:38rem;gap:.9rem;grid-template-columns:minmax(0,1fr) 18rem; }
.lab-carousel__stage { position:relative;min-height:38rem;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:1.5rem;background:#11181d; }
.lab-slide { position:absolute;inset:0;display:grid;align-content:end;overflow:hidden;isolation:isolate;opacity:0;pointer-events:none;transform:scale(1.025);transition:opacity 480ms ease,transform 800ms cubic-bezier(.2,.8,.2,1); }
.lab-slide.is-active { opacity:1;pointer-events:auto;transform:none; }
.lab-slide>img,.lab-slide__shade { position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; }
.lab-slide--botanics>img { object-position:center 34%;filter:saturate(.82) contrast(1.04); }
.lab-slide--shakes>img { object-position:center; }
.lab-slide--airways>img { filter:saturate(.72) brightness(.82); }
.lab-slide__shade { z-index:-1;background:linear-gradient(90deg,rgba(5,8,10,.96) 0%,rgba(5,8,10,.75) 43%,rgba(5,8,10,.1) 75%),linear-gradient(to top,rgba(5,8,10,.78),transparent 55%); }
.lab-slide__copy { display:grid;max-width:43rem;justify-items:start;padding:clamp(1.6rem,5vw,3.4rem); }
.lab-slide__copy>small { margin-top:1.3rem;color:#91ddd6;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.lab-slide h3 { margin:.3rem 0 .75rem;font-size:clamp(2.8rem,6vw,5.4rem);letter-spacing:-.07em;line-height:.86; }
.lab-slide p { max-width:34rem;margin:0;color:#b5c0c0;font-size:.87rem;line-height:1.6; }
.lab-slide__copy>a,.lab-locked-note { margin-top:1.5rem;color:#fff;font-size:.73rem;font-weight:800; }
.lab-slide__copy>a { display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.18);border-radius:.65rem;background:rgba(10,15,18,.38);padding:.72rem .85rem;backdrop-filter:blur(10px);transition:border-color 180ms ease,background 180ms ease; }
.lab-slide__copy>a b { color:#f2bb16;transition:transform 180ms ease; }
.lab-slide__copy>a:hover,.lab-slide__copy>a:focus-visible { border-color:#91ddd6;background:rgba(17,140,140,.18); }
.lab-slide__copy>a:hover b { transform:translateX(.25rem); }
.lab-carousel__nav { display:flex;min-width:0;flex-direction:column;gap:.55rem; }
.lab-carousel__nav>button { display:grid;min-height:6.5rem;align-items:center;gap:.8rem;grid-template-columns:4.8rem minmax(0,1fr);overflow:hidden;border:1px solid transparent;border-radius:1rem;background:#11191f;padding:.6rem;color:#c4cecc;cursor:pointer;text-align:left;transition:border-color 180ms ease,background 180ms ease,transform 180ms ease; }
.lab-carousel__nav>button:hover,.lab-carousel__nav>button:focus-visible { border-color:#385255;background:#152127; }
.lab-carousel__nav>button.is-active { border-color:rgba(145,221,214,.4);background:#17252b; }
.lab-carousel__nav>button>img,.lab-carousel__shake-thumb { display:block;width:4.8rem;height:4.8rem;overflow:hidden;border-radius:.75rem;background:#202a2f; }
.lab-carousel__nav>button>img,.lab-carousel__shake-thumb img { object-fit:cover; }
.lab-carousel__shake-thumb { background:#202a2f; }
.lab-carousel__shake-thumb img { width:100%;height:100%;object-fit:cover;object-position:68% center; }
.lab-carousel__nav>button>span:not(.lab-carousel__shake-thumb) { display:grid;min-width:0; }
.lab-carousel__nav small { color:#f2bb16;font-size:.52rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.lab-carousel__nav strong { margin:.15rem 0;font-size:.77rem; }
.lab-carousel__nav b { overflow:hidden;color:#819294;font-size:.59rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap; }
.lab-carousel__controls { display:grid;align-items:center;gap:.55rem;grid-template-columns:2.65rem 1fr 2.65rem;margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:.8rem; }
.lab-carousel__controls button { display:grid;width:2.65rem;height:2.65rem;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:#11191f;color:#dce6e4;cursor:pointer; }
.lab-carousel__controls button:hover,.lab-carousel__controls button:focus-visible { border-color:#91ddd6;color:#91ddd6; }
.lab-carousel__controls>span { color:#738486;font-size:.62rem;text-align:center; }
.lab-carousel__controls i { color:#f2bb16;font-style:normal;font-weight:800; }

.labs-games { background:#080d12; }
.labs-heading--games { margin-bottom:2rem; }
.game-filter { display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem; }
.game-filter button { border:1px solid rgba(255,255,255,.1);border-radius:.7rem;background:#11191f;padding:.7rem .95rem;color:#aebbbc;font-size:.72rem;font-weight:800;cursor:pointer;transition:border-color 160ms ease,background 160ms ease,color 160ms ease; }
.game-filter button:hover,.game-filter button:focus-visible { border-color:#4a6467;color:#fff; }
.game-filter button.is-active { border-color:#118c8c;background:#118c8c;color:#fff; }
.game-grid { display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr)); }
.game-card { overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:1.15rem;background:#11181e;transition:border-color 200ms ease,transform 200ms ease,box-shadow 200ms ease; }
.game-card:hover,.game-card:focus-visible { border-color:rgba(145,221,214,.5);box-shadow:0 20px 40px rgba(0,0,0,.26);transform:translateY(-5px); }
.game-card__art { position:relative;display:grid;aspect-ratio:16/10;overflow:hidden;place-items:center;background:linear-gradient(145deg,#153d40,#092124); }
.game-card__art::before,.game-card__art::after { position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;content:""; }
.game-card__art::before { width:11rem;height:11rem; }
.game-card__art::after { width:7rem;height:7rem; }
.game-card__art>b { position:relative;z-index:2;font-size:clamp(3.2rem,5vw,5rem);letter-spacing:-.09em;line-height:1; }
.game-card__art>sup { position:relative;z-index:2;margin:-4rem 0 0 2.7rem;color:#f2bb16;font-size:1.5rem;font-weight:800; }
.game-card__art>i { position:absolute;right:.75rem;bottom:.65rem;color:rgba(255,255,255,.7);font-size:.5rem;font-style:normal;font-weight:800;letter-spacing:.13em; }
.game-card__body { display:grid;padding:1.05rem; }
.game-card__body small { color:#8cd7d1;font-size:.56rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.game-card__body strong { margin:.3rem 0 .55rem;font-size:1rem;letter-spacing:-.025em; }
.game-card__body>span { min-height:3.4em;color:#91a1a3;font-size:.7rem;line-height:1.55; }
.game-card__body>b { margin-top:1.1rem;color:#f2bb16;font-size:.66rem; }
.game-card--cube .game-card__art { background:linear-gradient(145deg,#5f42a4,#1d183a); }
.game-card--bounds .game-card__art { background:linear-gradient(145deg,#b95028,#3b1610); }
.game-card--elimination .game-card__art { background:linear-gradient(145deg,#294256,#101b24); }
.game-card--surd .game-card__art { background:linear-gradient(145deg,#12755b,#0a2922); }
.game-card--surdo .game-card__art { background:linear-gradient(145deg,#7d386c,#2f142a); }
.game-card--trig .game-card__art { background:linear-gradient(145deg,#9e760b,#392b07); }
.game-empty { border:1px solid rgba(255,255,255,.08);border-radius:1rem;background:#11181e;padding:2rem;color:#9aa9aa;text-align:center; }

.maths-labs-page #site-footer .future-footer { background:#060a0d; }

@media (max-width:1000px) {
  .labs-hero__content { width:min(40rem,64%); }
  .labs-hero__art { right:-8rem;width:52vw;opacity:.7; }
  .lab-carousel { grid-template-columns:minmax(0,1fr) 16rem; }
  .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:800px) {
  .labs-hero { align-items:end;padding-top:8rem; }
  .labs-hero__content { width:100%; }
  .labs-hero__art { top:12%;right:-12%;width:64vw;height:52%;opacity:.3; }
  .labs-hero h1 { font-size:clamp(3.25rem,12vw,5.6rem); }
  .labs-heading { gap:1.2rem;grid-template-columns:1fr; }
  .lab-carousel { min-height:0;grid-template-columns:1fr; }
  .lab-carousel__stage { min-height:32rem; }
  .lab-carousel__nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lab-carousel__nav>button { min-height:5.2rem;grid-template-columns:3.5rem minmax(0,1fr); }
  .lab-carousel__nav>button>img,.lab-carousel__shake-thumb { width:3.5rem;height:3.5rem; }
  .lab-carousel__controls { grid-column:1/-1;grid-template-columns:2.65rem 1fr 2.65rem; }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:540px) {
  .labs-container { width:min(calc(100% - 1.5rem),74rem); }
  .labs-hero { min-height:100svh;padding:6.5rem 1rem 4.5rem; }
  .labs-hero__art { top:11%;right:-28%;width:90vw;height:42%; }
  .labs-hero__poster--shakes { display:none; }
  .labs-lockup { margin-bottom:2rem; }
  .labs-lockup img { width:3.1rem;height:3.1rem; }
  .labs-hero__rail { justify-content:center; }
  .labs-hero__rail span:not(:first-child) { display:none; }
  .labs-section { padding-block:4.5rem; }
  .labs-heading h2 { font-size:2.8rem; }
  .lab-carousel__stage { min-height:30rem; }
  .lab-slide h3 { font-size:2.8rem; }
  .lab-slide__copy { padding:1.3rem; }
  .lab-carousel__nav { display:flex;overflow-x:auto;flex-direction:row;padding-bottom:.35rem;scrollbar-width:none; }
  .lab-carousel__nav::-webkit-scrollbar { display:none; }
  .lab-carousel__nav>button { min-width:13.5rem;flex:0 0 13.5rem; }
  .lab-carousel__controls { min-width:10rem;flex:0 0 10rem;margin-top:0;border-top:0;padding-top:.65rem; }
  .game-filter { flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:none; }
  .game-filter::-webkit-scrollbar { display:none; }
  .game-filter button { flex:0 0 auto; }
  .game-grid { grid-template-columns:1fr; }
  .game-card { display:grid;grid-template-columns:42% 1fr; }
  .game-card__art { height:100%;aspect-ratio:auto; }
  .game-card__art>b { font-size:3rem; }
  .game-card__body>span { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important; }
}

@media print { .game-filter { display:none; } }
