@font-face {
  font-family: "Metron Light";
  src: url("/lib/fonts/metronlight.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

.message-studio-page {
  --studio-panel: rgba(13, 13, 14, .98);
  --studio-panel-soft: rgba(20, 20, 21, .97);
  --studio-field: #080809;
  --studio-line: rgba(255, 255, 255, .12);
  --studio-line-strong: rgba(255, 0, 10, .48);
  --studio-muted: #a9a9ab;
  --studio-soft: #747477;
  --studio-red: var(--page-accent-strong, #ff000a);
  --studio-red-deep: var(--page-accent, #a00000);
  --studio-warning: #d3a65a;
  --studio-success: #6fa978;
}

.message-studio-page .page-heading { margin-bottom: .65rem; }
.message-studio-page .page-lead { max-width: 82rem; }

.message-studio-tool {
  overflow: hidden;
  border: 1px solid var(--page-border-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(20,20,21,.99), rgba(7,7,8,.99));
  box-shadow: var(--page-shadow);
}

.message-studio-workspace {
  display: grid;
  grid-template-columns: clamp(19.5rem, 20.5vw, 21.5rem) minmax(0, 1fr);
  height: clamp(28rem, calc(100dvh - 24rem), 44rem);
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns .18s ease;
}

.message-studio-controls,
.ascii-controls,
.message-studio-canvas {
  min-width: 0;
  min-height: 0;
  scrollbar-color: rgba(255,255,255,.36) rgba(0,0,0,.2);
  scrollbar-width: thin;
}

.message-studio-controls {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--studio-line);
  background: rgba(0,0,0,.14);
  overscroll-behavior: contain;
}

.message-studio-canvas {
  display: grid;
  grid-column: 2;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .7rem;
  padding: .7rem;
  overflow: hidden;
  overscroll-behavior: contain;
}

.studio.ascii-mode .message-studio-workspace {
  grid-template-columns: clamp(19.5rem, 20.5vw, 21.5rem) clamp(18rem, 19vw, 20rem) minmax(0, 1fr);
}

.studio.ascii-mode .message-studio-canvas {
  grid-column: 3;
}

.message-studio-workspace > .ascii-controls {
  display: grid;
  grid-column: 2;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: .55rem;
  height: auto;
  margin: 0;
  padding: .7rem;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--studio-line);
  border-radius: 0;
  background: linear-gradient(110deg, rgba(92,65,18,.13), rgba(0,0,0,.17));
  overscroll-behavior: contain;
}

.message-studio-modebar {
  display: grid;
  gap: .4rem;
  padding: .7rem;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(0,0,0,.2);
}
.message-studio-controls .message-studio-modebar { order: 1; }
.message-studio-controls .message-insert-tools { order: 2; }
.message-studio-controls .config-strip { order: 3; }
.message-studio-controls .conditional-config { order: 4; }
.message-studio-controls .ascii-source-controls { order: 5; }
.message-studio-controls .schedule-safety { order: 6; }
.message-studio-controls .settings-validation { order: 7; }

.message-studio-modebar > span,
.control-section-title {
  color: var(--studio-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.message-studio-modebar .mode-switch {
  width: 100%;
}

.message-studio-modebar .mode-button {
  flex: 1 1 50%;
}

.message-studio-tool button,
.message-studio-tool input,
.message-studio-tool select,
.message-studio-tool textarea { font-family: var(--font-sans); }

.message-studio-tool button { text-decoration: none; }

.message-studio-toolbar {
  display: grid;
  grid-template-columns: clamp(19.5rem, 20.5vw, 21.5rem) minmax(12rem, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-height: 4rem;
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(0,0,0,.34);
}

.message-studio-toolbar__label {
  display: grid;
  gap: .08rem;
}
.message-studio-toolbar__label strong {
  font-family: var(--font-display);
  font-size: 1.04rem;
  letter-spacing: .04em;
}
.message-studio-toolbar__label span {
  color: var(--studio-muted);
  font-size: .72rem;
}
.message-studio-toolbar__messages {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
}
.message-studio-toolbar__actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.message-studio-toolbar__actions { justify-content: flex-end; }

.message-studio-tool .button,
.message-studio-tool .add-message,
.message-studio-tool .remove-message,
.message-studio-tool .mode-button,
.message-studio-tool .mini-action {
  min-height: 2.25rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .55rem;
  background: rgba(255,255,255,.055);
  color: var(--page-text);
  font-weight: 700;
  line-height: 1;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.message-studio-tool .button { padding: 0 .8rem; font-size: .75rem; }
.message-studio-tool .button:hover,
.message-studio-tool .add-message:hover,
.message-studio-tool .remove-message:hover,
.message-studio-tool .mode-button:hover,
.message-studio-tool .mini-action:hover {
  border-color: rgba(255,0,10,.72);
  background: rgba(160,0,0,.2);
}
.message-studio-tool .button:active,
.message-studio-tool .add-message:active,
.message-studio-tool .remove-message:active,
.message-studio-tool .mode-button:active,
.message-studio-tool .mini-action:active { transform: translateY(1px); }
.message-studio-tool .button.primary {
  border-color: rgba(255,0,10,.72);
  background: linear-gradient(180deg, #bd0008, #730005);
  color: #fff;
}
.message-studio-tool .button.ghost { background: rgba(255,255,255,.025); }

.message-bar {
  display: flex;
  min-height: 3.45rem;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(0,0,0,.26);
}
.message-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.message-studio-toolbar__messages .message-tabs {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
}
.message-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .55rem;
  min-width: 10rem;
  max-width: 15rem;
  padding: .38rem .55rem;
  border: 0;
  border-right: 1px solid var(--studio-line);
  background: transparent;
  color: var(--studio-muted);
  cursor: pointer;
  text-align: left;
}
.message-studio-toolbar__messages .message-tab {
  min-width: 8rem;
  max-width: 11rem;
  padding: .35rem .55rem;
}
.message-tab:hover { background: rgba(255,255,255,.035); }
.message-tab.active {
  box-shadow: inset 0 -3px var(--studio-red);
  background: rgba(160,0,0,.12);
  color: #fff;
}
.tab-number { color: var(--studio-red); font: 700 .68rem var(--font-mono); }
.tab-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.tab-timing { display: block; margin-top: .1rem; color: var(--studio-soft); font-size: .61rem; }
.add-message {
  flex: 0 0 auto;
  margin: .4rem;
  padding: 0 .75rem;
  font-size: .72rem;
}
.add-message span { color: var(--studio-red); }
.message-studio-toolbar__messages .add-message {
  width: 2.25rem;
  margin: .35rem;
  padding: 0;
  font-size: 1rem;
}
.message-studio-toolbar__messages .remove-message {
  align-self: center;
  margin-right: .15rem;
}

.schedule-safety {
  display: grid;
  grid-template-columns: 1fr auto 11rem;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(211,166,90,.38);
  background: rgba(97,65,17,.17);
}
.schedule-safety[hidden] { display: none; }
.schedule-safety > div:first-child { display: grid; }
.schedule-safety strong { color: #e5bf79; font-size: .74rem; }
.schedule-safety span { color: #afa186; font-size: .66rem; }
.switch-label { display: flex; align-items: center; gap: .48rem; color: #d7c49d; cursor: pointer; font-size: .7rem; }
.switch-label input { position: absolute; opacity: 0; }
.switch { position: relative; width: 2rem; height: 1.1rem; border: 1px solid #73613e; border-radius: 99px; background: #262118; }
.switch::after { content: ""; position: absolute; top: .14rem; left: .14rem; width: .7rem; height: .7rem; border-radius: 50%; background: #8c816d; transition: left .15s, background .15s; }
.switch-label input:checked + .switch::after { left: 1rem; background: #efbd61; }
.compact-field { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; color: #afa186; font-size: .66rem; }
.compact-field > span { display: flex; align-items: center; gap: .35rem; }
.compact-field input { width: 5.4rem; }

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .7rem;
}
.editor-header > div { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.message-index { flex: 0 0 auto; color: var(--studio-red); font: 700 .68rem var(--font-mono); letter-spacing: .08em; }
.remove-message { padding: 0 .65rem; border-color: transparent; background: transparent; color: #c47f75; font-size: .68rem; }

.config-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin: 0 .7rem;
  padding: .45rem;
  border: 1px solid var(--studio-line);
  border-radius: .7rem;
  background: rgba(0,0,0,.28);
}
.mode-switch { display: flex; }
.mode-button { min-height: 2.15rem; padding: 0 .8rem; border-radius: 0; color: var(--studio-muted); font-size: .7rem; }
.mode-button + .mode-button { border-left: 0; }
.mode-button:first-child { border-radius: .5rem 0 0 .5rem; }
.mode-button:last-child { border-radius: 0 .5rem .5rem 0; }
.mode-button.active { border-color: var(--studio-red-deep); background: rgba(160,0,0,.34); color: #fff; }
.flag-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.flag { cursor: pointer; }
.flag input { position: absolute; opacity: 0; }
.flag span { display: grid; min-height: 2.15rem; place-items: center; padding: 0 .78rem; border: 1px solid var(--studio-line); border-radius: .5rem; background: rgba(255,255,255,.025); color: var(--studio-muted); font-size: .68rem; font-weight: 700; }
.flag input:checked + span { border-color: rgba(255,0,10,.5); background: rgba(160,0,0,.24); color: #ffc5c7; }

.conditional-config {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin: .45rem .7rem 0;
}
.conditional-config[hidden], .value-control[hidden], .shutdown-control[hidden] { display: none; }
.value-control { display: grid; align-content: start; gap: .25rem; min-height: 0; padding: .55rem; border: 1px solid var(--studio-line); border-radius: .65rem; background: rgba(255,255,255,.025); }
.value-control > span { color: #d1d1d3; font-size: .72rem; font-weight: 700; }
.value-control > div { display: flex; align-items: center; gap: .45rem; }
.value-control input { width: 5.4rem; }
.value-control em { color: var(--studio-muted); font-size: .65rem; font-style: normal; }
.value-control small { color: var(--studio-soft); font-size: .62rem; line-height: 1.4; }
.value-control small.adjusted { color: #e2b967; }
.shutdown-control { display: flex; align-items: center; gap: .6rem; min-height: 4.7rem; padding: .75rem; border: 1px solid rgba(255,0,10,.23); border-radius: .65rem; background: rgba(160,0,0,.08); cursor: pointer; }
.shutdown-control > span { display: grid; }
.shutdown-control strong { color: #efb1b3; font-size: .72rem; }
.shutdown-control small { color: #9b7778; font-size: .62rem; }

.message-studio-tool input,
.message-studio-tool select,
.message-studio-tool textarea {
  border: 1px solid var(--studio-line);
  border-radius: .5rem;
  outline: none;
  background: var(--studio-field);
  color: var(--page-text);
}
.message-studio-tool input,
.message-studio-tool select { min-height: 2.35rem; padding: 0 .6rem; }
.message-studio-tool input:focus,
.message-studio-tool select:focus,
.message-studio-tool textarea:focus { border-color: var(--studio-red-deep); box-shadow: 0 0 0 3px rgba(255,0,10,.08); }
.message-studio-tool input[type="checkbox"] { width: 1rem; height: 1rem; min-height: auto; margin: 0; padding: 0; accent-color: var(--studio-red); }

.ascii-controls {
  margin: .5rem .7rem;
  padding: .55rem;
  border: 1px solid rgba(211,166,90,.28);
  border-radius: .7rem;
  background: linear-gradient(110deg, rgba(92,65,18,.13), rgba(0,0,0,.17));
}
.ascii-controls[hidden] { display: none; }
.ascii-source-controls { display: grid; gap: .55rem; margin: .5rem .7rem; padding: .65rem; border: 1px solid rgba(211,166,90,.28); border-radius: .7rem; background: linear-gradient(110deg, rgba(92,65,18,.13), rgba(0,0,0,.17)); }
.ascii-source-controls[hidden] { display: none; }
.upload-button { display: flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: .5rem .6rem; border: 1px dashed rgba(211,166,90,.5); border-radius: .6rem; background: rgba(0,0,0,.2); cursor: pointer; }
.ascii-source-controls .upload-button {
  justify-content: center;
  min-height: 7.5rem;
  text-align: left;
}
.upload-button:hover, .upload-button.dragover { border-color: #e8ad4e; background: rgba(125,79,38,.14); }
.upload-button input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.upload-symbol { color: #e8ad4e; font-size: 1.55rem; }
.upload-button > span:last-child { display: grid; min-width: 0; }
.upload-button strong { font-size: .74rem; }
.upload-button small { overflow: hidden; color: var(--studio-muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.chars-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem; }
.chars-field > span { display: flex; align-items: center; gap: .35rem; color: #e0cfa8; font-size: .72rem; font-weight: 700; }
#asciiRamp { min-width: 0; font: 300 1.22rem/1 "Metron Light", sans-serif; letter-spacing: .08em; }
.chars-field > span,
#asciiRamp { grid-column: 1 / -1; }
.chars-field select { min-width: 0; color: #c0b8a8; font-size: .66rem; }
.chars-field .mini-action { height: 2.35rem; }
.chars-help { margin-top: 0; color: #978b70; font-size: .62rem; }
.ascii-image-preview { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: .65rem; background: #050506; }
.ascii-image-preview span { padding: 1rem; color: var(--studio-soft); font-size: .68rem; text-align: center; }
.ascii-image-preview img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.ascii-image-preview img[hidden],
.ascii-image-preview span[hidden] { display: none; }
.ascii-adjustments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: .4rem; }
.range-field { display: grid; gap: .35rem; }
.range-field > span { display: flex; justify-content: space-between; align-items: center; color: var(--studio-muted); font-size: .65rem; }
.range-field output { color: var(--page-text); font-family: var(--font-mono); }
.message-studio-tool input[type="range"] { width: 100%; min-height: auto; padding: 0; accent-color: var(--studio-red); }
.inline-check { display: flex; align-items: center; gap: .4rem; min-height: 2rem; color: var(--studio-muted); font-size: .66rem; }
.ascii-adjustments .inline-check { grid-column: 1 / -1; }
.mini-action { min-height: 2rem; padding: 0 .6rem; color: #b8b8bb; font-size: .64rem; }
.accent-action { border-color: rgba(255,0,10,.38); color: #f1a7aa; }
.message-output-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: .7rem;
  min-height: 0;
}

.message-studio-controls .schedule-safety { grid-template-columns: 1fr; }
.message-studio-controls .compact-field { justify-content: flex-start; }
.message-studio-controls .config-strip { align-items: stretch; flex-direction: column; }
.message-studio-controls .flag-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.message-studio-controls .flag span { min-height: 2rem; padding: 0 .15rem; font-size: .62rem; }
.message-studio-controls .conditional-config { grid-template-columns: 1fr; }
.message-editor-section,
.preview-section {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--studio-line);
  border-radius: .75rem;
  background: rgba(255,255,255,.02);
}
.message-insert-tools {
  display: grid;
  gap: .5rem;
  margin: .5rem .7rem;
  padding: .65rem;
  border: 1px solid var(--studio-line);
  border-radius: .7rem;
  background: rgba(255,255,255,.02);
}
.message-insert-tools[hidden] { display: none; }
.message-insert-tools__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.message-insert-tools__buttons .mini-action { min-width: 0; padding: .35rem; line-height: 1.2; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; color: var(--studio-muted); font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.message-editor-counts { display: flex; gap: .75rem; font: 400 .62rem var(--font-sans); letter-spacing: 0; text-transform: none; }
.message-editor-counts .over { color: var(--page-alert); font-weight: 800; }
#lineCount { display: none; }
#lineCount.visible { display: inline; }
#messageText { display: block; width: 100%; height: 100%; min-height: 0; padding: .75rem; resize: none; font: 300 1.15rem/1.28 "Metron Light", var(--font-sans); tab-size: 2; }
.studio:not(.ascii-mode) #messageText { overflow-x: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.ascii-mode #messageText { min-height: 0; font-size: .94rem; line-height: 1.12; white-space: pre; overflow-x: auto; }
.placeholder-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.placeholder-fields[hidden], .placeholder-fields label[hidden] { display: none; }
.placeholder-fields > span { align-self: center; margin-right: .1rem; color: var(--studio-soft); font-size: .62rem; }
.placeholder-fields label { display: grid; grid-template-columns: auto 7rem; align-items: center; gap: .35rem; color: #b99191; font: 700 .63rem var(--font-mono); }
.placeholder-fields input { min-height: 2rem; font: 400 .66rem var(--font-sans); }

.message-editor-section,
.preview-section { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: .7rem; }
.message-editor-section #messageText { border-color: #000; border-radius: .6rem; background: #050506; }
.preview-heading > span:first-child { display: inline-flex; align-items: center; gap: .35rem; }
.game-preview {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  padding: 2rem 1.3rem 1.6rem;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: .6rem;
  background:
    linear-gradient(to top, rgba(0,0,0,.92), transparent 76%),
    radial-gradient(circle at 75% 37%, rgba(115,130,98,.22), transparent 24%),
    linear-gradient(131deg, #282c27 0 43%, #111411 44% 65%, #30372d 66%);
  box-shadow: inset 0 0 4.3rem rgba(0,0,0,.75);
}
.game-preview::before { content: ""; position: absolute; left: 22%; bottom: 1.1rem; width: 3px; height: 9rem; background: #66705f; opacity: .18; transform: rotate(-15deg); filter: blur(1px); }
.scanlines { position: absolute; inset: 0; opacity: .17; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.026) 3px); }
.game-line { position: relative; z-index: 1; max-width: 100%; color: #ff1008; font: 300 .94rem/1.12 "Metron Light", sans-serif; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: pre-wrap; overflow-wrap: normal; }

.validation-summary { color: var(--studio-muted); font-size: .66rem; }
.validation-summary.warning { color: var(--studio-warning); }
.validation-summary.error { color: var(--page-alert); }
.settings-validation { display: block; margin: .45rem .7rem .7rem; }
.settings-validation[hidden] { display: none; }

.help-tip {
  position: relative;
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0 !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.055) !important;
  color: #d5d5d7 !important;
  font: 800 .67rem/1 var(--font-sans) !important;
  cursor: help;
  vertical-align: middle;
}
.help-tip::after { display: none; content: none; }

.message-studio-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(18rem, calc(100vw - 1.25rem));
  padding: .58rem .68rem;
  border: 1px solid rgba(255,0,10,.48);
  border-radius: .5rem;
  background: #09090a;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.62);
  color: #e2e2e3;
  font: 500 .7rem/1.42 var(--font-sans);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
}

.message-studio-tooltip[hidden] { display: none; }

.character-dialog {
  width: min(54rem, calc(100vw - 2rem));
  max-height: min(49rem, calc(100vh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,0,10,.42);
  border-radius: .85rem;
  background: #111113;
  color: var(--page-text);
  box-shadow: 0 2rem 6rem rgba(0,0,0,.72);
}
.character-dialog::backdrop { background: rgba(0,0,0,.68); }
.character-dialog.extra-keyboard-mode { position: fixed; z-index: 1000; top: 50%; right: 1.25rem; bottom: auto; left: auto; width: min(34rem, calc(100vw - 2rem)); max-height: min(34rem, 70dvh); margin: 0; transform: translateY(-50%); }
.character-picker { display: grid; grid-template-rows: auto auto auto minmax(16rem, 1fr) auto; max-height: min(49rem, calc(100vh - 2rem)); }
.extra-keyboard-mode .character-picker { grid-template-rows: auto auto minmax(10rem, 1fr) auto; max-height: min(34rem, 70dvh); }
.character-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--studio-line); }
.character-picker h2 { margin: 0 0 .2rem; }
.character-picker p { color: var(--studio-muted); font-size: .7rem; }
#closeCharacterDialog { display: grid; width: 2rem; height: 2rem; min-height: 0; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--studio-muted); font-size: 1.25rem; }
#closeCharacterDialog:hover { background: rgba(255,255,255,.07); color: #fff; }
.picker-ramp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; padding: .75rem 1rem .5rem; }
.picker-ramp[hidden] { display: none; }
.picker-ramp label { color: #d0bfa0; font-size: .66rem; }
#pickerRamp { font: 300 1.2rem/1 "Metron Light", sans-serif; letter-spacing: .08em; }
.picker-tools { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 10rem) minmax(9rem, 11rem) auto; align-items: center; gap: .45rem; padding: 0 1rem .65rem; }
.picker-tools input, .picker-tools select { min-height: 2.2rem; font-size: .68rem; }
#glyphResultCount { color: var(--studio-soft); font-size: .64rem; white-space: nowrap; }
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .22rem; min-height: 16rem; padding: .3rem; margin: 0 1rem; overflow-y: auto; border: 1px solid var(--studio-line); background: #060607; scrollbar-color: #47474a #111; }
.extra-keyboard-mode .glyph-grid { min-height: 10rem; }
.glyph-button { position: relative; display: grid; height: 3rem; min-height: 3rem; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: .3rem; background: #131315; color: var(--page-text); font: 300 1.2rem/1 "Metron Light", sans-serif; }
.glyph-button:hover { z-index: 1; border-color: var(--studio-red); background: #271719; }
.glyph-button.selected { border-color: var(--studio-red-deep); background: rgba(160,0,0,.25); color: #fff; }
.glyph-width { position: absolute; bottom: .14rem; left: .22rem; color: #77777b; font: 700 .48rem var(--font-mono); }
.glyph-order { position: absolute; right: .22rem; bottom: .14rem; color: #ef9fa2; font: 700 .52rem var(--font-mono); }
.glyph-special { color: #a7a7aa; font: 700 .52rem var(--font-mono); }
.glyph-load-more { grid-column: 1 / -1; min-height: 2.5rem; border: 1px solid rgba(255,255,255,.12); border-radius: .35rem; background: #171719; color: var(--page-text); cursor: pointer; font-size: .68rem; font-weight: 700; }
.glyph-load-more:hover { border-color: var(--studio-red); background: #271719; }
.character-picker > footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem 1rem; border-top: 1px solid var(--studio-line); }
.character-picker > footer span { max-width: 34rem; color: var(--studio-muted); font-size: .66rem; }

.workspace-how-to {
  min-width: 0;
  padding: 0 .2rem .2rem;
}
.workspace-how-to h2 {
  margin: 0 0 .45rem;
  color: #fff;
  font-size: .95rem;
}
.how-it-works__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.how-it-works__item { min-width: 0; padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.08); border-radius: .65rem; background: rgba(255,255,255,.025); }
.how-it-works__item strong { display: block; margin-bottom: .25rem; color: #fff; font-size: .74rem; }
.how-it-works__item p { color: var(--page-text-soft); font-size: .66rem; line-height: 1.4; }

@media (min-width: 52.0625rem) {
  html.message-studio-document,
  html.message-studio-document body.page-tool-app {
    height: 100dvh;
    overflow: hidden;
  }
}

@media (max-width: 52rem) {
  .message-studio-workspace { display: block; height: auto; overflow: visible; }
  .message-studio-controls,
  .message-studio-workspace > .ascii-controls,
  .message-studio-canvas { overflow: visible; }
  .message-studio-controls { border-bottom: 1px solid var(--studio-line); }
  .message-studio-workspace > .ascii-controls { border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .message-output-grid { grid-template-columns: 1fr; }
  .game-preview { min-height: 16rem; }
  .message-studio-toolbar { grid-template-columns: 1fr; }
  .message-studio-toolbar__messages { min-height: 3.25rem; }
  .message-studio-toolbar__actions { justify-content: flex-start; }
  .message-studio-modebar { align-items: flex-start; flex-direction: column; }
  .schedule-safety { grid-template-columns: 1fr; }
  .compact-field { justify-content: flex-start; }
  .config-strip { align-items: stretch; flex-direction: column; }
  .flag-group { width: 100%; }
  .flag { flex: 1 1 7rem; }
  .conditional-config { grid-template-columns: 1fr; }
  .upload-button { grid-row: auto; }
  .chars-field { grid-template-columns: auto minmax(0,1fr); }
  .chars-field select, .chars-field .mini-action { grid-column: span 1; }
  .chars-help { grid-column: 1 / -1; margin-top: 0; }
  .ascii-adjustments { grid-template-columns: 1fr 1fr; }
  .ascii-facts { flex-direction: column; }
  .picker-tools { grid-template-columns: 1fr; }
  .character-picker > footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 38rem) {
  .editor-header { align-items: flex-start; flex-direction: column; }
  .message-bar { flex-direction: column; }
  .add-message { align-self: flex-start; }
  .config-strip, .conditional-config, .ascii-controls { margin-inline: .7rem; }
  .ascii-adjustments { grid-template-columns: 1fr; }
  .message-studio-toolbar__actions { width: 100%; }
  .message-studio-toolbar__actions .button { flex: 1 1 9rem; }
  .how-it-works__grid { grid-template-columns: 1fr; }
}