:root{
  --chart-physics: #2f7dd1;
  --chart-math: #16a085;
  --chart-cs: #f39c12;
  --chart-qbio: #e74c3c;
}

.science-hero.science-hero-apod{
  --hero-glass-bg: color-mix(in oklab, var(--surface) 84%, transparent);
  --hero-glass-border: color-mix(in oklab, var(--border-strong) 74%, transparent);
  padding: clamp(24px, 3.6vw, 40px) 0 clamp(14px, 2vw, 24px);
  min-height: clamp(620px, 80svh, 840px);
  align-items: center;
  background:
    radial-gradient(1180px 300px at 50% -16%, color-mix(in oklab, var(--ink-muted) 6%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 98.5%, #f6f8fb 1.5%), color-mix(in oklab, var(--bg) 97%, #f6f8fb 3%));
}

.science-hero.science-hero-apod::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.24;
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in oklab, var(--ink-muted) 18%, transparent) 0,
      color-mix(in oklab, var(--ink-muted) 18%, transparent) 1px,
      transparent 1px,
      transparent 112px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklab, var(--ink-muted) 14%, transparent) 0,
      color-mix(in oklab, var(--ink-muted) 14%, transparent) 1px,
      transparent 1px,
      transparent 84px
    );
}

.science-hero.science-hero-apod::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(110px, 16vh, 170px);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0), var(--bg));
  pointer-events: none;
  z-index: 0;
}

.apod-hero-grid{
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 52px);
  min-height: clamp(520px, 66vh, 700px);
  padding-inline: clamp(8px, 1.2vw, 16px);
}

.apod-hero-grid::before,
.apod-hero-grid::after{
  content: none;
}

.apod-hero-copy,
.apod-hero-card{
  position: relative;
  z-index: 1;
  width: 100%;
}

.apod-hero-copy{
  justify-self: center;
  max-width: 560px;
  display: grid;
  gap: 14px;
  align-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.apod-hero-copy::before,
.apod-hero-copy::after{
  content: none;
}

.science-hero.science-hero-apod .hero-kicker{
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.18em;
}


.apod-hero-copy > .hero-kicker,
.apod-hero-copy > .apod-hero-title,
.apod-hero-copy > .apod-hero-subtitle,
.apod-hero-copy > .apod-hero-meta,
.apod-hero-card > .apod-hero-chip,
.apod-hero-card > .apod-hero-media,
.apod-hero-card > .apod-hero-content{
  --piece-x: 0px;
  --piece-y: 0px;
  transform: translate3d(var(--piece-x), var(--piece-y), 0);
}

.apod-hero-copy > .hero-kicker{
  --piece-x: 8px;
  --piece-y: -2px;
  justify-self: start;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 72%, var(--border));
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 6px 16px rgba(2,6,23,0.05);
}

.apod-hero-copy > .apod-hero-title{
  --piece-x: -4px;
  --piece-y: 1px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  background: linear-gradient(165deg, color-mix(in oklab, var(--surface) 94%, transparent), color-mix(in oklab, var(--surface) 86%, transparent));
  box-shadow: 0 10px 22px rgba(2,6,23,0.05);
}

.apod-hero-copy > .apod-hero-subtitle{
  --piece-x: 6px;
  --piece-y: 2px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 74%, transparent);
  background: linear-gradient(170deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 84%, transparent));
}

.apod-hero-copy > .apod-hero-meta{
  --piece-x: -3px;
  --piece-y: 5px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  background: linear-gradient(168deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 84%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 10px 24px rgba(2,6,23,0.06);
}


.apod-hero-title{
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(2rem, 3.9vw, 2.95rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.apod-hero-subtitle{
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  line-height: 1.5;
  max-width: 36ch;
}

.apod-hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 2px;
}

.apod-hero-meta-item{
  display: grid;
  gap: 2px;
  min-width: 172px;
  padding: 6px 0 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: transparent;
}

.apod-hero-meta-label{
  color: var(--ink-muted);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.apod-hero-meta-value{
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.apod-hero-card{
  justify-self: center;
  max-width: 780px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  display: grid;
  gap: 12px;
  min-height: 0;
  max-height: clamp(430px, 67vh, 680px);
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.apod-hero-card::-webkit-scrollbar{
  width: 8px;
}

.apod-hero-card::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 20%, transparent);
}

.apod-hero-card::-webkit-scrollbar-track{
  background: transparent;
}

.apod-hero-chip{
  --piece-x: -8px;
  --piece-y: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 74%, var(--border));
  background: linear-gradient(170deg, color-mix(in oklab, var(--surface) 94%, transparent), color-mix(in oklab, var(--surface) 84%, transparent));
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 24px rgba(2, 6, 23, 0.08);
}

.apod-hero-chip-kicker{
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 66%, var(--ink-muted));
  font-weight: 720;
  white-space: nowrap;
}

.apod-hero-chip-text{
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58ch;
}

.apod-hero-media{
  --piece-x: 6px;
  --piece-y: 2px;
  width: 100%;
  height: clamp(240px, 36vh, 340px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border-strong) 76%, var(--border));
  background: color-mix(in oklab, var(--surface) 88%, #111827 12%);
  position: relative;
  display: grid;
  place-items: center;
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), 0 18px 32px rgba(2, 6, 23, 0.12), 0 6px 12px rgba(2, 6, 23, 0.08);
}

.apod-hero-media::before{ content: none; }

.apod-hero-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(2,6,23,0.18));
  pointer-events: none;
  z-index: 2;
}

.apod-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.apod-hero-media .apod-media-embed,
.apod-media .apod-media-embed{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;
}

.apod-hero-media video.apod-media-embed,
.apod-media video.apod-media-embed{
  object-fit: cover;
}

.apod-hero-content{
  --piece-x: -5px;
  --piece-y: 4px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  background: linear-gradient(165deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 84%, transparent));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 22px rgba(2,6,23,0.06);
  max-height: clamp(148px, 22vh, 218px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.apod-hero-content::-webkit-scrollbar{
  width: 8px;
}

.apod-hero-content::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 18%, transparent);
}

.apod-hero-content::-webkit-scrollbar-track{
  background: transparent;
}

.apod-hero-media-title::before{ content: none; }

.apod-hero-media-title{
  margin: 0;
  font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  font-weight: 730;
  display: block;
  overflow: visible;
}

.apod-hero-media-desc{
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
  display: block;
  overflow: visible;
}


@media (max-width: 1080px){
  .science-hero.science-hero-apod{
    min-height: auto;
    padding: clamp(24px, 5vw, 34px) 0 clamp(12px, 2vw, 20px);
  }

  .apod-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding-inline: 0;
  }

  .apod-hero-copy{
    max-width: none;
    padding: 12px;
  }

  .apod-hero-card{
    max-width: none;
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }

  .apod-hero-media{
    height: clamp(220px, 44vw, 320px);
  }

  .apod-hero-copy > .hero-kicker,
  .apod-hero-copy > .apod-hero-title,
  .apod-hero-copy > .apod-hero-subtitle,
  .apod-hero-copy > .apod-hero-meta,
  .apod-hero-card > .apod-hero-chip,
  .apod-hero-card > .apod-hero-media,
  .apod-hero-card > .apod-hero-content{
    --piece-x: 0px;
    --piece-y: 0px;
  }
}

@media (max-width: 680px){
  .science-hero.science-hero-apod{
    padding-top: clamp(30px, 8vw, 44px);
    padding-bottom: clamp(16px, 4vw, 24px);
    min-height: auto;
  }

  .science-hero.science-hero-apod::before{
    opacity: 0.2;
  }

  .apod-hero-title{
    font-size: clamp(1.9rem, 8vw, 2.55rem);
  }

  .apod-hero-meta{
    display: grid;
    grid-template-columns: 1fr;
  }

  .apod-hero-chip{
    width: 100%;
  }

  .apod-hero-chip-text{
    max-width: none;
  }

  .apod-hero-media{
    height: clamp(190px, 56vw, 250px);
    border-radius: 14px;
  }

  .apod-hero-copy > .hero-kicker,
  .apod-hero-copy > .apod-hero-title,
  .apod-hero-copy > .apod-hero-subtitle,
  .apod-hero-copy > .apod-hero-meta,
  .apod-hero-card > .apod-hero-chip,
  .apod-hero-card > .apod-hero-media,
  .apod-hero-card > .apod-hero-content{
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

.science-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 10vw, 120px) 0 clamp(40px, 8vw, 90px);
  min-height: clamp(520px, 72vh, 720px);
  display: flex;
  align-items: center;
  background: var(--bg);
}

.science-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,0.02), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.hero-dashboard{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr) minmax(0, 0.9fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: start;
  width: 100%;
  padding-inline: clamp(8px, 2vw, 28px);
  margin-top: -18px;
}

.hero-copy{ display: grid; gap: 16px; max-width: 56ch; }

.hero-kicker{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 700;
}

.hero-title{
  font-family: var(--font-brand);
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
}

.hero-subtitle{
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.15rem);
  line-height: 1.6;
}

.hero-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 650;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.hero-chip:hover{
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.hero-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.86rem;
  width: fit-content;
}

.hero-summary{
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 0;
  margin-top: -8px;
}

.summary-title{
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 700;
  position: relative;
  padding-left: 18px;
}

.summary-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(237,70,36,0.35), 0 0 20px rgba(237,70,36,0.18);
}

.summary-current{
  font-family: var(--font-brand);
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.summary-select{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.summary-pill{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: default;
}

.summary-pill.is-active{
  color: var(--accent-strong);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

.summary-pill.is-muted{
  opacity: 0.55;
}

.summary-pill[disabled]{
  cursor: not-allowed;
}

.summary-lead{
  display: grid;
  gap: 8px;
}

.summary-label{
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
}

.summary-value{
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.hero-chart{
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 8px 12px 14px;
  margin-top: 0;
  align-self: center;
}

.hero-chart::before{
  content: "";
  position: absolute;
  inset: 50px 8% 6px 8%;
  background: radial-gradient(closest-side at 50% 78%, rgba(2,6,23,0.06), transparent 72%);
  opacity: 0.25;
  filter: blur(4px);
  pointer-events: none;
}

.hero-chart > *{
  position: relative;
  z-index: 1;
}

.chart-range-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.time-range{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
  border-radius: 12px;
}

.time-range button{
  font-size: 0.72rem;
  padding: 5px 9px;
  border-radius: 8px;
}

.hero-side{
  display: grid;
  gap: 18px;
  align-content: start;
  padding-top: 0;
  margin-top: -8px;
}

.hero-side-meta{
  display: grid;
  gap: 12px;
}

.meta-item{
  display: grid;
  gap: 6px;
}

.meta-label{
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
}

.meta-value{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}

.hero-total-card{
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 16px;
}

.total-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.total-logo{
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.6rem;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.total-value{
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.total-label{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.total-breakdown{
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 6px;
}

.total-breakdown li{
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.total-breakdown .bd-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.total-breakdown .bd-label{
  color: var(--ink-soft);
}

.total-breakdown .bd-value{
  font-weight: 700;
  color: var(--ink);
}

.hero-control-card{
  padding: 18px;
  border-radius: var(--r-lg);
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.control-title{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  font-weight: 700;
}

.control-block{
  display: grid;
  gap: 8px;
}

.control-label{
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.hero-control-card .chart-range{
  justify-content: flex-start;
}

 .hero-control-card .chart-filters{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
}

.hero-control-card .filter-pill{
  width: 100%;
  justify-content: flex-start;
}

.chart-switch{
  margin-top: 10px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(237,70,36,0.08), rgba(15,17,21,0.04));
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.chart-switch-btn{
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.chart-switch-btn.is-active{
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 6px 16px rgba(2,6,23,0.08);
}
.hero-stats{
  align-content: start;
}

.hero-stats .chart-stats{
  grid-template-columns: 1fr;
}

.hero-stats .hero-meta{
  margin-top: auto;
  width: 100%;
  justify-content: flex-start;
}

.science-intro{
  padding: clamp(24px, 4vw, 36px) 0 clamp(18px, 2.8vw, 28px);
}

.intro-inner{
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
}

.science-intro .hero-kicker{
  color: color-mix(in oklab, var(--accent) 70%, var(--ink-muted));
}

.science-intro .hero-title{
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.science-intro .hero-subtitle{
  max-width: 70ch;
}

.science-intro .hero-chips{
  justify-content: flex-start;
}

.science-intro.science-intro-arxiv{
  padding-top: clamp(24px, 3.6vw, 36px);
  padding-bottom: clamp(12px, 2vw, 20px);
}

.science-widgetboard + .science-intro.science-intro-arxiv{
  margin-top: clamp(42px, 6vw, 64px);
}

.science-intro.science-intro-arxiv .intro-inner{
  max-width: 860px;
}


.hero-chart-card{
  position: relative;
  z-index: 1;
  padding: 20px;
  border-radius: 20px;
  border-color: color-mix(in oklab, var(--accent) 10%, var(--border));
  background: color-mix(in oklab, var(--surface-solid) 82%, var(--bg) 18%);
  box-shadow: 0 40px 80px rgba(2,6,23,0.12), 0 16px 32px rgba(2,6,23,0.08),
    inset 0 1px 0 color-mix(in oklab, var(--surface-solid) 70%, transparent);
  width: 100%;
  align-self: center;
}

.chart-head{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.chart-title{
  font-weight: 750;
  letter-spacing: -0.01em;
}

.chart-subtitle{
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.chart-range{
  display: inline-flex;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.chart-range button{
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.chart-range button.is-active{
  background: var(--accent-soft);
  color: var(--ink);
}

.chart-range button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.chart-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.filter-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 650;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.filter-pill:hover{
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.filter-pill.is-active{
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--ink);
}

.filter-bar{
  display: grid;
  gap: 10px;
}

.arxiv-filter-stack{
  display: grid;
  gap: 10px;
}

.arxiv-selector-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arxiv-selector-field{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.arxiv-selector-label{
  color: var(--ink-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arxiv-select{
  width: fit-content;
  min-width: 0;
  max-width: none;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  padding: 0 28px 0 10px;
  font-size: 0.8rem;
  font-weight: 650;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.arxiv-select:focus-visible{
  border-color: var(--accent-soft-border);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent);
}

.arxiv-keyword-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.arxiv-keyword-input{
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  padding: 0 11px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.arxiv-keyword-input::placeholder{
  color: var(--ink-muted);
}

.arxiv-keyword-input:focus-visible{
  border-color: var(--accent-soft-border);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
}

.arxiv-keyword-clear{
  min-height: 34px;
  padding-inline: 11px;
  border-radius: 10px;
  font-size: 0.78rem;
}


.arxiv-group-launch{
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.74rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.arxiv-group-launch span{
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 72%, transparent);
  background: color-mix(in oklab, var(--surface) 72%, var(--accent) 10%);
  color: var(--ink-muted);
  font-size: 0.66rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.arxiv-group-launch.has-active{
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}

.arxiv-group-launch.has-active span{
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 26%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}

.arxiv-group-dock{
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}

.arxiv-group-dock-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.arxiv-group-close{
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--ink-muted);
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.arxiv-group-close:hover{
  color: var(--ink);
  border-color: var(--border-strong);
  background: color-mix(in oklab, var(--surface) 74%, var(--accent) 6%);
}

.arxiv-pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arxiv-view-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}

.arxiv-view-btn{
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.arxiv-view-btn:hover{
  color: var(--ink);
  border-color: color-mix(in oklab, var(--border-strong) 60%, transparent);
}

.arxiv-view-btn.is-active{
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 34%, var(--border));
  color: var(--ink);
}


.arxiv-top-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
}

.arxiv-top-filters > .arxiv-selector-label{
  min-width: 100%;
}

.arxiv-top-filters .arxiv-selector-field{
  gap: 5px;
}

.arxiv-top-filters .arxiv-select{
  height: 28px;
  font-size: 0.76rem;
  padding: 0 24px 0 9px;
}

.arxiv-top-exclude-field{
  min-width: min(220px, 100%);
  flex: 1;
}

.arxiv-top-exclude-input{
  height: 28px;
  border-radius: 999px;
  font-size: 0.76rem;
  padding: 0 10px;
}

.arxiv-keywords-meta{
  color: var(--ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.arxiv-keywords-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arxiv-keyword-item{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  transform: scale(var(--kw-scale, 1));
  transform-origin: left center;
}

.arxiv-keyword-item strong{
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.arxiv-keyword-item em{
  font-style: normal;
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.arxiv-group-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.arxiv-group-btn{
  min-height: 30px;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.arxiv-active-groups{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}

.arxiv-group-empty{
  color: var(--ink-muted);
  font-size: 0.74rem;
}

.arxiv-group-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  max-width: min(230px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arxiv-group-chip span{
  color: var(--ink-muted);
  font-weight: 700;
}

.arxiv-group-save-row{
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(190px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.arxiv-group-name,
.arxiv-group-terms{
  height: 30px;
  border-radius: 999px;
}

.chart-canvas{
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 6px 0 2px;
  box-shadow: none;
}

#hero-chart{
  width: 100%;
  height: 330px;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(2,6,23,0.12)) drop-shadow(0 8px 16px rgba(2,6,23,0.08));
}

#hero-chart.is-radar{
  height: 410px;
}

.chart-grid line{
  stroke: color-mix(in oklab, var(--ink) 12%, transparent);
  stroke-dasharray: 4 6;
}

.chart-axis text{
  fill: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.02em;
}

.chart-line{
  fill: none;
  stroke-width: 2.4;
}

.chart-line.physics{ stroke: var(--chart-physics); }
.chart-line.math{ stroke: var(--chart-math); }
.chart-line.cs{ stroke: var(--chart-cs); }
.chart-line.q-bio{ stroke: var(--chart-qbio); }

.chart-point{
  stroke: var(--surface);
  stroke-width: 1.5;
}

.radar-ring{
  fill: none;
  stroke: url(#radarStroke);
}

.radar-ring.shadow{
  stroke: rgba(2,6,23,0.12);
  filter: blur(0.6px);
}

.radar-ring.highlight{
  stroke: rgba(255,255,255,0.55);
  filter: blur(0.4px);
}

.radar-axes line{
  stroke: color-mix(in oklab, var(--ink) 18%, transparent);
}

.radar-fill{
  fill: color-mix(in oklab, var(--accent) 6%, transparent);
}

.radar-line{
  stroke: var(--accent-strong);
  stroke-width: 2;
  fill: none;
}

.radar-point{
  stroke: var(--surface);
  stroke-width: 1.2;
}

.radar-label{
  fill: var(--ink-muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.heatmap-cell{
  stroke: color-mix(in oklab, var(--ink) 10%, transparent);
  stroke-width: 0.6;
}

.heatmap-x text,
.heatmap-y text{
  fill: var(--ink-muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.heatmap-legend text{
  fill: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.heatmap-cell:hover{
  stroke: rgba(2,6,23,0.25);
  stroke-width: 0.8;
}
.chart-tooltip{
  position: absolute;
  top: 12px;
  right: auto;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.78rem;
  color: var(--ink);
  display: none;
  pointer-events: none;
  min-width: 140px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.chart-tooltip.is-visible{ display: block; }
.chart-tooltip .tt-title{ font-weight: 700; margin-bottom: 6px; }
.chart-tooltip .tt-row{ display: flex; align-items: center; gap: 6px; }
.chart-tooltip .tt-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.chart-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.chart-stats.is-vertical{
  grid-template-columns: 1fr;
}

.stat-card{
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 4px;
}

.stat-label{
  color: var(--ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.stat-value{
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.science-section{ padding: clamp(56px, 6.6vw, 78px) 0 88px; }

.science-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 360px);
  gap: 14px;
  align-items: start;
}

.science-grid-main-only{
  grid-template-columns: minmax(0, 1fr);
}

.science-card{
  padding: 14px;
  border-radius: var(--r-lg);
}

.card-head{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.card-title{
  font-weight: 750;
  letter-spacing: -0.01em;
}

.card-subtitle{
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin-top: 2px;
}

.card-meta{
  color: var(--ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.card-body{ display: grid; gap: 12px; }

.card-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.science-loading{ color: var(--muted); padding: 8px 0; }

.arxiv-list{ display: grid; gap: 12px; }

.arxiv-item{
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 6px;
}

.arxiv-title{
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.arxiv-meta{
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.arxiv-summary{
  color: var(--muted);
  font-size: 0.95rem;
}

.arxiv-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.arxiv-tag{
  font-size: 0.74rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--ink-muted);
}

.journal-list{
  display: grid;
  gap: 10px;
}

.journal-item{
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, border-color 140ms ease;
}

.journal-item:hover{
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.journal-title{ font-weight: 700; }
.journal-meta{ color: var(--ink-muted); font-size: 0.86rem; }

.research-archive-placeholder{
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 34px);
  min-height: clamp(220px, 30vh, 292px);
  border: 1px solid color-mix(in oklab, var(--border-strong) 70%, var(--border));
  background: linear-gradient(165deg, color-mix(in oklab, var(--surface) 94%, transparent), color-mix(in oklab, var(--surface) 84%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 30px rgba(2,6,23,0.07);
  display: grid;
  align-content: center;
  gap: clamp(12px, 1.6vw, 18px);
}

.research-archive-head{
  display: flex;
  justify-content: flex-end;
}

.research-archive-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 72%, var(--border));
  background: linear-gradient(170deg, color-mix(in oklab, var(--surface) 90%, transparent), color-mix(in oklab, var(--surface) 80%, transparent));
  backdrop-filter: blur(10px) saturate(1.03);
  -webkit-backdrop-filter: blur(10px) saturate(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58), 0 6px 14px rgba(2,6,23,0.07);
  color: var(--ink-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.research-archive-status::before{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink-muted) 70%, #fff);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ink-muted) 24%, transparent);
  animation: research-status-pulse 2.6s ease-out infinite;
}

.research-archive-body{
  display: grid;
  gap: 11px;
  align-content: center;
}

.research-archive-title{
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
}

.research-archive-copy{
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  max-width: 62ch;
}

@keyframes research-status-pulse{
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ink-muted) 22%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--ink-muted) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ink-muted) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce){
  .research-archive-status::before{
    animation: none;
  }
}


.apod-media{
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 160px;
  display: grid;
  place-items: center;
}

.apod-media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.apod-title{ font-weight: 700; margin-top: 8px; }
.apod-date{ color: var(--ink-muted); font-size: 0.86rem; }
.apod-desc{ color: var(--muted); margin: 6px 0 0; }

.science-rail{
  position: sticky;
  top: 86px;
  display: grid;
  gap: 14px;
}

@media (max-width: 1100px){
  .science-hero{ min-height: unset; }
  .hero-dashboard{ grid-template-columns: 1fr; margin-top: 0; padding-inline: 0; }
  .hero-summary{ order: 1; margin-top: 0; }
  .hero-chart{ order: 2; margin-top: 0; }
  .hero-side{ order: 3; margin-top: 0; }
}

@media (max-width: 980px){
  .science-grid{ grid-template-columns: 1fr; }
  .science-rail{ position: static; }
}

@media (max-width: 700px){
  .chart-stats{ grid-template-columns: 1fr; }
  #hero-chart{ height: 240px; }
}

@media (max-width: 560px){
  .science-card{ padding: 12px; }
  .card-head{ flex-direction: column; align-items: flex-start; }
  .hero-chip{ width: 100%; justify-content: center; }
  .hero-control-card .chart-filters{ grid-template-columns: 1fr; }
}




/* Subtle lighting + attenuation refinements for hero charts */
.hero-chart::after{
  content: "";
  position: absolute;
  inset: 22px 12% 18px 12%;
  background: radial-gradient(closest-side at 32% 20%, rgba(255,255,255,0.55), transparent 70%);
  opacity: 0.55;
  filter: blur(4px);
  pointer-events: none;
}

.chart-canvas::before{
  content: "";
  position: absolute;
  inset: -4px 8% 10px 8%;
  background: radial-gradient(closest-side, rgba(2,6,23,0.10), rgba(2,6,23,0.04) 60%, transparent 75%);
  opacity: 0.18;
  filter: blur(6px);
  pointer-events: none;
}

#hero-chart{
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 26px 40px rgba(2,6,23,0.12))
    drop-shadow(0 8px 18px rgba(2,6,23,0.08))
    drop-shadow(0 -8px 18px rgba(255,255,255,0.45));
}

.chart-tooltip{
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
  backdrop-filter: blur(10px);
}

.heatmap-cell{
  opacity: 0.95;
  transition: opacity 160ms ease, filter 160ms ease;
}

.heatmap-cell:hover{
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(2,6,23,0.18));
}


#hero-filters{
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ink) 18%, transparent) transparent;
}

#hero-filters::-webkit-scrollbar{
  width: 6px;
}

#hero-filters::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--ink) 18%, transparent);
  border-radius: 999px;
}

#hero-filters::-webkit-scrollbar-track{
  background: transparent;
}

.chart-canvas.is-line::after{
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(2,6,23,0.12), rgba(2,6,23,0.06) 55%, transparent 70%);
  border-radius: 18px;
  filter: blur(12px);
  opacity: 0.55;
  pointer-events: none;
}




.hero-chip-bar{
  width: 100%;
  margin: clamp(14px, 2.2vh, 24px) 0 clamp(32px, 4vh, 52px);
  padding: 6px 0 9px;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: transparent;
  backdrop-filter: none;
  position: relative;
  z-index: 2;
}

.hero-chip-bar .container{
  width: min(99vw, calc(var(--container) + 260px));
}
.hero-chip-bar-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}




.science-widgetboard{
  padding: clamp(8px, 1.8vw, 16px) 0 clamp(34px, 4.8vw, 52px);
  overflow-x: clip;
}

.science-widgetboard > .container,
.science-widgetboard .widgetboard-body{
  min-width: 0;
  overflow-x: clip;
}

.science-widgetboard.is-collapsed{
  padding-bottom: 14px;
}

.science-widgetboard-arxiv{
  padding-top: clamp(4px, 1vw, 10px);
  padding-bottom: clamp(34px, 4.8vw, 52px);
}

.science-widgetboard-arxiv.is-collapsed{
  padding-bottom: 12px;
}

.science-widgetboard-arxiv .widgetboard-body{
  gap: 0;
}

.arxiv-explorer-card{
  width: min(1100px, 100%);
  margin-inline: auto;
}

.widgetboard-actions .widget-action.widget-action-meta{
  cursor: default;
  pointer-events: none;
  color: var(--ink-muted);
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  box-shadow: none;
}

.widgetboard-actions .widget-action.widget-action-meta:hover{
  transform: none;
  box-shadow: none;
}

.widgetboard-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.widgetboard-body{
  display: grid;
  gap: 12px;
  max-height: 5000px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 320ms ease, opacity 220ms ease, transform 220ms ease;
}

.science-widgetboard.is-collapsed .widgetboard-body{
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.widgetboard-head-compact{
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.widgetboard-collapse-btn{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, var(--surface) 95%, transparent);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.widgetboard-collapse-btn:hover{
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
  color: var(--ink);
  background: color-mix(in oklab, var(--surface) 88%, #ffffff 12%);
  transform: translateY(-1px);
}

.widgetboard-collapse-btn:active{
  transform: translateY(0);
}

.widgetboard-collapse-icon{
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.widgetboard-collapse-icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.widgetboard-collapse-btn.is-collapsed .widgetboard-collapse-icon{
  transform: rotate(-90deg);
}

.widgetboard-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface) 90%, transparent));
  box-shadow: 0 6px 14px rgba(2,6,23,0.06);
}

.widgetboard-actions .widget-action{
  min-height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.widgetboard-actions .widget-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(2,6,23,0.08);
}

.widgetboard-actions .widget-action:active{
  transform: translateY(0);
}

.widgetboard-actions .widget-action[data-widget-action='clear']{
  border-color: color-mix(in oklab, #b91c1c 26%, var(--border));
  color: color-mix(in oklab, #b91c1c 72%, var(--ink-soft));
}

.widgetboard-actions .widget-action[data-widget-action='clear']:hover{
  border-color: color-mix(in oklab, #b91c1c 42%, var(--border));
  background: color-mix(in oklab, #b91c1c 8%, var(--surface));
  color: color-mix(in oklab, #b91c1c 84%, var(--ink));
}

.widgetboard-actions .widget-action.is-loading{
  pointer-events: none;
}

.widgetboard-actions .widget-action.is-loading::after{
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.6px solid color-mix(in oklab, var(--border-strong) 52%, transparent);
  border-top-color: color-mix(in oklab, var(--accent) 74%, var(--ink));
  animation: widget-action-spin 620ms linear infinite;
}

.widgetboard-actions .widget-action.is-disabled-empty{
  opacity: 0.6;
}

@keyframes widget-action-spin{
  to { transform: rotate(360deg); }
}

.widgetboard-title{
  margin: 4px 0 4px;
  font-family: var(--font-brand);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
}

.widgetboard-subtitle{
  margin: 0;
  color: var(--ink-soft);
  max-width: 72ch;
}

.deck-rail-wrap{
  width: min(1100px, 100%);
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 88%, transparent), color-mix(in oklab, var(--surface) 72%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 8px 24px rgba(15,23,42,0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 2px 8px;
}

.deck-scroll-btn{
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.deck-scroll-btn:hover{
  border-color: var(--border-strong);
  color: var(--ink);
}

.deck-rail{
  display: flex;
  gap: 16px;
  justify-content: center;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 4px;
}

.deck-rail.is-overflowing{
  justify-content: flex-start;
}

.deck-rail::-webkit-scrollbar{ height: 6px; }
.deck-rail::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 20%, transparent);
}

.deck-card{
  min-width: 188px;
  width: 188px;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  border-radius: 0;
  display: grid;
  justify-items: center;
  perspective: 760px;
  transform-style: preserve-3d;
  position: relative;
  isolation: isolate;
  will-change: transform;
  transition: transform 220ms ease, filter 220ms ease;
}

.deck-card::before{
  content: '';
  position: absolute;
  inset: 18% 12% 12%;
  border-radius: 20px;
  background: radial-gradient(82% 70% at 50% 42%, color-mix(in oklab, var(--deck-accent) 10%, transparent), transparent 74%);
  filter: blur(6px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.deck-card:hover{
  transform: translateY(-5px) scale(1.012);
  filter: saturate(1.04) contrast(1.01);
}

.deck-card:hover::before{
  opacity: 0.3;
  transform: translateY(-1px) scale(1.02);
}

.deck-card:active{
  transform: translateY(-2px) scale(0.996);
}

.deck-card.deck-tone-sponsored{
  filter: saturate(0.9) contrast(1.01);
}

.deck-card.deck-tone-sponsored::before{
  background: radial-gradient(82% 70% at 50% 42%, color-mix(in oklab, #6b7280 16%, transparent), transparent 76%);
  opacity: 0.2;
}

.deck-card.deck-tone-sponsored:hover{
  filter: saturate(0.96) contrast(1.03);
}

.deck-card.deck-tone-sponsored .deck-art-icon{
  filter: grayscale(0.1) drop-shadow(0 9px 11px rgba(2,6,23,0.16));
}

.deck-card.deck-tone-sponsored .deck-count-dot{
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.52), rgba(255,255,255,0) 44%),
    linear-gradient(160deg, #7e8794, #4a5360);
}

.deck-art{
  position: relative;
  display: block;
  margin-inline: auto;
  width: 178px;
  aspect-ratio: 1.18 / 1;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  transform-style: preserve-3d;
}

.deck-art::before{
  content: '';
  position: absolute;
  inset: 13% 19% 31% 19%;
  border-radius: 14px;
  background:
    radial-gradient(110% 100% at 24% 2%, rgba(255,255,255,0.64), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
  opacity: 0.34;
  pointer-events: none;
  z-index: 2;
}

.deck-art::after{
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 1%;
  height: 13%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(2,6,23,0.19), rgba(2,6,23,0));
  opacity: 0.52;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}

.deck-art-icon{
  width: 100%;
  height: 100%;
  display: block;
  transform: scaleX(1.14) translateY(0) translateZ(0);
  transform-origin: center;
  filter: drop-shadow(0 9px 11px rgba(2,6,23,0.14));
  transition: transform 220ms ease, filter 220ms ease;
  z-index: 1;
  position: relative;
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.deck-card:hover .deck-art-icon{
  transform: scaleX(1.14) translateY(-2px) translateZ(0);
  filter: drop-shadow(0 12px 14px rgba(2,6,23,0.18));
}

.deck-count-dot{
  position: absolute;
  left: 75.5%;
  top: 18%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 760;
  color: #fff;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.52), rgba(255,255,255,0) 44%),
    linear-gradient(160deg, color-mix(in oklab, var(--deck-accent) 62%, #1e293b), color-mix(in oklab, var(--deck-accent) 48%, #0f172a));
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow: 0 5px 12px rgba(2,6,23,0.25), inset 0 -2px 3px rgba(2,6,23,0.24);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.deck-count-dot::before{
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 2px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  opacity: 0.7;
}

.deck-sleeve-info{
  position: absolute;
  left: 28.5%;
  right: 28.5%;
  top: 66%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 1px 2px;
  text-align: center;
  color: var(--deck-text);
  max-height: 18%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.deck-name{
  width: 100%;
  font-weight: 760;
  line-height: 1.02;
  font-size: clamp(0.5rem, 0.18vw + 0.41rem, 0.58rem);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

.deck-sub{
  width: 100%;
  font-size: clamp(0.42rem, 0.12vw + 0.37rem, 0.48rem);
  line-height: 1.02;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce){
  .deck-card,
  .deck-card::before,
  .deck-art-icon{
    transition: none !important;
  }

  .deck-card,
  .deck-card:hover,
  .deck-card:active,
  .deck-card:hover .deck-art-icon{
    transform: none !important;
    filter: none !important;
  }

  .deck-card::before,
  .deck-card:hover::before{
    opacity: 0.18 !important;
    transform: none !important;
  }

  .widget-inspector-panel.is-jump-highlight,
  .board-node.is-nav-focus{
    animation: none !important;
  }

  .inspector-btn,
  .inspector-btn:hover{
    transition: none !important;
    transform: none !important;
  }
}

.widget-canvas-shell{
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.widget-canvas-head{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-right: 36px;
}

.canvas-head-actions{
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.canvas-title{
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.canvas-meta{
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.28;
  max-width: min(100%, 78ch);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.canvas-head-actions .canvas-meta{
  min-width: 0;
  margin-left: auto;
}

.canvas-help-btn{
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 98%, transparent), color-mix(in oklab, var(--surface) 92%, transparent));
  color: var(--ink-muted);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.1);
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.canvas-help-btn:hover{
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 34%, var(--border));
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12);
  transform: translateY(-1px);
}

.canvas-help-btn:active{
  transform: translateY(0);
}

.canvas-help-btn:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
}

.canvas-help-btn[aria-expanded='true']{
  color: color-mix(in oklab, var(--accent) 74%, var(--ink));
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 16%, transparent), 0 9px 20px rgba(2, 6, 23, 0.12);
}

.widget-help-popover[hidden]{
  display: none !important;
}

.widget-help-popover{
  position: absolute;
  top: 34px;
  right: 0;
  width: min(380px, calc(100vw - 28px), calc(100% - 4px));
  max-height: min(56vh, 360px);
  overflow: auto;
  border-radius: 11px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  background: color-mix(in oklab, var(--surface) 97%, white);
  box-shadow: 0 16px 30px rgba(2,6,23,0.14);
  padding: 28px 11px 10px;
  display: grid;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 0.76rem;
  z-index: 32;
}

.widget-help-close{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  background: color-mix(in oklab, var(--surface) 96%, transparent);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 730;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.widget-help-close:hover{
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 34%, var(--border));
  background: color-mix(in oklab, var(--accent) 9%, var(--surface));
}

.widget-help-close:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
}

.widget-help-popover::before{
  content: '';
  position: absolute;
  top: -6px;
  right: 11px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-top: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  transform: rotate(45deg);
}

.widget-help-popover strong{
  color: var(--ink);
  font-size: 0.82rem;
}

.widget-help-popover span{
  display: block;
  line-height: 1.35;
}

.widget-canvas{
  min-height: 220px;
  height: 220px;
  position: relative;
  overflow: clip;
  border-radius: 14px;
  background:
    radial-gradient(140% 80% at 50% 0%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 62%),
    color-mix(in oklab, var(--surface) 88%, transparent);
}

.widget-inspector{
  margin-top: 18px;
}

.inspector-gap-controls{
  margin-top: 10px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 95%, transparent), color-mix(in oklab, var(--surface) 88%, transparent));
}

.inspector-gap-toggle{
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 150ms ease, color 140ms ease;
}

.inspector-gap-toggle + .inspector-gap-toggle{
  border-left: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
}

.inspector-gap-toggle:hover{
  background: color-mix(in oklab, var(--surface) 72%, transparent);
  color: var(--ink);
}

.inspector-gap-toggle:disabled{
  color: color-mix(in oklab, var(--ink-muted) 62%, transparent);
  cursor: not-allowed;
  background: transparent;
}

.inspector-gap-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.inspector-gap-icon svg{
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inspector-gap-label{
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  font-weight: 670;
  line-height: 1.1;
}


.inspector-gap-step-row{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inspector-gap-step-label{
  font-size: 0.56rem;
  letter-spacing: 0.11em;
  font-weight: 650;
  color: var(--ink-soft);
}

.inspector-gap-step-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 999px;
  padding: 2px;
  min-width: 164px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface) 90%, transparent));
}

.inspector-gap-step{
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  min-height: 24px;
  padding: 0 10px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 150ms ease, color 140ms ease;
}

.inspector-gap-step:hover{
  background: color-mix(in oklab, var(--surface) 76%, transparent);
  color: var(--ink);
}

.inspector-gap-step.is-active{
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent-strong);
}


.widget-inspector-panel{
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  padding: 11px 12px;
  display: grid;
  gap: 7px;
  overflow: hidden;
}


.widget-inspector-panel.is-jump-highlight{
  animation: inspector-jump-highlight 620ms cubic-bezier(.24,.82,.28,1);
}

@keyframes inspector-jump-highlight{
  0%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
  40%{ box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent), 0 12px 24px rgba(2,6,23,0.12); }
  100%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
}

.widget-inspector-panel.is-empty{
  color: var(--ink-soft);
}

.widget-inspector-panel h3{
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.inspector-toggle-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inspector-toggle{
  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.inspector-toggle:hover{
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  color: var(--ink);
}

.inspector-toggle-icon{
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inspector-body{
  display: grid;
  gap: 7px;
  max-height: 1100px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 280ms ease, opacity 200ms ease, margin-top 220ms ease;
}

.widget-inspector-panel.is-collapsed{
  gap: 6px;
}

.widget-inspector-panel.is-collapsed .inspector-body{
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

.inspector-collapsed-line{
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.widget-inspector-panel.is-collapsed .inspector-collapsed-line{
  display: flex;
}

.inspector-collapsed-title{
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.inspector-collapsed-value{
  font-size: 0.82rem;
  font-weight: 760;
  color: var(--ink-strong);
  line-height: 1.2;
}

.widget-inspector-panel p{
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.32;
}

.inspector-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.inspector-role{
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.inspector-actions{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  max-width: min(62%, 430px);
}

.inspector-btn{
  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.inspector-btn:hover{
  border-color: color-mix(in oklab, var(--accent) 44%, var(--border));
  color: var(--ink);
  transform: translateY(-1px);
}

.inspector-btn:active{
  transform: translateY(0);
}

.inspector-btn.is-primary{
  border-color: color-mix(in oklab, var(--accent) 46%, var(--border));
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  color: color-mix(in oklab, var(--accent) 76%, var(--ink));
  font-weight: 690;
}

.inspector-btn.is-primary:hover{
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
}

.inspector-btn.is-icon{
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inspector-btn.is-icon svg{
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inspector-btn.is-danger{
  color: color-mix(in oklab, #b91c1c 72%, var(--ink-soft));
  border-color: color-mix(in oklab, #b91c1c 30%, var(--border));
}

.inspector-btn.is-danger:hover{
  border-color: color-mix(in oklab, #b91c1c 46%, var(--border));
  background: color-mix(in oklab, #b91c1c 8%, var(--surface));
  color: color-mix(in oklab, #b91c1c 82%, var(--ink));
}

.inspector-btn:focus-visible,
.inspector-toggle:focus-visible,
.inspector-gap-toggle:focus-visible,
.inspector-gap-step:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
  border-color: color-mix(in oklab, var(--accent) 52%, var(--border));
}

.inspector-title{
  font-size: 0.92rem;
  font-weight: 730;
  color: var(--ink);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.inspector-value{
  font-size: 1rem;
  font-weight: 770;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.inspector-note{
  font-size: 0.76rem;
  line-height: 1.34;
  color: var(--ink-soft);
}

.inspector-status{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
}

.inspector-trace-grid{
  display: grid;
  gap: 5px;
  border: 1px dashed color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: 9px;
  padding: 6px 8px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}

.inspector-trace-row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.inspector-trace-row strong{
  font-size: 0.56rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
  white-space: nowrap;
}

.inspector-trace-row span{
  min-width: 0;
  font-size: 0.69rem;
  line-height: 1.28;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.inspector-legend-full{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}

.inspector-legend-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--inspector-legend-color, var(--accent));
  flex: 0 0 7px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--surface) 56%, transparent);
}

.inspector-legend-text{
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: normal;
  overflow-wrap: anywhere;
}

.inspector-status::before{
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 70%, #fff);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 16%, transparent);
  flex: 0 0 5px;
}

.inspector-section-title{
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.inspector-links-grid{
  display: grid;
  gap: 5px;
}

.inspector-link-row{
  border: 1px dashed color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 8px;
  padding: 4px 7px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  display: grid;
  gap: 2px;
}

.inspector-link-row strong{
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
}

.inspector-link-row span{
  font-size: 0.71rem;
  line-height: 1.28;
  color: var(--ink-soft);
}

.inspector-chart-preview .chart-preview-svg{
  height: 90px;
}

.widget-empty{
  border: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 12px;
  min-height: 148px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  color: var(--ink-muted);
  background: color-mix(in oklab, var(--surface) 72%, transparent);
  font-size: 0.82rem;
  text-align: left;
  padding: 14px 16px;
}

.widget-empty strong{
  color: var(--ink);
  font-size: 0.88rem;
}

.widget-empty span{
  display: block;
  line-height: 1.35;
}

.widget-empty kbd,
.widget-help-popover kbd{
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  background: color-mix(in oklab, var(--surface) 95%, transparent);
  border-radius: 5px;
  padding: 0 4px;
  font-size: 0.68rem;
  color: var(--ink);
  font-family: inherit;
  font-weight: 680;
}

.board-group-label{
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--group-color, var(--accent)) 44%, var(--border));
  background: color-mix(in oklab, var(--group-color, var(--accent)) 11%, var(--surface));
  color: color-mix(in oklab, var(--group-color, var(--accent)) 72%, var(--ink));
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  line-height: 1.15;
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.08);
  white-space: nowrap;
}
.board-selection-marquee{
  position: absolute;
  z-index: 22;
  pointer-events: none;
  border: 1px dashed color-mix(in oklab, var(--accent) 58%, var(--border));
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent);
}


.board-node{
  --node-role-color: color-mix(in oklab, var(--accent) 68%, #0f172a);
  max-width: calc(100% - 28px);
  position: absolute;
  box-sizing: border-box;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(2,6,23,0.08);
  cursor: grab;
  user-select: none;
  touch-action: manipulation;
  transition: left 130ms ease, top 130ms ease, box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.board-node[data-node-role='data']{ --node-role-color: #2f7dd1; }
.board-node[data-node-role='output']{ --node-role-color: #ef5b2f; }
.board-node[data-node-role='control']{ --node-role-color: #7c5cfa; }
.board-node[data-node-role='style']{ --node-role-color: #16a085; }
.board-node.board-node-chart{ --node-role-color: color-mix(in oklab, var(--accent) 72%, #1f2937); }

.board-node::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--node-role-color) 72%, transparent), transparent 78%);
  opacity: 0.66;
  pointer-events: none;
}

.board-node.is-compact::before{
  height: 1.5px;
  opacity: 0.54;
}

.board-node:hover{
  border-color: color-mix(in oklab, var(--accent) 26%, var(--border));
  box-shadow: 0 12px 24px rgba(2,6,23,0.12);
}

.board-node.is-active{
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent), 0 8px 16px rgba(2,6,23,0.08);
}

.board-node.is-multi-selected{
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent), 0 8px 16px rgba(2,6,23,0.08);
}

.board-node.is-multi-selected.is-active{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent), 0 8px 16px rgba(2,6,23,0.08);
}


.board-node:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--node-role-color) 48%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--node-role-color) 26%, transparent), 0 14px 26px rgba(2,6,23,0.16);
}

.board-node.is-locked{
  cursor: default;
  border-style: dashed;
  border-color: color-mix(in oklab, var(--ink-muted) 34%, var(--border));
}

.board-node.is-locked:hover{
  border-color: color-mix(in oklab, var(--ink-muted) 34%, var(--border));
  box-shadow: 0 8px 16px rgba(2,6,23,0.08);
}

.board-node.is-locked .node-head-main{
  padding-left: 14px;
}

.board-node-chart.is-locked .node-head > div:first-child{
  padding-left: 14px;
}

.board-node.is-dragging{
  transition: none;
  cursor: grabbing;
  touch-action: none;
  transform: scale(1.01);
  box-shadow: 0 18px 30px rgba(2,6,23,0.18);
}

.board-node.is-resizing{
  transition: none;
  touch-action: none;
  box-shadow: 0 20px 34px rgba(2,6,23,0.2);
}

.board-node.is-grab-start{
  animation: node-grab-in 170ms cubic-bezier(.2,.74,.28,1) 1;
}

@keyframes node-grab-in{
  0%{ transform: scale(0.995) translateY(1px); }
  70%{ transform: scale(1.02) translateY(-1px); }
  100%{ transform: scale(1.01) translateY(0); }
}

.board-node.is-attached{
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
}

.board-node.is-attached[data-node-role='control'],
.board-node.is-attached[data-node-role='style']{
  overflow: visible;
}

.node-control-topic,
.node-style-topic{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 0.54rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  color: color-mix(in oklab, var(--ink-muted) 84%, var(--surface));
  line-height: 1;
  white-space: nowrap;
}

.node-control-topic{
  top: -12px;
}

.node-style-topic{
  bottom: -12px;
}

.board-node.is-attached .resize-handle{
  display: none;
}

.board-node.is-just-snapped{
  animation: node-snap-pop 260ms cubic-bezier(.2,.84,.3,1) 1;
}


.board-node.is-nav-focus{
  animation: node-nav-focus 680ms cubic-bezier(.22,.8,.28,1) 1;
}

@keyframes node-nav-focus{
  0%{
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 16px rgba(2,6,23,0.08);
  }
  42%{
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--node-role-color) 32%, transparent), 0 20px 32px rgba(2,6,23,0.2);
  }
  100%{
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 16px rgba(2,6,23,0.08);
  }
}

@keyframes node-snap-pop{
  0%{ transform: scale(0.985); box-shadow: 0 10px 20px rgba(2,6,23,0.10); }
  60%{ transform: scale(1.018); box-shadow: 0 18px 34px rgba(2,6,23,0.18); }
  100%{ transform: scale(1); box-shadow: 0 8px 16px rgba(2,6,23,0.08); }
}

.resize-handle{
  position: absolute;
  z-index: 30;
  background: transparent;
  touch-action: none;
}

.resize-n,
.resize-s{
  left: 10px;
  right: 10px;
  height: 8px;
}

.resize-n{ top: -4px; cursor: ns-resize; }
.resize-s{ bottom: -4px; cursor: ns-resize; }

.resize-e,
.resize-w{
  top: 10px;
  bottom: 10px;
  width: 8px;
}

.resize-e{ right: -4px; cursor: ew-resize; }
.resize-w{ left: -4px; cursor: ew-resize; }

.resize-ne,
.resize-nw,
.resize-se,
.resize-sw{
  width: 12px;
  height: 12px;
}

.resize-ne{ top: -4px; right: -4px; cursor: nesw-resize; }
.resize-nw{ top: -4px; left: -4px; cursor: nwse-resize; }
.resize-se{ bottom: -4px; right: -4px; cursor: nwse-resize; }
.resize-sw{ bottom: -4px; left: -4px; cursor: nesw-resize; }

.board-node.is-compact{
  padding: 2px 6px;
  border-radius: 10px;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(164deg, color-mix(in oklab, var(--surface) 98%, white), color-mix(in oklab, var(--surface) 90%, transparent));
  box-shadow: 0 8px 18px rgba(2,6,23,0.10);
}

.board-node.is-compact .node-role,
.board-node.is-compact .node-title,
.board-node.is-compact .node-value,
.board-node.is-compact .node-note,
.board-node.is-compact .node-status-row{
  display: none;
}

.node-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.node-head-main{
  min-width: 0;
}

.node-role-chip{
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--node-role-color) 48%, var(--border));
  background: color-mix(in oklab, var(--node-role-color) 12%, var(--surface));
  color: color-mix(in oklab, var(--node-role-color) 72%, var(--ink));
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1.2;
}

.node-status-row{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.node-status-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.62rem;
  color: var(--ink-soft);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-status-chip.is-linked{
  border-color: color-mix(in oklab, var(--node-role-color) 42%, var(--border));
  color: color-mix(in oklab, var(--node-role-color) 68%, var(--ink));
}

.node-status-chip.is-linked::before{
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--node-role-color) 84%, #fff);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--node-role-color) 16%, transparent);
  flex: 0 0 5px;
}

.node-trace-row{
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-top: 1px;
}

.node-trace-pill{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  border: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 7px;
  padding: 2px 6px;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
}

.node-trace-pill strong{
  flex: 0 0 auto;
  font-size: 0.52rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.node-trace-pill em{
  min-width: 0;
  font-style: normal;
  font-size: 0.6rem;
  line-height: 1.2;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-body > .node-trace-row{
  margin-top: 0;
}

.board-node.is-compact .node-trace-row{
  display: none;
}

.board-node.is-compact.compact-open .node-trace-row{
  display: grid;
}

.board-node.is-compact.compact-open .node-trace-pill{
  padding: 2px 5px;
}

.board-node.is-compact.compact-open .node-trace-pill strong{
  font-size: 0.5rem;
}

.board-node.is-compact.compact-open .node-trace-pill em{
  font-size: 0.58rem;
}

.board-node.is-compact .node-head{
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  pointer-events: none;
}

.board-node.is-compact .node-head-main{
  display: none;
}

.node-mini-content{
  display: none;
}

.board-node.is-compact .node-mini-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: calc(100% - 14px);
  margin: 0 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 1px;
  line-height: 1.05;
  transition: opacity 120ms ease;
}

.node-mini-title,
.node-mini-value{
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.05;
  color: var(--ink-strong);
}

.node-mini-value{
  flex: 0 0 auto;
}

.node-mini-title{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-mini-sep{
  font-size: 0.62rem;
  line-height: 1;
  color: var(--ink-muted);
}

.node-mini-legend{
  justify-content: flex-start;
  gap: 6px;
}

.node-mini-control{
  justify-content: center;
  gap: 0;
  padding: 0 3px;
}

.node-mini-control .node-mini-value{
  flex: 1 1 auto;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-mini-control-rich{
  align-content: center;
}

.node-mini-control-rich .node-mini-rich-value{
  text-align: center;
}

.node-mini-output,
.node-mini-output-rich{
  justify-content: center;
}

.node-mini-output .node-mini-value,
.node-mini-output-rich .node-mini-rich-value{
  flex: 1 1 auto;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-mini-legend-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--node-mini-legend-color, var(--accent));
  flex: 0 0 7px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--surface) 56%, transparent);
}

.node-mini-legend-label{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.08;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-mini-legend-rich{
  align-content: center;
}

.node-mini-legend-rich .node-mini-rich-title{
  -webkit-line-clamp: 3;
}

.node-mini-rich{
  display: none;
}

.node-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 4px;
  padding-right: 2px;
}

.board-node.is-compact .node-body{
  display: none;
}

.board-node.is-compact.compact-rich .node-mini-content{
  display: none;
}

.board-node.is-compact.compact-rich .node-mini-rich{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 2px;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  width: 100%;
  padding-right: 2px;
}

.board-node.is-compact.compact-open{
  padding: 5px 7px;
  gap: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.board-node.is-compact.compact-open .node-head{
  position: static;
  inset: auto;
  min-height: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.board-node.is-compact.compact-open .node-head-main{
  display: block;
}

.board-node.is-compact.compact-open .node-role,
.board-node.is-compact.compact-open .node-title,
.board-node.is-compact.compact-open .node-value,
.board-node.is-compact.compact-open .node-note{
  display: block;
}

.board-node.is-compact.compact-open .node-mini-content,
.board-node.is-compact.compact-open .node-mini-rich{
  display: none;
}

.board-node.is-compact.compact-open .node-body{
  display: grid;
}

.node-mini-rich-value{
  font-size: 0.68rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-mini-rich-title{
  font-size: 0.66rem;
  line-height: 1.18;
  font-weight: 660;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: var(--node-compact-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

.node-mini-rich-note{
  font-size: 0.6rem;
  line-height: 1.18;
  color: var(--ink-soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.node-role{
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  line-height: 1.2;
}

.node-lock-badge{
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 58%, transparent);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--ink-muted);
  pointer-events: none;
  z-index: 3;
}

.board-node.is-compact .node-lock-badge{
  top: 3px;
  left: 3px;
}

.node-lock-icon{
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.node-title{
  font-size: 0.76rem;
  font-weight: 670;
  line-height: 1.26;
  color: var(--ink-soft);
  white-space: normal;
  overflow-wrap: anywhere;
}

.node-value{
  font-size: 0.96rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-note{
  font-size: 0.68rem;
  color: color-mix(in oklab, var(--ink-soft) 92%, var(--surface));
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-quick-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.node-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--ink-soft);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-pill strong{
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
}

.node-customizer{
  display: none;
  gap: 6px;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 72%, transparent);
}

.widget-inspector .node-customizer{
  display: grid;
}

.widget-inspector .node-quick-meta{
  margin-top: 0;
}

.board-node.has-options .node-customizer{
  display: grid;
}

.node-customizer-row{
  display: grid;
  gap: 4px;
}

.node-source-grid{
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 10px;
  padding: 7px 8px;
  background: color-mix(in oklab, var(--surface) 94%, transparent);
}

.node-source-row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.node-source-label{
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.node-source-value{
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.node-source-row input[type='range']{
  width: 100%;
  min-width: 0;
  height: 14px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: color-mix(in oklab, var(--accent) 88%, #d94f22);
}

.node-style-grid{
  gap: 5px;
  padding-block: 6px;
}

.node-style-row .node-source-label{
  min-width: 72px;
}

.node-customizer label{
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.node-customizer select,
.node-customizer input{
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 8px;
  padding: 4px 7px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.25;
}

.node-customizer select:focus,
.node-customizer input:focus{
  outline: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border));
}

.node-popover .node-customizer{
  display: grid;
  margin-top: 2px;
  padding-top: 7px;
}

.board-node.is-compact .node-quick-meta,
.board-node.is-compact .node-customizer{
  display: none;
}

.board-node.is-compact.has-options .node-popover .node-customizer,
.board-node.is-compact.compact-open.has-options .node-customizer{
  display: grid;
}

.node-actions{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.node-tune[aria-pressed='true']{
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border));
  color: color-mix(in oklab, var(--accent) 68%, var(--ink));
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
}

.board-node.is-compact .node-actions{
  position: absolute;
  top: 4px;
  right: 4px;
  inset: auto;
  z-index: 15;
  gap: 2px;
  opacity: 1;
  pointer-events: auto;
}

.board-node.is-compact .node-expand,
.board-node.is-compact .node-remove{
  display: none;
}

.board-node.is-compact.has-options .node-expand,
.board-node.is-compact.has-options .node-remove{
  display: inline-flex;
}

.board-node.is-compact .node-head{
  pointer-events: auto;
}

.board-node.is-compact.compact-open.has-options .node-head-main,
.board-node.is-compact.compact-open.has-options .node-body{
  opacity: 0;
  pointer-events: none;
}

.board-node.is-compact.has-options .node-mini-content,
.board-node.is-compact.has-options .node-mini-rich{
  opacity: 0;
  pointer-events: none;
}

.node-expand,
.node-remove,
.node-tune,
.node-inspect{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 7px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex: 0 0 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.board-node.is-compact .node-expand,
.board-node.is-compact .node-remove,
.board-node.is-compact .node-tune,
.board-node.is-compact .node-inspect{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 6px;
}

.node-icon-btn{ line-height: 0; }

.node-icon{
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.node-expand:hover,
.node-remove:hover,
.node-tune:hover,
.node-inspect:hover{ border-color: var(--border-strong); color: var(--ink); }


.node-inspect:focus-visible,
.node-remove:focus-visible,
.node-expand:focus-visible,
.node-tune:focus-visible{
  outline: none;
  border-color: color-mix(in oklab, var(--node-role-color) 54%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--node-role-color) 24%, transparent);
}

.node-inspect{
  border-color: color-mix(in oklab, var(--node-role-color) 36%, var(--border));
  background: color-mix(in oklab, var(--node-role-color) 10%, var(--surface));
  color: color-mix(in oklab, var(--node-role-color) 72%, var(--ink));
}

.board-node .node-inspect{
  opacity: 0.72;
  transition: opacity 140ms ease, border-color 140ms ease, color 140ms ease;
}

.board-node:hover .node-inspect,
.board-node.is-active .node-inspect{
  opacity: 1;
}

.board-node .node-remove{ opacity: 0.34; transition: opacity 140ms ease, border-color 140ms ease, color 140ms ease; }
.board-node:hover .node-remove,
.board-node.is-active .node-remove{ opacity: 0.95; }

.node-popover{
  position: absolute;
  top: 0;
  width: min(240px, calc(100vw - 48px));
  border: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
  border-radius: 11px;
  background: color-mix(in oklab, var(--surface) 96%, white);
  box-shadow: 0 16px 30px rgba(2,6,23,0.16);
  padding: 9px 10px;
  display: grid;
  gap: 6px;
  z-index: 22;
}

.node-popover.is-right{ left: calc(100% + 10px); }
.node-popover.is-left{ right: calc(100% + 10px); }

.node-popover-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.node-popover-role{
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.node-popover-title{
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.node-popover-value{
  font-size: 0.86rem;
  font-weight: 720;
  color: var(--ink-strong);
}

.node-popover-note{
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.board-node-chart{
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  background: color-mix(in oklab, var(--surface) 94%, transparent);
}

.chart-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.chart-preview{
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface) 88%, transparent));
  padding: 7px 8px 8px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
}

.chart-preview-svg{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.chart-preview-svg .cp-grid line,
.chart-preview-svg-radar .cp-grid circle,
.chart-preview-svg-radar .cp-grid line{
  stroke: color-mix(in oklab, var(--ink-muted) 20%, transparent);
  stroke-width: 1;
  fill: none;
}

.chart-preview-svg .cp-axis{
  stroke: color-mix(in oklab, var(--ink-soft) 34%, transparent);
  stroke-width: 1;
}

.chart-preview-svg .cp-tick-label{
  fill: color-mix(in oklab, var(--ink-muted) 80%, var(--ink-soft) 20%);
  font-size: 4.8px;
  font-family: "Manrope", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  dominant-baseline: middle;
  pointer-events: none;
}

.chart-preview-svg .cp-tick-label-x{
  dominant-baseline: hanging;
}

.chart-preview-svg-radar .cp-radar-level{
  font-size: 4.5px;
}

.chart-preview-svg-radar .cp-radar-scale line{
  stroke: color-mix(in oklab, var(--ink-muted) 28%, transparent);
  stroke-width: 0.9;
  stroke-dasharray: 1.8 1.8;
}

.chart-preview-svg .cp-area{
  fill: color-mix(in oklab, var(--accent) 18%, transparent);
}

.chart-preview-svg .cp-line{
  stroke: var(--cp-color, color-mix(in oklab, var(--accent) 78%, #1f2937));
  stroke-width: 2;
  fill: none;
}

.chart-preview-meta,
.chart-preview-empty{
  font-size: 0.56rem;
  letter-spacing: 0.035em;
  color: var(--ink-muted);
}

.chart-legend{
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  padding-bottom: 1px;
}

.chart-legend::-webkit-scrollbar{
  height: 3px;
}

.chart-legend::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--border) 90%, transparent);
  border-radius: 999px;
}

.chart-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  max-width: 128px;
}

.chart-legend-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--legend-color, var(--accent));
  flex: 0 0 6px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--surface) 58%, transparent);
}

.chart-legend-label{
  font-size: 0.52rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-legend.is-expanded{
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  padding-bottom: 0;
  row-gap: 4px;
}

.chart-legend.is-expanded .chart-legend-item{
  max-width: none;
}

.chart-legend.is-expanded .chart-legend-label{
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chart-legend-more{
  font-size: 0.52rem;
  color: var(--ink-muted);
  border: 1px dashed color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
}

.chart-legend-scale{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

.chart-legend-scale-bar{
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,0.46), rgba(239,68,68,0.82));
}

.chart-legend-range-label{
  font-size: 0.52rem;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.chart-preview-empty{
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.chart-meta-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 20px;
}

.chart-meta-pill{
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
}

.chart-metrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.chart-metric{
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
  border-radius: 9px;
  padding: 4px 5px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  display: grid;
  gap: 2px;
}

.chart-metric strong{
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.chart-metric em{
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 730;
  color: var(--ink);
  line-height: 1;
}

.chart-metric.is-pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}

.chart-metric.is-pill strong{
  font-size: 0.48rem;
  line-height: 1;
}

.chart-metric.is-pill em{
  font-size: 0.66rem;
  line-height: 1;
}

.chart-metric.is-filled{
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}

.chart-slots{
  display: grid;
  gap: 6px;
}

.chart-slot{
  border: 1px dashed color-mix(in oklab, var(--border) 84%, transparent);
  border-radius: 9px;
  padding: 5px 7px;
  font-size: 0.71rem;
  color: var(--ink-soft);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  min-height: 30px;
}

.chart-slot strong{
  color: var(--ink-muted);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

.chart-slot-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.board-node-chart.is-selected:not(.is-multi-selected){
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent), 0 8px 16px rgba(2,6,23,0.08);
}

.board-node-chart.is-snap-focus{
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent), 0 18px 30px rgba(2,6,23,0.18);
}

.node-snap-preview{
  position: absolute;
  z-index: 17;
  pointer-events: none;
  border: 1px dashed color-mix(in oklab, var(--accent) 66%, var(--border));
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  box-shadow: 0 10px 18px rgba(2,6,23,0.12);
  transition: left 90ms ease, top 90ms ease, width 90ms ease, height 90ms ease, opacity 120ms ease;
}

.node-snap-preview-label{
  position: absolute;
  top: -22px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color: var(--ink-muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.widget-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
}

.widget-modal[hidden]{ display: none !important; }

.widget-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.48);
}

.widget-modal-dialog{
  position: relative;
  width: min(900px, 92vw);
  max-height: 78vh;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 14px;
}

.widget-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.widget-modal-head-main{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.widget-modal-head-main h3{
  margin: 0;
}

.modal-back,
.modal-close{
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 30px;
  height: 30px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.modal-back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.modal-back:hover,
.modal-close:hover{ border-color: var(--border-strong); color: var(--ink); }

.widget-modal-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.modal-card{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.modal-card-title{ font-weight: 720; }
.modal-card-value{ font-size: 1rem; font-weight: 760; color: var(--ink-strong); line-height: 1.1; }
.modal-card-meta{ font-size: 0.8rem; color: var(--ink-soft); }

.modal-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.modal-card-cta{
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--border-strong) 68%, var(--border));
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color: var(--ink-soft);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 640;
  text-decoration: none;
}

.modal-card-cta:hover{
  border-color: color-mix(in oklab, var(--accent) 46%, var(--border));
  color: var(--ink);
}

.modal-card button{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

.modal-card button:hover{ background: color-mix(in oklab, var(--accent) 16%, transparent); }

.modal-card button.is-secondary{
  border-color: var(--border);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  color: var(--ink-soft);
}

.modal-card button.is-secondary:hover{
  border-color: color-mix(in oklab, var(--border-strong) 78%, var(--border));
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--ink);
}

@media (max-width: 860px){
  .widgetboard-head{ flex-direction: column; align-items: stretch; }
  .widgetboard-head.widgetboard-head-compact{
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .widgetboard-actions{
    justify-content: flex-start;
    width: 100%;
  }
  .widgetboard-head.widgetboard-head-compact .widgetboard-actions{
    width: auto;
    flex: 1 1 auto;
  }
  .widgetboard-actions .widget-action{
    flex: 0 0 auto;
  }
  .deck-card{ min-width: 188px; width: 188px; }
  .canvas-meta{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
  }
  .canvas-head-actions .canvas-meta{ margin-left: 0; }
  .widget-help-popover{
    width: min(360px, calc(100vw - 24px));
    max-height: min(54vh, 340px);
  }
}

@media (max-width: 640px){
  .inspector-gap-step-row{ flex-direction: column; align-items: stretch; }
  .inspector-gap-step-list{ min-width: 0; width: 100%; }
  .inspector-actions{
    max-width: 100%;
    justify-content: flex-start;
    gap: 5px;
  }
  .inspector-actions .inspector-btn{
    flex: 0 0 auto;
  }
}

@media (max-width: 640px){
  .chart-slot-row{ grid-template-columns: 1fr; }
  .deck-rail-wrap{ grid-template-columns: 1fr; }
  .deck-scroll-btn{ display: none; }
  .board-node{ max-width: calc(100% - 16px); }
  .widget-canvas-head{ padding-right: 34px; }
  .widget-help-popover{
    left: 0;
    right: 0;
    top: 36px;
    width: auto;
    max-height: min(52vh, 320px);
    font-size: 0.74rem;
  }
  .widget-help-popover::before{ right: 10px; }
  .board-group-label{
    font-size: 0.54rem;
    letter-spacing: 0.07em;
    padding: 1px 7px;
    max-width: calc(100vw - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .node-popover,
  .node-popover.is-left,
  .node-popover.is-right{
    left: 0;
    right: auto;
    top: calc(100% + 8px);
    width: min(240px, calc(100vw - 42px));
  }
  .inspector-head{ flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px){
  .hero-chip-bar .hero-chip{ width: auto; justify-content: flex-start; }
}








/* Restore compact label casing after dynamic style updates */
.hero-kicker,
.summary-title,
.summary-label,
.meta-label,
.total-label,
.control-title,
.control-label,
.inspector-status,
.inspector-section-title,
.inspector-link-row strong,
.board-group-label,
.node-role,
.node-role-chip,
.node-pill strong,
.chart-preview-meta,
.chart-meta-pill,
.chart-metric strong,
.chart-slot strong,
.node-snap-preview-label{
  text-transform: uppercase;
}


.arxiv-hit{
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--ink);
  border-radius: 4px;
  padding: 0 2px;
}

@media (max-width: 700px){
  .arxiv-selector-row{
    width: 100%;
    gap: 8px;
  }
  .arxiv-selector-field{
    width: 100%;
    justify-content: space-between;
  }
  .arxiv-select{
    min-width: 0;
    width: min(220px, 64vw);
  }
  .arxiv-group-launch{
    min-width: 98px;
    justify-content: space-between;
  }
  .arxiv-top-filters{
    padding: 8px;
  }
  .arxiv-top-exclude-field{
    min-width: 100%;
    width: 100%;
  }
  .arxiv-group-dock{
    padding: 10px 8px;
  }
  .arxiv-group-controls{
    width: 100%;
  }
  .arxiv-group-save-row{
    grid-template-columns: 1fr;
  }
  .arxiv-group-btn{
    width: fit-content;
  }
}