:root {
  --ink:#254d47; --muted:#5b6b65; --surface:#fffdf8; --line:#d7dfd6;
  --accent:#af5426; --soft:#f2f2e8; --radius:10px;
  --body-font:'Jost',sans-serif; --display-font:'DM Serif Display',Georgia,serif;
}
.control-group { display:grid; gap:1.125rem; min-width:0; }
.field { display:grid; gap:.5rem; min-width:0; margin:0; font:500 .82rem/1.45 var(--body-font); color:var(--ink); }
.field>span, .color-field>label { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; min-width:0; }
.field input:not([type='checkbox']):not([type='range']):not([type='color']), .field select, .field textarea {
  box-sizing:border-box; min-width:0; width:100%; min-height:44px; padding:.625rem .75rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink);
  font:500 .875rem/1.45 var(--body-font);
}
.field textarea { resize:vertical; min-height:86px; }
.field input[type='range'] { width:100%; min-width:0; height:28px; accent-color:var(--accent); cursor:pointer; margin:.25rem 0; }
.field input[type='color'] { width:50px; min-width:50px; height:44px; padding:3px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer; }
.field input[type='color']::-webkit-color-swatch-wrapper { padding:2px; }
.field input[type='color']::-webkit-color-swatch { border:0; border-radius:calc(var(--radius) - 3px); }
.field output { font-size:.75rem; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.color-input-row { display:flex; align-items:center; gap:.625rem; min-width:0; }
.hex-field { flex:1; min-width:0; }
.field .hex-input { letter-spacing:.06em; font-variant-numeric:tabular-nums; text-transform:uppercase; }
.choices { display:flex; flex-wrap:wrap; gap:.375rem; }
.choice, .action-row button, .view-controls button, button[data-action] {
  appearance:none; min-height:42px; border:1px solid var(--line); border-radius:var(--radius);
  padding:.625rem .875rem; background:var(--surface); color:var(--ink); cursor:pointer;
  font:600 .79rem/1.25 var(--body-font); transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease;
}
.choice:hover, .action-row button:hover, .view-controls button:hover { border-color:var(--ink); background:var(--soft); }
.choice[aria-pressed='true'], .view-controls button[aria-pressed='true'] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.swatches { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.375rem; }
.swatch { appearance:none; display:block; width:100%; min-width:0; height:30px; padding:0; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:6px; background:var(--swatch); cursor:pointer; }
.swatch[aria-pressed='true'] { outline:2px solid var(--ink); outline-offset:2px; }
.check-field { display:flex; align-items:center; gap:.625rem; min-height:40px; color:var(--ink); font:500 .84rem/1.4 var(--body-font); cursor:pointer; }
.check-field input { width:19px; height:19px; margin:0; accent-color:var(--ink); cursor:pointer; }
.tier-list { display:grid; gap:1.25rem; }
.tier-row { display:grid; gap:.75rem; min-width:0; border-top:1px solid var(--line); padding-top:1rem; }
.tier-row h3, .tier-row h4 { margin:0; color:var(--ink); font:600 .88rem/1.3 var(--body-font); }
.control-help, .demo-note { margin:0; color:var(--muted); font:400 .75rem/1.55 var(--body-font); }
.field-error { min-height:0; color:#9b2929; font:500 .72rem/1.5 var(--body-font); }
.field-error:empty { display:none; }
[aria-invalid='true'] { border-color:#9b2929!important; }
.preset-list { display:grid; gap:.5rem; }
.preset-choice { display:grid; grid-template-columns:40px 1fr; column-gap:.75rem; row-gap:.25rem; text-align:left; min-width:0; padding:.75rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); cursor:pointer; }
.preset-choice:hover { border-color:var(--ink); background:var(--soft); }
.preset-choice strong { font:600 .83rem/1.4 var(--body-font); }
.preset-choice>span:last-child { grid-column:2; font:400 .72rem/1.4 var(--body-font); color:var(--muted); }
.preset-colors { display:flex; grid-row:span 2; align-items:center; position:relative; }
.preset-colors i { width:19px; height:28px; border-radius:20px; border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); margin-left:-6px; }
.preset-colors i:first-child { margin-left:0; }
.action-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.action-row button { flex:1 1 auto; }
.view-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; }
.view-controls button { min-height:38px; font-size:.72rem; padding:.5rem .75rem; }
.zoom-field { display:flex; align-items:center; gap:.5rem; font:500 .72rem/1.4 var(--body-font); color:var(--ink); min-width:100px; }
.zoom-field input { width:85px; accent-color:var(--ink); }
.summary-list { margin:0; display:grid; gap:.875rem; min-width:0; }
.summary-list>div { display:grid; grid-template-columns:minmax(72px,.3fr) minmax(0,1fr); gap:.875rem; border-bottom:1px solid var(--line); padding-bottom:.875rem; }
.summary-list dt { font:600 .75rem/1.6 var(--body-font); color:var(--ink); }
.summary-list dd { margin:0; overflow-wrap:anywhere; font:400 .79rem/1.6 var(--body-font); color:var(--muted); }
[data-status] { overflow-wrap:anywhere; }
[data-cake-description] { min-width:0; overflow-wrap:anywhere; }
[data-controls] [hidden] { display:none!important; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
:where(button,input,textarea,select,a,summary,canvas):focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
:where(button,input):disabled { opacity:.45; cursor:default; }
#cake-stage { position:relative; min-height:360px; }
#cake-stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.preview-error { max-width:28rem; margin:5rem auto; padding:2rem; text-align:center; color:var(--ink); font:500 1rem/1.65 var(--body-font); }
@media(max-width:600px) {
  #cake-stage { min-height:280px; }
  .swatch { min-height:38px; }
  .choices { gap:.5rem; }
  .choice { flex:1 1 auto; }
  .summary-list>div { grid-template-columns:76px minmax(0,1fr); gap:.75rem; }
}
@media(prefers-reduced-motion:reduce) {
  .choice,.action-row button,.view-controls button { transition:none; }
}