.mini { width: 64px; height: 64px; margin-bottom: 22px; overflow: visible; display: block; color: var(--ink); }
.mini * { transform-box: fill-box; transform-origin: center; }
@keyframes cm-float { 50% { transform: translate(3px, -5px) rotate(-3deg); } }
@keyframes cm-fall { 0% { transform: translateY(-14px); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(14px); opacity: 1; } 61%, 100% { transform: translateY(14px); opacity: 0; } }
@keyframes cm-splash { 0%, 58% { transform: scaleX(.5); opacity: .3; } 70% { transform: scaleX(1.25); opacity: 1; } 100% { transform: scaleX(.5); opacity: .3; } }
@keyframes cm-feed { to { stroke-dashoffset: -24; } }
@keyframes cm-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes cm-look { 0%, 30% { transform: translateX(-5px); } 40%, 70% { transform: translateX(5px); } 80%, 100% { transform: translateX(-5px); } }
.m-paper .front { animation: cm-float 2.6s ease-in-out infinite; }
.m-ink .drop { animation: cm-fall 1.8s ease-in infinite; }
.m-ink .pool { animation: cm-splash 1.8s ease-out infinite; }
.m-press .r1 { animation: cm-turn 2.4s linear infinite; }
.m-press .r2 { animation: cm-turn 2.4s linear infinite reverse; }
.m-press .web { stroke-dasharray: 8 4; animation: cm-feed .6s linear infinite; }
.m-eye .lid { animation: cm-blink 3.2s ease-in-out infinite; }
.m-eye .pupil { animation: cm-look 3.2s ease-in-out infinite; }
@keyframes cm-turn{to{transform:rotate(360deg)}}
/* The supplied explanation, in the established ColorLoop editorial system. */
.hero-inspector{position:absolute;z-index:3;right:var(--gutter);bottom:115px;width:255px;background:#f7f8f0ee;border:1px solid #839d9b;border-radius:4px;padding:19px;box-shadow:0 10px 35px #23383116;pointer-events:none}.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.inspector-heading .mono{font-size:10px}.sample-swatch{width:23px;height:23px;border:1px solid #16181640;background:var(--cl-blue);transition:background .2s}.hero-inspector h2{font-size:27px;letter-spacing:-.045em;line-height:1.05;margin-top:12px}.sample-inks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:16px 0}.sample-inks>span{display:flex;align-items:center;gap:9px;font:11px var(--mono)}.sample-inks i{display:block;height:6px;flex:1;background:#d7dfd7;overflow:hidden}.sample-inks b{display:block;height:100%;width:50%;background:#19aae3;transition:width .25s}.sample-inks>span:nth-child(2) b{background:#de56a1}.sample-inks>span:nth-child(3) b{background:#dfb700}.sample-inks>span:nth-child(4) b{background:#18211a}.hero-inspector p{font-size:12px;line-height:1.5;margin:0}.hero-inspector small{font-size:10px;display:block;color:#64715e;margin-top:4px}.hero-cycle{border-top:1px solid #8eaa9a55;display:flex;justify-content:space-between;gap:6px;margin-top:15px;padding-top:12px;font:10px var(--mono);color:#71816f}.hero-cycle .is-current{color:var(--cl-primary);font-weight:bold}.loupe-rim:after{inset:6px;border:0;background:repeating-conic-gradient(from 0deg,#16291c99 0deg .5deg,transparent .5deg 6deg);mask:radial-gradient(circle closest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));border-radius:50%}
.color-moves-section{background:#eeefe7}.color-moves-section .section-heading h2 span{color:var(--cl-blue)}.color-moves-intro{max-width:385px}.color-moves-intro p{font-size:17px;line-height:1.65}.color-moves-intro .motion-control{margin-top:20px}.color-reel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.color-reel figure{margin:0;position:relative;background:#141416;overflow:hidden;border-radius:3px}.color-reel video{display:block;width:100%;height:310px;object-fit:cover}.color-reel figcaption{display:flex;align-items:center;gap:18px;padding:18px 22px;background:#141416;color:#f6f6ec;font-size:15px}.color-reel figcaption .mono{color:#aeaeb0}.color-reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:30px}.color-reason{padding:30px 24px 20px;border-right:1px solid #bfc9c0;min-width:0}.color-reason:first-child{padding-left:0}.color-reason:last-child{border-right:0;padding-right:0}.color-reason .mini{width:49px;height:49px;margin-bottom:30px;color:var(--cl-primary)}.color-reason .mono{font-size:11px;color:#5c6d60;display:block;margin-bottom:18px}.color-reason h3{font-size:29px;line-height:1.1;letter-spacing:-.05em;min-height:64px;margin-bottom:17px}.color-reason>p{font-size:15px;line-height:1.7;min-height:106px}.color-reason details{border-top:1px solid #bfc9c0;margin-top:20px}.color-reason summary{font-size:13px;padding:17px 0;list-style:none;display:flex;justify-content:space-between;gap:10px;color:var(--cl-primary);cursor:pointer}.color-reason summary::-webkit-details-marker{display:none}.color-reason summary span{font-size:21px;line-height:1}.color-reason details[open] summary span{transform:rotate(45deg)}.color-reason details p{font-size:14px;line-height:1.75;margin-top:0;padding-bottom:18px}.makeready-note{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:30px;padding-top:30px;margin-top:22px;border-top:1px solid #8da092}.makeready-note>p{font-size:25px;line-height:1.4;letter-spacing:-.025em;color:var(--ink)}.makeready-note>p>span{display:block;font-size:15px;letter-spacing:0;line-height:1.6;color:var(--muted);margin-top:9px}.makeready-note .mono{color:var(--cl-primary);font-size:11px}
.ai-difference-section{background:#141416;color:#f6f7ee}.ai-difference-section .section-kicker{border-color:#aec1c04d}.ai-difference-section .section-kicker .mono{color:#c1c1c3}.ai-explanation{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.ai-copy h2{font-size:clamp(42px,4.9vw,76px);line-height:1.05;margin-bottom:30px}.ai-copy>p{font-size:18px;line-height:1.7;color:#d0dcdb;max-width:490px}.ai-copy .ai-copy-small{font-size:15px;margin-top:19px;color:#bdbdbf}.ai-copy .text-link{margin-top:28px;color:#f5f6ee}.ai-comparison{border:1px solid #7a7a7c;border-radius:4px;background:#f6f7f0;color:var(--ink);overflow:hidden}.learning-visual{display:flex;align-items:center;gap:25px;padding:20px 28px 0;border-bottom:1px solid #c9d4cb;background:#e8eee6}.learning-visual svg{width:180px;height:auto;flex-shrink:0}.learning-visual>span{max-width:140px;font-size:11px;color:#4f6559}.learning-visual svg *{transform-box:fill-box;transform-origin:center}.learning-visual text{font:11px var(--font);fill:#59695f}.learning-visual .i-learn .job{animation:ai-drop 4s cubic-bezier(.22,1,.36,1) infinite}.learning-visual .i-learn .ok{animation:ai-ok 4s cubic-bezier(.22,1,.36,1) infinite}.compare-control{display:flex;margin:24px 26px 0;border:1px solid #aebbb6;padding:4px;border-radius:3px;gap:4px}.compare-control button{flex:1;padding:11px 8px;font-size:13px;background:transparent;border-radius:2px;color:#44564c}.compare-control button[aria-pressed=true]{background:var(--cl-primary);color:#fff}.compare-content{padding:8px 28px 0}.compare-content article{border-bottom:1px solid #c3cec5;padding:20px 0}.compare-content article:last-child{border:0}.compare-content .mono{font-size:10px;color:var(--cl-primary)}.compare-content h3{font-size:21px;letter-spacing:-.035em;line-height:1.2;margin:9px 0}.compare-content p{font-size:14px;line-height:1.65}.comparison-note{font-size:12px;line-height:1.6;padding:15px 28px 23px;border-top:1px solid #c3cec5;margin-top:7px}.color-reason:not(.is-visible) *,.learning-visual:not(.is-visible) *{animation-play-state:paused!important}
@keyframes ai-drop{0%{transform:translateY(-45px);opacity:0}20%{opacity:1}65%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(8px);opacity:0}}@keyframes ai-ok{0%,45%{opacity:0;transform:scale(.7)}60%,100%{opacity:1;transform:scale(1)}}
@media(max-width:1100px){.hero-inspector{width:220px;padding:16px}.hero-inspector h2{font-size:23px}.hero-inspector .mono{font-size:9px}.hero-cycle{font-size:9px}.color-reasons{grid-template-columns:1fr 1fr;gap:10px 24px}.color-reason{padding:24px 0!important;border-right:0;border-bottom:1px solid #bfc9c0}.color-reason h3{min-height:0}.color-reason>p{min-height:52px}.color-reel video{height:270px}.makeready-note{grid-template-columns:1fr 2fr}.makeready-note .text-link{grid-column:2;justify-self:start}.ai-explanation{gap:35px}.learning-visual{gap:15px;padding:15px 18px 0}.learning-visual svg{width:140px}.learning-visual>span{font-size:10px}.ai-copy h2{font-size:48px}.ai-copy>p{font-size:16px}}
@media(max-width:760px){.hero-copy{padding-bottom:425px}.print-hero{min-height:1060px}.hero-inspector{left:24px;right:24px;bottom:86px;width:auto;padding:14px 17px}.hero-inspector h2{display:none}.inspector-heading .mono{font-size:10px}.sample-swatch{width:17px;height:17px}.sample-inks{grid-template-columns:repeat(4,1fr);margin:10px 0;gap:10px}.sample-inks>span{gap:6px;font-size:10px}.hero-inspector p{font-size:12px}.hero-inspector small{font-size:10px}.hero-cycle{font-size:10px;margin-top:10px;padding-top:9px}.color-moves-intro{margin-top:24px}.color-moves-intro p{font-size:16px}.color-reel{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.color-reel video{height:190px}.color-reel figcaption{padding:10px 8px;font-size:11px;line-height:1.3;display:block;min-height:59px}.color-reel figcaption .mono{display:block;font-size:9px;margin-bottom:4px}.color-reasons{grid-template-columns:1fr;gap:0}.color-reason{position:relative;padding-left:70px!important;padding-top:28px!important;padding-bottom:15px!important}.color-reason .mini{position:absolute;left:0;top:26px;width:44px;height:44px}.color-reason h3{font-size:29px;margin-bottom:13px}.color-reason>p{min-height:0;font-size:15px}.color-reason .mono{font-size:10px;margin-bottom:13px}.color-reason details{margin-top:15px}.color-reason details p{font-size:14px}.makeready-note{display:block;padding-top:25px;margin-top:18px}.makeready-note p{font-size:26px;margin-top:16px}.makeready-note .text-link{margin-top:20px}.ai-explanation{grid-template-columns:1fr;gap:36px}.ai-copy h2{font-size:44px}.ai-copy>p{font-size:16px}.ai-copy .text-link{margin-top:21px}.learning-visual{padding:12px 20px 0;justify-content:center}.learning-visual svg{width:145px}.learning-visual>span{font-size:10px}.compare-control{margin:19px 17px 0}.compare-control button{font-size:12px;padding:12px 6px}.compare-content{padding:4px 22px 0}.comparison-note{padding:15px 22px 20px}.ai-difference-section .section-kicker .mono{font-size:10px}}
@media(prefers-reduced-motion:reduce){.mini *,.learning-visual *{animation:none!important}.learning-visual .i-learn .job,.learning-visual .i-learn .ok{opacity:1;transform:none}.sample-inks b,.sample-swatch{transition:none}}