:root{font-family:Noto Sans JP,Yu Gothic UI,Hiragino Kaku Gothic ProN,sans-serif;color:#17231f;background:#f4f6f2;font-synthesis:none;--green: #006e54;--green-dark: #005541;--purple: #895b8a;--paper: #fbfcf8}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,a{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,35vw) 1fr;background:var(--paper)}.settings{background:var(--green);color:#fff;padding:clamp(28px,4vh,52px) clamp(28px,3.2vw,54px);display:flex;flex-direction:column;box-shadow:12px 0 40px #0045351f;z-index:2}.brand{display:flex;align-items:flex-start;gap:20px;margin-bottom:clamp(30px,5vh,58px)}.brand h1{font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:clamp(38px,4vw,62px);line-height:.78;letter-spacing:.01em;margin:0 0 18px}.brand p{margin:0;color:#ffffff9e;font-size:12px;letter-spacing:.12em}.brand-marks{display:flex;align-items:flex-start;gap:7px;margin-top:5px}.brand-mark{width:30px;display:flex;align-items:center;gap:3px}.brand-mark span{display:block;width:6px;border-radius:4px}.brand-mark.green span{background:#58a98f}.brand-mark.purple span{background:var(--purple)}.brand-mark span:nth-child(1),.brand-mark span:nth-child(3){height:20px}.brand-mark span:nth-child(2){height:32px}.setting-group{margin-bottom:clamp(20px,3vh,34px)}.setting-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.setting-heading span{font-family:Arial Narrow,sans-serif;font-size:13px;color:#ffffff80;letter-spacing:.1em}.setting-heading h2{margin:0;font-size:15px;letter-spacing:.08em;font-weight:600}.option-grid{display:grid;border:1px solid rgba(255,255,255,.35)}.option-grid.four{grid-template-columns:repeat(4,1fr)}.option-grid.three{grid-template-columns:repeat(3,1fr)}.option-grid button{min-width:0;min-height:52px;border:0;border-right:1px solid rgba(255,255,255,.3);color:#fff;background:transparent;font-weight:700;cursor:pointer;transition:background .2s,color .2s,transform .15s}.option-grid button:last-child{border-right:0}.option-grid button:hover:not(.active){background:#ffffff14}.option-grid button:active{transform:scale(.97)}.option-grid button.active{background:var(--paper);color:var(--green-dark)}.option-grid small{font-size:.72em;font-weight:600;margin-left:2px;white-space:nowrap}.pace button{font-size:13px}.locked .option-grid{opacity:.5;pointer-events:none}.start-button{width:100%;min-height:72px;border:0;margin-top:auto;background:var(--paper);color:var(--purple);font-size:20px;font-weight:800;letter-spacing:.15em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:16px;transition:transform .2s,box-shadow .2s,opacity .2s}.start-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 30px #00000029}.start-button:disabled{cursor:not-allowed;opacity:.32}.play-icon{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid currentColor}.counter-area{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 5vw 82px;overflow:hidden}.counter-area:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(#006e5411 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(to right,transparent,black 40%,black);mask-image:linear-gradient(to right,transparent,black 40%,black)}.sound-toggle{position:absolute;top:28px;right:32px;width:44px;height:44px;border:1px solid #d9dfd9;background:transparent;color:var(--green);cursor:pointer;display:grid;place-items:center}.sound-toggle svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.status{display:flex;align-items:center;gap:9px;color:#66736d;font-size:13px;letter-spacing:.12em;margin-bottom:22px;z-index:1}.status-dot{width:7px;height:7px;border-radius:50%;background:#a9b1ad}.status-dot.live{background:var(--purple);box-shadow:0 0 0 5px #895b8a19;animation:pulse 1s infinite}.ring{--progress: 1deg;position:relative;width:min(58vh,520px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:conic-gradient(from -90deg,var(--purple) var(--progress),#dce3dd var(--progress));box-shadow:0 22px 70px #233e3417;z-index:1}.ring:before{content:"";position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px;border:1px solid #dbe0dc;border-radius:50%;background:repeating-conic-gradient(from -90deg,#7b8580 0deg 1deg,transparent 1deg 6deg);mask:radial-gradient(transparent 70%,black 71% 72%,transparent 73%);opacity:.45}.ring-track{position:absolute;top:9px;right:9px;bottom:9px;left:9px;background:var(--paper);border-radius:50%}.ring-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}.phase-label{font-family:Arial Narrow,sans-serif;font-weight:700;color:var(--purple);letter-spacing:.3em;font-size:14px;margin-right:-.3em}.ring strong{font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:clamp(116px,17vw,232px);line-height:.9;letter-spacing:-.05em;color:#202825;font-variant-numeric:tabular-nums}.ring strong.word{font-size:clamp(64px,9vw,120px);letter-spacing:.02em;color:var(--green)}.ring strong.start{font-size:clamp(58px,8vw,108px);letter-spacing:.01em;color:var(--purple)}.set-label{border-top:2px solid var(--purple);padding:12px 28px 0;margin-top:18px;font-family:Arial Narrow,sans-serif;font-size:23px;font-weight:700;letter-spacing:.12em}.ring.cooldown{background:conic-gradient(from -90deg,var(--green) var(--progress),#dce3dd var(--progress))}.ring.cooldown .phase-label{color:var(--green)}.ring.cooldown strong{color:#58a98f}.ring.paused{filter:saturate(.3)}.session-actions{display:flex;gap:12px;min-height:46px;margin-top:22px;z-index:1}.session-actions button{min-width:110px;border:1px solid;padding:10px 18px;background:var(--paper);font-size:13px;font-weight:700;cursor:pointer}.pause-button{color:var(--purple);border-color:var(--purple)!important}.reset-button{color:#68736f;border-color:#bdc7c2!important}.summary{position:absolute;bottom:68px;display:flex;align-items:center;gap:18px;color:#79847f;font-size:11px;letter-spacing:.08em;z-index:1}.summary b{color:var(--green);font-family:Arial Narrow,sans-serif;font-size:20px;margin-right:2px}.summary i{width:2px;height:2px;background:var(--purple);border-radius:50%}footer{position:absolute;bottom:20px;z-index:1}footer a{color:var(--green);text-decoration:none;font-size:11px;letter-spacing:.12em;border-bottom:1px solid transparent}footer a:hover{border-bottom-color:var(--purple)}footer span{color:var(--purple);margin-left:6px}@keyframes pulse{50%{transform:scale(.7);opacity:.7}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:850px){.app-shell{display:flex;flex-direction:column}.settings{min-height:auto;padding:24px 20px 28px}.brand{margin-bottom:26px}.brand h1{font-size:42px}.brand p{display:none}.setting-group{margin-bottom:20px}.start-button{min-height:62px;margin-top:8px}.counter-area{min-height:680px;padding:70px 20px 104px}.ring{width:min(82vw,450px)}.ring strong{font-size:clamp(100px,35vw,180px)}.summary{bottom:68px;gap:9px;flex-wrap:wrap;justify-content:center;width:calc(100% - 32px)}}@media(max-width:420px){.settings{padding-inline:16px}.brand{gap:13px}.brand-mark{width:24px}.option-grid button{min-height:48px;font-size:13px}.pace button{font-size:11px}.counter-area{min-height:600px}.sound-toggle{top:18px;right:18px}.ring{width:84vw}.ring:before{top:-10px;right:-10px;bottom:-10px;left:-10px}.set-label{font-size:19px}}