/* Base styles cloned from code.html. */
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fbf9f4; color: #1b1c19; }
h1, h2, h3, h4 { font-family: 'Noto Serif', serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.tonal-shift-bg { background-color: rgba(245, 243, 238, 0.8); }
.cinematic-overlay { background: linear-gradient(to bottom, rgba(27, 28, 25, 0) 0%, rgba(27, 28, 25, 0.8) 100%); }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fbf9f4; }
::-webkit-scrollbar-thumb { background: #dcc0be; }

/* Plugin: data-driven utility additions kept in code.html design language. */
.satomi-table { width: 100%; border-collapse: collapse; }
.satomi-table th, .satomi-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #dcc0be33; font-size: 0.875rem; }
.satomi-table th { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: #5f5e5e; font-weight: 600; }
.satomi-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.satomi-faq summary { cursor: pointer; padding: 1.5rem 0; border-top: 1px solid #dcc0be4d; font-family: 'Noto Serif', serif; font-size: 1.125rem; }
.satomi-faq summary::-webkit-details-marker { display: none; }
.satomi-faq[open] summary { color: #913332; }
.satomi-faq p { padding-bottom: 1.5rem; color: #564241; line-height: 1.7; }

/* Inline server-rendered SVG bars. */
.satomi-bar-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 0.75rem; }
.satomi-bar-row .label { width: 12rem; color: #564241; font-family: 'Plus Jakarta Sans', sans-serif; }
.satomi-bar-row .track { flex: 1; height: 6px; background: #e4e2dd; position: relative; }
.satomi-bar-row .fill { position: absolute; top: 0; left: 0; height: 100%; background: #913332; }
.satomi-bar-row .val { width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: #1b1c19; font-weight: 500; }