:root{--bg:#f6f7f9;--panel:#ffffff;--ink:#18343b;--quiet:#465c63;--key:#0b7285;--hi:#f08c00;--edge:#cbd8dd;--radius:10px;--width:1140px;--f1:'Roboto',system-ui,sans-serif;--font-body:'Roboto',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.78 var(--font-body)}
img{max-width:100%;height:auto} a{color:var(--key);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--f1);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.co-wra{max-width:var(--width);margin:0 auto;padding:0 1rem} .co-mai{max-width:var(--width);margin:0 auto;padding:1.2rem 1rem 3rem}
.co-ski{position:absolute;left:-9999px} .co-ski:focus{left:1rem;top:1rem;background:var(--panel);padding:.5rem;z-index:99}
.co-heain{max-width:var(--width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.co-bra{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--f1);color:var(--ink);text-decoration:none}
.co-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .co-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.co-hea{background:var(--key)} .co-hea a,.co-hea .co-bra,.co-hea summary{color:#fff} .co-hea .co-lan summary{border-color:rgba(255,255,255,.5)} .co-hea .co-lanlis a{color:var(--ink)} .co-hea .co-lanlis a[aria-current]{color:var(--key)}  .co-nav a{border-bottom:2px solid transparent;padding-bottom:2px} .co-nav a:hover,.co-nav a[aria-current]{border-color:var(--key)}
.co-her{margin:1rem 0 1.4rem} .co-lea{font-size:1.12rem;max-width:46em;color:var(--quiet)} .co-her{text-align:center} .co-her .co-lea{margin-left:auto;margin-right:auto}
.co-too{margin:1.4rem 0 2rem}
.co-not{margin:1.4em 0;padding:.9em 1.1em;background:var(--panel);border-left:4px solid var(--hi);border-radius:0 var(--radius) var(--radius) 0}
.co-for{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--panel);border:1px dashed var(--key);border-radius:var(--radius);overflow-x:auto}
.co-tabwra{margin:1.2em 0;overflow-x:auto;border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel)}
.co-tab{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .co-tab th,.co-tab td{padding:.5em .75em;border-bottom:1px solid var(--edge);text-align:left}
.co-tab thead th{background:color-mix(in srgb,var(--edge) 60%,var(--panel))}
ol.co-ste{padding-left:1.3em} ol.co-ste>li{margin:.5em 0}
.co-fig{margin:1.6em 0;text-align:center} .co-fig img{width:100%;max-width:720px;border-radius:var(--radius);border:1px solid var(--edge);background:#fff} .co-fig figcaption{font-size:.9em;color:var(--quiet)}
.co-car{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.co-carh{display:block;padding:1.1rem;background:var(--panel);border-radius:var(--radius);border:1px solid var(--edge);border-top:4px solid var(--key);color:var(--ink);text-decoration:none}
.co-carh b{display:block;font-family:var(--f1);margin-bottom:.35rem} .co-carh span{color:var(--quiet);font-size:.92rem} .co-carh:hover{border-color:var(--key)}
.co-carh--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .co-carh--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--ink) 14%,transparent)}
.co-carimg{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .co-cartxt{display:block;padding:1rem 1.1rem 1.1rem} .co-cartxt>span{display:block}
.co-bli a,.co-bro,.co-poskic{background:none!important}
.co-carmet{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--key)}
.co-car--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .co-car--feat>.co-carh:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .co-car--feat>.co-carh:first-child b{font-size:1.35rem}
.co-bli{display:grid;gap:1rem;margin:1.2em 0} .co-bro{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none}
.co-bro .co-carimg{height:100%;aspect-ratio:auto;min-height:126px} .co-bro b{display:block;font-family:var(--f1);font-size:1.12rem;margin-bottom:.3rem} .co-bro .co-cartxt>span{color:var(--quiet);font-size:.93rem} .co-bro:hover{border-color:var(--key)}
.co-bli--min{list-style:none;padding:0;counter-reset:bl;gap:0} .co-bli--min li{counter-increment:bl;border-top:1px solid var(--edge)} .co-bli--min li:last-child{border-bottom:1px solid var(--edge)}
.co-bli--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--ink);text-decoration:none} .co-bli--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--f1);color:var(--key)}
.co-bli--min b{font-family:var(--f1);font-size:1.15rem} .co-bli--min span{color:var(--quiet);font-size:.93rem} .co-bli--min a:hover b{color:var(--key)}
.co-poshea--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--radius);overflow:hidden} .co-poshea--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.co-posov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .co-posov h1,.co-posov .co-posmet,.co-posov .co-poskic{color:#fff}
.co-poshea--band{background:var(--key);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--radius)} .co-poshea--band h1,.co-poshea--band .co-posmet,.co-poshea--band .co-poskic{color:#fff}
.co-poshea--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .co-poshea--split .co-poscov{margin:0}
.co-toc--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .co-toc--chips li{margin:0} .co-toc--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--edge);border-radius:999px;background:var(--bg);text-decoration:none;font-size:.88rem}
.co-toc--rail{background:none;border:0;border-left:3px solid var(--hi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.co-lan--globe summary{display:flex;align-items:center;gap:.35rem} .co-lank{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .co-lank a{padding:.25rem .7rem;border:1px solid var(--edge);border-radius:999px;text-decoration:none} .co-lank a[aria-current]{background:var(--key);border-color:var(--key);color:#fff}
@media (max-width:700px){.co-car--feat{grid-template-columns:1fr} .co-car--feat>.co-carh:first-child{display:flex} .co-bro{grid-template-columns:1fr} .co-bro .co-carimg{min-height:0;aspect-ratio:1200/630} .co-poshea--split{grid-template-columns:1fr} .co-posov{position:static;background:var(--key);padding:1.2rem} .co-poshea--overlay>img{min-height:0}}
.co-pos{max-width:48rem;margin:0 auto} .co-poshea{margin:.6rem 0 1.2rem} .co-poshea h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.co-poskic{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--key);text-decoration:none}
.co-upd{color:var(--quiet);font-size:.9rem;margin:2rem 0 0} .co-sig{font-style:italic;color:var(--quiet)} .co-posmet{color:var(--quiet);font-size:.92rem;margin:0} .co-poscov{margin:0 0 1.6rem} .co-poscov img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.co-pos .co-lea{font-size:1.2rem;color:var(--ink)} .co-pos .co-lea::first-letter{font-family:var(--f1);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--key)}
.co-pos .co-toc--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--panel);border:1px solid var(--edge);border-left:4px solid var(--key);border-radius:var(--radius);font-size:.95rem}
.co-toc--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .co-toc--post li{margin:.2rem 0}
.co-pos h3{color:var(--key)} .co-pos blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--hi);font-size:1.1em}
.co-faqgri{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .co-faqgri>div{background:var(--panel);border:1px solid var(--edge);border-top:4px solid var(--key);border-radius:var(--radius);padding:1rem} .co-faq h3{margin-top:0;font-size:1rem}
.co-cru{font-size:.88rem;color:var(--quiet);margin:.4rem 0 1rem} .co-cru a{color:var(--quiet)}
.co-cta{margin:2.4rem 0;padding:1.4rem;background:var(--panel);border-radius:var(--radius);border:1px solid var(--edge);border-top:4px solid var(--key);text-align:center}
.co-btn{display:inline-block;padding:.7em 1.4em;background:var(--key);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.co-foo{border-top:1px solid var(--edge);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--quiet);background:var(--panel)}
.co-foo nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .co-foo a{color:var(--quiet)} .co-foo{text-align:center} .co-foo nav{justify-content:center}

.co-toc{margin:1.2rem 0;padding:.8rem 1rem;background:var(--panel);border-radius:var(--radius);border:1px solid var(--edge)} .co-toc ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.co-toc ol{columns:1}}
.co-lan{position:relative} .co-lan summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--edge);border-radius:999px;font-size:.85rem}
.co-lanlis{position:absolute;right:0;top:120%;background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.co-lanlis a{padding:.3rem .5rem;text-decoration:none;color:var(--ink)} .co-lanlis a[aria-current]{font-weight:700;color:var(--key)}
.co-cod{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .co-cod a{text-decoration:none;color:var(--quiet);padding:.1rem .3rem;border-radius:4px} .co-cod a[aria-current]{color:var(--key);background:color-mix(in srgb,var(--key) 12%,transparent)}
[data-spot]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-spot]:empty{margin:0}
[data-spot="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--panel)}
[data-spot="sidebar_left"],[data-spot="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-spot="sidebar_left"]{left:12px} [data-spot="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-spot="sidebar_left"],[data-spot="sidebar_right"]{display:none}}
.co-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--quiet)}
.co-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.co-tab tbody tr:nth-child(even){background:color-mix(in srgb,var(--key) 6%,transparent)}
.co-sec a:not(.co-btn):not(.co-carh){text-decoration-thickness:2px}
:root{--f1:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;--font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif} body{font-size:16px;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility} h1,h2,h3{font-weight:700;letter-spacing:0;text-wrap:balance} .co-bra{font-weight:700} h1{font-size:clamp(1.85rem,4.6vw,2.24rem);line-height:1.08} h2{font-size:clamp(1.3rem,3vw,1.56rem);line-height:1.18} h3{font-size:1.25rem} .co-poshea h1{font-size:clamp(1.95rem,5vw,2.38rem)} p,li{text-wrap:pretty} .co-sec>p,.co-sec>ul,.co-sec>ol,.co-pos p,.co-pos li{max-width:70ch} .co-tab,.co-too output,.co-too [class*=res],.co-too [class*=val]{font-variant-numeric:tabular-nums lining-nums}  
@media (max-width:640px){.co-heain{gap:.5rem} .co-nav{gap:.8rem}}

/* Live ingredient conversion: compact input and a broad terracotta answer. */
.mm {
  container-type: inline-size;
  --mm-tint: color-mix(in srgb, var(--key) 11%, var(--bg));
  --mm-wash: color-mix(in srgb, var(--hi) 7%, var(--bg));
  font: 400 17px/1.6 var(--font-body);
  color: var(--ink);
  text-align: left;
  min-width: 0;
  max-width: 100%;
  isolation: isolate;
}
.mm * { box-sizing: border-box; }
.mm [hidden] { display: none !important; }
.mm button, .mm input, .mm select, .mm textarea { font: inherit; color: var(--ink); }
.mm button, .mm select { cursor: pointer; }
.mm input, .mm select, .mm textarea {
  background: var(--panel);
  border: 1px solid var(--quiet);
  border-radius: 5px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.mm input, .mm select { min-height: 48px; padding: 10px 12px; line-height: 1.4; font-size: 17px; }
.mm input, .mm select { transition: border-color .16s ease; }
.mm input:hover, .mm select:hover { border-color: var(--key); }
.mm input:focus-visible, .mm select:focus-visible, .mm button:focus-visible,
.mm summary:focus-visible, .mm a:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }
.mm input::placeholder { color: var(--quiet); opacity: 1; }
.mm button {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 5px;
  background: var(--panel);
  font-weight: 700;
  transition: background .16s ease, transform .16s ease;
}
.mm button:hover:not(:disabled) { background: var(--mm-tint); }
.mm button:active:not(:disabled) { transform: translateY(1px); }
.mm button:disabled { opacity: .7; cursor: not-allowed; }
.mm label { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0; margin: 0 0 6px; }
.mm p { margin: 10px 0; }
.mm a { font-size: 16px; color: var(--key); text-underline-offset: 3px; }
.mm a:hover { text-decoration-thickness: 2px; }
.mm h2 { font: 700 clamp(23px, 2.3vw, 29px)/1.3 var(--f1); margin: 0 0 12px; letter-spacing: 0; }
.mm-modes { display: flex; gap: 6px; margin-bottom: 22px; max-width: 580px; }
.mm-modes button { flex: 1; padding: 12px 16px; font-size: 17px; line-height: 1.4; }
.mm-modes button[aria-pressed=true] { background: var(--key); color: var(--bg); }
.mm-modes button[aria-pressed=true]:hover { background: color-mix(in srgb, var(--key) 92%, var(--ink)); }
.mm-workspace { min-width: 0; }
.mm-bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.mm-controls { padding: 4px 0; background: transparent; border: 0; border-radius: 0; min-width: 0; }
.mm-inputs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.mm-controls > select { margin-bottom: 18px; }
.mm-controls > label { margin-top: 0; }
.mm-controls > .mm-hint { margin: 8px 0 18px; }
.mm-unitpair { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 10px; align-items: end; margin: 18px 0; }
.mm-unitpair > div { min-width: 0; }
.mm-unitpair select { padding: 10px 8px; font-size: 16px; }
.mm-unitpair > button { height: 48px; width: 44px; min-width: 44px; padding: 0; font-size: 26px; font-weight: 400; color: var(--key); }
.mm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 12px; }
.mm-actions button { font-size: 16px; }
.mm-actions button:first-child { background: var(--key); color: var(--bg); }
.mm-actions button:first-child:hover:not(:disabled) { background: color-mix(in srgb, var(--key) 92%, var(--ink)); }
.mm-hint { font-size: 16px; color: var(--quiet); line-height: 1.5; }
.mm-error { color: var(--key); font-size: 16px; font-weight: 700; }
.mm-error:empty { margin: 0; }
.mm [role=status] { font-size: 16px; color: var(--key); font-weight: 700; }
.mm #mm-status:empty { margin: 0; }
.mm-rounding { margin-top: 16px; padding: 0; background: transparent; border: 0; }
.mm-rounding summary { min-height: 44px; padding: 10px 0; color: var(--ink); font-size: 17px; cursor: pointer; }
.mm-rounding[open] { padding-bottom: 8px; }
.mm-rounding label { margin-top: 12px; }
.mm-rounding select { max-width: 280px; }
.mm-result {
  background: var(--mm-tint);
  padding: 28px 30px;
  border: 0;
  border-radius: 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mm-answer-in .25s ease-out;
}
.mm-result-label { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mm-equation { font-size: 17px; color: var(--ink); overflow-wrap: anywhere; margin-bottom: 12px; line-height: 1.6; }
.mm-number { font: 700 clamp(34px, 3.8vw, 48px)/1.15 var(--f1); color: var(--key); letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 16px; }
.mm-math { font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; border: 0; padding: 0; background: transparent; }
.mm-source { font-size: 16px; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; margin-top: 16px !important; }
.mm-viz { width: 100%; margin: 12px 0 0; min-width: 0; }
.mm-viz svg { display: block; width: 100%; height: auto; max-height: 250px; overflow: visible; }
.mm-viz svg path, .mm-viz svg rect { transition: fill .2s ease, opacity .2s ease; }
.mm-viz-caption { font-size: 16px; color: var(--quiet); line-height: 1.5; margin: 8px 0 0 !important; }
.mm-viz:empty { margin: 0; }
.mm-result a { align-self: flex-start; font-size: 16px; margin-top: 8px; }
.mm-result > .mm-hint { margin: 12px 0 8px; color: var(--ink); }
.mm-reference { margin-top: 28px; border: 0; border-radius: 0; background: transparent; }
.mm-reference summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-size: 18px; font-weight: 700; color: var(--ink); }
.mm-reference summary:hover { color: var(--key); }
.mm-reference #mm-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 16px 0; }
.mm-compare-card { min-width: 0; padding: 0; }
.mm-compare-card > span { display: block; color: var(--quiet); font-size: 17px; margin-bottom: 4px; }
.mm-compare-card > strong { display: block; font: 700 25px/1.4 var(--f1); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mm-compare-bar { height: 8px; border-radius: 4px; background: var(--panel); margin-top: 12px; position: relative; overflow: hidden; }
.mm-compare-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--mm-fill); background: var(--key); }
.mm-compare-card:nth-child(2) .mm-compare-bar::after { background: var(--hi); }
.mm-compare-card:nth-child(3) .mm-compare-bar::after { background: var(--ink); }
.mm-recipe { margin-top: 36px; padding: 28px; background: var(--panel); border: 0; border-radius: 10px; }
.mm-recipe-head { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 28px; align-items: start; margin-bottom: 16px; }
.mm-recipe-head p { font-size: 17px; color: var(--quiet); max-width: 54ch; }
.mm-recipe-head > div:last-child { background: transparent; padding: 0; border: 0; }
.mm-recipe-head label { font-size: 17px; line-height: 1.4; }
.mm-recipe-head input { font-variant-numeric: tabular-nums; }
.mm-recipe-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, .5fr) minmax(100px, 1.2fr) minmax(100px, 1fr) minmax(80px, .7fr) auto; gap: 10px; align-items: center; padding: 12px 0; }
.mm-recipe-row input, .mm-recipe-row select { min-height: 48px; padding: 10px 8px; font-size: 16px; }
.mm-recipe-row input:nth-child(2) { font-variant-numeric: tabular-nums; }
.mm-row-result { font: 700 17px/1.5 var(--font-body); font-variant-numeric: tabular-nums; color: var(--key); padding: 8px 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.mm .mm-row-delete { min-height: 44px; padding: 10px; font-size: 16px; color: var(--ink); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.mm .mm-row-delete:hover { color: var(--key); }
.mm-invalid input { border-color: var(--key); background: var(--mm-tint); }
.mm-invalid .mm-row-result { color: var(--key); }
.mm-recipe > .mm-actions { margin-top: 20px; }
.mm #mm-recipe-error { font-size: 16px; color: var(--key); font-weight: 700; }
.mm-general-head { display: grid; grid-template-columns: auto minmax(150px, 1fr) auto minmax(160px, 1fr); gap: 14px; align-items: center; margin-bottom: 24px; }
.mm-general-head label { margin: 0; font-size: 17px; }
.mm-general-head input, .mm-general-head select { font-size: 17px; }
.mm-general-head input[type=search] { appearance: none; }
.mm-table-wrap { overflow-x: auto; max-width: 100%; padding: 12px 0; }
.mm table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 17px; line-height: 1.5; color: var(--ink); }
.mm caption { text-align: left; padding: 8px 0 18px; font-size: 17px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.mm th, .mm td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--edge); overflow-wrap: anywhere; }
.mm thead th { font-size: 17px; letter-spacing: 0; text-transform: none; background: var(--panel); font-weight: 700; }
.mm thead th:first-child { width: 45%; }
.mm thead th:nth-child(2) { width: 35%; }
.mm thead th:last-child { width: 20%; text-align: right; }
.mm tbody th { font-weight: 400; }
.mm tbody tr:nth-child(even) { background: var(--panel); }
.mm .mm-selected { background: var(--mm-tint) !important; }
.mm .mm-selected th { font-weight: 700; }
.mm-table-value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--key); }
.mm tbody td:last-child { text-align: right; }
.mm .mm-table-copy { padding: 10px; min-height: 44px; font-size: 16px; border: 0; }
.mm .mm-copyarea { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.mm #mm-amount, .mm #mm-gamount { font-variant-numeric: tabular-nums; font-size: 22px; }
.mm #mm-ingredient { font-weight: 700; }
.mm #mm-clear { margin-left: auto; }
.mm #mm-rows:empty { padding: 16px 0; }
.mm-print-sheet { display: none; }
@keyframes mm-answer-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@container (max-width: 950px) {
  .mm-recipe-row { grid-template-columns: minmax(80px, 1fr) minmax(60px, .5fr) minmax(110px, 1.2fr); gap: 12px; }
  .mm-recipe-row select:nth-of-type(2) { grid-column: 1; }
  .mm-recipe-row output { grid-column: 2; }
  .mm-recipe-row button { grid-column: 3; justify-self: end; }
  .mm-general-head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@container (max-width: 700px) {
  .mm-bench { grid-template-columns: 1fr; gap: 20px; }
  .mm-controls { padding: 0; }
  .mm-result { padding: 24px; }
  .mm-number { font-size: 38px; }
  .mm-viz svg { max-height: 240px; }
  .mm-modes { max-width: none; }
  .mm-modes button { padding: 12px; }
  .mm-recipe { padding: 22px; }
  .mm-recipe-head { grid-template-columns: minmax(0, 1fr) 140px; gap: 20px; }
  .mm-reference #mm-comparison { gap: 18px; }
}
@container (max-width: 430px) {
  .mm-modes { margin-bottom: 12px; }
  .mm-controls > .mm-hint { margin-bottom: 12px; }
  .mm-unitpair { margin: 12px 0; }
  .mm-controls .mm-actions { margin: 12px 0 8px; }
  .mm-rounding { margin-top: 8px; }
  .mm-modes button { font-size: 16px; padding: 10px 8px; }
  .mm-inputs { gap: 12px; }
  .mm-unitpair { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 6px; }
  .mm-unitpair select { font-size: 16px; padding: 10px 5px; }
  .mm-result { padding: 22px 18px; }
  .mm-number { font-size: 34px; }
  .mm-reference #mm-comparison { grid-template-columns: 1fr; gap: 20px; }
  .mm-compare-card { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
  .mm-compare-bar { grid-column: 1/-1; }
  .mm-compare-card > span { align-self: center; margin: 0; }
  .mm-recipe { padding: 18px; }
  .mm-recipe-head { grid-template-columns: 1fr; gap: 12px; }
  .mm-recipe-head > div:last-child { display: flex; align-items: center; gap: 16px; }
  .mm-recipe-head input { width: 100px; flex: none; }
  .mm-recipe-head label { margin: 0; }
  .mm-recipe-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .mm-recipe-row input:first-child { grid-column: 1/-1; }
  .mm-recipe-row input:nth-child(2) { grid-column: 1; }
  .mm-recipe-row select:first-of-type { grid-column: 2; }
  .mm-recipe-row select:nth-of-type(2) { grid-column: 1; }
  .mm-recipe-row output { grid-column: 2; text-align: right; }
  .mm-recipe-row button { grid-column: 1/-1; }
  .mm-general-head { grid-template-columns: 1fr; gap: 8px; }
  .mm-general-head label:nth-of-type(2) { margin-top: 10px; }
  .mm-actions { gap: 8px; }
  .mm-actions button { padding: 10px 12px; }
  .mm #mm-clear { margin-left: 0; }
  .mm table { font-size: 16px; }
  .mm thead th { font-size: 16px; }
  .mm th, .mm td { padding: 12px 6px; }
  .mm .mm-table-copy { font-size: 16px; padding: 10px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm * { transition: none !important; animation: none !important; }
  .mm button:active:not(:disabled) { transform: none; }
}
@media print {
  .mm-modes, .mm-controls, .mm-reference, .mm-general-head, .mm-actions, .mm-row-delete { display: none !important; }
  .mm #mm-general { display: none !important; }
  .mm #mm-kitchen { display: block !important; }
  .mm-bench { display: block; }
  .mm-result { padding: 12px; background: var(--bg); break-inside: avoid; animation: none; }
  .mm-number { font-size: 26px; }
  .mm-viz { max-width: 350px; }
  .mm-viz svg { max-height: 180px; }
  .mm-recipe { padding: 12px; background: transparent; margin-top: 16px; }
  .mm-recipe-head { grid-template-columns: 1fr 140px; }
  .mm-recipe-head input { border: 0; min-height: 0; padding: 0; }
  .mm #mm-rows { display: none !important; }
  .mm-print-sheet { display: block; }
  .mm-print-sheet table { table-layout: auto; font-size: 9pt; line-height: 1.4; }
  .mm-print-sheet thead th { width: auto !important; text-align: left !important; font-size: 9pt; }
  .mm-print-sheet td:last-child { text-align: left; }
  .mm-print-sheet tr { break-inside: avoid; }
  .mm-print-sheet p { font-size: 9pt; }
  .mm [role=status] { display: none !important; }
}
/* QA: explain the task and make the recipe fields usable without guessing. */
.mm-how { margin: 0 0 18px !important; font-size: 17px; color: var(--ink); line-height: 1.5; max-width: 60ch; }
.mm-number:focus-visible { outline: 3px solid var(--hi); outline-offset: 6px; border-radius: 3px; }
.mm .mm-next { margin-top: 16px; font-weight: 700; }
.mm-row-field { min-width: 0; margin: 0 !important; font-size: 16px !important; line-height: 1.4; }
.mm-row-field input, .mm-row-field select { display: block; margin-top: 6px; font-weight: 400; }
.mm-recipe-row { align-items: end; }
.mm-row-result { font-size: 16px; text-align: left; }
.mm-invalid .mm-row-result { grid-column: 1 / -1; }
.mm #mm-scale-help { font-size: 16px; max-width: 24ch; }
.mm #mm-scale-error { font-size: 16px; }
@container (max-width: 950px) {
  .mm-recipe-row > label:nth-child(4) { grid-column: 1; }
  .mm-recipe-row output { grid-column: 2; }
  .mm-recipe-row button { grid-column: 3; }
}
@container (max-width: 430px) {
  .mm-inputs { grid-template-columns: 1fr; }
  .mm-unitpair { grid-template-columns: 1fr 44px; gap: 10px; }
  .mm-unitpair > div { grid-column: 1; }
  .mm-unitpair > div:last-child { grid-row: 2; }
  .mm-unitpair > button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .mm-unitpair select { padding: 10px; }
  .mm-recipe-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm-recipe-row > label:nth-child(1), .mm-recipe-row > label:nth-child(3), .mm-recipe-row > label:nth-child(4) { grid-column: 1 / -1; }
  .mm-recipe-row > label:nth-child(2) { grid-column: 1 / -1; }
  .mm-recipe-row select { grid-column: auto !important; }
  .mm-recipe-row output { grid-column: 1; font-size: 18px; }
  .mm-recipe-row button { grid-column: 2; }
  .mm-recipe-head > div:last-child { display: block; }
  .mm-recipe-head input { width: 100%; margin-top: 6px; }
  .mm #mm-scale-help { max-width: none; }
}

/* D · Dashboard: a single measurement toolbar and three open result tiles. */
.mm-bench { display: block; }
.mm-controls { padding: 20px 24px; background: var(--panel); border-radius: 8px; }
.mm-how { max-width: none; margin-bottom: 16px !important; }
.mm-toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(100px, .65fr) minmax(340px, 2fr); gap: 18px; align-items: start; }
.mm-toolbar > * { min-width: 0; }
.mm-toolbar .mm-unitpair { margin: 0; }
.mm-toolbar .mm-unitpair > button { background: var(--mm-tint); }
.mm-controls .mm-hint { margin: 8px 0 0; }
.mm-controls .mm-actions { margin: 16px 0 0; }
.mm-controls .mm-rounding { margin-top: 6px; }
.mm-rounding summary { width: fit-content; }
.mm-general-head { padding: 16px 24px; margin-bottom: 12px; background: var(--mm-tint); border-radius: 8px; }
#mm-general .mm-toolbar { grid-template-columns: minmax(100px, .65fr) minmax(340px, 2fr); }
.mm-result.mm-dashboard { padding: 0; background: transparent; border-radius: 0; margin-top: 20px; overflow: visible; }
.mm-tiles { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 16px; }
.mm-tile { min-width: 0; padding: 20px 22px; background: var(--panel); border-radius: 8px; }
.mm-tile-main { background: var(--key); color: var(--panel); }
.mm-tile-main .mm-result-label, .mm-tile-main .mm-number { color: var(--panel); }
.mm-tile .mm-number { font-size: clamp(30px, 3vw, 42px); margin: 14px 0 0; }
.mm-tile .mm-equation, .mm-tile .mm-math { margin: 14px 0 0; font-size: 18px; }
.mm-scale-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 10px 0 0; }
.mm-scale-panel { min-width: 0; }
.mm .mm-scale-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.mm-scale-panel svg { width: 100%; height: auto; max-height: none; }
.mm-dashboard .mm-viz { margin-top: 20px; }
.mm-dashboard > .mm-source { margin-top: 16px !important; }
.mm-dashboard > .mm-hint { margin: 8px 0; }
.mm-dashboard > a { margin: 6px 0; }
.mm-dashboard .mm-viz-caption { max-width: 85ch; }
.mm-reference { margin-top: 24px; }
.mm-recipe { padding: 24px; background: var(--panel); }
.mm-compare-bar { background: var(--edge); }
.mm-modes { max-width: none; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--edge); }
.mm-modes button { flex: 0 1 auto; border-radius: 6px 6px 0 0; min-width: 210px; }
.mm-modes button[aria-pressed=false] { background: transparent; }
.mm input[aria-invalid=true] { border: 2px solid var(--key); }
@container (max-width: 850px) {
  .mm-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .mm-toolbar .mm-unitpair { grid-column: 1 / -1; }
  #mm-general .mm-toolbar { grid-template-columns: minmax(0, 1fr); }
  .mm-tiles { grid-template-columns: 1fr 1fr; }
  .mm-tile-main { grid-column: 1 / -1; }
  .mm-tile .mm-number { font-size: 36px; }
  .mm-general-head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@container (max-width: 500px) {
  .mm-controls { padding: 18px 16px; }
  .mm-toolbar, #mm-general .mm-toolbar { grid-template-columns: 1fr; }
  .mm-toolbar .mm-unitpair { grid-template-columns: minmax(0, 1fr) 44px; }
  .mm-toolbar .mm-unitpair > div { grid-column: 1; }
  .mm-toolbar .mm-unitpair > div:last-child { grid-row: 2; }
  .mm-toolbar .mm-unitpair > button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .mm-modes button { flex: 1; min-width: 0; padding: 12px 8px; }
  .mm-tiles { grid-template-columns: 1fr; gap: 10px; }
  .mm-tile { padding: 18px; }
  .mm-tile-main { grid-column: auto; }
  .mm-tile .mm-equation, .mm-tile .mm-math { margin-top: 6px; font-size: 17px; }
  .mm-scale-pair { grid-template-columns: 1fr; gap: 18px; }
  .mm-general-head { grid-template-columns: 1fr; padding: 16px; gap: 8px; }
  .mm-general-head label { margin-top: 4px; }
  .mm-recipe { padding: 18px 16px; }
}
@media print {
  .mm-toolbar, #mm-general .mm-toolbar { display: block; }
  .mm-tiles { display: block; }
  .mm-tile { background: var(--panel); }
  .mm-tile-main .mm-number, .mm-tile-main .mm-result-label { color: var(--ink); }
}

/* A continuous brand band keeps the controls together without nested cards. */
@media screen {
  .mm-modes, .mm #mm-status, .mm-general-head, .mm-controls {
    background: var(--key);
    box-shadow: 0 0 0 100vmax var(--key);
    clip-path: inset(-1px -100vmax);
    border-radius: 0;
    color: var(--panel);
  }
  .mm-modes { border: 0; margin: 0; padding-bottom: 18px; gap: 8px; }
  .mm-modes button { border-radius: 5px; }
  .mm-modes button[aria-pressed=true] { background: var(--panel); color: var(--key); }
  .mm-modes button[aria-pressed=true]:hover { background: var(--bg); }
  .mm-modes button[aria-pressed=false] { color: var(--panel); background: transparent; }
  .mm-modes button[aria-pressed=false]:hover { background: color-mix(in srgb, var(--panel) 15%, var(--key)); }
  .mm #mm-status { margin: 0; padding-block: 6px; color: var(--panel); }
  .mm #mm-status:empty { padding: 0; }
  .mm-controls { padding: 0 0 18px; }
  .mm-controls .mm-how, .mm-controls .mm-hint,
  .mm-controls .mm-error, .mm-controls .mm-rounding summary { color: var(--panel); }
  .mm-controls label { color: var(--panel); }
  .mm-controls .mm-actions button:first-child { background: var(--hi); color: var(--ink); }
  .mm-controls .mm-actions button:first-child:hover:not(:disabled) { background: color-mix(in srgb, var(--hi) 88%, var(--panel)); }
  .mm-toolbar .mm-unitpair > button { background: var(--panel); }
  .mm-controls input[aria-invalid=true] { border-color: var(--hi); }
  .mm-general-head { padding: 0 0 20px; margin: 0; }
  .mm-general-head label { color: var(--panel); }
  .mm-result.mm-dashboard { margin-top: 26px; }
}

/* Quantity fits beside the ingredient on phones; complete unit names stay wide. */
@container (max-width: 500px) {
  #mm-kitchen .mm-toolbar { grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; }
  #mm-kitchen .mm-toolbar .mm-unitpair { grid-column: 1 / -1; }
  #mm-kitchen #mm-ingredient { font-size: 16px; padding-inline: 8px; }
  /* An error message needs the full row, not the 100px quantity column. */
  #mm-kitchen .mm-toolbar > div:has(> .mm-error:not(:empty)) { grid-column: 1 / -1; }
}

/* design: sites/<d>/design/site.css */
/* Clear recipe measurements: white workspace, terracotta answers, no ornaments. */
body {
  background: var(--bg);
  background-image: none;
  color: var(--ink);
  font: 400 17px/1.7 var(--font-body);
}
body::before { content: none; }
.co-wra { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 28px; }
.co-mai { padding-top: 0; padding-bottom: 64px; }
.co-mai h1, .co-mai h2, .co-mai h3 {
  font-family: var(--f1);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.co-mai h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.18; margin: 0 0 10px; }
.co-mai h2 { font-size: clamp(25px, 2.5vw, 32px); line-height: 1.3; margin: 0 0 18px; }
.co-mai h3 { font-size: 22px; line-height: 1.4; margin: 28px 0 12px; }
.co-mai p { margin: 12px 0 20px; }
.co-mai a { color: var(--key); text-underline-offset: 3px; }
.co-mai a:hover { text-decoration-thickness: 2px; }
.co-lea { font-size: 18px; line-height: 1.6; max-width: 76ch; color: var(--quiet); }
.co-hea {
  position: static;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: none;
}
.co-heain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1140px;
  margin-inline: auto;
  padding: 24px 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.co-bra {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 21px/1.3 var(--f1);
  color: var(--ink);
  letter-spacing: 0;
  text-decoration: none;
}
.co-bra svg {
  width: 34px;
  height: 34px;
  padding: 5px;
  background: var(--key);
  color: var(--bg);
  border: 0;
  border-radius: 6px;
  flex: none;
}
.co-hea .co-bra { color: var(--ink); }
.co-hea .co-bra:hover { color: var(--key); }
.co-bra svg { background: transparent; color: var(--key); padding: 0; }
.co-bra svg path { stroke: currentColor; }
.co-bra svg > rect { stroke: none; }
.co-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.co-nav > a {
  color: var(--ink);
  font: 700 16px/1.5 var(--font-body);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
}
.co-nav > a:hover { color: var(--key); text-decoration: underline; text-underline-offset: 5px; }
.co-lan { position: relative; max-width: 100%; font-size: 16px; color: var(--ink); }
.co-lan summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  background: var(--panel);
  color: var(--ink);
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
}
.co-lanlis {
  background: var(--bg);
  color: var(--ink);
  padding: 8px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 10%, transparent);
  min-width: 168px;
  z-index: 30;
}
.co-lanlis a { display: block; padding: 10px; font-size: 16px; color: var(--ink); text-decoration: none; }
.co-lanlis a:hover { background: var(--panel); color: var(--key); }
.co-cod, .co-lank { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 16px; }
.co-cod a, .co-lank a {
  padding: 10px 8px;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--quiet);
  font-size: 16px;
  text-decoration: none;
}
.co-cod a[aria-current], .co-lank a[aria-current] { background: var(--panel); color: var(--key); }
.co-lan a:focus-visible, .co-lan summary:focus-visible, .co-nav a:focus-visible,
.co-cod a:focus-visible, .co-lank a:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }
/* The title is an introduction to the form, not a separate screen. */
.co-her, .co-her--art {
  display: block;
  position: static;
  margin: 12px 0 26px;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  box-shadow: none;
}
.co-her::before, .co-her::after { content: none; }
.co-her h1 { max-width: none; font-size: clamp(30px, 3.2vw, 42px); }
.co-her .co-lea { margin: 0; max-width: none; font-size: 18px; color: var(--quiet); }
.co-too { padding: 0; margin: 0 0 48px; border: 0; background: transparent; box-shadow: none; min-width: 0; }
.co-lay { gap: 32px; }
.co-toc {
  margin: 24px 0 44px;
  padding: 20px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 17px;
}
.co-toc strong, .co-toc b { display: block; font-size: 20px; margin-bottom: 12px; font-weight: 700; }
.co-toc ol, .co-toc ul { padding-left: 24px; margin: 0; columns: 2; column-gap: 40px; }
.co-toc li { margin: 8px 0; break-inside: avoid; }
.co-toc a { color: var(--ink); text-decoration: underline; border: 0; }
.co-sec {
  padding: 0;
  margin: 0 0 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-wrap: anywhere;
}
.co-sec:nth-of-type(even) { background: transparent; }
.co-sec::before, .co-sec > h2::before, .co-sec > h2::after { content: none; }
.co-sec h2 { padding: 0; border: 0; }
.co-sec > p, .co-sec > ul, .co-sec > ol { max-width: 73ch; }
.co-for {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--panel);
  border: 0;
  border-radius: 6px;
  font: 400 17px/1.8 var(--font-body);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.co-tabwra { max-width: 100%; overflow-x: auto; border: 0; border-radius: 0; background: transparent; margin: 28px 0; }
.co-tab, .co-pos table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.6; background: transparent; }
.co-tab caption, .co-pos table caption { padding: 0 0 16px; background: transparent; color: var(--ink); font-size: 17px; font-weight: 700; text-align: left; border: 0; }
.co-tab th, .co-tab td, .co-pos table th, .co-pos table td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: top; }
.co-tab thead th, .co-pos table thead th { background: var(--panel); color: var(--ink); font-size: 17px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.co-tab tbody tr:nth-child(even), .co-pos table tbody tr:nth-child(even) { background: var(--panel); }
.co-tab td, .co-pos table td { font-variant-numeric: tabular-nums; }
.co-fig { max-width: 720px; margin: 32px 0; }
.co-fig img { display: block; width: 100%; height: auto; border: 0; border-radius: 6px; background: transparent; }
.co-fig figcaption { margin: 12px 0 0; color: var(--quiet); font-size: 16px; line-height: 1.6; text-align: left; border: 0; padding: 0; }
.co-ste { list-style: decimal; display: block; margin: 24px 0; padding-left: 28px; counter-reset: none; }
.co-ste > li { padding: 4px 0 4px 5px; margin: 10px 0; border: 0; border-radius: 0; background: transparent; line-height: 1.7; }
.co-ste > li::before { content: none; }
.co-ste > li::marker { color: var(--key); font-weight: 700; }
/* Large subject drawings belong with the guides below the converter. */
.co-car { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin: 28px 0; }
.co-carh {
  display: block;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none !important;
  overflow: hidden;
  transition: transform .18s ease;
}
.co-carh:hover { transform: translateY(-2px); box-shadow: none; }
.co-carimg { display: block; width: 100%; aspect-ratio: 1200/630; height: auto; min-height: 0; object-fit: contain; border: 0; border-radius: 8px; background: var(--panel); }
.co-cartxt { display: block; padding: 20px 0; }
.co-carh b, .co-carh h3 { display: block; font: 700 23px/1.4 var(--f1); color: var(--ink); letter-spacing: 0; margin: 0 0 12px; }
.co-cartxt > span, .co-cartxt > p { display: block; font-size: 17px; color: var(--quiet); line-height: 1.65; margin: 0; }
.co-carmet { font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.co-bli { display: grid; gap: 36px; margin: 32px 0; }
.co-bro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 32px; border: 0; border-radius: 0; background: transparent; text-decoration: none !important; }
.co-bro .co-carimg { height: auto; min-height: 0; border: 0; }
.co-bro .co-cartxt { padding: 12px 0; }
.co-bro b, .co-bro h3 { font-size: 26px; max-width: 28ch; }
.co-bro:hover b { color: var(--key); }
.co-cta { padding: 24px; margin: 32px 0; background: var(--panel); border: 0; border-radius: 6px; text-align: left; }
.co-mai .co-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; font-size: 17px; letter-spacing: 0; text-transform: none; background: var(--key); color: var(--bg); border: 0; border-radius: 6px; text-decoration: none; box-shadow: none; }
.co-mai .co-btn:hover { text-decoration: underline; }
.co-cru { margin: 10px 0 24px; color: var(--quiet); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.co-pos { max-width: 940px; margin-inline: auto; }
.co-poshea { margin: 24px 0; padding: 0 0 20px; border: 0; background: transparent; border-radius: 0; color: var(--ink); }
.co-poshea h1 { font-size: clamp(30px, 3.3vw, 42px); line-height: 1.22; margin: 14px 0; max-width: 24ch; }
.co-poshea--split, .co-poshea--overlay { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.co-poshea--split > div { grid-column: 1; grid-row: 1; }
.co-poshea--split > .co-poscov, .co-poshea--overlay > img { grid-column: 2; grid-row: 1; }
.co-poshea--overlay > img { width: 100%; height: auto; min-height: 0; object-fit: contain; border: 0; border-radius: 8px; }
.co-posov { position: static; grid-column: 1; grid-row: 1; padding: 0; background: transparent; color: var(--ink); }
.co-posov h1 { color: var(--ink); }
.co-poskic { font: 400 17px/1.5 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--key); }
.co-posmet { font-size: 16px; color: var(--quiet); }
.co-poscov { margin: 0; background: transparent; border: 0; border-radius: 8px; overflow: hidden; }
.co-poscov img { display: block; width: 100%; height: auto; }
.co-pos > p, .co-pos > ul, .co-pos > ol { max-width: 72ch; }
.co-pos > p.co-lea { font-size: 20px; line-height: 1.75; color: var(--ink); margin: 28px 0; max-width: 68ch; }
.co-pos .co-lea::first-letter { float: none; font: inherit; margin: 0; color: inherit; }
.co-toc--post, .co-toc--chips, .co-toc--rail { position: static !important; top: auto !important; padding: 20px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none; margin: 24px 0 36px; }
.co-toc--chips ol { display: block; padding-left: 24px; list-style: decimal; }
.co-toc--chips a { display: inline; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 17px; color: var(--ink); }
.co-faq { margin: 44px 0; }
.co-faqgri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.co-faq details, .co-faqgri > div { padding: 0; border: 0; border-radius: 0; background: transparent; min-width: 0; }
.co-faq summary { padding: 12px 0; font-size: 18px; line-height: 1.5; font-weight: 700; cursor: pointer; }
.co-faq p, .co-faq details p { font-size: 17px; line-height: 1.7; color: var(--quiet); margin: 10px 0 20px; }
.co-foo { background: var(--panel); color: var(--quiet); border: 0; margin-top: 0; padding: 36px 0; }
.co-foo::before { content: none; }
.co-fooin { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 40px; max-width: 1140px; padding-inline: 28px; margin: auto; font-size: 16px; }
.co-fooin > p { max-width: 42ch; margin: 0; }
.co-fooin nav, .co-fooin > div { display: flex; flex-wrap: wrap; gap: 12px 20px; max-width: 560px; }
.co-foo a { font-size: 16px; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 650px) {
  .co-wra { padding-inline: 18px; }
  .co-heain { padding: 12px 18px; gap: 6px; }
  .co-bra { font-size: 19px; }
  .co-nav { width: 100%; margin-left: 0; justify-content: flex-start; gap: 16px; }
  .co-lan, .co-cod, .co-lank { margin-left: auto; }
  .co-her { margin: 8px 0 22px; }
  .co-her .co-lea { font-size: 17px; }
  .co-toc ol, .co-toc ul { columns: 1; }
  .co-sec { margin-bottom: 40px; }
  .co-tab, .co-pos table { font-size: 16px; }
  .co-tab th, .co-tab td, .co-pos table th, .co-pos table td { padding: 12px 8px; }
  .co-tab thead th, .co-pos table thead th { font-size: 16px; }
  .co-for { padding: 16px; font-size: 16px; }
  .co-car, .co-car--feat { grid-template-columns: 1fr; gap: 20px; }
  .co-car--feat > .co-carh:first-child { display: block; }
  .co-bro { grid-template-columns: 1fr; gap: 6px; }
  .co-bro b { font-size: 23px; }
  .co-cta { padding: 20px; }
  .co-poshea--split, .co-poshea--overlay { grid-template-columns: 1fr; gap: 16px; }
  .co-poshea--split > div, .co-posov { grid-column: 1; grid-row: 1; }
  .co-poshea--split > .co-poscov, .co-poshea--overlay > img { grid-column: 1; grid-row: 2; max-width: 480px; }
  .co-pos > p.co-lea { font-size: 18px; }
  .co-faqgri { grid-template-columns: 1fr; gap: 16px; }
  .co-fooin { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { .co-carh { transition: none; } .co-carh:hover { transform: none; } }

/* Assigned D art direction: teal measurement dashboard, orange output scale. */
:root { --bg: #f6f7f9; --panel: #ffffff; --ink: #18343b; --quiet: #465c63; --key: #0b7285; --hi: #f08c00; --edge: #cbd8dd; }
.co-hea { background: var(--key); color: var(--panel); }
.co-heain { padding-block: 16px; }
.co-hea .co-bra, .co-hea .co-bra:hover, .co-hea .co-nav > a, .co-hea .co-nav > a:hover, .co-hea .co-bra svg { color: var(--panel); }
.co-hea .co-bra svg { background: transparent; }
.co-hea .co-nav > a:hover { text-decoration-color: var(--hi); }
.co-hea .co-lan summary { background: var(--panel); color: var(--ink); }
.co-hea .co-lanlis { background: var(--panel); color: var(--ink); }
.co-hea .co-lanlis a { color: var(--ink); background: transparent; }
.co-hea .co-lanlis a:hover { color: var(--key); background: var(--bg); }
.co-hea .co-cod a, .co-hea .co-lank a { color: var(--panel); }
.co-hea .co-cod a[aria-current], .co-hea .co-lank a[aria-current] { background: var(--panel); color: var(--key); }
.co-her, .co-her--art { margin-top: 28px; margin-bottom: 22px; }
.co-her h1 { font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); }
.co-her .co-lea { color: var(--ink); }
.co-lay { display: block; }
/* Main reference sections follow the tool in two readable columns. */
.co-mai:has(.co-too) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; }
.co-mai:has(.co-too) > * { grid-column: 1 / -1; }
.co-mai:has(.co-too) > .co-sec:not(.co-sec--guides):not(.co-faq) { grid-column: auto; min-width: 0; margin-bottom: 40px; }
.co-toc { padding: 20px 0; margin: 0 0 32px; }
.co-for { background: var(--panel); }
.co-tab th, .co-pos table th { font-weight: 700; }
.co-tab thead th, .co-pos table thead th { color: var(--ink); background: color-mix(in srgb, var(--key) 12%, var(--panel)); }
.co-foo { background: var(--ink); color: var(--panel); padding-block: 32px; }
.co-foo a, .co-foo b, .co-foo strong { color: var(--panel); }
.co-foo a:hover { text-decoration-color: var(--hi); }
@media (max-width: 740px) {
  .co-heain { padding-block: 12px; gap: 12px; }
  .co-her, .co-her--art { margin-top: 22px; }
  .co-mai:has(.co-too) { display: block; }
}

/* Article metadata must remain readable when the shared header uses overlay classes. */
.co-pos .co-poshea .co-poskic { color: var(--key); }
.co-pos .co-poshea .co-posmet { color: var(--quiet); }
.co-mai:has(.co-too) .co-tab { font-size: 16px; }
.co-mai:has(.co-too) .co-tab th, .co-mai:has(.co-too) .co-tab td { padding: 12px 8px; }
.co-sec:has(#cup-definitions) .co-tab td:nth-child(2) { white-space: nowrap; }

/* The dashboard starts at the masthead and ends at the input toolbar. */
@media screen {
  .co-mai:has(.co-too) > .co-her {
    margin: 0;
    padding: 24px 0 26px;
    background: var(--key);
    box-shadow: 0 0 0 100vmax var(--key);
    clip-path: inset(-1px -100vmax);
  }
  .co-mai:has(.co-too) > .co-her h1,
  .co-mai:has(.co-too) > .co-her .co-lea { color: var(--panel); }
  .co-mai:has(.co-too) > .co-too { margin-top: 0; }
}