.hint-visual{margin:22px 0 18px;border:1.5px solid #334e54;border-radius:15px;overflow:hidden;background:#fcfcf6;box-shadow:0 4px 0 #dce6df}
.hv-heading{padding:19px 21px 15px;background:#e8eee6}
.hv-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#345c5b;margin-bottom:7px}
.hv-heading h4{font-size:21px;line-height:1.25;letter-spacing:-.025em;margin:0 0 9px;color:#1b3438}
.hv-step-label{font-size:12px;line-height:1.55;font-weight:600;color:#3b5a5d}
.hv-connection{padding:18px 21px 19px;border-top:1px solid #d5dfd4;background:#fbfcf5}
.hv-equation-label{display:block;font-size:10px;letter-spacing:.065em;text-transform:uppercase;font-weight:700;color:#57685f;margin-bottom:8px}
.hv-equation{padding:12px 14px;font-family:Georgia,'Times New Roman',serif;font-size:21px;line-height:1.55;background:#eaf3ee;border-left:3px solid #257d7e;border-radius:3px 8px 8px 3px;color:#15393c;overflow-wrap:anywhere}
.hv-connection p{font-size:14px;line-height:1.75;color:#3b4f50;margin:12px 0 0}
.hv-stage{background:#101b25;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#586774 #101b25;scrollbar-width:thin}
.hv-stage svg{display:block;width:100%;min-width:550px;max-width:none;height:auto;user-select:none}
.hv-controls{padding:17px 21px 18px;background:#eff2e9;border-bottom:1px solid #d5dfd4}
.hv-playback{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px 13px}
.hv-playback .btn{white-space:nowrap;font-size:12px;padding:10px 14px;min-height:42px}
.hv-playback label{font-size:12px;line-height:1.5;font-weight:700;margin:0}
.hv-playback input{grid-column:1/-1}
.hint-visual input[type=range]{accent-color:#247d7f;width:100%;min-height:28px;height:28px;padding:0;margin:0;border:0;box-shadow:none;background:transparent;cursor:pointer}
.hint-visual input[type=range]:focus-visible{outline:2px solid #247d7f;outline-offset:3px;border-radius:3px}
.hv-parameter{display:grid;gap:6px;margin-top:14px}
.hv-parameter label{display:flex;justify-content:space-between;align-items:baseline;gap:15px;font-size:12px;line-height:1.5;font-weight:700;color:#344e4f;margin:0}
.hv-parameter output{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500;color:#566a66}
.hv-sides{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:12px;font-size:12px;color:#3f5755}
.hv-sides .btn{padding:7px 14px;min-height:36px;font-size:12px}
.hv-sides .btn[aria-pressed=true]{background:#143b40;color:#fcfcf6}
.hv-readouts{display:flex;flex-wrap:wrap;gap:17px 20px;padding:17px 21px 15px;background:#fffef7;border-bottom:1px solid #e1e7da}
.hv-readouts>div{flex:1 1 130px;min-width:0}
.hv-readouts span{display:block;font-size:10px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:#5d7069;margin-bottom:4px}
.hv-readouts b{display:block;font-size:12px;line-height:1.7;font-weight:650;font-variant-numeric:tabular-nums;color:#243e3f;overflow-wrap:anywhere}
.hv-note{font-size:11px;line-height:1.8;color:#68756c;margin:0;padding:13px 21px 16px}
@media(max-width:600px){.hv-heading,.hv-connection{padding-left:16px;padding-right:16px}.hv-heading h4{font-size:19px}.hv-equation{font-size:18px;padding:10px 12px}.hv-connection p{font-size:13px}.hv-controls,.hv-readouts{padding-left:16px;padding-right:16px}.hv-playback{grid-template-columns:auto auto}.hv-playback label{grid-column:1/-1}.hv-parameter label{flex-wrap:wrap;gap:3px 12px}.hv-note{padding-left:16px;padding-right:16px}.hv-readouts{gap:12px 15px}.hv-readouts>div{flex-basis:135px}}
@media(prefers-reduced-motion:reduce){.hint-visual *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.hv-schematic-label{display:inline-block;font-size:10px;line-height:1.4;letter-spacing:.055em;font-weight:800;padding:5px 8px;margin:0 0 10px;border:1px solid #b8caac;border-radius:5px;background:#fffdf0;color:#536536}
.hv-connection .hv-schematic-instruction{margin:0 0 15px;padding:11px 13px;border-radius:8px;background:#f5edd5;border:1px solid #decda0;color:#5a4e29;font-size:13px;line-height:1.65}