:root {
      --bg-page: #14110f;
      --bg-card: #1f1a17;
      --bg-card-elevated: #29221e;
      --bg-panel: #181412;
      --border-subtle: #382e28;
      --border-accent: #6e4f3a;
      --text-primary: #f5ece6;
      --text-secondary: #c2b2a6;
      --text-muted: #8c7b70;
      --accent-crema: #d48c46;
      --accent-crema-light: #ebb06b;
      --accent-espresso: #3b1707;
      --accent-flow: #38bdf8;
      --accent-green: #22c55e;
      --accent-amber: #f59e0b;
      --accent-red: #ef4444;
      --radius-lg: 14px;
      --radius-md: 10px;
      --radius-sm: 8px;
      --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
      --font-sans: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
      --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: var(--font-sans);
      background: radial-gradient(circle at 50% 0%, #2a201b 0%, var(--bg-page) 70%);
      color: var(--text-primary);
      line-height: 1.42;
      min-height: 100vh;
      padding: 8px 10px 24px;
    }

    .app-container {
      max-width: 1040px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Header & Educational Notice */
    .app-header {
      background: linear-gradient(135deg, #281f1a 0%, #1c1613 100%);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 9px 13px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .header-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .title-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .title-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--accent-crema), #8f4f1a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(212, 140, 70, 0.3);
      flex-shrink: 0;
    }

    .app-title {
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text-primary);
    }

    .edu-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(212, 140, 70, 0.16);
      border: 1px solid rgba(212, 140, 70, 0.45);
      color: var(--accent-crema-light);
      font-size: 0.72rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .edu-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-crema-light);
      display: inline-block;
    }

    .header-desc {
      font-size: 0.75rem;
      color: var(--text-secondary);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }

    .recipe-pill {
      font-family: var(--font-mono);
      font-size: 0.71rem;
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      padding: 2px 7px;
      border-radius: 5px;
      color: var(--accent-crema-light);
    }

    /* Main Responsive Grid */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    @media (min-width: 820px) {
      body {
        padding: 14px 20px 28px;
      }
      .app-title {
        font-size: 1.25rem;
      }
      .main-grid {
        grid-template-columns: 0.95fr 1.05fr;
        align-items: stretch;
        gap: 12px;
      }
    }

    .card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 11px 12px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-bottom: 5px;
    }

    .card-title {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-chip {
      font-size: 0.72rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(140, 123, 112, 0.18);
      color: var(--text-secondary);
      border: 1px solid rgba(140, 123, 112, 0.35);
    }

    .status-chip.running {
      background: rgba(34, 197, 94, 0.16);
      color: #4ade80;
      border-color: rgba(34, 197, 94, 0.45);
    }

    .status-chip.paused {
      background: rgba(245, 158, 11, 0.18);
      color: #fbbf24;
      border-color: rgba(245, 158, 11, 0.45);
    }

    .status-chip.completed {
      background: rgba(212, 140, 70, 0.22);
      color: var(--accent-crema-light);
      border-color: rgba(212, 140, 70, 0.55);
    }

    /* Visual Espresso Stage */
    .stage-wrapper {
      background: radial-gradient(circle at 50% 35%, #2f251f 0%, #161210 100%);
      border: 1px solid #362c25;
      border-radius: var(--radius-md);
      padding: 4px 6px 6px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .machine-svg {
      width: 100%;
      max-width: 330px;
      height: auto;
      display: block;
      user-select: none;
    }

    /* Live Telemetry Strip (4-column single row even on mobile for compact scanning) */
    .telemetry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      width: 100%;
    }

    .metric-box {
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 5px 3px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .metric-box.highlight-yield {
      border-color: rgba(212, 140, 70, 0.55);
      background: linear-gradient(180deg, rgba(212, 140, 70, 0.12) 0%, var(--bg-panel) 100%);
    }

    .metric-label {
      font-size: 0.66rem;
      color: var(--text-muted);
      font-weight: 500;
    }

    .metric-value {
      font-family: var(--font-mono);
      font-size: 0.96rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .metric-unit {
      font-size: 0.65rem;
      font-weight: 400;
      color: var(--text-secondary);
      margin-left: 1px;
    }

    .metric-sub {
      font-size: 0.62rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Progress Bar toward 36g */
    .yield-progress-wrap {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .yield-progress-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    .yield-progress-bar {
      width: 100%;
      height: 7px;
      background: #120e0c;
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .yield-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #6b2d0e 0%, #b86928 60%, #e5a95c 100%);
      border-radius: 999px;
      transition: width 0.05s linear;
    }

    /* Action Buttons (Start, Pause, Resume, Reset) + Speed Toggle */
    .playback-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .controls-toolbar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .btn {
      appearance: none;
      border: 1px solid var(--border-subtle);
      background: var(--bg-card-elevated);
      color: var(--text-primary);
      font-family: var(--font-sans);
      font-size: 0.84rem;
      font-weight: 600;
      padding: 8px 4px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.15s ease;
      touch-action: manipulation;
    }

    .btn:active:not(:disabled) {
      transform: translateY(1px);
    }

    .btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .btn-start {
      background: linear-gradient(135deg, #c97a32 0%, #965015 100%);
      border-color: #e0964e;
      color: #fff;
      box-shadow: 0 3px 10px rgba(201, 122, 50, 0.25);
    }

    .btn-pause {
      background: rgba(245, 158, 11, 0.16);
      border-color: rgba(245, 158, 11, 0.5);
      color: #fcd34d;
    }

    .btn-resume {
      background: rgba(34, 197, 94, 0.18);
      border-color: rgba(34, 197, 94, 0.55);
      color: #86efac;
    }

    .btn-reset {
      background: rgba(239, 68, 68, 0.12);
      border-color: rgba(239, 68, 68, 0.4);
      color: #fca5a5;
    }

    .speed-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 4px 8px;
      font-size: 0.71rem;
      color: var(--text-secondary);
    }

    .speed-btns {
      display: inline-flex;
      gap: 4px;
    }

    .speed-btn {
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 0.7rem;
      padding: 2px 7px;
      border-radius: 5px;
      cursor: pointer;
    }

    .speed-btn.active {
      background: rgba(212, 140, 70, 0.22);
      border-color: var(--accent-crema);
      color: var(--accent-crema-light);
      font-weight: 700;
    }

    /* Real-time Curve Canvas */
    .chart-container {
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 7px 9px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 0.7rem;
      color: var(--text-secondary);
      align-items: center;
      justify-content: space-between;
    }

    .legend-items {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .legend-swatch {
      width: 12px;
      height: 3px;
      border-radius: 2px;
    }

    .chart-canvas-wrap {
      width: 100%;
      height: 175px;
      position: relative;
    }

    #extractionChart {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Parameter Sliders */
    .preset-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
    }

    .preset-label {
      font-size: 0.71rem;
      color: var(--text-muted);
    }

    .preset-btn {
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      font-size: 0.71rem;
      padding: 3px 8px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .preset-btn:hover,
    .preset-btn.active {
      background: rgba(212, 140, 70, 0.2);
      border-color: var(--accent-crema);
      color: var(--accent-crema-light);
    }

    .sliders-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .slider-item {
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .slider-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .slider-name {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .slider-badge {
      font-family: var(--font-mono);
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--accent-crema-light);
      background: rgba(212, 140, 70, 0.14);
      border: 1px solid rgba(212, 140, 70, 0.35);
      padding: 1px 7px;
      border-radius: 5px;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: #2e2520;
      border-radius: 999px;
      outline: none;
      margin: 3px 0;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent-crema-light);
      border: 2.5px solid #2b180a;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent-crema-light);
      border: 2.5px solid #2b180a;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }

    .slider-scale {
      display: flex;
      justify-content: space-between;
      font-size: 0.65rem;
      color: var(--text-muted);
    }

    .slider-effect {
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    /* Extraction Diagnosis & Educational Panel */
    .diagnosis-box {
      background: linear-gradient(135deg, #251d18 0%, #1a1411 100%);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .diag-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .diag-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .diag-tag {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .diag-tag.balanced {
      background: rgba(34, 197, 94, 0.18);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, 0.45);
    }

    .diag-tag.under {
      background: rgba(245, 158, 11, 0.18);
      color: #fbbf24;
      border: 1px solid rgba(245, 158, 11, 0.45);
    }

    .diag-tag.over {
      background: rgba(239, 68, 68, 0.18);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.45);
    }

    .flavor-bars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .flavor-item {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      padding: 4px 6px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .flavor-top {
      display: flex;
      justify-content: space-between;
      font-size: 0.68rem;
      color: var(--text-secondary);
    }

    .flavor-track {
      height: 4.5px;
      background: #14100e;
      border-radius: 999px;
      overflow: hidden;
    }

    .flavor-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.2s ease;
    }

    .diag-text {
      font-size: 0.73rem;
      color: var(--text-secondary);
      line-height: 1.42;
    }

    .footer-note {
      text-align: center;
      font-size: 0.7rem;
      color: var(--text-muted);
      padding: 2px 6px;
    }
    @media (max-width: 420px) {
      .speed-bar { flex-wrap: wrap; gap: 6px; }
      .speed-btns { flex-shrink: 0; }
      .speed-btn { white-space: nowrap; }
      .flavor-top { flex-direction: column; gap: 2px; }
      .flavor-top span { white-space: nowrap; }
    }
  
/* Website context uses the simulator’s palette, without restyling its controls. */
.speed-bar{flex-wrap:wrap;gap:6px}.speed-btns{flex-shrink:0}.speed-btn{white-space:nowrap}
:root{--ink:var(--text-primary);--muted:var(--text-secondary);--accent:var(--accent-crema-light);--line:var(--border-subtle);--paper:var(--bg-page);--card:var(--bg-card)}
.site-context{max-width:1040px;margin:0 auto 14px}.header[data-site-header]{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;border-bottom:1px solid var(--border-subtle)}
.header .brand{font-size:22px;font-weight:750;letter-spacing:-1px;color:var(--text-primary);text-decoration:none}.brand-dot{color:var(--accent-crema);margin-left:10px}.header a{color:var(--text-secondary);text-decoration:none}.header nav{font-size:14px}.header-tools{margin-left:auto}.language-switch{display:flex;gap:8px;font-size:13px}.language-switch [aria-current]{color:var(--accent-crema-light)}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent-crema-light);outline-offset:4px}.skip{position:fixed;top:-100px;left:12px;z-index:30;background:var(--bg-card);color:var(--text-primary);padding:12px}.skip:focus{top:12px}
.experiment-context{font-size:14px;line-height:1.7}.experiment-context a,.model-notes a{color:var(--accent-crema-light);text-underline-offset:3px}.experiment-context>p{margin:10px 0}.experiment-context .context-links{display:flex;gap:14px;flex-wrap:wrap}.how-to{border-left:2px solid var(--accent-crema);padding-left:12px}.model-notes{border:1px solid var(--border-subtle);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.8;color:var(--text-secondary)}.model-notes summary{cursor:pointer;color:var(--text-primary);font-weight:650}.model-notes ul{padding-left:20px;margin:12px 0}.model-notes p{margin:10px 0}.experiment-footer{max-width:1040px;margin:16px auto;color:var(--text-secondary);font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.experiment-footer a{color:var(--accent-crema-light)}
@media(max-width:760px){.header[data-site-header]{min-height:0}.site-context{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Let longer English labels wrap without widening the narrow-screen grid. */
.main-grid>.card,.metric-box{min-width:0}
.telemetry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-header{flex-wrap:wrap}

/* Reuse the site share controller and icons, with the experiment's own palette. */
.article-share{--surface:var(--bg-panel);--sage:var(--bg-card-elevated)}
.article-share h2{font-size:18px;margin:0 0 16px;color:var(--text-primary)}
.article-share .share-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-accent);border-radius:6px;font-size:13px;line-height:1.5;text-decoration:none;cursor:pointer}
.article-share .share-action[hidden]{display:none}
.article-share .share-action:hover{background:var(--bg-card-elevated)}
.article-share .share-manual input{font-family:var(--font-sans)}

/* Site preference keeps the coffee palette, with a cream-paper alternative. */
:root{--surface:var(--bg-card);--sage:var(--bg-card-elevated);--chart-grid:rgba(255,255,255,.12);--chart-label:#c2b2a6;--chart-flow:#38bdf8;--chart-yield:#ebb06b;--chart-target:#4ade80;--chart-previous:rgba(255,255,255,.55)}
html[data-theme="light"]{--bg-page:#f6eee3;--bg-card:#fffaf2;--bg-card-elevated:#eee1cf;--bg-panel:#f0e5d6;--border-subtle:#cbb99f;--border-accent:#9d734c;--text-primary:#35271e;--text-secondary:#615044;--text-muted:#746051;--accent-crema:#965015;--accent-crema-light:#864714;--accent-flow:#006d8c;--accent-green:#21733e;--accent-amber:#865800;--accent-red:#a72c25;--shadow-card:0 4px 16px #4b301012;--chart-grid:#cbb99f;--chart-label:#615044;--chart-flow:#006d8c;--chart-yield:#864714;--chart-target:#21733e;--chart-previous:#746051}
html[data-theme="light"] body{background:radial-gradient(circle at 50% 0%,#fff9ee 0%,var(--bg-page) 70%)}
html[data-theme="light"] .app-header,html[data-theme="light"] .diagnosis-box{background:var(--bg-card)}
html[data-theme="light"] .flavor-item{background:var(--bg-panel);border-color:var(--border-subtle)}
html[data-theme="light"] .flavor-track,html[data-theme="light"] .yield-progress-bar{background:#dfcdb8}
html[data-theme="light"] .btn-pause,html[data-theme="light"] .diag-tag.under,html[data-theme="light"] .status-chip.paused{color:#765000}
html[data-theme="light"] .btn-resume,html[data-theme="light"] .diag-tag.balanced,html[data-theme="light"] .status-chip.running{color:#1d6536}
html[data-theme="light"] .btn-reset,html[data-theme="light"] .diag-tag.over{color:#a02d26}
.setup-card{padding:20px;gap:16px}.setup-hint{color:var(--text-secondary);font-size:14px;line-height:1.7}.setup-card .card-title{font-size:19px}.setup-card .preset-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.setup-card .preset-label{grid-column:1/-1;font-size:13px}.setup-card .preset-btn{min-height:44px;line-height:1.6;font-size:13px;padding:10px;text-align:left}.setup-card .sliders-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.setup-card .slider-item{min-width:0;padding:14px}.setup-card .slider-top{flex-wrap:wrap;gap:8px}.setup-card .slider-name{font-size:15px}.setup-card .slider-badge{font-size:13px}.setup-card .slider-scale,.setup-card .slider-effect{font-size:12px;line-height:1.7}.setup-card input[type="range"]{height:44px;background:linear-gradient(var(--border-subtle),var(--border-subtle)) center/100% 6px no-repeat;margin:8px 0}.setup-run{border-top:1px solid var(--border-subtle);padding-top:16px}.setup-run h3{font-size:16px;margin:0 0 12px}.setup-run .controls-toolbar{max-width:540px}.setup-run .btn{min-height:44px}.setup-run .speed-bar{margin-top:12px;justify-content:flex-start;gap:16px;font-size:13px}.setup-run .speed-btn{min-height:44px;min-width:58px}.results-title{font-size:19px;margin:12px 0 4px}.card-header{flex-wrap:wrap;gap:8px}.experiment-context{font-size:14px;line-height:1.75}.model-notes{font-size:14px;line-height:1.8}.footer-note{font-size:12px;line-height:1.7}
@media(max-width:760px){.app-header{padding:16px;gap:10px}.app-title{font-size:22px;line-height:1.45}.header-top{flex-wrap:wrap;gap:10px}.edu-badge{white-space:normal}.setup-card{padding:16px}.setup-card .preset-row{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-card .sliders-list{grid-template-columns:1fr}.setup-card .slider-top{justify-content:space-between}.setup-card .slider-badge{max-width:100%;white-space:normal}.setup-run .controls-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.main-grid{gap:16px}.metric-label,.metric-sub{font-size:12px}.recipe-pill{white-space:normal}.setup-run .speed-bar{align-items:flex-start;flex-direction:column}.diag-header{flex-wrap:wrap}.chart-legend{line-height:1.6}}
.parameter-details summary{cursor:pointer;min-height:44px;align-content:center;font-size:15px;font-weight:600;color:var(--text-primary)}.parameter-details[open] summary{margin-bottom:12px}
:root{--text-muted:#b4a090}.btn-start{background:#965015}.setup-card .preset-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-radius:8px;gap:3px}.setup-card .preset-btn strong{font-size:14px}.setup-card .preset-btn span{font-size:11px;line-height:1.6}

.recipe-share{margin:16px 0;padding:16px;border:1px solid var(--border-subtle);border-radius:12px}.recipe-share h3{margin:0 0 8px}.recipe-share p{font-size:.9rem;line-height:1.6}.recipe-share input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:10px;color:inherit;background:transparent;border:1px solid currentColor;border-radius:6px}.recipe-share button{min-height:44px}.recipe-share summary{cursor:pointer;padding:8px 0}
.recipe-copy{padding:10px 14px;border:1px solid var(--accent-crema);border-radius:8px;background:var(--bg-panel);color:var(--text-primary);font:inherit;cursor:pointer}.recipe-copy:disabled{opacity:.6;cursor:wait}.recipe-copy:focus-visible,.recipe-share summary:focus-visible,.recipe-share input:focus-visible{outline:2px solid var(--accent-crema);outline-offset:3px}