:root{--blue:#2c3e50;--gold:#f4b62f;--smoke:#f5f5f5;--coral:#ff7952;--teal:#62a29c}*{box-sizing:border-box}body{color:var(--smoke);background:var(--blue);margin:0;font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer}.app-shell{background:var(--blue);justify-content:center;align-items:center;min-height:100svh;padding:25px 20px 27px;display:flex;position:relative;overflow:hidden}.welcome-card,.timer-card,.completion-card,.safety-card,.countdown-card,.ready-card{width:min(100%,480px);margin:auto}.welcome-card{text-align:center}.eyebrow{letter-spacing:.18em;color:var(--gold);margin:0;font-size:10px;font-weight:900}h1{color:var(--smoke);letter-spacing:-.075em;margin:0;font-size:clamp(38px,11vw,57px);font-weight:900;line-height:.89}.title-wrap{place-items:center;height:225px;margin:5px 0 16px;display:grid;position:relative}.title-wrap h1{z-index:1;text-align:center;position:relative}.ghost-sun{opacity:.2;border:3px solid var(--gold);border-radius:50%;width:205px;height:205px;position:absolute}.ghost-sun span{border:3px solid var(--gold);border-radius:50%;position:absolute;inset:18px}.ghost-sun i{background:var(--gold);transform-origin:1.5px 131px;border-radius:99px;width:3px;height:18px;position:absolute;top:-29px;left:calc(50% - 1.5px)}.last-completed{color:var(--blue);background:var(--teal);border-radius:999px;margin:-7px 0 12px;padding:6px 10px;font-size:12px;font-weight:800;display:inline-block}.duration-section{margin:0 0 17px}.duration-section>p{letter-spacing:.16em;color:var(--smoke);margin:0 0 4px;font-size:10px;font-weight:900}.movement-count{color:var(--gold);letter-spacing:.16em;margin-bottom:11px;font-size:11px;font-weight:900;display:block}.duration-options{grid-template-columns:1fr 1fr;gap:10px;display:grid}.duration-options button{min-height:58px;color:var(--smoke);text-align:center;background:0 0;border:2px solid #f5f5f57a;border-radius:17px;padding:11px 9px}.duration-options button.selected{background:var(--gold);color:var(--blue);border-color:var(--gold);box-shadow:4px 4px 0 var(--coral)}.duration-options strong{font-size:14px;line-height:1.08}.primary-btn{color:var(--blue);background:var(--gold);width:100%;min-height:55px;box-shadow:0 5px 0 var(--coral);border:0;border-radius:18px;padding:14px 22px;font-size:16px;font-weight:900;transition:transform .15s,box-shadow .15s}.primary-btn:active{box-shadow:0 2px 0 var(--coral);transform:translateY(3px)}.start-btn{margin-top:2px}.timer-card{text-align:center}.timer-top{text-align:left;justify-content:space-between;align-items:center;gap:12px;font-size:12px;font-weight:850;display:flex}.timer-top span:first-child{max-width:205px}.timer-top span:last-child{color:var(--gold);white-space:nowrap}.progress-track{background:#f5f5f540;border-radius:99px;width:100%;height:5px;margin:13px 0 43px;overflow:hidden}.progress-track div{background:var(--gold);border-radius:99px;height:100%;transition:width .4s}.movement-heading h1{max-width:430px;margin:9px auto 7px;font-size:clamp(34px,9vw,50px)}.movement-heading>p:last-child{color:var(--smoke);opacity:.78;margin:0;font-size:13px}.timer-orbit{aspect-ratio:1;width:min(76vw,310px);margin:33px auto 26px;position:relative}.timer-orbit svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-orbit circle{fill:none;stroke-width:15px}.timer-base{stroke:#f5f5f53d}.timer-progress{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .8s linear}.time{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.time strong{color:var(--smoke);letter-spacing:-.08em;font-size:72px;line-height:.9}.time span{color:var(--smoke);opacity:.75;margin-top:7px;font-size:12px}.controls{grid-template-columns:1.35fr 1fr;gap:10px;display:grid}.pause-btn,.skip-btn{border-radius:17px;min-height:53px;font-size:15px;font-weight:900}.pause-btn{background:var(--gold);color:var(--blue);border:0}.skip-btn{color:var(--smoke);background:0 0;border:1.5px solid #f5f5f599}.previous{color:var(--smoke);background:0 0;border:0;margin-top:19px;font-size:14px;font-weight:800}.previous:disabled{visibility:hidden}.countdown-card,.ready-card{text-align:center;animation:.3s both appear}.countdown-word{color:var(--smoke);letter-spacing:.14em;margin:0;font-size:14px;font-weight:900}.countdown-movement{color:var(--gold);letter-spacing:-.055em;margin:12px 0 13px;font-size:clamp(28px,8vw,42px);font-weight:900;line-height:.95}.countdown-in{margin-top:0}.countdown-card strong{color:var(--gold);letter-spacing:-.1em;margin:18px 0 0;font-size:min(42vw,170px);line-height:.85;display:block}.completion-shell{padding-bottom:48px}.completion-card,.safety-card{text-align:center;padding:24px 4px}.completion-card h1{margin:16px 0 14px;font-size:clamp(34px,9vw,47px);line-height:.93}.completion-card>p:not(.eyebrow),.safety-card>p:not(.eyebrow){max-width:370px;margin:0 auto;font-size:16px;line-height:1.45}.done-badge{background:var(--gold);width:56px;height:56px;color:var(--blue);border-radius:50%;place-items:center;margin:0 auto 20px;font-size:29px;font-weight:900;display:grid}.completion-card .primary-btn{margin-top:31px}.text-btn{color:var(--smoke);background:0 0;border:0;margin-top:23px;font-size:14px;font-weight:800}.site-footer{text-align:center;color:var(--smoke);opacity:.63;font-size:11px;text-decoration:none;position:absolute;bottom:18px;left:0;right:0}.site-footer:hover{color:var(--gold);opacity:1}.sun-dot{background:var(--gold);width:46px;height:46px;color:var(--blue);border-radius:50%;place-items:center;margin:0 auto 20px;font-size:23px;display:grid}.ready-progress{color:var(--gold);margin:10px 0 13px;font-size:13px;font-weight:900}.ready-line{background:#f5f5f53d;border-radius:99px;width:100%;height:5px;margin-bottom:45px;overflow:hidden}.ready-line span{border-radius:inherit;background:var(--gold);width:11.11%;height:100%;display:block}.ready-label{margin-bottom:12px}.ready-card h1{max-width:430px;margin:0 auto;font-size:clamp(43px,11vw,58px)}.ready-duration{opacity:.8;margin:14px 0 32px;font-size:14px}.ready-start{max-width:340px}@keyframes appear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.movement-announce{animation:.42s cubic-bezier(.2,.9,.28,1.18) both movement-slam}@keyframes movement-slam{0%{opacity:0;transform:translateY(32px)scale(.94)}65%{opacity:1;transform:translateY(-4px)scale(1.025)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width>=700px){.app-shell{padding:48px}.title-wrap{height:250px}}@media (prefers-reduced-motion:reduce){.movement-announce{animation:none}}
