.sed-timer{
  --sed-accent:#2a9d8f;
  display:flex;flex-direction:column;align-items:center;
  gap:1rem;max-width:560px;margin:1.5rem auto;padding:1.25rem;
  border-radius:18px;background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-align:center;
}
.sed-timer__media img{
  width:100%;max-width:var(--sed-image-size,320px);height:auto;border-radius:14px;display:block;margin:0 auto;
}
.sed-timer__lottie{
  width:100%;max-width:var(--sed-image-size,320px);aspect-ratio:1/1;margin:0 auto;
}
.sed-timer__label{
  margin:.25rem 0;font-size:var(--sed-label-size,28px);color:var(--sed-accent);line-height:1.2;
}
.sed-timer__presets{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.75rem auto 0;}
.sed-timer__presets .sed-preset{
  min-width:auto;padding:.5rem .85rem;font-size:.95rem;border-radius:999px;
  background:#e9ecef;color:#333;transition:background .2s,color .2s;
}
.sed-timer__presets .sed-preset:hover,
.sed-timer__presets .sed-preset.is-active{
  background:var(--sed-accent);color:#fff;
}
.sed-timer__adjust{display:flex;flex-direction:column;gap:.4rem;align-items:stretch;margin:.75rem auto 0;width:100%;max-width:360px;}
.sed-timer__adjust label{font-weight:600;text-align:center;font-size:1.05rem;}
.sed-timer__adjust .sed-minutes-value{display:inline-block;min-width:2ch;color:var(--sed-accent);font-size:1.25rem;}
.sed-timer__adjust .sed-minutes{
  width:100%;-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;
  background:#e6e6e6;outline:none;
}
.sed-timer__adjust .sed-minutes::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--sed-accent);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.sed-timer__adjust .sed-minutes::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:var(--sed-accent);cursor:pointer;border:2px solid #fff;
}
.sed-timer__ring{position:relative;width:240px;max-width:80vw;aspect-ratio:1/1;margin:0 auto;}
.sed-timer__ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.sed-ring-bg{fill:none;stroke:#eee;stroke-width:10;}
.sed-ring-fg{
  fill:none;stroke:var(--sed-accent);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:339.292;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear,stroke .3s;
}
.sed-timer.is-warn .sed-ring-fg{stroke:#f4a261;}
.sed-timer.is-alert .sed-ring-fg{stroke:#e63946;}
.sed-timer.is-done .sed-ring-fg{stroke:#e63946;}
.sed-timer__display{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(2.4rem,8vw,3.6rem);font-weight:700;font-variant-numeric:tabular-nums;color:#222;
}
.sed-timer__controls{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;}
.sed-btn{
  font-size:1.1rem;padding:.75rem 1.4rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--sed-accent);color:#fff;min-width:96px;min-height:48px;
}
.sed-btn:focus{outline:3px solid #000;outline-offset:2px;}
.sed-btn.sed-pause{background:#6c757d;}
.sed-btn.sed-reset{background:#343a40;}
@media (max-width:480px){
  .sed-timer{padding:1rem;margin:1rem .5rem;}
  .sed-timer__label{font-size:1.4rem;}
}
@media (prefers-reduced-motion:reduce){
  .sed-ring-fg{transition:none;}
}