:root {
        --black-1: #252423;
        --black-2: #262422;
        --black-3: #262422;
        --black-4: #262422;
        --black-5: #272421;
        --black-6: #272421;
        --white-1: #f6f4f2;
        --white-2: #b8b6b3;
        --white-3: #9a9593;
        --white-4: #524f49;
        --white-5: #413d39;
        --white-6: #312e2b;
        --red-1: #ff4b4b;
        --red-2: #bf3e3e;
        --red-3: #9e3838;
        --red-4: #532a29;
        --red-5: #412726;
        --red-6: #322523;
        --corail-1: #ff8333;
        --corail-2: #bf672d;
        --corail-3: #9e582b;
        --corail-4: #533724;
        --corail-5: #412f23;
        --corail-6: #322922;
        --orange-1: #ffa828;
        --orange-2: #bf8026;
        --orange-3: #9e6d25;
        --orange-4: #523e23;
        --orange-5: #413422;
        --orange-6: #322b21;
        --yellow-1: #ffcc2a;
        --yellow-2: #bf9a27;
        --yellow-3: #9e8026;
        --yellow-4: #524723;
        --yellow-5: #413922;
        --yellow-6: #322d21;
        --citrus-1: #f9f640;
        --citrus-2: #bab836;
        --citrus-3: #9b9932;
        --citrus-4: #515027;
        --citrus-5: #403f24;
        --citrus-6: #323022;
        --lime-1: #b7ff54;
        --lime-2: #8bbe44;
        --lime-3: #759d3d;
        --lime-4: #42522b;
        --lime-5: #384027;
        --lime-6: #2d3123;
        --green-1: #6aff65;
        --green-2: #54be50;
        --green-3: #4a9e45;
        --green-4: #31522e;
        --green-5: #2c4029;
        --green-6: #273124;
        --emerald-1: #57f695;
        --emerald-2: #47b873;
        --emerald-3: #409962;
        --emerald-4: #2d5039;
        --emerald-5: #293f30;
        --emerald-6: #263128;
        --turquoise-1: #66ffbc;
        --turquoise-2: #52be8e;
        --turquoise-3: #479e77;
        --turquoise-4: #305242;
        --turquoise-5: #2b4035;
        --turquoise-6: #26312b;
        --cyan-1: #26f2d5;
        --cyan-2: #25b5a0;
        --cyan-3: #259686;
        --cyan-4: #244e48;
        --cyan-5: #233f39;
        --cyan-6: #23302d;
        --sega-1: #05dbe9;
        --sega-2: #0fa4ae;
        --sega-3: #138990;
        --sega-4: #1e4a4c;
        --sega-5: #203b3c;
        --sega-6: #212f2f;
        --sky-1: #33b3f1;
        --sky-2: #2e88b4;
        --sky-3: #2c7395;
        --sky-4: #26424e;
        --sky-5: #25363e;
        --sky-6: #242c2f;
        --indigo-1: #717aff;
        --indigo-2: #595fbe;
        --indigo-3: #4d519e;
        --indigo-4: #323351;
        --indigo-5: #2c2c3f;
        --indigo-6: #282630;
        --lavender-1: #a369ff;
        --lavender-2: #7d53be;
        --lavender-3: #6a489e;
        --lavender-4: #3e3051;
        --lavender-5: #342a3f;
        --lavender-6: #2b2530;
        --purple-1: #c06ddf;
        --purple-2: #9356a8;
        --purple-3: #7b4a8c;
        --purple-4: #45314b;
        --purple-5: #392b3c;
        --purple-6: #2f262d;
        --magenta-1: #e962bf;
        --magenta-2: #af4e90;
        --magenta-3: #93447a;
        --magenta-4: #4e2e43;
        --magenta-5: #3f2936;
        --magenta-6: #31252b;
        --pink-1: #ff86a7;
        --pink-2: #bf687f;
        --pink-3: #9f586b;
        --pink-4: #53363c;
        --pink-5: #412e32;
        --pink-6: #322729;
        --bg-1: #252423;
        --bg-2: #2a2928;
        --bg-3: #2f2e2d;
        --bg-4: #353433;
        --bg-5: #3a3938;
        --fg-1: #dddcda;
        --fg-2: #c6c3c1;
        --fg-3: #96918f;
        --fg-4: #65655e;
        --fg-5: #33332e;
        --input-border-radius: 0.25rem;
        --br: 1rem;
        --padding: 1rem;
        --border-width: 1px;
      }

      [data-color="fg"] {
        --color-1: var(--fg-1);
        --color-2: var(--fg-2);
        --color-3: var(--fg-3);
        --color-4: var(--fg-4);
        --color-5: var(--fg-5);
      }
      [data-color="bg"] {
        --color-1: var(--bg-1);
        --color-2: var(--bg-2);
        --color-3: var(--bg-3);
        --color-4: var(--bg-4);
        --color-5: var(--bg-5);
      }
      [data-color="0"] {
        --color-1: var(--red-1);
        --color-2: var(--red-2);
        --color-3: var(--red-3);
        --color-4: var(--red-4);
        --color-5: var(--red-5);
      }
      [data-color="1"] {
        --color-1: var(--corail-1);
        --color-2: var(--corail-2);
        --color-3: var(--corail-3);
        --color-4: var(--corail-4);
        --color-5: var(--corail-5);
      }
      [data-color="2"] {
        --color-1: var(--orange-1);
        --color-2: var(--orange-2);
        --color-3: var(--orange-3);
        --color-4: var(--orange-4);
        --color-5: var(--orange-5);
      }
      [data-color="3"] {
        --color-1: var(--yellow-1);
        --color-2: var(--yellow-2);
        --color-3: var(--yellow-3);
        --color-4: var(--yellow-4);
        --color-5: var(--yellow-5);
      }
      [data-color="4"] {
        --color-1: var(--citrus-1);
        --color-2: var(--citrus-2);
        --color-3: var(--citrus-3);
        --color-4: var(--citrus-4);
        --color-5: var(--citrus-5);
      }
      [data-color="5"] {
        --color-1: var(--lime-1);
        --color-2: var(--lime-2);
        --color-3: var(--lime-3);
        --color-4: var(--lime-4);
        --color-5: var(--lime-5);
      }
      [data-color="6"] {
        --color-1: var(--green-1);
        --color-2: var(--green-2);
        --color-3: var(--green-3);
        --color-4: var(--green-4);
        --color-5: var(--green-5);
      }
      [data-color="7"] {
        --color-1: var(--emerald-1);
        --color-2: var(--emerald-2);
        --color-3: var(--emerald-3);
        --color-4: var(--emerald-4);
        --color-5: var(--emerald-5);
      }
      [data-color="8"] {
        --color-1: var(--turquoise-1);
        --color-2: var(--turquoise-2);
        --color-3: var(--turquoise-3);
        --color-4: var(--turquoise-4);
        --color-5: var(--turquoise-5);
      }
      [data-color="9"] {
        --color-1: var(--cyan-1);
        --color-2: var(--cyan-2);
        --color-3: var(--cyan-3);
        --color-4: var(--cyan-4);
        --color-5: var(--cyan-5);
      }
      [data-color="10"] {
        --color-1: var(--sega-1);
        --color-2: var(--sega-2);
        --color-3: var(--sega-3);
        --color-4: var(--sega-4);
        --color-5: var(--sega-5);
      }
      [data-color="11"] {
        --color-1: var(--sky-1);
        --color-2: var(--sky-2);
        --color-3: var(--sky-3);
        --color-4: var(--sky-4);
        --color-5: var(--sky-5);
      }
      [data-color="12"] {
        --color-1: var(--indigo-1);
        --color-2: var(--indigo-2);
        --color-3: var(--indigo-3);
        --color-4: var(--indigo-4);
        --color-5: var(--indigo-5);
      }
      [data-color="13"] {
        --color-1: var(--lavender-1);
        --color-2: var(--lavender-2);
        --color-3: var(--lavender-3);
        --color-4: var(--lavender-4);
        --color-5: var(--lavender-5);
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
      }

      html,
      body {
        background-color: var(--bg-1);
        color: var(--fg-1);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      }

      .br {
        border-radius: var(--br);
      }
      .br .br {
        border-radius: calc(var(--br) * 0.5);
      }
      .br .br .br {
        border-radius: calc(var(--br) * 0.25);
      }

      .black {
        color: var(--bg-1);
      }
      .white {
        color: var(--fg-1);
      }
      .red {
        color: var(--red-1);
      }
      .orange {
        color: var(--corail-1);
      }
      .yellow {
        color: var(--yellow-1);
      }
      .blue {
        color: var(--sky-1);
      }
      .green {
        color: var(--green-1);
      }

      .grid {
        --one-cell: 100px;
        --border-color: rgba(255, 255, 255, 0.75);
        flex-grow: 1;
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
      }

      .grid:before {
        content: "";
        pointer-events: none;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:
          linear-gradient(
            -90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
          ),
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(
            -90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
          ),
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size:
          calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
          calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
          var(--one-cell) var(--one-cell),
          var(--one-cell) var(--one-cell),
          var(--one-cell) var(--one-cell),
          var(--one-cell) var(--one-cell);
        background-position: 0 -1px;
        backface-visibility: hidden;
      }

      .grid:before {
        width: calc(75px + 100%);
        left: -75px;
      }

      @media (min-width: 500px) {
        .grid:before {
          width: 100%;
          left: 0;
        }
      }

      /* Logs */

      .log {
        --width: 22ch;
        --height: 20ch;
        position: fixed;
        z-index: 10;
        top: 0;
        overflow-y: scroll;
        width: var(--width);
        height: var(--height);
        padding-left: 1ch;
        padding-right: 1ch;
        padding-bottom: 1ch;
        font-family: ui-monospace, monospace;
        white-space: pre;
        background-color: rgba(0, 0, 0, 0.5);
      }

      @keyframes reveal {
        from {
          opacity: 1;
        }
        to {
          opacity: 0.4;
        }
      }

      .log span {
        animation: reveal 2s ease-in-out forwards;
      }

      /* Inputs */

      button,
      select {
        width: 100%;
        flex-shrink: 0.5;
        border: none;
        background-color: var(--white-1);
        border-radius: var(--input-border-radius);
        white-space: nowrap;
        margin: 0;
        height: 2rem;
      }

      button {
        padding: 0 0.75rem;
      }

      select:disabled,
      button:disabled {
        background-color: var(--grey);
      }

      select:not(:disabled):hover,
      button:not(:disabled):hover {
        cursor: pointer;
        background-color: var(--white-2);
      }

      legend {
        display: flex;
        gap: 0.5rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 2rem;
      }

      label {
        display: flex;
        gap: 0.5rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: 2rem;
      }

      fieldset {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1px;
      }

      fieldset.vertical {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
      }

      fieldset > * {
        border-radius: 0;
      }

      fieldset > *:first-child {
        border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
      }

      fieldset > *:last-child {
        border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
      }

      body {
        --header-height: 4rem;
        --footer-height: 3rem;
        --card-w: 3.5rem;
        --card-h: 4rem;
        display: flex;
        flex-direction: column;
        min-height: 100lvh;
        overflow: hidden;
        perspective: 1000px;
      }
      body[data-layout-mode="table"] {
        overflow: auto;
        perspective: none;
      }
      #scene {
        position: fixed;
        transform-style: preserve-3d;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: var(--header-height) var(--padding)
          calc(var(--footer-height) + var(--padding));
        inset: 0;
      }
      body[data-layout-mode="table"] #scene {
        position: relative;
        height: auto;
        min-height: calc(100lvh - var(--footer-height));
        transform: none !important;
        transform-style: flat;
        overflow: visible;
      }
      #scene-content {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }
      body[data-layout-mode="table"] #scene-content {
        position: relative;
        height: auto;
        min-height: calc(
          100lvh - var(--header-height) - var(--footer-height) - 2rem
        );
        transform-style: flat;
      }
      #scene-content[data-layout="table"] {
        --w: var(--card-w);
        --h: var(--card-h);
        display: grid;
        grid-template-columns: repeat(var(--table-cols, 4), var(--w));
        grid-auto-rows: var(--h);
        gap: 0.45rem;
        place-content: center;
        justify-content: center;
        width: fit-content;
        max-width: min(72rem, 100%);
        margin: 0 auto;
        padding: 0.5rem 0 1rem;
      }
      #scene-content[data-layout="table"][data-density="compact"] {
        gap: 0.65rem;
        padding: 1rem 0 1.5rem;
      }
      #scene-content[data-layout="table"][data-density="compact"] .element-symbol {
        font-size: 1.75rem;
      }
      #scene-content[data-layout="table"][data-density="normal"] {
        gap: 0.55rem;
      }
      #scene-content[data-layout="table"][data-density="dense"] {
        gap: 0.4rem;
      }
      body[data-layout-mode="table"] #scene-content[data-density="compact"] {
        min-height: calc(
          100lvh - var(--header-height) - var(--footer-height)
        );
      }
      .controls {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-shrink: 1;
        position: fixed;
        z-index: 3;
        top: 0px;
        width: 100%;
        height: var(--header-height);
        padding: var(--padding);
      }
      .controls-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        height: var(--header-height);
        gap: calc(var(--padding) * 0.5);
      }
      .controls button {
        background-color: var(--bg-4);
        color: var(--fg-1);
        flex-shrink: 1;
      }
      .controls button:hover {
        background-color: var(--bg-5);
      }
      .controls button.is-active {
        background-color: var(--fg-1);
        color: var(--bg-3);
      }
      @media (max-width: 639px) {
        body {
          --header-height: 3.25rem;
          --footer-height: 2.75rem;
          --card-w: 3rem;
          --card-h: 3.5rem;
          --padding: 0.65rem;
        }
        .controls-group {
          width: 100%;
        }
        .controls-group button {
          flex: 1;
          min-width: 0;
          font-size: 0.75rem;
          padding: 0 0.35rem;
        }
      }
      .credits {
        text-align: center;
        position: fixed;
        z-index: 1;
        bottom: 0px;
        width: 100%;
        height: var(--footer-height);
        padding: var(--padding);
        font-size: 0.75rem;
        line-height: 1.4;
        background: linear-gradient(transparent, rgba(37, 36, 35, 0.92));
      }
      .credits a {
        color: var(--red-1);
        text-decoration: none;
      }
      .element {
        overflow: hidden;
        pointer-events: auto;
        --w: var(--card-w);
        --h: var(--card-h);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border: 1.5px solid var(--color-3, rgba(255, 255, 255, 0.15));
        background-color: var(--color-5, var(--bg-3));
        color: var(--color-1, var(--fg-1));
        width: var(--w);
        height: var(--h);
        border-radius: 0.3rem;
        padding: 0.28rem 0.22rem 0.18rem;
        transform-style: preserve-3d;
        z-index: 1;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        appearance: none;
        transition:
          border-color 0.15s ease,
          box-shadow 0.15s ease,
          filter 0.15s ease;
      }
      .element[data-faction] {
        border-color: var(--el-border);
        background-color: var(--el-bg);
        color: var(--el-text);
      }
      .element[data-faction] .element-symbol {
        color: var(--el-accent);
      }
      .element[data-faction] .element-number {
        color: var(--el-accent);
        opacity: 0.75;
      }
      .element[data-multi-faction] {
        border: 2px solid transparent;
        background-color: transparent;
        background-origin: border-box;
        background-clip: padding-box, border-box;
        -webkit-background-clip: padding-box, border-box;
        color: var(--el-text);
      }
      .element[data-multi-faction] .element-symbol {
        color: var(--el-accent);
      }
      .element[data-multi-faction] .element-number {
        color: var(--el-accent);
        opacity: 0.75;
      }
      .element-faction-dots {
        display: flex;
        gap: 0.12rem;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        min-height: 0.2rem;
        max-width: 100%;
        margin-top: 0.05rem;
        pointer-events: none;
      }
      .element-faction-dots[data-count="3"] .element-faction-dot,
      .element-faction-dots[data-count="4"] .element-faction-dot {
        width: 0.22rem;
        height: 0.22rem;
      }
      .element-faction-dots.is-spectrum {
        min-height: 0.32rem;
        padding: 0 0.05rem;
      }
      .element-faction-spectrum {
        display: block;
        width: 100%;
        height: 0.3rem;
        border-radius: 999px;
      }
      .element-faction-dot {
        width: 0.28rem;
        height: 0.28rem;
        border-radius: 999px;
        flex-shrink: 0;
      }
      .element.is-expanded .element-faction-dots {
        display: none;
      }
      button.element:focus-visible,
      button.element.is-hovered:not(.is-expanded) {
        outline: none;
        z-index: 2;
        box-shadow: 0 0 0 1px var(--el-accent, var(--color-1));
      }
      .element[data-faction].is-hovered:not(.is-expanded),
      .element[data-faction]:focus-visible:not(.is-expanded) {
        border-color: var(--el-accent);
      }
      .element[data-multi-faction].is-hovered:not(.is-expanded),
      .element[data-multi-faction]:focus-visible:not(.is-expanded) {
        opacity: 0.95;
        box-shadow: none;
      }
      .element[data-multi-faction].is-expanded {
        border: 2px solid transparent;
        background-color: transparent;
        background-origin: border-box;
        background-clip: padding-box, border-box;
        -webkit-background-clip: padding-box, border-box;
        color: var(--el-text);
      }
      button.element:not([data-faction]):not([data-multi-faction]).is-hovered:not(.is-expanded),
      button.element:not([data-faction]):not([data-multi-faction]):focus-visible:not(.is-expanded) {
        border-color: var(--fg-2);
        background-color: var(--bg-4);
      }
      button.element:active {
        opacity: 1;
      }
      .element.is-expanded {
        --w: min(20rem, calc(100vw - 2rem));
        --h: auto;
        min-height: 15rem;
        max-height: min(88vh, 38rem);
        z-index: 10;
        padding: 1.15rem 1.1rem 1.2rem;
        align-items: flex-start;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
        filter: none;
        opacity: 1;
      }
      .element[data-faction].is-expanded {
        border: 1.5px solid var(--el-accent);
        background-color: var(--el-bg);
        color: var(--el-text);
      }
      .element.is-expanded:not([data-faction]):not([data-multi-faction]) {
        border: 1.5px solid var(--fg-2);
        background-color: var(--bg-4);
        color: var(--fg-1);
      }
      .element.is-expanded:active,
      .element.is-expanded:focus,
      .element.is-expanded:focus-visible {
        filter: none;
        opacity: 1;
      }
      #scene-content[data-layout="table"] .element.is-expanded {
        grid-column: 1 / -1;
        justify-self: center;
        scroll-margin-top: calc(var(--header-height) + 0.75rem);
        scroll-margin-bottom: calc(var(--footer-height) + 1.25rem);
      }
      .element-description {
        display: none;
        transform-style: preserve-3d;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
        font-size: 0.85rem;
        line-height: 1.6;
        text-transform: none;
        color: var(--el-text, var(--fg-1));
        justify-self: flex-end;
        margin-top: 0.75rem;
        text-align: left;
        pointer-events: auto;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: 0.2rem;
      }
      .element-info-row {
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        width: 100%;
      }
      .element-info-factions,
      .element-info-playstyles {
        align-items: flex-start;
      }
      .element-info-factions .chip-row {
        gap: 0.4rem;
      }
      .element[data-faction-count]:not([data-faction-count="1"]).is-expanded
        .element-info-factions
        .chip-row {
        gap: 0.45rem;
      }
      .element-info-label {
        flex-shrink: 0;
        color: var(--el-accent, var(--fg-2));
        font-size: 0.75rem;
        line-height: 1.6;
        padding-top: 0.2rem;
        opacity: 0.95;
        min-width: 3.2rem;
      }
      .element-info-label::after {
        content: "：";
      }
      .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.38rem;
        align-items: center;
        min-width: 0;
        flex: 1;
      }
      .faction-chip,
      .playstyle-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.22rem 0.55rem;
        border-radius: 0.28rem;
        font-size: 0.75rem;
        line-height: 1.45;
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
      }
      .faction-chip {
        border: 1px solid var(--chip-border);
        background: var(--chip-bg);
        color: var(--chip-text);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      }
      .faction-chip.is-compact,
      .playstyle-chip.is-compact {
        padding: 0.1rem 0.32rem;
        font-size: 0.52rem;
      }
      .playstyle-chip {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        color: var(--el-text, var(--fg-1));
      }
      .meta-empty {
        font-size: 0.58rem;
        color: var(--fg-3);
        opacity: 0.7;
      }
      .element-quote {
        margin-top: 0.65rem;
        padding-top: 0.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--el-text, var(--fg-1));
        font-size: 0.85rem;
        line-height: 1.8;
        width: 100%;
        flex-shrink: 0;
      }
      .element-quote-text {
        display: block;
        font-style: italic;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
      }
      .element-quote-author {
        display: block;
        margin-top: 0.45rem;
        font-style: normal;
        font-size: 0.72rem;
        opacity: 0.9;
        text-align: right;
      }
      .element-photo-wrap {
        display: none;
        width: 100%;
        margin: 0.5rem 0 0.35rem;
        border-radius: 0.35rem;
        overflow: hidden;
        max-height: 10rem;
      }
      .element-photo-wrap:not([hidden]) {
        display: block;
      }
      .element-photo {
        width: 100%;
        height: auto;
        max-height: 10rem;
        object-fit: cover;
        display: block;
      }
      .element-avatar-img {
        width: 1.45rem;
        height: 1.45rem;
        border-radius: 0.25rem;
        object-fit: cover;
        display: block;
      }
      .element.has-avatar .element-symbol {
        margin-top: 0;
        margin-bottom: 0.1rem;
      }
      .element.is-expanded .element-avatar-img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.35rem;
      }
      .element.is-expanded .element-description {
        display: block;
      }
      .element-symbol {
        transform-style: preserve-3d;
        margin-top: -0.1rem;
        margin-bottom: 0.2rem;
        font-size: 1.5rem;
        font-weight: 700;
        pointer-events: none;
      }
      .element.is-expanded .element-symbol {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1rem;
        text-align: left;
      }
      .element-title {
        display: none;
        transform-style: preserve-3d;
        font-size: 0.5rem;
        font-weight: 700;
        text-align: center;
        pointer-events: none;
      }
      .element.is-expanded .element-title {
        display: block;
        font-size: 1.55rem;
        text-align: left;
        margin-top: 0.55rem;
        line-height: 1.35;
        word-break: break-word;
      }
      .element-number {
        transform-style: preserve-3d;
        font-size: 0.5rem;
        text-align: right;
        align-self: flex-end;
        pointer-events: none;
      }
      .element.is-expanded .element-number {
        position: absolute;
        font-size: 1rem;
        top: 1rem;
        right: 1rem;
      }
      #scene-content[data-layout="sphere"] .element,
      #scene-content[data-layout="helix"] .element,
      #scene-content[data-layout="grid"] .element {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: calc(var(--w) * -0.5);
        margin-top: calc(var(--h) * -0.5);
      }
      #scene-content[data-layout="table"] .element {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        transform: none !important;
      }
      @media (max-width: 639px) {
        body[data-layout-mode="table"] #scene {
          padding-bottom: calc(var(--footer-height) + 2.5rem);
        }
        #scene-content[data-layout="table"] {
          padding-bottom: calc(var(--footer-height) + 2rem);
        }
        #scene-content[data-layout="table"] .element.is-expanded {
          margin-bottom: 1.5rem;
          scroll-margin-bottom: calc(var(--footer-height) + 2rem);
        }
        .element.is-expanded {
          --w: calc(100vw - 0.75rem);
          min-height: 22rem;
          max-height: 92vh;
          padding: 1.35rem 1.15rem 1.4rem;
        }
        .element-description {
          font-size: 1.02rem;
          gap: 0.9rem;
          margin-top: 0.9rem;
        }
        .element-info-row {
          gap: 0.65rem;
          flex-direction: column;
        }
        .element-info-label {
          font-size: 0.92rem;
          padding-top: 0;
          min-width: 0;
        }
        .chip-row {
          gap: 0.45rem;
        }
        .faction-chip,
        .playstyle-chip {
          font-size: 0.92rem;
          padding: 0.32rem 0.7rem;
          line-height: 1.5;
        }
        .element-quote {
          font-size: 1.05rem;
          line-height: 1.9;
          margin-top: 0.85rem;
          padding-top: 0.75rem;
        }
        .element-quote-author {
          font-size: 0.95rem;
          margin-top: 0.55rem;
        }
        .element.is-expanded .element-title {
          font-size: 1.85rem;
          margin-top: 0.65rem;
        }
        .element.is-expanded .element-number {
          font-size: 1.05rem;
        }
        .element.is-expanded .element-avatar-img {
          width: 3.25rem;
          height: 3.25rem;
        }
        .element-photo-wrap:not([hidden]) {
          max-height: 13rem;
        }
        .element-photo {
          max-height: 13rem;
        }
        .credits {
          font-size: 0.65rem;
        }