[data-professional-diagram]{margin:28px 0;padding:24px;border:1px solid #af9563;border-radius:20px;background:#e5d8bd}
.pro-diagram-controls{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.pro-diagram-controls button{font:inherit;font-size:14px;min-height:44px;padding:10px 16px;border:1px solid #907344;border-radius:15px;color:#292e29;background:transparent}.pro-diagram-controls button[aria-pressed=true]{background:#292e29;color:#f5e9d0}
.pro-diagram-figure{background:#282f2d;color:#f3e8cc;padding:20px;border-radius:15px}.pro-diagram-figure svg{display:block;width:100%;height:auto;direction:ltr}
.surfactant-tail{fill:none;stroke:#e1b969;stroke-width:7;stroke-linecap:round}.surfactant-head{fill:#9ed4d0;stroke:#d4eeeb;stroke-width:2}.diagram-guide{stroke:#a2bcb7;fill:none;stroke-width:2}.molecule-detail text{font-family:Peyda,sans-serif;fill:#f3e8cc;font-size:25px;text-anchor:middle}
.clean-aggregate,.rinse-arrow{display:none}.cleansing[data-phase="1"] .molecule-detail,.cleansing[data-phase="2"] .molecule-detail{display:none}.cleansing[data-phase="1"] .clean-aggregate,.cleansing[data-phase="2"] .clean-aggregate,.cleansing[data-phase="2"] .rinse-arrow{display:block}
.pro-diagram-legend{display:flex;gap:12px 18px;flex-wrap:wrap;justify-content:center;font-size:12px;line-height:1.8}.pro-diagram-legend i{display:inline-block;width:10px;height:10px;margin-inline-end:6px;border-radius:50%}.legend-water{background:#9ed4d0}.legend-oil{background:#e1b969}.legend-core{background:#c39b4e}
[data-professional-diagram] h4{font-size:22px;margin:22px 0 12px;font-weight:500}[data-professional-diagram] small{display:block;font-size:11px;line-height:1.9;color:#64583f}
.spectrum{display:grid;grid-template-columns:1fr 1fr;direction:ltr;gap:8px;padding-top:30px}.spectrum>div{display:grid;gap:18px;text-align:center;border:2px solid #69736b;border-radius:16px;padding:24px 12px;opacity:.6}.spectrum bdi{font:26px/1.2 Arial,sans-serif}.spectrum span{font-size:13px;line-height:1.9;direction:rtl}.spectrum-b{background:#665431}.spectrum-a{background:#34514d}.spectrum-pointer{display:grid;grid-template-columns:1fr 1fr;direction:ltr;text-align:center;font-size:32px;color:#ddbf7a;padding:10px}.metric-caption{text-align:center;font-size:20px;padding:12px}
.sun[data-phase="0"] .spectrum-b,.sun[data-phase="1"] .spectrum-a,.sun[data-phase="2"] .spectrum>div{opacity:1;border-color:#e1c685}.sun[data-phase="0"] .spectrum-pointer span:last-child,.sun[data-phase="1"] .spectrum-pointer span:first-child{visibility:hidden}
@media(max-width:750px){[data-professional-diagram]{padding:16px}.pro-diagram-figure{padding:14px 10px}.pro-diagram-controls button{padding:10px;font-size:13px}.pro-diagram-legend{justify-content:start}.pro-diagram-legend span{width:100%}.spectrum>div{padding:18px 6px}.spectrum span{font-size:12px}.metric-caption{font-size:17px}}