.recipe-finale {background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-8);margin-bottom:var(--space-12)}
.recipe-finale-heading {display:flex;justify-content:space-between;align-items:center;gap:var(--space-8)}
.recipe-finale .result-stats {grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:767px){.recipe-finale .result-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}.recipe-finale .result-stats>div{min-width:0}}
.recipe-finale h1 {margin:var(--space-4) 0;font-size:var(--type-display)}
.recipe-finale .result-lead {font-size:var(--type-lead);max-width:680px;margin:0;color:var(--muted)}
.recipe-finale-heading>.brewer-drawing {width:200px;height:160px;flex-shrink:0}
.finale-actions {display:flex;align-items:center;gap:var(--space-6);margin-top:var(--space-6)}
.recipe-choices {margin-bottom:var(--space-6)}
.recipe-choices h2 {font-size:var(--type-lead);margin-top:var(--space-2)}
.recipe-variant-grid {display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);width:fit-content;max-width:100%}
.recipe-variant {display:block;min-height:44px;text-align:center;padding:10px 18px;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.recipe-variant strong {font-size:var(--type-lead);font-weight:400}
.recipe-variant>span:last-child {color:var(--muted)}
.recipe-variant.selected {border-color:var(--ink);background:var(--ink);color:var(--paper)}
.recipe-variant:not(.selected):hover {background:var(--soft);border-color:var(--line)}
.recipe-variant:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.recipe-choice-label {display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
.recipe-choice-label>span,.recipe-variant-description {color:var(--muted)}
.recipe-variant-description {margin:10px 0 0;line-height:1.4}
.recipe-variant-description>span {color:var(--ink)}
.recipe-portion {border-block:1px solid var(--line);padding:var(--space-4) 0}
.recipe-portion summary {cursor:pointer}
.recipe-steps-heading {font-size:var(--type-lead);margin-top:var(--space-8)}
.recipe-ready-aside>.eyebrow {display:block;margin-bottom:var(--space-6)}
@media(max-width:767px){.recipe-finale {padding:var(--space-6);margin-bottom:var(--space-8)}.recipe-finale h1{font-size:var(--type-title)}.recipe-finale-heading>.brewer-drawing{display:none}.finale-actions{flex-wrap:wrap;gap:var(--space-4)}.recipe-variant-grid{grid-template-columns:1fr}.recipe-choices{margin-bottom:var(--space-8)}}
.recipe-finale .result-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-6)}
.metric-input{display:flex;align-items:baseline;gap:var(--space-1);max-width:100%}
.metric-input input{width:100%;min-width:0;max-width:5ch;padding:0;border:0;border-bottom:1px dashed var(--muted);border-radius:0;background:transparent;color:var(--ink);font-family:inherit;font-size:var(--type-title);line-height:1.2;appearance:textfield}
.metric-input input::-webkit-inner-spin-button,.metric-input input::-webkit-outer-spin-button{appearance:none;margin:0}
.metric-input input:focus{outline:2px solid var(--accent);outline-offset:4px}
.recipe-finale .grind-metric b{font-size:var(--type-lead);overflow-wrap:anywhere}
.grind-metric .fine{color:var(--muted);margin-top:var(--space-2)}
.recipe-layout.recipe-ready-layout{display:block}
.recipe-ready-layout>section{max-width:900px;margin-inline:auto}
@media(max-width:900px){.recipe-finale .result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grind-metric{grid-column:1/-1}}
.recipe-finale .result-stats{grid-template-columns:1.4fr 1.2fr 1fr 1fr}
.recipe-finale .coffee-metric-group{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.coffee-metric-group .grind-metric{display:flex;flex-direction:column;gap:var(--space-1);padding-top:var(--space-4);border-top:1px solid var(--line)}
.coffee-metric-group .grind-metric b{font-size:var(--type-lead)}
.metric-input{align-items:center;gap:var(--space-1)}
.metric-input input{flex:1;max-width:6ch;text-align:center;border:0}
.metric-input .metric-adjust{flex:0 0 32px;width:32px;height:40px;padding:0;border:1px solid var(--line);border-radius:var(--radius-control);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.metric-adjust:hover{background:var(--soft)}
.metric-adjust:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:900px){.recipe-finale .result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.recipe-finale .coffee-metric-group,.recipe-finale .result-stats>.portion-metric{grid-column:1/-1}.metric-input{max-width:260px}.metric-input input{max-width:none}.coffee-metric-group .grind-metric{border:0;padding-top:0}}
.brew-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.brew-spec-card{min-width:0;border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-6);background:var(--paper);display:flex;flex-direction:column}
.brew-specs .spec-label{display:block;font-size:var(--type-body);color:var(--muted);margin-bottom:var(--space-3)}
.brew-specs .metric-input{display:flex;align-items:center;gap:var(--space-2);width:100%;max-width:none;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel);padding:var(--space-2)}
.brew-specs .metric-input input{font-size:var(--type-title);max-width:none;min-width:0;flex:1;line-height:1.2;background:transparent;text-align:center}
.brew-specs .metric-input>span{color:var(--muted)}
.brew-specs .metric-adjust{width:40px;height:48px;flex-basis:40px;border:0;background:var(--paper);font-size:var(--type-lead)}
.brew-specs .spec-detail{border-top:1px solid var(--line);margin-top:var(--space-6);padding-top:var(--space-6);flex:1}
.brew-specs .grind-metric{display:block}
.brew-specs b{font-size:var(--type-lead);font-weight:400;line-height:1.3}
.brew-specs .grind-metric>b{display:inline;margin-right:var(--space-2)}
.brew-specs .grind-metric>span:not(.spec-label){font-size:var(--type-body);color:var(--muted)}
.brew-specs .grind-metric a{display:block;font-size:var(--type-body);margin-top:var(--space-2);color:var(--muted)}
.brew-specs .water-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.brew-specs small{font-size:var(--type-body)}
@media(max-width:600px){.brew-specs{grid-template-columns:1fr}.brew-spec-card{padding:var(--space-4)}.brew-specs .metric-adjust{width:32px;flex-basis:32px}.brew-specs .water-details{gap:var(--space-2)}}
/* Compact recipe summary: the primary action should not hide below oversized choice cards. */
.recipe-view .result-top{margin:16px 0 20px;min-height:40px}
.recipe-view .result-top>.eyebrow{width:auto;order:0;font-size:var(--type-body)}
.recipe-view .recipe-choices{margin-bottom:20px}
.recipe-view .recipe-finale{padding:24px;margin-bottom:24px}
.recipe-view .recipe-finale-heading{gap:16px}
.recipe-view .recipe-finale h1{font-size:var(--type-title);margin:8px 0}
.recipe-view .recipe-finale .result-lead{font-size:var(--type-body)}
.recipe-view .recipe-finale-heading>.brewer-drawing{width:112px;height:88px}
.recipe-view .brew-specs{margin-top:20px;gap:16px}
.recipe-view .brew-spec-card{padding:16px}
.recipe-view .brew-specs .spec-label{margin-bottom:8px}
.recipe-view .brew-specs .spec-detail{margin-top:12px;padding-top:12px}
.recipe-view .finale-actions{margin-top:16px}
@media(max-width:600px){.recipe-view .recipe-finale{padding:16px}.recipe-variant-grid{width:100%}.recipe-variant{flex:1 1 160px;padding-inline:12px}.recipe-choice-label>span{width:100%}}
.pro-fields>.save-kit-button{margin-top:var(--space-6)}
.pro-fields>.origin-first{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:767px){.pro-fields>.origin-first{grid-template-columns:1fr}}
.cup-section-nav{display:flex;flex-wrap:wrap;gap:var(--space-4);border-bottom:1px solid var(--line);padding-bottom:var(--space-4);margin-bottom:var(--space-6)}
.cup-record,.cup-evolution{border-top:1px solid var(--line);margin-top:var(--space-8);padding-top:var(--space-8)}
#cup-review,#cup-record,#cup-attempts{scroll-margin-top:var(--space-6)}
@font-face {
  font-family:Gorka;
  src:url('./assets/GorkaSans-Regular.otf') format('opentype');
  font-display:swap}
html {scrollbar-gutter:stable}
:root {
  --type-xs:12px;
  --type-body:16px;
  --type-lead:24px;
  --type-title:36px;
  --type-display:56px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --radius-control:6px;
  --radius-card:10px;
  --paper:#f4f3ed;
  --panel:#ebece4;
  --ink:#26373f;
  --muted:#697477;
  --line:#d5d9d2;
  --accent:#98543e;
  --soft:#e5e8df;
  --white:#fafbf7;
  --serif:Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,.75,.25,1);
  font-family:Gorka,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
* {
  box-sizing:border-box}
body {
  margin:0;
  font-size:var(--type-body);
  line-height:1.5}
small {
  font-size:var(--type-body)}
h1 {
  font-size:var(--type-display)}
h2 {
  font-size:var(--type-title)}
h3 {
  font-size:var(--type-lead)}
h4 {
  font-size:var(--type-body)}
button,input,select,textarea {
  font:inherit;
  color:inherit}
button {
  cursor:pointer}
button:disabled {
  cursor:not-allowed;
  opacity:.4}
button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px}
button {
  border:0;
  background:none}
a {
  color:inherit}
svg {
  display:block}
.icon {
  width:20px;
  height:20px;
  flex:0 0 auto}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-weight:400}
button {
  transition:background .18s,color .18s,transform .2s var(--ease)}
button:not(:disabled):active {
  transform:translateY(1px)}
button:not(:disabled):hover {
  filter:brightness(.97)}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap}
.skip-link {
  position:fixed;
  top:-60px;
  left:20px;
  z-index:100;
  padding:15px;
  background:var(--ink);
  color:white}
.skip-link:focus {
  top:10px}
.eyebrow {
  font-size:var(--type-body);
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted)}
.fine {
  font-size:var(--type-body);
  line-height:1.55;
  color:var(--muted)}
.centered {
  text-align:center}
.wide {
  width:100%}
.site-header {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:0 clamp(20px,4.5vw,76px);
  border-bottom:1px solid var(--line)}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  text-align:left;
  font-size:var(--type-lead);
  letter-spacing:-1px}
.header-brand-group {display:flex;align-items:center;gap:16px;min-width:0}
.site-header .mode-switch {flex-shrink:0;border-radius:999px;background:var(--paper)}
.site-header .mode-switch button {min-height:36px;padding:6px 11px;border-radius:999px}
.site-header .mode-switch button.active {background:var(--ink);color:var(--white);box-shadow:none}
.brand-symbol {
  display:grid;
  place-items:center;
  width:40px;
  height:44px;
  font-family:var(--serif);
  font-size:var(--type-title);
  line-height:1;
  color:var(--accent)}
.brand small {
  display:block;
  margin-top:2px;
  font-size:var(--type-body);
  letter-spacing:.04em;
  color:var(--muted)}
.site-header nav {
  display:flex;
  align-self:stretch;
  gap:30px}
.site-header nav button {
  position:relative;
  padding:0;
  font-size:var(--type-body);
  color:var(--muted)}
.site-header nav button.active {
  color:var(--ink)}
.site-header nav button.active:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--ink)}
.header-end {
  display:flex;
  align-items:center;
  gap:20px}
.concept-tag {
  padding:5px 7px;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:var(--type-xs);
  letter-spacing:.04em;
  color:var(--muted);
  white-space:nowrap}
.scan-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  border:1px solid #bec7bd;
  border-radius:7px;
  padding:10px 14px;
  font-size:var(--type-body);
  white-space:nowrap;
  background:transparent}
.scan-button b {
  font-family:Arial,sans-serif;
  font-size:var(--type-body);
  font-weight:400;
  color:var(--accent)}
.workspace {
  max-width:1550px;
  margin:auto;
  padding:0 clamp(20px,4.5vw,76px) 35px;
  outline:0}
.workspace-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:86px;
  border-bottom:1px solid var(--line)}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--type-body);
  color:var(--muted)}
.breadcrumb .icon {
  width:17px;
  height:17px}
.source-label {
  padding:3px 7px;
  background:var(--soft);
  border-radius:3px;
  font-size:var(--type-body)}
.mode-switch {
  display:flex;
  gap:3px;
  padding:4px;
  background:#e7e9e1;
  border:1px solid var(--line);
  border-radius:8px}
.mode-switch button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:5px 15px;
  border-radius:5px;
  font-size:var(--type-body);
  color:var(--muted)}
.mode-switch button.active {
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 3px #26373f0b}
.mode-switch .icon {
  width:15px;
  height:15px}
.step-nav {
  display:flex;
  align-items:center;
  gap:clamp(16px,4vw,62px);
  min-height:80px;
  margin-bottom:26px}
.step-nav>button {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  font-size:var(--type-body);
  color:var(--muted);
  white-space:nowrap}
.step-nav>button>span:first-child {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:var(--type-body)}
.step-nav>button.current {
  color:var(--ink)}
.step-nav>button.current>span:first-child {
  color:var(--white);
  background:var(--ink);
  border-color:var(--ink)}
.step-nav .complete>span:first-child {
  border-color:var(--ink)}
.step-nav .icon {
  width:14px;
  height:14px}
.step-nav>button.learning-toggle {
  margin-left:auto;
  gap:7px;
  font-size:var(--type-body)}
.step-nav>button.learning-toggle>span {
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  font-size:var(--type-body)}
.split-layout {
  display:grid;
  grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  gap:clamp(42px,7vw,112px);
  align-items:start}
.step-content {
  padding-top:13px;
  min-width:0}
.section-intro>.eyebrow {
  color:var(--accent)}
.section-intro h1 {
  margin:19px 0 22px;
  font-size:var(--type-display);
  line-height:1.01;
  letter-spacing:-.055em}
.section-intro p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.country-choices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
  margin-top:var(--space-6)}
.country-choice {
  position:relative;
  min-height:68px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  padding:var(--space-3);
  text-align:left;
  background:transparent}
.country-choice.selected {
  border-color:var(--ink);
  background:#e9ece4}
.country-code {
  display:block;
  font-size:var(--type-body);
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:var(--space-1)}
.country-choice b {
  font-weight:400;
  font-size:var(--type-body);
  letter-spacing:-.02em}
.selected-check {
  position:absolute;
  top:10px;
  right:9px;
  opacity:0}
.selected-check .icon {
  width:14px;
  height:14px}
.country-choice.selected .selected-check {
  opacity:1}
.field {
  display:block;
  margin:18px 0 0}
.field>span {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  font-size:var(--type-body);
  line-height:1.3}
.field em {
  font-size:var(--type-body);
  font-style:normal;
  color:var(--muted);
  margin-left:auto}
.field input,.field select,.field textarea {
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#ffffff40;
  padding:12px 13px;
  font-size:var(--type-body)}
.field select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23697477'/%3E%3C/svg%3E");
  background-position:right 12px center;
  background-repeat:no-repeat;
  background-size:16px;
  padding-right:34px}
.hint {
  display:inline-grid;
  place-items:center;
  flex:none;
  width:16px;
  height:16px;
  padding:0;
  border:1px solid #b9c2ba;
  border-radius:50%;
  font-size:var(--type-body);
  color:var(--muted)}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:25px 0 12px;
  font-size:var(--type-body)}
.section-label>span+span {
  font-size:var(--type-body);
  color:var(--muted)}
.chips {
  display:flex;
  gap:7px;
  flex-wrap:wrap}
.chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:var(--type-body);
  line-height:1.1}
.chip.selected {
  color:var(--ink);
  border-color:var(--ink);
  background:var(--soft)}
.chip small {
  display:block}
.chip .icon {
  width:14px;
  height:14px}
.mini-lesson {
  display:flex;
  gap:14px;
  align-items:start;
  padding:17px 0 8px}
.mini-lesson b {
  font-weight:400;
  font-size:var(--type-body)}
.mini-lesson p {
  margin-top:6px;
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.process-art {
  display:flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  margin-top:5px}
.process-art>span {
  font-size:var(--type-body);
  color:#8a918d}
.process-art .icon {
  width:19px;
  height:19px;
  color:#9b8c66}
.cherry {
  width:15px;
  height:18px;
  border:1px solid var(--accent);
  border-radius:50%;
  transform:rotate(20deg);
  background:#98543e12}
.bean {
  width:9px;
  height:13px;
  border:1px solid #89917e;
  border-radius:50%;
  transform:rotate(20deg)}
.natural .bean {
  background:#98543e35;
  border-color:var(--accent)}
.honey .bean {
  border-width:3px;
  border-color:#c8b689}
.inline-scan {
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:20px;
  margin-top:15px;
  border-top:1px solid var(--line)}
.inline-scan p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.inline-scan p span {
  font-size:var(--type-body)}
.knowledge-panel {
  position:relative;
  border:1px solid #d6dbd1;
  border-radius:10px;
  overflow:hidden;
  background:var(--panel);
  min-width:0;
  animation:card-in .45s var(--ease)}
.atlas-meta {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:21px 25px 0;
  font-size:var(--type-body);
  letter-spacing:.1em;
  color:#78857d}
.map-heading {
  padding:30px 30px 0}
.map-heading h2 {
  font-family:var(--serif);
  font-size:var(--type-display);
  letter-spacing:-.06em;
  font-weight:400;
  line-height:1.05}
.map-heading>span {
  display:block;
  margin-top:9px;
  font-size:var(--type-body);
  color:var(--muted)}
.map-stage {
  position:relative;
  padding:10px 12px 17px}
.country-map {
  width:100%;
  height:auto;
  color:#687c6b}
.country-fill {
  animation:outline-in 1s var(--ease)}
.has-region .country-fill {
  opacity:.55}
.map-compass text {
  font:var(--type-body) Gorka,sans-serif;
  text-anchor:middle;
  fill:currentColor}
.map-compass path {
  fill:none;
  stroke:currentColor;
  stroke-width:1}
.region-highlight {
  fill:#65795f;
  stroke:#f4f3ed;
  stroke-width:.6;
  animation:card-in .5s var(--ease)}
.region-inset {
  fill:#7a8c71;
  stroke:#f4f3ed;
  stroke-width:.5}
.region-inset-bg {
  fill:#e3e7dc;
  stroke:#c5cec1;
  stroke-width:1}
.map-caption {
  display:block;
  margin:0 16px;
  text-align:center;
  font-size:var(--type-body);
  color:var(--muted);
  letter-spacing:.03em}
.story-content {
  padding:25px 30px 20px;
  border-top:1px solid #d2d8cc;
  background:#f4f5ed78}
.story-title {
  display:flex;
  align-items:start;
  gap:10px}
.story-title .icon {
  width:17px;
  height:17px;
  margin-top:3px;
  color:#819079}
.story-title h3 {
  font-size:var(--type-lead);
  line-height:1.25;
  letter-spacing:-.03em}
.story-content>p {
  margin-top:12px;
  font-size:var(--type-body);
  line-height:1.58;
  color:#63716a}
.flavor-notes {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px}
.flavor-notes span {
  padding:5px 8px;
  font-size:var(--type-body);
  border:1px solid #cbd3c4;
  border-radius:3px;
  color:#61735d}
.story-details {
  margin-top:20px;
  border-top:1px solid #d4dace;
  padding-top:14px}
.story-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  font-size:var(--type-body);
  list-style:none}
.story-details summary::-webkit-details-marker {
  display:none}
.story-details summary .icon {
  width:15px;
  height:15px}
.story-details[open] summary .icon {
  transform:rotate(45deg)}
.story-details p {
  margin-top:14px;
  font-size:var(--type-body);
  line-height:1.55;
  color:var(--muted)}
.story-details .fine {
  font-size:var(--type-body)}
.source-link {
  display:inline-block;
  font-size:var(--type-body);
  margin:15px 16px 0 0;
  color:#627566;
  text-decoration-color:#a7b49e;
  text-underline-offset:4px}
.unknown-origin .icon {
  width:160px;
  height:160px;
  margin:60px auto;
  color:#9fae9c}
.quiet-knowledge {
  padding:30px}
.quiet-knowledge h2 {
  font-size:var(--type-title)}
.quiet-knowledge p {
  margin:16px 0;
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.calm-panel {
  min-height:500px;
  padding:40px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px}
.calm-panel h2 {
  font-size:var(--type-title);
  margin:30px 0 20px}
.calm-panel p {
  font-size:var(--type-body);
  color:var(--muted);
  line-height:1.5}
.calm-panel>.icon {
  width:180px;
  height:180px;
  margin:50px auto;
  color:#8a9885}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:49px;
  padding:13px 20px;
  border-radius:7px;
  font-size:var(--type-body);
  line-height:1.3}
.button.primary {
  color:#f9f8f1;
  background:var(--ink);
  border:1px solid var(--ink)}
.button.secondary {
  border:1px solid #b6c0b5;
  background:transparent}
.button .icon {
  width:17px;
  height:17px}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:5px 0;
  font-size:var(--type-body)}
.text-button:hover {
  text-decoration:underline;
  text-underline-offset:4px}
.journey-footer {
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:36px;
  padding:21px 0;
  border-top:1px solid var(--line);
  background:var(--paper)}
.journey-footer>div {
  display:flex;
  align-items:center;
  gap:25px}
.footer-fact {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--type-body);
  color:var(--muted)}
.footer-fact .icon {
  width:16px;
  height:16px}
.footer-summary {
  font-size:var(--type-body);
  color:var(--muted)}
.site-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  max-width:1550px;
  margin:0 auto;
  padding:18px clamp(20px,4.5vw,76px) 25px;
  color:#818c88;
  font-size:var(--type-body)}
.brewer-drawing {
  width:100%;
  height:auto;
  color:#627464;
  padding:10px 15px}
.art-glass {
  fill:#f6f8f133}
.art-coffee {
  fill:#9a866866}
.svg-caption {
  font:var(--type-body) Gorka,Arial,sans-serif;
  fill:currentColor;
  stroke:none;
  letter-spacing:2px}
.brewer-choices {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:30px 0 20px}
.brewer-choice {
  padding:5px 6px 12px;
  min-height:106px;
  border:1px solid var(--line);
  border-radius:7px}
.brewer-choice.selected {
  border-color:var(--ink);
  background:var(--soft)}
.brewer-choice .brewer-drawing {
  padding:0;
  transform:scale(1.23)}
.brewer-choice span {
  display:block;
  font-size:var(--type-body);
  line-height:1.2;
  min-height:24px}
.fields-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:16px}
.setup-details {
  margin:24px 0;
  border-block:1px solid var(--line);
  padding:16px 0}
.setup-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  font-size:var(--type-body);
  list-style:none}
.setup-details summary::-webkit-details-marker {
  display:none}
.setup-details .icon {
  width:14px;
  height:14px}
.setup-details[open] {
  padding-bottom:22px}
.save-profile-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:end;
  margin-top:12px}
.save-profile-row .field {
  margin:0}
.save-profile-row .button {
  gap:7px;
  padding-inline:12px;
  font-size:var(--type-body)}
.save-profile-row+.fine {
  margin-top:13px}
.profile-picker {
  margin:23px 0}
.profile-picker>span {
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:var(--type-body)}
.taste-choices {
  display:grid;
  gap:9px;
  margin-top:30px}
.taste-choice {
  display:flex;
  align-items:center;
  gap:18px;
  min-height:85px;
  text-align:left;
  padding:15px 19px;
  border:1px solid var(--line);
  border-radius:7px}
.taste-choice.selected {
  border-color:var(--ink);
  background:var(--soft)}
.taste-choice b {
  display:block;
  font-weight:400;
  font-size:var(--type-lead)}
.taste-choice small {
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:var(--type-body)}
.taste-choice i {
  margin-left:auto}
.taste-symbol {
  width:29px;
  height:29px;
  border:1px solid #819779;
  border-radius:50%;
  position:relative;
  flex:none}
.taste-0:after {
  content:'';
  position:absolute;
  inset:-5px;
  border:1px dashed #9b7760;
  border-radius:50%}
.taste-1 {
  background:linear-gradient(90deg,#8b967780 50%,transparent 50%)}
.taste-2 {
  border:6px solid #84906e99}
.pro-heading,.pro-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:30px}
.pro-heading {
  align-items:center;
  margin:32px 0 35px}
.pro-heading>.scan-button {
  width:100%;
  min-width:0;
  min-height:48px;
  justify-content:center}
.pro-heading h1 {
  font-size:var(--type-display);
  letter-spacing:-.045em;
  line-height:1.08;
  margin:0}
.pro-heading p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.pro-layout {
  align-items:start}
.pro-sections {
  min-width:0}
.pro-section {
  border:1px solid var(--line);
  border-radius:9px;
  background:#f9faf550;
  margin-bottom:12px}
.pro-section>summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:15px;
  min-height:76px;
  padding:20px 25px;
  cursor:pointer}
.pro-section>summary::-webkit-details-marker {
  display:none}
.pro-section>summary>span {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:var(--type-lead);
  letter-spacing:-.02em}
.pro-section>summary i {
  font-size:var(--type-body);
  font-style:normal;
  color:var(--muted)}
.pro-section>summary small {
  margin-left:auto;
  color:var(--muted);
  font-size:var(--type-body);
  max-width:37%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.pro-section>summary .icon {
  width:15px;
  height:15px}
.pro-section[open]>summary {
  border-bottom:1px solid var(--line)}
.pro-fields {
  padding:0 25px 25px}
.pro-fields .origin-first {
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.water-default-note {
  margin:4px 0 18px;
  max-width:600px}
.freshness-date-field>span {
  justify-content:space-between}
.field-inline-action {
  padding:0;
  color:var(--muted);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px}
.pro-preview {
  position:sticky;
  top:25px;
  padding:25px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px}
.pro-preview>.brewer-drawing {
  height:135px;
  margin:15px 0}
.pro-preview h2 {
  font-size:var(--type-lead);
  letter-spacing:-.04em}
.pro-preview>p {
  margin-top:8px;
  font-size:var(--type-body);
  color:var(--muted)}
.metric-list {
  margin:25px 0}
.metric-list div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:14px 0;
  border-top:1px solid #cdd5c7}
.metric-list dt {
  font-size:var(--type-body);
  color:var(--muted)}
.metric-list dd {
  margin:0;
  font-size:var(--type-body)}
.pro-note {
  display:flex;
  gap:9px;
  align-items:start;
  margin-bottom:22px;
  padding:13px;
  border:1px solid #d0d6c8;
  border-radius:4px;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5}
.pro-note .icon {
  width:14px;
  height:14px}
.pro-preview>.text-button {
  margin-top:7px;
  font-size:var(--type-body)}
.result-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:35px 0 50px}
.recipe-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:60px;
  align-items:start}
.recipe-layout h1 {
  max-width:14ch;
  margin:20px 0;
  font-size:var(--type-display);
  letter-spacing:-.06em;
  line-height:1.05}
.result-lead {
  font-size:var(--type-body);
  color:var(--muted)}
.result-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin:35px 0 25px;
  padding-block:26px;
  border-block:1px solid var(--line)}
.result-stats>div {
  display:flex;
  flex-direction:column;
  gap:8px}
.result-stats b {
  font-size:var(--type-title);
  font-weight:400;
  letter-spacing:-.045em}
.result-stats b small {
  font-size:var(--type-body);
  font-weight:400;
  margin-left:4px}
.result-stats span {
  font-size:var(--type-body);
  color:var(--muted)}
.recipe-context {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:var(--type-body)}
.recipe-context small {
  display:block;
  margin-top:7px;
  font-size:var(--type-body);
  color:var(--muted)}
.recipe-context .text-button {
  margin-left:auto;
  font-size:var(--type-body)}
.pour-list {
  list-style:none;
  padding:0;
  margin:25px 0}
.pour-list li {
  display:grid;
  grid-template-columns:45px 1fr 65px;
  gap:18px;
  padding:25px 0;
  border-bottom:1px solid var(--line)}
.pour-list time {
  font-size:var(--type-body);
  color:var(--muted);
  padding-top:5px}
.pour-list h3 {
  font-size:var(--type-lead);
  letter-spacing:-.03em}
.pour-list p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted);
  margin-top:8px}
.pour-list li>b {
  font-weight:400;
  font-size:var(--type-lead);
  text-align:right;
  padding-top:3px}
.recipe-action-card {
  position:sticky;
  top:30px;
  padding:25px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel)}
.recipe-action-card>.brewer-drawing {
  height:230px}
.recipe-action-card h2 {
  font-family:var(--serif);
  font-size:var(--type-title);
  letter-spacing:-.04em}
.recipe-action-card>p {
  font-size:var(--type-body);
  line-height:1.5;
  margin:14px 0 25px;
  color:var(--muted)}
.recipe-action-card>.button {
  margin-bottom:10px;
  font-size:var(--type-body)}
.recipe-tip {
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:20px}
.recipe-tip>span {
  font-size:var(--type-body);
  color:var(--accent)}
.recipe-tip p {
  font-size:var(--type-body);
  line-height:1.5;
  margin-top:10px;
  color:var(--muted)}
.unsupported-note {
  margin-top:30px;
  padding:25px;
  border:1px solid var(--line);
  border-radius:8px}
.unsupported-note p {
  margin:15px 0;
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.live-shell {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  padding:var(--space-8);
  color:var(--ink)}
.live-shell>header,.live-shell>footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:25px 5vw}
.live-shell>header {
  border-bottom:1px solid var(--line);
  min-height:85px}
.live-shell>header>span {
  font-size:var(--type-body);
  color:var(--muted)}
.live-shell .eyebrow {
  color:var(--muted)}
.live-body {
  display:flex;
  align-items:center;
  flex-direction:column;
  min-height:0;
  padding:35px 25px;
  text-align:center;
  justify-content:center}
.live-step-dots {
  display:flex;
  gap:8px;
  margin-bottom:25px}
.live-step-dots span {
  width:32px;
  height:3px;
  background:var(--line)}
.live-step-dots .active {
  background:var(--ink)}
.live-body h1 {
  font-size:var(--type-title);
  letter-spacing:-.05em;
  line-height:1.06;
  margin:20px 0}
.live-body>p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted);
  max-width:500px}
.live-target {
  display:flex;
  align-items:end;
  justify-content:center;
  gap:16px;
  margin:35px 0 30px}
.live-target>b {
  font-size:var(--type-display);
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.9}
.live-target>span {
  text-align:left;
  padding-bottom:6px;
  font-size:var(--type-lead)}
.live-target small {
  display:block;
  font-size:var(--type-body);
  margin-top:5px;
  color:var(--muted)}
.live-timer {
  display:flex;
  align-items:center;
  gap:15px;
  justify-content:center;
  min-width:185px;
  min-height:62px;
  padding:15px 25px;
  border:1px solid #b7c2b852;
  border-radius:100px;
  font-size:var(--type-lead);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.live-body .timer-hint {
  font-size:var(--type-body);
  margin-top:18px;
  color:var(--muted)}
.live-shell>footer {
  border-top:1px solid var(--line)}
.live-shell>footer .button {
  color:var(--white);
  background:var(--ink);
  border-color:var(--ink)}
.live-shell.is-paused .live-timer {background:var(--ink);border-color:var(--ink);color:var(--white);min-height:68px;box-shadow:0 6px 20px #26373f18}
.live-shell.is-paused .live-timer:hover {background:var(--accent);border-color:var(--accent)}
.live-timer:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
.live-shell.is-paused>footer .button {background:transparent;color:var(--ink);border-color:var(--line)}
.live-shell.is-paused>footer .button:hover {background:var(--soft)}
.timer-action-label {font-size:var(--type-body)}
.finish-art>.icon {
  width:150px;
  height:150px;
  stroke-width:.65;
  margin:30px;
  color:var(--muted)}
.feedback-screen {
  max-width:630px;
  margin:75px auto}
.feedback-screen h1 {
  font-size:var(--type-display);
  letter-spacing:-.06em;
  margin:25px 0 18px}
.feedback-screen>p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.feedback-options {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:32px 0}
.feedback-advice {
  display:flex;
  align-items:start;
  gap:12px;
  padding:20px;
  background:var(--panel);
  border-radius:6px;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5}
.feedback-advice .icon {
  color:#7c8e6c}
.feedback-screen textarea {
  resize:vertical;
  min-height:110px}
.feedback-screen>.button {
  margin-top:25px}
.feedback-screen>.fine {
  font-size:var(--type-body);
  margin-top:15px}
.home-heading {
  padding:65px 0 40px}
.home-heading h1 {
  font-size:var(--type-display);
  letter-spacing:-.06em;
  line-height:1.02;
  margin:20px 0}
.home-heading p {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted);
  max-width:620px}
.home-cards {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:15px}
.home-cards article {
  position:relative;
  padding:30px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  min-height:340px}
.repeat-card {
  background:var(--panel)}
.home-cards h2 {
  position:relative;
  z-index:1;
  font-size:var(--type-display);
  letter-spacing:-.05em;
  line-height:1.05;
  max-width:13ch;
  margin:28px 0 20px}
.home-cards p {
  position:relative;
  z-index:1;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5;
  max-width:34ch}
.home-cards .button {
  position:relative;
  margin-top:28px;
  z-index:1}
.home-cards .text-button {
  position:relative;
  margin-left:15px;
  z-index:1;
  font-size:var(--type-body)}
.home-cards .scan-button {
  display:flex;
  margin-top:14px;
  border:0;
  padding:0;
  justify-content:start;
  font-size:var(--type-body);
  min-height:30px}
.repeat-graphic {
  position:absolute;
  width:55%;
  bottom:40px;
  right:-14%;
  opacity:.25;
  pointer-events:none}
.home-bottom {
  display:flex;
  align-items:center;
  gap:30px;
  justify-content:space-between;
  margin-top:28px;
  padding:28px 0;
  border-block:1px solid var(--line)}
.home-bottom>div {
  display:grid;
  grid-template-columns:25px 1fr;
  gap:8px 12px}
.home-bottom h3 {
  font-size:var(--type-body)}
.home-bottom p {
  grid-column:2;
  font-size:var(--type-body);
  color:var(--muted)}
.home-bottom .text-button {
  white-space:nowrap}
.atlas-layout {
  margin-top:45px}
.atlas-region-list {
  border-top:1px solid var(--line)}
.atlas-region {
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
  width:100%;
  text-align:left;
  padding:18px 8px;
  border-bottom:1px solid var(--line);
  font-size:var(--type-body)}
.atlas-region>small {
  grid-row:2;
  font-size:var(--type-body);
  color:var(--muted)}
.atlas-region>.icon {
  grid-row:1/3;
  grid-column:2;
  width:16px;
  height:16px;
  align-self:center}
.atlas-region.selected {
  color:var(--accent)}
.atlas-invitation {
  margin-top:35px}
.atlas-invitation p {
  font-size:var(--type-body);
  color:var(--muted);
  margin-bottom:15px}
.page-heading {
  padding:60px 0 30px}
.page-heading h1 {
  font-size:var(--type-display);
  letter-spacing:-.06em;
  margin:15px 0 20px}
.page-heading p {
  color:var(--muted);
  font-size:var(--type-body)}
.kit-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin:10px 0 50px}
.kit-editor>.button {
  margin-top:28px}
.kit-editor>.fine {
  margin-top:17px}
.history-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:20px}
.history-card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f9faf660}
.history-meta {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:var(--type-body);
  gap:15px}
.history-card h2 {
  font-size:var(--type-title);
  letter-spacing:-.04em;
  margin:27px 0 15px}
.history-card p {
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5}
.history-card blockquote {
  margin:20px 0;
  padding-left:15px;
  border-left:2px solid #a8b69d;
  font-family:var(--serif);
  font-size:var(--type-body);
  line-height:1.4;
  color:var(--muted)}
.history-card>div:last-child {
  display:flex;
  gap:20px;
  margin-top:30px}
.empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:70px 20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  margin-top:25px}
.empty-state>.icon {
  width:70px;
  height:70px;
  stroke-width:1;
  color:#8b9b7f}
.empty-state h2 {
  font-size:var(--type-lead);
  margin:30px 0 15px}
.empty-state p {
  max-width:380px;
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted);
  margin-bottom:30px}
.modal {
  position:fixed;
  max-width:calc(100vw - 28px);
  width:560px;
  max-height:calc(100svh - 40px);
  padding:36px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 30px 100px #1e303235;
  overscroll-behavior:contain;
  overflow:auto}
.modal::backdrop {
  background:#23383d66;
  backdrop-filter:blur(4px)}
.modal-close {
  position:absolute;
  top:17px;
  right:17px;
  width:36px;
  height:36px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper)}
.modal h2 {
  font-size:var(--type-title);
  letter-spacing:-.05em;
  line-height:1.02;
  margin:18px 0}
.modal p {
  font-size:var(--type-body);
  line-height:1.55;
  color:var(--muted)}
.modal>.button {
  margin-top:24px}
.modal>.fine {
  font-size:var(--type-body);
  margin-top:15px}
.scan-dialog-intro {
  padding-top:5px}
.scan-dialog-intro>.eyebrow {
  color:var(--accent)}
.scan-hero-icon {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:1px solid #c6d0bd;
  border-radius:18px;
  margin:28px 0 18px;
  background:var(--panel)}
.scan-hero-icon>.icon {
  width:29px;
  height:29px;
  color:#697e59}
.scan-dialog-intro h2 {
  font-size:var(--type-display)}
.scan-benefits {
  padding:0;
  list-style:none;
  margin:28px 0}
.scan-benefits li {
  display:flex;
  gap:16px;
  padding:17px 0;
  border-top:1px solid var(--line)}
.scan-benefits li>b {
  color:var(--muted);
  font-size:var(--type-body);
  font-weight:400;
  margin-top:5px}
.scan-benefits h3 {
  font-size:var(--type-body)}
.scan-benefits p {
  font-size:var(--type-body);
  margin-top:7px}
.scan-footnote {
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.demo-modes {
  display:flex;
  gap:7px;
  margin:20px 0}
.demo-modes .chip {
  font-size:var(--type-body)}
.scan-match {
  display:flex;
  align-items:start;
  gap:13px;
  padding:17px;
  background:#e3e9dd;
  border:1px solid #cbd7c3;
  border-radius:6px;
  margin:20px 0}
.scan-match>b {
  font-weight:400;
  font-size:var(--type-body)}
.scan-match p {
  margin-top:5px;
  font-size:var(--type-body)}
.scan-match.unmatched {
  background:#ede5d6;
  border-color:#dfd0b3}
.scan-data {
  border-top:1px solid var(--line)}
.scan-data>div {
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 15px;
  padding:16px 0;
  border-bottom:1px solid var(--line)}
.scan-data span {
  font-size:var(--type-body);
  color:var(--muted)}
.scan-data b {
  grid-column:1;
  font-size:var(--type-body);
  font-weight:400}
.scan-data small {
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font-size:var(--type-body);
  color:var(--muted)}
#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  z-index:50;
  max-width:calc(100vw - 30px);
  width:max-content;
  transform:translate(-50%,15px);
  padding:14px 20px;
  border:1px solid #50645c;
  border-radius:8px;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--type-body);
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 8px 30px #26373f18}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)}
@keyframes card-in {
  from {
  opacity:.5;
  transform:translateY(6px)}
to {
  opacity:1;
  transform:translateY(0)}
}
@keyframes outline-in {
  from {
  opacity:.2;
  stroke-dasharray:2 2}
to {
  opacity:1;
  stroke-dasharray:1 0}
}
@media(min-width:1500px) {
  .knowledge-panel .map-stage {
  padding-inline:35px}
.story-content {
  padding-inline:35px}
.split-layout {
  grid-template-columns:.9fr 1.1fr}
}
@media(max-width:1100px) {
  .site-header {
  gap:20px;
  padding-inline:25px}
.site-header nav {
  gap:20px}
.concept-tag {
  display:none}
.workspace {
  padding-inline:28px}
.split-layout {
  gap:36px;
  grid-template-columns:1fr 1.05fr}
.section-intro h1 {
  font-size:var(--type-display)}
.country-choice {
  padding:12px 9px}
.country-choice b {
  font-size:var(--type-body)}
.inline-scan {
  flex-wrap:wrap;
  gap:10px}
.inline-scan p br {
  display:none}
.map-heading {
  padding:24px 24px 0}
.story-content {
  padding:22px}
.story-title h3 {
  font-size:var(--type-lead)}
.pro-heading,.pro-layout {
  grid-template-columns:minmax(0,1fr) 285px;
  gap:18px}
.pro-fields {
  padding-inline:20px}
.pro-preview {
  padding:20px}
.pro-section>summary {
  padding:18px 20px}
.pro-section>summary small {
  display:none}
.recipe-layout {
  grid-template-columns:minmax(0,1fr) 300px;
  gap:30px}
.result-stats b {
  font-size:var(--type-title)}
.recipe-action-card {
  padding:20px}
.kit-layout {
  gap:35px}
.site-footer {
  padding-inline:28px}
}
@media(max-width:800px) {
  .site-header {
  height:auto;
  min-height:100px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:0;
  padding:14px 20px 0}
.brand {
  font-size:var(--type-lead)}
.brand-symbol {
  width:30px;
  height:37px;
  font-size:var(--type-title)}
.brand small {
  font-size:var(--type-body)}
.header-end {
  grid-column:2;
  grid-row:1}
.site-header nav {
  grid-row:2;
  grid-column:1/-1;
  justify-content:space-between;
  gap:15px;
  min-height:52px;
  margin-top:10px}
.site-header nav button {
  font-size:var(--type-body)}
.header-end .scan-button {
  min-height:36px;
  padding:7px 10px;
  font-size:var(--type-body)}
.header-end .icon {
  width:16px;
  height:16px}
.workspace {
  padding-inline:20px;
  padding-bottom:20px}
.workspace-bar {
  min-height:78px;
  gap:10px}
.mode-switch button {
  padding:5px 12px;
  font-size:var(--type-body)}
.breadcrumb {
  font-size:var(--type-body)}
.breadcrumb>.icon {
  display:none}
.source-label {
  display:none}
.step-nav {
  gap:20px;
  margin-bottom:23px;
  flex-wrap:wrap;
  min-height:82px;
  padding-top:19px;
  row-gap:2px}
.step-nav>button {
  font-size:var(--type-body);
  gap:7px}
.step-nav>button>span:first-child {
  width:23px;
  height:23px;
  font-size:var(--type-body)}
.step-nav>button.learning-toggle {
  margin-left:0;
  width:100%;
  padding:8px 0;
  justify-content:flex-end;
  font-size:var(--type-body)}
.step-nav>button.learning-toggle>span {
  width:auto;
  font-size:var(--type-body)}
.split-layout {
  grid-template-columns:1fr;
  gap:30px}
.step-content {
  padding-top:0}
.section-intro h1 {
  font-size:var(--type-display);
  line-height:1.04;
  margin:16px 0 18px}
.section-intro p {
  font-size:var(--type-body)}
.section-intro br {
  display:none}
.country-choices {
  margin-top:26px}
.country-choice {
  min-height:79px;
  padding:12px}
.country-choice b {
  font-size:var(--type-body)}
.country-code {
  margin-bottom:9px}
.knowledge-panel {
  border-radius:9px}
.map-heading h2 {
  font-size:var(--type-title)}
.map-heading {
  padding-top:24px}
.map-stage {
  max-width:620px;
  width:100%;
  margin:auto}
.atlas-meta {
  padding:18px 22px 0;
  font-size:var(--type-body)}
.story-content>p {
  font-size:var(--type-body)}
.story-title h3 {
  font-size:var(--type-lead)}
.mini-lesson {
  padding-top:16px}
.mini-lesson p {
  font-size:var(--type-body)}
.inline-scan {
  flex-wrap:nowrap;
  gap:12px;
  margin-top:8px}
.inline-scan .scan-button {
  font-size:var(--type-body);
  padding-inline:9px}
.inline-scan p {
  font-size:var(--type-body)}
.inline-scan p span {
  display:none}
.journey-footer {
  margin-top:27px;
  padding:15px 0 calc(15px + env(safe-area-inset-bottom));
  gap:12px}
.journey-footer .footer-fact,.footer-summary {
  display:none}
.journey-footer>div:last-child {
  margin-left:auto;
  flex:1}
.journey-footer .button {
  width:100%;
  min-height:52px;
  padding-inline:18px}
.journey-footer>div:first-child:empty {
  display:none}
.journey-footer>div:first-child {
  gap:0}
.journey-footer>div:first-child>.text-button {
  font-size:var(--type-body);
  padding-right:10px}
.site-footer {
  padding:12px 20px 22px;
  font-size:var(--type-body);
  flex-direction:column;
  gap:8px}
.brewer-choices {
  margin-top:25px}
.brewer-choice {
  min-height:108px;
  padding:8px 6px 10px}
.brewer-choice span {
  font-size:var(--type-body)}
.brewer-panel>.brewer-drawing {
  max-height:300px}
.save-profile-row {
  grid-template-columns:1fr auto}
.save-profile-row .button {
  font-size:var(--type-body)}
.taste-choice {
  min-height:76px}
.pro-heading {
  margin:24px 0 25px}
.pro-heading h1 {
  font-size:var(--type-title);
  line-height:1.02}
.pro-heading>.scan-button {
  margin-top:0}
.pro-heading,.pro-layout {
  grid-template-columns:minmax(0,1fr);
  gap:15px}
.pro-preview {
  position:static}
.pro-preview>.brewer-drawing {
  display:none}
.pro-preview h2 {
  margin-top:17px}
.pro-preview .metric-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 30px}
.pro-note {
  font-size:var(--type-body)}
.pro-section>summary {
  padding:18px;
  min-height:70px}
.pro-section>summary>.icon {
  margin-left:auto}
.pro-fields {
  padding:0 18px 22px}
.pro-section>summary>span {
  font-size:var(--type-body);
  gap:13px}
.pro-section .field>span {
  font-size:var(--type-body)}
.pro-section .field em {
  font-size:var(--type-body)}
.fields-grid {
  gap:0 12px}
.field input,.field select,.field textarea {
  font-size:var(--type-body);
  min-height:48px}
.field>span {
  font-size:var(--type-body)}
.fields-grid .field>span {
  font-size:var(--type-body)}
.result-top {
  margin:25px 0 35px;
  flex-wrap:wrap}
.result-top>.eyebrow {
  order:3;
  width:100%;
  font-size:var(--type-body)}
.result-top>.scan-button {
  font-size:var(--type-body);
  min-height:38px}
.recipe-layout {
  grid-template-columns:1fr;
  gap:30px}
.recipe-layout h1 {
  font-size:var(--type-display)}
.result-stats {
  gap:9px;
  padding:22px 0;
  margin-top:25px}
.result-stats b {
  font-size:var(--type-title)}
.result-stats b small {
  font-size:var(--type-body)}
.result-stats span {
  font-size:var(--type-body)}
.recipe-context {
  font-size:var(--type-body)}
.recipe-context small {
  font-size:var(--type-body)}
.pour-list li {
  grid-template-columns:35px 1fr 50px;
  gap:12px;
  padding:20px 0}
.pour-list time {
  font-size:var(--type-body)}
.pour-list h3 {
  font-size:var(--type-lead)}
.pour-list p {
  font-size:var(--type-body)}
.pour-list li>b {
  font-size:var(--type-lead)}
.recipe-action-card {
  position:static;
  padding:25px}
.recipe-action-card>.brewer-drawing {
  height:180px}
.recipe-action-card .button {
  min-height:52px}
.live-shell>header {
  padding:16px 20px;
  gap:10px;
  min-height:72px}
.live-shell>header>span {
  font-size:var(--type-body);
  max-width:180px;
  text-align:right}
.live-shell>header>.eyebrow {
  display:none}
.live-shell .text-button {
  font-size:var(--type-body)}
.live-body {
  padding:28px 22px;
  min-height:0}
.live-body h1 {
  font-size:var(--type-display)}
.live-body>p {
  font-size:var(--type-body)}
.live-target {
  margin:24px 0}
.live-target>b {
  font-size:var(--type-display)}
.live-target small {
  font-size:var(--type-body)}
.live-body .timer-hint {
  font-size:var(--type-body)}
.live-shell>footer {
  padding:17px 20px calc(17px + env(safe-area-inset-bottom));
  gap:20px}
.live-shell>footer>.button {
  font-size:var(--type-body);
  gap:13px}
.feedback-screen {
  margin:50px auto}
.feedback-screen h1 {
  font-size:var(--type-display)}
.feedback-screen>p {
  font-size:var(--type-body)}
.feedback-options {
  gap:7px}
.feedback-options .chip {
  font-size:var(--type-body)}
.home-heading {
  padding:42px 0 30px}
.home-heading h1 {
  font-size:var(--type-display)}
.home-cards {
  grid-template-columns:1fr;
  gap:13px}
.home-cards article {
  padding:25px;
  min-height:320px}
.home-cards h2 {
  font-size:var(--type-title);
  max-width:15ch}
.home-cards .text-button {
  margin-left:10px;
  font-size:var(--type-body)}
.home-bottom {
  align-items:start;
  flex-direction:column;
  gap:15px;
  padding:25px 0}
.home-bottom h3 {
  font-size:var(--type-body)}
.home-bottom p {
  font-size:var(--type-body);
  line-height:1.5}
.home-bottom .text-button {
  margin-left:37px}
.atlas-layout {
  margin-top:30px}
.atlas-invitation {
  margin-top:28px}
.page-heading {
  padding:40px 0 30px}
.page-heading h1 {
  font-size:var(--type-display)}
.page-heading p {
  font-size:var(--type-body);
  line-height:1.5}
.kit-layout {
  grid-template-columns:1fr;
  gap:30px;
  margin-top:0}
.kit-editor>.field:first-child {
  margin-top:0}
.history-grid {
  grid-template-columns:1fr;
  gap:12px}
.history-card {
  padding:23px}
.history-card h2 {
  font-size:var(--type-title)}
.empty-state {
  padding:50px 20px}
.empty-state h2 {
  font-size:var(--type-lead)}
.modal {
  padding:28px 22px;
  border-radius:12px;
  max-height:calc(100svh - 24px)}
.modal h2 {
  font-size:var(--type-title)}
.modal-close {
  top:13px;
  right:13px;
  width:32px;
  height:32px;
  padding:7px}
.scan-dialog-intro h2 {
  font-size:var(--type-title)}
.modal>.eyebrow {
  font-size:var(--type-body);
  display:block;
  padding-right:35px}
.scan-dialog-intro>.eyebrow {
  font-size:var(--type-body)}
.scan-hero-icon {
  width:56px;
  height:56px;
  margin-top:25px}
.scan-benefits {
  margin:22px 0}
.scan-data>div {
  gap:5px 8px}
.scan-data b {
  font-size:var(--type-body)}
.scan-data small {
  font-size:var(--type-body)}
#toast {
  font-size:var(--type-body);
  bottom:20px;
  text-align:center}
}
@media(max-width:360px) {
  .workspace {
  padding-inline:15px}
.step-nav {
  column-gap:14px}
.step-nav>button {
  font-size:var(--type-body);
  gap:5px}
.step-nav>button>span:first-child {
  width:20px;
  height:20px}
.section-intro h1 {
  font-size:var(--type-title)}
.country-choice {
  padding:10px 8px}
.country-choice b {
  font-size:var(--type-body)}
.mode-switch button {
  padding-inline:9px}
.breadcrumb {
  font-size:var(--type-body)}
.save-profile-row {
  grid-template-columns:1fr}
.fields-grid {
  grid-template-columns:1fr}
.result-stats b {
  font-size:var(--type-lead)}
.home-cards .text-button {
  margin-left:0;
  display:flex}
.site-header {
  padding-inline:15px}
.header-end .scan-button {
  padding-inline:8px}
.site-header nav {
  gap:12px}
.site-header nav button {
  font-size:var(--type-body)}
}
.coffee-layout {
  row-gap:0}
.coffee-layout>.step-content {
  display:contents}
.coffee-select-block {
  grid-column:1;
  grid-row:1;
  align-self:start;
  padding-top:10px}
.coffee-layout>.knowledge-panel,.coffee-layout>.calm-panel {
  grid-column:2;
  grid-row:1/3}
.coffee-layout .country-map {
  height:260px}
.coffee-layout .story-content {
  padding-top:20px}
.coffee-layout .map-heading {
  padding-top:23px}
.coffee-layout .map-heading h2 {
  font-size:var(--type-title)}
@media(min-width:801px) {
  .site-header {
  height:80px}
.workspace-bar {
  min-height:72px}
.step-nav {
  min-height:72px;
  margin-bottom:17px}
.section-intro h1 {
  font-size:var(--type-display)}
.coffee-layout .country-choices {
  margin-top:27px}
.coffee-layout .story-content>p {
  font-size:var(--type-body)}
.coffee-layout .map-stage {
  padding-top:0}
.coffee-layout .map-caption {
  font-size:var(--type-body)}
.coffee-layout .flavor-notes {
  margin-top:12px}
.coffee-layout .story-details {
  margin-top:16px}
.coffee-layout .section-intro p {
  font-size:var(--type-body)}
}
@media(max-width:800px) {
  .coffee-layout {
  row-gap:24px}
.coffee-select-block {
  padding-top:0;
  grid-column:1;
  grid-row:1}
.coffee-layout>.knowledge-panel,.coffee-layout>.calm-panel {
  grid-column:1;
  grid-row:2}
.coffee-layout .map-heading h2 {
  font-size:var(--type-title)}
.coffee-layout .country-map {
  height:210px}
.coffee-layout .atlas-meta {
  padding-top:15px}
.coffee-layout .map-heading {
  padding-top:18px}
.coffee-layout .story-content {
  padding-top:19px}
.coffee-layout .story-content>p {
  font-size:var(--type-body)}
.coffee-layout .story-title h3 {
  font-size:var(--type-lead)}
}
.recipe-mobile-cta {
  display:none}
@media(max-width:800px) {
  .step-nav {
  min-height:60px;
  padding-top:8px;
  gap:13px;
  margin-bottom:20px;
  flex-wrap:nowrap}
.step-nav>button.learning-toggle {
  width:auto;
  margin-left:auto;
  flex-shrink:0}
.step-nav>button.learning-toggle>span {
  display:none}
.step-nav>button.learning-toggle>.icon {
  width:17px;
  height:17px}
.workspace-bar {
  min-height:68px}
.recipe-view {
  padding-bottom:95px}
.recipe-mobile-cta {
  display:flex;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:5;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);
  border-top:1px solid var(--line)}
.recipe-mobile-cta>span {
  font-size:var(--type-body);
  color:var(--muted)}
.recipe-mobile-cta>.button {
  font-size:var(--type-body);
  gap:10px}
.recipe-action-card .button[data-action="live-start"] {
  display:none}
}
@media(max-width:360px) {
  .step-nav {
  gap:9px}
.step-nav>button {
  font-size:var(--type-body)}
.recipe-mobile-cta>span {
  display:none}
.recipe-mobile-cta>.button {
  width:100%}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

/* V6 components use the existing five-size design system. */
.scan-entry {display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);margin:var(--space-6) 0;background:var(--panel);border-radius:var(--radius-control)}
.scan-entry .scan-button {flex-shrink:0}
.scan-entry p {font-size:var(--type-body);color:var(--muted)}
.scan-entry p span {display:block}
.country-combobox {position:relative;min-width:0}
.country-combobox .field {margin:0}
.country-combobox .field>label {display:flex;align-items:center;min-height:28px;margin-bottom:9px}
.country-search-control {position:relative}
.country-search-control input {padding-right:42px}
.country-search-control input::-webkit-search-cancel-button {display:none}
.country-search-clear {position:absolute;right:7px;top:50%;width:34px;height:34px;transform:translateY(-50%);border-radius:50%;color:var(--muted)}
.country-search-clear:hover {background:var(--soft);color:var(--ink)}
.country-search-menu {position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow-y:auto;padding:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--paper);box-shadow:0 12px 28px #26373f1c}
.country-search-option {display:block;width:100%;padding:9px var(--space-3);border-radius:4px;text-align:left;color:var(--ink)}
.country-search-option:hover,.country-search-option:focus-visible {background:var(--soft)}
.country-search-option[aria-selected="true"] {background:var(--panel)}
.country-search-option.clear-option {color:var(--muted);border-bottom:1px solid var(--line);border-radius:4px 4px 0 0}
.country-search-empty {padding:12px;color:var(--muted)}
.process-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.process-choice {display:flex;align-items:center;min-height:46px;padding:9px var(--space-3);border:1px solid var(--line);border-radius:var(--radius-control);text-align:left;color:var(--ink)}
.process-choice:hover {border-color:var(--muted)}
.process-choice.selected {border-color:var(--ink);background:var(--soft)}
.popular-processes .process-choice {min-height:64px;padding:var(--space-4);background:var(--panel)}
.popular-processes .process-choice.selected {background:var(--soft);border-color:var(--ink)}
.other-processes {margin-top:var(--space-6)}
.other-processes .process-options {display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-2)}
.other-processes .process-choice {min-height:44px;padding:var(--space-2) var(--space-3);color:var(--muted);background:transparent}
.other-processes .process-choice:hover {color:var(--ink)}
.other-processes .process-choice.selected {color:var(--ink);background:var(--soft);border-color:var(--ink)}
.origin-next .button:disabled {background:var(--line);color:var(--muted);cursor:not-allowed}
.coffee-card-slide {min-height:0;animation:coffee-card-in .24s var(--ease)}
.knowledge-slide-hero {min-height:300px;padding:24px 24px 18px;border-bottom:1px solid var(--line);background:transparent}
.knowledge-slide-hero h2 {margin-top:8px;font-size:var(--type-title);line-height:1.1}
.knowledge-slide-hero .process-art {justify-content:center;gap:14px;margin:64px auto 0}
.knowledge-slide-hero .process-illustration {display:block;width:100%;height:180px;margin:var(--space-4) auto 0;color:#627566}
.knowledge-slide-hero .process-art .cherry {width:38px;height:48px}
.knowledge-slide-hero .process-art .bean {width:24px;height:34px}
.knowledge-slide-hero .process-art .icon {width:42px;height:42px}
.knowledge-slide-hero .process-art>span {font-size:var(--type-lead)}
.knowledge-slide-hero .roast-art {display:block;width:170px;height:170px;margin:22px auto 0}
.knowledge-slide-copy {padding:24px}
.knowledge-slide-copy .knowledge-summary {color:var(--accent)}
.knowledge-slide-copy h3 {margin-top:12px;font-size:var(--type-lead);line-height:1.25;font-weight:400}
.knowledge-slide-copy>p:not(.knowledge-summary) {margin-top:8px;color:var(--muted);line-height:1.5}
.knowledge-note {margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.knowledge-note h4 {font-weight:400}
.knowledge-note p {margin-top:5px;color:var(--muted)}
@keyframes coffee-card-in {from {opacity:0;transform:translateX(8px)}to {opacity:1;transform:none}}
.clear-field {margin-top:var(--space-2);color:var(--muted);font-size:var(--type-body)}
.map-boundary-note {margin:var(--space-4) var(--space-6) 0;font-size:var(--type-body);color:var(--muted)}
.map-source {margin:var(--space-4) var(--space-6) var(--space-6);display:inline-block}
.roaster-logo {width:100%;height:100%;object-fit:contain;display:block}
.roaster-monogram:has(.roaster-logo) {padding:var(--space-2);background:var(--white)}
.roaster-label>span:has(.roaster-logo) {background:var(--white);padding:2px}
.pack-preview {width:100%;height:200px;background:var(--panel);border-radius:var(--radius-control);padding:var(--space-4);margin:var(--space-2) 0 var(--space-4);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pack-preview img {height:168px;width:100%;min-width:0;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s var(--ease)}
.pack-preview:hover img {transform:translateY(-4px)}
.manual-catalog-label {font-size:var(--type-body);color:var(--muted);align-self:center;margin-right:var(--space-4)}
.community-status {color:var(--muted);font-size:var(--type-body);max-width:680px;margin:calc(-1 * var(--space-4)) 0 var(--space-6)}
.learning-tabs {display:flex;gap:var(--space-6);border-bottom:1px solid var(--line);margin-bottom:var(--space-8);overflow-x:auto}
.learning-tabs button {padding:var(--space-3) 0;border-bottom:2px solid transparent;white-space:nowrap;color:var(--muted)}
.learning-tabs button.active {border-color:var(--ink);color:var(--ink)}
.learning-overview {display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.experiment-feature {padding:var(--space-8);background:var(--ink);color:var(--paper);border-radius:var(--radius-card)}
.experiment-feature .eyebrow {color:var(--paper);opacity:.7}
.experiment-feature h2 {font-size:var(--type-title);line-height:1.15;margin:var(--space-6) 0 var(--space-4)}
.experiment-feature p {max-width:430px;opacity:.85}
.experiment-feature .button {background:var(--paper);color:var(--ink)}
.ratio-comparison {display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-8) 0}
.ratio-comparison>div {border:1px solid #f4f3ed44;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);position:relative}
.ratio-comparison b {font-size:var(--type-display);font-weight:400;line-height:1.2}
.ratio-comparison small {opacity:.7}
.ratio-comparison>div>span {position:absolute;right:var(--space-3);font-size:var(--type-body);opacity:.7}
.learning-discussions .section-label {margin-top:0}
.discussion-card {border-top:1px solid var(--line);padding:var(--space-6) 0}
.discussion-card h3 {font-size:var(--type-lead);line-height:1.3;margin:var(--space-3) 0}
.discussion-link {padding:0;text-align:left;font:inherit;color:inherit;line-height:inherit}
.discussion-card p {color:var(--muted);margin-bottom:var(--space-4)}
.discussion-list {max-width:860px}
.community-recipes {margin-top:var(--space-12)}
.community-recipes .community-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.community-recipes .post-art {height:130px}
.question-form {max-width:800px;margin-bottom:var(--space-8)}
.question-form h2 {font-size:var(--type-lead);margin-bottom:var(--space-6)}
.question-form .post-buttons {margin-top:var(--space-6)}
.discussion-detail {max-width:780px;margin:var(--space-6) auto var(--space-12)}
.discussion-detail h1 {font-size:var(--type-title);line-height:1.15;margin:var(--space-4) 0 var(--space-6)}
.discussion-context {padding:var(--space-4);background:var(--panel);border-radius:var(--radius-control);margin-bottom:var(--space-6)}
.discussion-text {font-size:var(--type-lead);line-height:1.6;white-space:pre-wrap;margin-bottom:var(--space-6)}
.experiment-layout {display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.experiment-layout h2 {font-size:var(--type-lead);margin-bottom:var(--space-6)}
.experiment-layout .field {margin-bottom:var(--space-4)}
.experiment-layout .fine {margin-top:var(--space-4)}
.experiment-steps {padding-left:var(--space-6)}
.experiment-steps li {padding-left:var(--space-2);margin-bottom:var(--space-4)}
.trial-actions {display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
@media(max-width:800px) {
 .learning-overview,.experiment-layout {grid-template-columns:1fr}
 .community-recipes .community-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .scan-entry {flex-wrap:wrap;gap:var(--space-2)}
}
@media(max-width:520px) {
 .learning-tabs {gap:var(--space-6)}
 .learning-overview {gap:var(--space-6)}
 .experiment-feature {padding:var(--space-6)}
 .ratio-comparison b {font-size:var(--type-title)}
 .community-recipes .community-grid {grid-template-columns:1fr}
 .community-status {margin-top:0}
 .discussion-text {font-size:var(--type-body)}
 .process-options {grid-template-columns:1fr}
 .scan-entry p span {display:none}
}
@media(prefers-reduced-motion:reduce) {.pack-preview img {transition:none}.coffee-card-slide {animation:none}}
.post-detail>*,.publish-layout>* {
  min-width:0}
.profile-settings .text-button {
  display:flex;
  justify-content:flex-start}
.public-discoveries {
  padding:20px 0}
.public-discoveries .country-collection {
  margin-top:15px}
.avatar-button,.avatar-mini {
  border:1px solid var(--line);
  border-radius:50%;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-size:var(--type-lead);
  background:var(--panel);
  flex-shrink:0}
.site-header nav {
  gap:26px}
.header-end {
  gap:15px}
.site-header {
  gap:25px}
.learning-label {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font-size:var(--type-body);
  color:var(--muted)}
.story-open h4 {
  font:inherit;
  font-size:var(--type-body);
  margin:0}
.story-open p {
  margin-top:10px}
.story-open .source-link {
  font-size:var(--type-body)}
.hint {
  width:25px;
  height:25px;
  font-size:var(--type-body)}
.hint-tooltip {
  position:fixed;
  z-index:200;
  max-width:min(320px,calc(100vw - 24px));
  padding:15px 17px;
  border:1px solid #50616a;
  border-radius:8px;
  color:#f6f6ee;
  background:#26373f;
  box-shadow:0 5px 22px #26373f20;
  font-size:var(--type-body);
  line-height:1.5;
  animation:card-in .12s ease}
.inline-explanation {
  font-size:var(--type-body);
  line-height:1.6;
  color:var(--muted);
  margin-top:18px;
  max-width:48ch}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  padding:48px 0 35px}
.section-heading h1 {
  font-size:var(--type-display);
  letter-spacing:-.05em;
  line-height:1.07;
  margin:13px 0 18px}
.section-heading p {
  font-size:var(--type-body);
  line-height:1.55;
  color:var(--muted);
  max-width:58ch}
.section-heading>.button {
  flex-shrink:0;
  margin-bottom:5px}
.back-link {
  margin-top:25px}
.back-link+.section-heading {
  padding-top:25px}
.small-label {
  display:inline-block;
  font-size:var(--type-body);
  color:#627566;
  border:1px solid #c8d2c3;
  padding:6px 9px;
  border-radius:4px;
  line-height:1.4}
.journal-strip {
  display:flex;
  align-items:center;
  gap:60px;
  background:var(--panel);
  padding:25px 32px;
  border:1px solid var(--line);
  border-radius:9px}
.journal-strip>div {
  display:flex;
  align-items:baseline;
  gap:12px}
.journal-strip b {
  font-size:var(--type-title);
  letter-spacing:-.05em;
  font-weight:400}
.journal-strip span {
  font-size:var(--type-body);
  color:var(--muted)}
.journal-strip>.text-button {
  margin-left:auto}
.list-toolbar {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin:30px 0}
.toolbar-actions {
  display:flex;
  gap:22px;
  align-items:center}
.cups-grid,.community-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
.cup-card,.post-card {
  border:1px solid var(--line);
  border-radius:9px;
  padding:24px;
  background:var(--white);
  min-width:0}
.cup-card h2,.post-card h2 {
  font-size:var(--type-lead);
  letter-spacing:-.04em;
  line-height:1.15;
  margin:16px 0 12px;
  overflow-wrap:anywhere}
.cup-card>p,.post-card>p {
  font-size:var(--type-body);
  color:var(--muted);
  line-height:1.5;
  margin-bottom:16px}
.history-meta {
  font-size:var(--type-body);
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted)}
.cup-card-art,.post-art {
  position:relative;
  margin:20px -24px 22px;
  background:#e9ece4;
  border-block:1px solid var(--line)}
.cup-card-art svg,.post-art svg {
  height:165px;
  padding:15px}
.cup-card-open {
  display:block;
  width:calc(100% + 48px);
  padding:0;
  border-inline:0;
  border-radius:0;
  text-align:left;
  cursor:pointer}
.cup-card-title {
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
  cursor:pointer}
.cup-card-title:hover {
  text-decoration:underline;
  text-underline-offset:4px}
.cup-card-open:hover {
  background:var(--soft)}
.cup-card-open:focus-visible,.cup-card-title:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px}
.cup-card-art>span,.post-art>span {
  position:absolute;
  left:20px;
  bottom:15px;
  font-size:var(--type-body);
  color:var(--muted)}
.cup-card blockquote {
  margin:17px 0 0;
  padding-left:12px;
  border-left:2px solid #b6c0b5;
  line-height:1.5;
  color:var(--muted);
  font-size:var(--type-body);
  overflow-wrap:anywhere}
.card-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:22px}
.card-actions>.button {
  font-size:var(--type-body);
  gap:7px;
  padding:10px 14px}
.card-actions>.text-button {
  font-size:var(--type-body)}
.icon-button {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:6px;
  flex-shrink:0}
.icon-button.selected {
  background:var(--panel);
  border-color:var(--ink)}
.privacy-note {
  display:flex;
  align-items:start;
  gap:12px;
  border-top:1px solid var(--line);
  margin:30px 0 12px;
  padding:23px 0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.6}
.privacy-note>.icon {
  width:18px;
  margin-top:2px}
.privacy-note p {
  max-width:90ch}
.cup-detail-grid {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:30px;
  align-items:start}
.detail-panel {
  border:1px solid var(--line);
  border-radius:9px;
  padding:28px;
  margin-bottom:22px;
  background:#fafbf74a;
  min-width:0}
.detail-panel h3 {
  font-size:var(--type-lead);
  letter-spacing:-.035em;
  line-height:1.2;
  margin:14px 0}
.detail-panel>p {
  font-size:var(--type-body);
  line-height:1.65;
  color:var(--muted);
  white-space:pre-line;
  overflow-wrap:anywhere}
.detail-panel>.button {
  margin:20px 0 13px}
.detail-panel>.small-label {
  margin-top:18px}
.detail-panel>.text-button {
  margin-top:12px}
.detail-panel .fine {
  font-size:var(--type-body)}
.detail-panel .metric-list dd {
  text-align:right;
  max-width:60%;
  overflow-wrap:anywhere}
.passport-heading {
  margin:0 0 25px}
.passport-heading h2 {
  font-family:var(--serif);
  font-size:var(--type-title);
  letter-spacing:-.06em;
  margin:12px 0}
.passport-heading>p {
  font-size:var(--type-body);
  color:var(--muted)}
.passport-photos {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:10px;
  margin:20px 0 25px}
.passport-photos.compact {
  grid-template-columns:1fr}
.passport-photos figure {
  margin:0;
  min-width:0}
.passport-photos img {
  width:100%;
  height:205px;
  object-fit:cover;
  border-radius:5px;
  display:block;
  background:var(--panel)}
.passport-photos.compact img {
  height:260px}
.passport-photos figcaption {
  font-size:var(--type-xs);
  line-height:1.5;
  color:var(--muted);
  margin-top:8px}
.passport-photos figcaption a {
  text-underline-offset:3px}
.passport-photos img[hidden] {
  display:none}
.passport-story {
  display:grid;
  grid-template-columns:1fr;
  gap:20px}
.passport-story h3 {
  font-size:var(--type-lead)}
.passport-story p {
  font-size:var(--type-body);
  line-height:1.7;
  color:var(--muted);
  margin-top:12px}
.passport-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:5px 0 15px}
.passport-facts>div {
  border-top:1px solid var(--line);
  padding-top:12px}
.passport-facts dt {
  font-size:var(--type-body);
  color:var(--muted)}
.passport-facts dd {
  font-size:var(--type-body);
  margin:7px 0 0}
.supply-chain {
  list-style:none;
  margin:10px 0 25px;
  padding:0}
.supply-chain li {
  position:relative;
  display:flex;
  gap:20px;
  padding:0 0 24px}
.supply-chain li:not(:last-child):after {
  content:'';
  position:absolute;
  left:15px;
  top:35px;
  bottom:4px;
  width:1px;
  background:var(--line)}
.supply-chain li>span {
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  width:32px;
  height:32px;
  flex-shrink:0;
  font-size:var(--type-body)}
.supply-chain h4 {
  margin:0 0 6px;
  font-size:var(--type-body);
  font-weight:400;
  color:var(--muted)}
.supply-chain p {
  font-size:var(--type-body);
  line-height:1.4}
.supply-chain small {
  display:block;
  font-size:var(--type-body);
  margin-top:7px;
  color:var(--muted)}
.provenance {
  background:#eae9df;
  padding:15px;
  border-radius:5px;
  margin:15px 0}
.provenance>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--type-body)}
.provenance .icon {
  width:15px}
.provenance p {
  font-size:var(--type-body);
  line-height:1.6;
  color:var(--muted);
  margin-top:8px}
.passport-full {
  max-width:1000px;
  margin:32px auto}
.passport-full .passport-heading h2 {
  font-size:var(--type-display)}
.passport-full .passport-photos img {
  height:350px}
.passport-full .passport-story {
  grid-template-columns:1.2fr 1fr;
  gap:45px}
.passport-full .supply-chain {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px}
.passport-full .supply-chain li {
  display:block;
  padding-top:16px;
  border-top:1px solid var(--line)}
.passport-full .supply-chain li:after {
  display:none}
.passport-full .supply-chain li>span {
  margin-bottom:17px}
.passport-bottom {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px}
.photo-unavailable {
  background:var(--panel);
  min-height:145px;
  border:1px dashed #c0c9bb;
  border-radius:5px;
  padding:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.5}
.photo-unavailable small {
  font-size:var(--type-body)}
.lot-attached {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:24px;
  padding:16px;
  border:1px solid #bcc9b7;
  border-radius:7px;
  background:var(--panel)}
.lot-attached b {
  display:block;
  font-weight:400;
  font-size:var(--type-lead);
  margin:8px 0}
.lot-attached small {
  display:block;
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--muted)}
.badges-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px}
.badge-card {
  padding:26px 22px;
  border:1px solid var(--line);
  border-radius:9px}
.badge-stamp {
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  border:1px dashed #b2bdad;
  border-radius:50%;
  font-family:var(--serif);
  font-size:var(--type-title);
  margin:8px auto 30px;
  color:#8a9686;
  outline:1px solid #d5dacf;
  outline-offset:6px}
.badge-card.earned {
  background:var(--panel)}
.badge-card.earned .badge-stamp {
  color:#526e4f;
  border:2px solid #687e5d}
.badge-card h2 {
  font-size:var(--type-lead);
  letter-spacing:-.045em;
  margin:12px 0}
.badge-card p {
  min-height:62px;
  font-size:var(--type-body);
  color:var(--muted);
  line-height:1.5}
.badge-card progress {
  appearance:none;
  width:100%;
  height:4px;
  border:0;
  margin:24px 0 10px;
  background:#d8ded2;
  border-radius:3px}
.badge-card progress::-webkit-progress-bar {
  background:#d8ded2;
  border-radius:3px}
.badge-card progress::-webkit-progress-value {
  background:#687e5d;
  border-radius:3px}
.badge-progress {
  font-size:var(--type-body);
  color:var(--muted)}
.country-collection {
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.country-collection span {
  padding:13px 19px;
  border:1px solid var(--line);
  font-family:var(--serif);
  font-size:var(--type-lead);
  border-radius:5px}
.demo-notice,.roaster-disclaimer {
  font-size:var(--type-body);
  line-height:1.6;
  border-block:1px solid var(--line);
  padding:14px 0;
  color:var(--muted)}
.person-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  min-height:45px;
  text-align:left;
  font-size:var(--type-body)}
.person-link small {
  display:block;
  margin-top:5px;
  font-size:var(--type-body);
  color:var(--muted)}
.person-link .avatar-mini {
  width:36px;
  height:36px;
  font-size:var(--type-lead)}
.post-card>.eyebrow {
  font-size:var(--type-body)}
.community-principles {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:50px;
  border-top:1px solid var(--line);
  padding:28px 0;
  margin-top:38px}
.community-principles span {
  font-family:var(--serif);
  font-size:var(--type-title);
  letter-spacing:-.035em}
.community-principles p {
  font-size:var(--type-body);
  line-height:1.65;
  color:var(--muted)}
.post-detail {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.65fr);
  gap:70px;
  margin:30px 0}
.post-detail>section>.eyebrow {
  display:block;
  margin-top:35px}
.post-detail h1 {
  font-size:var(--type-display);
  letter-spacing:-.05em;
  line-height:1.08;
  margin:17px 0 25px;
  overflow-wrap:anywhere}
.post-text {
  font-size:var(--type-body);
  line-height:1.65;
  color:var(--muted);
  white-space:pre-line;
  overflow-wrap:anywhere}
.recipe-micro-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:30px 0}
.recipe-micro-stats>span {
  font-size:var(--type-body);
  color:var(--muted)}
.recipe-micro-stats b {
  display:block;
  font-size:var(--type-title);
  font-weight:400;
  color:var(--ink);
  margin-bottom:5px}
.recipe-micro-stats small {
  font-size:var(--type-body);
  margin-left:5px}
.post-buttons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0}
.post-detail aside .passport-photos {
  margin-top:0}
.comments {
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:30px}
.comments h2 {
  font-size:var(--type-lead);
  margin-bottom:20px}
.comments h2 small {
  font-size:var(--type-body);
  color:var(--muted)}
.comments article {
  padding:18px 0;
  border-bottom:1px solid var(--line)}
.comments article>b {
  font-weight:400;
  font-size:var(--type-body)}
.comments article>p {
  margin:10px 0;
  line-height:1.6;
  font-size:var(--type-body);
  overflow-wrap:anywhere;
  white-space:pre-line}
.comments .button {
  margin:20px 0 12px}
.comments .fine+.text-button {
  margin-top:10px}
.profile-heading {
  display:flex;
  align-items:center;
  gap:28px;
  padding:40px 0}
.profile-avatar {
  display:grid;
  place-items:center;
  width:115px;
  height:115px;
  flex-shrink:0;
  font-family:var(--serif);
  font-size:var(--type-display);
  border:1px solid #c0c9bb;
  border-radius:50%;
  background:var(--panel)}
.profile-heading h1 {
  font-size:var(--type-display);
  letter-spacing:-.05em;
  margin:10px 0}
.profile-heading p {
  font-size:var(--type-body);
  line-height:1.6;
  color:var(--muted);
  max-width:48ch;
  overflow-wrap:anywhere}
.profile-heading small {
  display:block;
  margin-top:12px;
  font-size:var(--type-body);
  color:var(--muted)}
.profile-heading>.button {
  margin-left:auto}
.profile-settings {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px}
.profile-settings h3 {
  margin-top:0}
.profile-settings p {
  font-size:var(--type-body);
  line-height:1.65;
  color:var(--muted)}
.profile-settings .button {
  margin-top:20px}
.profile-settings .field:first-child {
  margin-top:0}
.publish-layout {
  display:grid;
  grid-template-columns:1fr .65fr;
  gap:70px}
.publish-layout>.detail-panel {
  align-self:start}
.publish-layout .field:first-child {
  margin-top:0}
.scan-modal .passport-photos {
  margin:20px 0}
.scan-modal .passport-photos img {
  height:200px}
.modal h3 {
  font-size:var(--type-lead);
  margin:16px 0}
.modal .button {
  margin-top:18px}
.modal .fine {
  line-height:1.6}
.modal>p {
  white-space:pre-line;
  overflow-wrap:anywhere}
@media(min-width:801px) and (max-width:1200px) {
  .site-header nav {
  gap:18px}
.site-header nav button {
  font-size:var(--type-body)}
.cups-grid,.community-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.badges-grid {
  grid-template-columns:repeat(2,1fr)}
.journal-strip {
  gap:30px}
.post-detail,.publish-layout {
  gap:30px}
.section-heading h1 {
  font-size:var(--type-display)}
}
@media(max-width:800px) {
  .site-header {
  gap:0;
  padding-inline:20px}
.site-header nav {
  gap:12px}
.site-header nav button {
  font-size:var(--type-body)}
.header-end {
  gap:12px}
.avatar-button {
  width:34px;
  height:34px;
  font-size:var(--type-lead)}
.learning-label {
  display:none}
.step-nav {
  gap:23px;
  justify-content:flex-start}
.step-nav>button {
  font-size:var(--type-body)}
.story-open h4 {
  font-size:var(--type-body)}
.story-open p {
  font-size:var(--type-body)}
.story-content .source-link {
  font-size:var(--type-body)}
.section-heading {
  display:block;
  padding:33px 0 26px}
.section-heading h1 {
  font-size:var(--type-title)}
.section-heading p {
  font-size:var(--type-body)}
.section-heading>.button {
  margin-top:20px}
.journal-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:22px}
.journal-strip>div {
  display:block}
.journal-strip b {
  font-size:var(--type-title);
  display:block;
  margin-bottom:6px}
.journal-strip span {
  font-size:var(--type-body)}
.journal-strip>.text-button {
  grid-column:1/-1;
  margin:0;
  justify-content:flex-start;
  border-top:1px solid #cdd4c7;
  padding-top:15px}
.list-toolbar {
  flex-wrap:wrap;
  margin:23px 0}
.list-toolbar .chips {
  gap:6px}
.list-toolbar .chip {
  font-size:var(--type-body);
  padding:10px 13px}
.toolbar-actions {
  justify-content:space-between;
  width:100%;
  gap:12px}
.toolbar-actions .button {
  font-size:var(--type-body)}
.cups-grid,.community-grid {
  grid-template-columns:1fr;
  gap:16px}
.cup-card,.post-card {
  padding:22px}
.cup-card-art,.post-art {
  margin-inline:-22px}
.cup-card-open {
  width:calc(100% + 44px)}
.cup-card h2,.post-card h2 {
  font-size:var(--type-title)}
.cup-card>p,.post-card>p {
  font-size:var(--type-body)}
.card-actions>.button,.card-actions>.text-button {
  font-size:var(--type-body)}
.privacy-note {
  font-size:var(--type-body)}
.cup-detail-grid,.post-detail,.publish-layout {
  grid-template-columns:1fr;
  gap:22px}
.detail-panel {
  padding:22px;
  margin-bottom:18px}
.detail-panel h3 {
  font-size:var(--type-lead)}
.passport-heading h2 {
  font-size:var(--type-title)}
.passport-photos img {
  height:155px}
.passport-photos.compact img {
  height:220px}
.passport-photos figcaption {
  font-size:var(--type-body)}
.passport-full {
  margin-top:25px}
.passport-full .passport-heading h2 {
  font-size:var(--type-display)}
.passport-full .passport-photos img {
  height:200px}
.passport-full .passport-story {
  grid-template-columns:1fr;
  gap:15px}
.passport-full .supply-chain {
  display:block}
.passport-full .supply-chain li {
  display:flex;
  border:0;
  padding:0 0 24px}
.passport-full .supply-chain li:after {
  display:block}
.passport-full .supply-chain li>span {
  margin:0}
.passport-bottom {
  align-items:stretch;
  flex-direction:column;
  gap:10px}
.badges-grid {
  grid-template-columns:1fr 1fr;
  gap:12px}
.badge-card {
  padding:22px 15px}
.badge-card h2 {
  font-size:var(--type-lead)}
.badge-card p {
  font-size:var(--type-body);
  min-height:75px}
.badge-stamp {
  width:75px;
  height:75px;
  font-size:var(--type-lead)}
.badge-card>.eyebrow {
  font-size:var(--type-body)}
.community-principles {
  grid-template-columns:1fr;
  gap:14px}
.community-principles span {
  font-size:var(--type-lead)}
.post-detail h1 {
  font-size:var(--type-title)}
.post-text {
  font-size:var(--type-body)}
.post-detail .metric-list dd {
  text-align:right;
  max-width:60%;
  overflow-wrap:anywhere}
.post-buttons>.button {
  flex:1;
  font-size:var(--type-body);
  min-width:145px}
.profile-heading {
  flex-wrap:wrap;
  gap:18px;
  padding:30px 0}
.profile-avatar {
  width:75px;
  height:75px;
  font-size:var(--type-display)}
.profile-heading>div {
  flex:1;
  min-width:170px}
.profile-heading h1 {
  font-size:var(--type-title);
  overflow-wrap:anywhere}
.profile-heading p {
  font-size:var(--type-body)}
.profile-heading>.button {
  margin:0}
.profile-settings {
  grid-template-columns:1fr;
  gap:25px}
.modal .passport-photos.compact img {
  height:180px}
.back-link {
  margin-top:18px}
}
@media(max-width:360px) {
  .site-header {
  padding-inline:15px}
.site-header nav button {
  font-size:var(--type-body)}
.site-header nav {
  gap:8px}
.section-heading h1 {
  font-size:var(--type-title)}
.list-toolbar .chip {
  font-size:var(--type-body)}
.badges-grid {
  grid-template-columns:1fr}
.badge-card p {
  min-height:0}
.passport-photos {
  grid-template-columns:1fr}
.passport-photos img {
  height:200px}
.journal-strip {
  padding:17px;
  gap:12px}
.journal-strip span {
  font-size:var(--type-body)}
.profile-heading>div {
  min-width:150px}
.profile-heading h1 {
  font-size:var(--type-title)}
.cup-card .card-actions {
  align-items:stretch;
  flex-direction:column}
.post-buttons {
  flex-direction:column}
}
@media(max-width:360px) {
  }
/* Shared additions use the same five type tokens. No independent size scale. */
.card-actions>.button,.card-actions>.text-button,.site-header nav button,.mode-switch button,.chip,.text-button,.field>span,.field input,.field select,.field textarea {
  font-size:var(--type-body)}
.country-choice b {
  font-size:var(--type-body)}
.origin-alternatives {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--space-3);
  padding:var(--space-4);
  margin-top:var(--space-3);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--soft)}
.origin-alternatives .field {
  margin:0}
.origin-alternatives .chip {
  min-height:48px;
  background:var(--paper)}
.process-more {
  margin-top:var(--space-3)}
.process-more summary {
  display:flex;
  gap:var(--space-2);
  align-items:center;
  cursor:pointer;
  min-height:44px;
  font-size:var(--type-body);
  list-style:none}
.process-more summary::-webkit-details-marker {
  display:none}
.process-more .field {
  margin:var(--space-2) 0}
.roast-note {
  margin-top:var(--space-3)}
.volume-control {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  margin:var(--space-6) 0;
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--panel)}
.volume-control p {
  margin-top:var(--space-2);
  font-size:var(--type-body);
  color:var(--muted)}
.volume-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3)}
.volume-fields .field {
  margin:0}
.volume-control .fine {
  font-size:var(--type-body);
  grid-column:1/-1;
  margin:0}
.volume-control>.chips {
  grid-column:1/-1}
.market-heading {
  padding:var(--space-8) 0 var(--space-6)}
.market-heading h1 {
  margin:var(--space-2) 0 var(--space-3)}
.market-heading p {
  max-width:none}
.roaster-directory {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
  margin-bottom:var(--space-8)}
.roaster-tile {
  display:flex;
  text-align:left;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  background:var(--white);
  min-width:0}
.roaster-tile+.roaster-tile {
  border-left:1px solid var(--line)}
.roaster-tile>span:nth-child(2) {
  min-width:0}
.roaster-tile b {
  display:block;
  font-weight:400;
  line-height:1.3;
  font-size:var(--type-body)}
.roaster-tile small {
  display:block;
  margin-top:var(--space-2);
  font-size:var(--type-body);
  color:var(--muted)}
.roaster-tile>.icon {
  width:16px;
  margin-left:auto}
.roaster-monogram {
  flex:none;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid #bcc4b9;
  background:var(--panel);
  border-radius:50%;
  font-family:var(--serif);
  font-size:var(--type-lead);
  letter-spacing:-.04em}
.catalog-section>.section-label {
  margin-bottom:var(--space-6)}
.catalog-section h2 {
  font-size:var(--type-title)}
.catalog-controls {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:var(--space-6);
  padding:var(--space-6);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-card)}
.catalog-controls .field {
  margin:0;
  min-width:0}
.catalog-controls .field>span {
  font-size:var(--type-body)}
.catalog-controls input,.catalog-controls select {
  background-color:var(--white)}
.search-field>div {
  display:flex;
  gap:var(--space-2)}
.search-field input {
  min-width:0}
.search-field .icon-button {
  height:48px;
  width:48px;
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink)}
.catalog-facets {
  display:flex;
  gap:var(--space-3)}
.catalog-facets>.field {
  flex:1;
  min-width:0}
.catalog-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  justify-content:space-between;
  margin:var(--space-6) 0}
.catalog-count {
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
  font-size:var(--type-body);
  color:var(--muted)}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4)}
.catalog-card {
  display:flex;
  flex-direction:column;
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--white);
  min-width:0;
  transition:border-color .2s}
.catalog-card:hover {
  border-color:#a2aea0}
.lot-index {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--line)}
.roaster-label {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  text-align:left;
  font-size:var(--type-body);
  color:var(--muted);
  padding:0;
  min-height:44px}
.roaster-label>span {
  font-family:var(--serif);
  font-size:var(--type-body);
  color:var(--ink)}
.lot-origin {
  display:flex;
  justify-content:space-between;
  gap:var(--space-2);
  font-size:var(--type-body);
  color:var(--muted);
  margin:var(--space-6) 0 var(--space-3)}
.catalog-card h2 {
  font-size:var(--type-lead);
  line-height:1.2;
  letter-spacing:-.03em}
.lot-title {
  font:inherit;
  text-align:left;
  line-height:inherit;
  padding:0;
  overflow-wrap:anywhere}
.lot-title:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.lot-taste {
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--accent);
  margin:var(--space-4) 0 var(--space-6);
  min-height:3em}
.lot-card-facts {
  margin:auto 0 0;
  font-size:var(--type-body);
  display:grid;
  gap:var(--space-2)}
.lot-card-facts>div {
  display:flex;
  justify-content:space-between;
  gap:var(--space-4)}
.lot-card-facts dt {
  color:var(--muted)}
.lot-card-facts dd {
  margin:0;
  text-align:right;
  max-width:60%;
  overflow-wrap:anywhere}
.catalog-card .card-actions {
  margin-top:var(--space-6);
  padding-top:var(--space-4);
  border-top:1px solid var(--line);
  flex-wrap:wrap}
.catalog-pagination {
  display:flex;
  gap:var(--space-6);
  justify-content:center;
  align-items:center;
  padding:var(--space-8) 0;
  font-size:var(--type-body)}
.catalog-disclaimer {
  font-size:var(--type-body);
  line-height:1.6;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:var(--space-6);
  margin:var(--space-8) 0}
.roaster-profile-head {
  display:flex;
  align-items:start;
  gap:var(--space-6);
  padding:var(--space-12) 0;
  border-bottom:1px solid var(--line);
  margin-bottom:var(--space-8)}
.roaster-profile-head>.roaster-monogram {
  width:88px;
  height:88px;
  font-size:var(--type-title)}
.roaster-profile-head>div {
  flex:1;
  min-width:0}
.roaster-profile-head h1 {
  font-size:var(--type-display);
  line-height:1.1;
  margin:var(--space-3) 0 var(--space-4);
  letter-spacing:-.05em;
  overflow-wrap:anywhere}
.roaster-profile-head p {
  max-width:65ch;
  color:var(--muted);
  line-height:1.6}
.roaster-profile-head>.button {
  flex-shrink:0}
.lot-detail-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:var(--space-12);
  margin:var(--space-8) 0}
.lot-detail-layout>section {
  min-width:0}
.lot-detail-art {
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--panel);
  margin-bottom:var(--space-6)}
.lot-detail-art .country-map {
  height:260px}
.lot-detail-art>span {
  display:block;
  text-align:center;
  font-size:var(--type-body);
  color:var(--muted)}
.lot-detail-layout .detail-panel h2 {
  font-size:var(--type-lead);
  margin-bottom:var(--space-4)}
.lot-detail-info h1 {
  font-size:var(--type-title);
  line-height:1.15;
  letter-spacing:-.04em;
  margin:var(--space-4) 0 var(--space-6)}
.lot-detail-notes {
  font-size:var(--type-lead);
  color:var(--accent);
  line-height:1.4}
.lot-detail-info .metric-list {
  margin-block:var(--space-6)}
.lot-detail-info .metric-list dd {
  max-width:65%;
  text-align:right}
.source-card {
  border-top:1px solid var(--line);
  margin-top:var(--space-8);
  padding-top:var(--space-6)}
.source-card p {
  font-size:var(--type-body);
  color:var(--muted);
  line-height:1.6;
  margin-top:var(--space-3)}
.live-shell>header,.live-shell>.live-body,.live-shell>footer {
  position:relative;
  z-index:1}
.live-shell .live-target b {
  font-size:var(--type-display)}
.live-shell .live-body {
  flex:1}
.phase-label {
  display:block;
  font-size:var(--type-body);
  letter-spacing:.05em;
  margin:var(--space-4) 0;
  color:var(--accent)}
.brew-water-visual {
  position:absolute;
  inset:auto 0 0;
  height:var(--brew-fill,8%);
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,#91a48d52,#d9dfd357);
  border-top:1px solid #7f95744d;
  transition:height .25s linear;
  will-change:height}
.brew-water-visual:before,.brew-water-visual:after {
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:-14px;
  height:28px;
  border-radius:45%;
  background:linear-gradient(90deg,transparent,#7f95744d,transparent);
  filter:blur(5px);
  animation:brew-water-sway 7s ease-in-out infinite}
.brew-water-visual:after {
  top:-6px;
  height:16px;
  animation-duration:5.5s;
  animation-direction:reverse;
  background:linear-gradient(90deg,transparent,#fff7,transparent)}
.is-paused .brew-water-visual:before,.is-paused .brew-water-visual:after {
  animation-play-state:paused}
@keyframes brew-water-sway {
  0%,100% {
  transform:translate3d(-1.5%,0,0) skewX(-1deg)}
50% {
  transform:translate3d(1.5%,-3px,0) skewX(1deg)}
}
@media(max-width:1100px) {
  .roaster-directory {
  grid-template-columns:1fr 1fr}
.roaster-tile:nth-child(3) {
  border-left:0}
.roaster-tile:nth-child(n+3) {
  border-top:1px solid var(--line)}
.catalog-controls {
  grid-template-columns:1fr}
.catalog-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.site-header nav {
  gap:var(--space-4)}
.site-header {
  gap:var(--space-4)}
}
@media(max-width:800px) {
  .section-intro h1{font-size:var(--type-title)}
  .site-header nav {
  justify-content:space-between;
  gap:var(--space-2);
  width:100%}
.site-header nav button {
  font-size:var(--type-body)}
.origin-alternatives {
  padding:var(--space-3);
  gap:var(--space-2)}
.origin-alternatives .chip {
  font-size:var(--type-body)}
.origin-alternatives .field>span {
  font-size:var(--type-body)}
.volume-control {
  padding:var(--space-4);
  grid-template-columns:1fr}
.volume-fields {
  grid-column:1/-1}
.catalog-controls {
  padding:var(--space-4)}
.catalog-facets {
  flex-wrap:wrap}
.catalog-facets>.field {
  flex-basis:45%}
.catalog-facets>.field:first-child:nth-last-child(3) {
  flex-basis:100%}
.catalog-grid {
  grid-template-columns:1fr}
.catalog-count {
  flex-direction:column}
.catalog-toolbar .chip {
  font-size:var(--type-body)}
.catalog-card {
  padding:var(--space-6)}
.catalog-card .card-actions {
  flex-wrap:nowrap}
.roaster-directory {
  margin-bottom:var(--space-8)}
.roaster-tile {
  padding:var(--space-4);
  flex-wrap:wrap;
  align-content:start}
.roaster-tile>.icon {
  display:none}
.roaster-tile>.roaster-monogram {
  width:40px;
  height:40px;
  font-size:var(--type-body)}
.roaster-tile>span:nth-child(2) {
  width:100%}
.roaster-tile b {
  min-height:2.6em}
.roaster-profile-head {
  flex-wrap:wrap;
  padding:var(--space-8) 0}
.roaster-profile-head h1 {
  font-size:var(--type-title)}
.roaster-profile-head>.roaster-monogram {
  width:64px;
  height:64px;
  font-size:var(--type-lead)}
.roaster-profile-head>div {
  min-width:60%}
.lot-detail-layout {
  grid-template-columns:1fr;
  gap:var(--space-6)}
.lot-detail-info {
  grid-row:1}
.lot-detail-art .country-map {
  height:200px}
.lot-detail-info h1 {
  font-size:var(--type-title)}
.live-shell {
  padding:var(--space-4)}
.live-shell header {
  gap:var(--space-3)}
.live-shell header>span:not(.eyebrow) {
  font-size:var(--type-body)}
.live-shell .live-body {
  padding-block:var(--space-6)}
.live-shell footer {
  gap:var(--space-3)}
.live-shell footer .button {
  font-size:var(--type-body);
  gap:var(--space-2);
  padding-inline:var(--space-4)}
}
@media(max-width:360px) {
  .origin-alternatives {
  grid-template-columns:1fr}
.origin-alternatives .chip {
  font-size:var(--type-body)}
.country-choice b {
  font-size:var(--type-body)}
.catalog-card {
  padding:var(--space-4)}
.catalog-pagination {
  gap:var(--space-3)}
.catalog-pagination .text-button {
  font-size:var(--type-body)}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

/* Readability: controls never shrink to make a narrow viewport fit. */
@media(max-width:800px) {
 .pro-layout {grid-template-columns:minmax(0,1fr)}
 .pro-preview,.pro-fields,.field,.field input,.field select,.field textarea {min-width:0}
 .field>span {flex-wrap:wrap}
}
@media(max-width:520px) {
 .site-header nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-4);align-items:stretch}
 .site-header nav button {min-height:44px;text-align:left}
 .workspace-bar {flex-wrap:wrap;padding-block:var(--space-3)}
 .atlas-meta {flex-wrap:wrap;letter-spacing:.04em}
 .catalog-toolbar,.lot-origin,.card-actions {flex-wrap:wrap}
 .save-profile-row {grid-template-columns:1fr}
 .fields-grid {grid-template-columns:minmax(0,1fr)}
 .pro-preview .metric-list {display:block}
}
@media(max-width:380px) {
 .learning-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-4)}
 .learning-tabs button {text-align:left;min-height:44px}
}

/* Recipe system v7: uses the same five type tokens and shared controls. */
.brewer-panel {padding:24px}
.brewer-panel>h2 {margin-top:0}
.brewer-panel>p {margin:16px 0;line-height:1.6}
.brewer-panel>.brewer-drawing {width:100%;height:240px}
.compact-save {display:flex;justify-content:flex-start;border-top:1px solid var(--line);margin-top:24px;padding:16px 0}
.custom-device {border-left:2px solid var(--accent);padding-left:16px;margin:24px 0}
.plain-list {padding-left:24px;margin:16px 0;line-height:1.6}
.plain-list li+li {margin-top:12px}
.recipe-warning {border:1px solid var(--accent);padding:24px;margin:24px 0;background:var(--panel);border-radius:10px}
.recipe-warning h3 {font-size:var(--type-lead)}
.recipe-rationale,.cup-evolution,.saved-library,.lot-recipe-hub,.community-champions {margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.recipe-rationale details,.cup-evolution details {margin-top:24px;padding:16px 0;border-top:1px solid var(--line)}
.recipe-context strong {display:block;margin-top:8px}
.step-amount {display:block;margin-top:12px;font-weight:600}
.live-measures {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin:24px auto}
.live-measures div {display:flex;flex-direction:column;gap:8px;min-width:120px}
.live-measures b {font-size:var(--type-display);font-weight:500;line-height:1.05}
.live-measures span {font-size:var(--type-body)}
.review-page {max-width:1100px;margin:auto}
.review-page>p {max-width:680px;margin:24px 0}
.taste-columns {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0}
.taste-columns section {border-top:1px solid var(--line);padding-top:24px}
.taste-columns h2 {font-size:var(--type-lead);margin-bottom:24px}
.taste-columns .chips {display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.taste-columns .chip {justify-content:flex-start;min-height:48px}
.review-measurements {padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0}
.review-measurements[open] summary {margin-bottom:24px}
.review-result {background:var(--panel);padding:24px;border-radius:10px;margin:24px 0;border:1px solid var(--line)}
.review-result h2 {font-size:var(--type-lead)}
.review-result p {margin-top:12px;max-width:760px;line-height:1.6}
.review-actions {display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}
.attempt-list article,.lot-proposal {display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.attempt-list p,.lot-proposal p {margin-top:8px}
.champion-grid,.hub-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0}
.champion-card {display:flex;flex-direction:column;gap:16px}
.champion-card h2 {font-size:var(--type-title)}
.champion-card h3 {font-size:var(--type-lead)}
.champion-card .card-actions {margin-top:auto;padding-top:24px;flex-wrap:wrap}
.weekly-feature {padding:0 0 48px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.weekly-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0}
.weekly-grid article {display:flex;flex-direction:column;gap:16px;min-width:0}
.weekly-grid h3 {font-size:var(--type-lead)}
.weekly-grid p {line-height:1.5}
.weekly-pack {height:200px;display:grid;place-items:center;background:var(--panel);border-radius:10px;padding:16px}
.weekly-pack img {width:100%;height:100%;object-fit:contain;min-height:0}
.weekly-grid .text-button {margin-top:auto;text-align:left}
.history-search {display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;max-width:520px;margin:20px 0 32px;border-bottom:1px solid var(--line)}
.history-search label {min-width:0}
.history-search input {width:100%;min-width:0;padding:12px 0;border:0;border-radius:0;outline:0;background:transparent;font-size:var(--type-body)}
.history-search:focus-within {border-color:var(--ink)}
.history-search-submit {display:grid;place-items:center;width:40px;height:40px;color:var(--muted)}
.history-search-submit .icon {width:18px;height:18px}
.recipe-composer {max-width:900px;margin:auto}
.recipe-composer>p {margin:24px 0}
.recipe-composer form {display:flex;flex-direction:column;gap:24px}
.editor-steps {display:grid;gap:24px}
.editor-steps fieldset {border:1px solid var(--line);border-radius:10px;padding:24px;min-width:0}
.editor-steps legend {padding:0 8px}
.editor-steps .field {margin-bottom:16px}
#lot-qr {display:block;max-width:100%;height:auto;margin:24px auto}
@media(max-width:1000px) {
 .weekly-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .taste-columns {grid-template-columns:1fr}
 .taste-columns .chips {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
}
@media(max-width:640px) {
 .champion-grid,.hub-grid {grid-template-columns:1fr}
 .weekly-grid {gap:24px 16px}
 .weekly-pack {height:160px}
 .weekly-grid h3 {font-size:var(--type-lead);overflow-wrap:anywhere}
 .weekly-grid .text-button {padding:0;white-space:normal}
 .taste-columns .chips {grid-template-columns:minmax(0,1fr) auto}
 .review-actions>* {width:100%}
 .attempt-list article,.lot-proposal {align-items:flex-start;flex-direction:column}
 .live-measures {gap:16px}.live-measures div {min-width:100px}
 .live-measures b {font-size:var(--type-title)}
 .recipe-warning,.review-result,.editor-steps fieldset {padding:16px}
}
@media(max-width:380px) {.weekly-grid {grid-template-columns:1fr}.weekly-pack {height:200px}}

@media(max-width:380px){
  .journal-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journal-strip>div:nth-child(3){grid-column:1/-1}
}

@media(max-width:640px){.review-page h1{font-size:var(--type-title)}}

/* Personal coffee geography: only completed brews fill an origin. */
.coffee-journey {
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--panel);
  overflow:hidden;
}
.journey-geography {min-width:0;padding:24px 28px 20px}
.journey-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.journey-heading h2 {margin:0;font-size:var(--type-lead);font-weight:400}
.journey-count {color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.journey-count b {color:var(--ink);font-weight:400}
.journey-world {display:block;width:100%;height:auto;margin:12px 0 8px}
.journey-country {stroke-linejoin:round;vector-effect:non-scaling-stroke}
.journey-country.is-context {fill:var(--line);fill-opacity:.5;stroke:var(--panel);stroke-width:.65}
.journey-country.is-available {fill:var(--white);stroke:var(--muted);stroke-opacity:.75;stroke-width:.8}
.journey-country.is-brewed {fill:var(--accent);stroke:var(--paper);stroke-width:.8}
.journey-country.is-available:hover,.journey-country.is-brewed:hover {stroke:var(--ink);stroke-width:1.4}
.journey-legend {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--muted)}
.journey-legend li {display:flex;align-items:center;gap:8px}
.journey-legend i {display:block;width:14px;height:14px;border-radius:2px;flex-shrink:0}
.legend-brewed {background:var(--accent)}
.legend-available {background:var(--white);border:1px solid var(--muted)}
.legend-context {background:var(--line);opacity:.65}
.journey-origins {margin:16px 0 0;line-height:1.7}
.journey-origins span {color:var(--muted);padding:0 6px}
.journey-summary {border-left:1px solid var(--line);padding:24px;display:flex;flex-direction:column;justify-content:center;gap:24px;min-width:0}
.journey-stats {display:grid;gap:20px}
.journey-stats>div {display:flex;flex-direction:column;gap:4px}
.journey-stats b {font-size:var(--type-title);line-height:1.1;font-weight:400;font-variant-numeric:tabular-nums}
.journey-stats span,.journey-summary p {color:var(--muted)}
.journey-summary p {margin:0;line-height:1.5}
.journey-summary .text-button {align-self:flex-start;padding:0;white-space:normal;text-align:left}
@media(max-width:760px) {
  .coffee-journey {grid-template-columns:minmax(0,1fr)}
  .journey-summary {border-left:0;border-top:1px solid var(--line);padding:20px 24px;gap:16px}
  .journey-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .journey-geography {padding:20px 24px}
  .journey-legend {gap:10px 16px}
}
@media(max-width:380px) {
  .journey-geography,.journey-summary {padding:16px}
  .journey-heading {gap:8px}
  .journey-heading h2 {font-size:var(--type-lead)}
  .journey-legend {display:grid;grid-template-columns:1fr}
  .journey-stats {grid-template-columns:1fr;gap:12px}
  .journey-stats>div {flex-direction:row;align-items:baseline;gap:12px}
}

/* Brewing flow: focused questions and a readable reference card. */
.brew-view>.split-layout {padding-top:var(--space-8)}
.brew-view .section-intro h1 {margin:0 0 16px}
.brew-view .step-content,.brew-view .coffee-select-block {padding-top:0}
.coffee-layout {column-gap:48px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.card-back {display:inline-flex;flex:0 0 48px;align-self:stretch;align-items:center;justify-content:center;min-height:48px;padding:0;margin:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.card-back:hover {background:var(--paper);border-color:var(--muted);color:var(--ink)}
.card-back:focus-visible {outline:2px solid var(--ink);outline-offset:3px}
.brew-view .brewer-panel {display:flex;flex-direction:column;min-height:var(--origin-panel-height,0px)}
.brew-view .brewer-panel .origin-next {margin:24px -24px -24px;margin-top:auto}
.coffee-card-placeholder {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:36px;text-align:center}
.coffee-card-placeholder .empty-line-art {width:156px;height:156px;margin-bottom:12px;color:var(--line)}
.coffee-card-placeholder h2 {font-size:var(--type-title);font-weight:400;line-height:1.15}
.coffee-card-placeholder p {max-width:360px;color:var(--muted);line-height:1.5}
.coffee-layout .scan-entry {margin:16px 0 20px;gap:16px;flex-wrap:wrap;align-items:center}
.coffee-layout .scan-entry p {flex:1;min-width:170px;margin:0;line-height:1.5}
.coffee-choice-group {min-width:0}
.coffee-layout .country-choices, #grinder-popular .country-choices {display:flex;flex-wrap:wrap;margin-top:0;gap:8px}
.coffee-layout .country-choices .country-choice, #grinder-popular .country-choices .country-choice {display:inline-flex;flex:0 0 auto;align-items:center;min-height:36px;width:auto;padding:6px 12px;border-radius:20px;background:transparent}
.coffee-layout .country-choices .country-choice.selected, #grinder-popular .country-choices .country-choice.selected {background:#e4e8dd}
.coffee-layout .origin-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.coffee-layout .origin-fields .field {margin:0;min-width:0}
.coffee-layout .origin-fields .field>span {min-height:28px}
.popular-origin-label {margin:24px 0 10px;color:var(--muted)}
.pro-inline-hint {display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;margin:24px 0 0;padding:18px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}
.pro-hint-icon {display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--accent)}
.pro-hint-icon .icon {width:21px;height:21px}
.pro-hint-copy h3 {margin:0;font-size:var(--type-body);font-weight:400;line-height:1.3}
.pro-hint-copy p {margin:5px 0 12px;color:var(--muted);line-height:1.4}
.pro-inline-link {display:inline-flex;align-items:center;gap:10px;min-height:32px;padding:0;color:var(--ink);text-align:left}
.pro-inline-link .icon {width:18px;height:18px;transition:transform .2s var(--ease)}
.pro-inline-link:hover .icon {transform:translateX(3px)}
.pro-inline-link:hover {color:var(--accent)}
.brew-view .knowledge-panel .atlas-meta {padding:14px 20px 0;gap:8px;letter-spacing:.06em}
.brew-view .knowledge-panel .map-heading {padding:12px 20px 0}
.brew-view .knowledge-panel .map-heading h2 {font-family:Gorka,Arial,sans-serif;font-size:var(--type-title);line-height:1.1;letter-spacing:-.03em}
.brew-view .knowledge-panel .map-heading>span {margin-top:5px}
.brew-view .knowledge-panel .map-stage {padding:4px 12px 10px}
.brew-view .knowledge-panel .origin-hero {display:grid;isolation:isolate}
.brew-view .knowledge-panel .origin-hero>.map-heading,.brew-view .knowledge-panel .origin-hero>.map-stage {grid-area:1/1}
.brew-view .knowledge-panel .origin-hero>.map-heading {z-index:1;align-self:start;padding:20px;pointer-events:none}
.brew-view .knowledge-panel .origin-hero>.map-heading h2,.brew-view .knowledge-panel .origin-hero>.map-heading>span {width:fit-content;max-width:100%;text-shadow:0 0 6px var(--panel),0 0 12px var(--panel)}
.brew-view .knowledge-panel .origin-hero>.map-stage {min-width:0;padding:16px 12px 12px}
.brew-view .knowledge-panel .origin-hero .country-map {display:block;height:260px}
.brew-view .knowledge-panel .map-boundary-note {margin:4px 20px 10px;line-height:1.4}
.brew-view .knowledge-panel .story-content {padding:16px 20px 12px}
.brew-view .knowledge-panel .story-content>p {margin-top:8px;line-height:1.45}
.brew-view .knowledge-panel .flavor-notes {margin-top:12px}
.brew-view .knowledge-panel .flavor-notes span {padding:3px 7px}
.brew-view .knowledge-panel .story-details {margin-top:12px;padding-top:12px}
.brew-view .knowledge-panel .story-details p {margin-top:6px;line-height:1.45}
.brew-view .knowledge-panel .story-content .source-link {margin-top:8px}
.brew-view .knowledge-panel .map-source {margin:0 20px 16px}
.brew-view .knowledge-panel .source-link {overflow-wrap:anywhere}
.brew-view .knowledge-panel .origin-sources {display:flex;align-items:center;gap:16px;margin:0 20px 12px}
.brew-view .knowledge-panel .origin-sources .source-link {margin:0}
.brew-view .knowledge-panel .origin-next {
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  bottom:0;
  z-index:3;
  margin-top:auto;
  padding:12px 20px 16px;
  border-top:1px solid var(--line);
  background:var(--panel)}
.brew-view .knowledge-panel .origin-next .button {
  flex:1;
  min-width:0;
  width:100%;
  min-height:48px}
.brew-view .coffee-stage-2 .origin-next,.brew-view .coffee-stage-3 .origin-next {position:static}
.volume-stepper {display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.volume-stepper input {min-width:0;width:100%;border:0;text-align:center;padding:12px 4px;appearance:textfield;-moz-appearance:textfield}
.volume-stepper input::-webkit-inner-spin-button,.volume-stepper input::-webkit-outer-spin-button {appearance:none;margin:0}
.volume-adjust {flex:0 0 32px;align-self:stretch;padding:0;background:transparent;color:var(--muted);font-size:var(--type-lead)}
.volume-adjust:hover {background:var(--panel);color:var(--ink)}
.volume-stepper:focus-within {outline:2px solid var(--ink);outline-offset:2px}
.grinder-results-list {max-height:360px;overflow:auto;margin-top:12px}
.grinder-results-list [hidden],#grinder-results[hidden],#grinder-popular[hidden] {display:none}
.grinder-skip {margin-top:24px}
.grinder-skip .process-choice {width:100%}
.grinder-explanation {margin:24px 0}
select[data-custom-select][hidden] {display:none}
.styled-select {position:relative;min-width:0}
.select-trigger:disabled,.select-option:disabled {opacity:.45;cursor:not-allowed}
.select-trigger:focus-visible {outline:2px solid var(--ink);outline-offset:2px}
input.select-trigger {cursor:text}
.styled-select:has(>input.select-trigger)::before {content:'';position:absolute;right:20px;top:16px;width:12px;height:12px;border:1.5px solid var(--muted);border-radius:50%;pointer-events:none}
.styled-select:has(>input.select-trigger)::after {content:'';position:absolute;right:15px;top:30px;width:7px;height:1.5px;background:var(--muted);transform:rotate(45deg);transform-origin:left center;pointer-events:none}
.select-menu [hidden] {display:none!important}
.select-trigger {width:100%;min-height:50px;padding:12px 40px 12px 14px;border:1px solid var(--line,#d5d9d2);border-radius:var(--radius-control);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.select-trigger::after {content:'';position:absolute;right:18px;top:21px;width:7px;height:7px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg)}
.select-trigger[aria-expanded="true"] {border-color:var(--ink);background:var(--soft)}
.select-menu {position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:100%;max-height:min(360px,45vh);overflow:auto;overscroll-behavior:contain;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:0 12px 32px #26373f1a}
.select-menu[hidden] {display:none}
.select-group-label {padding:14px 10px 7px;color:var(--muted);font-size:var(--type-body);letter-spacing:.04em}
.select-option {display:block;width:100%;padding:10px 30px 10px 10px;border:0;border-radius:4px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.select-option[aria-selected="true"] {background:var(--soft)}
.select-option[aria-selected="true"]::after {content:'✓';float:right;margin-right:-18px}
.select-option:hover,.select-option:focus-visible {background:var(--soft);outline:1px solid var(--ink);outline-offset:-1px}
.brewer-drawing {flex-shrink:0;overflow:visible}
.grinder-drawing {display:block;width:100%;height:260px;flex-shrink:0;margin:16px 0;color:#627566}
.grinder-explanation p+p {margin-top:16px}
.grinder-explanation>.sources-tooltip {margin:var(--space-4) 0}
.roast-help {margin:0 0 var(--space-6);color:var(--muted);line-height:1.5;max-width:48ch}
.roast-choices {display:grid;gap:var(--space-2)}
.roast-choice {display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;min-height:56px;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-control);background:transparent;text-align:left}
.roast-choice:hover {background:var(--panel);border-color:var(--muted)}
.roast-choice.selected {background:var(--soft);border-color:var(--ink)}
.roast-choice.selected:after {content:'✓'}
.roast-choice:focus-visible {outline:2px solid var(--ink);outline-offset:3px}
.roast-choice-title {font-size:var(--type-body);line-height:1.5}
.roast-art {display:block;width:170px;height:170px;flex-shrink:0;color:#627566;overflow:visible}
.roast-art .bean-body,.roast-art .bean-seam {fill:none;stroke:currentColor;stroke-width:.55;stroke-linecap:round;stroke-linejoin:round}
.roast-art .bean-hatch {fill:none;stroke:currentColor;stroke-width:.25;opacity:.6}
.roast-art .bean-guides {fill:none;stroke:currentColor;stroke-width:.25;stroke-dasharray:1 2;opacity:.25}
.brew-view .brewer-panel>.brewer-drawing {height:180px}
.brew-view .brewer-panel>p+p {margin-top:0}
.brew-view .brewer-panel>.source-link {margin-top:auto;align-self:flex-start}
.brew-view .brewer-panel>.source-link+.origin-next {margin-top:var(--space-6)}
.has-brew-dock {padding-bottom:var(--brew-dock-space,calc(100px + env(safe-area-inset-bottom)))}
.brew-dock {position:fixed;z-index:45;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-3);width:min(480px,calc(100% - 32px));padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;background:var(--panel);box-shadow:0 -6px 24px #26373f0a}
.brew-dock .button {flex:1;min-width:0;min-height:48px}
.brew-dock .card-back {flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius-control)}
.brew-dock .card-back:hover {background:var(--soft);border-color:var(--muted)}
.brew-dock .button:disabled {background:var(--line);color:var(--muted);cursor:not-allowed}
.brew-dock {flex-direction:column;align-items:stretch}
.brew-dock-actions {display:flex;align-items:center;gap:var(--space-3)}
.brew-progress {padding:0 var(--space-1)}
.brew-progress-track {display:flex;gap:var(--space-2)}
.brew-progress-segment {flex:1;height:4px;background:var(--line);border-radius:var(--radius-control)}
.brew-progress-segment.is-done {background:var(--ink)}
.brew-progress-segment.is-current {background:var(--accent)}
@media(max-width:480px){
 .brew-dock {width:calc(100% - 24px);padding-left:var(--space-3);padding-right:var(--space-3);gap:var(--space-2)}
}
.brew-view .origin-empty {
  min-height:520px;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:28px;
  padding:36px;
  text-align:center}
.origin-empty-globe {
  position:relative;
  width:156px;
  height:156px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--line)}
.origin-empty-globe:before {
  content:'';
  position:absolute;
  inset:34px -12px;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  border-radius:50%}
.origin-empty-globe:after {
  content:'';
  position:absolute;
  inset:-10px 43px;
  border-left:1px solid currentColor;
  border-right:1px solid currentColor;
  border-radius:50%}
.origin-empty-globe span {position:absolute;left:0;right:0;top:50%;border-top:1px solid currentColor}
.origin-empty-copy {max-width:380px}
.origin-descriptors {display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.origin-descriptors span {padding:4px 10px;border:1px solid #c4cebd;border-radius:16px;color:#627566}
.brew-view .origin-panel .story-content>.descriptor-note {margin-top:8px;color:var(--muted);font-size:var(--type-body)}
.sources-tooltip {position:relative}
.brew-view .origin-panel .story-content {background:transparent}
.sources-tooltip summary {display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;list-style:none;cursor:pointer;color:var(--muted);text-decoration:none;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-control);background:transparent}
.sources-tooltip summary .icon {width:18px;height:18px}
.sources-tooltip summary:hover,.sources-tooltip[open]>summary {color:var(--ink);border-color:var(--muted);background:var(--soft)}
.sources-tooltip summary:focus-visible {outline:2px solid var(--ink);outline-offset:3px}
.sources-tooltip summary::-webkit-details-marker {display:none}
.sources-popover {position:absolute;bottom:calc(100% + 6px);left:0;z-index:25;display:flex;flex-direction:column;gap:12px;width:max-content;max-width:min(320px,70vw);padding:16px;background:#f4f3ed;border:1px solid #c4cebd;border-radius:8px;box-shadow:0 8px 28px #26373f20}
.origin-empty-copy h2 {margin-top:8px;font-size:var(--type-title);line-height:1.15}
.origin-empty-copy p {margin-top:10px;color:var(--muted);line-height:1.5}
@media(min-width:801px) {
  .brew-view .split-layout>.knowledge-panel {
    position:sticky;
    top:12px;
    align-self:start;
    max-height:none;
    overflow:visible;
  }
  .brew-view .split-layout>.origin-panel {
    display:flex;
    flex-direction:column;
    min-height:0;
  }
}
@media(min-width:1000px) {
  .brew-view .split-layout>.origin-panel {height:auto;min-height:var(--origin-panel-height,0px)}
  .brew-view .knowledge-panel .origin-hero .country-map {height:290px}
  .brew-view .origin-panel .story-content {display:block;padding:10px 20px 4px}
  .brew-view .origin-panel .story-title {grid-column:1/-1}
  .brew-view .origin-panel .story-content>p {grid-column:1;grid-row:2;margin-top:4px}
  .brew-view .origin-panel .flavor-notes {display:none}
  .brew-view .origin-panel .story-details {grid-column:2;grid-row:2/4;margin-top:0;padding:0 0 0 16px;border-top:0;border-left:1px solid var(--line)}
  .brew-view .origin-panel .origin-sources {margin-bottom:6px}
  .brew-view .knowledge-panel .origin-next {padding:8px 16px 10px}
  .brew-view .knowledge-panel .origin-next .button {min-height:44px}
  .brew-view .knowledge-panel .card-back {flex-basis:44px;min-height:44px}
}
/* Keep the short setup screens inside a laptop viewport without clipping content. */
@media(min-width:1000px) and (max-height:900px) {
  .coffee-layout .scan-entry {margin:12px 0}
  .coffee-layout .popular-origin-label {margin-top:16px}
  .coffee-layout .pro-inline-hint {margin-top:16px;padding:14px}
  .brew-view .knowledge-panel .origin-hero .country-map {height:270px}
}
.brew-view .journey-footer {
  position:fixed;
  right:clamp(20px,4.5vw,76px);
  bottom:12px;
  z-index:30;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:6px;
  gap:12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  box-shadow:0 4px 18px #26373f14;
}
.brew-view .journey-footer>div {gap:12px}
.brew-view .journey-footer>div:first-child:empty {display:none}
.brew-view .journey-footer .button {min-height:44px;padding:9px 16px;border-radius:999px}
.brew-view .journey-footer .text-button {min-height:44px;padding:7px 10px}
@media(min-width:1440px) {
  .brew-view .knowledge-panel .atlas-meta {padding-top:12px}
  .brew-view .knowledge-panel .story-content {padding-top:12px}
  .brew-view .knowledge-panel .map-source {margin-bottom:12px}
}
@media(max-width:800px) {
  .brew-view>.split-layout {padding-top:var(--space-6)}
  .coffee-layout {grid-template-columns:minmax(0,1fr);gap:24px}
  .coffee-choice-group {margin-top:0}
  .coffee-layout .scan-entry {padding:14px;gap:10px}
  .coffee-layout .scan-entry p {flex-basis:100%;min-width:0}
  .coffee-layout .country-choice {padding:10px;min-height:48px}
  .brew-view .split-layout>.knowledge-panel {position:relative;top:auto;max-height:none;overflow:visible}
  .brew-view .knowledge-panel .origin-hero .country-map {height:260px}
  .brew-view .knowledge-panel .story-content {border-radius:0 0 var(--radius-card) var(--radius-card)}
  .brew-view .origin-empty {min-height:360px;padding:28px}
  .origin-empty-globe {width:124px;height:124px}
  .coffee-card-placeholder .empty-line-art {width:124px;height:124px}
  .origin-empty-globe:before {inset:27px -10px}
  .origin-empty-globe:after {inset:-8px 34px}
  .brew-view .journey-footer {right:20px;max-width:calc(100vw - 40px)}
}
@media(max-width:380px) {
  .coffee-layout .country-choice {padding:9px 7px}
}
@media(max-width:480px) {
  .brew-view .brewer-choices {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px) and (min-width:801px) {
  .site-header {gap:12px}
  .site-header nav {gap:14px}
  .header-brand-group {gap:10px}
}
@media(max-width:800px) {
  .header-brand-group {grid-column:1;grid-row:1;gap:10px}
  .site-header .mode-switch button {padding-inline:9px}
}
@media(max-width:480px) {
  .header-brand-group {gap:7px}
  .site-header .mode-switch button {padding-inline:7px}
}

/* Roaster gallery and weekly lots. */
.roaster-directory {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0;border-radius:0;overflow:visible}
.roaster-tile,.roaster-tile+.roaster-tile,.roaster-tile:nth-child(n+3) {display:flex;flex-direction:column;align-items:stretch;gap:20px;min-height:230px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);transition:border-color .2s var(--ease)}
.roaster-tile:hover {border-color:var(--muted)}
.roaster-tile:focus-visible,.weekly-pack:focus-visible,.weekly-title-link:focus-visible {outline:2px solid var(--ink);outline-offset:3px}
.roaster-tile-top {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.roaster-tile-top .roaster-monogram {width:68px;height:68px;background:var(--white)}
.roaster-tile-main {display:block;flex:1;width:100%}
.roaster-tile-main b {display:block;min-height:0;margin-bottom:8px;font-size:var(--type-lead);line-height:1.15}
.roaster-description {display:block;max-width:42ch;color:var(--muted);line-height:1.45}
.roaster-tile-bottom {display:flex;align-items:center;gap:8px;width:100%;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}
.roaster-tile-bottom>span:nth-child(2) {margin-left:auto;color:var(--ink)}
.roaster-tile-arrow {display:grid;place-items:center;width:30px;height:30px;margin-left:8px;border:1px solid #bbc7bb;border-radius:50%;color:var(--ink)}
.roaster-tile-arrow .icon {width:15px;height:15px}
.weekly-grid .weekly-pack {width:100%;border:0;color:var(--ink);cursor:pointer}
.weekly-grid .weekly-pack:hover {background:var(--soft)}
.weekly-title-link {padding:0;text-align:left;font:inherit;color:inherit}
.weekly-title-link:hover {text-decoration:underline;text-underline-offset:4px}
.weekly-metrics {display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--muted)}
.lot-discussion {margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.lot-discussion>.fine {margin:16px 0}
.lot-discussion .field {display:block;max-width:650px;margin:24px 0 12px}
.lot-comment-list {display:grid;gap:12px;max-width:650px;margin-top:24px}
.lot-comment-list article {padding:16px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white)}
.lot-comment-list article p {margin-bottom:10px;overflow-wrap:anywhere}
@media(max-width:640px) {
  .roaster-directory {grid-template-columns:minmax(0,1fr)}
  .roaster-tile,.roaster-tile+.roaster-tile,.roaster-tile:nth-child(n+3) {min-height:0;padding:20px}
}
.brew-view .origin-slide {display:flex;flex-direction:column;flex:1}
.brew-view .knowledge-panel .origin-sources {margin-top:auto;justify-content:flex-end;padding-top:24px;margin-bottom:24px}
.brewer-panel>.card-sources {margin-top:auto;align-self:flex-end;padding-top:24px}
.grinder-explanation {display:flex;flex-direction:column;flex:1;margin-bottom:0}
.grinder-explanation>.sources-tooltip {margin-top:auto;align-self:flex-end;padding-top:24px}
.knowledge-panel .sources-popover,.card-sources .sources-popover {left:auto;right:0}
.device-story .device-material {margin:0;color:var(--muted)}
.device-story-copy {margin:24px 0}
.device-story-copy h3 {font-size:var(--type-lead);margin:0 0 12px}
.device-story-copy p {line-height:1.6}
.review-map {padding:24px;border:1px solid var(--line);border-radius:12px;margin:24px 0;background:var(--panel)}
.review-map h2 {font-size:var(--type-lead);margin:0 0 12px}
.review-map-top {text-align:center;margin:16px 0 8px;color:var(--muted)}
.review-map-plot {position:relative;height:180px;margin:0 16px;background:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));border:1px solid var(--line);border-radius:8px}
.review-map-center {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--muted);background:var(--panel);padding:8px}
.review-map-point {position:absolute;width:16px;height:16px;border:3px solid var(--paper);background:var(--accent);border-radius:50%;transform:translate(-50%,50%);box-shadow:0 0 0 1px var(--accent)}
.review-map-bottom {display:flex;justify-content:space-between;gap:8px;color:var(--muted);margin-top:8px}
.review-tastes>h2 {font-size:var(--type-lead);padding:16px 0}
.review-tastes .taste-columns h2 {font-size:var(--type-body)}
.journey-country:hover,.journey-country:focus-visible {stroke:var(--ink);stroke-width:1.5;outline:none;filter:brightness(.94)}
@media(max-width:640px){.review-map {padding:16px}.review-map-bottom {font-size:var(--type-body);flex-wrap:wrap}.review-map-plot {margin:0;height:160px}}
.review-overview {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:start;margin:24px 0}
.review-overview .review-map {margin:0}
.review-overview .taste-columns {grid-template-columns:1fr;gap:16px}
.review-overview .taste-columns section {padding:0;border:0}
.review-overview .taste-columns h2 {margin:0 0 8px}
.review-overview .taste-columns .chips {display:flex;gap:8px;flex-wrap:wrap}
.review-overview .taste-columns .chip {width:auto;min-height:40px;padding:8px 12px;border-radius:24px}
.review-overview .taste-columns .hint {display:none}
.review-overview .taste-columns .chip:focus-visible {outline:2px solid var(--ink);outline-offset:3px}
.review-overview .review-tastes>h2 {padding:0 0 16px}
.recipe-rationale>.card-sources,.detail-panel>.card-sources {width:max-content;margin-left:auto}
@media(max-width:800px){.review-overview {grid-template-columns:1fr;gap:24px}}
.taste-glossary {margin-top:16px;color:var(--muted)}
.taste-glossary dl {display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:16px 0}
.taste-glossary dd {margin:0}

.review-tastes>h2 {margin:0;font-size:var(--type-lead)}
.taste-selection-help {margin:0 0 24px;line-height:1.5}
.review-tastes .chip[aria-disabled="true"] {opacity:.38;cursor:not-allowed}

.correction-save {margin-top:24px}
.correction-save .fine {margin-top:12px}
.service-form {max-width:640px;display:grid;gap:24px}
.service-actions {display:flex;flex-wrap:wrap;gap:12px;margin-block:24px}
.service-consent {display:block;line-height:1.5}
.service-consent input {width:auto;margin-right:8px}
.service-json {white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;max-height:480px;overflow:auto;padding:16px;background:var(--panel)}
.account-view .detail-panel {display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.account-view .field {width:100%}
.cloud-library-view .detail-panel {margin-block:16px}
.directory-view .detail-panel .service-actions {margin-top:auto}
.directory-view .detail-panel {display:flex;flex-direction:column;gap:16px}
.correction-preview { margin: 24px 0; padding-top: 24px; border-top: 1px solid var(--line, #d2d8d2); }
.correction-heading {display:flex;flex-direction:column;gap:6px}
.correction-heading h3 {margin:0;font-size:var(--type-lead);font-weight:400}
.correction-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:20px 0 0;padding:20px 0;border-block:1px solid var(--line)}
.correction-metrics>div {min-width:0;padding:0 20px;border-left:1px solid var(--line)}
.correction-metrics>div:first-child {padding-left:0;border-left:0}
.correction-metrics dt {color:var(--muted);font-size:var(--type-body);margin-bottom:8px}
.correction-metrics dd {margin:0;font-size:var(--type-title);line-height:1.2;font-variant-numeric:tabular-nums}
.correction-metrics small {font-size:var(--type-body)}
.correction-grind {display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:14px 16px;border-left:3px solid var(--accent);border-radius:0 var(--radius-control) var(--radius-control) 0;background:var(--paper)}
.correction-grind .spec-label {color:var(--muted)}
.correction-grind strong {font-weight:400}
.correction-plan-title {margin:28px 0 0;font-size:var(--type-body);font-weight:400;color:var(--muted)}
@media(max-width:600px){.correction-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0}.correction-metrics>div:nth-child(odd){padding-left:0;border-left:0}.correction-metrics>div{padding-right:0;padding-left:16px}}