:root {
  --bg: #09070e;
  --panel: #15101d;
  --panel-2: #1c1427;
  --obsidian: #100c19;
  --line: #49375e;
  --line-soft: #30253d;
  --field: #0d0b13;
  --text: #f7f1ff;
  --muted: #bdb1c9;
  --purple: #ae72ff;
  --purple-2: #7045b6;
  --lapis: #38b7e5;
  --gold: #e8cd72;
  --green: #62d68e;
  --red: #ff7f78;
  --shadow: rgba(0,0,0,.48);
  --pixel: 2px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Microsoft YaHei","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 78% 8%,rgba(116,69,182,.18),transparent 28rem),
    linear-gradient(rgba(174,114,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,183,229,.025) 1px,transparent 1px),
    #09070e;
  background-size: auto,32px 32px,32px 32px;
}

button,input,select {
  font: inherit;
}

button {
  border: 0;
}

label,input,select {
  min-width: 0;
}

code {
  color: var(--gold);
  font-family: Consolas,monospace;
}

.ambient-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-particles i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
  opacity: .28;
  animation: float 9s ease-in-out infinite;
}

.ambient-particles i:nth-child(1) {
  left: 7%;
  top: 19%;
}

.ambient-particles i:nth-child(2) {
  left: 23%;
  top: 73%;
  animation-delay: -3s;
}

.ambient-particles i:nth-child(3) {
  left: 57%;
  top: 15%;
  animation-delay: -6s;
}

.ambient-particles i:nth-child(4) {
  left: 77%;
  top: 62%;
  animation-delay: -1s;
}

.ambient-particles i:nth-child(5) {
  left: 91%;
  top: 28%;
  animation-delay: -5s;
}

.ambient-particles i:nth-child(6) {
  left: 44%;
  top: 88%;
  animation-delay: -7s;
}

@keyframes float {
  50% {
    transform: translateY(-24px) rotate(90deg);
    opacity: .7;
  }
}

.app-shell {
  width: min(1540px,calc(100vw - 36px));
  margin: auto;
  padding: 28px 0 56px;
}

.app-header {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 0 26px;
  border-bottom: 2px solid rgba(232,205,114,.18);
}

.app-header:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg,var(--lapis),var(--purple),transparent);
  box-shadow: 0 0 12px var(--purple);
}

.brand-mark {
  display: grid;
  grid-template: repeat(4,11px)/repeat(4,11px);
  gap: 3px;
  width: 68px;
  height: 68px;
  padding: 9px;
  border: 2px solid #5c466c;
  border-radius: 2px;
  background: #0c0911;
  box-shadow: 4px 4px 0 #050407,inset 0 0 18px rgba(174,114,255,.16);
}

.brand-block {
  display: block;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 -4px rgba(0,0,0,.3);
}

.brand-block-book {
  grid-area: 1/2/3/4;
  background: #bd5364;
}

.brand-block-lapis {
  grid-area: 2/1/4/2;
  background: #218ec3;
}

.brand-block-obsidian {
  grid-area: 3/2/5/5;
  background: #2a1c39;
}

.brand-copy {
  min-width: 0;
}

.eyebrow,.section-label {
  margin: 0;
  color: var(--gold);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1,h2 {
  margin: 0;
}

h1 {
  margin-top: 5px;
  color: #fff9e8;
  font-family: Impact,"Microsoft YaHei",sans-serif;
  font-size: clamp(2rem,4vw,3.4rem);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.06;
  text-shadow: 3px 3px 0 #39264c,0 0 24px rgba(174,114,255,.22);
}

h2 {
  margin-top: 5px;
  font-size: 1.2rem;
}

.subtitle,.section-description {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.journey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 22px;
  color: var(--muted);
  font-size: .8rem;
}

.journey span {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.journey b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  color: var(--gold);
  background: var(--panel);
}

.journey i {
  width: 34px;
  height: 1px;
  background: var(--line);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(390px,.9fr);
  gap: 22px;
  align-items: start;
}

.editor-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.left-steps {
  display: grid;
  gap: 18px;
  min-width: 0;
  align-content: start;
}

.result-column {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.panel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(145deg,rgba(31,22,42,.98),rgba(15,12,21,.99));
  box-shadow: 8px 8px 0 rgba(0,0,0,.22),0 20px 45px var(--shadow),inset 0 1px rgba(255,255,255,.035);
}

.panel.has-open-menu {
  z-index: 80;
}

.panel:before,.panel:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--gold);
  opacity: .35;
}

.panel:before {
  top: 6px;
  left: 6px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.panel:after {
  right: 6px;
  bottom: 6px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.step-number {
  position: absolute;
  right: 18px;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(174,114,255,.45);
  color: #d8b9ff;
  background: #17101f;
  box-shadow: 0 0 12px rgba(174,114,255,.16);
  font-family: Consolas,"Cascadia Mono",monospace;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.panel-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 0;
}

.section-description {
  font-size: .88rem;
}

.field-grid {
  display: grid;
  gap: 16px;
  padding: 20px 22px 24px;
}

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

.item-fields {
  grid-template-columns: minmax(0,1fr) 120px;
  align-items: start;
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.field>span,.enchant-table-header,.meta-pill span {
  color: #d7cce2;
  font-size: .84rem;
  font-weight: 700;
}

.field-help {
  display: block;
  margin: 0;
  color: #94879f;
  font-size: .78rem;
  line-height: 1.45;
}

.field-error {
  display: none;
  margin: 0;
  color: #ffaaa5;
  font-size: .78rem;
  line-height: 1.45;
}

.field-error:not(:empty) {
  display: block;
}

input,select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #59466c;
  border-radius: 2px;
  outline: none;
  color: var(--text);
  background: linear-gradient(180deg,rgba(56,183,229,.035),transparent),var(--field);
  transition: border-color .15s,box-shadow .15s;
}

input::placeholder {
  color: #756a80;
}

input:focus,select:focus,.button:focus-visible,.text-link:focus-visible,.mobile-result-toggle:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 3px;
  border-color: var(--lapis);
  box-shadow: 0 0 0 3px rgba(56,183,229,.14);
}

input.is-invalid,select.is-invalid {
  border-color: var(--red);
  box-shadow: inset 3px 0 var(--red);
}

#versionSelect {
  appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position: calc(100% - 18px) 20px,calc(100% - 12px) 20px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.text-link {
  align-self: start;
  color: #a8dff4;
  font-size: .8rem;
  text-decoration: none;
}

.text-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

.button-row,.copy-actions,.enchant-actions,.secondary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 2px;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s,filter .12s;
}

.button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.button:not(:disabled):active {
  transform: translateY(1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .42;
  filter: grayscale(.5);
  transform: none;
}

.primary {
  border: 1px solid #79d2f0;
  background: linear-gradient(180deg,#288ebc,#594096);
  box-shadow: inset 0 -4px rgba(0,0,0,.25),3px 3px 0 #09070e;
}

.ghost {
  border: 1px solid #493a58;
  background: #1b1523;
  color: #c8bdcf;
}

.reset-all-button {
  min-height: 34px;
  margin-left: auto;
  padding: 0 12px;
  font-size: .76rem;
  white-space: nowrap;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(98,214,142,.4);
  color: #caffdd;
  background: rgba(98,214,142,.09);
  font-size: .78rem;
  font-weight: 800;
}

.enchant-actions,
.enchant-table-header,
.enchantment-list {
  width: 100%;
}

.enchant-actions {
  justify-content: space-between;
  padding: 20px 22px 0;
}

.enchant-table-header {
  display: grid;
  grid-template-columns: minmax(220px,1fr) 120px 88px;
  gap: 12px;
  padding: 20px 22px 8px;
}

.enchantment-list {
  display: grid;
  gap: 12px;
  padding: 0 22px 24px;
}

.enchantment-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px,1fr) 120px 88px;
  gap: 12px;
  align-items: end;
  padding: 16px 14px 14px 20px;
  border: 1px solid #4a3a5b;
  border-left: 4px solid var(--purple);
  background: linear-gradient(90deg,rgba(174,114,255,.07),transparent 45%),#100d16;
  box-shadow: inset 0 0 18px rgba(0,0,0,.25);
}

.enchantment-row:before {
  content: attr(data-slot);
  position: absolute;
  top: 5px;
  left: 5px;
  color: rgba(232,205,114,.38);
  font: 700 .65rem Consolas,monospace;
}

.enchantment-row.has-error {
  border-left-color: var(--red);
}

.enchantment-row.is-entering {
  animation: enchantment-row-enter .32s cubic-bezier(.2,.8,.2,1) both;
}

.enchantment-row.is-removing {
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  animation: enchantment-row-remove .3s var(--remove-delay,0ms) cubic-bezier(.4,0,.8,.2) both;
}

@keyframes enchantment-row-enter {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
    box-shadow: 0 0 0 rgba(174,114,255,0);
  }

  65% {
    opacity: 1;
    transform: translateY(1px) scale(1);
    border-color: rgba(174,114,255,.82);
    box-shadow: 0 0 16px rgba(174,114,255,.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: inset 0 0 18px rgba(0,0,0,.25);
  }
}

@keyframes enchantment-row-remove {
  0% {
    max-height: var(--row-height);
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  58% {
    max-height: var(--row-height);
    opacity: 0;
    transform: translateX(18px) scale(.98);
    border-color: rgba(255,127,120,.7);
    filter: blur(.6px);
  }

  100% {
    max-height: 0;
    margin-bottom: var(--remove-gap-offset,-12px);
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    opacity: 0;
    transform: translateX(24px) scale(.97);
    filter: blur(1px);
  }
}

.enchantment-row.combobox-row-open {
  z-index: 30;
}

.delete-button {
  width: 100%;
  border: 1px solid rgba(255,127,120,.45);
  background: #301a22;
  color: #ffd8d5;
}

.empty-message {
  padding: 26px 18px;
  border: 1px dashed #655177;
  color: var(--muted);
  text-align: center;
  background: rgba(8,7,12,.38);
  line-height: 1.6;
}

.empty-message.is-entering {
  overflow: hidden;
  animation: empty-message-enter .3s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes empty-message-enter {
  0% {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    max-height: var(--empty-height);
    padding-top: 26px;
    padding-bottom: 26px;
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-message strong {
  display: block;
  margin-bottom: 5px;
  color: #eee4f7;
  font-size: .92rem;
}

.combobox {
  position: relative;
  min-width: 0;
}

.combobox-control {
  position: relative;
}

.combobox-input {
  padding-right: 44px;
  text-overflow: ellipsis;
}

.combobox-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  width: 40px;
  height: calc(100% - 2px);
  color: #d9cce7;
  background: transparent;
  cursor: pointer;
}

.combobox-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}

.combobox.is-open .combobox-chevron {
  transform: translateY(2px) rotate(225deg);
}

.combobox-menu {
  position: fixed;
  z-index: 100;
  max-width: calc(100vw - 24px);
  max-height: 330px;
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #69517f;
  background: #100d16;
  box-shadow: 7px 9px 0 rgba(0,0,0,.42);
}

.enchantment-combobox .combobox-menu {
  top: auto;
  bottom: auto;
}

.combobox-group+.combobox-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.combobox-group-label {
  padding: 5px 9px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
}

.combobox-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 39px;
  padding: 7px 9px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.combobox-option:hover,.combobox-option.is-active {
  background: rgba(56,183,229,.16);
}

.combobox-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.combobox-option small {
  min-width: 0;
  flex: 0 1 auto;
  color: #91849c;
  font: normal .7rem Consolas,monospace;
  overflow-wrap: anywhere;
  text-align: right;
}

.combobox-empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
  font-size: .82rem;
}

.mobile-label {
  display: none;
}

.mobile-result-toggle {
  display: none;
}

.output-panel {
  overflow: hidden;
  border-color: #634981;
}

.output-glow {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(174,114,255,.17);
  filter: blur(35px);
  pointer-events: none;
}

.output-header {
  align-items: center;
}

.command-meta {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  padding: 18px 22px 0;
}

.meta-pill {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #3b3047;
  background: rgba(8,7,12,.5);
}

.meta-pill strong {
  overflow: hidden;
  color: #fff7db;
  font: 800 .83rem Consolas,monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-frame {
  margin: 18px 22px 13px;
  border: 1px solid rgba(232,205,114,.55);
  background: #07060a;
  box-shadow: inset 0 0 24px rgba(174,114,255,.06);
}

.command-frame-title {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid #332b38;
  color: #857990;
  font: 700 .64rem Consolas,monospace;
}

.command-frame-title span {
  margin-right: auto;
}

.command-frame-title i {
  width: 5px;
  height: 5px;
  background: #604e6c;
}

.command-frame-title i:first-of-type {
  background: var(--lapis);
}

.command-preview {
  min-height: 160px;
  max-height: 330px;
  margin: 0;
  padding: 17px;
  overflow: auto;
  color: #fff3c5;
  font: normal .9rem/1.75 Consolas,"Cascadia Mono",monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.error-box {
  display: none;
  margin: 0 22px 14px;
  padding: 11px 13px;
  border-left: 3px solid var(--red);
  color: #ffd8d5;
  background: rgba(90,29,36,.35);
  font-size: .82rem;
  line-height: 1.6;
}

.error-box.visible {
  display: block;
}

.copy-actions {
  padding: 0 22px;
}

.copy-button {
  flex: 1;
}

.copy-status {
  min-width: 60px;
  color: var(--green);
  font-weight: 900;
  opacity: 0;
  transform: translateY(4px);
}

.copy-status.is-visible {
  animation: copy-status-feedback 2s ease both;
}

@keyframes copy-status-feedback {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  12%,75% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

.output-tip {
  margin: 12px 22px 22px;
  color: #84788e;
  font-size: .75rem;
  text-align: center;
}

/* Interaction and motion */
.brand-mark,
.panel,
.command-frame,
.empty-message,
.enchantment-row {
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.step-panel,
.output-panel {
  animation: panel-enter .38s ease both;
}

.item-panel {
  animation-delay: .05s;
}

.enchant-panel {
  animation-delay: .1s;
}

.output-panel {
  animation-delay: .15s;
}

.panel:focus-within {
  border-color: rgba(174,114,255,.78);
  box-shadow:
    8px 8px 0 rgba(0,0,0,.22),
    0 20px 45px var(--shadow),
    0 0 0 1px rgba(174,114,255,.18),
    inset 0 1px rgba(255,255,255,.035);
}

input,
select,
.combobox-toggle {
  transition:
    transform .15s ease,
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

input:focus,
select:focus {
  transform: translateY(-1px);
}

.combobox.is-open .combobox-control {
  filter: drop-shadow(0 0 7px rgba(56,183,229,.18));
}

.combobox.is-open .combobox-menu {
  animation: menu-enter .16s ease both;
}

.combobox-option {
  transition:
    color .12s ease,
    background-color .12s ease,
    padding-left .12s ease;
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.button:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.13),transparent 80%);
  transform: translateX(-115%);
  transition: transform .42s ease;
}

.button:not(:disabled):hover::after,
.button:not(:disabled):focus-visible::after {
  transform: translateX(115%);
}

.button:not(:disabled):focus-visible {
  transform: translateY(-1px);
}

.reset-rune-layer {
  position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

.reset-rune-layer::before {
  content: "";
  position: absolute;
  top: -25%;
  right: 0;
  left: 0;
  height: 32%;
  border-top: 1px solid rgba(232,205,114,.8);
  border-bottom: 1px solid rgba(56,183,229,.65);
  background: linear-gradient(180deg,transparent,rgba(174,114,255,.35),transparent);
  box-shadow: 0 0 22px rgba(174,114,255,.36);
  animation: rune-scan .42s var(--reset-delay) cubic-bezier(.3,.7,.2,1) both;
}

.reset-rune-layer span {
  position: absolute;
  right: 8%;
  color: rgba(218,190,255,.86);
  font: 800 clamp(.65rem,1vw,.86rem)/1 Consolas,monospace;
  letter-spacing: .22em;
  text-shadow: 0 0 8px var(--purple);
  opacity: 0;
  animation: rune-reverse .42s var(--reset-delay) ease both;
}

.reset-rune-layer span:first-child {
  top: 32%;
}

.reset-rune-layer span:last-child {
  top: 64%;
  animation-delay: calc(var(--reset-delay) + 45ms);
}

.panel.is-rewinding {
  border-color: var(--purple);
  box-shadow: 0 0 20px rgba(174,114,255,.32),inset 0 0 22px rgba(56,183,229,.08);
}

.panel.is-rewinding > :not(.reset-rune-layer):not(.step-number) {
  animation: content-rewind .42s var(--reset-delay) ease both;
}

.reset-all-button.is-resetting {
  border-color: var(--purple);
  color: #ead8ff;
  box-shadow: 0 0 14px rgba(174,114,255,.42);
}

.reset-all-button.reset-complete {
  animation: reset-rune-flash .32s ease both;
}

@keyframes rune-scan {
  from {
    transform: translateY(0);
    opacity: 0;
  }

  18%,78% {
    opacity: 1;
  }

  to {
    transform: translateY(390%);
    opacity: 0;
  }
}

@keyframes rune-reverse {
  0% {
    transform: translateX(18px);
    opacity: 0;
  }

  35%,68% {
    opacity: .9;
  }

  100% {
    transform: translateX(-12px);
    opacity: 0;
  }
}

@keyframes content-rewind {
  0%,100% {
    opacity: 1;
    filter: none;
  }

  48% {
    opacity: .38;
    filter: blur(.45px);
  }
}

@keyframes reset-rune-flash {
  0% {
    color: var(--text);
    box-shadow: none;
  }

  45% {
    color: #fbf4ff;
    border-color: var(--purple);
    background: #38214e;
    box-shadow: 0 0 8px var(--purple),0 0 22px rgba(174,114,255,.55);
  }

  100% {
    color: var(--text);
    box-shadow: none;
  }
}

.enchantment-row:focus-within {
  border-color: rgba(56,183,229,.7);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.25),
    0 0 0 2px rgba(56,183,229,.09);
}

.error-box.visible {
  animation: message-enter .2s ease both;
}

@keyframes panel-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes menu-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes message-enter {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(hover:hover) {
  .brand-mark:hover {
    transform: translateY(-2px) rotate(-1deg);
    border-color: var(--purple);
    box-shadow: 4px 6px 0 #050407,0 0 20px rgba(174,114,255,.22);
  }

  .panel:hover {
    border-color: rgba(111,82,137,.95);
  }

  input:hover,
  select:hover {
    border-color: #765d8c;
  }

  .combobox-toggle:hover {
    color: var(--gold);
    background: rgba(174,114,255,.08);
  }

  .combobox-option:hover {
    padding-left: 13px;
  }

  .enchantment-row:hover {
    border-color: rgba(174,114,255,.7);
    box-shadow: inset 0 0 18px rgba(0,0,0,.25),0 7px 18px rgba(0,0,0,.2);
  }

  .command-frame:hover {
    border-color: rgba(232,205,114,.88);
    box-shadow: inset 0 0 24px rgba(174,114,255,.08),0 0 16px rgba(232,205,114,.08);
  }

  .empty-message:hover {
    border-color: rgba(174,114,255,.62);
    background: rgba(18,13,25,.66);
  }

  .text-link:hover {
    transform: translateX(2px);
  }
}

@media(min-width:981px) {
  .workspace {
    grid-template-columns:
      minmax(410px,.95fr)
      minmax(450px,1.05fr);
    grid-template-rows: auto auto;
  }

  .editor-column {
    display: contents;
  }

  .left-steps {
    grid-column: 1;
    grid-row: 1;
  }

  .enchant-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .result-column {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .settings-panel .panel-header,
  .item-panel .panel-header {
    padding-top: 16px;
  }

  .settings-panel .section-description,
  .item-panel .section-description {
    display: none;
  }

  .settings-panel .field-help {
    display: none;
  }

  .settings-panel .field-grid,
  .item-panel .field-grid {
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .settings-panel input,
  .settings-panel select,
  .item-panel input {
    min-height: 44px;
  }

  .enchant-panel .enchant-table-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) 78px 72px;
  }

  .enchant-panel .enchantment-list {
    padding-top: 0;
  }

  .enchant-panel .enchantment-row {
    grid-template-columns: minmax(0,1fr) 78px 72px;
  }

  .enchant-panel .enchantment-row>div:last-child {
    grid-column: auto;
  }

  .enchant-panel .mobile-label {
    display: none;
  }

  .enchant-panel .delete-button {
    width: 100%;
    padding: 0 10px;
  }

  .enchant-panel .enchant-actions {
    align-items: center;
    flex-direction: row;
  }

  .enchant-panel .secondary-actions {
    display: flex;
  }
}

@media(min-width:1440px) {
  .workspace {
    grid-template-columns:
      minmax(360px,.95fr)
      minmax(430px,1.1fr)
      minmax(340px,.85fr);
    grid-template-rows: auto;
    gap: 24px;
  }

  .result-column {
    position: sticky;
    grid-column: 3;
    grid-row: 1;
  }
}

@media(max-width:980px) {
  .app-shell {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .journey {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 0 0 4px;
    overflow: visible;
  }

  .journey>i {
    display: none;
  }

  .journey span {
    justify-content: center;
    min-width: 0;
  }

  .journey .reset-all-button {
    grid-column: 1/-1;
    width: 100%;
    min-height: 44px;
    margin: 2px 0 0;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .result-column {
    position: static;
  }

  .output-panel {
    display: none;
  }

  .result-column.is-open .output-panel {
    display: block;
  }

  .mobile-result-toggle {
    position: fixed;
    right: max(11px,env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: max(11px,env(safe-area-inset-left));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-height: 64px;
    padding: 10px 16px;
    border: 1px solid #77539b;
    color: var(--text);
    background: linear-gradient(135deg,#251731,#11101a);
    box-shadow: 0 8px 26px rgba(0,0,0,.55),inset 0 0 18px rgba(174,114,255,.1);
    cursor: pointer;
  }

  .mobile-result-toggle.is-returning {
    animation: mobile-result-return .34s cubic-bezier(.2,.8,.2,1) both;
  }

  .mobile-result-toggle span {
    display: grid;
    gap: 2px;
    text-align: left;
  }

  .mobile-result-toggle small {
    color: var(--gold);
    font-size: .66rem;
  }

  .mobile-result-toggle strong {
    font-size: .9rem;
  }

  .mobile-result-toggle i {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg);
  }

  .result-column.is-open .mobile-result-toggle {
    position: static;
    width: 100%;
    margin-bottom: 8px;
  }

  .result-column.is-open .mobile-result-toggle i {
    transform: rotate(225deg);
  }

  @keyframes mobile-result-return {
    0% {
      opacity: 0;
      transform: translateY(calc(100% + 18px)) scale(.98);
    }

    72% {
      opacity: 1;
      transform: translateY(-3px) scale(1);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media(max-width:760px) {
  .app-shell {
    width: min(100% - 22px,720px);
    padding-top: 15px;
  }

  .app-header {
    grid-template-columns: auto 1fr;
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    padding: 8px;
    grid-template: repeat(4,8px)/repeat(4,8px);
  }

  .editor-column,
  .left-steps {
    gap: 14px;
  }

  .button {
    min-height: 46px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .panel-header,.action-header {
    flex-direction: column;
  }

  .item-fields {
    grid-template-columns: 1fr 110px;
  }

  .enchant-table-header {
    display: none;
  }

  .enchantment-list {
    padding-top: 18px;
  }

  .enchantment-row {
    grid-template-columns: 1fr 95px;
  }

  .enchantment-row>div:last-child {
    grid-column: 1/-1;
  }

  .mobile-label {
    display: block;
    margin-bottom: 7px;
    color: #b9aec4;
    font-size: .77rem;
  }

  .delete-button {
    width: auto;
  }

  .enchant-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .secondary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .secondary-actions .button {
    width: 100%;
  }
}

@media(max-width:520px) {
  .app-shell {
    width: calc(100% - 14px);
  }

  .app-header {
    grid-template-columns: 1fr;
  }

  .brand-mark {
    display: none;
  }

  h1 {
    font-size: 2rem;
  }

  .journey span {
    font-size: 0;
  }

  .journey span b {
    font-size: .75rem;
  }

  .journey span:after {
    font-size: .72rem;
  }

  .journey span:nth-of-type(1):after {
    content: "目标";
  }

  .journey span:nth-of-type(2):after {
    content: "物品";
  }

  .journey span:nth-of-type(3):after {
    content: "附魔";
  }

  .journey span:nth-of-type(4):after {
    content: "复制";
  }

  .panel-header,.field-grid,.enchant-actions,.enchantment-list,.command-meta {
    padding-left: 15px;
    padding-right: 15px;
  }

  .panel-header {
    padding-top: 18px;
  }

  .field-grid {
    padding-top: 16px;
    padding-bottom: 18px;
  }

  .item-fields {
    grid-template-columns: 1fr;
  }

  .enchantment-row {
    grid-template-columns: 1fr;
  }

  .enchantment-row>div:last-child {
    grid-column: auto;
  }

  .delete-button {
    width: 100%;
  }

  .command-frame {
    margin-left: 15px;
    margin-right: 15px;
  }

  .error-box {
    margin-left: 15px;
    margin-right: 15px;
  }

  .copy-actions {
    padding-left: 15px;
    padding-right: 15px;
  }

  .output-tip {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,*:before,*:after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }

  .ambient-particles {
    display: none;
  }

  .copy-status.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}