/* Scent Profiler: shared styles, mobile-first.
   The page is built around one idea: a perfume is a timeline, and the last hour matters most.
   The design is a still life of materials in daylight: amber oil in glass, dried rose petals, calendula, frankincense
   resin, olive wood. The ground is pale wood and cream, lit by an amber glow from the oil and a rose glow from the
   petals; a band of dark wood edged with a gold line runs across the top. Two faint line sketches from botanical plates,
   a Redouté rose and Thomé lavender (khuzama), close every page in a band of their own after the footer, so nothing is
   ever drawn over them (tools/botanicals.py). Surfaces are cream glass with a gold rim and a white gleam along the top
   edge. Gold is never a metallic gradient: the primary buttons carry a soft shade from a lighter gold at the top to a
   deeper one at the bottom, the brand mark and the marks of a choice are one flat gold, and elsewhere gold is a thin
   line; as text it is a deep old gold that reads on cream. The wear ribbon follows the board: calendula
   for the opening, rose petal for the heart, amber oil for the drydown; sage carries good, petal rose carries bad.
   Every colour was set in OKLCH and checked for WCAG AA against the surface it sits on. One theme: there is no dark mode.
   Type: Fraunces for Latin headings, Noto Naskh Arabic for Arabic headings; text is IBM Plex Sans in Latin and Noto Sans
   Arabic in Arabic, whose letters draw larger and more open than IBM Plex Sans Arabic's at the same size. */

:root {
  color-scheme: light;
  --ground: #F6E8D0; --ground-2: #EFDBBD;
  --paper: #FCF8F0; --paper-2: #F0DFC4; --line: #DCCBB1; --line-2: #C1AA8B;
  --glass: rgba(252, 248, 240, .68); --glass-2: rgba(252, 248, 240, .5);
  --ink: #2A1B11; --ink-2: #4B3B2F; --ink-3: #665344; --on-strong: #FCF8F0;
  --gold: #8C5F00; --gold-2: #734900; --gold-soft: #F9E6BB;
  --rim: rgba(140, 95, 0, .38); --rim-2: rgba(140, 95, 0, .5); --gleam: rgba(255, 255, 255, .75);
  --accent: #8C5F00; --accent-2: #734900; --accent-ink: #2A1B11; --accent-soft: #F9E6BB;
  --amber: #E58212; --oil: #F0B135; --rose: #DE6D9D; --resin: #F0D592;
  --bad: #A72A68; --bad-2: #8F1F57; --bad-soft: #FFDCE9; --bad-tint: #FFEBF3;
  --warn: #9A5500; --warn-soft: #FDE4BB;
  --good: #446630; --good-2: #365526; --good-soft: #D8ECCE; --good-tint: #EBF6E5;
  --open: #ECAA0B; --heart: #D1528B; --dry: #CC6600;
  --font-display: "Fraunces", "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  --ease: 160ms cubic-bezier(.2,.7,.3,1);
  --shadow: 0 1px 0 rgba(42,27,17,.04), 0 14px 34px -22px rgba(42,27,17,.45);
  --shadow-lift: 0 2px 0 rgba(42,27,17,.04), 0 22px 44px -24px rgba(42,27,17,.55);
  --gold-fill: #D4A94A; --gold-fill-2: #C4973A;
  --gold-button: linear-gradient(180deg, #E3C170 0%, #CC9E47 100%); --gold-button-2: linear-gradient(180deg, #DAB563 0%, #C1923D 100%);
  --gold-line: linear-gradient(90deg, transparent 0%, var(--gold-fill) 12%, var(--gold-fill) 88%, transparent 100%);
}
[dir="rtl"] { --font-display: "Noto Naskh Arabic", "Amiri", "Times New Roman", serif; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: var(--ground); position: relative; isolation: isolate;
}
[dir="rtl"] body { font-size: 17px; line-height: 1.8; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button, a, input, textarea, select { transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 16px; padding-block: 0 96px; }
@media (min-width: 641px) { .wrap { padding-inline: 20px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3, .qname, .qh2 { font-optical-sizing: auto; }

/* header: quiet, not sticky; the page's own summary bar does the navigating */
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.brand::before { content: ""; grid-row: 1 / span 2; width: 12px; height: 34px; border-radius: 999px; background: linear-gradient(180deg, var(--open), var(--heart) 50%, var(--dry)); box-shadow: inset 0 0 0 1px rgba(45,33,26,.08); }
.brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: 0; }
[dir="rtl"] .brand { font-weight: 700; letter-spacing: 0; }
.topnav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.topnav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.topnav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.lang { display: inline-flex; gap: 2px; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; background: var(--paper); }
.lang button { border: 0; background: transparent; padding: 6px 14px; min-height: 32px; cursor: pointer; color: var(--ink-2); border-radius: 999px; font-size: 14px; }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* hero: the wear ribbon under the title carries the three stage hues */
.hero { padding-block: 30px 8px; max-width: 800px; }
@media (min-width: 641px) { .hero { padding-block: 44px 8px; } }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5.6vw, 56px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
[dir="rtl"] .hero h1 { line-height: 1.45; letter-spacing: 0; font-weight: 700; font-size: clamp(32px, 5.2vw, 50px); }
.hero h1::after { content: ""; display: block; width: 84px; height: 5px; border-radius: 999px; margin-top: 18px; background: linear-gradient(90deg, var(--open), var(--heart) 50%, var(--dry)); }
[dir="rtl"] .hero h1::after { background: linear-gradient(270deg, var(--open), var(--heart) 50%, var(--dry)); }
.hero p { margin: 0; max-width: 60ch; color: var(--ink-2); font-size: 18px; line-height: 1.55; }
[dir="rtl"] .hero p { line-height: 1.8; }

/* two-column workspace */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
@media (min-width: 901px) { .layout { grid-template-columns: minmax(0, 1fr) 312px; gap: 48px; margin-top: 22px; } }
section.block { margin-top: 44px; }
section.block:first-child { margin-top: 14px; }
.block > h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 6px; }
[dir="rtl"] .block > h2 { letter-spacing: 0; line-height: 1.5; font-weight: 700; }
.block > .lede { color: var(--ink-2); margin: 0 0 16px; max-width: 62ch; }
.eyebrow { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
[dir="rtl"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* search */
.ask { font-size: 19px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.005em; }
.search { position: relative; }
.search::before { content: ""; position: absolute; inset-inline-start: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: var(--ink-3); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.8-3.8'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.8-3.8'/></svg>") center / contain no-repeat; }
.search input { width: 100%; min-height: 54px; padding: 14px 18px; padding-inline-start: 46px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; box-shadow: var(--shadow); }
.search input::placeholder { color: var(--ink-3); }
.search input:hover { border-color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.results { position: absolute; inset-inline: 0; top: calc(100% + 8px); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lift); max-height: 360px; overflow: auto; z-index: 8; padding: 4px; }
.results button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; text-align: start; border: 0; background: transparent; padding: 9px 12px; min-height: 44px; cursor: pointer; border-radius: 7px; }
.results button:hover, .results button:focus-visible { background: var(--accent-soft); outline: none; }
.results .house { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.hint { color: var(--ink-3); font-size: 13.5px; margin-top: 10px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.quick button { border: 1px solid var(--line-2); background: color-mix(in oklab, var(--paper) 60%, transparent); border-radius: 999px; padding: 6px 13px; min-height: 34px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.quick button:hover { border-color: var(--accent); color: var(--accent); background: var(--paper); }
.quick button:active { transform: translateY(1px); }

/* thumbnails */
.thumb { width: 56px; height: 56px; flex: none; border-radius: 8px; background: var(--paper-2); object-fit: contain; border: 1px solid var(--line); }
.thumb.sm { width: 34px; height: 34px; border-radius: 6px; }
.with-thumb { display: flex; gap: 14px; align-items: flex-start; }
.with-thumb > .grow { flex: 1; min-width: 0; }

/* a rated perfume is a card: identity on top, the wear timeline below */
#rated { display: grid; gap: 14px; margin-top: 18px; }
.strip { padding: 16px 16px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.strip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.strip-head .name { flex: 1; min-width: 0; }
.strip-head .name { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
[dir="rtl"] .strip-head .name { font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.strip-head .name .house, .strip-head .name .ar { font-family: var(--font-body); color: var(--ink-3); font-weight: 400; font-size: 13.5px; margin-inline-start: 8px; letter-spacing: 0; }
.strip-head .remove { border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; padding: 4px 10px; min-height: 30px; border-radius: 999px; font-size: 13px; }
.strip-head .remove:hover { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-soft); }
.notes { color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }
.community { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.auto-badge { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); margin-top: 6px; }
.auto-fams { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.auto-fams b { font-weight: 600; color: var(--ink); }

/* the timeline runs down the phone screen and across a wider one; the line always fades opening to drydown */
.timeline { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 5px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--open), var(--heart) 50%, var(--dry)); opacity: .9; }
.stage { position: relative; padding-inline-start: 22px; }
.stage::before { content: ""; position: absolute; top: 4px; inset-inline-start: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--line-2); transition: background-color var(--ease), border-color var(--ease); }
.stage:nth-child(1).set::before { background: var(--open); border-color: var(--open); }
.stage:nth-child(2).set::before { background: var(--heart); border-color: var(--heart); }
.stage:nth-child(3).set::before { background: var(--dry); border-color: var(--dry); }
.stage-label { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.stage-label b { font-weight: 600; font-size: 15px; }
.stage-label span { color: var(--ink-3); font-size: 12.5px; }
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.seg button, .nopts button {
  border: 1px solid var(--line); background: var(--ground); border-radius: 8px; padding: 9px 0; min-height: 44px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); line-height: 1.2; overflow-wrap: normal; word-break: keep-all; hyphens: none; min-width: 0;
}
@media (min-width: 481px) { .seg button, .nopts button { padding: 9px 1px; } }
[dir="rtl"] .seg button, [dir="rtl"] .nopts button { font-size: 12px; }
.seg button:hover, .nopts button:hover { border-color: var(--line-2); background: var(--paper-2); color: var(--ink); }
.seg button[data-v="-2"]:hover, .seg button[data-v="-1"]:hover, .nopts button[data-v="-2"]:hover, .nopts button[data-v="-1"]:hover { background: var(--bad-tint); border-color: var(--bad); color: var(--bad); }
.seg button[data-v="1"]:hover, .seg button[data-v="2"]:hover, .nopts button[data-v="1"]:hover, .nopts button[data-v="2"]:hover { background: var(--good-tint); border-color: var(--good); color: var(--good); }
.seg button:active, .nopts button:active { transform: scale(.97); }
.seg button[aria-pressed="true"], .nopts button[aria-pressed="true"] { color: var(--on-strong); border-color: transparent; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(45,33,26,.5); }
.seg button[data-v="-2"][aria-pressed="true"], .seg button[data-v="-1"][aria-pressed="true"], .nopts button[data-v="-2"][aria-pressed="true"], .nopts button[data-v="-1"][aria-pressed="true"] { background: var(--bad); }
.seg button[data-v="-2"][aria-pressed="true"]:hover, .seg button[data-v="-1"][aria-pressed="true"]:hover, .nopts button[data-v="-2"][aria-pressed="true"]:hover, .nopts button[data-v="-1"][aria-pressed="true"]:hover { background: var(--bad-2); color: var(--on-strong); }
.seg button[data-v="0"][aria-pressed="true"], .nopts button[data-v="0"][aria-pressed="true"], .nopts .nun[aria-pressed="true"] { background: var(--ink-3); }
.seg button[data-v="0"][aria-pressed="true"]:hover, .nopts button[data-v="0"][aria-pressed="true"]:hover, .nopts .nun[aria-pressed="true"]:hover { background: var(--ink-2); color: var(--on-strong); }
.seg button[data-v="1"][aria-pressed="true"], .seg button[data-v="2"][aria-pressed="true"], .nopts button[data-v="1"][aria-pressed="true"], .nopts button[data-v="2"][aria-pressed="true"] { background: var(--good); }
.seg button[data-v="1"][aria-pressed="true"]:hover, .seg button[data-v="2"][aria-pressed="true"]:hover, .nopts button[data-v="1"][aria-pressed="true"]:hover, .nopts button[data-v="2"][aria-pressed="true"]:hover { background: var(--good-2); color: var(--on-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; align-items: center; }
.chips button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 12px; min-height: 32px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.chips button:hover { border-color: var(--warn); color: var(--ink); background: var(--paper); }
.chips button[aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn); color: var(--ink); font-weight: 500; }
.again { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 14.5px; flex-wrap: wrap; color: var(--ink-2); }
.again .seg2 { display: inline-flex; gap: 5px; }
.again .seg2 button { border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 6px 16px; min-height: 36px; cursor: pointer; font-size: 14px; }
.again .seg2 button:hover { border-color: var(--ink-3); }
.again .seg2 button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: transparent; }
@media (min-width: 641px) {
  .strip { padding: 20px 22px 18px; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; padding-top: 22px; }
  .timeline::before { top: 7px; bottom: auto; inset-inline: 0; width: auto; height: 3px; background: linear-gradient(90deg, var(--open), var(--heart) 50%, var(--dry)); }
  [dir="rtl"] .timeline::before { background: linear-gradient(270deg, var(--open), var(--heart) 50%, var(--dry)); }
  .stage { padding-inline-start: 0; }
  .stage::before { top: -22px; transform: translateY(1px); }
}

.empty { color: var(--ink-2); border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 18px; margin-top: 12px; background: color-mix(in oklab, var(--paper) 50%, transparent); }
.src { color: var(--ink-3); font-size: 12.5px; }
.labelbox { margin-top: 14px; font-size: 14px; }
.labelbox summary { cursor: pointer; color: var(--accent); }
.labelbox textarea { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ground); color: var(--ink); font: inherit; font-size: 13.5px; }
.labelbox textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.labelrow { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.labelrow select { padding: 8px 12px; min-height: 36px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; }

/* profile: verdict rows, each washed in its own tint */
.verdicts { display: grid; gap: 10px; margin-top: 10px; }
.verdict { padding: 16px 18px; border: 1px solid var(--line); border-inline-start: 5px solid var(--line-2); border-radius: var(--radius); background: var(--paper); }
.verdict.bad-likely { border-inline-start-color: var(--bad); background: var(--bad-tint); }
.verdict.bad-possible { border-inline-start-color: var(--warn); }
.verdict.good-likely { border-inline-start-color: var(--good); background: var(--good-tint); }
.verdict.good-possible { border-inline-start-color: var(--good); }
.verdict.mixed { border-inline-start-color: var(--ink-3); }
.verdict .v-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.verdict .v-head b { font-size: 17px; font-weight: 600; }
.pill { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.good { background: var(--good-soft); color: var(--good); }
.verdict .hint { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.evidence { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.evidence li { display: flex; gap: 9px; align-items: baseline; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); position: relative; top: -1px; }
.dot.n { background: var(--bad); } .dot.p { background: var(--good); }
.avoid { font-size: 13.5px; margin-top: 8px; color: var(--ink-2); }
.avoid b { color: var(--ink); font-weight: 600; }
.flag { border: 0; background: transparent; color: var(--ink-3); font-size: 12.5px; cursor: pointer; padding: 4px 0; text-decoration: underline dotted; text-underline-offset: 3px; margin-top: 4px; }
.flag:hover { color: var(--accent); }
.flag[disabled] { text-decoration: none; cursor: default; }
.bar { position: relative; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--bad-soft), var(--paper-2) 50%, var(--good-soft)); margin-top: 12px; }
[dir="rtl"] .bar { background: linear-gradient(270deg, var(--bad-soft), var(--paper-2) 50%, var(--good-soft)); }
.bar i { position: absolute; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); border: 2px solid var(--paper); box-shadow: 0 1px 3px rgba(45,33,26,.3); }
[dir="rtl"] .bar i { transform: translateX(50%); }
.settle { margin-top: 16px; padding: 14px 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); font-size: 14.5px; }
.settle b { display: block; margin-bottom: 4px; color: var(--accent); }

/* recommendations */
.recs { display: grid; gap: 12px; margin-top: 10px; }
.rec { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.rec .r-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rec .r-head b { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
[dir="rtl"] .rec .r-head b { font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.rec .why, .rec .risk { font-size: 14.5px; margin-top: 7px; padding-inline-start: 18px; position: relative; }
.rec .why::before, .rec .risk::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; }
.rec .why::before { background: var(--good); }
.rec .risk::before { background: var(--warn); }
.rec .links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rec .links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; color: var(--ink); background: transparent; }
.rec .links a:hover { border-color: var(--accent); color: var(--accent); }
.rec .links a.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.rec .links a.primary:hover { background: var(--accent-2); color: var(--accent-ink); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 9px 18px; cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.btn:hover { border-color: var(--ink-3); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--accent) 70%, transparent); }
.btn.primary:hover { background: var(--accent-2); color: var(--accent-ink); border-color: transparent; }

/* the live panel: desktop side column, phone bottom bar */
.panel { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px 20px; box-shadow: var(--shadow); overflow: hidden; }
.panel::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--open), var(--heart) 50%, var(--dry)); }
[dir="rtl"] .panel::before { background: linear-gradient(270deg, var(--open), var(--heart) 50%, var(--dry)); }
.panel h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
[dir="rtl"] .panel h3 { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.panel .counts { display: flex; gap: 20px; font-variant-numeric: tabular-nums; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel .counts div { display: grid; gap: 2px; }
.panel .counts b { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.02em; }
[dir="rtl"] .panel .counts b { letter-spacing: 0; line-height: 1.3; }
.panel .counts span { font-size: 12.5px; color: var(--ink-3); }
.panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.panel li { display: flex; gap: 9px; align-items: baseline; }
.panel li i { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; top: -1px; }
.panel li i.bad { background: var(--bad); } .panel li i.warn { background: var(--warn); } .panel li i.good { background: var(--good); }
.panel .go { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 500; }
.panel .quiet { color: var(--ink-3); font-size: 13.5px; }
/* the phone gets a fixed summary bar within thumb reach; a wide screen gets the sticky side panel instead */
.bottombar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 6; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); color: var(--ground); padding: 12px 18px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; box-shadow: 0 -8px 24px -12px rgba(45,33,26,.5); }
.bottombar::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--open), var(--heart) 50%, var(--dry)); }
.bottombar a { color: var(--ground); font-weight: 600; text-decoration: none; padding: 6px 0; }
.bottombar[hidden] { display: none; }
@media (min-width: 901px) {
  .panel { position: sticky; top: 20px; }
  .bottombar, .bottombar[hidden] { display: none; }
}

.toast { position: fixed; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); inset-inline: 16px; margin-inline: auto; max-width: 420px; background: var(--ink); color: var(--ground); padding: 11px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow-lift); opacity: 0; transform: translateY(8px); transition: .22s; pointer-events: none; z-index: 7; }
.toast.show { opacity: 1; transform: none; }
@media (min-width: 901px) { .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }

details.method { margin-top: 36px; border-top: 1px solid var(--line-2); padding-top: 16px; color: var(--ink-2); font-size: 14.5px; }
details.method summary { cursor: pointer; color: var(--ink); font-weight: 600; padding: 4px 0; }
details.method summary:hover { color: var(--accent); }
details.method p { max-width: 65ch; }
footer.foot { margin-top: 32px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 14px; }
footer.foot p { margin: 4px 0; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  button, a, input, textarea, select, .stage::before, .qtile { transition: none !important; }
  .btn:active, .seg button:active, .nopts button:active, .quick button:active { transform: none; }
}

/* quiz page (quiz.html) and the links to it */
.hero-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 40px; padding: 8px 16px; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--accent-soft) 70%, transparent); color: var(--accent); font-weight: 500; text-decoration: none; font-size: 15px; }
.hero-link::after { content: "\2192"; }
[dir="rtl"] .hero-link::after { content: "\2190"; }
.hero-link:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
@media (min-width: 481px) { .qgrid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; margin-top: 22px; } }
.qtile { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; text-align: center; border: 1.5px solid var(--line); background: var(--paper); border-radius: 14px; padding: 14px 8px 12px; cursor: pointer; color: var(--ink); min-width: 0; box-shadow: var(--shadow); transition: transform var(--ease), border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
.qtile:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.qtile:active { transform: translateY(0); }
.qtile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.qtile[aria-pressed="true"]::after { content: ""; position: absolute; top: 8px; inset-inline-end: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  -webkit-mask: none; mask: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>"); background-size: 14px; background-repeat: no-repeat; background-position: center; }
.qtile[disabled] { cursor: default; opacity: .6; box-shadow: none; transform: none; }
.qtile[disabled]:hover { border-color: var(--line); }
.qtile .thumb { width: 64px; height: 64px; border-radius: 10px; }
@media (min-width: 481px) { .qtile { padding: 16px 10px 14px; } .qtile .thumb { width: 72px; height: 72px; } }
.qtile-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; margin-top: 2px; }
.qtile-house, .qtile-tag { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.qtile-tag.rated { color: var(--good); font-weight: 500; }
.qsearch { margin-top: 22px; max-width: 540px; }
/* on a phone the quiz's Continue stays within reach at the bottom of the screen while the grid scrolls */
.qactions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; position: sticky; bottom: 0; z-index: 5; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin-bottom: -12px; background: linear-gradient(to top, var(--ground) 78%, transparent); }
@media (min-width: 901px) { .qactions { position: static; padding: 0; margin-bottom: 0; background: none; } }
.qactions a.btn { display: inline-flex; text-decoration: none; color: var(--ink); }
.qactions a.btn.primary { color: var(--accent-ink); }
.qcard { max-width: 660px; margin-top: 28px; }
.qcard .eyebrow { margin: 0 0 12px; }
.qname { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
[dir="rtl"] .qname { line-height: 1.5; letter-spacing: 0; font-weight: 700; }
.qcard .ask { margin-top: 22px; }
.qopts { display: grid; gap: 10px; margin-top: 12px; max-width: 540px; }
.qopts-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: none; }
.qopt { position: relative; text-align: start; border: 1.5px solid var(--line-2); background: var(--paper); border-radius: 12px; padding: 13px 16px; padding-inline-start: 46px; min-height: 50px; cursor: pointer; font-size: 15.5px; line-height: 1.4; color: var(--ink); box-shadow: var(--shadow); }
.qopt::before { content: ""; position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--ground); transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
.qopt:hover { border-color: var(--accent); }
.qopt:hover::before { border-color: var(--accent); }
.qopt:active { transform: translateY(1px); }
.qopt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.qopt[aria-pressed="true"]::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3.5px var(--paper); }
.qfollow { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line); }
.qfollow .chips { margin-top: 16px; }
.qresult { max-width: 780px; }
.qh2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; margin: 36px 0 4px; }
[dir="rtl"] .qh2 { line-height: 1.5; letter-spacing: 0; font-weight: 700; }
.qtold { margin-top: 20px; padding: 14px 18px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid color-mix(in oklab, var(--warn) 25%, transparent); font-size: 14.5px; }
.qnote { margin-top: 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); font-size: 14.5px; }
.qnote a { font-weight: 600; }
.tester .tests { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.tester .carry { font-size: 14.5px; color: var(--ink-2); margin: 10px 0 0; }
.tester .rate-later { display: inline-block; margin-top: 10px; font-size: 14.5px; }
/* quiz parts and Back; note rows (quiz.html, and the profiler's "Rate its notes"); the note picker */
.qtop { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 22px; min-height: 32px; }
.qtop + .hero { padding-top: 16px; }
.qtop + .qcard, .qtop + .qresult { margin-top: 14px; }
.qback { border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 5px 14px; min-height: 34px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.qback:hover { border-color: var(--ink-3); color: var(--ink); }
.qback::before { content: "\2190\00a0"; }
[dir="rtl"] .qback::before { content: "\2192\00a0"; }
.qpart { font-size: 12px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
[dir="rtl"] .qpart { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.qlink { border: 0; background: transparent; padding: 4px 0; color: var(--accent); font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: start; }
.qlink:hover { color: var(--accent-2); }
.qskips { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 8px; }
.qopts-apart { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.qtold > div + div { margin-top: 4px; }
.qdis { color: var(--warn); }
.nrows { display: grid; gap: 10px; margin-top: 16px; }
.nrow { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); padding: 10px 12px; min-width: 0; box-shadow: var(--shadow); }
.nrow.done { padding-block: 9px; background: transparent; box-shadow: none; border-style: dashed; }
.nhead { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.nstage, .nfam { color: var(--ink-3); }
.nfam { font-size: 12.5px; }
.nhint { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.nopts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.nopts .nun { grid-column: 1 / -1; justify-self: start; min-height: 36px; padding: 6px 14px; border-style: dashed; margin-top: 2px; }
.ndone { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; font-size: 13.5px; }
.npick { font-weight: 600; }
.nbox { margin-top: 14px; font-size: 14px; }
.nbox summary { cursor: pointer; color: var(--accent); padding: 4px 0; }
.nbox summary:hover { color: var(--accent-2); }
.nbox .ncount { color: var(--ink-3); font-size: 12.5px; }
.nbox > .hint { margin-top: 4px; }
.nbox .nrows { margin-top: 8px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 18px; }
.pcard { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 10px; align-content: space-between; min-width: 0; box-shadow: var(--shadow); }
.pcard-name b { font-weight: 600; font-size: 15.5px; }
.pcard-hint { display: block; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.pcard-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pcard-opts button { border: 1px solid var(--line); background: var(--ground); border-radius: 8px; padding: 8px 3px; min-height: 40px; font-size: 13px; line-height: 1.2; cursor: pointer; color: var(--ink-2); }
.pcard-opts button:hover { border-color: var(--line-2); background: var(--paper-2); color: var(--ink); }
.pcard-opts button[data-pv="1"]:hover { background: var(--good-tint); border-color: var(--good); color: var(--good); }
.pcard-opts button[data-pv="-1"]:hover { background: var(--bad-tint); border-color: var(--bad); color: var(--bad); }
.pcard-opts button:active { transform: scale(.97); }
.pcard-opts button[aria-pressed="true"] { background: var(--paper-2); border-color: var(--line-2); color: var(--ink); font-weight: 600; }
.pcard-opts button[data-pv="1"][aria-pressed="true"] { background: var(--good); border-color: transparent; color: var(--on-strong); }
.pcard-opts button[data-pv="-1"][aria-pressed="true"] { background: var(--bad); border-color: transparent; color: var(--on-strong); }
@media (min-width: 481px) { .nrow, .pcard { padding: 12px 14px; } }

/* the scene: pale wood, an amber glow from the oil, a rose glow from the petals */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(70% 45% at 18% 0%, color-mix(in oklab, var(--oil) 22%, transparent), transparent 70%),
    radial-gradient(55% 40% at 100% 30%, color-mix(in oklab, var(--rose) 14%, transparent), transparent 70%),
    radial-gradient(60% 40% at 50% 110%, color-mix(in oklab, var(--amber) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground) 55%, var(--ground-2) 100%);
}
/* the botanical sketches close the page in a band of their own after the footer, lavender at the start of the line and
   the rose at its end (mirrored in Arabic), so no text or control is ever drawn over them */
:root { --bot-rose: url("img/botanical/rose.webp"); --bot-lav: url("img/botanical/lavender.webp"); }
[dir="rtl"] { --bot-rose: url("img/botanical/rose-rtl.webp"); --bot-lav: url("img/botanical/lavender-rtl.webp"); }
main.wrap { padding-bottom: 0; }
main.wrap::after { content: ""; display: block; height: 150px; margin-top: 24px; pointer-events: none;
  background: var(--bot-lav) left bottom / auto 100% no-repeat, var(--bot-rose) right bottom / auto 88% no-repeat; }
[dir="rtl"] main.wrap::after { background-position: right bottom, left bottom; }
@media (min-width: 901px) { main.wrap::after { height: 210px; margin-top: 32px; } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 200px 200px;
}

/* cream glass with a gold rim and a white gleam along the top edge */
.qtile, .qopt, .nrow, .pcard, .rec, .verdict, .panel, .strip, .search input, .results, .empty, .qtold, .qnote, .settle {
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border-color: var(--rim); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow);
}
.search input:focus { border-color: var(--gold); box-shadow: inset 0 1px 0 var(--gleam), 0 0 0 4px var(--gold-soft); }
.qtile:hover { border-color: var(--rim-2); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift); }
.qtile[aria-pressed="true"], .qopt[aria-pressed="true"] { background: color-mix(in oklab, var(--gold-soft) 85%, transparent); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), inset 0 1px 0 var(--gleam), 0 0 24px -8px color-mix(in oklab, var(--oil) 60%, transparent); }
.qtile[aria-pressed="true"]::after { background-color: var(--gold-fill); box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1B11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.qopt::before { background: var(--paper); border-color: var(--line-2); }
.qopt[aria-pressed="true"]::before { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 3.5px var(--paper); }
.qtile[disabled] { opacity: .55; }
.verdict.bad-likely { background: color-mix(in oklab, var(--bad-tint) 80%, transparent); }
.verdict.good-likely { background: color-mix(in oklab, var(--good-tint) 80%, transparent); }
.seg button, .nopts button, .pcard-opts button { background: var(--glass-2); border-color: var(--line); }
.seg button:hover, .nopts button:hover, .pcard-opts button:hover { background: var(--paper); border-color: var(--line-2); }
.chips button, .quick button, .again .seg2 button, .lang, .qback, .btn, .rec .links a { background: var(--glass-2); border-color: var(--rim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chips button[aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn); }
.qactions { background: linear-gradient(to top, rgba(42,27,17,.9) 70%, transparent); }
.qactions .btn { background: rgba(252,248,240,.14); color: var(--ground); border-color: rgba(242,214,138,.45); }
.qactions .btn.primary { color: var(--ink); }
@media (min-width: 901px) { .qactions { background: none; } .qactions .btn { background: var(--glass-2); color: var(--ink); border-color: var(--rim); } }
.bottombar { background: linear-gradient(180deg, #2A1B11, #1E130C); color: var(--ground); }
.bottombar a { color: var(--resin); }

/* the dark: a wood band across the top, with a faint wood grain (long light and dark streaks) and a fine grain over it,
   both SVG noise tiles kept faint enough that the band still reads as one dark colour behind the text */
header.top { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.95  0 0 0 0 0.82  0 0 0 0 0.62  0.34 0 0 0 -0.165'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='180'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.0028 0.19' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.93  0 0 0 0 0.74  0 0 0 0 0.48  0.32 0 0 0 -0.15'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='180'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.0045 0.31' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.07  0 0 0 0 0.04  0 0 0 0 0.02  0.5 0 0 0 -0.2'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    linear-gradient(180deg, #2A1B11 0%, #3A2718 100%); box-shadow: inset 0 -1px 0 rgba(242,214,138,.35), 0 10px 30px -18px rgba(42,27,17,.8); }
header.top .wrap { border-bottom: 0; }
.topnav a { color: #E9DCC6; }
.topnav a:hover { color: #FBECB8; border-bottom-color: #D9AE4F; }
header.top .lang { background: rgba(252,248,240,.1); border-color: rgba(242,214,138,.4); }
header.top .lang button { color: #E9DCC6; }
header.top .lang button[aria-pressed="true"] { background: var(--gold-fill); color: var(--ink); }
.brand small { -webkit-text-fill-color: #C9B79A; color: #C9B79A; }

/* gold: the brand name and mark and the selected tile's check in flat gold, the primary buttons in a soft shade of it
   with a fine edge, the profile counts in old gold */
.brand, .brand:hover { color: var(--gold-fill); }
.brand::before { background: var(--gold-fill); box-shadow: none; }
.btn.primary, .rec .links a.primary, .hero-link:hover { background: var(--gold-button); color: var(--ink); border: 1px solid #B58A36; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px -8px rgba(90,60,10,.5); }
.btn.primary:hover, .rec .links a.primary:hover { background: var(--gold-button-2); color: var(--ink); border-color: #B58A36; }
.panel .counts b { color: var(--gold); }
.panel::before { height: 3px; }
.hero-link { border-color: var(--rim-2); background: var(--glass-2); color: var(--gold); }
.hero h1::after { height: 4px; box-shadow: 0 0 14px -2px color-mix(in oklab, var(--heart) 45%, transparent); }
.eyebrow, .qpart, .panel h3 { color: var(--gold); }
a { color: var(--gold); }
a:hover, .qlink:hover, .labelbox summary:hover, .nbox summary:hover { color: var(--gold-2); }
.qlink, .labelbox summary, .nbox summary, .flag:hover { color: var(--gold); }
:focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold-soft); color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.timeline::before { box-shadow: 0 0 10px -1px color-mix(in oklab, var(--heart) 35%, transparent); }
.stage::before { background: var(--paper); border-color: var(--line-2); }

/* more gold, as lines: under the header, under the hero, short rules under section titles,
   edges on the panel, the footer, the method fold and the phone's summary bar */
header.top { position: relative; }
header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-fill); }
.hero { position: relative; padding-bottom: 26px; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-line); }
.block > h2::after, .qh2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 10px; border-radius: 999px; background: var(--gold-fill); }
[dir="rtl"] .block > h2::after, [dir="rtl"] .qh2::after { margin-inline-start: 0; }
.panel::before { background: var(--gold-fill); height: 3px; }
.panel .counts { border-bottom: 1px solid var(--rim-2); }
.panel h3 { padding-bottom: 8px; }
details.method { border-top: 2px solid transparent; border-image: var(--gold-line) 1; }
footer.foot { border-top: 2px solid transparent; border-image: var(--gold-line) 1; }
.qfollow, .qopts-apart { border-top-color: var(--rim-2); }
.bottombar::before { background: var(--gold-fill); height: 2px; }
.qtop { border-bottom: 1px solid var(--rim); padding-bottom: 12px; }
.strip .timeline::before, .timeline::before { box-shadow: 0 0 10px -1px color-mix(in oklab, var(--heart) 35%, transparent), 0 2px 0 -1px rgba(140,95,0,.25); }
.qtile .thumb, .thumb { border-color: var(--rim); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.search input { border-color: var(--rim-2); }
.seg button[aria-pressed="true"], .nopts button[aria-pressed="true"], .pcard-opts button[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(140,95,0,.35), 0 6px 14px -8px rgba(42,27,17,.6); }

/* bottle photos (js/bottles.js): in a list the bottle stands in its glass frame on a pool of amber light; on a
   quiz tile the frame goes and the bottle stands larger on the card with a small floor shadow */
.thumb.photo { background: radial-gradient(ellipse 70% 30% at 50% 96%, color-mix(in oklab, var(--oil) 22%, transparent), transparent 70%), var(--paper); padding: 3px; }
.qtile .thumb { width: 92px; height: 92px; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  background: radial-gradient(ellipse 46% 9% at 50% 95%, rgba(42,27,17,.18), transparent 72%); }
.qtile .thumb:not(.photo) { opacity: .75; }
@media (min-width: 481px) { .qtile .thumb { width: 104px; height: 104px; } }
.qcard .with-thumb .thumb { width: 72px; height: 72px; }

/* the quiz result's first screen: a taste card, then the three picks as bottle tiles; the working folds away */
.qreveal { margin-top: 14px; padding: 18px 18px 14px; border: 1px solid var(--rim); border-radius: var(--radius-lg);
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--gleam), var(--shadow); position: relative; overflow: hidden; }
.qreveal::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--gold-fill); }
.qtaste { display: grid; gap: 14px; }
.qtaste-row + .qtaste-row { padding-top: 14px; border-top: 1px solid var(--rim); }
.qtaste-k { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
[dir="rtl"] .qtaste-k { letter-spacing: 0; text-transform: none; font-size: 14px; }
.qtaste-row.bad .qtaste-k { color: var(--bad); }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.qchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; opacity: .8; }
.qchip.good { background: var(--good-soft); color: var(--good); }
.qchip.bad { background: var(--bad-soft); color: var(--bad); }
.qchip.sm { padding: 3px 9px; font-size: 12px; font-weight: 500; }
/* on a pick: what it is free of, drawn as a struck-through mark so it never reads as a warning */
.qchip.free { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rim-2); }
.qchip.free::before { width: 9px; height: 9px; background: none; border: 1.5px solid var(--bad); opacity: 1;
  background-image: linear-gradient(135deg, transparent 42%, var(--bad) 42%, var(--bad) 58%, transparent 58%); }
.qtaste-from { margin-top: 7px; font-size: 13px; color: var(--ink-3); }
.qtaste-none { margin: 0; color: var(--ink-2); }
.qbasis { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); }
.recs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.recs-tiles .rec { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px 12px; }
.recs-tiles .rec .thumb { width: 84px; height: 84px; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 4px;
  background: radial-gradient(ellipse 46% 9% at 50% 95%, rgba(42,27,17,.18), transparent 72%); }
.recs-tiles .rec b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.recs-tiles .rec .qchips { justify-content: center; margin-top: 4px; gap: 4px; }
.recs-tiles .rec .qsample { margin-top: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; width: 100%; }
.recs-tiles .rec .qchips + .qsample, .recs-tiles .rec .qtile-house + .qsample { margin-top: 10px; }
.qbottle { font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 641px) { .recs-tiles { gap: 12px; } .recs-tiles .rec { padding: 16px 14px; } .recs-tiles .rec .thumb { width: 110px; height: 110px; } .recs-tiles .rec b { font-size: 16px; } }
/* the result's title sits close to its answer, and its button is an ordinary one, not the grid's sticky bar */
.qresult > .hero { padding-block: 6px 0; }
.qresult > .hero::after, .qresult > .hero h1::after { display: none; }
.qresult > .hero h1 { font-size: clamp(28px, 7vw, 42px); margin: 0; }
.qresult .qactions { position: static; padding: 0; margin: 20px 0 0; background: none; }
.qresult .qactions .btn:not(.primary) { background: var(--glass-2); color: var(--ink); border-color: var(--rim); }
details.qhow { margin-top: 26px; border-top: 1px solid var(--rim); padding-top: 12px; }
details.qhow > summary { cursor: pointer; font-weight: 600; color: var(--gold); padding: 6px 0; }
/* the answer arrives first, the bottles a moment after */
@media (prefers-reduced-motion: no-preference) {
  .qresult .qreveal { animation: qrise .5s cubic-bezier(.2,.7,.3,1) both; }
  .qresult .recs-tiles .rec { animation: qrise .5s cubic-bezier(.2,.7,.3,1) both; }
  .qresult .recs-tiles .rec:nth-child(1) { animation-delay: .25s; }
  .qresult .recs-tiles .rec:nth-child(2) { animation-delay: .35s; }
  .qresult .recs-tiles .rec:nth-child(3) { animation-delay: .45s; }
}
@keyframes qrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qshare { display: flex; justify-content: center; margin-top: 14px; }
.qshare .btn { min-width: 220px; }

/* the result's name: the palate's emblem and name, lit by a gold sweep as it arrives */
.qname-hero { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 18px 18px 18px 16px;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rim-2);
  background: linear-gradient(135deg, color-mix(in oklab, var(--arch) 16%, var(--paper)), var(--paper) 70%);
  box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift); }
.qname-hero .qemblem { flex: none; width: 76px; height: 76px; filter: drop-shadow(0 6px 10px rgba(42,27,17,.25)); }
.qname-hero .eyebrow { margin: 0 0 2px; color: var(--gold); }
.qname-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 7.4vw, 44px); line-height: 1.1; color: var(--arch); letter-spacing: -.01em; }
[dir="rtl"] .qname-hero h1 { font-weight: 700; line-height: 1.4; letter-spacing: 0; }
@media (min-width: 641px) { .qname-hero { padding: 22px 26px; gap: 22px; } .qname-hero .qemblem { width: 96px; height: 96px; } }
/* the count: checked, ruled out, still open, and the picks (four boxes, two by two on a phone) */
.qfunnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.qfunnel.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qfun { text-align: center; padding: 12px 6px 10px; border-radius: var(--radius); border: 1px solid var(--rim); background: var(--glass-2); }
.qfun b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.qfun.out b { color: var(--bad); }
.qfun.open b { color: var(--good); }
.qfun.pick b { color: var(--gold); }
.qfun span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
@media (min-width: 641px) { .qfunnel { gap: 12px; } .qfunnel.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qfun b { font-size: 44px; } .qfun span { font-size: 13.5px; } }
/* the palate text under the name, and the comparison with other visitors (empty until the backend has enough) */
.qpal { margin: 12px 2px 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.qcompare { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); padding-inline-start: 12px; border-inline-start: 3px solid var(--heart); }
.qcompare:empty { display: none; }
/* the start screen's link for a returning visitor */
.qreturn { margin: 18px 2px 0; font-size: 15px; }
/* Start: the one thing to do on the start screen, so it comes straight after the promise and fills the width on a phone */
.qstart-go.btn.primary { display: flex; width: 100%; min-height: 56px; margin-top: 22px; padding: 12px 28px; border-radius: 16px; font-size: 19px; font-weight: 600; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -10px rgba(90,60,10,.55); }
.qstart-go::after { content: "\2192"; margin-inline-start: 12px; font-weight: 400; }
[dir="rtl"] .qstart-go::after { content: "\2190"; }
@media (min-width: 641px) { .qstart-go.btn.primary { width: auto; min-width: 320px; } }
.qstart .qsteps-h { margin-top: 30px; }
/* room below an open search list, so the box can scroll to the top of a phone screen above the keyboard */
#quiz.qsearching { padding-bottom: 70vh; }
/* "More notes" sits under the cards; only Next stays pinned to the bottom of the screen */
.qmore { margin-top: 14px; }
/* the picks as stacked cards: the bottle and name, why it was chosen, what to watch for, then the links */
.recs-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.qpick { padding: 14px 16px 14px; }
.qpick-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.qpick-head .thumb { width: 72px; height: 72px; border: 0; box-shadow: none; flex: none; }
.qpick-head b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; }
[dir="rtl"] .qpick-head b { font-weight: 700; line-height: 1.5; }
.qpick .why, .qpick .risk { font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
.qpick-links { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.qpick-links .qsample { min-width: 120px; }
/* a note the visitor avoids that their own bottles carry: said plainly under the taste card */
.qcontra { margin: 12px 2px 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); padding-inline-start: 12px; border-inline-start: 3px solid var(--oil); }
/* the full profile: the next step after the picks, dark wood with gold type so it stands apart from the gold Sample buttons */
.qfull.btn { display: flex; width: 100%; min-height: 60px; margin-top: 22px; padding: 14px 28px; font-size: 19px; font-weight: 700; text-decoration: none;
  background: linear-gradient(180deg, #3A2718 0%, #2A1B11 100%); color: #F2D68A; border: 1px solid rgba(242,214,138,.55);
  box-shadow: inset 0 1px 0 rgba(242,214,138,.3), 0 14px 28px -12px rgba(42,27,17,.8); }
.qfull.btn:hover { background: linear-gradient(180deg, #45301F 0%, #2F1F14 100%); color: #FBECB8; border-color: rgba(242,214,138,.75); }
.qfull::after { content: "\2192"; margin-inline-start: 12px; font-weight: 400; }
[dir="rtl"] .qfull::after { content: "\2190"; }
@media (min-width: 641px) { .qfull.btn { width: auto; min-width: 340px; } }
/* while a name is being typed, the list is solid (the glass surfaces let the bar show through) and Continue steps aside */
.search .results { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
#quiz.qsearching .qactions { visibility: hidden; }
.qreturn a { font-weight: 500; }
.qtip { margin: 14px 2px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding-inline-start: 12px; border-inline-start: 3px solid var(--oil); }
.qtip b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
[dir="rtl"] .qtip b { letter-spacing: 0; text-transform: none; font-size: 14px; }
/* the start screen: five bottles of the grid on a shelf, the promise, the four parts as numbered cards */
.qstart-shelf { display: flex; justify-content: center; margin: 22px 0 0; }
.qstart-shelf .thumb { width: 66px; height: 66px; border-radius: 50%; margin-inline: -7px; border: 1px solid var(--rim); box-shadow: var(--shadow); }
.qstart-shelf .thumb:nth-child(2), .qstart-shelf .thumb:nth-child(4) { transform: translateY(8px); }
.qstart-shelf .thumb:nth-child(3) { width: 78px; height: 78px; z-index: 1; }
.qstart .hero { padding-top: 18px; }
.qsteps-h { margin: 22px 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
[dir="rtl"] .qsteps-h { letter-spacing: 0; text-transform: none; font-size: 14px; }
.qsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qsteps li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--rim); background: var(--glass); box-shadow: var(--shadow); font-weight: 600; font-size: 15px; line-height: 1.25; }
.qsteps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--gold); font-family: var(--font-display); font-size: 16px; box-shadow: inset 0 0 0 1.5px var(--gold-fill); }
@media (min-width: 641px) { .qsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .qresult .qname-hero { animation: qrise .55s cubic-bezier(.2,.7,.3,1) both; }
  .qresult .qname-hero .qemblem { animation: qpop .7s .15s cubic-bezier(.2,1.4,.4,1) both; }
  .qresult .qfunnel .qfun { animation: qrise .5s cubic-bezier(.2,.7,.3,1) both; }
  .qresult .qfunnel .qfun:nth-child(2) { animation-delay: .1s; }
  .qresult .qfunnel .qfun:nth-child(3) { animation-delay: .2s; }
  .qresult .qfunnel .qfun:nth-child(4) { animation-delay: .3s; }
}
@keyframes qpop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* the reveal before the result: the visitor's own bottles sort into kept and turned */
.qreveal-intro { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 0; text-align: center; cursor: pointer; }
.qreveal-read { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 6vw, 34px); color: var(--ink); }
.qreveal-read::after { content: ""; display: block; width: 72px; height: 3px; margin: 12px auto 0; border-radius: 999px; background: var(--gold-fill);
  transform-origin: left; animation: qbar 1.6s ease-in-out infinite alternate; }
[dir="rtl"] .qreveal-read::after { transform-origin: right; }
.qsorts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 560px; }
.qsort { border-radius: var(--radius-lg); padding: 14px 10px 16px; border: 1px solid var(--rim); background: var(--glass); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow); }
.qsort.kept { border-top: 3px solid var(--good); }
.qsort.turned { border-top: 3px solid var(--bad); }
.qsort-k { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
[dir="rtl"] .qsort-k { letter-spacing: 0; text-transform: none; font-size: 15px; }
.qsort.kept .qsort-k { color: var(--good); }
.qsort.turned .qsort-k { color: var(--bad); }
.qsort-bottles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 64px; }
.qsort-b .thumb { width: 58px; height: 58px; border: 0; background: none; box-shadow: none; padding: 0; }
.qsort-b { display: inline-block; opacity: 0; animation: qdrop .5s cubic-bezier(.2,1.2,.4,1) forwards; animation-delay: calc(.35s + var(--i) * .11s); }
.qsort.kept .qsort-b { --from: 60px; }
.qsort.turned .qsort-b { --from: -60px; }
[dir="rtl"] .qsort.kept .qsort-b { --from: -60px; }
[dir="rtl"] .qsort.turned .qsort-b { --from: 60px; }
@keyframes qdrop { from { opacity: 0; transform: translate(var(--from), -26px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes qbar { from { transform: scaleX(.25); } to { transform: scaleX(1); } }

/* ======================================================================================================================
   The quiz in motion (js/motion.js, 27 Sep 2026): screens that slide by direction and bottles that fly between them,
   a compact header with the progress along its gold edge, one call to action in a dock of dark wood, bottles that lift
   and give off a gold mist when picked, a lit plinth for the bottle being answered, the wear ribbon for "when", a hue
   for each note screen, the palate's wheel on the result. Scoped to #quiz (the front page) unless it is the header.
   Everything that moves sits under prefers-reduced-motion: no-preference or is switched off by motion.js.
   ====================================================================================================================== */
:root {
  --glide: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --i-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.2s-7.2-4.3-7.2-10.1A4.1 4.1 0 0 1 12 7.3a4.1 4.1 0 0 1 7.2 2.8c0 5.8-7.2 10.1-7.2 10.1z'/></svg>");
  --i-turn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 6.5H11a6 6 0 0 1 6 6v6.8M13.4 16.2l3.6 3.6 3.6-3.6'/></svg>");
  --i-dots: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='6' cy='12' r='1.9'/><circle cx='12' cy='12' r='1.9'/><circle cx='18' cy='12' r='1.9'/></svg>");
  --i-bag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 8.5h13l-1.2 11.2H6.7zM9 8.5V7a3 3 0 0 1 6 0v1.5'/></svg>");
  --i-q: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.2 9.3a2.9 2.9 0 1 1 4 2.6c-.8.4-1.2 1-1.2 1.9v.6M12 17.6v.2'/></svg>");
  --i-avoid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='7.8'/><path d='M6.6 17.4 17.4 6.6'/></svg>");
  --i-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
  --i-candy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.3'/><path d='M7.7 12 4 9.2v5.6zM16.3 12 20 9.2v5.6zM10.3 9.6l3.4 4.8'/></svg>");
  --i-flask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9.4 3.8h5.2M10.6 3.8v5.3L5.8 17.3a2 2 0 0 0 1.7 3.1h9a2 2 0 0 0 1.7-3.1l-4.8-8.2V3.8M8.1 14.8h7.8'/></svg>");
  --i-bubbles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'><circle cx='9' cy='14.6' r='4.7'/><circle cx='16.8' cy='8.3' r='3'/><circle cx='17.6' cy='17' r='1.7'/></svg>");
  --i-weight: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'><path d='M8 9.6h8l2.6 10.4H5.4zM9.6 9.6a2.4 2.4 0 1 1 4.8 0'/></svg>");
  --i-puff: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7.4 19a3.6 3.6 0 0 1 .2-7.2 4.8 4.8 0 0 1 9.3 1 3.1 3.1 0 0 1-.3 6.2zM8.6 5.6v.1M12.2 4.2v.1M15.8 5.6v.1'/></svg>");
  --i-smoke: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'><path d='M8 20.5c-2.2-2.4 2.2-4.4 0-6.8s2.2-4.4 0-6.8M12.6 20.5c-2.2-2.4 2.2-4.4 0-6.8s2.2-4.4 0-6.8M17.2 20.5c-2.2-2.4 2.2-4.4 0-6.8'/></svg>");
  --i-leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19.2C5 11 10.2 5.8 19.2 4.8c-1 9-6.2 14.4-14.2 14.4zM5 19.2l7.6-7.6M9.2 14.9l-.2-3.6M12.4 11.7l3.2-.3'/></svg>");
  --i-drop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4c3.7 4.7 6.1 8 6.1 11.4a6.1 6.1 0 0 1-12.2 0c0-3.4 2.4-6.7 6.1-11.4zM9.2 15.2a2.9 2.9 0 0 0 2.4 2.8'/></svg>");
}
@keyframes q-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes q-fade { from { opacity: 0; } }
@keyframes q-grow { from { transform: scaleX(0); } }
@keyframes q-press { 40% { transform: scale(.93); } }
@keyframes q-check { from { opacity: 0; transform: scale(0) rotate(-45deg); } }
@keyframes q-float { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes q-draw { to { stroke-dashoffset: 0; } }
@keyframes q-bloom { from { opacity: 0; transform: scale(.3); } }
@keyframes q-breathe { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }

/* ---------- a new screen: the quiz column slides by direction; a shared bottle flies (motion.js names them) ---------- */
html.vt #quiz { view-transition-name: qstage; }
::view-transition-group(qstage) { animation: none; }
::view-transition-old(qstage) { translate: 0 var(--vt-y, 0px); animation: 190ms cubic-bezier(.4, 0, 1, 1) both q-vt-out; }
::view-transition-new(qstage) { animation: 440ms var(--glide) both q-vt-in; }
::view-transition-old(root) { animation-duration: 200ms; }
::view-transition-new(root) { animation-duration: 320ms; }
::view-transition-group(*.qb) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.3, .85, .25, 1); }
@keyframes q-vt-out { to { opacity: 0; transform: translateX(var(--vt-out, 0px)); } }
@keyframes q-vt-in { from { opacity: 0; transform: translate(var(--vt-in, 0px), var(--vt-rise, 0px)); } }
html[data-motion="fwd"] { --vt-out: -32px; --vt-in: 44px; }
html[data-motion="back"] { --vt-out: 32px; --vt-in: -44px; }
html[dir="rtl"][data-motion="fwd"] { --vt-out: 32px; --vt-in: -44px; }
html[dir="rtl"][data-motion="back"] { --vt-out: -32px; --vt-in: 44px; }
html[data-motion="up"] { --vt-rise: 28px; }
/* without view transitions the new screen glides in by itself */
@media (prefers-reduced-motion: no-preference) {
  #quiz.fx-in { --vt-in: 36px; animation: q-vt-in .42s var(--glide) both; }
  #quiz.fx-in[data-in="back"], [dir="rtl"] #quiz.fx-in { --vt-in: -36px; }
  [dir="rtl"] #quiz.fx-in[data-in="back"] { --vt-in: 36px; }
  #quiz.fx-in[data-in="fade"] { --vt-in: 0px; }
  #quiz.fx-in[data-in="up"] { --vt-in: 0px; --vt-rise: 24px; }
}
/* the mist and the flying bottle, drawn over the page */
.fxlayer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.fxfly { position: fixed; z-index: 41; pointer-events: none; }
.fxfly img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(42,27,17,.3)); }

/* ---------- the header on every screen after the start: compact, the progress along its gold edge ---------- */
@media (min-width: 641px) {
  body:has(#quiz[data-step]:not([data-step="start"])) header.top .wrap { padding-block: 10px 12px; gap: 4px 16px; }
  body:has(#quiz[data-step]:not([data-step="start"])) .brand { font-size: 19px; }
  body:has(#quiz[data-step]:not([data-step="start"])) .brand small { display: none; }
  body:has(#quiz[data-step]:not([data-step="start"])) .brand::before { width: 9px; height: 24px; grid-row: 1; }
  body:has(#quiz[data-step]:not([data-step="start"])) header.top .lang { padding: 2px; }
  body:has(#quiz[data-step]:not([data-step="start"])) header.top .lang button { min-height: 30px; padding: 3px 12px; font-size: 13px; }
}
/* on a phone the header is one row on every page and screen: the name, and a single button for the other language;
   the two links move to the footer (.footnav) */
.footnav { display: none; }
@media (max-width: 640px) {
  header.top .wrap { flex-wrap: nowrap; padding-block: 10px 12px; gap: 12px; }
  .brand { font-size: 19px; }
  .brand small, .topnav > a, header.top .lang button[aria-pressed="true"] { display: none; }
  .brand::before { width: 9px; height: 24px; grid-row: 1; }
  header.top .lang { padding: 2px; }
  header.top .lang button { min-height: 36px; padding: 4px 14px; font-size: 14px; }
  .footnav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 8px; }
  .footnav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14.5px; color: var(--ink-2); text-decoration-color: var(--line-2); }
}
.qprogress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; z-index: 1; background: rgba(242,214,138,.2); }
.qprogress[hidden] { display: none; }
.qprogress::before { content: ""; position: absolute; inset: 0; background: var(--gold-fill); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .8s var(--glide); }
[dir="rtl"] .qprogress::before { transform-origin: right center; }
/* four quarters, one per part */
.qprogress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(25% - 1px), #1E130C calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) calc(50% - 1px), #1E130C calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(75% - 1px), #1E130C calc(75% - 1px) calc(75% + 1px), transparent calc(75% + 1px)); }
header.top:has(.qprogress:not([hidden]))::after { opacity: 0; }

/* ---------- the dock: one call to action, pinned above the bottom of the screen ---------- */
#quiz .qactions { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; flex-wrap: nowrap; gap: 8px; margin: 22px 0 0; padding: 7px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(58,39,24,.94), rgba(30,19,12,.96)); border: 1px solid rgba(242,214,138,.45);
  box-shadow: 0 18px 38px -14px rgba(30,19,12,.72), inset 0 1px 0 rgba(242,214,138,.25); }
#quiz .qactions:empty { display: none; }
#quiz .qactions .btn { flex: 1 1 auto; min-height: 52px; border-radius: 20px; font-size: 16.5px; font-weight: 600; }
#quiz .qactions .btn.primary { color: var(--ink); }
@media (min-width: 641px) { #quiz .qactions { max-width: 520px; margin-inline: auto; } }
#quiz .qgo { gap: 10px; }
#quiz .qgo-none { background: rgba(252,248,240,.07); color: #F2D68A; border: 1px dashed rgba(242,214,138,.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
#quiz .qgo-none:hover { background: rgba(252,248,240,.13); color: #FBECB8; border-color: rgba(242,214,138,.85); box-shadow: none; }
#quiz .qtray { display: inline-flex; align-items: center; flex: none; }
#quiz .qtray img { width: 30px; height: 30px; object-fit: contain; margin-inline-end: -11px; filter: drop-shadow(0 2px 2px rgba(42,27,17,.35)); }
#quiz .qtray img:last-of-type { margin-inline-end: 0; }
#quiz .qtray b { margin-inline-start: 5px; padding: 1px 7px; border-radius: 999px; background: rgba(42,27,17,.14); font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  #quiz .qtray img { animation: q-check .45s var(--spring) backwards; }
}
#quiz .qalt { margin-top: 16px; }
#quiz .qalt .btn { width: 100%; min-height: 50px; border-style: dashed; }
@media (min-width: 641px) { #quiz .qalt .btn { width: auto; min-width: 320px; } }

/* ---------- the start: five bottles standing on a glass shelf, lit from above ---------- */
#quiz .qstart-shelf { position: relative; display: flex; justify-content: center; align-items: flex-end; margin: 26px auto 0; padding: 0 12px 14px; max-width: 480px; min-height: 124px; }
#quiz .qstart-shelf::before { content: ""; position: absolute; inset: -36px 8% 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 62% at 50% 34%, rgba(255,238,190,.95), rgba(255,238,190,0) 72%); }
/* the shelf: a glass plate under the bottles, a bright front edge, the bottles' reflections lying in it */
#quiz .qstart-shelf::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 14px; z-index: 2; pointer-events: none; border-radius: 2px 2px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,250,236,.25) 40%, rgba(242,214,138,.5)); border-top: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 1px 0 rgba(140,95,0,.55), 0 14px 20px -10px rgba(42,27,17,.45); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
#quiz .qshelf-b { position: relative; z-index: 1; display: block; margin-inline: -5px; }
#quiz .qstart-shelf .thumb { display: block; width: 60px; height: 60px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 7px 6px rgba(42,27,17,.22)); -webkit-box-reflect: below 0 linear-gradient(transparent 66%, rgba(255,255,255,.3)); }
#quiz .qshelf-b:nth-child(2) .thumb, #quiz .qshelf-b:nth-child(4) .thumb { width: 74px; height: 74px; }
#quiz .qshelf-b:nth-child(3) .thumb { width: 96px; height: 96px; }
@media (min-width: 641px) {
  #quiz .qstart-shelf { min-height: 170px; max-width: 620px; }
  #quiz .qstart-shelf .thumb { width: 96px; height: 96px; }
  #quiz .qshelf-b:nth-child(2) .thumb, #quiz .qshelf-b:nth-child(4) .thumb { width: 116px; height: 116px; }
  #quiz .qshelf-b:nth-child(3) .thumb { width: 142px; height: 142px; }
}
#quiz .qstart .qsteps li { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  #quiz .qshelf-b { animation: q-rise .9s var(--glide) backwards; animation-delay: calc(var(--i) * 90ms + 80ms); }
  /* the light over the shelf breathes, slowly */
  #quiz .qstart-shelf::before { animation: q-breathe 7s ease-in-out infinite alternate; }
  #quiz .qstart-shelf .thumb { animation: q-float 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
  #quiz .qstart .hero h1 { animation: q-rise .8s var(--glide) backwards .25s; }
  #quiz .qstart .hero p { animation: q-rise .8s var(--glide) backwards .38s; }
  #quiz .qstart-go { animation: q-rise .8s var(--glide) backwards .5s; }
  #quiz .qstart .qsteps li { animation: q-rise .7s var(--glide) backwards; }
  #quiz .qstart .qsteps li:nth-child(1) { animation-delay: .62s; } #quiz .qstart .qsteps li:nth-child(2) { animation-delay: .7s; }
  #quiz .qstart .qsteps li:nth-child(3) { animation-delay: .78s; } #quiz .qstart .qsteps li:nth-child(4) { animation-delay: .86s; }
}

/* ---------- titles: the wear ribbon under each question draws itself ---------- */
@media (prefers-reduced-motion: no-preference) {
  #quiz .hero h1::after { transform-origin: left center; animation: q-grow 1s var(--glide) backwards .2s; }
  [dir="rtl"] #quiz .hero h1::after { transform-origin: right center; }
  #quiz .qtop + .hero h1 { animation: q-rise .6s var(--glide) backwards .05s; }
  #quiz .qtop + .hero p { animation: q-rise .6s var(--glide) backwards .12s; }
}

/* ---------- the grid: a picked bottle lifts on a pool of gold light, its check pops ---------- */
#quiz .qtile { isolation: isolate; overflow: hidden; transition: transform .35s var(--glide), border-color .25s, background-color .25s, box-shadow .35s var(--glide); }
#quiz .qtile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transform: scale(.6);
  background: radial-gradient(62% 48% at 50% 36%, rgba(255,238,186,.95), rgba(242,214,138,.35) 55%, transparent 78%); transition: opacity .35s, transform .55s var(--glide); }
#quiz .qtile[aria-pressed="true"]::before { opacity: 1; transform: none; }
#quiz .qtile .thumb { transition: transform .5s var(--spring), filter .35s; }
#quiz .qtile[aria-pressed="true"] .thumb { transform: translateY(-5px) scale(1.07); filter: drop-shadow(0 12px 10px rgba(140,95,0,.3)); }
#quiz .qtile[aria-pressed="true"]::after { animation: q-check .5s var(--spring) backwards; }
#quiz .qtile:not([disabled]):active { transform: scale(.965); }
@media (hover: hover) {
  #quiz .qtile:not([disabled]):hover { transform: translateY(-3px); }
  #quiz .qtile:not([disabled]):hover .thumb { transform: translateY(-4px) scale(1.05); }
  #quiz .qtile[aria-pressed="true"]:hover .thumb { transform: translateY(-6px) scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
  #quiz .qgrid .qtile { animation: q-rise .6s var(--glide) backwards; animation-delay: calc(var(--n, 0) * 28ms + 80ms); }
}

/* ---------- a bottle's screens: the bottle on a lit plinth, one dot per bottle ---------- */
#quiz .qstage { display: flex; align-items: center; gap: 16px; }
#quiz .qstage-b { position: relative; flex: none; width: 118px; height: 128px; display: grid; place-items: end center; isolation: isolate; }
#quiz .qstage-b::before { content: ""; position: absolute; inset: -14px -18px 4px; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 50% 48%, rgba(255,234,172,.95), rgba(242,214,138,.28) 58%, transparent 74%); }
#quiz .qstage-b::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 12px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(42,27,17,.3), transparent); }
#quiz .qstage-b .thumb { width: 118px; height: 118px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 10px rgba(42,27,17,.2)); }
#quiz .qstage-t { flex: 1; min-width: 0; }
#quiz .qstage-t .eyebrow { display: block; margin: 0 0 4px; }
#quiz .qdots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#quiz .qdots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .3s, box-shadow .3s; }
#quiz .qdots i.on { background: var(--gold-fill); box-shadow: 0 0 0 3px rgba(242,214,138,.5); }
#quiz .qdots i.v-still { background: var(--good); box-shadow: none; }
#quiz .qdots i.v-turned { background: var(--bad); box-shadow: none; }
#quiz .qdots i.v-shop { background: var(--warn); box-shadow: none; }
#quiz .qdots i.v-other { background: var(--ink-3); box-shadow: none; }
@media (min-width: 641px) {
  #quiz .qstage { gap: 24px; }
  #quiz .qstage-b { width: 156px; height: 164px; }
  #quiz .qstage-b .thumb { width: 156px; height: 156px; }
}
@media (prefers-reduced-motion: no-preference) {
  #quiz .qstage-b .thumb { animation: q-float 5.6s ease-in-out infinite alternate; }
}

/* ---------- answers with a drawn mark: the verdicts, and the complaints ---------- */
#quiz .qverdicts .qopt, #quiz .qtold-grid .qopt { padding-inline-start: 60px; min-height: 58px; transition: border-color .25s, background-color .25s, box-shadow .3s, transform .3s var(--spring); }
#quiz .qverdicts .qopt::before, #quiz .qtold-grid .qopt::before { width: 34px; height: 34px; inset-inline-start: 12px; border: 0; background: var(--v-soft); transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-ink) 24%, transparent); transition: background-color .25s, transform .45s var(--spring), box-shadow .3s; }
#quiz .qverdicts .qopt::after, #quiz .qtold-grid .qopt::after { content: ""; position: absolute; top: 50%; inset-inline-start: 21px; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  background: var(--v-ink); -webkit-mask: var(--v-icon) center / contain no-repeat; mask: var(--v-icon) center / contain no-repeat; transition: background-color .25s; }
#quiz .qverdicts [data-verdict="still"] { --v-ink: var(--good); --v-soft: var(--good-soft); --v-tint: var(--good-tint); --v-icon: var(--i-heart); }
#quiz .qverdicts [data-verdict="turned"] { --v-ink: var(--bad); --v-soft: var(--bad-soft); --v-tint: var(--bad-tint); --v-icon: var(--i-turn); }
#quiz .qverdicts [data-verdict="other"] { --v-ink: var(--gold); --v-soft: var(--gold-soft); --v-tint: var(--gold-soft); --v-icon: var(--i-dots); }
#quiz .qverdicts [data-verdict="shop"] { --v-ink: var(--warn); --v-soft: var(--warn-soft); --v-tint: #FFF3DC; --v-icon: var(--i-bag); }
#quiz .qverdicts [data-verdict="unsure"] { --v-ink: var(--gold); --v-soft: var(--gold-soft); --v-tint: var(--gold-soft); --v-icon: var(--i-q); }
[dir="rtl"] #quiz .qverdicts [data-verdict="turned"]::after { transform: scaleX(-1); }
#quiz .qtold-grid .qopt { --v-ink: var(--warn); --v-soft: var(--warn-soft); --v-tint: #FFF3DC; }
#quiz .qtold-grid [data-told="sweet"] { --v-icon: var(--i-candy); }
#quiz .qtold-grid [data-told="chemical"] { --v-icon: var(--i-flask); }
#quiz .qtold-grid [data-told="soapy"] { --v-icon: var(--i-bubbles); }
#quiz .qtold-grid [data-told="heavy"] { --v-icon: var(--i-weight); }
#quiz .qtold-grid [data-told="powdery"] { --v-icon: var(--i-puff); }
#quiz .qtold-grid [data-told="smoky"] { --v-icon: var(--i-smoke); }
#quiz .qverdicts .qopt:hover, #quiz .qtold-grid .qopt:hover { border-color: var(--v-ink); }
#quiz .qverdicts .qopt:hover::before, #quiz .qtold-grid .qopt:hover::before { transform: translateY(-50%) scale(1.08); }
#quiz .qverdicts .qopt:is([aria-pressed="true"], .fx-chosen), #quiz .qtold-grid .qopt[aria-pressed="true"] { border-color: var(--v-ink); background: color-mix(in oklab, var(--v-tint) 88%, transparent); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--v-ink), inset 0 1px 0 var(--gleam), 0 12px 26px -16px color-mix(in oklab, var(--v-ink) 80%, transparent); }
#quiz .qverdicts .qopt:is([aria-pressed="true"], .fx-chosen)::before, #quiz .qtold-grid .qopt[aria-pressed="true"]::before { background: var(--v-ink); transform: translateY(-50%) scale(1.06); box-shadow: 0 0 0 4px color-mix(in oklab, var(--v-ink) 16%, transparent); }
#quiz .qverdicts .qopt:is([aria-pressed="true"], .fx-chosen)::after, #quiz .qtold-grid .qopt[aria-pressed="true"]::after { background: #fff; }
#quiz .qopt.fx-chosen { transition: none; }
#quiz .qopt:active { transform: scale(.985); }
#quiz .qtold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
#quiz .qtold-grid .qopt { padding-block: 12px; padding-inline-end: 10px; min-height: 64px; font-size: 15px; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
  #quiz .qopts > .qopt { animation: q-rise .5s var(--glide) backwards; }
  #quiz .qopts > .qopt:nth-child(2) { animation-delay: .05s; } #quiz .qopts > .qopt:nth-child(3) { animation-delay: .1s; }
  #quiz .qopts > .qopt:nth-child(4) { animation-delay: .15s; } #quiz .qopts > .qopt:nth-child(5) { animation-delay: .2s; }
  #quiz .qopts > .qopt:nth-child(6) { animation-delay: .25s; }
}

/* ---------- "When did it bother you?": the wear ribbon, first minutes to hours later, filled to the moment chosen ---------- */
#quiz .qwhen { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; max-width: 560px; margin-top: 8px; }
#quiz .qwhen::before, #quiz .qwhen::after { content: ""; position: absolute; top: 22px; height: 4px; border-radius: 999px; inset-inline: calc(100% / 6); pointer-events: none;
  background: linear-gradient(90deg, var(--open), var(--heart) 50%, var(--dry)); }
[dir="rtl"] #quiz .qwhen::before, [dir="rtl"] #quiz .qwhen::after { background: linear-gradient(270deg, var(--open), var(--heart) 50%, var(--dry)); }
#quiz .qwhen::before { opacity: .28; }
#quiz .qwhen::after { clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--glide); box-shadow: 0 0 10px color-mix(in oklab, var(--heart) 45%, transparent); }
[dir="rtl"] #quiz .qwhen::after { clip-path: inset(0 0 0 100%); }
#quiz .qwhen:has([data-when="opening"][aria-pressed="true"])::after { clip-path: inset(0 99% 0 0); }
#quiz .qwhen:has([data-when="heart"][aria-pressed="true"])::after { clip-path: inset(0 50% 0 0); }
#quiz .qwhen:has([data-when="drydown"][aria-pressed="true"])::after { clip-path: inset(0 0 0 0); }
[dir="rtl"] #quiz .qwhen:has([data-when="opening"][aria-pressed="true"])::after { clip-path: inset(0 0 0 99%); }
[dir="rtl"] #quiz .qwhen:has([data-when="heart"][aria-pressed="true"])::after { clip-path: inset(0 0 0 50%); }
#quiz .qwhen .qopt { z-index: 1; min-height: 0; padding: 40px 4px 8px; text-align: center; font-size: 14px; line-height: 1.35; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-2); }
#quiz .qwhen .qopt::before { top: 14px; inset-inline-start: 50%; width: 20px; height: 20px; transform: translateX(-50%); border: 3px solid var(--stage); background: var(--paper); box-shadow: 0 0 0 3px var(--ground); transition: background-color .3s, box-shadow .4s, transform .45s var(--spring); }
[dir="rtl"] #quiz .qwhen .qopt::before { transform: translateX(50%); }
#quiz .qwhen [data-when="opening"] { --stage: var(--open); }
#quiz .qwhen [data-when="heart"] { --stage: var(--heart); }
#quiz .qwhen [data-when="drydown"] { --stage: var(--dry); }
#quiz .qwhen .qopt:hover { color: var(--ink); }
#quiz .qwhen .qopt:not([data-when="unsure"])[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: none; box-shadow: none; }
#quiz .qwhen .qopt:not([data-when="unsure"])[aria-pressed="true"]::before { background: var(--stage); border-color: var(--stage); transform: translateX(-50%) scale(1.2); box-shadow: 0 0 0 5px color-mix(in oklab, var(--stage) 22%, transparent), 0 0 16px var(--stage); }
[dir="rtl"] #quiz .qwhen .qopt:not([data-when="unsure"])[aria-pressed="true"]::before { transform: translateX(50%) scale(1.2); }
#quiz .qwhen [data-when="unsure"] { grid-column: 1 / -1; justify-self: center; margin-top: 8px; padding: 8px 18px; min-height: 40px; border: 1px dashed var(--rim-2); border-radius: 999px; background: var(--glass-2); }
#quiz .qwhen [data-when="unsure"]::before { display: none; }
#quiz .qwhen [data-when="unsure"][aria-pressed="true"] { border-style: solid; border-color: var(--gold); background: color-mix(in oklab, var(--gold-soft) 85%, transparent); font-weight: 600; color: var(--ink); }
#quiz .qwhen > .qopt { animation: none; }

/* ---------- what went wrong: a panel in the verdict's own tint ---------- */
#quiz .qfollow { margin-top: 18px; padding: 4px 14px 12px; border: 1px solid var(--rim); border-radius: var(--radius-lg); background: var(--glass-2); }
#quiz .qfollow.turned { background: color-mix(in oklab, var(--bad-tint) 62%, transparent); border-color: color-mix(in oklab, var(--bad) 22%, transparent); }
#quiz .qfollow.shop { background: color-mix(in oklab, var(--warn-soft) 42%, transparent); border-color: color-mix(in oklab, var(--warn) 25%, transparent); }
#quiz .qfollow .ask { margin-top: 16px; }
#quiz .qfollow .qactions { margin-inline: -7px; margin-bottom: -5px; }
#quiz .chips button { transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--spring); }
#quiz .chips button:active { transform: scale(.94); }
#quiz .chips button[aria-pressed="true"] { animation: q-press .35s var(--spring); }
@media (prefers-reduced-motion: no-preference) { #quiz .qfollow { animation: q-rise .5s var(--glide) backwards; } }

/* ---------- note rows: a scale from hated to loved ---------- */
#quiz .nopts { gap: 3px; }
#quiz .nopts button[data-v] { border-radius: 6px; transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--spring); }
#quiz .nopts button[data-v="-2"] { border-start-start-radius: 12px; border-end-start-radius: 12px; }
#quiz .nopts button[data-v="2"] { border-start-end-radius: 12px; border-end-end-radius: 12px; }
#quiz .nopts button[data-v="-2"]:not([aria-pressed="true"]) { background: color-mix(in oklab, var(--bad-soft) 60%, var(--paper)); }
#quiz .nopts button[data-v="-1"]:not([aria-pressed="true"]) { background: color-mix(in oklab, var(--bad-soft) 30%, var(--paper)); }
#quiz .nopts button[data-v="1"]:not([aria-pressed="true"]) { background: color-mix(in oklab, var(--good-soft) 32%, var(--paper)); }
#quiz .nopts button[data-v="2"]:not([aria-pressed="true"]) { background: color-mix(in oklab, var(--good-soft) 64%, var(--paper)); }
#quiz .nopts .nun { border-radius: 999px; }
#quiz .nopts button[aria-pressed="true"] { animation: q-press .35s var(--spring); }
#quiz .npick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 10px; border-radius: 999px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--rim); }
#quiz .npick::before { content: ""; width: 12px; height: 12px; background: var(--gold); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { #quiz .ndone { animation: q-rise .4s var(--spring) backwards; } #quiz .nrows .nrow { animation: q-rise .5s var(--glide) backwards; } }

/* ---------- the note picker: each screen's hue and drawn mark; a card warms when enjoyed, blushes when avoided ---------- */
#quiz .qmood { --mood: var(--gold); }
#quiz .qmood[data-mood="fresh"] { --mood: #3F7F6C; }
#quiz .qmood[data-mood="flowers"] { --mood: #B8467A; }
#quiz .qmood[data-mood="fruit"] { --mood: #B4552A; }
#quiz .qmood[data-mood="spices"] { --mood: #A5412A; }
#quiz .qmood[data-mood="woods"] { --mood: #735236; }
#quiz .qmood::before { content: ""; position: absolute; inset: -24px -16px auto; height: 280px; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 16% 26%, color-mix(in oklab, var(--mood) 14%, transparent), transparent 70%); }
[dir="rtl"] #quiz .qmood::before { background: radial-gradient(55% 60% at 84% 26%, color-mix(in oklab, var(--mood) 14%, transparent), transparent 70%); }
#quiz .qmood-i { display: block; width: 58px; height: 58px; margin-bottom: 14px; padding: 9px; border-radius: 50%; color: var(--mood);
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in oklab, var(--mood) 15%, var(--paper)) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mood) 38%, transparent), 0 10px 20px -12px color-mix(in oklab, var(--mood) 70%, transparent); }
#quiz .qmood h1::after { background: linear-gradient(90deg, var(--mood), color-mix(in oklab, var(--mood) 35%, var(--oil))); }
[dir="rtl"] #quiz .qmood h1::after { background: linear-gradient(270deg, var(--mood), color-mix(in oklab, var(--mood) 35%, var(--oil))); }
@media (prefers-reduced-motion: no-preference) {
  #quiz .qmood-i :is(path, circle, ellipse) { stroke-dasharray: 90; stroke-dashoffset: 90; animation: q-draw 1.5s var(--glide) forwards .15s; }
  #quiz .qmood-i { animation: q-check .6s var(--spring) backwards; }
  #quiz .pcards .pcard { animation: q-rise .5s var(--glide) backwards; }
  #quiz .pcards .pcard:nth-child(2) { animation-delay: .03s; } #quiz .pcards .pcard:nth-child(3) { animation-delay: .06s; }
  #quiz .pcards .pcard:nth-child(4) { animation-delay: .09s; } #quiz .pcards .pcard:nth-child(5) { animation-delay: .12s; }
  #quiz .pcards .pcard:nth-child(n+6) { animation-delay: .15s; }
}
#quiz .pcard { position: relative; overflow: hidden; transition: background-color .3s, border-color .3s, box-shadow .3s; }
#quiz .pcard::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: transparent; transition: background-color .3s; }
#quiz .pcard:has([data-pv="1"][aria-pressed="true"]) { background: color-mix(in oklab, var(--good-tint) 88%, transparent); border-color: color-mix(in oklab, var(--good) 42%, transparent); }
#quiz .pcard:has([data-pv="1"][aria-pressed="true"])::before { background: var(--good); }
#quiz .pcard:has([data-pv="-1"][aria-pressed="true"]) { background: color-mix(in oklab, var(--bad-tint) 88%, transparent); border-color: color-mix(in oklab, var(--bad) 36%, transparent); }
#quiz .pcard:has([data-pv="-1"][aria-pressed="true"])::before { background: var(--bad); }
#quiz .pcard-opts button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--spring); }
#quiz .pcard-opts button:not([data-pv="0"])::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--o-icon) center / contain no-repeat; mask: var(--o-icon) center / contain no-repeat; }
#quiz .pcard-opts [data-pv="1"] { --o-icon: var(--i-heart); }
#quiz .pcard-opts [data-pv="-1"] { --o-icon: var(--i-avoid); }
/* "Not sure" is the quiet default */
#quiz .pcard-opts [data-pv="0"][aria-pressed="true"] { background: transparent; border-color: var(--line); color: var(--ink-3); font-weight: 500; box-shadow: none; }
#quiz .pcard-opts button[aria-pressed="true"]:not([data-pv="0"]) { animation: q-press .35s var(--spring); }

/* ---------- sweet or bitter: two tall cards side by side ---------- */
#quiz .qduel { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; gap: 10px; }
#quiz .qduel .qopt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; padding: 12px; text-align: center; border-radius: 999px; }
#quiz .qduel .qopt::before { display: none; }
#quiz .qduel [data-taste="bitter"], #quiz .qduel [data-taste="sweet"] { justify-content: flex-start; min-height: 200px; padding: 92px 12px 16px; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, var(--t1), color-mix(in oklab, var(--t2) 72%, var(--paper))); border-color: color-mix(in oklab, var(--t-ink) 32%, transparent); }
#quiz .qduel [data-taste="bitter"] { --t1: #EEF4DE; --t2: #CFE2B8; --t-ink: #3D6B3A; --t-icon: var(--i-leaf); }
#quiz .qduel [data-taste="sweet"] { --t1: #FDEBD8; --t2: #F3C8A2; --t-ink: #8F4A1E; --t-icon: var(--i-drop); }
#quiz .qduel [data-taste="bitter"]::after, #quiz .qduel [data-taste="sweet"]::after { content: ""; position: absolute; top: 24px; left: 50%; width: 54px; height: 54px; margin-left: -27px; pointer-events: none;
  background: var(--t-ink); -webkit-mask: var(--t-icon) center / contain no-repeat; mask: var(--t-icon) center / contain no-repeat; transition: transform .5s var(--spring); }
#quiz .qduel .qopt b { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#quiz .qduel .qopt small { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
#quiz .qduel [data-taste="bitter"]:hover::after, #quiz .qduel [data-taste="sweet"]:hover::after { transform: scale(1.1) rotate(-5deg); }
#quiz .qduel :is([data-taste="bitter"], [data-taste="sweet"]):is([aria-pressed="true"], .fx-chosen) { border-color: var(--t-ink); box-shadow: inset 0 0 0 2px var(--t-ink), 0 16px 30px -16px var(--t-ink); background: radial-gradient(120% 90% at 50% 0%, var(--t1), var(--t2)); }
#quiz .qduel :is([data-taste="both"], [data-taste="unsure"]).fx-chosen, #quiz .qtri .qopt.fx-chosen { border-color: var(--gold); background: color-mix(in oklab, var(--gold-soft) 85%, transparent); font-weight: 600; }

/* ---------- anosmia: three answers in a row ---------- */
#quiz .qtri { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; gap: 8px; }
#quiz .qtri .qopt { min-height: 56px; padding: 12px 6px; text-align: center; border-radius: 999px; font-weight: 500; }
#quiz .qtri .qopt::before { display: none; }

/* ---------- the reveal: kept bottles land on sage light, turned ones on rose ---------- */
#quiz .qsort { position: relative; overflow: hidden; isolation: isolate; }
#quiz .qsort::before { content: ""; position: absolute; inset: auto 6% -40% 6%; height: 80%; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklab, var(--good) 22%, transparent), transparent); }
#quiz .qsort.turned::before { background: radial-gradient(closest-side, color-mix(in oklab, var(--bad) 20%, transparent), transparent); }
#quiz .qsort-b .thumb { width: 64px; height: 64px; filter: drop-shadow(0 6px 6px rgba(42,27,17,.25)); }

/* ---------- the result: the palate's name, then its wheel around the emblem ---------- */
#quiz .qname-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; padding: 18px 10px 12px; text-align: center;
  background: radial-gradient(85% 62% at 50% 64%, color-mix(in oklab, var(--arch) 14%, var(--paper)), var(--paper) 74%); }
#quiz .qname-hero .qname-t { grid-row: 1; grid-column: 1; }
#quiz .qname-hero .qname-t h1 { font-size: clamp(30px, 8.4vw, 46px); }
#quiz .qname-hero .qrose, #quiz .qname-hero .qemblem { grid-row: 2; grid-column: 1; }
#quiz .qname-hero .qemblem { align-self: center; justify-self: center; z-index: 2; width: 84px; height: 84px; }
@media (min-width: 720px) {
  #quiz .qname-hero { grid-template-columns: 330px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 30px; padding: 20px 30px; text-align: start; }
  #quiz .qname-hero .qname-t { grid-column: 2; }
  #quiz .qname-hero .qrose, #quiz .qname-hero .qemblem { grid-row: 1; }
  #quiz .qname-hero .qemblem { justify-self: center; }
}
.qrose { position: relative; width: min(100%, 330px); aspect-ratio: 1; }
.qrose-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qrose-ring { fill: none; stroke: var(--rim-2); stroke-width: 1; stroke-dasharray: 1.5 5; }
.qbase { fill: rgba(252,248,240,.6); stroke: rgba(140,95,0,.26); stroke-width: 1; transition: opacity .35s; }
.qbase.bad { fill: color-mix(in oklab, var(--bad-soft) 80%, transparent); stroke: color-mix(in oklab, var(--bad) 60%, transparent); stroke-dasharray: 3 3; }
.qpet { stroke: rgba(115,73,0,.55); stroke-width: 1; transition: opacity .35s; filter: drop-shadow(0 2px 3px rgba(42,27,17,.2)); }
.qpet.trace { opacity: .7; stroke-dasharray: 2 2; }
.qrose.has-sel .qpet:not(.sel), .qrose.has-sel .qbase:not(.sel) { opacity: .3; }
.qrose-k { position: absolute; z-index: 3; transform: translate(-50%, -50%); min-width: 44px; min-height: 34px; padding: 4px 8px; border: 0; border-radius: 999px; background: none;
  font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--ink-2); cursor: pointer; }
.qrose-k.on { color: var(--ink); font-weight: 600; }
.qrose-k.bad { color: var(--bad); }
.qrose-k.bad::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 4px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--i-avoid) center / contain no-repeat; mask: var(--i-avoid) center / contain no-repeat; }
.qrose-k:hover { color: var(--ink); background: rgba(252,248,240,.75); }
.qrose-k[aria-pressed="true"] { background: var(--gold-fill); color: var(--ink); box-shadow: 0 6px 12px -6px rgba(140,95,0,.6); }
[dir="rtl"] .qrose-k { font-size: 13.5px; }
@media (prefers-reduced-motion: no-preference) {
  .qpet { transform-box: view-box; transform-origin: 50% 50%; animation: q-bloom 1s var(--spring) backwards; animation-delay: calc(var(--k) * 110ms + .45s); }
  .qbase, .qrose-ring { animation: q-fade .7s ease-out backwards .15s; }
  .qrose-k { animation: q-fade .6s ease-out backwards .6s; }
}
.qrose-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; min-height: 30px; margin: 12px 2px 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.qrose-hint { color: var(--ink-2); font-size: 13.5px; }
.qrose-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.qrose-row { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }
.qrose-k2 { font-size: 12.5px; font-weight: 600; color: var(--gold-2); }
.qrose-row.bad .qrose-k2 { color: var(--bad); }
.qrose-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.qkey::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-inline-end: 6px; vertical-align: -1px; }
.qkey.pet::before { border-radius: 60% 0 60% 0; background: linear-gradient(135deg, var(--oil), var(--amber)); box-shadow: inset 0 0 0 1px rgba(115,73,0,.5); }
.qkey.bad::before { border-radius: 3px; background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
[dir="rtl"] .qrose-k2, [dir="rtl"] .qrose-hint { font-size: 14px; }
@media (min-width: 720px) { .qrose-cap, .qrose-keys { justify-content: flex-start; text-align: start; } }
/* the counts: a bar under each for its share of the catalogue */
#quiz .qfun { position: relative; overflow: hidden; }
#quiz .qfun-bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: max(var(--w), 4px); border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--gold-fill); }
#quiz .qfun.out .qfun-bar { background: linear-gradient(90deg, var(--bad), var(--rose)); }
#quiz .qfun.open .qfun-bar { background: var(--good); }
@media (prefers-reduced-motion: no-preference) {
  #quiz .qfun-bar { transform-origin: left center; animation: q-grow 1.4s var(--glide) backwards .6s; }
  [dir="rtl"] #quiz .qfun-bar { transform-origin: right center; }
}
/* the picks, numbered in their order */
#quiz .recs-list { counter-reset: pick; gap: 18px; margin-top: 16px; }
#quiz .qpick { position: relative; counter-increment: pick; transition: transform .35s var(--glide), box-shadow .35s var(--glide); }
#quiz .qpick::before { content: counter(pick); position: absolute; top: -11px; inset-inline-start: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); color: var(--gold); font-family: var(--font-display); font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--gold-fill); }
#quiz .qpick-head .thumb { width: 84px; height: 84px; background: radial-gradient(ellipse 46% 10% at 50% 95%, rgba(42,27,17,.2), transparent 72%), radial-gradient(50% 50% at 50% 45%, rgba(255,236,186,.8), transparent 70%); }
@media (hover: hover) { #quiz .qpick:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--gleam), var(--shadow-lift); } }
@media (prefers-reduced-motion: no-preference) {
  #quiz .qpick { animation: q-rise .6s var(--glide) backwards; }
  #quiz .qpick:nth-child(1) { animation-delay: .1s; } #quiz .qpick:nth-child(2) { animation-delay: .2s; } #quiz .qpick:nth-child(3) { animation-delay: .3s; }
}

/* the complaints screen's two ways out: pills side by side */
#quiz .qopts-apart { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
#quiz .qopts-apart .qopt { min-height: 52px; padding: 10px 12px; text-align: center; border-radius: 999px; font-size: 14.5px; line-height: 1.3; }
#quiz .qopts-apart .qopt::before { display: none; }

/* a visitor who asked for less motion gets every state at once: no transition, no pop, no wipe */
@media (prefers-reduced-motion: reduce) {
  #quiz *, #quiz *::before, #quiz *::after, .qprogress::before { animation: none !important; transition: none !important; }
}
/* the taste card says when the bottles overrule the sweet-or-bitter answer */
.qtaste-note { margin: 14px 0 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--oil); font-size: 14px; line-height: 1.55; color: var(--ink-2); }