:root {
    color-scheme: light;
    --bg: #ECEFE9;
    --surface: #F8F9F5;
    --surface-2: #E2E6DE;
    --ink: #1E1916;
    --ink-soft: #5B544E;
    --line: #CDD2C8;
    --accent: #A8233A;
    --accent-ink: #FFFFFF;
    --accent-soft: #F3D9DD;
    --crema: #C4862A;
    --glass: #8A928A;
    --glass-fill: rgba(255,255,255,.55);
    --saucer: #DADFD5;

    /* ingredient colours (liquids look the same in both themes) */
    --i-espresso: #3A2016;
    --i-decaf: #6A4430;
    --i-drip: #5B3622;
    --i-coldbrew: #2B1911;
    --i-water: #C7D9DF;
    --i-milk: #EFE3D1;
    --i-oat: #E6D6B8;
    --i-foam: #FBF7F0;
    --i-whip: #FFFDF9;
    --i-choc: #4B2A1D;
    --i-syrup: #D8A357;
    --i-ice: #D8EAF0;
    --i-gelato: #F3E6C1;

    --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #15110F;
      --surface: #201A17;
      --surface-2: #2B2420;
      --ink: #F1E9DF;
      --ink-soft: #B3A89D;
      --line: #3B332E;
      --accent: #E45A70;
      --accent-ink: #1A0E10;
      --accent-soft: #3E1E25;
      --crema: #E0A54B;
      --glass: #8C827A;
      --glass-fill: rgba(255,255,255,.05);
      --saucer: #342C27;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #15110F;
    --surface: #201A17;
    --surface-2: #2B2420;
    --ink: #F1E9DF;
    --ink-soft: #B3A89D;
    --line: #3B332E;
    --accent: #E45A70;
    --accent-ink: #1A0E10;
    --accent-soft: #3E1E25;
    --crema: #E0A54B;
    --glass: #8C827A;
    --glass-fill: rgba(255,255,255,.05);
    --saucer: #342C27;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font: 400 15px/1.55 var(--body);
    padding-inline: 16px;
    padding-block: 28px 56px;
  }
  .wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 28px; }

  /* header */
  header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
  .brand { font: 800 clamp(34px, 6vw, 56px)/1 var(--display); letter-spacing: -0.03em; margin: 0; }
  .brand span { color: var(--accent); }
  .tagline { margin: 0; color: var(--ink-soft); max-width: 44ch; }
  .qr-link { color: var(--accent); font-weight: 600; white-space: nowrap; }

  /* questions page */
  .ask { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .panel-title { font: 700 22px/1.1 var(--display); margin: 0; letter-spacing: -0.01em; }
  .panel-title + p { margin: -14px 0 0; font-size: 13px; color: var(--ink-soft); }
  .cta-bar {
    grid-column: 1 / -1; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    background: var(--ink); color: var(--bg); border-radius: 18px; padding: 14px 16px 14px 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }
  .cta-bar p { margin: 0; font-size: 14px; opacity: .85; }
  .cta-bar b { font: 700 17px var(--display); opacity: 1; }
  .btn.big { font-size: 16px; padding: 14px 22px; }
  .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .btn.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }

  /* report page */
  .report-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .brand-sm { font: 800 24px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
  .brand-sm span { color: var(--accent); }
  .report-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .report-head { display: grid; gap: 6px; }
  .report-meta { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
  .report-title { font: 800 clamp(30px, 5vw, 46px)/1.05 var(--display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
  .report-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px; align-items: start; }
  .answers dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; }
  .answers dt, .answers dd { padding: 9px 0; border-bottom: 1px dashed var(--line); margin: 0; }
  .answers dt { font: 600 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-right: 14px; }
  .answers dd { font-size: 14px; text-align: right; }
  .answers dt:last-of-type, .answers dd:last-of-type { border-bottom: 0; }
  .answers .said { font-size: 13px; color: var(--ink-soft); margin: 0; font-style: italic; }
  .copy-status { font-size: 13px; color: var(--ink-soft); margin: 0; }
  .copy-status:empty { display: none; }
  .report-body { display: grid; gap: 28px; }
  .empty p { margin: 0; color: var(--ink-soft); }
  a.btn { display: inline-block; text-decoration: none; }
  @media (max-width: 860px) { .ask, .report-layout { grid-template-columns: 1fr; } }

  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 22px; }
  .label { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; display: block; }

  /* describe */
  .describe textarea {
    width: 100%; min-height: 84px; resize: vertical;
    font: 400 15px/1.5 var(--body); color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  }
  .describe textarea:focus-visible, button:focus-visible, input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .describe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
  .btn {
    font: 600 14px/1 var(--body); border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer;
    background: var(--accent); color: var(--accent-ink);
  }
  .btn:hover { filter: brightness(1.08); }
  .read-note { font-size: 13px; color: var(--ink-soft); margin: 0; }
  .read-note b { color: var(--ink); }

  /* moods */
  .moods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
  .moods legend, .seg legend { padding: 0; }
  .mood input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .mood span {
    display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); transition: border-color .15s, background .15s;
  }
  .mood b { font: 700 15px/1.2 var(--display); }
  .mood small { font-size: 12px; color: var(--ink-soft); }
  .mood span:hover { border-color: var(--ink-soft); }
  .mood input:checked + span { background: var(--accent-soft); border-color: var(--accent); }

  .seg { border: 0; padding: 0; margin: 0; }
  .seg-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
  .seg label { position: relative; }
  .seg span { display: block; text-align: center; padding: 8px 6px; border-radius: 999px; font: 500 13px/1.1 var(--body); cursor: pointer; color: var(--ink-soft); }
  .seg input:checked + span { background: var(--ink); color: var(--bg); }
  .text-input {
    width: 100%; font: 400 15px/1.4 var(--body); color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  }
  .text-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .seg-hint { font: 400 12px/1.4 var(--mono); color: var(--ink-soft); margin: 8px 0 0; }

  /* result */
  .result { padding: 26px; }
  .eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0; }
  .drink-name { font: 800 clamp(32px, 5vw, 50px)/1 var(--display); letter-spacing: -0.025em; margin: 8px 0 10px; text-wrap: balance; }
  .why { margin: 0; max-width: 58ch; color: var(--ink-soft); font-size: 16px; }
  .tailored { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
  .tailored li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 13.5px; color: var(--ink); align-items: start; }
  .tailored li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--crema); margin: 6px 0 0 4px; }
  .tailored li.warn::before { background: var(--accent); }

  .cup-row { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 20px; align-items: center; }
  @media (max-width: 520px) { .cup-row { grid-template-columns: 1fr; } .cup-row svg { max-width: 240px; margin: 0 auto; } }
  .cup-row svg { width: 100%; height: auto; display: block; }

  .recipe { list-style: none; margin: 0; padding: 0; display: grid; }
  .recipe li { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); }
  .recipe li:last-child { border-bottom: 0; }
  .swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(0,0,0,.18); }
  .recipe .ml { font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
  .scale-note { font: 400 11px/1.4 var(--mono); color: var(--ink-soft); margin: 10px 0 0; }

  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  @media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat { background: var(--surface); padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
  .stat .v { font: 700 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
  .stat .v small { font: 500 12px var(--mono); color: var(--ink-soft); margin-left: 3px; }
  .meter { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
  .meter { display: flex; }
  .meter i { display: block; height: 100%; background: var(--crema); transition: width .5s ease; }
  .meter i.had { background: var(--ink-soft); opacity: .45; }
  .stat .sub { font: 400 11px/1.3 var(--mono); color: var(--ink-soft); }
  .stat .k { font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

  .alts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .alt {
    font: 500 13px/1 var(--body); color: var(--ink); background: transparent; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px;
  }
  .alt:hover { border-color: var(--accent); color: var(--accent); }
  .alt[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* cup animation */
  .layer { transform-box: fill-box; transform-origin: 50% 100%; animation: pour .55s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i) * 140ms); }
  @keyframes pour { from { transform: scaleY(0); } }
  .steam path { stroke: var(--glass); fill: none; stroke-width: 2; stroke-linecap: round; opacity: .55; animation: rise 3.2s ease-in-out infinite; }
  .steam path:nth-child(2) { animation-delay: .8s; }
  .steam path:nth-child(3) { animation-delay: 1.6s; }
  @keyframes rise { 0%,100% { transform: translateY(0); opacity: .15; } 50% { transform: translateY(-6px); opacity: .6; } }
  @media (prefers-reduced-motion: reduce) { .layer, .steam path { animation: none; } .meter i { transition: none; } }

  /* map */
  .map-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
  .map-head h2 { font: 700 24px/1.1 var(--display); margin: 0; letter-spacing: -0.01em; }
  .map-head p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 60ch; }
  .chart { overflow-x: auto; }
  .chart svg { width: 100%; min-width: 560px; height: auto; display: block; }
  .chart text { font-family: var(--mono); fill: var(--ink-soft); font-size: 11px; }
  .chart .axis-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .chart .grid { stroke: var(--line); stroke-width: 1; }
  .chart .zone { fill: var(--accent-soft); opacity: .5; }
  .chart .dot { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1.5; cursor: pointer; }
  .chart .dot:hover { stroke: var(--accent); }
  .chart .dot.alt-dot { stroke: var(--accent); stroke-width: 2; }
  .chart .dot.pick { fill: var(--accent); stroke: var(--accent); }
  .chart .pick-label { font: 700 13px var(--display); fill: var(--ink); }
  .chart .alt-label { fill: var(--ink-soft); }
  .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 12px/1 var(--mono); color: var(--ink-soft); }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 2px solid var(--ink-soft); background: var(--surface); }
  .legend i.p { background: var(--accent); border-color: var(--accent); }
  .legend i.a { border-color: var(--accent); }

  footer { font-size: 12px; color: var(--ink-soft); text-align: left; }