/* ==========================================================================
   My Notes — custom theme layer for MkDocs Material
   Saare colors, spacing aur shapes yahin se control hote hain.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --nt-brand:        #5b4bd6;
  --nt-brand-soft:   #7a6cf0;
  --nt-brand-deep:   #453a9e;
  --nt-accent:       #e0457b;

  /* Surfaces */
  --nt-bg:           #fbfaf8;
  --nt-surface:      #ffffff;
  --nt-surface-2:    #f4f2ef;
  --nt-line:         #e6e2dc;

  /* Ink */
  --nt-ink:          #24222b;
  --nt-ink-soft:     #5c5866;
  --nt-ink-faint:    #8b8794;

  /* Depth */
  --nt-shadow-sm: 0 1px 2px rgba(30, 25, 45, .05), 0 1px 3px rgba(30, 25, 45, .05);
  --nt-shadow-md: 0 2px 4px rgba(30, 25, 45, .04), 0 8px 24px rgba(30, 25, 45, .07);
  --nt-shadow-lg: 0 4px 8px rgba(30, 25, 45, .05), 0 16px 40px rgba(30, 25, 45, .10);

  /* Shape */
  --nt-r-sm: 8px;
  --nt-r-md: 12px;
  --nt-r-lg: 18px;

  --nt-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Material hooks — light */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:             var(--nt-brand);
  --md-primary-fg-color--light:      var(--nt-brand-soft);
  --md-primary-fg-color--dark:       var(--nt-brand-deep);
  /* Header ka text ink hai, kyunki header khud paper-white rehta hai */
  --md-primary-bg-color:             var(--nt-ink);
  --md-primary-bg-color--light:      var(--nt-ink-soft);

  --md-accent-fg-color:              var(--nt-brand-soft);
  --md-accent-fg-color--transparent: rgba(122, 108, 240, .1);

  --md-default-bg-color:             var(--nt-bg);
  --md-typeset-color:                var(--nt-ink);
  --md-typeset-a-color:              var(--nt-brand);

  --md-code-bg-color:                #f5f3f0;
  --md-code-fg-color:                #3d3a47;

  --md-footer-bg-color:              #201e28;
  --md-footer-bg-color--dark:        #17151d;
}

/* Material hooks — dark */
[data-md-color-scheme="slate"] {
  --nt-brand:        #a89bff;
  --nt-brand-soft:   #c2b7ff;
  --nt-brand-deep:   #8a7af0;
  --nt-accent:       #ff7aa8;

  --nt-bg:           #14131a;
  --nt-surface:      #1c1b24;
  --nt-surface-2:    #23212c;
  --nt-line:         #2f2d3a;

  --nt-ink:          #e7e5ee;
  --nt-ink-soft:     #a9a5b8;
  --nt-ink-faint:    #7c7890;

  --nt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --nt-shadow-md: 0 2px 4px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35);
  --nt-shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45);

  --md-hue: 265;

  --md-primary-fg-color:             #201e2b;
  --md-primary-fg-color--light:      var(--nt-brand-soft);
  --md-primary-fg-color--dark:       #17161f;
  --md-primary-bg-color:             var(--nt-ink);
  --md-primary-bg-color--light:      var(--nt-ink-soft);

  --md-accent-fg-color:              var(--nt-brand-soft);
  --md-accent-fg-color--transparent: rgba(168, 155, 255, .14);

  --md-default-bg-color:             var(--nt-bg);
  --md-default-fg-color:             var(--nt-ink);
  --md-default-fg-color--light:      var(--nt-ink-soft);
  --md-default-fg-color--lighter:    var(--nt-ink-faint);
  --md-default-fg-color--lightest:   #3a3746;

  --md-typeset-color:                var(--nt-ink);
  --md-typeset-a-color:              var(--nt-brand);

  --md-code-bg-color:                #1a1922;
  --md-code-fg-color:                #d6d2e2;

  --md-footer-bg-color:              #100f16;
  --md-footer-bg-color--dark:        #0b0a10;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: .78rem;
  line-height: 1.72;
  letter-spacing: -.003em;
}

.md-typeset h1 {
  font-size: 1.95rem;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--nt-ink);
  margin: 0 0 .55em;
}

.md-typeset h2 {
  font-size: 1.28rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: 2.4em 0 .7em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--nt-line);
}

.md-typeset h3 {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.014em;
  margin: 1.9em 0 .5em;
}

.md-typeset h4 {
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: -.008em;
  color: var(--nt-ink-soft);
  margin: 1.5em 0 .4em;
}

.md-typeset p { margin: 0 0 1.05em; }

.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--nt-brand) 32%, transparent);
  transition: border-color .18s var(--nt-ease), color .18s var(--nt-ease);
}

.md-typeset a:hover {
  color: var(--nt-brand-soft);
  border-bottom-color: var(--nt-brand-soft);
}

.md-typeset a.headerlink,
.md-typeset .md-button,
.md-typeset .nt-card,
.md-typeset a.md-tag,
.md-typeset .nt-card a { border-bottom: none; }

/* Heading anchors — sirf hover pe dikhte hain */
.md-typeset .headerlink {
  color: var(--nt-ink-faint);
  opacity: 0;
  margin-left: .35em;
  font-weight: 400;
  transition: opacity .18s var(--nt-ease), color .18s var(--nt-ease);
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink { opacity: 1; }

.md-typeset .headerlink:hover { color: var(--nt-brand); }

/* Lists */
.md-typeset ul li,
.md-typeset ol li { margin-bottom: .45em; }
.md-typeset ul li::marker { color: var(--nt-brand); }

/* Blockquote */
.md-typeset blockquote {
  border-left: 3px solid var(--nt-brand);
  background: color-mix(in srgb, var(--nt-brand) 5%, transparent);
  border-radius: 0 var(--nt-r-sm) var(--nt-r-sm) 0;
  padding: .1rem .9rem;
  color: var(--nt-ink-soft);
}

.md-typeset hr {
  border-bottom: 1px solid var(--nt-line);
  margin: 2.4em 0;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.md-header {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--nt-ease), background-color .25s var(--nt-ease);
}

.md-header--shadow {
  box-shadow: 0 1px 20px rgba(20, 16, 35, .12);
  border-bottom-color: rgba(255, 255, 255, .08);
}

.md-header__title { font-weight: 620; letter-spacing: -.012em; }
.md-header__topic:first-child { font-weight: 620; }

/* Tabs */
.md-tabs {
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.md-tabs__link {
  opacity: .68;
  font-size: .72rem;
  font-weight: 520;
  transition: opacity .18s var(--nt-ease);
}

.md-tabs__link:hover { opacity: 1; }

.md-tabs__link--active {
  opacity: 1;
  font-weight: 620;
  color: var(--nt-brand);
}

/* Light mode ka header — rangeen slab ki jagah saaf paper */
[data-md-color-scheme="default"] .md-header {
  background-color: color-mix(in srgb, var(--nt-surface) 84%, transparent);
  color: var(--nt-ink);
}

[data-md-color-scheme="default"] .md-header--shadow {
  border-bottom-color: var(--nt-line);
  box-shadow: 0 1px 16px rgba(30, 25, 45, .06);
}

[data-md-color-scheme="default"] .md-tabs {
  color: var(--nt-ink);
  box-shadow: inset 0 1px 0 var(--nt-line);
}

/* Search */
.md-search__form {
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .14);
  transition: background-color .2s var(--nt-ease), box-shadow .2s var(--nt-ease);
}

.md-search__form:hover { background-color: rgba(255, 255, 255, .22); }

[data-md-color-scheme="default"] .md-search__form {
  background-color: var(--nt-surface-2);
  box-shadow: inset 0 0 0 1px var(--nt-line);
}

[data-md-color-scheme="default"] .md-search__form:hover {
  background-color: #ece9e5;
}

.md-search__input { color: var(--nt-ink); }
.md-search__input::placeholder { color: var(--nt-ink-faint); }
.md-search__icon { color: var(--nt-ink-soft); }

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: var(--nt-r-md) var(--nt-r-md) 0 0;
  background-color: var(--nt-surface);
  box-shadow: var(--nt-shadow-lg);
}

.md-search__output { border-radius: 0 0 var(--nt-r-md) var(--nt-r-md); }

.md-search-result__meta {
  background: var(--nt-surface-2);
  color: var(--nt-ink-faint);
}

.md-search-result__item { border-top-color: var(--nt-line); }
.md-search-result__article { padding-block: .5rem; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */

.md-nav {
  font-size: .69rem;
  line-height: 1.5;
}

.md-nav__title {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nt-ink-faint);
}

.md-nav__link {
  border-radius: var(--nt-r-sm);
  padding: .3rem .55rem;
  margin: 1px 0;
  margin-inline-start: -.55rem;
  color: var(--nt-ink-soft);
  transition: background-color .16s var(--nt-ease), color .16s var(--nt-ease);
}

.md-nav__link:hover {
  background: color-mix(in srgb, var(--nt-brand) 8%, transparent);
  color: var(--nt-ink);
}

.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  background: color-mix(in srgb, var(--nt-brand) 12%, transparent);
  color: var(--nt-brand);
  font-weight: 600;
}

/* Table of contents */
.md-nav--secondary .md-nav__list { border-inline-start: 1px solid var(--nt-line); }

.md-nav--secondary .md-nav__link {
  border-radius: 0 var(--nt-r-sm) var(--nt-r-sm) 0;
  border-inline-start: 2px solid transparent;
  margin-inline-start: -1px;
  padding-inline-start: .6rem;
}

.md-nav--secondary .md-nav__link--active {
  background: transparent;
  border-inline-start-color: var(--nt-brand);
}

.md-sidebar__scrollwrap::-webkit-scrollbar { width: 4px; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: var(--nt-line);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   5. Content shell
   -------------------------------------------------------------------------- */

.md-main__inner { margin-top: 1.6rem; }
.md-content__inner { margin-bottom: 3rem; }
.md-content__inner::before { height: 0; }

/* Bade screens pe har page ek "sheet" ki tarah baithta hai */
@media screen and (min-width: 76.25em) {
  .md-content__inner {
    background: var(--nt-surface);
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-r-lg);
    padding: 1.9rem 2.2rem 2.2rem;
    box-shadow: var(--nt-shadow-sm);
  }
}

.md-typeset .md-content__button { color: var(--nt-ink-faint); }

/* --------------------------------------------------------------------------
   6. Code
   -------------------------------------------------------------------------- */

.md-typeset code {
  border-radius: 5px;
  padding: .12em .38em;
  font-size: .84em;
  border: 1px solid color-mix(in srgb, var(--nt-line) 70%, transparent);
}

.md-typeset pre > code {
  border: none;
  padding: .82rem 1rem;
  font-size: .72rem;
  line-height: 1.62;
}

.md-typeset .highlight,
.md-typeset .highlighttable {
  border-radius: var(--nt-r-md);
  border: 1px solid var(--nt-line);
  overflow: hidden;
  box-shadow: var(--nt-shadow-sm);
  margin: 1.2em 0;
}

.md-typeset .highlight > pre,
.md-typeset .highlighttable pre { margin: 0; }
.md-typeset .highlight pre > code { border-radius: 0; }

.md-typeset .highlight span.filename {
  background: var(--nt-surface-2);
  border-bottom: 1px solid var(--nt-line);
  color: var(--nt-ink-soft);
  font-size: .68rem;
  font-weight: 600;
  border-radius: 0;
}

.md-clipboard {
  color: var(--nt-ink-faint);
  border-radius: 6px;
  transition: color .16s var(--nt-ease), background-color .16s var(--nt-ease);
}

.md-clipboard:hover {
  color: var(--nt-brand);
  background: color-mix(in srgb, var(--nt-brand) 10%, transparent);
}

.md-typeset a > code {
  color: var(--nt-brand);
  background: color-mix(in srgb, var(--nt-brand) 9%, transparent);
  border-color: color-mix(in srgb, var(--nt-brand) 22%, transparent);
}

/* --------------------------------------------------------------------------
   7. Admonitions
   -------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--nt-line);
  border-inline-start: 3px solid var(--md-typeset-a-color);
  border-radius: var(--nt-r-md);
  box-shadow: var(--nt-shadow-sm);
  font-size: .74rem;
  padding-bottom: .1rem;
  background: var(--nt-surface);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 620;
  letter-spacing: -.008em;
  padding-block: .5rem;
  border-radius: 0;
  background: color-mix(in srgb, var(--md-typeset-a-color) 8%, transparent);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before { top: .5rem; }

.md-typeset .admonition > :last-child,
.md-typeset details > :last-child { margin-bottom: .6rem; }

.md-typeset summary { cursor: pointer; }
.md-typeset details[open] > summary { border-bottom: 1px solid var(--nt-line); }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-r-md);
  box-shadow: var(--nt-shadow-sm);
  font-size: .73rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--nt-surface-2);
  color: var(--nt-ink);
  font-weight: 650;
  font-size: .68rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--nt-line);
}

.md-typeset table:not([class]) td {
  padding: .6rem .9rem;
  border-top: 1px solid color-mix(in srgb, var(--nt-line) 60%, transparent);
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color .14s var(--nt-ease);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(in srgb, var(--nt-brand) 4%, transparent);
}

/* --------------------------------------------------------------------------
   9. Tabbed content
   -------------------------------------------------------------------------- */

.md-typeset .tabbed-set { margin: 1.2em 0; }

.md-typeset .tabbed-labels {
  box-shadow: none;
  border-bottom: 1px solid var(--nt-line);
  gap: .1rem;
}

.md-typeset .tabbed-labels > label {
  font-size: .7rem;
  font-weight: 560;
  padding: .5rem .75rem;
  border-radius: var(--nt-r-sm) var(--nt-r-sm) 0 0;
  color: var(--nt-ink-faint);
  transition: color .16s var(--nt-ease), background-color .16s var(--nt-ease);
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--nt-ink);
  background: color-mix(in srgb, var(--nt-brand) 6%, transparent);
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--nt-brand);
  font-weight: 650;
}

.md-typeset .tabbed-labels--linked > label > a { border-bottom: none; }

/* --------------------------------------------------------------------------
   10. Tags
   -------------------------------------------------------------------------- */

.md-typeset .md-tag {
  background: color-mix(in srgb, var(--nt-brand) 10%, transparent);
  color: var(--nt-brand);
  border: 1px solid color-mix(in srgb, var(--nt-brand) 22%, transparent);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .18em .7em;
  transition: background-color .16s var(--nt-ease), transform .16s var(--nt-ease);
}

.md-typeset a.md-tag:hover {
  background: color-mix(in srgb, var(--nt-brand) 18%, transparent);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */

.nt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .85rem;
  margin: 1.4em 0 2em;
}

.md-typeset .nt-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem 1.15rem;
  background: var(--nt-surface);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-r-lg);
  box-shadow: var(--nt-shadow-sm);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--nt-ease), box-shadow .22s var(--nt-ease),
              border-color .22s var(--nt-ease);
}

.md-typeset .nt-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nt-brand), var(--nt-accent));
  opacity: 0;
  transition: opacity .22s var(--nt-ease);
}

.md-typeset .nt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nt-shadow-md);
  border-color: color-mix(in srgb, var(--nt-brand) 35%, var(--nt-line));
  color: inherit;
}

.md-typeset .nt-card:hover::after { opacity: 1; }

.nt-card__icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: .3rem;
}

.nt-card__title {
  font-weight: 650;
  font-size: .82rem;
  letter-spacing: -.012em;
  color: var(--nt-ink);
}

.nt-card__desc {
  font-size: .7rem;
  line-height: 1.55;
  color: var(--nt-ink-soft);
}

.md-typeset .nt-card p { margin: 0; }

/* --------------------------------------------------------------------------
   12. Hero
   -------------------------------------------------------------------------- */

.nt-hero {
  position: relative;
  margin: -.2rem 0 2.2rem;
  padding: 2.1rem 2rem 2.2rem;
  border-radius: var(--nt-r-lg);
  border: 1px solid var(--nt-line);
  background-color: var(--nt-surface);
  background-image:
    radial-gradient(120% 140% at 8% -20%, color-mix(in srgb, var(--nt-brand) 16%, transparent) 0%, transparent 58%),
    radial-gradient(100% 130% at 100% 0%, color-mix(in srgb, var(--nt-accent) 12%, transparent) 0%, transparent 55%);
  overflow: hidden;
}

.nt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--nt-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nt-line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}

.nt-hero > * { position: relative; }

.nt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nt-brand);
  background: color-mix(in srgb, var(--nt-brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-brand) 20%, transparent);
  border-radius: 999px;
  padding: .25em .8em;
  margin-bottom: .9rem;
}

.md-typeset .nt-hero h1 {
  font-size: 2.15rem;
  letter-spacing: -.035em;
  margin: 0 0 .45rem;
  background: linear-gradient(135deg, var(--nt-ink) 20%, var(--nt-brand) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.md-typeset .nt-hero p {
  font-size: .84rem;
  color: var(--nt-ink-soft);
  max-width: 46ch;
  margin: 0;
}

.nt-hero__actions { margin-top: 1.3rem; }

.md-typeset .nt-hero__actions p {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0;
}

/* Buttons */
.md-typeset .md-button {
  border-radius: 999px;
  border-width: 1px;
  border-color: var(--nt-line);
  background: var(--nt-surface);
  color: var(--nt-ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: -.006em;
  padding: .48em 1.15em;
  box-shadow: var(--nt-shadow-sm);
  transition: transform .18s var(--nt-ease), box-shadow .18s var(--nt-ease),
              background-color .18s var(--nt-ease), color .18s var(--nt-ease),
              border-color .18s var(--nt-ease);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  transform: translateY(-1px);
  background: var(--nt-surface);
  color: var(--nt-brand);
  border-color: color-mix(in srgb, var(--nt-brand) 45%, var(--nt-line));
  box-shadow: var(--nt-shadow-md);
}

.md-typeset .md-button--primary {
  background: var(--nt-brand);
  border-color: var(--nt-brand);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--nt-brand) 30%, transparent);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: var(--nt-brand-soft);
  border-color: var(--nt-brand-soft);
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--nt-brand) 40%, transparent);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover { color: #17161f; }

@media screen and (max-width: 44.98em) {
  .nt-hero { padding: 1.5rem 1.2rem 1.6rem; }
  .md-typeset .nt-hero h1 { font-size: 1.7rem; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.md-footer-meta { font-size: .68rem; }

.md-footer__link {
  border-radius: var(--nt-r-md);
  transition: background-color .18s var(--nt-ease);
}

.md-footer__link:hover { background: rgba(255, 255, 255, .06); }
.md-footer__title { font-weight: 600; }
.md-copyright { color: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   14. Misc polish
   -------------------------------------------------------------------------- */

.md-typeset .task-list-control .task-list-indicator::before {
  background-color: var(--nt-line);
}

.md-typeset .task-list-item [type="checkbox"]:checked + .task-list-control .task-list-indicator::before {
  background-color: var(--nt-brand);
}

.md-typeset kbd {
  background: var(--nt-surface-2);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--nt-line), 0 2px 0 var(--nt-line);
  color: var(--nt-ink);
  font-size: .72em;
  padding: .12em .5em;
  vertical-align: text-bottom;
}

.md-typeset mark {
  background: color-mix(in srgb, #ffd84d 45%, transparent);
  border-radius: 3px;
  padding: .05em .2em;
  color: inherit;
}

[data-md-color-scheme="slate"] .md-typeset mark {
  background: color-mix(in srgb, #ffd84d 22%, transparent);
}

.md-typeset .footnote { font-size: .72rem; color: var(--nt-ink-soft); }

.md-top {
  border-radius: 999px;
  box-shadow: var(--nt-shadow-md);
  background: var(--nt-surface);
  color: var(--nt-ink);
  border: 1px solid var(--nt-line);
  font-size: .68rem;
  font-weight: 600;
}

.md-top:hover {
  background: var(--nt-brand);
  color: #fff;
  border-color: var(--nt-brand);
}

/* Reading progress bar (extra.js se chalta hai) */
.nt-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 10;
  background: linear-gradient(90deg, var(--nt-brand), var(--nt-accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .1s linear;
  pointer-events: none;
}

::selection { background: color-mix(in srgb, var(--nt-brand) 25%, transparent); }

:focus-visible {
  outline: 2px solid var(--nt-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media screen and (min-width: 76.25em) {
  * { scrollbar-width: thin; scrollbar-color: var(--nt-line) transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .md-typeset .nt-card:hover,
  .md-typeset .md-button:hover { transform: none; }
}