/* hue-test.html (16 Oct 2026): the 100 hue test, a screen game after the Farnsworth-Munsell 100 hue test. The game is built by
   page-hue-test.js into [data-hue-test]. The card is the black case of the physical test: a groove (the tray, .ht-rail) with a fixed
   cap at each end, the box of loose caps under it (.ht-pool, one socket per cap, so nothing shifts when a cap leaves), black rims
   around every color so each one is judged against the same neutral. Sizes follow the card's width (container queries): one row of
   22 places on a wide card, two rows of 11 on a tablet, three rows of 8 on a phone. Every rule is scoped to body.page-hue-test. */
body.page-hue-test .ht-section{padding:clamp(22px,3vw,44px) var(--pg-gut,24px) clamp(56px,6vw,88px);border-top:0;background:var(--pg-paper,#f4f3ec)}
body.page-hue-test .ht-head{max-width:760px;margin:0 auto clamp(20px,2.6vw,32px);text-align:center}
body.page-hue-test .ht-head h1{margin:0;font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.034em;font-weight:600;color:#141416;text-wrap:balance}
body.page-hue-test .ht-head h1 span{color:#F50C0C}
body.page-hue-test .ht-head p{margin:14px auto 0;max-width:40em;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:#4b5052;text-wrap:pretty}
body.page-hue-test .ht-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body.page-hue-test .ht-noscript{margin:0 auto;max-width:52ch;text-align:center;font-size:17px;line-height:1.55;color:#33393a}

/* ================================================================ the card */
body.page-hue-test .ht{max-width:1220px;margin:0 auto}
body.page-hue-test .ht-card{
  --ink:#141416;--case:#141416;--groove:#0a0a0b;--fg:#f5f5f7;--t2:#a1a1a6;--t3:#86868b;--line:rgba(255,255,255,.1);
  --out:cubic-bezier(.23,1,.32,1);
  position:relative;container-type:inline-size;border-radius:22px;background:var(--case);color:var(--fg);
  padding:clamp(16px,2.6vw,36px);box-shadow:0 30px 60px -30px rgba(20,20,22,.45);overflow:hidden;transition:background-color .35s ease,color .35s ease}
body.page-hue-test .ht-card button:not(.ht-cap){font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.page-hue-test .ht-card :focus-visible{outline:2px solid #fff;outline-offset:3px}
body.page-hue-test .ht-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px!important;padding:0 28px!important;border-radius:0;font-size:16px;font-weight:500;letter-spacing:-.005em;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .16s var(--out),opacity .2s}
body.page-hue-test .ht-btn:active{transform:scale(.97)}
body.page-hue-test .ht-primary{background:#fff!important;color:#141416!important}
body.page-hue-test .ht-primary:hover{background:#e8e8ed!important}
body.page-hue-test .ht-primary:disabled{opacity:.28;cursor:default;transform:none}
body.page-hue-test .ht-ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
body.page-hue-test .ht-ghost:hover{background:#fff!important;color:#141416!important}
body.page-hue-test .ht-link{display:inline-flex;align-items:center;min-height:44px!important;font-size:15px;font-weight:500;color:var(--fg);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
body.page-hue-test .ht-link:hover{text-decoration-thickness:2px}

/* ---------------------------------------------------------------- a cap: the color in a black rim, flat in the middle */
body.page-hue-test .ht-cap{position:relative;display:block;flex:none;width:var(--cap,44px);height:var(--cap,44px);border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 3px #050506,inset 0 0 0 4px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.45);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
body.page-hue-test .ht-card button.ht-cap{margin:0;padding:0;border:0;min-height:0;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.page-hue-test button.ht-cap{transition:transform .16s var(--out),opacity .15s linear}
@media (hover:hover) and (pointer:fine){body.page-hue-test button.ht-cap:hover{transform:translateY(-2px)}body.page-hue-test .is-dragging button.ht-cap:hover{transform:none}}
body.page-hue-test button.ht-cap:active{transform:scale(.94)}
body.page-hue-test .ht-cap.is-lifted{opacity:0}
body.page-hue-test .ht-fixed{box-shadow:inset 0 0 0 3px #050506,0 0 0 2px rgba(255,255,255,.55),0 2px 4px rgba(0,0,0,.45);cursor:default}
body.page-hue-test .ht-fixed::after{content:"";position:absolute;left:50%;top:-9px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(255,255,255,.7)}
body.page-hue-test .ht-cap.ht-float{position:fixed;left:0;top:0;z-index:200;margin:0;pointer-events:none;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 3px #050506,0 14px 28px rgba(0,0,0,.55);transform-origin:50% 50%}

/* ================================================================ intro */
body.page-hue-test .ht-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,5cqw,72px);padding:clamp(4px,1.5cqw,20px)}
body.page-hue-test .ht-ring-wrap{margin:0;display:grid;justify-items:center;gap:10px}
body.page-hue-test .ht-ring{display:block;width:min(100%,440px);height:auto;overflow:visible}
body.page-hue-test .ht-ring circle{stroke:#050506;stroke-width:1.1}
body.page-hue-test .ht-ring.is-drawing circle{animation:ht-cap-in .5s var(--out) both;animation-delay:calc(var(--i) * 9ms + 120ms);transform-box:fill-box;transform-origin:center}
@keyframes ht-cap-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
body.page-hue-test .ht-ring-cap{font-size:13px;color:var(--t3);letter-spacing:.02em}
body.page-hue-test .ht-h2{margin:0 0 18px;font-size:clamp(22px,2.4cqw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--fg)}
body.page-hue-test .ht-tip{margin:20px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14px;line-height:1.5;color:var(--t2)}
body.page-hue-test .ht-last{margin:16px 0 0;font-size:14px;color:var(--t2)}
body.page-hue-test .ht-last b{color:var(--fg)}
body.page-hue-test .ht-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--t3)}

/* ================================================================ play */
body.page-hue-test .ht-play{display:grid;gap:clamp(16px,2.4cqw,26px)}
body.page-hue-test .ht-bar{display:grid;gap:12px;justify-items:center;text-align:center}
body.page-hue-test .ht-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
body.page-hue-test .ht-tab{position:relative;display:grid;gap:2px;justify-items:center;min-width:96px;min-height:48px!important;padding:8px 14px 12px!important;border-radius:12px;
  color:var(--t2)!important;transition:background-color .2s ease,color .2s ease}
body.page-hue-test .ht-tab::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--a),var(--m),var(--b));opacity:.55}
body.page-hue-test .ht-tab:hover{background:rgba(255,255,255,.06)}
body.page-hue-test .ht-tab.is-on{background:rgba(255,255,255,.1);color:var(--fg)!important}
body.page-hue-test .ht-tab.is-on::after,body.page-hue-test .ht-tab.is-full::after{opacity:1}
body.page-hue-test .ht-tab-t{font-size:14px;font-weight:600;white-space:nowrap}
body.page-hue-test .ht-tab-n{font-size:12px;font-variant-numeric:tabular-nums;color:var(--t3)}
body.page-hue-test .ht-tab.is-full .ht-tab-n{color:#7fd16a}
body.page-hue-test .ht-hint{margin:0;min-height:1.5em;font-size:15px;line-height:1.5;color:var(--t2)}

/* the tray: a groove with a fixed cap at each end */
/* sizes from the card's inner width (100cqw): a container query styles what is inside the card, so the sizes live on .ht-play */
body.page-hue-test .ht-play{--cols:22;--gap:7px;--cap:min(46px,calc((100cqw - 32px - 21 * 7px) / 22));--pcap:46px;--pgap:12px}
body.page-hue-test .ht-tray{display:flex;justify-content:center}
body.page-hue-test .ht-rail{display:grid;grid-template-columns:repeat(var(--cols),var(--cap));gap:calc(var(--gap) + 4px) var(--gap);justify-content:center;
  padding:16px;border-radius:calc(var(--cap) / 2 + 16px);background:var(--groove);box-shadow:inset 0 2px 10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05)}
body.page-hue-test .ht-slot{display:block;width:var(--cap);height:var(--cap);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09)}
body.page-hue-test .ht-rail .ht-slot:nth-child(2),body.page-hue-test .ht-rail .ht-cap.is-placed+.ht-slot{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}   /* the next place to fill */
/* the box of loose caps: one socket each */
body.page-hue-test .ht-box{display:flex;justify-content:center;padding:clamp(14px,2.4cqw,24px);border-radius:18px;background:rgba(255,255,255,.035)}
body.page-hue-test .ht-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pgap);max-width:calc(10 * (var(--pcap) + var(--pgap)))}
body.page-hue-test .ht-socket{display:block;width:var(--pcap);height:var(--pcap);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06)}
body.page-hue-test .ht-socket .ht-cap{--cap:var(--pcap)}
body.page-hue-test .ht-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
body.page-hue-test .ht-foot [data-act="clear"]{color:var(--t2)}
body.page-hue-test .ht-foot [data-act="next"]{margin-left:auto}

@container (max-width:900px){
  body.page-hue-test .ht-play{--cols:11;--gap:8px;--cap:min(52px,calc((100cqw - 28px - 10 * 8px) / 11));--pcap:46px}
  body.page-hue-test .ht-rail{border-radius:26px;padding:14px}
  body.page-hue-test .ht-intro{grid-template-columns:1fr;justify-items:center}
  body.page-hue-test .ht-how{max-width:560px}
  body.page-hue-test .ht-ring{width:min(100%,340px)}
}
@container (max-width:520px){
  body.page-hue-test .ht-play{--cols:8;--gap:6px;--cap:calc((100cqw - 24px - 7 * 6px) / 8);--pcap:42px;--pgap:10px}
  body.page-hue-test .ht-rail{border-radius:22px;padding:12px}
  body.page-hue-test .ht-tabs{width:100%;flex-wrap:nowrap;gap:4px}
  body.page-hue-test .ht-tab{min-width:0;flex:1;padding:8px 6px 12px!important}
  body.page-hue-test .ht-tab::after{left:8px;right:8px}
  body.page-hue-test .ht-tab-t{font-size:13px}
  body.page-hue-test .ht-foot{justify-content:center}
  body.page-hue-test .ht-foot [data-act="next"]{margin-left:0;width:100%}
  body.page-hue-test .ht-foot [data-act="clear"]{order:2}
  /* on a phone the start button comes right under a smaller circle, the explanation follows */
  body.page-hue-test .ht-ring{width:min(100%,190px)}
  body.page-hue-test .ht-ring-cap{display:none}
  body.page-hue-test .ht-intro{gap:18px}
  body.page-hue-test .ht-how{display:flex;flex-direction:column}
}

/* ================================================================ result */
body.page-hue-test .ht-result{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3cqw,32px)}
body.page-hue-test .ht-result>*{min-width:0}
body.page-hue-test .ht-r-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4cqw,56px)}
body.page-hue-test .ht-r-score{padding-left:clamp(0px,2cqw,24px)}
body.page-hue-test .ht-r-label{margin:0;font-size:15px;color:var(--t2)}
body.page-hue-test .ht-r-num{margin:4px 0 6px;font-size:clamp(84px,13cqw,150px);line-height:.95;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--fg)}
body.page-hue-test .ht-r-band{display:inline-block;margin:0;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;color:#141416;background:#7fd16a}
body.page-hue-test .ht-r-band.ht-average{background:#FBCB05}
body.page-hue-test .ht-r-band.ht-low{background:#FAA1DB}
body.page-hue-test .ht-r-text{margin:16px 0 0;max-width:34em;font-size:17px;line-height:1.5;color:var(--t2);text-wrap:pretty}
body.page-hue-test .ht-r-meta{margin:14px 0 0;font-size:13px;color:var(--t3);font-variant-numeric:tabular-nums}
body.page-hue-test .ht-r-ring{margin:0;display:grid;justify-items:center;gap:10px}
body.page-hue-test .ht-r-ring svg{display:block;width:min(100%,420px);height:auto;overflow:visible}
body.page-hue-test .ht-r-ref{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 3}
body.page-hue-test .ht-r-path{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
body.page-hue-test .ht-r-ring circle:not(.ht-r-ref){stroke:#050506;stroke-width:.8}
body.page-hue-test .ht-r-ring figcaption{max-width:30em;font-size:13px;line-height:1.45;text-align:center;color:var(--t3)}
body.page-hue-test .ht-r-detail{border-top:1px solid var(--line);padding-top:6px}
body.page-hue-test .ht-r-detail summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font-size:15px;font-weight:500;color:var(--fg);list-style:none}
body.page-hue-test .ht-r-detail summary::-webkit-details-marker{display:none}
body.page-hue-test .ht-r-detail summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:400;color:var(--t2);transition:transform .2s var(--out)}
body.page-hue-test .ht-r-detail[open] summary::after{transform:rotate(45deg)}
body.page-hue-test .ht-rows{display:grid;gap:10px;overflow-x:auto;padding-bottom:6px}
body.page-hue-test .ht-row{display:flex;align-items:flex-start;gap:12px;min-width:max-content}
body.page-hue-test .ht-row-h{flex:none;width:64px;display:grid;font-size:12px;color:var(--t3);padding-top:2px}
body.page-hue-test .ht-row-h b{font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
body.page-hue-test .ht-row-caps{display:flex;gap:4px;margin:0;padding:0;list-style:none}
body.page-hue-test .ht-row-caps li{display:grid;justify-items:center;gap:3px;width:26px}
body.page-hue-test .ht-row-caps i{display:block;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px #050506}
body.page-hue-test .ht-row-caps span{font-size:10px;line-height:1;font-variant-numeric:tabular-nums;color:var(--t3)}
body.page-hue-test .ht-row-caps li.is-off span{color:#fff;font-weight:700}
body.page-hue-test .ht-row-caps li.is-off i{box-shadow:inset 0 0 0 2px #050506,0 0 0 2px #fff}
body.page-hue-test .ht-r-how{margin:12px 0 4px;font-size:13px;line-height:1.5;color:var(--t3);max-width:60em}
body.page-hue-test .ht-r-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 26px;padding:clamp(16px,2.4cqw,24px);border-radius:18px;background:rgba(255,255,255,.06)}
body.page-hue-test .ht-r-dot{width:72px;height:auto}
body.page-hue-test .ht-r-cta-t p{margin:0;font-size:15px;line-height:1.5;color:var(--t2)}
body.page-hue-test .ht-r-cta-t .ht-r-cta-h{margin-bottom:2px;font-size:19px;font-weight:600;color:var(--fg)}
body.page-hue-test .ht-r-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 18px}
@container (max-width:900px){
  body.page-hue-test .ht-r-top{grid-template-columns:1fr;text-align:center}
  body.page-hue-test .ht-r-score{padding:0}
  body.page-hue-test .ht-r-text{margin-inline:auto}
  body.page-hue-test .ht-r-cta{grid-template-columns:auto minmax(0,1fr)}
  body.page-hue-test .ht-r-acts{grid-column:1/-1;justify-content:flex-start}
}
@container (max-width:520px){
  body.page-hue-test .ht-r-cta{grid-template-columns:1fr;justify-items:center;text-align:center}
  body.page-hue-test .ht-r-acts{justify-content:center}
  body.page-hue-test .ht-r-acts .ht-btn{width:100%}
}

/* ================================================================ intro: the two versions */
body.page-hue-test .ht-lead{margin:-6px 0 20px;font-size:16px;line-height:1.5;color:var(--t2)}
body.page-hue-test .ht-modes{display:grid;gap:10px}
body.page-hue-test .ht-card .ht-mode{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;padding:16px 18px!important;
  border-radius:16px;background:rgba(255,255,255,.06);text-align:left;transition:background-color .2s ease,transform .16s var(--out)}
body.page-hue-test .ht-card .ht-mode:hover{background:rgba(255,255,255,.11)}
body.page-hue-test .ht-card .ht-mode:active{transform:scale(.985)}
body.page-hue-test .ht-mode-row{display:flex;gap:2px;padding:7px 8px;border-radius:999px;background:#050506}
body.page-hue-test .ht-mode-row.is-light{gap:1px;background:#ececee}
body.page-hue-test .ht-mode-row i{display:block;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px #050506}
body.page-hue-test .ht-mode-row.is-light i{box-shadow:0 1px 1px rgba(0,0,0,.18)}
body.page-hue-test .ht-mode-t{display:grid;gap:3px}
body.page-hue-test .ht-mode-t b{font-size:17px;font-weight:600;color:var(--fg)}
body.page-hue-test .ht-mode-t span{font-size:14px;line-height:1.45;color:var(--t2)}
body.page-hue-test .ht-mode-go{font-size:20px;color:var(--fg);transition:transform .2s var(--out)}
body.page-hue-test .ht-card .ht-mode:hover .ht-mode-go{transform:translateX(3px)}
body.page-hue-test .ht-resume{margin:12px 0 0}
@container (max-width:520px){
  body.page-hue-test .ht-card .ht-mode{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
  body.page-hue-test .ht-mode-row{grid-column:1/-1;justify-self:start}
  body.page-hue-test .ht-mode-go{grid-row:2;grid-column:2}
}

/* ================================================================ the easy version: a light tray, the row only, a verdict per tray */
body.page-hue-test .ht-card.ht-light{--case:#e9e9ec;--groove:#f8f8f9;--fg:#141416;--t2:#4b5052;--t3:#666b70;--line:rgba(20,20,22,.12);
  box-shadow:0 30px 60px -38px rgba(20,20,22,.35),inset 0 0 0 1px rgba(20,20,22,.06)}
body.page-hue-test .ht-light :focus-visible{outline-color:#141416}
body.page-hue-test .ht-light .ht-primary{background:#141416!important;color:#fff!important}
body.page-hue-test .ht-light .ht-primary:hover{background:#2a2b2f!important}
body.page-hue-test .ht-light .ht-ghost{box-shadow:inset 0 0 0 1px rgba(20,20,22,.3)}
body.page-hue-test .ht-light .ht-ghost:hover{background:#141416!important;color:#fff!important}
body.page-hue-test .ht-light .ht-tab:hover{background:rgba(20,20,22,.05)}
body.page-hue-test .ht-light .ht-tab.is-on{background:rgba(20,20,22,.08)}
body.page-hue-test .ht-light .ht-tab.is-full .ht-tab-n{color:#2f7d1f}
body.page-hue-test .ht-card .ht-tab:disabled{opacity:.38;cursor:default;background:none}
body.page-hue-test .ht-light .ht-rail{box-shadow:inset 0 1px 4px rgba(20,20,22,.14),inset 0 0 0 1px rgba(20,20,22,.06)}
body.page-hue-test .ht-light .ht-cap{box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),0 1px 3px rgba(20,20,22,.22)}
body.page-hue-test .ht-light .ht-fixed{box-shadow:0 0 0 2px #f8f8f9,0 0 0 3.5px rgba(20,20,22,.6),0 1px 3px rgba(20,20,22,.2)}
body.page-hue-test .ht-light .ht-fixed::after{background:rgba(20,20,22,.6)}
body.page-hue-test .ht-easy .ht-play{--gap:4px}
body.page-hue-test .ht-easy .ht-rail .ht-cap{touch-action:none;cursor:grab}
body.page-hue-test .is-dragging .ht-rail .ht-cap{cursor:grabbing}
body.page-hue-test .ht-card .ht-cap:disabled{cursor:default}
body.page-hue-test .ht-card .ht-cap:disabled:hover{transform:none}
/* two taps swap: the first one lifts */
body.page-hue-test .ht-cap.is-picked{transform:translateY(-6px);box-shadow:0 0 0 2px #f8f8f9,0 0 0 4px #141416,0 8px 14px rgba(20,20,22,.25)}
/* after the check: the caps to move, ringed in red, with a dot under them */
body.page-hue-test .ht-cap.is-wrong{box-shadow:0 0 0 2px #f8f8f9,0 0 0 4.5px #e0241b,0 1px 3px rgba(20,20,22,.2)}
body.page-hue-test .ht-cap.is-wrong::after{content:"";position:absolute;left:50%;bottom:-12px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#e0241b}
body.page-hue-test .ht-easy .ht-rail{row-gap:16px;padding-bottom:20px}
body.page-hue-test .ht-verdict{display:flex;align-items:center;gap:16px;justify-self:center;padding:14px 22px 14px 18px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(20,20,22,.06)}
body.page-hue-test .ht-verdict[hidden]{display:none}
body.page-hue-test .ht-v-num{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#141416}
body.page-hue-test .ht-v-t{display:grid;gap:2px;font-size:14px;line-height:1.4;color:var(--t2)}
body.page-hue-test .ht-v-t b{font-size:16px;font-weight:600;color:#141416}
body.page-hue-test .ht-foot [data-act="reveal"]{color:var(--fg)}
.ht-float.is-light{box-shadow:0 14px 28px rgba(20,20,22,.3)!important}
/* the result, on the light tray */
body.page-hue-test .ht-light .ht-r-ref{stroke:rgba(20,20,22,.22)}
body.page-hue-test .ht-light .ht-r-path{fill:rgba(20,20,22,.06);stroke:#141416}
body.page-hue-test .ht-light .ht-r-ring circle:not(.ht-r-ref){stroke:rgba(20,20,22,.25)}
body.page-hue-test .ht-light .ht-row-caps i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
body.page-hue-test .ht-light .ht-row-caps li.is-off span{color:#e0241b}
body.page-hue-test .ht-light .ht-row-caps li.is-off i{box-shadow:0 0 0 2px #e9e9ec,0 0 0 3.5px #e0241b}
body.page-hue-test .ht-light .ht-r-cta{background:rgba(255,255,255,.7)}
@container (max-width:520px){
  body.page-hue-test .ht-easy .ht-play{--gap:5px}
  body.page-hue-test .ht-verdict{padding:12px 16px;gap:12px}
  body.page-hue-test .ht-v-num{font-size:36px}
}

/* ================================================================ the questions under the game */
body.page-hue-test .kt-faq{border-top:0}

/* ================================================================ still: reduced motion, paused */
@media (prefers-reduced-motion:reduce){body.page-hue-test .ht-card *{animation:none!important;transition:none!important}}
html[data-motion="paused"] body.page-hue-test .ht-card *{animation:none!important;transition:none!important}