:root{color:#393c31;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#ebe7dd;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif;font-weight:400}*{box-sizing:border-box}body{min-width:320px;margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.45}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #8e633f}button[hidden]{display:none}a{color:inherit;text-decoration:none}#app{background:radial-gradient(at 77% 40%,#f4f0e68f,#0000 65%),repeating-linear-gradient(93deg,#0000 0 83px,#74633d03 84px 85px),#ebe7dd;min-height:100svh;position:relative;overflow:hidden}.topbar{border-bottom:1px solid #52503c25;justify-content:space-between;align-items:center;gap:20px;height:112px;margin:0 4.5%;display:flex}.brand{letter-spacing:2px;align-items:center;gap:16px;font-size:21px;font-weight:650;display:flex}.brand small{letter-spacing:4px;margin-top:6px;font-family:Arial,sans-serif;font-size:10px;font-weight:400;display:block}.brand-mark{width:36px;height:36px;display:block;position:relative}.brand-mark i{background:#a3644b;border-radius:65% 45% 60% 40%;width:20px;height:24px;position:absolute;top:0;left:0;transform:rotate(-25deg)}.brand-mark i:nth-child(2){background:#b59f62;top:4px;left:17px;transform:rotate(38deg)}.brand-mark i:nth-child(3){background:#777e60;top:17px;left:6px;transform:rotate(90deg)}.edition{letter-spacing:2px;color:#828372;align-items:center;gap:12px;font-size:12px;display:flex}.edition>span{background:#9a9e87;border-radius:50%;width:5px;height:5px}.reset{color:#515541;background:#f5f1e8;border:1px solid #5d5b442e;border-radius:6px;align-items:center;gap:10px;padding:12px 18px;font-size:13px;transition:background .2s;display:flex;box-shadow:0 2px 3px #2d2b1903}.reset:hover{background:#fffaf0}.reset svg{width:18px;height:18px}.workspace{grid-template-columns:340px minmax(0,1fr);align-items:center;column-gap:6%;max-width:1600px;min-height:calc(100svh - 183px);margin:auto;padding:46px 5% 32px;display:grid}.intro{align-self:center;padding-bottom:32px}.eyebrow{letter-spacing:2.4px;color:#73765f;font-size:10px;font-weight:600}.eyebrow span{color:#a1a18f;margin-left:10px}h1{letter-spacing:1px;margin:24px 0 17px;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;font-size:43px;font-weight:500;line-height:1.55}.intro-copy{color:#858474;letter-spacing:.5px;margin:0 0 36px;font-size:13px;line-height:2.05}.paint-card{background:#f6f3ebc4;border:1px solid #fff9;border-radius:9px;max-width:330px;padding:23px 25px 0;box-shadow:0 12px 30px #574b3510}.card-label{letter-spacing:1px;color:#858672;justify-content:space-between;align-items:center;font-size:11px;display:flex}.small-dot{background:#97a085;border-radius:100%;width:6px;height:6px;box-shadow:0 0 0 4px #96a08212}.paint-info{align-items:center;gap:15px;margin-top:24px;display:flex}.swatch{background:#f4f1e8;border:1px solid #fff;border-radius:50%;flex:0 0 47px;height:47px;display:block;box-shadow:inset 0 -3px 6px #aa9c8030,0 2px 4px #a79a841b}.paint-info h2{letter-spacing:1px;margin:0 0 7px;font-size:15px;font-weight:500}.paint-info p{color:#959485;margin:0;font-size:10px}.volume{align-items:baseline;gap:8px;margin:27px 0 21px;display:flex}.volume strong{letter-spacing:-2px;font-family:Helvetica Neue,Arial,sans-serif;font-size:57px;font-weight:300;line-height:1}.volume>span{color:#8b8c7a;font-size:14px}.volume .volume-label{color:#a19f91;margin-left:auto;font-size:10px}.card-footer{letter-spacing:1.7px;color:#959583;border-top:1px solid #8f8b721c;justify-content:space-between;padding:16px 0;font-size:9px;display:flex}.stage-note{color:#929281;margin-top:19px;font-size:10px;line-height:2}.stage-note span{color:#777c63;border:1px solid #9a9b8340;border-radius:3px;margin-right:7px;padding:0 5px;font-size:9px;display:inline-block}.table{align-self:center;min-width:0;padding:0 0 12px;position:relative}.table-caption{letter-spacing:2px;color:#8a8978;justify-content:space-between;align-items:center;margin:0 12px 26px;font-size:11px;display:flex}.table-caption span:last-child{letter-spacing:1.8px;color:#a39f8e;font-size:8px}.vessel{aspect-ratio:1;width:min(100%,690px);margin:0 auto;position:relative}.bucket{isolation:isolate;background:conic-gradient(from 12deg,#776e5e,#f2eee3 9%,#9e9a8b 17%,#555449 29%,#d1cbbb 37%,#a6a08b 47%,#656655 55%,#e2ded0 64%,#f4f0e6 71%,#979589 84%,#524d40 91%,#776e5e);border-radius:50%;position:absolute;inset:0;box-shadow:0 1px 1px 1px #fff9,inset 0 0 0 2px #aaa99a,inset 0 0 0 5px #d5d2c5,inset 0 0 0 7px #8b897a,inset 0 0 0 9px #fbf6e7,8px 24px 22px -10px #47372045,21px 42px 55px -20px #44371d35}.bucket:before{content:"";z-index:-1;background:#8f8877;border-radius:50%;position:absolute;inset:2.5%;box-shadow:inset 0 0 12px 4px #40382ba0}.bucket canvas{touch-action:none;border-radius:50%;width:100%;height:100%;display:block;position:relative}.bucket-handle-art{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.vessel-caption{letter-spacing:3px;color:#a09a84;justify-content:center;align-items:center;gap:16px;margin-top:40px;font-family:Songti SC,STSong,serif;font-size:12px;display:flex}.caption-line{background:#a6a08740;width:35px;height:1px}footer{color:#8c8d79;letter-spacing:.5px;border-top:1px solid #52503c25;align-items:center;gap:16px;min-height:71px;margin:0 4.5%;font-size:10px;display:flex}.footer-note{letter-spacing:3px;color:#a0a08b;margin-left:auto;font-size:10px}#status{align-items:center;gap:9px;line-height:1.6;display:flex}.status-dot{background:#879572;border-radius:50%;flex-shrink:0;width:5px;height:5px}#status[data-state=error],#status[data-state=lost]{color:#a3573e}#status[data-state=error] .status-dot,#status[data-state=lost] .status-dot{background:#a3573e}#retry{color:#765c3f;white-space:nowrap;background:#f6f0e5;border:1px solid #b3a48c;border-radius:4px;padding:7px 12px}@media (width>=1700px){.workspace{grid-template-columns:380px minmax(0,1fr);column-gap:10%}.vessel{width:min(100%,800px)}h1{font-size:48px}}@media (width<=1100px){.workspace{grid-template-columns:280px minmax(0,1fr);column-gap:4%;padding:42px 5%}h1{font-size:34px}.paint-card{padding:20px 20px 0}.paint-info{gap:10px}.table-caption{margin:0 0 24px}.table-caption span:last-child,.edition{display:none}.vessel-caption{letter-spacing:2px;font-size:10px}}@media (width<=760px){.topbar{height:88px;margin:0 6%}.brand{gap:12px;font-size:18px}.brand small{font-size:8px}.reset{padding:10px;font-size:11px}.workspace{flex-direction:column;gap:28px;min-height:0;padding:34px 7% 28px;display:flex}.intro{grid-template-columns:1fr 1fr;align-items:start;column-gap:22px;width:100%;padding:0;display:grid}.eyebrow{grid-column:1/-1;font-size:9px}h1{grid-column:1;margin:17px 0 12px;font-size:27px;line-height:1.5}.intro-copy{grid-column:1;margin:0;font-size:11px}.paint-card{grid-area:2/2/5;max-width:none;margin-top:17px;padding:16px 15px 0}.paint-info{margin-top:14px}.paint-info h2{margin-bottom:0;font-size:12px}.paint-info p,.volume-label,.card-footer span:first-child{display:none}.swatch{flex-basis:30px;height:30px}.volume{margin:20px 0 14px}.volume strong{font-size:40px}.volume>span{font-size:11px}.card-footer{padding:12px 0;font-size:8px}.stage-note{grid-column:1/-1;margin:18px 0 0;font-size:9px}.table{width:100%;max-width:530px;padding-bottom:0}.table-caption{margin:0 0 20px;font-size:10px}.vessel-caption{margin-top:26px}footer{min-height:66px;margin:0 6%}.footer-note{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}@media (width<=460px){.intro{grid-template-columns:1fr}h1{margin:18px 0;font-size:30px;line-height:1.5}.intro-copy{display:none}.paint-card{grid-area:auto/1;grid-template-columns:1fr auto;margin-top:0;display:grid}.card-label{grid-column:1}.card-label .small-dot{display:none}.paint-info{grid-area:2/1;margin:13px 0 15px}.volume{grid-area:1/2/3;align-self:center;margin:19px 0 0}.volume strong{font-size:44px}.card-footer{grid-column:1/-1;justify-content:space-between}.card-footer span:first-child{display:inline}.stage-note{margin-top:13px}.table-caption{margin-bottom:17px}}.workspace{grid-template-columns:300px minmax(0,1fr) 100px;column-gap:4%}.palette{flex-direction:column;align-self:center;gap:12px;display:flex}.palette-heading{text-align:center;color:#686b57;font-size:12px}.palette-heading small{color:#92917d;white-space:nowrap;margin-top:8px;font-size:9px;display:block}.pigment-button{color:#535744;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:9px;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;transition:background .15s;display:flex}.pigment-button:hover{background:#f8f4e999}.pigment-button:disabled{opacity:.45;cursor:not-allowed}.pigment-can{pointer-events:none;flex-shrink:0;width:52px;height:53px;display:block;overflow:visible}.pigment-meta{justify-content:space-around;align-items:baseline;gap:5px;width:100%;display:flex}.pigment-meta strong{font-size:12px;font-weight:500}.pigment-meta>span{color:#868672;white-space:nowrap;font-size:9px}.palette-help{text-align:center;color:#96907c;margin:5px 0 0;font-size:10px;line-height:1.8}#landing{pointer-events:none;border:1px solid #6a705b88;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #fffffb55}#landing:after{content:"";background:#6a705b99;border-radius:50%;width:3px;height:3px;position:absolute;top:6.5px;left:6.5px}@media (width<=1100px) and (width>=761px){.workspace{grid-template-columns:250px minmax(0,1fr) 75px;column-gap:3%}.pigment-meta{flex-direction:column;align-items:center;gap:2px}}@media (width<=760px){.workspace{display:flex}.palette{flex-flow:wrap;justify-content:space-between;gap:4px;width:100%;max-width:530px}.palette-heading{justify-content:space-between;width:100%;margin:6px 0 10px;display:flex}.palette-heading small{margin:0}.pigment-button{flex:1;min-width:0;padding:8px 2px}.pigment-can{width:43px;height:48px}.pigment-meta{flex-direction:column;align-items:center;gap:3px}.palette-help{width:100%}.palette-help br{display:none}}.intro h1{font-size:clamp(30px,2.65vw,38px)}#landing[data-pouring]:before{content:"";background:var(--drop-color);border-radius:4px;width:5px;height:25px;position:absolute;bottom:11px;left:5px;box-shadow:inset 1px 0 1px #fff8}#landing[data-pouring]{border-color:var(--drop-color);box-shadow:0 0 0 5px #fff4}.comparison{background:#f6f3ebc4;border:1px solid #fff9;border-radius:9px;max-width:330px;margin-top:18px;padding:20px 24px;font-size:12px}.uniformity-heading,.difference{justify-content:space-between;align-items:center;gap:12px;display:flex}.uniformity-heading output{font-variant-numeric:tabular-nums;font-size:18px}#uniformity-meter{accent-color:#8b9272;border:0;border-radius:4px;width:100%;height:6px;margin:12px 0 20px;display:block;overflow:hidden}.color-row{align-items:center;gap:12px;margin:14px 0;display:flex}.color-chip{border:1px solid #81745c30;border-radius:6px;flex-shrink:0;width:43px;height:43px;display:block}.target-chip{background:#b65f4a}.color-row strong{letter-spacing:.4px;margin-top:5px;font-size:13px;font-weight:500;display:block}.color-row div>span{color:#767765;font-size:11px}.difference{border-top:1px solid #8f8b7220;padding:12px 0}.difference output{font-variant-numeric:tabular-nums;font-size:20px}#sample-toggle{color:#555b45;background:#f9f5ec;border:1px solid #9b927b;border-radius:5px;width:100%;padding:10px}#sample-hint{color:#727460;min-height:37px;margin:10px 0 0;font-size:11px;line-height:1.7}#recipe-swatch{box-shadow:none}@media (width<=760px){.comparison{grid-column:1/-1;max-width:none}.paint-info p{margin-top:5px;line-height:1.6;display:block}}.color-feedback{background:#f5f0e4;border-left:3px solid #9c8460;border-radius:0 7px 7px 0;margin-bottom:16px;padding:13px 14px}.color-feedback strong{font-size:14px;line-height:1.5}.color-feedback p{color:#62654f;margin:6px 0 0;font-size:12px;line-height:1.7}.color-feedback[data-feedback=complete]{background:#edf2e5;border-color:#667e56}.recipe-difference{margin-bottom:18px}.feedback-threshold{color:#727460;margin:12px 0;font-size:11px;line-height:1.7}.dose-feedback{color:#555b45;text-align:center;font-variant-numeric:tabular-nums;background:#f5f0e4;border-radius:6px;width:100%;padding:8px 10px;font-size:13px;line-height:1.6}@media (width>=761px){.palette{align-self:start}}.color-feedback{min-block-size:136px}#sample-hint{min-block-size:5.1em}.uniformity-heading output{text-align:right;white-space:nowrap;flex:0 0 4em}.difference output{text-align:right;white-space:nowrap;flex:0 0 5ch}.dose-feedback{min-block-size:calc(3.2em + 16px);margin:0}.dose-feedback[hidden]{visibility:hidden;display:block}@media (width>=761px) and (width<=1100px){.dose-feedback{min-block-size:calc(4.8em + 16px)}}@media (width<=760px){.color-feedback{min-block-size:116px}.dose-feedback{min-block-size:calc(1.6em + 16px)}}@media (width<=460px){.volume strong{text-align:right;font-variant-numeric:tabular-nums;min-inline-size:4.8ch}.paint-info,.paint-info>div{min-width:0}.paint-info h2{min-block-size:2.6em}.paint-info p{min-block-size:4.8em}}.undo-dose{color:#535744;width:100%;min-height:42px;font:inherit;white-space:nowrap;background:#f8f4e9;border:1px solid #b1a388;border-radius:6px;padding:8px 10px;font-size:13px}.undo-dose:hover:not(:disabled){background:#fff8eb}.undo-dose:disabled{opacity:.45;cursor:not-allowed}@media (width>=1101px){.workspace{grid-template-columns:300px minmax(0,1fr) 190px}}@media (width>=761px) and (width<=1100px){.workspace{grid-template-columns:230px minmax(0,1fr) 160px;column-gap:2%}}.palette{flex-flow:column;gap:12px;display:flex}.colorant-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px;width:100%;display:grid}.colorant-grid .pigment-button{min-width:0;min-height:108px;padding:10px 3px}.colorant-grid .pigment-meta{flex-direction:column;align-items:center;gap:3px}.colorant-grid .pigment-meta strong{white-space:nowrap}.colorant-grid .pigment-meta>span{font-variant-numeric:tabular-nums;text-align:center;min-width:7ch}@media (width<=760px){.colorant-grid{gap:8px 12px}.colorant-grid .pigment-button{min-height:110px}.palette-heading{margin-bottom:0}}.result-open{color:#fff;width:100%;min-height:42px;font:inherit;background:#657454;border:1px solid #8b9272;border-radius:5px;margin:0 0 8px;padding:10px}.result-open:disabled{color:#8b8c7e;opacity:.65;cursor:not-allowed;background:0 0}.result-dialog{color:#414738;background:#f6f3eb;border:1px solid #ddd8c8;border-radius:14px;width:min(540px,100vw - 32px);max-height:calc(100dvh - 32px);padding:28px;overflow-y:auto;box-shadow:0 20px 70px #30271c40}.result-dialog::backdrop{background:#302c2466}.result-eyebrow{letter-spacing:2px;color:#7c826d;margin:0 0 8px;font-size:11px}.result-dialog h2{margin:0 0 10px;font-size:28px}.result-dialog h3{margin:20px 0 10px;font-size:15px}.result-intro,.result-reflection{color:#737864;font-size:13px;line-height:1.8}.result-colors{grid-template-columns:1fr 1fr;gap:16px;margin:22px 0;display:grid}.result-colors>div{flex-direction:column;gap:7px;font-size:12px;display:flex}.result-colors strong{font-size:15px}.result-color{border:1px solid #0001;border-radius:9px;width:100%;height:100px;display:block}.result-stats{border-top:1px solid #8f8b7233;border-bottom:1px solid #8f8b7233;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:15px 0;display:grid}.result-stats dt{color:#737864;font-size:11px}.result-stats dd{font-variant-numeric:tabular-nums;white-space:nowrap;margin:6px 0 0;font-size:19px}.result-recipe{grid-template-columns:1fr 1fr;gap:8px 20px;margin:0;padding:0;list-style:none;display:grid}.result-recipe li{justify-content:space-between;gap:6px;font-size:12px;display:flex}.result-recipe strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}.result-reflection{background:#eae9dc;border-radius:6px;margin:20px 0;padding:12px}.result-actions{gap:10px;display:flex}.result-actions button{color:#535e45;min-height:42px;font:inherit;background:0 0;border:1px solid #90977d;border-radius:6px;flex:1;padding:10px;font-size:13px}.result-actions button:first-child{color:#fff;background:#657454}@media (width<=460px){.result-dialog{padding:20px}.result-stats dd{font-size:16px}.result-recipe{grid-template-columns:1fr}.result-color{height:85px}}.workspace{grid-template-columns:260px minmax(0,1fr) 184px;align-items:start;gap:30px;min-height:0;padding:32px 4% 28px}.intro{align-self:start;padding:0}.intro h1{margin:12px 0 18px;font-size:25px;line-height:1.45}.target-card{background:#f8f5ed;border:1px solid #fff9;border-radius:12px;align-items:center;gap:16px;padding:18px;display:flex}.target-card>.target-chip{border-radius:8px;flex-shrink:0;width:76px;height:86px}.target-card strong{font-size:18px;font-weight:500;display:block}.target-card div>span{font-variant-numeric:tabular-nums;margin-top:7px;font-size:12px;display:block}.target-card p{color:#7e836e;margin:12px 0 0;font-size:11px}.comparison{max-width:none;margin-top:16px;padding:16px}.color-feedback{min-block-size:150px;padding:10px 12px}.color-feedback strong{font-size:13px}.color-feedback p{font-size:12px}#comparison-details{border-top:1px solid #dedbce;margin-top:8px}#comparison-details summary{color:#727963;cursor:pointer;padding:15px 0 5px;font-size:12px}#comparison-details[open] summary{padding-bottom:15px}#comparison-details .recipe-difference{margin-bottom:0}.paint-card{max-width:none;margin:16px 0 0;padding:16px}.paint-info{gap:10px;margin-top:12px}.paint-info .swatch{flex:0 0 34px;width:34px;height:34px}.paint-info h2{min-height:0;font-size:13px}.paint-info p{min-height:0;margin:4px 0 0;font-size:10px;line-height:1.7}.volume{gap:8px;margin:14px 0 0}.volume strong{font-variant-numeric:tabular-nums;text-align:left;min-inline-size:4.8ch;font-size:30px}.volume>span{font-size:11px}.volume .volume-label{font-size:10px;display:inline}.card-footer{margin-top:12px;padding:10px 0 0;font-size:9px}.feedback-threshold{margin:12px 0;font-size:10px}.table,.palette{align-self:start;margin-top:30px}.colorant-grid .pigment-button{min-height:103px}.undo-dose[hidden]{display:none}.palette-help{font-size:11px;line-height:1.8}.vessel-caption{font-size:11px}@media (width>=761px) and (width<=1100px){.workspace{grid-template-columns:218px minmax(0,1fr) 154px;gap:18px;padding:26px 3%}.target-card{gap:12px;padding:12px}.target-card>.target-chip{width:60px;height:76px}.intro h1{font-size:22px}.comparison{padding:12px}.color-feedback{min-block-size:165px}}@media (width<=760px){.workspace{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 5%;display:grid}.intro{display:contents}.intro>.eyebrow,.intro>h1{display:none}.target-card{grid-row:1;padding:12px 16px}.target-card>.target-chip{width:64px;height:52px}.target-card>div{flex:1;grid-template-columns:1fr auto;align-items:center;column-gap:15px;display:grid}.target-card strong{font-size:16px}.target-card div>span{margin:0}.target-card p{grid-column:1/-1;margin:7px 0 0}.table{grid-row:2;justify-self:center;width:100%;max-width:530px;margin:0}.table-caption{margin:4px 0 14px}.vessel-caption{margin-top:16px}.comparison{grid-area:3/1;margin:0;padding:12px}.color-feedback{min-block-size:116px;margin-bottom:12px}.palette{grid-row:4;justify-self:center;max-width:530px;margin:0}.palette-heading{margin:0 0 6px}.colorant-grid .pigment-button{min-height:100px}.paint-card{grid-area:5/1;width:100%;margin:0}.paint-info p{display:block}.paint-info h2,.paint-info p{min-block-size:0}.volume{margin:12px 0 0}.volume strong{font-size:28px}.feedback-threshold{grid-row:6;margin:0}.palette-help{margin:0}}@media (width>=960px) and (height>=540px) and (orientation:landscape){#app{grid-template-rows:64px minmax(0,1fr) 32px;height:100dvh;min-height:0;display:grid}.topbar{height:64px;margin:0 3%}.topbar .brand{font-size:18px}.topbar .brand small{font-size:8px}.brand-mark{transform:scale(.8)}.reset{min-height:40px}.workspace{grid-template-columns:clamp(220px,20vw,280px) minmax(0,1fr) clamp(160px,16vw,240px);align-items:start;gap:24px;width:100%;max-width:1800px;height:100%;min-height:0;padding:12px 3% 16px}.intro{flex-direction:column;gap:10px;min-height:0;display:flex;position:relative}.intro>.eyebrow,.intro>h1{display:none}.target-card{min-height:74px;padding:12px}.target-card>.target-chip{width:62px;height:56px}.target-card strong{font-size:16px}.target-card p{margin-top:6px}.comparison{margin:0;padding:12px}.color-feedback{min-block-size:112px;margin-bottom:8px;padding:8px 10px}.color-feedback p{font-size:12px;line-height:1.65}.uniformity-heading{height:24px}#uniformity-meter{margin:6px 0 12px}.result-open{min-height:40px;margin-bottom:4px;padding:8px}#comparison-details{margin-top:4px;position:relative}#comparison-details summary{min-height:36px;padding:12px 0 4px}#comparison-details[open] summary{padding-bottom:4px}#comparison-details[open] .metrics-panel{z-index:20;background:#f9f6ee;border:1px solid #b7b59f;border-radius:10px;width:clamp(240px,24vw,320px);padding:16px;position:fixed;bottom:44px;left:3vw;box-shadow:0 12px 36px #302b2340}.metrics-panel .color-row{margin:10px 0}.metrics-panel .difference{padding:8px 0}#sample-hint{min-block-size:3.4em;margin-top:8px}.metrics-panel .feedback-threshold{margin:8px 0 0;font-size:10px}.paint-card{margin:0;padding:12px}.paint-info{margin-top:8px}.paint-info .swatch{flex-basis:28px;width:28px;height:28px}.paint-info h2{font-size:12px}.volume{margin:8px 0 0}.volume strong{font-size:26px}.card-footer{margin-top:6px;padding-top:6px}.table{flex-direction:column;justify-content:center;gap:18px;height:100%;margin:0;padding:0 10px 12px;display:flex}.table-caption{flex-shrink:0;margin:0}.vessel{flex-shrink:0;width:min(100%,100dvh - 205px);max-width:850px}.vessel-caption{letter-spacing:1px;flex-shrink:0;gap:10px;margin:12px 0 0;font-size:11px}.palette{gap:8px;height:100%;margin:0}.palette-heading{flex-shrink:0}.colorant-grid{flex:0 auto;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;min-height:0}.colorant-grid .pigment-button{min-height:0;padding:6px 3px}.dose-feedback{min-block-size:44px;flex-shrink:0;height:44px;padding:4px 6px;font-size:11px}.palette-help{flex-shrink:0;margin:0;font-size:10px}#app>footer{height:32px;min-height:0;margin:0 3%;padding:0;font-size:10px}}@media (width>=960px) and (height>=540px) and (height<=700px) and (orientation:landscape){.workspace{gap:16px;padding-top:8px;padding-bottom:8px}.intro{gap:8px}.target-card{min-height:64px;padding:8px 12px}.target-card>.target-chip{width:54px;height:48px}.target-card p{margin-top:4px;font-size:10px}.target-card div>span{margin-top:4px}.comparison{padding:10px}.color-feedback{min-block-size:104px}.paint-card{padding:10px}.card-footer{display:none}.palette .pigment-can{width:40px;height:43px}.palette .pigment-meta{gap:2px}.palette .pigment-meta strong{font-size:11px}.palette-heading small{margin-top:5px}.dose-feedback{min-block-size:36px;height:36px}.metrics-panel{font-size:11px}}@media (width>=960px) and (height>=540px) and (orientation:landscape){#comparison-details[open]{z-index:20;background:#f9f6ee;border:1px solid #b7b59f;border-radius:10px;width:clamp(240px,24vw,320px);padding:8px 16px 12px;position:fixed;bottom:44px;left:3vw;box-shadow:0 12px 36px #302b2340}#comparison-details[open] summary{min-height:40px;padding:8px 0 10px}#comparison-details[open] summary:after{content:" · 收起"}#comparison-details[open] .metrics-panel{width:auto;box-shadow:none;background:0 0;border:0;padding:0;position:static}.workspace{grid-template-rows:minmax(0,1fr)}.palette{min-height:0}.palette-help{line-height:1.6}}@media (width>=960px) and (height>=540px) and (height<=580px) and (orientation:landscape){.target-card p{display:none}.target-card{min-height:58px}.target-card>.target-chip{height:40px}.color-feedback{min-block-size:98px}.comparison{padding:8px 10px}.paint-card>.card-label{display:none}.paint-info{margin-top:0}.paint-info p{margin-top:2px}.volume{margin-top:4px}.palette-heading small{font-size:8px}.colorant-grid{gap:4px}.colorant-grid .pigment-button{padding:2px}.palette .pigment-can{width:34px;height:35px}.palette .pigment-meta strong{font-size:10px}.palette .pigment-meta>span{font-size:9px}}@media (width>=960px) and (height>=540px) and (orientation:landscape){.result-dialog[open]{grid-template-columns:.9fr 1.1fr;gap:10px 24px;width:min(760px,90vw);padding:20px;display:grid}.result-dialog>.result-eyebrow,.result-dialog>h2,.result-dialog>.result-intro{grid-column:1/-1;margin:0}.result-dialog>h2{font-size:24px}.result-colors{grid-area:4/1/7;align-self:start;margin:0}.result-color{height:120px}.result-stats{grid-area:4/2;padding:10px 0}.result-stats dd{font-size:16px}.result-dialog>h3{grid-area:5/2;margin:0}.result-recipe{grid-area:6/2;gap:6px 12px}.result-reflection{grid-column:1/-1;margin:0;padding:8px 12px}.result-actions{grid-column:1/-1}}[data-target-only][hidden],[data-result-target][hidden]{display:none!important}.task-heading{justify-content:space-between;align-items:center;gap:6px;font-size:11px;display:flex}.task-heading button{color:inherit;background:0 0;border:1px solid #9abfb1;border-radius:6px;padding:7px 10px}.task-section h1{margin:6px 0;font-size:18px;line-height:1.4}#task-prompt{margin:0 0 8px;font-size:12px;line-height:1.6}#task-description{margin:6px 0 0;font-size:10px;line-height:1.5}.task-section .target-card{gap:10px;min-height:0;padding:6px 10px}.task-section .target-chip{width:38px;height:34px}.task-section .target-card strong{font-size:13px}.task-section .target-card div>span{margin-top:2px;font-size:10px}.task-heading button{white-space:nowrap;cursor:pointer;font-size:11px}.task-kinds{border:1px solid #9abfb1;border-radius:6px;flex-shrink:0;display:flex;overflow:hidden}.task-kinds button{border:0;border-radius:0;padding:7px 6px}.task-heading button:disabled{opacity:.5;cursor:default}.task-heading button:focus-visible{outline-offset:2px;outline:2px solid #15766f}@media (width>=960px) and (height>=540px) and (orientation:landscape){.intro{gap:8px}.task-section h1{font-size:16px}#task-prompt{font-size:11px;line-height:1.5}.color-feedback{min-block-size:86px}.paint-card .card-footer{display:none}}@media (width>=960px) and (height>=540px) and (height<=600px) and (orientation:landscape){.intro{gap:6px}.task-heading button{padding:4px 6px}.task-section h1{margin:4px 0;font-size:14px}#task-prompt{margin-bottom:4px;font-size:10px;line-height:1.5}#task-description{margin-top:3px;font-size:9px}.color-feedback{min-block-size:72px;margin-bottom:4px;padding:6px 8px}.color-feedback p{font-size:10px;line-height:1.5}.comparison{padding:6px 10px}#uniformity-meter{margin:4px 0 6px}.result-open{min-height:34px;padding:5px}#comparison-details summary{min-height:28px;padding-top:6px}.paint-card{padding:8px}.volume strong{font-size:22px}}@media (width>=960px) and (height>=540px) and (height<=580px) and (orientation:landscape){.intro{gap:4px}.task-section h1{margin:2px 0}.target-card:not([hidden])+#task-description{display:none}.color-feedback{padding:4px 8px}.color-feedback p{margin-top:3px;line-height:1.4}}.history-actions{gap:8px;margin-left:auto;margin-right:12px;display:flex}.history-actions button,.history-dialog button,.history-save button{color:inherit;background:0 0;border:1px solid #9abfb1;border-radius:6px;padding:7px 10px;font-size:12px}.topbar .edition{display:none}.history-save{flex-shrink:0;align-items:center;gap:8px;display:flex}.history-save button{padding:2px 6px;font-size:10px}.history-dialog{color:#304a4e;background:#fffefa;border:1px solid #d8e7de;border-radius:14px;width:min(800px,100vw - 32px);max-height:calc(100dvh - 32px);padding:20px}.history-dialog[open]{flex-direction:column;gap:12px;display:flex}.history-dialog::backdrop{background:#213e4147}.history-dialog-heading{flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;display:flex}.history-dialog h2{margin:0;font-size:20px}.history-dialog h3{margin:10px 0;font-size:16px}.history-scroll{overflow-wrap:anywhere;min-height:0;font-size:13px;line-height:1.6;overflow:auto}.history-note,.history-meta{color:#58746e;font-size:11px}.history-ledger{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 16px;margin:12px 0;padding:0;list-style:none;display:grid}.history-ledger li{align-items:center;gap:8px;display:flex}.history-ledger strong{white-space:nowrap;margin-left:auto}.history-swatch{vertical-align:middle;border:1px solid #30474d22;border-radius:4px;flex-shrink:0;width:22px;height:22px;display:inline-block}.dose-list{margin:12px 0;padding:0;list-style:none}.dose-list>li{border-top:1px solid #d8e7de;padding:10px 0}.dose-list summary{cursor:pointer}.dose-list summary strong{margin-right:12px;display:inline-block}.dose-list time{color:#58746e;font-size:11px}.dose-list summary>.history-swatch{margin:8px 6px 8px 0}.dose-list summary>span:last-child{font-size:12px}#history-list{gap:8px;margin:12px 0;display:grid}#history-list button{text-align:left;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;display:grid}#history-list button>span:last-child{grid-column:2;font-size:11px}#history-detail:not(:empty){border-top:1px solid #d8e7de;margin-top:16px;padding-top:12px}@media (width<=760px){.history-actions{gap:4px;margin-right:6px}.history-actions button{padding:6px;font-size:10px}.topbar .brand{font-size:14px}.topbar .brand-mark{display:none}.topbar .brand small{letter-spacing:2px;font-size:7px}.history-dialog{padding:14px}.history-dialog h2{font-size:16px}}.confirmation-dialog{width:min(440px,100vw - 32px)}.confirmation-dialog h2{margin:0}#confirmation-message{min-height:0;margin:4px 0 12px;font-size:14px;line-height:1.8;overflow:auto}.confirmation-actions{flex-shrink:0;justify-content:flex-end;gap:12px;display:flex}.confirmation-actions button{min-width:80px;min-height:40px}#confirmation-accept{color:#fff;background:#15766f;border-color:#15766f}.confirmation-actions button:focus-visible{outline-offset:3px;outline:2px solid #15766f}@media (width>=960px) and (height>=900px) and (orientation:landscape){.palette .pigment-can{width:62px;height:64px}}:root{color:#513d2c;--workbench-ink:#513d2c;--workbench-line:#85613d40;--workbench-accent:#80583b;background:#caa675}#app{background:radial-gradient(at 35% 5%,#f8e1b651,#0000 65%),repeating-linear-gradient(91deg,#0000 0 118px,#80572d0d 119px 120px),#caa675}.topbar{border-color:var(--workbench-line)}.brand{color:#503922}.brand small,.edition{color:#765b3e}.reset,.history-actions button{color:#60442f;background:#fff6e8c9;border-color:#9b795a66;box-shadow:0 2px 5px #79512712}.reset:hover,.history-actions button:hover{background:#fff8ee}.task-section,.comparison,.paint-card{background:#fff8ecd9;border:1px solid #fff9;border-radius:10px;box-shadow:0 5px 18px #68432412}.task-section{padding:12px}.task-heading button,.task-kinds{border-color:#ac90716b}.task-kinds button[aria-pressed=true]{color:#fff8ed;background:#80583b}.target-card{background:#fffdfa;border-color:#e6d7bd}.target-card strong,.paint-info h2,.volume strong,.pigment-meta strong{color:#513d2c}.target-card div>span,#task-description,.paint-info p,.card-label,.volume>span,.volume .volume-label,.card-footer{color:#81674d}.color-feedback{background:#f0e7d5;border-left-color:#b68b52}.color-feedback strong{color:#684b2f}.color-feedback p{color:#756047}.color-feedback[data-feedback=complete]{background:#e9eedb;border-left-color:#7f8b54}.uniformity-heading{color:#705337}#uniformity-meter{accent-color:#958052}#uniformity-meter::-webkit-progress-bar{background:#e1d6be}#uniformity-meter::-webkit-progress-value{background:#958052}#uniformity-meter::-moz-progress-bar{background:#958052}.result-open{color:#fff9ec;background:#80583b;border-color:#80583b}.result-open:disabled{color:#86755e;opacity:1;background:#e7decd;border-color:#c6b799}#comparison-details{border-color:#b9a48655}#comparison-details summary{color:#75543a}#comparison-details[open],#comparison-details[open] .metrics-panel{background:#fff8ec;border-color:#b9a486}.difference{border-color:#d7c9b3}.difference output{color:#6c5139}.color-row div>span,.feedback-threshold,#sample-hint{color:#806c53}#sample-toggle{color:#705135;background:#faf0de;border-color:#ac9170}#sample-toggle[aria-pressed=true]{color:#fff9ec;background:#80583b}.table-caption,.vessel-caption{color:#725333}.table-caption span:last-child{color:#896745}.caption-line{background:#99764c65}.table{min-width:0;padding:0}.vessel{aspect-ratio:4/3;width:100%;max-width:none}.bucket{box-shadow:none;background:#caa675;border-radius:10px;inset:0;overflow:hidden}.bucket:before{content:none}.bucket canvas{border-radius:0;width:100%;height:100%}#landing{display:none}.palette-heading{color:#624429}.palette-heading small,.palette-help{color:#785a3b}.pigment-button{color:#573e2c;background:#fff5e6b5;border-color:#fff5e66b;box-shadow:0 3px 8px #70461f13}.pigment-button:hover{background:#fff8ed;border-color:#b48c60}.pigment-button[data-pouring]{background:#fff5df;border-color:#986234;box-shadow:0 0 0 2px #98623430}.pigment-meta>span{color:#86674b}.dose-feedback{color:#795531;background:#fff3dcbf}#app>footer{border-color:var(--workbench-line);color:#715537}#status,#status-text,.history-note,.history-meta,.dose-list time{color:#715537}.status-dot,.small-dot{background:#858657}.result-dialog,.history-dialog{color:#513d2c;background:#fff8ec;border-color:#d3bea0}.result-dialog::backdrop,.history-dialog::backdrop{background:#3f2c1b66}.history-dialog button,.history-save button,.result-actions button{color:#715033;border-color:#b59978}.result-intro,.result-eyebrow,.result-stats dt{color:#896c50}.result-stats,.dose-list>li,#history-detail:not(:empty){border-color:#d8c6ad}.result-reflection{color:#795c3e;background:#eee3ce}.result-actions button:first-child,#confirmation-accept{color:#fff8ec;background:#80583b;border-color:#80583b}button:focus-visible,a:focus-visible,summary:focus-visible,.task-heading button:focus-visible,.confirmation-actions button:focus-visible{outline-offset:3px;outline:3px solid #94602f}@media (width>=960px) and (height>=540px) and (orientation:landscape){.workspace{grid-template-columns:clamp(220px,20vw,292px) minmax(0,1fr) clamp(160px,15vw,252px);gap:16px;max-width:none;padding:12px 2% 14px}.topbar,#app>footer{margin-left:2%;margin-right:2%}.intro{gap:8px}.table{justify-content:stretch;gap:12px;height:100%;padding:0}.table-caption{padding:8px 10px 0}.vessel{aspect-ratio:auto;flex:1 1 0;width:100%;max-width:none;min-height:0}.vessel-caption{letter-spacing:0;margin:0;padding:0 0 10px;font-size:10px}.palette{gap:8px}.palette-heading{padding-top:8px}.colorant-grid{flex:1 1 0}.colorant-grid .pigment-button{justify-content:center}.dose-feedback{height:44px;min-block-size:44px}#comparison-details[open]{left:2vw}}@media (width>=960px) and (height>=540px) and (height<=600px) and (orientation:landscape){.workspace{gap:12px;padding-top:8px;padding-bottom:8px}.intro{gap:4px}.task-section{padding:6px 8px}.task-heading{gap:4px}.task-heading button{padding:4px 5px;font-size:10px}.color-feedback{min-block-size:60px}.palette .pigment-can{width:34px;height:35px}.colorant-grid{gap:5px}.colorant-grid .pigment-button{gap:3px}.dose-feedback{height:36px;min-block-size:36px}}@media (width<=959px),(orientation:portrait){#app{height:auto;min-height:100dvh}.workspace{flex-direction:column;gap:18px;min-height:0;padding:20px 4%;display:flex}.intro{flex-direction:column;gap:12px;width:100%;display:flex}.intro .comparison,.intro .paint-card{margin:0}.table{width:100%;max-width:none;margin:0}.vessel{aspect-ratio:4/3;width:100%}.palette{width:100%;max-width:none;margin:0}.colorant-grid .pigment-button{min-height:110px}.palette-help{margin:0}}.palette .pigment-button[aria-pressed=true]{background:#f1e0bd;border-color:#80542e;box-shadow:inset 0 0 0 2px #80542e}.bucket canvas:focus-visible{outline-offset:-3px;outline:3px solid #80542e}#selection-hint{min-height:2.8em;display:inline-block}@media (width>=960px) and (height>=760px) and (orientation:landscape){.palette .pigment-can{width:72px;height:77px}}