:root{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;color-scheme:dark;background:#0b1114;color:#ecf4f3;--bg:#0b1114;--panel:#152128;--stroke:#2c4248;--muted:#a7b8b9;--mint:#9bf1d9;--mint-strong:#64d5b9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 680px 400px at 45% -240px,#245249 0%,transparent 80%),#0b1114;padding:env(safe-area-inset-top) max(15px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(15px,env(safe-area-inset-left))}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.985)}:focus-visible{outline:2px solid var(--mint);outline-offset:3px}input,select{accent-color:var(--mint-strong)}.shell{max-width:615px;margin:0 auto;padding:25px 0 50px}.masthead{padding:6px 3px 21px}.mast-meta,.section-line{display:flex;justify-content:space-between;align-items:center;gap:12px}.mast-meta>span:first-child{font-size:10px;font-weight:800;letter-spacing:.21em;color:#95aaa9}.version{padding:7px 10px;border-radius:100px;border:1px solid #3c5c57;color:#b4f6e1;font-size:11px;font-weight:800}.masthead h1{font-size:clamp(35px,9vw,54px);font-weight:850;line-height:1;margin:19px 0 9px;letter-spacing:-2.9px}.masthead h1>span{color:var(--mint)}.dot{color:#fff}.tagline{margin:0;color:#b7c9c8;font-size:14px}.card{background:linear-gradient(155deg,#19272d 0%,#101b21 100%);border:1px solid #2b4145;border-radius:22px;padding:21px;margin-bottom:13px;box-shadow:0 14px 38px rgba(0,0,0,.19)}.section-line{margin-bottom:16px}.section-line h2{font-size:17px;margin:0;letter-spacing:-.03em}.section-en{color:#91b5ab;font-weight:800;font-size:10px;letter-spacing:.06em}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid #24383d;border-radius:14px;gap:5px;padding:5px;background:#0c181d}.segment{background:transparent;border:none;border-radius:10px;color:#b3c4c6;font-size:15px;min-height:48px;padding:10px 8px;font-weight:750}.segment.active{background:#24584b;color:#e7fff6;box-shadow:inset 0 0 0 1px #6ecfb8}.micro{font-size:12px;color:var(--muted);line-height:1.55;margin:10px 0 0}.micro.no-top{margin-top:0;margin-bottom:17px}.field-group{margin-top:22px}.field-group:first-child{margin-top:0}.field-group.small-gap{margin-top:13px}.field-label{display:block;color:#deebeb;font-size:13px;font-weight:750;margin:0 0 9px}.input-pair{display:flex;gap:8px}.input-pair input,.input-pair select,.unit-fixed,.field-input,.full-select{background:#0b171d;border:1px solid #395057;border-radius:12px;color:#f1fcfa;min-width:0;min-height:53px}.input-pair input{flex:1;width:100%;font-size:24px;font-weight:750;letter-spacing:-.03em;padding:11px 13px;font-variant-numeric:tabular-nums}.input-pair select,.unit-fixed{width:84px;flex:none;font-size:14px;font-weight:700;display:grid;place-items:center;padding:0 8px;text-align:center}.field-input,.full-select{width:100%;padding:13px;font-size:16px}.field-input{font-weight:500}.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}.chip{border:1px solid #365059;background:#21323a;color:#ddebe9;border-radius:11px;min-height:47px;padding:7px 4px;font-weight:750;font-size:13px}.chip.active{background:#285d50;border-color:#7de5c9;color:#e2fff5}.text-btn{border:0;background:transparent;color:#b8f2e4;min-height:43px;padding:8px 3px;font-size:13px;font-weight:750}.mini-details{border-top:1px solid #2f454b;margin-top:16px;padding-top:3px}.mini-details summary{list-style:none;cursor:pointer;color:#a9e7d8;padding:13px 0;font-size:13px;font-weight:700;min-height:46px}.mini-details summary::-webkit-details-marker{display:none}.mini-details summary:after{content:'⌄';float:right}.mini-details[open] summary:after{content:'⌃'}.mini-body{padding:1px 0 9px}.mini-body .micro{margin-top:7px}.full-select{min-height:48px}.error{padding:10px 12px;background:#392624;border:1px solid #925e50;border-radius:10px;color:#ffd5c7;font-size:13px;line-height:1.45;margin:14px 0 0}.hidden,[hidden]{display:none!important}.results{border-color:#345b54;background:linear-gradient(148deg,#1b302d,#111f24 72%)}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-cell{min-width:0;background:#101d24;border:1px solid #32484d;border-radius:16px;padding:15px 13px;min-height:122px}.result-cell.primary{background:linear-gradient(155deg,#24584c,#174139);border-color:#3e8471}.result-label{font-size:14px;color:#d0e5df;font-weight:750}.result-line{display:flex;align-items:baseline;gap:5px;min-height:48px;margin-top:14px;flex-wrap:wrap}.result-line strong{font-size:clamp(27px,8vw,44px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1.3px;overflow-wrap:anywhere}.result-line>span{font-size:13px;color:#c3dcd6;font-weight:700}.total-line{margin:16px 0 0;font-size:15px;font-weight:800;color:#d8e9e5}.ratio-bar{height:7px;background:#2f454b;border-radius:100px;margin-top:12px;overflow:hidden}.ratio-bar span{display:block;height:100%;min-width:0;background:linear-gradient(90deg,#a0f3df,#49b9a2);transition:width .14s}.result-note{margin-top:9px}.cost-box{border-radius:13px;background:#1b3834;border:1px solid #3a6d60;margin-top:17px;padding:13px}.cost-box>span{color:#b9dacd;font-size:12px;font-weight:700}.cost-box>strong{display:block;margin-top:6px;font-size:25px;letter-spacing:-.05em}.cost-box .micro{margin-top:3px}.result-actions{display:flex;gap:9px;margin-top:15px}.btn{min-height:48px;border-radius:12px;border:1px solid #4f706b;padding:11px 12px;font-size:14px;font-weight:750;color:#f1fff9;flex:1}.btn-main{background:#296451;border-color:#4d957c}.btn-light{background:#20333c;border-color:#385358;color:#e1f3f1}.btn-subtle{background:#192b31;border:1px solid #30474d;color:#bbd7d1}.btn-block{width:100%;margin-top:9px}.status{font-size:12px;color:#b9f5e2;line-height:1.45;min-height:1em;margin:8px 1px 0}.status:empty{margin:0;min-height:0}.detail-card{padding:15px 20px}.detail-card>summary{display:flex;justify-content:space-between;align-items:center;gap:13px;list-style:none;cursor:pointer;min-height:39px;font-size:16px;font-weight:800}.detail-card>summary::-webkit-details-marker{display:none}.detail-right{display:flex;align-items:center;gap:10px}.count{border-radius:15px;background:#263d40;color:#b2ddce;padding:3px 9px;font-size:12px}.chevron{color:#a0e8d5;font-size:20px;font-weight:500;transition:transform .15s}.detail-card[open] .chevron{transform:rotate(180deg)}.detail-content{border-top:1px solid #2d464b;margin-top:16px;padding-top:17px}.list{display:grid;gap:8px;margin-top:13px}.list:empty{display:none}.saved-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px;background:#0f1d23;border:1px solid #2c444a;border-radius:12px}.saved-info{min-width:0;flex:1}.saved-info strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.saved-info small{display:block;color:#a5bdc0;margin-top:4px;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.saved-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.small-btn{border-radius:9px;min-height:43px;padding:8px 11px;border:1px solid #477569;background:#204d42;color:#ddfff3;font-size:12px;font-weight:750}.small-btn.alt{background:#1e303b;border-color:#456174}.small-btn.delete{background:#35262c;border-color:#68505a;color:#f8d1d5}.empty{font-size:12px;color:#a6bec2;margin:5px 0;line-height:1.65}.inner-divider{height:1px;background:#30464c;margin:22px 0 18px}.detail-content h3{font-size:15px;margin:0 0 11px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9px}.two-col .field-label{font-size:12px}.two-col .field-input{font-size:16px}.product-optional{margin-top:16px}.product-optional .mini-body{padding-bottom:12px}.foam-input input{font-size:19px}.foam-input select,.foam-input .unit-fixed{width:62px;padding:0 1px;font-size:12px}.foam-result{margin-top:19px}.foam-result .result-line strong{font-size:clamp(25px,7vw,36px)}.foam-result .result-cell{min-height:110px}.foam-effective{font-size:13px;color:#e9faf5}.gap-top{margin-top:15px}.storage-warning{margin:10px 0 16px;padding:12px;color:#ffd8bd;border-radius:12px;background:#443128;font-size:13px}.safety{border:1px solid #34434b;border-radius:13px;padding:15px 16px;margin:20px 1px 13px;background:#101a20}.safety strong{font-size:13px;color:#ebf0df}.safety p{font-size:12px;color:#adbdc1;line-height:1.65;margin:5px 0 0}.footer{padding:10px 3px 0;color:#91acae;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px}.footer b{color:#b9f5df}.footer a{color:#b9f0e3;text-decoration:underline;text-underline-offset:3px}.footer p{flex-basis:100%;font-size:11px;margin:0;line-height:1.5}.info-page{max-width:660px}.info-page .card{line-height:1.75}.info-page h2{font-size:19px}.info-page h3{font-size:15px}.info-page p,.info-page li{color:#bdcbcd;font-size:14px}.info-page ul{padding-left:22px}.info-page a{color:#b9f0e3}.back-link{display:inline-block;color:#bbf4e5;font-size:14px;margin-bottom:14px}.site-stamp{font-size:12px;color:#9badb0}@media (max-width:390px){.card{padding:17px}.detail-card{padding:14px 16px}.masthead h1{letter-spacing:-2.2px}.result-cell{padding:14px 10px}.result-label{font-size:13px}.result-line strong{font-size:clamp(25px,8.4vw,36px)}.saved-row{flex-wrap:wrap}.saved-actions{margin-left:auto}.two-col{gap:7px}.field-input{padding:11px}.foam-input select,.foam-input .unit-fixed{width:53px}.result-actions .btn{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* v12: Mix Cards - a quick return path for repeat mixes. */
.mix-section{padding-bottom:18px}
.mix-count{display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:27px;margin-left:5px;padding:0 7px;border-radius:30px;background:#203f3a;color:#b9f6e5;font-size:12px;vertical-align:middle}
.mix-description{margin-top:0;margin-bottom:13px}
.mix-cards{display:grid;gap:10px}
.mix-empty{margin:0;padding:7px 0;color:#b3c2c3}
.mix-card{border:1px solid #365c59;border-radius:14px;padding:13px;background:linear-gradient(160deg,#172a2b,#122025)}
.mix-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.mix-card-ident{min-width:0;flex:1}
.mix-card-ident strong{font-size:15px;font-weight:760;line-height:1.5;display:block;color:#f4f9f6;overflow-wrap:anywhere}
.mix-card-ident small{display:block;color:#afc2c0;font-size:11px;line-height:1.6;margin-top:3px}
.mix-selected{font-size:10px;color:#beeeda;border-radius:10px;padding:3px 7px;background:#23594a;flex-shrink:0}
.mix-card-buttons{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.mix-card-buttons .small-btn{min-height:46px;flex:1 1 auto;white-space:nowrap;font-size:12px;padding:8px 10px}
.mix-card-buttons .mix-default{background:#a0ebca;color:#10241c;border-color:#a0ebca;font-weight:850;flex-basis:100%}
.mix-card-buttons .mix-quick{background:#203e3e;color:#e1faf2}
.mix-hint{color:#8faeaf;margin:6px 0 0;font-size:10px;text-align:right}
.mix-card-tools{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.mix-card-tools .small-btn{font-size:11px;background:transparent;border-color:#3b555a;color:#a8c7c6;min-height:39px;padding:6px 9px}
.mix-card-tools .mix-delete{color:#e8adb0}
.mix-rename{margin-top:10px;padding-top:12px;border-top:1px solid #345157;display:flex;gap:7px;flex-wrap:wrap}
.mix-rename label{width:100%;display:block}
.mix-rename input{margin-top:4px;width:100%}
.mix-save{margin:13px 0}
.mix-save summary{font-weight:750;color:#c6ffea}
.mix-save .mini-body{padding-bottom:13px}
.mix-save .field-input{margin-top:7px}
.mix-save #mixSaveBtn{margin-top:12px}
.mix-active{color:#baf4d7;font-size:12px;padding:7px 10px;border-radius:9px;border:1px solid #335849;background:#173329;overflow-wrap:anywhere}
@media(max-width:350px){.mix-card-buttons .small-btn{font-size:11px;padding:8px 6px}.mix-card{padding:11px}}

/* v13 QR labels and shared mix links */
.mix-card-tools .mix-qr{background:#20594e;border-color:#53a891;color:#d9fff0}
.shared-mix{border-color:#559781;background:linear-gradient(155deg,#214137,#122526)}
.shared-mix-name{display:block;font-size:19px;overflow-wrap:anywhere;margin:9px 0 6px}
.shared-mix-detail{margin:0 0 14px;color:#c6ddd6;font-size:13px;line-height:1.6}
.qr-dialog{box-sizing:border-box;background:#102025;border:1px solid #456d61;border-radius:20px;color:#ecf6f2;width:min(92vw,510px);max-height:min(90vh,850px);overflow:auto;padding:21px;margin:auto;box-shadow:0 30px 80px #000a}
.qr-dialog::backdrop{background:rgba(3,11,13,.82)}
.qr-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
.qr-kicker{color:#94cab9;font-size:10px;letter-spacing:.13em;margin:0 0 7px;font-weight:800}
.qr-dialog h2{font-size:21px;margin:0}
.qr-close{border:1px solid #40625e;color:#e4fff5;background:#1c3635;border-radius:12px;min-width:44px;min-height:44px;font-size:20px}
.qr-label-preview{background:#f3f6f3;padding:9px;border-radius:11px;margin:15px 0 11px}
.qr-label-preview img{display:block;width:100%;height:auto;border-radius:3px}
.qr-private{color:#a8c0bd;font-size:12px;line-height:1.6;margin:9px 0}
.qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.qr-actions .btn{min-width:0}
.qr-actions .btn:last-child{grid-column:span 2}
.qr-print-only{display:none}
@media(max-width:390px){.qr-dialog{padding:15px}.qr-actions .btn{font-size:13px}}
@media print{
  @page{size:auto;margin:10mm}
  body{background:#fff!important;padding:0!important;margin:0!important}
  body>*:not(.qr-print-only){display:none!important}
  .qr-dialog{display:none!important}
  .qr-print-only{display:block!important;width:85mm!important;margin:0!important}
  .qr-print-only img{display:block;width:85mm!important;height:auto!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* v14 - QR opens straight into a working, adjustable mixing preview. */
.shared-quick{margin-top:14px;padding-top:14px;border-top:1px solid #416958}
.shared-quick-heading{display:flex;gap:10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin-bottom:9px}
.shared-quick-heading .field-label{margin:0;color:#effff6;font-size:15px}
.shared-quick-help{font-size:11px;color:#aecac0}
.shared-preset-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:17px}
.shared-preset{min-width:0;min-height:48px;padding:8px 5px;border-radius:10px;border:1px solid #4e7166;background:#16302e;color:#e1f7ed;font-size:12px;font-weight:750;line-height:1.25;overflow-wrap:anywhere}
.shared-preset.active{background:#b0f5d4;color:#112b24;border-color:#b0f5d4}
.shared-input{margin-top:8px}
.shared-input input{font-size:22px}
.shared-quick .micro{margin:9px 0 12px}
.shared-result{margin-top:15px}
.shared-result .result-cell{min-height:112px}
.shared-total{font-size:13px;color:#d4f7e6;font-weight:750;margin:10px 2px 0}
.shared-primary{margin-top:17px;min-height:54px;background:#b2f6d6;border-color:#b2f6d6;color:#0d2b22;font-size:15px;font-weight:850}
.shared-secondary-actions{display:flex;gap:8px;margin-top:9px}
.shared-secondary-actions .btn{min-width:0}
.shared-mix>.text-btn{margin-top:10px}
.shared-quick button:disabled{cursor:not-allowed;opacity:.48}
@media(max-width:390px){.shared-preset{font-size:11px;padding:8px 3px}.shared-secondary-actions .btn{font-size:12px}}
@media(max-width:340px){.shared-preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v15: concentrate-left reverse calculator */
.reverse-panel{border-color:#3a6558}
.reverse-panel>summary{min-height:50px}
.reverse-teaser{display:block;color:#a4beb9;font-size:11px;font-weight:500;line-height:1.4;margin-top:4px}
.reverse-panel .detail-content>.no-top strong{color:#e2fff2}
.reverse-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.reverse-basis{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:13px}
.reverse-basis strong{color:#c7ffe7}
.reverse-ratio-link{min-height:40px;margin-left:auto;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.reverse-output{display:grid;gap:10px;margin-top:17px}
.reverse-total,.reverse-water{border:1px solid #395b52;border-radius:14px;padding:17px 16px;background:#122a2a}
.reverse-total{background:linear-gradient(130deg,#255d4c,#163a34);border-color:#4a987f}
.reverse-total span,.reverse-water span{display:block;color:#c5e3d9;font-size:12px;font-weight:750;margin-bottom:7px}
.reverse-total strong,.reverse-water strong{font-size:clamp(27px,8vw,38px);letter-spacing:-1px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reverse-note{margin-top:13px}
.reverse-actions{margin-top:16px}
.reverse-actions button:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:350px){.reverse-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* v16 - Dedicated, uncluttered high-contrast on-site mixing display. */
.btn-work{margin-top:12px;min-height:55px;background:linear-gradient(110deg,#adf6d4,#80e6c7);color:#102c24;border:1px solid #a0f0d1;font-size:15px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-work span{font-size:19px}.work-teaser{margin:8px 2px 0;text-align:center;font-size:11px}.shared-work{margin-top:11px}
.work-dialog{border:0;border-radius:0;margin:0;padding:0;width:100%;max-width:100%;height:100vh;max-height:100vh;background:#0a1317;color:#f0fff9;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports(height:100dvh){.work-dialog{height:100dvh;max-height:100dvh}}
.work-dialog::backdrop{background:rgba(2,8,11,.9)}
.work-inner{max-width:690px;margin:auto;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(23px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.work-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.work-kicker{font-size:11px;letter-spacing:.12em;color:#a5ddc9;font-weight:800}.work-dot{font-size:8px;color:#6ef0be;margin:0 4px}
.work-close{border-radius:12px;border:1px solid #526e69;background:#203438;color:#e6fff5;min-height:52px;padding:8px 15px;display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800}
.work-intro{margin:21px 0 17px}.work-intro h2{font-size:clamp(27px,7vw,37px);margin:0 0 7px;letter-spacing:-.04em}.work-recipe{font-size:15px;color:#d9f3e9;font-weight:700;margin:0 0 12px;overflow-wrap:anywhere}.work-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.work-meta span{border:1px solid #477367;border-radius:8px;padding:7px 10px;background:#1c3f36;font-size:13px;color:#d0ffea;font-weight:750}
.work-results{display:grid;grid-template-columns:1fr;gap:11px}.work-result{min-width:0;border-radius:19px;border:1px solid #3e635a;background:#172d2e;padding:15px 20px 18px}.work-result-primary{background:linear-gradient(125deg,#1f5a48,#11372f);border-color:#6dd2ab}.work-result-water{background:#18303b;border-color:#41647a}.work-result-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:16px;font-weight:850;color:#edfff6}.work-result-label small{color:#acc6c4;font-size:10px;letter-spacing:.1em;font-weight:750}
.work-value{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px;font-variant-numeric:tabular-nums}.work-value strong{font-size:clamp(43px,12vw,67px);letter-spacing:-.055em;line-height:1.1;font-weight:870;min-width:0;overflow-wrap:anywhere}.work-value span{font-size:21px;font-weight:780;color:#b8e4d7;flex-shrink:0}
.work-total{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 3px 5px;color:#b4cfc6;font-size:13px;font-weight:700}
.work-controls{border-top:1px solid #35514c;padding-top:17px;margin-top:11px}.work-controls h3{font-size:18px;line-height:1.25;margin:0 0 6px}.work-caption{font-size:12px;color:#afc7c2;line-height:1.6;margin:0 0 13px}.work-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.work-preset{min-height:58px;border:1px solid #4d7066;border-radius:12px;background:#18352e;color:#e4fff5;font-size:14px;font-weight:850;padding:7px 3px;overflow-wrap:anywhere}.work-preset.active{background:#a9f3d0;color:#102d22;border-color:#a9f3d0}.work-preset:disabled{opacity:.45}
.work-input-label{display:block;font-size:13px;font-weight:750;margin:14px 0 8px;color:#e1f6ef}.work-input input{font-size:24px;min-height:57px}.work-input select{min-height:57px}.work-error{margin:9px 1px 0;color:#ffd4c9;font-size:13px}
.work-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.work-action{min-width:0;min-height:57px;border-radius:13px;font-size:15px;font-weight:800;padding:10px 8px}.work-action-main{color:#123127;background:#adf4d5;border:1px solid #adf4d5}.work-action-sub{color:#d8f6ee;background:#20383b;border:1px solid #58736f}.work-action:disabled{opacity:.45;cursor:not-allowed}
.work-utility{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}.work-wake{background:#203734;color:#c8f0e1;border:1px solid #456b60;border-radius:10px;padding:9px 12px;min-height:44px;font-size:12px;font-weight:750}.work-wake[aria-pressed="true"]{background:#4d8f76;color:#fff}.work-status{color:#c5f5d9;font-size:12px;min-height:16px;margin:5px 0}.work-safety{font-size:12px;color:#aabdb8;margin:15px 0 0;line-height:1.55;border-top:1px solid #273f3c;padding-top:12px}
@media(min-width:650px){.work-results{grid-template-columns:1fr 1fr}.work-result{min-height:156px}.work-value strong{font-size:clamp(38px,5vw,59px)}}
@media(max-width:370px){.work-intro{margin:14px 0 13px}.work-result{padding:12px 15px 14px}.work-value strong{font-size:clamp(39px,11vw,51px)}.work-preset{font-size:12px;min-height:55px}.work-results{gap:8px}.work-presets{gap:5px}.work-action{font-size:13px}.work-inner{padding-right:13px;padding-left:13px}}
@media(prefers-reduced-motion:reduce){.work-dialog *{scroll-behavior:auto}}


/* v20 - public beta: simple onboarding, repeat last mix, and multi-container planner. */
.first-guide{border-color:#4f8e79;background:linear-gradient(140deg,#183b34,#132128)}
.first-guide .micro{line-height:1.65}.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:15px 0 18px}
.guide-steps span{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;border:1px solid #39665c;background:#162b29;border-radius:13px;padding:12px 4px;font-size:11px;color:#d4efe6;font-weight:750;line-height:1.4}
.guide-steps b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#b8f4d8;color:#133429;font-size:13px}
.guide-examples{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.guide-examples button{font-size:13px;min-height:54px;padding:9px}
.guide-dismiss{width:100%;text-align:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.recent-section{border-color:#365952}.recent-list{display:grid;gap:8px}.recent-item{border:1px solid #365750;border-radius:13px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:9px;background:#162b2b}
.recent-info{display:flex;flex-direction:column;gap:3px;min-width:0}.recent-info strong{font-size:13px;overflow-wrap:anywhere}.recent-info small{font-size:11px;color:#abc9bd;line-height:1.5}.recent-button{min-width:100px;min-height:47px;border:1px solid #7bbf9d;background:#245a49;color:#eafff6;border-radius:11px;font-size:12px;font-weight:850;padding:7px 9px}
.batch-teaser{display:block;color:#a4beb9;font-size:11px;font-weight:500;line-height:1.4;margin-top:4px}.batch-panel{border-color:#426155}.batch-panel .input-pair{min-width:0}
.batch-count-input input{min-width:0}.batch-count-input .unit-fixed{min-width:41px}.batch-panel .full-select{margin:8px 0 5px}
.batch-results{margin-top:14px}.batch-total-heading{color:#d9f9e7;font-weight:850;font-size:13px;margin:10px 0}.batch-per,.batch-total{font-size:12px;color:#c8e6db;line-height:1.6;margin:12px 0 0}.batch-total{font-weight:800}
.batch-results .result-grid{margin:0}.batch-results .result-line strong{font-size:clamp(26px,7vw,35px)}
@media(max-width:365px){.guide-examples{grid-template-columns:1fr}.recent-item{align-items:stretch;flex-direction:column}.recent-button{width:100%}.batch-panel .two-col{grid-template-columns:1fr}}

/* v21: faster one-screen path, optimized for iPhone */
.shell{padding-top:10px}.masthead{padding:3px 3px 15px}.masthead h1{font-size:clamp(33px,8.1vw,47px);margin:12px 0 6px}.tagline{font-size:13px}
.card{padding:17px 18px;margin-bottom:10px;border-radius:19px}.section-line{margin-bottom:11px}.field-group{margin-top:15px}.field-label{margin-bottom:7px}
.context-card{padding:13px 16px}.context-card .section-line{margin-bottom:9px}.context-card .micro{margin-top:7px}
.segment{min-height:44px;padding:8px 6px}.input-pair input,.input-pair select,.unit-fixed{min-height:49px}.chips{gap:7px;margin-top:8px}.chip{min-height:44px}
.calculator .field-group:first-of-type{margin-top:0}.calculator .field-group .micro{margin-top:6px}
.result-cell{min-height:113px}.results{border-color:#4c8e78}.results .result-line strong{font-size:clamp(30px,8.1vw,45px)}
.work-teaser{display:none}.detail-card{padding:13px 18px}.detail-card>summary{min-height:44px}
.first-guide{padding:0 16px;border-color:#42665c;background:#142b28}.first-guide .guide-summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:46px;color:#d5fff2;font-size:13px;font-weight:800}
.first-guide .guide-summary::-webkit-details-marker{display:none}.first-guide .guide-summary::after{content:'⌄';margin-left:auto;font-size:18px;color:#a2e4d0}.first-guide[open] .guide-summary::after{content:'⌃'}
.guide-body{padding:8px 0 15px}.guide-steps{margin:12px 0}.guide-examples{margin-top:8px}
@media(max-width:390px){.card{padding:15px}.context-card{padding:12px 14px}.detail-card{padding:12px 15px}.first-guide{padding:0 14px}.result-cell{padding:13px 10px}.chips{gap:6px}.result-line strong{font-size:clamp(29px,8.5vw,40px)}}

/* v22: share and public how-to guide */
.share-help{margin:4px 0 10px!important;font-size:12px;line-height:1.6}
.guide-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.guide-result>div{background:#12282a;border:1px solid #39645c;border-radius:16px;padding:18px;display:grid;gap:9px}.guide-result span{font-size:14px;color:#aac6bd}.guide-result strong{font-size:clamp(24px,6vw,40px);letter-spacing:-1px;color:#defcf1;font-variant-numeric:tabular-nums}
.guide-table-wrap{overflow-x:auto}.guide-table{width:100%;border-collapse:collapse;min-width:320px;font-size:14px}.guide-table th,.guide-table td{padding:14px 7px;text-align:left;border-bottom:1px solid #32494b}.guide-table th{color:#a9d9cb}.info-page .card h3{font-size:17px;margin:22px 0 7px}.info-page .card p{line-height:1.8}
@media(max-width:400px){.results .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.results .result-actions button:last-child{grid-column:1/-1}}

/* local, opt-in inspection of feature usage */
.usage-rows{display:grid;gap:10px;margin-top:15px}.usage-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 4px;border-bottom:1px solid rgba(174,241,221,.14);font-size:.94rem}.usage-row strong{white-space:nowrap;color:#a8f1db}.usage-totals{font-size:.94rem;color:#d6eae5}

/* v24: small adjustments, feedback helper */
.fine-tune{margin-top:9px}.fine-tune>span{display:block;font-size:12px;color:#a8c4bf;margin-bottom:7px}.fine-tune-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.fine-tune-buttons button{min-width:0;min-height:44px;padding:8px 3px;border-radius:10px;border:1px solid #3f625e;background:#1c3538;color:#c4f7e7;font-weight:750;font-size:13px}.fine-tune-buttons button:active{background:#286650}.feedback-label{display:block;margin-top:15px}.feedback-text{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:13px;font-size:16px;line-height:1.5;background:#0b1a20;border:1px solid #395c60;border-radius:12px;color:#effff9;resize:vertical}.feedback-text:focus-visible,.fine-tune-buttons button:focus-visible{outline:2px solid #9cead1;outline-offset:2px}

/* v25 - personally saved bottle sizes */
.custom-volume{border:1px solid var(--line,#355052);border-radius:15px;padding:12px 13px;margin-top:12px;background:rgba(112,225,197,.035)}
.custom-volume-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.custom-volume-head .field-label{margin:0}.custom-volume-head .micro{margin:0;font-size:.77rem}
.custom-volume-row{display:flex;gap:8px;flex-wrap:wrap;min-height:20px}
.custom-volume-item{display:flex;align-items:stretch;border:1px solid #486860;border-radius:12px;overflow:hidden;min-height:44px;background:#1d3337}
.custom-volume-use{border:0;background:transparent;color:#d5fff1;padding:10px 13px;font:inherit;font-weight:750;cursor:pointer}
.custom-volume-delete{border:0;border-left:1px solid #486860;background:transparent;color:#bdd4cf;padding:9px 12px;cursor:pointer;font:inherit}
.custom-volume-use:focus-visible,.custom-volume-delete:focus-visible{outline:2px solid #99ecd6;outline-offset:-2px}
.custom-volume-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px}
.custom-volume-actions .btn{min-height:44px;padding:9px 14px;flex:1;white-space:normal}
.custom-volume-actions .text-btn{min-height:44px;padding:9px 5px}
#customVolumeStatus{margin:8px 0 0;min-height:1em;font-size:.78rem}
@media(max-width:370px){.custom-volume{padding:10px}.custom-volume-use{padding:9px 10px}.custom-volume-delete{padding:9px 11px}}

/* v26 compact product × bottle shortcuts */
.quick-recipe-buttons{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0 10px}
.quick-recipe-button{flex:1 1 105px;min-height:48px;white-space:normal}
.quick-recipe-button:disabled{opacity:.48;cursor:not-allowed}
.quick-product-panel .detail-content > .field-label{display:block;margin-top:12px}
.quick-product-panel .status{min-height:1em}

/* v27: compact, optional product entry helpers */
.v27-assist{margin:12px 0 16px;padding:14px;border:1px solid rgba(125,224,195,.22);border-radius:14px;background:rgba(100,196,169,.055)}
.v27-assist-title{font-size:14px;font-weight:700;margin-bottom:8px}
.v27-current{width:100%;min-height:44px;margin-bottom:12px}
.v27-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:6px 0 9px}
.v27-input-row .field-input{min-width:0;font-size:16px}
.v27-input-row .btn{min-height:44px;min-width:76px}
.v27-assist .status{min-height:0;margin:8px 0 0}

/* v28 – fast repeatable routines */
.routine-list{display:grid;gap:10px}
.routine-item{display:flex;gap:8px;align-items:stretch;min-width:0}
.routine-use{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:13px 15px;border-radius:14px;border:1px solid rgba(78,221,191,.35);background:rgba(56,193,163,.09);color:inherit;min-height:57px;cursor:pointer}
.routine-use strong{font-size:15px;overflow-wrap:anywhere}
.routine-use small{color:var(--muted,#a4b9b5);font-size:12px;line-height:1.45}
.routine-use:focus-visible,.routine-delete:focus-visible{outline:3px solid #65dec2;outline-offset:2px}
.routine-delete{border:1px solid rgba(255,255,255,.18);border-radius:12px;color:inherit;background:transparent;min-width:55px;min-height:48px;padding:8px;cursor:pointer;font-size:13px}
.routine-save{margin-top:12px}