.editor-component {
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 18px;
  overflow: hidden;
  color: var(--cream);
  background: #757f4a;
  contain: size;
}

.editor-component[hidden] {
  display: none;
}

.editor-component [hidden] { display: none; }

.editor-component :is(#modelSizeField, #polaroidWidthField, #polaroidHeightField) { display: none; }

.editor-component dialog {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 24px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
  background: var(--cream);
}

.editor-component dialog::backdrop {
  background: rgb(5 5 5 / 78%);
  backdrop-filter: blur(8px);
}

.editor-component dialog strong {
  display: block;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.editor-component dialog p {
  margin: 14px 0 20px;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component dialog button {
  min-height: 44px;
  padding-inline: 16px;
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
  background: var(--ink);
  cursor: pointer;
}

.editor-component dialog button + button { margin-left: 8px; }

.editor-component #advancedWarningTitle { padding-right: 56px; }

.editor-component .advanced-warning-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: 1;
}

.editor-component .advanced-warning-actions {
  display: flex;
  justify-content: center;
}

.editor-component .advanced-warning-actions #confirmAdvancedWarning {
  min-width: min(280px, 100%);
  margin: 0;
  color: var(--ink);
  background: var(--acid);
}

.editor-component .personalization-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: transparent;
}

.editor-component .personalization-sections:not(.editor-stack-active) {
  gap: 11px;
}

.editor-component .editor-overview {
  display: grid;
  flex: 0 0 42px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 42px;
  padding-inline: 6px;
  color: inherit;
  background: transparent;
}

.editor-component .editor-overview > strong {
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.editor-component .editor-overview > span {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  text-align: right;
}

.editor-component .personal-section {
  position: relative;
  display: block;
  flex: 0 0 40px;
  height: 40px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cream);
  border: 1px solid var(--cream);
  border-radius: 8px;
  background: transparent;
}

.editor-component .personal-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  color: inherit;
  cursor: pointer;
  list-style: none;
}

.editor-component .personal-section:not([open]) > summary {
  height: 100%;
}

.editor-component .personal-section:not([open]) > :not(summary) { display: none; }

.editor-component .personal-section > summary::-webkit-details-marker {
  display: none;
}

.editor-component .personal-section-leading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.editor-component .personal-section-leading > span,
.editor-component .personal-section-summary,
.editor-component .personal-section-content,
.editor-component .editor-option-group,
.editor-component .field,
.editor-component .edge-field,
.editor-component .route-visibility-control,
.editor-component .base-visibility-control,
.editor-component .magnet-enable-control {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component .personal-section-leading > strong {
  overflow: hidden;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-component .personal-section-summary {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .82;
}

.editor-component .personalization-sections.editor-stack-active {
  gap: 0;
}

.editor-component .personalization-sections.editor-stack-active > .editor-overview {
  margin-bottom: 4px;
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) {
  z-index: 1;
  flex: 1 1 0;
  height: auto;
  min-height: 14px;
  max-height: 44px;
  margin-bottom: -8px;
  overflow: hidden;
  background: #757f4a;
  box-shadow: 0 4px 10px rgb(5 5 5 / 18%);
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) > summary {
  min-height: 14px;
  height: 100%;
  padding-inline: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]):last-child {
  margin-bottom: 0;
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) .personal-section-leading {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
}

.editor-component .personal-section[open] {
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--ink);
  border-color: var(--cream);
  background: var(--cream);
}

.editor-component .personal-section[open] > summary {
  flex: 0 0 36px;
}

.editor-component .personal-section-content {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding: 0 8px 8px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.editor-component .editor-option-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-component .editor-option-group > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.editor-component :is(.shape-options, .template-picker) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.editor-component :is(.shape-option, .template-option) {
  display: grid;
  min-width: 0;
  min-height: 42px;
  place-items: center;
  padding: 4px 6px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
  cursor: pointer;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component :is(.shape-option, .template-option).active {
  background: var(--acid);
}

@media (hover: hover) and (pointer: fine) {
  .editor-component .personal-section > summary:hover,
  .editor-component button:not(:disabled):hover,
  .editor-component dialog button:hover,
  .editor-unlock-dialog button:hover {
    color: var(--ink);
    background: var(--acid);
  }
}

.editor-component .shape-symbol {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
}

.editor-component .circle-symbol {
  border-radius: 50%;
}

.editor-component .hex-symbol {
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  background: currentColor;
}

.editor-component .polaroid-symbol {
  height: 24px;
  border-bottom-width: 6px;
}

.editor-component :is(.route-visibility-control, .base-visibility-control, .magnet-enable-control) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid var(--ink);
  border-radius: 8px;
}

.editor-component :is(.route-visibility-control, .base-visibility-control) {
  display: flex;
  gap: 8px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.editor-component .magnet-enable-control {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.editor-component :is(.route-visibility-control, .base-visibility-control, .magnet-enable-control) span {
  display: grid;
}

.editor-component :is(.route-visibility-control, .base-visibility-control) span {
  display: inline;
}

.editor-component :is(.route-visibility-control, .base-visibility-control, .magnet-enable-control) small {
  opacity: .7;
}

.editor-component .chinese-metric-picker,
.editor-component .edge-copy-editor,
.editor-component .parameter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}

.editor-component .chinese-metric-picker {
  display: contents;
}

.editor-component .chinese-metric-picker select {
  font-size: var(--type-t3-size);
  line-height: var(--type-t3-line-height);
}

.editor-component .chinese-metric-picker[hidden],
.editor-component .custom-hex-extra[hidden] {
  display: none;
}

.editor-component :is(.field, .edge-field, .chinese-metric-picker label) {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
}

.editor-component .edge-field output:empty {
  display: none;
}

.editor-component :is(input, select) {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  color: var(--ink);
  border: 1px solid rgb(5 5 5 / 24%);
  border-radius: 7px;
  background: var(--cream);
  font: inherit;
}

.editor-component :is(button, input, select):focus-visible,
.editor-component summary:focus-visible {
  color: var(--ink);
  background: var(--acid);
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.editor-component :is(.shape-option, .template-option):active,
.editor-component dialog button:active,
.editor-unlock-dialog button:active {
  color: var(--ink);
  background: var(--acid);
}

.editor-unlock-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--cream);
  border-radius: var(--container-radius);
  background: var(--cream);
}

.editor-unlock-dialog::backdrop {
  background: rgb(5 5 5 / 72%);
}

.editor-unlock-dialog form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.editor-unlock-dialog h2 {
  margin: 0;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.editor-unlock-dialog p {
  margin: 0;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-unlock-dialog form > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.editor-unlock-dialog button {
  min-height: 44px;
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

@media (max-width: 1279px) {
  .editor-component {
    padding: 8px 12px;
  }

  .editor-component .personalization-sections:not(.editor-stack-active) {
    gap: 6px;
  }

  .editor-component .editor-overview {
    flex-basis: 32px;
    min-height: 32px;
  }

  .editor-component .personal-section {
    flex-basis: 34px;
    height: 34px;
  }

  .editor-component .personal-section > summary {
    min-height: 30px;
  }
}

@media (max-width: 743px) {
  .editor-component {
    height: auto;
    overflow: visible;
    contain: none;
  }

  .editor-component .personalization-sections {
    height: auto;
    overflow: visible;
  }

  .editor-component .personal-section[open],
  .editor-component .personal-section-content {
    overflow: visible;
  }

  .editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) {
    flex: 0 0 34px;
    height: 34px;
    min-height: 34px;
    max-height: none;
  }
}