.interval-page{--phase-accent:#ffa000;--phase-accent-hover:#ffb300;--phase-bg:#faf6e8;--phase-card-glow:#ffa0001f;--color-dark:#2c2c2a;--color-light:#fff;--color-bg-base:#f5f3ed;min-height:100vh;color:var(--color-dark);background-color:var(--phase-bg);justify-content:center;align-items:center;padding:2.4rem;font-family:Fredoka,Plus Jakarta Sans,Hiragino Maru Gothic ProN,Kosugi Maru,Yu Gothic UI,sans-serif;transition:background-color .4s;display:flex}.interval-page[data-phase=warmup],.interval-page[data-phase=ready]{--phase-accent:#ffa000;--phase-bg:#faf6e8;--phase-card-glow:#ffa0001f}.interval-page[data-phase=work]{--phase-accent:#ff4a5a;--phase-bg:#fceaeb;--phase-card-glow:#ff4a5a1f}.interval-page[data-phase=rest]{--phase-accent:#38b0de;--phase-bg:#eaf7fc;--phase-card-glow:#38b0de1f}.interval-page[data-phase=complete]{--phase-accent:#4caf50;--phase-bg:#eaf6eb;--phase-card-glow:#4caf501f}.interval__field-label{color:#5c5b56;font-size:1.2rem;font-weight:700}.interval__field-unit{color:#7d7c75;text-align:right;font-size:1.1rem;font-weight:700}.interval{flex-direction:column;gap:2.4rem;width:min(100%,480px);margin:0 auto;display:flex}.interval__header{align-items:center;gap:1.6rem;display:flex}.interval__back{border:3px solid var(--color-dark);width:4.8rem;height:4.8rem;color:var(--color-dark);background:var(--color-light);box-shadow:0 4px 0 var(--color-dark);cursor:pointer;border-radius:16px;justify-content:center;align-items:center;transition:transform .1s,box-shadow .1s;display:inline-flex}.interval__back:hover{box-shadow:0 6px 0 var(--color-dark);transform:translateY(-2px)}.interval__back:active{box-shadow:0 2px 0 var(--color-dark);transform:translateY(2px)}.interval__kicker{color:#7d7c75;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem;font-family:Plus Jakarta Sans,sans-serif;font-size:1.1rem;font-weight:700}.interval__title{color:var(--color-dark);font-size:2.8rem;font-weight:800;line-height:1.1}.interval__stage{border:3px solid var(--color-dark);background:var(--color-light);box-shadow:0 10px 0 var(--color-dark), 0 8px 30px var(--phase-card-glow);border-radius:24px;flex-direction:column;justify-content:center;padding:3.6rem 2.4rem;transition:box-shadow .4s;display:flex;position:relative;overflow:hidden}.interval__phase{color:var(--phase-accent);text-align:center;letter-spacing:.06em;text-shadow:1px 1px #0000000d;font-family:Fredoka,Plus Jakarta Sans,sans-serif;font-size:2rem;font-weight:800;transition:color .4s}.interval__time{font-variant-numeric:tabular-nums;text-align:center;color:var(--color-dark);margin-top:.8rem;font-family:Fredoka,Plus Jakarta Sans,sans-serif;font-size:clamp(7rem,20vw,11rem);font-weight:800;line-height:1}.interval__meta{color:#5c5b56;flex-wrap:wrap;justify-content:center;gap:1.6rem;margin-top:1.6rem;font-size:1.3rem;font-weight:700;display:flex}.interval__progress{border:3px solid var(--color-dark);background:#e8e6df;border-radius:999px;height:1.4rem;margin-top:2.4rem;position:relative;overflow:hidden}.interval__progress span{border-radius:inherit;background:var(--phase-accent);border-right:3px solid var(--color-dark);box-sizing:content-box;width:0%;height:100%;transition:width .12s linear,background-color .4s;display:block}.interval__controls{grid-template-columns:1fr 4.8rem 4.8rem;gap:1.2rem;display:grid}.interval[data-state=running] .interval__controls{grid-template-columns:repeat(2,minmax(0,1fr))}.interval[data-state=running] .interval__button{display:none}.interval[data-state=running] .interval__icon-button{opacity:1;cursor:pointer;gap:.8rem;width:auto;padding:0 1.6rem}.interval__button,.interval__icon-button{border:3px solid var(--color-dark);cursor:pointer;min-height:5rem;box-shadow:0 6px 0 var(--color-dark);color:var(--color-dark);background:var(--color-light);border-radius:18px;justify-content:center;align-items:center;gap:.8rem;font-size:1.6rem;font-weight:800;transition:transform .1s,box-shadow .1s,background-color .2s;display:inline-flex}.interval__button{background:var(--phase-accent);color:var(--color-light);text-shadow:1px 1px #00000026}.interval-page[data-phase=ready] .interval__button,.interval-page[data-phase=warmup] .interval__button{color:var(--color-dark);text-shadow:none}.interval__button:hover,.interval__icon-button:hover{box-shadow:0 8px 0 var(--color-dark);transform:translateY(-2px)}.interval__button:active,.interval__icon-button:active{box-shadow:0 2px 0 var(--color-dark);transform:translateY(4px)}.interval__icon-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:0 4px 0 var(--color-dark)!important;transform:none!important}.interval[data-state=running] .interval__icon-button[data-pause-button]{color:var(--color-light);background:#38b0de}.interval__icon-button[data-reset-button]{background:var(--color-light)}.interval__control-text{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.interval[data-state=running] .interval__control-text{clip:auto;width:auto;height:auto;color:inherit;white-space:normal;font-size:1.5rem;font-weight:800;position:static;overflow:visible}.interval__settings{grid-template-columns:repeat(2,1fr);gap:1.2rem;display:grid}.interval__field{border:3px solid var(--color-dark);background:var(--color-light);border-radius:18px;flex-direction:column;gap:.6rem;padding:1.4rem;display:flex;box-shadow:0 5px #2c2c280f}.interval__field input{border:2px solid var(--color-dark);width:100%;color:var(--color-dark);text-align:center;background:#f5f3ed;border-radius:10px;outline:none;padding:.6rem;font-family:Fredoka,Plus Jakarta Sans,sans-serif;font-size:2.2rem;font-weight:800;transition:border-color .2s,background-color .2s}.interval__field input:focus{border-color:var(--phase-accent);background:#fff}.interval__options{gap:1.2rem;display:flex}.interval__toggle{border:3px solid var(--color-dark);min-height:4.8rem;color:var(--color-dark);background:var(--color-light);cursor:pointer;user-select:none;border-radius:16px;flex:1;justify-content:space-between;align-items:center;padding:0 1.6rem;font-size:1.4rem;font-weight:800;display:inline-flex;box-shadow:0 5px #2c2c280f}.interval__toggle input[type=checkbox]{appearance:none;border:2px solid var(--color-dark);cursor:pointer;background-color:#e8e6df;border-radius:99px;outline:none;width:44px;height:24px;transition:background-color .2s;position:relative}.interval__toggle input[type=checkbox]:after{content:"";border:2px solid var(--color-dark);background-color:var(--color-light);border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:1px;left:1px}.interval__toggle input[type=checkbox]:checked{background-color:#4caf50}.interval__toggle input[type=checkbox]:checked:after{transform:translate(20px)}.interval__status{color:#7d7c75;text-align:center;min-height:2.4rem;font-size:1.3rem;font-weight:600;line-height:1.6}.interval__dialog{border:4px solid var(--color-dark);width:min(100vw - 3.2rem,38rem);color:var(--color-dark);background:var(--color-light);border-radius:24px;padding:0;overflow:hidden;box-shadow:0 16px #2c2c2826}.interval__dialog::backdrop{backdrop-filter:blur(4px);background:#2c2c2880}.interval__dialog-card{flex-direction:column;gap:1.8rem;padding:2.4rem;display:flex}.interval__dialog-title{text-align:center;font-size:2rem;font-weight:800}.interval__dialog-text{color:#5c5b56;text-align:center;font-size:1.4rem;line-height:1.6}.interval__dialog-actions{grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.6rem;display:grid}.interval__dialog-button{border:3px solid var(--color-dark);cursor:pointer;min-height:4.6rem;box-shadow:0 4px 0 var(--color-dark);border-radius:14px;font-size:1.5rem;font-weight:800;transition:transform .1s,box-shadow .1s}.interval__dialog-button:active{box-shadow:0 1px 0 var(--color-dark);transform:translateY(3px)}.interval__dialog-button--secondary{color:var(--color-dark);background:#e8e6df}.interval__dialog-button--danger{color:var(--color-light);text-shadow:1px 1px #0000001a;background:#ff4a5a}.interval__visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=480px){.interval-page{padding:1.6rem}.interval{gap:1.6rem}.interval__stage{padding:2.8rem 1.6rem}}@media (prefers-reduced-motion:reduce){.interval__progress span{transition:none}}