.mcsog-tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mcsog-sp-16);
  align-items: start;
}

.mcsog-tool-grid--wide {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.mcsog-tool-form {
  display: grid;
  gap: var(--mcsog-sp-12);
}

.mcsog-tool-field {
  display: grid;
  gap: var(--mcsog-sp-6);
}

.mcsog-tool-label {
  font-size: var(--mcsog-fs-13);
  color: var(--mcsog-text-2);
}

.mcsog-tool-input,
.mcsog-tool-textarea,
.mcsog-tool-select {
  box-sizing: border-box;
  width: 100%;
  padding: var(--mcsog-sp-8) var(--mcsog-sp-12);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-card);
  color: var(--mcsog-text-1);
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-13);
}

.mcsog-tool-textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}

.mcsog-tool-input:focus,
.mcsog-tool-textarea:focus,
.mcsog-tool-select:focus {
  border-color: var(--mcsog-brand-lime);
  outline: 2px solid var(--mcsog-tint-lime);
  outline-offset: 1px;
}

.mcsog-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mcsog-sp-8);
  align-items: center;
}

.mcsog-tool-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mcsog-sp-4);
}

.mcsog-tool-swatch {
  width: 26px;
  height: 26px;
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-4);
  cursor: pointer;
  padding: 0;
}

.mcsog-tool-swatch:hover {
  border-color: var(--mcsog-brand-lime);
}

.mcsog-tool-preview {
  padding: var(--mcsog-sp-16);
  border-radius: var(--mcsog-r-8);
  background-color: #0B0B0B;
  color: #FFFFFF;
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-14);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.mcsog-tool-output {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--mcsog-sp-12);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-sunk);
  color: var(--mcsog-text-1);
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-13);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.mcsog-tool-list {
  display: grid;
  gap: var(--mcsog-sp-8);
  max-height: 420px;
  overflow-y: auto;
}

.mcsog-tool-item {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--mcsog-sp-8) var(--mcsog-sp-12);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-card);
  color: var(--mcsog-text-2);
  text-align: left;
  cursor: pointer;
  font-size: var(--mcsog-fs-13);
}

.mcsog-tool-item:hover {
  background-color: var(--mcsog-fill-hover);
  color: var(--mcsog-text-1);
}

.mcsog-tool-item.mcsog-is-active {
  border-color: var(--mcsog-brand-lime);
  background-color: var(--mcsog-tint-lime);
  color: var(--mcsog-text-1);
}

.mcsog-tool-item__cmd {
  display: block;
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-12);
  color: var(--mcsog-text-3);
  margin-top: 2px;
}

.mcsog-tool-hint {
  font-size: var(--mcsog-fs-12);
  color: var(--mcsog-text-3);
  line-height: 1.6;
}

.mcsog-tool-note {
  padding: var(--mcsog-sp-8) var(--mcsog-sp-12);
  border-left: 3px solid var(--mcsog-brand-lime);
  border-radius: var(--mcsog-r-4);
  background-color: var(--mcsog-tint-lime);
  color: var(--mcsog-text-2);
  font-size: var(--mcsog-fs-13);
  line-height: 1.7;
}

.mcsog-tool-seg {
  display: inline-flex;
  justify-self: start;
  gap: var(--mcsog-sp-8);
}

.mcsog-tool-seg .mcsog-pill.mcsog-is-active {
  border-color: var(--mcsog-brand-lime);
  background-color: var(--mcsog-brand-lime);
  color: var(--mcsog-brand-ink);
  font-weight: var(--mcsog-fw-600);
}

[data-theme="dark"] .mcsog-tool-seg .mcsog-pill.mcsog-is-active {
  border-color: #F1F5F9;
  background-color: #F1F5F9;
  color: var(--mcsog-brand-ink);
}

.mcsog-seedmap {
  display: grid;
  gap: var(--mcsog-sp-12);
}

.mcsog-seedmap canvas {
  display: block;
  width: 100%;
  height: auto;
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: #0B0B0B;
  image-rendering: pixelated;
}

.mcsog-seedmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mcsog-sp-12);
  font-size: var(--mcsog-fs-12);
  color: var(--mcsog-text-3);
}

.mcsog-seedmap__key {
  display: inline-flex;
  align-items: center;
  gap: var(--mcsog-sp-6);
}

.mcsog-seedmap__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--mcsog-r-4);
  display: inline-block;
}

@media (max-width: 899px) {
  .mcsog-tool-grid,
  .mcsog-tool-grid--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mcsog-motd-preview {
  display: flex;
  align-items: center;
  gap: var(--mcsog-sp-12);
  padding: var(--mcsog-sp-12);
  border-radius: var(--mcsog-r-8);
  background-color: #1E293B;
}

.mcsog-motd-preview__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--mcsog-r-4);
  border: var(--mcsog-stroke-2) solid #2B3A50;
  background-color: #0F172A;
  object-fit: contain;
}

.mcsog-motd-preview__body {
  min-width: 0;
  flex: 1 1 auto;
}

.mcsog-motd-preview__line {
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-14);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.55em;
}

.mcsog-motd-preview__meta {
  margin-top: var(--mcsog-sp-4);
  font-size: var(--mcsog-fs-12);
  color: #94A3B8;
}

.mcsog-motd-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--mcsog-sp-6);
}

.mcsog-motd-code {
  display: flex;
  align-items: center;
  gap: var(--mcsog-sp-6);
  padding: var(--mcsog-sp-6) var(--mcsog-sp-8);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-card);
  color: var(--mcsog-text-2);
  cursor: pointer;
  font-size: var(--mcsog-fs-12);
  text-align: left;
}

.mcsog-motd-code:hover {
  border-color: var(--mcsog-brand-lime);
  color: var(--mcsog-text-1);
}

.mcsog-motd-code__swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: var(--mcsog-r-4);
  border: var(--mcsog-stroke-1) solid rgba(0, 0, 0, 0.25);
}

.mcsog-motd-code__code {
  font-family: var(--mcsog-font-mono);
  color: var(--mcsog-text-3);
}

.mcsog-motd-code__name {
  margin-left: auto;
  white-space: nowrap;
}

.mcsog-motd-counter {
  margin-left: auto;
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-12);
  color: var(--mcsog-text-3);
}

.mcsog-motd-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--mcsog-sp-8);
  font-size: var(--mcsog-fs-13);
  color: var(--mcsog-text-2);
  cursor: pointer;
}

.mcsog-motd-output {
  display: flex;
  align-items: stretch;
  gap: var(--mcsog-sp-8);
}

.mcsog-motd-output .mcsog-tool-output {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 132px;
  overflow-y: auto;
}

.mcsog-regex__field {
  display: flex;
  align-items: center;
  gap: var(--mcsog-sp-6);
  padding: 0 0 0 var(--mcsog-sp-12);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-card);
}

.mcsog-regex__clear {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  border-radius: 0 var(--mcsog-r-8) var(--mcsog-r-8) 0;
}

.mcsog-regex__field:focus-within {
  border-color: var(--mcsog-brand-lime);
  outline: 2px solid var(--mcsog-tint-lime);
  outline-offset: 1px;
}

.mcsog-regex__field .mcsog-regex__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--mcsog-sp-8) 0;
  border: 0;
  background-color: transparent;
}

.mcsog-regex__field .mcsog-regex__input:focus,
.mcsog-regex__field .mcsog-regex__input:focus-visible {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

.mcsog-regex__slash {
  flex: 0 0 auto;
  font-family: var(--mcsog-font-mono);
  font-size: var(--mcsog-fs-13);
  color: var(--mcsog-text-3);
}

.mcsog-regex__result {
  max-height: 320px;
  overflow: auto;
}

.mcsog-regex__hit {
  border-radius: var(--mcsog-r-4);
  background-color: var(--mcsog-tint-lime);
  color: var(--mcsog-text-1);
  box-shadow: inset 0 0 0 1px var(--mcsog-brand-lime);
}

.mcsog-regex__empty {
  color: var(--mcsog-text-3);
}

.mcsog-regex__detail {
  display: grid;
  gap: var(--mcsog-sp-8);
}

.mcsog-regex__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mcsog-sp-8);
  padding: var(--mcsog-sp-8) var(--mcsog-sp-12);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-card);
  font-size: var(--mcsog-fs-12);
}

.mcsog-regex__badge {
  flex: 0 0 auto;
  font-family: var(--mcsog-font-mono);
  color: var(--mcsog-text-3);
}

.mcsog-regex__text {
  font-family: var(--mcsog-font-mono);
  color: var(--mcsog-text-1);
  word-break: break-all;
}

.mcsog-regex__pos {
  font-family: var(--mcsog-font-mono);
  color: var(--mcsog-text-3);
}

.mcsog-regex__groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mcsog-sp-8);
  width: 100%;
  color: var(--mcsog-text-2);
}

.mcsog-regex__group {
  display: inline-flex;
  align-items: center;
  gap: var(--mcsog-sp-6);
}

.mcsog-regex__group b {
  font-weight: var(--mcsog-fw-500);
  color: var(--mcsog-text-3);
}

.mcsog-preview__stage {
  position: relative;
  min-height: 520px;
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: #12121E;
  overflow: hidden;
}

.mcsog-preview__stage--empty {
  border-style: dashed;
  border-width: var(--mcsog-stroke-2);
  cursor: pointer;
}

.mcsog-preview__stage--empty:hover,
.mcsog-preview__stage.mcsog-is-over {
  border-color: var(--mcsog-brand-lime);
}

.mcsog-preview__stage:focus-visible {
  border-color: var(--mcsog-brand-lime);
  outline: 2px solid var(--mcsog-tint-lime);
  outline-offset: 1px;
}

.mcsog-preview__canvas {
  position: absolute;
  inset: 0;
  background-color: #12121E;
}

.mcsog-preview__gl {
  display: block;
  width: 100%;
  height: 100%;
}

.mcsog-preview__empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--mcsog-sp-24);
  text-align: center;
  pointer-events: none;
}

.mcsog-preview__empty[hidden] {
  display: none;
}

.mcsog-preview__emptyTitle {
  font-size: var(--mcsog-fs-14);
  color: var(--mcsog-text-2);
}

.mcsog-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mcsog-sp-12);
  margin-top: var(--mcsog-sp-8);
}

.mcsog-preview__confirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--mcsog-sp-16);
  padding: var(--mcsog-sp-24);
  background-color: var(--mcsog-scrim);
  text-align: center;
}

.mcsog-preview__confirm[hidden] {
  display: none;
}

.mcsog-preview__confirmText {
  max-width: 26rem;
  font-size: var(--mcsog-fs-14);
  line-height: 1.7;
  color: var(--mcsog-text-onink-1);
}

.mcsog-preview__progress {
  display: inline-flex;
  align-items: center;
  gap: var(--mcsog-sp-8);
  max-width: 100%;
}

.mcsog-preview__progress[hidden] {
  display: none;
}

.mcsog-preview__progressTrack {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--mcsog-r-full);
  background-color: var(--mcsog-bg-sunk);
}

.mcsog-preview__progressFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--mcsog-r-full);
  background-color: var(--mcsog-brand-lime);
  transition: width 0.2s ease;
}

.mcsog-preview__progress--busy .mcsog-preview__progressFill {
  animation: mcsog-preview-busy 1.1s ease-in-out infinite;
}

.mcsog-preview__stop {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--mcsog-fs-12);
  line-height: 1;
  color: var(--mcsog-text-3);
  cursor: pointer;
}

.mcsog-preview__stop:hover {
  color: var(--mcsog-brand-lime);
}

@keyframes mcsog-preview-busy {
  0% {
    opacity: 0.35;
    transform: translateX(-100%);
  }

  100% {
    opacity: 0.35;
    transform: translateX(100%);
  }
}

.mcsog-preview__hint {
  flex: 0 1 auto;
  min-width: 0;
  padding: var(--mcsog-sp-4) var(--mcsog-sp-8);
  border-radius: var(--mcsog-r-4);
  background-color: var(--mcsog-bg-sunk);
  font-size: var(--mcsog-fs-12);
  color: var(--mcsog-text-2);
}

.mcsog-preview__statusWrap {
  display: inline-flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--mcsog-sp-4);
  min-width: 0;
}

.mcsog-preview__bar [data-mcsog-preview-status] {
  max-width: 100%;
  text-align: right;
}

.mcsog-preview__stage.mcsog-is-locked {
  cursor: none;
}

[data-mcsog-preview-clear][hidden] {
  display: none;
}

.mcsog-preview__mobile {
  display: grid;
  justify-items: center;
  gap: var(--mcsog-sp-8);
  padding: var(--mcsog-sp-24);
  border: var(--mcsog-stroke-1) solid var(--mcsog-line-1);
  border-radius: var(--mcsog-r-8);
  background-color: var(--mcsog-bg-card);
  text-align: center;
}

.mcsog-preview__mobile[hidden] {
  display: none;
}

.mcsog-preview__mobileTitle {
  font-size: var(--mcsog-fs-16);
  color: var(--mcsog-text-1);
}

.mcsog-preview__dual {
  position: relative;
  height: var(--mcsog-icon-24);
}

.mcsog-preview__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--mcsog-r-4);
  background-color: var(--mcsog-bg-sunk);
  transform: translateY(-50%);
}

.mcsog-preview__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--mcsog-r-4);
  background-color: var(--mcsog-brand-lime);
}

.mcsog-preview__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.mcsog-preview__thumb:focus {
  outline: none;
}

.mcsog-preview__thumb::-webkit-slider-thumb {
  width: var(--mcsog-icon-16);
  height: var(--mcsog-icon-16);
  border: var(--mcsog-stroke-2) solid var(--mcsog-bg-card);
  border-radius: var(--mcsog-r-full);
  background-color: var(--mcsog-brand-lime);
  box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.mcsog-preview__thumb::-moz-range-thumb {
  width: var(--mcsog-icon-16);
  height: var(--mcsog-icon-16);
  border: var(--mcsog-stroke-2) solid var(--mcsog-bg-card);
  border-radius: var(--mcsog-r-full);
  background-color: var(--mcsog-brand-lime);
  cursor: pointer;
  pointer-events: auto;
}

.mcsog-preview__thumb::-moz-range-track {
  background: none;
}

.mcsog-preview__info {
  display: grid;
  gap: var(--mcsog-sp-6);
}

.mcsog-preview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mcsog-sp-8);
  font-size: var(--mcsog-fs-12);
}

.mcsog-preview__key {
  flex: 0 0 auto;
  color: var(--mcsog-text-3);
}

.mcsog-preview__value {
  min-width: 0;
  font-family: var(--mcsog-font-mono);
  color: var(--mcsog-text-1);
  text-align: right;
  word-break: break-all;
}

.mcsog-preview__stats {
  display: grid;
  gap: var(--mcsog-sp-4);
  max-height: 360px;
  overflow-y: auto;
}

.mcsog-preview__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mcsog-sp-8);
  padding: var(--mcsog-sp-4) var(--mcsog-sp-8);
  border-radius: var(--mcsog-r-4);
  background-color: var(--mcsog-bg-sunk);
  font-size: var(--mcsog-fs-12);
}

.mcsog-preview__statName {
  min-width: 0;
  color: var(--mcsog-text-2);
  word-break: break-all;
}

.mcsog-preview__statCount {
  flex: 0 0 auto;
  font-family: var(--mcsog-font-mono);
  color: var(--mcsog-text-3);
}