/* Source module: foundations.css */
.color-foundation-body { padding: 12px 16px 10px; }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px 9px; }
.swatch {
  height: 48px;
  min-width: 0;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 7px;
  padding: 5px 7px;
  border: 1px solid #33352f;
  background: #0a0b0a;
  color: var(--text-2);
  font-size: 9px;
  text-shadow: 0 1px 2px #000;
}
.swatch i { grid-row: 1 / 3; width: 26px; border: 1px solid #524a39; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.swatch span { align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch code { align-self: start; color: var(--text-3); font: 8.5px/1.2 Consolas, monospace; }

.quality-strip { display: grid; grid-template-columns: 64px repeat(9, minmax(0,1fr)); gap: 7px; align-items: stretch; margin-top: 9px; }
.quality-label { display:flex;align-items:center;justify-content:center;border:1px solid #383a36;color:var(--text-3);font:9px/1 Consolas,monospace;letter-spacing:1px;background:#0a0b0a; }
.quality-chip { min-width:0;height:34px;padding:4px 6px;display:flex;flex-direction:column;justify-content:center;border:1px solid #30322e;background:#080908;font-size:10px;white-space:nowrap;overflow:hidden; }
.quality-chip code { margin-top:2px;color:var(--text-3);font:7.5px/1 Consolas,monospace;text-shadow:none; }
.q-normal { color: var(--quality-normal) !important; }
.q-advanced { color: var(--quality-advanced) !important; }
.q-rare { color: var(--quality-rare) !important; }
.q-artifact { color: var(--quality-artifact) !important; }
.q-legend { color: var(--quality-legend) !important; }
.q-epic { color: var(--quality-epic) !important; }
.q-chronicle { color: var(--quality-chronicle) !important; }
.q-myth { color:transparent !important;background-image:linear-gradient(to bottom,#f8c63d,#cc66e7);background-clip:text;-webkit-background-clip:text;text-shadow:none !important; }
.q-primeval { color:transparent !important;background-image:linear-gradient(to bottom,#5aff62,#58c6ff);background-clip:text;-webkit-background-clip:text;text-shadow:none !important; }
.quality-chip.q-myth, .quality-chip.q-primeval { background-color:#080908; }
.quality-chip.q-myth code, .quality-chip.q-primeval code { color:var(--text-3);-webkit-text-fill-color:var(--text-3); }
.skill-strip { display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:7px;margin-top:7px; }
.semantic-content-strip { display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:7px;margin-top:7px; }
.semantic-chip { height:34px;min-width:0;padding:4px 8px;display:flex;flex-direction:column;justify-content:center;border:1px solid #30322e;background:#080908;font-size:10px;white-space:nowrap;overflow:hidden; }
.semantic-chip code { margin-top:2px;color:var(--text-3);font:7.5px/1 Consolas,monospace; }
.skill-evolution { color:var(--skill-evolution);border-color:#4c235f;background:#120718; }
.skill-passive { color:var(--skill-passive);border-color:#1f5d22;background:#071407; }
.skill-active { color:var(--skill-active);border-color:#5c4d1f;background:#141107; }
.skill-awakening { color:var(--skill-awakening);border-color:#6a3409;background:#170b03; }
.skill-buff { color:var(--skill-buff);border-color:#285865;background:#061217; }
.attribute-label-tone { color:var(--attribute-label); }
.attribute-value-tone { color:var(--attribute-value); }
.disabled-tone { color:var(--disabled); }
.success-tone { color:var(--success); }
.danger-tone { color:var(--danger); }

.type-sample {
  padding: 10px 12px;
  border-left: 2px solid var(--brass);
  background: #0a0b0b;
}
.type-sample + .type-sample { margin-top: 8px; }
.type-sample .zh { color: var(--gold); }
.type-sample .num { color: var(--text); float: right; }
.type-xs { font-size: 12px; }
.type-sm { font-size: 14px; }
.type-md { font-size: 16px; }
.type-lg { font-size: 20px; }
.glyph-select-2x { width:11px;height:6px; }
.glyph-close-2x { width:10px;height:9px; }