/* DerivCalc notebook theme
   Two-color system: ink + notebook blue, on warm paper. */
:root {
  --dc-ink: #121826;
  --dc-blue: #2f75d6;
  --dc-blue-dark: #1f5cad;
  --dc-paper: #fffef8;
  --dc-white: #ffffff;
  --dc-muted: rgba(18, 24, 38, .68);
  --dc-line: rgba(18, 24, 38, .22);
  --dc-blue-wash: rgba(47, 117, 214, .08);
  --dc-blue-wash-strong: rgba(47, 117, 214, .15);
  --ink: var(--dc-ink) !important;
  --ink-soft: rgba(18, 24, 38, .78) !important;
  --gray: var(--dc-muted) !important;
  --gray-2: rgba(18, 24, 38, .48) !important;
  --paper: var(--dc-paper) !important;
  --surface: var(--dc-white) !important;
  --line: var(--dc-line) !important;
  --line-2: rgba(18, 24, 38, .12) !important;
  --orange: var(--dc-blue) !important;
  --orange-2: var(--dc-blue) !important;
  --orange-deep: var(--dc-blue-dark) !important;
  --orange-soft: var(--dc-blue-wash) !important;
  --orange-soft-2: var(--dc-blue-wash-strong) !important;
  --ring: rgba(47, 117, 214, .25) !important;
  --blue: var(--dc-blue-dark) !important;
  --muted: var(--dc-muted) !important;
  --shadow: 3px 4px 0 rgba(18, 24, 38, .13) !important;
  --shadow-lg: 6px 7px 0 rgba(18, 24, 38, .14) !important;
  --radius: 9px !important;
}

html { accent-color: var(--dc-blue); overflow-x: clip; }

body {
  color: var(--dc-ink) !important;
  background-color: var(--dc-paper) !important;
  background-image: radial-gradient(circle, rgba(47, 117, 214, .13) 1px, transparent 1.15px) !important;
  background-size: 20px 20px !important;
  font-family: 'Nunito', 'Inter', Arial, sans-serif !important;
  max-width: 100%;
  overflow-x: clip;
}

body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 max(22px, calc((100vw - 1180px) / 2 - 28px));
  width: 2px;
  background: rgba(47, 117, 214, .22);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4,
.brand,
.hero h1,
.page-hero h1,
.section-title,
.card-title {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive !important;
  letter-spacing: .01em !important;
  color: var(--dc-ink);
}

h1 { line-height: 1.03 !important; }
h2, h3 { line-height: 1.14 !important; }

.hero h1::after,
.page-hero h1::after,
main > .hero h1::after {
  content: '';
  display: block;
  width: min(168px, 42%);
  height: 8px;
  margin-top: 7px;
  border-top: 3px solid var(--dc-blue);
  border-radius: 50%;
  transform: rotate(-1.5deg);
}

a { text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* The blackboard strip anchors every page. */
header.site,
body > header {
  background: var(--dc-ink) !important;
  border-bottom: 3px solid var(--dc-blue) !important;
  box-shadow: 0 3px 0 rgba(18, 24, 38, .16);
}

body > header:not(.site) {
  max-width: none !important;
  padding-left: max(24px, calc((100vw - 1112px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1112px) / 2)) !important;
}

header .brand,
header.site .brand { color: var(--dc-white) !important; font-size: 25px !important; }
header .brand::before,
header.site .brand::before {
  content: 'd/dx';
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  margin-right: 9px;
  color: var(--dc-ink);
  background: var(--dc-blue);
  border: 2px solid var(--dc-white);
  border-radius: 46% 54% 44% 56% / 55% 42% 58% 45%;
  box-shadow: 2px 2px 0 rgba(255,255,255,.28);
  font: 700 14px/1 'Nunito', sans-serif;
  transform: rotate(-2deg);
}

header .brand span,
header.site .brand .d,
header.site .brand .c { color: var(--dc-white) !important; }

header nav a,
header.site nav.top a { color: rgba(255,255,255,.76) !important; border-radius: 5px !important; }
header nav a:hover,
header nav a[aria-current],
header.site nav.top a:hover,
header.site nav.top a.active { color: #fff !important; background: rgba(47,117,214,.28) !important; }
header.site nav.top a.cta {
  color: #fff !important;
  background: var(--dc-blue) !important;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 rgba(255,255,255,.25);
}

/* Content sits on torn-note surfaces while the page grid remains visible. */
.hero, .page-hero { padding-top: clamp(42px, 7vw, 74px) !important; }
.hero h1, .page-hero h1 { font-size: clamp(40px, 6vw, 66px) !important; max-width: 18ch !important; }
.hero p.lede, .page-hero p.lede, .hero > p:last-child { color: var(--dc-muted) !important; font-size: 17px !important; }

.eyebrow, .kicker {
  color: var(--dc-blue-dark) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--dc-blue) !important;
  border-radius: 0 !important;
  padding: 4px 1px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

.calc, .side-card, .learn-card, .g-card, .hub-card, .toc a,
.paper, .setup, .teacher, .content-card, .info-card, .example-card,
.solution-card, .card, article.card, .practice, .rule-map > div,
.benefit-card, .result-card, .faq details {
  background: rgba(255,255,255,.97) !important;
  border: 2px solid var(--dc-ink) !important;
  border-radius: 8px !important;
  box-shadow: 4px 5px 0 rgba(18, 24, 38, .13) !important;
}

.calc, .paper, .g-card { border-top: 5px solid var(--dc-blue) !important; }
.side-card:nth-child(even), .learn-card:nth-child(even), .hub-card:nth-child(even) { transform: rotate(.2deg); }
.side-card:nth-child(odd), .learn-card:nth-child(odd), .hub-card:nth-child(odd) { transform: rotate(-.2deg); }
.side-card:hover, .learn-card:hover, .hub-card:hover, .toc a:hover { transform: translate(-1px,-2px) rotate(0) !important; box-shadow: 6px 7px 0 rgba(18,24,38,.15) !important; }

.formula-card, blockquote, .callout, .tip, .method-step .num {
  background: var(--dc-blue-wash) !important;
  border-color: var(--dc-blue) !important;
}

.lesson-meta span, .chip, .chips button, .quick-ex, .fn-btn,
.try, .mode-btn, #problemNav button {
  border: 1.5px solid var(--dc-ink) !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: 2px 2px 0 rgba(18,24,38,.10);
}

.chips button:hover, .quick-ex:hover, .fn-btn:hover, .try:hover,
.mode-btn:hover, .mode-btn.active, #problemNav button.active {
  color: var(--dc-blue-dark) !important;
  background: var(--dc-blue-wash) !important;
  border-color: var(--dc-blue) !important;
}

button, .btn, .button, .btn-go, button.primary, a.cta {
  border-radius: 6px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

.btn-go, button.primary, .primary, .btn-primary {
  color: #fff !important;
  background: var(--dc-blue) !important;
  border: 2px solid var(--dc-ink) !important;
  box-shadow: 3px 3px 0 var(--dc-ink) !important;
}
.btn-go:hover, button.primary:hover, .primary:hover, .btn-primary:hover {
  background: var(--dc-blue-dark) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--dc-ink) !important;
}
.btn-go:active, button.primary:active, .primary:active, .btn-primary:active {
  transform: translate(2px,2px) !important;
  box-shadow: 1px 1px 0 var(--dc-ink) !important;
}

input, select, textarea, .input-shell {
  color: var(--dc-ink) !important;
  background: #fff !important;
  border-color: var(--dc-ink) !important;
  border-radius: 5px !important;
}
input:focus, select:focus, textarea:focus, .input-shell:focus-within {
  border-color: var(--dc-blue) !important;
  box-shadow: 0 0 0 4px rgba(47,117,214,.18) !important;
}

.benefit-card { overflow: visible !important; background: var(--dc-ink) !important; gap: 2px !important; }
.benefit { background: #fff !important; }
.setup, .teacher { background: rgba(47,117,214,.09) !important; }
.expression { color: var(--dc-ink) !important; }
#feedback { color: var(--dc-blue-dark) !important; }

table, .g-table { background: #fff !important; border: 2px solid var(--dc-ink) !important; }
th, .g-table th { background: var(--dc-blue-wash) !important; color: var(--dc-ink) !important; }
th, td, .g-table th, .g-table td { border-color: var(--dc-line) !important; }

footer.site, body > footer {
  color: rgba(255,255,255,.72) !important;
  background: var(--dc-ink) !important;
  border-top: 3px solid var(--dc-blue) !important;
}
body > footer:not(.site) { max-width: none !important; padding-left: max(24px, calc((100vw - 1112px) / 2)) !important; }
footer a { color: rgba(255,255,255,.76) !important; }

:focus-visible { outline: 3px solid var(--dc-blue) !important; outline-offset: 3px !important; }
::selection { color: #fff; background: var(--dc-blue); }

@media (max-width: 720px) {
  body::before { left: 10px; opacity: .6; }
  body > header:not(.site) { padding: 16px 18px !important; }
  header .brand::before, header.site .brand::before { width: 32px; height: 30px; font-size: 12px; }
  .hero h1, .page-hero h1 { font-size: clamp(38px, 12vw, 54px) !important; }
  .side-card:nth-child(n), .learn-card:nth-child(n), .hub-card:nth-child(n) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  body { background: #fff !important; background-image: none !important; }
  body::before { display: none !important; }
  .paper, .card, .g-card { box-shadow: none !important; }
}