/* FILE: styles.css */
/* Save this content into styles.css */
:root{
  --bg: #f6f8fa;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
}

[data-theme="dark"]{
  --bg: #0b1220;
  --card: #071126;
  --text: #e6eef8;
  --muted: #9aa7bf;
  --accent: #60a5fa;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg), #ffffff 200px);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page{
  max-width:960px;
  margin:32px auto;
  padding:24px;
  background:var(--card);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(2,6,23,0.08);
}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.header h1{font-size:20px;margin:0}
.controls{display:flex;align-items:center;gap:10px}
.lead{color:var(--muted);margin-top:0}
.diagram-wrapper{background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);padding:18px;border-radius:8px;overflow:auto}

.notes{margin-top:12px}
.footer{font-size:13px;color:var(--muted);margin-top:18px}

/* toggle switch */
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{display:none}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:24px;background:#cbd5e1;transition:all .2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;border-radius:50%;background:white;transition:all .2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* make mermaid svg responsive */
.mermaid svg{max-width:100%;height:auto}

/* small responsive tweaks */
@media (max-width:540px){.page{margin:12px;padding:16px}}