:root{color-scheme:dark;font-family:"Trebuchet MS","PingFang SC","Microsoft YaHei",sans-serif;background:#202325;color:#eeeae2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 48% 30%,#35383a,#202325 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #eac672;outline-offset:3px}[hidden]{display:none!important}
#mix-app{position:relative;height:100svh;min-height:620px;max-width:680px;margin:auto;display:grid;grid-template-rows:48px minmax(76px,auto) minmax(0,1fr) 58px 28px;padding:0 15px max(6px,env(safe-area-inset-bottom));gap:5px}.site-header{display:flex;align-items:center;gap:12px;position:relative}.site-header a{font-size:11px;color:#b8b9b5;padding:9px 0}.site-header h1{margin:0 auto;font-size:18px;font-weight:500;letter-spacing:.04em}.brand{font-size:10px;color:#929795}.site-header .lang-switcher{position:relative;top:auto;right:auto;transform:none;order:4;margin:0;font-size:12px}.site-header .lang-switcher summary{width:28px;height:28px;background:transparent;border-color:#666}.formula-panel{position:relative;display:grid;align-content:center;justify-items:center;gap:6px;min-width:0}#formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 7px;min-height:27px;max-width:100%;font-size:13px}#formula:empty{display:none}.term{display:flex;align-items:center;gap:4px;white-space:normal;min-width:0;max-width:100%}.term i{display:block;flex-shrink:0;width:23px;height:23px;border-radius:50%;box-shadow:inset -2px -3px 4px #0003,inset 1px 2px 4px #fff5}.operator{color:#bfc1bc}#color-name{position:absolute;left:0;right:0;bottom:0;color:#e5e2db;font-size:13px;text-align:center;line-height:1.5;max-width:100%}#selection-tag{display:flex;align-items:center;gap:9px;padding:2px 3px 2px 11px;background:#ffffff0d;border:1px solid #80745e;border-radius:18px;font-size:12px;color:#e7d7b5;min-height:30px}#cancel-selection{border:0;background:transparent;color:#e7d7b5;width:30px;height:30px;font-size:23px;line-height:1;padding:0}
.palette-wrap{display:flex;justify-content:center;min-height:0;position:relative}#tray{width:100%;max-width:530px;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:9px;border-radius:11px;background:linear-gradient(130deg,#faf9f1,#d9d8cf 65%,#f4f1e8);box-shadow:0 14px 30px #0007,inset 0 2px 2px #fff,inset 0 -2px 3px #aaa79e}.primary-section{display:grid;gap:5px}.primary-title{color:#66665b;font-size:10px;line-height:12px;letter-spacing:.1em;padding-left:3px}#primary-row{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:4px}#mixing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;min-height:0}.well{display:block;width:100%;height:100%;min-height:0;position:relative;border:0;padding:0;border-radius:3px;overflow:hidden;background:linear-gradient(130deg,#e7e5da,#f6f5ed);box-shadow:inset 1px 2px 4px #918e8160,inset -1px -1px 1px #fff;touch-action:none;cursor:crosshair}.well canvas{display:block;width:100%;height:100%;touch-action:none}.well.raw{height:auto;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px #a8a596,inset 1px 2px 4px #918e8160;cursor:grab}.well.selected{box-shadow:inset 0 0 0 3px #ba8e45}.well.selected:after{content:"";position:absolute;inset:2px;border:2px solid #f3d696;border-radius:inherit;pointer-events:none}.well.added{animation:deposit .2s ease-out}.well small{position:absolute;right:4px;bottom:3px;font-size:9px;color:#fff;background:#2226;padding:1px 4px;border-radius:3px;pointer-events:none}.well small:empty{display:none}#stick{position:absolute;z-index:10;width:105px;height:5px;pointer-events:none;transform-origin:3px 50%;transform:rotate(-27deg);border-radius:2px;background:linear-gradient(#e8d9b6,#706652 45%,#34352e 75%,#b8a98b);box-shadow:0 3px 4px #0005}#stick:before{content:"";position:absolute;left:-7px;top:-3px;width:17px;height:11px;border-radius:50%;background:var(--tip,#d1c6ac);box-shadow:inset 0 2px 2px #fff4}#paint-ghost{position:fixed;width:37px;height:29px;border-radius:45% 48% 40% 47%;margin:-15px -18px;pointer-events:none;z-index:12;background:var(--paint);box-shadow:inset 2px 3px 4px #fff5,inset -2px -3px 5px #0005,0 4px 7px #0005}
.workbench{display:flex;align-items:center;justify-content:center;max-width:530px;width:100%;margin:auto}.actions{display:grid;grid-template-columns:1.15fr 1.1fr .9fr;gap:7px;align-items:center;width:100%}.actions button{min-height:44px;min-width:0;border:1px solid #626561;border-radius:5px;background:#ffffff08;color:#ece7db;padding:7px 5px;font-size:12px;line-height:1.25;touch-action:manipulation}.actions #sound{font-size:11px;color:#afb4ae}#status{font-size:11px;color:#cbbd9b;text-align:center;margin:0;line-height:18px;min-height:22px;overflow:hidden}footer{display:none}footer a{margin:0 7px}.turn-dots{position:absolute;bottom:6px;left:6px;display:flex;gap:3px;pointer-events:none}.turn-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#ded9ca35;box-shadow:0 0 0 1px #ece6d573}.turn-dots i.lit{background:#f1e6c6;box-shadow:0 0 0 1px #4c433050}
#discovery-toast{position:fixed;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;max-width:calc(100vw - 30px);padding:7px 14px;border-radius:8px;background:#f4e8cb;color:#373b36;box-shadow:0 5px 18px #0005;font-size:13px;text-align:center;pointer-events:none}
#cards-panel{position:fixed;inset:0;z-index:40;background:#111719c9;display:flex;align-items:flex-end;justify-content:center;padding:14px 10px max(10px,env(safe-area-inset-bottom))}.cards-sheet{display:flex;flex-direction:column;gap:9px;width:min(100%,620px);height:min(740px,calc(100svh - 72px));padding:15px;background:#292f30;border:1px solid #6a6b60;border-radius:14px;box-shadow:0 15px 55px #0008;overflow:hidden}.cards-sheet header{display:flex;align-items:center;justify-content:space-between;flex:none}.cards-sheet h2{margin:0;font-size:19px;font-weight:500}.cards-sheet header button{border:0;background:#ffffff0b;border-radius:50%;height:38px;width:38px;color:#e8e5da;font-size:27px;line-height:1}.cards-sheet progress{width:100%;height:5px;flex:none;appearance:none;border:0;border-radius:8px;overflow:hidden;background:#515958}.cards-sheet progress::-webkit-progress-bar{background:#515958}.cards-sheet progress::-webkit-progress-value{background:#d7b875}.cards-sheet progress::-moz-progress-bar{background:#d7b875}#cards-progress{flex:none;font-size:12px;color:#cbc9bb}#card-hint{margin:0;flex:none;color:#ead4a9;font-size:12px;line-height:1.5}#card-hint:empty{display:none}#cards-grid{display:grid;flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(121px,auto);gap:9px;align-content:start;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 6px;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#92988b70 transparent}#cards-grid::-webkit-scrollbar{width:5px}#cards-grid::-webkit-scrollbar-thumb{border-radius:6px;background:#92988b70}#cards-grid::-webkit-scrollbar-track{background:transparent}.color-card{border:1px solid #505856;background:#ffffff03;color:#cdcfc7;border-radius:8px;padding:10px 6px 8px;display:flex;align-items:center;flex-direction:column;gap:6px;min-width:0}.color-card i{height:37px;width:37px;flex-shrink:0;border-radius:50%;box-shadow:inset 1px 2px 4px #fff2,inset -1px -2px 4px #0003}.color-card strong{font-size:12px;font-weight:500;line-height:1.2;text-align:center}.color-card small{font-size:10px;color:#939e97;line-height:1.3;text-align:center;overflow-wrap:anywhere}.color-card.found{background:#ffffff07;border-color:#7d806a}.color-card.found small{color:#c9c3a9}.color-card:not(.found) i{background:linear-gradient(145deg,#727b7b,#515b5c)!important}
@keyframes deposit{from{transform:scale(.96)}to{transform:scale(1)}}
@media(min-width:800px){#mix-app{max-width:680px;grid-template-rows:54px minmax(76px,auto) minmax(0,1fr) 60px 26px;padding:0 20px 13px;gap:6px}.site-header h1{font-size:21px}#tray{max-width:530px;padding:13px;gap:12px}#primary-row{gap:8px}#mixing-grid{gap:8px}.workbench{max-width:530px}.formula-panel{gap:5px}#formula{font-size:15px}.term i{width:26px;height:26px}.site-header a{font-size:12px}.brand{font-size:11px}.actions button{font-size:13px}.primary-title{font-size:11px}}
@media(max-width:370px){#mix-app{padding-left:8px;padding-right:8px}.brand{display:none}#tray{padding:6px}#primary-row{gap:2px;grid-template-columns:repeat(7,minmax(42px,1fr))}.actions button{font-size:11px}#formula{font-size:11px;gap:5px}.term i{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.well.added{animation:none}}

/* The same card collection becomes a permanent sidebar on a wide workbench. */
@media(min-width:900px){
 #mix-app{max-width:1080px;grid-template-columns:minmax(0,1fr) 350px;column-gap:24px}
 #mix-app>.site-header{grid-column:1 / -1}
 #mix-app>.formula-panel,#mix-app>.palette-wrap,#mix-app>.workbench,#mix-app>#status{grid-column:1}
 #mix-app>.palette-wrap{grid-row:3;align-self:stretch}
 #cards-panel{position:static;grid-column:2;grid-row:3;align-self:stretch;min-height:0;background:transparent;padding:0;z-index:1;display:block}
 .cards-sheet{width:100%;height:100%;min-height:0;padding:15px 12px;border-radius:11px;background:linear-gradient(130deg,#faf9f1,#d9d8cf 65%,#f4f1e8);color:#363b35;border:1px solid #c4c4b7;box-shadow:0 14px 30px #0007,inset 0 2px 2px #fff,inset 0 -2px 3px #aaa79e}
 .cards-sheet h2{font-size:17px}.cards-sheet header button,#cards-button{display:none}
 #cards-progress{color:#666b60}.cards-sheet progress,.cards-sheet progress::-webkit-progress-bar{background:#c2c4b6}.cards-sheet progress::-webkit-progress-value{background:#93804e}.cards-sheet progress::-moz-progress-bar{background:#93804e}
 #cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;grid-auto-rows:minmax(119px,auto)}
 .color-card{padding:10px 4px 8px;background:#f3f2e980;border-color:#c1c4b5;color:#4d574b}.color-card strong{font-size:11px}.color-card small{color:#788072}.color-card.found{background:#ffffff90;border-color:#9ca28a}.color-card.found small{color:#6e725e}
 .actions{grid-template-columns:1fr 1fr;max-width:360px}
 #card-hint{font-size:11px;color:#756338}
 #discovery-toast{left:calc(50% - 187px)}
}
.color-card.newly-found{animation:card-discovered 1s ease-out 3;border-color:#e7ce88;box-shadow:inset 0 0 0 1px #d5b775}
@keyframes card-discovered{0%,100%{background:#ffffff07}40%{background:#dfcf9235}}
@media(prefers-reduced-motion:reduce){.color-card.newly-found{animation:none;background:#dfcf9235}}