:root{--ink:#3c3158;--muted:#827b88;--accent:#72559a;--soft:#efebf5;--p:0;--plant-size:.15;--leaf-size:0;--bloom-size:0;--bud-opacity:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#f7f5ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #aa8fc9;outline-offset:4px}button:disabled{cursor:default;opacity:.42}button{-webkit-tap-highlight-color:transparent}button:active:not(:disabled){transform:translateY(1px)}.app{max-width:1480px;margin:auto;padding:32px 46px 24px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(22px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:40px}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:24px;text-decoration:none;color:var(--ink);white-space:nowrap;letter-spacing:.04em}.brand-icon{width:50px;height:50px;border-radius:17px;background:#e4ebce;display:grid;place-items:center;font-size:39px;color:#6d8058;line-height:1}.brand-light{font-size:20px;font-weight:600}.brand small{display:block;font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.13em;margin-top:5px}.options{display:flex;gap:8px;align-items:center}.options button{background:#fff9;border:1px solid #e9e4eb;padding:11px 13px;border-radius:12px;font-size:12px;min-height:44px}.options button[aria-pressed=true]{background:var(--soft);border-color:#b6a3ce}.options #help{width:44px;font-size:17px}.theme-bar{display:flex;align-items:center;gap:30px;margin-bottom:30px}.section-label{font-size:14px;font-weight:700;letter-spacing:.06em}.themes{display:flex;gap:8px;background:#ece9e3;padding:5px;border-radius:15px}.themes button{padding:11px 23px;border-radius:11px;font-size:14px;background:transparent;min-height:46px;white-space:nowrap}.themes button span{display:inline-block;margin-right:8px;font-size:18px}.themes button[aria-pressed=true]{background:#fff;box-shadow:0 2px 6px #392c4b0b;color:var(--accent);font-weight:700}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px}.timer-view{min-width:0}.time-heading{display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-size:12px;color:var(--muted)}#status{background:#e8efdf;color:#647552;padding:6px 13px;border-radius:20px;font-weight:600}#time{font-variant-numeric:tabular-nums;font-size:clamp(84px,10vw,151px);line-height:1.15;font-weight:750;letter-spacing:-.055em;margin:2px 0 17px;text-align:center}.scene{height:326px;border-radius:24px;position:relative;overflow:hidden;isolation:isolate;border:1px solid #29475408;background:#ddefef;--ground:#e0e9ce}.scene.bike{background:#e8efdd}.scene.flower{background:#f0eee0}.cloud{position:absolute;width:80px;height:22px;border-radius:40px;background:#ffffff90;top:36px}.cloud:before{content:"";position:absolute;left:14px;top:-12px;width:44px;height:33px;border-radius:40px;background:inherit}.cloud-one{left:25%}.cloud-two{right:13%;top:62px;transform:scale(.75)}.sun{position:absolute;width:49px;height:49px;border-radius:50%;background:#efe5ad;top:27px;right:28px}.distant-hills{position:absolute;bottom:22%;left:-5%;width:115%;height:80px;background:#cbdcb2;border-radius:50% 60% 0 0;display:none}.pool-deck{position:absolute;top:38%;height:20%;width:100%;background:repeating-linear-gradient(90deg,#ebe6d7 0 50px,#d6d8ce 51px 52px)}.water{position:absolute;top:48%;bottom:0;left:0;right:0;background:linear-gradient(#9cd9df,#72c0ce)}.water:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 25px,#ffffff22 26px 27px);opacity:.65}.lane{position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,#fff4eb 0 17px,#d68482 18px 34px);border-radius:10px;transform:rotate(-3deg)}.lane-one{top:25%}.lane-two{top:75%}.water-shine{position:absolute;width:100%;height:100%;background:repeating-linear-gradient(165deg,transparent 0 65px,#e5ffff40 66px 69px,transparent 70px 135px)}.journey{position:absolute;left:0;right:0;top:0;bottom:0}.traveler{position:absolute;width:clamp(118px,24%,215px);bottom:48px;left:calc(2% + var(--p) * 68%);z-index:3}.sprite{width:100%;aspect-ratio:1;background-image:url('./assets/tsubamei-atlas.png');background-size:300% 100%;background-repeat:no-repeat;position:relative}.swimmer{background-position:left}.cyclist{background-position:right;display:none}.gardener{background-position:center}.splash{position:absolute;bottom:12%;left:15%;width:65%;height:12%;border:2px solid #e3f9f8;border-radius:50%;opacity:.65;z-index:-1}.splash-two{width:95%;left:0%;bottom:6%;opacity:.35}.finish-post{position:absolute;right:5%;bottom:20%;height:112px;display:flex;align-items:center;flex-direction:column;z-index:2}.finish-post span{font-size:11px;letter-spacing:.1em;font-weight:800;background:#fffbf1;border-radius:5px;padding:7px 10px;color:#97686f}.finish-post i{height:80px;width:7px;background:repeating-linear-gradient(#fff 0 9px,#776879 10px 19px)}.scene-caption{position:absolute;top:22px;left:25px;display:flex;flex-direction:column;gap:8px}.scene-caption span{font-size:9px;letter-spacing:.2em;color:#65777a}.scene-caption strong{font-size:17px;font-weight:600}.complete-badge{display:none;position:absolute;inset:auto 0 18px;text-align:center;font-size:20px;font-weight:800;background:#fffdf2ed;border-radius:14px;padding:13px 20px;margin:auto;width:max-content;max-width:95%;z-index:6;box-shadow:0 2px 12px #53644015}.finished .complete-badge{display:block}.road,.road-line,.grass,.little-flower,.garden-actor,.plant{display:none}.bike .water,.bike .pool-deck,.flower .water,.flower .pool-deck{display:none}.bike .distant-hills{display:block}.bike .grass{display:block;position:absolute;bottom:0;width:100%;height:32%;background:#cbd8ac}.bike .road{display:block;position:absolute;bottom:10%;width:100%;height:18%;background:#d7c4a9;transform:rotate(-2deg);z-index:1}.bike .road-line{display:block;position:absolute;bottom:17%;width:120%;height:4px;background:repeating-linear-gradient(90deg,#fff6e4 0 32px,transparent 33px 63px);transform:rotate(-2deg);z-index:1}.bike .traveler{bottom:47px}.bike .cyclist{display:block}.bike .swimmer,.bike .splash{display:none}.bike .finish-post{bottom:25%}.little-flower{position:absolute;color:#f6f0d2;font-size:22px;z-index:2}.bike .little-flower{display:block}.lf-one{left:16%;bottom:6%}.lf-two{right:20%;bottom:7%;font-size:15px}.spoke{position:absolute;width:23%;height:23%;border:1px dashed #f8f8e1cc;border-radius:50%;bottom:7%;z-index:2}.spoke.back{left:26%}.spoke.front{right:1.5%}.crank{position:absolute;left:62%;bottom:17%;width:12%;height:3px;background:#716447;border-radius:6px;transform-origin:center}.flower .journey,.flower .finish-post{display:none}.flower .grass{display:block;position:absolute;bottom:0;width:100%;height:22%;background:#dce2c0}.garden-actor{position:absolute;left:15%;bottom:26px;width:clamp(160px,29%,235px)}.flower .garden-actor,.flower .plant{display:block}.plant{position:absolute;width:clamp(165px,31%,240px);height:260px;bottom:15px;right:15%;overflow:visible}.stem,.leaf,.flower-head{transform-box:fill-box;transform-origin:center bottom}.stem{transform:scaleY(var(--plant-size))}.leaf{transform:scale(var(--leaf-size))}.flower-head{transform:translateY(calc((1 - var(--plant-size)) * 85px))}.bud{opacity:var(--bud-opacity)}.bloom{transform-box:fill-box;transform-origin:center;transform:scale(var(--bloom-size))}.drops{position:absolute;right:-4%;top:72%;height:40px;width:30px;opacity:0}.drops i{position:absolute;background:#85beca;width:4px;height:8px;border-radius:100%;left:9px;top:0}.drops i:nth-child(2){left:19px;top:4px}.drops i:nth-child(3){left:28px;top:2px}.progress-label{display:flex;justify-content:space-between;margin:18px 2px 10px;font-size:12px;color:var(--muted)}.progress{height:8px;background:#e5e1ea;border-radius:10px;overflow:hidden}#progress-fill{height:100%;width:0;background:var(--accent);border-radius:10px}.settings{margin-top:0;background:#ffffffa6;border:1px solid #ece8df;border-radius:22px;padding:28px 22px 20px;align-self:stretch;display:flex;flex-direction:column}.settings-top{display:flex;justify-content:space-between;align-items:center}.tiny{font-size:8px;letter-spacing:.1em;color:#aaa3ad}.presets{display:flex;gap:7px;margin:25px 0}.presets button{flex:1;background:#f0edf2;border-radius:12px;padding:13px 4px;font-size:19px;font-weight:700;min-height:61px}.presets button span{display:block;font-size:10px;margin-top:4px;font-weight:400}.presets button[aria-pressed=true]{background:var(--accent);color:#fff}.custom-time{display:flex;align-items:center;gap:8px}.custom-time>div{flex:1;min-width:0;text-align:center}.custom-time label{font-size:12px;color:var(--muted)}.stepper{display:flex;align-items:center;gap:0;margin-top:8px;background:#f1eef3;border-radius:12px;overflow:hidden}.stepper button{background:transparent;min-width:32px;height:49px;font-size:19px;padding:0}.stepper input{width:100%;min-width:0;text-align:center;font-size:24px;background:transparent;border:0;outline-offset:-2px;appearance:textfield;-moz-appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.colon{margin-top:20px;font-size:22px;color:#aaa0b0}.hint{font-size:10px;text-align:center;margin:12px 0 25px;color:var(--muted)}hr{border:0;border-top:1px solid #ebe7ed;width:100%;margin:0}.encouragement{font-size:13px;text-align:center;margin:27px 0;color:#82748f}.primary{border-radius:13px;background:var(--accent);color:#fff;min-height:57px;width:100%;font-weight:700;font-size:16px;letter-spacing:.05em;box-shadow:0 5px 12px #72559a18}.reset{background:transparent;min-height:44px;margin-top:10px;font-size:12px;color:var(--muted)}.setting-note{text-align:center;color:var(--muted);font-size:10px;margin:auto 0 0;padding-top:20px}footer{display:flex;justify-content:space-between;font-size:10px;color:#9a939a;margin-top:29px;letter-spacing:.03em}.notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);border-radius:12px;padding:14px 20px;background:#40374fec;color:#fff;z-index:10;font-size:13px;width:max-content;max-width:90vw}dialog{border:0;border-radius:22px;max-width:500px;padding:30px;color:var(--ink);line-height:1.9;font-size:14px}dialog::backdrop{background:#32244055}dialog h2{font-size:20px;margin-top:0}dialog h3{font-size:15px}dialog ol{padding-left:21px}.running .swimmer{animation:swim 1.2s ease-in-out infinite}.running .splash{animation:ripple 1.4s ease-in-out infinite}.running .cyclist{animation:ride .7s ease-in-out infinite}.running .spoke,.running .crank{animation:spin 1s linear infinite}.running.bike .road-line{animation:road 1.6s linear infinite}.running .gardener{animation:water 2.8s ease-in-out infinite}.running .drops{opacity:1}.running .drops i{animation:drop .8s linear infinite}.running .drops i:nth-child(2){animation-delay:.3s}.running .drops i:nth-child(3){animation-delay:.55s}@keyframes swim{50%{transform:translateY(-4px) rotate(-2deg)}}@keyframes ride{50%{transform:translateY(-3px) rotate(1deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ripple{50%{transform:scaleX(1.12);opacity:.25}}@keyframes road{to{background-position:-63px 0}}@keyframes water{50%{transform:rotate(3deg)}}@keyframes drop{from{transform:translateY(0);opacity:0}25%{opacity:1}to{transform:translateY(32px);opacity:0}}.calm .scene *{animation:none!important}.calm .drops{opacity:0}@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}.drops{opacity:0}}@media(min-width:1400px){.scene{height:370px}.traveler{bottom:60px}}@media(max-width:1050px){.app{padding:24px}.workspace{grid-template-columns:minmax(0,1fr) 288px;gap:22px}.options button{padding:10px;font-size:11px}.scene{height:300px}.settings{padding:24px 16px}.brand{font-size:21px}.brand-light{font-size:17px}.theme-bar{margin-bottom:22px}.plant{right:9%;width:190px}.garden-actor{left:8%;width:190px}.scene-caption strong{font-size:15px}.traveler{width:29%}}@media(max-width:900px){.app{padding:20px 16px}header{align-items:flex-start;margin-bottom:25px;flex-wrap:wrap;gap:16px}.options{width:100%;gap:6px}.options button{flex:1}.options #help{flex:0 0 44px}.theme-bar{flex-direction:column;align-items:flex-start;gap:12px}.themes{width:100%}.themes button{flex:1;padding:10px 7px;font-size:13px}.themes button span{margin-right:4px}.workspace{grid-template-columns:1fr;gap:24px}#time{font-size:100px;margin-bottom:12px}.scene{height:290px}.settings{padding:22px}.presets{margin:20px 0}.custom-time{max-width:370px;align-self:center;width:100%}.hint{margin-bottom:20px}.encouragement{margin:20px 0}.setting-note{padding-top:12px}.settings .primary{min-height:56px}.plant{width:175px;height:240px;right:8%;bottom:6px}.garden-actor{width:180px;left:3%;bottom:20px}.scene-caption{left:18px;top:18px}.scene-caption strong{font-size:14px}.traveler{width:33%;bottom:43px;left:calc(1% + var(--p) * 61%)}footer{gap:15px;flex-wrap:wrap}}@media(max-width:390px){.garden-actor{width:150px;left:0}.plant{right:0;width:165px}.scene{height:265px}.brand{font-size:20px}.brand-light{font-size:16px}}
