.opening__next__name, .opening__search__result__title {
  font-family: Roboto, sans-serif;
  font-weight: 300;
}

.opening__search__result__title, .opening__config__form group input:checked + label, group.radio label, group.radio .label {
  box-shadow: inset 0 1px 3px -2px #737373, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 3)/.8), 0 1px 3px 0 #0003;
}

:where(html.light) .opening__search__result__title {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

:where(html.light) .opening__config__form group input:checked + label {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

.opening__config__form group :where(html.light) input:checked + label {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

:where(html.light) group.radio label {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

group.radio :where(html.light) label {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

:where(html.light) group.radio .label {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

group.radio :where(html.light) .label {
  box-shadow: inset 0 3px 3px -2px #fff6, inset 0 -4px 8px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 1px 3px 0 #0000002e;
}

.opening__search__result__title, .opening__config__form group input:checked + label, group.radio label, group.radio .label {
  background: linear-gradient(to bottom, var(--c-metal-top), var(--c-metal-bottom));
  text-shadow: .5px .5px 0 rgb(from var(--c-dimmer) r g b/calc(alpha * .8)) !important;
}

.opening__search__result__title:hover:not(.disabled, :disabled, [disabled]), .opening__config__form group input:checked + label:hover:not(.disabled, :disabled, [disabled]), group.radio label:hover:not(.disabled, :disabled, [disabled]), group.radio .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #0000003d;
}

:where(html.light) .opening__search__result__title:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

:where(html.light) .opening__config__form group input:checked + label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

.opening__config__form group :where(html.light) input:checked + label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

:where(html.light) group.radio label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

group.radio :where(html.light) label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

:where(html.light) group.radio .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

group.radio :where(html.light) .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #00000036;
}

.opening__search__result__title:hover:not(.disabled, :disabled, [disabled]), .opening__config__form group input:checked + label:hover:not(.disabled, :disabled, [disabled]), group.radio label:hover:not(.disabled, :disabled, [disabled]), group.radio .label:hover:not(.disabled, :disabled, [disabled]) {
  background: linear-gradient(to bottom, var(--c-metal-top-hover), var(--c-metal-bottom-hover));
}

:where(html.transp) .opening__search__result__title:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

:where(html.transp) .opening__config__form group input:checked + label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

.opening__config__form group :where(html.transp) input:checked + label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

:where(html.transp) group.radio label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

group.radio :where(html.transp) label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

:where(html.transp) group.radio .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

group.radio :where(html.transp) .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 1px 3px -2px var(--c-border-light), inset 0 -5px 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 5)/.8), 0 2px 4px 0 #00000026;
}

:where(html.light) :where(html.transp) .opening__search__result__title:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

:where(html.light) :where(html.transp) .opening__config__form group input:checked + label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

.opening__config__form group :where(html.light) :where(html.transp) input:checked + label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

:where(html.light) :where(html.transp) group.radio label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

group.radio :where(html.light) :where(html.transp) label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

:where(html.light) :where(html.transp) group.radio .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

group.radio :where(html.light) :where(html.transp) .label:hover:not(.disabled, :disabled, [disabled]) {
  box-shadow: inset 0 4px 3px -2px #fff6, inset 0 -5px 8 16px -3px hsl(from var(--c-body-gradient) h s calc(l + 7)/.8), 0 2px 4px 0 #0000001f;
}

group.radio input:checked + label:not(.disabled):hover, group.radio input:checked + label {
  box-shadow: inset 0 3px 4px #00000026 !important;
}

group.radio input:checked + label {
  background: var(--c-accent);
  color: #fff;
  text-shadow: 0 1px 1px #000 !important;
}

@media (hover: hover) {
  group.radio input:checked + label:not(.disabled):hover {
    background: hsl(from var(--c-accent) h s calc(l + 5));
  }
}

.opening__next__name {
  white-space: nowrap;
}

.opening__wiki__markup {
  overflow-wrap: break-word;
  word-break: normal;
}

.opening__next__name {
  text-overflow: ellipsis;
  overflow: hidden;
}

group.radio input {
  position: absolute;
  inset-inline-start: -99999px;
}

group.radio {
  flex-flow: wrap;
  display: flex;
}

.opening h1, .opening__panels .tab-list, .opening__search-config {
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

group.radio label, group.radio .label {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.opening__wiki__editor__summary {
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.opening__next__title {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.opening__wiki__editor form, .opening__next, .opening__search__result, .opening__intro__content, .result-bar {
  flex-flow: column;
  display: flex;
}

.opening__tree > details > details > details > summary:hover, .opening__tree > details > details > summary, .opening__tree > details > details, .opening__tree > details > summary, .opening__panels .tab-list__tab, .opening__tree > details, .opening__wiki__editor__summary .priority, .opening__wiki, .opening__next, .opening__search__result, group.radio, .opening__error, .opening__warning, .opening__beta, .opening__config, .lpv {
  border-radius: var(---ui-roundness, 7px);
}

.lpv {
  overflow: hidden;
}

.opening__search-form input, .opening__intro__result {
  border-radius: var(---ui-roundness, 7px) 0 0 var(---ui-roundness, 7px);
}

.opening__search-form .button {
  border-radius: 0 var(---ui-roundness, 7px) var(---ui-roundness, 7px) 0;
}

.opening__tree details[open] > summary {
  border-radius: var(---ui-roundness, 7px) var(---ui-roundness, 7px) 0 0;
}

.opening__intro .lpv cg-board {
  border-radius: 0 var(---ui-roundness, 7px) 0 0;
}

.opening__intro__result, .lpv, .opening__tree > details, .opening__wiki__editor__summary .priority, .opening__wiki, .opening__next, .opening__search__result, group.radio {
  box-shadow: 0 2px 2px #00000014, 0 3px 1px -2px #0000002e, 0 1px 5px #0000001a;
}

:where(html.transp) .opening__error {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__warning {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__beta {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__config {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.opening__error, .opening__warning, .opening__beta, .opening__config {
  border: 1px solid var(--c-border);
}

:where(html.transp) .opening__tree > details {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__wiki__editor__summary .priority {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.opening__wiki__editor__summary :where(html.transp) .priority {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__wiki {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__next {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .opening__search__result {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) group.radio {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:where(html.transp) .lpv {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lpv__fbt {
  color: var(--c-lpv-font, #aaa);
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  background: none;
  border: none;
  outline: none;
  align-items: normal;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.5;
  text-decoration: none;
}

@media (hover: hover) {
  .lpv__fbt:hover:not(.disabled, [disabled]) {
    background: var(--c-lpv-fbt-hover, lpv-fbt-hover);
    color: #fff;
  }
}

.lpv__fbt.active {
  color: #fff;
  background: var(--c-lpv-accent, #629924) !important;
}

.lpv__fbt.disabled, .lpv__fbt[disabled] {
  pointer-events: none;
  opacity: .4;
  cursor: default;
}

.opening__next__board .cg-wrap, .lpv__board .cg-wrap {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  display: block;
  position: relative;
}

.lpv__sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  left: -10000px;
  overflow: hidden;
}

.lpv {
  --controls-height: 4em;
  row-gap: 0;
  display: grid;
  overflow: hidden;
}

.lpv--controls-false {
  --controls-height: 0;
}

.lpv--moves-false {
  grid-template-areas: "board"
                       "controls";
  grid-template-columns: minmax(200px, calc(100vh - var(--controls-height)));
  grid-template-rows: auto var(--controls-height);
}

.lpv--moves-right {
  grid-template-columns: auto fit-content(40%);
  grid-template-areas: "board side"
                       "controls side";
  grid-template-rows: auto var(--controls-height);
}

.lpv--moves-bottom {
  grid-template-areas: "board"
                       "controls"
                       "side";
  grid-template-rows: auto var(--controls-height) 6em;
}

.lpv--moves-bottom .lpv__controls {
  border-bottom: 1px solid var(--c-lpv-border, #404040);
}

.lpv--moves-auto {
  grid-template-areas: "board side"
                       "controls side";
  grid-template-columns: minmax(200px, calc(100vh - var(--controls-height))) minmax(232px, 1fr);
  grid-template-rows: auto var(--controls-height);
}

@media (max-width: 450px) {
  .lpv--moves-auto {
    grid-template-areas: "board"
                         "controls"
                         "side";
    grid-template-columns: minmax(200px, calc(100vh - var(--controls-height) - 6em));
    grid-template-rows: auto var(--controls-height) 6em;
  }
}

.lpv--players.lpv--moves-false {
  grid-template-areas: "player-top"
                       "board"
                       "player-bot"
                       "controls";
  grid-template-rows: 2em auto 2em var(--controls-height);
}

.lpv--players.lpv--moves-right {
  grid-template-areas: "player-top side"
                       "board side"
                       "player-bot side"
                       "controls side";
  grid-template-rows: 2em auto 2em var(--controls-height);
}

.lpv--players.lpv--moves-bottom {
  grid-template-areas: "player-top"
                       "board"
                       "player-bot"
                       "controls"
                       "side";
  grid-template-rows: 2em auto 2em var(--controls-height) 6em;
}

.lpv--players.lpv--moves-bottom .lpv__controls {
  border-bottom: 1px solid var(--c-lpv-border, #404040);
}

.lpv--players.lpv--moves-auto {
  grid-template-areas: "player-top side"
                       "board side"
                       "player-bot side"
                       "controls side";
  grid-template-columns: minmax(200px, calc(100vh - 2 * 2em - var(--controls-height))) minmax(232px, 1fr);
  grid-template-rows: 2em auto 2em var(--controls-height);
}

@media (max-width: 450px) {
  .lpv--players.lpv--moves-auto {
    grid-template-areas: "player-top"
                         "board"
                         "player-bot"
                         "controls"
                         "side";
    grid-template-columns: minmax(200px, calc(100vh - 2 * 2em - var(--controls-height) - 6em));
    grid-template-rows: 2em auto 2em var(--controls-height) 6em;
  }
}

.lpv__board {
  grid-area: board;
}

.lpv__side {
  grid-area: side;
}

.lpv__player--top {
  grid-area: player-top;
}

.lpv__player--bottom {
  grid-area: player-bot;
}

.lpv__controls {
  grid-area: controls;
}

.lpv__menu, .lpv__pgn {
  grid-area: 1 / 1 / 2 / 2;
}

.lpv--players .lpv__menu, .lpv--players .lpv__pgn {
  grid-area: 1 / 1 / 4 / 2;
}

.lpv__side {
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.lpv__moves {
  background: var(--c-lpv-bg-movelist, #302e2c);
  will-change: scroll-position;
  -webkit-user-select: none;
  user-select: none;
  flex-flow: wrap;
  flex: 1 1 0;
  align-content: flex-start;
  align-items: center;
  min-width: 20ch;
  line-height: 1.7;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.lpv__moves index {
  color: var(--c-lpv-font-shy, #6d6c6b);
}

.lpv__moves > index {
  flex: 0 0 15%;
  justify-content: flex-end;
  margin-right: 3%;
  display: flex;
}

.lpv__moves .move {
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: inherit;
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 3px;
  outline: none;
  margin: 0;
  padding: 4px 0 6px 3%;
  font-weight: bold;
}

.lpv__moves .move nag.repetition {
  margin-left: .3em;
}

.lpv__moves .move.empty {
  color: var(--c-lpv-font-shy, #6d6c6b);
}

.lpv__moves .move:not(.empty):hover {
  background: var(--c-lpv-move-hover, #3f4e29);
  color: var(--c-lpv-accent-over, white);
  cursor: pointer;
}

.lpv__moves .move.ancestor {
  color: var(--c-lpv-past-moves, #aaa);
}

.lpv__moves .move.current {
  background: var(--c-lpv-current-move, #537926);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.inaccuracy {
  color: var(--c-lpv-inaccuracy, #53b2ea);
}

.lpv__moves .move.inaccuracy.current {
  background: var(--c-lpv-bg-inaccuracy-current, #41708b);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.inaccuracy:hover, .lpv__moves .move.inaccuracy.current:hover {
  background: var(--c-lpv-bg-inaccuracy-hover, #3a5665);
}

.lpv__moves .move.mistake {
  color: var(--c-lpv-mistake, #e69d00);
}

.lpv__moves .move.mistake.current {
  background: var(--c-lpv-bg-mistake-current, #8b6616);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.mistake:hover, .lpv__moves .move.mistake.current:hover {
  background: var(--c-lpv-bg-mistake-hover, #67501f);
}

.lpv__moves .move.blunder {
  color: var(--c-lpv-blunder, #df5353);
}

.lpv__moves .move.blunder.current {
  background: var(--c-lpv-bg-blunder-current, #88413f);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.blunder:hover, .lpv__moves .move.blunder.current:hover {
  background: var(--c-lpv-bg-blunder-hover, #653937);
}

.lpv__moves .move.good {
  color: var(--c-lpv-good-move, #5ddf73);
}

.lpv__moves .move.good.current {
  background: var(--c-lpv-bg-good-current, #47874f);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.good:hover, .lpv__moves .move.good.current:hover {
  background: var(--c-lpv-bg-good-hover, #3e6341);
}

.lpv__moves .move.brilliant {
  color: var(--c-lpv-brilliant, #21c43a);
}

.lpv__moves .move.brilliant.current {
  background: var(--c-lpv-bg-brilliant-current, #297933);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.brilliant:hover, .lpv__moves .move.brilliant.current:hover {
  background: var(--c-lpv-bg-brilliant-hover, #2c5b30);
}

.lpv__moves .move.interesting {
  color: var(--c-lpv-interesting, #f075e1);
}

.lpv__moves .move.interesting.current {
  background: var(--c-lpv-bg-interesting-current, #905287);
  color: var(--c-lpv-accent-over, white);
}

.lpv__moves .move.interesting:hover, .lpv__moves .move.interesting.current:hover {
  background: var(--c-lpv-bg-interesting-hover, #6a4462);
}

.lpv__moves > .move {
  flex: 0 0 41%;
  font-size: 1.1em;
}

.lpv__moves comment {
  -webkit-user-select: text;
  user-select: text;
  font-size: .9em;
}

.lpv__moves comment.result {
  text-align: center;
  font-weight: bold;
}

.lpv__moves > comment {
  background: var(--c-lpv-bg-variation, #282724);
  border: 1px solid var(--c-lpv-side-border, #23221f);
  overflow-wrap: break-word;
  word-break: break-word;
  border-width: 1px 0;
  flex: 100%;
  padding: .4em 1em;
  line-height: 1.4;
}

.lpv__moves > comment + variation, .lpv__moves > comment + comment {
  border-top: none;
}

.lpv__moves > variation {
  background: var(--c-lpv-bg-variation, #282724);
  border: 1px solid var(--c-lpv-side-border, #23221f);
  border-width: 1px 0;
  flex: 100%;
  padding: 0 .6em;
  font-size: .8em;
  display: block;
  overflow: hidden;
}

.lpv__moves > variation + variation {
  border-top: none;
}

.lpv__moves > variation .move {
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  background: none;
  border: none;
  outline: none;
  min-width: 2.5ch;
  margin: 0;
  padding: .1em .2em;
  display: inline-block;
}

.lpv__moves > variation .move + index {
  margin-left: .2em;
}

.lpv__moves > variation index {
  margin: 0;
  padding: .1em 0;
}

.lpv__moves > variation index + .move {
  margin-left: .1em;
}

.lpv__moves > variation comment {
  align-self: center;
  margin: 0 .3em;
}

.lpv__moves > variation paren {
  color: var(--c-lpv-font-shy, #6d6c6b);
}

.lpv__moves > variation paren.open {
  margin: 0 .1em 0 .2em;
}

.lpv__moves > variation paren.close {
  margin: 0 .2em 0 .1em;
}

.lpv__player {
  background: var(--c-lpv-bg-player, #302e2c);
  flex-flow: row;
  padding: 0 1em;
  font-size: .8em;
  display: flex;
}

.lpv__player--bottom {
  border-bottom: 1px solid var(--c-lpv-border, #404040);
}

.lpv--controls-false .lpv__player--bottom {
  border-bottom: none;
}

.lpv__player__person {
  color: var(--c-lpv-font, #aaa);
  flex-flow: row;
  flex: auto;
  align-items: center;
  gap: 1ch;
  text-decoration: none;
  display: flex;
}

.lpv__player__title {
  font-weight: bold;
}

.lpv__player__clock {
  flex-flow: row;
  align-items: center;
  font-family: monospace;
  font-size: 1.4em;
  font-weight: bold;
  display: flex;
}

.lpv__player__clock.active {
  color: var(--c-lpv-accent, #629924);
}

.lpv__pane {
  z-index: 2;
  border-bottom: 2px solid var(--c-lpv-accent, #629924);
  background: var(--c-lpv-bg-pane, #383e2a);
  flex-flow: column;
  justify-content: center;
  display: flex;
}

.lpv__pane .lpv__fbt {
  text-align: left;
  padding: .8em 2.5em;
  transition: none;
}

.lpv__pane .lpv__fbt:before {
  color: var(--c-lpv-accent, #629924);
  font-size: 2em;
}

.lpv__pane .lpv__fbt:hover:before {
  color: var(--c-lpv-accent-over, white);
}

.lpv__pgn__text {
  background: var(--c-lpv-pgn-text, #32332b);
  color: var(--c-lpv-font, #aaa);
  flex: auto;
  padding: .8em 1.3em;
  font-family: monospace;
  font-size: .8em;
}

.lpv__controls {
  -webkit-user-select: none;
  user-select: none;
  background: var(--c-lpv-bg-controls, #302e2c);
  flex-flow: row;
  align-items: stretch;
  display: flex;
}

.lpv__controls .lpv__fbt {
  border-left: 1px solid var(--c-lpv-border, #404040);
  flex: auto;
  padding: .4em .7em;
  font-size: 1.4em;
}

.lpv__controls .lpv__fbt:first-child {
  border: none;
}

.lpv__controls__menu.lpv__fbt {
  flex: 0 auto;
  width: 4em;
  padding: .45em 1em .35em;
  font-size: 1.1em;
}

.lpv__controls__goto {
  padding: .4rem .7rem;
}

.lpv ::-webkit-scrollbar {
  background: var(--c-lpv-bg, #302e2c);
  width: .5rem;
}

.lpv ::-webkit-scrollbar-corner {
  background: var(--c-lpv-bg, #302e2c);
  width: .5rem;
}

.lpv ::-webkit-scrollbar-thumb {
  background: var(--c-lpv-font-bg, #494745);
}

.lpv ::-webkit-scrollbar-thumb:hover {
  background: var(--c-lpv-font-shy, #6d6c6b);
}

.lpv ::-webkit-scrollbar-thumb:active {
  background: var(--c-lpv-font-shy, #6d6c6b);
}

@font-face {
  font-family: lpv-fontello;
  src: url("data:application/octet-stream;base64,d09GRgABAAAAAA1QAA8AAAAAF6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADsAAABUIIslek9TLzIAAAGUAAAARAAAAGA+I1HhY21hcAAAAdgAAABnAAABsOPJ9stjdnQgAAACQAAAAAsAAAAOAAAAAGZwZ20AAAJMAAAG7QAADgxiLvl6Z2FzcAAACTwAAAAIAAAACAAAABBnbHlmAAAJRAAAAS4AAAGiqJyODGhlYWQAAAp0AAAALwAAADYhJY5FaGhlYQAACqQAAAAdAAAAJAc9A1hobXR4AAAKxAAAABcAAAAYDTgAAGxvY2EAAArcAAAADgAAAA4BTwC6bWF4cAAACuwAAAAgAAAAIADgDmhuYW1lAAALDAAAAXQAAALNzZ0ZGnBvc3QAAAyAAAAAUwAAAG+eRru9cHJlcAAADNQAAAB6AAAAnH62O7Z4nGNgZGBg4GIwYLBjYHJx8wlh4MtJLMljkGJgYYAAkDwymzEnMz2RgQPGA8qxgGkOIGaDiAIAJjsFSAB4nGNgYTJhnMDAysDAVMW0h4GBoQdCMz5gMGRkAooysDIzYAUBaa4pDAdeMHx0Yg76n8UQxbyGYRpQmBFFERMAYwYMinic7ZGxEYAgEAT3BQwcSjGyBGJrMLL4T61A74EyvJnl5o+B4B4oQBK7yGA3RuhSaj1PbD3PHJpXubF4etr7gjNcMt3V7ove5PjZVn7Vfp5zKtHZIPr1iTrDJ7EPn8ROnjagfDLqFF4AeJxjYEAGAAAOAAEAeJytV2tbG8cVntUNjAEDQtjNuu4oY1GXHckkcRxiKw7ZZVEcJanAuN11brtIuE2TXpLe6DW9X5Q/c1a0T51v+Wl5z8xKAQfcp89TPui8M/POnOucWUhoSeJ+FMZSdh+J+Z0uVe49iOiGS9fi5KEc3o+o0Eg/mxbTot9X+269TiImEaitkXBEkPhNcjTJ5GGTClrVVb1JRS0HR8XlmvADqgYySfyssBz4WaMYUCHYO5Q0qwCCdECl3uGoUCjgGKofXK7z7Gi+5viXJaDyR1WnijVFohcdxKMVp2AUljQVPaoFEeujlSDICa4cSPq8R6XVB6NrzlwQ9kOqhFGdio14960IZHcYSer1MLUJNm0w2ohjmVk2LLqGqXwkaZ3X15n5eS+SiMYwlTTTixLMSF6bYXST0c3ETeI4dhEtmg36JHYjEl0m1zF2u3SF0ZVu+mhB9JnxqCz243iQxuR4cZx7EMsB/FF+3KSylrCg1Ejh01TQi2hK+TStfGQAW5ImVUy4EQk5yKb2fcmL7K5rzedfEknYp/JaHYuBHMohdGXr5QYitBMlPTfdjSMV12NJm/cirLkcl9yUJk1pOhd4I1GwaZ7GUPkK5aL8lAr7D8npwxCaWmvSOS3Z2nm4VRL7kk+gzSRmSrJlrJ3Ro3PzIgj9tfqkcM7rk4U0a09xPJgQwPVEhkOVclJNsIXLCSHpwsixlUitSresirkzttNV7BLul64d3zSvjUNHc7OiGEKLq+rxGor4gs4KhZAG6VaTFjSoUtKF4DU+AAAZogUe7WK0YPK1iIMWTFAkYtCHZloMEjlMJC0ibE1a0t29KCsNtuKrNHegDptU1d2dqHvPTrp1zFfN/LLOxFJwP8qWlgJyUp8WPb5yKC0/u8A/C/ghZwW5KDZ6Ucbhg7/+EBmG2oW1usK2MXbtOm/BTeaZGJ50YH8HsyeTdUYKMyGqCvFCQd0ZOY5jslXTIhOFcC+iJeXLkOZRfnOIcOLL5D+XLjliUVSF7/scgWWsOWm2PO3Rp577NMK1Ah9rXpMu6sxheQnxZvk1nRVZPqWzEktXZ2WWl3VWYfl1nU2xvKKzaZbf0Nk5lp5W4/hTJUGklWyR8w7flibpY4srk8WP7GLz2OLqZPFjuyi1oAvemX7CqX9bV9nP4/7V4Z+EXU/DP5YK/rG8Cv9YNuAfy1X4x/Kb8I/lNfjH8lvwj+Ua/GPZ0rJtCva6htpLiUTTc5LApBSXsMU1u67pukfXcR+fwVXoyDOyqdINxY39iQyXvX92nOJsvhJyxdEza1nZqYURmiJ7+dyx8JzFuaHl88by53Ga5YRf1Ylre6otPC9W/iX4b+uO2shuODX29SbiAQdOtx+XJd1o0gu6dbHdpI3/RkVh90F/ESkSKw3Zkh1uCQjt3eGwozroIREePnRdvEgbjlNbRoRvoXet0EXQSminDUPLZoVP5wPvYNhSUraHOPP2SZps2fOoovwxW1LCPWVzJzoqybJ0j0qr5adinzvtDJq2MjvUdkKV4PHrmnC3s69SKUgGisp4VLFcClIXOOFO9/ieFKah/6tt5FhBwza/WDOB0YLzTlGibE+toIkgGWUUXPkrp+JENqLBRhTxm3fSL3WhENrjWEjMllfzWKg2wvTSZIlmzPq26rBSzuKdSQjZGRtpEntRS7bxoLP1+aRku/JUUKWB0d3j3y42iadVe54txSX/8jFLgnG6Ev7AedzlcYo30T9aHMVtuhhEPRdvqmzHrWzdWca9feXE6q7bO7Hqn7r3STsCTbe8Jync0nTbG8I2rjE4dSYVCW3ROnaExmWuz1Ub+RQfaL51nQtU4fq0cPPs+ds6m8FbM97yP5Z05/9VxewT97G2Qqs6Vi/1OLezgwZ8yxtH5VWMbnt1lccl92YSgrsIQc1ee3yN4IZXW3QTt/y1M+a7OM5ZrtILwK9rehHiDY5iiHDLbTy842i9qbmg6Q3Ab+uRENsAPQCHwY4eOWZmF8DM3GNOB2CPOQzuM4fBd5jD4Lv6CL0wAIqAHINifeTYuQdAdu4t5jmM3maeQe8wz6B3mWfQe6wzBEhYJ4OUdTLYZ50M+sx5FWDAHAYHzGHwkDkMvmfs2gL6vrGL0fvGLkY/MHYx+sDYxehDYxejHxq7GP3I2MXox4hxe5LAn5gRbQJ+ZOErgB9z0M3Ix+ineGtzzs8sZM7PDcfJOb/A5pcmp/7SjMyOQwt5x68sZPqvcU5O+I2FTPithUz4Hbh3Juf93owM/RMLmf4HC5n+R+zMCX+ykAl/tpAJfwH35cl5fzUjQ/+bhUz/u4VM/wd25oR/WsiEoYVM+FSPzpsvW6q4o1KhGOKfJrTB2Pdo+oCKV3uH48e6+QUl2gFBAAAAAAEAAf//AA94nHWPsUrDUBSGz39vemOxIFdNoqI1WLBIBCExhuDSBxAUFzvZbgXb2S2j4AOkS6e6dRQEX6FPoD6Cm7tDr57EQrt4z3DPf87//XAIRD+feBVvZNNOy7MFyALhggj0QMC93hBqK4g1dKQbGmmWKfFspmjP1tEuXAveb+2piiUXvAAHEPHK1lJ5gcMZ4MqQmum2+DITpLMrFpMy5048yms2qxclEAY6gVeFjRzd3Dyhk5sxboflb8Y8XGJUwUhmnCqYArqlIzc1gW6JD02NJPu/6UOu0hrt0wkdt46oQpasWD3eCUjRKzJxw3dTp7jgMi5epNRukDibym4cHDbj0zMvCl3JujnXyVwH+NPnCN33utf36vDdvuvjn340cLlzBsUUammJFRalxf8FEfdQoAAAeJxjYGRgYADiu6a5L+L5bb4y8DO/AIow3OdVDULQ/7OYXzCD+BwMTCBRADnrCnwAeJxjYGRgYA76nwUkXzAw/P8PJIEiKIANAIfPBZsAAAB4nGN+wcDAuBWCmTogmOEaAwMAOaAEQgAAAAAAACAARABeAHYA0QAAAAEAAAAGADAAAwAAAAAAAgAMACoAjQAAAD0ODAAAAAB4nHWQ307CMBSHf+WfCokaTby1VwZiHLDEGxISEgzc6A0x3JoxxjYyVtIVEl7Dd/BhfAmfxR9bMUbilq7f+Xp62h0AV/iCQPE8chQscMqo4BJO0Ldcpn+yXCE/W66igVfLNfo3y3XcI7TcwDXeWUFUzhgt8WFZ4FJcWC7hXNxaLtM/WK6Q+5aruBEvlmv0vuU6piKz3MCd+Byq9U7HYWRkc9iSbsd15WwnFVWceon0NiZSOpMDuVCpCZJEOb5aHXgShJvE04fwME8DncUqlV2nc1DjIA20Z4L5vnq2DV1jFnKh1UqObIZca7UMfONExqx77fbv8zCEwho7aMRsVQQDiSZti7OLDodLmjFDMrPIipHCQ0LjYcMdUb6SMR5wLBiltAEzErIDn9/VkZ+QQu5PWEUfrf6Np6T9GXHuJbqs2znKGpPSPNPL7fzn7hm2PM2lNdy1v6XObyUx+lNDsh/7tSWNT+/kXTG0PbT5/vN/39pdhEl4nG3HQQ6AIAwAwRYVI5Gn8CjEokQipBD9vlGuzmkXBDQK/kkU2GGPA0ocYS6VsvGJb8ur/max7nhviuSrSZlOxWHbW2qKMeQSirmIK8ADCpgXTQB4nGPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdidNjIwaEFoLhR6JwMDAzcSaycDMwODy0YVxo7AiA0OHREgforLRg0QfwcHA0SAwSVSeqM6SGgXRwMDI4tDR3IITAIENjLwae1g/N+6gaV3IxODy2bWFDYGFxcAlBwqBwAA") format("woff"), url("data:application/octet-stream;base64,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") format("truetype");
}

.lpv__icon:before {
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1em;
  font-family: lpv-fontello;
  font-size: 1.1em;
}

.lpv__icon-step-forward:before {
  content: "";
}

.lpv__icon-step-backward:before {
  content: "";
}

.lpv__icon-left-open:before {
  content: "";
}

.lpv__icon-right-open:before {
  content: "";
}

.lpv__icon-ellipsis-vert:before {
  content: "";
}

.lpv {
  background: var(--c-lpv-bg, #302e2c);
  color: var(--c-lpv-font, #aaa);
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 2px #00000024, 0 3px 1px -2px #0003, 0 1px 5px #0000001f;
}

.lpv *, .lpv :before, .lpv :after {
  box-sizing: inherit;
}

.lpv__board {
  -webkit-user-select: none;
  user-select: none;
}

.lpv__board cg-board {
  box-shadow: none;
}

.lpv:focus {
  outline: auto 2px var(--c-lpv-accent, #629924);
}

.lpv {
  --c-lpv-accent: var(--c-primary);
  --c-lpv-bg: var(--c-bg-zebra);
  --c-lpv-bg-player: var(--c-lpv-bg);
  --c-lpv-bg-controls: var(--c-lpv-bg);
  --c-lpv-bg-movelist: var(--c-lpv-bg);
  --c-lpv-bg-variation: var(--c-bg-zebra2);
  --c-lpv-bg-pane: rgb(from var(--c-bg-zebra2) r g b/calc(alpha * .95));
  --c-lpv-pgn-text: var(--c-bg-zebra2);
  --c-lpv-font: var(--c-font);
  --c-lpv-font-accent: var(--c-font);
  --c-lpv-font-shy: var(--c-font-dim);
  --c-lpv-accent-over: var(--c-over);
  --c-lpv-fbt-hover: color-mix(in oklab, var(--c-primary) 75%, var(--c-bg));
  --c-lpv-font-bg: color-mix(in oklab, var(--c-font) 20%, var(--c-bg));
  --c-lpv-current-move: color-mix(in oklab, var(--c-primary) 70%, var(--c-bg));
  --c-lpv-move-hover: color-mix(in oklab, var(--c-primary) 30%, var(--c-bg));
  --c-lpv-border: var(--c-border);
  --c-lpv-side-border: var(--c-border-page);
  --c-lpv-inaccuracy: var(--c-inaccuracy);
  --c-lpv-mistake: var(--c-mistake);
  --c-lpv-blunder: var(--c-blunder);
  --c-lpv-good-move: var(--c-good);
  --c-lpv-brilliant: var(--c-brilliant);
  --c-lpv-interesting: var(--c-interesting);
  --c-lpv-bg-inaccuracy-hover: color-mix(in oklab, var(--c-inaccuracy) 30%, var(--c-bg));
  --c-lpv-bg-mistake-hover: color-mix(in oklab, var(--c-mistake) 30%, var(--c-bg));
  --c-lpv-bg-blunder-hover: color-mix(in oklab, var(--c-blunder) 30%, var(--c-bg));
  --c-lpv-bg-good-hover: color-mix(in oklab, var(--c-good) 30%, var(--c-bg));
  --c-lpv-bg-brilliant-hover: color-mix(in oklab, var(--c-brilliant) 30%, var(--c-bg));
  --c-lpv-bg-interesting-hover: color-mix(in oklab, var(--c-interesting) 30%, var(--c-bg));
  --c-lpv-bg-inaccuracy-current: color-mix(in oklab, var(--c-inaccuracy) 50%, var(--c-bg));
  --c-lpv-bg-mistake-current: color-mix(in oklab, var(--c-mistake) 50%, var(--c-bg));
  --c-lpv-bg-blunder-current: color-mix(in oklab, var(--c-blunder) 50%, var(--c-bg));
  --c-lpv-bg-good-current: color-mix(in oklab, var(--c-good) 50%, var(--c-bg));
  --c-lpv-bg-brilliant-current: color-mix(in oklab, var(--c-brilliant) 50%, var(--c-bg));
  --c-lpv-bg-interesting-current: color-mix(in oklab, var(--c-interesting) 50%, var(--c-bg));
}

:where(html.transp) .lpv {
  --c-lpv-bg-pane: rgb(from var(--c-body-gradient) r g b/calc(alpha * .85));
}

:where(html.light) .lpv {
  --c-lpv-bg-inaccuracy-current: color-mix(in oklab, var(--c-inaccuracy) 70%, var(--c-bg));
  --c-lpv-bg-mistake-current: color-mix(in oklab, var(--c-mistake) 70%, var(--c-bg));
  --c-lpv-bg-blunder-current: color-mix(in oklab, var(--c-blunder) 70%, var(--c-bg));
  --c-lpv-bg-good-current: color-mix(in oklab, var(--c-good) 70%, var(--c-bg));
  --c-lpv-bg-brilliant-current: color-mix(in oklab, var(--c-brilliant) 70%, var(--c-bg));
  --c-lpv-bg-interesting-current: color-mix(in oklab, var(--c-interesting) 70%, var(--c-bg));
}

.lpv__player__title {
  color: var(--c-brag);
}

.lpv__pane:before {
  content: "";
  z-index: -1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.lpv__pane {
  position: relative;
}

group.radio {
  overflow: hidden;
}

group.radio div {
  flex: auto;
  position: relative;
}

group.radio label, group.radio .label {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  border-inline-end: 1px solid var(--c-border);
  height: 100%;
  padding: 10px;
}

group.radio label.disabled, group.radio .label.disabled {
  background: var(--c-metal-top);
}

:where(html.light) group.radio label.disabled {
  background: var(--c-metal-bottom);
}

:where(html.light) group.radio .label.disabled {
  background: var(--c-metal-bottom);
}

@media (hover: hover) {
  group.radio label:not(.disabled):hover, group.radio .label:not(.disabled):hover {
    background: linear-gradient(to bottom, var(--c-metal-top-hover), var(--c-metal-bottom-hover));
    text-shadow: 0 1px 0 var(--c-font-shadow);
  }
}

group.radio div:last-child label {
  border-inline-end: 0;
}

group.radio input:focus-visible + label {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.result-bar {
  flex: 0 0 2rem;
  font-size: .7em;
}

.result-bar span {
  text-align: center;
  vertical-align: middle;
  border: 0 solid rgb(from var(--c-font) r g b/calc(alpha * .17));
  background-clip: padding-box;
  border-width: 1px 0;
  padding: 3px 0;
  display: inline-block;
  overflow: hidden;
}

.result-bar .white {
  background: #ccc;
}

:where(html.light) .result-bar .white {
  background: #fff;
}

:where(html:not(.light)) .result-bar .white {
  color: #222;
}

.result-bar .draws {
  background: #666;
}

:where(html.light) .result-bar .draws {
  background: #a0a0a0;
}

.result-bar .black {
  background: #333;
}

:where(html.light) .result-bar .black {
  background: #555;
}

.result-bar .black {
  color: #ddd;
}

.opening__title {
  margin-bottom: 3rem;
  flex-flow: row !important;
}

.opening__name {
  font-size: .8em;
  line-height: 1em;
}

.opening__name__section--1 {
  font-size: 1.15em;
}

.opening__name__move {
  font-size: .8em;
}

.opening__intro {
  gap: var(---block-gap);
  flex-flow: column;
  align-items: stretch;
  margin-bottom: 3em;
  display: flex;
}

@media (min-width: 649.3px) {
  .opening__intro {
    flex-flow: row;
    align-items: flex-start;
  }
}

.opening__intro__result-lpv {
  flex: 0 0 100%;
}

@media (min-width: 649.3px) {
  .opening__intro__result-lpv {
    flex: 0 0 calc(300px + 2rem);
  }
}

.opening__intro__result-lpv {
  flex-flow: row;
  align-items: stretch;
  display: flex;
}

.opening__intro__result {
  overflow: hidden;
}

.opening__intro .lpv {
  border-radius: 0 var(---ui-roundness, 7px) var(---ui-roundness, 7px) 0;
  flex: 0 0 calc(100% - 2rem);
}

@media (min-width: 649.3px) {
  .opening__intro .lpv {
    flex: 0 0 300px;
  }
}

.opening__intro__content {
  justify-content: space-between;
  align-self: stretch;
  gap: var(---block-gap);
  flex: auto;
}

.opening__popularity-actions {
  flex-flow: column;
  flex: 0 0 calc(160px - 2vmin);
  align-items: stretch;
  gap: 2em;
  display: flex;
}

@media (min-width: 799.3px) {
  .opening__popularity-actions {
    flex-flow: row;
  }
}

.opening__popularity {
  flex: auto;
  margin-top: -10px;
}

.opening__popularity__chart {
  width: 100%;
  height: calc(160px - 2vmin);
  max-height: calc(160px - 2vmin);
}

.opening__actions {
  flex-flow: row;
  align-items: stretch;
  gap: 2em;
  display: flex;
}

@media (min-width: 799.3px) {
  .opening__actions {
    flex-flow: column;
    flex: none;
    order: 1;
  }
}

.opening__actions .button {
  text-align: start;
  white-space: normal;
  max-width: 17em;
}

.opening__config {
  flex: none;
}

.opening__config[open] {
  flex: 1 0 auto;
}

@media (max-width: 649.29px) {
  .opening__config {
    display: none;
  }
}

@media (min-width: 799.3px) {
  .opening__config {
    flex: 1 0 auto;
  }
}

.opening__config {
  background: var(--c-bg-zebra);
}

.opening__config:hover {
  border: 1px solid color-mix(in oklab, var(--c-accent) 35%, var(--c-bg));
  background: color-mix(in oklab, var(--c-accent) 5%, var(--c-bg-zebra));
}

.opening__config__summary {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: .9em 2em;
}

.opening__config__summary__speed, .opening__config__summary__rating {
  color: var(--c-accent);
}

.opening__config__summary__large {
  display: none;
}

.opening__config[open] .opening__config__summary__large {
  display: inline-block;
}

@media (min-width: 799.3px) {
  .opening__config__summary__large {
    display: inline-block;
  }
}

.opening__config__summary__short {
  display: inline-block;
}

@media (min-width: 799.3px) {
  .opening__config__summary__short {
    display: none;
  }
}

.opening__config[open] .opening__config__summary__short {
  display: none;
}

.opening__config__form {
  padding: 0 2em 1em;
}

.opening__config__form group {
  margin-top: 1em;
}

.opening__config__form group label {
  height: auto;
}

.opening__config__form__submit {
  justify-content: stretch;
  margin-top: 1em;
  display: flex;
}

.opening__config__form__submit button {
  flex: 0 0 100%;
  color: var(--c-accent) !important;
}

.opening__search-config {
  align-items: flex-start;
  gap: 1em;
  margin-bottom: 3em;
}

.opening__search-form {
  flex: 2 auto;
  display: flex;
}

.opening__search-form input {
  flex: 100%;
  font-size: 1.1em;
}

@media (min-width: 499.3px) {
  .opening__search-form input {
    font-size: 1.2em;
  }
}

.opening__search-form .button {
  border-inline-start: 0;
  padding: 0 1.5em;
}

.opening__search__results {
  gap: var(---block-gap);
  margin-bottom: var(---box-padding);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  display: grid;
}

.opening__search__result {
  background: var(--c-bg-zebra);
  outline: 1px solid color-mix(in oklab, var(--c-font) 30%, var(--c-bg));
  cursor: pointer;
  color: var(--c-font);
  overflow: hidden;
}

.opening__search__result:hover {
  outline: 1px solid color-mix(in oklab, var(--c-primary) 60%, var(--c-bg));
  background: color-mix(in oklab, var(--c-primary) 10%, var(--c-bg-zebra));
  box-shadow: 0 0 30px color-mix(in oklab, var(--c-primary) 50%, var(--c-bg));
}

.opening__search__result__title {
  flex: 100%;
  padding: .4em .5em .3em .8em;
  font-size: 1.3em;
}

.opening__search__result__title .opening-name__variation {
  font-size: .8em;
}

.opening__panels .tab-list {
  gap: 1em;
  margin-bottom: 3em;
}

.opening__panels .tab-list__tab {
  color: var(--c-brag);
}

@media (min-width: 649.3px) {
  .opening__panels .tab-list__tab {
    font-size: 1.3em;
  }
}

.opening__panels .tab-list__tab {
  padding: .4em 1em;
}

.opening__panels .tab-list__tab:hover {
  background: color-mix(in oklab, var(--c-brag) 20%, var(--c-bg));
}

.opening__panels .tab-list__tab[aria-selected="true"] {
  background: var(--c-brag);
  color: #fff;
}

.opening__nexts {
  gap: var(---block-gap);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  display: grid;
}

.opening__next {
  background: var(--c-bg-zebra);
  outline: 1px solid color-mix(in oklab, var(--c-font) 30%, var(--c-bg));
  cursor: pointer;
  color: var(--c-font);
  position: relative;
  overflow: hidden;
}

.opening__next:hover {
  outline-color: color-mix(in oklab, var(--c-primary) 60%, var(--c-bg));
  background: color-mix(in oklab, var(--c-primary) 10%, var(--c-bg-zebra));
  box-shadow: 0 0 30px color-mix(in oklab, var(--c-primary) 50%, var(--c-bg));
}

.opening__next:hover piece {
  opacity: .8;
}

.opening__next__name {
  flex: auto;
  margin: 0 0 .2em .5em;
  font-size: 1.3em;
}

.opening__next__san {
  flex: 0 auto;
  margin: -1.2rem .5rem 0 0;
  font-size: 2em;
}

.opening__next__result-board {
  flex-flow: row;
  align-items: stretch;
  display: flex;
}

.opening__next__board {
  flex: 100%;
}

.opening__next__board cg-board {
  box-shadow: none;
  background-color: rgb(from var(--c-bg) r g b/.4);
  background-blend-mode: darken;
}

:where(html.light) .opening__next__board cg-board {
  background-blend-mode: soft-light;
}

.opening__next__board piece {
  opacity: .6;
}

.opening__next__board piece.highlight {
  opacity: 1;
}

.opening__next__popularity {
  flex-flow: row;
  display: flex;
}

.opening__next__popularity span {
  border-radius: 0 0 calc(var(---ui-roundness, 7px) / 2) 0;
  background: var(--c-primary);
  color: var(--c-over);
  text-align: right;
  padding-inline: .5em;
  font-size: .8em;
}

.opening__games {
  gap: var(---block-gap);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  display: grid;
}

.opening__wiki {
  background: var(--c-bg-zebra);
  flex: 2 auto;
  overflow: hidden;
}

.opening__wiki__markup {
  max-height: 220px;
}

@media (min-width: 799.3px) {
  .opening__wiki__markup {
    max-height: 300px;
  }
}

.opening__wiki__markup {
  padding: 1em 2em;
  overflow-y: auto;
}

.opening__wiki__markup strong {
  font-weight: bold;
}

.opening__wiki__markup em {
  font-style: italic;
}

.opening__wiki__markup p, .opening__wiki__markup pre {
  margin: 1em 0;
}

.opening__wiki__markup ol, .opening__wiki__markup ul {
  margin: 1em 0;
  padding-inline-start: 2em;
}

.opening__wiki__markup li ol, .opening__wiki__markup li ul {
  margin: 0;
}

.opening__wiki__markup ol > li {
  list-style: decimal;
}

.opening__wiki__markup ul > li {
  list-style: outside;
}

.opening__wiki__markup li p {
  vertical-align: top;
  margin-top: 0;
  display: inline-block;
}

.opening__wiki__markup h1 {
  margin: 0;
  font-size: 1em;
}

.opening__wiki__markup h2:not(:first-child) {
  margin-top: .9em;
}

.opening__wiki__markup h2 {
  border-bottom: 1px solid var(--c-brag);
  padding-bottom: .25em;
  line-height: 1.5em;
}

.opening__wiki__markup h3 {
  font-size: 18px;
}

@media (min-width: 300px) {
  .opening__wiki__markup h3 {
    font-size: calc(1vw + 15px);
  }
}

@media (min-width: 1200px) {
  .opening__wiki__markup h3 {
    font-size: 27px;
  }
}

.opening__wiki__markup h3 {
  margin: .8em 0 .5em;
  font-weight: bold;
}

.opening__wiki__markup h3:first-child {
  margin-top: 0;
}

.opening__wiki__markup h4 {
  font-size: 17px;
}

@media (min-width: 300px) {
  .opening__wiki__markup h4 {
    font-size: calc(.666667vw + 15px);
  }
}

@media (min-width: 1200px) {
  .opening__wiki__markup h4 {
    font-size: 23px;
  }
}

.opening__wiki__markup h2 a[id], .opening__wiki__markup h3 a[id], .opening__wiki__markup h4 a[id] {
  opacity: 0;
}

.opening__wiki__markup h2 a[id]:before, .opening__wiki__markup h3 a[id]:before, .opening__wiki__markup h4 a[id]:before {
  color: var(--c-font-dimmer);
  content: "";
  width: 3rem;
  margin-left: -3rem;
  font-family: lichess;
  position: absolute;
}

.opening__wiki__markup h2:hover a[id], .opening__wiki__markup h3:hover a[id], .opening__wiki__markup h4:hover a[id] {
  opacity: 1;
}

.opening__wiki__markup img {
  max-width: 100%;
  max-height: 50vh;
  margin: auto;
  display: block;
}

.opening__wiki__markup table {
  margin: 1em 0;
}

.opening__wiki__markup th[align="left"], .opening__wiki__markup td[align="left"] {
  text-align: left;
}

.opening__wiki__markup th[align="center"], .opening__wiki__markup td[align="center"] {
  text-align: center;
}

.opening__wiki__markup th[align="right"], .opening__wiki__markup td[align="right"] {
  text-align: right;
}

.opening__wiki__markup p time {
  border-bottom: 1px dashed var(--c-font-dim);
  cursor: help;
  font-size: 100%;
}

.opening__wiki__markup p a > time {
  border-color: var(--c-link);
}

.opening__wiki__markup p a:hover > time {
  border-color: var(--c-link-hover);
}

.opening__wiki__markup::-webkit-scrollbar-track {
  background: var(--c-bg-zebra);
}

.opening__wiki__markup ul {
  padding: 0;
}

.opening__wiki__markup h2:not(:first-child) {
  padding-bottom: .4em;
  line-height: 1.3em;
}

.opening__wiki__editor {
  padding: .5em 2em;
}

.opening__wiki__editor__summary {
  cursor: pointer;
  color: var(--c-primary);
}

.opening__wiki__editor__summary .priority {
  text-transform: uppercase;
  background: var(--c-bg-zebra2);
  color: var(--c-font-dim);
  padding: .2em .8em;
}

.opening__wiki__editor__summary .priority--0 {
  color: var(--c-brag);
}

.opening__wiki__editor__summary .priority--1 {
  color: var(--c-good);
}

.opening__wiki__editor__summary .priority--3, .opening__wiki__editor__summary .priority--4 {
  color: var(--c-bad);
}

.opening__wiki__editor form {
  margin-top: 1em;
}

.opening__wiki__editor form textarea {
  flex: 5 auto;
  height: 20em;
}

.opening__wiki__editor__revisions {
  max-height: 30vh;
  overflow: auto;
}

.opening__wiki__editor__revisions summary {
  cursor: pointer;
  color: var(--c-primary);
  margin-top: 1em;
}

.opening__wiki__editor__revision {
  border-top: 1px solid var(--c-border);
  margin-top: 1em;
  padding: 1em 0 .5em;
  font-size: .8em;
}

.opening__wiki__editor__revision textarea {
  width: 90%;
  height: 10em;
  margin: 1em auto 0;
}

.opening__wiki__missing {
  margin-top: 3em;
}

.opening__tree {
  -webkit-user-select: none;
  user-select: none;
}

.opening__tree details[open] {
  border-color: var(--c-primary);
  padding-bottom: .4em;
}

.opening__tree details[open] > summary {
  border-bottom: 1px solid var(--c-border);
}

.opening__tree summary {
  cursor: pointer;
}

.opening__tree summary:focus-visible {
  outline: 2px solid var(--c-primary);
}

.opening__tree > div, .opening__tree > details {
  margin-bottom: .7em;
  font-size: 2em;
}

.opening__tree > div {
  padding: .5em .5em .5em 2em;
}

.opening__tree > details {
  background: var(--c-bg-zebra);
  border: 1px solid var(--c-border);
}

.opening__tree > details > summary {
  padding: .5em .5em .5em 1em;
}

.opening__tree > details > summary:hover {
  background: color-mix(in oklab, var(--c-primary) 20%, var(--c-bg));
}

.opening__tree > details > div, .opening__tree > details > details {
  margin: .5em .5em 0 1rem;
  font-size: .7em;
}

.opening__tree > details > div {
  padding: .5em .5em .5em 1.9em;
}

.opening__tree > details > details {
  border: 1px solid var(--c-border);
  background: var(--c-bg-zebra2);
}

.opening__tree > details > details > summary {
  padding: .5em .5em .5em 1em;
}

.opening__tree > details > details > summary:hover {
  background: color-mix(in oklab, var(--c-primary) 20%, var(--c-bg));
}

.opening__tree > details > details > div, .opening__tree > details > details > details {
  margin: .5em .5em 0 1.5rem;
  font-size: .8em;
}

.opening__tree > details > details > div {
  padding: .5em .5em .5em 1.7em;
}

.opening__tree > details > details > details > summary {
  padding: .5em .5em .5em 1em;
}

.opening__tree > details > details > details > summary:hover {
  background: color-mix(in oklab, var(--c-primary) 20%, var(--c-bg));
}

.opening__tree > details > details > details div, .opening__tree > details > details > details details {
  margin: .5em .5em .3em 3rem;
}

.opening h1 {
  gap: 1rem;
}

.opening__beta {
  vertical-align: text-top;
  color: var(--c-brag);
  margin-left: 1em;
  font-size: 1rem;
  font-weight: bold;
  display: inline-block;
}

.opening__warning {
  background: color-mix(in oklab, var(--c-brag) 20%, var(--c-bg));
  border-color: color-mix(in oklab, var(--c-brag) 35%, var(--c-bg));
  padding: 1em 2em;
}

.opening__error {
  background: color-mix(in oklab, var(--c-bad) 20%, var(--c-bg));
  border-color: color-mix(in oklab, var(--c-bad) 35%, var(--c-bg));
  padding: 1em 2em;
}

.opening .box__top__actions a {
  margin-left: 2em;
}