@font-face {
  font-family:Bricolage;
  src:url('/assets/fonts/bricolage-latin-ext.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:Bricolage;
  src:url('/assets/fonts/bricolage-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  color-scheme:light;
  --bg:#fcfdfe;
  --surface:#fff;
  --text:#172d52;
  --muted:#52617b;
  --border:#c6d1e4;
  --field-border:#7b8dae;
  --accent:#234cc4;
  --bench:#edf3ff;
  --source:#ffe19a;
  --source-ink:#7b4617;
  --warning:#fff1ce;
  --error:#a12f22;
  --focus:#a12f22;
  --display:Bricolage,'Segoe UI',sans-serif;
  --content:1184px;
  --radius:4px;
  --button-ink:#fff;
  --accent-hover:#183b9e;
  --target-fill:#dae5ff;
  --warning-ink:#684712;
  --warning-border:#b89140;
  --error-bg:#fff0ec;
}
* {
  box-sizing:border-box;
}
[hidden] {
  display:none!important;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  scrollbar-color:var(--field-border) var(--bench);
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:1rem/1.55 'Segoe UI',system-ui,sans-serif;
}
::selection {
  background:var(--source);
  color:var(--text);
}
button,input,textarea,select {
  font:inherit;
}
a {
  color:inherit;
  text-underline-offset:4px;
}
a:hover {
  color:var(--accent);
  text-decoration-thickness:2px;
}
button,a,input,select,textarea,summary {
  touch-action:manipulation;
  -webkit-tap-highlight-color:#234cc420;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.48;
  cursor:not-allowed;
}
:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px;
}
input,textarea,select {
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  padding:10px 12px;
  width:100%;
  min-width:0;
  caret-color:var(--accent);
}
input,select {
  min-height:46px;
}
input[aria-invalid=true] {
  border:2px solid var(--error);
  background:var(--error-bg);
}
.error p {
  margin-bottom:0;
}
.error .text-button {
  color:var(--error);
}
input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:1;
}
input[type=radio],input[type=checkbox] {
  accent-color:var(--accent);
  width:18px;
  min-height:18px;
  height:18px;
  margin:0;
  flex-shrink:0;
}
textarea {
  resize:vertical;
  line-height:1.85;
}
label {
  display:block;
  margin:8px 0 5px;
  font-size:0.875rem;
}
fieldset {
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
legend {
  font-weight:700;
  margin-bottom:12px;
  font-size:1.3125rem;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  font-family:var(--display);
  text-wrap:balance;
}
h1 {
  font-size:3.125rem;
  font-weight:650;
  line-height:1.06;
  letter-spacing:-.035em;
  margin-bottom:0;
}
h1 span {
  color:var(--accent);
}
h2 {
  font-size:1.75rem;
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:650;
}
h3 {
  font-size:1.25rem;
}
p {
  margin-bottom:16px;
}
.hint {
  font-size:0.8125rem;
  line-height:1.55;
  color:var(--muted);
}
p.hint {
  margin:9px 0 12px;
}
.eyebrow {
  display:none;
}
.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  transform:translateY(-200%);
  background:var(--accent);
  color:var(--button-ink);
  padding:12px 18px;
  z-index:10;
}
.skip-link:focus {
  transform:none;
}
.skip-link:not(:focus) {clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap;}
.site-header {
  max-width:var(--content);
  margin:auto;
  padding:22px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--border);
}
.brand {
  font:650 1.625rem/1 var(--display);
  letter-spacing:-.035em;
  text-decoration:none;
  white-space:nowrap;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark {
  width:32px;
  height:32px;
  flex-shrink:0;
}
.site-nav {
  display:flex;
  gap:22px;
  font-size:0.8125rem;
  font-weight:600;
}
.site-nav a {
  padding:10px 0;
  text-decoration:none;
}
.site-nav a[aria-current=page] {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:7px;
}
.tool-main {
  max-width:var(--content);
  margin:auto;
  padding:30px 32px 0;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  margin-bottom:28px;
}
.intro>p {
  font-size:1rem;
  line-height:1.7;
  margin:0;
  color:var(--muted);
  padding-right:28px;
}
.measure-bench {
  background:var(--bench);
  border-radius:16px;
  padding:20px 28px 14px;
  margin-bottom:32px;
}
.mode-field {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:1px solid var(--border);
}
.mode-field legend {
  font:400 0.75rem/1.3 'Segoe UI',sans-serif;
  color:var(--muted);
  margin-bottom:2px;
}
.mode-field label {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  min-height:36px;
  font-weight:600;
}
.pan-fields {
  display:grid;
  grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.pan legend {
  font-family:var(--display);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:4px;
}
.pan-design {
  display:grid;
  grid-template-columns:minmax(90px,.85fr) minmax(130px,1fr);
  gap:16px;
  align-items:center;
}
.pan-controls {
  min-width:0;
}
.pan-controls label {
  font-size:0.75rem;
  margin-top:6px;
}
.pan-controls select {
  font-size:0.875rem;
}
.pan-controls input {
  font-size:1.3125rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  padding:6px 12px;
}
.rectangle-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.diagram {
  width:100%;
  height:150px;
  display:block;
  color:var(--accent);
  overflow:visible;
}
.diagram .pan-outline {
  fill:var(--target-fill);
  stroke:var(--accent);
  stroke-width:2;
}
.source-pan .diagram .pan-outline {
  fill:var(--source);
  stroke:var(--source-ink);
}
.source-pan .diagram {
  color:var(--source-ink);
}
.diagram text {
  font:0.6875rem 'Segoe UI',sans-serif;
  fill:currentColor;
}
.live-ratio {
  display:flex;
  flex-direction:column;
  align-items:center;
  align-self:center;
  text-align:center;
  font-size:0.6875rem;
  line-height:1.45;
  color:var(--muted);
  padding-top:20px;
}
.live-ratio strong {
  font:650 2.25rem/1.3 var(--display);
  letter-spacing:-.035em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.live-ratio svg {
  width:70px;
  height:18px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  margin-top:8px;
}
.bench-hint {
  padding-top:10px;
}
.bench-hint a {
  white-space:nowrap;
}
#manual-fields {
  max-width:380px;
}
#manual-factor {
  max-width:150px;
  font-size:1.625rem;
  font-weight:650;
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.section-heading {
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  margin-bottom:8px;
}
.section-label {
  font:650 1.5625rem/1.2 var(--display);
  letter-spacing:-.02em;
  margin:0;
}
#ingredients {
  padding:15px 18px;
  min-height:246px;
}
.text-button {
  background:transparent;
  border:0;
  color:var(--accent);
  padding:10px 0;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:0.8125rem;
  min-height:44px;
  font-weight:600;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-size:0.875rem;
  line-height:1.4;
  font-weight:600;
  transition:background .14s ease-out;
}
.button:hover:not(:disabled) {
  background:var(--bench);
}
.button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--button-ink);
}
.button.primary:hover:not(:disabled) {
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.button svg {
  height:24px;
  width:24px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
}
#calculate {
  min-height:50px;
  width:100%;
  font-size:1rem;
  justify-content:space-between;
  padding-inline:20px;
  margin-top:6px;
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  align-items:center;
}
.file-button {
  position:relative;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  margin:0;
  overflow:hidden;
}
.file-button input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.file-button:focus-within {
  outline:3px solid var(--focus);
  outline-offset:3px;
}
.import-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0 18px;
}
.project-settings {
  margin-top:18px;
  font-size:0.875rem;
  border-block:1px solid var(--border);
  padding:6px 0;
}
.project-settings summary {
  cursor:pointer;
  padding:10px 0;
  min-height:44px;
}
.check-label {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
}
.notice,.error {
  border:1px solid var(--warning-border);
  background:var(--warning);
  padding:14px 18px;
  margin:14px 0;
}
.error {
  color:var(--error);
  border-color:var(--error);
  background:var(--error-bg);
}
.paper {
  background:var(--surface);
  padding:22px 26px 24px;
  border:1px solid var(--border);
  border-top:3px solid var(--accent);
  min-height:370px;
  overflow-wrap:anywhere;
}
.paper h2 {
  font-size:1.6875rem;
  margin-bottom:12px;
}
.paper .hint {
  color:var(--muted);
}
#empty-result {
  padding-top:18px;
}
#empty-result>p:first-child {
  font:500 1.5rem/1.25 var(--display);
  letter-spacing:-.02em;
}
#empty-result .hint {
  max-width:37ch;
}
.empty-lines {
  margin-top:24px;
}
.empty-lines span {
  display:block;
  border-bottom:1px solid var(--border);
  height:27px;
}
.empty-lines span:last-child {
  width:68%;
}
#result-title {
  font-size:0.8125rem;
  color:var(--muted);
  margin-bottom:12px;
}
.result-meta {
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  border-block:1px solid var(--border);
  padding:12px 0;
  margin:14px 0 12px;
  font-size:0.8125rem;
}
.result-meta strong {
  font:650 1.875rem/1.2 var(--display);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  color:var(--accent);
}
.paper-warning {
  background:var(--warning);
  border:1px solid var(--warning-border);
  padding:12px;
  font-size:0.875rem;
  color:var(--warning-ink);
  margin:12px 0;
}
#result-list {
  list-style:none;
  padding:0;
  margin:0;
}
#result-list>li {
  padding:15px 0 10px;
  border-bottom:1px solid var(--border);
  break-inside:avoid;
}
.result-line {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:baseline;
}
.ingredient-name {
  font-size:1rem;
  font-weight:600;
}
.new-quantity {
  font:650 1.5rem/1.25 var(--display);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.original {
  font-size:0.75rem;
  color:var(--muted);
  display:block;
  margin:5px 0 0;
  overflow-wrap:anywhere;
}
.row-note {
  font-size:1rem;
}
.row-warning {
  font-size:0.8125rem;
  color:var(--warning-ink);
  margin:5px 0;
}
.row-editor {
  font-size:0.8125rem;
  margin-top:2px;
}
.row-editor summary {
  cursor:pointer;
  width:fit-content;
  min-height:36px;
  padding:8px 0;
  color:var(--accent);
}
.row-editor input {
  font-size:1rem;
}
.row-editor .button {
  font-size:0.8125rem;
  min-height:44px;
  padding:8px 12px;
}
.row-editor .actions {
  margin-top:8px;
}
.precision,.method-note {
  font-size:0.75rem;
  color:var(--muted);
  margin:18px 0 0;
}
.method-note {
  margin-top:10px;
}
.export-actions {
  gap:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.export-actions .button {
  padding:10px 9px;
  font-size:0.8125rem;
}
.below-tool {
  margin:48px 0 40px;
  border-top:1px solid var(--border);
  padding-top:32px;
  display:grid;
  grid-template-columns:.96fr 1fr;
  gap:48px;
}
.below-tool h2 {
  font-size:1.875rem;
}
.below-tool p {
  color:var(--muted);
  max-width:45ch;
  font-size:0.875rem;
}
.below-tool a {
  font-size:0.8125rem;
  color:var(--accent);
}
.help-rows details {
  border-bottom:1px solid var(--border);
  padding:5px 0;
}
.help-rows summary {
  cursor:pointer;
  font-weight:600;
  padding:13px 0;
  min-height:48px;
  font-size:0.875rem;
}
.help-rows p {
  margin-top:10px;
}
.help-rows a {
  display:inline-block;
  margin-bottom:14px;
}
.site-footer {
  max-width:var(--content);
  margin:auto;
  padding:24px 32px 32px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:0.75rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
}
.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.document {
  max-width:800px;
  margin:auto;
  padding:36px 32px 56px;
}
.document h1 {
  margin:22px 0;
  font-size:2.75rem;
  color:var(--accent);
}
.document h2 {
  font-size:1.625rem;
  margin-top:36px;
}
.document p,.document li {
  color:var(--muted);
}
.document .document-lead {
  font-size:1.1875rem;
  color:var(--text);
}
.document ul,.document ol {
  padding-left:24px;
}
.document li {
  margin:8px 0;
}
.document table {
  border-collapse:collapse;
  width:100%;
  font-size:0.875rem;
}
.document th,.document td {
  border-bottom:1px solid var(--border);
  text-align:left;
  padding:10px 6px;
  overflow-wrap:anywhere;
}
.document code {
  background:var(--bench);
  padding:2px 5px;
  border-radius:3px;
  overflow-wrap:anywhere;
}
.document .note,.document .example {
  background:var(--bench);
  padding:18px 22px;
  margin:22px 0;
}
.breadcrumbs {
  font-size:0.8125rem;
  color:var(--muted);
  margin-bottom:24px;
}
.breadcrumbs ol {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
}
.breadcrumbs li+li::before {
  content:'/';
  margin-right:10px;
}
.document-related {
  border-top:1px solid var(--border);
  padding-top:18px;
  margin-top:32px;
}
.document .example p:last-child,.document .note p:last-child {
  margin-bottom:0;
}
@media(max-width:1050px) {
  .pan-fields {
    gap:16px;
    grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);
  }
  .pan-design {
    grid-template-columns:100px minmax(110px,1fr);
    gap:8px;
  }
  .measure-bench {
    padding-inline:22px;
  }
  .workspace,.below-tool {
    gap:32px;
  }
  .site-nav {
    gap:15px;
  }
  .brand {
    font-size:1.5rem;
  }
  .live-ratio strong {
    font-size:1.875rem;
  }
  .intro>p {
    padding-right:0;
  }
}
@media(max-width:800px) {
  .pan-design {
    grid-template-columns:1fr;
  }
  .diagram {
    height:100px;
  }
  .pan-controls {
    display:grid;
    grid-template-columns:1fr;
  }
  .pan legend {
    font-size:1.25rem;
  }
  .measure-bench {
    padding:18px 20px 12px;
  }
  .workspace,.below-tool {
    gap:24px;
  }
  .paper {
    padding:20px;
  }
  .site-nav {
    gap:14px;
  }
  .site-nav a:last-child {
    display:none;
  }
}
@media(max-width:760px) {
  .site-header {
    padding:18px 20px 12px;
    display:block;
  }
  .brand {
    font-size:1.625rem;
  }
  .site-nav {
    margin-top:15px;
    gap:22px;
  }
  .site-nav a:last-child {
    display:block;
  }
  .tool-main {
    padding:24px 20px 0;
  }
  .intro {
    display:block;
    margin-bottom:24px;
  }
  h1 {
    font-size:2.25rem;
  }
  .intro>p {
    margin-top:14px;
    font-size:0.875rem;
    line-height:1.55;
  }
  .intro>p br {
    display:none;
  }
  .intro>p br::after {
    content:' ';
  }
  .pan-fields {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px 20px;
  }
  .live-ratio {
    grid-column:1/-1;
    grid-row:2;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 12px;
    border-top:1px solid var(--border);
    padding-top:12px;
  }
  .live-ratio strong {
    font-size:1.75rem;
    order:1;
  }
  .live-ratio>span:first-child {
    order:0;
  }
  .live-ratio>span:last-of-type {
    order:2;
  }
  .live-ratio svg {
    display:none;
  }
  .pan-design {
    gap:0;
  }
  .pan legend {
    font-size:1.125rem;
    min-height:44px;
  }
  .diagram {
    height:112px;
  }
  .mode-field {
    gap:8px 18px;
    padding-bottom:10px;
    margin-bottom:14px;
  }
  .mode-field label {
    font-size:0.8125rem;
  }
  .pan-controls select {
    padding:8px;
    font-size:0.875rem;
  }
  .pan-controls input {
    font-size:1.25rem;
  }
  .rectangle-fields {
    grid-template-columns:1fr;
    gap:0;
  }
  .bench-hint {
    font-size:0.75rem;
    padding-top:2px;
  }
  .measure-bench {
    margin-bottom:26px;
  }
  .workspace {
    display:block;
  }
  .result-section {
    margin-top:30px;
  }
  .paper {
    padding:22px;
    min-height:330px;
  }
  .below-tool {
    grid-template-columns:1fr;
    gap:18px;
    margin:32px 0;
  }
  .below-tool h2 {
    font-size:1.75rem;
  }
  .site-footer {
    padding:24px 20px;
    display:block;
  }
  .site-footer nav {
    margin-top:16px;
  }
  .document {
    padding:28px 20px 40px;
  }
  .document h1 {
    font-size:2.1875rem;
  }
  .import-row>.hint {
    display:none;
  }
  .section-label {
    font-size:1.5rem;
  }
}
@media(max-width:380px) {
  .tool-main,.document {
    padding-left:16px;
    padding-right:16px;
  }
  .site-header,.site-footer {
    padding-left:16px;
    padding-right:16px;
  }
  .site-nav {
    gap:17px;
    font-size:0.75rem;
  }
  .brand {
    font-size:1.5rem;
  }
  .brand-mark {
    width:28px;
    height:28px;
  }
  h1 {
    font-size:2.125rem;
  }
  .measure-bench {
    padding-left:14px;
    padding-right:14px;
  }
  .pan-fields {
    gap:10px 14px;
  }
  .pan legend {
    font-size:1rem;
  }
  .mode-field {
    gap:4px 12px;
  }
  .mode-field label {
    font-size:0.75rem;
  }
  .paper {
    padding:20px 16px;
  }
  .paper h2 {
    font-size:1.5625rem;
  }
  .result-line {
    flex-wrap:wrap;
    gap:3px 14px;
  }
  .result-meta {
    grid-template-columns:1fr;
  }
  .result-meta strong {
    font-size:1.75rem;
  }
  .section-label {
    font-size:1.4375rem;
  }
  .section-heading {
    gap:8px;
  }
  .text-button {
    font-size:0.75rem;
  }
  .new-quantity {
    font-size:1.375rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}
@media print {
  .paper * {
    border-color:#bbb!important;
  }
  #result-title {
    color:black;
  }
  @page {
    size:A4;
    margin:16mm;
  }
  html,body {
    background:white!important;
    color:black!important;
    font-size:11pt;
  }
  body>*:not(main),.intro,.measure-bench,.editor,.below-tool,.export-actions,#export-status,#copy-fallback,.row-editor,.skip-link,noscript {
    display:none!important;
  }
  .tool-main,.workspace,.result-section {
    display:block!important;
    margin:0!important;
    padding:0!important;
    width:100%;
    max-width:none;
  }
  .paper {
    background:white!important;
    color:black!important;
    padding:0;
    min-height:0;
    border:0;
  }
  .paper h2 {
    font-size:24pt;
    color:black;
  }
  .paper .hint,.original,.precision,.method-note,.new-quantity,.result-meta strong {
    color:black!important;
  }
  .result-line {
    display:flex;
  }
  .new-quantity {
    font-size:14pt;
  }
  .result-meta {
    display:flex;
  }
  .result-meta strong {
    font-size:22pt;
  }
  .paper-warning {
    border:1px solid #777;
    background:white;
    color:black;
  }
  .row-warning {
    color:black;
  }
  .method-note a {
    text-decoration:none;
  }
  #result-list>li {
    break-inside:avoid;
  }
  .paper a::after {
    content:none;
  }
}

/* Preferencje użytkownika obejmują całą stronę, także pomoc i kontakt. */
html[data-theme="dark"] {
  color-scheme:dark; --bg:#111b2e; --surface:#19263d; --text:#eef3ff;
  --muted:#bdcbe3; --border:#526482; --field-border:#8fa3c5;
  --accent:#b0c4ff; --accent-hover:#d3dfff; --button-ink:#111b2e;
  --bench:#202f4a; --source:#795719; --source-ink:#ffe19a;
  --target-fill:#334e86; --warning:#3d3118; --warning-ink:#ffe4a3;
  --warning-border:#cba458; --error:#ffb4a8; --error-bg:#462823; --focus:#ffd267;
}
html[data-contrast="high"] {
  --bg:#fff; --surface:#fff; --text:#000; --muted:#151515; --border:#111;
  --field-border:#111; --accent:#002b9e; --accent-hover:#001a61; --button-ink:#fff;
  --bench:#fff; --source:#ffde00; --source-ink:#000; --target-fill:#c9dbff;
  --warning:#fff0b8; --warning-ink:#000; --warning-border:#000;
  --error:#8c1500; --error-bg:#fff; --focus:#8c1500;
}
html[data-theme="dark"][data-contrast="high"] {
  --bg:#000; --surface:#000; --text:#fff; --muted:#fff; --border:#fff;
  --field-border:#fff; --accent:#ffe900; --accent-hover:#fff7a6; --button-ink:#000;
  --bench:#000; --source:#000; --source-ink:#ffe900; --target-fill:#000;
  --warning:#000; --warning-ink:#ffe900; --warning-border:#ffe900;
  --error:#ffb7ab; --error-bg:#000; --focus:#ffe900;
}
html[data-text-size="125"] {font-size:125%;}
html[data-text-size="150"] {font-size:150%;}
html[data-text-size="200"] {font-size:200%;}
body {transition:background-color .18s ease-out,color .18s ease-out;}
.brand,.live-ratio strong,.result-meta strong {white-space:normal;}
.site-header,.site-nav,.section-heading {flex-wrap:wrap;}
h1,h2,h3,.brand,.result-meta,.new-quantity {overflow-wrap:anywhere;}
.display-settings {max-width:var(--content);margin:auto;padding:8px 32px;border-bottom:1px solid var(--border);}
.display-settings>summary {width:fit-content;min-height:44px;padding:10px 0;cursor:pointer;color:var(--accent);font-size:.875rem;font-weight:600;}
.display-controls {display:flex;flex-wrap:wrap;align-items:end;gap:16px 24px;padding-bottom:12px;}
.display-controls>div {flex:1 1 220px;min-width:0;}
.display-controls .check-label {min-height:46px;margin:0;}
.display-settings .hint {max-width:70ch;}
.ingredient-rows {list-style:none;padding:0;margin:0;}
.ingredient-entry {border-bottom:1px solid var(--border);padding:12px 0;animation:row-appear .18s ease-out;}
.ingredient-entry fieldset {position:relative;}
.ingredient-entry legend {font:600 .875rem/1.5 'Segoe UI',sans-serif;margin:0;color:var(--muted);padding-right:60px;}
.ingredient-fields {display:grid;grid-template-columns:minmax(80px,.65fr) minmax(0,1.6fr);gap:10px;}
.ingredient-fields label {font-size:.8125rem;}
.ingredient-fields input,.ingredient-fields select {font-size:1rem;padding:10px 8px;}
.ingredient-fields>div {min-width:0;}
.remove-ingredient {position:absolute;right:0;top:-29px;font-size:.8125rem;}
.note-entry .ingredient-fields {grid-template-columns:1fr;}
.row-actions {margin:14px 0 4px;}
.paste-list {border-top:1px solid var(--border);margin:18px 0;padding:12px 0;}
.paste-list summary {cursor:pointer;color:var(--accent);padding:8px 0;min-height:44px;font-size:.875rem;}
#calculate {margin-top:20px;}
.pan-outline {transition:r .24s ease-out,x .24s ease-out,y .24s ease-out,width .24s ease-out,height .24s ease-out,fill .18s ease-out;}
.button {transition:background-color .14s ease-out,transform .14s ease-out;}
.button:active:not(:disabled) {transform:translateY(1px);}
@keyframes row-appear {from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}}
html[data-text-size="150"] .workspace,html[data-text-size="200"] .workspace {grid-template-columns:1fr;}
html[data-text-size="200"] .intro {display:block;}
html[data-text-size="200"] .pan-fields {grid-template-columns:1fr;}
html[data-text-size="200"] .live-ratio {grid-column:auto;grid-row:auto;}
html[data-text-size="200"] .pan-design {grid-template-columns:130px minmax(0,1fr);}
@media(max-width:760px) {
  .display-settings {padding-inline:20px;}
  .ingredient-fields {grid-template-columns:minmax(75px,.7fr) minmax(0,1.3fr);}
  .note-entry .ingredient-fields>div {grid-column:1/-1;}
  html:not([data-text-size="100"]) .pan-fields {grid-template-columns:1fr;}
  html:not([data-text-size="100"]) .live-ratio {grid-column:auto;grid-row:auto;}
  html:not([data-text-size="100"]) .pan-design {grid-template-columns:1fr;}
  html[data-text-size="200"] .ingredient-fields {grid-template-columns:1fr;}
  .display-controls {display:block;}
  .display-controls>div {margin-bottom:16px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
@media(forced-colors:active) {
  .pan-outline {fill:Canvas;stroke:CanvasText;}
  .button,.paper,.measure-bench {border:1px solid CanvasText;}
}
@media print {
  html[data-text-size] {font-size:100%;}
  .display-settings {display:none;}
}

.ingredient-more summary {cursor:pointer;font-size:.8125rem;min-height:44px;padding:10px 0;color:var(--accent);}
.ingredient-more .hint {font-size:.8125rem;}
.ingredient-choice {position:relative;}
.ingredient-suggestions {position:absolute;z-index:5;inset-inline:0;top:100%;margin:2px 0 0;padding:4px;list-style:none;background:var(--surface);border:2px solid var(--field-border);border-radius:var(--radius);max-height:18rem;overflow-y:auto;}
.ingredient-suggestions [role=option] {padding:10px 8px;min-height:44px;font-size:1rem;cursor:pointer;overflow-wrap:anywhere;}
.ingredient-suggestions [role=option]:hover,.ingredient-suggestions [aria-selected=true] {background:var(--accent);color:var(--button-ink);}
.suggestion-empty {position:absolute;z-index:5;top:100%;inset-inline:0;margin:2px 0 0;padding:10px;background:var(--surface);border:1px solid var(--field-border);}