.swatch-page{--swatch-ink:#012635;--swatch-mute:#073f56b3;--swatch-line:#0126351a;--swatch-mint:#00bd82;--swatch-mint-bright:#5bf1b2;--swatch-blue:#0a84ff;--swatch-violet:#6b5ce7;--swatch-navy:#012635;--swatch-green:#00724e;color:var(--swatch-ink);background:radial-gradient(920px 520px at 12% -8%,#c2ffecf2,#0000 58%),radial-gradient(780px 480px at 92% 6%,#d6e7fce0,#0000 56%),radial-gradient(640px 380px at 60% 110%,#e1ddf88c,#0000 52%),linear-gradient(#f7fffc 0%,#f4f8ff 46%,#fff 100%);position:relative;overflow-x:hidden}.swatch-page .tone-mint{--tone:var(--swatch-mint);--tone-soft:#e6fff6}.swatch-page .tone-blue{--tone:var(--swatch-blue);--tone-soft:#e7f0ff}.swatch-page .tone-violet{--tone:var(--swatch-violet);--tone-soft:#ece8fa}.swatch-page .tone-navy{--tone:var(--swatch-navy);--tone-soft:#e8f3f6}.swatch-page .tone-green{--tone:var(--swatch-green);--tone-soft:#e7f8ee}.swatch-wash{background-image:radial-gradient(circle,#00bd8229 1.1px,#0000 1.2px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#00000073,#0000 78%);mask-image:linear-gradient(#00000073,#0000 78%)}.swatch-wrap{width:min(1240px,100% - 2.5rem);margin-inline:auto}.swatch-hero{padding:108px 0 48px;position:relative}.swatch-kicker,.swatch-index{letter-spacing:.16em;text-transform:uppercase;color:var(--swatch-green);font-size:12px}.swatch-hero .swatch-kicker{letter-spacing:.18em;font-size:.95rem}.swatch-hero h1{letter-spacing:-.05em;margin-top:.85rem;font-size:clamp(2.45rem,4.8vw,3.8rem);line-height:1.06}.swatch-hero h1 span{color:var(--swatch-green);display:block}.swatch-hero-grid{align-items:center;gap:1.6rem;display:grid}.swatch-slide-stage{padding:16px 18px 34px;position:relative}.swatch-slide-dots{z-index:0;background-image:radial-gradient(circle,#00724e33 1.35px,#0000 1.5px);background-size:18px 18px;border-radius:40px;animation:36s linear infinite dots-drift;position:absolute;inset:0;-webkit-mask-image:radial-gradient(88% 84% at 50% 48%,#000 42%,#0000 78%);mask-image:radial-gradient(88% 84% at 50% 48%,#000 42%,#0000 78%)}.swatch-slide{z-index:1;border-radius:32px;width:100%;height:410px;position:relative;overflow:hidden}.swatch-slide-img{object-fit:cover;object-position:50% 0%;transform-origin:50% 8%;transform:scale(1.08)}.swatch-lead{max-width:36rem;color:var(--swatch-mute);margin-top:1.1rem;font-size:1.1rem;line-height:1.75}.swatch-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;display:flex}.swatch-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:2.4rem;display:grid}.swatch-chip{min-height:168px;color:var(--swatch-ink);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc7;border-radius:28px;flex-direction:column;padding:1.1rem 1.15rem 1.15rem;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;display:flex;overflow:hidden;box-shadow:0 18px 44px #01263514}.swatch-chip span:first-child{letter-spacing:.16em;color:var(--tone);font-size:11px}.swatch-chip strong{margin-top:.2rem;font-size:1.15rem}.swatch-chip b{letter-spacing:-.05em;color:var(--tone);margin-top:auto;padding-top:1.1rem;font-size:1.85rem;line-height:1}.swatch-chip em{color:var(--swatch-mute);margin-top:.25rem;font-size:12px;font-style:normal}.swatch-bars{align-items:flex-end;gap:4px;height:32px;margin-top:.75rem;display:flex}.swatch-bars i{background:var(--tone-soft);border-radius:99px;flex:1;height:40%;animation:1.8s ease-in-out infinite swatch-rise;display:block}.swatch-chip.is-on .swatch-bars i{background:var(--tone)}.swatch-bars i:nth-child(2){height:70%;animation-delay:.15s}.swatch-bars i:nth-child(3){height:52%;animation-delay:.3s}.swatch-bars i:nth-child(4){height:88%;animation-delay:.45s}.swatch-chip.is-on{transform:translateY(-6px);box-shadow:0 22px 50px #0126351f}.swatch-nav{z-index:30;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc7;border-block:1px solid #01263514;position:sticky;top:72px}.swatch-nav-inner{gap:.4rem;padding:.65rem 0;display:flex;overflow-x:auto}.swatch-nav-inner a{min-width:max-content;color:var(--swatch-ink);border-radius:999px;align-items:center;gap:.45rem;padding:.5rem .9rem;display:inline-flex}.swatch-nav-inner i{background:var(--tone);border-radius:50%;width:8px;height:8px}.swatch-nav-inner .is-on{background:var(--swatch-navy);color:#fff}.swatch-nav-inner .is-on i{background:var(--swatch-mint-bright)}.swatch-stack{gap:1.4rem;padding:2rem 0 1rem;display:grid}.swatch-plate{background:var(--tone-soft);border-radius:32px;gap:1.5rem;padding:1.5rem 1.25rem 1.6rem;display:grid}.swatch-plate-copy .swatch-index{color:var(--tone);background:#fff;border-radius:999px;padding:.2rem .7rem;display:inline-flex}.swatch-plate-copy .swatch-kicker{color:var(--tone);margin-top:.8rem}.swatch-plate-copy h2{letter-spacing:-.045em;max-width:18ch;margin-top:.55rem;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.1}.swatch-plate-copy p:last-of-type{max-width:38rem;color:var(--swatch-mute);margin-top:.85rem;font-size:1.05rem;line-height:1.75}.swatch-plate-art{background:#ffffffc7;border-radius:28px;min-height:240px;padding:1.2rem 1.15rem;box-shadow:0 16px 40px #0126350f}.swatch-funnel{justify-items:center;gap:.6rem;display:grid}.swatch-funnel button{text-align:left;cursor:pointer;width:100%;color:var(--swatch-ink);background:#f4f8ff;border-radius:22px;justify-content:space-between;align-items:baseline;gap:.7rem;padding:.9rem 1.05rem;display:flex}.swatch-funnel em{color:var(--swatch-mute);font-size:12px;font-style:normal}.swatch-funnel .is-on{background:var(--swatch-navy);color:#fff}.swatch-funnel .is-on em{color:var(--swatch-mint-bright)}.swatch-ruler-top p{letter-spacing:.14em;text-transform:uppercase;color:var(--swatch-blue);font-size:12px}.swatch-ruler-top strong{letter-spacing:-.03em;margin-top:.35rem;font-size:1.2rem;display:block}.swatch-rule{background:#e7f0ff;border-radius:999px;height:8px;margin-top:1.3rem;position:relative;overflow:hidden}.swatch-bead{background:var(--swatch-blue);border-radius:50%;width:18px;height:18px;transition:left .4s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px #0a84ff29}.swatch-rule-note{color:var(--swatch-mute);margin-top:.9rem;font-size:.95rem}.swatch-ticks{flex-wrap:wrap;gap:.45rem;margin-top:1rem;display:flex}.swatch-ticks button,.swatch-underlines button,.swatch-keys button,.swatch-nav-inner a{cursor:pointer}.swatch-ticks button{color:var(--swatch-ink);background:#e7f0ff;border-radius:999px;padding:.45rem .8rem}.swatch-ticks .is-on{background:var(--swatch-navy);color:#fff}.swatch-score p{letter-spacing:.16em;text-transform:uppercase;color:var(--swatch-violet);font-size:12px}.swatch-score strong{letter-spacing:-.07em;font-size:clamp(3.6rem,8vw,5.8rem);line-height:.88;display:block}.swatch-underlines{gap:.65rem;margin-top:1.1rem;display:grid}.swatch-underlines button{text-align:left;color:var(--swatch-ink);gap:.3rem;display:grid}.swatch-underlines i{background:#ece8fa;border-radius:999px;height:8px;display:block}.swatch-underlines .is-on i{background:var(--swatch-violet)}.swatch-matrix{gap:1rem;display:grid}.swatch-dots{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;display:grid}.swatch-dots i{aspect-ratio:1;background:#e8f3f6;border-radius:50%}.swatch-dots .is-on{background:var(--swatch-mint)}.swatch-matrix li{border-top:1px solid var(--swatch-line);opacity:.32;justify-content:space-between;gap:1rem;padding:.7rem 0;display:flex}.swatch-matrix .is-on{opacity:1}.swatch-keys{gap:.65rem;display:grid}.swatch-keys button{text-align:left;width:100%;color:var(--swatch-ink);background:#f4f8ff;border-radius:22px;grid-template-columns:14px minmax(0,1fr);column-gap:.75rem;padding:.95rem 1rem;display:grid}.swatch-keys button span{background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:inset 0 0 0 1.5px #01263533}.swatch-keys em{color:var(--swatch-mute);grid-column:2;margin-top:.2rem;font-size:.92rem;font-style:normal;line-height:1.5}.swatch-keys .is-on{background:var(--swatch-navy);color:#fff}.swatch-keys .is-on span{background:var(--swatch-mint-bright);box-shadow:none}.swatch-keys .is-on em{color:#ffffff9e}.swatch-close{margin:1rem auto 4.5rem}.swatch-close-card{text-align:center;color:#fff;isolation:isolate;background:radial-gradient(560px 280px at 50% -8%,#5bf1b24d,#0000 58%),radial-gradient(420px 240px at 8% 108%,#0a84ff33,#0000 52%),radial-gradient(380px 220px at 92% 92%,#6b5ce738,#0000 54%),linear-gradient(#073a4a 0%,#012635 72%);border-radius:40px;padding:3.2rem 1.4rem 3rem;position:relative;overflow:hidden;box-shadow:0 28px 70px #01263538,inset 0 1px #ffffff1f}.swatch-close-card:before{content:"";z-index:0;pointer-events:none;background-image:radial-gradient(circle,#5bf1b229 1.1px,#0000 1.25px);background-size:22px 22px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,#0000 78%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,#0000 78%)}.swatch-close-card:after{content:"";z-index:0;pointer-events:none;background:linear-gradient(115deg,#0000 42%,#ffffff17 50%,#0000 58%);animation:8s ease-in-out infinite swatch-sheen;position:absolute;inset:-40% -20%}.swatch-close-orb{z-index:0;filter:blur(42px);pointer-events:none;border-radius:50%;position:absolute}.swatch-close-orb.is-mint{background:#5bf1b26b;width:240px;height:240px;top:-70px;left:50%;transform:translate(-50%)}.swatch-close-orb.is-blue{background:#0a84ff47;width:200px;height:200px;bottom:-80px;left:-60px}.swatch-close-orb.is-violet{background:#6b5ce74d;width:190px;height:190px;bottom:-70px;right:-50px}.swatch-close-beads,.swatch-close-kicker,.swatch-close-card h2,.swatch-close-copy,.swatch-close-actions{z-index:1;position:relative}.swatch-close-beads{flex-wrap:wrap;justify-content:center;gap:.55rem;margin-bottom:1.35rem;display:flex}.swatch-close-beads span{letter-spacing:.04em;color:#ffffffe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:.45rem;padding:.42rem .78rem;font-size:12px;display:inline-flex}.swatch-close-beads i{background:var(--tone);width:8px;height:8px;box-shadow:0 0 12px var(--tone);border-radius:50%}.swatch-close-kicker{letter-spacing:.2em;text-transform:uppercase;color:var(--swatch-mint-bright);font-size:12px}.swatch-close-card h2{letter-spacing:-.055em;max-width:18ch;margin:.7rem auto 0;font-size:clamp(2.15rem,5vw,3.5rem);line-height:1.08}.swatch-close-card h2 span{display:block}.swatch-close-card h2 em{color:var(--swatch-mint-bright);text-shadow:0 0 32px #5bf1b273;font-style:normal}.swatch-close-copy{color:#ffffffad;max-width:34rem;margin:1rem auto 0;line-height:1.75}.swatch-close-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.7rem;display:flex}@keyframes swatch-rise{0%,to{transform:scaleY(.65)}50%{transform:scaleY(1)}}.swatch-orbit{aspect-ratio:1;width:min(360px,100%);margin-inline:auto;position:relative}.swatch-orbit-ring{border:1.5px dashed #0126351f;border-radius:50%;position:absolute;inset:14%}.swatch-orbit-ring.is-inner{border-style:solid;border-color:#00bd822e;animation:22s linear infinite reverse swatch-spin;inset:30%}.swatch-orbit-pulse{border:2px solid #5bf1b273;border-radius:32px;width:96px;height:96px;animation:2s ease-out infinite swatch-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.swatch-orbit-core{z-index:3;color:#5bf1b2;background:#012635;border-radius:28px;place-items:center;width:88px;height:88px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 18px 40px #01263533}.swatch-orbit-core em{letter-spacing:.14em;text-transform:uppercase;color:#ffffff8c;font-size:10px;font-style:normal}.swatch-orbit-track{animation:18s linear infinite swatch-spin;position:absolute;inset:0}.swatch-orbit-node{z-index:4;width:58px;height:58px;color:var(--tone);transform:rotate(calc(var(--i) * 72deg)) translateY(-138px) rotate(calc(var(--i) * -72deg));background:#fff;border-radius:20px;place-items:center;animation:18s linear infinite swatch-counter;display:grid;position:absolute;top:50%;left:50%;box-shadow:0 14px 32px #0126351f}@keyframes swatch-spin{to{transform:rotate(360deg)}}@keyframes swatch-counter{0%{transform:rotate(calc(var(--i) * 72deg)) translateY(-138px) rotate(calc(var(--i) * -72deg))}to{transform:rotate(calc(var(--i) * 72deg - 360deg)) translateY(-138px) rotate(calc(var(--i) * -72deg + 360deg))}}@keyframes swatch-sheen{0%,to{opacity:.35;transform:translate(-12%)}50%{opacity:.7;transform:translate(12%)}}@keyframes swatch-pulse{0%{opacity:.7;transform:translate(-50%,-50%)scale(.92)}to{opacity:0;transform:translate(-50%,-50%)scale(1.35)}}@media (min-width:900px){.swatch-wrap{width:min(1240px,100% - 4rem)}.swatch-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(440px,600px);gap:2.5rem}.swatch-slide{height:540px}.swatch-wall{grid-template-columns:repeat(5,minmax(0,1fr))}.swatch-chip{min-height:220px}.swatch-plate{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:2.2rem;padding:2.2rem 2rem}.swatch-plate.is-flip{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.swatch-plate.is-flip .swatch-plate-copy{order:2}.swatch-plate-art{padding:1.4rem 1.35rem}.swatch-keys{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-close-card{padding:4.4rem 3.2rem 3.8rem}.swatch-close-card h2{max-width:none}}@media (prefers-reduced-motion:reduce){.swatch-bars i,.swatch-chip,.swatch-slide-dots,.swatch-close-card:after{transition:none;animation:none}}
