@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Patrick+Hand&display=swap');
:root{--paper:#fffaf3;--ink:#292727;--muted:#7a7573;--accent:#009b72;--line:#ede5db;--hand:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:#f6f0e8;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;background-image:radial-gradient(ellipse at 20% 35%,#d1fae588,transparent 46%),radial-gradient(ellipse at 90% 70%,#fff0d7,transparent 45%);min-height:100dvh}.brand{max-width:1120px;margin:30px auto;display:flex;align-items:center;gap:10px;font-weight:700;font-size:25px;padding:0 24px}.brandmark{background:var(--accent);color:white;width:32px;height:32px;text-align:center;border-radius:11px;font-family:var(--hand)}.brandnote{font-size:13px;font-weight:400;color:var(--muted);margin-left:auto}main{max-width:980px;margin:40px auto 20px;min-height:640px;display:flex;justify-content:center;align-items:center;gap:100px;padding:0 24px}.intro{width:360px}.eyebrow{font-size:13px;letter-spacing:2px;font-weight:600;color:#087f74;text-transform:uppercase}.intro h1{font-family:var(--hand);font-size:68px;line-height:1.03;font-weight:400;margin:20px 0}.intro p{font-size:16px;line-height:1.8;color:var(--muted)}.tiny-note{display:flex;gap:10px;align-items:center;margin-top:30px;font-size:13px;color:#8f8580}.tiny-note i{width:7px;height:7px;background:#a2b787;border-radius:50%}.phone{width:370px;min-height:660px;background:var(--paper);border:1px solid #fff;border-radius:36px;box-shadow:0 20px 60px #064e3b12,0 2px 10px #064e3b10;overflow:hidden;padding:24px;position:relative;display:flex;flex-direction:column;flex-shrink:0}.top{height:25px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.wordmark{font-family:var(--hand);font-size:24px}.back{background:none;border:0;font-size:27px;width:32px;height:34px;cursor:pointer;padding:0;color:var(--ink)}.dots{display:flex;gap:7px}.dots i{width:7px;height:7px;border-radius:50%;background:#e9e2dd}.dots i.on{background:var(--accent)}.count{font-size:13px;color:var(--muted)}h2,h3{font-family:var(--hand);font-weight:400;margin:12px 0}h2{font-size:29px;line-height:1.2}h3{font-size:23px}p{font-size:13px;line-height:1.7;color:#706a67;margin:8px 0 18px}.home{text-align:center}.home h2{font-size:55px;line-height:.97;margin-top:20px}.home p{font-size:14px;margin-top:22px}.hero-art{height:228px;margin:0 -8px;position:relative;display:flex;align-items:flex-end;justify-content:center}.hero-art svg{width:100%;height:100%}.hand-note{position:absolute;right:9px;top:37px;font-family:var(--hand);font-size:15px;text-align:left;transform:rotate(-7deg)}button,input,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #5eeac2;outline-offset:3px}.primary,.secondary{width:100%;border-radius:22px;padding:17px 14px;border:0;min-height:54px;font-size:14px;transition:transform .15s,background .15s}.primary{background:linear-gradient(115deg,#009b72,#009b91);color:white;box-shadow:0 5px 16px #009b7225}.primary:hover{transform:translateY(-2px);background:#008569}.secondary{border:1px solid var(--line);background:transparent;color:var(--ink);margin-top:10px;padding:13px;min-height:44px;font-size:13px}.bottom{margin-top:auto;padding-top:20px}.privacy{font-size:13px;color:#99908b;text-align:center;margin:12px 0 0}.image{width:100%;height:190px;border-radius:18px;object-fit:cover;background:#efe8df}.image.small{height:110px}.placeholder{height:150px;background:#eee6d9;border:1px dashed #c9bfb1;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#8d8276;font-size:13px}.photo-wrap{position:relative}.change{position:absolute;right:8px;bottom:10px;border:0;border-radius:20px;padding:7px 11px;background:#292727bb;color:white;font-size:13px}.goals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.goal{border:1px solid transparent;background:#f3ece3;border-radius:19px;min-height:102px;padding:12px 8px;color:var(--ink);font-size:13px;line-height:1.5}.goal.active{border:2px solid var(--accent);background:#d1fae5}.goal span{font-size:26px;display:block;margin-bottom:8px}.plan{list-style:none;padding:0;margin:15px 0}.plan li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:20px;padding:9px 12px;margin:7px 0;font-size:13px}.plan li:first-child{background:#def8ed;border-color:transparent}.number{border:1px solid #c9bfb8;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;flex-shrink:0;color:#817873}.plan li:first-child .number{background:var(--accent);color:white;border-color:var(--accent)}.mini-milo{height:115px;text-align:right}.mini-milo svg{width:120px;height:120px}.taskcard{background:#fffcf8;border-radius:20px;padding:18px;margin-top:14px}.taskcard h3{margin:4px 0 10px}.label{font-size:13px;color:#827b76}.time{font-size:13px;color:#7e7670;display:flex;gap:7px;align-items:center;margin:8px 0 0}.companionship{background:linear-gradient(180deg,#e4cbaa,#f3dfbf);height:240px;border-radius:19px;position:relative;overflow:hidden}.companionship svg{width:100%;height:100%}.bubble{position:absolute;right:12px;top:15px;background:#fffaf3;border-radius:22px;padding:12px 16px;font-size:13px;line-height:1.5;text-align:center;box-shadow:0 5px 15px #8b6d3312}.taskrow{display:flex;gap:12px;align-items:center}.taskrow .icon{width:55px;height:64px;background:#f0e5da;border-radius:12px;display:grid;place-items:center;font-size:29px}.taskrow>div:last-child{flex:1}.row{display:flex;gap:8px}.row .secondary{width:40%;margin:0}.row .primary{width:60%}.celebration{text-align:center}.celebration h2{font-size:58px;margin-top:30px}.celebration h3{margin-top:0}.party{height:260px;position:relative;margin:15px 0}.party svg{width:100%;height:100%}.confetti{position:absolute;width:7px;height:13px;border-radius:3px;animation:float 2.5s infinite ease-in-out}.checklist{list-style:none;margin:24px 0;padding:0}.checklist li{font-size:13px;margin:15px 0;display:flex;align-items:center;gap:10px}.tick{background:#7faf72;border-radius:50%;color:white;width:21px;height:21px;display:grid;place-items:center}.end{text-align:center}.end h2{font-size:43px}.end-art{height:300px;position:relative;display:grid;place-items:center}.end-art svg{width:260px;height:260px}.moon{position:absolute;right:48px;top:32px;font-size:42px;color:#efd28a}.text-input{width:100%;border:1px solid var(--line);background:#fffcf9;border-radius:16px;padding:14px;color:var(--ink);resize:vertical;line-height:1.6;min-height:140px;margin:14px 0}.help{font-size:13px;color:#918982}.timer{font-family:var(--hand);font-size:35px;text-align:center;margin:18px 0 8px;color:#008e7d}.breathe{animation:breathe 4s ease-in-out infinite}.message{background:#e5faf2;border-radius:16px;padding:15px;text-align:center;font-size:13px;line-height:1.7;margin:14px 0}.progress-track{height:4px;border-radius:5px;background:#eee6dd;margin-top:17px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--accent)}footer{text-align:center;font-size:13px;color:#a29990;padding:20px}.screen{animation:enter .3s ease-out;display:flex;flex-direction:column;flex:1}.language{background:none;border:0;color:#918982;font-size:13px;padding:5px}.recap-count{font-family:var(--hand);font-size:36px;color:#008e7d;text-align:center;padding:15px;background:#e5faf2;border-radius:18px}.edit{border:none;background:transparent;font-size:13px;color:#008e7d;text-decoration:underline;padding:5px 0}.photo-info{background:#f3ece3;border-radius:15px;padding:10px;font-size:13px;color:#84796f;line-height:1.6;margin-top:10px}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{transform:scale(1.025)}}@keyframes float{50%{transform:translateY(-10px) rotate(15deg)}}@media(max-width:760px){.brand{margin:17px auto;max-width:430px}.brandnote{font-size:13px}main{margin:12px auto 0;padding:0 12px;min-height:0}.intro{display:none}.phone{width:min(100%,390px);min-height:690px;border-radius:30px;padding:24px}footer{padding:16px}.home h2{margin-top:24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The app is the page; no showcase wrapper. */
body{background:var(--paper);background-image:none}
main{display:block;width:100%;max-width:none;margin:0;padding:0;min-height:100dvh}
.phone{width:100%;max-width:440px;min-height:100dvh;margin:0 auto;padding:24px;border:0;border-radius:0;box-shadow:none;overflow:visible;background:var(--paper)}
.screen{min-height:calc(100dvh - 48px)}
.home h2{margin-top:40px}
.home .hero-art{max-width:330px;width:100%;margin:0 auto}
.bottom{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(min-width:761px){.phone{padding:32px;max-width:440px}.screen{min-height:calc(100dvh - 64px)}.home h2{margin-top:40px}}

/* Plan screen: match the supplied layout. */
.phone.plan-view{padding:25px 41px 13px;background:#fffaf3;min-height:max(100dvh,834px)}
.plan-view .screen{min-height:max(calc(100dvh - 38px),796px);animation:none}
.plan-view .top{height:24px;margin:0;position:relative}
.plan-view .back{font-size:26px;font-weight:700;height:24px;width:28px;padding:0;line-height:22px;text-align:center}
.plan-view .dots{position:absolute;left:54%;transform:translateX(-50%);gap:7px}
.plan-view .dots i{width:7px;height:7px;background:#e8e1dc}
.plan-view .dots i.on{background:#009b72}
.plan-hero{height:126px;position:relative;flex-shrink:0}
.plan-duration{position:absolute;left:0;bottom:10px;display:flex;align-items:center;gap:9px;color:#009b80;font-size:20px;line-height:1;font-weight:700}
.plan-duration svg{width:20px;height:23px;overflow:visible}
.plan-milo{position:absolute;right:0;bottom:0;width:110px;height:112px}
.plan-milo svg{width:100%;height:100%;display:block}
.plan-view h2{font-family:var(--hand);font-size:25px;line-height:1.35;margin:9px 0 21px;font-weight:400;color:#282727}
.plan-view .plan-copy{font-size:13px;line-height:1.7;color:#827d77;margin:0 0 39px}
.plan-view .plan{padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.plan-view .plan li{height:41px;min-height:41px;margin:0;border-radius:24px;border:1px solid #eee6dc;gap:11px;padding:7px 11px;font-size:13px;line-height:1.4;color:#282727;background:transparent}
.plan-view .plan li:first-child{background:#def8ed;border-color:#def8ed}
.plan-view .number{height:24px;width:24px;flex:0 0 24px;background:#fffaf3;border:1px solid #d2cac1;color:#8b837a;font-size:13px}
.plan-view .plan li:first-child .number{background:#009b72;border:0;color:#fff}
.plan-view .bottom{margin-top:auto;padding-top:32px;margin-left:-15px;margin-right:-15px;padding-bottom:env(safe-area-inset-bottom,0px)}
.plan-view .primary{height:77px;min-height:77px;border-radius:14px;background:#009b72;box-shadow:none;font-size:17px;font-weight:500;color:white;padding:18px}
@media(max-width:440px){.phone.plan-view{padding-left:9.45vw;padding-right:9.45vw;min-height:max(100dvh,189.5vw)}.plan-view .screen{min-height:max(calc(100dvh - 38px),calc(189.5vw - 38px))}.plan-view .plan li{font-size:clamp(13px,2.95vw,14px)}.plan-view .plan-copy{font-size:clamp(13px,2.95vw,14px)}}

/* Emerald start countdown. */
body:has(.countdown-view){background:#252938}
.phone.countdown-view{max-width:none;min-height:100dvh;padding:24px;background:radial-gradient(ellipse at 50% 38%,#073c37 0%,#252938 65%);color:#fff}
.countdown-view .screen{min-height:calc(100dvh - 48px);animation:none;display:grid;place-items:center}
.countdown-content{width:100%;max-width:500px;text-align:center;padding:24px 0 70px}
.countdown-circle{display:grid;place-items:center;width:170px;height:170px;margin:0 auto 42px;border:6px solid #009b72;border-radius:50%;background:#009b721a;box-shadow:0 16px 65px #009b7219;color:#6ee7b7;font-family:'DM Sans',system-ui,sans-serif;font-size:83px;line-height:1;font-weight:700;animation:countdown-pop .3s ease-out}
.countdown-view h2{font-family:'DM Sans',system-ui,sans-serif;font-size:29px;font-weight:700;line-height:1.3;margin:0 0 18px;color:#fff}
.countdown-view p{font-size:17px;line-height:1.6;color:#a7f3d0;margin:0 auto 35px;max-width:450px}
.skip-countdown{border:0;background:none;color:#a4a8bc;text-decoration:underline;text-underline-offset:6px;font-size:16px;padding:12px}
.skip-countdown:hover{color:#d1fae5}
@keyframes countdown-pop{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.countdown-circle{animation:none}}

/* Active task with a shrinking, two-minute timer ring. */
body:has(.focus-view){background:#fff}
.phone.focus-view{background:#fff;max-width:540px;padding:0 32px 28px;min-height:100dvh;color:#1e293b}
.focus-view .screen{min-height:100dvh;animation:none}
.focus-view .top{height:61px;flex-shrink:0;margin:0 -32px 56px;padding:0 32px;background:#fffaf3;position:relative}
.focus-view .dots{position:absolute;left:50%;transform:translateX(-50%)}
.focus-view .count{color:#827c77;font-size:13px;font-weight:600}
.focus-task{text-align:center}
.target-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border:1px solid #99f6e4;border-radius:50px;background:#ccfbf1;color:#115e59;font-weight:700;font-size:13px;letter-spacing:.7px}
.focus-view h2{font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:27px;line-height:1.2;margin:19px 0 13px;color:#172033;letter-spacing:-.8px}
.focus-instruction{font-size:14px;line-height:1.65;max-width:430px;margin:0 auto;color:#516077}
.timer-ring{position:relative;width:min(100%,276px);aspect-ratio:1;margin:82px auto 22px;border-radius:50%;background:#f7f9fa;box-shadow:inset 0 4px 12px #1e293b08}
.timer-ring>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.ring-track,.ring-progress{fill:none;stroke-width:11}
.ring-track{stroke:#ecfdf5}
.ring-progress{stroke:#009b72;stroke-linecap:butt;transition:stroke-dashoffset .1s linear}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.focus-time{font-family:'DM Sans',system-ui,sans-serif;font-size:66px;line-height:1.1;font-weight:700;letter-spacing:-2px;font-variant-numeric:tabular-nums;color:#1e293b}
.timer-caption{font-size:17px;font-weight:600;color:#94a3b8}
.pause-timer{border:0;background:#f1f5f9;border-radius:18px;padding:12px 22px;font-size:16px;font-weight:700;color:#42516a}
.focus-bottom{border-top:1px solid #edf1f5;padding-top:15px;margin-top:auto;padding-bottom:35px}
.focus-bottom .primary{border-radius:16px;background:#009b72;height:52px;min-height:52px;font-size:16px;font-weight:700;box-shadow:0 12px 25px #009b7230}
.focus-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.focus-links button{background:none;border:0;padding:4px 0;font-size:13px;font-weight:600;color:#0f8a7e;text-align:left}
.focus-links button:last-child{color:#77859d;text-decoration:underline;text-underline-offset:4px;text-align:right}
.focus-message{background:#ecfdf5;border-radius:16px;padding:18px;text-align:center;font-size:13px;line-height:1.7;color:#0f766e;margin-top:20px}
@media(max-width:440px){.phone.focus-view{padding-left:24px;padding-right:24px}.focus-view .top{margin-left:-24px;margin-right:-24px;padding:0 24px;margin-bottom:48px}.focus-view h2{font-size:24px}.focus-instruction{font-size:13px}.timer-ring{width:245px;margin-top:60px}.focus-time{font-size:60px}.timer-caption{font-size:15px}.focus-bottom{margin-top:70px}}
@media(min-width:441px){.focus-view .screen{min-height:max(100dvh,980px)}}

/* Grounding & Calm Corner */
body:has(.calm-dialog[open]){overflow:hidden}
.calm-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:28px 32px;border:1px solid #b3f4e4;border-radius:32px;background:linear-gradient(#e9f8f3,#fff);color:#334155;box-shadow:0 25px 90px #17203333;font-family:'DM Sans',system-ui,sans-serif;overflow:auto}
.calm-dialog::backdrop{background:#17203380;backdrop-filter:blur(5px)}
.calm-header{display:flex;gap:16px;align-items:center;border-bottom:1px solid #c4f5e8;padding-bottom:24px;position:relative}
.calm-heart{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;border-radius:18px;background:#ccfbf1;color:#009b91;font-size:40px;line-height:1}
.calm-header h2{font-family:inherit;font-size:24px;font-weight:700;color:#1e293b;margin:0 34px 7px 0;line-height:1.3}
.calm-header p{font-size:15px;color:#0f766e;margin:0;line-height:1.5}
.calm-close{position:absolute;right:0;top:6px;color:#94a3b8;background:none;border:0;font-size:32px;padding:0 6px}
.calm-tabs{display:flex;gap:5px;background:#ddf8f1;border-radius:18px;padding:6px;margin-top:24px;max-width:555px}
.calm-tabs button{flex:1;border:0;border-radius:14px;padding:18px 8px;color:#0f766e;font-weight:700;font-size:15px;background:transparent;white-space:nowrap}
.calm-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 3px 8px #0f766e10}
.calm-panel{min-height:350px;padding:26px 0}
.breath-exercise{text-align:center}
.breath-space{height:220px;display:grid;place-items:center}
.breath-orb{width:170px;height:170px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;gap:10px;background:#ccfbf1;color:#0f766e;transition:transform .2s linear;transform:scale(.76)}
.breath-orb strong{font-size:25px;font-weight:700;letter-spacing:.5px}
.breath-orb span{font-size:31px;font-weight:700}
.breath-exercise p{font-size:16px;color:#7c8b9f;margin:16px 0}
.chime-button{border:1px solid #99f6e4;border-radius:30px;padding:12px 20px;background:#f0fdfa;color:#0f766e;font-weight:600;font-size:15px}
.room-anchors>p{font-size:16px;margin:9px 0 20px;color:#52637b;font-weight:500}
.calm-card{background:#fff;border:1px solid #ccfbf1;border-radius:23px;padding:20px 17px;display:flex;align-items:center;gap:16px;margin:0 0 16px;font-size:16px;line-height:1.5;box-shadow:0 2px 5px #064e3b08}
.calm-card>span{font-size:21px;color:#009b91;font-weight:700;flex-shrink:0;min-width:17px}
.sense-list .calm-card{padding:16px 17px;margin-bottom:12px}
.calm-footer{border-top:1px solid #c4f5e8;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#0f766e;font-size:15px}
.calm-footer button{background:#009b72;border:0;border-radius:16px;padding:15px 23px;color:#fff;font-size:16px;font-weight:700;box-shadow:0 5px 12px #009b7225}
@media(max-width:540px){.calm-dialog{padding:22px 18px;border-radius:25px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.calm-header{gap:10px;padding-bottom:18px}.calm-heart{width:40px;height:40px;font-size:31px;border-radius:13px}.calm-header h2{font-size:18px;margin-right:20px}.calm-header p{font-size:13px}.calm-close{font-size:28px;right:-5px}.calm-tabs{margin-top:18px;padding:5px;gap:0}.calm-tabs button{font-size:13px;padding:15px 4px}.calm-panel{padding:20px 0;min-height:300px}.calm-card{font-size:13px;padding:16px 12px;gap:12px;border-radius:18px}.room-anchors>p{font-size:13px}.breath-space{height:205px}.breath-exercise p{font-size:13px}.chime-button{font-size:13px}.calm-footer{font-size:13px;gap:10px}.calm-footer button{font-size:13px;padding:13px 15px}.breath-orb{width:155px;height:155px}}
@media(prefers-reduced-motion:reduce){.breath-orb{transform:none!important;transition:none}}

/* Emerald and mint brand palette. */
:root{--accent:#009b72;--mint:#ccfbeb;--teal:#009b91}
.primary,.plan-view .primary,.focus-bottom .primary,.calm-footer button{background:linear-gradient(115deg,#009b72,#009b91,#009b72)}
.primary:hover,.calm-footer button:hover{background:#00866b}
.ring-progress{stroke:#ccfbe6}
.ring-track{stroke:#eef9f4}
.tick{background:#009b72}

.fireworks-layer{position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden}
.firework-piece{position:absolute;width:9px;height:12px;opacity:0;animation:completion-firework 1.45s cubic-bezier(.16,.7,.35,1) var(--delay) forwards}
@keyframes completion-firework{0%{opacity:1;transform:translate(0,0) scale(.2) rotate(0)}12%{opacity:1;transform:translate(calc(var(--dx)*.45),calc(var(--dy)*.45)) scale(1.2) rotate(40deg)}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 120px)) scale(.6) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){.firework-piece{animation:none;display:none}}

.countdown-view p strong{display:inline-block;margin:8px 0;font-size:20px;color:#d1fae5;font-weight:600}.countdown-duration{font-size:13px;color:#a9bdb8}

/* DopaMind readable text sizes. */
.wordmark{font-size:27px}
.plan-view .plan li{height:auto;min-height:44px;font-size:13px}
.home p{font-size:16px;line-height:1.6}
.home .primary,.home .secondary{font-size:16px}

/* Larger home-screen typography. */
.phone:has(.home) .wordmark{font-size:34px}
.home h2{font-size:72px;line-height:1.04}
.home p{font-size:20px;line-height:1.65;margin-top:28px;margin-bottom:26px}
.home .hand-note{font-size:20px;line-height:1.35;right:-2px;top:20px}
.phone:has(.home) .primary{font-size:20px;min-height:62px}
.phone:has(.home) .secondary{font-size:18px;min-height:54px}
@media(max-width:380px){.home h2{font-size:66px}.home p{font-size:19px}.home .hand-note{font-size:18px}}

/* Prototype camera with a working shutter flow. */
.phone.camera-view{padding:0;max-width:440px;background:#222;min-height:100dvh}
.camera-view .screen{min-height:100dvh;animation:none}
.prototype-camera{position:relative;min-height:100dvh;flex:1;background:#222;overflow:hidden}
.prototype-camera:before{content:'';position:absolute;inset:0 0 112px;background-image:url(camera-room.png);background-size:100% 130.6%;background-position:center top;background-repeat:no-repeat;transition:transform .3s}
.prototype-camera.camera-mirrored:before{transform:scaleX(-1)}
.camera-status{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 24px;background:#d8d0c7;color:#151515;font-size:13px;font-weight:600;z-index:1}
.camera-close{position:absolute;top:40px;left:17px;color:#fff;background:#0005;border:0;border-radius:50%;width:32px;height:32px;font-size:26px;z-index:2;line-height:1}
.camera-controls{position:absolute;bottom:0;left:0;right:0;height:112px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:linear-gradient(#272727,#191919);padding-bottom:env(safe-area-inset-bottom,0px)}
.camera-controls button{color:#fff;border:0;background:none;font-size:30px;width:45px;height:48px}
.camera-controls .camera-shutter{width:70px;height:70px;border:3px solid #fff;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #222;transition:transform .1s}
.camera-shutter:active{transform:scale(.92)}
.demo-captured{height:190px;border-radius:18px;background-image:url(camera-room.png);background-size:100% 130.6%;background-position:center top;background-repeat:no-repeat}
.demo-captured.small{height:110px;background-size:100% auto;background-position:center 30%}

/* Full-resolution room photograph and independent camera controls. */
.prototype-camera:before{background-size:cover;background-position:center;background-image:url(camera-room.png)}
.camera-status{background:linear-gradient(#0005,transparent);color:#fff}
.camera-controls button svg{width:27px;height:27px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:auto}
.demo-captured,.demo-captured.small{background-image:url(camera-room.png);background-size:cover;background-position:center}

/* Larger goal-selection labels; retain the existing heading size. */
.goal-view p{font-size:19px;line-height:1.6;margin-bottom:25px}
.goal-view .change{font-size:16px;padding:9px 13px}
.goal-view .goal{font-size:18px;line-height:1.4;min-height:125px;padding:16px 10px}
.goal-view .goal span{font-size:33px;margin-bottom:11px}
.goal-view .primary{font-size:20px;min-height:62px}
@media(max-width:380px){.goal-view .goal{font-size:17px}.goal-view p{font-size:18px}}
/* Readable plan-screen typography. */
.plan-view h2{font-size:34px;line-height:1.25;margin-bottom:23px}
.plan-view .plan-duration{font-size:25px;gap:10px}
.plan-view .plan-duration svg{width:25px;height:28px}
.plan-view .plan-copy{font-size:19px;line-height:1.6;margin-bottom:30px}
.plan-view .plan{gap:10px}
.plan-view .plan li{font-size:18px;line-height:1.45;height:auto;min-height:62px;padding:12px 14px;gap:13px;border-radius:32px}
.plan-view .number{font-size:17px;width:32px;height:32px;flex-basis:32px}
.plan-view .primary{font-size:22px}
@media(max-width:380px){.plan-view .plan-copy{font-size:18px}.plan-view .plan li{font-size:17px}.plan-view h2{font-size:32px}}
/* Larger task text and a consistent warm background. */
body:has(.focus-view),.phone.focus-view{background:#fffaf3}
.focus-view .focus-instruction{font-size:20px;line-height:1.6}
.focus-view h2{font-size:32px;line-height:1.25}
.focus-view .target-badge{font-size:16px;padding:10px 16px;letter-spacing:.4px}
.focus-view .timer-caption{font-size:20px}
.focus-view .pause-timer{font-size:20px;padding:14px 24px}
.focus-view .focus-bottom .primary{font-size:20px;min-height:62px;height:auto;padding:17px 14px}
.focus-view .focus-links{gap:18px;flex-wrap:wrap;margin-top:20px}
.focus-view .focus-links button{font-size:17px;line-height:1.5;padding:8px 0}
.focus-view .focus-bottom{border-top-color:#eee5d9}
@media(max-width:380px){.focus-view h2{font-size:29px}.focus-view .focus-instruction{font-size:19px}.focus-view .focus-links button{font-size:16px}}
/* Keep the task support links on one row. */
.focus-view .focus-links{flex-wrap:nowrap;gap:10px;align-items:center}
.focus-view .focus-links button{font-size:14px;white-space:nowrap;line-height:1.5}
@media(max-width:380px){.focus-view .focus-links{gap:6px}.focus-view .focus-links button{font-size:12px}}
/* Larger navigation and progress indicators. */
.phone .top{min-height:44px}
.phone .top .back{font-size:36px;width:44px;height:44px;line-height:40px;font-weight:600}
.phone .top .count{font-size:20px;font-weight:600}
.phone .top .dots{gap:9px}
.phone .top .dots i{width:10px;height:10px}
/* Warm timer center with a soft mint glow. */
.focus-view .timer-ring{background:#fffaf3;box-shadow:0 0 35px 10px #6ee7b72b,0 0 75px 22px #a7f3d022,inset 0 3px 10px #786b4910}

/* One typeface throughout DopaMind. */
:root{--font-app:'DM Sans',system-ui,sans-serif}
body,button,input,textarea,select,.phone,.calm-dialog,h1,h2,h3,.wordmark,.hand-note,.timer,.recap-count,.countdown-circle,.focus-time{font-family:var(--font-app)}
h1,h2,h3,.wordmark{font-weight:700}
.plan-view h2{font-weight:700}
.home .hand-note{font-weight:500;font-style:normal;transform:none}

.home h2{white-space:nowrap;font-size:clamp(36px,9vw,58px)}
/* Edge-to-edge camera view at every viewport width. */
.phone.camera-view{width:100%;max-width:none;margin:0;padding:0}
body:has(.camera-view){background:#222}

/* Original handwritten wordmark, slightly smaller. */
.phone .wordmark,.phone:has(.home) .wordmark{font-family:'Patrick Hand','Comic Sans MS',cursive;font-size:28px;font-weight:400}
.home .hand-note{font-family:'Patrick Hand','Comic Sans MS',cursive;font-weight:400}
/* Slightly smaller task heading and instructions. */
.focus-view h2{font-size:30px}
.focus-view .focus-instruction{font-size:18px}
@media(max-width:380px){.focus-view h2{font-size:27px}.focus-view .focus-instruction{font-size:17px}}

/* Black prototype camera; album selects the prepared room photo. */
.prototype-camera,.phone.camera-view{background:#000}
.prototype-camera:before{background-image:none;background:#000}
.camera-status{background:#000}
/* Larger completion checklist labels. */
.checklist li{font-size:18px;line-height:1.5;gap:12px;margin:18px 0;align-items:flex-start}
.checklist .tick{width:25px;height:25px;flex:0 0 25px;margin-top:1px;font-size:16px}
.phone:has(.checklist) .bottom .primary{font-size:20px;min-height:62px;padding:16px}
/* A taller photo on goal selection. */
.goal-view .image.small,.goal-view .demo-captured.small{height:190px;object-fit:cover;border-radius:18px}
.goal-view .demo-captured.small{background-size:cover;background-position:center}
/* Slightly larger calm-corner labels. */
.calm-tabs button{font-size:17px}
.calm-header p,.breath-exercise p,.room-anchors>p,.calm-card,.calm-footer{font-size:17px}
.chime-button,.calm-footer button{font-size:17px}
@media(max-width:540px){.calm-tabs button{font-size:15px;padding:15px 3px}.calm-header p,.breath-exercise p,.room-anchors>p,.calm-card,.calm-footer{font-size:15px}.chime-button,.calm-footer button{font-size:15px}}
/* Shared action-button sizing across all screens. */
:root{--action-font-size:20px;--action-height:62px;--action-radius:22px}
.phone .screen .bottom .primary,
.phone .screen .bottom .secondary{font-size:var(--action-font-size);font-weight:600;line-height:1.4;min-height:var(--action-height);height:auto;padding:16px 18px;border-radius:var(--action-radius);display:flex;align-items:center;justify-content:center;gap:8px}
.phone .screen .pause-timer,
.calm-dialog .chime-button,
.calm-dialog .calm-footer button{font-size:var(--action-font-size);font-weight:600;line-height:1.4;min-height:var(--action-height);height:auto;padding:16px 18px;border-radius:var(--action-radius)}
@media(max-width:540px){.calm-dialog .calm-footer{flex-wrap:wrap}.calm-dialog .calm-footer button{margin-left:auto}}
.plan-error { font-size:16px; line-height:1.5; color:#8a3838; margin:0 0 12px; }
button:disabled { cursor:wait; opacity:.7; }

/* Viewport-sized app layouts, including iPhone 17 Pro and Safari chrome. */
html,body{height:100%;min-height:0}
main{min-height:0;height:100dvh}
.phone,.phone.plan-view,.phone.focus-view,.phone.countdown-view{
 height:100dvh;min-height:0;padding: max(12px,env(safe-area-inset-top)) 24px max(14px,env(safe-area-inset-bottom));
}
.phone .screen,.plan-view .screen,.focus-view .screen,.countdown-view .screen{
 min-height:0;height:100%;flex:1;
}
.phone .top{flex:0 0 44px;height:44px;margin:0 0 12px;position:relative}
.phone .top .dots{position:absolute;left:50%;transform:translateX(-50%)}
.phone .screen>.bottom{flex-shrink:0;margin: auto 0 0;padding:12px 0 0}
.phone .screen .bottom .primary,.phone .screen .bottom .secondary{
 min-height:56px;padding:13px 14px;line-height:1.4;
}
.phone .home h2{margin:clamp(12px,3dvh,28px) 0 16px;}
.phone .home p{line-height:1.55;margin:0 0 12px}
.phone .home .hero-art{height:clamp(160px,28dvh,228px);max-width:320px}
.phone .home .hand-note{top:16px;right:0}
.goal-view .photo-wrap{flex-shrink:0}
.goal-view .image.small,.goal-view .demo-captured.small{height:clamp(125px,21dvh,184px);display:block}
.goal-view h2{margin:16px 0 12px}
.goal-view p{margin:0 0 14px;line-height:1.5}
.goal-view .goals{margin-top:0;gap:10px}
.goal-view .goal{min-height:clamp(94px,14dvh,122px);padding:12px 8px;}
.goal-view .goal span{margin-bottom:6px}
.goal-view .change{}
.phone.plan-view{padding-left:24px;padding-right:24px}
.plan-view .plan-hero{height:clamp(72px,13dvh,112px)}
.plan-view .plan-milo{width:96px;height:96px}
.plan-view .plan-duration{bottom:8px}
.plan-view h2{margin:12px 0 18px}
.plan-view .plan-copy{line-height:1.55;margin:0 0 22px}
.plan-view .plan{gap:8px}
.plan-view .plan li{min-height:56px;padding:10px 12px;line-height:1.4}
.plan-view .number{width:30px;height:30px;flex-basis:30px;}
.focus-view .top{margin:0 0 16px;padding:0;background:var(--paper)}
.focus-task{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}
.focus-view .target-badge{padding:8px 12px;flex-shrink:0}
.focus-view h2{line-height:1.2;margin:16px 0 12px}
.focus-view .focus-instruction{line-height:1.5;margin:0;max-width:430px}
.focus-view .timer-ring{width:clamp(185px,29dvh,254px);flex-shrink:0;margin:auto auto 18px}
.focus-view .focus-time{}
.focus-view .timer-caption{}
.phone .screen .pause-timer{min-height:52px;padding:12px 20px;flex-shrink:0;margin-bottom:12px}
.phone .screen>.focus-bottom{margin-top:12px;padding-top:12px;padding-bottom:0}
.focus-view .focus-links{margin-top:10px;gap:8px}
.focus-view .focus-links button{line-height:1.5;padding:7px 0}
.phone.countdown-view .countdown-content{padding:16px 0;max-width:420px}
.countdown-view .countdown-circle{width:160px;height:160px;margin-bottom:30px}
.countdown-view p{margin-bottom:22px}
.countdown-view p strong{}
.phone .end-art{height:clamp(190px,33dvh,280px)}
.phone .end-art svg{width:230px;height:230px}
.phone .end h2{margin:16px 0}
.phone .end p{}
.phone:has(.checklist) h2{margin:12px 0 18px}
.phone .recap-count{padding:16px}
.phone .checklist{margin:20px 0 8px}
.phone .checklist li{margin:14px 0;line-height:1.4}
.phone .mini-milo{height:90px;flex-shrink:0}
.phone .mini-milo svg{width:96px;height:96px}
.phone .party{height:clamp(160px,28dvh,250px)}
.phone .celebration h2{margin:12px 0}
.phone .text-input{resize:none;min-height:100px;height:clamp(110px,24dvh,200px);margin:12px 0;}
.phone .help{line-height:1.5}
.phone.camera-view{padding:0;max-width:none}
.camera-view .prototype-camera{height:100%;min-height:0}
.camera-controls{height:calc(100px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.camera-close{top:calc(40px + env(safe-area-inset-top))}
.camera-status{padding-top:max(12px,env(safe-area-inset-top))}
.calm-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px;overflow:visible}
.calm-header{padding-bottom:16px}
.calm-tabs{margin-top:16px;max-width:none}
.calm-tabs button{padding:14px 3px}
.calm-panel{min-height:0;padding:18px 0}
.calm-dialog .breath-space{height:clamp(140px,24dvh,205px)}
.breath-orb{width:145px;height:145px}
.breath-exercise p{line-height:1.5;margin:12px 0}
.calm-dialog .chime-button{min-height:48px;padding:10px 12px}
.calm-card{line-height:1.45;padding:14px 12px;margin-bottom:12px}
.sense-list .calm-card{padding:12px;margin-bottom:8px}
.calm-dialog .calm-footer{padding-top:14px;flex-wrap:nowrap;gap:10px;}
.calm-dialog .calm-footer button{min-height:50px;padding:10px 14px;white-space:nowrap}
.plan-error{margin:0 0 8px!important}
@media(max-height:760px){
 .phone .top{margin-bottom:8px}
 .phone .home h2{margin-top:12px}
 .phone .home .hero-art{height:180px}
 .goal-view .image.small,.goal-view .demo-captured.small{height:138px}
 .goal-view h2{margin:12px 0 8px}
 .goal-view p{margin-bottom:10px}
 .goal-view .goal{min-height:96px;padding:10px 8px}
 .goal-view .goal span{}
 .plan-view .plan-hero{height:70px}
 .plan-view .plan-milo{width:78px;height:78px}
 .plan-view h2{margin-bottom:12px}
 .plan-view .plan-copy{margin-bottom:14px;}
 .plan-view .plan li{min-height:52px;padding:9px 12px}
 .focus-view .top{margin-bottom:10px}
 .focus-view h2{margin:12px 0 8px}
 .focus-view .focus-instruction{line-height:1.45}
 .focus-view .timer-ring{width:190px;margin:16px auto 12px}
 .focus-view .focus-time{}
 .focus-view .timer-caption{}
 .phone .screen .pause-timer{min-height:48px;padding:10px 18px;margin-bottom:0}
 .phone .screen>.focus-bottom{margin-top:auto}
 .calm-dialog{padding:16px}
 .calm-header h2{}
 .calm-header p{}
 .calm-panel{padding:12px 0}
 .calm-dialog .breath-space{height:145px}
 .calm-card{padding:12px;margin-bottom:8px}
 .sense-list .calm-card{padding:9px 12px;}
 .room-anchors>p{margin:0 0 12px}
}

/* Preserve the typography and action sizes chosen before viewport fitting. */
.phone .screen .bottom .primary,.phone .screen .bottom .secondary{font-size:20px;min-height:62px;padding:16px 18px}
.phone .screen .pause-timer{font-size:20px;min-height:62px;padding:16px 18px}
.phone .home .hand-note{font-size:20px}
.phone .home h2{font-size:clamp(36px,9vw,58px)}
.phone .home p{font-size:20px}
.goal-view .goal{font-size:18px}
.plan-view h2{font-size:34px}
.plan-view .plan-copy{font-size:19px}
.plan-view .plan li{font-size:18px}
.focus-view h2{font-size:30px}
.focus-view .focus-instruction{font-size:18px}
.focus-view .focus-links button{font-size:14px}
@media(max-width:380px){.focus-view .focus-links button{font-size:12px}.focus-view h2{font-size:27px}.focus-view .focus-instruction{font-size:17px}}
@media(max-height:760px){.focus-view .timer-ring{width:180px;margin:10px auto}.focus-view .top{margin-bottom:6px}.focus-view h2{margin:8px 0}.phone .screen .pause-timer{margin-bottom:0}.goal-view .goals{gap:8px}.goal-view p{margin-bottom:8px}}
/* A photo-led companion, with time as a quiet supporting detail. */
.focus-view .focus-task{gap:0}
.focus-view .target-badge{font-size:12px;letter-spacing:.3px;padding:8px 12px}
.focus-view h2{font-size:28px;margin:16px 0 10px}
.focus-view .focus-instruction{font-size:18px;line-height:1.5}
.task-photo-wrap{width:100%;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;margin:18px 0 12px}
.task-photo{display:block;width:100%;height:100%;max-height:300px;aspect-ratio:14/9;object-fit:cover;border-radius:22px;overflow:hidden}
.gentle-timer{width:100%;text-align:center;position:relative;flex-shrink:0;padding-bottom:4px}
.focus-view .gentle-timer .focus-time{font-size:36px;letter-spacing:-1px;line-height:1.2}
.focus-view .gentle-timer .timer-caption{font-size:14px;font-weight:500;margin-top:4px;color:#827c77}
.gentle-track{height:3px;width:100px;background:#e4eee7;border-radius:10px;overflow:hidden;margin:10px auto 0}
.gentle-track span{display:block;height:100%;background:#009b72;transition:width .1s linear}
.phone .screen .gentle-timer .pause-timer{position:absolute;right:0;top:6px;min-height:44px;padding:8px 12px;font-size:14px;background:transparent;margin:0;color:#718079}
.focus-view .focus-bottom{margin-top:14px!important}
@media(max-height:760px){.focus-view h2{font-size:26px;margin:10px 0 8px}.focus-view .focus-instruction{font-size:17px}.task-photo-wrap{margin:12px 0 8px}.task-photo{max-height:215px}.focus-view .gentle-timer .focus-time{font-size:32px}}
/* Reference order: label, time, shrinking bar. */
.focus-view .gentle-timer .timer-caption{font-size:18px;font-weight:600;color:#9a9a9a;margin:0 0 8px}
.focus-view .gentle-timer .focus-time{font-size:46px;line-height:1.15;color:#172033}
.gentle-track{width:150px;height:4px;margin:14px auto 0}
@media(max-height:760px){.focus-view .gentle-timer .focus-time{font-size:40px}.focus-view .gentle-timer .timer-caption{font-size:17px;margin-bottom:5px}.gentle-track{margin-top:10px}}

/* Reveal the plan one small step at a time. */
.plan-view .plan li{animation:plan-step-reveal .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--step-index,0)*.16s + .1s)}
@keyframes plan-step-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.plan-view .plan li{animation:none;opacity:1;transform:none}}
/* Individual task photos retain their full original composition. */
.task-photo-wrap .task-photo{object-fit:contain;object-position:center;background:transparent}
/* Highlighted room overview before the checklist. */
.overview-view .overview-copy h2{font-size:29px;line-height:1.2;margin:12px 0 10px}
.overview-view .overview-copy p{font-size:18px;line-height:1.5;margin:0 0 16px}
.overview-photo{min-height:0;flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:22px;background:#f4eee4}
.overview-photo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:22px}
.overview-view .screen>.bottom{margin-top:0;padding-top:18px}
@media(max-height:760px){.overview-view .overview-copy h2{font-size:27px}.overview-view .overview-copy p{margin-bottom:12px}}
/* A compact room card shares the plan, without adding a step. */
.plan-view:has(.plan-photo-card) .plan-hero{height:65px}
.plan-view:has(.plan-photo-card) .plan-milo{width:70px;height:70px}
.plan-view:has(.plan-photo-card) h2{margin:10px 0 12px}
.plan-view:has(.plan-photo-card) .plan-copy{margin-bottom:14px}
.plan-photo-card{position:relative;display:block;width:100%;height:clamp(90px,15dvh,140px);padding:0;border:0;border-radius:18px;overflow:hidden;margin:0 0 14px;background:#eee6da;flex-shrink:0}
.plan-photo-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.plan-photo-card span{position:absolute;right:9px;bottom:9px;background:#252727b8;border-radius:20px;padding:6px 10px;color:white;font-size:14px}
.plan-view:has(.plan-photo-card) .plan li{min-height:50px;padding:8px 12px}
.plan-view:has(.plan-photo-card) .plan{gap:7px}
.room-photo-dialog{padding:0;border:0;border-radius:22px;background:var(--paper);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:hidden}
.room-photo-dialog::backdrop{background:#17203399;backdrop-filter:blur(4px)}
.room-photo-dialog img{display:block;width:100%;max-height:calc(100dvh - 40px);object-fit:contain}
.room-photo-close{position:absolute;top:12px;right:12px;border:0;background:#17203399;color:white;border-radius:50%;width:44px;height:44px;font-size:30px}
@media(max-height:760px){.plan-view:has(.plan-photo-card) .plan-hero{height:42px}.plan-view:has(.plan-photo-card) .plan-milo{width:50px;height:50px}.plan-view:has(.plan-photo-card) .plan-copy{font-size:17px;margin-bottom:10px}.plan-photo-card{height:90px;margin-bottom:10px}.plan-view:has(.plan-photo-card) h2{font-size:30px;margin:8px 0 10px}.plan-view:has(.plan-photo-card) .plan li{font-size:17px}}

/* One shared navigation row for every screen using a back button. */
.phone .screen>.top:has(.back){height:44px;min-height:44px;flex:0 0 44px;margin:0 0 12px;padding:0;position:relative;display:flex;align-items:center;justify-content:space-between}
.phone .screen>.top .back{display:grid;place-items:center;width:44px;height:44px;min-width:44px;flex:0 0 44px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:#292727;line-height:1;transition:background .15s}
.phone .screen>.top .back svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone .screen>.top .back:hover{background:#009b720c}
.phone .screen>.top .back:active{background:#009b721a}
.phone .screen>.top .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:9px}
.phone .screen>.top .count{font-size:20px;font-weight:600;line-height:1;margin-left:auto}

/* Remove the divider above completion on every task screen. */
.phone.focus-view .screen>.focus-bottom{border-top:0}

/* Lift the timer group toward the middle without resizing the photo. */
.focus-view .gentle-timer{transform:translateY(-14px)}
.focus-view .task-photo-wrap{margin-bottom:24px}
@media(max-height:760px){.focus-view .gentle-timer{transform:translateY(-10px)}.focus-view .task-photo-wrap{margin-bottom:18px}}

/* Keep the same app width through home, countdown and every task. */
:root{--app-width:440px}
.phone,.phone.plan-view,.phone.goal-view,.phone.focus-view,.phone.countdown-view,.phone.camera-view{
 width:100%;max-width:var(--app-width);min-width:0;margin-left:auto;margin-right:auto;
}
.phone .screen{width:100%;min-width:0}
.focus-task,.task-photo-wrap,.gentle-timer,.focus-bottom{min-width:0;max-width:100%}
.task-photo-wrap .task-photo{width:100%;height:auto;max-height:min(300px,32dvh);aspect-ratio:auto;object-fit:contain;flex-shrink:1}
@media(max-width:440px){.phone,.phone.plan-view,.phone.goal-view,.phone.focus-view,.phone.countdown-view,.phone.camera-view{max-width:100%}}
@media(max-height:760px){.task-photo-wrap .task-photo{max-height:215px}}