/* dilution.html page styles (kit-based). Class names are d-prefixed to avoid kit collisions (.wrap .big .foot .tag). */
.dil{max-width:700px;margin:0 auto}
.dil .d-tag{font:500 .75rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 14px}
.dil h1{font-size:clamp(2.2rem,7vw,4.2rem);line-height:1;letter-spacing:-.04em;margin:0 0 16px;max-width:none}
.dil .d-sub{color:#e2d8cf;margin:0 0 28px;max-width:34rem;font-size:1.05rem}

.panel{border:1px solid var(--line-hot);background:var(--panel);backdrop-filter:blur(6px);border-radius:22px;padding:22px 20px;margin:0 0 18px;position:relative;overflow:hidden}
.panel-k{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin:0 0 12px}

.askRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.askRow input{font:700 clamp(1.7rem,6vw,2.3rem) var(--mono);width:min(220px,100%);background:rgba(0,0,0,.35);color:var(--hot);border:1px solid var(--line-hot);border-radius:14px;padding:10px 16px;min-height:56px;font-variant-numeric:tabular-nums}
.askRow input:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 4px rgba(255,176,58,.22)}
.askRow .unit{font:500 1rem var(--mono);color:var(--ash)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chips button{font:600 .85rem var(--mono);min-height:44px;min-width:56px;padding:0 14px;background:rgba(255,255,255,.05);color:var(--text);border:1px solid rgba(255,255,255,.2);border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s}
.chips button:hover{border-color:var(--amber);background:rgba(255,176,58,.1)}

.d-big{font:700 clamp(3rem,12vw,5.6rem)/1 var(--disp);color:var(--fail);margin:0;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(226,58,20,.45)}
.d-bigU{margin:14px 0 0;color:var(--text)}
.d-bigU b{color:var(--amber)}
.d-bigN{margin:10px 0 0;font-size:.88rem;color:var(--ash)}

.strip{margin:22px 0 0;border-top:1px solid var(--line);padding-top:18px}
.row{display:grid;grid-template-columns:54px 1fr 70px;align-items:center;gap:10px;margin-bottom:10px}
.row .yr{font:500 .75rem var(--mono);color:var(--ash)}
.trk{height:22px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);position:relative;overflow:hidden;display:block}
.fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--ember),var(--amber));border-radius:999px;box-shadow:0 0 16px rgba(255,150,50,.5);transition:width .5s cubic-bezier(.22,1,.36,1)}
.gone{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(135deg,rgba(226,58,20,.6) 0 6px,rgba(226,58,20,.15) 6px 12px);transition:width .5s cubic-bezier(.22,1,.36,1)}
.row .v{font:600 .8rem var(--mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--fail)}
.row.now .v{color:var(--pass)}
.row.now .fill{background:linear-gradient(90deg,var(--pass),#9ef0c8);box-shadow:0 0 16px rgba(61,220,151,.4)}

.fixTop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fixTop label{font:600 1rem var(--body)}
.fixTop .pc{font:700 2rem var(--disp);color:var(--amber);line-height:1;font-variant-numeric:tabular-nums}
.fixHint{font-size:.9rem;color:var(--ash);margin:0 0 12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:grab;margin:0;display:block;padding:0;border:0;min-height:44px}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--ember) 0%,var(--amber) var(--f,0%),#2a211b var(--f,0%),#2a211b 100%)}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#2a211b}
input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--ember)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--hot);border:4px solid var(--ember);box-shadow:0 0 18px rgba(255,120,30,.8)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--hot);border:4px solid var(--ember)}
input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

.ceil{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.ceilTrk{height:28px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);position:relative;overflow:hidden}
.ceilFill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--red),var(--ember),var(--amber));border-radius:999px;box-shadow:0 0 22px rgba(255,106,26,.8);transition:width .35s cubic-bezier(.22,1,.36,1)}
.ceilHole{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(135deg,rgba(255,176,58,.32) 0 7px,rgba(255,176,58,.08) 7px 14px);transition:width .35s cubic-bezier(.22,1,.36,1)}
.ceilEnds{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font:500 .75rem var(--mono);color:var(--ash)}
.ceilEnds b{color:var(--amber);font-weight:600}
.ceilNote{margin:12px 0 0;font-size:.92rem}
.ceilNote b{color:var(--amber)}
.d-foot{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap;font:500 .75rem var(--mono);color:var(--ash)}
.d-foot b{color:var(--amber)}

.notes{margin-top:26px;font-size:.92rem;line-height:1.7;color:var(--ash)}
.notes p{margin:0 0 12px;max-width:62ch}
.notes b{color:#e2d8cf;font-weight:600}
.notes .src{font:500 .72rem var(--mono);color:var(--ash-d);margin-top:14px}
.d-cta{margin-top:30px}
@media(max-width:420px){.row{grid-template-columns:44px 1fr 58px;gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}