:root{--bg: #ffffff;--bg-alt: #f5f5f7;--tile: #f5f5f7;--ink: #1d1d1f;--ink-2: #6e6e73;--line: #d2d2d7;--accent: #0066cc;--accent-ink: #ffffff;--glass: rgba(255, 255, 255, .78);--shadow: 0 30px 60px -30px rgba(0, 0, 0, .25);--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius: 22px;--gutter: clamp(16px, 4vw, 44px);--maxw: 1180px;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #000000;--bg-alt: #0f0f10;--tile: #ececf0;--ink: #f5f5f7;--ink-2: #a1a1a6;--line: #38383c;--accent: #2997ff;--accent-ink: #000000;--glass: rgba(22, 22, 23, .78);--shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);color-scheme:dark}}:root[data-theme=dark]{--bg: #000000;--bg-alt: #0f0f10;--tile: #ececf0;--ink: #f5f5f7;--ink-2: #a1a1a6;--line: #38383c;--accent: #2997ff;--accent-ink: #000000;--glass: rgba(22, 22, 23, .78);--shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.47 var(--font);letter-spacing:-.012em;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}h1,h2,h3{margin:0;text-wrap:balance}p{margin:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}main>section,.foot{padding-inline:var(--gutter)}main>section:not(.stats)>*,#cats>section>*{max-width:var(--maxw);margin-inline:auto}.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.nav-in{max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:20px}.logo{font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--ink)}.logo:hover{text-decoration:none}.nav-links{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.nav-links::-webkit-scrollbar{display:none}.nav-links a{color:var(--ink);font-size:13px;white-space:nowrap;opacity:.85}.nav-links a:hover{opacity:1;text-decoration:none;color:var(--accent)}.search{display:flex;align-items:center;gap:6px;background:var(--bg-alt);border-radius:999px;padding:6px 12px;min-width:0}.search svg{width:15px;height:15px;fill:none;stroke:var(--ink-2);stroke-width:1.8;flex:none}.search input{border:0;background:transparent;color:var(--ink);font:14px var(--font);width:170px;min-width:0;outline:none}.search input::placeholder{color:var(--ink-2)}.hero{text-align:center;padding-block:clamp(48px,9vw,112px) 0;overflow:hidden}.eyebrow{color:var(--ink-2);font-size:15px;font-weight:600;letter-spacing:.01em;margin-bottom:14px}.hero h1{font-size:clamp(40px,7.2vw,88px);line-height:1.04;font-weight:800;letter-spacing:-.045em}.hero-sub{max-width:640px!important;margin-top:22px;font-size:clamp(18px,2vw,22px);color:var(--ink-2);line-height:1.4}.hero-cta{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;text-decoration:none}.btn:hover{text-decoration:none;filter:brightness(1.08)}.btn-ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.link{background:none;border:0;color:var(--accent);font-size:17px;cursor:pointer;padding:0}.hero-shelf{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.5vw,18px);margin-top:clamp(36px,6vw,64px);padding:clamp(20px,4vw,48px) clamp(8px,3vw,40px) 0;background:linear-gradient(to bottom,transparent 0,var(--tile) 38%);border-radius:36px 36px 0 0}.shelf-item{flex:1 1 0;max-width:220px;min-width:0}.shelf-img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.shelf-item .shelf-img{animation-delay:inherit}@keyframes rise{0%{transform:translateY(24px)}to{transform:none}}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding-block:44px;border-bottom:1px solid var(--line)}.stats>div{display:flex;flex-direction:column;gap:4px;min-width:0}.stats strong{font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.stats span{color:var(--ink-2);font-size:14px;line-height:1.35}.sec-title{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08}.brands{padding-block:clamp(56px,8vw,96px) 0}.brand-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:28px}.brand{background:var(--bg-alt);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}.brand-name{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--tone)}.brand-note{font-size:13px;color:var(--ink-2);line-height:1.35}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .brand-name{color:color-mix(in srgb,var(--tone) 55%,white)}}:root[data-theme=dark] .brand-name{color:color-mix(in srgb,var(--tone) 55%,white)}.tiles{padding-block:clamp(56px,8vw,96px) 0}.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}.tile{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--tile);border-radius:var(--radius);padding:20px 20px 0;color:#1d1d1f;overflow:hidden;transition:transform .35s ease}.tile:hover{text-decoration:none;transform:scale(1.015)}.tile-title{font-size:19px;font-weight:700;letter-spacing:-.02em}.tile-count{font-size:13px;color:color-mix(in srgb,var(--tone) 80%,#1d1d1f);font-weight:600}.tile-img{display:block;margin:8px auto 0;width:72%}.tile-photo{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}.tile-grid .tile:first-child{grid-row:span 2}.tile-grid .tile:first-child .tile-img{width:92%;margin-top:auto}.tile-grid .tile:first-child .tile-title{font-size:28px}.cat{padding-inline:var(--gutter);padding-block:clamp(64px,9vw,112px) 0}.cat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-bottom:32px}.cat-head h2{font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1.04}.cat-head h2:before{content:"";display:block;width:36px;height:6px;border-radius:3px;background:var(--tone);margin-bottom:18px}.cat-head p{color:var(--ink-2);font-size:19px;line-height:1.42;max-width:520px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--radius);background:var(--bg);transition:transform .35s ease}.card:hover{transform:translateY(-3px)}.card:hover .card-more{text-decoration:underline}.card-hit{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:transparent;border:0;border-radius:var(--radius);cursor:pointer}.card-media{position:relative;background:var(--tile);border-radius:var(--radius);aspect-ratio:1 / 1;display:grid;place-items:center;overflow:hidden}.card-img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s ease}.card:hover .card-img{transform:scale(1.04)}.badge{position:absolute;top:14px;left:14px;background:#1d1d1f;color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}.ph{width:100%;height:100%;display:grid;place-items:center;background:var(--tile)}.ph span{font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.04em;color:#c7c7cc}.card-body{padding:18px 4px 8px;display:flex;flex-direction:column;gap:6px}.card-brand{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tone, var(--ink-2))}.card-title{font-size:21px;font-weight:700;letter-spacing:-.022em;line-height:1.2}.card-text{color:var(--ink-2);font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-meta{font-size:13px;color:var(--ink);font-weight:500}.card-more{color:var(--accent);font-size:15px;margin-top:2px}.empty{text-align:center;padding-block:80px;color:var(--ink-2);display:grid;gap:12px;justify-items:center}.why{padding-block:clamp(72px,10vw,128px) 0}.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}.why-item{background:var(--bg-alt);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}.why-item h3{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}.why-item p{color:var(--ink-2);font-size:15px}.order{padding-block:clamp(72px,10vw,128px)}.steps{list-style:none;padding:0;margin-top:28px!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:s}.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:20px;min-width:0}.steps li:before{content:counter(s);font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--accent)}.steps h3{font-size:21px;font-weight:700;letter-spacing:-.02em}.steps p{color:var(--ink-2);font-size:15px}.order-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px!important}.foot{background:var(--bg-alt);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--ink-2);display:grid;gap:6px}.foot>p{max-width:var(--maxw);margin-inline:auto;width:100%}.foot-muted{opacity:.85}dialog{border:0;padding:0;border-radius:28px;background:var(--bg);color:var(--ink);width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 48px);box-shadow:var(--shadow)}dialog::backdrop{background:#00000073;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}dialog[open]{animation:pop .28s cubic-bezier(.2,.7,.2,1)}@keyframes pop{0%{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}.dlg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding:36px;position:relative}.dlg-close{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:var(--bg-alt);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}.dlg-media{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:0;align-self:start}.dlg-main{background:var(--tile);border-radius:var(--radius);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}.dlg-img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}.thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}.thumb{flex:none;width:64px;height:64px;border-radius:14px;border:2px solid transparent;background:var(--tile);padding:4px;cursor:pointer}.thumb.on{border-color:var(--accent)}.thumb-img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.dlg-info{display:flex;flex-direction:column;gap:12px;min-width:0}.dlg-info h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.035em;line-height:1.08;padding-right:36px}.dlg-lead{color:var(--ink-2);font-size:17px}.pack{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pack-label{font-size:12px;color:var(--ink-2);margin-right:4px}.chip{font-size:13px;background:var(--bg-alt);border-radius:999px;padding:4px 10px}.dlg-sub{font-size:14px;font-weight:600;margin-top:8px;color:var(--ink-2)}.variants{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.variant{width:100%;display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:transparent;border:1px solid var(--line);border-radius:14px;padding:11px 14px;cursor:pointer}.variant:hover{border-color:var(--ink-2)}.variant.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.v-size{font-weight:600;font-variant-numeric:tabular-nums}.v-name{color:var(--ink);font-size:15px;overflow-wrap:anywhere}.v-code{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}.dlg-desc{display:grid;gap:8px;font-size:15px}.dlg-desc:empty{display:none}.dlg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tile-grid .tile:first-child{grid-row:auto}.tile-grid .tile:first-child .tile-title{font-size:19px}.tile-grid .tile:first-child .tile-img{width:72%}.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-row{grid-template-columns:repeat(3,minmax(0,1fr))}.nav-links{display:none}.nav-in{justify-content:space-between}}@media (max-width: 640px){body{font-size:16px}.search input{width:100%}.search{flex:1;max-width:240px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-block:32px}.brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}.brand{padding:16px}.brand-name{font-size:20px}.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:14px 14px 0;border-radius:18px}.tile-title{font-size:16px}.cat-head{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:20px}.cat-head p{font-size:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}.card-media{border-radius:18px}.card-body{padding:12px 2px 4px;gap:4px}.card-title{font-size:16px}.card-text{font-size:13px;-webkit-line-clamp:2}.card-meta{font-size:12px}.card-more{display:none}.why-grid{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:minmax(0,1fr);gap:24px}.hero-shelf{border-radius:24px 24px 0 0}.shelf-item:nth-child(n+5){display:none}dialog{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}.dlg-in{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px))}.dlg-media{position:static}.dlg-main{aspect-ratio:4 / 3}.variant{grid-template-columns:64px minmax(0,1fr)}.v-code{grid-column:2}.dlg-actions .btn{width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .card-brand,:root:not([data-theme=light]) .cat-head h2:before{filter:brightness(1.6)}}:root[data-theme=dark] .card-brand,:root[data-theme=dark] .cat-head h2:before{filter:brightness(1.6)}