/* Hallmark · shape: Shop-window directory, a split magenta hero over a ranked leaderboard rail · genre: playful · theme: custom (by request: direction C, bold chart) · job: buy · idea: "a beauty leaderboard where every rank is a cut gem and every number is a real shop review" · vibe: "loud magenta, glossy gems, sticker sparkles, chart energy"
 * paper: oklch(1 0 0) · accent: oklch(0.6 0.25 355) · display: Archivo Black · body: Onest · hero: magenta panel with the headline and one quiz pill, bubblegum panel with real product photos in a shop window, cut SVG gems and doodled sparkles · nav: white bar with wordmark, big search and two tools, black category rail under it · footer: four short link columns over the affiliate note · imagery: the product photos from the shops' own feeds · signature: the gem-medal leaderboard rail of the top 10 by shop reviews
 * axes: light/grotesk-heavy/chromatic-magenta · posture: bold, accent fields on the hero and top-10 heads by request · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R3 V4 · weakest: R, the hero carries gems, sparkles and six photos; cut the hero carousel dots and the second hero action to earn it */
:root{
--color-paper:oklch(0.995 0.004 350);--color-paper-2:oklch(0.975 0.012 350);--color-paper-3:oklch(0.94 0.03 350);
--color-ink:oklch(0.17 0.02 345);--color-ink-2:oklch(0.38 0.03 345);--color-muted:oklch(0.52 0.03 345);--color-line:oklch(0.9 0.02 350);
--color-accent:oklch(0.58 0.25 357);--color-accent-ink:oklch(0.48 0.22 357);--color-bubble:oklch(0.86 0.1 352);--color-bubble-2:oklch(0.8 0.13 352);
--color-gold:oklch(0.86 0.13 88);--color-gold-ink:oklch(0.32 0.06 70);--color-star:oklch(0.2 0.02 345);--color-focus:oklch(0.5 0.22 260);
--color-on-accent:oklch(0.995 0.004 350);--color-shadow:oklch(0.3 0.12 355 / 0.18);
--font-display:"Archivo Black","Arial Black",sans-serif;--font-body:"Onest",ui-sans-serif,sans-serif;
--text-xs:.8125rem;--text-sm:.9375rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);--text-hero:clamp(2.6rem,1rem + 5.2vw,5.6rem);
--space-xs:4px;--space-s:8px;--space-sm:12px;--space-m:16px;--space-ml:20px;--space-l:24px;--space-lx:28px;--space-x:32px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;
--container:1320px;--gutter:32px;--gap-columns:20px;--radius-s:10px;--radius-m:18px;--radius-l:28px;--radius-pill:999px;
--gem-ruby:oklch(0.55 0.24 15);--gem-pink:oklch(0.68 0.22 355);--gem-amethyst:oklch(0.55 0.2 305);--gem-sapphire:oklch(0.52 0.19 262);--gem-topaz:oklch(0.72 0.17 55);--gem-emerald:oklch(0.6 0.16 160);--gem-citrine:oklch(0.82 0.16 92);--gem-aqua:oklch(0.75 0.12 210);--gem-rose:oklch(0.72 0.14 10);--gem-diamond:oklch(0.86 0.02 260);
--ease-out:cubic-bezier(.2,.8,.2,1);
--gem-line:oklch(1 0 0 / .45);--gem-glint:oklch(1 0 0 / .9);
}
@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* gem colours: one hue each, facets mixed from paper and ink */
.gem{--h:var(--color-accent)}
.g-ruby{--h:var(--gem-ruby)}.g-pink{--h:var(--gem-pink)}.g-amethyst{--h:var(--gem-amethyst)}.g-sapphire{--h:var(--gem-sapphire)}.g-topaz{--h:var(--gem-topaz)}.g-emerald{--h:var(--gem-emerald)}.g-citrine{--h:var(--gem-citrine)}.g-aqua{--h:var(--gem-aqua)}.g-rose{--h:var(--gem-rose)}.g-diamond{--h:var(--gem-diamond)}
.gem{--gem-0:color-mix(in oklab,var(--h) 35%,var(--color-paper));--gem-1:color-mix(in oklab,var(--h) 70%,var(--color-paper));--gem-2:var(--h);--gem-3:color-mix(in oklab,var(--h) 82%,var(--color-ink));--gem-4:color-mix(in oklab,var(--h) 68%,var(--color-ink));--gem-5:color-mix(in oklab,var(--h) 52%,var(--color-ink));overflow:visible}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-padding-top:140px}
::selection{background:var(--color-bubble);color:var(--color-ink)}
input{caret-color:var(--color-accent)}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);line-height:1.55;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;transition:none}
a{color:inherit;text-underline-offset:.16em;text-decoration-thickness:1px}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;overflow-wrap:break-word;min-width:0;text-wrap:balance;line-height:1.05}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
svg{display:block}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--space-m);top:-60px;background:var(--color-ink);color:var(--color-paper);padding:var(--space-s) var(--space-m);border-radius:var(--radius-pill);z-index:50}
.skip:focus-visible{top:var(--space-s)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* chrome */
.top{position:sticky;top:0;z-index:20;background:var(--color-paper)}
.top-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-xl);padding-block:var(--space-m)}
.logo{font-family:var(--font-display);font-size:1.75rem;text-decoration:none;display:inline-flex;align-items:flex-start;gap:var(--space-xs);letter-spacing:-.02em}
.logo-sp{width:16px;height:16px;fill:var(--color-accent)}
.search{display:flex;align-items:center;max-width:620px;width:100%;border:2px solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-paper);transition:box-shadow .2s var(--ease-out)}
.search:focus-within{box-shadow:0 0 0 4px var(--color-bubble)}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:var(--space-sm) var(--space-ml);font-size:var(--text-md);outline:none}
.search input::placeholder{color:var(--color-muted)}
.search button{border:0;background:var(--color-accent);color:var(--color-on-accent);width:40px;height:40px;margin:var(--space-xs);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .15s var(--ease-out),background-color .15s}
.search button:hover{background:var(--color-accent-ink)}.search button:active{transform:scale(.94)}
.util{display:flex;gap:var(--space-l);font-weight:600;font-size:var(--text-sm)}
.util a{text-decoration:none}.util a:hover{color:var(--color-accent-ink);text-decoration:underline}
.cats{background:var(--color-ink);color:var(--color-paper)}
.cats-in{display:flex;gap:var(--space-xs);overflow-x:auto;scrollbar-width:none;padding-block:var(--space-s)}
.cats-in::-webkit-scrollbar{display:none}
.cats a{flex:none;text-decoration:none;font-weight:600;font-size:var(--text-sm);padding:var(--space-s) var(--space-m);border-radius:var(--radius-pill);transition:background-color .15s,color .15s}
.cats a:hover{background:color-mix(in oklab,var(--color-paper) 16%,transparent)}
.cats a[aria-current]{background:var(--color-accent)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-s);padding:0;margin:var(--space-m) auto 0;font-size:var(--text-xs);color:var(--color-muted)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:var(--space-s)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(560px,calc(100svh - 132px))}
.hero-l{background:var(--color-accent);color:var(--color-on-accent);display:flex;align-items:center;justify-content:flex-end;padding:var(--space-2xl) var(--space-2xl) var(--space-2xl) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))}
.hero-copy{max-width:600px;width:100%}
.hero h1{font-size:var(--text-hero);text-transform:uppercase;line-height:1;letter-spacing:-.025em}
.hero-s{margin-top:var(--space-l);font-size:var(--text-lg);font-weight:500;max-width:30ch}
.pill{display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--color-paper);color:var(--color-ink);font-weight:700;text-decoration:none;padding:var(--space-m) var(--space-lx);border-radius:var(--radius-pill);border:2px solid var(--color-paper);cursor:pointer;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .15s,color .15s}
.hero .pill{margin-top:var(--space-xl);font-size:var(--text-lg)}
.pill:hover{background:var(--color-paper-3)}
.pill:hover .ic{transform:translateX(3px)}
.pill .ic{transition:transform .18s var(--ease-out)}
.pill:active{transform:translateY(0) scale(.98)}
.pill-ink{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.pill-ink:hover{background:var(--color-accent);border-color:var(--color-accent)}
.cathead .pill,.rel .pill{padding:var(--space-s) var(--space-m);border-color:var(--color-ink);font-size:var(--text-sm);margin:var(--space-xs) var(--space-xs) 0 0}
.hero-r{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 30%,var(--color-paper-3),var(--color-bubble) 55%,var(--color-bubble-2));--px:0;--py:0;isolation:isolate}
.win{position:absolute;inset:16% 8% 12% 8%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--space-m);z-index:2;transform:translate3d(calc(var(--px)*-10px),calc(var(--py)*-8px),0);transition:transform .4s var(--ease-out)}
.hp{display:block;background:var(--color-paper);border-radius:var(--radius-m);padding:8%;box-shadow:0 18px 40px var(--color-shadow);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.hp img{width:100%;height:100%;object-fit:contain}
.hp:nth-child(odd){transform:translateY(-14px) rotate(-2deg)}.hp:nth-child(even){transform:translateY(10px) rotate(2deg)}
.hp:hover{transform:translateY(-20px) rotate(0) scale(1.04);box-shadow:0 26px 50px var(--color-shadow)}
.hg{position:absolute;z-index:3;filter:drop-shadow(0 10px 16px var(--color-shadow));animation:float 7s ease-in-out infinite;translate:calc(var(--px)*var(--d,20px)) calc(var(--py)*var(--d,20px))}
.hg-1{width:120px;top:2%;left:40%;--r:-12deg;--d:34px}
.hg-2{width:84px;bottom:2%;left:3%;--r:18deg;animation-delay:-2s;--d:26px}
.hg-3{width:64px;top:6%;right:4%;--r:10deg;animation-delay:-4s}
.hg-4{width:100px;bottom:-2%;right:12%;--r:-20deg;animation-delay:-1s;--d:30px}
.hg-5{width:46px;top:44%;left:1%;--r:24deg;animation-delay:-3s}
.hg-6{width:56px;bottom:6%;left:44%;--r:-6deg;animation-delay:-5s}
.hg-7{width:40px;top:4%;left:12%;--r:30deg;animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 8deg))}}
.sp{position:absolute;z-index:4;width:26px;height:26px;fill:none;stroke:var(--color-ink);stroke-width:1.6;stroke-linejoin:round;animation:twinkle 2.8s ease-in-out infinite}
.sp-a{top:10%;left:6%}.sp-b{top:28%;right:6%;width:34px;height:34px;animation-delay:-.7s}.sp-c{bottom:16%;left:30%;width:18px;height:18px;animation-delay:-1.4s}
.sp-d{top:6%;left:64%;width:20px;height:20px;fill:var(--color-paper);stroke:none;animation-delay:-2s}.sp-e{bottom:30%;right:3%;width:22px;height:22px;fill:var(--color-paper);stroke:none;animation-delay:-.3s}
.sp-f{top:52%;left:46%;width:16px;height:16px;fill:var(--color-paper);stroke:none;animation-delay:-1.1s}.sp-g{bottom:8%;right:40%;width:28px;height:28px;animation-delay:-2.4s}
.sp-h{top:14%;right:24%;width:30px;height:30px;stroke:var(--color-ink);fill:none;animation:bob 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.55}}
@keyframes bob{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-6px)}}

/* sections */
.sec{margin-top:var(--space-2xl)}
.shead{display:flex;align-items:end;justify-content:space-between;gap:var(--space-m);margin-bottom:var(--space-l)}
.shead h2,.sh{font-size:var(--text-xl);letter-spacing:-.015em}
.see{font-weight:700;color:var(--color-accent-ink);text-decoration:none;white-space:nowrap;border-bottom:2px solid currentColor;padding-bottom:var(--space-xs)}
.see:hover{color:var(--color-ink)}
.note,.meth,.src,.also{font-size:var(--text-xs);color:var(--color-muted)}
.sec>.note{margin-top:var(--space-m)}
.meth{margin-top:var(--space-xl);max-width:75ch;line-height:1.6}

/* leaderboard rail */
.rail{position:relative}
.lbs{list-style:none;margin:0;padding:var(--space-s) var(--space-xs) var(--space-ml);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,calc((100% - 9*14px)/6.3));gap:var(--space-m);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.lb{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;background:var(--color-paper);border:1.5px solid var(--color-line);border-radius:var(--radius-m);padding:var(--space-m);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s}
.lb:hover{transform:translateY(-6px);box-shadow:0 16px 32px var(--color-shadow);border-color:var(--color-bubble-2)}
.lb-top{display:flex;align-items:center;gap:var(--space-s);min-height:34px}
.lb-n{font-family:var(--font-display);font-size:1.9rem;line-height:1}
.medal{width:30px;transition:transform .5s var(--ease-out)}
.lb:hover .medal{transform:rotate(-14deg) scale(1.12)}
.tag{display:inline-block;font-size:var(--text-xs);font-weight:700;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);line-height:1.4}
.tag-hg{background:var(--color-gold);color:var(--color-gold-ink)}
.lb-top .tag{margin-left:auto}
.lb-img{display:block;aspect-ratio:1;margin:var(--space-s) 0 var(--space-sm);border-radius:var(--radius-s);overflow:hidden;background:var(--color-paper-2)}
.lb-img img,.pc-img img,.rk-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}

.brand{font-weight:700;font-size:var(--text-sm)}
.lb h3{min-height:calc(2em * 1.35);overflow-wrap:anywhere}
.lb h3,.pc h3{font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);line-height:1.35;margin-top:var(--space-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lb h3 a,.pc h3 a,.rk h3 a{text-decoration:none}.lb h3 a:hover,.pc h3 a:hover,.rk h3 a:hover{text-decoration:underline}
.stars{font-size:var(--text-sm);margin-top:var(--space-s);display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.stars small{color:var(--color-muted)}
.st{position:relative;display:inline-block;color:var(--color-muted);letter-spacing:1px;font-size:.9rem;line-height:1}
.st::before{content:"★★★★★";position:absolute;inset:0;width:var(--v);overflow:hidden;color:var(--color-star);white-space:nowrap}
.lb-row{margin-top:auto;padding-top:var(--space-sm);display:flex;align-items:center;justify-content:space-between;gap:var(--space-s)}
.price{font-size:var(--text-md)}.price b,b.price{font-weight:800}.price small{color:var(--color-muted);font-weight:400}
.shop{display:inline-flex;align-items:center;gap:var(--space-s);font-weight:700;font-size:var(--text-sm);text-decoration:none;border:1.5px solid var(--color-ink);border-radius:var(--radius-pill);padding:var(--space-s) var(--space-m);transition:background-color .15s,color .15s,transform .15s var(--ease-out)}
.shop .ic{width:16px;height:16px}
.shop:hover{background:var(--color-ink);color:var(--color-paper)}.shop:active{transform:scale(.96)}
.rail-b{position:absolute;top:42%;z-index:2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--color-line);background:var(--color-paper);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px var(--color-shadow);transition:opacity .2s,transform .15s var(--ease-out)}
.rail-b:hover{transform:scale(1.08)}.rail-b:active{transform:scale(.95)}.rail-b:disabled{opacity:0;cursor:not-allowed;background:var(--color-paper-3);color:var(--color-muted);pointer-events:none}
.prev{left:-18px}.next{right:-18px}
.js .pre>li{opacity:0;transform:translateY(18px)}
.js .pre.in>li{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),box-shadow .25s,border-color .2s}
.js .pre.in>li:nth-child(2){transition-delay:.05s}.js .pre.in>li:nth-child(3){transition-delay:.1s}.js .pre.in>li:nth-child(4){transition-delay:.15s}.js .pre.in>li:nth-child(5){transition-delay:.2s}.js .pre.in>li:nth-child(6){transition-delay:.25s}.js .pre.in>li:nth-child(n+7){transition-delay:.3s}

/* category tiles */
.cts{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--space-sm)}
.ct{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);text-decoration:none;font-weight:700}
.ct-img{width:100%;aspect-ratio:1;border-radius:50%;background:var(--color-paper-3);display:grid;place-items:center;overflow:hidden;transition:transform .25s var(--ease-out),background-color .2s}
.ct-img img{width:72%;height:72%;object-fit:contain;mix-blend-mode:multiply}
.ct-gem{position:absolute;width:30px;top:0;right:6%;transition:transform .4s var(--ease-out)}
.ct:hover .ct-img{transform:translateY(-4px);background:var(--color-bubble)}.ct:hover .ct-gem{transform:rotate(20deg) scale(1.2)}
.ct-n{font-size:var(--text-sm)}

/* routine band */
.band{margin-top:var(--space-3xl);background:var(--color-ink);color:var(--color-paper);overflow:hidden}
.band-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);align-items:center;padding-block:var(--space-2xl)}
.band h2{font-size:var(--text-xl);text-transform:uppercase}
.band-copy p{margin:var(--space-m) 0 var(--space-l);max-width:44ch;color:color-mix(in oklab,var(--color-paper) 80%,var(--color-ink))}
.band .pill-ink{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.band .pill-ink:hover{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}
.band-steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-sm);position:relative;z-index:1}
.band-steps li{display:flex;align-items:center;gap:var(--space-sm);background:color-mix(in oklab,var(--color-paper) 10%,var(--color-ink));border:1.5px solid color-mix(in oklab,var(--color-paper) 22%,var(--color-ink));border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-ml) var(--space-sm) var(--space-sm);font-weight:700}
.band-steps span{width:30px;height:30px;border-radius:50%;background:var(--color-bubble);color:var(--color-ink);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-sm)}
.bg-1,.bg-2{position:absolute;opacity:.9;animation:float 8s ease-in-out infinite}
.bg-1{width:90px;right:2%;top:-14px;--r:16deg}.bg-2{width:54px;right:34%;bottom:-10px;--r:-18deg;animation-delay:-3s}

/* concerns + guides */
.ccs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-sm)}
.cc{display:flex;flex-direction:column;gap:var(--space-sm);text-decoration:none;font-weight:700;font-size:var(--text-sm);background:var(--color-paper-2);border-radius:var(--radius-m);padding:var(--space-m);transition:transform .2s var(--ease-out),background-color .2s}
.cc img{aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;width:100%}
.cc:hover{transform:translateY(-4px);background:var(--color-paper-3)}
.gls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-columns)}
.gl{text-decoration:none;font-weight:700;display:flex;flex-direction:column;gap:var(--space-sm)}
.gl img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius-m);transition:transform .3s var(--ease-out)}
.gl:hover img{box-shadow:0 10px 24px var(--color-shadow)}.gl:hover span{text-decoration:underline}

/* inner pages */
main{min-height:50vh}
.cathead{padding-top:var(--space-xl);padding-bottom:var(--space-l)}
.cathead h1,.ghead h1,.trust h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.8rem);text-transform:uppercase;letter-spacing:-.02em;max-width:20ch}
.lede{font-size:var(--text-lg);max-width:60ch;margin-top:var(--space-m);color:var(--color-ink-2)}
.rel{margin-top:var(--space-m)}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-m);margin-bottom:var(--space-m);position:sticky;top:116px;z-index:5;background:var(--color-paper);padding-block:var(--space-sm)}
.filters{display:flex;flex-wrap:wrap;gap:var(--space-s)}
.filters button{border:1.5px solid var(--color-ink);background:var(--color-paper);border-radius:var(--radius-pill);padding:var(--space-s) var(--space-m);font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
.filters button:hover{background:var(--color-paper-3)}.filters button.on{background:var(--color-ink);color:var(--color-paper)}
.ctl{display:flex;flex-wrap:wrap;gap:var(--space-s);align-items:center}
.ctl input,.ctl select{border:1.5px solid var(--color-muted);border-radius:var(--radius-pill);padding:var(--space-s) var(--space-m);background:var(--color-paper);min-width:0}
.ctl input{width:min(320px,100%)}
.ctl input:hover,.ctl select:hover{border-color:var(--color-ink)}
.sort{font-size:var(--text-sm);display:flex;gap:var(--space-s);align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--space-m);margin-top:var(--space-m)}
.pc{position:relative;display:flex;flex-direction:column;gap:var(--space-xs);border:1.5px solid var(--color-line);border-radius:var(--radius-m);padding:var(--space-m);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.pc:hover{transform:translateY(-5px);box-shadow:0 14px 28px var(--color-shadow)}
.pc>.tag{position:absolute;top:22px;right:22px;z-index:1}
.pc-img{display:block;aspect-ratio:1;border-radius:var(--radius-s);overflow:hidden;background:var(--color-paper-2);margin-bottom:var(--space-sm)}
.pc .price{margin-top:var(--space-s)}.pc .src{margin-top:var(--space-xs)}.pc .shop{margin-top:auto;align-self:flex-start;margin-block-start:var(--space-sm)}
.more{text-align:center;margin:var(--space-xl) 0}
.btn{display:inline-flex;font-weight:700;border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-l);border:2px solid var(--color-ink);background:var(--color-paper);cursor:pointer;transition:background-color .15s,color .15s}
.btn:hover{background:var(--color-ink);color:var(--color-paper)}
.cnt{font-size:var(--text-xs);color:var(--color-muted)}

/* top 10 page */
.t10head{background:var(--color-accent);color:var(--color-on-accent);margin-top:var(--space-m);overflow:hidden}
.t10-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-xl);align-items:center;padding-block:var(--space-2xl)}
.t10head h1{font-size:clamp(2.1rem,1.2rem + 3.4vw,4.2rem);text-transform:uppercase;letter-spacing:-.02em}
.t10head .lede{color:var(--color-on-accent);opacity:.92}
.t10-podium{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--space-sm);min-height:240px}
.pod{margin:0;position:relative;background:var(--color-paper);border-radius:var(--radius-m);padding:10%;box-shadow:0 18px 36px var(--color-shadow)}
.pod img{width:100%;aspect-ratio:1;object-fit:contain}
.pod-1{order:2;transform:translateY(-26px) scale(1.12)}.pod-2{order:1;transform:rotate(-4deg)}.pod-3{order:3;transform:rotate(4deg)}
.pod .gem{position:absolute;width:44px;top:-18px;left:-12px;animation:float 6s ease-in-out infinite;--r:-12deg}
.t10-podium .sp{stroke:var(--color-paper)}.t10-podium .sp-a{top:0;left:30%}.t10-podium .sp-b{bottom:4%;right:-2%}
.rank{list-style:none;padding:0;margin:var(--space-xl) 0 0;display:grid;gap:var(--space-m)}
.rk{display:grid;grid-template-columns:76px 180px minmax(0,1fr);gap:var(--space-l);align-items:start;border:1.5px solid var(--color-line);border-radius:var(--radius-l);padding:var(--space-l);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s}
.rk:hover{transform:translateY(-4px);box-shadow:0 16px 32px var(--color-shadow);border-color:var(--color-bubble-2)}
.rk-n{display:flex;flex-direction:column;align-items:center;gap:var(--space-s)}
.rk-n .no{font-family:var(--font-display);font-size:3.2rem;line-height:1}
.rk-n .medal{width:46px}
.rk:hover .medal{transform:rotate(-14deg) scale(1.1)}
.rk-img{display:block;aspect-ratio:1;background:var(--color-paper-2);border-radius:var(--radius-m);overflow:hidden}
.rk-b h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-lg);line-height:1.3;margin-top:var(--space-xs)}
.rk-b .tag{margin-bottom:var(--space-s)}
.rq{margin:var(--space-m) 0;padding:var(--space-m) var(--space-l);background:var(--color-paper-2);border-radius:var(--radius-m);position:relative}
.rq p{font-size:var(--text-md)}
.rq cite{display:block;font-style:normal;font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-s)}
.rk .price{margin-bottom:var(--space-m)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:var(--space-m)}
.tc{display:flex;flex-direction:column;gap:var(--space-s);text-decoration:none;border:1.5px solid var(--color-line);border-radius:var(--radius-m);padding:var(--space-m);transition:transform .2s var(--ease-out),box-shadow .2s}
.tc:hover{transform:translateY(-4px);box-shadow:0 14px 28px var(--color-shadow)}
.tc img{aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;background:var(--color-paper-2);border-radius:var(--radius-s)}
.tc span{font-weight:700}.tc small{color:var(--color-muted)}

/* guides */
.ghead{padding-top:var(--space-xl)}
.byline{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-m)}
.answer{font-size:var(--text-lg);margin-top:var(--space-l);padding:var(--space-l);background:var(--color-paper-3);border-radius:var(--radius-m);max-width:70ch}
.gbody{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-2xl);margin-top:var(--space-xl)}
.toc{position:sticky;top:140px;align-self:start;display:flex;flex-direction:column;gap:var(--space-s);font-size:var(--text-sm)}
.toc a{text-decoration:none;color:var(--color-ink-2)}.toc a:hover{color:var(--color-accent-ink);text-decoration:underline}
.prose{max-width:72ch}
.prose h2{font-size:var(--text-xl);margin:var(--space-xl) 0 var(--space-m)}
.prose h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-lg);margin:var(--space-l) 0 var(--space-s)}
.prose p,.prose ul,.prose ol{margin:0 0 var(--space-m)}
.prose a{color:var(--color-accent-ink)}
.cmp{border-collapse:collapse;width:100%;font-size:var(--text-sm);display:block;overflow-x:auto}
.cmp th,.cmp td{border-bottom:1px solid var(--color-line);padding:var(--space-sm);text-align:left}
.refs{font-size:var(--text-sm)}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--gap-columns)}
.gc{display:flex;flex-direction:column;gap:var(--space-s);text-decoration:none}
.gc img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-m)}
.gc span{font-weight:700}.gc small{color:var(--color-muted)}
.gc:hover span{text-decoration:underline}
#products{margin-top:var(--space-2xl)}

/* brands */
.brands{columns:4 220px;column-gap:var(--space-xl)}
.az{break-inside:avoid;margin-bottom:var(--space-l)}
.az h2{font-size:2rem;color:var(--color-accent)}
.az ul{list-style:none;padding:0;margin:var(--space-s) 0 0}
.az a{text-decoration:none;font-weight:500;line-height:1.9}.az a:hover{text-decoration:underline;color:var(--color-accent-ink)}

/* forms: routine builder and quiz */
.rbq,.quiz{display:grid;gap:var(--space-m);max-width:760px}
fieldset{border:1.5px solid var(--color-line);border-radius:var(--radius-m);padding:var(--space-l);margin:0;display:flex;flex-wrap:wrap;gap:var(--space-s)}
legend{font-family:var(--font-display);font-size:var(--text-lg);padding:0 var(--space-s)}
fieldset label{display:inline-flex;align-items:center;gap:var(--space-s);border:1.5px solid var(--color-line);border-radius:var(--radius-pill);padding:var(--space-s) var(--space-m);cursor:pointer;font-weight:500;transition:background-color .15s,border-color .15s}
fieldset label:hover{border-color:var(--color-ink)}
fieldset label:has(input:checked){background:var(--color-bubble);border-color:var(--color-accent)}
input[type=radio],input[type=checkbox]{accent-color:var(--color-accent);width:18px;height:18px;margin:0}
.rbq .pill,.quiz .pill{justify-self:start}
.rbo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-l);margin-top:var(--space-xl)}
.rbo .note{grid-column:1/-1}
.rbc{border:1.5px solid var(--color-line);border-radius:var(--radius-l);padding:var(--space-l)}
.rbc h2{font-size:var(--text-xl);margin-bottom:var(--space-m)}
.rbc ol{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-sm)}
.rbc li{display:grid;grid-template-columns:96px 72px minmax(0,1fr);gap:var(--space-sm);align-items:center}
.rbc li img{border-radius:var(--radius-s);background:var(--color-paper-2);mix-blend-mode:multiply}
.rbc li small{display:block;color:var(--color-muted)}
.step{font-weight:800;font-size:var(--text-sm);background:var(--color-paper-3);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-sm);text-align:center}
#res{font-size:var(--text-lg);margin-top:var(--space-m)}
.trust{padding-block:var(--space-xl)}
.trust h2{font-size:var(--text-xl);margin:var(--space-xl) 0 var(--space-m)}
.trust p,.trust ul{margin-bottom:var(--space-m)}

/* footer */
.foot{margin-top:var(--space-3xl);background:var(--color-paper-2);padding-block:var(--space-2xl) var(--space-xl);border-top:4px solid var(--color-accent)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-xl)}
.fbrand p{margin-top:var(--space-s);max-width:32ch;color:var(--color-ink-2)}
.foot h2{font-family:var(--font-body);font-weight:800;font-size:var(--text-md);margin-bottom:var(--space-s)}
.foot div>a:not(.logo){display:block;text-decoration:none;font-size:var(--text-sm);line-height:2;color:var(--color-ink-2)}
.foot div>a:not(.logo):hover{color:var(--color-accent-ink);text-decoration:underline}
.fine{margin-top:var(--space-xl);padding-top:var(--space-l);border-top:1px solid var(--color-line);font-size:var(--text-xs);color:var(--color-muted);max-width:110ch}

/* responsive */
@media (max-width:1100px){.cts{grid-template-columns:repeat(5,minmax(0,1fr))}.ccs{grid-template-columns:repeat(3,minmax(0,1fr))}.util{display:none}.top-in{grid-template-columns:auto minmax(0,1fr)}}
@media (max-width:860px){
:root{--gutter:16px}
.hero{grid-template-columns:minmax(0,1fr);min-height:0}
.hero-l{padding:var(--space-xl) var(--gutter);justify-content:flex-start}
.hero-r{height:340px}
.win{inset:12% 6% 10% 6%;gap:var(--space-sm)}
.hg-1{width:84px}.hg-4{width:72px}
.band-in,.t10-in{grid-template-columns:minmax(0,1fr)}
.gls{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}
.gbody{grid-template-columns:minmax(0,1fr)}.toc{position:static}
.rbo{grid-template-columns:minmax(0,1fr)}
.bar{position:static}
.rail-b{display:none}
.lbs{grid-auto-columns:minmax(0,62%);margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}
@media (max-width:560px){
.top-in{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);padding-block:var(--space-sm)}
.logo{font-size:1.5rem}
.search input{padding:var(--space-s) var(--space-m)}
.hero h1{font-size:clamp(2.4rem,11.5vw,3.4rem)}
.hero .pill{margin-top:var(--space-l)}
.cts{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccs{grid-template-columns:repeat(2,minmax(0,1fr))}
.rk{grid-template-columns:56px minmax(0,1fr);gap:var(--space-m);padding:var(--space-m)}
.rk-img{grid-column:2;grid-row:1;max-width:160px}
.rk-n{grid-row:1/3}
.rk-b{grid-column:2}
.rk-n .no{font-size:2.4rem}.rk-n .medal{width:36px}
.t10-podium{min-height:0;margin-top:var(--space-m)}
.rbc li{grid-template-columns:72px 56px minmax(0,1fr)}
.shead{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js .pre>li{opacity:1;transform:none}}

/* mobile pass, 26 Oct: rails keep real card widths with a peek, tighter chrome, two-up shop grid */
.policy-links{width:100%;max-width:var(--container);margin-inline:auto!important;padding-inline:var(--gutter);color:var(--color-muted)}
.policy-links a{display:inline-block;padding-block:var(--space-sm);color:var(--color-ink-2)}
@media (max-width:860px){
.lbs{grid-auto-columns:clamp(156px,44vw,240px);gap:var(--space-sm)}
.lb{padding:var(--space-sm)}
.lb-n{font-size:1.6rem}
.lb-row{flex-wrap:wrap}
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;min-height:44px;scroll-snap-align:start}
.crumbs a{display:inline-block;padding-block:var(--space-sm)}
.crumbs ol{margin-top:0}
}
@media (max-width:560px){
.top-in{grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm)}
.logo{font-size:1.3rem}
.logo-sp{width:12px;height:12px}
.search{border-width:1.5px}
.search input{padding:var(--space-xs) var(--space-sm);font-size:var(--text-md)}
.search button{width:44px;height:44px;margin:0}
.cats-in{padding-block:var(--space-xs)}
.cats a{padding:var(--space-sm) var(--space-m);min-height:44px;display:inline-flex;align-items:center}
.hero-l{padding-block:var(--space-x)}
.hero h1{font-size:clamp(2.1rem,10vw,3rem)}
.hero-s{font-size:var(--text-md);margin-top:var(--space-m)}
.hero .pill{font-size:var(--text-md);padding:var(--space-sm) var(--space-l);min-height:48px}
.hero-r{height:clamp(240px,72vw,320px)}
.sec{margin-top:var(--space-xl)}
.band{margin-top:var(--space-xl)}
.cathead h1,.ghead h1,.trust h1{font-size:clamp(1.8rem,8.4vw,2.4rem)}
.lede{font-size:var(--text-md)}
.t10head h1{font-size:clamp(1.8rem,8.6vw,2.6rem)}
.t10-in{padding-block:var(--space-x)}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s)}
.pc{padding:var(--space-s);border-radius:var(--radius-s)}
.pc>.tag{top:12px;right:12px}
.pc h3{font-size:var(--text-xs)}
.pc .src{display:none}
.pc .shop{align-self:stretch;justify-content:center;min-height:44px}
.rk{padding:var(--space-sm)}
.rk-img{max-width:128px}
.rk-b h3{font-size:var(--text-md)}
.rq{padding:var(--space-sm) var(--space-m)}
.rq p{font-size:var(--text-sm)}
.foot{margin-top:var(--space-2xl);padding-block:var(--space-xl) var(--space-l)}
.foot div>a:not(.logo){line-height:1.4;padding-block:var(--space-sm)}
.fgrid{gap:var(--space-l)}
}