:root {
    --bg-top: #0f1724;
    --bg-bottom: #08121e;
    --text: #e2e8f0;
    --accent: #93c5fd;
    --inhale: #60a5fa;
    --hold: #fbbf24;
    --exhale: #34d399;
    --ring: #1f2a44;
    --ring-active: #334155;
}

* { box-sizing: border-box; }
html, body { -webkit-tap-highlight-color: transparent; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: radial-gradient(62.5rem 43.75rem at 50% 20%, var(--bg-top), var(--bg-bottom));
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    gap: 1rem;
    padding: 1rem;
    overflow-x: hidden;
}

h1 {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    margin: 0;
    color: var(--accent);
    letter-spacing: 0.031rem;
    text-align: center;
}

.controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

label {
    font-size: clamp(0.85rem, 3vw, 1rem);
    opacity: 0.9;
}

select, button {
    padding: 0.55rem 0.9rem;
    border: none;
    border-radius: 0.625rem;
    background: #1f3b73;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.05s ease, background 0.2s ease, opacity 0.2s ease;
    touch-action: manipulation;
}

select { background: #0f274d; }
button:hover { background: #25478b; }
button:active { transform: translateY(0.0625rem); }
button:disabled { opacity: 0.6; cursor: default; }
button[aria-pressed="true"] { background: #2a519e; }

.stage {
    position: relative;
    width: min(90vw, 50rem, 26.25rem);
    max-width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.stars, .stars::before, .stars::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(0.125rem 0.125rem at 20% 30%, #ffffff30 60%, transparent 61%),
                radial-gradient(0.09375rem 0.09375rem at 70% 60%, #ffffff22 60%, transparent 61%),
                radial-gradient(0.075rem 0.075rem at 40% 80%, #ffffff18 60%, transparent 61%);
    animation: drift 30s linear infinite;
    filter: blur(0.031rem);
    pointer-events: none;
}

.stars::before { content: ""; opacity: 0.6; transform: scale(1.2); animation-duration: 45s; }
.stars::after { content: ""; opacity: 0.35; transform: scale(1.4); animation-duration: 60s; }

@keyframes drift { from { transform: translateY(0); } to { transform: translateY(1.25rem); } }

.orb-wrap {
    position: relative;
    width: 70%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -90deg, var(--ring) 0deg, var(--ring-active) 360deg);
    box-shadow: 0 0 0 0.125rem #0b1423 inset, 0 0 2.5rem #0a142466;
    transition: background 0.25s ease-in-out;
    display: grid;
    place-items: center;
    cursor: pointer;
    touch-action: manipulation;
}

.ring:active { transform: scale(0.95); }

.ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--hold);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.ring.hold::before { opacity: 1; }

.ring::after {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(10rem 8.75rem at 50% 35%, #0b1626, transparent 70%);
    box-shadow: inset 0 0 1.5rem #0a1222;
}

.orb {
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(7.5rem 8.75rem at 50% 30%, #ffffff14, transparent 65%),
                radial-gradient(circle at 50% 70%, #0ea5e970, #155e7588 60%, transparent 70%);
    box-shadow: inset 0 0 2.5rem #94a3b833, 0 0 3.125rem #38bdf833;
    transform: scale(0.8);
    transition: transform 0.8s ease, filter 0.6s ease, box-shadow 0.6s ease, background 0.4s ease;
    filter: saturate(0.9);
    will-change: transform;
    pointer-events: none;
}

.orb.inhale { transform: scale(1.12); filter: saturate(1.1); box-shadow: inset 0 0 2.5rem #93c5fd55, 0 0 4rem #60a5fa66; }
.orb.hold { transform: scale(1.16); filter: saturate(1.05); box-shadow: inset 0 0 2.8125rem #fde68a4d, 0 0 3.4375rem #fbbf2450; }
.orb.exhale { transform: scale(0.84); filter: saturate(0.95); box-shadow: inset 0 0 2.1875rem #86efac44, 0 0 3.4375rem #34d39955; }

.readout {
    position: absolute;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    text-align: center;
    user-select: none;
    pointer-events: none;
}

.phase { font-size: clamp(1rem, 4vw, 1.2rem); color: #a5b4fc; letter-spacing: 0.031rem; }
.time { font-size: clamp(2.5rem, 10vw, 3.25rem); font-weight: 800; }
.sub { font-size: clamp(0.8rem, 3vw, 0.95rem); opacity: 0.8; }

.footer {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    opacity: 0.9;
    font-size: clamp(0.8rem, 3vw, 1rem);
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

@media (pointer: coarse), (max-width: 600px) {
    body { padding: 0.5rem; gap: 0.5rem; }
    .controls { flex-direction: column; gap: 0.5rem; }
    select, button { padding: 0.8rem 1rem; border-radius: 0.75rem; font-size: 1rem; }
    .stage { width: 85vw; }
    .stars, .stars::before, .stars::after { display: none; }
}

@media (max-width: 350px) { .stage { width: 75vw; } }

@media (prefers-reduced-motion: reduce) {
    .stars, .stars::before, .stars::after { animation: none; }
    .orb { transition: none; }
    .orb.inhale, .orb.hold, .orb.exhale { transform: none; }
}