*{box-sizing:border-box}body{margin:0;background:#fffdf9;color:#332c31;font-family:ui-rounded,"Avenir Next",system-ui,sans-serif}.wrap{max-width:1100px;margin:auto;padding:24px}.nav,.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font-size:25px;font-weight:900}.muted{color:#786e73}.hero{text-align:center;padding:65px 0 25px}.hero h1{font-size:clamp(44px,8vw,80px);line-height:.96;margin:0 0 18px}.hero p{font-size:19px;color:#786e73}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:25px 0 55px}.card{padding:20px;background:white;border:1px solid #e8dfd8;border-radius:24px;cursor:pointer}.thumb{height:180px;background:#f7f0e8;border-radius:18px;display:grid;place-items:center;font-size:70px}.bar{height:7px;background:#eee7e1;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:#76506a}.player{display:none}.player.on{display:block}.library.off{display:none}.game{display:grid;grid-template-columns:1fr 230px;gap:20px;margin-top:18px}.viewport{height:min(74vh,850px);overflow:hidden;border:1px solid #e8dfd8;border-radius:24px;background:white;position:relative;touch-action:none}.stage{position:absolute;width:720px;height:900px;transform-origin:0 0}.stage span{position:absolute;transform:translate(-50%,-50%);font:bold 7px Arial;user-select:none}.stage span.done{font-size:0;border-radius:50%}.stage.focus span:not(.target):not(.done){color:#ddd!important}.side{background:#f7f0e8;padding:16px;border-radius:24px;height:max-content}.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.swatch{height:48px;border:2px solid transparent;border-radius:14px;font-weight:900}.swatch.active{border-color:#222}.swatch.complete:after{content:" ✓"}.btn{border:0;border-radius:999px;padding:11px 15px;background:#332c31;color:white;cursor:pointer}.light{background:#eee5eb;color:#332c31}.tools{display:grid;gap:8px;margin-top:14px}.stat{font-size:13px;color:#786e73;margin:8px 0}.hint{animation:p .5s 3}@keyframes p{50%{transform:translate(-50%,-50%) scale(2.3)}}footer{text-align:center;color:#91858b;font-size:12px;padding:25px}a{color:inherit}@media(max-width:760px){.wrap{padding:14px}.cards{grid-template-columns:1fr}.game{grid-template-columns:1fr}.side{order:-1}.palette{grid-template-columns:repeat(4,1fr)}.viewport{height:62vh}.thumb{height:130px}.hero{padding-top:40px}}
.stage span{cursor:pointer}.stage.focus span:not(.target):not(.done){opacity:.22}.stage.focus span.target{opacity:1;color:#211c1f!important}

.viewport{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* External Test #1: real finished-dot previews + completion moment. */
.thumb{padding:10px;overflow:hidden}.thumb canvas{display:block;width:100%;height:100%;object-fit:contain}.card h3{margin-bottom:6px}.card .muted{min-height:38px}.complete-modal{position:fixed;inset:0;background:rgba(51,44,49,.48);display:none;place-items:center;padding:20px;z-index:50}.complete-modal.on{display:grid}.complete-card{width:min(440px,100%);background:#fffdf9;border-radius:28px;padding:24px;text-align:center;box-shadow:0 24px 70px rgba(51,44,49,.25)}.complete-art{height:230px;background:#f7f0e8;border-radius:20px;padding:12px;margin-bottom:16px}.complete-art canvas{width:100%;height:100%;object-fit:contain}.complete-kicker{font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#76506a}.complete-card h2{font-size:30px;margin:5px 0 8px}.complete-card p{color:#786e73}.complete-actions{display:grid;gap:9px;margin-top:18px}.more-thanks{display:none;margin-top:12px;font-weight:800;color:#76506a}.more-thanks.on{display:block}@media(max-width:760px){.card .muted{min-height:0}.complete-art{height:200px}}

/* Calm by Design surface rebrand only — player/gesture mechanics unchanged. */
.product-line{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#76506a;margin-top:1px}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#76506a;margin-bottom:12px}

/* Commercial Preview 2: brand-first hero hierarchy only. */
.hero{padding:44px 0 18px}
.hero .eyebrow{font-size:11px;margin-bottom:8px}
.hero h1{font-size:clamp(28px,4.8vw,48px);line-height:1.03;margin:0 0 10px;font-weight:850}
.hero p{font-size:15px;margin:0 auto;color:#786e73;max-width:480px}
@media(max-width:760px){.hero{padding:28px 0 12px}.hero h1{font-size:clamp(27px,9vw,38px)}.hero p{font-size:14px}}

/* Commercial Preview 3: restrained hierarchy — brand > product > description. */
.hero{padding:34px 0 16px}
.hero .eyebrow{font-size:22px;line-height:1.05;margin:0 0 10px;font-weight:900;letter-spacing:.055em;color:#332c31}
.hero h1{font-size:17px;line-height:1.2;margin:0 0 6px;font-weight:800}
.hero p{font-size:13px;line-height:1.4;margin:0 auto;color:#786e73;max-width:430px}
@media(max-width:760px){.hero{padding:24px 0 10px}.hero .eyebrow{font-size:20px}.hero h1{font-size:16px}.hero p{font-size:13px}}

/* Commercial Preview 4: product-forward hierarchy + purple description. */
.hero{padding:34px 0 16px}
.hero .eyebrow{font-size:30px;line-height:1;margin:0 0 10px;font-weight:900;letter-spacing:.055em;color:#332c31}
.hero h1{font-size:17px;line-height:1.2;margin:0 0 6px;font-weight:800;color:#76506a}
.hero p{font-size:13px;line-height:1.4;margin:0 auto;color:#786e73;max-width:430px}
@media(max-width:760px){.hero{padding:24px 0 10px}.hero .eyebrow{font-size:27px}.hero h1{font-size:16px}.hero p{font-size:13px}}

/* Paid MVP 1 — commercial shell only; puzzle player mechanics unchanged. */
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-title-row h3{margin-right:auto}.free-badge,.lock-badge{font-size:10px;font-weight:900;letter-spacing:.08em;padding:5px 8px;border-radius:999px;background:#eee5eb;color:#76506a;white-space:nowrap}.locked .thumb{filter:saturate(.72);opacity:.78}.locked{position:relative}.offer{margin:0 0 36px;padding:22px 24px;border-radius:24px;background:#f7f0e8;display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center}.offer-kicker{font-size:11px;font-weight:900;letter-spacing:.14em;color:#76506a}.offer h2{margin:4px 0 5px;font-size:22px}.offer p{margin:0;color:#786e73;font-size:14px;max-width:650px}.buy-btn{font-weight:850;padding:13px 18px}.checkout-note{grid-column:1/-1;font-size:12px;color:#76506a;display:none}.checkout-note.on{display:block}.paywall-card h2{margin-bottom:6px}.paywall-card .more-thanks.on{display:block}@media(max-width:760px){.offer{grid-template-columns:1fr}.buy-btn{width:100%}}
.buy-btn.purchased,.buy-btn:disabled{background:#ded9dc;color:#766f73;cursor:default;box-shadow:none;opacity:1}
.offer.purchased{background:#f3f0f1}

/* Purchase recovery UI only. */
.restore-link{grid-column:1/-1;justify-self:start;border:0;background:transparent;padding:2px 0;color:#76506a;text-decoration:underline;cursor:pointer;font:inherit;font-size:12px}.restore-input{width:100%;margin-top:10px;padding:13px 14px;border:1px solid #d9ced4;border-radius:14px;background:white;color:#332c31;font:inherit;font-size:16px}.restore-note{min-height:20px;margin-top:12px;font-size:13px;color:#76506a}.offer.purchased .restore-link{display:none}

/* Prevent browser double-tap zoom while preserving normal one-finger page scrolling and pinch zoom outside the puzzle. */
html,body{touch-action:manipulation}
.viewport{touch-action:none}

.feedback-close{margin-top:14px;border:0;background:transparent;color:#786e73;text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}.feedback-choice:disabled{opacity:.55;cursor:default}.feedback-choice.chosen{opacity:1}.feedback-actions.answered .feedback-choice:not(.chosen){opacity:.38}