/* color-guesser.html: page styles (12 Oct 2026, ported from rutherford.fr/color-guesser, components/color-guesser.css).
Every rule is scoped to this page (body.page-color-guesser) and uses the cg- prefix. Markup: color-guesser-main.html,
built by page-color-guesser.js. The game's own buttons and headings reset the site's global rules (editorial.css,
launch.css, pages.css: button min-height and border, h2 size and tracking, p color, .pg-section h2 span in red).
Motion: every animation plays once; prefers-reduced-motion and the site's motion pause show everything at once. */
/* ================================================================ section: the game is the page, in the first screen */
body.page-color-guesser .cg-section{padding:clamp(20px,2.5vw,36px) var(--pg-gut,24px) clamp(56px,6vw,88px);border-top:0;
background:var(--pg-paper,#f4f3ec)}
body.page-color-guesser .cg-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.page-color-guesser .cg-noscript{margin:0 auto;max-width:52ch;text-align:center;font-size:17px;line-height:1.55;
color:var(--kt-t2,#33393a)}
body.page-color-guesser .cg-noscript a{color:var(--cl-primary,#155E7A);text-decoration:underline;text-underline-offset:3px}
body.page-color-guesser .cg{
--cg-ease:cubic-bezier(.23,1,.32,1);
--cg-text:var(--kt-ink,var(--cl-ink,#141416));
--cg-muted:var(--kt-t3,#4b5052);
--cg-line:var(--kt-line,rgba(22,24,22,.13));
--cg-soft:var(--kt-card,#f7f7f4);
--cg-btn:var(--kt-btn,#1D1D1F);
--cg-focus:var(--cl-primary,#155E7A);
--cg-ok:#1f7a45;
--cg-ko:#b42318;
/* Announce bar, header, section padding, question and progress row: the card, verdict included, fits under them. */
--cg-chrome:300px;
--cg-card-w:min(100%,460px,max(280px,calc((100svh - var(--cg-chrome)) * .8)));
display:flex;flex-direction:column;align-items:center;text-align:center;
font-family:inherit;color:var(--cg-text)
}
body.page-color-guesser .cg.has-challenge{--cg-chrome:346px}
@supports not (height:100svh){
body.page-color-guesser .cg{--cg-card-w:min(100%,460px,max(280px,calc((100vh - var(--cg-chrome)) * .8)))}
}
/* the game's headings and paragraphs: no site defaults (h2 size, tracking, muted paragraphs, red spans) */
body.page-color-guesser .cg h2,body.page-color-guesser .cg p{margin:0;font-family:inherit;text-wrap:pretty}
body.page-color-guesser .cg ol{list-style:none;margin:0;padding:0}
/* the game's buttons: no site defaults (44px minimum, border, focus ring offset) */
body.page-color-guesser .cg button{appearance:none;-webkit-appearance:none;margin:0;min-height:0;border:0;
font:inherit;letter-spacing:normal;text-transform:none;-webkit-tap-highlight-color:transparent}
body.page-color-guesser .cg .cg-challenge{display:inline-block;margin:0 0 12px;padding:7px 14px;border-radius:999px;
background:#fff;border:1px solid var(--cg-line);font-size:15px;line-height:1.35;font-weight:600;color:var(--cg-text)}
body.page-color-guesser .cg .cg-question{margin:0;font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.15;
letter-spacing:-.03em;font-weight:700;color:var(--cg-text);text-wrap:balance}
body.page-color-guesser .cg .cg-brand{white-space:nowrap;color:inherit}
/* ================================================================ stage and card */
body.page-color-guesser .cg-stage{position:relative;width:var(--cg-card-w);margin-top:16px}
body.page-color-guesser .cg-card,
body.page-color-guesser .cg-result{position:relative;aspect-ratio:4/5;border-radius:16px;isolation:isolate;
box-shadow:0 24px 60px rgba(17,17,17,.14)}
/* no overflow clipping: the confetti may fly past the card's edge */
body.page-color-guesser .cg-card{display:grid;grid-template-columns:1fr 1fr}
body.page-color-guesser .cg-card.is-miss{animation:cg-shake 360ms cubic-bezier(.36,.07,.19,.97) both}
body.page-color-guesser .cg .cg-half{position:relative;padding:0;color:inherit;
cursor:pointer;transition:filter 160ms ease-out,box-shadow 200ms ease-out}
body.page-color-guesser .cg .cg-half:first-child{border-radius:16px 0 0 16px}
body.page-color-guesser .cg .cg-half:nth-child(2){border-radius:0 16px 16px 0}
body.page-color-guesser .cg .cg-half:disabled{cursor:default}
body.page-color-guesser .cg .cg-half:focus-visible{outline:none;
box-shadow:inset 0 0 0 4px rgba(255,255,255,.95),inset 0 0 0 7px rgba(17,17,17,.55)}
body.page-color-guesser .cg .cg-half:not(:disabled):active{filter:brightness(.94)}
body.page-color-guesser .cg .cg-half.is-real{box-shadow:inset 0 0 0 6px rgba(255,255,255,.92)}
body.page-color-guesser .cg-bubble{position:absolute;z-index:3;top:4.15%;left:10.4%;width:clamp(32px,14.1%,46px);
aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;
font-size:clamp(15px,1.25rem,20px);font-weight:600;line-height:1;transition:transform 200ms var(--cg-ease)}
body.page-color-guesser .cg-half.is-real .cg-bubble{animation:cg-bump 420ms var(--cg-ease) both}
body.page-color-guesser .cg-mark{width:62%;height:62%;animation:cg-pop 220ms var(--cg-ease) both}
body.page-color-guesser .cg .cg-logo{position:absolute;left:50%;top:50%;max-width:none;height:auto;
transform:translate(-50%,-50%);pointer-events:none;user-select:none;-webkit-user-select:none;
animation:cg-fade 240ms ease-out both}
/* the verdict sits inside the card, under the thumb on a phone */
body.page-color-guesser .cg-verdict{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;
align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:14px;
background:rgba(255,255,255,.96);box-shadow:0 10px 30px rgba(17,17,17,.18);text-align:left;
animation:cg-rise 280ms var(--cg-ease) both}
body.page-color-guesser .cg .cg-verdict p{font-size:.98rem;line-height:1.3;color:var(--cg-text)}
body.page-color-guesser .cg-verdict-gap{display:block;margin-top:2px;font-size:.82rem;color:var(--cg-muted)}
body.page-color-guesser .cg-verdict .is-right,
body.page-color-guesser .cg-verdict .is-wrong{font-weight:700}
body.page-color-guesser .cg-verdict .is-right{color:var(--cg-ok)}
body.page-color-guesser .cg-verdict .is-wrong{color:var(--cg-ko)}
body.page-color-guesser .cg .cg-next{flex:none;min-height:44px;padding:0 18px;border-radius:999px;
background:var(--cg-btn);color:#fff;font-size:.95rem;font-weight:650;line-height:1.2;cursor:pointer;
transition:transform 160ms ease-out}
body.page-color-guesser .cg .cg-next:active{transform:scale(.97)}
body.page-color-guesser .cg .cg-next:focus-visible{outline:2px solid var(--cg-focus);outline-offset:3px}
/* measurement readout on both patches once a side is picked: hex, then L*a*b* (D50), what a spectro reports */
body.page-color-guesser .cg-read{position:absolute;z-index:2;top:calc(4.15% + clamp(32px,14.1%,46px) + 12px);
left:10.4%;display:grid;gap:1px;text-align:left;font-size:clamp(.68rem,.9vw,.78rem);line-height:1.3;
font-variant-numeric:tabular-nums;letter-spacing:.01em;color:rgba(255,255,255,.92);pointer-events:none;
animation:cg-rise 280ms var(--cg-ease) both;animation-delay:120ms}
body.page-color-guesser .cg-read.is-light{color:rgba(28,28,30,.82)}
body.page-color-guesser .cg-read-hex{margin-bottom:2px;font-weight:650}
/* wide screens: "next" sits beside the card at mid-height, where the pointer already is; the card's own one hides */
body.page-color-guesser .cg .cg-next-side{display:none}
@media (min-width:1100px){
body.page-color-guesser .cg-verdict .cg-next{display:none}
body.page-color-guesser .cg .cg-next-side{position:absolute;z-index:5;top:50%;left:calc(100% + 28px);display:inline-flex;
align-items:center;gap:10px;min-height:56px;padding:0 20px 0 24px;border-radius:999px;background:var(--cg-btn);
color:#fff;font-size:1rem;font-weight:650;line-height:1.2;white-space:nowrap;cursor:pointer;transform:translateY(-50%);
box-shadow:0 12px 30px rgba(17,17,17,.18);transition:transform 160ms ease-out;
animation:cg-side-in 300ms var(--cg-ease) backwards;animation-delay:160ms}
body.page-color-guesser .cg-next-side svg{width:20px;height:20px;transition:transform 200ms var(--cg-ease)}
body.page-color-guesser .cg .cg-next-side:active{transform:translateY(-50%) scale(.97)}
body.page-color-guesser .cg .cg-next-side:focus-visible{outline:2px solid var(--cg-focus);outline-offset:3px}
}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
body.page-color-guesser .cg-next-side:hover svg{transform:translateX(3px)}
}
/* ================================================================ under the card: progress, sound, the ΔE note */
body.page-color-guesser .cg-track{margin-top:20px;display:grid;justify-items:center;width:100%}
body.page-color-guesser .cg-track-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%}
body.page-color-guesser .cg .cg-steps{grid-column:2;display:flex;gap:8px}
/* one patch per round, filled with the brand's real color once played, like a control bar being printed */
body.page-color-guesser .cg-step{position:relative;width:28px;height:28px;border-radius:8px;background:var(--cg-soft);
box-shadow:inset 0 0 0 1px var(--cg-line);display:grid;place-items:center;color:#fff;transition:box-shadow 200ms ease-out}
body.page-color-guesser .cg-step.is-current{box-shadow:inset 0 0 0 2px var(--cg-text)}
body.page-color-guesser .cg-step.is-ok,
body.page-color-guesser .cg-step.is-ko{background:var(--patch);box-shadow:none;animation:cg-patch-in 320ms var(--cg-ease) both}
body.page-color-guesser .cg-step-mark{width:15px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
body.page-color-guesser .cg .cg-sound{grid-column:3;justify-self:start;margin-left:14px;width:32px;height:32px;padding:0;
border-radius:50%;background:transparent;color:var(--cg-muted);display:grid;place-items:center;cursor:pointer;
transition:color 160ms ease,transform 160ms ease-out}
body.page-color-guesser .cg .cg-sound:active{transform:scale(.94)}
body.page-color-guesser .cg .cg-sound:focus-visible{outline:2px solid var(--cg-focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
body.page-color-guesser .cg .cg-sound:hover{color:var(--cg-text)}
}
body.page-color-guesser .cg-sound-icon{width:20px;height:20px}
body.page-color-guesser .cg .cg-gap{margin:14px auto 0;max-width:52ch;font-size:1rem;line-height:1.55;color:var(--cg-muted);
animation:cg-rise 260ms var(--cg-ease) both}
/* ================================================================ end: result card, then the closed-loop message */
body.page-color-guesser .cg-result{display:flex;flex-direction:column;padding:clamp(22px,6%,32px);background:#fff;text-align:left}
body.page-color-guesser .cg .cg-bar-label{font-size:.9rem;line-height:1.4;font-weight:600;color:var(--cg-muted)}
body.page-color-guesser .cg .cg-bar{margin:12px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
body.page-color-guesser .cg-bar li{display:grid;gap:6px;min-width:0}
body.page-color-guesser .cg-patch{position:relative;aspect-ratio:3/4;border-radius:8px;background:var(--patch);color:#fff;
display:grid;place-items:center;clip-path:inset(100% 0 0 0 round 8px);animation:cg-print 460ms var(--cg-ease) forwards;
animation-delay:calc(var(--i) * 90ms + 120ms)}
body.page-color-guesser .cg-patch.is-light{color:#1c1c1e}
body.page-color-guesser .cg-patch-mark{width:46%;height:46%}
body.page-color-guesser .cg-patch-name{font-size:.72rem;line-height:1.2;color:var(--cg-muted);text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:cg-fade 240ms ease-out forwards;
animation-delay:calc(var(--i) * 90ms + 360ms)}
body.page-color-guesser .cg-score-wrap{position:relative;flex:1;display:grid;place-content:center;text-align:center}
body.page-color-guesser .cg .cg-score{font-size:clamp(4.2rem,11vw,5.6rem);line-height:1;letter-spacing:-.04em;font-weight:750;
font-variant-numeric:tabular-nums;color:var(--cg-text);animation:cg-land 520ms var(--cg-ease) both;animation-delay:680ms}
body.page-color-guesser .cg-score span{font-size:.42em;letter-spacing:-.02em;color:var(--cg-muted)}
body.page-color-guesser .cg .cg-rank{margin:10px 0 0;font-size:1.12rem;line-height:1.3;font-weight:650;letter-spacing:-.015em;
color:var(--cg-text);animation:cg-rise 360ms var(--cg-ease) both;animation-delay:860ms}
body.page-color-guesser .cg-share{display:grid;gap:10px;animation:cg-rise 360ms var(--cg-ease) both;animation-delay:1000ms}
body.page-color-guesser .cg .cg-share-main{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
padding:0 18px;border:0;border-radius:999px;background:var(--cg-btn);color:#fff;font-size:.98rem;font-weight:650;
line-height:1.2;text-decoration:none;cursor:pointer;transition:transform 160ms ease-out}
body.page-color-guesser .cg .cg-share-main:active{transform:scale(.97)}
body.page-color-guesser .cg-share-more{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.page-color-guesser .cg .cg-share-more a,
body.page-color-guesser .cg .cg-share-more button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;
padding:0 12px;border:1px solid var(--cg-line);border-radius:999px;background:#fff;color:var(--cg-text);font-size:.9rem;
font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
transition:transform 160ms ease-out,background-color 160ms ease-out}
body.page-color-guesser .cg .cg-share-more a:active,
body.page-color-guesser .cg .cg-share-more button:active{transform:scale(.97)}
body.page-color-guesser .cg .cg-share-main:focus-visible,
body.page-color-guesser .cg .cg-share-more a:focus-visible,
body.page-color-guesser .cg .cg-share-more button:focus-visible{outline:2px solid var(--cg-focus);outline-offset:3px}
body.page-color-guesser .cg-done{margin-top:28px;max-width:600px}
body.page-color-guesser .cg .cg-done-body{margin:0 auto;max-width:54ch;font-size:1.05rem;line-height:1.55;color:var(--cg-muted)}
body.page-color-guesser .cg-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
/* the site's pill buttons (pages-v3.css), restated so the page also stands alone */
body.page-color-guesser .cg .cg-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:0 24px;border:1px solid var(--cg-btn);border-radius:999px;background:var(--cg-btn);color:#fff;
font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;transform:none;box-shadow:none;
transition:background-color 160ms ease-out,color 160ms ease-out,border-color 160ms ease-out}
body.page-color-guesser .cg .cg-actions .button.ghost{background:transparent;color:var(--cg-text);border-color:var(--cg-text)}
body.page-color-guesser .cg .cg-actions .button:focus-visible{outline:2px solid var(--cg-focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
body.page-color-guesser .cg .cg-half:not(:disabled):hover .cg-bubble{transform:scale(1.08)}
body.page-color-guesser .cg .cg-share-more a:hover,
body.page-color-guesser .cg .cg-share-more button:hover{background:var(--cg-soft)}
body.page-color-guesser .cg .cg-actions .button:hover{background:#000;border-color:#000;color:#fff;transform:none}
body.page-color-guesser .cg .cg-actions .button.ghost:hover{background:var(--cg-text);border-color:var(--cg-text);color:#fff}
}
/* wide screens: the message and its actions sit beside the result card at mid-height, where "next" was, so the
call to action stays in the first screen */
@media (min-width:1100px){
body.page-color-guesser .cg-done{position:absolute;top:50%;left:calc(100% + 32px);width:min(340px,calc((100vw - 100%) / 2 - 64px));
margin:0;text-align:left;transform:translateY(-50%)}
body.page-color-guesser .cg .cg-done-body{margin:0}
body.page-color-guesser .cg-actions{justify-content:flex-start}
}
/* ================================================================ CMYK confetti: dots and short strips, thrown once */
body.page-color-guesser .cg-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:4}
body.page-color-guesser .cg-burst-win{top:46%}
body.page-color-guesser .cg-burst i{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);
height:var(--s);border-radius:50%;background:var(--c);opacity:0;
animation:cg-burst 820ms cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d)}
body.page-color-guesser .cg-burst i.is-strip{height:calc(var(--s) * 2.2);border-radius:2px}
body.page-color-guesser .cg-burst-win i{animation-duration:1000ms;animation-delay:calc(700ms + var(--d))}
@keyframes cg-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes cg-pop{from{opacity:0;transform:scale(.9)}}
@keyframes cg-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes cg-fade{from{opacity:0}to{opacity:1}}
@keyframes cg-patch-in{from{transform:scale(.85)}}
@keyframes cg-print{to{clip-path:inset(0 0 0 0 round 8px)}}
@keyframes cg-land{from{opacity:0;transform:scale(.92);filter:blur(6px)}}
@keyframes cg-side-in{from{opacity:0;transform:translate(-10px,-50%)}}
@keyframes cg-shake{
10%,90%{transform:translateX(-2px)}
20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-6px)}
40%,60%{transform:translateX(6px)}
}
@keyframes cg-burst{
0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.6)}
12%{opacity:1}
100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}
}
/* ================================================================ phones */
@media (max-width:760px){
body.page-color-guesser .cg-section{padding-left:16px;padding-right:16px}
body.page-color-guesser .cg-stage{margin-top:14px}
body.page-color-guesser .cg-track{margin-top:16px}
/* the long ΔE note would push the next question down: the card's verdict already carries the short version */
body.page-color-guesser .cg .cg-gap{display:none}
}
/* ================================================================ reduced motion, and the site's motion pause
(html[data-motion="paused"] freezes animations at their first frame: here everything is shown instead) */
@media (prefers-reduced-motion:reduce){
body.page-color-guesser .cg-gap,body.page-color-guesser .cg-read,body.page-color-guesser .cg-next-side,
body.page-color-guesser .cg-mark,body.page-color-guesser .cg-logo,body.page-color-guesser .cg-verdict,
body.page-color-guesser .cg-step.is-ok,body.page-color-guesser .cg-step.is-ko,body.page-color-guesser .cg-score,
body.page-color-guesser .cg-rank,body.page-color-guesser .cg-share,body.page-color-guesser .cg-patch-name,
body.page-color-guesser .cg-card.is-miss,body.page-color-guesser .cg-half.is-real .cg-bubble{animation:none;opacity:1}
body.page-color-guesser .cg-patch{animation:none;clip-path:none}
body.page-color-guesser .cg-burst{display:none}
body.page-color-guesser .cg-bubble,body.page-color-guesser .cg .cg-half,body.page-color-guesser .cg-step{transition:none}
}
html[data-motion="paused"] body.page-color-guesser .cg *{animation:none!important;transition:none!important}
html[data-motion="paused"] body.page-color-guesser .cg-patch{clip-path:none}
html[data-motion="paused"] body.page-color-guesser .cg-patch-name{opacity:1}
html[data-motion="paused"] body.page-color-guesser .cg-burst{display:none}