/* Class changes: navigable balance archive built on the Fatesend Y2K UI. */
.fs-class-changes {
  --cc-blue: #1c7898;
  --cc-blue-dark: #17375c;
  --cc-blue-soft: #dff2f7;
  --cc-pink: #a83280;
  --cc-green: #347759;
  --cc-line: #829db7;
  width: 100%;
  max-width: 1140px;
  min-width: 0;
  box-sizing: border-box;
  margin: 18px auto 34px;
}

.fs-class-changes > *,
.fs-cc-hero > div:first-child {
  min-width: 0;
}

.fs-cc-hero {
  background:
    linear-gradient(116deg, rgba(255,255,255,.97) 0 55%, rgba(208,237,245,.94) 55% 77%, rgba(244,214,235,.94) 100%),
    url("../img/grid.svg");
}

.fs-cc-index-card {
  position: relative;
  z-index: 1;
  flex: 0 0 276px;
  min-height: 132px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #557895;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(108,222,234,.04) 8px),
    linear-gradient(145deg, #173c5c, #102945);
  color: #dffbff;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.2), 4px 4px 0 rgba(43,65,98,.2);
  font-family: "Courier New", monospace;
}

.fs-cc-index-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -70px;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(80,215,227,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(80,215,227,.04), 0 0 0 30px rgba(198,66,145,.04);
  pointer-events: none;
}

.fs-cc-index-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9bcfd9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

.fs-cc-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #61e1bc;
  box-shadow: 0 0 0 3px rgba(97,225,188,.12), 0 0 8px rgba(97,225,188,.65);
}

.fs-cc-index-card dl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0 12px;
}

.fs-cc-index-card dl > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(133,205,217,.25);
  background: rgba(7,27,46,.34);
}

.fs-cc-index-card dt {
  color: #9ec5d1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fs-cc-index-card dd {
  margin: 3px 0 0;
  color: #fff;
  font: 900 23px/1 Arial, sans-serif;
  text-shadow: 2px 2px 0 rgba(173,45,127,.52);
}

.fs-cc-index-card > small {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a8c9d8;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.fs-cc-index-card > small i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d85ba5;
}

.fs-cc-ticker {
  margin-bottom: 12px;
}

.fs-cc-directory {
  scroll-margin-top: 76px;
}

.fs-cc-directory-body {
  padding: 12px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(64,112,151,.035) 28px),
    #e8f2fa;
}

.fs-cc-directory-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
  padding: 10px 12px;
  border: 1px solid #8ca6be;
  border-left: 4px solid var(--cc-blue);
  border-radius: 2px;
  background: linear-gradient(105deg, rgba(255,255,255,.95), rgba(224,242,247,.93) 65%, rgba(247,229,242,.9));
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.12);
}

.fs-cc-directory-intro > div:first-child {
  min-width: 0;
}

.fs-cc-directory-intro > div:first-child > span {
  color: #247b97;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
}

.fs-cc-directory-intro h3 {
  margin: 3px 0 2px;
  color: #17375c;
  font-size: 15px;
}

.fs-cc-directory-intro p {
  margin: 0;
  color: #5b748d;
  font-size: 12px;
}

.fs-cc-path-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px inset #91a9c0;
  background: rgba(255,255,255,.74);
  color: #5c7288;
  font: 800 12px/1.2 "Courier New", monospace;
  text-transform: uppercase;
}

.fs-cc-path-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fs-cc-path-legend i {
  width: 8px;
  height: 8px;
  border: 1px solid #4d7898;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(54,129,155,.1);
}

.fs-cc-path-legend i.first { background: #4fc0d0; }
.fs-cc-path-legend i.second { background: #d565aa; }

.fs-cc-path-legend b {
  width: 24px;
  height: 1px;
  background: #7898b2;
}

.fs-cc-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.fs-cc-taekwon-path {
  grid-column: 1 / -1;
  width: calc(50% - 5.5px);
  justify-self: center;
}

.fs-cc-path-card,
.fs-cc-special-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #7897b4;
  border-radius: 3px;
  background: rgba(249,252,255,.96);
  box-shadow: inset 1px 1px 0 #fff, 3px 3px 0 rgba(42,70,110,.15);
}

.fs-cc-path-card.is-filter-hidden,
.fs-cc-special-card.is-filter-hidden {
  display: none;
}

.fs-cc-path-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 0 9px;
  border-bottom: 1px solid #7e9bb7;
  background: linear-gradient(90deg, #d9edf5, #eaf2f9 62%, #f4dcea);
}

.fs-cc-path-card > header h3 {
  margin: 0;
  color: #285878;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fs-cc-path-card > header span {
  color: #9a3b79;
  font: 800 12px/1.2 "Courier New", monospace;
  letter-spacing: .06em;
}

.fs-cc-path-flow {
  padding: 9px 10px 11px;
  background:
    radial-gradient(circle at 50% 31%, rgba(75,183,202,.1), transparent 24%),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(59,111,150,.035) 25px),
    #f2f7fb;
}

.fs-cc-job-node {
  position: relative;
  display: grid;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #88a2ba;
  border-radius: 2px;
  background: rgba(255,255,255,.92);
  color: #244663;
  text-decoration: none;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.11);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.fs-cc-job-node:hover,
.fs-cc-job-node:focus-visible {
  z-index: 2;
  border-color: #2585a2;
  outline: 0;
  background: linear-gradient(105deg, #e4f8fa, #faeaf5);
  color: #77315f;
  transform: translate(-1px, -1px);
  box-shadow: inset 1px 1px 0 #fff, 3px 3px 0 rgba(42,70,110,.2);
}

.fs-cc-job-node.is-filter-hidden {
  opacity: .2;
  filter: grayscale(.65);
  pointer-events: none;
}

.fs-cc-job-node.base {
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  width: min(280px, 66%);
  min-height: 106px;
  margin: 0 auto;
  border-color: #5993aa;
  background: linear-gradient(105deg, #fafeff, #e2f4f7);
}

.fs-cc-node-art {
  display: grid;
  place-items: end center;
  align-self: stretch;
  overflow: hidden;
  border-right: 1px dotted #9db4c8;
  background:
    linear-gradient(rgba(255,255,255,.58), rgba(211,231,243,.72)),
    url("../img/grid.svg");
}

.fs-class-changes .fs-cc-node-art .class-icon {
  position: static;
  display: block;
  width: 112px;
  height: 105px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(45,72,105,.14));
  pointer-events: none;
}

.fs-cc-node-copy {
  min-width: 0;
  padding: 8px 9px;
}

.fs-cc-node-copy strong,
.fs-cc-node-copy small {
  display: block;
}

.fs-cc-node-copy strong {
  margin: 3px 0 5px;
  color: #17375c;
  font-size: 14px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.fs-cc-node-stage,
.fs-cc-node-count {
  color: #668097;
  font: 800 12px/1.2 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fs-cc-node-stage { color: #24809a; }
.fs-cc-node-count { color: #9b3e7b; }

.fs-cc-path-connector {
  position: relative;
  display: block;
  width: min(330px, 68%);
  height: 36px;
  margin: 0 auto;
}

.fs-cc-path-connector::before,
.fs-cc-path-connector::after,
.fs-cc-path-connector i {
  content: "";
  position: absolute;
  display: block;
  background: #7197b3;
  box-shadow: 1px 1px 0 rgba(255,255,255,.8);
}

.fs-cc-path-connector::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 18px;
  transform: translateX(-1px);
}

.fs-cc-path-connector::after {
  top: 17px;
  right: 25%;
  left: 25%;
  height: 2px;
}

.fs-cc-path-connector i {
  top: 17px;
  width: 2px;
  height: 19px;
}

.fs-cc-path-connector i:first-child { left: 25%; }
.fs-cc-path-connector i:last-child { right: 25%; }

.fs-cc-path-connector i::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-right: 2px solid #aa4384;
  border-bottom: 2px solid #aa4384;
  background: transparent;
  transform: rotate(45deg);
}

.fs-cc-path-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fs-cc-job-node.advanced {
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  min-height: 96px;
  border-color: #9b829d;
  background: linear-gradient(105deg, #fff, #f8e9f3);
}

.fs-cc-job-node.advanced .fs-cc-node-art .class-icon {
  width: 98px;
  height: 92px;
}

.fs-cc-job-node.advanced .fs-cc-node-stage { color: #a23b7e; }

.fs-cc-job-node.disabled,
.fs-cc-job-node.disabled:hover,
.fs-cc-job-node.disabled:focus-visible {
  cursor: not-allowed;
  border-color: #99a5af;
  border-style: dashed;
  outline: 0;
  background: linear-gradient(105deg, #f4f6f7, #e5e9ec);
  color: #6e7881;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.8), 2px 2px 0 rgba(58,69,78,.09);
  transform: none;
}

.fs-cc-job-node.disabled .fs-cc-node-art {
  border-color: #aeb7bf;
  background:
    linear-gradient(rgba(244,246,247,.68), rgba(215,220,224,.8)),
    url("../img/grid.svg");
}

.fs-cc-job-node.disabled .fs-cc-node-art .class-icon {
  filter: grayscale(1) contrast(.72) opacity(.62);
}

.fs-cc-job-node.disabled .fs-cc-node-copy strong { color: #68737c; }
.fs-cc-job-node.disabled .fs-cc-node-stage { color: #7d8790; }
.fs-cc-job-node.disabled .fs-cc-node-count { color: #7a848c; }

.fs-cc-special-grid {
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.8fr);
  gap: 11px;
  margin-top: 12px;
}

.fs-cc-special-card > header {
  min-height: 59px;
  box-sizing: border-box;
  padding: 8px 10px;
  border-bottom: 1px solid #8aa4bc;
  background: linear-gradient(105deg, #e1f1f7, #f5e4ef);
}

.fs-cc-special-card > header > span {
  color: #9d3c7d;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .07em;
}

.fs-cc-special-card > header h3 {
  margin: 2px 0;
  color: #214b6b;
  font-size: 13px;
}

.fs-cc-special-card > header p {
  margin: 0;
  color: #647d94;
  font-size: 12px;
  line-height: 1.35;
}

.fs-cc-special-card.global > .fs-cc-job-node {
  grid-template-columns: 118px minmax(0, 1fr);
  min-height: 116px;
  margin: 9px;
}

.fs-cc-special-card.global .fs-cc-node-art .class-icon {
  width: 118px;
  height: 111px;
}

.fs-cc-expanded-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
}

.fs-cc-job-node.expanded {
  display: flex;
  min-height: 151px;
  flex-direction: column;
  text-align: center;
}

.fs-cc-job-node.expanded .fs-cc-node-art {
  width: 100%;
  height: 102px;
  flex: 0 0 102px;
  border-right: 0;
  border-bottom: 1px dotted #9db4c8;
}

.fs-cc-job-node.expanded .fs-cc-node-art .class-icon {
  width: 106px;
  height: 100px;
}

.fs-cc-job-node.expanded .fs-cc-node-copy {
  padding: 6px 4px;
}

.fs-cc-job-node.expanded .fs-cc-node-copy strong {
  margin: 2px 0 4px;
  font-size: 12px;
}

.fs-cc-changelog {
  overflow: visible;
  scroll-margin-top: 76px;
}

.fs-cc-changelog > .fs-db-index-panel-bar {
  border: 1px solid #5e82a6;
  border-top: 0;
  border-radius: 4px 4px 0 0;
}

.fs-cc-toolbar {
  position: sticky;
  top: 64px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 9px 12px;
  padding: 10px 11px;
  border-right: 1px solid #7897b6;
  border-bottom: 1px solid #7897b6;
  border-left: 1px solid #7897b6;
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(64,112,151,.035) 22px),
    rgba(238,245,251,.97);
  box-shadow: 0 4px 0 rgba(42,70,110,.1);
  backdrop-filter: blur(7px);
}

.fs-cc-search {
  display: block;
  min-width: 0;
}

.fs-cc-search > span:first-child {
  display: block;
  margin-bottom: 4px;
  color: #516d88;
  font: 800 12px/1.2 "Courier New", monospace;
  letter-spacing: .04em;
}

.fs-cc-search-field {
  position: relative;
  display: block;
}

.fs-cc-search-field > i {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 8px;
  height: 8px;
  border: 2px solid #4b7592;
  border-radius: 50%;
  transform: translateY(-62%);
  pointer-events: none;
}

.fs-cc-search-field > i::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 2px;
  background: #4b7592;
  transform: rotate(45deg);
}

.fs-cc-search input {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 42px 0 34px;
  border: 1px inset #809bb4;
  border-radius: 2px;
  outline: 0;
  background: #fff;
  color: #17375c;
  font: 700 12px/1.3 Arial, sans-serif;
  box-shadow: inset 1px 1px 2px rgba(37,70,105,.13);
}

.fs-cc-search input::placeholder {
  color: #8a9eb1;
  font-weight: 400;
}

.fs-cc-search input:focus {
  border-color: #2385a5;
  box-shadow: inset 1px 1px 2px rgba(37,70,105,.13), 0 0 0 2px rgba(35,133,165,.14);
}

.fs-cc-search kbd {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 20px;
  box-sizing: border-box;
  padding: 2px 5px;
  border: 1px outset #96aabd;
  border-radius: 2px;
  background: linear-gradient(#fff, #dbe7f1);
  color: #667e95;
  font: 700 12px/1.2 "Courier New", monospace;
  text-align: center;
  transform: translateY(-50%);
  box-shadow: 1px 1px 0 rgba(42,70,110,.17);
  pointer-events: none;
}

.fs-cc-actions {
  display: flex;
  align-items: end;
  gap: 6px;
  padding-top: 15px;
}

.fs-cc-actions button,
.fs-cc-empty button {
  min-height: 34px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px outset #718eaa;
  border-radius: 2px;
  background: linear-gradient(#fff, #d9e6f1);
  color: #355977;
  cursor: pointer;
  font: 800 12px/1 "Courier New", monospace;
  text-transform: uppercase;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.18);
}

.fs-cc-actions button:hover,
.fs-cc-actions button:focus-visible,
.fs-cc-empty button:hover,
.fs-cc-empty button:focus-visible {
  border-color: #277f9f;
  outline: 0;
  background: linear-gradient(#e9fdff, #b7e1e7);
  color: #74305f;
}

.fs-cc-actions button:disabled {
  cursor: default;
  opacity: .48;
}

.fs-cc-filter-status {
  grid-column: 1 / -1;
  margin: 0;
  color: #687f97;
  font: 700 12px/1.25 "Courier New", monospace;
  text-transform: uppercase;
}

.fs-cc-filter-status strong {
  color: var(--cc-pink);
}

.fs-cc-legacy-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 11px 11px 2px;
  padding: 10px 12px;
  border: 1px solid #86a1b9;
  border-left: 4px solid var(--cc-blue);
  border-radius: 2px;
  background: linear-gradient(105deg, #e3f6f9, #f7eaf3);
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.12);
}

.fs-cc-legacy-note strong {
  color: #245877;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fs-cc-legacy-note p {
  margin: 0;
  color: #566f89;
  font-size: 12px;
  line-height: 1.45;
}

.fs-cc-class-list {
  padding: 9px 11px 12px;
  border-right: 1px solid #7897b6;
  border-bottom: 1px solid #7897b6;
  border-left: 1px solid #7897b6;
  border-radius: 0 0 4px 4px;
  background: #dce8f3;
}

.fs-cc-class-list > .info-highlight {
  display: none;
}

.fs-class-changes .class-section {
  margin: 0;
  overflow: hidden;
  border: 1px solid #7695b2;
  border-radius: 3px;
  background: #f8fbfe;
  box-shadow: inset 1px 1px 0 #fff, 3px 3px 0 rgba(42,70,110,.16);
  scroll-margin-top: 164px;
}

.fs-class-changes .class-section + .class-section {
  margin-top: 9px;
}

.fs-class-changes .class-section.is-open {
  border-color: #43839e;
  box-shadow: inset 1px 1px 0 #fff, 3px 3px 0 rgba(42,70,110,.2), 0 0 0 2px rgba(42,130,158,.08);
}

.fs-class-changes .class-section.is-search-hidden {
  display: none;
}

.fs-class-changes .class-header {
  position: relative;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 94px;
  box-sizing: border-box;
  padding: 8px 13px 8px 7px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(104deg, rgba(255,255,255,.98) 0 65%, rgba(221,241,246,.9) 65% 83%, rgba(246,226,240,.9) 100%),
    url("../img/grid.svg");
  color: #17375c;
  text-align: left;
  cursor: pointer;
}

.fs-class-changes .class-header::after {
  content: "";
  position: absolute;
  right: 92px;
  bottom: -54px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(40,126,157,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(255,255,255,.22);
  pointer-events: none;
}

.fs-class-changes .class-header:hover {
  background:
    linear-gradient(104deg, #fff 0 62%, #d8f2f6 62% 82%, #f8e0f0 100%),
    url("../img/grid.svg");
}

.fs-class-changes .class-header:focus-visible {
  z-index: 2;
  outline: 2px dotted #1d718f;
  outline-offset: -5px;
}

.fs-cc-class-art {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 78px;
  overflow: hidden;
  border: 1px inset #91a9bf;
  background:
    linear-gradient(rgba(255,255,255,.65), rgba(211,231,243,.72)),
    url("../img/grid.svg");
  box-shadow: inset 1px 1px 2px rgba(40,70,105,.13);
}

.fs-class-changes .fs-cc-class-art .class-icon {
  position: static;
  display: block;
  width: 104px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(45,72,105,.18));
  pointer-events: none;
}

.fs-cc-class-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.fs-cc-file-label,
.fs-cc-class-copy small {
  display: block;
  color: #688198;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.fs-cc-file-label {
  margin-bottom: 5px;
  color: #288099;
}

.fs-class-changes .class-name {
  display: block;
  margin: 0 0 7px;
  color: #17375c;
  font: 900 clamp(19px, 3vw, 25px)/1 Arial, sans-serif;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 #fff;
}

.fs-cc-class-copy small b {
  color: var(--cc-pink);
  font-size: 12px;
}

.fs-cc-toggle-copy {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 116px;
  justify-content: space-between;
  padding: 8px 9px;
  border: 1px outset #6688a8;
  border-radius: 2px;
  background: linear-gradient(#fff, #d9e7f2);
  color: #315675;
  font: 800 12px/1 "Courier New", monospace;
  text-transform: uppercase;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.17);
}

.is-open .fs-cc-toggle-copy {
  border-color: #347f9d;
  background: linear-gradient(#e6fcff, #afe0e7);
  color: #6e2c5a;
}

.fs-class-changes .arrow {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform .16s ease;
}

.fs-class-changes .is-open .arrow {
  transform: rotate(225deg) translate(-1px, 1px);
}

.fs-class-changes .fs-ct-wrap {
  max-height: none;
  margin: 0;
  overflow: visible;
  border-top: 1px solid #6f90ae;
  opacity: 1;
  background: #edf4fa;
  transition: none;
}

.fs-class-changes .fs-ct-wrap[hidden] {
  display: none;
}

.fs-class-changes .class-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border: 0;
  border-collapse: collapse;
  color: #294761;
  font-size: 12px;
  line-height: 1.48;
}

.fs-class-changes .class-table th,
.fs-class-changes .class-table td {
  box-sizing: border-box;
  padding: 10px 11px;
  border: 0;
  border-top: 1px solid #cad8e5;
  border-right: 1px solid #d3dfea;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.fs-class-changes .class-table th:last-child,
.fs-class-changes .class-table td:last-child {
  border-right: 0;
}

.fs-class-changes .class-table thead th {
  border-top: 0;
  border-bottom: 1px solid #7897b3;
  background: linear-gradient(#fdfefe, #d8e6f1);
  color: #375b78;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #fff;
}

.fs-class-changes .class-table th:nth-child(1),
.fs-class-changes .class-table td:nth-child(1) { width: 20%; }

.fs-class-changes .class-table th:nth-child(2),
.fs-class-changes .class-table td:nth-child(2) { width: 40%; }

.fs-class-changes .class-table th:nth-child(3),
.fs-class-changes .class-table td:nth-child(3) { width: 40%; }

.fs-class-changes .class-table tbody tr:nth-child(even) td:first-child {
  background: #f2f7fb;
}

.fs-class-changes .class-table td:nth-child(2) {
  background: rgba(245,232,236,.56);
  color: #665668;
}

.fs-class-changes .class-table td:nth-child(3) {
  background: rgba(222,244,238,.72);
  color: #285a47;
}

.fs-class-changes .fs-cc-compare-row > td:first-child {
  border-left: 3px solid #7b9eb9;
  background: linear-gradient(90deg, #e6f0f6, #f4f8fb 78%);
}

.fs-class-changes .class-table td.fs-cc-compare-cell {
  padding: 6px;
  background: #edf4f8;
}

.fs-cc-compare-panel {
  position: relative;
  min-height: 54px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #a5b5c3;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(55,83,108,.025) 24px),
    #f5f7f9;
  color: #66717c;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.07);
}

.fs-cc-fatesend-panel {
  border-color: #6ea990;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(39,108,80,.03) 24px),
    linear-gradient(105deg, #f9fdfb, #e1f3ea);
  color: #285a47;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(39,105,79,.1);
}

.fs-cc-fatesend-panel::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: -18px;
  z-index: 2;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #5b8e7a;
  border-radius: 50%;
  background: #f5fbf8;
  color: #37755d;
  font: 900 12px/1 "Courier New", monospace;
  box-shadow: 1px 1px 0 rgba(42,70,110,.13);
  transform: translateY(-50%);
}

.fs-cc-compare-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  color: #788995;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .075em;
}

.fs-cc-fatesend-panel .fs-cc-compare-label {
  color: #2d8061;
}

.fs-cc-fatesend-panel .fs-cc-compare-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38a679;
  box-shadow: 0 0 0 2px rgba(56,166,121,.13);
}

.fs-cc-compare-panel > div {
  font-size: 12px;
  line-height: 1.5;
}

.fs-class-changes .fs-cc-rule-row {
  --fs-rule-accent: #2f8fa1;
  --fs-rule-soft: #e1f3f5;
  --fs-rule-ink: #215d69;
}

.fs-class-changes .fs-cc-rule-row--added {
  --fs-rule-accent: #258a72;
  --fs-rule-soft: #dff4eb;
  --fs-rule-ink: #205f52;
}

.fs-class-changes .fs-cc-rule-row--unlocked {
  --fs-rule-accent: #6d64ad;
  --fs-rule-soft: #ebe8f8;
  --fs-rule-ink: #504983;
}

.fs-class-changes .fs-cc-rule-row--removed {
  --fs-rule-accent: #bd4d68;
  --fs-rule-soft: #f8e4e9;
  --fs-rule-ink: #87394c;
}

.fs-class-changes .fs-cc-rule-row--stabilized {
  --fs-rule-accent: #a46d22;
  --fs-rule-soft: #f7edda;
  --fs-rule-ink: #76501e;
}

.fs-class-changes .fs-cc-rule-row--fixed {
  --fs-rule-accent: #287e9d;
  --fs-rule-soft: #e0f0f6;
  --fs-rule-ink: #235d73;
}

.fs-class-changes .fs-cc-rule-row--progression {
  --fs-rule-accent: #426ca8;
  --fs-rule-soft: #e3ecf9;
  --fs-rule-ink: #284f84;
}

.fs-class-changes .fs-cc-rule-row > td:first-child {
  border-left: 3px solid var(--fs-rule-accent);
  background: linear-gradient(90deg, var(--fs-rule-soft), #f4f8fb 78%);
}

.fs-class-changes .class-table td.fs-cc-rule-cell {
  width: auto;
  padding: 6px;
  background: #edf4f8;
  color: var(--fs-rule-ink);
}

.fs-cc-rule-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  min-height: 58px;
  overflow: hidden;
  border: 1px solid var(--fs-rule-accent);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(44,82,113,.035) 24px),
    linear-gradient(105deg, #fbfdfe, var(--fs-rule-soft));
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(42,70,110,.1);
}

.fs-cc-rule-badge {
  display: grid;
  place-items: center;
  padding: 8px;
  border-right: 1px dotted var(--fs-rule-accent);
  background: color-mix(in srgb, var(--fs-rule-soft) 76%, white);
  color: var(--fs-rule-ink);
  font: 900 12px/1.15 "Courier New", monospace;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.fs-cc-rule-badge::before {
  content: "+";
  display: grid;
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

.fs-cc-rule-row--unlocked .fs-cc-rule-badge::before { content: "◇"; }
.fs-cc-rule-row--removed .fs-cc-rule-badge::before { content: "×"; }
.fs-cc-rule-row--stabilized .fs-cc-rule-badge::before { content: "≈"; }
.fs-cc-rule-row--fixed .fs-cc-rule-badge::before { content: "OK"; font-size: 12px; }
.fs-cc-rule-row--progression .fs-cc-rule-badge::before { content: "LV"; font-size: 12px; }

.fs-cc-rule-copy {
  align-self: center;
  padding: 8px 11px;
}

.fs-cc-rule-copy small {
  display: block;
  margin-bottom: 4px;
  color: var(--fs-rule-accent);
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .07em;
}

.fs-cc-rule-copy > div {
  color: var(--fs-rule-ink);
  font-size: 12px;
  line-height: 1.48;
}

.fs-cc-platinum-lead {
  margin: 0 0 8px;
  font-size: 12px;
}

.fs-cc-platinum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.fs-cc-platinum-grid section {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(66,108,168,.34);
  border-radius: 2px;
  background: rgba(255,255,255,.66);
}

.fs-cc-platinum-grid section > strong {
  display: block;
  margin-bottom: 4px;
  color: #244f84;
  font: 900 12px/1.2 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fs-cc-platinum-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px dotted rgba(82,118,158,.25);
  color: #294c73;
  font-size: 12px;
  line-height: 1.25;
}

.fs-cc-platinum-grid span b {
  flex: 0 0 auto;
  color: #9b3e7b;
  font: 900 12px/1.2 "Courier New", monospace;
}

.fs-class-changes .class-table tbody tr:hover td {
  box-shadow: inset 0 0 0 999px rgba(255,255,255,.23);
}

.fs-class-changes .class-table td:first-child strong {
  color: #173d66;
  font-size: 12px;
}

.fs-class-changes .skill-icon {
  width: 28px;
  height: 28px;
  margin: -2px 7px 2px 0;
  image-rendering: pixelated;
  vertical-align: middle;
  filter: drop-shadow(1px 1px 0 rgba(40,65,95,.18));
}

.fs-cc-empty {
  border-right: 1px solid #7897b6;
  border-bottom: 1px solid #7897b6;
  border-left: 1px solid #7897b6;
}

.fs-cc-empty[hidden] {
  display: none !important;
}

.fs-cc-empty button {
  padding: 0 13px;
}

@media (max-width: 980px) {
  .fs-cc-path-grid,
  .fs-cc-special-grid { grid-template-columns: minmax(0, 1fr); }

  .fs-cc-taekwon-path { width: 100%; }
}

@media (max-width: 760px) {
  .fs-class-changes {
    margin-top: 10px;
  }

  .fs-cc-index-card {
    width: 100%;
    flex-basis: auto;
  }

  .fs-cc-directory-body { padding: 9px; }

  .fs-cc-platinum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fs-cc-directory-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .fs-cc-path-legend {
    align-self: stretch;
    justify-content: center;
  }

  .fs-cc-job-node.base { width: min(290px, 86%); }

  .fs-cc-expanded-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .fs-cc-hero .fs-db-index-tabs {
    flex-wrap: wrap;
  }

  .fs-cc-hero .fs-db-index-tabs a {
    flex: 1 1 130px;
    min-width: 0;
    padding-right: 5px;
    padding-left: 5px;
  }

  .fs-cc-toolbar {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  .fs-cc-actions {
    align-items: stretch;
    padding-top: 0;
  }

  .fs-cc-actions button {
    flex: 1 1 0;
  }

  .fs-cc-legacy-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .fs-class-changes .class-section {
    scroll-margin-top: 74px;
  }

  .fs-class-changes .class-header {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    min-height: 82px;
    padding: 6px 8px 6px 6px;
  }

  .fs-cc-class-art {
    min-height: 68px;
  }

  .fs-class-changes .fs-cc-class-art .class-icon {
    width: 80px;
    height: 72px;
  }

  .fs-cc-toggle-copy {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: -1px;
  }

  .fs-class-changes .class-table,
  .fs-class-changes .class-table tbody,
  .fs-class-changes .class-table tr,
  .fs-class-changes .class-table td {
    display: block;
    width: auto;
    box-sizing: border-box;
  }

  .fs-class-changes .class-table {
    padding: 1px 8px 8px;
    background: #dce8f3;
  }

  .fs-class-changes .class-table thead {
    display: none;
  }

  .fs-class-changes .class-table tbody tr {
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #7897b4;
    border-radius: 3px;
    background: #f9fcff;
    box-shadow: 3px 3px 0 rgba(42,70,110,.15);
  }

  .fs-class-changes .class-table th:nth-child(n),
  .fs-class-changes .class-table td:nth-child(n) {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 9px;
    width: auto;
    min-height: 38px;
    padding: 8px 9px;
    border-top: 1px dotted #9eb4c8;
    border-right: 0;
    align-items: start;
  }

  .fs-class-changes .class-table td:first-child {
    border-top: 0;
    background: linear-gradient(90deg, #eff7fb, #f8edf5);
  }

  .fs-class-changes .class-table td::before {
    content: attr(data-label);
    padding-top: 2px;
    color: #647e98;
    font: 800 12px/1.2 "Courier New", monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .fs-class-changes .class-table td:nth-child(3)::before {
    color: #347759;
  }

  .fs-class-changes .class-table td.fs-cc-rule-cell {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
  }

  .fs-class-changes .class-table td.fs-cc-rule-cell::before {
    color: var(--fs-rule-accent);
  }

  .fs-class-changes .class-table td.fs-cc-compare-cell {
    padding: 7px 8px;
  }

  .fs-cc-fatesend-panel::before {
    top: -12px;
    left: 50%;
    content: "↓";
    transform: translateX(-50%);
  }

}

@media (max-width: 540px) {
  .fs-cc-hero .fs-db-index-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .fs-cc-hero .fs-db-index-tabs a {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .fs-cc-hero .fs-db-index-tabs a:last-child {
    grid-column: 1 / -1;
  }

  .fs-cc-hero p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .fs-cc-directory-body { padding: 7px; }

  .fs-cc-platinum-grid { grid-template-columns: minmax(0, 1fr); }

  .fs-cc-directory-intro {
    padding: 9px;
  }

  .fs-cc-directory-intro h3 {
    font-size: 13px;
    line-height: 1.25;
  }

  .fs-cc-path-legend {
    flex-wrap: wrap;
  }

  .fs-cc-path-card > header {
    padding: 0 7px;
  }

  .fs-cc-path-flow {
    padding: 8px 7px 9px;
  }

  .fs-cc-job-node.base {
    grid-template-columns: 98px minmax(0, 1fr);
    width: 100%;
    min-height: 96px;
  }

  .fs-cc-job-node.base .fs-cc-node-art .class-icon {
    width: 98px;
    height: 92px;
  }

  .fs-cc-path-connector {
    width: 76%;
  }

  .fs-cc-job-node.advanced {
    display: flex;
    min-height: 151px;
    flex-direction: column;
    text-align: center;
  }

  .fs-cc-job-node.advanced .fs-cc-node-art {
    width: 100%;
    height: 96px;
    flex: 0 0 96px;
    border-right: 0;
    border-bottom: 1px dotted #9db4c8;
  }

  .fs-cc-job-node.advanced .fs-cc-node-art .class-icon {
    width: 94px;
    height: 89px;
  }

  .fs-cc-job-node.advanced .fs-cc-node-copy {
    padding: 6px 4px;
  }

  .fs-cc-job-node.advanced .fs-cc-node-copy strong {
    margin: 2px 0 4px;
    font-size: 12px;
  }

  .fs-cc-special-card.global > .fs-cc-job-node {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .fs-cc-special-card.global .fs-cc-node-art .class-icon {
    width: 104px;
    height: 98px;
  }

  .fs-cc-expanded-nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fs-cc-rule-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .fs-cc-rule-badge {
    display: flex;
    min-height: 27px;
    justify-content: flex-start;
    gap: 7px;
    padding: 5px 8px;
    border-right: 0;
    border-bottom: 1px dotted var(--fs-rule-accent);
  }

  .fs-cc-rule-badge::before {
    width: 15px;
    height: 15px;
    margin: 0;
    flex: 0 0 15px;
    font-size: 12px;
  }

  .fs-cc-actions {
    flex-wrap: wrap;
  }

  .fs-cc-actions button {
    flex: 1 1 120px;
  }

  .fs-cc-class-list {
    padding: 7px;
  }

  .fs-class-changes .class-table th:nth-child(n),
  .fs-class-changes .class-table td:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .fs-class-changes .class-table td::before {
    padding-bottom: 3px;
    border-bottom: 1px dotted rgba(120,151,180,.45);
  }

  .fs-class-changes .class-name {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-class-changes .arrow {
    transition: none;
  }
}
