/*! ColorLab BlueGreen | www.BGLAB.co.kr | BGLAB-4468341921ea4dff9a417c3a7db1ea59 | Original application layer; third-party rights retained. */

:root{--paper:#f6f3eb;--ink:#173f42;--muted:#5c6c66;--line:#dcded5;--mint:#eaf0e9;--white:#fffdf7;--n7:#adadad;--neutral-ink:#242424;--neutral-muted:#393939;--sans:var(--font)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none;word-break:keep-all;touch-action:manipulation}button:disabled{cursor:default;opacity:.42}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{word-break:keep-all;line-height:1.35}img{display:block;max-width:100%}section,div{min-width:0}button svg{display:block;flex-shrink:0}.shell{width:100%;max-width:860px;margin:auto;padding:0 28px}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;text-decoration:none;align-items:center}.brand img{width:42px;height:42px;border-radius:50%}.brand>span{font-size:9px;letter-spacing:2px;line-height:1.7;font-weight:700}.brand>span>span{display:block;font-size:12px;letter-spacing:1.8px;font-weight:850}.header-actions{display:flex;align-items:center;gap:14px}.preview-tag{font-size:11px;color:var(--muted);display:flex;gap:7px;align-items:center}.preview-tag i{width:5px;height:5px;background:var(--ink);border-radius:50%}.icon-button{width:44px;height:44px;flex-shrink:0;border:1px solid #767676;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1}.icon-button.info-trigger{font-family:var(--font);font-style:italic;font-size:20px}.icon-button:hover{background:var(--mint)}
.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:27px 0 23px;gap:20px}.eyebrow,.section-index{font-size:10px;line-height:1.5;font-weight:750;letter-spacing:1.65px;color:var(--muted)}.eyebrow{margin-bottom:8px}h1{font-size:32px;letter-spacing:-1.5px;font-weight:500}h1 span{font-weight:800}.intro-copy{font-size:12px;color:var(--muted);line-height:1.8;padding-bottom:2px}.panel{background:var(--white);border:1px solid var(--line);border-radius:20px}.workbench{isolation:isolate;scroll-margin-top:12px}.bench-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px}.bench-title .section-index{font-size:9px;margin-bottom:5px}.bench-title h2{font-size:24px;letter-spacing:-.7px;font-weight:780}.bench-title h2 span{font-size:11px;font-weight:550;letter-spacing:.4px;margin-left:10px;white-space:nowrap;color:var(--muted)}.change-target{background:var(--mint);border:1px solid #686868;padding:8px 14px;border-radius:50px;font-size:12px;font-weight:700;min-height:44px;display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0}.change-target:hover{background:#b9b9b9}.change-target span{font-size:21px}
/* Flat, touching comparison patches. Revision 5 scopes N7 to the lightbox interior. */
.mixing-surface,.palette-board,.mix-stages,.observation-surface,.picker-bottom,.saved-item{background:var(--white);color:var(--neutral-ink)}
.mixing-surface{border-radius:0 0 19px 19px}.comparison-dock{position:sticky;top:0;z-index:4;background:var(--white);padding:17px 24px 8px;border-bottom:1px solid #929292}.sample-labels,.joined-swatches,.sample-captions{max-width:480px;margin:0 auto}.sample-labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:13px;font-weight:800;gap:0;padding-bottom:8px}.sample-labels small{font-size:8px;font-weight:600;letter-spacing:1px;color:var(--neutral-muted);margin-left:6px}.joined-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border-radius:5px;height:clamp(110px,18vw,148px)}.flat-swatch{height:100%;width:100%;padding:0;margin:0;border:0;border-radius:0;background:var(--white);position:relative}.flat-swatch.empty{outline:1px dashed #555;outline-offset:-1px;display:flex;align-items:center;justify-content:center}.flat-swatch.empty span{font-size:11px;padding:14px;text-align:center;word-break:keep-all;color:var(--neutral-muted)}.sample-captions{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:8px;align-items:start}.paper-reference{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;line-height:1.5}.paper-reference small{font-size:10px}.paper-reference strong{font-size:17px;font-weight:850;font-variant-numeric:tabular-nums}.paper-reference>span{font-size:10px;color:var(--neutral-muted)}.mix-reference{text-align:right;font-size:10px;line-height:1.6}.mix-reference small{display:block;font-size:9px;color:var(--neutral-muted)}.mixing-controls{padding:0 24px 14px;max-width:710px;margin:auto}.comparison-insight{font-size:12px;line-height:1.65;min-height:40px;display:flex;align-items:center;padding:8px 0;color:var(--neutral-muted);word-break:keep-all}.paint-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:5px}.paint-toolbar h3{font-size:16px;letter-spacing:-.4px}.paint-toolbar h3>span{margin-left:5px}.segmented{display:flex;border:1px solid #696969;padding:2px;border-radius:9px;flex-shrink:0}.segmented button{min-width:62px;min-height:44px;font-size:11px;border-radius:6px;padding:4px 7px;line-height:1.3}.segmented button b{font-size:13px;margin-left:3px;font-weight:800}.segmented button[aria-pressed=true]{background:#303030;color:#fff}.dose-feedback{font-size:11px;line-height:1.6;padding:7px 0 9px;min-height:33px;color:var(--neutral-muted)}
/* One open box: six tubes across, two rows, with full-cell tap targets. */
.paint-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}.paint-tube{position:relative;min-width:44px;min-height:144px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 1px 6px;gap:3px;border-radius:0;background:var(--white);color:var(--neutral-ink);border-right:1px solid var(--line)}.paint-tube:nth-child(6n){border-right:0}.paint-tube:nth-child(n+7){border-top:1px solid var(--line)}.paint-tube[data-selected=true]{box-shadow:inset 0 0 0 2px #303030}.paint-tube:focus-visible{outline-offset:-4px;outline-color:#181818;z-index:1}.paint-tube:hover{box-shadow:inset 0 0 0 1px #303030}.paint-tube[data-selected=true]:hover{box-shadow:inset 0 0 0 2px #303030}.tube-illustration{height:66px;width:40px;position:relative;display:block;pointer-events:none}.tube-body{position:absolute;inset:0 0 12px;background:#cdcdcd;border:1px solid #666;clip-path:polygon(0 0,100% 0,93% 77%,67% 100%,33% 100%,7% 77%);transform-origin:center top}.tube-crimp{position:absolute;top:2px;left:3px;right:3px;height:5px;border-top:1px solid #777;border-bottom:1px solid #777}.tube-band{position:absolute;top:13px;left:4px;right:4px;height:27px;background:var(--paint)}.tube-nozzle{position:absolute;width:12px;height:9px;bottom:6px;left:14px;background:#bdbdbd;border:1px solid #666;border-top:0;border-radius:0 0 3px 3px}.paint-drop{position:absolute;width:8px;height:10px;bottom:1px;left:16px;border-radius:55% 55% 60% 60%;background:var(--paint);opacity:0;transform:translateY(-4px);pointer-events:none}.tube-name{display:flex;align-items:center;justify-content:center;min-height:30px;font-size:12px;font-weight:650;line-height:1.25;text-align:center;word-break:keep-all}.tube-amount{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.4;min-width:32px;border-radius:5px}.paint-tube.has-paint .tube-amount{background:var(--mint);color:var(--ink)}.paint-tube.is-dispensing .tube-body{animation:squeeze .42s ease-out}.paint-tube.is-dispensing .paint-drop{animation:dispense .55s ease-out}.paint-tube.is-dispensing .tube-amount{animation:quantity-flash .6s ease-out}.paint-tube:active .tube-body{transform:scaleX(.89) scaleY(.95)}
@keyframes squeeze{0%,100%{transform:scale(1)}35%{transform:scaleX(.84) scaleY(.95)}}@keyframes dispense{0%{opacity:0;transform:translateY(-5px) scale(.6)}25%{opacity:1}80%{opacity:1;transform:translateY(9px) scale(1)}100%{opacity:0;transform:translateY(13px) scale(.6)}}@keyframes quantity-flash{35%{background:#303030;color:#fff}}
.fine-tune{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}.selected-paint{display:flex;align-items:center;gap:9px}.selected-paint-dot{width:23px;height:23px;border-radius:50%;flex-shrink:0}.selected-paint small{display:block;font-size:9px;color:var(--neutral-muted);line-height:1.4}.selected-paint strong{display:block;font-size:13px;font-weight:750;line-height:1.5}.amount-adjust{display:flex;align-items:center;border:1px solid #777;border-radius:9px;padding:1px;flex-shrink:0}.quantity-button{width:44px;height:44px;font-size:21px;line-height:1;border-radius:7px}.quantity-button:hover{background:#bcbcbc}.amount-adjust output{font-size:17px;min-width:37px;text-align:center;font-variant-numeric:tabular-nums;font-weight:750}.bench-actions{display:grid;grid-template-columns:108px minmax(0,1fr);gap:10px}.undo-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #777;border-radius:11px;font-size:11px;line-height:1.5;min-height:64px}.undo-button>span:first-child{font-size:25px}.undo-button:hover{background:#bcbcbc}.wash-button{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:64px;border:1px solid #666;border-radius:11px;padding:4px 12px 4px 4px;background:#b8b8b8;text-align:left}.wash-button:hover{border-color:#222;background:#c0c0c0}.wash-illustration{width:52px;height:52px;fill:none;stroke:#303030;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.jar-water{fill:#929292;stroke:none}.wash-brush{transform-origin:34px 35px}.wash-brush>path:first-child{stroke-width:5px}.wash-brush>path:last-child{fill:#555}.water-ripple{stroke:#505050;stroke-width:1.2}.wash-button strong{display:block;font-size:13px;font-weight:800;line-height:1.5}.wash-button small{display:block;font-size:10px;line-height:1.5;color:var(--neutral-muted)}.wash-arrow{margin-left:auto;font-size:22px}.wash-button.is-washing .wash-brush{animation:rinse-brush .75s ease-in-out}.wash-button.is-washing .water-ripple{animation:rinse-water .75s ease-out}.wash-button.is-washing .jar-water{animation:clear-water .75s ease-out forwards}@keyframes rinse-brush{20%,60%{transform:rotate(-18deg)}40%,80%{transform:rotate(16deg)}100%{transform:rotate(0)}}@keyframes rinse-water{25%,65%{transform:translateY(-2px);opacity:.45}45%,100%{transform:translateY(0);opacity:1}}@keyframes clear-water{0%{fill:#7d7d7d}100%{fill:#d0d0d0}}.control-footnote{font-size:10px;color:var(--neutral-muted);line-height:1.7;margin-top:10px;word-break:keep-all}
/* Shared recipe and auxiliary controls. */
.learning-details{margin-top:14px;overflow:hidden}.learning-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;min-height:70px;cursor:pointer;list-style:none;touch-action:manipulation}.learning-details>summary::-webkit-details-marker{display:none}.learning-details>summary strong{display:block;font-size:14px;font-weight:750}.learning-details>summary small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.details-plus{font-size:24px;transition:transform .2s}.learning-details[open] .details-plus{transform:rotate(45deg)}.learning-body{padding:5px 22px 22px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.learning-body h3{font-size:14px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-heading>span{font-size:10px;color:var(--muted)}.section-heading b{font-size:15px;margin:0 3px;font-variant-numeric:tabular-nums}.palette-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 7px;padding:8px;border-radius:12px}.paint-well{display:flex;align-items:center;flex-direction:column;padding:5px 1px;min-width:0}.circle-stage{height:72px;width:100%;display:flex;align-items:center;justify-content:center}.quantity-circle{width:var(--diameter);height:var(--diameter);border-radius:50%;background:var(--paint);flex-shrink:0}.paint-name{font-size:11px;line-height:1.4;text-align:center;margin-top:4px}.part-value{font-size:18px;font-weight:750;font-variant-numeric:tabular-nums}.empty-palette{grid-column:1/-1;padding:20px 8px;text-align:center;font-size:12px}.palette-legend{font-size:10px;text-align:center;color:var(--muted)}.mix-stages{padding:3px 12px;border-radius:12px;margin-top:12px}.mix-stage{display:grid;grid-template-columns:20px 28px minmax(0,1fr);gap:9px;align-items:center;padding:12px 0}.mix-stage+.mix-stage{border-top:1px solid #8a8a8a}.stage-number{font:500 17px/1.5 var(--font);color:var(--neutral-muted)}.stage-color{width:26px;height:26px;border-radius:50%}.mix-stage h3{font-size:12px;font-weight:750;line-height:1.5}.mix-stage p{font-size:11px;color:var(--neutral-muted);margin-top:3px;word-break:keep-all}.tone-advice{font-size:11px;line-height:1.8;margin-top:12px;color:var(--muted);word-break:keep-all}.baseline-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:15px}.baseline-note p{font-size:12px;font-weight:700}.baseline-note p>span{font-size:11px;font-weight:450;color:var(--muted)}.secondary-button{border:1px solid #686868;min-height:44px;padding:8px 12px;border-radius:9px;font-size:12px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0}.secondary-button:hover{background:var(--mint)}.notes-actions{display:flex;justify-content:center;align-items:center;gap:28px;padding:6px 0}.text-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:8px;font-size:12px;font-weight:650;padding:5px 3px}.text-button:hover{text-decoration:underline;text-underline-offset:4px}#savedCount{background:var(--mint);min-width:22px;height:22px;border-radius:50%;font-size:11px;display:inline-flex;align-items:center;justify-content:center}.mini-swatch{display:inline-block;width:20px;height:20px;border-radius:50%;flex-shrink:0}.primary-button{background:var(--ink);color:white;min-height:48px;border-radius:10px;padding:12px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;font-weight:650}.primary-button:hover{background:#363636}.primary-button>span:last-child{font-size:21px;line-height:1}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0 30px;color:var(--muted);font-size:9px;letter-spacing:1.2px;flex-wrap:wrap;border-top:1px solid var(--line)}.site-footer>p{font-size:10px;letter-spacing:1.3px;font-weight:600}.site-footer i{margin:0 6px}.site-footer button{font-size:11px;letter-spacing:0}.paper-search{margin:0 24px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:17px;border-bottom:1px solid var(--line)}.paper-search>label{font-size:12px;font-weight:750}.paper-search>div{display:flex;gap:6px}.paper-search input{width:105px;height:44px;padding:8px 10px;font-size:16px;border:1px solid #686868;border-radius:9px;color:var(--ink);background:#fff}.paper-search>p{font-size:11px;color:var(--muted)}.paper-search>p[role=alert]{color:#a72f2f;width:100%}

.toast{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,16px);background:#242424;color:white;box-shadow:0 4px 25px #00000018;padding:12px 18px;width:max-content;max-width:calc(100% - 40px);border-radius:12px;font-size:13px;z-index:10;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;text-align:center;word-break:keep-all}.toast.show{opacity:1;transform:translate(-50%,0)}.skip-link{position:fixed;top:-90px;left:12px;z-index:100;background:white;color:var(--ink);padding:12px}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{background:#ffefd7;border:1px solid #d9bc8b;padding:20px;border-radius:15px;margin-bottom:20px}.empty-message{padding:16px;font-size:13px}

@media(max-width:719px){.picker-body{grid-template-columns:1fr;gap:18px;padding:0 16px 20px}.picker-dialog{width:min(460px,calc(100% - 20px));margin:auto}.hue-wheel{max-width:380px;margin:auto}.tone-map{max-width:420px;margin:auto;height:420px}.picker-label{margin:3px 0 12px}.picker-label h3{font-size:15px}.picker-note{font-size:11px}.tone-section{padding-top:10px;border-top:1px solid var(--line)}.hue-choice{width:52px}.hue-choice>i{width:34px;height:34px}.hue-choice strong{font-size:11px}.hue-choice small{font-size:9px}.tone-choice{width:54px}.tone-choice>i{width:34px;height:34px}.dialog-header{padding:19px 18px 15px}.dialog-header h2{font-size:21px}.picker-bottom{padding:12px 16px;gap:12px}.picker-bottom strong{font-size:13px}.picker-bottom small{font-size:10px}.picker-bottom .primary-button{font-size:12px;padding:10px 12px;gap:10px}.paper-search{margin:0 18px 15px;gap:9px}.paper-search>p{width:100%}}
@media(max-width:600px){.shell{padding:0 12px}.site-header{height:68px}.brand img{width:36px;height:36px}.brand{gap:8px}.brand>span{font-size:7px;letter-spacing:1.5px}.brand>span>span{font-size:10px;letter-spacing:1.4px}.header-actions{gap:7px}.preview-tag{font-size:10px}.intro{padding:17px 2px;display:block}.intro .eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:5px}h1{font-size:27px;letter-spacing:-1.2px}.intro-copy{font-size:11px;margin-top:5px;line-height:1.7}.intro-copy br{display:none}.bench-title{padding:13px 14px;gap:8px}.bench-title .section-index{font-size:8px;margin-bottom:3px}.bench-title h2{font-size:20px}.bench-title h2 span{font-size:9px;margin-left:5px}.change-target{font-size:11px;gap:7px;padding:7px 10px}.change-target span{font-size:18px}.comparison-dock{padding:12px 12px 8px}.sample-labels{font-size:12px;padding-bottom:7px}.sample-labels small{font-size:7px;margin-left:3px}.joined-swatches{height:115px}.paper-reference{gap:4px}.paper-reference small{font-size:9px}.paper-reference strong{font-size:16px}.paper-reference>span{font-size:9px}.mix-reference{font-size:9px}.mix-reference small{font-size:8px}.mixing-controls{padding:0 10px 12px}.comparison-insight{font-size:11px;min-height:38px;padding:7px 2px}.paint-toolbar{padding-top:2px}.paint-toolbar h3{font-size:13px;letter-spacing:-.4px}.paint-toolbar h3>span{margin-left:1px}.segmented{padding:1px}.segmented button{min-width:54px;min-height:44px;padding:4px;font-size:10px}.segmented button b{font-size:12px;margin-left:2px}.dose-feedback{font-size:10px;padding:5px 2px 7px;min-height:28px}.paint-tube{min-height:116px;padding:8px 1px 5px;gap:2px}.tube-illustration{width:30px;height:48px}.tube-body{bottom:9px}.tube-crimp{height:4px;top:2px}.tube-band{top:10px;height:19px;left:3px;right:3px}.tube-nozzle{width:10px;height:7px;left:10px;bottom:3px}.paint-drop{left:12px;bottom:-2px;width:6px;height:8px}.tube-name{min-height:27px;font-size:10.5px;line-height:1.25}.tube-amount{font-size:13px;min-width:28px}.fine-tune{padding:9px 2px;gap:7px}.selected-paint{gap:7px}.selected-paint-dot{width:20px;height:20px}.selected-paint small{font-size:8px}.selected-paint strong{font-size:12px}.amount-adjust output{font-size:16px;min-width:32px}.bench-actions{grid-template-columns:76px minmax(0,1fr);gap:7px}.undo-button{font-size:10px;gap:5px;min-height:60px}.undo-button>span:first-child{font-size:22px}.wash-button{min-height:60px;padding:3px 8px 3px 2px;gap:5px}.wash-illustration{width:44px;height:44px}.wash-button strong{font-size:12px}.wash-button small{font-size:8px}.wash-arrow{font-size:19px}.control-footnote{font-size:9px;margin-top:8px;padding:0 2px}.learning-details{margin-top:12px}.learning-details>summary{padding:14px 16px;min-height:66px}.learning-details>summary strong{font-size:13px}.learning-details>summary small{font-size:10px}.learning-body{grid-template-columns:1fr;padding:4px 16px 17px;gap:20px}.baseline-note{gap:8px}.baseline-note p{font-size:11px}.baseline-note p>span{font-size:10px}.baseline-note .secondary-button{font-size:11px;padding:8px 10px}.notes-actions{gap:25px}.notes-actions .text-button{font-size:11px}.site-footer{padding:17px 2px 26px;gap:8px;justify-content:center;text-align:center}.site-footer>p{width:100%}.site-footer>span{font-size:8px}.source-list{margin:15px 20px}.info-intro,.dialog-description{padding:0 20px}.credits{margin:0 20px}.info-intro{font-size:13px}.saved-item{padding:13px}.saved-item strong{font-size:13px}#savedList{padding:15px 18px 0}}
@media(max-width:359px){.preview-tag{font-size:9px}.preview-tag i{display:none}.header-actions{gap:5px}.brand>span>span{font-size:10px}.bench-title{padding:12px 10px}.bench-title h2{font-size:18px}.bench-title h2 span{display:block;margin:3px 0 0}.change-target{padding:7px 9px;font-size:10px}.comparison-dock{padding:10px 10px 7px}.paper-reference{gap:3px}.paper-reference small{font-size:8px}.paper-reference strong{font-size:15px}.paint-toolbar h3{font-size:12px}.paint-toolbar h3>span{display:none}.tube-name{font-size:10px}.wash-arrow{display:none}.wash-button small{font-size:8px;word-break:keep-all}.picker-body{padding-left:12px;padding-right:12px}.picker-label{gap:4px}.picker-label h3{font-size:14px}.picker-label>small{font-size:9px}.picker-bottom{padding:12px;gap:10px;flex-wrap:wrap}.picker-bottom>.primary-button{width:100%}.picker-bottom>.mini-swatch{width:32px;height:32px}.hue-choice{width:48px}.hue-choice>i{width:30px;height:30px}.hue-choice strong{font-size:10px}.tone-choice{width:50px}.tone-choice strong{font-size:10px}.tone-choice>i{width:32px;height:32px}.tone-map{height:420px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Prominent paper drawer and large wash action, retained from revision 4. */
.bench-title{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;padding:20px 22px}
.bench-title .section-index{font-size:11px;letter-spacing:.5px}.bench-title h2{font-size:25px}.bench-title h2 span{font-size:12px}
.change-target{width:100%;min-height:82px;border:1px solid #242424;background:#242424;color:#fff;border-radius:14px;padding:12px 16px;justify-content:flex-start;gap:13px;text-align:left}
.change-target:hover{background:#373737;border-color:#373737}.change-target:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.paper-drawer-icon{width:42px;height:42px;flex-shrink:0}.change-target .drawer-label{flex:1;min-width:0;font-size:inherit}.drawer-label strong{display:block;font-size:20px;font-weight:850;line-height:1.4;letter-spacing:-.4px}.drawer-label small{display:block;font-size:12px;font-weight:450;line-height:1.5;margin-top:3px;color:#e0e0e0}.change-target .drawer-arrow{font-size:28px;line-height:1}
.sample-labels{font-size:14px}.sample-labels small{font-size:9px}.paper-reference small{font-size:11px}.paper-reference strong{font-size:20px}.paper-reference>span{font-size:11px}.mix-reference{font-size:11px}.mix-reference small{font-size:10px}
.comparison-insight{font-size:13px}.paint-toolbar h3{font-size:16px}.dose-feedback{font-size:12px;min-height:35px}.selected-paint small{font-size:10px}.selected-paint strong{font-size:14px}
.bench-actions{grid-template-columns:1fr;gap:6px}.wash-button{grid-row:1;min-height:92px;width:100%;gap:13px;padding:8px 16px;border:2px solid #535353;border-radius:14px;background:var(--white)}.wash-button:hover{background:#b7b7b7;border-color:#242424}.wash-illustration{width:72px;height:72px;stroke-width:1.8}.wash-button strong{font-size:18px;line-height:1.45}.wash-button small{font-size:12px;line-height:1.5;margin-top:3px}.wash-arrow{font-size:28px;display:block}.undo-button{justify-self:end;min-height:44px;padding:6px 12px;font-size:12px;gap:8px;border-radius:9px}.undo-button>span:first-child{font-size:24px}.control-footnote{font-size:11px;margin-top:5px}.site-footer{font-size:10px}
/* The complete picker base lives in picker.css; these are deliberate refinements. */
dialog{border:1px solid #626262;background:var(--white);box-shadow:0 20px 80px #0004;max-height:92dvh}dialog::backdrop{background:#1d1d1d99}.dialog-header{position:sticky;top:0;z-index:5;background:var(--white);border-bottom:1px solid #8b8b8b;margin-bottom:15px;padding:19px 22px}.dialog-header .eyebrow{font-size:11px;letter-spacing:.5px;color:#444}.dialog-header h2{font-size:23px}.dialog-header .icon-button{border-color:#555;background:var(--white)}.dialog-header .icon-button:hover{background:#bbb}.paper-search{border-bottom-color:#888}.paper-search input{background:#c4c4c4;border-color:#666}.paper-search>label{font-size:13px}.paper-search>p{font-size:12px}.picker-label h3{font-size:17px}.picker-label>small{font-size:11px}.picker-note{font-size:12px;color:#3b3b3b}.picker-label h3>span{color:#393939}.hue-wheel{border-radius:16px}.wheel-track{inset:16%;border-color:#777}.hue-choice{width:58px;gap:2px;padding:3px 0}.hue-choice>i{width:42px;height:42px}.hue-choice strong{font-size:12px}.hue-choice small{font-size:11px}.wheel-center small{font-size:11px}.tone-map{height:460px;border-radius:16px}.tone-choice{width:60px;gap:2px;padding:3px 0}.tone-choice>i{width:42px;height:42px}.tone-choice strong{font-size:12px}.tone-choice small{font-size:11px}.tone-envelope{fill:none;stroke:#626262}.tone-envelope path{fill:none}.map-axis{font-size:11px}.picker-bottom{background:var(--white);border-color:#777;z-index:6;gap:12px}.picker-bottom strong{font-size:15px}.picker-bottom small{font-size:12px}.picker-bottom .primary-button{font-size:15px;min-height:54px;padding:10px 17px}.primary-button{background:#242424}.primary-button:hover{background:#363636}.saved-empty{background:#b5b5b5;color:#333}.source-list dt{font-size:14px}.source-list dd{font-size:13px;color:#393939}.credits{font-size:12px;color:#393939}
@media(max-width:719px){.picker-dialog{width:calc(100% - 16px);max-width:470px;max-height:calc(100dvh - 16px);border-radius:18px}.picker-body{padding:0 14px 20px;gap:17px}.dialog-header{padding:16px;margin-bottom:13px}.dialog-header h2{font-size:20px}.paper-search{margin:0 16px 14px}.picker-label{margin-bottom:12px}.picker-label h3{font-size:16px}.picker-label>small{font-size:11px}.picker-note{font-size:12px;margin-top:12px}.hue-wheel{max-width:380px}.hue-choice{width:54px}.hue-choice>i{width:40px;height:40px}.hue-choice strong{font-size:12px}.hue-choice small{font-size:10px}.tone-map{height:460px}.tone-choice{width:56px}.tone-choice>i{width:40px;height:40px}.tone-choice strong{font-size:11px}.tone-choice small{font-size:11px}.picker-bottom{padding:12px 14px;gap:10px;flex-wrap:wrap}.picker-bottom>.mini-swatch{width:32px;height:32px}.picker-bottom strong{font-size:14px}.picker-bottom small{font-size:11px}.picker-bottom .primary-button{font-size:15px;min-height:54px;width:100%;justify-content:center;gap:16px}.tone-section{border-top-color:#888}}
@media(max-width:600px){.intro{padding:17px 2px}.intro-copy{font-size:12px}.bench-title{grid-template-columns:1fr;gap:12px;padding:15px 12px}.bench-title>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.bench-title .section-index{font-size:10px;letter-spacing:0;margin:0}.bench-title h2{font-size:22px;text-align:right}.bench-title h2 span{display:inline;font-size:10px;margin-left:5px}.change-target{min-height:80px;padding:12px;gap:10px}.paper-drawer-icon{width:40px;height:40px}.drawer-label strong{font-size:19px;letter-spacing:-.4px}.drawer-label small{font-size:12px}.change-target .drawer-arrow{font-size:26px}.comparison-dock{padding:12px 12px 9px}.sample-labels{font-size:14px;padding-bottom:8px}.sample-labels small{display:none}.joined-swatches{height:128px}.sample-captions{padding-top:9px}.paper-reference small{font-size:10px}.paper-reference strong{font-size:19px}.paper-reference>span{font-size:10px}.mix-reference{font-size:10px}.mix-reference small{font-size:10px}.comparison-insight{font-size:12px;min-height:42px}.paint-toolbar h3{font-size:14px}.segmented button{font-size:11px;min-width:56px}.dose-feedback{font-size:11px;min-height:33px}.tube-name{font-size:clamp(10.5px,2.9vw,13px);min-height:29px}.tube-amount{font-size:15px}.selected-paint small{font-size:10px}.selected-paint strong{font-size:14px}.amount-adjust output{font-size:18px}.fine-tune{padding:11px 2px}.wash-button{min-height:92px;padding:8px 10px;gap:10px}.wash-illustration{width:66px;height:66px}.wash-button strong{font-size:17px}.wash-button small{font-size:11px}.wash-arrow{font-size:25px;display:block}.undo-button{font-size:12px;min-height:44px;padding:6px 10px}.control-footnote{font-size:11px}.learning-details>summary strong{font-size:14px}.learning-details>summary small{font-size:11px}.notes-actions .text-button{font-size:12px}.site-footer>p{font-size:10px}.site-footer>span{font-size:9px}}
@media(max-width:359px){.bench-title h2{font-size:19px}.bench-title h2 span{font-size:9px}.bench-title .section-index{font-size:9px}.drawer-label strong{font-size:17px}.drawer-label small{font-size:11px}.change-target{gap:9px}.paper-drawer-icon{width:36px;height:36px}.change-target .drawer-arrow{font-size:22px}.paint-toolbar h3{font-size:12px}.segmented button{min-width:52px;font-size:10px}.paper-reference{gap:3px}.paper-reference small{font-size:9px}.paper-reference strong{font-size:17px}.paper-reference>span{font-size:9px}.mix-reference{font-size:9px}.mix-reference small{font-size:9px}.selected-paint{gap:5px}.selected-paint strong{font-size:12px}.wash-illustration{width:60px;height:60px}.wash-button strong{font-size:15px}.wash-button small{font-size:10px}.wash-button{gap:8px}.wash-arrow{font-size:22px}.hue-choice{width:50px}.hue-choice>i{width:38px;height:38px}.hue-choice strong{font-size:11px}.hue-choice small{font-size:10px}.tone-choice{width:50px}.tone-choice>i{width:38px;height:38px}.tone-choice strong{font-size:10.5px}.tone-choice small{font-size:10px}.picker-label h3{font-size:15px}.picker-label>small{font-size:10px}.dialog-header h2{font-size:19px}}
@media(max-height:500px){.comparison-dock{position:static}.dialog-header{position:static}.picker-bottom{position:static}}

/* Revision 5: an ivory workroom, a neutral viewing bay, and a fixed teaching reference. */
.change-target,.primary-button{background:var(--ink);border-color:var(--ink)}
.change-target:hover,.primary-button:hover{background:#255456;border-color:#255456}
.mixing-surface{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;padding:0 18px 16px;color:var(--ink)}
.comparison-dock{grid-column:1;grid-row:1;align-self:start;position:static;top:8px;padding:0;border:1px solid #d5d2c8;border-radius:12px;background:var(--white);box-shadow:0 3px 12px #213e3609;z-index:4}
.lightbox-interior{background:var(--n7);color:var(--neutral-ink);padding:13px 12px 10px;border-top:8px solid #ece7dc;border-left:6px solid #f2ede3;border-right:6px solid #f2ede3;border-bottom:5px solid #e4dfd4;border-radius:11px 11px 0 0}
.flat-swatch{background:var(--n7)}
.joined-swatches{height:140px;border-radius:2px}
.sample-labels small{display:none}
.reference-recipe{padding:11px 12px 12px}
.reference-recipe h3{font-size:14px;font-weight:800;line-height:1.4}
.reference-recipe .section-heading>span{font-size:10px;line-height:1.4}
.palette-board{gap:5px;margin:8px 0 6px;padding:0;border-radius:0;background:var(--white);color:var(--ink)}
.paint-well{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:5px;align-items:center;min-height:35px;padding:5px 6px;border:1px solid var(--line);border-radius:6px}
.circle-stage{width:16px;height:16px}
.quantity-circle{width:calc(var(--diameter) * .2285714286);height:calc(var(--diameter) * .2285714286);outline:1px solid #273c3922}
.paint-name{margin:0;text-align:left;font-size:12px;line-height:1.35;word-break:keep-all}
.part-value{font-size:17px;line-height:1.3;font-weight:800}
.palette-legend{font-size:11px;text-align:left;line-height:1.5}
.recipe-guide{grid-column:2;grid-row:1;align-self:start;padding:13px 2px 6px 0}
.method-heading{display:flex;align-items:center;gap:8px}
.method-heading>span{font-size:12px;letter-spacing:1px;color:var(--muted)}
.method-heading h3{font-size:17px;font-weight:800;letter-spacing:-.4px}
.method-intro{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.7;word-break:keep-all}
.mix-stages{background:var(--white);color:var(--ink);padding:0;margin-top:11px;border-radius:0}
.mix-stage{grid-template-columns:20px 24px minmax(0,1fr);gap:8px;padding:11px 0}
.mix-stage+.mix-stage{border-top:1px solid var(--line)}
.stage-number{font-size:16px;color:var(--muted)}
.stage-color{width:23px;height:23px;outline:1px solid #273c3922}
.mix-stage h4{font-size:13px;font-weight:750;line-height:1.4;margin:0}
.mix-stage p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:2px}
.tone-advice{font-size:12px;line-height:1.7;margin-top:8px}
.dry-check{font-size:12px;line-height:1.7;color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);word-break:keep-all}
.paint-advice{font-size:12px;line-height:1.7;min-height:3.4em;margin:10px 3px;color:var(--ink);word-break:keep-all}
.data-update-note{font-size:13px;line-height:1.8;background:var(--white);border:1px solid var(--line);padding:14px 18px;margin-bottom:16px;border-radius:12px;word-break:keep-all}
.research-signature{margin:30px 0 8px;font-size:12px;line-height:1.8;color:var(--ink);text-align:center;word-break:keep-all}
.research-signature span{display:block;font-size:11px;color:var(--muted);letter-spacing:.03em}
.study-philosophy{font-size:14px;line-height:1.9;margin:18px 0 25px;padding-left:16px;border-left:2px solid var(--line);word-break:keep-all}
.recipe-guide>.secondary-button{width:100%;margin-top:14px;font-size:12px;border-color:var(--line);justify-content:space-between}
.mixing-controls{grid-column:1/-1;grid-row:2;width:100%;max-width:710px;padding:0 8px 0}
.current-total{display:block;font-size:11px;color:var(--ink);margin-bottom:4px}
.current-total b{font-size:13px;margin-left:4px;font-variant-numeric:tabular-nums}
.segmented,.amount-adjust,.undo-button,.secondary-button,.icon-button{border-color:#aab3aa}
.segmented button[aria-pressed=true]{background:var(--ink)}
.quantity-button:hover,.undo-button:hover,.icon-button:hover{background:var(--mint)}
.wash-button{background:var(--paper);border-color:#9caea4}
.wash-button:hover{background:#eeeee3;border-color:var(--ink)}
.observation-surface,.hue-choice,.tone-choice,.map-axis,.saved-item,.saved-empty{background:var(--paper)}
dialog{background:var(--white);border-color:var(--line)}
.dialog-header,.dialog-header .icon-button,.picker-bottom{background:var(--white);border-color:var(--line)}
.dialog-header .icon-button:hover{background:var(--mint)}
.paper-search,.tone-section{border-color:var(--line)}
.paper-search input{background:var(--paper);border-color:#aab3aa}
.dialog-header .eyebrow,.picker-note,.source-list dd,.credits{color:var(--muted)}
.wheel-track{border-color:#c3c6bb}
@media(max-width:719px){
  .mixing-surface{grid-template-columns:minmax(0,1fr);gap:12px;padding:0 10px 12px}
  .comparison-dock{grid-column:1;grid-row:1;position:sticky;top:0}
  .recipe-guide{grid-column:1;grid-row:2;padding:8px 2px 14px;border-bottom:1px solid var(--line)}
  .mixing-controls{grid-column:1;grid-row:3;padding:0}
  .lightbox-interior{padding:11px 10px 9px}
  .joined-swatches{height:120px}
  .reference-recipe{padding:10px}
  .paint-name{font-size:12px}
  .method-heading h3{font-size:16px}
  .recipe-guide>.secondary-button{margin-top:10px}
}
@media(max-width:359px){
  .mixing-surface{padding-left:6px;padding-right:6px}
  .reference-recipe{padding:9px}
  .reference-recipe .section-heading>span{font-size:9px}
  .paint-well{padding:5px 4px;gap:4px}
  .paint-name{font-size:11px}
  .part-value{font-size:16px}
}
@media(max-height:650px){.comparison-dock{position:static}}

/* Revision 8: unobscured circular chips and a nearby, non-destructive ratio check. */
.hue-choice{width:56px;height:60px;min-height:60px;gap:4px;padding:0;background:transparent;overflow:visible}
.hue-choice>i{width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;aspect-ratio:1;margin:0;border-radius:50%;background:var(--color)}
.hue-caption{display:flex;align-items:baseline;justify-content:center;gap:3px;width:45px;height:16px;line-height:16px;white-space:nowrap}
.hue-choice strong{font-size:11px;line-height:16px}
.hue-choice small{font-size:10px;line-height:16px}
.hue-choice[aria-pressed=true]>i{outline-offset:3px}
.hue-choice:focus-visible{outline:0}
.hue-choice:focus-visible>i{outline:3px solid var(--ink);outline-offset:3px}
.wheel-track{inset:11.5%;transform:translateY(-10px);pointer-events:none}
.wheel-center{pointer-events:none}
.recipe-check-button{display:flex;width:100%;min-height:68px;align-items:center;justify-content:space-between;gap:10px;margin:0 0 13px;padding:11px 13px;background:var(--ink);color:#fff;border-radius:10px;text-align:left}
.recipe-check-button:hover{background:#255456}
.recipe-check-button:focus-visible{outline-offset:3px}
.recipe-check-button strong{display:block;font-size:16px;font-weight:800;line-height:1.4;letter-spacing:-.3px}
.recipe-check-button small{display:block;font-size:11px;line-height:1.5;font-weight:450;margin-top:3px;color:#e3ebe6}
.recipe-check-button svg{width:24px;height:24px}
.ratio-dialog{width:min(540px,calc(100% - 20px));max-height:calc(100dvh - 20px);border-radius:18px;padding:0;color:var(--ink)}
.ratio-dialog .dialog-header{margin-bottom:0}
.ratio-dialog .dialog-header h2{font-size:22px}
.ratio-body{padding:17px 20px 12px}
.ratio-target{font-size:12px;font-weight:700;color:var(--muted)}
.ratio-insight{font-size:16px;font-weight:750;line-height:1.7;margin:8px 0 12px;word-break:keep-all}
.ratio-explanation,.ratio-note{font-size:12px;line-height:1.8;color:var(--muted);word-break:keep-all}
.ratio-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:17px 0 12px;font-size:13px;font-variant-numeric:tabular-nums}
.ratio-table th,.ratio-table td{padding:12px 3px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.ratio-table thead th{font-size:11px;font-weight:600;color:var(--muted);padding-top:0}
.ratio-table th:first-child{width:40%;text-align:left}
.ratio-table th:nth-child(2),.ratio-table th:nth-child(3){width:20%}
.ratio-table th:nth-child(4){width:20%}
.ratio-table tbody th{font-weight:650;font-size:12px}
.ratio-paint{display:flex;align-items:center;gap:7px;line-height:1.5;word-break:keep-all}
.ratio-paint i{width:12px;height:12px;border-radius:50%;outline:1px solid #173f4226;flex-shrink:0}
.ratio-own{font-weight:800}
.ratio-state{font-size:11px;color:var(--muted);word-break:keep-all}
.ratio-actions{padding:0 20px 20px;display:flex;flex-direction:column;gap:9px}
.ratio-actions button{width:100%;min-height:48px;justify-content:space-between;font-size:13px}
.ratio-actions>small{font-size:11px;color:var(--muted);line-height:1.7;word-break:keep-all}
.technical-notes{margin:0 20px;padding:15px 0 5px;border-top:1px solid var(--line)}
.technical-notes summary{font-size:13px;font-weight:750;cursor:pointer;min-height:44px;line-height:1.7}
.technical-notes .source-list{margin:8px 0 22px}
.technical-notes .credits{margin:0}
@media(max-width:359px){
  .recipe-check-button{padding:10px 11px}
  .recipe-check-button strong{font-size:15px}
  .ratio-dialog .dialog-header{padding:14px 12px}
  .ratio-dialog .dialog-header h2{font-size:19px}
  .ratio-body{padding:15px 12px 12px}
  .ratio-insight{font-size:15px}
  .ratio-actions{padding:0 12px 16px}
}