:root{
  --paper-bg: #ececec;
  --panel: #ffffff;
  --panel-2: #f3efe4;
  --ink: #29241d;
  --ink-soft: #63594a;
  --line: #cfcfcf;
  --accent: #5a5a5a;
  --gold: #6e6e6e;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Hiragino Mincho ProN", serif;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--paper-bg); color:var(--ink); font-family: var(--mono); }
::selection{ background: var(--gold); color:#fff; }

header.top{
  padding: 28px clamp(16px,4vw,40px) 20px;
  border-bottom: 1px solid var(--line);
}
.head-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap;
}
.head-text{ flex:1; min-width:260px; }
header.top h1{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin: 0 0 6px;
  letter-spacing: .2px;
}
header.top p{
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.lang-switch{ display:flex; gap:6px; flex:none; }
.lang-btn{
  background: var(--panel); border:1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size:.72rem; padding:6px 10px; border-radius:2px; cursor:pointer;
  display:flex; align-items:center; gap:6px; line-height:1;
}
.lang-btn:hover{ border-color: var(--ink-soft); }
.lang-btn.active{ border:2px solid var(--ink); padding:5px 9px; font-weight:700; }
.flag-icon{
  width: 1.3em; height: auto; flex: none;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.2);
  display: block;
}
.disclaimer{
  font-size: .74rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- 3-pane workspace ---- */
.workspace{
  display: grid;
  gap: 22px;
  padding: 22px clamp(16px,4vw,40px) 40px;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-areas:
    "rail"
    "params"
    "preview";
}
@media (min-width: 900px){
  .workspace{
    grid-template-columns: 300px minmax(0,1fr);
    grid-template-areas:
      "rail params"
      "rail preview";
  }
}
@media (min-width: 1400px){
  .workspace{
    grid-template-columns: 300px minmax(0,.7fr) minmax(0,1.3fr);
    grid-template-areas: "rail params preview";
  }
}
.pane-rail{ grid-area: rail; display:flex; flex-direction:column; gap:18px; }
.pane-params{ grid-area: params; display:flex; flex-direction:column; gap:18px; min-width:0; }
.pane-preview{ grid-area: preview; display:flex; flex-direction:column; gap:18px; min-width:0; position: sticky; top: 16px; }
@media (max-width: 1399px){
  .pane-preview{ position: static; }
}

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px;
}
.card h2{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
}
.card .sub{
  font-size: .7rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}

.recipe-row{
  display:flex; align-items:center; gap:8px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: .73rem;
}
.recipe-row:last-child{ border-bottom:none; }
.recipe-row .no{
  font-weight: 700; color: var(--gold); width: 1.6em; flex: none;
}
.recipe-row .name{ flex:1; line-height:1.3; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.recipe-row button{
  background: none; border: 1px solid var(--line); color: var(--accent);
  font-family: var(--mono); font-size: .68rem; padding: 4px 8px; cursor:pointer; border-radius:2px;
}
.recipe-row button:hover{ background: var(--accent); color:#fff; border-color: var(--accent); }

/* ---- filter-usage dot indicators ---- */
.fdots{ display:inline-flex; align-items:center; gap:3px; flex:none; }
.fdot{
  width: 1em; height: 1em; border-radius: 2px;
  display:inline-block; flex:none;
  border: 1px solid rgba(0,0,0,.3);
  vertical-align: -0.15em;
}
.fdot.dim{ opacity: .25; }

details.section{
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  margin-bottom: 8px;
}
details.section summary{
  cursor: pointer;
  padding: 10px 12px;
  font-size: .78rem;
  font-weight: 700;
  list-style: none;
  display:flex; justify-content:space-between; align-items:center;
}
details.section summary::-webkit-details-marker{ display:none; }
details.section summary::after{ content:"+"; color: var(--ink-soft); font-weight:400; }
details.section[open] summary::after{ content:"–"; }
details.section .sec-title-row{ display:flex; align-items:center; gap:8px; }
.pane-rail details.section summary{ font-size: 1rem; padding: 16px 16px 10px; }
.pane-rail details.section .body{ padding: 4px 16px 12px; }
details.section .body{ padding: 4px 12px 12px; }
details.section .desc{ font-size: .68rem; color: var(--ink-soft); line-height:1.6; margin: 0 0 10px; }

.field{ margin-bottom: 12px; }
.field label{
  display:block;
  margin-bottom: 4px;
}
.field .ftitle-row{
  display:flex; justify-content:space-between; gap:8px;
  font-size: .68rem; color: var(--ink-soft);
}
.field .ftitle-row .v{ color: var(--ink); font-weight:700; }
.field .fanno-row{
  margin-top: 3px;
  font-size: .6rem;
  line-height: 1.8;
}
.field .fanno-row .badge{
  display:inline-block;
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2px;
}
.field .fanno-row .anno-attr{
  font-weight: 700;
  color: var(--ink);
}
.field .fanno-row .anno-sep{
  margin: 0 4px;
  color: var(--ink-soft);
  opacity: .6;
}
.field input[type=range]{ width:100%; accent-color: var(--accent); }
.field.is-disabled{ opacity:.45; }
.field input[type=range]:disabled{ cursor:not-allowed; }
.field select, .field input[type=color]{
  width:100%; font-family: var(--mono); font-size:.72rem;
  border:1px solid var(--line); background:#fff; color: var(--ink);
  padding: 5px; border-radius:2px;
}
.field.checkline{ display:flex; align-items:center; gap:8px; }
.field.checkline label{ margin:0; font-size:.72rem; color:var(--ink); }

.preview-card{
  background: var(--panel); border:1px solid var(--line); border-radius:3px; padding:16px;
  display:flex; flex-direction: column; gap:12px;
}
.preview-top{ display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.swatch-wrap{
  width: min(100%, 380px); aspect-ratio: 1/1; flex: none;
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background:#fff;
}
.swatch-wrap svg{ display:block; width:100%; height:100%; }
.preview-meta{ flex:1; min-width: 220px; font-size:.78rem; line-height:1.9; }
.preview-meta h3{ font-family: var(--mono); font-weight:700; font-size: 1.15rem; margin: 2px 0 8px; }
.change-heading{ 
  font-size:.68rem; color:var(--ink-soft); 
  margin:8px 0 4px; font-weight:700; 
}
.change-list{ display:flex; flex-direction:column; gap:4px; }
.change-item{ 
  display:flex; align-items:center; gap:6px; 
  font-size:.68rem; line-height:1.4; padding:4px 0;
  border-bottom:1px dashed var(--line);
}
.change-item:last-child{ border-bottom:none; }
.change-section-number{ 
  color:var(--ink-soft); font-weight:700; 
  margin-right:6px; min-width:1.2em;
}
.change-filters{ display:inline-flex; align-items:center; gap:3px; flex:none; }
.change-filter-badge{
  display:inline-block; color:var(--ink);
  padding:1px 6px; border-radius:3px;
  font-size:.6rem; font-weight:700; letter-spacing:.2px;
}
.change-sep{
  margin:0 4px; color:var(--ink-soft); opacity:.6;
}
.change-attr{ color:var(--ink-soft); font-weight:700; }
.change-value{ color:var(--ink); font-family:var(--mono); }
.change-value-disabled{ 
  color:var(--ink-soft); font-style:italic; 
  font-family:var(--mono); opacity:.7;
}

.code-card{ background: #1f1f1f; border-radius:3px; overflow:hidden; }
.code-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 14px; background:#2b2b2b; color:#cfcfcf; font-size:.7rem;
}
.code-head button{
  background: var(--accent); border:none; color:#fff; font-family: var(--mono);
  font-size:.68rem; padding:5px 10px; border-radius:2px; cursor:pointer;
}
.code-head button:hover{ opacity:.9; }
pre.code{
  margin:0; padding: 14px; max-height: 420px; overflow:auto;
  color: #e6e6e6; font-size: .72rem; line-height:1.6; font-family: var(--mono);
  white-space: pre;
}

footer.note{
  padding: 10px clamp(16px,4vw,40px) 40px; font-size:.68rem; color: var(--ink-soft); line-height:1.7;
}
footer.note a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
footer.note a:hover{ color: var(--gold); }