body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #fefefe;}
header { padding: 12px 16px; border-bottom: 1px solid #eee; }
* { box-sizing: border-box; }
h1 { font-size: 18px; margin: 0; }
.container { 
  /* max-width: 900px; */
  max-width: 100%;
  margin: 0 auto; 
  padding: 16px; 
}
#slide-title {
  margin-top: -20px;
  margin-left: -20px;
  width: calc(100% + 40px);
  background: #1ab69d;
  padding: 15px 20px;
  border-radius: 10px 10px 0 0;
  color: #fff;
  box-sizing: border-box;
}
.slide { 
  border: 1px solid #eee; 
  border-radius: 10px; 
  padding: 20px; 
  min-height: 320px; 
  box-shadow: 1px 1.732px 4px 0px rgba(0, 0, 0, 0.1);
}
.nav { 
  display: flex; 
  justify-content: space-between; 
  gap: 8px; 
  margin-top: 16px; 
}
button { 
  padding: 10px 14px; 
  border: 1px solid #ddd; 
  background: #fafafa; 
  border-radius: 10px; 
  cursor: pointer; 
}
button:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
}
#prev,#next {
  border-radius: 10px;
  transition: all 0.2s;
  font-weight: 600;
}
#prev:hover, #prev:focus, #next:hover, #next:focus {
  border-radius: 0;
  background: #14a67b;
  border-color: #14a67b;
  transition: all 0.2s;
  color: #fff;
}
.progress { 
  height: 6px; 
  /* background: #eee; */
  background: rgba(26, 182, 157, 0.3);
  border-radius: 999px; 
  overflow: hidden; 
  margin: 12px 0 0; 
}
.progress > div { 
  height: 100%; 
  width: 0%; 
  /* background: #aaa; */
  background: #14a67b;
}
footer { 
  padding: 12px 16px; 
  border-top: 1px solid #eee; 
  display:flex; 
  align-items:center; 
  gap:8px; 
  justify-content:space-between;
  border: none;
}
.small { 
  color: #666; 
  font-size: 12px; 
  display: none;
}
kbd { 
  background: #eee; 
  border-radius: 4px; 
  padding: 1px 6px; 
  border:1px solid #ddd; 
}
.mark-complete { 
  margin-left: auto; 
  padding: 15px 20px;
  background: #14a67b;
  border: 1px solid #14a67b;
  border-radius: 10px;
  transition: all 0.2s;
  color: #fff;
}
.mark-complete:hover, .mark-complete:focus {
  border-radius: 0;
  transition: all 0.2s;
}