@font-face {
  font-family: 'Oxanium ProDyn';
  src: url('../assets/fonts/Oxanium-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Departure Mono ProDyn';
  src: url('../assets/fonts/DepartureMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pd-field); color: var(--pd-ivory); font: var(--fs-body)/var(--lh-body) var(--pd-font-body); }
.wrap { max-width: var(--bp-xl); margin-inline: auto; padding-inline: var(--sp-5); }
a { color: var(--pd-signal); text-underline-offset: .2em; }
a:focus-visible, main:focus-visible { outline: var(--bw-signal) solid var(--pd-signal); outline-offset: var(--sp-1); }
a:hover { color: var(--pd-ivory); }
.skip { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-5); padding: var(--sp-3); background: var(--pd-field); z-index: var(--z-nav); transform: translateY(-200%); }
.skip:focus { transform: none; }
header, footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); padding-block: var(--sp-5); }
header { justify-content: space-between; border-bottom: var(--bw-hairline) solid var(--pd-line); }
.brand { display: flex; align-items: center; gap: var(--sp-4); }
.brand img { object-fit: contain; }
nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
nav a, footer a { display: inline-flex; align-items: center; min-height: calc(var(--sp-8) + var(--sp-1)); }
.hud, nav, footer, code { font-family: var(--pd-font-hud); font-weight: 400; font-size: var(--fs-meta); }
.hud { letter-spacing: var(--ls-label); text-transform: uppercase; }
.intro { padding-block: var(--sp-section-sm); }
.kicker { color: var(--pd-text-dim); margin-top: 0; }
h1, h2, h3 { font-family: var(--pd-font-display); line-height: var(--lh-heading); }
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); margin: var(--sp-3) 0; }
h2 { font-size: var(--fs-h3); margin: 0; }
h3 { font-size: var(--fs-h2); margin-block: var(--sp-5) var(--sp-4); max-width: 22ch; }
.lede { color: var(--pd-text-muted); font-size: var(--fs-lead); margin-bottom: 0; }
.muted { color: var(--pd-text-muted); }
.dim { color: var(--pd-text-dim); }
.silver { color: var(--pd-silver); }
.instrument { background: var(--pd-panel); border: var(--bw-hairline) solid var(--pd-line); }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-5); border-bottom: var(--bw-hairline) solid var(--pd-line); }
.panel-heading .hud { color: var(--pd-text-dim); }
.material-grid { display: grid; }
.glass-sample { background: var(--pd-glass); padding: var(--sp-6); border: var(--bw-hairline) solid var(--pd-blue-line); margin: var(--sp-5); }
.selected-label { display: inline-block; color: var(--pd-signal); background: var(--pd-blue-soft); border: var(--bw-hairline) solid var(--pd-blue-line); padding: var(--sp-2) var(--sp-3); margin: 0; }
.signal-line { width: 40%; height: var(--bw-signal); background: var(--pd-signal); filter: var(--pd-signal-filter); margin-block: var(--sp-7); }
dl { margin: 0; }
.surface-values { padding: 0 var(--sp-5) var(--sp-5); }
.surface-values > div { padding: var(--sp-3); border-bottom: var(--bw-hairline) solid var(--pd-line); }
.raised { background: var(--pd-raised); }
dt { color: var(--pd-silver); }
dd { margin: var(--sp-1) 0 0; }
code { overflow-wrap: anywhere; color: var(--pd-text-muted); }
.roles, .light { margin-top: var(--sp-8); }
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-6); }
.swatches > div::before { content: ''; display: block; width: var(--sp-8); height: var(--sp-1); background: var(--sample); margin-bottom: var(--sp-3); }
.light dl { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
.light dd { display: flex; align-items: center; gap: var(--sp-3); }
.shadow-sample { flex: 0 0 var(--sp-6); height: var(--sp-6); background: var(--pd-shadow-color); border: var(--bw-hairline) solid var(--pd-line); }
footer { margin-top: var(--sp-section-sm); border-top: var(--bw-hairline) solid var(--pd-line); color: var(--pd-text-dim); }
footer .hud { margin-right: auto; }
@media (min-width: 640px) {
  .wrap { padding-inline: var(--sp-7); }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .light dl { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 768px) {
  .material-grid { grid-template-columns: 1fr 1fr; }
  .surface-values { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; }
}
/* A still palette comparison: no animation, transition or atmosphere to cancel. */