@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.sma600x-root {
  --sma-ink:#17172b;
  --sma-muted:#646477;
  --sma-line:#e6e2e8;
  --sma-surface:#fff;
  --sma-soft:#faf7f3;
  --sma-indigo:#34306f;
  --sma-violet:#6d4dd6;
  --sma-coral:#e96862;
  --sma-amber:#efa83f;
  --sma-danger:#a52d38;
  position:relative;
  width:100%;
  overflow:hidden;
  box-sizing:border-box;
  padding:34px 14px;
  color:var(--sma-ink);
  background:
    radial-gradient(circle at 8% 4%,rgba(239,168,63,.13),transparent 24%),
    radial-gradient(circle at 94% 10%,rgba(109,77,214,.11),transparent 26%),
    #fbfaf8;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
}
.sma600x-root,
.sma600x-root * { box-sizing:border-box; }
.sma600x-root .sma600x-hero,
.sma600x-root .sma600x-tool { width:min(100%,1300px); margin-inline:auto; }
.sma600x-root .sma600x-hero { text-align:center; margin-bottom:24px; }
.sma600x-root .sma600x-eyebrow,
.sma600x-root .sma600x-kicker {
  margin:0 0 5px;
  color:var(--sma-violet);
  font-size:13px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.sma600x-root .sma600x-hero h1 {
  margin:0;
  font-size:clamp(30px,7.8vw,48px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.sma600x-root .sma600x-subtitle {
  max-width:680px;
  margin:12px auto 0;
  color:var(--sma-muted);
  font-size:16px;
}
.sma600x-root .sma600x-tool {
  overflow:hidden;
  border:1px solid rgba(52,48,111,.14);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 65px rgba(31,24,55,.12),0 3px 12px rgba(31,24,55,.06);
}
.sma600x-root .sma600x-features {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--sma-line);
  border-bottom:1px solid var(--sma-line);
}
.sma600x-root .sma600x-feature {
  min-width:0;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  background:#fcfbfa;
  color:#39384d;
  font-size:13px;
  font-weight:700;
}
.sma600x-root .sma600x-feature-icon {
  flex:0 0 27px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:var(--sma-violet);
  background:#eee9fc;
  font-size:16px;
}
.sma600x-root .sma600x-tool-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.sma600x-root .sma600x-config,
.sma600x-root .sma600x-output { min-width:0; padding:20px 16px; }
.sma600x-root .sma600x-output { background:var(--sma-soft); border-top:1px solid var(--sma-line); }
.sma600x-root .sma600x-section-head,
.sma600x-root .sma600x-status-top,
.sma600x-root .sma600x-preview-head,
.sma600x-root .sma600x-label-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.sma600x-root .sma600x-section-head h2,
.sma600x-root .sma600x-status-top h2 {
  margin:0;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.sma600x-root .sma600x-preview h3 { margin:0; font-size:20px; line-height:1.2; }
.sma600x-root .sma600x-text-button,
.sma600x-root .sma600x-link-button {
  min-height:44px;
  border:0;
  padding:7px 4px;
  color:var(--sma-violet);
  background:transparent;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.sma600x-root .sma600x-form { margin-top:20px; }
.sma600x-root .sma600x-primary-fields,
.sma600x-root .sma600x-settings-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.sma600x-root .sma600x-field { min-width:0; }
.sma600x-root .sma600x-field label,
.sma600x-root .sma600x-repeat legend {
  display:block;
  margin:0 0 7px;
  color:#2d2c40;
  font-size:15px;
  font-weight:800;
}
.sma600x-root .sma600x-field input[type="text"],
.sma600x-root .sma600x-field input[type="time"],
.sma600x-root .sma600x-field select {
  width:100%;
  min-width:0;
  height:50px;
  border:1px solid #cbc6d0;
  border-radius:11px;
  padding:0 13px;
  color:var(--sma-ink);
  background:#fff;
  font:600 16px/1.2 inherit;
}
.sma600x-root .sma600x-time-field input[type="time"] {
  font-size:21px;
  font-weight:800;
  color:var(--sma-indigo);
}
.sma600x-root .sma600x-repeat {
  min-width:0;
  margin:20px 0;
  padding:0;
  border:0;
}
.sma600x-root .sma600x-presets,
.sma600x-root .sma600x-days { display:grid; gap:7px; }
.sma600x-root .sma600x-presets { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:9px; }
.sma600x-root .sma600x-days { grid-template-columns:repeat(7,minmax(0,1fr)); }
.sma600x-root .sma600x-presets button,
.sma600x-root .sma600x-days button {
  min-width:0;
  min-height:44px;
  border:1px solid #d7d2db;
  border-radius:9px;
  padding:6px 3px;
  color:#444257;
  background:#fff;
  font:700 14px/1 inherit;
  cursor:pointer;
}
.sma600x-root .sma600x-days button { font-size:12px; }
.sma600x-root .sma600x-presets button[aria-pressed="true"],
.sma600x-root .sma600x-days button[aria-pressed="true"] {
  border-color:var(--sma-violet);
  color:#fff;
  background:var(--sma-violet);
  box-shadow:0 4px 10px rgba(109,77,214,.2);
}
.sma600x-root .sma600x-volume-field { margin-top:2px; }
.sma600x-root .sma600x-label-row output { color:var(--sma-violet); font-weight:800; }
.sma600x-root .sma600x-field input[type="range"] {
  width:100%;
  height:44px;
  margin:0;
  accent-color:var(--sma-violet);
}
.sma600x-root .sma600x-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px; }
.sma600x-root .sma600x-button {
  min-width:0;
  min-height:48px;
  border:1px solid transparent;
  border-radius:11px;
  padding:10px 16px;
  font:800 16px/1.2 inherit;
  cursor:pointer;
}
.sma600x-root .sma600x-primary {
  color:#fff;
  background:linear-gradient(110deg,var(--sma-indigo),var(--sma-violet) 64%,#8b55be);
  box-shadow:0 10px 20px rgba(72,53,142,.22);
}
.sma600x-root .sma600x-secondary { color:var(--sma-indigo); border-color:#cbc5dc; background:#fff; }
.sma600x-root .sma600x-danger { color:#fff; background:var(--sma-danger); }
.sma600x-root .sma600x-form-foot {
  min-height:44px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 14px;
  margin-top:8px;
}
.sma600x-root .sma600x-feedback { color:#286345; font-size:14px; font-weight:700; }
.sma600x-root .sma600x-error {
  display:block;
  min-height:19px;
  margin-top:4px;
  color:#a02734;
  font-size:13px;
  font-weight:700;
}
.sma600x-root .sma600x-status-card,
.sma600x-root .sma600x-preview {
  min-width:0;
  border:1px solid var(--sma-line);
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 25px rgba(35,29,55,.06);
}
.sma600x-root .sma600x-status-card { padding:18px 15px; }
.sma600x-root .sma600x-state {
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  border:1px solid #ddd8df;
  border-radius:999px;
  padding:6px 9px;
  background:#f6f4f5;
  color:#555366;
  font-size:13px;
}
.sma600x-root .sma600x-state span {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#898796;
}
.sma600x-root .sma600x-state[data-state="scheduled"] span,
.sma600x-root .sma600x-state[data-state="snoozed"] span { background:#24875a; }
.sma600x-root .sma600x-state[data-state="ringing"] span { background:var(--sma-coral); }
.sma600x-root .sma600x-state[data-state="attention"] span { background:#bd7317; }
.sma600x-root .sma600x-alarm-time {
  margin-top:20px;
  overflow-wrap:anywhere;
  color:var(--sma-indigo);
  font-size:clamp(42px,13vw,64px);
  font-weight:850;
  line-height:1;
  letter-spacing:-.055em;
}
.sma600x-root .sma600x-empty { min-height:48px; margin:10px 0 2px; color:#4f4d60; font-size:15px; }
.sma600x-root .sma600x-timezone { margin:0 0 16px; color:var(--sma-muted); font-size:13px; }
.sma600x-root .sma600x-countdown {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:12px 0 15px;
  border-block:1px solid var(--sma-line);
}
.sma600x-root .sma600x-countdown div { min-width:0; padding:8px; text-align:center; border-radius:10px; background:#f8f6fa; }
.sma600x-root .sma600x-countdown strong { display:block; overflow-wrap:anywhere; font-size:22px; line-height:1.1; }
.sma600x-root .sma600x-countdown span { color:var(--sma-muted); font-size:12px; text-transform:uppercase; }
.sma600x-root .sma600x-summary { margin:14px 0 0; }
.sma600x-root .sma600x-summary div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; padding:5px 0; }
.sma600x-root .sma600x-summary dt { color:var(--sma-muted); }
.sma600x-root .sma600x-summary dd { margin:0; overflow-wrap:anywhere; font-weight:800; text-align:right; }
.sma600x-root .sma600x-active-actions { margin-top:14px; }
.sma600x-root .sma600x-active-actions .sma600x-button { width:100%; }
.sma600x-root .sma600x-ringing {
  margin-top:16px;
  padding:15px;
  border:2px solid var(--sma-coral);
  border-radius:13px;
  background:#fff4f1;
}
.sma600x-root .sma600x-ringing > strong,
.sma600x-root .sma600x-ringing > span { display:block; overflow-wrap:anywhere; }
.sma600x-root .sma600x-ringing > span { margin-top:3px; color:#6c3b3b; }
.sma600x-root .sma600x-ringing > div { display:grid; grid-template-columns:1fr; gap:8px; margin-top:12px; }
.sma600x-root .sma600x-preview { margin-top:14px; padding:16px; }
.sma600x-root .sma600x-preview-toggle {
  width:42px;
  height:24px;
  padding:3px;
  border-radius:999px;
  background:#d8cef5;
}
.sma600x-root .sma600x-preview-toggle i {
  display:block;
  width:18px;
  height:18px;
  margin-left:18px;
  border-radius:50%;
  background:var(--sma-violet);
}
.sma600x-root .sma600x-preview-time { margin-top:12px; font-size:31px; font-weight:850; line-height:1; }
.sma600x-root .sma600x-preview > strong { display:block; max-width:100%; margin-top:7px; overflow-wrap:anywhere; }
.sma600x-root .sma600x-preview-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.sma600x-root .sma600x-preview-meta span {
  max-width:100%;
  padding:5px 8px;
  border-radius:7px;
  background:#f1eef7;
  color:#4b4661;
  font-size:13px;
  overflow-wrap:anywhere;
}
.sma600x-root .sma600x-limit-note { display:flex; gap:10px; margin-top:14px; padding:13px; color:#5b4b38; border:1px solid #ead8bc; border-radius:13px; background:#fff9ee; }
.sma600x-root .sma600x-limit-note p { margin:0; font-size:14px; }
.sma600x-root .sma600x-note-icon {
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#9c681d;
  font-weight:900;
}
.sma600x-root .sma600x-assertive { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.sma600x-root button:focus-visible,
.sma600x-root input:focus-visible,
.sma600x-root select:focus-visible,
.sma600x-root [tabindex]:focus-visible {
  outline:3px solid rgba(109,77,214,.35);
  outline-offset:3px;
}
.sma600x-root button:disabled { cursor:not-allowed; opacity:.58; }
.sma600x-root button:not(:disabled):active { transform:translateY(1px); }

@media (prefers-reduced-motion:no-preference) {
  .sma600x-root button,
  .sma600x-root input,
  .sma600x-root select { transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease; }
}
@media (min-width:320px) and (max-width:374px) {
  .sma600x-root { padding:28px 10px; }
  .sma600x-root .sma600x-hero h1 { font-size:30px; }
  .sma600x-root .sma600x-subtitle { font-size:16px; }
  .sma600x-root .sma600x-config,.sma600x-root .sma600x-output { padding:18px 12px; }
  .sma600x-root .sma600x-section-head h2,.sma600x-root .sma600x-status-top h2 { font-size:23px; }
  .sma600x-root .sma600x-feature { padding:8px; font-size:12px; }
  .sma600x-root .sma600x-days { gap:4px; }
  .sma600x-root .sma600x-days button { min-height:44px; font-size:11px; }
  .sma600x-root .sma600x-field input[type="text"],.sma600x-root .sma600x-field input[type="time"],.sma600x-root .sma600x-field select { height:48px; }
  .sma600x-root .sma600x-countdown { grid-template-columns:repeat(2,1fr); }
  .sma600x-root .sma600x-preview { padding:14px; }
}
@media (min-width:375px) and (max-width:429px) {
  .sma600x-root { padding:34px 14px; }
  .sma600x-root .sma600x-hero h1 { font-size:32px; }
  .sma600x-root .sma600x-subtitle { font-size:16px; }
  .sma600x-root .sma600x-config,.sma600x-root .sma600x-output { padding:21px 17px; }
  .sma600x-root .sma600x-section-head h2,.sma600x-root .sma600x-status-top h2 { font-size:24px; }
  .sma600x-root .sma600x-primary { min-height:52px; }
  .sma600x-root .sma600x-countdown { grid-template-columns:repeat(2,1fr); gap:9px; }
  .sma600x-root .sma600x-preview { padding:17px; }
}
@media (min-width:430px) and (max-width:767px) {
  .sma600x-root { padding:42px 20px; }
  .sma600x-root .sma600x-hero h1 { font-size:38px; }
  .sma600x-root .sma600x-subtitle { font-size:17px; }
  .sma600x-root .sma600x-config,.sma600x-root .sma600x-output { padding:26px 24px; }
  .sma600x-root .sma600x-section-head h2,.sma600x-root .sma600x-status-top h2 { font-size:25px; }
  .sma600x-root .sma600x-primary-fields,.sma600x-root .sma600x-settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sma600x-root .sma600x-volume-field { grid-column:1/-1; }
  .sma600x-root .sma600x-presets { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sma600x-root .sma600x-actions,.sma600x-root .sma600x-ringing > div { grid-template-columns:1.25fr 1fr; }
  .sma600x-root .sma600x-countdown { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sma600x-root .sma600x-preview { padding:19px; }
}
@media (min-width:768px) and (max-width:1023px) {
  .sma600x-root { padding:54px 30px; }
  .sma600x-root .sma600x-hero h1 { font-size:44px; }
  .sma600x-root .sma600x-subtitle { font-size:18px; }
  .sma600x-root .sma600x-features { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sma600x-root .sma600x-feature { justify-content:center; font-size:14px; }
  .sma600x-root .sma600x-tool-grid { grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); }
  .sma600x-root .sma600x-config,.sma600x-root .sma600x-output { padding:28px 25px; }
  .sma600x-root .sma600x-output { border-top:0; border-left:1px solid var(--sma-line); }
  .sma600x-root .sma600x-section-head h2,.sma600x-root .sma600x-status-top h2 { font-size:25px; }
  .sma600x-root .sma600x-primary-fields,.sma600x-root .sma600x-settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sma600x-root .sma600x-volume-field { grid-column:1/-1; }
  .sma600x-root .sma600x-presets { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sma600x-root .sma600x-actions,.sma600x-root .sma600x-ringing > div { grid-template-columns:1.2fr 1fr; }
  .sma600x-root .sma600x-countdown { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sma600x-root .sma600x-preview { padding:18px; }
}
@media (min-width:1024px) {
  .sma600x-root { padding:66px 36px; }
  .sma600x-root .sma600x-hero { margin-bottom:31px; }
  .sma600x-root .sma600x-hero h1 { font-size:48px; }
  .sma600x-root .sma600x-subtitle { font-size:18px; }
  .sma600x-root .sma600x-features { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sma600x-root .sma600x-feature { justify-content:center; min-height:58px; font-size:14px; }
  .sma600x-root .sma600x-tool-grid { grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr); }
  .sma600x-root .sma600x-config { padding:34px 38px; }
  .sma600x-root .sma600x-output { padding:34px; border-top:0; border-left:1px solid var(--sma-line); }
  .sma600x-root .sma600x-section-head h2,.sma600x-root .sma600x-status-top h2 { font-size:26px; }
  .sma600x-root .sma600x-primary-fields { grid-template-columns:minmax(210px,.8fr) minmax(260px,1.2fr); }
  .sma600x-root .sma600x-settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .sma600x-root .sma600x-volume-field { grid-column:1/-1; }
  .sma600x-root .sma600x-presets { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sma600x-root .sma600x-actions,.sma600x-root .sma600x-ringing > div { grid-template-columns:1.25fr 1fr; }
  .sma600x-root .sma600x-field input[type="text"],.sma600x-root .sma600x-field input[type="time"],.sma600x-root .sma600x-field select { height:52px; }
  .sma600x-root .sma600x-countdown { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .sma600x-root .sma600x-status-card { padding:24px; }
  .sma600x-root .sma600x-preview { padding:20px; }
}