:root{color-scheme:dark;font-family:Inter,"Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;background:#070b14;color:#f8fafc}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 18% 15%,#22d3ee22,transparent 30%),radial-gradient(circle at 82% 85%,#818cf82b,transparent 33%),#070b14}
button,input{font:inherit}button{cursor:pointer}
.card{width:min(100%,520px);padding:38px;border:1px solid #94a3b82b;border-radius:28px;background:#0f172ad9;box-shadow:0 28px 90px #0000006b;backdrop-filter:blur(18px);text-align:center}
.eyebrow{margin:0 0 8px;color:#67e8f9;font-size:.72rem;font-weight:800;letter-spacing:.22em}
h1{margin:0;font-size:clamp(2rem,8vw,3.2rem);letter-spacing:-.05em}
.subtitle{margin:10px 0 30px;color:#94a3b8}
.progress{--progress:0deg;width:min(68vw,280px);aspect-ratio:1;margin:0 auto 30px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#22d3ee var(--progress),#33415580 0);box-shadow:0 0 60px #22d3ee1a}
.progress-inner{width:calc(100% - 14px);aspect-ratio:1;display:grid;place-content:center;border-radius:50%;background:#0f172a}
#status{margin:0 0 3px;color:#94a3b8;font-size:.8rem;font-weight:700;letter-spacing:.12em}
#display{font-size:clamp(3.2rem,14vw,5rem);font-variant-numeric:tabular-nums;font-weight:750;letter-spacing:-.07em}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
button{min-height:46px;border:0;border-radius:13px;font-weight:700;transition:transform .15s,background .15s}
.preset,.secondary{background:#1e293b;color:#cbd5e1}.preset:hover,.preset.active{background:#164e63;color:#cffafe}
.custom{display:flex;align-items:end;justify-content:center;gap:8px;margin-bottom:22px}
.custom label{display:grid;gap:5px;color:#94a3b8;font-size:.75rem;text-align:left}
.custom input{width:72px;height:46px;border:1px solid #334155;border-radius:12px;outline:0;background:#0f172a;color:#f8fafc;font-weight:700;text-align:center}
.custom input:focus{border-color:#22d3ee;box-shadow:0 0 0 3px #22d3ee1f}.custom>span{padding-bottom:12px;color:#64748b;font-weight:800}
.set{padding:0 18px;background:#334155;color:#f8fafc}.controls{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}
.primary{background:linear-gradient(135deg,#22d3ee,#818cf8);color:#07111f}
button:hover{transform:translateY(-1px)}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid #67e8f98c;outline-offset:3px}
.shortcut{margin:22px 0 0;color:#64748b;font-size:.75rem}
@media(max-width:520px){body{padding:14px}.card{padding:28px 18px;border-radius:22px}.presets{grid-template-columns:repeat(2,1fr)}.shortcut{display:none}}