:root {
  --md-primary-fg-color: #0F6E56;
  --md-accent-fg-color: #0F6E56;
  --se-accent-bg: #E1F5EE;
  --se-accent-text: #0F6E56;
  --se-card-border: #9FE1CB;
  --se-hair: rgba(0,0,0,.10);
  --se-btn-hover: #F1EFE8;
}
[data-md-color-scheme="slate"] {
  --se-accent-bg: #085041;
  --se-accent-text: #9FE1CB;
  --se-card-border: #0F6E56;
  --se-hair: rgba(255,255,255,.12);
  --se-btn-hover: rgba(255,255,255,.06);
}
/* Flat, neutral header instead of the filled teal bar */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--se-hair);
}
.md-header__title { font-weight: 500; }
.md-header__button, .md-header__topic, .md-header .md-icon { color: var(--md-default-fg-color); }
.md-search__input { background: var(--md-code-bg-color); }
/* Typography — closer to the mockup */
.md-typeset { line-height: 1.7; }
.md-typeset h1 { font-weight: 500; letter-spacing: -.01em; }
.md-typeset h2, .md-typeset h3 { font-weight: 500; }
/* Nav: rounded rows, accent-tinted current item */
.md-nav__link { border-radius: 8px; padding: .2rem .45rem; }
.md-nav__item .md-nav__link--active {
  background: var(--se-accent-bg);
  color: var(--se-accent-text);
  font-weight: 500;
}
.md-nav__title {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--md-default-fg-color--light);
}
/* Flatten cards / admonitions */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--se-hair);
  border-radius: 12px;
  box-shadow: none;
}
/* The "Do it with Claude" hand-off card */
.se-handoff {
  border: 1.5px solid var(--se-card-border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 1.3rem 0;
  background: var(--md-default-bg-color);
}
.se-badge {
  display: inline-block; margin-bottom: .55rem;
  background: var(--se-accent-bg); color: var(--se-accent-text);
  font-size: .68rem; font-weight: 500; padding: .12rem .6rem; border-radius: 6px;
}
.se-handoff p { margin: .2rem 0 .85rem; color: var(--md-default-fg-color--light); }
.se-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.se-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--se-hair); border-radius: 8px;
  padding: .38rem .8rem; font-size: .74rem; font-weight: 500;
  color: var(--md-default-fg-color); text-decoration: none;
}
.se-btn:hover { background: var(--se-btn-hover); }
.se-ext { color: var(--se-accent-text); }
/* Status ticks in the route sidebar (added by extra.js) */
.se-tick { display: inline-block; width: 1.1em; margin-right: .3rem; text-align: center; font-weight: 500; }
.se-done { color: #1D9E75; }
.se-current { color: var(--se-accent-text); }
.se-upcoming { color: var(--md-default-fg-color--lighter); }
/* the hand-off buttons behave as buttons */
.se-btn { background: var(--md-default-bg-color); cursor: pointer; font-family: inherit; }
.se-copied { background: var(--se-accent-bg) !important; color: var(--se-accent-text) !important; border-color: var(--se-card-border) !important; }
/* mark-complete toggle (localStorage-backed) */
.se-mark {
  display: inline-flex; align-items: center; gap: .4rem; margin: .1rem 0 1.4rem;
  border: 1px solid var(--se-card-border); border-radius: 8px; padding: .4rem .85rem;
  font-size: .78rem; font-weight: 500; cursor: pointer; font-family: inherit;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.se-mark[data-done="1"] { background: var(--se-accent-bg); color: var(--se-accent-text); }
/* progress bar */
#se-progress { margin: .2rem 0 1.6rem; }
.se-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.se-progress-label { font-size: .8rem; font-weight: 500; }
.se-progress-count { font-size: .75rem; color: var(--md-default-fg-color--light); }
.se-progress-track { height: 8px; border-radius: 6px; background: var(--se-accent-bg); overflow: hidden; }
.se-progress-fill { height: 100%; background: #1D9E75; border-radius: 6px; transition: width .25s ease; }
.se-progress-next { font-size: .75rem; margin-top: .4rem; color: var(--md-default-fg-color--light); }
.se-progress-next a { color: var(--se-accent-text); font-weight: 500; }