@import url('../memory/style.css');
:root{background:#f8f3e7;color:#6b657f}.brand-mark{background:#eedff3}.brand h1{color:#77658c}.brand small{color:#a18d9d}.colors-world{background:radial-gradient(ellipse at 50% 9%,#fff8e9,#f2e9e9 63%,#e7e9ee);border-color:#e0d5d9}
.colors-order{min-width:0;max-width:80%;padding:10px 15px;background:#fffaf0;border-color:#d6c3d7;border-bottom-color:#b6a1be}.colors-order .order-content{gap:14px}#question{font-size:21px;color:#716580}.target-swatch{display:grid;place-items:center;width:49px;height:49px;background:var(--paint);border:3px solid #fffdf3;border-radius:16px;box-shadow:0 2px 0 #0002}.target-swatch svg{width:31px;height:31px;color:#fffaf1}.listen{background:#8770b0;outline-color:#665183;box-shadow:0 4px #665183}.listen:hover{background:#775e9f}
.round-progress{top:28px}.progress-star{width:23px;height:23px}.paint-recipe{position:absolute;top:91px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:4px 12px;border-radius:14px;background:#fff9eced;color:#aa9b9b;font-size:18px}.paint-recipe>span{display:grid;place-items:center;width:27px;height:27px;background:var(--paint);border:2px dashed #baaeb6;border-radius:50%;opacity:.65}.paint-recipe>span.filled{opacity:1;border:2px solid #fffaf0;box-shadow:0 1px 3px #0002}.paint-recipe svg{width:16px;height:16px;color:#fffaf0}
.bottom-note{bottom:24px;max-width:calc(100% - 215px);min-height:55px}.bottom-note p{font-size:13px}.studio-actions{position:absolute;bottom:28px;right:25px;display:flex;gap:17px;pointer-events:auto}.studio-actions button{display:grid;place-items:center;min-width:58px;min-height:58px;border:3px solid #fffbed;border-radius:19px;outline:2px solid #b297bd;background:#d1b7e0;color:#6a4c83;box-shadow:0 5px #9a80ae;cursor:pointer;touch-action:manipulation}.studio-actions button:last-child{background:#f3ca72;color:#84602d;outline-color:#b58b3d;box-shadow:0 5px #b58b3d}.studio-actions button .icon{width:30px;height:30px}.studio-actions button:disabled{opacity:.42;cursor:default}.studio-actions button:focus-visible{outline:4px solid #205faa;outline-offset:5px}.colors-controls button{min-inline-size:48px;min-block-size:48px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.colors-controls button:focus-visible{outline:5px solid #255eaa;outline-offset:5px}
.dialog-mark{background:#eee0f0;color:#9581ba}.color-demo{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px auto}.color-demo i{display:grid;place-items:center;width:62px;height:62px;background:var(--paint);border:4px solid #fffbed;border-radius:50%;box-shadow:0 4px 0 #b5a8a5}.color-demo svg{width:35px;height:35px;color:#fff8eb}.color-demo b{color:#b7a4a0;font-size:26px;font-weight:400}.primary{background:#8c70ab;border-color:#6e548e;box-shadow:0 4px #6e548e}.primary:hover{background:#7a5c9e}.motion-setting input{accent-color:#8c70ab}
.colors-guide{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}.colors-guide[hidden]{display:none}.colors-guide img{position:absolute;left:calc(var(--tap-x) - 36px);top:calc(var(--tap-y) - 9px);width:112px;height:112px;filter:drop-shadow(0 4px 3px #63567a44);transform-origin:36px 9px;animation:color-tap 1.2s ease-in-out infinite}.tap-ring{position:absolute;left:calc(var(--tap-x) - 35px);top:calc(var(--tap-y) - 35px);width:70px;height:70px;border:4px solid #fffde8;border-radius:50%;box-shadow:0 0 0 4px #e3aa3d;animation:color-ring 1.2s ease-out infinite}.colors-guide.static img,.colors-guide.static .tap-ring,.reduce-motion .colors-guide img,.reduce-motion .tap-ring{animation:none}@keyframes color-tap{0%,100%{transform:translateY(-14px) rotate(-7deg)}45%,62%{transform:translateY(0) scale(.94)}}@keyframes color-ring{0%,30%{opacity:0;transform:scale(.7)}55%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
.fallback-colors{position:absolute;inset:155px 7% 110px;display:flex;flex-direction:column;justify-content:space-around;gap:30px}.fallback-workbench{display:flex;align-items:center;justify-content:center;gap:75px}.fallback-target{display:grid;place-items:center;width:170px;height:190px;background:var(--paint);border:14px solid #fff7e6;outline:7px solid #cfaa7f;border-radius:15px;box-shadow:0 8px #ba8f65;transform:rotate(-4deg)}.fallback-target svg{width:105px;height:105px;color:#fff9e5}.fallback-bowl{position:relative;display:grid;place-items:center;overflow:hidden;width:250px;height:160px;border:12px solid #fffaf0;border-bottom-width:28px;border-radius:50% 50% 45% 45%;outline:3px solid #d0bda4;background:#fff7e9;box-shadow:0 12px #bfaa8e}.fallback-paint{position:absolute;inset:0;background:var(--paint);transition:background 1s}.fallback-bowl svg{position:relative;width:60px;height:60px;color:#fff9e6}.fallback-bowl.mixing svg{animation:mix-spin 1s linear infinite}.fallback-bowl.solved{outline:5px solid #dcac42}.fallback-pots{display:flex;align-items:center;justify-content:space-evenly;gap:35px}.fallback-pots button{position:relative;display:grid;justify-items:center;align-items:center;gap:10px;width:190px;min-height:170px;border:6px solid #fffbed;border-radius:35px 35px 42px 42px;outline:3px solid var(--paint);background:var(--paint);box-shadow:0 9px #9b85735c;color:#fffaf0;cursor:pointer;touch-action:manipulation;font:400 16px Mitr,sans-serif}.fallback-pots button svg{width:75px;height:75px}.fallback-pots button span{background:#fffbed;color:#665d64;padding:5px 12px;border-radius:15px}.fallback-pots button.selected::after{content:'✓';position:absolute;top:-13px;right:-10px;width:40px;height:40px;border:3px solid #fff9e8;border-radius:50%;background:#6d9875;color:white;font-size:28px}.fallback-pots button.hinted{outline:6px solid #dfad38;box-shadow:0 0 0 12px #fff3b9}.fallback-pots button:focus-visible{outline:5px solid #205faa;outline-offset:8px}.fallback-pots button:disabled{cursor:default}.reduce-motion .fallback-paint{transition:none}.reduce-motion .fallback-bowl.mixing svg{animation:none}@keyframes mix-spin{to{transform:rotate(360deg)}}
@media(orientation:portrait){.fallback-colors{inset:200px 7% 140px;gap:60px}.fallback-workbench{gap:65px}.fallback-target{width:190px;height:220px}.fallback-bowl{width:260px;height:175px}.fallback-pots{gap:28px}.fallback-pots button{min-height:200px}}
@media(max-width:900px){.brand h1{font-size:14px}.brand small{font-size:8px}.progress-star{width:20px;height:20px}#question{font-size:18px}.round-progress{left:20px}}
@media(max-width:600px){body{min-height:780px}.brand h1{font-size:11px}.brand small{font-size:6px}.colors-order{top:15px;padding:8px 12px;max-width:95%}.colors-order .order-content{gap:9px}.target-swatch{width:38px;height:38px;border-radius:13px}.target-swatch svg{width:24px;height:24px}#question{font-size:16px}.paint-recipe{top:84px;left:auto;right:18px;transform:none;padding:4px 9px}.round-progress{top:93px;left:17px}.progress-star{width:17px;height:17px}.bottom-note{left:16px;bottom:24px;min-height:49px;max-width:calc(100% - 155px);padding:8px 10px;gap:7px}.bottom-note p{font-size:10px}.studio-actions{bottom:28px;right:18px;gap:13px}.studio-actions button{min-width:47px;min-height:48px;border-radius:16px}.studio-actions button .icon{width:25px;height:25px}.fallback-colors{inset:165px 7% 120px}.fallback-workbench{gap:35px}.fallback-target{width:100px;height:135px;border-width:9px;outline-width:4px}.fallback-target svg{width:65px;height:65px}.fallback-bowl{width:145px;height:110px;border-width:8px;border-bottom-width:18px}.fallback-bowl svg{width:42px;height:42px}.fallback-pots{gap:17px}.fallback-pots button{width:90px;min-height:133px;border-width:4px;border-radius:23px;font-size:11px}.fallback-pots button svg{width:45px;height:45px}.fallback-pots button span{padding:4px 7px}.fallback-pots button.selected::after{width:29px;height:29px;font-size:20px}.color-demo{gap:9px}.color-demo i{width:55px;height:55px}}
@media(max-height:700px) and (min-width:601px){.colors-order{top:11px;padding-block:7px}#question{font-size:17px}.target-swatch{width:39px;height:39px}.listen{width:43px;height:43px}.paint-recipe{top:80px}.studio-actions{bottom:23px}.studio-actions button{min-width:51px;min-height:51px}.fallback-colors{inset:135px 9% 100px;gap:20px}.fallback-target{width:120px;height:135px}.fallback-bowl{width:200px;height:130px}.fallback-pots button{width:160px;min-height:135px}}
@media(prefers-reduced-motion:reduce){.colors-guide img,.tap-ring,.fallback-bowl.mixing svg{animation:none}.fallback-paint{transition:none}}@media(forced-colors:active){.fallback-pots button,.studio-actions button{border-color:ButtonText;outline-color:ButtonText}.fallback-target,.fallback-bowl{outline-color:CanvasText}}