#js-tool-container-sand-volume-tonnes-converter .sand-app { display:flex; flex-direction:column; gap:16px; --sand-gold:#bd8537; --sand-gold-deep:#80511d; --sand-rule:rgba(128,81,29,.3); --sand-paper:#f8f2e8; }
html[data-theme="dark"] #js-tool-container-sand-volume-tonnes-converter .sand-app { --sand-gold:#d6a45b; --sand-gold-deep:#f0bf7d; --sand-rule:rgba(240,191,125,.3); --sand-paper:#302b25; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-fieldset { display:flex; flex-direction:column; gap:14px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-input, #js-tool-container-sand-volume-tonnes-converter .sand-app .tb-select { width:100%; box-sizing:border-box; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-zone[data-tb-zone="outcome"] { display:flex; flex-direction:column; gap:18px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-outcome-readout, #js-tool-container-sand-volume-tonnes-converter .sand-app .sand-conversion-desk { box-sizing:border-box; min-width:0; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-outcome-readout { display:flex; flex-direction:column; gap:13px; padding:clamp(17px,2.6vw,27px); border:1px solid var(--sand-rule); border-radius:var(--radius-lg); background:linear-gradient(145deg,color-mix(in srgb,var(--sand-gold) 15%,var(--bg-secondary)),var(--bg-secondary)); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-readout-head, #js-tool-container-sand-volume-tonnes-converter .sand-app .sand-readout-foot, #js-tool-container-sand-volume-tonnes-converter .sand-app .sand-desk-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-ticket-kicker { color:var(--text-secondary); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-density-stamp, #js-tool-container-sand-volume-tonnes-converter .sand-app .sand-desk-code { color:var(--sand-gold-deep); font-family:var(--font-mono); font-size:.8rem; font-variant-numeric:tabular-nums; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-tonnes-line { display:flex; align-items:baseline; gap:10px; min-width:0; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-tonnes-line .tb-hero-value { min-width:0; overflow-wrap:anywhere; font-size:clamp(2.75rem,8vw,5.4rem); line-height:.96; letter-spacing:-.07em; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-tonnes-line > span { color:var(--text-secondary); font-size:clamp(1rem,2vw,1.25rem); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-hero-note { margin:0; max-width:58ch; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-readout-foot { padding-top:12px; border-top:1px solid var(--sand-rule); color:var(--text-secondary); font-size:.8rem; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-readout-foot strong { color:var(--text-primary); font-size:.92rem; font-variant-numeric:tabular-nums; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-conversion-desk { display:flex; flex-direction:column; gap:18px; padding:clamp(16px,2.5vw,24px); border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-tertiary); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-desk-head > div { display:flex; flex-direction:column; gap:4px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-desk-head strong { color:var(--text-primary); font-size:.98rem; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr) auto minmax(0,1fr); gap:12px; align-items:stretch; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route-node { display:flex; flex-direction:column; justify-content:center; gap:7px; min-width:0; padding:14px; border-left:3px solid var(--sand-gold); background:var(--bg-secondary); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route-node > span { color:var(--text-muted); font-size:.76rem; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route-node strong { color:var(--text-primary); font-size:.94rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route-result { border-left-color:var(--sand-gold-deep); background:color-mix(in srgb,var(--sand-gold) 12%,var(--bg-secondary)); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route-operator { display:flex; align-items:center; justify-content:center; color:var(--sand-gold-deep); font-family:var(--font-mono); font-size:1.2rem; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-calibration-line { display:flex; flex-direction:column; gap:7px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-calibration-track { position:relative; height:12px; border-bottom:2px solid var(--sand-gold-deep); background:repeating-linear-gradient(90deg,transparent 0 9%,var(--sand-rule) 9% 10%); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-calibration-track i { display:block; position:absolute; left:var(--sand-mark,50%); top:-7px; width:14px; height:26px; transform:translateX(-50%); border:2px solid var(--sand-gold-deep); border-radius:2px; background:var(--sand-gold); transition:left 180ms ease; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-calibration-axis { display:flex; justify-content:space-between; gap:10px; color:var(--text-muted); font-family:var(--font-mono); font-size:.7rem; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .sand-balance-equation { padding-top:2px; color:var(--text-primary); font-family:var(--font-mono); font-size:.88rem; overflow-wrap:anywhere; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-zone[data-tb-zone="details"] { display:flex; flex-direction:column; gap:14px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-formula-block { box-sizing:border-box; overflow:auto; padding:14px 16px; border-left:3px solid var(--sand-gold-deep); border-radius:var(--radius-sm); background:var(--bg-tertiary); }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-formula-main { color:var(--text-primary); font-family:var(--font-mono); white-space:nowrap; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-sand-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-sand-checks > div { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:baseline; min-width:0; padding:12px; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:.84rem; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-sand-checks output, #js-tool-container-sand-volume-tonnes-converter .sand-app .tb-sand-checks strong { color:var(--text-primary); font-weight:750; font-variant-numeric:tabular-nums; }
#js-tool-container-sand-volume-tonnes-converter .sand-app .tb-details-note { margin:0; overflow-wrap:anywhere; }
@media (max-width:640px) { #js-tool-container-sand-volume-tonnes-converter .sand-app { gap:12px; } #js-tool-container-sand-volume-tonnes-converter .sand-app .tb-grid-3, #js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route, #js-tool-container-sand-volume-tonnes-converter .sand-app .tb-sand-checks { grid-template-columns:1fr; } #js-tool-container-sand-volume-tonnes-converter .sand-app .sand-route-operator { min-height:20px; } }