/* Layout: search-first. One centered search card over a faded, drifting wall of bottles.
   The card holds every tool (Similar, Dupes, Describe, Quiz) as a switch; results appear below it;
   any fragrance opens a slide-up detail sheet. Deliberately single-theme dark, like a lit display case. */
:root {
  --bg: #0A0A0D;
  --bg-2: #101015;
  --card: #15151B;
  --card-2: #1B1B23;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --ink: #F4F1EC;
  --ink-2: #C8C4CE;
  --muted: #8A8792;
  --gold: #E4C390;
  --gold-ink: #1A140B;
  --good: #8FD1A8;
  --font-display: "Instrument Serif", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-lg: 14px;
  --r-md: 10px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.32,1.28,.56,1);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 700px) { .wrap { padding-inline: 32px; } }

/* ---------- Header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(10,10,13,.6); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.top.scrolled { border-bottom-color: var(--line); background: rgba(10,10,13,.92); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.logo { font-family: var(--font-display); font-size: 28px; letter-spacing: -.01em; text-decoration: none; }
.logo i { color: var(--gold); font-style: normal; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s var(--ease), opacity .3s; }
.icon-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }
#top-search { opacity: 0; pointer-events: none; }
.top.scrolled #top-search { opacity: 1; pointer-events: auto; }

/* ---------- Hero + search ---------- */
.hero { position: relative; z-index: 5; isolation: isolate; margin-top: -58px; padding-top: 58px; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wall { position: absolute; inset: 0; display: flex; justify-content: center; gap: 18px; opacity: .2; pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, transparent 25%, #000 75%); -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, transparent 25%, #000 75%); }
.wall .col { flex: none; width: 150px; display: grid; gap: 18px; align-content: start; animation: drift 60s linear infinite; }
.wall .col:nth-child(even) { animation-direction: reverse; margin-top: -120px; }
.wall .col div { aspect-ratio: 3 / 4; border-radius: 18px; background: radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--j) 55%, transparent), transparent 75%), #131318; display: grid; place-items: center; }
.wall .col svg { width: 64%; height: auto; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--bg)); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; padding-block: clamp(48px, 10vh, 110px) 40px; }
body.is-home .hero-inner { padding-block: clamp(28px, 6vh, 72px) 30px; }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 11vw, 88px); line-height: .95; letter-spacing: -.025em; margin: 0; text-wrap: balance; animation: rise .9s var(--ease) both; }
.hero h1 em { font-style: italic; background: linear-gradient(100deg, #F6DDB0 0%, var(--gold) 35%, #E89AB0 70%, #A99BF0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.hero .sub { color: var(--ink-2); font-size: clamp(15px, 2vw, 18px); margin: 14px 0 0; text-wrap: balance; animation: rise .9s var(--ease) .06s both; }
@keyframes rise { from { opacity: .001; transform: translateY(14px); } }

.scard { position: relative; z-index: 10; width: min(720px, 100%); margin-top: 14px; text-align: left; background: rgba(22,22,29,.82); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--line-2); border-radius: 26px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); animation: rise .9s var(--ease) .12s both; transition: border-color .3s, box-shadow .3s; }
.scard:focus-within { border-color: rgba(228,195,144,.4); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 6px rgba(228,195,144,.06); }
.srow { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; min-height: 68px; }
.srow > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.field { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.field input { flex: 1; min-width: min(140px, 100%); text-overflow: ellipsis; height: 44px; border: 0; background: none; outline: none; font-size: 17px; }
.field input::placeholder { color: var(--muted); }
.field.vibe input { font-family: var(--font-display); font-size: 22px; }
.field.vibe input::placeholder { font-style: italic; color: rgba(255,255,255,.35); }
.tok { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 4px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--line-2); font-size: 13.5px; max-width: 100%; animation: pop .3s var(--spring); }
.tok .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%), var(--j); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.tok span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok button { flex: none; border: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--ink-2); line-height: 1; font-size: 14px; }
.tok button:hover { background: rgba(255,255,255,.18); color: var(--ink); }
.tok.neg { opacity: .65; }
.tok.neg span { text-decoration: line-through; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
.go { flex: none; height: 48px; min-width: 48px; padding: 0 18px; border-radius: 16px; border: 0; background: var(--gold); color: var(--gold-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .2s var(--ease), filter .2s; }
.go svg { width: 18px; height: 18px; }
.go:hover { filter: brightness(1.06); } .go:active { transform: scale(.95); }
.go:disabled { opacity: .5; }
.fbtn { flex: none; position: relative; width: 48px; height: 48px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); display: grid; place-items: center; color: var(--ink-2); transition: all .2s; }
.fbtn:hover, .fbtn[aria-expanded="true"] { color: var(--ink); background: rgba(255,255,255,.06); }
.fbtn svg { width: 18px; height: 18px; }
.fbtn b { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* Mode switch: a glass segmented control floating over the search bar; the lit segment slides between modes. */
.modes { position: relative; z-index: 11; display: inline-flex; gap: 2px; margin-top: 30px; padding: 4px; border-radius: 999px; background: rgba(22,22,29,.66); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line-2); box-shadow: 0 14px 34px -16px rgba(0,0,0,.8); animation: rise .9s var(--ease) .1s both; }
.modes .pill { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: linear-gradient(100deg, #F6DDB0, var(--gold) 55%, #E6B39C); box-shadow: 0 6px 18px -6px rgba(228,195,144,.6), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .45s var(--spring), width .45s var(--spring); }
.modes button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .25s; }
.modes button svg { width: 16px; height: 16px; }
.modes button:hover { color: var(--ink); }
.modes button[aria-selected="true"] { color: var(--gold-ink); }
@media (max-width: 380px) { .modes button { padding: 8px 13px; gap: 6px; font-size: 13px; } .modes button svg { width: 14px; height: 14px; } }
/* Gradient edge in the headline's colors; it lights up while you type. */
.scard::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(115deg, rgba(246,221,176,.6), rgba(228,195,144,.08) 30%, transparent 55%, rgba(232,154,176,.25) 80%, rgba(169,155,240,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; transition: opacity .35s; pointer-events: none; }
.scard:focus-within::before { opacity: 1; }

.fpanel { display: grid; gap: 10px; padding: 4px 18px 16px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 14px; animation: rise .35s var(--ease); }
.fpanel[hidden] { display: none; }
.fgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fgroup > span { font-size: 12.5px; color: var(--muted); width: 74px; }
.fchip { border: 1px solid var(--line-2); background: transparent; border-radius: 10px; padding: 6px 12px; font-size: 13px; color: var(--ink-2); transition: all .2s var(--ease); }
.fchip:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.results-pop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: rgb(24,24,31); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.6); max-height: min(420px, 60vh); overflow-y: auto; animation: drop .22s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.results-pop .lbl { padding: 8px 10px 4px; font-size: 12px; color: var(--muted); }
.results-pop li.opt { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; cursor: pointer; }
.results-pop li.opt[aria-selected="true"], .results-pop li.opt:hover { background: rgba(255,255,255,.07); }
.results-pop .mini { width: 36px; height: 46px; flex: none; display: grid; place-items: center; }
.results-pop .mini svg { width: 100%; height: 100%; }
.results-pop .mini.ic { width: 36px; height: 36px; border-radius: 12px; background: rgba(228,195,144,.12); color: var(--gold); }
.results-pop .mini.ic svg { width: 18px; height: 18px; }
.results-pop .nm { display: grid; min-width: 0; }
.results-pop .nm b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results-pop .nm small { color: var(--muted); font-size: 12px; }
.results-pop .pr { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.results-pop .pr em { font-style: normal; color: var(--good); margin-right: 8px; font-family: var(--font-body); }

/* Quiz inside the card */
.qbox { padding: 18px 18px 16px; }
.qtop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qprog { flex: 1; display: flex; gap: 5px; }
.qprog i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.qprog i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.qprog i.done::after { transform: scaleX(1); }
.qnum { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.qbox h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 5vw, 34px); line-height: 1.05; margin: 0 0 14px; animation: slideIn .45s var(--ease) both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(18px); } }
.qopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .qopts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.qopt { position: relative; text-align: left; border: 1px solid var(--line-2); background: var(--card); border-radius: 14px; padding: 12px 13px; min-height: 76px; display: grid; align-content: space-between; gap: 10px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; animation: tileIn .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.qopt:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .qopt:last-child:nth-child(odd) { grid-column: auto; } }
.qopt::before { content: ""; position: absolute; inset: 0; background: var(--g); opacity: .14; transition: opacity .3s; }
.qopt:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.25); }
.qopt:hover::before { opacity: .26; }
.qopt[aria-pressed="true"] { border-color: var(--gold); }
.qopt[aria-pressed="true"]::before { opacity: .4; }
.qopt b { position: relative; font-weight: 500; font-size: 14.5px; line-height: 1.3; }
.qopt .sw { position: relative; display: flex; gap: 4px; }
.qopt .sw i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.qback { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 4px 0; }
.qback:hover { color: var(--ink); }
.qback:disabled { opacity: 0; pointer-events: none; }

.popular { display: flex; align-items: center; gap: 8px; margin-top: 18px; width: min(720px, 100%); min-width: 0; animation: rise .9s var(--ease) .2s both; }
.popular > span { font-size: 12px; color: var(--muted); flex: none; }
.pop-row { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); scrollbar-width: none; padding: 2px; }
/* Phones: the Popular row runs off the screen edge, so a cut chip reads as "scroll for more". */
@media (max-width: 760px) { .popular { justify-self: stretch; width: auto; margin-right: calc(50% - 50vw); } }
.pop-row::-webkit-scrollbar { display: none; }
.pchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 4px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(20,20,26,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; color: var(--ink-2); transition: all .2s var(--ease); }
.pchip:hover { color: var(--ink); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.pchip svg { width: 24px; height: 30px; }

/* ---------- Results ---------- */
#results { scroll-margin-top: 70px; }
.res { padding-block: 8px 64px; animation: modeIn .5s var(--ease) both; }
@keyframes modeIn { from { opacity: 0; transform: translateY(12px); } }
.res-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
.res-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 5vw, 36px); line-height: 1.05; letter-spacing: -.015em; }
.res-head h2 em { color: var(--gold); }
.res-head span { font-size: 12px; color: var(--muted); text-align: right; margin-left: auto; }
.res-share { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: none; border-radius: 10px; padding: 5px 11px; font-size: 12px; color: var(--ink-2); }
.res-share:hover { border-color: var(--ink-2); color: var(--ink); }
.res-share svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .res-head { flex-wrap: wrap; row-gap: 6px; } .res-head h2 { flex: 1 1 100%; } .res-head span { margin-left: 0; text-align: left; } .res-share { margin-left: auto; } }
.sub-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 12px; }
.sub-h h3 { margin: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.sub-h span { font-size: 12px; color: var(--muted); }
.dna { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); margin-bottom: 4px; }
.dna-strip { display: flex; height: 12px; border-radius: 10px; overflow: hidden; gap: 2px; }
.dna-strip i { display: block; height: 100%; transform-origin: left; animation: grow .9s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }
.dna-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.dna-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dna-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.tile { position: relative; display: grid; grid-template-rows: auto 1fr; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-lg); padding: 0; overflow: hidden; min-width: 0; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); animation: tileIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tileIn { from { opacity: .001; transform: translateY(18px) scale(.98); } }
.tile:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--j) 55%, transparent); }
.tile:active { transform: scale(.98); }
.tile-img { position: relative; aspect-ratio: 1 / 1.05; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 64%, color-mix(in srgb, var(--j) 45%, transparent), transparent 72%), linear-gradient(180deg, var(--card-2), var(--card)); overflow: hidden; }
.tile-img svg { position: relative; width: 58%; height: auto; margin-top: 8%; transition: transform .6s var(--ease); filter: drop-shadow(0 16px 18px rgba(0,0,0,.5)); }
.tile:hover .tile-img svg { transform: translateY(-6px) scale(1.04) rotate(-1.5deg); }
.badge-row { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; z-index: 1; }
.match { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 10px; background: rgba(10,10,13,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-2); display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.match::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mc, var(--gold)); }
.tag { font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 10px; background: var(--gold); color: var(--gold-ink); margin-left: auto; white-space: nowrap; }
.tag.soft { background: rgba(255,255,255,.12); color: var(--ink); }
.tile-body { display: flex; flex-direction: column; align-self: stretch; gap: 3px; padding: 12px 13px 14px; }
.t-brand { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-name { font-family: var(--font-display); font-size: 21px; line-height: 1.04; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-why { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; }
.t-diff { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.t-price { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.t-save { font-size: 11.5px; color: var(--good); font-weight: 500; white-space: nowrap; }
.dots { display: inline-flex; padding-left: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--card); margin-left: -4px; }
@media (min-width: 700px) { .t-name { font-size: 23px; } .tile-body { padding: 14px 16px 16px; } }
.empty { grid-column: 1 / -1; padding: 36px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); text-align: center; }
.empty .ghost { display: block; margin: 12px auto 0; }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 44%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 700px) { .rail { grid-auto-columns: minmax(170px, 23%); margin-inline: 0; padding-inline: 0; } }

.versus { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; padding: 24px 12px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(60% 70% at 22% 45%, color-mix(in srgb, var(--ja) 32%, transparent), transparent), radial-gradient(60% 70% at 78% 45%, color-mix(in srgb, var(--jb) 32%, transparent), transparent), var(--card); overflow: hidden; }
.vs-side { display: grid; justify-items: center; text-align: center; gap: 4px; min-width: 0; border: 0; background: none; padding: 0; }
.vs-side svg { width: min(120px, 78%); height: auto; filter: drop-shadow(0 18px 20px rgba(0,0,0,.55)); animation: float 7s ease-in-out infinite; margin-bottom: 6px; }
.vs-side:nth-child(3) svg { animation-delay: -3.5s; }
@media (min-width: 900px) { .vs-side svg { width: 170px; } .versus { padding: 34px 24px 28px; } }
.vs-side b { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 4.4vw, 28px); line-height: 1.02; }
.vs-side small { color: var(--muted); font-size: 12.5px; }
.vs-side .p { font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); }
.vs-mid { display: grid; justify-items: center; gap: 8px; align-self: center; }
.vs-mid .vs { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--muted); }
.save-big { grid-column: 1 / -1; text-align: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.save-big .n { font-family: var(--font-display); font-size: clamp(48px, 11vw, 76px); line-height: 1; color: var(--good); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.save-big .l { font-size: 13px; color: var(--ink-2); }
.closeness { display: inline-flex; gap: 3px; }
.closeness i { width: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.closeness i.on { background: var(--good); }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1.2deg); } }

.heard { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 4.5vw, 32px); line-height: 1.15; margin: 28px 0 0; max-width: 36ch; animation: rise .6s var(--ease) both; }
.status { font-size: 13px; color: var(--muted); margin: 12px 0 16px; display: flex; align-items: center; gap: 8px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skel { border-radius: var(--r-lg); background: linear-gradient(100deg, var(--card) 30%, var(--card-2) 50%, var(--card) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; aspect-ratio: 4 / 6; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ghost { border: 1px solid var(--line-2); background: none; border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--ink-2); }
.ghost:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }

/* ---------- Detail sheet ---------- */
.sheet-root { position: fixed; inset: 0; z-index: 100; }
.scrim { position: absolute; inset: 0; background: rgba(4,4,6,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--ease); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 28px 28px 0 0; transform: translateY(105%); transition: transform .5s var(--ease); box-shadow: 0 -30px 80px rgba(0,0,0,.6); overflow: hidden; }
.sheet:focus { outline: none; }
.sheet-root.open .scrim { opacity: 1; }
.sheet-root.open .sheet { transform: translateY(0); }
.sheet.dragging { transition: none; }
@media (min-width: 900px) {
  .sheet { left: auto; top: 12px; bottom: 12px; right: 12px; width: 520px; max-height: none; border-radius: 28px; border-bottom: 1px solid var(--line-2); transform: translateX(110%); }
  .sheet-root.open .sheet { transform: translateX(0); }
}
.grab { flex: none; height: 24px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.grab::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); }
@media (min-width: 900px) { .grab { display: none; } }
.sheet-close { position: absolute; z-index: 3; top: 14px; right: 14px; background: rgba(20,20,26,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.d-hero { position: relative; display: grid; place-items: center; height: 290px; background: radial-gradient(55% 60% at 50% 60%, color-mix(in srgb, var(--j) 52%, transparent), transparent 75%); touch-action: none; }
.d-hero > svg { height: 90%; width: auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); animation: float 7s ease-in-out infinite; }
.d-ring { position: absolute; left: 20px; top: 8px; width: 74px; height: 74px; }
.d-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.d-ring circle.track { stroke: rgba(255,255,255,.1); }
.d-ring circle.val { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease) .15s; }
.d-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 16px; font-weight: 500; }
.d-ring small { position: absolute; left: -10px; right: -10px; bottom: -18px; text-align: center; font-size: 11.5px; color: var(--muted); }
.d-body { padding: 0 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.d-title { display: grid; gap: 4px; }
.d-title .t-brand { font-size: 12px; }
.d-title h2 { font-family: var(--font-display); font-weight: 400; font-size: 42px; line-height: .98; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.d-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ink-2); font-size: 13px; margin-top: 8px; }
.d-sub .pr { font-family: var(--font-mono); font-size: 18px; color: var(--ink); }
.d-sub .tag { margin: 0; }
.d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-aff { margin-top: 8px; }
.cr-disc { margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); text-decoration: none; font-size: 14px; font-weight: 500; transition: all .2s var(--ease); white-space: nowrap; }
.btn:hover { background: rgba(255,255,255,.08); }
.btn:active { transform: scale(.97); }
.btn.gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.gold:hover { filter: brightness(1.06); background: var(--gold); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.d-block h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.d-note { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }
.bars { display: grid; gap: 9px; }
.barrow { display: grid; grid-template-columns: 92px 1fr 28px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.barrow .track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.barrow .track i { display: block; height: 100%; border-radius: 4px; background: var(--c); width: 0; transition: width 1s var(--ease); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.barrow em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; }
.pyramid { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tier-row { display: grid; grid-template-columns: 66px 1fr; gap: 12px; padding: 12px 14px; align-items: start; }
.tier-row + .tier-row { border-top: 1px solid var(--line); }
.tier-row > span { font-size: 12px; color: var(--muted); padding-top: 4px; }
.notes { display: flex; flex-wrap: wrap; gap: 6px; }
.note { font-size: 13px; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.note.shared { border-color: rgba(228,195,144,.5); color: var(--gold); }
.wear { display: flex; flex-wrap: wrap; gap: 8px; }
.wear span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); }
.wear span.on { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.08); }
.wear span.off { opacity: .32; }
.wear svg { width: 14px; height: 14px; }
.clone-of { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--j) 22%, transparent), var(--card)); text-align: left; width: 100%; }
.clone-of .mini { width: 42px; height: 56px; flex: none; }
.clone-of .mini svg { width: 100%; height: 100%; }
.clone-of div { display: grid; min-width: 0; }
.clone-of small { color: var(--muted); font-size: 12px; }
.clone-of b { font-weight: 500; }
.clone-of .sv { margin-left: auto; color: var(--good); font-size: 13px; font-weight: 500; white-space: nowrap; }
.fine { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.mtile { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-md); padding: 0; overflow: hidden; text-align: left; display: grid; grid-template-rows: auto 1fr; transition: transform .3s var(--ease), border-color .3s; }
.mtile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); }
.mtile .ti { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 62%, color-mix(in srgb, var(--j) 42%, transparent), transparent 75%), var(--card-2); }
.mtile .ti svg { width: 54%; height: auto; margin-top: 6%; }
.mtile .tb { padding: 10px 12px 12px; display: grid; gap: 2px; align-content: start; }
.mtile .tb small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile .tb b { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.04; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mtile .tb span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.d-body .rail { margin-inline: -22px; padding-inline: 22px; scroll-padding-inline: 22px; grid-auto-columns: 42%; }
.d-body h2.cr { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1; margin: 0; }
.d-body h2.cr em { color: var(--gold); }
.cr-pts { display: grid; gap: 12px; }
.cr-pts p { margin: 0; color: var(--ink-2); font-size: 14px; }
.cr-pts b { color: var(--ink); font-weight: 500; }
.cr-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-inputs label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.cr-inputs input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); font-size: 14px; text-transform: none; letter-spacing: 0; width: 100%; min-width: 0; }
.cr-shelf { display: grid; gap: 8px; }
.cr-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: left; width: 100%; }
.cr-item .mini { width: 48px; height: 58px; display: grid; place-items: center; }
.cr-item .mini svg { height: 92%; width: auto; }
.cr-item > div { min-width: 0; }
.cr-item b { font-family: var(--font-display); font-weight: 400; font-size: 18px; display: block; line-height: 1.1; }
.cr-item q { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; quotes: none; }
.cr-item .pr { font-family: var(--font-mono); font-size: 13px; }
.cr-head { display: flex; gap: 12px; align-items: center; }
.cr-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 200deg, #E4C390, #E89AB0, #A99BF0, #E4C390); color: var(--gold-ink); font-family: var(--font-display); font-size: 24px; flex: none; }

footer { border-top: 1px solid var(--line); padding-block: 22px calc(72px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 12px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
footer p { margin: 0; max-width: 72ch; }
footer button { border: 0; background: none; color: var(--ink-2); font-size: 13px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
footer button:hover { color: var(--gold); }
.foot-links { display: flex; gap: 18px; }


/* Editorial styling: text and hairlines instead of chips and bubbles */
.match { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink-2); font-size: 11.5px; }
.match::before { display: none; }
.tag, .tag.soft { background: none; padding: 0; font-size: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tag { color: var(--gold); } .tag.soft { color: var(--muted); }
.d-sub .tag, .d-sub .tag.soft { font-size: inherit; font-weight: inherit; color: inherit; }
.d-ring { width: auto; height: auto; left: 22px; top: 14px; display: grid; gap: 4px; }
.d-ring svg { display: none; }
.d-ring b { position: static; display: block; font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: .9; }
.d-ring small { position: static; text-align: left; }
.pyramid { border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.tier-row { padding: 12px 0; grid-template-columns: 74px 1fr; border-bottom: 1px solid var(--line); }
.tier-row + .tier-row { border-top: 0; }
.notes { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.note { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; border-radius: 0; font-size: inherit; }
.note.shared { color: var(--gold); }
.note small { color: var(--muted); font-size: .8em; }
/* a small picture of the note's material (public/note-icons.js) */
.ni { width: 18px; height: 18px; flex: none; opacity: .9; -webkit-mask-image: linear-gradient(#000 30%, rgba(0,0,0,.4)); mask-image: linear-gradient(#000 30%, rgba(0,0,0,.4)); }
.wear { display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 8px 20px; }
.wear span, .wear span.on { padding: 0; border: 0; background: none; border-radius: 0; }
.wear span.on { color: var(--ink); }
.wear span.off { opacity: .28; }
@media (max-width: 480px) { .wear { grid-template-columns: repeat(4, auto); } }
@media (max-width: 359px) { .wear { grid-template-columns: repeat(3, auto); } }
.barrow .track { height: 3px; border-radius: 0; }
.barrow .track i { border-radius: 0; box-shadow: none; }
.dna-strip { border-radius: 2px; height: 8px; }
.scard { border-radius: 18px; }

/* Opening sequence */
#intro { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; place-items: center; overflow: hidden; transition: opacity .9s var(--ease); cursor: pointer; }
#intro.out { opacity: 0; pointer-events: none; }
#intro span { grid-area: 1 / 1; position: relative; font-family: var(--font-display); font-size: clamp(64px, 17vw, 168px); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; opacity: 0; animation: sweep 1.6s var(--ease) both; }
#intro span::before { content: ""; position: absolute; inset: -40% -50%; z-index: -1; background: radial-gradient(closest-side, var(--c), transparent); opacity: .32; filter: blur(30px); }
#intro span:nth-child(1) { --c: #E4C390; animation-delay: .15s; }
#intro span:nth-child(2) { --c: #E8577A; animation-delay: 1.05s; }
#intro span:nth-child(3) { --c: #A792E6; animation: land 1.5s var(--ease) 1.95s both; font-style: italic; background: linear-gradient(100deg, #F6DDB0, var(--gold) 35%, #E89AB0 70%, #A99BF0); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
@keyframes sweep { 0% { opacity: 0; transform: translateX(32vw); filter: blur(16px); } 38%, 58% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: translateX(-32vw); filter: blur(16px); } }
@keyframes land { 0% { opacity: 0; transform: translateX(32vw); filter: blur(16px); } 55% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 1; transform: scale(.96); } }
body.intro-on .hero-inner > * { animation-play-state: paused; }
.scard.landing { animation: cardLand 1.1s var(--ease) both; }
@keyframes cardLand { 0% { opacity: 0; transform: translateY(20px) scale(.96); } 55% { opacity: 1; box-shadow: 0 0 0 10px rgba(228,195,144,.12), 0 30px 80px -20px rgba(0,0,0,.7); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}
/* Shelf (collection + wishlist) and compare */
.top-r { display: flex; gap: 8px; align-items: center; }
.d-actions .btn.sm { height: 40px; font-size: 13px; }
.d-minor { display: flex; flex-wrap: wrap; gap: 8px; }
.v-head { padding: 58px 22px 0; display: grid; gap: 6px; }
.v-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.v-head h2 em { color: var(--gold); }
.v-head p { margin: 0; color: var(--muted); font-size: 13px; }
.v-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.v-tabs button { height: 38px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: 13.5px; }
.v-tabs button[aria-selected="true"] { background: rgba(255,255,255,.1); color: var(--ink); }
.shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 520px) { .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { padding: 12px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; }
.stats b { font-family: var(--font-mono); font-size: 18px; font-weight: 500; }
.stats span { font-size: 12.5px; color: var(--muted); }
.insight { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; }
.insight b { color: var(--ink); font-weight: 500; }
.insight button { border: 0; background: none; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cov { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cov div { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: 10px; border: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.cov div b { font-family: var(--font-mono); font-size: 16px; color: var(--ink); font-weight: 500; }
.cov div.gap { border-style: dashed; border-color: rgba(228,195,144,.45); }
.cov div.gap b { color: var(--gold); }
.cmp { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.cmp-col { display: grid; justify-items: center; text-align: center; gap: 3px; min-width: 0; position: relative; }
.cmp-col .bt { border: 0; background: radial-gradient(55% 55% at 50% 60%, color-mix(in srgb, var(--j) 45%, transparent), transparent 75%); padding: 6px 0 0; width: 100%; display: grid; place-items: center; }
.cmp-col .bt svg { width: min(86px, 70%); height: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
.cmp-col small { color: var(--muted); font-size: 11.5px; }
.cmp-col b { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.02; }
.cmp-col .p { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.cmp-col .rm { position: absolute; top: 0; right: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(20,20,26,.8); color: var(--muted); font-size: 14px; line-height: 1; }
.cmp-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; align-items: center; }
.cmp-lbl { font-size: 12px; color: var(--ink-2); margin: 10px 0 5px; }
.cmp-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; position: relative; }
.cmp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.cmp-bar.best i { box-shadow: 0 0 10px var(--c); }
.cmp-cell { font-size: 13px; color: var(--ink-2); text-align: center; }
.cmp-cell.on { color: var(--ink); }
.cmp-cell.off { opacity: .3; }
.pairs { display: grid; gap: 8px; }
.pair { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.pair b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.pair .cmp-bar { grid-column: 1 / -1; }
.cmp-notes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.cmp-notes .notes { align-content: start; }
.cmp-notes .notes { gap: 5px 12px; }
.cmp-notes .note { font-size: 12px; gap: 5px; }
.cmp-notes .ni { width: 15px; height: 15px; }
.tray { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, calc(100% + 120px)); visibility: hidden; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 18px; background: rgba(27,27,35,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.5); transition: transform .45s var(--spring), visibility 0s .45s; }
.tray.show { transform: translate(-50%, 0); visibility: visible; transition: transform .45s var(--spring); }
.tray .mini-row { display: flex; }
.tray .mini-row span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--j) 55%, #15151B), #15151B); border: 2px solid rgba(27,27,35,1); margin-left: -8px; }
.tray .mini-row span:first-child { margin-left: 0; }
.tray .mini-row svg { width: 60%; height: auto; }
.tray .btn { height: 40px; font-size: 13.5px; }
.tray .x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--muted); font-size: 18px; }

/* ---------- Header: library button ---------- */
.lib-btn { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 12px; border-radius: 20px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-size: 13.5px; font-weight: 500; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.lib-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.lib-btn:active { transform: scale(.96); }
.lib-btn svg { width: 17px; height: 17px; }
.lib-btn b { min-width: 18px; height: 18px; padding: 0 5px; margin-right: -4px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font: 600 10.5px/18px var(--font-mono); text-align: center; }
.lib-btn b:empty { display: none; }

/* ---------- Landing: drifting bottles + ways in (home only) ---------- */
body:not(.is-home) #landing { display: none; }
#landing { position: relative; z-index: 4; padding-bottom: 32px; animation: rise .9s var(--ease) .25s both; }
.mq-eyebrow { margin: 0 auto 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
.mq-eyebrow b { color: var(--ink-2); font-weight: 500; }
.marquee { display: grid; gap: 12px; overflow: hidden; padding-block: 6px; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-row { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mq-row.grabbing { cursor: grabbing; }
.mq-row.grabbing .mq-card { pointer-events: none; }
.mq-card svg { -webkit-user-drag: none; }
.mq-set { display: flex; gap: 12px; padding-right: 12px; }
.mq-card { flex: none; width: 148px; display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; transition: transform .35s var(--ease), border-color .3s; }
.mq-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.mq-img { height: 112px; display: grid; place-items: center; background: radial-gradient(60% 62% at 50% 62%, color-mix(in srgb, var(--j) 48%, transparent), transparent 75%), var(--card-2); }
.mq-img svg { height: 84%; width: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)); }
.mq-t { display: grid; gap: 1px; padding: 9px 11px 11px; min-width: 0; }
.mq-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-t b { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-t span, .mq-t em { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); font-style: normal; margin-top: 3px; }
.mq-t em { color: var(--good); }
@media (min-width: 700px) { .mq-card { width: 170px; } .mq-img { height: 132px; } }
.ways-wrap { padding-top: 56px; }
.ways-h { margin: 0 0 18px; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 6vw, 46px); line-height: 1; letter-spacing: -.015em; text-align: center; }
.ways-h em { font-style: italic; color: var(--gold); }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.way { position: relative; display: grid; align-content: start; gap: 6px; text-align: left; padding: 18px 16px; min-height: 118px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); transition: transform .3s var(--ease), border-color .3s, background .3s; }
.way:hover { transform: translateY(-3px); border-color: rgba(228,195,144,.35); background: var(--card-2); }
.way b { padding-right: 22px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.05; }
.way > span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.way i { position: absolute; top: 18px; right: 16px; color: var(--muted); transition: transform .3s var(--ease), color .3s; }
.way i svg { width: 16px; height: 16px; display: block; }
.way:hover i { transform: translateX(3px); color: var(--gold); }

/* ---------- Compare toggle on result tiles ---------- */
.tile-w { position: relative; display: grid; min-width: 0; container-type: inline-size; }
/* Compare sits in its own action row at the card's foot (never over the bottle) */
.tile-w .tile-body { padding-bottom: 52px; }
.ctog-box { position: absolute; left: 13px; right: 13px; bottom: 13px; height: 30px; pointer-events: none; animation: tileIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ctog { position: absolute; left: 0; bottom: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border-radius: 15px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 500; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.ctog svg { width: 14px; height: 14px; }
.ctog:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.ctog:active { transform: scale(.94); }
.ctog[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* ---------- Compare bar ---------- */
.tray { gap: 12px; }
.tray .mini-row, .tray-t { cursor: pointer; }
.tray .mini-row span.slot { background: none; border: 1.5px dashed rgba(255,255,255,.25); }
.tray-t { display: grid; line-height: 1.2; }
.tray-t b { font-size: 13.5px; font-weight: 600; }
.tray-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tray .btn svg { width: 15px; height: 15px; }
@media (max-width: 400px) { .tray { gap: 8px; max-width: calc(100vw - 16px); } .tray .btn svg { display: none; } }
@media (max-width: 359px) { .tray-t { display: none; } }
/* Netlify's free-plan badge sits fixed at the bottom right (about 170 x 40); below ~760px the centred tray would cover it, so it rides above. */
@media (max-width: 760px) { .tray { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }
body.sheet-open .tray { transform: translate(-50%, calc(100% + 120px)); visibility: hidden; transition: transform .45s var(--spring), visibility 0s .45s; }
body:not(.sheet-open) .tray.show.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: translate(-50%, 0) scale(1.06); } }

/* ---------- Sheet: actions, back link, wide compare ---------- */
.d-acts3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.d-acts3 .btn { padding: 0 8px; gap: 6px; }
.sheet-back { position: absolute; z-index: 3; top: 14px; left: 14px; height: 40px; display: inline-flex; align-items: center; gap: 4px; padding: 0 14px 0 8px; border-radius: 20px; border: 1px solid var(--line-2); background: rgba(20,20,26,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13.5px; }
.sheet-back svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .sheet.wide { width: min(780px, calc(100vw - 24px)); } }

/* ---------- Library + compare views ---------- */
.d-body.lib, .d-body.cmpv { margin-top: 18px; padding-bottom: 40px; }
.picker { display: grid; gap: 4px; }
.pk-in { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); cursor: text; transition: border-color .2s; }
.pk-in:focus-within { border-color: rgba(228,195,144,.55); }
.pk-in svg { width: 18px; height: 18px; flex: none; }
.pk-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--ink); font-size: 16px; }
.pk-in input::placeholder { color: var(--muted); }
.pk-in input::-webkit-search-cancel-button { filter: invert(.7); }
.pk-list { display: grid; gap: 2px; }
.pk-list:empty { display: none; }
.pk-lbl { padding: 8px 4px 2px; font-size: 12px; color: var(--muted); }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 12px; background: none; text-align: left; }
.pick:hover { background: rgba(255,255,255,.06); }
.pick .mini { width: 30px; height: 38px; flex: none; display: grid; place-items: center; }
.pick .mini svg { width: 100%; height: 100%; }
.pick .nm { display: grid; flex: 1; min-width: 0; }
.pick .nm b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .nm small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .pr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.pk-add { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(228,195,144,.14); color: var(--gold); }
.pk-add svg { width: 14px; height: 14px; }
.lib-line { margin: 0 0 -10px; font-size: 13px; color: var(--muted); }
.lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
@media (min-width: 520px) { .lgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lcard { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; }
.lc-main { display: grid; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
.lc-img { aspect-ratio: 3 / 4; display: grid; place-items: center; margin-bottom: 7px; border-radius: var(--r-md); border: 1px solid var(--line); background: radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--j) 48%, transparent), transparent 75%), var(--card); transition: transform .3s var(--ease), border-color .3s; }
.lc-main:hover .lc-img { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.lc-img svg { width: 58%; height: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)); }
.lc-main small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-main b { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-p { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.lc-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(14,14,18,.75); color: var(--muted); font-size: 15px; line-height: 1; }
.lc-x:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.lc-acts { display: grid; gap: 4px; }
.lc-acts button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 6px; border-radius: 14px; border: 1px solid var(--line-2); background: none; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.lc-acts button:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.lc-acts button svg { width: 12px; height: 12px; }
.lc-acts .dupe { color: var(--good); border-color: rgba(143,209,168,.35); }
.lib-note { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.lib-note b { color: var(--ink); font-weight: 500; }
.lib-note button { border: 0; background: none; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
#v-cmp-lib { justify-self: start; }
.cmp-col.add { min-height: 176px; align-content: center; gap: 6px; padding: 10px; border: 1.5px dashed rgba(228,195,144,.4); border-radius: var(--r-lg); background: rgba(228,195,144,.04); color: var(--ink-2); transition: background .2s, border-color .2s; }
.cmp-col.add:hover { background: rgba(228,195,144,.09); border-color: var(--gold); }
.cmp-col.add > span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(228,195,144,.14); color: var(--gold); }
.cmp-col.add > span svg { width: 18px; height: 18px; }
.cmp-col.add b { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; line-height: 1.2; }
.cmp-col.ghosted { opacity: .4; border-color: var(--line-2); }

@media (prefers-reduced-motion: reduce) {
  .mq-row { cursor: auto; touch-action: auto; }
  .marquee { overflow-x: auto; }
  .mq-set[aria-hidden] { display: none; }
}

/* ---------- Results: sort bar, filters, lean toward a pick ---------- */
.rbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 12px; }
.sorts { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 3px; border: 1px solid var(--line); border-radius: 12px; }
.sorts::-webkit-scrollbar { display: none; }
.schip { flex: none; border: 0; background: none; border-radius: 9px; padding: 6px 11px; font-size: 12.5px; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; }
.schip:hover { color: var(--ink); }
.schip[aria-pressed="true"] { background: rgba(255,255,255,.1); color: var(--ink); }
.rfil { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: none; border-radius: 12px; padding: 7px 12px; font-size: 12.5px; color: var(--ink-2); }
.rfil svg { width: 14px; height: 14px; }
.rfil b { min-width: 17px; height: 17px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; }
.rfil[aria-expanded="true"] { color: var(--ink); border-color: rgba(255,255,255,.3); }
.rfpanel { display: grid; gap: 10px; padding: 14px 16px; margin: -2px 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); animation: rise .3s var(--ease); }
.leanbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.leanbar::-webkit-scrollbar { display: none; }
.leanbar > span { flex: none; font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.tiltbar { margin-top: -4px; }
.lchip { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: none; border-radius: 10px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.lchip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--j); }
.lchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.more { display: block; margin: 16px auto 0; }
/* Per-pick closeness on a tile: one hairline row per pick, the closest one lit */
.t-lean { display: grid; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.ln { position: relative; display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); padding-bottom: 4px; }
.ln::after { content: ""; position: absolute; left: 14px; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--j) var(--v), rgba(255,255,255,.06) var(--v)); opacity: .55; }
.ln i { width: 7px; height: 7px; border-radius: 50%; background: var(--j); }
.ln em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln b { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--ink-2); }
.ln.lead { color: var(--ink); } .ln.lead b { color: var(--ink); } .ln.lead::after { opacity: 1; }
.ln-more { font-size: 11px; color: var(--muted); }
button.pair { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--ink-2); }
button.pair:hover span { color: var(--ink); }
.tok.ref .dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 2px rgba(228,195,144,.35); }
.results-pop .pr em.add { color: var(--gold); margin-right: 0; font-size: 12px; }

/* ---------- Compare: wear + basics tables ---------- */
.ctab { display: grid; grid-template-columns: minmax(76px, 112px) repeat(var(--n), minmax(0, 1fr)); font-size: 13px; }
.ctab > div { display: flex; align-items: center; min-width: 0; padding: 10px 6px; border-top: 1px solid var(--line); }
.ctab > .ct-h { border-top: 0; padding: 0 6px 10px; justify-content: center; gap: 6px; font-family: var(--font-display); font-size: 16px; line-height: 1.08; color: var(--ink); text-align: center; }
.ct-h:first-child { justify-content: flex-start; }
.ct-h i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--j); }
.ct-h span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-l { gap: 8px; color: var(--muted); font-size: 12.5px; }
.ct-c { justify-content: center; text-align: center; }
.ct-t { color: var(--ink-2); line-height: 1.3; overflow-wrap: anywhere; }
.ct-t.off { opacity: .35; }
.ct-t.mono { font-family: var(--font-mono); color: var(--ink); }
.ct-t.best { color: var(--good); }
.wd { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16); }
.wd.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(228,195,144,.35); }
.ct-link { border: 0; background: none; padding: 0; font: inherit; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; line-height: 1.3; }
@media (max-width: 480px) { .ctab { grid-template-columns: 70px repeat(var(--n), minmax(0, 1fr)); font-size: 12.5px; } .ctab > .ct-h { font-size: 14.5px; } }
/* Dots take the juice colour; a faint ring keeps dark juices visible */
.ct-h i, .lchip i, .ln i { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.ct-notes > div:not(.ct-h) { align-items: flex-start; }
.ct-notes > .ct-c, .ctab.ct-notes > .ct-h { justify-content: flex-start; text-align: left; }
.ct-notes .notes { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

/* Share button on the bottle sheet (under the close button) */
.d-share { position: absolute; z-index: 2; top: 62px; right: 14px; background: rgba(20,20,26,.88); }
/* Toast: top centre, clear of Netlify's badge and the compare tray at the bottom */
#toast { position: fixed; z-index: 120; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -160%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; border-radius: 14px; background: rgba(27,27,35,.95); border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0,0,0,.45); font-size: 13.5px; color: var(--ink); transition: transform .35s var(--spring); pointer-events: none; }
#toast.show { transform: translate(-50%, 0); pointer-events: auto; }
#toast span { overflow-wrap: anywhere; }
#toast button { flex: none; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 600; padding: 4px 6px; }
.v-share { justify-self: start; margin-top: 6px; }

/* ---------- Today (home): scent of the day, what to wear, picks, recently viewed ---------- */
.btn.sm { height: 40px; font-size: 13px; padding: 0 12px; }
.today { position: relative; z-index: 4; display: grid; gap: 26px; margin-bottom: 40px; animation: rise .9s var(--ease) .25s both; }
/* Home shows all of Today; with similar results on screen only the two cards (above the results); other modes hide it. */
body:not(.is-home) .today .t-row { display: none; }
body:not(.is-home):not([data-mode="similar"]) .today { display: none; }
.today-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .today-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.sotd { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; text-align: left; padding: 18px 18px 18px 10px; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(70% 90% at 12% 60%, color-mix(in srgb, var(--j) 30%, transparent), transparent 70%), var(--card); transition: border-color .3s, transform .3s var(--ease); }
.sotd:hover { border-color: rgba(228,195,144,.35); transform: translateY(-2px); }
.sotd-img { display: grid; place-items: center; }
.sotd-img svg { width: 84px; height: auto; }
.sotd-t { display: grid; gap: 4px; min-width: 0; }
.sotd-t small, .wc-k { font-size: 12.5px; color: var(--gold); }
.sotd-t b { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -.01em; }
.sotd-b { font-size: 13px; color: var(--ink-2); }
.sotd-why { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.sotd-t em { font-style: normal; font-size: 13px; color: var(--good); }
.sotd-next { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 6px; }
.wcard { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); min-width: 0; }
.wc-p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.wcard > .btn { justify-self: start; }
.wc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.wc-main { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 0; border: 0; background: none; text-align: left; }
.wc-main .mini { width: 34px; height: 44px; flex: none; }
.wc-main .mini svg { width: 100%; height: 100%; }
.wc-t { display: grid; gap: 2px; min-width: 0; }
.wc-t b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-t small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.wc-wear[aria-pressed="true"] { border-color: rgba(143,209,168,.5); color: var(--good); }
.wc-wear svg { width: 14px; height: 14px; }
.wc-now { margin: 0; font-size: 13px; color: var(--good); }
.wc-now button { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wc-foot { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.wc-foot b { color: var(--gold); font-weight: 500; }
.t-row { display: grid; gap: 12px; min-width: 0; }
.t-row-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.t-row-h h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; }
.t-row-h h2 em { font-style: italic; color: var(--gold); }
.t-row-s { font-size: 12px; color: var(--muted); }
.t-row-h .ghost { padding: 6px 12px; }
@media (min-width: 760px) { .today .rail { grid-auto-columns: minmax(150px, 180px); } }

/* ---------- Browse: tappable notes, brand and accords; note/brand/accord pages ---------- */
button.note { padding: 0; border: 0; background: none; text-align: left; text-decoration: underline dotted rgba(255,255,255,.22); text-underline-offset: 4px; }
button.note:hover { color: var(--gold); text-decoration-color: currentColor; }
button.t-brand { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; text-decoration: underline dotted rgba(255,255,255,.22); text-underline-offset: 4px; }
button.t-brand:hover { color: var(--gold); }
button.barrow { width: 100%; padding: 2px 0; border: 0; background: none; text-align: left; border-radius: 6px; }
button.barrow:hover span:first-child { color: var(--gold); }
.d-wear { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; color: var(--muted); }
.d-wear .btn[aria-pressed="true"] { border-color: rgba(143,209,168,.5); color: var(--good); }
.d-wear .btn svg { width: 15px; height: 15px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.v-list { padding-top: 18px; padding-bottom: 40px; }
.v-head .v-share { margin-top: 8px; }
.list-all { justify-self: center; }
.note-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.note-chips .chip { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-size: 13px; color: var(--ink-2); }
.note-chips .chip { display: inline-flex; align-items: center; gap: 7px; padding-left: 10px; }
.note-chips .ni { width: 16px; height: 16px; }
.v-head h2 .ni { width: .8em; height: .8em; margin-right: .22em; vertical-align: -.04em; }
.note-chips .chip:hover { border-color: rgba(228,195,144,.5); color: var(--gold); }
.sheet-back { max-width: calc(100% - 140px); }
.sheet-back span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-add { justify-self: start; }
#mq-stats span { white-space: nowrap; }
/* 👍/👎 match feedback, right of the compare toggle */
.fbx { position: absolute; right: 0; bottom: 0; pointer-events: auto; display: inline-flex; height: 30px; border-radius: 15px; border: 1px solid var(--line-2); overflow: hidden; }
.fb { display: grid; place-items: center; width: 30px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink-2); transition: background .2s, color .2s; }
.fb + .fb { border-left: 1px solid var(--line-2); }
.fb svg { width: 14px; height: 14px; }
.fb:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.fb:active svg { transform: scale(.88); }
.fb[aria-pressed="true"] { background: var(--good); color: var(--gold-ink); }
.fb[data-fb="-1"][aria-pressed="true"] { background: var(--line-2); color: var(--ink); }
/* Phone-width tiles: Compare shrinks to its icon so the votes fit beside it (the label stays in aria-label). */
@container (max-width: 189px) { .ctog { width: 30px; padding: 0; justify-content: center; } .ctog span { display: none; } }
.mtile .tb .mnote { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
/* ---------- Bottle page (one pick): header card, jump links, then one idea per section ---------- */
.bhero { position: relative; display: grid; grid-template-columns: clamp(92px, 24vw, 150px) minmax(0, 1fr); gap: 14px clamp(14px, 4vw, 28px); align-items: center; margin-top: 26px; padding: clamp(16px, 3.5vw, 26px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; isolation: isolate; animation: rise .6s var(--ease) both;
  background: radial-gradient(60% 90% at 12% 60%, color-mix(in srgb, var(--j) 34%, transparent), transparent 70%), linear-gradient(180deg, var(--card-2), var(--card)); }
.bh-img { grid-row: span 2; display: grid; place-items: center; }
.bh-img svg { width: 82%; height: auto; filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)); }
.bh-txt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; align-self: end; }
.bh-txt small { font-size: 12.5px; color: var(--muted); }
.bh-txt h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 6.4vw, 46px); line-height: 1; letter-spacing: -.015em; overflow-wrap: anywhere; }
.bh-meta { font-size: 13px; color: var(--ink-2); }
.bh-dna { margin-top: 10px; display: grid; gap: 8px; }
.bh-dna .dna-strip { height: 6px; }
.bh-dna .dna-legend { font-size: 12px; gap: 3px 12px; }
.bh-act { grid-column: 2; align-self: start; display: flex; flex-wrap: wrap; gap: 8px; }
.bh-act .ghost { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; }
.bh-act svg { width: 14px; height: 14px; }
.bnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 40; display: flex; align-items: center; gap: 6px; margin: 0 -16px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; background: rgba(10,10,13,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.bnav::-webkit-scrollbar { display: none; }
.bjump { flex: none; display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; color: var(--ink-2); transition: border-color .2s, color .2s; }
.bjump b { font-family: var(--font-mono); font-weight: 500; color: var(--gold); }
.bjump:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.bnav + .rfpanel { margin-top: 12px; }
.bh-act .rfil { border-radius: 10px; }
.bsec { scroll-margin-top: 124px; margin-top: 34px; }
.bsec .sub-h { margin: 0 0 14px; align-items: center; }
.bsec .sub-h h3 { font-family: var(--font-display); font-size: clamp(22px, 4.6vw, 28px); font-weight: 400; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.bsec .sub-h span { font-size: 13px; font-weight: 500; color: var(--good); }
.bsec .sorts { margin-bottom: 12px; width: max-content; max-width: 100%; }
/* Known dupes: rows with a match bar and the saving, so the list reads like a price/closeness ladder */
.dlist { display: grid; gap: 8px; }
.drow-w { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding-right: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); transition: border-color .3s, transform .3s var(--ease); animation: tileIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.drow-w:hover { border-color: color-mix(in srgb, var(--j, var(--gold)) 50%, var(--line-2)); }
.drow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img txt price" "img meter price"; align-items: center; gap: 4px 14px; min-height: 84px; min-width: 0; padding: 10px 6px 10px 10px; border: 0; background: none; color: var(--ink); text-align: left; }
.d-img { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 62%, color-mix(in srgb, var(--j) 50%, transparent), transparent 75%), var(--card-2); }
.d-img svg { height: 44px; width: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.d-txt { display: grid; gap: 1px; min-width: 0; }
.d-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-txt b { font-size: 15px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.d-txt > i { font-style: normal; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-txt > i.d-orig { color: var(--gold); }
.vtag { justify-self: start; margin-top: 3px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 10.5px; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.vtag.v-verified { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.d-img { grid-area: img; } .d-txt { grid-area: txt; align-self: end; } .d-price { grid-area: price; }
.d-meter { grid-area: meter; align-self: start; display: flex; align-items: center; gap: 8px; margin-top: 2px; max-width: 240px; }
.d-meter i { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.d-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold)); transform-origin: left; animation: grow .9s var(--ease) both; }
.d-meter em { font-family: var(--font-mono); font-style: normal; font-size: 11px; color: var(--ink-2); }
.d-price { display: grid; justify-items: end; gap: 4px; }
.d-price b { font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.d-price em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); padding: 2px 7px; border-radius: 8px; }
.drow-w .ctog { position: static; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.drow-w .ctog span { display: none; }
.bnone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 16px; font-size: 13px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
/* The line: versions as stops on one connected track, this bottle first */
.vline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 0 16px 4px; }
.vline::-webkit-scrollbar { display: none; }
.vstop { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 6px; border: 0; background: none; color: var(--ink); text-align: center; scroll-snap-align: start; animation: tileIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.vstop::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.vstop:first-child::before { left: 50%; }
.vstop:last-child::before { right: 50%; }
.v-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--bg); }
.vstop.cur .v-dot { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.v-img { width: 96px; height: 96px; margin-top: 4px; border-radius: 16px; display: grid; place-items: center; border: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 64%, color-mix(in srgb, var(--j) 45%, transparent), transparent 75%), var(--card); transition: transform .3s var(--ease), border-color .3s; }
.v-img svg { height: 70px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.vstop:hover .v-img { transform: translateY(-3px); border-color: var(--line-2); }
.vstop.cur .v-img { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.vstop b { min-height: 2.5em; font-size: 13px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vstop em { font-style: normal; font-size: 11px; color: var(--ink-2); background: rgba(255,255,255,.07); padding: 2px 8px; border-radius: 8px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vstop.cur em { background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.vstop small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* Names share one row across the track, so the chips line up without reserving a second line */
@supports (grid-template-rows: subgrid) { .vline { grid-template-rows: repeat(5, auto); row-gap: 6px; } .vstop { grid-row: span 5; grid-template-rows: subgrid; } .vstop b { min-height: 0; } }
/* Make it yours: "Sauvage + Sweeter" as a formula above colour-coded direction chips */
.bmine .is-busy { opacity: .4; pointer-events: none; transition: opacity .2s; }
.tune { display: grid; gap: 16px; padding: 18px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, var(--card-2), var(--card)); }
.tformula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.tf-base, .tf-dir, .tf-ph { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 999px; font-family: var(--font-display); font-size: 18px; line-height: 1; }
.tf-base { background: color-mix(in srgb, var(--j) 26%, var(--card-2)); border: 1px solid color-mix(in srgb, var(--j) 55%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-op { font-size: 18px; color: var(--muted); }
.tf-dir { border: 1px solid color-mix(in srgb, var(--c) 65%, transparent); background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--ink); animation: rise .35s var(--spring) both; }
.tf-dir i { font-family: var(--font-body); font-style: normal; font-size: 15px; color: var(--ink-2); }
.tf-ph { border: 1px dashed var(--line-2); color: var(--muted); }
.tgrid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tchip { max-width: none; padding: 9px 14px; border-radius: 999px; }
.tchip i { background: var(--c); }
.tchip[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c); color: var(--ink); }
@media (max-width: 520px) { .tf-base, .tf-dir, .tf-ph { font-size: 16.5px; height: 34px; padding: 0 12px; } }
@media (min-width: 760px) { .d-price { justify-items: start; } .drow { grid-template-columns: 56px minmax(180px, 300px) minmax(0, 1fr) 96px; grid-template-areas: "img txt meter price"; gap: 18px; } .d-txt, .d-meter { align-self: center; } .d-meter { max-width: none; margin: 0; } }
@media (max-width: 520px) { .bh-img { grid-row: auto; } .bh-txt { align-self: center; } .bh-act { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .bh-act .ghost { justify-content: center; } .vline { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } .bnav { gap: 5px; mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); } .bjump { padding: 6px 10px; font-size: 12px; } .drow { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "img txt txt" "img meter price"; gap: 4px 12px; } .d-txt { align-self: end; } .d-img { width: 48px; height: 48px; } .d-img svg { height: 38px; } .d-meter { max-width: none; } .d-price { display: flex; align-items: center; gap: 6px; } .vline { grid-auto-columns: 108px; } .v-img { width: 84px; height: 84px; } .v-img svg { height: 60px; } .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .tchip { padding: 9px 10px; justify-content: flex-start; } .schip { padding: 6px 9px; font-size: 12px; } }
@media (max-width: 360px) { .tune { padding: 14px 10px; } .tgrid { gap: 5px; } .tchip { padding: 8px 6px; gap: 5px; font-size: 11.5px; } .schip { padding: 6px 7px; } }