.of-color-test{--ct-dark:#27313d;--ct-muted:#6b7280;--ct-gold:#c5a76b;--ct-line:#dfe3e6;margin:0 0 72px;color:var(--ct-dark);font-family:Manrope,Arial,sans-serif}
.of-color-test-shell{overflow:hidden;background:#fff;border:1px solid var(--ct-line);box-shadow:0 18px 44px rgba(39,49,61,.08)}
.of-color-test-top{position:relative;display:flex;align-items:center;min-height:64px;padding:0 20px 0 28px;background:var(--ct-dark);color:#fff}
.of-color-test-progress{display:flex;align-items:center;gap:18px;width:100%;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.of-color-test-progress>span{width:78px}.of-color-test-progress>i{display:block;overflow:hidden;width:min(440px,52vw);height:2px;background:rgba(255,255,255,.18)}.of-color-test-progress b{display:block;width:0;height:100%;background:var(--ct-gold);transition:width .35s ease}
.of-color-test-fullscreen{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;margin-left:auto;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;color:#fff;cursor:pointer}.of-color-test-fullscreen:hover{border-color:var(--ct-gold);color:var(--ct-gold)}.of-color-test-fullscreen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.of-color-test-screen{min-height:560px}.of-color-test-screen[hidden]{display:none!important}.of-color-test-screen.is-active{animation:ctReveal .45s ease both}
.of-color-test-screen[data-test-screen="intro"]{display:grid;grid-template-columns:1.12fr .88fr}.of-color-test-intro-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:72px clamp(38px,6vw,92px)}.of-color-test-intro-copy h2,.of-color-test-results h2{max-width:700px;margin:0 0 24px;font:400 clamp(38px,5vw,68px)/1.08 Prata,Georgia,serif}.of-color-test-lead{max-width:650px;margin:0 0 34px;color:var(--ct-muted);font-size:16px;line-height:1.75}
.of-color-test-preflight{display:flex;flex-direction:column;justify-content:center;padding:62px clamp(32px,5vw,68px);background:#eef0f2}.of-color-test-preflight h3,.of-color-test-controls h3,.of-color-test-result-detail h3{margin:0 0 28px;font:400 28px/1.25 Prata,Georgia,serif}.of-color-test-preflight ol{margin:0;padding:0;list-style:none}.of-color-test-preflight li{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start;padding:20px 0;border-top:1px solid #d5d9dc;color:var(--ct-dark);font-size:14px;line-height:1.55}.of-color-test-preflight li span{color:#a7894e;font:16px Prata,Georgia,serif}.of-color-test-preflight>p{margin:28px 0 0;padding:20px 0 0;border-top:1px solid #d5d9dc;color:var(--ct-muted);font-size:12px;line-height:1.65}
.of-color-test-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.86fr);background:#f8f8f6}.of-color-test-plate{display:grid;place-items:center;padding:36px;background:#fff}.of-color-test-plate canvas{display:block;width:min(100%,560px);height:auto;aspect-ratio:1}.of-color-test-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:54px;background:#eef0f2;text-align:center}.of-color-test-controls>p:not(.eyebrow){max-width:470px;margin:0;color:var(--ct-muted);font-size:13px;line-height:1.65}
.of-color-test-arrows{display:grid;grid-template-columns:64px 64px 64px;grid-template-rows:64px 64px 64px;gap:10px;margin-top:34px}.of-color-test-arrows button{display:grid;place-items:center;width:64px;height:64px;padding:0;border:1px solid #d4d9dd;border-radius:8px;background:#fff;color:var(--ct-dark);box-shadow:0 7px 18px rgba(39,49,61,.07);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.of-color-test-arrows button:hover,.of-color-test-arrows button:focus-visible{border-color:var(--ct-gold);background:var(--ct-gold);transform:translateY(-2px)}.of-color-test-arrows button:nth-child(1){grid-area:1/2}.of-color-test-arrows button:nth-child(2){grid-area:2/1}.of-color-test-arrows button:nth-child(3){grid-area:2/3}.of-color-test-arrows button:nth-child(4){grid-area:3/2}.of-color-test-arrows svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.of-color-test-results{display:grid;grid-template-columns:.82fr 1.18fr}.of-color-test-result-summary{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(38px,6vw,88px);background:var(--ct-dark);color:#fff}.of-color-test-score{display:flex;align-items:flex-end;gap:10px;margin:0 0 30px;color:var(--ct-gold)}.of-color-test-score strong{font:400 clamp(78px,9vw,126px)/.85 Prata,Georgia,serif}.of-color-test-score span{padding-bottom:8px;font-size:20px}.of-color-test-result-summary h2{font-size:clamp(34px,4vw,56px)}.of-color-test-result-summary>[data-test-result-copy]{margin:0;color:#cbd0d5;font-size:14px;line-height:1.75}
.of-color-test-result-detail{display:flex;flex-direction:column;justify-content:center;padding:58px clamp(32px,5vw,74px)}.of-color-test-axis{margin:0 0 24px}.of-color-test-axis>div{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:end}.of-color-test-axis strong{font-size:13px}.of-color-test-axis span{grid-column:1;color:var(--ct-muted);font-size:12px}.of-color-test-axis b{grid-area:1/2/3;font-size:13px}.of-color-test-axis>i{display:block;overflow:hidden;height:6px;margin-top:10px;background:#e6e8e9}.of-color-test-axis>i span{display:block;height:100%;background:var(--ct-gold);transition:width .7s ease}.of-color-test-disclaimer{margin:12px 0 26px;padding:18px 0;border-top:1px solid var(--ct-line);border-bottom:1px solid var(--ct-line);color:var(--ct-muted);font-size:12px;line-height:1.6}.of-color-test-result-actions{display:flex;flex-wrap:wrap;gap:10px}
.editorial-page-onlayn-testy .page-hero{padding-bottom:40px}.editorial-page-onlayn-testy .editorial-page-inner{max-width:none}.editorial-page-onlayn-testy .wp-block-columns{gap:24px}.editorial-page-onlayn-testy .wp-block-column{padding:30px;background:#fff;border-top:2px solid var(--ct-gold,#c5a76b);box-shadow:0 10px 20px rgba(0,0,0,.04)}
.of-color-test:fullscreen{overflow:auto;padding:24px;background:#eef0f2}.of-color-test:fullscreen .of-color-test-shell{max-width:1440px;margin:auto}
@keyframes ctReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.of-color-test-screen[data-test-screen="intro"],.of-color-test-stage,.of-color-test-results{grid-template-columns:1fr}.of-color-test-stage{min-height:0}.of-color-test-controls{padding:42px 24px}.of-color-test-result-summary,.of-color-test-result-detail{padding:48px 30px}.of-color-test-screen{min-height:0}}
@media(max-width:600px){.of-color-test{margin-bottom:46px}.of-color-test-top{min-height:56px;padding:0 12px 0 18px}.of-color-test-progress{gap:10px}.of-color-test-progress>span{width:72px}.of-color-test-progress>i{width:36vw}.of-color-test-intro-copy{padding:46px 24px}.of-color-test-intro-copy h2{font-size:36px}.of-color-test-preflight{padding:40px 24px}.of-color-test-plate{padding:18px}.of-color-test-controls h3{font-size:25px}.of-color-test-arrows{grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px 56px}.of-color-test-arrows button{width:56px;height:56px}.of-color-test-result-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.of-color-test-screen.is-active{animation:none}.of-color-test-progress b,.of-color-test-axis>i span,.of-color-test-arrows button{transition:none}}