:root{--ink:#4b3341;--paper:#fff8e8;--paper-deep:#f1e5ce;--coral:#ef5549;--yellow:#f7bf2f;--blue:#3970c8;--green:#51a45c;--violet:#8055ad;--line:#4b334124;--shadow:0 18px 48px #53393429}*{box-sizing:border-box}html,body{min-height:100%;margin:0;overflow:clip}body{background:radial-gradient(circle at 16% 8%, #ffffffd9, transparent 28%), repeating-linear-gradient(105deg, #5b413005 0 1px, transparent 1px 7px), var(--paper);color:var(--ink);font-family:Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif}button,input{font:inherit}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline-offset:4px;outline:4px solid #173b8c}.app-shell{isolation:isolate;width:100%;height:100dvh;min-height:540px;position:relative;overflow:clip}.app-shell.game-locked{pointer-events:none;-webkit-user-select:none;user-select:none}.paint-splash{filter:saturate(1.08);opacity:.16;pointer-events:none;z-index:-1;border-radius:48% 52% 38% 62%/57% 43%;position:absolute}.splash-one{background:var(--coral);width:31vmax;height:24vmax;top:-14vmax;left:-14vmax;transform:rotate(18deg)}.splash-two{background:var(--blue);width:29vmax;height:25vmax;bottom:-13vmax;right:-13vmax;transform:rotate(-12deg)}.reset-icon{border:2px solid var(--line);color:var(--ink);cursor:pointer;z-index:8;background:#fffdf7db;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.45rem;line-height:1;transition:transform .18s,background .18s;display:flex;position:fixed;top:10px;right:clamp(10px,2vw,26px)}.reset-icon:hover{background:#fff;transform:rotate(-35deg)}.game-stage{grid-template-rows:auto minmax(0,1fr) auto;gap:6px;max-width:1440px;height:100%;margin:0 auto;padding:9px clamp(10px,3vw,44px) 10px;display:grid;position:relative}.mode-switch{z-index:3;background:#e4d8c5d1;border:1px solid #4b334114;border-radius:18px;justify-self:center;align-items:center;min-height:50px;padding:4px;display:flex;position:relative}.mode-switch button{color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:14px;min-width:58px;min-height:42px;padding:0 14px;font-size:.92rem;font-weight:900;transition:background .18s,color .18s,transform .18s}.mode-switch button.active{background:var(--ink);color:#fff;box-shadow:0 5px 12px #4b334138}.mode-switch button:hover:not(.active){background:#ffffff8c;transform:translateY(-1px)}.mixing-workspace{flex-direction:column;justify-content:center;align-items:center;gap:clamp(3px,.8vh,8px);min-height:0;display:flex;position:relative}.mixing-workspace.free-mode{gap:clamp(10px,1.6vh,16px)}.ingredient-row{flex:none;justify-content:center;align-items:center;display:flex}.ingredient-wrap{position:relative}.ingredient-wrap+.ingredient-wrap{margin-left:clamp(45px,6vw,76px)}.ingredient-circle{--ingredient:#fffdf7;background:var(--ingredient);color:#9c8a80;cursor:pointer;text-align:center;border:3px dashed #c8b9a4;border-radius:52% 48% 46% 54%/47% 53% 48% 52%;justify-content:center;align-items:center;width:clamp(62px,8.2vmin,84px);height:clamp(62px,8.2vmin,84px);padding:5px;font-size:.78rem;font-weight:900;transition:transform .18s,box-shadow .18s;display:flex;transform:rotate(-3deg)}.ingredient-wrap:nth-child(2) .ingredient-circle{transform:rotate(4deg)}.ingredient-circle.filled{box-shadow:0 0 0 2px color-mix(in srgb, var(--ingredient), #4b3341 17%), 0 9px 20px color-mix(in srgb, var(--ingredient), transparent 64%);color:#fff;cursor:pointer;text-shadow:0 2px 4px #26181c85;border:4px solid #ffffffc7}.ingredient-circle.active{box-shadow:0 0 0 4px var(--ink), 0 0 0 9px #f7bf2fc7;cursor:pointer;border-color:#fff;animation:1.15s ease-in-out infinite target-pulse}.ingredient-circle:disabled{opacity:1}.plus-sign{font-size:clamp(1.4rem,2.8vmin,2rem);font-weight:900;position:absolute;top:50%;left:calc(100% + clamp(22.5px,3vw,38px));transform:translate(-50%,-50%)}.mixer{--first-color:#f3ebdd;--second-color:#f3ebdd;--result-color:#fffdf7;aspect-ratio:1;background:var(--result-color);border:clamp(4px,.6vmin,7px) dashed #d3c4ae;border-radius:48% 52% 46% 54%/52% 45% 55% 48%;flex:0 auto;justify-content:center;align-items:center;width:min(43vh,42vw,430px);min-width:184px;min-height:184px;transition:background .24s,border-color .24s,transform .24s;display:flex;position:relative}.mixer.drag-source,.ingredient-circle.filled,.color-choice.unlocked,.saved-color.filled{cursor:grab}.mixer.drag-source:active,.ingredient-circle.filled:active,.color-choice.unlocked:active,.saved-color.filled:active{cursor:grabbing}.mixer:before,.mixer:after{border-radius:inherit;content:"";pointer-events:none;position:absolute}.mixer:before{border:2px solid #4b334117;inset:-10px 7px 5px -7px;transform:rotate(7deg)}.mixer:after{opacity:0;border:2px solid #ffffff7a;inset:8px -8px -8px 8px;transform:rotate(-5deg)}.mixer.has-result{box-shadow:inset 0 0 0 6px color-mix(in srgb, var(--result-color), white 31%), 0 18px 40px color-mix(in srgb, var(--result-color), transparent 58%);border-style:solid;border-color:#ffffffc7}.mixer.has-result:after{opacity:1}.mixer.mixing{background:conic-gradient(from 0deg, var(--first-color), var(--second-color), var(--first-color), var(--second-color), var(--first-color));border-style:solid;border-color:#0000;animation:.76s ease-in-out infinite mixer-wobble}.mixer.fresh-mix{animation:.42s both result-bloom}.mixer-inner{text-align:center;z-index:1;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.swirl{border:clamp(7px,1vmin,11px) solid #fff6;border-left-color:#fff;border-radius:50%;width:clamp(60px,10vmin,96px);height:clamp(60px,10vmin,96px);animation:.7s linear infinite spin}.result-spark{color:#fff;filter:drop-shadow(0 2px 3px #321e2352);margin-bottom:10px;font-size:clamp(2.1rem,5vmin,3.8rem);line-height:1;animation:.5s both pop}.result-name{color:var(--ink);letter-spacing:0;max-width:90%;text-shadow:none;white-space:nowrap;background:#ffffffe0;border-radius:999px;width:max-content;padding:9px 20px;font-size:clamp(1.25rem,3vmin,2.2rem);line-height:1.12;display:block;box-shadow:0 5px 18px #3d262b26}.result-strip{flex:none;justify-content:center;align-items:center;gap:8px;min-height:50px;padding-top:6px;display:flex}.equation{text-overflow:ellipsis;white-space:nowrap;max-width:44vw;font-size:clamp(.74rem,1.4vw,.94rem);overflow:hidden}.again-button,.next-mode{cursor:pointer;border:0;border-radius:14px;min-height:44px;padding:0 14px;font-size:.78rem;font-weight:900}.again-button{background:var(--ink);color:#fff;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;padding:0;font-size:1.28rem;display:inline-flex}.next-mode{background:var(--yellow);color:var(--ink)}.again-button:hover,.next-mode:hover{transform:translateY(-2px)}.palette-dock{background:#fffdf7c7;border:1px solid #4b334114;border-radius:25px;justify-self:center;min-width:0;max-width:100%;padding:6px clamp(7px,1.3vw,18px) 5px;position:relative;box-shadow:0 10px 28px #53393417}.color-palette{overscroll-behavior-x:contain;scrollbar-color:#c7b69f transparent;scrollbar-width:thin;touch-action:pan-x;gap:clamp(4px,.7vw,10px);max-width:calc(100vw - 38px);padding:2px 0 4px;display:flex;overflow-x:auto}.color-choice{cursor:grab;background:0 0;border:0;border-radius:14px;flex-direction:column;flex:0 0 clamp(62px,6.5vw,82px);align-items:center;min-height:82px;padding:4px 2px 2px;transition:background .15s,transform .15s;display:flex}.color-choice.unlocked:hover:not(:disabled){background:#fff;transform:translateY(-3px)rotate(-1deg)}.color-choice.unlocked:disabled{opacity:.58}.color-choice.locked{cursor:default}.swatch{background:var(--swatch);box-shadow:0 0 0 1px color-mix(in srgb, var(--swatch), #4b3341 15%), 0 6px 10px color-mix(in srgb, var(--swatch), transparent 70%);color:#8e7d76;border:3px solid #ffffffd1;border-radius:52% 48% 45% 55%/50% 44% 56% 50%;justify-content:center;align-items:center;width:clamp(48px,5.4vw,60px);height:clamp(48px,5.4vw,60px);font-size:1.1rem;font-weight:900;display:flex;transform:rotate(-3deg)}.color-choice:nth-child(2n) .swatch{transform:rotate(4deg)}.color-choice.locked .swatch{box-shadow:none;border:2px dashed #ad9e8d}.choice-name{text-align:center;margin-top:5px;font-size:clamp(.58rem,.8vw,.7rem);font-weight:900;line-height:1.05}.free-dock{flex-direction:column;justify-self:center;align-items:center;gap:clamp(10px,1.4vh,16px);width:100%;max-width:min(960px,100vw - 30px);display:flex}.saved-colors{touch-action:pan-x;justify-content:center;align-items:center;gap:clamp(8px,1.5vw,16px);min-height:54px;display:flex}.saved-color{--saved-color:#fffdf7;background:var(--saved-color);color:#a2917d;border:3px dashed #bba993;border-radius:50%;flex:none;justify-content:center;align-items:center;width:clamp(46px,6vmin,58px);height:clamp(46px,6vmin,58px);padding:0;font-size:1.45rem;font-weight:900;display:inline-flex}.saved-color.filled{box-shadow:0 0 0 2px color-mix(in srgb, var(--saved-color), #4b3341 18%), 0 7px 14px color-mix(in srgb, var(--saved-color), transparent 68%);border:3px solid #fff}.saved-color:nth-child(2n){transform:rotate(4deg)}.saved-color:nth-child(odd){transform:rotate(-3deg)}.free-controls{background:#fffdf7d1;border:1px solid #4b334117;border-radius:24px;justify-content:center;justify-self:center;align-items:center;gap:clamp(8px,1.4vw,16px);width:max-content;max-width:calc(100vw - 24px);padding:8px 10px;display:flex;box-shadow:0 10px 28px #5339341a}.free-choice-button{color:var(--ink);cursor:pointer;background:#ffffff8a;border:0;border-radius:17px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:clamp(78px,9vw,98px);min-height:72px;padding:6px 10px;font-size:.72rem;font-weight:900;transition:background .16s,transform .16s;display:flex}.free-choice-button:hover{background:#fff;transform:translateY(-2px)}.free-choice-swatch{border:3px solid #fff;border-radius:50%;width:42px;height:42px;display:block;box-shadow:0 0 0 1px #4b334140,0 4px 8px #4b33412e}.free-choice-button.color .free-choice-swatch{background:radial-gradient(circle,#fff 0 12%,#0000 48%),conic-gradient(#f33,#ff0,#19c95b,#0cc,#2867df,#a43dd1,#f33)}.free-choice-button.black .free-choice-swatch{background:#17151a}.free-choice-button.white .free-choice-swatch{background:#fff}.color-wheel{aspect-ratio:1;box-shadow:0 0 0 2px var(--line), 0 9px 20px #4b33412e;cursor:crosshair;touch-action:none;background:radial-gradient(circle,#fff 0%,#ffffffde 8%,#fff0 72%),conic-gradient(#f33,#ff0,#19c95b,#0cc,#2867df,#a43dd1,#f33);border:5px solid #fff;border-radius:50%;width:min(82vw,58vh,430px);position:relative}.wheel-cursor{border:3px solid var(--ink);pointer-events:none;background:#fff;border-radius:50%;width:24px;height:24px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 6px #00000047}.color-picker-overlay{z-index:110;background:#22181fc2;justify-content:center;align-items:center;padding:18px;animation:.22s both overlay-in;display:flex;position:fixed;inset:0}.color-picker-dialog{background:var(--paper);border:5px solid #fff;border-radius:clamp(24px,4vw,38px);flex-direction:column;align-items:center;gap:14px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:clamp(18px,3vw,30px);animation:.32s cubic-bezier(.2,.82,.28,1.08) both dialog-in;display:flex;position:relative;box-shadow:0 26px 80px #00000061}.color-picker-title{color:var(--ink);font-size:clamp(1.1rem,2.5vw,1.5rem);line-height:1}.color-picker-close{background:var(--ink);color:#fff;cursor:pointer;z-index:2;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;padding:0 0 3px;font-size:1.7rem;line-height:1;display:flex;position:absolute;top:-10px;right:-10px}.ratio-control{width:min(76vw,390px);min-width:0}.inline-ratio{flex:none;width:clamp(170px,22vw,230px);height:36px;margin:1px 0 3px}.ratio-control input{accent-color:var(--ink);appearance:none;background:linear-gradient(90deg, var(--first-color), var(--second-color));box-shadow:0 0 0 2px var(--line), 0 5px 12px #4b33411f;cursor:pointer;border:4px solid #fff;border-radius:999px;width:100%;height:16px;margin:11px 0}.ratio-control input::-webkit-slider-thumb{appearance:none;border:4px solid var(--ink);background:#fff;border-radius:50%;width:30px;height:30px;box-shadow:0 3px 8px #4b334140}.ratio-control input::-moz-range-thumb{border:4px solid var(--ink);background:#fff;border-radius:50%;width:23px;height:23px;box-shadow:0 3px 8px #4b334140}.ratio-control input:disabled{cursor:default;opacity:.42}.drag-preview{--drag-color:#fffdf7;background:var(--drag-color);pointer-events:none;z-index:90;border:4px solid #fff;border-radius:50%;width:64px;height:64px;position:fixed;transform:translate(-50%,-50%)scale(1.04);box-shadow:0 8px 24px #301d2547}.dragging-color [data-ingredient-slot],.dragging-color [data-mix-target],.dragging-color [data-saved-slot]{outline-offset:5px;outline:4px solid #f7bf2fdb}.splash-overlay{z-index:100;background:#22181fc7;justify-content:center;align-items:center;padding:clamp(10px,3vw,34px);animation:.26s both overlay-in;display:flex;position:fixed;inset:0}.splash-overlay.closing{pointer-events:none;animation:.3s both overlay-out}.splash-dialog{background:#fff9e9;border:clamp(4px,.6vw,8px) solid #fff;border-radius:clamp(20px,3vw,38px);flex-direction:column;align-items:center;width:min(86vw,1220px);max-width:min(1220px,100vw - 28px);max-height:calc(100dvh - 34px);animation:.45s cubic-bezier(.2,.82,.28,1.08) both dialog-in;display:flex;position:relative;overflow:visible;box-shadow:0 30px 90px #0000006b}.splash-dialog img{aspect-ratio:1732/908;border-radius:inherit;object-fit:contain;width:100%;height:auto;max-height:calc(100dvh - 92px);display:block}.splash-dialog button{background:var(--ink);color:#fff;cursor:pointer;border:4px solid #fff;border-radius:999px;min-height:58px;padding:0 clamp(24px,4vw,48px);font-size:clamp(1rem,2vw,1.35rem);font-weight:900;position:absolute;bottom:-8px;transform:translateY(42%);box-shadow:0 12px 26px #4b334152}.splash-dialog button:hover{background:#654656;transform:translateY(36%)scale(1.03)}.confetti{pointer-events:none;z-index:20;position:fixed;inset:0;overflow:hidden}.confetti i{animation:confetti-celebrate var(--duration) cubic-bezier(.18, .72, .22, 1) both;animation-delay:var(--delay);background:var(--coral);will-change:opacity, transform;border-radius:3px;width:9px;height:14px;position:absolute;top:0;left:0}.confetti i:nth-of-type(3n){background:var(--yellow);border-radius:50%}.confetti i:nth-of-type(3n+1){background:var(--blue)}.confetti i:nth-of-type(4n){background:var(--green);border-radius:999px;width:5px;height:22px}.confetti i:nth-of-type(5n){background:var(--violet)}.confetti i:nth-of-type(7n){background:#f28b24;width:16px;height:10px}.final-star{color:var(--yellow);filter:drop-shadow(0 8px 8px #4b334147);font-size:min(28vw,260px);animation:4.5s both final-star;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sr-only{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{0%{opacity:0;transform:scale(.2)rotate(-25deg)}70%{transform:scale(1.25)rotate(8deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes target-pulse{0%,to{transform:scale(1)rotate(-3deg)}50%{transform:scale(1.07)rotate(2deg)}}@keyframes mixer-wobble{0%,to{transform:rotate(-2deg)scale(.99)}50%{transform:rotate(3deg)scale(1.02)}}@keyframes result-bloom{0%{transform:scale(.95)}65%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes overlay-out{0%{opacity:1}to{opacity:0}}@keyframes dialog-in{0%{opacity:0;transform:translateY(18px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes confetti-celebrate{0%{opacity:0;transform:translate3d(var(--from-x), var(--entry-y), 0) rotate(0deg) scale(.55)}8%{opacity:1}55%{opacity:1;transform:translate3d(var(--target-x), var(--target-y), 0) rotate(var(--spin)) scale(1)}69%{opacity:1;transform:translate3d(calc(var(--target-x) + var(--sway)), calc(var(--target-y) + 5vh), 0) rotate(calc(var(--spin) + 180deg)) scale(1)}to{opacity:0;transform:translate3d(calc(var(--target-x) - var(--sway)), calc(var(--target-y) + var(--drop-y)), 0) rotate(calc(var(--spin) + 620deg)) scale(.82)}}@keyframes final-star{0%{opacity:0;transform:translate(-50%,-50%)scale(.1)rotate(-40deg)}22%{opacity:1;transform:translate(-50%,-50%)scale(1.15)rotate(8deg)}72%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}to{opacity:0;transform:translate(-50%,-50%)scale(1.35)rotate(15deg)}}@media (width<=650px){.app-shell{min-height:500px}.game-stage{padding:7px 7px 8px}.reset-icon{width:44px;height:44px;top:7px;right:7px}.mode-switch{border-radius:16px;min-height:46px}.mode-switch button{min-width:49px;min-height:38px;padding:0 9px}.ingredient-circle{width:62px;height:62px}.mixer{width:min(72vw,36vh,330px);min-width:178px;min-height:178px}.result-strip{min-height:46px;padding-top:3px}.equation{display:none}.palette-dock{border-radius:19px;width:100%;padding:5px 4px 3px}.color-palette{max-width:100%}.color-choice{flex-basis:61px;min-height:76px}.swatch{width:48px;height:48px}.free-controls{border-radius:20px;gap:6px;max-width:100%;padding:7px}.free-choice-button{min-width:78px;min-height:68px;padding:5px 7px}.free-choice-swatch{width:39px;height:39px}.free-dock{max-width:100%}.saved-colors{gap:10px;min-height:48px}.saved-color{width:44px;height:44px}.inline-ratio{width:170px}.splash-overlay{padding:8px}.splash-dialog{border-width:4px;width:100%;max-width:calc(100vw - 16px)}.splash-dialog img{object-fit:contain;width:100%;height:auto;max-height:calc(100dvh - 76px)}.splash-dialog button{min-height:56px;padding:0 28px}}@media (height<=680px){.game-stage{gap:2px}.mode-switch{min-height:44px}.mode-switch button{min-height:36px}.ingredient-circle{width:58px;height:58px}.mixer{width:min(34vh,36vw,280px);min-width:160px;min-height:160px}.palette-dock{padding-top:3px;padding-bottom:2px}.color-choice{min-height:68px}.swatch{width:43px;height:43px}.free-controls{padding-top:5px;padding-bottom:5px}.saved-colors{min-height:42px}.saved-color{width:40px;height:40px}.free-choice-button{min-height:62px}.result-strip{min-height:42px}}@media (orientation:landscape) and (height<=560px){.game-stage{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(260px,38vw)}.mode-switch{grid-column:1/-1}.mixing-workspace{grid-area:2/1}.palette-dock,.free-dock{grid-area:2/2;align-self:center;max-height:calc(100dvh - 60px)}.color-palette{grid-template-columns:repeat(3,1fr);gap:3px;max-height:calc(100dvh - 82px);display:grid;overflow-y:auto}.color-choice{min-height:64px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}