.it-stage { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0; }
.it-clock { --progress: 0%; --cue: #c38cf5; width: min(380px,80vw); aspect-ratio: 1; border-radius: 50%; padding: 10px; margin: 24px 0 18px; background: conic-gradient(var(--cue) var(--progress),#46304f 0); box-shadow: 0 0 65px #8c41c626; }
.it-clock > div { height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 20%,#3b2550,#191021 75%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; }
.it-clock strong { display: block; font: 800 clamp(2.5rem,8vw,4.7rem)/1.4 ui-monospace,monospace; font-variant-numeric: tabular-nums; letter-spacing: -.07em; }
.it-clock span { color: #e5c8ff; max-width: 100%; overflow-wrap: anywhere; font-size: 1.15rem; }
.it-clock small { color: #c7b3d8; }
.it-controls { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.it-controls #itStart { min-width: 160px; min-height: 56px; font-size: 1.15rem; }
.it-next { color: #d1b8e6; min-height: 28px; }
.it-stage > label { width: min(320px,100%); margin-top: 20px; }
.it-interval { display: grid; grid-template-columns: minmax(0,2fr) 100px 100px auto; align-items: end; gap: 12px; }
#itStats { margin-top: 20px; }
@media(max-width:850px) { .it-interval { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .it-interval label:first-child { grid-column: 1/-1; } }
@media(max-width:440px) { .it-controls { gap: 8px; } .it-controls button { font-size: .8rem; } .it-controls #itStart { min-width: 130px; } .it-clock { width: min(310px,74vw); padding: 8px; } .it-clock > div { padding: 20px; } }