/* Three illustrated workspaces. Scope prevents changes to other calculators. */
.rkc-cartoon-tool-page #calculator { background:linear-gradient(115deg,#f5f8fc,#fff 58%,#f7fafc); padding:48px 0 36px; scroll-margin-top:20px; }
.rkc-cartoon-tool-page #calculator>.container { width:calc(100% - 96px); max-width:1370px; padding:0; display:block; }
.rkc-cartoon-tool-page .rkc-calculator { padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.rkc-cartoon-tool-page .rkc-calculator::before { content:none; }
.rkc-cartoon-tool-page .rkc-method-card { margin-top:36px; }
.ct-workspace { display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:36px; color:#10294a; }
.ct-workspace * { box-sizing:border-box; }
.ct-workspace [hidden] { display:none !important; }
.ct-inputs { min-width:0; padding-right:36px; border-right:1px solid #dbe4ee; display:flex; flex-direction:column; }
.ct-output { min-width:0; }
.ct-intro nav { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; line-height:1.6; color:#526b88; }
.ct-intro nav a { color:inherit; text-decoration:none; }
.ct-intro h1 { font-size:clamp(30px,3.55vw,53px); line-height:1.13; font-weight:750; letter-spacing:-.04em; color:#081f42; margin:30px 0 12px; }
.ct-intro>p { color:#526b88; font-size:clamp(16px,1.5vw,22px); line-height:1.5; margin:0; }
.ct-mass .ct-intro h1 { font-size:clamp(30px,2.85vw,43px); }
.ct-fields { margin-top:46px; }
.ct-workspace .ct-field { display:block; min-width:0; margin:0 0 25px; }
.ct-workspace label,.ct-direction legend { display:block; color:#102746; font-size:16px; font-weight:600; line-height:1.45; text-transform:none; margin-bottom:8px; letter-spacing:0; }
.ct-workspace input,.ct-workspace select,.ct-workspace textarea { width:100%; min-width:0; max-width:100%; color:#112b4c; background-color:#ffffffb8; border:1px solid #cbd8e8; border-radius:12px; box-shadow:none; font:inherit; font-size:21px; padding:12px 18px; height:62px; }
.ct-workspace select { font-size:17px; padding-right:32px; }
.ct-workspace textarea { height:145px; font-family:ui-monospace,monospace; font-size:29px; letter-spacing:.05em; resize:vertical; }
.ct-workspace small { display:block; color:#526b88; font-size:13px; line-height:1.6; margin-top:8px; }
.ct-workspace :is(input,select,textarea):focus { border-color:#db762f; outline:2px solid #ffcfac; outline-offset:1px; }
.ct-workspace :is(button,a,summary):focus-visible { outline:3px solid #dc762f; outline-offset:4px; }
.ct-pair { display:grid; grid-template-columns:minmax(0,1fr) 115px; gap:12px; }
.ct-terminal-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ct-unit { border:1px solid #cbd8e8; border-radius:12px; display:grid; place-items:center; color:#526b88; font-size:17px; }
.ct-direction { border:0; padding:0; margin:0 0 28px; min-width:0; }
.ct-direction legend { font-size:22px; margin:0 0 14px; }
.ct-segmented { display:flex; gap:2px; padding:3px; border:1px solid #cbd8e8; border-radius:40px; }
.ct-segmented button { flex:1; font:inherit; font-size:16px; padding:14px 7px; border:1px solid transparent; background:transparent; color:#526b88; border-radius:40px; cursor:pointer; }
.ct-segmented button[aria-pressed=true] { background:#fff2e8; border-color:#ffc69f; color:#be440b; font-weight:600; }
.ct-actions { display:flex; gap:28px; align-items:center; margin-top:6px; }
.ct-workspace button { cursor:pointer; }
.ct-primary { display:flex; align-items:center; justify-content:space-between; gap:14px; flex:1; max-width:335px; border:1px solid #f36d22; border-radius:12px; background:linear-gradient(115deg,#ff8033,#ee580c); color:#fff; padding:18px 24px; min-height:66px; font:inherit; font-size:20px; font-weight:600; box-shadow:0 8px 20px #f36a1614; transition:transform .18s,box-shadow .18s; }
.ct-primary:hover { transform:translateY(-2px); box-shadow:0 10px 24px #d95c2426; }
.ct-primary .dashicons { flex-shrink:0; }
.ct-text-button,.ct-example { background:none; border:0; padding:10px 0; font:inherit; font-size:16px; color:#425d7c; text-decoration:underline; text-underline-offset:4px; }
.ct-example { color:#bb470b; align-self:flex-start; margin-top:12px; }
.ct-privacy { margin:auto 0 0; padding-top:38px; color:#536c88; display:flex; gap:12px; align-items:center; font-size:13px; line-height:1.6; }
.ct-privacy .dashicons { flex:0 0 24px; width:24px; height:24px; font-size:24px; }
.ct-model { position:relative; min-width:0; padding-bottom:40px; }
.ct-replay { position:absolute; bottom:0; right: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; }
.ct-replay .dashicons { font-size:16px; width:16px; height:16px; }
.ct-replay:hover:not(:disabled) { color:#be440b; }
.ct-replay:disabled { opacity:.5; cursor:default; }
.ct-sequence .ct-model,.ct-dilution .ct-model { background:url('cartoon-lab-backdrop.webp') center/contain no-repeat; }
.ct-model h2 { color:#0a2141; font-size:clamp(25px,2.4vw,36px); line-height:1.25; font-weight:700; letter-spacing:-.035em; margin:24px 60px 24px 0; }
.ct-pause { position:absolute; right:0; top:0; z-index:2; border-radius:50%; border:1px solid #b4c4d9; background:#ffffffbd; color:#435c7a; width:46px; height:46px; display:grid; place-items:center; }
.ct-balance { position:relative; padding-top:5px; }
.ct-balance>img { display:block; width:100%; height:auto; aspect-ratio:1420/1108; object-fit:contain; mix-blend-mode:multiply; }
.ct-callout { position:absolute; top:30%; max-width:35%; border:1px solid #9fb3cc; border-radius:12px; padding:8px 14px; background:#fff; color:#0a2446; font-size:clamp(14px,1.65vw,24px); font-weight:650; overflow-wrap:anywhere; text-align:center; }
.ct-callout-left { left:0; }.ct-callout-right { right:0; top:26%; }
.ct-workspace .ct-result { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr) auto; column-gap:18px; align-items:center; margin:22px 0 0; padding:24px 28px; border:0; border-radius:22px; background:#fff1e7; min-height:130px; box-shadow:none; }
.ct-workspace .ct-result>span { grid-column:1; grid-row:1; color:#536b88; letter-spacing:.12em; font-size:12px; text-transform:uppercase; }
.ct-workspace .ct-result>strong { grid-column:1; grid-row:2; font-size:clamp(27px,3.4vw,51px); color:#0a2344; font-weight:750; letter-spacing:-.035em; line-height:1.2; margin:8px 0 0; overflow-wrap:anywhere; }
.ct-workspace .ct-result:not(.has-value)>strong { font-size:22px; }
.rkc-cartoon-tool-page .ct-workspace .ct-result.has-value { background:#fff1e7; border:0; box-shadow:none; }
.rkc-cartoon-tool-page .ct-workspace .ct-result::before,.rkc-cartoon-tool-page .ct-workspace .ct-result::after { content:none; }
.ct-workspace .ct-result [data-equation] { grid-column:2; grid-row:1/3; border-left:1px solid #edcdb7; padding-left:20px; margin:0; font-family:inherit; color:#526d8b; font-size:17px; line-height:1.6; overflow-wrap:anywhere; }
.ct-workspace .ct-result:not(.has-value) [data-equation] { font-size:13px; }
.ct-workspace .ct-result.has-error>strong { color:#a13824; }
.ct-workspace .ct-result.is-stale>strong { color:#8a5424; }
.ct-workspace .ct-copy { display:grid; place-items:center; grid-column:3; grid-row:1/3; width:44px; height:44px; margin:0; padding:0; border:1px solid #fac9a8; border-radius:12px; color:#405a7b; background:#fff; font-size:0; }
.ct-copy::before { font:23px dashicons; content:'\f105'; }.ct-copy[aria-label=Copied]::before { content:'\f147'; }
.ct-workspace .ct-limit { color:#596f87; font-size:12px; line-height:1.6; text-align:center; margin:14px 0 24px; }
.ct-method { display:flex; gap:14px; align-items:flex-start; margin:28px 0 0; border-top:1px solid #dbe4ee; padding-top:24px; color:#526b88; font-size:14px; line-height:1.65; }
.ct-method .dashicons { color:#eb7425; width:25px; height:27px; font-size:27px; flex:0 0 25px; }
.ct-details,.ct-advanced { color:#526b88; font-size:14px; line-height:1.7; margin-top:20px; }
.ct-details summary,.ct-advanced summary { padding:13px 16px; border:1px solid #cad8e8; border-radius:12px; color:#193655; font-size:15px; cursor:pointer; }
.ct-details>p { font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }.ct-details h3 { font-size:16px; margin-top:22px; }
.ct-advanced { margin:0 0 20px; }.ct-advanced[open] summary { margin-bottom:16px; }
.ct-workspace .ct-settings-summary { color:#536c88; margin:0 0 12px; font-size:13px; line-height:1.6; }
.ct-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.ct-metrics>div { padding:13px 0; border-bottom:1px solid #dae4ee; }.ct-metrics dt { font-size:13px; }.ct-metrics dd { font-size:22px; color:#163959; margin:5px 0 0; overflow-wrap:anywhere; }
.ct-chain-ends { display:flex; justify-content:space-between; font-size:13px; color:#526b88; margin-top:28px; }
.ct-chain { display:flex; align-items:center; min-height:280px; gap:0; padding:20px 0; overflow-x:auto; }
.ct-chain>p,.ct-tube-list>p { color:#536c88; margin:auto; text-align:center; font-size:17px; }
.ct-bead { flex:1 0 22%; max-width:25%; min-width:75px; border:0; padding:0; background:transparent; position:relative; transition:transform .2s; }
.ct-bead img { display:block; width:100%; height:auto; }
.ct-bead img.ct-bond { position:absolute; width:30%; height:auto; left:85%; top:60%; z-index:0; transform:rotate(20deg); }
.ct-bead>img:not(.ct-bond) { position:relative; z-index:1; }
.ct-bead strong { z-index:2; }
.ct-bead:nth-child(2n) img.ct-bond { top:38%; transform:rotate(-20deg); }
.ct-bead strong { position:absolute; inset:0; display:grid; place-items:center; color:#072545; font-size:clamp(24px,3.4vw,50px); font-weight:700; }
.ct-bead:nth-child(2n) { align-self:flex-end; }.ct-bead:nth-child(2n+1) { align-self:flex-start; }
.ct-bead:hover,.ct-bead:focus-visible { transform:translateY(-5px); }
.ct-bead[aria-pressed=true] { outline:2px solid #f2914d; outline-offset:-5px; border-radius:50%; }
.ct-residue-info { text-align:center; font-size:14px; color:#183e60; min-height:24px; margin:10px 0; }
.ct-composition { margin-top:20px; }.ct-composition h3 { font-size:16px; margin:0 0 10px; }
.ct-composition-bar { display:flex; overflow:hidden; height:18px; border-radius:12px; }.ct-composition-key { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:8px; }.ct-composition-key span { font-size:13px; color:#354f6d; }
.ct-composition-key span { flex:1; min-width:50px; text-align:center; }
.ct-tube-list { display:flex; justify-content:flex-start; min-height:310px; gap:8px; overflow-x:auto; padding:12px 4px 8px; }
.ct-tube-list.has-four-tubes { background:url('cartoon-rack.webp') center calc(100% - 40px)/100% 78px no-repeat; }
.ct-tube-list.has-four-tubes .ct-tube { flex:1; min-width:0; }
.ct-tube { flex:1 0 calc(25% - 8px); min-width:95px; max-width:25%; text-align:center; }
.ct-tube img { height:250px; width:100%; object-fit:contain; mix-blend-mode:multiply; }
.ct-tube strong { display:block; border:1px solid #cad8e8; border-radius:8px; padding:6px 3px; background:#fff; color:#103250; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.ct-well-preview { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:16px; border-top:1px solid #dbe4ee; padding-top:20px; margin-top:14px; }
.ct-eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:#536b88; margin:0 0 15px; }.ct-well-preview h3 { font-size:20px; margin:0 0 8px; }.ct-well-preview p:not(.ct-eyebrow) { color:#526b88; font-size:12px; }
.ct-well-scroll { overflow-x:auto; }.ct-wells { display:grid; gap:5px; align-items:center; }.ct-well { min-width:28px; text-align:center; font-size:11px; color:#173e5e; border:1px solid #bdd0df; border-radius:50%; aspect-ratio:1; display:grid; place-items:center; }.ct-well img { grid-area:1/1; width:100%; height:auto; }.ct-well span { grid-area:1/1; z-index:1; font-weight:650; }
.ct-wells { max-width:270px; margin-left:auto; }
.ct-dilution .ct-result>strong { font-size:clamp(24px,2.6vw,39px); }.ct-dilution .ct-fields { margin-top:38px; }
.ct-workspace.is-paused *, .ct-workspace.is-offscreen * { animation:none !important; transition:none !important; }
@keyframes ct-reveal { from { opacity:.3; transform:translateY(14px) scale(.94); } 65% { opacity:1; transform:translateY(-3px) scale(1.015); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes ct-balance-settle { 0% { transform:rotate(-1.5deg); } 35% { transform:rotate(1deg); } 65% { transform:rotate(-.4deg); } 100% { transform:rotate(0); } }
@keyframes ct-confirm { 0% { opacity:.55; transform:translateY(7px); } 100% { opacity:1; transform:translateY(0); } }
.ct-workspace.is-playing .ct-tube,.ct-workspace.is-playing .ct-bead { animation:ct-reveal .7s cubic-bezier(.22,.68,.3,1) both; animation-delay:var(--ct-delay,0ms); }
.ct-workspace.is-playing .ct-balance>img { animation:ct-balance-settle 1.6s ease both; transform-origin:50% 86%; }
.ct-workspace.is-playing .ct-callout { animation:ct-confirm .5s ease both; }
.ct-workspace.is-playing .ct-callout-right { animation-delay:.45s; }
.ct-workspace.is-playing .ct-well { animation:ct-reveal .45s ease both; animation-delay:var(--ct-delay,0ms); }
.ct-workspace.is-playing .ct-result>strong { animation:ct-confirm .65s ease both; }
.ct-workspace.is-playing .ct-composition-bar { animation:ct-confirm .7s ease .35s both; }
@media(max-width:1100px) {
 .rkc-cartoon-tool-page #calculator>.container { width:calc(100% - 48px); }.ct-workspace { gap:24px; }.ct-inputs { padding-right:24px; }
 .ct-intro h1 { font-size:36px; }.ct-fields { margin-top:32px; }.ct-pair { grid-template-columns:minmax(0,1fr) 90px; }.ct-terminal-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ct-workspace input,.ct-workspace select { font-size:17px; height:54px; padding:10px 12px; }.ct-workspace select { padding-right:25px; font-size:14px; }
 .ct-segmented button { font-size:13px; }.ct-primary { font-size:17px; padding:15px; min-height:56px; }.ct-actions { gap:18px; }
 .ct-workspace .ct-result { padding:20px; gap:12px; }.ct-workspace .ct-result [data-equation] { font-size:14px; padding-left:12px; }
 .ct-model h2 { font-size:27px; }.ct-tube img { height:205px; }.ct-tube-list { min-height:270px; }.ct-chain { min-height:185px; }.ct-well-preview { grid-template-columns:1fr; }
}
@media(max-width:800px) {
 .ct-workspace { grid-template-columns:minmax(0,1fr); gap:30px; }.ct-inputs { border:0; padding:0; }.ct-output { border-top:1px solid #dbe4ee; padding-top:22px; }
 .ct-intro h1 { font-size:clamp(31px,6vw,44px); }.ct-fields { margin-top:28px; }.ct-privacy { padding-top:18px; }.ct-model { max-width:690px; margin:auto; }.ct-pause { top:4px; }
 .ct-chain { min-height:210px; }.ct-bead strong { font-size:clamp(30px,7vw,48px); }.ct-tube img { height:220px; }.ct-tube-list { min-height:290px; }
 .ct-workspace .ct-result>strong { font-size:34px; }.ct-workspace .ct-result [data-equation] { font-size:16px; }.ct-well-preview { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ct-details .rkc-table { min-width:650px; }.ct-details .rkc-plate { min-width:550px; }
}
@media(max-width:480px) {
 .ct-replay { left:0; right:auto; padding-left:0; }
 .rkc-cartoon-tool-page #calculator>.container { width:calc(100% - 36px); }.rkc-cartoon-tool-page #calculator { padding-top:28px; }
 .ct-intro nav { font-size:12px; gap:8px; }.ct-intro h1 { margin-top:22px; }.ct-workspace label { font-size:14px; }.ct-direction legend { font-size:21px; }
 .ct-workspace .ct-result { grid-template-columns:minmax(0,1fr) auto; padding:20px; }.ct-workspace .ct-result [data-equation] { grid-column:1; grid-row:3; border:0; padding:10px 0 0; font-size:14px; }.ct-workspace .ct-copy { grid-column:2; grid-row:1/4; }
 .ct-model h2 { font-size:25px; margin-top:14px; }.ct-pause { width:40px; height:40px; }.ct-chain { min-height:155px; }.ct-bead { min-width:65px; }.ct-tube { min-width:70px; }.ct-tube img { height:165px; }.ct-tube-list { min-height:220px; }.ct-tube strong { font-size:11px; }
 .ct-well-preview { grid-template-columns:1fr; }.ct-wells { max-width:300px; }.ct-workspace .ct-field { margin-bottom:20px; }.ct-primary { font-size:16px; }.ct-actions { gap:18px; }
}
@media(prefers-reduced-motion:reduce) { .ct-workspace *, .ct-workspace *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }