/* Signal & Motion — custom presentation layer for Web Performance Engineering */
:root {
  --sm-bg: #090a0c;
  --sm-bg-elevated: #101216;
  --sm-panel: rgba(19, 21, 25, 0.86);
  --sm-panel-strong: #15181d;
  --sm-line: rgba(255, 255, 255, 0.08);
  --sm-line-strong: rgba(255, 190, 64, 0.22);
  --sm-text: #f3f0e9;
  --sm-muted: #9c9a96;
  --sm-amber: #ffb425;
  --sm-amber-2: #ffd27a;
  --sm-teal: #53d7c3;
  --sm-coral: #ff705d;
  --sm-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
  --sm-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

html { background: var(--sm-bg); }
body.signal-motion,
body.signal-motion[data-md-color-scheme="default"],
body.signal-motion[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--sm-bg);
  --md-default-fg-color: var(--sm-text);
  --md-default-fg-color--light: #c6c3bd;
  --md-default-fg-color--lighter: #8a8884;
  --md-primary-fg-color: #101216;
  --md-accent-fg-color: var(--sm-amber);
  background:
    radial-gradient(circle at 18% 4%, rgba(255,180,37,.08), transparent 27rem),
    radial-gradient(circle at 86% 16%, rgba(83,215,195,.055), transparent 28rem),
    linear-gradient(180deg, #0b0c0f 0%, #08090b 100%);
  color: var(--sm-text);
}

body.signal-motion::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

body.signal-motion::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.signal-motion .md-header {
  background: rgba(9,10,12,.82);
  border-bottom: 1px solid var(--sm-line);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(140%);
}
.signal-motion .md-header__inner { height: 3.6rem; }
.signal-motion .md-header__button.md-logo { color: var(--sm-amber); }
.signal-motion .md-header__button.md-logo svg { transform: scale(.9); }
.signal-motion .md-header__title { font-weight: 620; letter-spacing: -.02em; }
.signal-motion .md-header__topic:first-child { color: var(--sm-amber-2); }
.signal-motion .md-header__topic + .md-header__topic { color: var(--sm-muted); }
.signal-motion .md-header__source { display: none; }
.signal-motion .md-header__option { display: none; }
.signal-motion .md-search__form,
.signal-motion .md-search__output { background: #121419; }
.signal-motion .md-search__input { color: var(--sm-text); }

.signal-motion .md-container { background: transparent; }
.signal-motion .md-main__inner { max-width: 92rem; }
.signal-motion .md-content { min-width: 0; }
.signal-motion .md-content__inner { padding-top: 2.5rem; }
.signal-motion .md-sidebar { color: #b8b5af; }
.signal-motion .md-sidebar__scrollwrap { scrollbar-color: rgba(255,180,37,.25) transparent; }
.signal-motion .md-nav__title,
.signal-motion .md-nav__link { color: #aaa8a3; }
.signal-motion .md-nav__link:hover,
.signal-motion .md-nav__link:focus { color: var(--sm-text); }
.signal-motion .md-nav__item .md-nav__link--active {
  color: var(--sm-amber-2);
  font-weight: 650;
}
.signal-motion .md-nav__item .md-nav__link--active::before {
  content: "";
  width: .35rem;
  height: .35rem;
  margin-right: .48rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--sm-amber);
  box-shadow: 0 0 16px rgba(255,180,37,.7);
}
.signal-motion .md-sidebar--primary .md-sidebar__inner {
  border-right: 1px solid var(--sm-line);
}
.signal-motion .md-sidebar--secondary .md-sidebar__inner {
  border-left: 1px solid var(--sm-line);
}

.signal-motion .md-typeset {
  color: #d8d5cf;
  font-size: .82rem;
  line-height: 1.78;
}
.signal-motion .md-typeset h1,
.signal-motion .md-typeset h2,
.signal-motion .md-typeset h3 {
  color: var(--sm-text);
  letter-spacing: -.035em;
}
.signal-motion.signal-lesson .md-typeset h1 {
  max-width: 15ch;
  margin-bottom: 1rem;
  font-family: var(--sm-serif);
  font-size: clamp(2.55rem, 5vw, 4.7rem);
  font-weight: 500;
  line-height: .98;
}
.signal-motion.signal-lesson .md-typeset h2 {
  margin-top: 2.8rem;
  padding-top: .8rem;
  font-family: var(--sm-serif);
  font-size: 1.6rem;
  font-weight: 500;
  border-top: 1px solid var(--sm-line);
}
.signal-motion.signal-lesson .md-typeset h2::before {
  content: "//";
  margin-right: .55rem;
  color: var(--sm-amber);
  font-family: var(--md-code-font-family);
  font-size: .72em;
  letter-spacing: -.2em;
}
.signal-motion .md-typeset h3 { color: var(--sm-amber-2); }
.signal-motion .md-typeset a { color: #e2c98f; text-decoration-color: rgba(255,180,37,.35); }
.signal-motion .md-typeset a:hover { color: var(--sm-amber); }
.signal-motion .headerlink { opacity: 0; color: var(--sm-amber) !important; }
.signal-motion h2:hover .headerlink,
.signal-motion h3:hover .headerlink { opacity: .75; }

.signal-motion .md-typeset code {
  color: #f4d9a3;
  background: rgba(255,180,37,.075);
  border: 1px solid rgba(255,180,37,.09);
  border-radius: .34rem;
}
.signal-motion .md-typeset pre > code {
  color: #d5d2cb;
  background: #0d0f12;
  border: 0;
}
.signal-motion .highlight {
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  overflow: hidden;
  background: #0d0f12;
  box-shadow: inset 0 1px rgba(255,255,255,.02), 0 12px 38px rgba(0,0,0,.24);
}
.signal-motion .highlight::before {
  content: "CODE / TRACE";
  display: block;
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--sm-line);
  color: #6e706f;
  font: 600 .52rem/1 var(--md-code-font-family);
  letter-spacing: .16em;
}

.signal-motion .md-typeset blockquote {
  position: relative;
  margin: 1.6rem 0;
  padding: 1.05rem 1.15rem 1.05rem 1.35rem;
  color: #dcd7cd;
  border-left: 0;
  border: 1px solid rgba(255,180,37,.18);
  border-radius: .75rem;
  background: linear-gradient(135deg, rgba(255,180,37,.09), rgba(255,180,37,.025));
}
.signal-motion .md-typeset blockquote::before {
  content: "SIGNAL";
  display: block;
  margin-bottom: .35rem;
  color: var(--sm-amber);
  font: 700 .53rem/1 var(--md-code-font-family);
  letter-spacing: .15em;
}
.signal-motion .md-typeset .admonition,
.signal-motion .md-typeset details {
  border: 1px solid var(--sm-line);
  border-radius: .8rem;
  background: var(--sm-panel);
  box-shadow: none;
}
.signal-motion .md-typeset .admonition-title,
.signal-motion .md-typeset summary { background: rgba(255,255,255,.025); }

.signal-motion .md-typeset table:not([class]) {
  border-radius: .75rem;
  overflow: hidden;
  background: rgba(18,20,24,.62);
  box-shadow: 0 0 0 1px var(--sm-line);
}
.signal-motion .md-typeset table:not([class]) th {
  background: rgba(255,180,37,.06);
  color: var(--sm-amber-2);
}
.signal-motion .md-typeset table:not([class]) td,
.signal-motion .md-typeset table:not([class]) th { border-color: var(--sm-line); }

.signal-motion .md-footer { background: #08090b; border-top: 1px solid var(--sm-line); }
.signal-motion .md-footer-meta { background: #08090b; }
.signal-motion .md-footer__link { color: var(--sm-muted); }
.signal-motion .md-footer__link:hover { color: var(--sm-amber); }

/* Homepage */
.signal-motion.signal-home .md-sidebar--primary,
.signal-motion.signal-home .md-sidebar--secondary { display: none; }
.signal-motion.signal-home .md-content { max-width: none; margin: 0; }
.signal-motion.signal-home .md-main__inner { max-width: 88rem; margin-top: 0; }
.signal-motion.signal-home .md-content__inner { margin: 0; padding: 1.8rem 1rem 5rem; max-width: none; }

.sm-home { position: relative; }
.sm-hero {
  position: relative;
  min-height: 31rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .92fr);
  gap: 3.4rem;
  align-items: center;
  padding: 4rem 3.4rem 3.2rem;
  overflow: hidden;
  border: 1px solid var(--sm-line);
  border-radius: 1.35rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%),
    rgba(11,12,15,.74);
  box-shadow: var(--sm-shadow), inset 0 1px rgba(255,255,255,.03);
}
.sm-hero::after {
  content: "";
  position: absolute;
  right: -8rem;
  bottom: -13rem;
  width: 33rem;
  height: 33rem;
  border: 1px solid rgba(255,180,37,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(255,180,37,.018), 0 0 0 6rem rgba(255,180,37,.012), 0 0 0 9rem rgba(255,180,37,.008);
  pointer-events: none;
}
.sm-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.2rem;
  color: var(--sm-amber);
  font: 700 .62rem/1 var(--md-code-font-family);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sm-kicker::before { content: ""; width: 2rem; height: 1px; background: var(--sm-amber); }
.sm-hero h1 {
  max-width: 9ch !important;
  margin: 0 0 1.15rem !important;
  font-family: var(--sm-serif) !important;
  font-size: clamp(3.2rem, 7vw, 6.6rem) !important;
  font-weight: 500 !important;
  line-height: .87 !important;
  letter-spacing: -.055em !important;
}
.sm-hero h1 span { color: var(--sm-amber); }
.sm-lede { max-width: 34rem; margin: 0 0 1.6rem; color: #b7b3ac; font-size: 1.02rem; line-height: 1.7; }
.sm-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.sm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border-radius: .6rem;
  font-weight: 700;
  text-decoration: none !important;
}
.sm-button--primary {
  color: #14100a !important;
  background: linear-gradient(135deg, #ffc758, #ffad1f);
  box-shadow: 0 10px 30px rgba(255,180,37,.18), inset 0 1px rgba(255,255,255,.45);
}
.sm-button--ghost { color: #d7d3cb !important; border: 1px solid var(--sm-line); background: rgba(255,255,255,.025); }
.sm-meta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.45rem; color: #777a79; font: 600 .62rem/1.4 var(--md-code-font-family); letter-spacing: .02em; }

.sm-telemetry {
  position: relative;
  min-height: 24rem;
  border: 1px solid var(--sm-line);
  border-radius: 1rem;
  background: rgba(8,10,12,.62);
  overflow: hidden;
}
.sm-telemetry__top { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .7rem .8rem; border: 1px solid rgba(83,215,195,.14); border-radius: .6rem; background: rgba(7,28,27,.58); }
.sm-telemetry__label { color: #73a9a2; font: 700 .52rem/1 var(--md-code-font-family); letter-spacing: .15em; }
.sm-telemetry__value { margin-top: .25rem; color: var(--sm-teal); font-family: var(--sm-serif); font-size: 1.7rem; }
.sm-telemetry svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-waterfall { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: grid; grid-template-columns: .7fr .38fr .55fr .7fr .6fr 1.5fr 1.2fr; gap: 2px; }
.sm-waterfall span { display: block; height: 1.1rem; border-radius: 2px; background: linear-gradient(90deg, var(--sm-teal), var(--sm-amber)); opacity: .8; }
.sm-waterfall span:nth-child(n+5) { background: linear-gradient(90deg, var(--sm-amber), var(--sm-coral)); }

.sm-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 3.2rem .15rem 1rem; }
.sm-section-head h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font-family: var(--sm-serif) !important; font-size: 2rem !important; font-weight: 500 !important; }
.sm-section-head p { margin: 0; color: #7f817f; font: 600 .62rem/1.5 var(--md-code-font-family); }
.sm-module-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .72rem; }
.sm-module {
  position: relative;
  min-height: 13.6rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--sm-line);
  border-radius: .85rem;
  color: var(--sm-text) !important;
  text-decoration: none !important;
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.007));
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.sm-module:hover { transform: translateY(-4px); border-color: rgba(255,180,37,.28); background: linear-gradient(145deg, rgba(255,180,37,.06), rgba(255,255,255,.012)); }
.sm-module__num { color: #777b79; font: 600 .72rem/1 var(--md-code-font-family); }
.sm-module__art { height: 5.5rem; margin: .7rem 0; position: relative; }
.sm-module__art::before,
.sm-module__art::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); border-radius: 50%; }
.sm-module__art::before { width: 4.4rem; height: 4.4rem; border: 1px solid rgba(83,215,195,.34); box-shadow: 0 0 0 1rem rgba(83,215,195,.035), 0 0 0 2rem rgba(83,215,195,.018); }
.sm-module:nth-child(2n) .sm-module__art::before { border-radius: 0; width: 5rem; height: 2.7rem; border-color: rgba(255,180,37,.34); transform: translate(-50%,-50%) skewY(-9deg); box-shadow: 0 .7rem 0 -1px rgba(255,180,37,.09), 0 1.4rem 0 -1px rgba(255,180,37,.045); }
.sm-module:nth-child(4n) .sm-module__art::before { width: 100%; height: 3.4rem; border: 0; border-radius: 0; background: repeating-radial-gradient(ellipse at 0 50%, transparent 0 10px, rgba(255,112,93,.25) 11px 12px); box-shadow: none; }
.sm-module__art::after { width: .45rem; height: .45rem; background: var(--sm-amber); box-shadow: 0 0 18px rgba(255,180,37,.7); }
.sm-module h3 { margin: .3rem 0 .3rem; color: var(--sm-text) !important; font-size: .92rem; letter-spacing: -.02em; }
.sm-module p { margin: 0; color: #858783; font-size: .64rem; line-height: 1.5; }
.sm-module__meta { position: absolute; left: 1rem; bottom: .85rem; color: #6d706e; font: 600 .53rem/1 var(--md-code-font-family); }
.sm-closing { margin-top: 1rem; padding: 1.6rem 1.8rem; display: grid; grid-template-columns: 1.3fr repeat(3,.55fr); gap: 1.4rem; align-items: center; border: 1px solid var(--sm-line); border-radius: .9rem; background: rgba(255,255,255,.018); }
.sm-quote { font-family: var(--sm-serif); font-size: 1.25rem; color: #d7d3cb; }
.sm-quote em { color: var(--sm-amber); }
.sm-stat strong { display: block; color: var(--sm-text); font-family: var(--sm-serif); font-size: 1.45rem; font-weight: 500; }
.sm-stat span { color: #6f7270; font: 600 .52rem/1.4 var(--md-code-font-family); }

/* Lesson instrumentation */
.sm-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20; background: rgba(255,255,255,.025); }
.sm-reading-progress > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sm-teal), var(--sm-amber), var(--sm-coral)); box-shadow: 0 0 12px rgba(255,180,37,.35); }
.sm-lesson-kicker { margin-bottom: .75rem; color: var(--sm-amber); font: 700 .57rem/1 var(--md-code-font-family); letter-spacing: .16em; text-transform: uppercase; }
.sm-lesson-kicker::before { content: "ACTIVE TRACE / "; color: #5e605f; }
.sm-lesson-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.8rem; }
.sm-lesson-meta span { padding: .36rem .55rem; border: 1px solid var(--sm-line); border-radius: 999px; color: #9b9c99; background: rgba(255,255,255,.02); font: 600 .55rem/1 var(--md-code-font-family); }
.sm-rail-card { margin: .7rem 0 1.1rem; padding: .85rem; border: 1px solid var(--sm-line-strong); border-radius: .7rem; background: linear-gradient(145deg, rgba(255,180,37,.07), rgba(255,180,37,.015)); }
.sm-rail-card__label { color: #888b89; font: 700 .51rem/1 var(--md-code-font-family); letter-spacing: .14em; }
.sm-rail-card__metric { margin: .25rem 0 .25rem; color: var(--sm-amber); font-family: var(--sm-serif); font-size: 1.45rem; }
.sm-rail-card__text { color: #767976; font-size: .58rem; line-height: 1.5; }
.sm-rail-spark { height: 2.5rem; margin-top: .5rem; background: linear-gradient(165deg, transparent 0 40%, rgba(255,180,37,.5) 41% 43%, transparent 44% 55%, rgba(83,215,195,.45) 56% 58%, transparent 59%); opacity: .7; }

@media screen and (min-width: 76.25em) {
  .signal-motion.signal-lesson .md-content__inner { max-width: 48rem; }
  .signal-motion.signal-lesson .md-grid { max-width: 92rem; }
}
@media screen and (max-width: 78rem) {
  .sm-module-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media screen and (max-width: 60rem) {
  .sm-hero { grid-template-columns: 1fr; padding: 2.6rem 1.5rem 1.5rem; }
  .sm-telemetry { min-height: 18rem; }
  .sm-module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm-closing { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 40rem) {
  .signal-motion.signal-home .md-content__inner { padding-left: .55rem; padding-right: .55rem; }
  .sm-hero { border-radius: .9rem; gap: 1.5rem; }
  .sm-hero h1 { font-size: clamp(3rem, 16vw, 4.6rem) !important; }
  .sm-module-grid { grid-template-columns: 1fr; }
  .sm-module { min-height: 11.6rem; }
  .sm-module__art { height: 4.3rem; }
  .sm-closing { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .sm-telemetry .trace-a { stroke-dasharray: 12 8; animation: sm-dash 9s linear infinite; }
  .sm-telemetry .trace-b { stroke-dasharray: 6 10; animation: sm-dash 12s linear infinite reverse; }
  .sm-module__art::after { animation: sm-pulse 2.8s ease-in-out infinite; }
  @keyframes sm-dash { to { stroke-dashoffset: -120; } }
  @keyframes sm-pulse { 50% { opacity: .45; transform: translate(-50%,-50%) scale(.7); } }
}