/* color-mix.css (26 Oct 2026): Color Mix, the ink kitchen game. The night of the other games; a draw-down card (the target above, your
   mix below, as an ink proof), the can seen from above where the drops land and swirl, the recipe slip, the base ink pots in a row. */
body.page-color-mix,body.page-color-mix main{background:#0e0f11}
body.page-color-mix .header.site-nav,body.page-color-mix .header.site-nav.is-scrolled{background:#0e0f11!important;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.08)!important}
body.page-color-mix .site-nav .brand img{content:url(assets/logo-white.png)}
body.page-color-mix .site-nav .nav-links a{color:#e8e8ed}
body.page-color-mix .site-nav .nav-links a[aria-current="page"]{color:#fff}
body.page-color-mix .site-nav .button.small.nav-demo{color:#fff!important;border-color:rgba(255,255,255,.35)!important;background:transparent!important}
body.page-color-mix .site-nav .button.small:not(.nav-demo){background:#fff!important;color:#141416!important;border-color:#fff!important}
body.page-color-mix .site-nav .menu-symbol i{background:#fff}

.cmx{padding:clamp(40px,6vw,88px) var(--pg-gut,24px) clamp(56px,7vw,96px);color:#f5f5f7}
.cmx-head{max-width:1080px;margin:0 auto clamp(24px,3.5vw,40px)}
.cmx-head h1{margin:0;font-size:clamp(52px,7.5vw,104px);line-height:.92;letter-spacing:-.04em;font-weight:600;color:#fff}
.cmx-head h1 span{color:#F50C0C}
.cmx-head p{margin:14px 0 0;max-width:36em;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:#a1a1a6}

.mx{max-width:1080px;margin:0 auto;padding:clamp(14px,2vw,24px);border-radius:28px;background:#16171a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -50px #000}
.mx-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 4px 16px}
.mx-round,.mx-total{margin:0;font-size:14px;color:#a1a1a6;font-variant-numeric:tabular-nums}
.mx-round b,.mx-total b{color:#fff}
.mx-pips{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.mx-pips li{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.mx-pips li.is-on{background:#fff}.mx-pips li.is-done{background:#64A932}

.mx-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(12px,1.6vw,20px)}
/* the draw-down: one card, two inks */
.mx-draw{display:grid;grid-template-rows:1fr 1fr;min-height:clamp(300px,34vw,420px);border-radius:20px;overflow:hidden;background:#f4f3ee;padding:10px;gap:0}
.mx-tgt,.mx-you{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:18px 20px;background:var(--c,#2a2b30);transition:background-color .35s ease,color .35s ease}
.mx-tgt{border-radius:12px 12px 0 0}
.mx-you{border-radius:0 0 12px 12px}
.mx-lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.mx-tgt b,.mx-you b{font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.01em}
.mx-de{position:absolute;right:16px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(14,15,17,.82);color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.mx-de[data-ok="y"]{background:#2f8a1f}.mx-de[data-ok="m"]{background:#a86a00}
.mx-de[hidden]{display:none}

/* the can seen from above and the recipe slip */
.mx-side{display:grid;grid-template-rows:auto 1fr;gap:14px;min-width:0}
.mx-can{position:relative;justify-self:center;width:min(100%,200px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2a2b30 58%,#9a9ca3 60%,#d9dbe0 64%,#7d8087 68%,#3a3b40 70%,transparent 71%)}
.mx-ink{position:absolute;inset:15%;border-radius:50%;transition:background-color .35s ease;box-shadow:inset 0 8px 18px rgba(0,0,0,.35)}
.mx-swirl{position:absolute;inset:15%;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,rgba(255,255,255,.28),transparent 20%,rgba(0,0,0,.18) 45%,transparent 65%,rgba(255,255,255,.2) 85%,transparent)}
.mx-swirl.is-on{animation:cm-swirl 1.1s cubic-bezier(.23,1,.32,1)}
@keyframes cm-swirl{0%{opacity:.9;transform:rotate(0) scale(.6)}100%{opacity:0;transform:rotate(320deg) scale(1)}}
.mx-drop{position:absolute;left:50%;top:-14%;width:14px;height:18px;margin-left:-7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c,#fff);opacity:0;pointer-events:none}
.mx-drop.is-on{animation:cm-drop .45s cubic-bezier(.55,0,.9,.5)}
@keyframes cm-drop{0%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(110px) scale(.8)}100%{opacity:0;transform:translateY(118px) scale(.4)}}
.mx-recipe{min-width:0;padding:14px 16px;border-radius:16px;background:#0f1012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mx-rk{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8e8e93}
.mx-rl{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.mx-rl li{display:grid;grid-template-columns:14px minmax(0,1fr) auto auto 28px;align-items:center;gap:10px;font-size:14px;color:#e8e8ed;font-variant-numeric:tabular-nums}
.mx-rl i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.mx-rl i.is-ext,.mx-pot i.is-ext{background:repeating-linear-gradient(45deg,#e9e8e2 0 3px,#cfcdc5 3px 6px)}
.mx-rl b{font-weight:600}
.mx-rl em{font-style:normal;color:#8e8e93;font-size:13px;min-width:5.5em;text-align:right}
.mx-rl button{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px;line-height:1;cursor:pointer}
.mx-rl button:hover{background:rgba(255,255,255,.16)}
.mx-empty{margin:0;font-size:14px;color:#8e8e93}
.mx-empty[hidden]{display:none}

/* the base ink pots */
.mx-inks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}
.mx-inks li{margin:0;min-width:0}
.mx-pot{display:grid;justify-items:center;gap:8px;width:100%;padding:12px 4px 10px;border:0;border-radius:16px;background:rgba(255,255,255,.04);color:#c9cbd1;font:inherit;font-size:12.5px;line-height:1.2;cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .2s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.mx-pot i{width:clamp(30px,3.6vw,44px);aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),0 0 0 3px #2a2b30,0 0 0 4px rgba(255,255,255,.14)}
.mx-pot:hover{background:rgba(255,255,255,.08);color:#fff}
.mx-pot:active{transform:scale(.95)}
.mx-pot:focus-visible{outline:2px solid #fff;outline-offset:2px}

.mx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.mx-acts[hidden]{display:none}
.mx-sp{flex:1}
.mx-ghost{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;color:#a1a1a6;font:inherit;font-size:15px;cursor:pointer}
.mx-ghost:hover{color:#fff}
.mx-btn{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:#141416;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .2s}
.mx-btn.mx-sec{background:rgba(255,255,255,.1);color:#fff}
.mx-btn:active{transform:scale(.96)}
.mx-btn:disabled{opacity:.35;cursor:default;transform:none}
.mx-btn:focus-visible,.mx-ghost:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mx-res{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-top:16px}
.mx-res[hidden]{display:none}
.mx-pct{margin:0;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.mx-pct span{font-size:20px;color:#a1a1a6;margin-left:2px}
.mx-verdict{margin:0;font-size:15px;color:#a1a1a6}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx[data-state="end"] .mx-top,.mx[data-state="end"] .mx-stage,.mx[data-state="end"] .mx-inks,.mx[data-state="end"] .mx-acts,.mx[data-state="end"] .mx-res{display:none}
.mx-end{display:grid;justify-items:center;gap:10px;text-align:center;padding:clamp(12px,3vw,32px) 0}
.mx-end-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a1a1a6}
.mx-end-num{margin:0;font-size:clamp(72px,10vw,120px);line-height:.9;font-weight:600;letter-spacing:-.05em;color:#fff}
.mx-end-num span{font-size:.35em;color:#a1a1a6}
.mx-end-line{margin:0;font-size:17px;color:#a1a1a6;max-width:30em}
.mx-recap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;max-width:700px;margin:18px 0 0;padding:0;list-style:none}
.mx-recap li{display:grid;justify-items:center;gap:4px;font-size:13px;color:#a1a1a6}
.mx-recap b{color:#fff;font-size:15px}.mx-recap em{font-style:normal;font-size:12px}
.mx-rc{width:100%;max-width:96px;aspect-ratio:1;border-radius:14px;background:linear-gradient(var(--a) 50%,var(--b) 50%)}
.mx-link{margin-top:8px;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
@media (max-width:860px){
  .mx-stage{grid-template-columns:1fr}
  .mx-side{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto;align-items:start}
  .mx-can{width:120px}
  .mx-inks{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mx-pips{display:none}
  .mx-recap{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
}
@media (max-width:520px){.mx-res{grid-template-columns:auto 1fr}.mx-res .mx-btn{grid-column:1/-1}.mx-sp{display:none}.mx-acts .mx-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.mx-tgt,.mx-you,.mx-ink,.mx-pot,.mx-btn{transition:none}}
@media (max-width:860px){
  .mx-side{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .mx-can{width:96px}
  .mx-recipe{padding:12px}
  .mx-rl li{grid-template-columns:12px minmax(0,1fr) auto 26px;gap:8px;font-size:13px}
  .mx-rl i{width:12px;height:12px}
  .mx-rl em{display:none}
  .mx-rl button{width:26px;height:26px}
  .mx-draw{min-height:260px}
}

/* Correct with ColorLoop (27 Oct 2026): the five dots of ColorLoop on the button; the chip says what ColorLoop added */
.mx-btn.mx-lp{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#141416}
.mx-dots{display:inline-flex;gap:3px}
.mx-dots i{width:7px;height:7px;border-radius:50%;background:#F50C0C}
.mx-dots i:nth-child(2){background:#FAA1DB}.mx-dots i:nth-child(3){background:#19AAE3}.mx-dots i:nth-child(4){background:#64A932}.mx-dots i:nth-child(5){background:#FBCB05}
.mx-acts .mx-btn[data-approve]{background:#64A932;color:#fff}
.mx-fixed{position:absolute;left:16px;top:16px;max-width:calc(100% - 140px);padding:6px 12px;border-radius:999px;background:rgba(14,15,17,.82);color:#fff;font-size:13px;font-weight:500}
.mx-fixed[hidden]{display:none}
@media (max-width:520px){.mx-btn.mx-lp{flex-basis:100%;justify-content:center}}

/* v2 (27 Oct 2026, Hugues: nothing moves when you add ink; the two colors big, no white frame; on a phone the pots stay put) */
.mx-draw{padding:0;background:none;min-height:clamp(320px,38vw,460px);border-radius:20px}
.mx-tgt{border-radius:20px 20px 0 0}.mx-you{border-radius:0 0 20px 20px}
.mx-side{grid-template-rows:auto minmax(0,1fr)}
.mx-recipe{height:clamp(170px,16vw,220px);overflow-y:auto;overscroll-behavior:contain}
.mx-dock{margin-top:16px}
.mx-dock .mx-inks{margin-top:0}
@media (max-width:860px){
  .mx{padding:12px 12px 0;border-radius:22px}
  .mx-top{margin:0 2px 10px}
  .mx-draw{min-height:0;height:min(40svh,340px)}
  .mx-tgt,.mx-you{padding:14px 16px}
  .mx-side{grid-template-columns:84px minmax(0,1fr);gap:10px;margin-top:10px}
  .mx-can{width:84px}
  .mx-recipe{height:104px;padding:10px 12px}
  .mx-rk{margin-bottom:6px}
  /* the dock: pots and actions stuck to the bottom of the screen */
  .mx-dock{position:sticky;bottom:0;z-index:5;margin:12px -12px 0;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(22,23,26,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 22px 22px}
  .mx-inks{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .mx-pot{gap:4px;padding:6px 2px;font-size:11px;border-radius:12px}
  .mx-pot i{width:30px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 2px #2a2b30,0 0 0 3px rgba(255,255,255,.14)}
  .mx-acts{gap:6px;margin-top:8px}
  .mx-ghost{min-height:40px;padding:0 10px;font-size:14px}
  .mx-btn{min-height:44px;padding:0 16px;font-size:15px}
  .mx-res{margin-top:8px}
}
@media (max-width:520px){
  .mx-acts{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"fix fix" "measure approve" "undo clear"}
  .mx-acts [data-fix]{grid-area:fix}.mx-acts [data-measure]{grid-area:measure}.mx-acts [data-approve]{grid-area:approve}
  .mx-acts [data-undo]{grid-area:undo}.mx-acts [data-clear]{grid-area:clear}
  .mx-acts .mx-ghost{min-height:30px}
  .mx-sp{display:none}
}

/* v3: Undo and Empty in the recipe header; one row of actions; a compact dock on phones */
.mx-rk{display:flex;align-items:center;gap:4px}
.mx-rk span{flex:1}
.mx-rk .mx-ghost{min-height:28px;padding:0 8px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:#a1a1a6;border-radius:999px}
.mx-rk .mx-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.mx-acts{justify-content:flex-end}
.mx-acts [data-fix]{margin-right:auto}
@media (max-width:860px){
  .mx-draw{height:min(32svh,270px)}
  .mx-pot{padding:4px 2px;font-size:10px}
  .mx-pot i{width:26px}
  .mx-acts{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:none;gap:6px}
  .mx-acts [data-fix]{grid-area:auto;margin:0;padding:0 12px;font-size:14px}
  .mx-acts [data-measure],.mx-acts [data-approve]{grid-area:auto}
  .mx-btn.mx-lp{flex-basis:auto;gap:6px}
  .mx-dots i{width:5px;height:5px}
  .mx-recipe{height:92px}
}
@media (max-width:400px){.mx-acts [data-fix]{font-size:13px}.mx-acts .mx-btn{padding:0 12px}}
@media (max-width:860px){.mx-lp-l{display:none}body.page-color-mix .chat-widget{display:none}.mx-acts [data-fix]{white-space:nowrap}}

/* v4 (27 Oct 2026, Hugues): two buttons, the same size: Find the solution (ColorLoop) and Validate */
.mx-acts{display:grid!important;grid-template-columns:1fr 1fr;grid-template-areas:none!important;gap:10px}
.mx-acts .mx-btn{width:100%;margin:0!important;justify-content:center;min-height:52px;font-size:16px;padding:0 14px;white-space:nowrap}
.mx-acts [data-fix]{grid-area:auto!important}
@media (max-width:860px){.mx-acts .mx-btn{min-height:50px;font-size:15px}.mx-dots i{width:6px;height:6px}}

/* v5 (27 Oct 2026): room between the pots and the two buttons; Find the solution on the left */
.mx-acts{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:860px){.mx-acts{margin-top:12px;padding-top:12px}}
.mx-fixed{max-width:calc(100% - 120px)}

/* v6 (27 Oct 2026): Find the solution on black; v7 the result as on dialed.gg: the score big in the corner of the draw-down */
.mx-btn.mx-lp{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.mx-btn.mx-lp:hover{background:#0a0a0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.mx-draw{position:relative}
.mx-big{position:absolute;right:22px;top:14px;z-index:3;margin:0;color:#fff;font-size:clamp(64px,8vw,104px);line-height:1;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-shadow:0 2px 24px rgba(0,0,0,.18)}
.mx-big span{font-size:.38em;margin-left:2px;opacity:.75}
.mx-big[hidden]{display:none}
.mx[data-state="result"] .mx-res .mx-pct{display:none}
.mx[data-state="result"] .mx-res{grid-template-columns:1fr auto}
@media (max-width:860px){.mx-big{right:16px;top:10px}}
.mx-acts[hidden]{display:none!important}
.mx-draw:has(.mx-reveal.is-roll) .mx-de,.mx-draw:has(.mx-reveal.is-boom) .mx-de{visibility:hidden}

/* v8 (27 Oct 2026, Hugues: make the end of a color obvious): ΔE big under the score, Next color on the card, the pots fade */
.mx-big{display:grid;justify-items:end;gap:8px}
.mx-big-n{margin:0;font-size:inherit;line-height:1}
.mx-big-de{margin:0;padding:8px 16px;border-radius:999px;background:#F50C0C;color:#fff;font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:none}
.mx-big-de[data-ok="y"]{background:#2f8a1f}.mx-big-de[data-ok="m"]{background:#b07a00}
.mx-go{position:absolute;right:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:#141416;
  font:inherit;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);transition:transform .16s cubic-bezier(.23,1,.32,1),gap .2s cubic-bezier(.23,1,.32,1)}
.mx-go span{font-size:20px;line-height:1}
.mx-go:hover{gap:14px}.mx-go:active{transform:scale(.96)}
.mx-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mx-go[hidden]{display:none}
.mx[data-state="result"] .mx-de,.mx[data-state="result"] .mx-res .mx-btn{display:none}
.mx[data-state="result"] .mx-res{grid-template-columns:1fr}
.mx[data-state="result"] .mx-inks,.mx[data-state="result"] .mx-side{opacity:.35;pointer-events:none;transition:opacity .3s ease}
@media (max-width:860px){.mx-go{right:12px;bottom:12px;min-height:46px;padding:0 18px;font-size:15px}.mx-big-de{font-size:18px;padding:6px 12px}}
.mx-big .mx-big-n,.mx-big .mx-big-n b,.mx-big .mx-big-n span{color:inherit!important}
.mx-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none}

/* Play with friends (27 Oct 2026) and the average ΔE at the end */
.mx-who{color:#fff;font-weight:600}
.mx-more{margin:14px 0 0;text-align:center}
.mx[data-state="end"] .mx-more{display:none}
.mx-end-de{margin:0;font-size:15px;color:#a1a1a6;font-variant-numeric:tabular-nums}.mx-end-de b{color:#fff;font-weight:600}
.mx-fr{color:#f5f5f7}
.mx-fr .fr-btn{background:#fff;color:#141416}
.mx-frt-w{width:100%;max-width:640px;overflow-x:auto}
.mx-frt{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;color:#d1d1d6}
.mx-frt th,.mx-frt td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;font-weight:500}
.mx-frt thead th{font-size:12px;color:#a1a1a6}.mx-frt thead th span{margin-left:6px}
.mx-frt tbody th{display:flex;align-items:center;gap:8px;color:#fff}
.mx-frt td i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;background:var(--g);vertical-align:-1px}
.mx-frs{flex:none;width:14px;height:14px;border-radius:4px;background:var(--c)}

/* fourteen base inks (27 Oct 2026, FX): two rows of seven on every screen; the names stay readable on a phone */
.mx-inks{grid-template-columns:repeat(7,minmax(0,1fr))!important}
.mx-pot span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.mx-inks{gap:4px 3px!important}.mx-pot{padding:5px 1px 4px!important;font-size:9.5px!important;letter-spacing:-.1px}.mx-pot i{width:28px!important}}
@media (max-width:560px){.mx-pot span{white-space:normal;overflow:visible;text-overflow:clip;min-height:2.2em;line-height:1.1;font-size:9.5px;letter-spacing:-.2px;hyphens:manual;text-align:center}}
/* phones: the recipe shows three inks at once, compact rows (27 Oct 2026) */
@media (max-width:560px){
  .mx .mx-recipe{height:128px}
  .mx .mx-draw{height:min(36svh,320px)}
  .mx .mx-rl{gap:2px}
  .mx .mx-rl li{min-height:26px}
  .mx .mx-rl button{width:24px;height:24px;min-height:0;align-self:center}
}