@import url("./theme.css");

*{box-sizing:border-box;margin:0;padding:0}
html, body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.visualArea{
  width:100%;
  height:100%;
  --visual-area-pad-x:1%;
  --visual-area-pad-y:1%;
  padding:var(--visual-area-pad-y) var(--visual-area-pad-x);
  position:relative;
  --editor-overlay-inset-x:12px;
  --editor-overlay-inset-y:6px;
  --editor-overlay-height:43px;
  --editor-status-height:28px;
  --canvas-clip-top:max(0px, calc(var(--editor-overlay-height) + var(--editor-overlay-inset-y) - var(--visual-area-pad-y) + 1px));
  --canvas-clip-bottom:max(0px, calc(var(--editor-status-height) + var(--editor-overlay-inset-y) - var(--visual-area-pad-y) + 1px));
}
.canvasArea{
  --canvas-area-border-color:var(--border);
  --canvas-area-border-width:1px;
  --canvas-area-border-radius-offset:4px;
  --canvas-playable-radius:calc(var(--radius) + var(--canvas-area-border-radius-offset));
  --canvas-area-background:linear-gradient(180deg, rgba(18,26,51,.98), rgba(11,16,32,.98));
  width:100%;
  height:100%;
  border-radius:var(--canvas-playable-radius);
  border:var(--canvas-area-border-width) solid var(--canvas-area-border-color);
  background:transparent;
  box-shadow:0 12px 22px rgba(6,12,28,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.canvasArea::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--canvas-area-background);
  box-shadow:0 18px 30px rgba(6,12,28,.35) inset;
  pointer-events:none;
  z-index:0;
  -webkit-clip-path:none;
  clip-path:none;
}
.canvasViewport{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  overflow:visible;
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
}

.canvasViewport::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--canvas-clip-top);
  bottom:var(--canvas-clip-bottom);
  border-radius:var(--canvas-playable-radius);
  border:var(--canvas-area-border-width) solid var(--canvas-area-border-color);
  pointer-events:none;
  opacity:0;
}

.canvasViewport::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--canvas-clip-top);
  bottom:var(--canvas-clip-bottom);
  border-radius:var(--canvas-playable-radius);
  pointer-events:none;
  opacity:0;
  background-image:
    var(--canvas-autohide-layer-edge-hint, linear-gradient(to right, transparent, transparent)),
    var(--canvas-autohide-dock-edge-hint, linear-gradient(to top, transparent, transparent)),
    var(--canvas-autohide-properties-edge-hint, linear-gradient(to left, transparent, transparent));
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:
    left var(--canvas-autohide-layer-hint-top, 0px),
    var(--canvas-autohide-dock-hint-left, 0px) bottom,
    right var(--canvas-autohide-properties-hint-top, 0px);
  background-size:
    42px var(--canvas-autohide-layer-hint-height, 100%),
    var(--canvas-autohide-dock-hint-width, 100%) 46px,
    42px var(--canvas-autohide-properties-hint-height, 100%);
  transition:opacity .14s ease;
}

.canvasArea.is-autohide-layer-edge-hint{
  --canvas-autohide-layer-edge-hint:
    linear-gradient(
      to right,
      rgba(132, 184, 255, .26) 0,
      rgba(132, 184, 255, .13) 5px,
      rgba(132, 184, 255, .055) 17px,
      rgba(132, 184, 255, 0) 42px
    );
}

.canvasArea.is-autohide-dock-edge-hint{
  --canvas-autohide-dock-edge-hint:
    linear-gradient(
      to top,
      rgba(132, 184, 255, .24) 0,
      rgba(132, 184, 255, .12) 5px,
      rgba(132, 184, 255, .052) 17px,
      rgba(132, 184, 255, 0) 46px
    );
}

.canvasArea.is-autohide-properties-edge-hint{
  --canvas-autohide-properties-edge-hint:
    linear-gradient(
      to left,
      rgba(132, 184, 255, .26) 0,
      rgba(132, 184, 255, .13) 5px,
      rgba(132, 184, 255, .055) 17px,
      rgba(132, 184, 255, 0) 42px
    );
}

.canvasArea.is-autohide-layer-edge-hint .canvasViewport::after,
.canvasArea.is-autohide-dock-edge-hint .canvasViewport::after,
.canvasArea.is-autohide-properties-edge-hint .canvasViewport::after{
  opacity:1;
}
.canvasArea.is-editor-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:var(--canvas-clip-bottom);
  height:148px;
  border-bottom-left-radius:var(--canvas-playable-radius);
  border-bottom-right-radius:var(--canvas-playable-radius);
  -webkit-clip-path:inset(0 0 0 0 round 0 0 var(--canvas-playable-radius) var(--canvas-playable-radius));
  clip-path:inset(0 0 0 0 round 0 0 var(--canvas-playable-radius) var(--canvas-playable-radius));
  pointer-events:none;
  z-index:1;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.44) 34%,
    rgba(0,0,0,.2) 66%,
    rgba(0,0,0,0) 100%
  );
}
.canvasArea canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  -webkit-clip-path:none;
  clip-path:none;
}

.visualArea.is-editor-active .canvasArea canvas,
.visualArea.is-editor-active .canvasArea::before{
  -webkit-clip-path:inset(var(--canvas-clip-top) 0 var(--canvas-clip-bottom) 0 round var(--canvas-playable-radius));
  clip-path:inset(var(--canvas-clip-top) 0 var(--canvas-clip-bottom) 0 round var(--canvas-playable-radius));
}

.visualArea.is-editor-active .canvasArea{
  border-color:transparent;
}

.visualArea.is-editor-active .canvasViewport::before{
  opacity:1;
}

.ingameTopArea,
.ingameStatusArea{
  position:absolute;
  left:calc(var(--visual-area-pad-x) + var(--editor-overlay-inset-x));
  right:calc(var(--visual-area-pad-x) + var(--editor-overlay-inset-x));
  height:var(--editor-overlay-height);
  border-radius:10px;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
  z-index:10;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease;
}

.ingameTopArea{
  top:var(--editor-overlay-inset-y);
}

.ingameStatusArea{
  bottom:var(--editor-overlay-inset-y);
  height:var(--editor-status-height);
}

.visualArea.is-editor-active .ingameTopArea,
.visualArea.is-editor-active .ingameStatusArea{
  pointer-events:auto;
  opacity:1;
  visibility:visible;
}

.ingameTopFrame,
.ingameStatusFrame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:transparent;
}

.hudHints{
  position:absolute;
  top:14px;
  right:64px;
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(122,147,208,.35);
  background:rgba(10,16,34,.72);
  box-shadow:0 12px 24px rgba(6,12,28,.35);
  color:rgba(232,237,255,.9);
  font-size:13px;
  line-height:1.3;
  z-index:2;
  pointer-events:auto;
}

.hudHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.hudToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:5px 2px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:inherit;
}

.hudTitle{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:14px;
  color:rgba(159,176,216,.9);
}

.hudChevron{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-right:2px solid rgba(159,176,216,.9);
  border-bottom:2px solid rgba(159,176,216,.9);
  transform:rotate(45deg);
  transition:transform .18s ease;
}

.hudHints.is-collapsed .hudChevron{
  transform:rotate(-45deg);
}

.hudBody{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hudHints.is-collapsed .hudBody{
  display:none;
}

.hudHints.is-collapsed .hudHeader{
  margin:-12px -14px;
}

.hudHints.is-collapsed .hudToggle{
  padding:12px 14px;
}

.hudSection{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;
  border-top:1px solid rgba(122,147,208,.2);
}

.hudSection:first-child{
  padding-top:0;
  border-top:0;
}

.hudRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hudKeys{
  display:inline-flex;
  gap:6px;
  align-items:center;
  color:rgba(232,237,255,.95);
}

.hudMouseClick{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:3px 7px;
  border-radius:7px;
  border:1px solid rgba(122,147,208,.32);
  background:rgba(24,32,52,.46);
}

.hudMouseClickIcon{
  width:16px;
  height:26px;
  object-fit:contain;
  display:block;
  opacity:.88;
  filter: brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(280%) hue-rotate(184deg) brightness(92%) contrast(90%);
}

.hudMouseClickIcon--right{
  transform:scaleX(-1);
}

.hudKey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:3px 9px;
  border-radius:7px;
  border:1px solid rgba(122,147,208,.45);
  background:rgba(18,26,51,.6);
  font-size:13px;
  letter-spacing:.02em;
}

.hudKey--wide{
  padding:3px 10px;
  font-size:12px;
  letter-spacing:.04em;
}

.hudAction{
  color:rgba(232,237,255,.86);
  font-size:13px;
  letter-spacing:.02em;
}

.ingameToolbar{
  position:absolute;
  top:14px;
  right:16px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  z-index:4;
  pointer-events:auto;
}

.ingameShortcutHub{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
  max-width:min(520px, calc(100% - 28px));
  z-index:4;
  pointer-events:none;
}

.ingameToolbarButton{
  height:41px;
  border:0;
  border-radius:10px;
  background:linear-gradient(180deg, #1C2949 0%, #121C34 100%);
  color:rgba(232,237,255,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
  font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  padding:0 16px;
  box-shadow:
    0 9px 18px rgba(2,6,18,.42),
    0 1px 0 rgba(111,139,206,.12),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(5,9,20,.34);
  transition:background .14s ease, color .14s ease, opacity .14s ease, box-shadow .14s ease, transform .12s ease;
}

.ingameToolbarButton:hover{
  background:linear-gradient(180deg, #22345E 0%, #17243F 100%);
  color:#F4F7FF;
  box-shadow:
    0 11px 20px rgba(2,6,18,.48),
    0 1px 0 rgba(135,164,232,.18),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(5,9,20,.32);
  transform:translateY(-1px);
}

.ingameToolbarButton:focus{
  outline:none;
}

.ingameToolbarButton:focus-visible{
  outline:2px solid rgba(159,176,216,.42);
  outline-offset:3px;
}

.ingameToolbarButton--icon{
  width:41px;
  padding:0;
}

.ingameKeyHint{
  height:41px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-radius:10px;
  background:rgba(12,18,34,.42);
  color:rgba(232,237,255,.9);
  font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  pointer-events:none;
}

.ingameKeyHintKey{
  min-width:28px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border-radius:7px;
  background:linear-gradient(180deg, #1C2949 0%, #121C34 100%);
  color:#F4F7FF;
  box-shadow:
    0 7px 14px rgba(2,6,18,.34),
    0 1px 0 rgba(111,139,206,.12),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(5,9,20,.34);
}

.ingameKeyHintText{
  color:rgba(232,237,255,.86);
}

.ingameKeyHint--exit{
  display:none;
}

.ingameKeyHint--debugger{
  display:none;
}

.ingameShortcutHub.is-debug-visible .ingameKeyHint--debugger{
  display:inline-flex;
}

.ingameToolbar.is-immersive .fullscreenButton{
  display:none;
}

.ingameShortcutHub.is-immersive .ingameKeyHint:not(.ingameKeyHint--exit):not(.ingameKeyHint--edit){
  display:none;
}

.ingameShortcutHub.is-immersive .ingameKeyHint--exit{
  order:1;
  display:inline-flex;
}

.ingameShortcutHub.is-immersive .ingameKeyHint--edit{
  order:2;
}

.fullscreenButtonIcon{
  width:24px;
  height:24px;
  object-fit:contain;
  pointer-events:none;
}

.canvasArea.is-editor-active .ingameToolbar,
.canvasArea.is-editor-active .ingameShortcutHub{
  display:none;
}

.mapSaveButton{
  width:100%;
  height:36px;
  border-radius:9px;
  border:1px solid #5a79bb;
  background:#152447;
  color:#e8edff;
  font-size:14px;
  letter-spacing:.02em;
  padding:0 12px;
  box-shadow:none;
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}

.mapSaveButton:hover{
  border-color:#6aa1ff;
  background:#1b2d57;
}

.mapSaveButton:disabled{
  opacity:.9;
  cursor:default;
}

.mapSaveButton.is-saving{
  color:rgba(209,224,255,.95);
}

.mapSaveButton.is-saved{
  border-color:#60c6aa;
  background:#1b3e46;
  color:#d1f7e9;
}

.mapSaveButton.is-error{
  border-color:#e17373;
  background:#4a2430;
  color:#ffdcdc;
}

.canvasArea.is-paused .hudHints .mapSaveButton{
  display:none;
}

.editorOptionsMenu{
  position:absolute;
  left:calc(var(--visual-area-pad-x) + var(--editor-overlay-inset-x) + 6px);
  top:calc(var(--editor-overlay-inset-y) + 49px);
  z-index:42;
  min-width:224px;
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid rgba(122,147,208,.34);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(27,37,65,.98), rgba(17,24,45,.98));
  box-shadow:
    0 22px 44px rgba(3,8,20,.46),
    inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events:auto;
}

.editorOptionsMenu[hidden]{
  display:none;
}

.editorOptionsMenu button{
  height:42px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:rgba(232,237,255,.9);
  text-align:left;
  padding:0 14px;
  cursor:pointer;
  font:700 15px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

.editorOptionsMenu button:disabled{
  cursor:not-allowed;
  color:rgba(232,237,255,.38);
}

.editorOptionsMenu button:hover,
.editorOptionsMenu button:focus-visible{
  background:rgba(51,70,118,.72);
  color:#F4F7FF;
  outline:none;
}

.editorOptionsMenu button:disabled:hover,
.editorOptionsMenu button:disabled:focus-visible{
  background:transparent;
  color:rgba(232,237,255,.38);
}

.editorSettingsOverlay{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:8px;
  background:rgba(3,7,18,.46);
  pointer-events:auto;
}

.editorSettingsOverlay[hidden]{
  display:none;
}

.gameDialogOverlay{
  position:absolute;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(45,69,132,.24), rgba(3,7,18,.72) 58%, rgba(2,5,12,.86) 100%);
  pointer-events:auto;
}

.gameDialogPanel{
  width:min(560px, calc(100vw - 48px));
  border-radius:18px;
  border:1px solid rgba(148,171,226,.45);
  background:linear-gradient(180deg, rgba(30,42,78,.98), rgba(16,24,49,.98));
  color:#F4F7FF;
  box-shadow:
    0 28px 64px rgba(2,6,18,.62),
    0 0 0 2px rgba(255,255,255,.04) inset;
  overflow:hidden;
}

.gameDialogHeader{
  padding:22px 26px 16px;
  border-bottom:1px solid rgba(148,171,226,.2);
}

.gameDialogTitle{
  color:#FFFFFF;
  font-size:28px;
  font-weight:900;
  line-height:1.08;
}

.gameDialogBody{
  display:grid;
  gap:14px;
  padding:20px 26px 0;
}

.gameDialogMessage{
  max-width:52ch;
  color:rgba(232,237,255,.94);
  font-size:18px;
  font-weight:650;
  line-height:1.35;
}

.gameDialogField{
  display:grid;
  gap:10px;
}

.gameDialogLabel{
  color:rgba(189,205,246,.88);
  font-size:13px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.gameDialogInput{
  width:100%;
  min-height:54px;
  border-radius:12px;
  border:2px solid rgba(148,171,226,.72);
  background:rgba(4,9,23,.72);
  color:#FFFFFF;
  padding:12px 16px;
  font:800 19px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  outline:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}

.gameDialogInput:focus{
  border-color:#BFD0FF;
  box-shadow:
    0 0 0 4px rgba(88,128,234,.28),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.gameDialogActions{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  padding:22px 26px 26px;
}

.gameDialogButton{
  min-width:126px;
  min-height:52px;
  border-radius:14px;
  padding:0 24px;
  border:1px solid rgba(188,205,247,.36);
  font:900 17px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#F5F8FF;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

.gameDialogButton:hover,
.gameDialogButton:focus-visible{
  transform:translateY(-1px);
  outline:none;
  filter:brightness(1.07);
}

.gameDialogButton:focus-visible{
  box-shadow:0 0 0 4px rgba(127,160,239,.34);
}

.gameDialogButton--secondary{
  background:rgba(20,29,55,.82);
}

.gameDialogButton--primary{
  border-color:rgba(172,191,238,.72);
  background:linear-gradient(180deg, #AFC2F4, #809DDE);
  color:#10172C;
  box-shadow:0 10px 22px rgba(45,75,155,.32);
}

@media (max-width: 560px){
  .gameDialogOverlay{
    padding:18px;
  }
  .gameDialogPanel{
    width:100%;
  }
  .gameDialogTitle{
    font-size:25px;
  }
  .gameDialogMessage{
    font-size:18px;
  }
  .gameDialogActions{
    flex-direction:column-reverse;
  }
  .gameDialogButton{
    width:100%;
  }
}

.controlsHoldOverlay{
  position:absolute;
  inset:0;
  z-index:35;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(3,7,18,.34);
  pointer-events:none;
}

.controlsHoldOverlay[hidden]{
  display:none;
}

.controlsHoldPanel{
  width:min(760px, calc(100vw - 44px));
  max-height:calc(100vh - 44px);
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  border-radius:16px;
  border:1px solid rgba(122,147,208,.34);
  background:rgba(27,37,65,.96);
  color:rgba(232,237,255,.95);
  box-shadow:
    0 24px 48px rgba(3,8,20,.48),
    0 8px 18px rgba(3,8,20,.28);
  overflow:hidden;
}

.controlsHoldHeader{
  min-height:68px;
  padding:17px 24px 15px;
  border-bottom:1px solid rgba(122,147,208,.18);
}

.controlsHoldContent{
  min-height:0;
  overflow:hidden;
  display:grid;
  gap:16px;
  align-content:start;
  padding:20px 28px 24px;
}

.controlsHoldContent .editorSettingsControlsSection{
  gap:8px;
  padding-bottom:16px;
}

.controlsHoldContent .editorSettingsControlRow{
  min-height:36px;
  grid-template-columns:minmax(130px, 160px) minmax(0, 1fr);
  gap:24px;
}

.controlsHoldContent .editorSettingsControlRow .hudAction{
  color:rgba(232,237,255,.88);
  font-size:16px;
  line-height:1.25;
}

.controlsHoldContent .editorSettingsControlRow .hudKey{
  min-width:32px;
  height:29px;
  padding:4px 11px;
  font-size:14px;
}

.controlsHoldContent .editorSettingsControlRow .hudMouseClick{
  min-height:33px;
  padding:4px 9px;
}

.controlsHoldContent .editorSettingsControlRow .hudMouseClickIcon{
  width:18px;
  height:27px;
}

.editorSettingsPanel{
  width:min(820px, calc(100vw - 16px));
  height:min(720px, calc(100vh - 16px));
  max-height:min(720px, calc(100vh - 16px));
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  border-radius:18px;
  border:1px solid rgba(122,147,208,.32);
  background:rgba(27,37,65,1);
  color:rgba(232,237,255,.95);
  box-shadow:
    0 24px 48px rgba(3,8,20,.46),
    0 8px 18px rgba(3,8,20,.28);
  overflow:hidden;
}

.editorSettingsHeader{
  min-height:54px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 32px;
  align-items:center;
  gap:14px;
  padding:14px 16px 12px 18px;
  border-bottom:1px solid rgba(122,147,208,.18);
}

.editorSettingsEyebrow{
  color:rgba(159,176,216,.86);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
}

.editorSettingsTitle{
  margin-top:6px;
  color:#F4F7FF;
  font-size:18px;
  font-weight:800;
  line-height:1;
}

.editorSettingsClose{
  width:32px;
  height:32px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#F4F7FF;
  display:grid;
  place-items:center;
  font:400 30px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  cursor:pointer;
  padding:0;
  transition:opacity .14s ease, transform .14s ease;
}

.editorSettingsClose:hover,
.editorSettingsClose:focus-visible{
  opacity:.78;
  transform:scale(1.04);
  outline:none;
}

.editorSettingsBody{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 132px;
}

.editorSettingsContent{
  min-height:0;
  overflow:hidden;
  display:grid;
  gap:10px;
  align-content:start;
  padding:12px 20px 14px;
}

.editorSettingsControlsSection{
  display:grid;
  gap:5px;
  padding:0 0 9px;
  border-bottom:1px solid rgba(122,147,208,.18);
}

.editorSettingsControlsSection:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.editorSettingsControlRow{
  min-height:34px;
  display:grid;
  grid-template-columns:minmax(150px, auto) minmax(0, 1fr);
  align-items:center;
  gap:18px;
}

.editorSettingsControlRow .hudAction{
  font-size:14px;
  text-align:left;
}

.editorSettingsControlRow .hudKey{
  min-width:29px;
  height:27px;
  padding:3px 10px;
  font-size:13px;
  border-radius:7px;
}

.editorSettingsControlRow .hudMouseClick{
  min-height:30px;
  padding:3px 8px;
  border-radius:7px;
}

.editorSettingsControlRow .hudMouseClickIcon{
  width:16px;
  height:25px;
}

.editorSettingsTabs{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 12px;
  border-left:1px solid rgba(122,147,208,.18);
  background:rgba(18,26,51,.42);
}

.editorSettingsTab{
  height:36px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:rgba(159,176,216,.86);
  cursor:pointer;
  font:800 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  text-align:left;
  padding:0 12px;
}

.editorSettingsTab.is-active{
  border-color:rgba(122,147,208,.34);
  background:rgba(51,70,118,.72);
  color:#F4F7FF;
}

.editorSettingsGeneralSection{
  display:grid;
  gap:10px;
  align-content:start;
}

.editorSettingsGeneralRow{
  position:relative;
  min-height:48px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  padding:0 14px 0 16px;
  border:1px solid rgba(122,147,208,.18);
  border-radius:10px;
  background:rgba(18,26,51,.42);
  color:rgba(232,237,255,.9);
}

.editorSettingsGeneralRow--range{
  grid-template-columns:minmax(0, 1fr) minmax(180px, 260px) 48px;
}

.editorSettingsGeneralLabel{
  min-width:0;
  font:750 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

.editorSettingsToggleInput{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.editorSettingsToggle{
  position:relative;
  width:42px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(122,147,208,.32);
  background:rgba(11,17,35,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background-color .14s ease, border-color .14s ease;
}

.editorSettingsToggle::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(183,197,231,.92);
  transition:transform .14s ease, background-color .14s ease;
}

.editorSettingsToggleInput:checked + .editorSettingsToggle{
  border-color:rgba(137,166,238,.58);
  background:rgba(58,95,214,.74);
}

.editorSettingsToggleInput:checked + .editorSettingsToggle::after{
  background:#F4F7FF;
  transform:translateX(18px);
}

.editorSettingsToggleInput:focus-visible + .editorSettingsToggle,
.editorSettingsRange:focus-visible{
  outline:2px solid rgba(175,197,255,.72);
  outline-offset:3px;
}

.editorSettingsRange{
  width:100%;
  accent-color:#86A5F2;
}

.editorSettingsValue{
  color:rgba(232,237,255,.78);
  font:800 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  text-align:right;
}

.editorCursorTip{
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:min(420px, calc(100% - 24px));
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(124, 168, 255, .30);
  background:
    linear-gradient(180deg, rgba(24, 36, 70, .94) 0%, rgba(11, 18, 38, .96) 100%);
  color:rgba(244,248,255,.98);
  font-size:11px;
  font-weight:600;
  letter-spacing:.015em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  box-shadow:
    0 12px 28px rgba(3, 8, 20, .44),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 24px rgba(91, 151, 255, .14);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:opacity .14s ease, transform .14s ease, box-shadow .14s ease;
  z-index:11001;
}

.editorCursorTip::before{
  content:"♪";
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(112, 179, 255, .32) 0%, rgba(57, 109, 212, .18) 100%);
  color:rgba(244,248,255,.96);
  font-size:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(130, 184, 255, .12);
}

.editorCursorTip[data-tip-kind="tile"]::before{
  content:"▦";
}

.editorCursorTip.is-visible{
  opacity:1;
  transform:translateY(0);
  box-shadow:
    0 16px 34px rgba(3, 8, 20, .5),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 28px rgba(91, 151, 255, .18);
}

.editorDock{
  position:absolute;
  left:50%;
  bottom:calc(var(--canvas-clip-bottom) + 18px);
  display:none;
  z-index:2;
  opacity:1;
  transform:translateX(-50%) scale(var(--editor-dock-scale, 1));
  transform-origin:50% 100%;
  transition:opacity .16s ease, transform .18s ease;
  pointer-events:none;
}

.editorDock.is-visible{
  display:block;
}

.editorDock.is-visible.is-auto-hidden{
  opacity:0;
  transform:translateX(-50%) translateY(calc(100% + 28px)) scale(var(--editor-dock-scale, 1));
}

.editorDock.is-auto-hidden .editorPalette{
  pointer-events:none;
}

.editorPalette{
  display:none;
  pointer-events:auto;
  overflow:visible;
  padding:8px;
  border-radius:16px;
  background:rgba(27,37,65,1);
  box-shadow:0 10px 22px rgba(7,12,28,.42);
}

.editorPalette.is-visible{
  display:block;
}

.editorPaletteOverlay{
  display:flex;
  align-items:center;
  gap:14px;
  overflow:visible;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}

.editorTool{
  width:48px;
  height:48px;
  border-radius:9px;
  border:2px solid rgba(109,126,171,.78);
  background:rgba(31,42,74,1.0);
  color:rgba(216,228,255,.98);
  line-height:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  position:relative;
  padding:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 1px 0 rgba(6,10,22,.55);
  transition:border-color .15s ease, background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.editorTool:not([data-tool="drawShape"]){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(10,17,35,.62),
    0 5px 0 rgba(4,8,18,.82),
    0 3px 7px rgba(4,8,18,.34);
}

.editorTool[data-tool="selection"]{
  --selection-icon-size:44px;
  --selection-active-icon-size:46px;
  --selection-icon-radius:7px;
  --selection-icon-stroke-width:2.4px;
  --selection-icon-stroke-color:rgba(109,126,171,.78);
  --selection-icon-fill:rgba(31,42,74,1.0);
  --selection-icon-offset-x:-5px;
  --selection-icon-offset-y:-5px;
  --selection-active-icon-stroke-width:3px;
  --selection-active-icon-stroke-color:rgba(255,255,255,.98);
  --selection-active-icon-fill:rgba(31,42,74,1.0);
}

.editorTool[data-tool="selection"],
.editorTool[data-tool="selection"]:hover,
.editorTool[data-tool="selection"]:focus-visible,
.editorTool[data-tool="selection"]:not(.is-active){
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.editorTool[data-tool="selection"].is-active{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.editorTool[data-tool="selection"].is-active .editorToolIcon--selection::before{
  width:var(--selection-active-icon-size);
  height:var(--selection-active-icon-size);
  border-width:var(--selection-active-icon-stroke-width);
  border-color:var(--selection-active-icon-stroke-color);
  background:var(--selection-active-icon-fill);
}

.editorTool[data-tool="drawShape"]{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.editorTool[data-tool="drawShape"]:hover,
.editorTool[data-tool="drawShape"]:focus-visible,
.editorTool[data-tool="drawShape"].is-active{
  border-color:rgba(202,220,255,.9);
  background:linear-gradient(180deg, rgba(57,74,118,.98), rgba(36,54,93,.98));
  box-shadow:
    inset 0 0 0 1px rgba(191,212,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(21,29,56,.8);
}

.editorTool::after{
  content:attr(data-title);
  position:absolute;
  left:50%;
  bottom:calc(100% + 24px);
  transform:translate(-50%, 6px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:7px 12px;
  border-radius:8px;
  border:1px solid rgba(132,165,232,.44);
  background:rgba(7,14,31,.97);
  color:rgba(236,244,255,.99);
  font-size:24px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.05;
  box-shadow:0 10px 20px rgba(5,10,24,.5);
  transition:opacity .12s ease, transform .12s ease;
  z-index:20;
}

.editorTool:hover::after,
.editorTool:focus-visible::after{
  opacity:1;
  transform:translate(-50%, -2px);
}

.editorTool.is-active{
  border-width: 3px;
  border-color:rgba(202,220,255,.9);
  background:linear-gradient(180deg, rgba(57,74,118,.98), rgba(36,54,93,.98));
  box-shadow:
    inset 0 0 0 1px rgba(191,212,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(21,29,56,.8);
}

.editorTool:hover{
  border-color:rgba(172,194,244,.95);
  transform:translateY(-1px);
}

.editorTool:focus-visible{
  outline:2px solid rgba(198,220,255,.66);
  outline-offset:2px;
}

.editorToolIcon{
  width:32px;
  height:32px;
  position:relative;
  display:grid;
  place-items:center;
  font-family:"Segoe UI Symbol","Noto Sans Symbols2","Apple Symbols",sans-serif;
  font-size:30px;
  line-height:1;
}

.editorToolIcon::before,
.editorToolIcon::after{
  box-sizing:border-box;
}

.editorToolIcon--selection::before{
  content:"";
  width:var(--selection-icon-size);
  height:var(--selection-icon-size);
  border-radius:var(--selection-icon-radius);
  border:var(--selection-icon-stroke-width) dashed var(--selection-icon-stroke-color);
  background:var(--selection-icon-fill);
  transform:translate(var(--selection-icon-offset-x), var(--selection-icon-offset-y));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(10,17,35,.62),
    0 5px 0 rgba(4,8,18,.82),
    0 3px 7px rgba(4,8,18,.34);
}

.editorToolIcon--hook::before{
  content:"";
  width:32px;
  height:32px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:32px 32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M23.5,22.5L10,9' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M16,9H10V15' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.editorToolIcon--unhook::before{
  content:"";
  width:32px;
  height:32px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:32px 32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M23.5,22.5L10,9' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M16,9H10V15' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.editorToolIcon--unhook::after{
  --unhook-cross-length:55px;
  --unhook-cross-thickness:2.1px;
  --unhook-cross-color:rgba(202,216,255,.30);
  --unhook-cross-border-width:0px;
  --unhook-cross-border-color:rgba(0,0,0,0);
  --unhook-cross-offset-x:0px;
  --unhook-cross-offset-y:0px;
  --unhook-cross-rotate:-45deg;
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--unhook-cross-length);
  height:var(--unhook-cross-thickness);
  background:var(--unhook-cross-color);
  border:var(--unhook-cross-border-width) solid var(--unhook-cross-border-color);
  box-sizing:border-box;
  border-radius:999px;
  transform:translate(calc(-50% + var(--unhook-cross-offset-x)), calc(-50% + var(--unhook-cross-offset-y))) rotate(var(--unhook-cross-rotate));
}

.editorToolIcon--hookThrough::before{
  content:"";
  width:32px;
  height:32px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:32px 32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16,24V8' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M11.5,12.5L16,8L20.5,12.5' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.editorToolIcon--hookThrough::after{
  --hookthrough-cross-length:46px;
  --hookthrough-cross-thickness:2.1px;
  --hookthrough-cross-color:rgba(202,216,255,.30);
  --hookthrough-cross-border-width:0px;
  --hookthrough-cross-border-color:rgba(0,0,0,0);
  --hookthrough-cross-offset-x:0px;
  --hookthrough-cross-offset-y:0px;
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--hookthrough-cross-length);
  height:var(--hookthrough-cross-thickness);
  background:var(--hookthrough-cross-color);
  border:var(--hookthrough-cross-border-width) solid var(--hookthrough-cross-border-color);
  box-sizing:border-box;
  border-radius:999px;
  transform:translate(calc(-50% + var(--hookthrough-cross-offset-x)), calc(-50% + var(--hookthrough-cross-offset-y)));
}

.editorToolIcon--hookOnly::before{
  content:"";
  width:32px;
  height:32px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:32px 32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16,24V8' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M11.5,12.5L16,8L20.5,12.5' stroke='%23CAD8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.editorToolIcon--death::before{
  content:"💀";
  font-size:23px;
  transform:translateY(1px);
}

.editorToolIcon--freeze::before{
  content:"";
  width:26px;
  height:26px;
  background:url("../assets/icons/snow.png") center / contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
}

.editorToolIcon--freeze::after{
  content:none;
}

.editorToolIconImage{
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
  image-rendering:auto;
}

.editorToolIcon--drawShape{
  --crayon-size:44px;
  --crayon-offset-x:-4px;
  --crayon-offset-y:0px;
  --crayon-rotate:0deg;
}

.editorToolIcon--drawShape .editorToolIconImage{
  width:var(--crayon-size);
  height:var(--crayon-size);
  transform:translate(var(--crayon-offset-x), var(--crayon-offset-y)) rotate(var(--crayon-rotate));
  transform-origin:center;
}

.editorToolModeBadge{
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:20px;
  height:20px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(68, 230, 204, .98), rgba(32, 157, 168, .98));
  border:1px solid rgba(232, 255, 252, .72);
  box-shadow:
    0 3px 7px rgba(0,0,0,.42),
    0 0 12px rgba(73, 230, 213, .3);
  opacity:0;
  transform:translate(2px, 2px) scale(.82);
  transition:opacity .14s ease, transform .14s ease;
  pointer-events:none;
}

.editorToolModeBadge img{
  width:15px;
  height:15px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.42));
}

.editorTool[data-tool="drawShape"].is-curve-segment-mode{
  border-color:rgba(94,238,218,.95);
  background:linear-gradient(180deg, rgba(35, 91, 111, .98), rgba(28, 62, 92, .98));
  box-shadow:
    inset 0 0 0 1px rgba(194,255,246,.26),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(9,35,53,.85),
    0 0 18px rgba(72,209,204,.22);
}

.editorTool[data-tool="drawShape"].is-curve-segment-mode .editorToolModeBadge--curve{
  opacity:1;
  transform:translate(0, 0) scale(1);
}

.editorToolDivider{
  width:1px;
  height:36px;
  background:rgba(159,182,238,.2);
  margin:0 6px;
}

.shapeConfigPanel{
  --shape-panel-bg-top:rgba(44, 45, 49, .92);
  --shape-panel-bg-bottom:rgba(16, 17, 20, .97);
  --shape-panel-border:rgba(255,255,255,.08);
  --shape-panel-border-strong:rgba(255,255,255,.12);
  --shape-panel-surface:rgba(255,255,255,.034);
  --shape-panel-surface-strong:rgba(255,255,255,.052);
  --shape-panel-surface-hover:rgba(255,255,255,.082);
  --shape-panel-text:rgba(240,240,243,.94);
  --shape-panel-text-muted:rgba(189,189,195,.72);
  --shape-panel-text-soft:rgba(148,148,154,.62);
  --shape-panel-shadow:rgba(0,0,0,.5);
  --shape-panel-shadow-soft:rgba(0,0,0,.34);
  --shape-panel-accent:rgba(236,236,240,.9);
  --shape-panel-accent-soft:rgba(255,255,255,.12);
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:352px;
  max-height:calc(100% - 28px);
  overflow:auto;
  display:none;
  z-index:30;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--shape-panel-border);
  background:
    linear-gradient(180deg, var(--shape-panel-bg-top), var(--shape-panel-bg-bottom));
  box-shadow:
    0 24px 54px var(--shape-panel-shadow),
    0 8px 18px var(--shape-panel-shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  color:var(--shape-panel-text);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
  isolation:isolate;
}

.shapeConfigPanel.is-visible{
  display:block;
}

.shapeConfigPanel > *{
  position:relative;
  z-index:1;
}

.shapeConfigPanel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.055) 0, rgba(255,255,255,0) 23%),
    radial-gradient(circle at 81% 12%, rgba(255,255,255,.03) 0, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 28% 46%, rgba(255,255,255,.022) 0, rgba(255,255,255,0) 21%),
    radial-gradient(circle at 73% 38%, rgba(0,0,0,.09) 0, rgba(0,0,0,0) 26%),
    radial-gradient(circle at 47% 73%, rgba(255,255,255,.024) 0, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 88% 78%, rgba(0,0,0,.1) 0, rgba(0,0,0,0) 22%),
    radial-gradient(circle at 11% 82%, rgba(255,255,255,.018) 0, rgba(255,255,255,0) 18%);
  opacity:.9;
  mix-blend-mode:screen;
  z-index:-1;
}

.shapeConfigPanel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    url("../assets/textures/ui/shape-panel-noise.png") repeat;
  background-size:128px 128px;
  background-position:0 0;
  opacity:.075;
  filter:contrast(1.1) brightness(.52);
  mix-blend-mode:soft-light;
  z-index:0;
}

.shapeConfigToggle{
  position:absolute;
  top:50%;
  right:376px;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(24,24,28,.82);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
  color:var(--shape-panel-text);
  display:none;
  place-items:center;
  z-index:31;
  cursor:pointer;
  transform:translateY(-50%);
  opacity:.42;
  padding:0;
  appearance:none;
  transition:right .18s ease, border-color .16s ease, background-color .16s ease, opacity .14s ease;
}

.shapeConfigToggle.is-visible{
  display:grid;
}

.shapeConfigToggle.is-autohide-enabled{
  display:none;
}

.shapeConfigToggle.is-collapsed{
  right:14px;
}

.shapeConfigToggle:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(36,36,40,.92);
  opacity:1;
}

.shapeConfigToggleChevron{
  display:block;
  width:13px;
  height:10px;
  border-top:2px solid rgba(232,232,236,.88);
  border-right:2px solid rgba(232,232,236,.88);
  margin-left:-5px;
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .18s ease;
}

.shapeConfigToggle.is-collapsed .shapeConfigToggleChevron{
  margin-left:3px;
  transform:rotate(-135deg) scale(1.14);
}

.shapeConfigPanel::-webkit-scrollbar{
  width:3px;
}

.shapeConfigPanel:hover::-webkit-scrollbar{
  width:5px;
}

.shapeConfigPanel::-webkit-scrollbar-track{
  background:transparent;
}

.shapeConfigPanel::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

.shapeConfigPanel:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
}

.shapeConfigTitle{
  font-size:14px;
  line-height:1.14;
  font-weight:741;
  letter-spacing:-.01em;
  color:rgba(222,222,227,.72);
  margin-bottom:12px;
}

.shapeConfigTabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:4px;
  padding:4px;
  margin-bottom:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(14,14,14,0.41)    
}

.shapeConfigTab{
  min-height:28px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--shape-panel-text-soft);
  font-size:12px;
  line-height:1;
  font-weight:560;
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.shapeConfigTab:hover{
  background:rgba(255,255,255,.05);
  color:var(--shape-panel-text-muted);
}

.shapeConfigTab.is-active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  color:var(--shape-panel-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.2);
}

.shapeConfigTab.is-hidden{
  display:none;
}

.shapeConfigGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.shapeConfigSections{
  display:grid;
  gap:8px;
}

.shapeCfgCategory{
  display:grid;
  gap:8px;
}

.shapeCfgCategory.is-empty{
  display:none;
}

.shapeCfgSection{
  border:1px solid rgba(255,255,255,.065);
  border-radius:12px;
  background:
    url("../assets/textures/ui/shape-panel-noise.png") repeat,
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.026) 0, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 82% 74%, rgba(0,0,0,.08) 0, rgba(0,0,0,0) 28%),
    radial-gradient(circle at 54% 46%, rgba(255,255,255,.014) 0, rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
  background-size:128px 128px, auto, auto, auto, auto;
  background-position:0 0, 0 0, 0 0, 0 0, 0 0;
  background-blend-mode:multiply, normal, normal, normal, normal;
  overflow:hidden;
}

.shapeCfgSection[data-shape-section="motion"]{
  position:relative;
  z-index:60;
  overflow:visible;
}

.shapeCfgSection[data-shape-section="motion"] > .shapeConfigGrid{
  position:relative;
  z-index:1;
  gap:8px;
}

.shapeCfgSection > summary{
  list-style:none;
  position:relative;
  padding:10px 30px 10px 12px;
  border-bottom:1px solid transparent;
  color:var(--shape-panel-text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
}

.shapeCfgSection > summary::-webkit-details-marker{
  display:none;
}

.shapeCfgSection > summary::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:var(--shape-panel-text-soft);
  transition:transform .18s ease;
}

.shapeCfgSection[open] > summary{
  border-bottom-color:rgba(255,255,255,.07);
}

.shapeCfgSection[open] > summary::after{
  transform:translateY(-50%) rotate(180deg);
}

.shapeCfgSection > .shapeConfigGrid{
  padding:10px 12px 12px;
}

.shapeCfgRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 96px;
  align-items:center;
  gap:8px;
  font-size:11px;
}

.shapeCfgRow.is-hidden{
  display:none;
}

.is-hidden{
  display:none !important;
}

.shapeCfgSection.is-hidden{
  display:none;
}

.shapeCfgRow.is-disabled,
.shapeCfgSection.is-disabled .shapeCfgRow,
.shapeCfgSection.is-disabled .shapeMotionGroup{
  opacity:.48;
}

.shapeCfgRow.is-disabled span,
.shapeCfgSection.is-disabled .shapeCfgRow span,
.shapeCfgSection.is-disabled .shapeMotionGroupTitle{
  color:rgba(176,176,182,.56);
}

.shapeCfgRow.is-disabled input,
.shapeCfgRow.is-disabled select,
.shapeCfgRow.is-disabled button,
.shapeCfgSection.is-disabled input:disabled,
.shapeCfgSection.is-disabled select:disabled,
.shapeCfgSection.is-disabled button:disabled{
  cursor:not-allowed;
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:rgba(176,176,182,.62);
  box-shadow:none;
}

.shapeCfgSection.is-disabled > summary{
  color:rgba(188,188,194,.62);
}

.shapeCfgRow--dir{
  grid-template-columns:1fr;
}

.shapeCfgRow--platform{
  grid-template-columns:minmax(0, 1fr) 96px;
}

.shapeCfgRow--motionPreview{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.shapeCfgRow--motionPreviewFooter{
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
}

.shapeCfgRow--motionAdvancedToggle{
  grid-template-columns:minmax(0, 1fr) max-content;
}

.shapeCfgRow--motionTrigger{
  grid-template-columns:92px minmax(0, 1fr);
}

.shapeCfgRow--motionType{
  grid-template-columns:92px minmax(0, 1fr);
}

.shapeMotionGroup{
  position:relative;
  z-index:2;
  display:grid;
  gap:7px;
  padding:8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.055);
  background:
    url("../assets/textures/ui/shape-panel-noise.png") repeat,
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.02) 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 74% 68%, rgba(0,0,0,.07) 0, rgba(0,0,0,0) 28%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016));
  background-size:128px 128px, auto, auto, auto;
  background-position:0 0, 0 0, 0 0, 0 0;
  background-blend-mode:multiply, normal, normal, normal;
  overflow:visible;
}

.shapeMotionGroup + .shapeMotionGroup{
  margin-top:8px;
}

.shapeMotionGroup.is-hidden{
  display:none;
}

.shapeMotionGroupTitle{
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--shape-panel-text-muted);
}

.shapeMotionGroup .shapeCfgRow{
  grid-template-columns:92px minmax(0, 1fr);
  gap:7px;
}

.shapeMotionGroup .shapeCfgRow > input,
.shapeMotionGroup .shapeCfgRow > select{
  width:100%;
  max-width:112px;
  justify-self:start;
}

.shapeMotionGroup .shapeCfgRow > select[data-rotation-preset]{
  max-width:236px;
}

.shapeMotionPresetHint{
  margin-top:-2px;
  padding:0 2px;
  font-size:10px;
  line-height:1.3;
  color:rgba(201,217,248,.76);
}

.shapeCfgRow--toggleRight > input[type="checkbox"]{
  justify-self:end;
}

.shapeCfgRow--modeFollowPath{
  grid-template-columns:92px minmax(0, 1fr);
}

.shapeCfgInlinePair{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
}

.shapeCfgInlinePair > select{
  width:100%;
  max-width:112px;
}

.shapeCfgInlineToggle{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:var(--shape-panel-text-muted);
  font-size:10px;
  line-height:1.1;
  white-space:nowrap;
}

.shapeCfgInlineToggle.is-hidden{
  display:none;
}

.shapeCfgInlineToggle > input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
}

.shapeCfgRow--split{
  grid-template-columns:92px minmax(0, 1fr);
}

.shapeCfgSplitInputs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
  gap:6px;
  width:100%;
  max-width:236px;
}

.shapeCfgMiniField{
  display:grid;
  gap:4px;
}

.shapeCfgMiniField > span{
  min-width:0;
  font-size:10px;
  color:var(--shape-panel-text-soft);
  white-space:nowrap;
}

.shapeCfgMiniField > input,
.shapeCfgMiniField > select{
  width:100%;
  max-width:none;
}

.shapeMotionGroup--advanced{
  padding:8px;
}

.shapeMotionGroup--advanced > summary{
  list-style:none;
  position:relative;
  padding:0 16px 0 0;
  cursor:pointer;
  user-select:none;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--shape-panel-text-muted);
}

.shapeMotionGroup--advanced > summary::-webkit-details-marker{
  display:none;
}

.shapeMotionGroup--advanced > summary::after{
  content:"▾";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--shape-panel-text-soft);
  transition:transform .16s ease;
}

.shapeMotionGroup--advanced[open] > summary::after{
  transform:translateY(-50%) rotate(180deg);
}

.shapeMotionGroup--advanced > .shapeConfigGrid{
  padding:6px 0 0;
  gap:7px;
}

.shapeConfigGrid--compact{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}

.shapeMotionGroup--playback{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
}

.shapeMotionTypeControl{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:100%;
}

.shapeMotionTypeControl > select{
  width:100%;
  max-width:112px;
  flex:0 0 112px;
}

.shapeMotionFlowGuide{
  display:block;
  padding:6px 8px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}

.shapeMotionFlowGuide:not(.is-expanded){
  background:rgba(255,255,255,.025);
}

.shapeMotionFlowGuide:not(.is-expanded):hover{
  background:rgba(255,255,255,.05);
}

.shapeMotionFlowGuide.is-hidden{
  display:none;
}

.shapeMotionFlowToggle{
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  text-align:left;
  cursor:pointer;
  color:inherit;
  font:inherit;
}

.shapeMotionFlowToggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  border-radius:6px;
}

.shapeMotionFlowGuideTitle{
  display:inline;
  font-size:10px;
  line-height:1.1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--shape-panel-text-muted);
  white-space:nowrap;
  margin-right:6px;
}

.shapeMotionFlowGuideText{
  display:inline;
  font-size:11px;
  line-height:1.3;
  color:rgba(210,210,216,.72);
}

.shapeMotionFlowGuide:not(.is-expanded) .shapeMotionFlowGuideText{
  color:rgba(172,172,178,.56);
}

.shapeMotionFlowGuideEmphasis{
  font-weight:600;
}

.shapeMotionFlowGuide:not(.is-expanded) .shapeMotionFlowGuideEmphasis{
  color:rgba(196,196,202,.66);
}

.shapeMotionModeBtn{
  justify-self:end;
  min-height:22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
  color:var(--shape-panel-text-muted);
  font-size:10px;
  line-height:1;
  padding:0 10px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .14s ease, color .14s ease;
}

.shapeMotionModeBtn.is-hidden{
  display:none;
}

.shapeMotionModeBtn--inline{
  justify-self:start;
  padding:0 10px;
}

.shapeMotionModeBtn:hover{
  background:rgba(255,255,255,.06);
  color:var(--shape-panel-text);
}

.shapeMotionModeBtn:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}

.shapeMotionModeBtn.is-active,
.shapeMotionModeBtn[aria-pressed="true"]{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.1);
  color:var(--shape-panel-accent);
}

.shapeMotionModeBtn.is-active:hover,
.shapeMotionModeBtn[aria-pressed="true"]:hover{
  background:rgba(255,255,255,.12);
}

.shapeMotionTriggerControl{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:100%;
}

.shapeMotionTriggerControl > select{
  width:100%;
  max-width:112px;
  flex:0 0 112px;
}

.shapeCfgSection[data-shape-section="motion"] > .shapeConfigGrid > .shapeCfgRow:not(.shapeCfgRow--motionPreview):not(.shapeCfgRow--motionAdvancedToggle){
  grid-template-columns:92px minmax(0, 1fr);
}

.shapeCfgSection[data-shape-section="motion"] > .shapeConfigGrid > .shapeCfgRow:not(.shapeCfgRow--motionPreview):not(.shapeCfgRow--motionAdvancedToggle) > input,
.shapeCfgSection[data-shape-section="motion"] > .shapeConfigGrid > .shapeCfgRow:not(.shapeCfgRow--motionPreview):not(.shapeCfgRow--motionAdvancedToggle) > select{
  width:100%;
  max-width:112px;
  justify-self:start;
}

.shapeCfgRow--motionPathToggles{
  grid-template-columns:minmax(0, 1fr);
  align-items:center;
}

.shapeCfgRow--motionPathToggles > span{
  display:none;
}

.shapeMotionPathTogglePair{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  width:100%;
  gap:6px;
}

.shapeMotionPathToggleField{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
}

.shapeMotionPathToggleField > span:first-child{
  min-width:0;
  white-space:nowrap;
}

.shapeMotionPathToggle{
  position:relative;
  width:52px;
  height:22px;
  display:inline-flex;
}

.shapeCfgRow .shapeMotionPathToggle > input[type="checkbox"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}

.shapeMotionPathToggleUi{
  position:relative;
  width:100%;
  height:100%;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.2);
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.shapeMotionPathToggleUi::after{
  content:"OFF";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(186,186,192,.82);
  transition:color .16s ease;
}

.shapeMotionPathToggle > input[type="checkbox"]:checked + .shapeMotionPathToggleUi{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(7,11,24,.28);
}

.shapeMotionPathToggle > input[type="checkbox"]:checked + .shapeMotionPathToggleUi::after{
  content:"ON";
  color:rgba(234,246,255,.98);
}

.shapeMotionPathToggle > input[type="checkbox"]:active + .shapeMotionPathToggleUi{
  transform:translateY(1px);
}

.shapeMotionPathToggle > input[type="checkbox"]:focus-visible + .shapeMotionPathToggleUi{
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.shapeMotionAdvancedToggle{
  min-height:0;
  border:0;
  background:transparent;
  color:var(--shape-panel-text-soft);
  font-size:10px;
  line-height:1.1;
  padding:4px 7px;
  border-radius:6px;
  cursor:pointer;
  justify-self:end;
  transition:background-color .14s ease, color .14s ease;
}

.shapeMotionAdvancedToggle:hover{
  color:var(--shape-panel-text);
  background:rgba(255,255,255,.06);
}

.shapeMotionNearOptionsToggle{
  justify-self:start;
}

.shapeMotionNearOptionsToggle.is-open{
  color:var(--shape-panel-text);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.shapeMotionAdvancedToggle.is-open{
  color:var(--shape-panel-text);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.shapeMotionAdvancedGroup{
  position:relative;
  z-index:2;
  display:grid;
  gap:6px;
  padding:8px 8px 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  overflow:visible;
}

.shapeMotionAdvancedScope{
  display:grid;
  gap:6px;
}

.shapeMotionAdvancedScope + .shapeMotionAdvancedScope{
  margin-top:2px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.07);
}

.shapeMotionAdvancedScopeTitle{
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--shape-panel-text-muted);
}

.shapeMotionAdvancedScopeHint{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:4px;
  font-size:9px;
  letter-spacing:.02em;
  color:rgba(170,170,176,.56);
  text-transform:none;
  font-weight:500;
}

.shapeMotionAdvancedScopeHint::before{
  content:"·";
  line-height:1;
  color:rgba(156,156,162,.52);
}

.shapeMotionAdvancedScope.is-inactive .shapeMotionAdvancedScopeTitle{
  color:rgba(168,168,174,.56);
}

.shapeMotionAdvancedScope.is-inactive .shapeMotionAdvancedScopeHint{
  color:rgba(154,154,160,.44);
}

.shapeCfgRow--nodeOnReach{
  position:relative;
  z-index:400;
  align-items:start;
}

.shapeCfgRow--nodeOnReach:hover,
.shapeCfgRow--nodeOnReach:focus-within{
  z-index:520;
}

.shapeNodeOnReachControl{
  position:relative;
  display:block;
  width:100%;
  max-width:112px;
  justify-self:start;
  z-index:1;
}

.shapeNodeOnReachControl.is-open{
  z-index:820;
}

.shapeNodeOnReachNative{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
  clip-path:inset(50%);
}

.shapeNodeOnReachTrigger{
  width:100%;
  min-height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--shape-panel-text);
  font-size:11px;
  line-height:1.2;
  text-align:left;
  padding:4px 28px 4px 8px;
  cursor:pointer;
  position:relative;
}

.shapeNodeOnReachTriggerCaret{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  color:var(--shape-panel-text-soft);
  transition:transform .14s ease;
}

.shapeNodeOnReachTrigger:hover{
  border-color:rgba(255,255,255,.14);
}

.shapeNodeOnReachTrigger:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.shapeNodeOnReachControl.is-open .shapeNodeOnReachTriggerCaret{
  transform:translateY(-50%) rotate(180deg);
}

.shapeNodeOnReachMenu{
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  z-index:821;
  display:none;
  min-width:100%;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(28,28,32,.98);
  box-shadow:0 14px 28px rgba(0,0,0,.38);
  overflow:visible;
}

.shapeNodeOnReachControl.is-open .shapeNodeOnReachMenu{
  display:grid;
}

.shapeNodeOnReachMenuItem,
.shapeNodeOnReachOption{
  min-height:28px;
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--shape-panel-text);
  font-size:12px;
  line-height:1.2;
  text-align:left;
  padding:5px 10px;
  cursor:pointer;
}

.shapeNodeOnReachMenuItem + .shapeNodeOnReachMenuItem,
.shapeNodeOnReachMenuItem + .shapeNodeOnReachMenuItemGroup,
.shapeNodeOnReachMenuItemGroup + .shapeNodeOnReachMenuItem,
.shapeNodeOnReachOption + .shapeNodeOnReachOption{
  border-top:1px solid rgba(255,255,255,.06);
}

.shapeNodeOnReachMenuItem:hover,
.shapeNodeOnReachMenuItem:focus-visible,
.shapeNodeOnReachOption:hover,
.shapeNodeOnReachOption:focus-visible{
  outline:none;
  background:rgba(255,255,255,.08);
  color:var(--shape-panel-text);
}

.shapeNodeOnReachMenuItem.is-active,
.shapeNodeOnReachOption.is-active{
  background:rgba(255,255,255,.1);
  color:var(--shape-panel-text);
}

.shapeNodeOnReachMenuItemGroup{
  position:relative;
  z-index:1;
}

.shapeNodeOnReachMenuItemGroup:hover,
.shapeNodeOnReachMenuItemGroup:focus-within{
  z-index:2;
}

.shapeNodeOnReachMenuItem--submenu{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
}

.shapeNodeOnReachMenuArrow{
  font-size:11px;
}

.shapeNodeOnReachSublist{
  position:absolute;
  top:0;
  right:calc(100% - 1px);
  left:auto;
  z-index:980;
  min-width:232px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(28,28,32,.98);
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  overflow:hidden;
  visibility:hidden;
  opacity:0;
  transform:translateX(4px);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.shapeNodeOnReachMenuItemGroup:hover .shapeNodeOnReachSublist,
.shapeNodeOnReachMenuItemGroup:focus-within .shapeNodeOnReachSublist{
  visibility:visible;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

.shapeNodeOnReachPortalHost{
  position:absolute;
  inset:0;
  z-index:980;
  pointer-events:none;
}

.shapeNodeOnReachSublist--portal{
  position:absolute;
  top:0;
  left:0;
  right:auto;
  z-index:981;
  pointer-events:none;
}

.shapeNodeOnReachSublist--portal.is-open{
  visibility:visible;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

.shapeNodeOnReachSublistTitle{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--shape-panel-text-muted);
  margin:0;
  padding:5px 9px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  text-align:center;
}

.shapeNodeOnReachSubmenu{
  display:grid;
  gap:0;
}

.shapeNodeOnReachSubmenu .shapeNodeOnReachOption{
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.shapeCfgRow--nodeOnReach[data-node-on-reach-value="none"] .shapeNodeOnReachMenuItem[data-node-on-reach-option="none"],
.shapeCfgRow--nodeOnReach[data-node-on-reach-value="reverse"] .shapeNodeOnReachMenuItem[data-node-on-reach-option="reverse"],
.shapeCfgRow--nodeOnReach[data-node-on-reach-value="stop"] .shapeNodeOnReachMenuItem[data-node-on-reach-option="stop"],
.shapeCfgRow--nodeOnReach[data-node-on-reach-value="hide"] .shapeNodeOnReachMenuItem[data-node-on-reach-option="hide"],
.shapeCfgRow--nodeOnReach[data-node-hide-effect="clean"] .shapeNodeOnReachOption[data-hide-effect="clean"],
.shapeCfgRow--nodeOnReach[data-node-hide-effect="stylized"] .shapeNodeOnReachOption[data-hide-effect="stylized"],
.shapeCfgRow--nodeOnReach[data-node-hide-effect="blink"] .shapeNodeOnReachOption[data-hide-effect="blink"],
.shapeCfgRow--nodeOnReach[data-node-hide-effect="crumble"] .shapeNodeOnReachOption[data-hide-effect="crumble"]{
  background:rgba(255,255,255,.1);
  color:var(--shape-panel-text);
}

.shapeMotionAdvancedGroup .shapeCfgRow.is-inactive > span{
  color:rgba(174,174,180,.56);
}

.shapeMotionAdvancedGroup .shapeCfgRow.is-inactive input,
.shapeMotionAdvancedGroup .shapeCfgRow.is-inactive select{
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:rgba(177,177,183,.66);
  opacity:.7;
}

.shapeMotionAdvancedGroup .shapeCfgRow.is-inactive button{
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:rgba(177,177,183,.66);
  opacity:.7;
}

.shapeMotionAdvancedGroup.is-hidden{
  display:none;
}

.platformControls{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.shapeMotionPreviewControls{
  display:flex;
  align-items:stretch;
  min-height:28px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

.shapeMotionPreviewControls.is-disabled{
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}

.shapeMotionPreviewBtn{
  min-width:26px;
  min-height:28px;
  border:0;
  background:transparent;
  color:var(--shape-panel-text);
  font-size:11px;
  line-height:1;
  padding:0 5px;
  cursor:pointer;
}

.shapeMotionPreviewBtn:disabled{
  cursor:not-allowed;
  color:rgba(189,189,195,.74);
}

.shapeMotionPreviewBtn--icon{
  min-width:30px;
}

.shapeMotionPreviewControls > .shapeMotionPreviewBtn + .shapeMotionPreviewBtn{
  border-left:1px solid rgba(255,255,255,.06);
}

.shapeMotionPreviewBtn:hover{
  background:rgba(255,255,255,.06);
}

.shapeMotionPreviewControls.is-disabled .shapeMotionPreviewBtn:hover{
  background:transparent;
}

.shapeMotionPreviewBtn.is-playing{
  color:var(--shape-panel-accent);
}

.shapeMotionPreviewRate{
  width:46px;
  min-width:46px;
  flex:0 0 46px;
  position:relative;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:11px;
  color:var(--shape-panel-text-muted);
  padding:0 4px;
  border-left:1px solid rgba(255,255,255,.06);
  transition:background-color .14s ease, color .14s ease;
}

.shapeMotionPreviewRate:disabled{
  cursor:not-allowed;
  color:rgba(189,189,195,.76);
}

.shapeMotionPreviewRate:hover{
  background:rgba(255,255,255,.06);
}

.shapeMotionPreviewControls.is-disabled .shapeMotionPreviewRate:hover{
  background:transparent;
  color:rgba(189,189,195,.76);
}

.shapeMotionPreviewRate::after{
  content:"⏹";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1;
  color:var(--shape-panel-text);
  opacity:0;
  transform:scale(.95);
  transition:opacity .12s ease, transform .12s ease;
  pointer-events:none;
}

.shapeMotionPreviewRate:hover::after,
.shapeMotionPreviewRate:focus-visible::after{
  opacity:1;
  transform:scale(1);
}

.shapeMotionPreviewRate:disabled::after{
  opacity:0;
  transform:scale(.95);
}

.shapeMotionPreviewRate:hover,
.shapeMotionPreviewRate:focus-visible{
  color:transparent;
}

.shapeMotionPreviewControls.is-disabled .shapeMotionPreviewRate:hover,
.shapeMotionPreviewControls.is-disabled .shapeMotionPreviewRate:focus-visible{
  color:rgba(189,189,195,.76);
}

.shapeMotionPreviewStepStack{
  display:flex;
  flex-direction:column;
  min-width:26px;
  border-left:1px solid rgba(255,255,255,.06);
}

.shapeMotionPreviewBtn--stack{
  min-width:26px;
  min-height:14px;
  flex:1 1 0;
}

.shapeMotionPreviewStepStack .shapeMotionPreviewBtn + .shapeMotionPreviewBtn{
  border-top:1px solid rgba(255,255,255,.06);
}

.shapeMotionPreviewEasing{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:0;
  margin-left:auto;
  flex:0 0 auto;
}

.shapeMotionPreviewEasing > span{
  color:var(--shape-panel-text-muted);
  font-size:11px;
  white-space:nowrap;
}

.shapeMotionPreviewEasing > select{
  min-height:24px;
  min-width:124px;
  width:auto;
  max-width:124px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--shape-panel-text);
  font-size:10px;
  line-height:1.1;
  padding:0 10px;
}

.shapeMotionPreviewEasing > select.jsFollowPathEasingSelect{
  min-width:98px;
  max-width:98px;
  width:98px;
}

.shapeMotionPreviewEasingValue{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--shape-panel-text);
  font-size:10px;
  line-height:1.1;
  padding:0 9px;
}

.shapeCfgRow span{
  min-width:0;
  white-space:nowrap;
  color:var(--shape-panel-text-muted);
}

.shapeCfgRow input,
.shapeCfgRow select{
  width:100%;
  min-height:26px;
  border-radius:8px;
  border:5px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--shape-panel-text);
  font-size:11px;
  padding:4px 6px;
}

.shapeCfgRow input:focus-visible,
.shapeCfgRow select:focus-visible,
.shapeConfigTab:focus-visible,
.shapeCfgActionBtn:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
}

.shapeCfgDualInput{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 66px;
  align-items:center;
  gap:6px;
}

.shapeCfgRow.jsMaterialBandValueRow{
  grid-template-columns:minmax(0, 1fr) 168px;
}

.shapeCfgRow.jsMaterialBandValueRow .shapeCfgDualInput{
  grid-template-columns:minmax(0, 1fr) 56px;
}

.shapeCfgDualInput input[type="range"]{
  width:100%;
  min-height:22px;
  padding:0;
}

.shapeCfgDualInput input[type="number"]{
  width:100%;
}

.shapeCfgActionBtn{
  width:100%;
  min-height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--shape-panel-text);
  font-size:11px;
  line-height:1.1;
  padding:4px 6px;
  cursor:pointer;
}

.shapeCfgActionBtn:hover{
  border-color:rgba(255,255,255,.14);
}

.shapeCfgActionBtn.is-active{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.1);
  color:var(--shape-panel-text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.shapeCfgRow--randomShape{
  grid-template-columns:1fr;
  align-items:center;
}

.shapeRandomControl{
  display:grid;
  gap:6px;
  width:max-content;
}

.shapeRandomActions{
  display:flex;
  align-items:stretch;
  gap:7px;
}

.shapeRandomSplit{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.045);
}

.shapeSplitMainBtn,
.shapeSplitMenuBtn{
  min-height:24px;
  border:0;
  background:transparent;
  color:var(--shape-panel-text);
  font-size:10px;
  line-height:1.1;
  padding:3px 6px;
  cursor:pointer;
}

.shapeSplitMainBtn,
.shapeSplitMenuBtn,
.shapeEditToggleBtn,
.shapeRandomMenuOption{
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

.shapeSplitMainBtn{
  min-width:122px;
  text-align:left;
  background:rgba(255,255,255,.035);
}

.shapeSplitMainBtn:hover,
.shapeSplitMenuBtn:hover{
  background:rgba(255,255,255,.06);
}

.shapeSplitMenuBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  border-left:1px solid rgba(255,255,255,.08);
}

.shapeEditToggleBtn{
  min-height:24px;
  min-width:78px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--shape-panel-text-muted);
  font-size:10px;
  line-height:1.1;
  padding:3px 8px;
  cursor:pointer;
  text-align:center;
}

.shapeEditToggleBtn:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}

.shapeEditToggleBtn.is-active{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.1);
  color:var(--shape-panel-text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.shapeSplitCaret{
  font-size:9px;
  display:inline-block;
  transition:transform .18s ease;
}

.shapeSplitMenuBtn[aria-expanded="true"] .shapeSplitCaret{
  transform:rotate(180deg);
}

.shapeRandomMenu{
  display:none;
  width:100%;
  min-width:224px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(28,28,32,.98);
  padding:7px;
  gap:6px;
}

.shapeRandomMenu.is-open{
  display:grid;
}

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

.shapeRandomMenuOption{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:var(--shape-panel-text);
  font-size:10px;
  line-height:1.15;
  padding:4px;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  cursor:pointer;
}

.shapeRandomMenuOption:hover{
  border-color:rgba(255,255,255,.14);
}

.shapeRandomMenuOption.is-active{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.1);
}

.shapeRandomMenuOption.is-disabled,
.shapeRandomMenuOption:disabled{
  opacity:.5;
  cursor:not-allowed;
  border-color:rgba(255,255,255,.05);
  background:rgba(255,255,255,.025);
}

.shapeRandomMenuOption.is-disabled:hover,
.shapeRandomMenuOption:disabled:hover{
  border-color:rgba(255,255,255,.05);
}

.shapeRandomMenuSliderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--shape-panel-text-muted);
  margin-top:2px;
}

.shapeRandomMenu input[type="range"]{
  width:100%;
  min-height:22px;
}

.shapeRandomMenuField{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 86px;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--shape-panel-text-muted);
}

.shapeRandomMenuField--range{
  grid-template-columns:minmax(0, 1fr) 116px;
}

.shapeRandomMenuFieldLabelWithToggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  white-space:nowrap;
}

.shapeRandomMenuFieldLabelWithToggle > input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 auto;
}

.shapeRandomMenuRange{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:4px;
  width:100%;
}

.shapeRandomMenuRangeDash{
  color:rgba(188,188,194,.86);
  font-size:10px;
  line-height:1;
}

.shapeRandomMenuField--range .shapeRandomMenuRange input[type="number"]{
  min-height:22px;
  font-size:10px;
  padding:2px 5px;
}

.shapeRandomMenuField > span{
  min-width:0;
  white-space:nowrap;
}

.shapeRandomMenuField input[type="number"]{
  width:100%;
  min-height:24px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--shape-panel-text);
  font-size:11px;
  line-height:1.1;
  padding:3px 6px;
}

.shapeCfgRow select{
  /* Use a mostly solid background to keep text readable when list opens. */
  background:rgba(30,30,34,.98);
  border-color:rgba(255,255,255,.1);
  line-height:1.2;
}

.shapeCfgRow select:hover{
  border-color:rgba(255,255,255,.14);
}

.shapeCfgRow select:focus{
  outline:none;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.shapeCfgRow select option{
  background:#232327;
  color:#f2f2f5;
}

.shapeCfgRow select option:checked{
  background:#4a4a52;
  color:#ffffff;
  font-weight:600;
}

.shapeCfgRow input[type="checkbox"]{
  width:18px;
  height:18px;
  justify-self:start;
  padding:0;
}

.shapeCfgRow input[type="color"]{
  padding:2px;
  min-height:26px;
  cursor:pointer;
}

.oneWayDirPicker{
  display:none;
  align-items:center;
  justify-content:flex-start;
}

.oneWayDirPicker.is-visible{
  display:flex;
}

.oneWayDirBtn{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--shape-panel-text);
  border-radius:8px;
  width:28px;
  min-height:28px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.oneWayDirBtn:hover{
  border-color:rgba(255,255,255,.14);
}

/* Shape Properties redesign (v2) */
.shapeConfigPanel{
  width:386px;
  max-height:calc(100% - 20px);
  padding:8px;
  border-radius:21px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(27,37,65,1);
  box-shadow:
    0 26px 54px rgba(3,8,20,.56),
    0 8px 18px rgba(3,8,20,.3),
    inset 0 1px 0 rgba(255,255,255,.08);
  color:rgba(230,230,255,1);
}

.shapeConfigPanel::before,
.shapeConfigPanel::after{
  display:none;
}

.shapeConfigToggle{
  right:450px;
}

.shapeConfigHeader{
  display:grid;
  gap:10px;
  margin-bottom:12px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.shapeConfigTitle{
  margin:5px;
  color:rgba(230,230,255,0.5);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
}

.shapeConfigTabs{
  margin:0;
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  gap:6px;
}

.shapeConfigTab{
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:transparent;
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:650;
}

.shapeConfigTab:hover{
  border-color:rgba(255,255,255,.24);
  color:rgba(230,230,255,1);
}

.shapeConfigTab.is-active{
  background:rgba(27,37,65,1.0);
  border-color:rgba(255,255,255,.24);
  color:rgba(230,230,255,1);
  box-shadow:none;
}

.shapeConfigSections{
  gap:10px;
}

.shapeCfgSection{
  display:grid;
  gap:8px;
  border-radius:0;
  border:0;
  background:transparent;
  overflow:visible;
}

.shapeCfgSection > summary{
  display:block;
  margin:14px 0 0;
  padding:0 2px;
  color:rgba(230,230,255,.52);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.shapeCfgSection > summary::after{
  content:none;
  display:none;
}

.shapeCfgSection > .shapeConfigGrid{
  padding:12px 14px 14px;
  margin-bottom:5px;
  gap:10px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 0px rgba(0, 0, 0, .28), 0 0 0 1px rgba(20, 30, 55, .35);
}

.shapeCfgRow{
  grid-template-columns:minmax(0, 1fr) 156px;
  gap:10px;
  font-size:13px;
}

.shapeCfgRow span{
  color:rgba(230,230,255,1);
  font-size:13px;
}

.shapeCfgRow input,
.shapeCfgRow select,
.shapeCfgActionBtn{
  min-height:34px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(27,37,65,.5);
  color:rgba(230,230,255,1);
  font-size:13px;
  padding:6px 10px;
}

.shapeCfgRow input::placeholder{
  color:rgba(230,230,255,.72);
}

.shapeCfgRow select{
  background:rgba(27,37,65,.5);
}

.shapeCfgRow select option{
  background:rgb(27,37,65);
  color:rgba(230,230,255,1);
}

.shapeCfgRow input:focus-visible,
.shapeCfgRow select:focus-visible,
.shapeCfgActionBtn:focus-visible,
.shapeConfigTab:focus-visible{
  border-color:rgba(255,255,255,.32);
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
}

.shapeCfgRow input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  display:inline-block;
  width:42px;
  min-width:42px;
  height:24px;
  min-height:24px;
  max-height:24px;
  align-self:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.14);
  padding:0;
  position:relative;
  justify-self:end;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}

.shapeCfgRow input[type="checkbox"]::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  top:2px;
  left:2px;
  background:rgba(230,230,255,.95);
  transition:transform .18s ease;
}

.shapeCfgRow input[type="checkbox"]:checked{
  background:rgba(27,37,65,.5);
  border-color:rgba(230,230,255,.36);
}

.shapeCfgRow input[type="checkbox"]:checked::before{
  transform:translateX(18px);
}

.shapeCfgRow input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(27,37,65,.5);
  position:relative;
}

.shapeCfgRow input[type="radio"]::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:transparent;
}

.shapeCfgRow input[type="radio"]:checked::before{
  background:rgba(230,230,255,.95);
}

.shapeCfgRow--shapeGenerator{
  grid-template-columns:1fr;
}

.shapeGeneratorPanel{
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.shapeGeneratorTop{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}

.shapeModeSwitch{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
  gap:6px;
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.shapeModeBtn{
  min-height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:transparent;
  color:rgba(220,228,245,.5);
  font-size:13px;
  font-weight:640;
  cursor:pointer;
}

.shapeModeBtn.is-active{
  background:rgba(27,37,65,1.0);
  border-color:rgba(255,255,255,.24);
  color:rgba(230,230,255,1);
}

.shapeEditToggleBtn{
  min-height:34px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(230,230,255,1);
  font-size:13px;
}

.shapeEditToggleBtn.is-active{
  background:rgba(27,37,65,.5);
  border-color:rgba(255,255,255,.28);
}

.shapeEditToggleBtn--icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:136px;
}

.shapeEditToggleBtn--icon img{
  width:14px;
  height:14px;
  display:block;
  filter:brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(363%) hue-rotate(184deg) brightness(103%) contrast(106%);
}

.shapeGeneratorDivider{
  height:1px;
  background:rgba(255,255,255,.18);
  opacity:.75;
}

.shapeGeneratorBasic{
  display:grid;
  gap:10px;
}

.shapeGeneratorRandom{
  display:grid;
  gap:10px;
}

.shapeGeneratorTip{
  margin:0;
  color:rgba(230,230,255,.8);
  font-size:12px;
  line-height:1.35;
}

.shapeRandomActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.shapeRandomActions.is-hidden{
  display:flex !important;
  visibility:hidden;
  pointer-events:none;
}

.shapeSplitMainBtn--generate{
  flex:0 0 auto;
  min-width:112px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(250,250,250,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(0,0,0,.16);
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:650;
  text-align:center;
}

.shapeSplitMenuBtn--settings{
  min-width:36px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(255,255,255,.05);
}

.shapeSplitMenuBtn--settings img{
  width:14px;
  height:14px;
  display:block;
}

.shapeRandomMenu{
  min-width:0;
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  padding:10px;
  gap:10px;
}

.shapeRandomMenuGrid{
  gap:8px;
}

.shapeRandomMenuOption{
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(27,37,65,.5);
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:600;
}

.shapeRandomMenuOption:hover,
.shapeRandomMenuOption.is-active{
  border-color:rgba(255,255,255,.28);
}

.shapeRandomMenuSliderRow{
  margin-top:0;
  font-size:13px;
  color:rgba(230,230,255,1);
}

.shapeRandomMenu input[type="range"]{
  accent-color:rgba(230,230,255,.95);
}

.shapeRandomMenuField{
  grid-template-columns:minmax(0, 1fr) 170px;
  gap:10px;
  font-size:13px;
  color:rgba(230,230,255,1);
}

.shapeRandomMenuField--range{
  grid-template-columns:minmax(0, 1fr) 238px;
}

.shapeRandomMenuRange{
  gap:6px;
}

.shapeRandomMenuRange--labeled{
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items:center;
}

.shapeRandomMenuRangeDash{
  color:rgba(230,230,255,.9);
  font-size:12px;
}

.shapeRandomMenuRangeSuffix{
  color:rgba(230,230,255,.9);
  font-size:12px;
}

.shapeRandomMenuField--range .shapeRandomMenuRange input[type="number"]{
  min-height:34px;
  border-radius:11px;
  font-size:13px;
  padding:6px 10px;
}

.shapeRandomMenuField input[type="number"]{
  min-height:34px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(27,37,65,.5);
  color:rgba(230,230,255,1);
  font-size:13px;
}

.shapeConfigPanel{
  width:419px;
}

.shapeConfigTitle{
  text-align:center;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.shapeCfgSection--general{
  border:0;
  background:transparent;
  padding:0;
}

.shapeCfgSection--general > summary{
  display:none;
}

.shapeCfgSection--general > .shapeGeneralCardsShell > .shapeGeneralStack{
  display:grid;
  gap:12px;
}

.shapeCfgCard{
  display:grid;
  gap:8px;
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
  overflow:visible;
}

.shapeCfgCardTitle{
  display:block;
  list-style:none;
  margin:14px 0 0;
  padding:0 2px;
  color:rgba(230,230,255,.52);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
}

.shapeCfgCardTitle::-webkit-details-marker{
  display:none;
}

.shapeCfgCardTitle::after{
  content:none;
  display:none;
}

.shapeCfgCardBody{
  display:grid;
  gap:10px;
  padding:12px;
  margin-bottom:5px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 0px rgba(0, 0, 0, .28), 0 0 0 1px rgba(20, 30, 55, .35);
}

.shapeCfgCard:not([open]) > .shapeCfgCardBody{
  display:none;
}

.shapeStyleCard{
  display:grid;
  gap:12px;
  padding:12px;
  margin-bottom:5px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 0px rgba(0, 0, 0, .28), 0 0 0 1px rgba(20, 30, 55, .35);
}

.shapeStyleModeRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 1.7fr;
  gap:12px;
  align-items:center;
}

.shapeStyleModeLabel{
  color:rgba(230,230,255,.68);
  font-size:14px;
  font-weight:650;
}

.shapeStyleModeSwitch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
}

.textConfigShell .textAlignModeSwitch{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.textConfigShell .textAlignModeSwitch .shapeStyleModeBtn{
  min-width:0;
  white-space:nowrap;
}

.shapeStyleModeBtn{
  min-height:38px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(230,230,255,.62);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.shapeStyleModeBtn.is-active{
  background:rgba(27,37,65,1.0);
  color:rgba(230,230,255,1);
}

.shapeStyleDivider{
  height:1px;
  background:rgba(255,255,255,.12);
}

.shapeStyleDivider--material{
  margin-top:2px;
}

.shapeStyleHiddenInput{
  display:none !important;
}

.shapeStyleSolidSection,
.shapeStyleMaterialSection{
  display:grid;
  gap:14px;
}

.shapeStyleRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
}

.shapeStyleRow > span:first-child{
  color:rgba(230,230,255,.68);
  font-size:14px;
  font-weight:600;
}

.shapeStyleControlCluster{
  display:grid;
  grid-template-columns:30px 82px;
  gap:12px;
  align-items:center;
  justify-content:start;
}

.shapeStyleColorControl{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:2px solid rgba(27,37,65,.8);
  border-radius:999px;
  overflow:hidden;
  background:repeating-linear-gradient(45deg, rgba(153,164,184,.7) 0 4px, rgba(113,124,144,.7) 4px 8px);
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  cursor:pointer;
}

.shapeStyleColorSwatch{
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events:none;
}

.shapeStyleControlGhost{
  display:block;
  width:82px;
  height:32px;
}

.shapeStyleColorInput{
  position:absolute;
  inset:0;
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:100%;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  padding:0;
  opacity:0;
}

.shapeStyleColorInput::-webkit-color-swatch-wrapper{
  padding:0;
}

.shapeStyleColorInput::-webkit-color-swatch,
.shapeStyleColorInput::-moz-color-swatch{
  border:none;
  border-radius:999px;
  opacity:0;
}

.shapeStylePillField{
  display:inline-grid;
  grid-auto-flow:column;
  gap:4px;
  align-items:center;
  position:relative;
  min-width:82px;
  padding:0 10px;
  padding-right:28px;
  min-height:32px;
  border-radius:11px;
  background:rgba(27,37,65,1.0);
}

.shapeStyleCard--arrange{
  margin-bottom:5px;
}

.shapeStylePillField--plain{
  grid-auto-flow:initial;
  grid-template-columns:minmax(0, 1fr);
  justify-items:end;
}

.shapeStylePillField.shapeStylePillField--plain input{
  width:44px;
}

.shapeStylePillField input{
  width:32px;
  min-width:0;
  border:0;
  background:transparent;
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:700;
  text-align:right;
  padding:0;
  outline:none;
}

.shapeStylePillField span{
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:700;
}

.shapeStylePillStepper{
  position:absolute;
  top:50%;
  right:5px;
  display:grid;
  gap:2px;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}

.shapeStylePillField:hover .shapeStylePillStepper,
.shapeStylePillField:focus-within .shapeStylePillStepper{
  opacity:1;
  pointer-events:auto;
}

.shapeStylePillStepBtn{
  width:14px;
  height:12px;
  display:grid;
  place-items:center;
  border:0;
  padding:0;
  background:transparent;
  color:rgba(230,230,255,.76);
  font-size:9px;
  line-height:1;
  cursor:pointer;
  border-radius:4px;
}

.shapeStylePillStepBtn:hover{
  color:rgba(230,230,255,1);
  background:rgba(255,255,255,.08);
}

.shapeStylePillField input::-webkit-outer-spin-button,
.shapeStylePillField input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.shapeStylePillField input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}

.shapeStyleMaterialPicker{
  display:grid;
  gap:14px;
}

.shapeStyleMaterialLibraryHeader{
  display:flex;
  justify-content:center;
}

.shapeStyleMaterialTypeSwitch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  width:min(100%, 188px);
  padding:3px;
  border-radius:999px;
  background:rgba(27,37,65,.66);
}

.shapeStyleMaterialTypeBtn{
  min-height:28px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(230,230,255,.58);
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}

.shapeStyleMaterialTypeBtn.is-active{
  background:rgba(230,230,255,.12);
  color:rgba(230,230,255,.96);
}

.shapeStyleMaterialGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px 16px;
}

.shapeStyleMaterialBtn{
  display:grid;
  justify-items:center;
  gap:8px;
  border:0;
  background:transparent;
  color:rgba(230,230,255,.52);
  cursor:pointer;
  padding:0;
}

.shapeStyleMaterialBtn.is-active{
  color:rgba(230,230,255,.82);
}

.shapeStyleMaterialPreview{
  width:82px;
  height:82px;
  border-radius:16px;
  background:rgba(27,37,65,.58);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28), 0 6px 14px rgba(0,0,0,.2);
  overflow:hidden;
}

.shapeStyleMaterialPreview.is-rendered{
  background-color:transparent;
  box-shadow:none;
}

.shapeStyleMaterialBtn.is-active .shapeStyleMaterialPreview{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), 0 8px 18px rgba(0,0,0,.24);
}

.shapeStyleMaterialBtn.is-active .shapeStyleMaterialPreview.is-rendered{
  box-shadow:none;
}

.shapeStyleMaterialName{
  font-size:13px;
  font-weight:650;
}

.shapeStyleMaterialFooter{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:12px;
}

.shapeStyleMaterialDots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  grid-column:2;
  justify-self:center;
}

.shapeStyleMaterialDots.is-hidden{
  visibility:hidden;
}

.shapeStyleMaterialDot{
  width:12px;
  height:12px;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:inset 0 0 0 2px rgba(230,230,255,.52);
  cursor:pointer;
}

.shapeStyleMaterialDot.is-active{
  background:rgba(230,230,255,.95);
  box-shadow:none;
}

.shapeStyleAdvancedBtn{
  min-height:30px;
  padding:0 14px;
  border:1px solid rgba(230,230,255,.1);
  border-radius:10px;
  background:rgba(27,37,65,.34);
  color:rgba(230,230,255,.48);
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  grid-column:3;
  justify-self:end;
}

.shapeStyleAdvancedBtn:hover,
.shapeStyleAdvancedBtn[aria-expanded="true"]{
  background:rgba(27,37,65,.78);
  border-color:rgba(230,230,255,.16);
  color:rgba(230,230,255,.74);
}

.shapeStyleMaterialAdvanced{
  display:grid;
  gap:14px;
}

.shapeStyleMaterialAdvancedTitle{
  color:rgba(230,230,255,.68);
  font-size:14px;
  font-weight:650;
}

.shapeStyleAdvancedPair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.shapeStyleSliderField{
  display:grid;
  gap:8px;
}

.shapeStyleSliderField span{
  color:rgba(230,230,255,.68);
  font-size:13px;
  font-weight:600;
}

.shapeStyleSliderField input[type="range"]{
  width:100%;
  accent-color:rgba(230,230,255,.95);
}

.shapeStyleRow--materialRadius{
  margin-top:2px;
}

.shapeStyleDivider--materialAdvanced{
  margin-top:2px;
}

.shapeStyleModeBtn:focus-visible,
.shapeStyleColorControl:focus-within,
.shapeStyleMaterialBtn:focus-visible,
.shapeStyleMaterialTypeBtn:focus-visible,
.shapeStyleMaterialDot:focus-visible,
.shapeTypeMoreBtn:focus-visible,
.shapeStyleAdvancedBtn:focus-visible,
.shapeStylePillField input:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.16);
}

.customColorPickerPanel{
  position:fixed;
  z-index:11000;
  width:236px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(38, 38, 38, 0.97) 0%, rgba(23, 23, 23, 0.98) 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.55);
  display:none;
  grid-template-columns:1fr;
  gap:8px;
}

.customColorPickerPanel.is-open{
  display:grid;
}

.customColorPickerTop{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 16px 16px;
  gap:8px;
  align-items:stretch;
}

.customColorPickerTop.no-alpha{
  grid-template-columns:minmax(0, 1fr) 16px;
}

.customColorPickerSv{
  --h:0;
  position:relative;
  width:100%;
  height:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, #fff 0%, hsl(var(--h),100%,50%) 100%);
  cursor:crosshair;
  overflow:hidden;
}

.customColorPickerSvKnob{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  pointer-events:none;
}

.customColorPickerTone{
  --cp-r:255;
  --cp-g:255;
  --cp-b:255;
  position:relative;
  width:16px;
  height:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 100%),
    rgb(var(--cp-r),var(--cp-g),var(--cp-b));
  cursor:pointer;
  overflow:hidden;
}

.customColorPickerToneKnob{
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  pointer-events:none;
  background:#0f1722;
}

.customColorPickerAlpha{
  --cp-r:255;
  --cp-g:255;
  --cp-b:255;
  position:relative;
  width:16px;
  height:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(to top, rgba(var(--cp-r),var(--cp-g),var(--cp-b),1) 0%, rgba(var(--cp-r),var(--cp-g),var(--cp-b),0) 100%),
    repeating-linear-gradient(45deg, #8390a3 0 6px, #667284 6px 12px);
  cursor:pointer;
  overflow:hidden;
}

.customColorPickerAlpha.is-hidden{
  display:none;
}

.customColorPickerAlphaKnob{
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  pointer-events:none;
  background:#0f1722;
}

.customColorPickerHue{
  width:100%;
  height:14px;
  margin:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.customColorPickerHue::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  background:#0f1722;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}

.customColorPickerHue::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #eef4ff;
  background:#0f1722;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}

.customColorPickerMeta{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:8px;
  align-items:center;
}

.customColorPickerPreview{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  background:#222;
}

.customColorPickerHex{
  width:100%;
  height:24px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background:#191919;
  color:#e7f0fb;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  padding:0 7px;
  outline:none;
}

.customColorPickerHex:focus{
  border-color:#6ea8ff;
  box-shadow:0 0 0 2px rgba(110, 168, 255, 0.2);
}

.customColorPickerRgb{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
}

.customColorPickerRgb.no-alpha{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.customColorPickerRgb label{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  font-size:10px;
  color:rgba(197,205,216,.9);
  letter-spacing:.2px;
}

.customColorPickerRgb input{
  width:100%;
  height:24px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background:#191919;
  color:#e7f0fb;
  font-size:12px;
  font-weight:700;
  padding:0 6px;
  outline:none;
  text-align:center;
}

.customColorPickerRgb input:focus{
  border-color:#6ea8ff;
  box-shadow:0 0 0 2px rgba(110, 168, 255, 0.2);
}

.customColorPickerRowA.is-hidden{
  display:none;
}

.shapeTypeGrid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:9px;
}

.shapeTypeBtn{
  min-height:96px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:rgba(230,230,255,1);
  padding:10px 8px;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:8px;
  cursor:pointer;
  font-size:13px;
  font-weight:630;
  transition:background-color .16s ease, transform .16s ease;
}

.shapeTypeBtn:hover{
  background:rgba(255,255,255,.02);
}

.shapeTypeBtn.is-active{
  box-shadow:none;
  background:rgba(27,37,65,0.5);
}

.shapeTypeBtn--extra{
  display:none;
}

.shapeTypeGrid.is-expanded .shapeTypeBtn--extra{
  display:grid;
}

.shapeTypeMoreBtn{
  position:absolute;
  right:0;
  bottom:0;
  display:grid;
  place-items:center;
  width:32px;
  height:24px;
  border:0;
  border-radius:9px;
  background:rgba(27,37,65,.42);
  color:rgba(230,230,255,.62);
  font-size:16px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}

.shapeTypeMoreBtn:hover,
.shapeTypeMoreBtn.is-active{
  background:rgba(27,37,65,.72);
  color:rgba(230,230,255,.9);
}

.shapeTypeSwatch{
  width:34px;
  height:34px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 12px rgba(0,0,0,.24);
}

.shapeTypeSwatch--hook{
  background:#203261;
}

.shapeTypeSwatch--nohook{
  background:#f4c75f;
}

.shapeTypeSwatch--death{
  background:#ff5b59;
}

.shapeTypeSwatch--hookthrough{
  background:#8ed14f;
}

.shapeTypeSwatch--hookonly{
  background:#e866d2;
}

.shapeTypeSwatch--freeze{
  background:#83d8ff;
}

.shapeTypeSwatch--ghost{
  background:#b4b8c0;
}

.shapeGeneratorPanel{
  padding:0;
  border:0;
  background:transparent;
  gap:10px;
}

.shapeGeneratorTop{
  align-items:stretch;
}

.shapeModeSwitch{
  padding:4px;
}

.shapeModeBtn{
  min-height:34px;
}

.shapeGeneratorDivider{
  margin:2px 0 0;
}

.shapeGeneratorTip{
  color:rgba(230,230,255,.72);
}

.shapeTransformPanel{
  --shape-transform-move-icon-size:21px;
  --shape-transform-duplicate-icon-size:21px;
  --shape-transform-delete-icon-size:21px;
  --shape-transform-rotate-icon-size:21px;
  --shape-transform-flip-x-icon-size:21px;
  --shape-transform-flip-y-icon-size:21px;
  --shape-transform-edit-points-icon-size:21px;
  --shape-transform-curve-segment-icon-width:30px;
  --shape-transform-curve-segment-icon-height:15px;
  display:grid;
  gap:9px;
}

.shapeTransformRow{
  display:grid;
  gap:8px;
}

.shapeTransformRow--triple{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.shapeTransformRow--double{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.shapeTransformRow--split{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.shapeTransformBtn{
  min-height:74px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(27,37,65,.5);
  color:rgba(230,230,255,1);
  display:grid;
  justify-items:center;
  align-content:center;
  gap:7px;
  font-size:13px;
  font-weight:620;
  cursor:pointer;
}

.shapeTransformBtn:hover,
.shapeTransformBtn.is-active{
  border-color:rgba(255,255,255,.3);
}

.shapeTransformBtn--wide{
  min-height:72px;
}

.shapeTransformBtn img,
.shapeTransformIconBtn img{
  display:block;
}

.shapeTransformBtn[data-shape-action="transform-move"] img,
.shapeTransformBtn[data-visual-action="transform-move"] img{
  width:var(--shape-transform-move-icon-size);
  height:var(--shape-transform-move-icon-size);
}

.shapeTransformBtn[data-shape-action="transform-duplicate"] img,
.shapeTransformBtn[data-visual-action="transform-duplicate"] img{
  width:var(--shape-transform-duplicate-icon-size);
  height:var(--shape-transform-duplicate-icon-size);
}

.shapeTransformBtn[data-shape-action="transform-delete"] img,
.shapeTransformBtn[data-visual-action="transform-delete"] img{
  width:var(--shape-transform-delete-icon-size);
  height:var(--shape-transform-delete-icon-size);
}

.shapeTransformBtn[data-shape-action="edit-shape-toggle"] img,
.shapeTransformBtn[data-visual-action="edit-points-toggle"] img{
  width:var(--shape-transform-edit-points-icon-size);
  height:var(--shape-transform-edit-points-icon-size);
}

.shapeTransformBtn[data-shape-action="curve-segment-toggle"] img{
  width:var(--shape-transform-curve-segment-icon-width);
  height:var(--shape-transform-curve-segment-icon-height);
}

.shapeTransformSymbolIcon{
  display:block;
  color:rgba(230,230,255,.94);
  font:600 var(--shape-transform-rotate-icon-size)/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

.shapeTransformSubCard{
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(27,37,65,.5);
  padding:8px;
  display:grid;
  gap:8px;
}

.shapeTransformControlRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 30px 30px;
  gap:6px;
  align-items:center;
}

.shapeTransformRotateSelect{
  min-height:32px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(27,37,65,.5);
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:650;
  padding:6px 8px;
}

.shapeTransformIconBtn{
  min-height:32px;
  min-width:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(32,42,69,1.0);
  color:rgba(230,230,255,1);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:700;
  line-height:1;
}

.shapeTransformIconBtn:hover,
.shapeTransformIconBtn.is-active{
  border-color:rgba(255,255,255,.3);
}

.shapeTransformControlRow--flip{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.shapeTransformIconBtn--flip{
  min-width:0;
}

.shapeTransformIconBtn--flip img{
  width:var(--shape-transform-flip-x-icon-size);
  height:var(--shape-transform-flip-x-icon-size);
}

.shapeTransformIconBtn--flip[data-shape-action="transform-flip-x"] img,
.shapeTransformIconBtn--flip[data-visual-action="transform-flip-x"] img{
  width:var(--shape-transform-flip-x-icon-size);
  height:var(--shape-transform-flip-x-icon-size);
}

.shapeTransformIconBtn--flip[data-shape-action="transform-flip-y"] img,
.shapeTransformIconBtn--flip[data-visual-action="transform-flip-y"] img{
  width:var(--shape-transform-flip-y-icon-size);
  height:var(--shape-transform-flip-y-icon-size);
}

.shapeTransformSubCardLabel{
  text-align:center;
  color:rgba(230,230,255,.78);
  font-size:13px;
  font-weight:650;
}

/* Shape Properties borderless + fixed general height */
.shapeConfigPanel{
  height:var(--shape-config-fixed-height, auto);
  max-height:min(var(--shape-config-fixed-height, 9999px), calc(100% - 20px));
  min-height:0;
  overflow:hidden;
  overflow-x:hidden;
  border:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
  box-sizing:border-box;
}

.shapeConfigPanel::-webkit-scrollbar{
  width:2px;
}

.shapeConfigPanel:hover::-webkit-scrollbar{
  width:4px;
}

.shapeConfigPanel::-webkit-scrollbar-track{
  background:transparent;
}

.shapeConfigPanel::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,.16);
}

.shapeConfigPanel:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.24);
}

.shapeConfigCardsShell{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  height:100%;
  padding:14px 17px;
  border-radius:21px;
  background:rgba(255,255,255,.04);
  min-height:0;
  box-sizing:border-box;
}

.shapeConfigHeader{
  flex:0 0 auto;
}

.shapeConfigSections{
  flex:1 1 auto;
  min-height:0;
  align-content:start;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:5px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}

.shapeConfigSections::-webkit-scrollbar{
  width:2px;
}

.shapeConfigSections:hover::-webkit-scrollbar{
  width:4px;
}

.shapeConfigSections::-webkit-scrollbar-track{
  background:transparent;
}

.shapeConfigSections::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,.16);
}

.shapeConfigSections:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.24);
}

.shapeCfgCategory,
.shapeCfgSection{
  align-content:start;
}

.shapeGeneralCardsShell{
  padding:0;
  border-radius:0;
  background:transparent;
}

.shapeConfigPanel :is(
  .shapeConfigHeader,
  .shapeConfigTabs,
  .shapeConfigTab,
  .shapeCfgSection,
  .shapeCfgCard,
  .shapeGeneratorPanel,
  .shapeModeSwitch,
  .shapeModeBtn,
  .shapeEditToggleBtn,
  .shapeSplitMainBtn--generate,
  .shapeSplitMenuBtn--settings,
  .shapeRandomMenu,
  .shapeRandomMenuOption,
  .shapeTypeBtn,
  .shapeTransformBtn,
  .shapeTransformSubCard,
  .shapeTransformRotateSelect,
  .shapeTransformIconBtn,
  .shapeCfgActionBtn,
  .shapeCfgRow input,
  .shapeCfgRow select,
  .oneWayDirBtn
){
  border:0;
}

.shapeCfgSection > summary,
.shapeCfgSection[open] > summary{
  border-bottom:0;
}

.shapeCfgRow input:focus-visible,
.shapeCfgRow select:focus-visible,
.shapeCfgActionBtn:focus-visible,
.shapeConfigTab:focus-visible{
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}

.shapeConfigPanel{
  --shape-config-playable-margin:32px;
  --shape-config-panel-height-trim:8.5%;
  top:calc(var(--canvas-clip-top, 0px) + var(--shape-config-playable-margin) + var(--shape-config-panel-height-trim));
  bottom:calc(var(--canvas-clip-bottom, 0px) + var(--shape-config-playable-margin) + var(--shape-config-panel-height-trim));
  transform:none;
  height:auto;
  max-height:none;
}

.shapeConfigTabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  min-height:50px;
  padding:5px;
  margin:0;
  gap:6px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 6px 18px rgba(0,0,0,.14);
}

.shapeConfigTab{
  min-width:0;
  min-height:24px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(220,228,245,.5);
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  letter-spacing:0;
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.shapeConfigTab:hover{
  background:rgba(255,255,255,.035);
  color:rgba(231,237,249,.78);
}

.shapeConfigTab.is-active{
  border:0;
  background:rgba(27,37,65,1.0);
  color:#F4F7FF;
  box-shadow:none;
}

.shapeConfigCardsShell.is-hidden,
.soundConfigShell.is-hidden,
.visualConfigShell.is-hidden{
  display:none;
}

.shapeConfigPanel.is-sound-config,
.shapeConfigPanel.is-visual-config{
  width:419px;
}

.shapeConfigPanel.is-sound-config + .shapeConfigToggle,
.shapeConfigPanel.is-visual-config + .shapeConfigToggle{
  right:450px;
}

.soundConfigShell,
.visualConfigShell{
  gap:18px;
  padding:15px 16px 16px;
  background:rgba(255,255,255,.04);
}

.soundConfigShell .shapeConfigHeader,
.visualConfigShell .shapeConfigHeader{
  align-items:center;
  gap:22px;
  margin:0;
}

.soundConfigShell .shapeConfigTitle,
.visualConfigShell .shapeConfigTitle{
  margin:5px 0 0;
  color:rgba(230,230,255,.52);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
}

.visualConfigTabs{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.soundCfgScopeTabs,
.soundCfgPillSwitch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:center;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.soundCfgScopeTabs{
  width:248px;
  min-height:42px;
  justify-self:center;
}

.soundCfgPillSwitch{
  min-height:40px;
}

.soundCfgSegmentedBtn,
.soundCfgPillBtn{
  min-width:0;
  min-height:28px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(230,230,255,.48);
  font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  letter-spacing:0;
  cursor:pointer;
}

.soundCfgSegmentedBtn:hover,
.soundCfgPillBtn:hover{
  color:rgba(244,247,255,.78);
}

.soundCfgSegmentedBtn.is-active,
.soundCfgPillBtn.is-active{
  background:rgba(37,49,83,1);
  color:#f4f7ff;
}

.soundConfigSections{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  gap:13px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 7px 26px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}

.soundConfigSections::-webkit-scrollbar{
  width:3px;
}

.soundConfigSections:hover::-webkit-scrollbar{
  width:5px;
}

.soundConfigSections::-webkit-scrollbar-track{
  background:transparent;
}

.soundConfigSections::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,.16);
}

.soundConfigSections:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.24);
}

.soundCfgSection{
  display:grid;
  gap:10px;
}

.soundCfgSection > summary{
  margin:0 0 0 4px;
  padding:0;
  color:rgba(230,230,255,.52);
  font-size:14px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  cursor:pointer;
}

.soundCfgSection > .shapeConfigGrid{
  margin:0;
  padding:25px 14px 22px;
  gap:19px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 0px rgba(0, 0, 0, .28), 0 0 0 1px rgba(20, 30, 55, .35);
}

.soundCfgSection:not([open]) > .shapeConfigGrid{
  display:none;
}

.soundCfgSection--advanced > .shapeConfigGrid{
  padding:22px 16px 28px;
  gap:18px;
}

.visualCfgCard{
  display:grid;
  gap:8px;
  border-radius:0;
  background:transparent;
}

.visualCfgCard > .shapeCfgCardTitle{
  margin:14px 0 0;
  padding:0 2px;
  color:rgba(230,230,255,.52);
  font-size:12px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
}

.visualCfgCard > .shapeCfgCardTitle::after{
  display:none;
}

.visualCfgCard > .shapeCfgCardBody{
  margin:0;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 0px rgba(0, 0, 0, .28), 0 0 0 1px rgba(20, 30, 55, .35);
}

.visualCfgCard:not([open]) > .shapeCfgCardBody{
  display:none;
}

.visualConfigSections{
  gap:10px;
  padding:0 7px 8px 0;
}

.visualConfigSections .shapeCfgCategory[data-visual-category]{
  gap:12px;
}

.visualInnerStyleCard{
  margin:0;
  box-shadow:none;
  background:transparent;
  padding:0;
}

.visualAppearanceCard > .shapeCfgCardBody{
  padding:14px 12px 15px;
}

.visualAppearanceCard .visualInnerStyleCard{
  gap:17px;
}

.visualAppearanceCard .shapeStyleDivider{
  margin:1px 0 2px;
}

.visualNameField{
  min-width:190px;
  min-height:32px;
  padding:0 4px;
  border-radius:0;
  border-bottom:1px solid rgba(230,230,255,.22);
  background:transparent;
  box-shadow:none;
  justify-items:stretch;
  transition:border-color .14s ease, background-color .14s ease;
}

.visualNameField input{
  min-height:31px;
  width:100% !important;
  border:0;
  background:transparent;
  color:rgba(230,230,255,.9);
  font:750 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  text-align:left;
  padding:0;
}

.visualNameField:hover{
  border-bottom-color:rgba(230,230,255,.38);
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.025) 100%);
}

.visualNameField:focus-within{
  border-bottom-color:rgba(230,230,255,.62);
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.035) 100%);
}

.visualNameField input::placeholder{
  color:rgba(230,230,255,.34);
  font-weight:650;
}

.visualNameField input::selection{
  background:rgba(230,230,255,.18);
}

.visualAppearancePanel{
  display:grid;
  gap:17px;
}

.visualAppearancePanel.is-hidden,
.visualTintColorSection.is-hidden,
.visualSolidColorSection.is-hidden,
.visualMiniModeSwitch.is-hidden{
  display:none;
}

.visualCornerColorGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:center;
}

.visualSolidColorSection{
  display:grid;
}

.visualCornerColorChip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:42px;
  padding:0 12px;
  border-radius:14px;
  background:rgba(27,37,65,.46);
  color:rgba(230,230,255,.58);
  font-size:12px;
  font-weight:750;
}

.visualCornerColorChip > span:last-child{
  min-width:0;
  color:rgba(230,230,255,.66);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}

.visualCornerColorChip--single{
  justify-content:flex-start;
  width:100%;
}

.visualCornerColorControl{
  width:31px;
  height:31px;
  border-color:rgba(174,188,225,.34);
}

.visualAlphaField{
  gap:12px;
}

.visualAlphaField span{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.visualAlphaField output{
  color:rgba(230,230,255,.9);
  font-size:12px;
  font-weight:800;
}

.visualImageRow{
  grid-template-columns:minmax(0, 1fr) 176px;
  min-height:40px;
}

.visualImageSelect{
  width:176px;
  min-height:36px;
  border:0;
  border-radius:11px;
  padding:0 28px 0 12px;
  background:rgba(27,37,65,1.0);
  color:rgba(230,230,255,1);
  font-size:13px;
  font-weight:700;
  outline:none;
}

.visualImageSelect:focus-visible{
  box-shadow:0 0 0 2px rgba(130,164,236,.48);
}

.visualTintToggleRow{
  grid-template-columns:minmax(0, 1fr) auto;
  min-height:40px;
}

.visualTintModeRow{
  grid-template-columns:minmax(0, 1fr) auto;
  min-height:40px;
}

.visualTintControls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.visualMiniModeSwitch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  min-width:156px;
  min-height:34px;
  gap:3px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
}

.visualMiniModeSwitch--compact{
  min-width:128px;
  min-height:26px;
}

.visualMiniModeSwitch--triple{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  min-width:218px;
  min-height:34px;
}

.visualMiniModeSwitch--compact.visualMiniModeSwitch--triple .visualMiniModeBtn{
  min-height:24px;
}

.visualMiniModeBtn{
  min-width:0;
  min-height:26px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(230,230,255,.58);
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}

.visualMiniModeBtn:hover{
  color:rgba(244,247,255,.82);
}

.visualMiniModeBtn.is-active{
  background:rgba(27,37,65,1.0);
  color:rgba(244,247,255,.96);
}

.visualMiniModeSwitch--compact .visualMiniModeBtn{
  min-height:20px;
  font-size:11px;
}

.visualToggleInput{
  appearance:none;
  width:54px;
  height:29px;
  border:0;
  border-radius:999px;
  background:rgba(27,37,65,1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
  cursor:pointer;
  position:relative;
}

.visualToggleInput::before{
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  left:3px;
  top:3px;
  border-radius:999px;
  background:rgba(238,238,255,.95);
  box-shadow:0 2px 7px rgba(0,0,0,.24);
  transition:transform .14s ease, background-color .14s ease;
}

.visualToggleInput:checked::before{
  transform:translateX(25px);
  background:#dfe8ff;
}

.visualToggleInput:checked{
  background:rgba(80,107,176,.86);
}

.visualAnimationSlot{
  min-height:84px;
}

.visualAnimationPlaybackFooter{
  margin-top:2px;
  padding-right:0;
  padding-left:0;
}

.visualAnimationCard > .shapeCfgCardBody{
  padding:18px 14px 16px;
}

.visualAnimPanel{
  display:grid;
  gap:15px;
}

.visualAnimHeaderRow,
.visualAnimValueRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
  min-height:31px;
  color:rgba(230,230,255,.66);
  font-size:14px;
  font-weight:650;
}

.visualAnimHeaderRow--compact{
  min-height:30px;
}

.visualAnimHeaderRow > span:first-child,
.visualAnimValueRow > span:first-child{
  min-width:0;
}

.visualAnimToggle{
  justify-self:end;
}

.visualAnimSplitRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 156px;
  align-items:center;
  gap:12px;
}

.visualAnimSegmented{
  display:grid;
  align-items:center;
  min-height:38px;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}

.visualAnimSegmented--two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.visualAnimSegmented--three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.visualAnimSegmentBtn{
  min-width:0;
  min-height:30px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(230,230,255,.58);
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  padding:0 10px;
}

.visualAnimSegmentBtn:hover{
  color:rgba(244,247,255,.82);
}

.visualAnimSegmentBtn.is-active{
  background:rgba(27,37,65,1.0);
  color:rgba(244,247,255,.96);
}

.visualAnimSelectWrap{
  position:relative;
  display:block;
}

.visualAnimSelectWrap select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:38px;
  border:0;
  border-radius:8px;
  padding:0 34px 0 12px;
  background:rgba(27,37,65,.76);
  box-shadow:inset 0 0 0 1px rgba(116,139,194,.18), 0 4px 10px rgba(3,8,20,.12);
  color:rgba(230,230,255,.74);
  font-size:13px;
  font-weight:700;
  outline:none;
}

.visualAnimSelectWrap::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid rgba(168,190,255,.9);
  border-bottom:2px solid rgba(168,190,255,.9);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.visualAnimValueRow{
  grid-template-columns:102px minmax(0, 1fr) 74px;
  padding-top:1px;
}

.visualAnimValueRow input[type="range"]{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:20px;
  min-height:20px;
  padding:0;
  border:0;
  background:transparent;
}

.visualAnimValueRow input[type="range"]::-webkit-slider-runnable-track{
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(230,230,255,.9), rgba(120,148,196,.45));
}

.visualAnimValueRow input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:23px;
  height:23px;
  margin-top:-9px;
  border-radius:50%;
  border:2px solid rgba(230,230,255,.82);
  background:#f4f1ff;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}

.visualAnimValueRow input[type="range"]::-moz-range-track{
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(230,230,255,.9), rgba(120,148,196,.45));
}

.visualAnimValueRow input[type="range"]::-moz-range-thumb{
  width:23px;
  height:23px;
  border-radius:50%;
  border:2px solid rgba(230,230,255,.82);
  background:#f4f1ff;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}

.visualAnimValueRow output{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:8px;
  background:rgba(27,37,65,.78);
  box-shadow:inset 0 0 0 1px rgba(116,139,194,.14);
  color:rgba(244,247,255,.94);
  font-size:14px;
  font-weight:800;
}

.visualAnimValueRow--stepper{
  grid-template-columns:minmax(0, 1fr) auto;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.045);
}

.visualAnimStepper{
  display:grid;
  grid-template-columns:38px 82px 38px;
  align-items:center;
  min-height:36px;
  overflow:hidden;
  border-radius:9px;
  background:rgba(255,255,255,.045);
}

.visualAnimStepper button{
  min-width:38px;
  min-height:36px;
  border:0;
  background:transparent;
  color:rgba(244,247,255,.9);
  font-size:19px;
  font-weight:850;
  cursor:pointer;
}

.visualAnimStepper button:hover{
  background:rgba(255,255,255,.055);
}

.visualAnimStepper input{
  grid-column:2;
  grid-row:1;
  width:82px;
  min-width:0;
  min-height:36px;
  border:0;
  background:rgba(27,37,65,.78);
  color:transparent;
  font-size:14px;
  font-weight:800;
  text-align:center;
  outline:none;
}

.visualAnimStepper output{
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  color:rgba(244,247,255,.94);
  font-size:14px;
  font-weight:800;
}

.visualAnimRotationModes{
  width:100%;
}

.visualAnimDirectionRow{
  grid-template-columns:70px minmax(0, 1fr);
  gap:8px;
}

.visualAnimDirectionModes{
  grid-template-columns:.42fr .58fr;
  width:100%;
  min-width:0;
  min-height:36px;
}

.visualAnimDirectionModes .visualAnimSegmentBtn{
  min-height:28px;
  font-size:12px;
  padding:0 5px;
  white-space:nowrap;
}

.visualAnimHint{
  margin:-4px 0 0;
  color:rgba(230,230,255,.5);
  font-size:12px;
  font-style:italic;
  font-weight:650;
}

.visualAnimColorModeRow{
  grid-template-columns:102px minmax(0, 1fr);
}

.visualAnimColorModes{
  width:100%;
}

.visualAnimColorSteps{
  display:grid;
  gap:8px 10px;
}

.visualAnimColorSteps--solid{
  grid-template-columns:102px minmax(0, 1fr);
  align-items:center;
  min-height:40px;
}

.visualAnimColorLabel,
.visualAnimColorCornerRow > span:first-child{
  color:rgba(230,230,255,.66);
  font-size:14px;
  font-weight:650;
}

.visualAnimSwatchRow{
  display:grid;
  grid-template-columns:repeat(3, 36px) minmax(34px, 1fr);
  align-items:center;
  gap:11px;
  min-width:0;
}

.visualAnimStepHeader{
  display:grid;
  grid-template-columns:repeat(3, 36px) minmax(34px, 1fr);
  align-items:center;
  gap:11px;
  min-width:0;
  color:rgba(230,230,255,.42);
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.visualAnimColorSwatch{
  width:28px;
  height:28px;
  border-color:rgba(174,188,225,.34);
}

.visualAnimColorSwatch .shapeStyleColorSwatch{
  inset:0;
}

.visualAnimColorSteps--gradient{
  display:none;
  padding-top:2px;
  border-top:1px solid rgba(255,255,255,.045);
}

.visualAnimColorCornerHeader{
  min-height:18px;
}

.visualAnimColorCornerRow{
  display:grid;
  grid-template-columns:102px minmax(0, 1fr);
  align-items:center;
  min-height:31px;
  gap:14px;
}

.visualAnimColorPanel[data-visual-animation-color-mode="gradient"] .visualAnimColorSteps--solid{
  display:none;
}

.visualAnimColorPanel[data-visual-animation-color-mode="gradient"] .visualAnimColorSteps--gradient{
  display:grid;
}

.visualAnimSpinRow,
.visualAnimDirectionRow,
.visualAnimHint--spin,
.visualAnimHint--orbit{
  display:none;
}

.visualAnimRotationPanel[data-visual-animation-rotation-mode="spin"] .visualAnimSpinRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="spin"] .visualAnimDirectionRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="orbit"] .visualAnimVelocityRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="orbit"] .visualAnimDirectionRow{
  display:grid;
}

.visualAnimRotationPanel[data-visual-animation-rotation-mode="spin"] .visualAnimHint--spin,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="orbit"] .visualAnimHint--orbit,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="swing"] .visualAnimHint--swing{
  display:block;
}

.visualAnimRotationPanel[data-visual-animation-rotation-mode="spin"] .visualAnimSwingRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="spin"] .visualAnimVelocityRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="spin"] .visualAnimHint--swing,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="orbit"] .visualAnimSwingRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="orbit"] .visualAnimSpinRow,
.visualAnimRotationPanel[data-visual-animation-rotation-mode="orbit"] .visualAnimHint--swing{
  display:none;
}

.soundCfgFormRow{
  display:grid;
  grid-template-columns:104px minmax(0, 1fr);
  align-items:center;
  gap:10px;
  min-height:32px;
  color:rgba(230,230,255,.52);
  font-size:14px;
  letter-spacing:0;
}

.soundCfgFormRow > span:first-child{
  color:rgba(230,230,255,.52);
  font-size:14px;
  font-weight:400;
}

.soundCfgSoundRow,
.soundCfgTimeRow{
  grid-template-columns:104px minmax(0, 1fr);
}

.soundCfgSoundRow{
  position:relative;
}

.soundCfgSoundRow select,
.soundCfgSelectWrap select,
.soundCfgValueUnit{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:999px;
  background:rgba(32,45,80,.76);
  color:#f4f7ff;
  font-size:14px;
  font-weight:800;
  text-align:center;
  text-align-last:center;
}

.visualCfgGrid input[type="text"],
.visualCfgGrid input[type="number"]{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#f4f7ff;
  padding:0 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 5px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(20,30,55,.35);
  font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

.textInlineEditor{
  position:absolute;
  z-index:45;
  min-width:24px;
  max-width:none;
  min-height:22px;
  resize:none;
  overflow:hidden;
  border:0;
  border-radius:0;
  outline:none;
  padding:0;
  background:transparent;
  box-shadow:none;
  caret-color:#f4f7ff;
  line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  pointer-events:auto;
  cursor:none;
}

.textInlineEditorControls{
  position:absolute;
  z-index:46;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:5px;
  border-radius:999px;
  background:rgba(17,27,54,.66);
  box-shadow:0 10px 22px rgba(3,8,20,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  pointer-events:auto;
}

.textInlineEditorButton{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#e9f0ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font:900 28px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  cursor:pointer;
}

.textInlineEditorButton:hover{
  background:rgba(255,255,255,.14);
}

.textInlineEditorButton--accept{
  color:#bfffd5;
}

.textInlineEditorButton--cancel{
  color:#ffd0d8;
}

.textToolCursor{
  position:absolute;
  left:0;
  top:0;
  width:48px;
  height:48px;
  z-index:47;
  display:block;
  opacity:0;
  pointer-events:none;
  image-rendering:auto;
  transition:opacity .08s ease;
  will-change:transform;
}

.textToolCursor.is-visible{
  opacity:1;
}

.textContentRow{
  display:grid;
  align-items:start;
}

.textContentRow textarea{
  width:100%;
  min-height:96px;
  resize:vertical;
  border:0;
  border-radius:10px;
  outline:none;
  background:rgba(255,255,255,.025);
  color:#f4f7ff;
  padding:8px 10px;
  box-shadow:none;
  font:650 13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  transition:background .14s ease, box-shadow .14s ease;
}

.textContentRow textarea:hover,
.textContentRow textarea:focus{
  background:rgba(255,255,255,.04);
}

.textTransformPanel{
  margin-top:0;
}

.visualCfgGrid input[type="color"]{
  width:54px;
  height:32px;
  border:0;
  border-radius:9px;
  background:transparent;
  padding:0;
}

.visualCfgPointPair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
}

.visualCfgPointTitle{
  grid-column:1 / -1;
  color:rgba(230,230,255,.52);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.visualCfgActions{
  display:grid;
  padding:0 8px 16px 0;
}

.soundCfgSoundRow select,
.soundCfgSelectWrap select{
  padding:0 34px 0 16px;
}

.soundCfgSoundRow select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
}

.soundCfgSoundRow::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid rgba(244,247,255,.9);
  border-bottom:2px solid rgba(244,247,255,.9);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.soundCfgTwoColumn{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

.soundCfgActivationGrid{
  gap:10px;
}

.soundCfgSelectWrap{
  display:block;
}

.soundCfgSelectWrap select{
  min-height:30px;
  color:rgba(230,230,255,.52);
  font-size:14px;
}

.soundCfgCompactNumber{
  grid-template-columns:70px 84px;
}

.soundCfgValueUnit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:110px;
  justify-self:end;
  padding:0 13px;
}

.soundCfgValueUnit input{
  width:100%;
  min-width:0;
  min-height:0;
  border:0;
  background:transparent;
  color:#f4f7ff;
  font-size:14px;
  font-weight:800;
  padding:0;
  text-align:center;
}

.soundCfgValueUnit span{
  color:#f4f7ff;
  font-size:12px;
  font-weight:800;
}

.soundCfgToggleRow{
  grid-template-columns:minmax(0, 1fr) 58px;
}

.soundCfgToggleRow input[type="checkbox"],
.soundCfgAdvancedRow input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:54px;
  min-width:54px;
  height:30px;
  min-height:30px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 2px rgba(17,26,50,.42);
  cursor:pointer;
  position:relative;
}

.soundCfgToggleRow input[type="checkbox"]::before,
.soundCfgAdvancedRow input[type="checkbox"]::before{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  top:3px;
  left:3px;
  border-radius:50%;
  background:#f4f1ff;
  transition:transform .16s ease;
}

.soundCfgToggleRow input[type="checkbox"]:checked,
.soundCfgAdvancedRow input[type="checkbox"]:checked{
  background:#5d6cff;
}

.soundCfgToggleRow input[type="checkbox"]:checked::before,
.soundCfgAdvancedRow input[type="checkbox"]:checked::before{
  transform:translateX(24px);
}

.soundCfgVolumeRow{
  grid-template-columns:104px minmax(0, 120px) 72px;
}

.soundCfgVolumeRow input[type="range"]{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:20px;
  min-height:20px;
  padding:0;
  border:0;
  background:transparent;
}

.soundCfgVolumeRow input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:rgba(230,230,255,.9);
}

.soundCfgVolumeRow input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:26px;
  height:26px;
  margin-top:-10px;
  border-radius:50%;
  border:3px solid rgba(25,31,50,1);
  background:#f4f1ff;
}

.soundCfgVolumeRow input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:rgba(230,230,255,.9);
}

.soundCfgVolumeRow input[type="range"]::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid rgba(25,31,50,1);
  background:#f4f1ff;
}

.soundCfgVolumeRow output{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(32,45,80,.76);
  color:#f4f7ff;
  font-size:14px;
  font-weight:800;
}

.soundCfgAreaShapeRow{
  grid-template-columns:104px minmax(0, 180px);
}

.soundCfgAreaShapeRow .soundCfgPillSwitch{
  min-height:40px;
}

.soundCfgDistanceRow{
  grid-template-columns:minmax(0, 1fr) 58px;
  justify-self:end;
  width:202px;
}

.soundCfgAdvancedRow{
  display:grid;
  grid-template-columns:30px minmax(0, 1fr) 70px;
  align-items:start;
  gap:10px;
  color:#f4f7ff;
}

.soundCfgAdvancedRow img{
  width:30px;
  height:30px;
  object-fit:contain;
  margin-top:1px;
}

.soundCfgAdvancedCopy{
  display:grid;
  gap:6px;
  min-width:0;
}

.soundCfgAdvancedCopy strong{
  color:#fff;
  font-size:16px;
  line-height:1.15;
  font-weight:800;
}

.soundCfgAdvancedCopy small{
  color:rgba(230,230,255,.52);
  font-size:12px;
  line-height:1.25;
  font-weight:600;
}

.soundCfgAdvancedRow input[type="number"]{
  width:70px;
  min-height:34px;
  border:0;
  border-radius:10px;
  background:rgba(32,45,80,.76);
  color:#f4f7ff;
  font-size:16px;
  font-weight:800;
  text-align:center;
  padding:0 8px;
}

.soundCfgPlaybackFooter{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:16px;
  padding:18px 8px 0;
  border-top:2px solid rgba(255,255,255,.04);
}

.soundCfgPlaybackFooter .shapeMotionGroupTitle{
  align-self:center;
  color:rgba(230,230,255,.52);
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
}

.soundCfgPlaybackFooter .shapeMotionPreviewControls{
  min-height:46px;
  border:0;
  border-radius:17px;
  background:rgba(255,255,255,.05);
}

.soundCfgPlaybackFooter .shapeMotionPreviewBtn{
  min-width:50px;
  min-height:46px;
  color:#fff;
  font-size:17px;
  font-weight:800;
}

.soundCfgPlaybackFooter .shapeMotionPreviewRate{
  width:70px;
  min-width:70px;
  min-height:46px;
  color:#fff;
  font-size:16px;
  font-weight:800;
  border-left:1px solid rgba(255,255,255,.09);
}

.soundCfgPlaybackFooter .shapeMotionPreviewRate::after{
  content:"■";
  font-size:22px;
  line-height:1;
  color:#fff;
}

.soundCfgPlaybackFooter .shapeMotionPreviewRate:hover,
.soundCfgPlaybackFooter .shapeMotionPreviewRate:focus-visible{
  color:transparent;
}

.soundCfgPlaybackFooter .shapeMotionPreviewStepStack{
  min-width:43px;
  border-left:1px solid rgba(255,255,255,.09);
}

.soundCfgPlaybackFooter .shapeMotionPreviewBtn--stack{
  min-width:43px;
  min-height:23px;
  font-size:17px;
}

.soundCfgPlaybackFooter .shapeMotionPreviewStepStack .shapeMotionPreviewBtn + .shapeMotionPreviewBtn{
  border-top:1px solid rgba(255,255,255,.09);
}

@media (max-width: 1200px){
  .shapeConfigPanel{
    width:min(386px, calc(100% - 28px));
  }
  .shapeConfigPanel.is-sound-config{
    width:min(386px, calc(100% - 28px));
  }
  .shapeConfigPanel.is-sound-config + .shapeConfigToggle{
    right:450px;
  }
}

.playOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:18px;
  background:transparent;
  z-index:3;
  border:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.canvasArea.is-editor-active .playOverlay{
  inset:var(--canvas-clip-top) 0 var(--canvas-clip-bottom) 0;
  border-radius:var(--canvas-playable-radius);
  -webkit-clip-path:inset(0 0 0 0 round var(--canvas-playable-radius));
  clip-path:inset(0 0 0 0 round var(--canvas-playable-radius));
}

.playOverlay.is-visible{
  opacity:1;
  pointer-events:auto;
  background:rgba(5,9,20,.72);
}

.playOverlay .playButton{
  width:76px;
  height:76px;
  border-radius:50%;
  border:1px solid rgba(122,147,208,.6);
  background:linear-gradient(160deg, rgba(18,26,51,.92), rgba(11,16,32,.98));
  cursor:pointer;
  box-shadow:
    0 18px 30px rgba(3,8,18,.68),
    0 0 0 1px rgba(122,147,208,.9) inset;

  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.playOverlay .playButton::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-45%, -50%);
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:20px solid rgba(232,237,255,.9);
}

.playOverlay .playButton:hover{
  border-color:#6aa1ff;
  transform:scale(1.05);
  box-shadow:
    0 22px 36px rgba(6,12,28,.55),
    0 0 0 1px rgba(106,161,255,.3) inset;
}

.playOverlay .playButton:active{
  transform:scale(0.98);
}

.assetPaletteCanvasDimmer{
  position:absolute;
  inset:var(--canvas-clip-top) 0 var(--canvas-clip-bottom) 0;
  z-index:9;
  border-radius:var(--canvas-playable-radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(45,69,132,.12), rgba(3,7,18,.36) 58%, rgba(2,5,12,.48) 100%);
  -webkit-clip-path:inset(0 0 0 0 round var(--canvas-playable-radius));
  clip-path:inset(0 0 0 0 round var(--canvas-playable-radius));
  pointer-events:none;
}

.assetPaletteOverlay{
  position:absolute;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-family:"Inter", "Segoe UI", system-ui, sans-serif;
}

.assetPalette{
  width:min(1120px, calc(100vw - 36px), calc(100vh + 187px));
  max-height:min(900px, calc(100vh - 30px));
  display:flex;
  flex-direction:column;
  color:rgba(229,238,255,.94);
  pointer-events:auto;
  background:linear-gradient(180deg, rgba(24,37,70,.97), rgba(18,30,58,.98));
  border:1px solid rgba(111,136,190,.35);
  border-radius:8px;
  box-shadow:0 22px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}

.assetPaletteHeader{
  height:48px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:16px;
  padding:0 18px 0 21px;
  background:transparent;
  border-bottom:0;
}

.assetPaletteTitle{
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:2px;
  color:rgba(246,249,255,.96);
}

.assetPaletteHint{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:rgba(180,193,225,.82);
  white-space:nowrap;
}

.assetPaletteHintKey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:41px;
  height:21px;
  padding:0 8px;
  border-radius:5px;
  border:1px solid rgba(137,163,221,.34);
  background:rgba(7,14,31,.34);
  color:rgba(228,236,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(2,6,18,.28);
  font-size:11px;
  font-weight:760;
  letter-spacing:.03em;
  line-height:1;
}

.assetPaletteHintSeparator{
  color:rgba(137,153,194,.66);
}

.assetPaletteClose{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:4px;
  padding:0;
  background:transparent;
  color:rgba(232,239,255,.88);
  font:300 41px/40px system-ui;
  cursor:pointer;
}

.assetPaletteClose:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.assetPaletteBody{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 330px;
  gap:14px;
  padding:0px 15px 9px;
  min-height:0;
}

.assetPaletteTilesPanel,
.assetPaletteEntityPanel{
  min-width:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.assetPaletteTilesPanel{
  padding:15px 15px 9px;
}

.assetPaletteEntityPanel{
  padding:13px 11px;
  overflow:hidden;
}

.assetPalettePanelTitle{
  height:23px;
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 8px;
  font-size:14px;
  font-weight:750;
  letter-spacing:1.7px;
  color:rgba(169,184,222,.9);
}

.assetPalettePanelTitle--tilePicker{
  justify-content:space-between;
}

.assetPaletteTileHeaderControls{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  min-width:0;
}

.assetPaletteTileTypeControl,
.assetPaletteTileAutomapControl{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:rgba(194,207,236,.9);
  font:780 14px/1 "Inter", "Segoe UI", system-ui, sans-serif;
  letter-spacing:.02em;
  text-transform:none;
}

.assetPaletteTileAutomapSelect{
  width:136px;
}

.assetPaletteTileTypeSelect{
  width:154px;
}

.assetPaletteTileTypeSelect,
.assetPaletteTileAutomapSelect{
  height:28px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:8px;
  padding:0 30px 0 12px;
  background:
    linear-gradient(45deg, transparent 50%, rgba(220,228,245,.62) 50%) calc(100% - 17px) 12px / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(220,228,245,.62) 50%, transparent 50%) calc(100% - 12px) 12px / 6px 6px no-repeat,
    rgba(46,60,98,.92);
  color:rgba(239,245,255,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(20,30,55,.22);
  font:760 14px/1 "Inter", "Segoe UI", system-ui, sans-serif;
  letter-spacing:0;
  outline:none;
  cursor:pointer;
}

.assetPaletteTileTypeSelect option,
.assetPaletteTileAutomapSelect option{
  font:760 14px/1 "Inter", "Segoe UI", system-ui, sans-serif;
}

.assetPaletteTileTypeSelect:hover,
.assetPaletteTileTypeSelect:focus-visible,
.assetPaletteTileAutomapSelect:hover,
.assetPaletteTileAutomapSelect:focus-visible{
  background:
    linear-gradient(45deg, transparent 50%, rgba(235,241,255,.84) 50%) calc(100% - 17px) 12px / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(235,241,255,.84) 50%, transparent 50%) calc(100% - 12px) 12px / 6px 6px no-repeat,
    rgba(55,70,112,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(143,184,255,.28);
}

.assetPaletteTileTypeSelect:disabled,
.assetPaletteTileAutomapSelect:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.assetPaletteTileGrid{
  width:100%;
  aspect-ratio:1 / 1;
  display:grid;
  position:relative;
  grid-template-columns:repeat(16, minmax(0, 1fr));
  grid-template-rows:repeat(16, minmax(0, 1fr));
  background:
    linear-gradient(90deg, rgba(77,99,143,.22) 1px, transparent 1px) 0 0/6.25% 100%,
    linear-gradient(rgba(77,99,143,.22) 1px, transparent 1px) 0 0/100% 6.25%,
    rgba(10,20,39,.96);
  border:1px solid rgba(64,86,132,.28);
  overflow:hidden;
  touch-action:none;
  user-select:none;
}

.assetPaletteTileCell{
  position:relative;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:0;
  padding:0;
  background-color:transparent;
  background-image:var(--tile-image);
  background-size:1600% 1600%;
  background-position:var(--tile-pos-x) var(--tile-pos-y);
  image-rendering:pixelated;
  cursor:pointer;
}

.assetPaletteTileCell::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(95,118,164,.18);
}

.assetPaletteTileCell:hover::after,
.assetPaletteTileCell:focus-visible::after{
  box-shadow:inset 0 0 0 2px rgba(124,169,255,.95), 0 0 0 2px rgba(42,99,221,.24);
}

.assetPaletteTileSelection{
  position:absolute;
  z-index:3;
  left:var(--asset-selection-left, 0%);
  top:var(--asset-selection-top, 0%);
  width:var(--asset-selection-width, 6.25%);
  height:var(--asset-selection-height, 6.25%);
  pointer-events:none;
  box-shadow:
    inset 0 0 0 2px rgba(124,169,255,.95),
    inset 0 0 0 999px rgba(74,130,255,.08),
    0 0 0 1px rgba(42,99,221,.30);
}

.assetPaletteTileSelection.is-stamp-group{
  box-shadow:
    inset 0 0 0 2px rgba(75,232,219,.98),
    inset 0 0 0 999px rgba(75,232,219,.16),
    0 0 0 1px rgba(75,232,219,.32);
}

.assetPaletteEmpty{
  min-height:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:24px;
  text-align:center;
  border:1px dashed rgba(109,132,183,.35);
  background:rgba(8,18,38,.74);
  color:rgba(191,204,234,.84);
}

.assetPaletteEmpty strong{
  color:rgba(241,246,255,.94);
  font-size:13px;
}

.assetPaletteEmpty span{
  max-width:330px;
  font-size:12px;
  line-height:1.45;
}

.assetPaletteDots{
  height:25px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:10px;
}

.assetPaletteDot{
  width:10px;
  height:10px;
  border:0;
  border-radius:50%;
  padding:0;
  background:rgba(128,143,176,.58);
  cursor:pointer;
}

.assetPaletteDot.is-active{
  background:rgba(72,135,255,.98);
  box-shadow:0 0 0 2px rgba(72,135,255,.18);
}

.assetPaletteEntitySections{
  display:flex;
  flex-direction:column;
  gap:9px;
  overflow:auto;
  max-height:680px;
  padding-right:1px;
}

.assetPaletteEntitySection{
  border:0;
  border-radius:14px;
  background:rgba(14,23,41,.5);
  overflow:hidden;
}

.assetPaletteEntitySectionHeader{
  width:100%;
  height:41px;
  display:grid;
  grid-template-columns:3px 1fr;
  align-items:center;
  gap:12px;
  border:0;
  padding:0 12px 0 13px;
  background:transparent;
  color:rgba(218,228,250,.88);
  font-size:14px;
  font-weight:750;
  text-align:left;
  cursor:pointer;
}

.assetPaletteEntitySectionHeader:hover,
.assetPaletteEntitySectionHeader:focus-visible{
  color:rgba(242,247,255,.96);
}

.assetPaletteSectionBullet{
  width:3px;
  height:18px;
  border-radius:999px;
  background:rgb(var(--asset-section-accent-rgb, 143,184,255));
  box-shadow:none;
  opacity:0;
}

.assetPaletteEntitySection.is-collapsed .assetPaletteSectionBullet{
  opacity:1;
}

.assetPaletteEntitySection[data-asset-entity-section="map-tiles"]{
  --asset-section-accent-rgb:143,184,255;
}

.assetPaletteEntitySection[data-asset-entity-section="pickups"]{
  --asset-section-accent-rgb:255,104,119;
}

.assetPaletteEntitySection[data-asset-entity-section="weapons"]{
  --asset-section-accent-rgb:246,195,91;
}

.assetPaletteEntitySection[data-asset-entity-section="gameplay"]{
  --asset-section-accent-rgb:126,232,166;
}

.assetPaletteSectionCaret{
  display:none;
}

.assetPaletteSectionCaret::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:translate(-50%, -50%) rotate(225deg);
  transform-origin:center;
}

.assetPaletteEntitySection.is-collapsed .assetPaletteSectionCaret::before{
  transform:translate(-50%, -50%) rotate(45deg);
}

.assetPaletteEntityGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:9px;
  padding:0 12px 12px;
}

.assetPaletteEntityGrid[hidden]{
  display:none;
}

.assetPaletteEntityButton{
  height:52px;
  position:relative;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:linear-gradient(180deg, rgba(31,48,90,.88), rgba(24,40,78,.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 0px rgba(0, 0, 0, .28), 0 0 0 1px rgba(20, 30, 55, .35);
  color:rgba(238,244,255,.96);
  cursor:pointer;
}

.assetPaletteEntityButton:hover:not(.is-disabled),
.assetPaletteEntityButton:focus-visible:not(.is-disabled){
  background:linear-gradient(180deg, rgba(38,60,111,.95), rgba(28,47,92,.95));
}

.assetPaletteEntityTooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  z-index:4;
  max-width:140px;
  padding:6px 9px;
  border-radius:5px;
  background:rgba(7,14,30,.96);
  color:rgba(238,244,255,.96);
  box-shadow:0 8px 18px rgba(0,0,0,.34);
  font-size:14px;
  font-weight:750;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, 4px);
  transition:opacity .12s ease, transform .12s ease;
}

.assetPaletteEntityTooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:8px;
  height:8px;
  background:rgba(7,14,30,.96);
  transform:translate(-50%, -4px) rotate(45deg);
}

.assetPaletteEntityButton:hover .assetPaletteEntityTooltip,
.assetPaletteEntityButton:focus-visible .assetPaletteEntityTooltip{
  opacity:1;
  transform:translate(-50%, 0);
}

.assetPaletteEntityButton.is-disabled{
  opacity:.5;
  cursor:not-allowed;
}

.assetPaletteEntitySprite{
  max-width:45px;
  max-height:38px;
  object-fit:contain;
  image-rendering:auto !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

.assetPaletteEntitySprite--coin{
  width:28px;
  height:28px;
  max-width:none;
  max-height:none;
  image-rendering:auto !important;
}

.assetPaletteEntitySprite--gameplay{
  width:24px;
  height:28px;
  max-width:none;
  max-height:none;
}

.assetPaletteEntitySprite--freeze{
  width:40px;
  height:40px;
  max-width:none;
  max-height:none;
}

.assetPaletteTileTypeIcon{
  --asset-tile-fill:rgba(31,42,74,.9);
  --asset-tile-stroke:rgba(122,147,208,.9);
  width:34px;
  height:34px;
  position:relative;
  display:block;
  border-radius:5px;
  background:var(--asset-tile-fill);
  box-shadow:
    inset 0 0 0 2px var(--asset-tile-stroke),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 3px 6px rgba(0,0,0,.38);
}

.assetPaletteTileTypeIcon::after{
  content:none;
}

.assetPaletteTileTypeIcon--hook{
  --asset-tile-fill:rgba(31,42,74,.92);
  --asset-tile-stroke:rgba(122,147,208,.92);
}

.assetPaletteTileTypeIcon--noHook{
  --asset-tile-fill:rgba(214,161,88,.30);
  --asset-tile-stroke:rgba(255,186,73,.9);
}

.assetPaletteTileTypeIcon--hookThrough{
  --asset-tile-fill:rgba(113,199,132,.30);
  --asset-tile-stroke:rgba(125,255,122,.9);
}

.assetPaletteTileTypeIcon--hookOnly{
  --asset-tile-fill:rgba(192,111,195,.30);
  --asset-tile-stroke:rgba(255,92,214,.9);
}

.assetPaletteTileTypeIcon--death{
  --asset-tile-fill:rgba(203,92,95,.32);
  --asset-tile-stroke:rgba(235,60,60,.92);
}

.assetPaletteTileTypeIcon--freeze{
  --asset-tile-fill:rgba(98,190,245,.24);
  --asset-tile-stroke:rgba(160,226,255,.94);
}

.assetPaletteTileTypeIcon--freeze::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  transform:translate(-50%, -50%);
  background:url("../assets/icons/snow.png") center / contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

.assetPaletteEntityFallback{
  font-size:28px;
  font-weight:800;
  line-height:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

.assetPaletteFooter{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  padding:0 21px 0;
  border-top:0;
  color:rgba(183,197,229,.82);
  font-size:14px;
  white-space:nowrap;
}

.assetPaletteFooter strong{
  color:rgba(230,237,255,.94);
  font-weight:800;
}

@media (min-width:1500px) and (min-height:800px){
  .assetPalette{
    width:min(1320px, calc(100vw - 56px), calc(100vh + 300px));
    max-height:min(1040px, calc(100vh - 44px));
  }

  .assetPaletteBody{
    grid-template-columns:minmax(0, 1fr) 390px;
    gap:16px;
    padding:14px 17px 10px;
  }

  .assetPaletteTilesPanel{
    padding:17px 17px 10px;
  }

  .assetPaletteEntityPanel{
    padding:15px 13px;
  }

  .assetPaletteEntityButton{
    height:58px;
  }

  .assetPaletteEntitySprite{
    max-width:51px;
    max-height:43px;
  }

  .assetPaletteEntitySprite--coin{
    width:28px;
    height:28px;
    max-width:none;
    max-height:none;
  }

  .assetPaletteEntitySprite--gameplay{
    width:24px;
    height:28px;
    max-width:none;
    max-height:none;
  }

  .assetPaletteEntityFallback{
    font-size:31px;
  }

  .assetPaletteFooter{
    font-size:16px;
  }
}

@media (max-width:900px){
  .assetPalette{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
  }
  .assetPalettePanelTitle--tilePicker{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .assetPaletteTileHeaderControls{
    width:100%;
    margin-left:0;
    justify-content:space-between;
    gap:14px;
  }
  .assetPaletteTileTypeControl,
  .assetPaletteTileAutomapControl{
    flex:1 1 0;
    justify-content:space-between;
  }
  .assetPaletteTileTypeSelect,
  .assetPaletteTileAutomapSelect{
    width:min(138px, 70%);
  }
  .assetPaletteBody{
    grid-template-columns:1fr;
    overflow:auto;
  }
  .assetPaletteEntitySections{
    max-height:none;
  }
  .assetPaletteFooter{
    justify-content:flex-start;
    overflow:auto;
  }
}