@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
:root{--ink:#2a2032;--paper:#faf7f0;--purple:#6b478a;--orange:#ee9a45;--muted:#716676}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:15px 'DM Sans',sans-serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #cc7b2d;outline-offset:3px}header{background:#251c31;color:#f8f3e9;padding:28px max(24px,calc((100vw - 1360px)/2)) 42px;background-image:radial-gradient(ellipse at 85% 0,#61414c88,transparent 55%)}header img{width:min(390px,85vw);height:auto;display:block;margin-bottom:28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;color:#b58e61}h1{font:600 clamp(32px,4vw,54px)/1.13 'Playfair Display',Georgia,serif;margin:13px 0}h1 em{color:#d5b8eb}header p{color:#cdc1d0;margin-bottom:0}main{max-width:1408px;padding:28px 24px;margin:auto}h2,h3{margin:0}h2{font:600 27px 'Playfair Display',Georgia,serif}.sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.sectionhead span{font-size:12px;color:var(--muted)}#scenes{display:flex;gap:12px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x proximity}.scene{flex:0 0 138px;border:1px solid #dfd4e0;background:#fff;border-radius:12px;overflow:hidden;text-align:left;padding:0;scroll-snap-align:start;transition:transform .2s}.scene:hover{transform:translateY(-3px)}.scene.active{box-shadow:0 0 0 2px var(--purple)}.scene img{display:block;width:100%;height:150px;object-fit:cover;object-position:50% 33%}.scene b{display:block;padding:10px;font-size:12px;line-height:1.4}.scene small{color:var(--purple);font-weight:700}#studio{margin-top:32px}.studiohead{display:flex;justify-content:space-between;align-items:center;gap:16px}.studiohead h2{margin-top:7px}.quiet{border:0;background:transparent;color:var(--purple);font-size:12px}.outcomes{display:flex;gap:7px;margin:22px 0}.outcomes button{padding:11px 18px;border:1px solid #d8cddd;border-radius:30px;background:white;font-size:13px}.outcomes button.active{background:var(--ink);color:white;border-color:var(--ink)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}.artcolumn{min-width:0;background:#eee8ef;border:1px solid #ddd1df;border-radius:16px;overflow:hidden}.artbar{display:flex;align-items:center;gap:9px;padding:12px 15px;background:#fff}#status{margin-right:auto;font-size:12px}.artbar button{background:#f4eef6;border:1px solid #dfd2e4;border-radius:50%;width:28px;height:28px}#zoomLabel{font-size:11px}#viewport{overflow:auto;max-height:1100px;padding:16px}#paper{position:relative;width:100%;margin:auto;box-shadow:0 5px 25px #2a203220;background:white}canvas{display:block;width:100%;height:auto}#numbers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.marker{pointer-events:all;cursor:pointer}.marker text{font-family:Arial,sans-serif;font-size:9px;fill:#635a64;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}.marker.selected circle{fill:#fff0b5;stroke:#c47913;stroke-width:1.2;filter:drop-shadow(0 0 3px #ffbe2f)}.marker.selected text{font-size:11px;font-weight:bold;fill:#35260c;stroke-width:2px}.marker circle{fill:white;fill-opacity:.84;stroke:none}.marker.done{display:none}.progress{height:5px;background:#ddd2e3}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8c5aa1,#e6aa58)}.artfoot{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:10px 14px;background:white}aside{background:white;border:1px solid #e4d9e5;border-radius:16px;padding:20px;position:sticky;top:15px}.palettehead{display:flex;align-items:center;justify-content:space-between}.palettehead h3{font:600 21px 'Playfair Display',Georgia}.hint{font-size:12px;color:var(--muted);line-height:1.65;margin:14px 0}#palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatch{border:2px solid transparent;border-radius:10px;background:#f8f5f9;padding:5px 2px;color:var(--ink);font-size:10px}.swatch i{display:block;width:27px;height:27px;margin:0 auto 4px;border-radius:50%;border:1px solid #0002}.swatch.active{border-color:var(--purple);background:#f0e6f5;box-shadow:0 0 0 1px #fff inset}.swatch.complete{opacity:.42}.detail{background:#faf5eb;border-radius:10px;padding:12px;margin:18px 0;font-size:11px;line-height:1.6}.detail p{margin:5px 0 0;color:var(--muted)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button,.actions a{border:1px solid #ddd0e1;border-radius:8px;padding:10px 5px;background:white;color:var(--purple);text-align:center;text-decoration:none;font-size:11px}.actions a{grid-column:1/-1;background:#f7f2f9}.notes{font-size:12px;color:var(--muted);line-height:1.7;margin-top:20px;max-width:900px}.notes summary{cursor:pointer}footer{text-align:center;padding:35px;font-size:12px;color:var(--muted)}dialog{border:1px solid #dfd3e4;border-radius:16px;padding:25px;max-width:90vw}dialog::backdrop{background:#251c3177}dialog button{padding:10px;border:1px solid #d6c4df;border-radius:7px;background:white;margin-right:7px}@media(max-width:850px){.workspace{grid-template-columns:1fr}aside{position:static}#palette{grid-template-columns:repeat(11,1fr);gap:4px}.swatch i{width:23px;height:23px}.workspace{gap:12px}aside{grid-row:1;padding:14px}.detail,.hint{margin:8px 0}.detail{display:none}.actions{margin-top:12px;grid-template-columns:repeat(4,1fr)}.actions a{grid-column:auto}.sectionhead{align-items:start;gap:10px}.sectionhead span{max-width:100px}main{padding:22px 12px}#viewport{padding:5px}.outcomes button{padding:10px 12px;font-size:12px}.artbar{padding:10px}.actions a{font-size:10px}.scene{flex-basis:115px}.scene img{height:125px}}@media print{body>*{display:none!important}}
/* Expanded, zoomable coloring workspace */
.artbar{flex-wrap:wrap}.artbar #status{flex:1 1 230px}.artbar button{min-width:40px;min-height:40px}.zoomtools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid #eee6f0}.zoomtools button{border:1px solid #d8c9df;background:#f8f2fb;color:#593477;border-radius:8px;padding:10px 12px;min-height:42px;font:600 12px 'DM Sans',sans-serif}.zoomtools #expandArt{background:#62417e;color:white}.zoomtools button[aria-pressed=true]{background:#eddfbf;border-color:#bb9254;color:#392b15}.zoomrange{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b5b74;flex:1 1 140px}.zoomrange input{min-width:90px;max-width:220px;width:100%;accent-color:#70478e}.zoomhelp{margin:0;padding:0 14px 10px;background:white;color:#716676;font-size:11px;line-height:1.5}#viewport{touch-action:none;overscroll-behavior:contain;position:relative;max-height:75vh}#paper{margin:0;flex-shrink:0}#viewport.enlarged,#viewport.move-mode{cursor:grab}#viewport.dragging{cursor:grabbing}#viewport.move-mode .marker{cursor:grab}.workspace.expanded{position:fixed;inset:0;z-index:1000;background:#faf7f0;padding:12px;gap:12px;grid-template-columns:minmax(0,1fr) 290px;height:100dvh;height:100vh;height:100dvh;overflow:hidden}.workspace.expanded .artcolumn{display:flex;flex-direction:column;height:100%;min-height:0}.workspace.expanded #viewport{flex:1 1 auto;min-height:0;max-height:none}.workspace.expanded aside{position:static;max-height:100%;overflow:auto}.workspace.expanded .artfoot{flex-shrink:0}.workspace.expanded .progress{flex-shrink:0}.workspace.expanded #status{min-width:0}.coloring-expanded header,.coloring-expanded .library,.coloring-expanded .studiohead,.coloring-expanded .outcomes,.coloring-expanded .notes,.coloring-expanded footer{visibility:hidden}.artbar button:disabled{opacity:.35;cursor:default}
@media(max-width:850px){.workspace.expanded{display:flex;flex-direction:column;padding:5px;gap:5px}.workspace.expanded .artcolumn{order:0;flex:1 1 auto;min-height:0;width:100%}.workspace.expanded aside{order:1;width:100%;max-height:29dvh;flex:0 0 auto;padding:8px 10px}.workspace.expanded aside .hint,.workspace.expanded aside .actions,.workspace.expanded .detail{display:none}.workspace.expanded .palettehead{margin-bottom:5px}.workspace.expanded .palettehead h3{font-size:15px}.workspace.expanded #palette{grid-template-columns:repeat(11,minmax(0,1fr));gap:2px}.workspace.expanded .swatch{padding:2px 0;font-size:9px}.workspace.expanded .swatch i{width:17px;height:17px;margin-bottom:1px}.workspace.expanded .artbar{padding:5px 9px;gap:5px}.workspace.expanded .artbar #status{flex-basis:175px;font-size:10px}.zoomtools{padding:7px;gap:5px}.zoomtools button{padding:8px;font-size:11px}.zoomrange{flex-basis:115px}.zoomhelp{font-size:10px;padding:0 8px 6px}.workspace.expanded .artfoot{font-size:9px;padding:6px}.workspace.expanded #viewport{padding:5px}}

/* Every unfilled region has a high-contrast number, including tiny details. */
.marker circle{fill:#fff;fill-opacity:1;stroke:#777;stroke-width:.5}
.marker text{font-size:12px;font-weight:700;fill:#17121b;stroke:#fff;stroke-width:2px}
.marker.selected text{font-size:14px;fill:#211600;stroke-width:2px}
.marker.selected circle{fill:#fff0a3;stroke:#9b5900;stroke-width:1.5}
.marker:focus{outline:none}.marker:focus circle{stroke:#602b97;stroke-width:3}

[hidden]{display:none!important}header{padding-top:22px;padding-bottom:30px}header img{width:220px;margin-bottom:20px}header h1{font-size:clamp(35px,5vw,62px)}.start-link,.claim{display:inline-block;background:#e9b4d1;color:#251c31;font-weight:700;padding:15px 23px;border-radius:50px;text-decoration:none;margin-top:20px}.no-email{display:inline-block;margin:14px;color:#d7c8dc;font-size:12px}#studio{margin-top:0}.studiohead{margin-bottom:18px}.sample-cta{margin:32px 0 12px;border-radius:22px;background:#291e33;color:#fff;padding:30px;display:grid;grid-template-columns:1fr 180px;gap:25px;align-items:center}.sample-cta h2{margin:12px 0;color:#edd4ef}.sample-cta p{line-height:1.7;color:#ded0e4;max-width:600px}.sample-cta img{width:100%;border-radius:12px}.sample-cta small{display:block;margin-top:13px;line-height:1.5;color:#ccbbd5}.sample-cta.ready{box-shadow:0 0 0 3px #d3a65c}.steps{font-size:13px;margin-bottom:15px;line-height:2}.steps b{background:#6b478a;color:#fff;padding:3px 8px;border-radius:20px}.steps span{margin:0 6px}.sample-nudge{display:block;padding:14px;text-align:center;background:#f0dced;color:#4b285d;font-weight:bold;text-decoration:none}.claim:focus-visible,.start-link:focus-visible{outline:3px solid white}#sample-title{scroll-margin-top:24px}@media(max-width:800px){main{padding:18px 12px}.workspace{display:flex;flex-direction:column}.workspace aside{order:-1;width:100%;position:sticky;top:0;z-index:10;background:#faf7f0;padding:10px 5px;border-radius:0}.workspace .artcolumn{width:100%}.steps{margin-bottom:3px}.palettehead{display:flex;align-items:center;justify-content:space-between}.hint{margin:5px 0;font-size:12px}#palette{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:8px 3px}.swatch{flex:0 0 46px;min-height:48px}.detail{display:none}.actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.actions button{font-size:11px;padding:7px}header{padding:20px 20px 26px}header img{width:190px}header p{font-size:14px}.no-email{margin-left:5px}.sample-cta{grid-template-columns:1fr;padding:24px}.sample-cta img{display:none}.claim{font-size:14px;line-height:1.5}.workspace.expanded aside{position:static}.zoomtools{flex-wrap:wrap}.zoomhelp{font-size:11px}}
.choice-links{display:flex;gap:14px;flex-wrap:wrap}.choice-links .claim{min-width:135px;text-align:center;font-size:20px}.trick-choice{background:#efb467}.treat-choice{background:#d7b8ed}#choiceDialog{width:min(540px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:1px solid #d5bbdf;border-radius:22px;padding:30px;background:#291e33;color:#f9f2fc}#choiceDialog::backdrop{background:#160d20ba}#choiceDialog h2{margin:15px 0;line-height:1.35;color:#efd6f3}#choiceDialog p{line-height:1.65;color:#ded0e4}#choiceDialog #closeChoice{display:block;margin-top:24px;background:transparent;color:#e8d7ef;border:1px solid #aa8bb9;padding:12px 16px;border-radius:30px}#choiceDialog a:focus-visible,#choiceDialog button:focus-visible{outline:3px solid white;outline-offset:3px}@media(max-width:450px){#choiceDialog{padding:23px}.choice-links .claim{flex:1;min-width:110px}}