*{
    box-sizing:border-box;
    font-family: 'Inter', system-ui;
}

body{
    margin:0;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    overflow:hidden;
}

/* animated gradient background */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:linear-gradient(270deg,#020617,#020617,#0f172a,#020617);
    background-size:400% 400%;
    animation:bgMove 18s ease infinite;
    z-index:-2;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* glass card */

.app{
    backdrop-filter: blur(22px);
    background: rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    padding:45px;
    border-radius:28px;
    text-align:center;
    width:360px;
    box-shadow:0 25px 80px rgba(0,0,0,0.6);
}

/* title */

.title{
    letter-spacing:3px;
    font-weight:600;
    opacity:0.85;
}

/* circle */

.circle{
    position:relative;
    width:260px;
    height:260px;
    margin:30px auto;
}

svg{ transform:rotate(-90deg); }

.bg{
    fill:none;
    stroke:#1e293b;
    stroke-width:14;
}

.progress{
    fill:none;
    stroke:#22c55e;
    stroke-width:14;
    stroke-linecap:round;
    stroke-dasharray:691;
    transition:stroke 0.5s, filter 0.5s;
}

/* breathing glow */

.running .progress{
    filter:drop-shadow(0 0 8px currentColor)
           drop-shadow(0 0 18px currentColor);
    animation:breath 2.2s ease-in-out infinite;
}

@keyframes breath{
    0%,100%{stroke-width:14;}
    50%{stroke-width:18;}
}

/* time */

.time{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:46px;
    font-weight:600;
    transition:transform .25s;
}

.tick{
    animation:tick .35s ease;
}

@keyframes tick{
    0%{transform:translate(-50%,-60%) scale(.9);opacity:.3;}
    100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
}

.mode{
    font-size:13px;
    margin-top:10px;
    opacity:.7;
    letter-spacing:2px;
}

/* buttons */

.controls{
    margin-top:25px;
}

button{
    background:rgba(255,255,255,0.06);
    border:none;
    color:white;
    padding:12px 18px;
    margin:8px;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
    backdrop-filter:blur(8px);
}

button:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,0.12);
}

button:active{
    transform:scale(.95);
}

/* stats */

.sessions,.stats{
    margin-top:10px;
    opacity:.7;
    font-size:14px;
}

/* pulse */

.pulse{
    animation:pulse 0.7s ease;
}

@keyframes pulse{
    0%{transform:scale(1);}
    40%{transform:scale(1.06);}
    100%{transform:scale(1);}
}