:root{--paper:#fafafd;--paper2:#eeecf6;--ink:#29272d;--muted:#716d78;--red:#ee4938;--yellow:#f3c529;--blue:#2868c7;--green:#42a56a;--shadow:0 18px 55px rgba(58,52,73,.12)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:'DM Sans',sans-serif;color:var(--ink);background:radial-gradient(circle at 82% 8%,rgba(226,220,244,.72) 0 13%,transparent 38%),radial-gradient(circle at 10% 86%,rgba(255,246,220,.62) 0 10%,transparent 34%),linear-gradient(135deg,#fdfdff 0%,#f7f5fb 58%,#fbfbfd 100%);overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.085;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E")}.topbar{position:relative;z-index:20;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,52px)}.exit,.sound{font:700 12px 'DM Sans';color:var(--muted);text-decoration:none;background:none;border:0;padding:12px;cursor:pointer}.lesson-mark{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em}.lesson-mark b{display:grid;place-items:center;width:25px;height:25px;border:1px solid #bbb6c4;border-radius:50%;letter-spacing:0}.paint-trail{position:relative;z-index:20;display:flex;justify-content:center;gap:7px;height:25px}.trail-dot{width:9px;height:9px;border:0;border-radius:55% 45% 62% 38%;background:#d8d3df;transform:rotate(var(--r));transition:.35s;cursor:pointer}.trail-dot.done{background:var(--red)}.trail-dot.current{background:var(--ink);transform:rotate(var(--r)) scale(1.45)}main{position:relative;z-index:1;min-height:calc(100dvh - 89px)}.scene{width:min(1080px,100%);min-height:calc(100dvh - 89px);margin:auto;padding:clamp(18px,4vh,44px) clamp(18px,5vw,62px) 110px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:enter .45s ease}.scene.wide{width:min(1240px,100%)}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}h1,h2,.serif{font-family:'Fraunces',serif}h1{font-size:clamp(40px,7vw,78px);line-height:.98;text-align:center;margin:8px 0 14px;max-width:850px}h2{font-size:clamp(30px,5vw,52px);line-height:1.04;text-align:center;margin:5px 0 12px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--red);text-transform:uppercase}.lead{font-size:clamp(15px,2vw,19px);color:var(--muted);text-align:center;margin:0 0 25px}.instruction{font-size:clamp(18px,2.5vw,24px);font-weight:700;text-align:center;margin:10px 0 20px}.btn{min-height:52px;border:0;border-radius:999px;padding:0 25px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 9px 22px rgba(41,38,34,.18);transition:.18s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn.light{color:var(--ink);background:#fff;border:1px solid #d6c9b5;box-shadow:none}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:25px}.video-slot{width:min(420px,90%);min-height:64px;border:1px dashed #bdaf99;border-radius:18px;margin:20px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;color:#8c806f;font-size:12px}.video-slot:before{content:'▶';width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eadfcd;color:#766b5e}.opening-swatches{position:relative;width:min(760px,92vw);height:185px;margin:10px 0 18px}.float-swatch{position:absolute;width:clamp(72px,11vw,112px);height:clamp(38px,6vw,62px);border-radius:58% 42% 55% 45% / 46% 57% 43% 54%;background:var(--c);box-shadow:inset 3px 5px 10px rgba(255,255,255,.18),inset -5px -7px 12px rgba(63,35,20,.12),0 8px 16px rgba(58,42,22,.12);transform:translate(var(--x),var(--y)) rotate(var(--rot));left:50%;top:50%;animation:breathe 3.6s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes breathe{to{transform:translate(var(--x),calc(var(--y) - 7px)) rotate(var(--rot)) scale(1.03)}}.materials{display:grid;grid-template-columns:repeat(5,minmax(105px,1fr));gap:12px;width:100%;margin-top:12px}.material{min-height:122px;border:1px solid #d8cbb7;background:rgba(255,255,255,.72);border-radius:22px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:700 13px 'DM Sans';color:var(--ink);cursor:pointer}.material.ready{border-color:var(--green);background:#edf5ed}.material.ready:after{content:'✓ Ready';color:var(--green);font-size:11px}.material .chip{width:48px;height:48px;border-radius:58% 42% 50% 50%;display:grid;place-items:center;font-size:28px;border:1px solid rgba(41,38,34,.16);background:var(--c);box-shadow:inset 3px 3px 7px rgba(255,255,255,.25)}.triangle{position:relative;width:min(470px,90vw);height:360px;margin:10px auto}.triangle:before,.triangle:after,.tri-line{content:'';position:absolute;height:2px;background:#cbbda7;transform-origin:left}.triangle:before{width:320px;left:75px;top:65px;transform:rotate(59deg)}.triangle:after{width:320px;right:75px;top:65px;transform-origin:right;transform:rotate(-59deg)}.tri-line{width:320px;left:75px;bottom:28px}.drop{position:absolute;width:104px;height:104px;border:2px dashed #b9aa94;border-radius:50%;display:grid;place-items:center;color:#948675;font-size:11px;font-weight:700}.drop[data-i="0"]{left:50%;top:10px;transform:translateX(-50%)}.drop[data-i="1"]{left:22px;bottom:0}.drop[data-i="2"]{right:22px;bottom:0}.paint-blob{width:88px;height:78px;border:0;background:var(--c);color:white;font-weight:800;font-size:11px;text-transform:uppercase;border-radius:55% 45% 63% 37% / 48% 58% 42% 52%;box-shadow:inset 5px 6px 10px rgba(255,255,255,.18),inset -7px -8px 13px rgba(20,10,0,.12),0 10px 18px rgba(50,30,15,.16);touch-action:none;cursor:grab;position:absolute;z-index:3}.paint-blob:active{cursor:grabbing}.blob-tray{display:flex;gap:13px;height:88px}.blob-tray .paint-blob{position:relative}.mixer-layout{display:grid;grid-template-columns:180px minmax(300px,560px) 180px;gap:22px;align-items:center;width:100%}.source{text-align:center}.source .paint-blob{position:relative;margin:auto}.source p{font-size:12px;font-weight:700;color:var(--muted)}.mix-board{background:#e8dac3;border:1px solid #cbb99d;border-radius:48% 52% 45% 55% / 52% 45% 55% 48%;padding:18px;box-shadow:var(--shadow),inset 0 0 35px rgba(98,65,28,.08)}.mix-canvas{display:block;width:100%;aspect-ratio:1.75;border-radius:42% 58% 48% 52%;touch-action:none;cursor:crosshair;background:#f4e9d7}.drop-scale{display:flex;gap:7px;justify-content:center;margin:15px 0}.amount{height:44px;min-width:64px;border:1px solid #cdbfa9;border-radius:14px;background:#fffaf1;font-weight:700;color:#61594f;cursor:pointer}.amount.active{background:var(--ink);color:white}.swatch-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;margin-top:22px}.swatch{height:84px;border-radius:13px 22px 12px 19px;background:var(--c);box-shadow:inset 2px 3px 8px rgba(255,255,255,.22);display:flex;align-items:flex-end;padding:8px;color:#fff;font-size:10px;font-weight:700;text-shadow:0 1px 2px #0007;opacity:.24;transform:rotate(var(--r));transition:.35s}.swatch.made{opacity:1}.balance{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:700;margin-top:8px}.balance i{width:13px;height:13px;border-radius:50%;background:var(--c);opacity:.2}.balance i.on{opacity:1}.paper-card,.compare-card,.vocab{background:rgba(255,255,255,.75);border:1px solid #d9ccb8;border-radius:24px;padding:20px;box-shadow:var(--shadow)}.paper-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.paper-step{min-width:110px;text-align:center;font-size:11px;font-weight:700}.paper-step b{display:block;height:58px;border-radius:8px 15px 7px 12px;background:linear-gradient(100deg,var(--a),var(--b));margin-bottom:8px}.discovery{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center;width:min(780px,100%)}.discovery .bigpaint{height:130px;border-radius:45% 55% 60% 40%;background:var(--c);box-shadow:inset 6px 7px 16px #fff3}.operator{font:700 28px 'Fraunces'}.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;width:100%}.test-card{background:#fffaf0;border:1px solid #d7c9b5;border-radius:22px;padding:17px;text-align:center;cursor:pointer}.test-card .paintband{height:78px;border-radius:18px;background:linear-gradient(90deg,var(--a),color-mix(in srgb,var(--a) var(--p),var(--b)));margin-bottom:10px}.test-card.done{outline:3px solid #7ba184}.final-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;width:100%;margin:18px 0}.final-chip{aspect-ratio:1;border-radius:61% 39% 55% 45%;background:var(--c);box-shadow:inset 3px 4px 9px #fff3,0 4px 8px #5332;animation:pop .45s both;animation-delay:var(--d)}@keyframes pop{from{transform:scale(0);opacity:0}}.counter{font:700 clamp(27px,5vw,48px) 'Fraunces';text-align:center}.counter span{color:var(--red)}.reflection{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.reflection button{border:1px solid #cdbfa9;background:#fffaf0;border-radius:999px;padding:13px 18px;font-weight:700;cursor:pointer}.reflection button.chosen{background:var(--ink);color:#fff}.badge{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#fff4bd,#e6b633);border:6px double #8f6822;box-shadow:var(--shadow);font:700 17px 'Fraunces';transform:rotate(-5deg)}.toast{position:fixed;z-index:50;left:50%;bottom:28px;transform:translate(-50%,20px);background:#292622;color:#fff;border-radius:999px;padding:12px 18px;font-size:13px;font-weight:700;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}details{margin:18px auto;max-width:560px;color:var(--muted);font-size:13px}summary{cursor:pointer;font-weight:700;color:var(--ink)}
@media(max-width:760px){.materials{grid-template-columns:repeat(2,1fr)}.mixer-layout{grid-template-columns:1fr 1fr}.mix-board{grid-column:1/-1;grid-row:2}.swatch-strip{overflow:auto}.swatch{min-width:70px}.discovery{grid-template-columns:1fr;max-width:330px}.operator{transform:rotate(90deg);text-align:center}.test-grid{grid-template-columns:1fr}.paper-steps{overflow:auto}.final-palette{grid-template-columns:repeat(5,1fr)}.sound{font-size:0}.sound:after{content:'♪';font-size:17px}.scene{justify-content:flex-start;padding-top:28px}.opening-swatches{height:160px}.triangle{transform:scale(.82);margin:-10px auto -20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Guided animated introduction — browser-native, not a recorded video. */
.story-card{position:relative;width:min(760px,96vw);height:330px;margin:18px auto 24px;border:1px solid #ddcba8;border-radius:34px;overflow:hidden;background:#fff9e9;box-shadow:var(--shadow)}
.story-slide{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;padding:30px;text-align:center;opacity:0;transform:translateY(10px);pointer-events:none}
.story-card.playing .story-slide{animation:storyReveal 40s both}.story-card.playing .story-slide:nth-child(1){animation-delay:0s}.story-card.playing .story-slide:nth-child(2){animation-delay:8s}.story-card.playing .story-slide:nth-child(3){animation-delay:16s}.story-card.playing .story-slide:nth-child(4){animation-delay:24s}.story-card.playing .story-slide:nth-child(5){animation-delay:32s}
@keyframes storyReveal{0%{opacity:0;transform:translateY(10px)}4%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-8px)}}
.story-card:not(.playing) .story-cover{opacity:1;pointer-events:auto}.story-icon{font-size:62px}.story-visual{display:flex;align-items:center;justify-content:center;gap:18px}.story-paint{width:82px;height:62px;border-radius:63% 37% 52% 48%;background:var(--c);box-shadow:inset 5px 7px 12px #fff4,inset -7px -8px 12px #5222;animation:paintPulse 2s ease-in-out infinite alternate}@keyframes paintPulse{to{transform:scale(1.08) rotate(3deg)}}.story-card h3{font:700 clamp(25px,4vw,38px) 'Fraunces';margin:0}.story-card p{margin:0;max-width:590px;color:var(--muted);font-size:15px;line-height:1.5}.story-progress{position:absolute;left:8%;right:8%;bottom:16px;height:4px;border-radius:9px;background:#e7dac0;overflow:hidden}.story-card.playing .story-progress:after{content:'';display:block;height:100%;background:var(--red);animation:storyProgress 40s linear both}@keyframes storyProgress{to{width:100%}}.story-skip{position:absolute;right:16px;top:13px;z-index:5;border:0;background:#fff7;border-radius:99px;padding:8px 12px;font-weight:700;color:var(--muted);cursor:pointer}

/* Real mixing station: ceramic palette + draggable measured paint. */
.mix-guide{width:min(920px,100%);background:#fffdf7;border:1px solid #dfcfb4;border-radius:24px;padding:16px 20px;margin:5px auto 18px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.mix-guide .stepno{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font-weight:800}.mix-guide strong{display:block;font-size:17px}.mix-guide small{color:var(--muted)}.paint-dose-tray{display:flex;align-items:flex-end;justify-content:center;gap:12px;min-height:94px;margin:5px auto 16px}.dose{border:0;background:transparent;display:grid;place-items:center;gap:5px;font:700 11px 'DM Sans';color:var(--ink);cursor:grab;touch-action:none}.dose-dot{display:block;width:var(--s);height:var(--s);border-radius:55% 45% 60% 40%;background:var(--c);box-shadow:inset 4px 5px 7px #fff4,inset -5px -6px 8px #4113,0 5px 8px #5223}.dose.selected .dose-dot{outline:4px solid #292622;outline-offset:4px}.dose:active{cursor:grabbing}.dose-name{color:var(--red);letter-spacing:.05em}.mixer-layout.real{display:block;max-width:760px}.mix-board.real{position:relative;border-radius:46px;background:radial-gradient(ellipse at 50% 45%,#fffdf8 0 52%,#e3d7c4 54% 57%,#faf5e9 59% 100%);padding:42px 58px 38px;border:2px solid #cfc2ac;box-shadow:0 20px 35px #5432,inset 0 3px 5px #fff}.mix-board.real:before{content:'CERAMIC MIXING PALETTE';position:absolute;left:50%;bottom:11px;transform:translateX(-50%);font-size:8px;letter-spacing:.2em;color:#a99c89}.mix-canvas.real{border-radius:50%;background:transparent;box-shadow:inset 0 3px 18px #9873;border:1px solid #dacdb9}.gesture-hint{text-align:center;font-weight:700;margin:10px 0 0}.gesture-hint .finger{display:inline-block;animation:swirl 2.2s ease-in-out infinite}@keyframes swirl{0%,100%{transform:translateX(-20px) rotate(-12deg)}50%{transform:translateX(20px) rotate(12deg)}}.mix-meter{height:8px;max-width:420px;margin:12px auto 4px;border:1px solid #cabba5;border-radius:99px;overflow:hidden;background:#eee2cf}.mix-meter i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--yellow),var(--red));transition:.15s}.mix-status{text-align:center;color:var(--muted);font-size:12px}.paper-lab{width:min(900px,100%);margin:26px auto 0;padding:22px;background:#fffef9;border:1px solid #d9cdb9;box-shadow:5px 8px 24px #5432;transform:rotate(-.4deg);position:relative}.paper-lab:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.5' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}.paper-lab h3{font:700 20px 'Fraunces';margin:0 0 5px}.paper-lab p{color:var(--muted);font-size:13px;margin:0 0 12px}.paper-canvas{display:block;width:100%;height:150px;touch-action:none;background:#fffef9;border-top:1px solid #eee5d5;border-bottom:1px solid #eee5d5;cursor:crosshair}.wash-reminder{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:700;color:var(--blue)}
@media(max-width:760px){.story-card{height:360px}.mix-guide{grid-template-columns:auto 1fr}.mix-guide .guide-side{grid-column:1/-1;text-align:center}.mix-board.real{padding:28px 24px 34px;border-radius:34px}.paint-dose-tray{gap:4px}.dose-dot{transform:scale(.85)}}

/* Flat palette correction: this must read as a work surface, not a bowl. */
.mix-board.real{border-radius:34px;background:linear-gradient(145deg,#fffdf8,#eee5d7);padding:35px 44px 38px}
.mix-board.real:after{content:'';position:absolute;right:17px;top:16px;width:22px;height:22px;border-radius:50%;border:8px solid #ddd1be;box-shadow:inset 0 2px 4px #8763}
.mix-canvas.real{aspect-ratio:2.35;border-radius:33% 67% 30% 70% / 64% 35% 65% 36%}
.paper-canvas{height:210px}
.paint-dose-tray.added .dose:not(.added-dose){opacity:.22;filter:grayscale(.65)}.paint-dose-tray.added .dose{cursor:not-allowed}.dose.added-dose .dose-dot{outline-color:var(--green);transform:scale(.92)}.dose.added-dose .dose-name{color:var(--green)!important}.mix-status b{color:var(--green)}
.mix-done:not(:disabled){background:var(--green);box-shadow:0 9px 22px rgba(66,165,106,.3);animation:readyPulse 1.5s ease-in-out infinite alternate}@keyframes readyPulse{to{transform:translateY(-2px);box-shadow:0 12px 28px rgba(66,165,106,.45)}}
.drawing-board{position:relative;width:min(980px,100%);margin:34px auto 8px;padding:38px;background:linear-gradient(90deg,#b7824f,#c99762 45%,#ad7545);border:10px solid #81542e;border-radius:8px;box-shadow:0 18px 40px #4e2f1d45,inset 0 0 0 2px #e5b77b}
.drawing-board:before{content:'';position:absolute;inset:0;opacity:.2;pointer-events:none;background:repeating-linear-gradient(5deg,transparent 0 19px,#6c3f2022 20px 21px)}
.drawing-board .paper-lab{width:100%;margin:0;padding:30px 26px 22px;transform:rotate(-.25deg);background:#fffdf6;border:0;box-shadow:3px 5px 18px #3e251d66}
.board-pin{position:absolute;z-index:4;top:23px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b5a99a 42%,#5e554b);box-shadow:0 3px 5px #3218}.pin-left{left:17%}.pin-right{right:17%}.paper-step-mark{font-size:9px;letter-spacing:.18em;font-weight:800;color:var(--red);margin-bottom:7px}
@media(max-width:760px){.drawing-board{padding:24px 14px;border-width:7px}.drawing-board .paper-lab{padding:26px 12px 18px}.board-pin{top:12px}}

/* Color Practice adopts the original Cloud Code course typography. */
body{font-family:'Work Sans',sans-serif}.exit,.sound,.material,.dose{font-family:'Work Sans',sans-serif}h1,h2,.serif,.story-card h3,.paper-lab h3,.counter,.badge{font-family:'Space Grotesk',sans-serif}

/* Cloud Code-inspired course directory. */
.course-map-scene{justify-content:flex-start;padding-top:42px}.course-map{width:min(980px,100%);display:grid;grid-template-columns:repeat(9,auto);align-items:center;justify-content:center;margin:32px auto}.map-stop{width:150px;min-height:185px;border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--ink);cursor:pointer}.map-stop b{font:700 15px 'Space Grotesk'}.map-stop small{font-size:11px;color:var(--muted);line-height:1.35}.map-stop.locked{opacity:.34;cursor:not-allowed}.map-dot{width:76px;height:76px;border-radius:50%;display:block;border:7px solid #fff8eb;box-shadow:0 8px 20px #4f2e1d2a}.map-stop.current .map-dot{outline:4px solid var(--ink);outline-offset:4px}.map-stop.done .map-dot:after{content:'✓';display:grid;place-items:center;width:100%;height:100%;color:white;font-size:28px;font-weight:800;text-shadow:0 2px 4px #0005}.tricolor,.primary-dot{background:conic-gradient(var(--red) 0 33%,var(--yellow) 33% 66%,var(--blue) 66%)}.analogous-dot{background:linear-gradient(135deg,#e8bc2c,#e57934)}.complement-dot{background:linear-gradient(135deg,#e84835 50%,#47935b 50%)}.warm-dot{background:linear-gradient(135deg,#ee6339 50%,#4c83c4 50%)}.map-line{width:36px;height:4px;background:#d8cbb7;margin-top:-70px;border-radius:9px}.map-line.done{background:var(--green)}.palette-preview{width:min(760px,100%);border:1px solid #d9cbb4;border-radius:24px;background:#fffaf0;padding:17px 20px;display:flex;gap:18px;align-items:center}.palette-preview>span{font:700 12px 'Space Grotesk';white-space:nowrap}.palette-preview>div{display:flex;flex-wrap:wrap;gap:7px}.palette-preview i{width:27px;height:27px;border-radius:50%;background:var(--c);box-shadow:inset 2px 3px 5px #fff4}.palette-preview em{font-size:12px;color:var(--muted)}.map-back{align-self:flex-start;border:0;background:transparent;color:var(--muted);font-weight:700;padding:10px;cursor:pointer}

/* One real photo sheet, cropped into ten material cards. */
.material{min-height:170px;overflow:hidden}.material .chip{display:none}.material-photo{display:block;width:100%;height:auto;aspect-ratio:1.03;border-radius:16px;background-image:url('assets/materials-contact-sheet.png');background-size:500% 200%;background-position:calc(var(--mx) * 25%) calc(var(--my) * 100%);background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #80633b18}.material.ready .material-photo{filter:saturate(.8);opacity:.75}
.materials-reference{width:min(760px,100%);margin:16px auto 26px;padding:10px;background:rgba(255,255,255,.78);border:1px solid #d8d1df;border-radius:26px;box-shadow:0 16px 38px #43314c18}.materials-reference img{display:block;width:100%;height:auto;border-radius:18px}.materials-reference figcaption{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:13px 9px 5px;color:var(--muted);font-size:12px}.materials-reference figcaption b{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:14px}.materials-reference figcaption span{text-align:right}
.classroom-demo{width:min(940px,100%);margin:30px auto 8px;padding:22px;display:grid;grid-template-columns:minmax(300px,470px) minmax(250px,1fr);gap:30px;align-items:center;text-align:left;background:rgba(255,255,255,.74);border:1px solid #d8d1df;border-radius:28px;box-shadow:0 17px 42px #43314c18}.classroom-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#26222a;box-shadow:0 12px 24px #2319282b}.classroom-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.classroom-controls{margin:10px 4px 0;color:var(--muted);font-size:11px;line-height:1.45}.classroom-copy .eyebrow{text-align:left}.classroom-copy h3{margin:7px 0 12px;font:700 clamp(24px,3vw,34px)/1.05 'Fraunces',serif}.classroom-copy p{margin:0 0 11px;color:var(--muted);font-size:14px;line-height:1.55}.classroom-copy p b{color:var(--ink)}.classroom-copy .recording-note{padding:11px 13px;border-left:3px solid #a794bd;background:#f5f1fa;border-radius:0 12px 12px 0;font-size:12px}
@media(max-width:760px){.materials-reference figcaption{display:block}.materials-reference figcaption span{display:block;margin-top:4px;text-align:left}.classroom-demo{grid-template-columns:1fr;padding:15px;gap:20px}.classroom-video-frame{width:100%}.classroom-copy .eyebrow{text-align:left}}

/* Why Color: a photographic, annotated 40-second visual story. */
.why-scene{padding-top:24px}.why-scene>h1{font-size:clamp(36px,5.6vw,65px)}.story-card{width:min(980px,96vw);height:470px;border-color:#d8d1df;background:#faf9fc}.story-slide{grid-template-columns:minmax(0,1.35fr) minmax(230px,.78fr);align-content:stretch;align-items:center;gap:26px;padding:34px 38px;text-align:left}.story-copy{display:grid;gap:12px;justify-items:start;position:relative;z-index:3}.story-card h3{font-size:clamp(27px,3.3vw,42px);line-height:1.02}.story-card p{font-size:14px}.story-photo,.story-interface,.story-paintbox{position:relative;width:100%;height:340px;border-radius:23px;overflow:hidden;background:#26222a;box-shadow:0 16px 28px #3e2f4829}.story-photo img{display:block;width:100%;height:100%;object-fit:cover}.story-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#17121d73)}.story-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 25%,#fff7 47%,transparent 66%);transform:translateX(-110%)}.story-card.playing .story-wash{animation:storyWash 4.8s ease 1 both}.story-sticker{position:absolute;z-index:3;left:20px;bottom:18px;padding:9px 12px;background:#f7cf37;color:#292622;font:800 11px/1.2 'Space Grotesk';letter-spacing:.08em;transform:rotate(-3deg);box-shadow:3px 4px 0 #292622}.story-ink{position:absolute;z-index:4;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#ff4e3f;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.story-ink path,.story-ink circle{stroke-dasharray:180;stroke-dashoffset:180}.story-card.playing .story-slide .story-ink path,.story-card.playing .story-slide .story-ink circle{animation:inkDraw 3.8s .8s ease forwards}.photo-focus{position:absolute;z-index:4;padding:6px 9px;border-radius:99px;background:#fff;color:#292622;font:800 9px 'Space Grotesk';letter-spacing:.08em;box-shadow:0 5px 12px #2117;opacity:0}.focus-paints{left:47%;top:31%}.focus-palette{right:3%;top:54%}.story-card.playing .photo-focus{animation:labelPop .45s 1.9s ease forwards}.classroom-still img{filter:saturate(.83) contrast(1.04)}.story-video-mark{position:absolute;z-index:4;left:16px;top:16px;padding:7px 9px;background:#ee4938;color:#fff;font:800 9px 'Space Grotesk';letter-spacing:.12em}.story-play-ring{position:absolute;z-index:4;left:50%;top:50%;width:62px;height:62px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#251e2a99;color:#fff;font-size:22px;transform:translate(-50%,-50%);box-shadow:0 0 0 0 #fff5}.story-card.playing .story-play-ring{animation:playPulse 1.8s ease-in-out infinite}.story-interface{padding:14px;background:#f4f0f8;border:1px solid #d8d0dd}.mini-top{display:flex;align-items:center;gap:5px;color:#6d6571;font-size:8px;letter-spacing:.09em}.mini-top i{width:7px;height:7px;border-radius:50%;background:#d45137}.mini-top i:nth-child(2){background:#e6b633}.mini-top i:nth-child(3){background:#315e9f}.mini-top b{margin-left:auto}.mini-recipe{display:flex;justify-content:center;align-items:center;gap:9px;margin:13px 0 8px;font-size:10px;font-weight:750}.mini-recipe span{padding:6px 9px;border-radius:99px;background:#fff;border:1px solid #d9d0df}.mini-palette{position:relative;height:190px;border-radius:28px;background:linear-gradient(145deg,#fffef9,#ded6ca);border:2px solid #cbc0b0;overflow:hidden}.mini-palette>i{position:absolute;border-radius:55% 45% 58% 42%;box-shadow:inset 4px 5px 7px #fff4;width:92px;height:62px}.mini-yellow{left:24%;top:35%;background:#e6b633}.mini-red{right:24%;top:35%;background:#dc493a}.mini-orange{left:50%;top:42%;background:#dd762f;transform:translateX(-50%) scale(.25);opacity:0}.story-card.playing .mini-yellow{animation:yellowMix 3.4s 1s ease forwards}.story-card.playing .mini-red{animation:redMix 3.4s 1s ease forwards}.story-card.playing .mini-orange{animation:orangeReveal 2.2s 2.1s ease forwards}.mini-palette svg{position:absolute;z-index:4;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110}.story-card.playing .mini-palette svg{animation:inkDraw 2.8s 1.1s ease forwards}.mini-palette strong{position:absolute;z-index:5;left:50%;bottom:12px;transform:translateX(-50%);font-size:10px}.mini-paper{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:9px;padding:6px;background:#fff}.mini-paper i{height:23px;border-radius:6px 9px 5px 8px;background:var(--c);transform:scaleX(0);transform-origin:left}.story-card.playing .mini-paper i{animation:paperPaint .5s calc(2.4s + var(--d)) ease forwards}.story-paintbox{padding:55px 26px 24px;background:linear-gradient(145deg,#ded8cc,#aaa294 48%,#e8e2d7);border:1px solid #a89b88}.story-box-lid{position:absolute;left:15px;right:15px;top:14px;padding:11px;text-align:center;border:1px solid #aaa091;border-radius:13px;background:linear-gradient(#f5f1e9,#d6cec0);font:800 9px 'Space Grotesk';letter-spacing:.16em;color:#786f64}.story-cakes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:100%;padding:12px;border-radius:14px;background:linear-gradient(145deg,#837b70,#c7beb0);box-shadow:inset 0 3px 7px #514a4166}.story-cakes i{border-radius:7px;background:var(--c);border:3px solid #ddd3c4;box-shadow:inset 4px 5px 8px #fff4,inset -4px -5px 8px #3b221d2b;transform:scale(0)}.story-card.playing .story-cakes i{animation:cakePop .42s calc(.7s + var(--d)) cubic-bezier(.2,1.6,.4,1) forwards}.palette-count{position:absolute;z-index:5;right:18px;bottom:17px;padding:8px 11px;border-radius:99px;background:#292622;color:#fff;font-size:11px}.story-progress{background:#ded7e6}.story-card.playing .story-progress:after{background:linear-gradient(90deg,#e6b633,#ee4938,#315e9f)}
@keyframes storyWash{to{transform:translateX(110%)}}@keyframes inkDraw{to{stroke-dashoffset:0}}@keyframes labelPop{to{opacity:1;transform:translateY(-3px)}}@keyframes playPulse{50%{box-shadow:0 0 0 13px #fff0}}@keyframes yellowMix{to{left:41%;transform:rotate(9deg)}}@keyframes redMix{to{right:41%;transform:rotate(-9deg)}}@keyframes orangeReveal{to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes paperPaint{to{transform:scaleX(1)}}@keyframes cakePop{to{transform:scale(1)}}
@media(max-width:760px){.why-scene{padding-left:12px;padding-right:12px}.story-card{width:100%;height:540px}.story-slide{grid-template-columns:1fr;grid-template-rows:300px auto;gap:15px;padding:31px 16px 24px}.story-photo,.story-interface,.story-paintbox{height:300px}.story-copy{gap:7px}.story-card h3{font-size:25px}.story-card p{font-size:12px;line-height:1.35}.story-copy .btn{min-height:44px;font-size:12px}.story-skip{right:10px;top:9px}.story-progress{bottom:9px}.photo-focus{font-size:8px}.mini-palette{height:158px}}
.story-card.playing .story-slide .story-ink path,.story-card.playing .story-slide .story-ink circle{animation-delay:calc(var(--scene,0s) + .8s)}.story-card.playing .photo-focus{animation-delay:calc(var(--scene,0s) + 1.9s)}.story-card.playing .mini-yellow,.story-card.playing .mini-red{animation-delay:calc(var(--scene,0s) + 1s)}.story-card.playing .mini-orange{animation-delay:calc(var(--scene,0s) + 2.1s)}.story-card.playing .mini-palette svg{animation-delay:calc(var(--scene,0s) + 1.1s)}.story-card.playing .mini-paper i{animation-delay:calc(var(--scene,0s) + 2.4s + var(--d))}.story-card.playing .story-cakes i{animation-delay:calc(var(--scene,0s) + .7s + var(--d))}
.story-card:not(.playing) .story-slide[style*="display: grid"] .story-cakes i{transform:scale(1)}.story-card:not(.playing) .story-slide[style*="display: grid"] .story-ink path{stroke-dashoffset:0}
.challenge-card{width:min(620px,100%);display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;margin:2px auto 8px;padding:14px 17px;border:1px solid #d6cbe0;border-radius:18px;background:#f7f3fb;color:var(--muted);font-size:13px}.challenge-card b{padding:7px 10px;border-radius:99px;background:var(--ink);color:#fff;font:750 11px 'Space Grotesk';white-space:nowrap}.mix-status b,.mix-status span{display:block}.mix-status span{max-width:560px;margin:3px auto 0;line-height:1.35}.free-mix-scene{justify-content:flex-start}.free-studio{width:min(900px,100%)}.free-sources{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px auto 17px}.free-sources button{min-width:0;padding:11px 8px;border:1px solid #d7ccbc;border-radius:18px;background:#fffaf2;color:var(--ink);cursor:pointer;box-shadow:0 6px 14px #3c2d2012}.free-sources button.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}.free-sources i{display:block;width:100%;height:50px;margin-bottom:7px;border-radius:54% 46% 61% 39%;background:var(--c);box-shadow:inset 4px 5px 8px #fff4,inset -4px -5px 8px #3213}.free-sources b,.free-sources span{display:block}.free-sources b{font:750 12px 'Space Grotesk'}.free-sources span{margin-top:2px;color:var(--muted);font-size:10px}.free-recipe{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:14px;padding:11px 14px;border:1px solid #d9cfdf;border-radius:16px;background:#f8f5fb;font-size:12px}.free-recipe>b{font:800 9px 'Space Grotesk';letter-spacing:.12em;color:var(--red)}.free-recipe>span{font-weight:650}.free-recipe button{border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}.free-board{max-width:760px;margin:auto}.free-favorites{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;margin:22px auto 0;padding:14px 17px;border:1px solid #d7ccbc;border-radius:18px;background:#fffaf2}.free-favorites>b{font:750 13px 'Space Grotesk'}.free-favorites>div{display:flex;gap:7px;align-items:center;min-height:35px}.free-favorites i{width:42px;height:34px;border-radius:9px;background:var(--c);box-shadow:inset 3px 4px 7px #fff4,0 2px 4px #4323}.free-favorites span{color:var(--muted);font-size:11px}.completion-actions{max-width:850px}
@media(max-width:650px){.challenge-card{grid-template-columns:1fr;text-align:center}.challenge-card b{justify-self:center}.free-sources{grid-template-columns:repeat(3,1fr)}.free-recipe{grid-template-columns:1fr;text-align:center}.free-board{padding:24px 15px 32px}.free-favorites{grid-template-columns:1fr}.free-favorites>div{flex-wrap:wrap}}
@media(max-width:980px){.course-map{grid-template-columns:1fr;gap:4px}.map-stop{width:min(420px,90vw);min-height:auto;display:grid;grid-template-columns:70px 1fr;grid-template-rows:auto auto;text-align:left}.map-dot{grid-row:1/3;width:58px;height:58px}.map-line{width:4px;height:24px;margin:0 0 0 33px}.materials{grid-template-columns:repeat(2,1fr)}}
.paintbox-live{width:min(760px,100%);margin:24px auto 0;padding:16px 20px;border:2px solid #bba27e;border-radius:28px;background:linear-gradient(145deg,#f8efe0,#e7d7bc);box-shadow:0 10px 25px #51361e22;display:flex;align-items:center;gap:18px}.paintbox-live b{font:700 13px 'Space Grotesk';display:block}.paintbox-live small{font-size:10px;color:var(--muted)}.paintbox-wells{flex:1;display:grid;grid-template-columns:repeat(15,1fr);gap:5px}.paintbox-wells i{aspect-ratio:1;border-radius:50%;background:#dacbb3;box-shadow:inset 0 3px 7px #7652}.paintbox-wells i.filled{background:var(--c);box-shadow:inset 2px 3px 6px #fff4,0 2px 5px #4322}@media(max-width:650px){.paintbox-live{display:block}.paintbox-wells{grid-template-columns:repeat(8,1fr);margin-top:10px}}

/* A physical paint-cake box: empty pans fill only after the learner makes a color. */
.paintbox-live{position:relative;width:min(840px,100%);margin:82px auto 0;padding:18px;border:1px solid #a89b88;border-radius:19px;background:linear-gradient(145deg,#ded8cc,#aaa294 48%,#e8e2d7);box-shadow:0 15px 30px #51361e38,inset 0 1px 2px #fff;display:grid;grid-template-columns:170px 1fr;align-items:center;gap:18px}.paintbox-live:before{content:'';position:absolute;z-index:-1;left:8px;right:8px;height:75px;bottom:calc(100% - 5px);border:1px solid #aaa091;border-radius:16px 16px 7px 7px;background:linear-gradient(#f5f1e9,#d6cec0);box-shadow:0 -9px 19px #51361e1f,inset 0 0 0 7px #e6ded1;transform:perspective(430px) rotateX(-24deg);transform-origin:bottom}.paintbox-live:after{content:'FEI · MY MIXED COLORS';position:absolute;left:32px;right:32px;bottom:calc(100% + 27px);text-align:center;font:700 10px 'Space Grotesk';letter-spacing:.18em;color:#847b6f}.paintbox-label b{font:700 15px 'Space Grotesk';display:block}.paintbox-label small{display:block;margin-top:5px;font-size:10px;line-height:1.35;color:var(--muted)}.paintbox-case{padding:11px;border-radius:13px;background:linear-gradient(145deg,#837b70,#c7beb0);box-shadow:inset 0 3px 7px #514a4166,0 1px #fff}.paintbox-wells{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.paintbox-wells i{position:relative;aspect-ratio:1.25;border-radius:7px;background:linear-gradient(145deg,#f0eadf,#c9bfaf);border:3px solid #e3dbce;box-shadow:inset 0 4px 7px #675d5045,0 1px 2px #fff8}.paintbox-wells i:after{content:'';position:absolute;inset:4px;border-radius:5px;border:1px solid #81736220}.paintbox-wells i.filled{background:var(--c);border-color:#ddd3c4;box-shadow:inset 4px 5px 8px #fff4,inset -4px -5px 8px #3b221d2b,0 2px 4px #4323}.paintbox-wells i.just-filled{animation:cakeLand .65s cubic-bezier(.2,1.7,.45,1)}@keyframes cakeLand{0%{transform:scale(.2) rotate(-12deg)}65%{transform:scale(1.18) rotate(3deg)}100%{transform:none}}.flying-paint-cake{position:fixed;z-index:100;width:40px;height:32px;border-radius:8px;background:var(--c);box-shadow:inset 4px 5px 8px #fff5,inset -4px -5px 8px #3213,0 9px 18px #3215;pointer-events:none;transition:transform .72s cubic-bezier(.3,.75,.25,1),opacity .72s}.flying-paint-cake:after{content:'';position:absolute;inset:5px;border-radius:5px;border:1px solid #fff5}@media(max-width:650px){.paintbox-live{display:grid;grid-template-columns:1fr;margin-top:76px}.paintbox-wells{grid-template-columns:repeat(5,1fr);margin-top:0}.paintbox-label{text-align:center}}

/* One recipe at a time: mix → paint now → save → next recipe. */
.round-cycle{width:min(850px,100%);display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;align-items:center;margin:4px auto 22px}.cycle-step{min-height:68px;padding:11px;border:1px solid #d8cbb7;border-radius:17px;background:#fffaf1;display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;color:#8f8578}.cycle-step b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ddd1bf;color:#766d61}.cycle-step span{font-weight:750;font-size:13px}.cycle-step em{display:block;font-style:normal;font-weight:500;font-size:10px;margin-top:3px}.round-cycle>i{height:3px;background:#dacdbb}.cycle-step.current{color:var(--ink);border-color:var(--ink);box-shadow:0 6px 14px #4332}.cycle-step.current b{background:var(--ink);color:#fff}.round-cycle.on-paper .cycle-step:first-child,.round-cycle.on-save .cycle-step:nth-of-type(2){color:var(--green);border-color:#9ebba6;background:#f0f7ef}.round-cycle.on-paper .cycle-step:first-child b,.round-cycle.on-save .cycle-step:nth-of-type(2) b{background:var(--green);color:transparent}.round-cycle.on-paper .cycle-step:first-child b:after,.round-cycle.on-save .cycle-step:nth-of-type(2) b:after{content:'✓';color:white}.round-cycle.on-paper .cycle-step:first-child{box-shadow:none}.round-cycle.on-paper .cycle-step:nth-of-type(2){color:var(--ink);border-color:var(--ink);box-shadow:0 6px 14px #4332}.round-cycle.on-paper .cycle-step:nth-of-type(2) b{background:var(--ink);color:#fff}.round-cycle.on-save .cycle-step:nth-of-type(2){box-shadow:none}.round-cycle.on-save .cycle-step:nth-of-type(3){color:var(--ink);border-color:var(--ink);box-shadow:0 6px 14px #4332}.round-cycle.on-save .cycle-step:nth-of-type(3) b{background:var(--ink);color:#fff}.one-dose-note{text-align:center;margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:650}.dose mark{border-radius:99px;padding:3px 7px;background:#eee2d2;color:#887b6c;font:800 8px 'Work Sans';letter-spacing:.09em}.dose.current-dose mark{background:var(--ink);color:#fff}.dose.past-dose mark{background:#e7f2e8;color:var(--green)}.dose.future-dose,.dose.past-dose{opacity:.32;filter:grayscale(.35)}.dose.current-dose{opacity:1}.mixer-layout.finished-step{opacity:.48;filter:saturate(.55);pointer-events:none}.paper-direct{max-width:680px;margin:0 auto 12px!important;text-align:center;font-size:15px!important;color:var(--ink)!important;font-weight:650}.paper-action-callout{width:fit-content;max-width:92%;margin:12px auto 10px;padding:10px 15px;border-radius:999px;background:#292622;color:#fff;font-size:12px;font-weight:750;box-shadow:0 7px 16px #3224;animation:paperPrompt 1.15s ease-in-out infinite alternate}.paper-action-callout span{margin-right:6px}.paper-canvas{outline:3px solid transparent;outline-offset:5px}.paper-action-callout+canvas{outline-color:#ee4938;animation:paperOutline 1.15s ease-in-out infinite alternate}@keyframes paperPrompt{to{transform:translateY(3px)}}@keyframes paperOutline{to{outline-color:#f3c529}}@media(max-width:700px){.round-cycle{grid-template-columns:1fr;gap:5px}.round-cycle>i{width:3px;height:14px;margin:auto}.cycle-step{min-height:54px}.one-dose-note{max-width:310px}.paint-dose-tray{align-items:stretch}.dose{min-width:66px}.dose mark{padding:3px 5px}}
.mix-canvas.mix-reveal{animation:mixReveal .55s cubic-bezier(.2,1.6,.4,1)}@keyframes mixReveal{0%{transform:scale(.97);filter:saturate(.7)}65%{transform:scale(1.02);filter:saturate(1.18)}100%{transform:none;filter:none}}

/* Card-deck flow: one full action per screen, no repeated vertical scrolling. */
[hidden]{display:none!important}.mix-scene,.practice-scene{justify-content:flex-start;min-height:calc(100dvh - 89px);padding-top:12px;padding-bottom:22px}.mix-scene h2,.practice-scene h2{font-size:clamp(27px,4vw,43px)}.mix-scene .round-cycle{margin-bottom:12px}.mix-scene .mix-guide{margin-bottom:9px;padding:11px 16px}.mix-scene .paint-dose-tray{min-height:75px;margin-bottom:8px}.mix-scene .mix-board.real,.practice-scene .mix-board.real{padding-top:25px;padding-bottom:30px}.mix-scene .mix-canvas.real,.practice-scene .mix-canvas.real{max-height:210px}.mix-scene .drawing-board{margin:4px auto;width:min(900px,100%);padding:28px}.mix-scene .paper-canvas{height:205px}.mix-scene .paintbox-live{margin-top:76px}.mix-scene .paintbox-wells{grid-template-columns:repeat(10,1fr)}.paintbox-wells i span{position:absolute;left:2px;right:2px;bottom:1px;text-align:center;font:800 5px 'Work Sans';letter-spacing:.04em;color:#fff;text-shadow:0 1px 2px #0008}.paintbox-wells i.original-cake{outline:2px solid #fff;outline-offset:-5px}.paintbox-wells i.original-cake span{color:#292622;text-shadow:0 1px #fff}.round-next-actions{margin-top:12px}.practice-progress{margin:0 auto 8px;padding:5px 11px;border-radius:99px;background:#eee3d2;font-size:11px;font-weight:800}.practice-source{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 12px}.practice-source>span{font-size:24px;font-weight:800}.practice-source button{width:145px;min-height:74px;border:1px solid #cfc1ad;border-radius:18px;background:#fffaf1;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:9px;cursor:grab}.practice-source button i{grid-row:1/3;width:42px;height:42px;border-radius:9px;background:var(--c);box-shadow:inset 3px 4px 7px #fff4,inset -3px -4px 7px #3213}.practice-source button b{font-size:12px}.practice-source button small{font-size:7px;letter-spacing:.08em;color:var(--muted)}.practice-source button.taken{border-color:var(--green);background:#eff7ef}.practice-source button.taken small{color:var(--green);font-weight:800}.practice-mixer{width:min(720px,100%)}.final-cake-box{width:min(900px,100%);margin:75px auto 15px;position:relative;padding:18px;border:1px solid #a89b88;border-radius:18px;background:linear-gradient(145deg,#ded8cc,#aaa294 48%,#e8e2d7);box-shadow:0 18px 38px #4324}.final-box-lid{position:absolute;left:7px;right:7px;bottom:calc(100% - 3px);height:75px;border:1px solid #aaa091;border-radius:17px 17px 7px 7px;background:linear-gradient(#f5f1e9,#d6cec0);display:grid;place-items:center;align-content:center;gap:4px;transform:perspective(500px) rotateX(-20deg);transform-origin:bottom}.final-box-lid b{font:700 13px 'Space Grotesk';letter-spacing:.18em}.final-box-lid small{font-size:8px;letter-spacing:.12em;color:var(--muted)}.final-wells{grid-template-columns:repeat(10,1fr)}.compact-box{margin-top:18px;padding:13px}.compact-box .paintbox-wells{grid-template-columns:repeat(10,1fr)}
@media(min-width:900px){.mix-scene{display:grid;grid-template-columns:360px minmax(480px,690px);grid-template-rows:auto auto auto auto auto;column-gap:25px;align-content:start;justify-content:center}.mix-scene>.eyebrow,.mix-scene>h2,.mix-scene>.round-cycle,.mix-scene>.drawing-board,.mix-scene>.paintbox-live,.mix-scene>.round-next-actions,.mix-scene>#mix-end{grid-column:1/-1}.mix-scene>.eyebrow{grid-row:1}.mix-scene>h2{grid-row:2;margin-bottom:6px}.mix-scene>.round-cycle{grid-row:3}.mix-scene>.mix-guide{grid-column:1;grid-row:4;width:100%;grid-template-columns:auto 1fr}.mix-scene>.mix-guide .guide-side{grid-column:1/-1;text-align:center}.mix-scene>.one-dose-note{grid-column:1;grid-row:5;align-self:start}.mix-scene>.paint-dose-tray{grid-column:1;grid-row:6;display:grid;grid-template-columns:repeat(2,1fr);align-items:center}.mix-scene>.mixer-layout{grid-column:2;grid-row:4/7;align-self:start}.mix-scene .mix-board.real{padding:18px 28px 28px}.mix-scene .mix-canvas.real{max-height:175px}.mix-scene>.drawing-board,.mix-scene>.paintbox-live{grid-row:4/7}.mix-scene>.round-next-actions{grid-row:7}}
@media(max-width:760px){.mix-scene,.practice-scene{min-height:auto}.mix-scene .paintbox-wells,.final-wells,.compact-box .paintbox-wells{grid-template-columns:repeat(5,1fr)}.practice-source{gap:7px}.practice-source button{width:128px}.mix-scene .drawing-board{padding:18px 10px}.mix-scene .paper-canvas{height:180px}}