:root{
    --bg:#0f1221; --panel:#151935; --text:#f4f7ff; --muted:#aab0d6;
    --grad1:#8f7aff; --grad2:#ff7ab6; --grad3:#4de1d3;
    --accent:#4de1d3; --rad:16px;
}

*{box-sizing: border-box} html{scroll-behavior:smooth}

body{
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: radial-gradient(900px 600px at 15% 10%, rgba(143,122,255,.20), transparent), radial-gradient(700px 500px at 90% 20%, rgba(255,122,182,.18), transparent), radial-gradient(600px 400px at 60% 80%, rgba(77,225,211,.18), transparent), linear-gradient(180deg, var(--bg), var(--bg)); color:var(--text);;
}

.wrap{min-height: 100vh; 
    display: grid; 
    place-items: center;
    padding: 2rem;
}

.panel{
    width: min(560px, 92vw);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--rad);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding:1.6rem
}
h1{
    margin:.2rem 0 1rem; 
    font-size: 1.6rem; 
    letter-spacing:.2px;
}
.muted{
    color:var(--muted);
}
.mode{
    display:flex;
    gap:.6rem;
    margin:.4rem 0 1.2rem;
    flex-wrap: wrap;
}
.chip{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: .4rem .8rem;
    background: rgba(255,255,255,.03);
    color: var(--text);
    cursor: pointer;
}
.chip.active{
    background: linear-gradient(135deg, var(--grad1), var(--grad2));
    color: #0e1020;
}
.timer{
    display:flex;
    justify-content: center;
    align-items: baseline;
    font-size: clamp(3rem, 14vw, 5rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin: .6rem 0 1.2rem
}
.timer .sep{
    opacity: .9;
}
.controls{
    display:flex;
    gap: .7rem;
    flex-wrap:wrap;
    justify-content: center;
}
.btn{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--grad1), var(--grad2));
    color: #0d0f1a;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.btn:hover{transform: translateY(-1px); }
.btn:active{transform: translateY(0); }
.btn.ghost{
    background: rgba(255,255,255,.03);
    color: var(--text);
    box-shadow:none;
}
.btn[disabled]{
    opacity: .6;
    cursor:not-allowed;
}
kbd{
    background: #0d1020;
    border: 1px solid rgba(143,122,255,.15);
    border-radius: 6px;
    padding: .15rem .35rem;
    font-size: .85em;
}