:root {
  color-scheme: light;
  --paper: #f1f0e9;
  --surface: #fbfaf5;
  --ink: #111310;
  --muted: #5b615b;
  --line: #b8bab2;
  --accent: #435625;
  --soft: #e3e8d4;
  --blue: #286a97;
  --orange: #ad6437;
  --radius: 0px;
  --signal: #b8c58f;
  --sidebar-width: 220px;
  --header-height: 64px;
  --font-body: "Helvetica Neue", "PingFang TC", "Noto Sans TC", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Noto Sans TC", monospace;
  font-family:
    var(--font-body);
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
summary {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
}
button:hover {
  background: var(--soft);
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}
h2 {
  font-size: 1.3rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
small,
.muted {
  color: var(--muted);
  font-size: 0.875rem;
}
[hidden] {
  display: none !important;
}
.sidebar {
  position: fixed;
  inset: var(--header-height) auto 0 0;
  width: var(--sidebar-width);
  padding: 30px 20px 22px;
  background: #ebeae3;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  margin-bottom: 36px;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: white;
  font-size: 1.8rem;
  line-height: 1;
  border-radius: var(--radius);
}
.brand-mark span {
  color: #b8d0a4;
}
.brand small {
  display: block;
  font-size: 0.8rem;
  font-weight: 450;
  letter-spacing: 0.12em;
}
.project-label,
.eyebrow {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.045em;
}
.project-label {
  margin-bottom: 6px;
}
select,
input {
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  color: var(--ink);
}
select {
  max-width: 100%;
}
.sidebar select {
  width: 100%;
  font-size: 0.95rem;
  margin-bottom: 25px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nav-button {
  border: 0;
  background: transparent;
  text-align: left;
  font-weight: 550;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.nav-button .nav-symbol {
  font-size: 1rem;
  color: var(--muted);
  width: 18px;
  text-align: center;
}
.nav-button.active {
  background: var(--ink);
  color: white;
}
.nav-button.active .nav-symbol {
  color: #c0d0c5;
}
.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.text-button {
  background: transparent;
  border: 0;
  padding: 5px 0;
  text-align: left;
  color: var(--muted);
  font-size: 0.875rem;
}
.text-button:hover {
  color: var(--ink);
  background: transparent;
  text-decoration: underline;
}
.integration {
  font-size: 0.875rem;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 10px;
}
.integration p {
  margin-top: 10px;
}
.integration a {
  display: block;
  margin: 8px 0;
}
.private-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 14px;
}
main {
  margin-left: var(--sidebar-width);
  padding: 0 40px;
  max-width: 1860px;
}
.topbar {
  height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 16px;
  font-size: 0.875rem;
}
.topbar > div {
  display: flex;
  gap: 20px;
  align-items: center;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 0 24px;
  align-items: center;
}
.page-heading .eyebrow {
  margin-bottom: 8px;
}
.description {
  max-width: 850px;
  color: var(--muted);
  margin: 0;
  font-size: 1rem;
}
.legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.legend-item {
  display: flex;
  gap: 9px;
  align-items: center;
}
.swatch {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
}
.swatch.hw-1 {
  background: var(--orange);
}
.swatch.hw-2 {
  background: #7857a1;
}
.swatch.hw-3 {
  background: #348876;
}
.controls {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(150px, 1.1fr) minmax(
      130px,
      0.8fr
    ) minmax(140px, 1fr);
  gap: 14px;
  padding: 18px;
  background: #e7e6df;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.controls label {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.controls input,
.controls select {
  width: 100%;
  font-size: 0.95rem;
}
.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 22px;
  align-items: start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  min-width: 0;
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 12px;
}
.panel-title p {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius);
  background: var(--soft);
  color: #355849;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: normal;
}
.chip.limited {
  background: #f3eadd;
  color: #7c522c;
}
.chip.neutral {
  background: #eef0f3;
  color: #526473;
}
.chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.chart text {
  font: 14px var(--font-body);
  fill: var(--muted);
}
.chart .axis {
  stroke: #dce3de;
  stroke-width: 1;
}
.chart .bar {
  fill: var(--blue);
  opacity: 0.14;
}
.chart .bar.hw-1 {
  fill: var(--orange);
}
.chart .bar.hw-2 {
  fill: #7857a1;
}
.chart .bar.hw-3 {
  fill: #348876;
}
.chart .range {
  stroke: var(--blue);
  stroke-width: 2;
}
.chart .range.hw-1 {
  stroke: var(--orange);
}
.chart .dot {
  fill: var(--blue);
  stroke: white;
  stroke-width: 2;
  cursor: pointer;
}
.chart .dot.hw-1 {
  fill: var(--orange);
}
.chart .dot.hw-2 {
  fill: #7857a1;
}
.chart .dot.hw-3 {
  fill: #348876;
}
.chart .dot:hover,
.chart .dot:focus {
  stroke: var(--ink);
  stroke-width: 3;
}
.chart .label {
  fill: var(--ink);
  font-weight: 600;
  font-size: 16px;
}
.chart .value-label {
  fill: var(--ink);
  font-weight: 700;
  font-size: 20px;
}
.figure-caption {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 5px 0 0;
}
.group-summary {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.summary-row b {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}
.summary-row small {
  display: block;
}
.stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notes {
  padding: 0 0 0 19px;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}
.notes li {
  margin-bottom: 9px;
}
.sample-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.sample-button {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 7px 10px;
}
.sample-button small {
  font-size: 0.8rem;
}
.plain-list {
  margin: 0;
  padding-left: 20px;
}
.explanation {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 15px;
}
.facts {
  display: grid;
  grid-template-columns: minmax(100px, 0.55fr) 1fr;
  gap: 9px 16px;
  margin: 0;
  font-size: 0.95rem;
}
.facts dt {
  color: var(--muted);
}
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.side-panel {
  padding: 22px;
}
.side-panel h3 {
  margin: 16px 0 10px;
}
.side-panel h3:first-child {
  margin-top: 0;
}
.side-panel .facts {
  grid-template-columns: 1fr;
  font-size: 0.9rem;
  gap: 1px;
}
.side-panel .facts dd {
  margin-bottom: 11px;
}
.condition-note {
  border-left: 3px solid #a8bbaa;
  padding: 10px 14px;
  background: #f4f7f3;
  font-size: 0.9rem;
  margin-top: 18px;
}
.empty-state {
  padding: 40px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
.comparison-separated {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.comparison-separated article {
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: var(--radius);
}
.comparison-separated strong {
  font-size: 2rem;
  display: block;
  margin: 12px 0;
}
.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-align: left;
}
.metric-card h3 {
  margin-bottom: 20px;
}
.metric-card:hover {
  border-color: var(--accent);
}
.metric-card .summary-row b {
  font-size: 1.25rem;
}
.noise-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}
.noise-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.noise-item .reading-value {
  font-size: 2rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  margin: 12px 0;
}
.reading-value small {
  font-weight: 400;
  font-size: 1rem;
}
.noise-scale {
  width: 100%;
  height: 50px;
}
.noise-scale .track {
  fill: #ebefeb;
}
.noise-scale .fill {
  fill: var(--blue);
  opacity: 0.65;
}
.noise-scale .hw-1 {
  fill: var(--orange);
}
.noise-scale text {
  fill: var(--muted);
  font-size: 12px;
}
.series-toolbar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: end;
}
.series-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--muted);
  flex: 1;
  min-width: 170px;
}
.series-plots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.series-plot {
  padding: 18px;
  margin: 0;
}
.series-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}
.series-line.hw-1 {
  stroke: var(--orange);
}
.series-line.hw-2 {
  stroke: #7857a1;
}
.inspect-line {
  stroke: #697d7a;
  stroke-dasharray: 4 3;
}
.inspection {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 18px;
}
.inspection input {
  width: 100%;
  padding: 0;
  accent-color: var(--accent);
}
.inspection-values {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.inspection-values b {
  display: block;
  font-size: 1.15rem;
}
.range-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 15px;
}
.range-controls input {
  width: 95px;
}
.range-controls label {
  font-size: 0.875rem;
  color: var(--muted);
}
.series-statistics {
  margin-top: 18px;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th {
  text-align: left;
  background: var(--ink);
  color: var(--surface);
  font-weight: 550;
}
td,
th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
tr:last-child td {
  border-bottom: 0;
}
.run-table button {
  white-space: nowrap;
}
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.project-card {
  background: var(--surface);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.project-card:hover {
  text-decoration: none;
  border-color: var(--accent);
}
.project-card h2 {
  margin-bottom: 14px;
}
.project-card p {
  color: var(--muted);
  font-size: 0.95rem;
}
.project-card .arrow {
  display: block;
  margin-top: 20px;
  color: var(--accent);
}
.login-panel {
  max-width: 490px;
  margin: 10vh auto;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 34px;
  border-radius: var(--radius);
}
.login-panel p {
  color: var(--muted);
}
.login-panel form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.primary:hover {
  background: var(--accent);
}
.login-panel input {
  width: 100%;
}
#message:not(:empty) {
  padding: 12px 16px;
  background: #f2e9dd;
  border: 1px solid #e4d4ba;
  border-radius: var(--radius);
  margin: 16px 0;
  color: #714a28;
}
footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  margin-top: 36px;
}
dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 26px;
  width: min(1000px, calc(100% - 32px));
  max-height: 90vh;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 25px 100px #15282640;
}
dialog::backdrop {
  background: #152a3290;
  backdrop-filter: blur(3px);
}
.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: -26px;
  background: var(--paper);
  padding: 4px 0 12px;
  z-index: 2;
}
.icon-button {
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0.2rem 0.6rem;
  background: transparent;
}
.detail-head {
  margin-bottom: 22px;
}
.detail-head h2 {
  font-size: 1.6rem;
}
.detail-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.detail-sections .panel {
  margin: 0;
}
.gallery-stage {
  background: #e7eae6;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-stage img,
.gallery-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  gap: 10px;
}
.gallery-controls span {
  font-size: 0.9rem;
  color: var(--muted);
}
.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
}
.gallery-thumbs button {
  padding: 3px;
  flex: 0 0 66px;
  height: 56px;
}
.gallery-thumbs button.active {
  border: 2px solid var(--accent);
}
.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.file-information {
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 16px 0;
}
.file-information li {
  margin: 8px 0;
}
.evidence-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
}
.note-block {
  padding: 14px;
  background: #edf2ed;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
}
.view-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.view-switcher button.active {
  background: var(--ink);
  color: white;
}
#pending {
  padding: 16px;
  background: #eef2ed;
  margin-bottom: 20px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.row-actions {
  display: flex;
  gap: 8px;
}
.file-search {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
.file-search input {
  flex: 1;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
}
.footnote {
  font-size: 0.8rem;
  color: var(--muted);
}
@media (min-width: 1500px) {
  main {
    padding: 0 52px;
  }
  .research-grid {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
  .panel {
    padding: 28px;
  }
}
@media (max-width: 1150px) {
  .sidebar {
    width: var(--sidebar-width);
    padding: 25px 15px;
  }
  main {
    margin-left: var(--sidebar-width);
    padding: 0 25px;
  }
  .research-grid {
    grid-template-columns: 1fr;
  }
  .side-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .side-panel h3 {
    margin-top: 0;
  }
  .page-heading {
    align-items: flex-start;
  }
  .legend {
    font-size: 0.8rem;
  }
  .controls {
    grid-template-columns: 1fr 1fr;
  }
  .series-plots {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .sidebar {
    position: relative;
    width: auto;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
  }
  .brand {
    margin: 0;
    font-size: 1.15rem;
  }
  .brand-mark {
    width: 37px;
    height: 37px;
  }
  .project-label {
    display: none;
  }
  .sidebar select {
    margin: 0;
  }
  .sidebar nav {
    grid-column: 1/-1;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
  }
  .nav-button {
    white-space: nowrap;
    padding: 9px 11px;
    font-size: 0.9rem;
  }
  .nav-symbol {
    display: none;
  }
  .sidebar-foot {
    grid-column: 1/-1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    align-items: center;
  }
  .integration {
    border: 0;
    padding: 0;
    margin: 0;
  }
  .integration[open] {
    flex-basis: 100%;
  }
  .private-label {
    margin: 0 0 0 auto;
  }
  .sidebar-foot > .text-button {
    font-size: 0.8rem;
  }
  main {
    margin-left: 0;
    padding: 0 16px;
  }
  .topbar {
    height: 55px;
    font-size: 0.8rem;
  }
  .topbar #updated {
    display: none;
  }
  .page-heading {
    padding: 24px 0 18px;
    flex-direction: column;
    gap: 14px;
  }
  h1 {
    font-size: 1.65rem;
  }
  .description {
    font-size: 0.95rem;
  }
  .legend {
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 0.85rem;
  }
  .controls {
    padding: 12px;
    gap: 10px;
  }
  .controls label {
    font-size: 0.8rem;
  }
  .controls select,
  .controls input {
    font-size: 0.9rem;
    padding: 0.65rem 0.5rem;
  }
  .panel {
    padding: 18px;
  }
  .panel-title {
    gap: 10px;
    flex-wrap: wrap;
  }
  .side-panel {
    display: block;
  }
  .side-panel > div + div {
    margin-top: 20px;
  }
  .chart .value-label {
    font-size: 18px;
  }
  .chart .label {
    font-size: 15px;
  }
  .detail-sections {
    grid-template-columns: 1fr;
  }
  .gallery-stage {
    height: 320px;
  }
  dialog {
    padding: 18px;
    max-height: 94vh;
  }
  .dialog-top {
    top: -18px;
  }
  .noise-list {
    grid-template-columns: 1fr;
  }
  .comparison-separated {
    grid-template-columns: 1fr;
  }
  .facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .facts dd {
    margin-bottom: 10px;
  }
  .login-panel {
    margin: 36px auto;
    padding: 24px;
  }
  footer {
    font-size: 0.75rem;
  }
  .series-toolbar {
    gap: 12px;
  }
  .table-wrap {
    border: 0;
  }
  table.responsive,
  table.responsive tbody {
    display: block;
  }
  table.responsive thead {
    display: none;
  }
  table.responsive tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 10px;
  }
  table.responsive td {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 5px;
    border-bottom: 1px solid var(--line);
  }
  table.responsive td:before {
    content: attr(data-label);
    color: var(--muted);
  }
  table.responsive td:last-child {
    border: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button,
  a {
    transition:
      background 0.15s,
      border-color 0.15s;
  }
  .panel {
    animation: appear 0.18s ease-out;
  }
  @keyframes appear {
    from {
      opacity: 0.65;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media print {
  .sidebar,
  .topbar,
  .controls,
  footer,
  button {
    display: none;
  }
  main {
    margin: 0;
    padding: 0;
  }
  .research-grid {
    display: block;
  }
  .panel {
    break-inside: avoid;
  }
}

@media (max-width: 760px) {
  .sidebar-foot .integration,
  .sidebar-foot .private-label {
    display: none;
  }
  .sidebar-foot {
    gap: 18px;
  }
  .topbar {
    height: 42px;
  }
  .page-heading {
    padding: 20px 0 16px;
    gap: 10px;
  }
  .page-heading .description {
    display: none;
  }
  .controls {
    margin-bottom: 18px;
  }
}

.chart .range.hw-2 {
  stroke: #7857a1;
}
.chart .range.hw-3 {
  stroke: #348876;
}

/* Shared engineering language. Source of truth for all project adapters. */
body { padding-top: var(--header-height); }
.site-header { position: fixed; inset: 0 0 auto; height: var(--header-height); z-index: 20; background: var(--ink); color: var(--surface); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px; border-bottom:1px solid var(--ink); }
.site-header .brand { margin:0; color:var(--surface); font-size:1.15rem; letter-spacing:0; }
.site-header .brand-mark { width:34px; height:34px; border-radius:0; background:var(--signal); color:var(--ink); font:800 14px var(--font-mono); }
.site-header .brand small { color:#d1d2c8; font:600 12px var(--font-mono); letter-spacing:.08em; }
.header-label { color:var(--signal); font:700 12px var(--font-mono); letter-spacing:.1em; }
.sidebar { overflow-y:auto; padding-top:24px; }
.sidebar nav { border-top:3px solid var(--ink); padding-top:12px; }
.sidebar-foot { padding-top:24px; }
.nav-button { min-height:48px; padding:12px 10px; }
.nav-button .nav-symbol { font:700 12px var(--font-mono); width:22px; }
.nav-button.active { color:var(--signal); }
.eyebrow, .project-label { font-family:var(--font-mono); font-weight:800; letter-spacing:.07em; }
.eyebrow { color:var(--accent); }
.panel { border-color:var(--line); border-top:3px solid var(--ink); }
.panel-title h2 { font-weight:750; letter-spacing:-.025em; }
.side-panel { background:#e7e6df; border-top-width:1px; }
.controls { border-color:var(--ink); border-top-width:3px; }
.chip { border:1px solid var(--line); color:var(--accent); }
.chip.neutral { background:#e7e6df; color:var(--muted); }
th { font-weight:700; }
td { font-variant-numeric:tabular-nums; }
.summary-row b, .reading-value, .comparison-separated strong { font-family:var(--font-mono); letter-spacing:-.04em; }
.metric-card, .noise-item, .project-card { border-color:var(--ink); border-top-width:3px; }
.project-card:hover { background:var(--soft); }
.table-wrap:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.gallery-stage { border:1px solid var(--line); background:#e7e6df; }
.condition-note { border-color:var(--accent); background:#e7e6df; }
dialog { border:1px solid var(--ink); box-shadow:8px 8px 0 #11131040; }
dialog::backdrop { background:#11131099; }
.topbar { height:60px; }
.page-heading { align-items:flex-start; }
button, select { min-height:44px; }
.text-button { min-height:32px; }
.summary-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border:1px solid var(--ink); margin-bottom:24px; }
.summary-strip article { padding:20px; border-right:1px solid var(--line); background:var(--surface); }
.summary-strip article:last-child { border:0; }
.summary-strip strong { display:block; font:800 1.8rem/1.3 var(--font-mono); margin:10px 0; }
.summary-strip small { display:block; }
@media(max-width:760px) {
 :root { --header-height:60px; }
 .site-header { padding:0 16px; }
 .header-label { display:none; }
 .sidebar { inset:auto; display:flex; align-items:stretch; padding:12px 16px; }
 .sidebar nav { flex-direction:row; padding-top:8px; }
 .sidebar select { margin:0; }
 .sidebar-foot { padding-top:0; }
 .sidebar-foot > .text-button, .controls label, .legend, .nav-button { font-size:.875rem; }
 .page-heading { padding-top:20px; }
 .summary-strip { grid-template-columns:1fr 1fr; }
 .summary-strip article { padding:14px; border-bottom:1px solid var(--line); }
 .summary-strip strong { font-size:1.4rem; }
 .site-header .brand small { font-size:12px; }
}
@media print { .site-header {display:none} body {padding:0} }

.header-actions {display:flex; align-items:center; gap:24px; min-width:0;}
.cooling-link {color:var(--signal); font-size:.875rem;}
.language-switch {display:flex; border:1px solid #85897d;}
.language-switch button {background:transparent; border:0; color:var(--surface); font-size:.875rem; padding:8px 12px;}
.language-switch button[aria-pressed="true"] {background:var(--signal); color:var(--ink); font-weight:700;}
html[lang="en"] .sidebar .nav-button {font-size:.95rem;}
html[lang="en"] h1 {letter-spacing:-.035em;}
@media(max-width:760px) {
 .header-actions {gap:8px;}
 .cooling-link {max-width:120px; font-size:12px; line-height:1.2;}
 .site-header .brand small {display:none;}
 .language-switch button {padding:8px;}
 html[lang="en"] .nav-button {font-size:.875rem;}
}

/* Media uses a fixed stage: complete images and stationary controls. */
.gallery-stage {height:clamp(240px,48vw,540px);background:#11140f;min-width:0;}
.gallery-stage img,.gallery-stage video {display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;}
.gallery-controls {display:grid;grid-template-columns:1fr auto 1fr;min-height:44px;}
.gallery-controls button:first-child {justify-self:start;}
.gallery-controls button:last-child {justify-self:end;}
.gallery-controls p {margin:0;font-variant-numeric:tabular-nums;}
.gallery-thumbs {min-width:0;max-width:100%;}
.gallery-thumbs button {min-width:66px;}
.noise-list {align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));}
.noise-item {min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.noise-item > * {max-width:100%;}
.noise-item h2 {min-height:2.7em;}
.noise-item .noise-video {margin-top:auto;width:100%;padding-top:16px;}
.noise-video-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;}
.noise-video-grid h3 {margin:0 0 12px;}
.noise-video-card {min-width:0;}
.noise-video video {display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#11140f;}
.noise-video .footnote {min-height:1.5em;}
.noise-video-card .file-information {display:block;}
.noise-scale {width:100%;}
#content > .panel + .panel,#content > .noise-list + .panel {margin-top:24px;}
.controls {align-items:end;}
.controls > label {min-width:0;}
.page-heading > div,.summary-row > div {min-width:0;}
@media (max-width:700px){
 .noise-list,.noise-video-grid {grid-template-columns:1fr;}
 .noise-item h2 {min-height:0;}
 .gallery-stage {height:260px;}
 .gallery-controls {gap:6px;}
 .gallery-controls button {padding:9px 10px;font-size:.85rem;}
}
@media(max-width:760px){
 .sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:4px;}
 .sidebar .nav-button{width:100%;min-width:0;white-space:normal;text-align:left;}
 .sidebar .nav-button:last-child:nth-child(odd){grid-column:1/-1;}
 html[lang="en"] .sidebar .nav-button{font-size:.875rem;}
}
/* Same full-image lightbox behavior as the cooler gallery, in this reader's tokens. */
.gallery-stage .gallery-enlarge {position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#11140f;cursor:zoom-in;}
.gallery-expand-hint {position:absolute;right:12px;bottom:12px;padding:4px 10px;background:var(--ink);color:var(--surface);font-size:12px;}
dialog.media-lightbox {position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:20px 76px 72px;border:0;box-shadow:none;background:#11140ff5;color:var(--surface);overflow:hidden;}
.media-lightbox::backdrop {background:#11140ff5;}
.lightbox-stage {display:grid;place-items:center;width:100%;height:100%;padding-top:48px;}
.lightbox-stage img {display:block;width:100%;height:100%;min-height:0;object-fit:contain;}
.media-lightbox button {position:absolute;z-index:1;background:var(--soft);color:var(--ink);min-height:44px;}
.media-lightbox .lightbox-close {right:20px;top:16px;}
.media-lightbox .lightbox-previous {left:16px;top:50%;transform:translateY(-50%);}
.media-lightbox .lightbox-next {right:16px;top:50%;transform:translateY(-50%);}
.lightbox-caption {position:absolute;left:90px;right:90px;bottom:16px;margin:0;text-align:center;font-size:13px;overflow-wrap:anywhere;}
@media(max-width:760px){dialog.media-lightbox{padding:12px 12px 104px;}.media-lightbox .lightbox-previous,.media-lightbox .lightbox-next{top:auto;bottom:14px;transform:none;}.lightbox-caption{left:16px;right:16px;bottom:68px;font-size:12px;}.media-lightbox .lightbox-close{right:12px;top:12px;}}

/* Shared research help: two sizes, heading and body; no mixed bullets. */
.side-panel .reading-block + .reading-block { border-top:1px solid var(--line); margin-top:20px; padding-top:20px; }
.side-panel .reading-block h3 { font-size:1.25rem; line-height:1.4; margin:0 0 12px; }
.side-panel .reading-copy, .side-panel .facts dt, .side-panel .facts dd { font-size:1rem; line-height:1.65; color:var(--muted); }
.side-panel .reading-copy { margin:0; }
.side-panel .reading-notes p, .side-panel .facts + .reading-copy { margin-top:12px; }
.side-panel .facts { gap:4px; }
.side-panel .facts dt { font-weight:600; }
.side-panel .facts dd { margin-bottom:12px; }
.controls { align-items:start; }
.controls > * { min-width:0; }
.search-control > label { margin-bottom:6px; }
.search-input { display:flex; align-items:stretch; gap:6px; }
.search-input input { min-width:0; flex:1; }
.search-input button { flex:none; padding:8px; font-size:.875rem; }
.search-feedback p { font-size:.875rem; line-height:1.5; color:var(--muted); margin:8px 0 0; }
.search-feedback #search-status { color:var(--ink); }

.search-feedback { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; }
.search-feedback p { margin:0; }
.search-input input::-webkit-search-cancel-button { -webkit-appearance:none; }