/* Approved illustrated calculator. Isolated from all other tools. */
.rkc-cartoon-workspace .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.rkc-reconstitution-page #calculator { background: linear-gradient(120deg,#f6f9fc,#fff 58%,#f8fbfd); padding: 48px 0 36px; scroll-margin-top: 20px; }
.rkc-reconstitution-page #calculator > .container { width: calc(100% - 96px); max-width: 1370px; }
.rkc-reconstitution-page .rkc-simple-calculator { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.rkc-reconstitution-page .rkc-simple-calculator::before { content: none; }
.rkc-reconstitution-page .rkc-cartoon-workspace { display: grid; grid-template-columns: minmax(0,.44fr) minmax(0,.56fr); gap: 32px; }
.rkc-cartoon-workspace .rkc-simple-inputs { padding: 0 38px 0 0; display: flex; flex-direction: column; gap: 0; border-right: 1px solid #dbe4ee; }
.rkc-cartoon-intro nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 14px; color: #526b88; line-height: 1.5; }
.rkc-cartoon-intro nav a { color: inherit; text-decoration: none; }
.rkc-cartoon-intro h1 { margin: 28px 0 10px; color: #071f42; font-size: clamp(30px,3.9vw,58px); font-weight: 750; line-height: 1.12; letter-spacing: -.045em; }
.rkc-cartoon-intro > p { font-size: clamp(16px,1.55vw,22px); color: #526b88; line-height: 1.6; margin: 0; }
.rkc-cartoon-workspace .rkc-simple-inputs h2 { font-size: 28px; color: #071f42; margin: 48px 0 16px; letter-spacing: -.025em; }
.rkc-cartoon-modes { display: flex; padding: 3px; border: 1px solid #cedbeb; border-radius: 50px; margin-bottom: 30px; min-width: 0; }
.rkc-cartoon-modes button { flex: 1; background: transparent; border: 1px solid transparent; border-radius: 40px; padding: 13px 8px; color: #425d7c; cursor: pointer; font: inherit; font-size: 17px; line-height: 1.3; }
.rkc-cartoon-modes button[aria-pressed="true"] { background: #fff3ea; border-color: #ffc79c; color: #c64605; font-weight: 600; }
.rkc-cartoon-workspace .rkc-simple-field { margin-bottom: 28px; }
.rkc-cartoon-workspace .rkc-simple-field label { color: #071f42; font-size: 17px; font-weight: 600; text-transform: none; }
.rkc-cartoon-workspace .rkc-simple-field > div { grid-template-columns: minmax(0,1fr) 125px; gap: 16px; margin-top: 9px; }
.rkc-cartoon-workspace .rkc-simple-inputs input,.rkc-cartoon-workspace .rkc-simple-inputs select { height: 64px; border-color: #cad8e8; border-radius: 12px; background-color: #ffffffa6; padding: 12px 20px; font-size: 24px; color: #112b4c; box-shadow: none; }
.rkc-cartoon-workspace .rkc-simple-inputs select { font-size: 18px; padding-right: 30px; }
.rkc-cartoon-workspace .rkc-calc-actions { display: flex; flex-wrap: nowrap; gap: 28px; padding: 8px 0 0; }
.rkc-cartoon-workspace .rkc-calc-actions .rkc-button { width: auto; }
.rkc-cartoon-workspace .rkc-calc-actions .rkc-button-navy { display: flex; justify-content: space-between; gap: 45px; flex: 1; max-width: 310px; background: linear-gradient(120deg,#ff8136,#f25c11); color: white; border: 1px solid #f37129; border-radius: 12px; min-height: 70px; padding: 16px 28px; font-size: 21px; box-shadow: 0 8px 20px #f36a1614; }
.rkc-cartoon-workspace .rkc-calc-actions .rkc-button-navy:hover { background: #df530b; }
.rkc-cartoon-workspace .rkc-calc-actions .rkc-button-light { border: 0; background: none; color: #435c7a; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; padding: 12px 0; font-size: 17px; }
.rkc-cartoon-workspace .rkc-simple-example { color: #c64708; font-size: 16px; margin-top: 23px; text-underline-offset: 4px; }
.rkc-cartoon-workspace .rkc-cartoon-privacy { display: flex; align-items: center; gap: 15px; padding-top: 55px; margin: auto 0 0; color: #536c88; font-size: 14px; }
.rkc-cartoon-privacy .dashicons { font-size: 25px; height: 27px; width: 27px; }
.rkc-cartoon-workspace .rkc-simple-output { padding: 0; background: none; border: 0; min-width: 0; }
.rkc-cartoon-model { position: relative; isolation: isolate; padding-bottom:40px; margin-bottom:8px; }
.rkc-cartoon-replay { position:absolute; right:0; bottom:0; display:flex; align-items:center; gap:7px; min-height:40px; border:0; background:transparent; padding:8px 0 8px 12px; color:#526b88; font:inherit; font-size:12px; cursor:pointer; }
.rkc-cartoon-replay .dashicons { font-size:16px; width:16px; height:16px; }
.rkc-cartoon-replay:hover:not(:disabled) { color:#be440b; }
.rkc-cartoon-replay:disabled { opacity:.5; cursor:default; }
.rkc-cartoon-art { position: relative; aspect-ratio: 1328/1184; mix-blend-mode: multiply; }
.rkc-cartoon-art .rkc-cartoon-vial { width: 100%; height: auto; display: block; }
.rkc-cartoon-art .rkc-cartoon-liquid { position: absolute; left: 31.5%; width: 36.3%; height: 45.5%; bottom: 11.6%; object-fit: fill; max-width: none; transform-origin: center bottom; transform: scaleY(0); opacity: 0; mix-blend-mode: multiply; filter: brightness(1.12) saturate(1.15); transition: transform .6s cubic-bezier(.2,.7,.25,1),opacity .15s; }
.rkc-cartoon-model[data-model-state="preview"] .rkc-cartoon-liquid,.rkc-cartoon-model[data-model-state="confirmed"] .rkc-cartoon-liquid { opacity: .95; }
.rkc-cartoon-pause { position: absolute; right: 0; top: 2px; z-index: 2; width: 48px; height: 48px; border: 1px solid #aebfd3; border-radius: 50%; background: #ffffffa6; color: #435c7a; cursor: pointer; display: grid; place-items: center; }
.rkc-cartoon-pause .dashicons { width: 23px; height: 23px; font-size: 23px; }
.rkc-cartoon-callout { position: absolute; top: 44%; z-index: 1; background: #fff; border: 1px solid #9cacc4; border-radius: 12px; padding: 10px 15px; min-width: 100px; text-align: center; max-width: 31%; font-size: clamp(13px,1.7vw,24px); color: #092445; line-height: 1.35; overflow-wrap: anywhere; }
.rkc-cartoon-callout strong { font-weight: 650; }
.rkc-cartoon-mass { left: 0; }
.rkc-cartoon-volume { right: 0; top: 48%; }
.rkc-cartoon-workspace .rkc-simple-output .rkc-result { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr) auto; grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 22px 28px; margin-top: 0; border-radius: 22px; background: #fff1e8; min-height: 140px; border: 0; }
.rkc-cartoon-workspace .rkc-result > span { grid-column: 1; grid-row: 1; color: #536e8b; font-size: 12px; letter-spacing: .11em; line-height: 1.5; }
.rkc-cartoon-workspace .rkc-result > strong { grid-column: 1; grid-row: 2; color: #092445; font-size: clamp(25px,3.9vw,58px); line-height: 1.2; font-weight: 750; margin: 9px 0 0; overflow-wrap: anywhere; }
.rkc-cartoon-workspace .rkc-result:not(.has-value) > strong { font-size: 22px; }
.rkc-cartoon-workspace .rkc-result [data-equation] { grid-column: 2; grid-row: 1/3; border-left: 1px solid #f0cdb6; padding-left: 24px; margin: 0; font-family: inherit; font-size: clamp(14px,1.5vw,20px); font-weight: 400; line-height: 1.65; color: #536e8b; }
.rkc-cartoon-workspace .rkc-result:not(.has-value) [data-equation] { font-size: 13px; }
.rkc-cartoon-workspace .rkc-result.has-error > strong { color: #a23822; }
.rkc-cartoon-workspace .rkc-result.is-stale > strong { color: #875528; }
.rkc-cartoon-workspace .rkc-result .rkc-cartoon-copy { grid-column: 3; grid-row: 1/3; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #fac9a8; border-radius: 12px; background: #fff; color: #3c5573; font-size: 0; margin: 0; padding: 0; cursor: pointer; }
.rkc-cartoon-copy::before { content: '\f105'; font-family: dashicons; font-size: 24px; font-weight: normal; }
.rkc-cartoon-copy[aria-label="Copied"]::before { content: '\f147'; }
.rkc-cartoon-workspace .rkc-cartoon-limit { text-align: center; font-size: 12px; color: #596f87; line-height: 1.6; margin: 16px 0 28px; }
.rkc-cartoon-workspace .rkc-cartoon-method { display: flex; align-items: flex-start; gap: 15px; padding-top: 26px; border-top: 1px solid #dbe4ee; color: #526b88; font-size: 15px; line-height: 1.6; margin: 0; }
.rkc-cartoon-method .dashicons { color: #ef7828; flex: 0 0 26px; width: 26px; height: 27px; font-size: 27px; }
.rkc-cartoon-details { font-size: 12px; color: #536c83; line-height: 1.7; margin-top: 20px; }
.rkc-cartoon-details summary { cursor: pointer; color: #526b88; }
.rkc-cartoon-details p { font-size: inherit; color: inherit; margin: 12px 0 0; }
.rkc-cartoon-workspace :is(button,a,summary):focus-visible { outline: 3px solid #dc762f; outline-offset: 4px; }
.rkc-cartoon-model[data-motion="paused"] .rkc-cartoon-liquid { transition: none; }
@media(max-width:1100px) {
 .rkc-reconstitution-page #calculator > .container { width: calc(100% - 48px); }
 .rkc-reconstitution-page .rkc-cartoon-workspace { gap: 24px; }
 .rkc-cartoon-workspace .rkc-simple-inputs { padding-right: 24px; }
 .rkc-cartoon-intro h1 { font-size: 36px; }
 .rkc-cartoon-workspace .rkc-simple-inputs h2 { font-size: 24px; margin-top: 32px; }
 .rkc-cartoon-workspace .rkc-simple-field > div { grid-template-columns: minmax(0,1fr) 90px; gap: 10px; }
 .rkc-cartoon-workspace .rkc-simple-inputs input,.rkc-cartoon-workspace .rkc-simple-inputs select { padding: 10px 12px; font-size: 18px; height: 54px; }
 .rkc-cartoon-modes button { font-size: 14px; }
 .rkc-cartoon-workspace .rkc-calc-actions { gap: 18px; }
 .rkc-cartoon-workspace .rkc-calc-actions .rkc-button-navy { padding: 14px 18px; font-size: 18px; gap: 16px; min-height: 58px; }
 .rkc-cartoon-callout { min-width: 76px; padding: 8px 10px; }
 .rkc-cartoon-workspace .rkc-simple-output .rkc-result { padding: 18px; gap: 10px; }
 .rkc-cartoon-workspace .rkc-result [data-equation] { padding-left: 12px; }
 .rkc-cartoon-workspace .rkc-result .rkc-cartoon-copy { width: 40px; height: 44px; }
}
@media(max-width:800px) {
 .rkc-reconstitution-page .rkc-cartoon-workspace { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .rkc-cartoon-workspace .rkc-simple-inputs { border-right: 0; padding: 0; }
 .rkc-cartoon-intro h1 { font-size: clamp(30px,6vw,44px); }
 .rkc-cartoon-workspace .rkc-cartoon-privacy { padding-top: 25px; }
 .rkc-cartoon-workspace .rkc-simple-output { border-top: 1px solid #dbe4ee; padding-top: 20px; }
 .rkc-cartoon-model { max-width: 650px; margin: auto; }
 .rkc-cartoon-callout { font-size: clamp(15px,3vw,22px); }
 .rkc-cartoon-workspace .rkc-result > strong { font-size: clamp(24px,5vw,38px); }
 .rkc-cartoon-workspace .rkc-result [data-equation] { font-size: 15px; }
 .rkc-cartoon-workspace .rkc-simple-field { margin-bottom: 22px; }
 .rkc-cartoon-modes { margin-bottom: 24px; }
}
@media(max-width:420px) {
 .rkc-cartoon-replay { left:0; right:auto; padding-left:0; }
 .rkc-reconstitution-page #calculator > .container { width: calc(100% - 36px); }
 .rkc-reconstitution-page #calculator { padding-top: 28px; }
 .rkc-cartoon-intro nav { font-size: 12px; gap: 10px; }
 .rkc-cartoon-callout { min-width: 65px; padding: 7px; border-radius: 9px; }
 .rkc-cartoon-pause { width: 40px; height: 40px; }
 .rkc-cartoon-workspace .rkc-simple-output .rkc-result { grid-template-columns: minmax(0,1fr) auto; padding: 20px; }
 .rkc-cartoon-workspace .rkc-result [data-equation] { grid-column: 1; grid-row: 3; border: 0; padding: 8px 0 0; font-size: 14px; }
 .rkc-cartoon-workspace .rkc-result .rkc-cartoon-copy { grid-column: 2; grid-row: 1/4; }
}
@media(prefers-reduced-motion:reduce) { .rkc-cartoon-workspace *, .rkc-cartoon-workspace *::before { animation: none !important; transition: none !important; } }