@font-face{font-family:"Mochiy Pop One";src:url("./assets/fonts/mochiy-pop-one.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
*{box-sizing:border-box} :root{font-family:"Mochiy Pop One",sans-serif;font-synthesis:none;color:#1d334f;background:#fffaf1;--bg:#fffaf1;--accent:#c04457;--muted:#667387;--surface:#fffdf9;--border:#ebded6;--tint:#ffe2db}
body{margin:0;background:var(--bg)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit;color:inherit}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.app{min-height:100svh;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;padding:0 6%;background:radial-gradient(circle at 0% 28%,#c6eafe 0 35px,transparent 39px),radial-gradient(circle at 98% 77%,#ffdce5 0 44px,transparent 49px),radial-gradient(circle at 98% 14%,#def4f4 0 50px,transparent 57px),radial-gradient(circle at 1% 87%,#fff3c5 0 43px,transparent 49px),var(--bg)}
header{position:relative;display:flex;justify-content:center;align-items:center;flex-shrink:0;padding-top:35px;height:145px}.brand-group{text-align:center}.brand{display:block;line-height:0}.brand img{display:block;width:245px;height:auto}.tagline{display:block;font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.04em}.icon-button{position:absolute;right:0;top:38px;width:46px;height:46px;display:grid;place-items:center;background:#ffffff90;border:1px solid #ffffffb0;border-radius:50%;box-shadow:0 3px 7px #58688114;color:#324861}.icon-button svg{width:25px;height:25px}
main{display:flex;flex:1}.tap-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:65px;background:transparent;width:100%;min-height:510px;padding:36px 0 18px;touch-action:manipulation;user-select:none;-webkit-user-select:none;position:relative}.counter-shape{width:min(390px,78vw);aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(150deg,#ffd0bc 1%,#ff9ca1 48%,#ff6f84 100%);box-shadow:inset 0 5px 8px #ffffff70,inset 0 -9px 3px #e6546825,0 15px 20px #c8555520;container-type:inline-size}.count-display{display:flex;align-items:center;justify-content:center;width:90%;position:relative;z-index:1}.number{font:400 clamp(1px,var(--number-size,34cqw),160px)/1.35 "Mochiy Pop One",sans-serif;letter-spacing:-.035em;color:white;font-variant-numeric:tabular-nums;text-shadow:0 4px 0 #d7556520;white-space:nowrap}.shape-caption{position:absolute;top:69%;font-size:13px;color:#7f2438;z-index:1}.shine{position:absolute;inset:7%;border-radius:50%;border:11px solid transparent;border-top-color:#ffffff66;transform:rotate(-38deg);clip-path:polygon(0 0,75% 0,50% 50%,0 60%)}.counter-shape:after{content:"";position:absolute;width:8px;height:25px;background:#ffca60;border-radius:8px;right:9%;top:0;transform:rotate(40deg);box-shadow:19px 9px 0 -1px #ffca60,-20px 3px 0 -1px #ffca60}.step-badge{position:absolute;top:94%;left:50%;transform:translateX(-50%);min-width:112px;max-width:90%;border-radius:100px;background:linear-gradient(#fff2ea,#ffdad5);padding:10px 22px;box-shadow:0 5px 9px #c2725422,inset 0 2px 2px #ffffff9c;color:#253b55;font-size:21px;line-height:1.35;overflow-wrap:anywhere;z-index:2}.step-badge span{display:none}.guide{font-size:10px;color:var(--muted);height:17px;transition:opacity .2s}.guide.hidden{opacity:0}.plunger,.dial,.tap-doodle{display:none}footer{display:flex;align-items:center;justify-content:space-between;min-height:95px;gap:16px;font-size:9px;color:var(--muted);padding-bottom:max(20px,env(safe-area-inset-bottom))}.footer-note{display:flex;align-items:center;gap:7px}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.reset-button{background:#ffffffaa;border:1px solid #ffffffb0;border-radius:100px;padding:13px 24px;font-size:13px;color:#253b55;box-shadow:0 5px 10px #9e6f5120}.reset-button>span{font-family:Arial,sans-serif;font-size:28px;line-height:.7;vertical-align:-3px;margin-right:5px}kbd{font:inherit;border:1px solid var(--border);padding:4px 8px;border-radius:5px;margin-right:5px}.tap-area.pulse .counter-shape{animation:pop .14s ease-out}@keyframes pop{from{transform:scale(.975) translateY(3px)}to{transform:none}}
[data-theme=minimal]{--bg:#f3faff;--accent:#286dc4;--muted:#536e8f;--border:#dbe9f4;--tint:#dbedff;color:#172b46}[data-theme=minimal] .app{background:linear-gradient(163deg,#f7fbff 0 42%,#eaf5ff 42.1%,#f2f8ff 100%)}[data-theme=minimal] .counter-shape{background:none;box-shadow:none;border-radius:0;width:min(440px,86vw);aspect-ratio:1.08}[data-theme=minimal] .number{color:#17263c;text-shadow:0 3px 0 #ffffff80;font-size:clamp(1px,var(--number-size,36cqw),180px)}[data-theme=minimal] .shine{display:none}[data-theme=minimal] .shape-caption{color:#213754;top:72%;font-size:15px}[data-theme=minimal] .step-badge{top:90%;min-width:140px;background:#c5e5ff;box-shadow:none}[data-theme=minimal] .counter-shape:after{background:#6486ae;box-shadow:19px 8px 0 -1px #6486ae;right:9%;top:26%}[data-theme=minimal] .counter-shape:before{content:"";position:absolute;width:7px;height:23px;background:#6486ae;border-radius:8px;left:8%;top:26%;transform:rotate(-26deg);box-shadow:-18px 9px 0 -1px #6486ae}[data-theme=minimal] .tap-area.pulse .counter-shape{animation:minimal .1s ease-out}@keyframes minimal{from{transform:translateY(2px)}to{transform:none}}
[data-theme=playful]{--bg:#fff08b;--accent:#2369ad;--muted:#5a6a65;--border:#e6d590;--tint:#d6eeff;color:#244662}[data-theme=playful] .app{background:radial-gradient(ellipse at 35% 20%,#fff9b0,transparent 70%),linear-gradient(#fff196,#ffdd60)}[data-theme=playful] .tap-area{padding-top:65px;gap:35px}[data-theme=playful] .counter-shape{width:min(330px,74vw);aspect-ratio:.86;border-radius:38% 38% 34% 34% / 27% 27% 24% 24%;background:linear-gradient(115deg,#93eaff 0%,#63d2fa 30%,#38b5ec 72%,#32a8de 100%);box-shadow:inset 7px 5px 10px #d6faff90,inset -8px -12px 12px #1688bb65,0 18px 25px #b8872b40;transform:none}[data-theme=playful] .counter-shape:after{display:none}[data-theme=playful] .shine{inset:7% 5% 8% 7%;border-radius:37%;border-width:9px;transform:rotate(-18deg);clip-path:polygon(0 0,40% 0,20% 30%,0 50%)}.plunger{position:absolute;z-index:2;top:-36px;left:38%;width:24%;height:94px;background:linear-gradient(90deg,#566477,#a6afb7 43%,#4f6176);border-radius:40%;box-shadow:0 7px 7px #12618b55;transform-origin:bottom}.plunger:before{content:"";position:absolute;width:110%;height:78%;left:-5%;top:-9px;background:linear-gradient(135deg,#fff,#e4e4e4);border-radius:50% 50% 45% 45%;box-shadow:inset 3px 3px 6px #fff,inset -3px -6px 4px #bdc1c7,0 4px 3px #68727d44}.dial{position:absolute;right:-21px;top:39%;width:27px;height:80px;border-radius:7px;background:repeating-linear-gradient(#3a4556 0 6px,#515d6d 7px 10px);box-shadow:inset -5px 0 4px #1b2533;z-index:-1}[data-theme=playful] .plunger,[data-theme=playful] .dial,[data-theme=playful] .tap-doodle{display:block}[data-theme=playful] .count-display{width:84%;height:37%;margin-top:-5%;padding:6px 10px;border:7px solid #536075;border-radius:30px;background:linear-gradient(#202633,#343b4a);box-shadow:0 3px 2px #d5f6ffbb,inset 0 5px 8px #080e19,0 0 0 3px #25749e77;container-type:inline-size}[data-theme=playful] .number{font-size:clamp(1px,var(--number-size,25cqw),120px);color:#fff;letter-spacing:.08em;text-shadow:0 3px 0 #131922;width:100%;text-align:center;border-radius:8px;background:repeating-linear-gradient(90deg,#ffffff06 0 30%,#141b292e 31% 33.333%);padding:4px 0}[data-theme=playful] .shape-caption{display:none}[data-theme=playful] .step-badge{top:74%;background:linear-gradient(#91dcff,#69c7f5);border:1px solid #b2e7ff77;box-shadow:inset 0 3px 2px #d0f2ff80,0 5px 6px #1878a75c;font-size:21px;min-width:106px}[data-theme=playful] .tap-doodle{position:absolute;right:-18px;top:-36px;transform:rotate(-13deg);font-size:12px;line-height:1.7;color:#3679a3}[data-theme=playful] .tap-doodle:before{content:"";position:absolute;left:-25px;top:12px;width:5px;height:17px;border-radius:4px;background:#fff;transform:rotate(-20deg);box-shadow:-12px -7px 0 #fff}[data-theme=playful] .tap-area.pulse .counter-shape{animation:playful .15s ease-out}[data-theme=playful] .tap-area.pulse .plunger{animation:press .15s ease-out}@keyframes playful{from{transform:translateY(3px)}to{transform:none}}@keyframes press{from{transform:translateY(7px) scaleY(.9)}to{transform:none}}
dialog{border:1px solid var(--border);border-radius:28px;padding:28px;width:min(520px,calc(100% - 32px));max-height:90svh;overflow:auto;color:inherit;background:var(--bg);box-shadow:0 30px 90px #29203530}dialog::backdrop{background:#24203245;backdrop-filter:blur(4px)}.sheet-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.section-kicker{font-size:9px;letter-spacing:.2em;color:var(--accent);font-weight:700}h1{font-size:25px;margin:5px 0 0}h2{font-size:14px;margin:0 0 14px}h2>span{font-size:10px;font-weight:400;color:var(--muted);margin-left:8px}.close-button{border-radius:50%;width:36px;height:36px;background:var(--surface);font-size:25px;color:var(--muted)}section+section{margin-top:25px}.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.theme-card{min-width:0;background:var(--surface);border:2px solid transparent;border-radius:14px;padding:6px 6px 12px;font-size:10px;font-weight:700}.theme-card[aria-pressed=true]{border-color:var(--accent)}.theme-card small{display:block;font-size:8px;font-weight:400;color:var(--muted);margin-top:5px}.preview{height:85px;border-radius:9px;display:grid;place-items:center;margin-bottom:11px;font-family:Arial,sans-serif;font-size:35px}.preview-pop{background:#f2eafb}.preview-pop>span{width:62px;height:62px;display:grid;place-items:center;color:white;background:#ab88de;border-radius:50%;box-shadow:0 4px 0 #9875cc}.preview-minimal{background:#f5f8fc;color:#26364b}.mini-plus{color:#2563c9;font-size:11px;vertical-align:top;margin-left:2px}.preview-playful{background:#fff1c3}.preview-playful>span{background:#285cc6;color:white;border:9px solid #ffd155;border-radius:16px;box-shadow:0 4px 0 #deb247;transform:rotate(-6deg);padding:0 8px;font-size:28px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.steps button{padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.steps button[aria-pressed=true]{background:var(--tint);color:var(--accent);border-color:var(--accent)}.custom-step{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:12px}.custom-step input{width:145px;max-width:52%;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:inherit;padding:10px;font:inherit}.error{color:#b42d48;font-size:11px;margin:6px 0 0}.error:empty{display:none}.preferences{border-top:1px solid var(--border);padding-top:8px}.preferences label{display:flex;align-items:center;position:relative;padding:12px 0;font-size:13px;cursor:pointer}.preferences small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.preferences input{position:absolute;right:0;opacity:0;width:44px;height:26px}.switch{margin-left:auto;width:44px;height:26px;border-radius:20px;background:#c8c5ce;padding:3px;pointer-events:none}.switch:after{content:"";display:block;background:#fff;width:20px;height:20px;border-radius:50%;transition:transform .15s}.preferences input:checked+.switch{background:var(--accent)}.preferences input:checked+.switch:after{transform:translateX(18px)}.preferences input:focus-visible+.switch{outline:3px solid var(--accent);outline-offset:4px}.sheet-note{text-align:center;font-size:10px;color:var(--muted);margin:17px 0 0}.confirm{text-align:center;padding:32px;max-width:380px}.confirm h2{font-size:19px}.confirm p{font-size:12px;color:var(--muted)}.reset-symbol{display:block;color:var(--accent);font-size:36px;margin-bottom:12px}.confirm-actions{display:flex;gap:10px;margin-top:26px}.confirm-actions button{flex:1;padding:12px 4px;border-radius:11px;background:var(--surface);border:1px solid var(--border);font-size:12px}.confirm-actions #reset-confirm{background:var(--accent);color:white;border-color:var(--accent)}.sheet-handle{display:none}
/* Shared settings retain the same controls, with previews matching the three surfaces. */
.preview-pop{background:#fff5ea}.preview-pop>span{background:linear-gradient(#ffbfaf,#ff7c91);box-shadow:0 4px 0 #f27185}.preview-minimal{background:#edf7ff}.preview-playful{background:#fff09a}.preview-playful>span{background:#293343;border:10px solid #5acafa;border-top-width:16px;border-bottom-width:16px;border-radius:20px;box-shadow:0 4px 0 #309ed0;position:relative;transform:none;font-size:22px}.preview-playful>span:before{content:"";position:absolute;top:-26px;left:calc(50% - 9px);width:18px;height:14px;background:linear-gradient(#fff,#d5dce4);border-radius:8px;box-shadow:0 3px 0 #6d8297}.preview{font-family:"Mochiy Pop One",sans-serif}.sheet-heading h1{font-weight:400}.themes{gap:8px}.theme-card{font-weight:400}.theme-card small{font-family:sans-serif}.preferences small,.sheet-note,.error{font-family:sans-serif}
@media(max-width:600px){.app{padding:0 23px}header{height:130px;padding-top:32px}.brand img{width:203px}.tagline{font-size:10px;margin-top:8px}.icon-button{right:-2px;top:25px;width:39px;height:39px}.icon-button svg{width:22px}.brand-group{margin-top:16px}.tap-area{min-height:405px;padding:25px 0 10px;gap:61px}.counter-shape{width:min(355px,84vw)}.shape-caption{font-size:12px}.step-badge{font-size:21px;min-width:108px;padding:10px 18px}footer{min-height:104px;display:grid;grid-template-columns:1fr auto;gap:14px;padding-bottom:max(20px,env(safe-area-inset-bottom))}.footer-note{font-size:7px}.keyboard-note{display:none}.reset-button{font-size:12px;padding:14px 20px}[data-theme=playful] .counter-shape{width:min(310px,76vw)}[data-theme=playful] .tap-area{min-height:460px;padding-top:64px;gap:27px}[data-theme=playful] footer{display:flex;flex-direction:column-reverse;justify-content:center;gap:18px}[data-theme=playful] .reset-button{padding:15px 29px;font-size:15px}.guide{font-size:9px}dialog:not(.confirm){inset:0;margin:auto;width:calc(100% - 32px);max-width:520px;max-height:calc(100dvh - 32px);border-radius:26px;padding:24px 20px;overscroll-behavior:contain}.sheet-handle{display:none}.sheet-heading{margin-bottom:22px}.theme-card{font-size:9px}.preview{height:80px}.theme-card small{font-size:8px}dialog[open]:not(.confirm){animation:sheet-in .16s ease-out}}
@media(max-height:740px){header{height:110px;padding-top:20px}.tap-area{min-height:350px;gap:52px;padding-top:20px}.counter-shape{width:min(305px,77vw)}[data-theme=minimal] .counter-shape{width:min(330px,82vw)}[data-theme=playful] .tap-area{min-height:380px;padding-top:53px;gap:20px}[data-theme=playful] .counter-shape{width:min(254px,70vw)}.plunger{height:76px;top:-29px}footer{min-height:80px}.brand img{width:190px}.shape-caption{font-size:11px}}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

[data-theme=playful] .count-display:after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1px;background:#070c1930;pointer-events:none}