.families{display:grid;grid-gap:clamp(32px,4vw,48px);gap:clamp(32px,4vw,48px);margin-top:clamp(32px,5vw,56px)}.family-title{font-size:clamp(24px,2.6vw,32px);display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));grid-gap:10px;gap:10px}.note-pick{position:relative;width:100%;display:grid;justify-items:center;grid-gap:8px;gap:8px;padding:14px 8px 12px;font:inherit;color:var(--ink-2);background:var(--card);cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);transition:transform .25s var(--ease),border-color .2s,background .2s,color .2s,box-shadow .25s}@media (hover:hover) and (pointer:fine){.note-pick:hover{transform:translateY(-3px);border-color:var(--ink-2);color:var(--ink);box-shadow:0 10px 22px -16px var(--shadow)}}.note-pick:active{transform:translateY(-1px) scale(.98)}.note-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.note-pick[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.note-pick[aria-pressed=true] .note-icon{background:var(--paper);border-color:var(--paper)}.note-pick .note-icon{width:54px;height:54px;font-size:26px}.note-pick .note-name{font-size:13px;line-height:1.25;text-align:center;color:inherit}.note-count{position:absolute;top:6px;right:6px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-size:11px;font-weight:600;border-radius:99px;background:var(--paper-2);color:var(--ink-2)}.note-pick[aria-pressed=true] .note-count{background:var(--accent);color:var(--accent-ink)}.note-results{margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--ink);padding-top:28px;scroll-margin-top:84px}.note-results .section-head{border:0;padding:0;flex-wrap:wrap}.note-results-icon{font-size:.9em}.note-results .meta a{color:var(--accent)}.note-hero{display:flex;gap:clamp(16px,3vw,32px);align-items:center;margin:8px 0 clamp(32px,5vw,48px)}.note-hero .page-title{margin:0 0 4px}.note-hero-icon{display:grid;place-items:center;flex-shrink:0;width:clamp(80px,10vw,112px);aspect-ratio:1;font-size:clamp(40px,5vw,56px);background:var(--card);border:1px solid var(--line);border-radius:50%}.tagged{position:relative;display:grid}.layer-tag{position:absolute;z-index:1;top:12px;left:12px;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}.family-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:12px;gap:12px;margin-top:clamp(28px,4vw,44px)}.family-tile{position:relative;overflow:hidden;display:grid;grid-gap:2px;gap:2px;align-content:end;min-height:132px;padding:14px 16px;text-decoration:none;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(circle at 78% 28%,color-mix(in srgb,var(--fam) 45%,transparent) 0,transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--fam) 18%,var(--card)),var(--card));transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}@media (hover:hover) and (pointer:fine){.family-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--fam) 60%,var(--line));box-shadow:0 14px 28px -20px var(--shadow)}}.family-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.family-tile-icon{position:absolute;top:10px;right:12px;font-size:44px;line-height:1;filter:drop-shadow(0 6px 10px rgb(0 0 0/.15));transition:transform .4s var(--ease)}@media (hover:hover) and (pointer:fine){.family-tile:hover .family-tile-icon{transform:scale(1.1) rotate(-6deg)}}.family-tile-name{font-family:var(--font-display);font-size:21px;line-height:1.15;color:var(--ink)}.family-tile-count{font-size:12px;color:var(--ink-3)}.family{scroll-margin-top:84px}.family-badge{display:inline-grid;place-items:center;width:44px;height:44px;font-size:24px;align-self:center;border-radius:50%;background:color-mix(in srgb,var(--fam) 22%,var(--card));border:1px solid var(--line)}.family-title{align-items:center}.note-pick.unused{opacity:.55}.note-pick.unused[aria-pressed=true]{opacity:1}@media (hover:hover) and (pointer:fine){.note-pick.unused:hover{opacity:1}}.note-hero-icon img,.note-icon img{width:78%;height:78%;object-fit:contain;display:block}.note-results-icon{display:inline-grid;vertical-align:-.15em}.note-results-icon img{width:1.3em;height:1.3em;object-fit:contain;display:block}:root{--ease:cubic-bezier(0.22,1,0.36,1)}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes card-in{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}main{animation:fade-in .45s var(--ease) both}.hero .button,.hero .eyebrow,.hero .lead,.hero-title{animation:fade-up .8s var(--ease) backwards}.hero-title{animation-delay:.06s}.hero .lead{animation-delay:.14s}.hero .button{animation-delay:.22s}.trust li{animation:fade-up .7s var(--ease) both}.trust li:first-child{animation-delay:.25s}.trust li:nth-child(2){animation-delay:.33s}.trust li:nth-child(3){animation-delay:.41s}.product-visual{animation:fade-in .9s var(--ease) both}.product-visual .bottle{animation:fade-up 1s var(--ease) .1s both}.product-info>.eyebrow,.product-info>.meta,.product-title{animation:fade-up .7s var(--ease) both}.product-title{animation-delay:.05s}.product-info>.meta{animation-delay:.1s}.variants li{animation:fade-up .6s var(--ease) both}.variants li:first-child{animation-delay:.15s}.variants li:nth-child(2){animation-delay:.2s}.variants li:nth-child(3){animation-delay:.25s}.variants li:nth-child(n+4){animation-delay:.3s}.grid>*{animation:card-in .55s var(--ease) backwards}.grid>:nth-child(2){animation-delay:.04s}.grid>:nth-child(3){animation-delay:.08s}.grid>:nth-child(4){animation-delay:.12s}.grid>:nth-child(5){animation-delay:.16s}.grid>:nth-child(6){animation-delay:.2s}.grid>:nth-child(7){animation-delay:.24s}.grid>:nth-child(n+8){animation-delay:.28s}.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}.card-visual .bottle{transition:transform .6s var(--ease)}.note-results-inner{animation:fade-up .5s var(--ease) both}[data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}html.js [data-reveal]:not(.is-visible){opacity:0;transform:translateY(22px)}.accord-bar,.wear-fill{transform-origin:left center;transition:transform 1.1s var(--ease),opacity .15s}.accords li:nth-child(2) .accord-bar{transition-delay:.06s}.accords li:nth-child(3) .accord-bar{transition-delay:.12s}.accords li:nth-child(4) .accord-bar{transition-delay:.18s}.accords li:nth-child(n+5) .accord-bar{transition-delay:.24s}.wear li:nth-child(2) .wear-fill{transition-delay:.05s}.wear li:nth-child(3) .wear-fill{transition-delay:.1s}.wear li:nth-child(4) .wear-fill{transition-delay:.15s}.wear li:nth-child(5) .wear-fill{transition-delay:.2s}.wear li:nth-child(6) .wear-fill{transition-delay:.25s}html.js [data-reveal]:not(.is-visible) .accord-bar,html.js [data-reveal]:not(.is-visible) .wear-fill{transform:scaleX(0)}.seg{transition:background-color .4s var(--ease)}.seg:nth-child(2){transition-delay:.08s}.seg:nth-child(3){transition-delay:.16s}.seg:nth-child(4){transition-delay:.24s}.seg:nth-child(5){transition-delay:.32s}html.js [data-reveal]:not(.is-visible) .seg.on{background:var(--paper-2)}.note-tiles li{transition:opacity .5s var(--ease),transform .5s var(--ease)}.note-tiles li:nth-child(2){transition-delay:.05s}.note-tiles li:nth-child(3){transition-delay:.1s}.note-tiles li:nth-child(4){transition-delay:.15s}.note-tiles li:nth-child(n+5){transition-delay:.2s}html.js [data-reveal]:not(.is-visible) .note-tiles li{opacity:0;transform:scale(.85)}.button{transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}@media (hover:hover) and (pointer:fine){.button:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px var(--shadow)}}.button:active,.chip:active{transform:scale(.97)}.chip{transition:background .2s,border-color .2s,color .2s,transform .15s var(--ease)}.brand-list a{transition:padding .3s var(--ease)}@media (hover:hover) and (pointer:fine){.brand-list a:hover{padding-left:10px}}.lang-switch a{transition:background .25s var(--ease),color .25s}.theme-toggle{transition:color .15s,border-color .15s,transform .4s var(--ease)}@media (hover:hover) and (pointer:fine){.theme-toggle:hover{transform:rotate(-20deg)}}@view-transition{navigation:auto}::view-transition-new(root),::view-transition-old(root){animation-duration:.35s;animation-timing-function:var(--ease)}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}html.js [data-reveal]:not(.is-visible),html.js [data-reveal]:not(.is-visible) *{opacity:1!important;transform:none!important}html.js [data-reveal]:not(.is-visible) .seg.on{background:var(--ink)}@view-transition{navigation:none}}