:root{
  --bg1:#ecfbff;
  --bg2:#dff8f1;
  --blue:#3d8dff;
  --mint:#39d6b3;
  --ink:#17324d;
  --muted:#607487;
  --glass:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.9);
  --danger:#ff5d7a;
  --ok:#14b88a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(61,141,255,.28), transparent 28rem),
    radial-gradient(circle at 85% 15%, rgba(57,214,179,.30), transparent 28rem),
    linear-gradient(145deg,var(--bg1),var(--bg2));
}
.app{
  width:min(980px,100%);
  margin:0 auto;
  padding:18px;
  display:grid;
  gap:14px;
}
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 22px 60px rgba(31,90,130,.16);
  backdrop-filter: blur(18px);
}
.hero{
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.eyebrow{
  margin:0 0 4px;
  color:var(--blue);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
}
h1{margin:0;font-size:clamp(2rem,8vw,4rem);letter-spacing:-.06em}
.sub{margin:.2rem 0 0;color:var(--muted)}
.iconBtn,.pill,button,select{
  font:inherit;
}
.iconBtn{
  width:52px;height:52px;border:0;border-radius:18px;
  background:white;box-shadow:0 12px 25px rgba(31,90,130,.12);
}
.modeRow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.pill{
  border:1px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.58);
  padding:13px 10px;
  border-radius:999px;
  color:var(--ink);
  font-weight:800;
}
.pill.active{
  color:white;
  background:linear-gradient(135deg,var(--blue),var(--mint));
}
.settings{
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
label{
  display:grid;
  gap:7px;
  font-weight:800;
  color:var(--muted);
  font-size:.92rem;
}
select{
  width:100%;
  border:0;
  border-radius:18px;
  padding:13px 14px;
  background:white;
  color:var(--ink);
  font-weight:800;
}
.clockCard{
  padding:16px;
  display:grid;
  justify-items:center;
  gap:12px;
}
.scorebar{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
}
.scorebar span{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.9);
  padding:9px 13px;
  border-radius:999px;
}
.task{
  font-size:clamp(1.2rem,4vw,2.1rem);
  font-weight:950;
  text-align:center;
  letter-spacing:-.03em;
}
.clockWrap{
  width:min(72vw,430px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  touch-action:none;
}
svg{width:100%;height:100%;overflow:visible}
.clockFace{fill:rgba(255,255,255,.82);stroke:white;stroke-width:4}
.innerFace{fill:rgba(255,255,255,.42);stroke:rgba(61,141,255,.16);stroke-width:2}
.tick{stroke:#5d7285;stroke-width:3;stroke-linecap:round;opacity:.55}
.tick.big{stroke-width:6;opacity:.9}
.num{
  font-weight:1000;
  font-size:25px;
  fill:var(--ink);
  text-anchor:middle;
  dominant-baseline:middle;
}
.hand{stroke-linecap:round;transform-origin:160px 160px}
.hourHand{stroke:var(--ink);stroke-width:11}
.minuteHand{stroke:var(--blue);stroke-width:7}
.pin{fill:var(--mint);stroke:white;stroke-width:4}
.pinGlow{fill:rgba(57,214,179,.18)}
.answerArea{
  width:100%;
  display:grid;
  gap:10px;
}
.choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.choice{
  border:0;
  border-radius:20px;
  padding:15px 10px;
  background:white;
  color:var(--ink);
  font-weight:950;
  box-shadow:0 12px 24px rgba(31,90,130,.11);
}
.choice.selected{
  outline:4px solid rgba(61,141,255,.28);
}
.digitalSet{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.digitalSet input{
  width:92px;
  border:0;
  border-radius:20px;
  padding:14px 12px;
  text-align:center;
  font-size:1.5rem;
  font-weight:950;
  color:var(--ink);
  background:white;
}
.feedback{
  min-height:32px;
  text-align:center;
  font-weight:950;
  font-size:1.1rem;
}
.feedback.ok{color:var(--ok)}
.feedback.bad{color:var(--danger)}
.actions{
  display:grid;
  width:100%;
  grid-template-columns:2fr 1fr 1fr;
  gap:10px;
}
button{
  cursor:pointer;
  border:0;
  border-radius:20px;
  padding:14px 12px;
  font-weight:950;
}
.primary{
  color:white;
  background:linear-gradient(135deg,var(--blue),var(--mint));
  box-shadow:0 14px 30px rgba(61,141,255,.22);
}
.secondary{
  background:rgba(255,255,255,.75);
  color:var(--ink);
}
.learn{padding:16px 18px}
.learn h2{margin:0 0 8px}
.learn p{margin:7px 0;color:var(--muted)}
@media(max-width:650px){
  .settings{grid-template-columns:1fr}
  .modeRow{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .scorebar{font-size:.9rem}
}