@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;800&display=swap";
*,
:before,
:after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family:
    system-ui,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji;
  line-height: 1.15;
}
body {
  margin: 0;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    Liberation Mono,
    Menlo,
    monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  border-color: currentColor;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button {
  height: auto;
}
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
:root {
  --color-black: #263238;
  --color-black-a80: #263238cc;
  --color-black-a50: #26323880;
  --color-black-a30: #2632384d;
  --color-black-a20: #26323833;
  --color-white: #fff;
  --font: "Roboto", sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 600;
}
._gameCanvasContainer_w54j6_1 {
  aspect-ratio: 1;
  cursor: grab;
  border-radius: 16px;
  width: min(100%, 100dvh - 112px);
  overflow: hidden;
  box-shadow: 0 1px 35px #0000001f;
}
._gameCanvasContainer_w54j6_1._dragging_w54j6_10 {
  cursor: grabbing;
}
._gameCanvas_w54j6_1 {
  aspect-ratio: 1;
  width: 100%;
  display: block;
}
._boardFooter_w54j6_20 {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  max-width: 100%;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%);
}
._stepCount_w54j6_33 {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--color-black-a50);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (width<=768px) {
  ._gameCanvasContainer_w54j6_1 {
    width: min(100%, 100dvw - 48px);
  }
}
._presetSelectWrapper_11nvd_1 {
  border: 2px solid var(--color-black);
  background: var(--color-white);
  border-radius: 8px;
  flex: 1;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
._presetSelect_11nvd_1 {
  appearance: none;
  width: 100%;
  color: var(--color-black);
  font-family: var(--font);
  cursor: pointer;
  background: 0 0;
  border: none;
  outline: none;
  padding: 8px 28px 8px 10px;
  font-size: 16px;
}
._presetSelectArrow_11nvd_25 {
  border-right: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  pointer-events: none;
  width: 8px;
  height: 8px;
  position: absolute;
  top: calc(50% - 2px);
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
}
._sidebarSection_1te1y_1 {
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  display: flex;
}
._sectionLabel_1te1y_8 {
  padding: 5px 0;
  font-size: 20px;
  font-weight: 800;
}
h1._sectionLabel_1te1y_8 {
  font-size: 32px;
}
._sidebarDescription_1ds34_1 {
  color: var(--color-black-a80);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}
._sidebarFootnote_1ds34_8 {
  color: var(--color-black-a50);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}
._sidebarFootnote_1ds34_8 ._sidebarLink_1ds34_15 {
  color: var(--color-black-a50);
  font-size: 11px;
}
._sidebarFootnote_1ds34_8 ._sidebarLink_1ds34_15:hover {
  color: var(--color-black);
}
._sidebarLink_1ds34_15 {
  color: var(--color-black);
  text-underline-offset: 2px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
._sidebarLink_1ds34_15:hover {
  color: var(--color-black-a50);
}
._pieceDropdown_on2ad_1 {
  flex: 1;
  min-width: 0;
}
._pieceDropdownTrigger_on2ad_6 {
  border: 2px solid var(--color-black);
  background: var(--color-white);
  width: 100%;
  color: var(--color-black);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  outline: none;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  font-size: 16px;
  display: flex;
}
._pieceDropdownTrigger_on2ad_6:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
._pieceDropdownTriggerName_on2ad_29 {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
._pieceDropdownArrow_on2ad_37 {
  border-right: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  display: inline-block;
  transform: rotate(45deg);
}
._pieceDropdownMenu_on2ad_48 {
  background: var(--color-white);
  border: 1px solid var(--color-black);
  z-index: 1000;
  border-radius: 8px;
  max-height: 320px;
  position: fixed;
  overflow-y: auto;
  box-shadow: 0 4px 24px #2632382e;
}
._pieceDropdownItem_on2ad_59 {
  border: none;
  border-bottom: 1px solid var(--color-black-a20);
  width: 100%;
  color: var(--color-black);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  background: 0 0;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  font-size: 16px;
  display: flex;
}
._pieceDropdownItem_on2ad_59:last-child {
  border-bottom: none;
}
._pieceDropdownItem_on2ad_59:hover:not(._pieceDropdownItemSelected_on2ad_79),
._pieceDropdownItemSelected_on2ad_79 {
  background: var(--color-black);
  color: var(--color-white);
}
._sidebarPieces_12a89_1 {
  flex: 1;
}
._pieceListScroll_12a89_5,
._pieceList_12a89_5 {
  flex-direction: column;
  display: flex;
}
._pieceRow_12a89_17 {
  align-items: flex-start;
  gap: 6px;
  display: flex;
}
._pieceRow_12a89_17 + ._pieceRow_12a89_17 {
  margin-top: 8px;
}
._pieceControls_12a89_27 {
  flex-direction: column;
  flex: 1;
  gap: 7px;
  min-width: 0;
  display: flex;
}
._pieceTopRow_12a89_35 {
  align-items: stretch;
  gap: 8px;
  display: flex;
}
._colorSwatch_12a89_41 {
  border: 2px solid var(--color-black-a50);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  align-self: stretch;
  width: 24px;
  padding: 0;
}
._colorSwatch_12a89_41:hover {
  border-color: var(--color-black);
}
._removeBtn_12a89_55 {
  color: var(--color-black-a30);
  cursor: pointer;
  background: 0 0;
  border: none;
  flex-shrink: 0;
  align-self: center;
  align-items: center;
  padding: 0 1px;
  font-size: 17px;
  line-height: 1;
  display: flex;
}
._removeBtn_12a89_55:hover {
  color: var(--color-black);
}
._colorPicker_12a89_75 {
  background: var(--color-white);
  border: 1px solid var(--color-black-a20);
  border-radius: 8px;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  display: flex;
  box-shadow: 0 1px 35px #00000026;
}
._colorGrid_12a89_86 {
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  display: grid;
}
._colorOption_12a89_92 {
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  transition: transform 0.1s;
}
._colorOption_12a89_92:hover:not(:disabled) {
  transform: scale(1.18);
}
._colorOption_12a89_92._selected_12a89_106 {
  border-color: var(--color-black);
}
._colorOption_12a89_92:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}
._colorCustom_12a89_115 {
  border-top: 1px solid var(--color-black-a20);
  cursor: pointer;
  color: var(--color-black-a80);
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  font-size: 16px;
  display: flex;
}
._colorCustom_12a89_115 input[type="color"] {
  appearance: none;
  border: 1px solid var(--color-black-a50);
  cursor: pointer;
  background: 0 0;
  border-radius: 50%;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
}
._colorCustom_12a89_115 input[type="color"]::-webkit-color-swatch-wrapper {
  border-radius: 50%;
  padding: 0;
}
._colorCustom_12a89_115 input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
._colorCustom_12a89_115 input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}
._addBtn_12a89_156 {
  border: 2px solid var(--color-black);
  width: 100%;
  color: var(--color-black);
  font-size: 16px;
  font-family: var(--font);
  cursor: pointer;
  background: 0 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  padding: 8px 10px;
  display: flex;
}
._addBtn_12a89_156:hover {
  background: var(--color-black);
  color: var(--color-white);
}
._app_7n6ib_1 {
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--color-black);
  background: var(--color-white);
  font-size: 13px;
  display: flex;
}
._sidebar_7n6ib_12 {
  background: var(--color-white);
  flex-direction: column;
  flex-shrink: 0;
  gap: 20px;
  width: 400px;
  min-height: 100dvh;
  margin-left: calc(100% - 400px);
  padding: 16px 32px 32px;
  display: flex;
}
._presetRow_7n6ib_26 {
  align-items: center;
  gap: 10px;
  display: flex;
}
._presetNavBtn_7n6ib_32 {
  border: 2px solid var(--color-black);
  width: 32px;
  height: 32px;
  color: var(--color-black);
  cursor: pointer;
  background: 0 0;
  border-radius: 8px;
  outline: none;
  flex-shrink: 0;
  position: relative;
}
._presetNavBtn_7n6ib_32:after {
  content: "";
  border-bottom: 1px solid;
  border-right: 1px solid;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
}
._presetNavBtn_7n6ib_32:first-child:after {
  left: calc(50% + 2px);
  transform: translate(-50%, -50%) rotate(135deg);
}
._presetNavBtn_7n6ib_32:last-child:after {
  left: calc(50% - 2px);
  transform: translate(-50%, -50%) rotate(-45deg);
}
._presetNavBtn_7n6ib_32:hover {
  background: var(--color-black);
  color: var(--color-white);
}
._sidebarActions_7n6ib_72 {
  gap: 6px;
}
._actionBtn_7n6ib_76 {
  border: 2px solid var(--color-black);
  width: 100%;
  color: var(--color-black);
  font-size: 16px;
  font-family: var(--font);
  cursor: pointer;
  background: 0 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  display: flex;
}
._actionBtn_7n6ib_76:hover:not(:disabled) {
  background: var(--color-black);
  color: var(--color-white);
}
._actionBtn_7n6ib_76:disabled {
  opacity: 0.4;
  cursor: default;
}
._footerLinks_7n6ib_103 {
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  margin-top: auto;
}
._footerLink_7n6ib_103 {
  color: var(--color-black-a50);
  text-underline-offset: 2px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
._footerLink_7n6ib_103:hover {
  color: var(--color-black);
}
._board_7n6ib_124 {
  background: var(--color-white);
  justify-content: center;
  align-items: center;
  width: calc(100% - 400px);
  height: 100dvh;
  padding: 56px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}
._zoomControls_7n6ib_137 {
  align-items: center;
  gap: 10px;
  display: flex;
}
._zoomBtn_7n6ib_143 {
  border: 2px solid var(--color-black);
  width: 32px;
  height: 32px;
  color: var(--color-black);
  cursor: pointer;
  background: 0 0;
  border-radius: 8px;
  outline: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  display: flex;
  position: relative;
}
._zoomBtn_7n6ib_143:hover:not(:disabled) {
  background: var(--color-black);
  color: var(--color-white);
}
._zoomBtn_7n6ib_143:disabled {
  opacity: 0.3;
  cursor: default;
}
@media (width<=768px) {
  ._app_7n6ib_1 {
    flex-direction: column;
    min-height: 100dvh;
  }
  ._board_7n6ib_124 {
    width: 100%;
    height: auto;
    padding: 24px 24px 48px;
    position: relative;
  }
  ._sidebar_7n6ib_12 {
    width: 100%;
    min-height: 0;
    margin-left: 0;
  }
}