@font-face {
  font-family: "Anton";
  src: url("/demo/assets/fonts/Anton-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/demo/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/demo/assets/fonts/Merriweather-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/demo/assets/fonts/Merriweather-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("/demo/assets/fonts/CourierPrime-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("/demo/assets/fonts/CourierPrime-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: var(--gt-font-interface);
  background: var(--gt-color-warm-white);
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; }

body {
  background: var(--gt-color-base);
  overflow: hidden;
}

#review-tabs {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 20;
  display: flex;
  gap: .25rem;
  padding: .3rem;
  background: color-mix(in srgb, var(--gt-color-base) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--gt-color-cyan) 45%, transparent);
  transform: translateX(-50%);
}

#review-tabs button {
  padding: .45rem .8rem;
  border: 0;
  color: var(--gt-color-warm-white);
  background: transparent;
  font: 800 .72rem/1 var(--gt-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

#review-tabs button[aria-pressed="true"] { color: var(--gt-color-status-text); background: var(--gt-color-cyan); }
#review-tabs[hidden] { display: none; }

#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--gt-design-width);
  height: var(--gt-design-height);
  isolation: isolate;
  overflow: hidden;
  /* Stay centered while the async presentation contract is still loading. */
  transform: translate(-50%, -50%) scale(var(--gt-stage-scale, 1));
  transform-origin: center;
  transition: width 280ms ease, height 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

#stage[data-client-shell="launcher"] {
  width: var(--gt-launcher-width, 720px);
  height: var(--gt-launcher-height, 640px);
  color: #191c21;
  background: #e9e6de;
  border: 1px solid rgba(25, 28, 33, .12);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(25, 28, 33, .08), 0 28px 80px rgba(0, 0, 0, .42);
}

#stage[data-client-shell="launcher"]::before {
  z-index: 0;
  background: radial-gradient(rgba(25, 28, 33, .055) 1px, transparent 1px) 0 0 / 28px 28px;
}

#stage[data-client-shell="launcher"] #backdrop {
  opacity: 0;
}

#stage[data-client-shell="launcher"] #menu-panel {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

#stage[data-client-shell="launcher"] #menu-panel::before,
#stage[data-client-shell="launcher"] #menu-panel::after {
  display: none;
}

#stage[data-client-shell="launcher"] h1,
#stage[data-client-shell="launcher"] #status { display: none; }

#stage[data-client-shell="launcher"] #menu {
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  transform: none;
}

#stage[data-client-shell="launcher"] .client-login-form {
  gap: 14px;
  width: 392px;
  padding: 28px;
  color: #191c21;
  text-align: left;
}

#stage[data-client-shell="launcher"] .client-login-heading {
  display: grid;
  gap: 5px;
  padding: 0 0 8px;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

#stage[data-client-shell="launcher"] .client-login-heading strong {
  color: #191c21;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.015em;
}

#stage[data-client-shell="launcher"] .client-login-heading span {
  color: #7a756c;
  font-size: 13.5px;
  line-height: 1.5;
}

#stage[data-client-shell="launcher"] .client-field {
  gap: 6px;
  width: 100%;
  padding: 0;
  color: #4a4640;
  background: none;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  transform: none;
}

#stage[data-client-shell="launcher"] .client-field::before,
#stage[data-client-shell="launcher"] .client-field::after { display: none; }

#stage[data-client-shell="launcher"] .client-field:focus-within { color: #191c21; transform: none; }

#stage[data-client-shell="launcher"] .client-field input,
#stage[data-client-shell="launcher"] .client-field select {
  padding: 11px 13px;
  color: #191c21;
  background: #fff;
  border: 1px solid rgba(25, 28, 33, .16);
  border-radius: 11px;
  outline: 0;
  font: 500 14.5px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  text-align-last: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

#stage[data-client-shell="launcher"] .client-field input:focus,
#stage[data-client-shell="launcher"] .client-field select:focus {
  border-color: rgba(25, 28, 33, .52);
  box-shadow: 0 0 0 3px rgba(25, 28, 33, .08);
}

#stage[data-client-shell="launcher"] .client-flow-actions { margin-top: 6px; }

#stage[data-client-shell="launcher"] .client-login-summary,
#stage[data-client-shell="launcher"] .client-flow-copy { width: 100%; margin: 0; text-align: center; }

#stage[data-client-shell="launcher"] .client-login-summary {
  color: #b8563f;
  font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

#stage[data-client-shell="launcher"] .client-login-summary[data-ready="true"] { color: #7a756c; }
#stage[data-client-shell="launcher"] .client-flow-copy {
  margin-top: 4px;
  color: #9a948a;
  font: 500 10.5px/1.25 var(--gt-font-mono);
  letter-spacing: .14em;
  text-shadow: none;
}

#stage[data-client-shell="launcher"] #notice {
  top: auto !important;
  bottom: 12px;
  left: 50%;
  width: 650px;
  color: #7a756c;
  font: 500 11px/1.3 var(--gt-font-mono);
  text-align: center;
  text-shadow: none;
  transform: translateX(-50%);
}

#stage[data-client-shell="launcher"] #decoration { display: none; }

.arkey-card {
  background: #f7f5f0;
  border: 1px solid rgba(25, 28, 33, .1);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(25, 28, 33, .05), 0 14px 34px -18px rgba(25, 28, 33, .28);
}

.arkey-sign-in-shell { display: grid; gap: 28px; justify-items: center; width: 392px; }

.arkey-identity { display: inline-flex; align-items: center; justify-content: center; }
.arkey-lockup { display: block; width: auto; height: 52px; }
.arkey-mark-image { display: block; width: auto; height: 32px; }

.arkey-primary,
.arkey-secondary {
  border: 0;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 650;
}

.arkey-primary {
  min-width: 126px;
  padding: 13px 20px;
  color: #f7f5f0;
  background: #191c21;
  border-radius: 999px;
  font-size: 14.5px;
}

.arkey-primary:disabled { color: rgba(25, 28, 33, .45); background: rgba(25, 28, 33, .14); cursor: default; }
.arkey-primary:focus-visible,
.arkey-secondary:focus-visible,
.arkey-app-card:focus-visible { outline: 3px solid #6b5bd2; outline-offset: 3px; }

.arkey-secondary {
  padding: 9px 17px;
  color: #4a4640;
  background: transparent;
  border: 1px solid rgba(25, 28, 33, .16);
  border-radius: 999px;
  font-size: 12.5px;
}

.arkey-app-shell { width: 640px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.arkey-app-shell > header { display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.arkey-app-heading { display: flex; gap: 14px; align-items: center; }
.arkey-app-heading h2 { margin: 0; color: #191c21; font-size: 23px; line-height: 1.1; letter-spacing: -.015em; }
.arkey-app-heading p { margin: 3px 0 0; color: #7a756c; font-size: 13px; }
.arkey-app-list { margin-top: 22px; padding: 22px; border-radius: 24px; }
.arkey-app-list-heading { display: flex; justify-content: space-between; margin-bottom: 18px; color: #4a4640; font-size: 13.5px; font-weight: 600; }
.arkey-app-list-heading span:last-child { color: #9a948a; font: 500 10.5px/1 var(--gt-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.arkey-app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.arkey-app-card {
  position: relative;
  display: block;
  height: 212px;
  padding: 0;
  overflow: hidden;
  color: #191c21;
  background: #f7f5f0;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(25, 28, 33, .08);
  cursor: pointer;
}

.arkey-app-card[data-selected="true"] { box-shadow: 0 0 0 3px #191c21, 0 18px 36px -20px rgba(25, 28, 33, .5); }
.arkey-app-card:disabled { opacity: 1; cursor: not-allowed; }
.arkey-app-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #070912; border-radius: 19px; }
.arkey-app-art::before { content: ""; position: absolute; inset: 21% 8% 23% 11%; background: #3a1226; opacity: .9; transform: rotate(-1.6deg); clip-path: polygon(1% 3%, 100% 0, 97% 96%, 0 100%); }
.arkey-app-art::after { content: ""; position: absolute; left: 7%; top: 20%; width: 18%; height: 52%; border-bottom: 5px solid #f4efe6; border-left: 5px solid #f4efe6; transform: rotate(-2deg); }
.arkey-app-art strong { position: relative; z-index: 1; color: #f4efe6; font: italic 900 44px/1 var(--gt-font-display); letter-spacing: -.02em; text-shadow: 6px 7px 0 #e5417e; text-transform: uppercase; transform: skewX(-13deg) scaleX(1.08); }
.arkey-app-card[data-app-theme="daycare"] .arkey-app-art { background: #f4f3ee; box-shadow: inset 0 0 0 2px #2c2c28; }
.arkey-app-card[data-app-theme="daycare"][data-selected="true"] .arkey-app-art { box-shadow: inset 0 0 0 3px #2c2c28; }
.arkey-app-card[data-app-theme="daycare"] .arkey-app-art::before { inset: auto; left: 8%; top: 19%; width: 84%; height: 54%; background: transparent; border: 2px dashed #c9c7ba; border-radius: 3px; clip-path: none; opacity: 1; transform: none; }
.arkey-app-card[data-app-theme="daycare"] .arkey-app-art::after { display: none; }
.arkey-app-card[data-app-theme="daycare"] .arkey-app-art strong { color: #2c2c28; font: 500 20px/1 var(--gt-font-mono); letter-spacing: .25em; text-shadow: none; transform: none; }
.arkey-app-card small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.arkey-app-badge { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 5px 11px; color: #fff; background: rgba(0, 0, 0, .48); border-radius: 999px; font: 500 9px/1 var(--gt-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.arkey-app-card[data-app-theme="daycare"] .arkey-app-badge { color: #6e6c63; background: rgba(44, 44, 40, .1); }
.arkey-app-list footer { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(25, 28, 33, .1); }
.arkey-app-list footer p { margin: 0; color: #7a756c; font-size: 13px; }

.arkey-handoff-shell { width: 392px; color: #191c21; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; }
.arkey-handoff-shell .arkey-identity { justify-content: center; }
.arkey-handoff-shell .arkey-mark-image { height: 40px; }
.arkey-handoff-shell h2 { margin: 20px 0 0; font-size: 20px; letter-spacing: -.015em; }
.arkey-handoff-shell p { margin: 7px 0 0; color: #7a756c; font-size: 13.5px; line-height: 1.55; }
.arkey-handoff-progress { height: 3px; margin-top: 22px; overflow: hidden; background: rgba(25, 28, 33, .1); border-radius: 999px; }
.arkey-handoff-progress span { display: block; width: 64%; height: 100%; background: #191c21; animation: arkey-handoff-fill 700ms ease-out forwards; }
.arkey-handoff-shell .arkey-secondary { margin-top: 24px; }

@keyframes arkey-handoff-fill { to { width: 100%; } }

#stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gt-stage-overlays);
  pointer-events: none;
}

#backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--gt-color-base);
  background-image: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--gt-color-paper-dark) 78%, var(--gt-color-pink)), var(--gt-color-base) 68%);
  background-position: var(--gt-background-position);
  background-size: cover;
}

#backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gt-backdrop-overlays);
}

#menu-panel {
  position: absolute;
  top: var(--gt-panel-y);
  left: var(--gt-panel-x);
  z-index: 1;
  width: var(--gt-panel-width);
  height: calc(var(--gt-design-height) - var(--gt-panel-y));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#menu-panel { isolation: isolate; }
#menu-panel::before,
#menu-panel::after {
  content: "";
  position: absolute;
  top: calc(var(--gt-paper-y) - var(--gt-panel-y));
  left: calc(var(--gt-paper-x) - var(--gt-panel-x));
  width: var(--gt-paper-width);
  height: var(--gt-paper-height);
  clip-path: var(--gt-paper-polygon);
  transform-origin: center;
}
#menu-panel::before {
  z-index: -2;
  background: var(--gt-paper-layer-0-fill);
  transform: translate(var(--gt-paper-layer-0-x), var(--gt-paper-layer-0-y)) rotate(var(--gt-paper-rotation)) scale(var(--gt-paper-layer-0-scale));
}
#menu-panel::after {
  z-index: -1;
  background: var(--gt-paper-background);
  transform: translate(var(--gt-paper-layer-1-x), var(--gt-paper-layer-1-y)) rotate(var(--gt-paper-rotation)) scale(var(--gt-paper-layer-1-scale));
}

#status, #notice {
  margin: 0;
  text-transform: uppercase;
}

h1 {
  position: absolute;
  top: calc(var(--gt-title-y) - var(--gt-panel-y));
  left: calc(var(--gt-title-x) - var(--gt-panel-x));
  margin: 0;
  color: var(--gt-title-color);
  font-family: var(--gt-title-font);
  font-size: var(--gt-title-size);
  font-style: italic;
  font-weight: var(--gt-title-weight);
  line-height: var(--gt-title-line-height);
  letter-spacing: var(--gt-title-letter-spacing);
  text-transform: uppercase;
  text-shadow: var(--gt-title-shadow);
  transform: skewX(var(--gt-title-skew)) rotate(var(--gt-title-rotation));
}

#status {
  position: absolute;
  top: calc(var(--gt-status-y) - var(--gt-panel-y));
  left: calc(var(--gt-status-x) - var(--gt-panel-x));
  display: block;
  width: max-content;
  padding: var(--gt-status-padding-y) var(--gt-status-padding-x);
  color: var(--gt-status-text);
  background: var(--gt-status-fill);
  filter: var(--gt-status-shadow);
  font-family: var(--gt-status-font);
  font-size: var(--gt-status-size);
  font-weight: var(--gt-status-weight);
  letter-spacing: var(--gt-status-letter-spacing);
  transform: rotate(var(--gt-status-rotation));
}
#menu {
  position: absolute;
  top: calc(var(--gt-menu-y) - var(--gt-panel-y));
  left: calc(var(--gt-menu-x) - var(--gt-panel-x));
  display: grid;
  gap: var(--gt-row-gap);
  width: var(--gt-menu-width);
}

.menu-entry {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--gt-marker-column) 1fr;
  gap: var(--gt-marker-gap);
  align-items: center;
  width: var(--gt-entry-width);
  margin-left: var(--gt-entry-offset);
  padding: var(--gt-card-padding-y) var(--gt-card-padding-x);
  border: 0;
  border-radius: 0;
  color: var(--gt-card-idle-text);
  background: transparent;
  font-family: var(--gt-menu-font);
  font-size: var(--gt-menu-size);
  font-weight: var(--gt-menu-weight);
  text-align: left;
  cursor: pointer;
  opacity: var(--gt-card-idle-opacity);
  transform: rotate(var(--gt-entry-rotation));
}

.menu-entry::before,
.menu-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--gt-card-polygon);
  transform-origin: center;
}
.menu-entry::before {
  z-index: -2;
  background: var(--gt-card-idle-layer-0-fill);
  transform: translate(var(--gt-card-idle-layer-0-x), var(--gt-card-idle-layer-0-y)) scale(var(--gt-card-idle-layer-0-scale));
}
.menu-entry::after {
  z-index: -1;
  background: var(--gt-card-idle-layer-1-fill);
  transform: translate(var(--gt-card-idle-layer-1-x), var(--gt-card-idle-layer-1-y)) scale(var(--gt-card-idle-layer-1-scale));
}
.menu-entry > * { position: relative; z-index: 1; }

.menu-entry[data-ordinal="serif_narrow"] { font-family: var(--gt-font-serif); }
.menu-entry[data-ordinal="display_wide"] { font-family: var(--gt-font-display); letter-spacing: .025em; }
.menu-entry[data-ordinal="mono_indented"] { font-family: var(--gt-font-mono); }

.menu-entry .marker { opacity: 0; transform: translateX(-.3rem); }
.menu-entry:focus-visible { outline: var(--gt-card-focused-border-width) solid var(--gt-card-focused-text); outline-offset: 2px; }
.menu-entry[data-focused="true"] {
  color: var(--gt-card-focused-text);
  background: transparent;
  font-weight: var(--gt-menu-focused-weight);
  opacity: var(--gt-card-focused-opacity);
  transform: translateX(var(--gt-focus-translate-x)) rotate(var(--gt-focus-rotation)) scale(var(--gt-focus-scale));
}
.menu-entry[data-focused="true"]::before {
  background: var(--gt-card-focused-layer-0-fill);
  transform: translate(var(--gt-card-focused-layer-0-x), var(--gt-card-focused-layer-0-y)) scale(var(--gt-card-focused-layer-0-scale));
}
.menu-entry[data-focused="true"]::after {
  background: var(--gt-card-focused-layer-1-fill);
  transform: translate(var(--gt-card-focused-layer-1-x), var(--gt-card-focused-layer-1-y)) scale(var(--gt-card-focused-layer-1-scale));
}
.menu-entry[data-focused="true"] .marker { opacity: 1; transform: none; }
.menu-entry:active:not(:disabled) {
  color: var(--gt-card-pressed-text);
  background: transparent;
  opacity: var(--gt-card-pressed-opacity);
  transform: translateX(var(--gt-pressed-translate-x)) scale(var(--gt-pressed-scale));
}
.menu-entry:active:not(:disabled)::before {
  background: var(--gt-card-pressed-layer-0-fill);
  transform: translate(var(--gt-card-pressed-layer-0-x), var(--gt-card-pressed-layer-0-y)) scale(var(--gt-card-pressed-layer-0-scale));
}
.menu-entry:active:not(:disabled)::after {
  background: var(--gt-card-pressed-layer-1-fill);
  transform: translate(var(--gt-card-pressed-layer-1-x), var(--gt-card-pressed-layer-1-y)) scale(var(--gt-card-pressed-layer-1-scale));
}
.menu-entry:disabled {
  color: var(--gt-card-disabled-text);
  background: transparent;
  cursor: not-allowed;
  opacity: var(--gt-card-disabled-opacity);
}
.menu-entry:disabled::before {
  background: var(--gt-card-disabled-layer-0-fill);
  transform: translate(var(--gt-card-disabled-layer-0-x), var(--gt-card-disabled-layer-0-y)) scale(var(--gt-card-disabled-layer-0-scale));
}
.menu-entry:disabled::after {
  background: var(--gt-card-disabled-layer-1-fill);
  transform: translate(var(--gt-card-disabled-layer-1-x), var(--gt-card-disabled-layer-1-y)) scale(var(--gt-card-disabled-layer-1-scale));
}
#stage[data-transition] .menu-entry {
  color: var(--gt-card-transition-locked-text);
  background: transparent;
  opacity: var(--gt-card-transition-locked-opacity);
}
#stage[data-transition] .menu-entry::before {
  background: var(--gt-card-transition-locked-layer-0-fill);
  transform: translate(var(--gt-card-transition-locked-layer-0-x), var(--gt-card-transition-locked-layer-0-y)) scale(var(--gt-card-transition-locked-layer-0-scale));
}
#stage[data-transition] .menu-entry::after {
  background: var(--gt-card-transition-locked-layer-1-fill);
  transform: translate(var(--gt-card-transition-locked-layer-1-x), var(--gt-card-transition-locked-layer-1-y)) scale(var(--gt-card-transition-locked-layer-1-scale));
}
.menu-entry:disabled .label-stack > span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.label-stack { display: grid; gap: .12rem; }
.disabled-reason { font-family: var(--gt-reason-font); font-size: var(--gt-reason-size); font-weight: var(--gt-reason-weight); letter-spacing: var(--gt-reason-letter-spacing); text-decoration: none; opacity: .72; }

.client-login-form {
  display: grid;
  gap: var(--gt-row-gap);
  width: var(--gt-menu-width);
}

.client-flow-copy {
  width: min(100%, 38em);
  margin: 0 0 .25rem;
  color: var(--gt-color-warm-white);
  font: 800 .74rem/1.4 var(--gt-font-mono);
  letter-spacing: .045em;
  text-shadow: 0 2px 0 var(--gt-color-paper-dark);
  text-transform: uppercase;
}

.client-field {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .3rem;
  width: calc(var(--gt-menu-width) - 1rem);
  padding: .65rem .9rem .75rem;
  color: var(--gt-color-paper-dark);
  font: 900 .72rem/1 var(--gt-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-.35deg);
}

.client-field::before,
.client-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--gt-card-polygon);
  pointer-events: none;
}

.client-field::before {
  background: var(--gt-card-idle-layer-0-fill);
  transform: translate(var(--gt-card-idle-layer-0-x), var(--gt-card-idle-layer-0-y));
}

.client-field::after {
  background: var(--gt-card-idle-layer-1-fill);
  transform: translate(var(--gt-card-idle-layer-1-x), var(--gt-card-idle-layer-1-y));
}

.client-field:focus-within {
  color: var(--gt-card-focused-text);
  transform: translateX(var(--gt-focus-translate-x)) rotate(var(--gt-focus-rotation));
}

.client-field:focus-within::before {
  background: var(--gt-card-focused-layer-0-fill);
  transform: translate(var(--gt-card-focused-layer-0-x), var(--gt-card-focused-layer-0-y));
}

.client-field:focus-within::after {
  background: var(--gt-card-focused-layer-1-fill);
  transform: translate(var(--gt-card-focused-layer-1-x), var(--gt-card-focused-layer-1-y));
}

.client-field input,
.client-field select {
  width: 100%;
  min-width: 0;
  padding: .2rem 0 .1rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  outline: 0;
  font: 800 1.05rem/1.25 var(--gt-font-interface);
  letter-spacing: .015em;
  text-transform: none;
}

.client-field select {
  appearance: none;
  cursor: pointer;
}

.client-login-summary {
  margin: -.1rem 0 0;
  color: var(--gt-color-idle-text);
  font: 800 .66rem/1.4 var(--gt-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-login-summary[data-ready="true"] { color: var(--gt-color-cyan); }

.client-flow-actions {
  display: grid;
  gap: var(--gt-row-gap);
  margin-top: .2rem;
}

.client-flow-action { font-size: calc(var(--gt-menu-size) * .86); }
.menu-entry[data-client-flow="true"]:not([data-focused="true"]):not(:disabled) { color: var(--gt-color-paper-dark); }

.client-entry-detail {
  display: block;
  margin-top: .15rem;
  font: 800 .57rem/1.2 var(--gt-font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

#decoration[data-client-character="true"] {
  right: 5.5rem;
  bottom: -3rem;
  z-index: 0;
  width: min(34vw, 430px);
  max-height: 88vh;
}

#character-select-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  isolation: isolate;
  color: var(--gt-color-warm-white);
  background: linear-gradient(96deg, color-mix(in srgb, var(--gt-color-base) 96%, transparent) 0 30%, color-mix(in srgb, var(--gt-color-base) 58%, transparent) 55%, color-mix(in srgb, var(--gt-color-base) 28%, transparent) 78%, color-mix(in srgb, var(--gt-color-base) 62%, transparent));
}

#character-select-screen[hidden] { display: none; }

.character-select-heading {
  position: absolute;
  top: 2.7rem;
  left: 4rem;
  z-index: 4;
  transform: skewX(-10deg) rotate(-1deg);
}

.character-select-heading h2 {
  position: static;
  margin: 0;
  padding: .55rem 1.5rem .45rem;
  color: var(--gt-color-warm-white);
  background: var(--gt-color-paper-dark);
  box-shadow: .6rem .65rem 0 var(--gt-color-pink);
  font-family: var(--gt-font-display);
  font-size: 3.1rem;
  font-style: italic;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transform: none;
}

.character-select-heading p {
  width: max-content;
  margin: 1.15rem 0 0 .8rem;
  padding: .35rem .75rem;
  color: var(--gt-color-status-text);
  background: var(--gt-color-cyan);
  box-shadow: .25rem .3rem 0 var(--gt-color-pink);
  font: 900 .72rem/1 var(--gt-font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: skewX(10deg);
}

.character-profile {
  position: absolute;
  top: 15rem;
  left: 4rem;
  z-index: 4;
  width: 23rem;
}

.character-profile > span {
  display: inline-block;
  padding: .35rem .8rem;
  color: var(--gt-color-cyan);
  background: var(--gt-color-paper-dark);
  border: 2px solid color-mix(in srgb, var(--gt-color-warm-white) 52%, transparent);
  font: 900 .68rem/1 var(--gt-font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: skewX(-9deg) rotate(-1deg);
}

.character-profile h3 {
  width: max-content;
  max-width: 100%;
  margin: .7rem 0 1.2rem;
  padding: .55rem 1.1rem;
  color: var(--gt-color-paper-dark);
  background: var(--gt-color-warm-white);
  box-shadow: .55rem .6rem 0 var(--gt-color-pink);
  font-family: var(--gt-font-display);
  font-size: 2.5rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  transform: skewX(-9deg) rotate(-.7deg);
}

.character-profile p {
  margin: 0;
  color: var(--gt-color-idle-text);
  font: 800 .74rem/1.65 var(--gt-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.character-profile-stats {
  position: absolute;
  top: 13rem;
  right: 4rem;
  z-index: 4;
  display: grid;
  gap: .3rem;
  width: 31rem;
  margin: 0;
}

.character-profile-stats > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: .3rem;
}

.character-profile-stats dt,
.character-profile-stats dd {
  margin: 0;
  padding: .55rem .85rem;
  border: 2px solid color-mix(in srgb, var(--gt-color-warm-white) 45%, transparent);
}

.character-profile-stats dt {
  color: var(--gt-color-cyan);
  background: var(--gt-color-paper-dark);
  font: 900 .72rem/1 var(--gt-font-mono);
  letter-spacing: .16em;
  text-align: right;
  text-transform: uppercase;
}

.character-profile-stats dd {
  color: var(--gt-color-warm-white);
  background: color-mix(in srgb, var(--gt-color-paper-dark) 88%, transparent);
  font: 800 .86rem/1 var(--gt-font-mono);
  letter-spacing: .06em;
}

.character-profile-stats > div:first-child dd {
  color: var(--gt-color-paper-dark);
  background: var(--gt-color-warm-white);
  font-family: var(--gt-font-serif);
  font-size: 1rem;
}

#decoration[data-client-character="roster"] {
  right: auto;
  left: 50%;
  bottom: 7.5rem;
  z-index: 1;
  width: min(25vw, 330px);
  max-height: 70vh;
  filter: drop-shadow(.65rem .75rem 0 color-mix(in srgb, var(--gt-color-pink) 38%, transparent));
  transform: translateX(-50%);
}

#character-roster {
  position: absolute;
  right: 3rem;
  bottom: 8.5rem;
  left: 3rem;
  z-index: 5;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: .28rem;
  height: 8rem;
}

.character-roster-slot {
  position: relative;
  width: 4.8rem;
  height: 6.7rem;
  padding: 0;
  overflow: hidden;
  color: var(--gt-color-warm-white);
  background: repeating-linear-gradient(116deg, color-mix(in srgb, var(--gt-color-warm-white) 14%, transparent) 0 2px, color-mix(in srgb, var(--gt-color-paper-dark) 94%, transparent) 2px 8px);
  border: 3px solid color-mix(in srgb, var(--gt-color-warm-white) 52%, transparent);
  cursor: not-allowed;
  opacity: .44;
  transform: rotate(calc(var(--gt-roster-offset) * 3.4deg)) translateY(calc(var(--gt-roster-curve) * 1px));
  transform-origin: bottom center;
}

.character-roster-slot[data-available="true"] {
  background: radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--gt-color-pink) 58%, transparent), var(--gt-color-paper-dark) 72%);
  cursor: pointer;
  opacity: 1;
}

.character-roster-slot[data-selected="true"] {
  z-index: 2;
  border-color: var(--gt-color-cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gt-color-pink) 74%, transparent);
  transform: rotate(calc(var(--gt-roster-offset) * 3.4deg)) translateY(calc((var(--gt-roster-curve) - 8) * 1px)) scale(1.14);
}

.character-roster-slot > b {
  position: absolute;
  top: .25rem;
  left: .25rem;
  padding: .15rem .35rem;
  color: var(--gt-color-warm-white);
  background: var(--gt-color-paper-dark);
  font: 900 .56rem/1 var(--gt-font-mono);
}

.character-roster-slot > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: .35rem .15rem;
  color: var(--gt-color-paper-dark);
  background: var(--gt-color-warm-white);
  font: 900 .56rem/1 var(--gt-font-mono);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.character-roster-slot[data-selected="true"] > span { background: var(--gt-color-cyan); }

.character-select-footer {
  position: absolute;
  right: 3.5rem;
  bottom: 2.6rem;
  left: 3.5rem;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: .75rem;
  align-items: stretch;
}

.character-select-footer > span,
.character-select-footer > p,
.character-select-footer > button {
  margin: 0;
  padding: .8rem 1rem;
  border: 2px solid color-mix(in srgb, var(--gt-color-warm-white) 52%, transparent);
}

.character-select-footer > span {
  display: flex;
  align-items: center;
  color: var(--gt-color-paper-dark);
  background: var(--gt-color-cyan);
  font: 900 .67rem/1 var(--gt-font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.character-select-footer > p {
  color: var(--gt-color-warm-white);
  background: var(--gt-color-paper-dark);
  font: 800 .84rem/1.2 var(--gt-font-mono);
}

.character-select-footer > button {
  min-width: 7rem;
  color: var(--gt-color-paper-dark);
  background: var(--gt-color-warm-white);
  font: 900 .72rem/1 var(--gt-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--gt-card-polygon);
}

.character-select-footer > button:focus-visible,
.character-select-footer > button:hover { color: var(--gt-color-status-text); background: var(--gt-color-cyan); outline: 3px solid var(--gt-color-pink); outline-offset: 2px; }

.character-select-help {
  position: absolute;
  right: 4rem;
  bottom: 1rem;
  z-index: 6;
  margin: 0;
  color: var(--gt-color-idle-text);
  font: 800 .64rem/1 var(--gt-font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

#notice {
  position: absolute;
  left: calc(var(--gt-content-x) - var(--gt-panel-x));
  width: var(--gt-content-width);
  min-height: 2.4em;
  padding: var(--gt-notice-padding-y) var(--gt-notice-padding-x);
  color: var(--gt-notice-text);
  background: var(--gt-notice-fill);
  border-left: var(--gt-notice-border-width) solid var(--gt-notice-border);
  clip-path: var(--gt-notice-polygon);
}
#notice:empty { display: none; }

#decoration {
  position: absolute;
  right: clamp(2rem, 8vw, 9rem);
  bottom: clamp(-4rem, -4vw, -2rem);
  z-index: -1;
  width: min(30vw, 360px);
  max-height: 96vh;
  object-fit: contain;
  filter: drop-shadow(.7rem .8rem 0 rgba(237, 57, 121, .28)) drop-shadow(0 1.5rem 2rem rgba(27, 18, 31, .2));
  pointer-events: none;
}

#scene-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  isolation: isolate;
}

#stage[data-transition="ready"] #scene-preview,
#stage[data-transition="sliding"] #scene-preview {
  display: block;
  transform: translateX(var(--gt-scene-entry-x));
}

#stage[data-transition="ready"] #menu-panel,
#stage[data-transition="sliding"] #menu-panel,
#stage[data-transition="ready"] #scene-preview,
#stage[data-transition="sliding"] #scene-preview {
  transition: transform var(--gt-scene-transition-ms) var(--gt-scene-transition-curve), opacity var(--gt-scene-transition-ms) var(--gt-scene-transition-curve);
  will-change: transform, opacity;
}

#stage[data-transition="sliding"] #menu-panel { opacity: var(--gt-menu-exit-alpha); transform: translateX(var(--gt-menu-exit-x)) skewX(var(--gt-menu-exit-skew)); }
#stage[data-transition="sliding"] #scene-preview { transform: translateX(0); }

#scene-preview > * { position: absolute; }

#scene-background {
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
}

#scene-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gt-scene-background-gradient);
}

#context-health {
  --context-cream: #f4efe6;
  --context-dim: #c6c1b7;
  --context-ink: #12060d;
  --context-coral: #f4574c;
  --context-cyan: #93e4f2;
  --context-yellow: #f2a93b;
  --context-health-color: var(--context-yellow);
  --context-remaining-ratio: 1;
  right: 3%;
  top: 1.3333%;
  z-index: 40;
  width: 26.875%;
  color: var(--context-cream);
  pointer-events: none;
}

#context-health[data-state="low"] { --context-health-color: var(--context-coral); }
#context-health[data-state="critical"] { --context-health-color: #e5417e; }

.context-health-heading {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
}

.context-health-heading > span {
  color: var(--context-cyan);
  font: 700 11px/1 var(--gt-font-mono);
  letter-spacing: .24em;
  text-shadow: 1px 1px 0 var(--context-ink);
  text-transform: uppercase;
}

#context-health-value {
  color: var(--context-cream);
  font: 900 20px/1 var(--gt-font-serif);
  paint-order: stroke fill;
  -webkit-text-stroke: 1px var(--context-ink);
  text-shadow: 2px 2px 0 var(--context-ink), -1px -1px 0 var(--context-ink), 1px -1px 0 var(--context-ink), -1px 1px 0 var(--context-ink);
}

.context-health-track {
  position: relative;
  height: 22px;
}

.context-health-track::before {
  position: absolute;
  top: 7px;
  right: -6px;
  bottom: -7px;
  left: 6px;
  background: var(--context-ink);
  clip-path: polygon(0 0, 100% 3%, 99.4% 100%, .5% 96%);
  content: "";
  opacity: .8;
}

.context-health-track::after {
  position: absolute;
  inset: 0;
  background: #2c0e1c;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--context-cream) 85%, transparent);
  clip-path: polygon(0 0, 100% 3%, 99.4% 100%, .5% 96%);
  content: "";
}

#context-health-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  z-index: 1;
  width: calc(100% - 4px);
  background: var(--context-health-color);
  clip-path: polygon(0 0, 100% 3%, 99% 100%, .5% 96%);
  transform: scaleX(var(--context-remaining-ratio));
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), background 180ms linear;
}

#context-health-status {
  margin: 8px 0 0;
  color: var(--context-dim);
  font: 700 9px/1.2 var(--gt-font-mono);
  letter-spacing: .14em;
  text-align: right;
  text-shadow: 1px 1px 0 var(--context-ink);
  text-transform: uppercase;
}

#dialogue-screen {
  padding: var(--gt-scene-dialogue-padding);
  color: var(--gt-scene-dialogue-text);
  background: color-mix(in srgb, var(--gt-scene-dialogue-fill) var(--gt-scene-dialogue-opacity-percent), transparent);
  border: var(--gt-scene-dialogue-border-width) solid color-mix(in srgb, var(--gt-scene-dialogue-border) var(--gt-scene-dialogue-border-opacity-percent), transparent);
  border-radius: var(--gt-scene-dialogue-radius);
  box-shadow: inset var(--gt-scene-dialogue-inset-accent-width) 0 0 color-mix(in srgb, var(--gt-scene-dialogue-inset-accent) var(--gt-scene-dialogue-inset-accent-opacity-percent), transparent), 0 var(--gt-scene-dialogue-shadow-y) var(--gt-scene-dialogue-shadow-blur) color-mix(in srgb, var(--gt-scene-dialogue-shadow-color) var(--gt-scene-dialogue-shadow-opacity-percent), transparent);
  backdrop-filter: blur(var(--gt-scene-dialogue-blur));
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

#dialogue-screen header { display: flex; justify-content: space-between; gap: var(--gt-scene-header-gap); align-items: baseline; }

#scene-speaker {
  margin: 0 0 var(--gt-scene-header-speaker-margin-bottom);
  width: max-content;
  padding: var(--gt-scene-speaker-nameplate-padding-y) var(--gt-scene-speaker-nameplate-padding-x);
  color: var(--gt-scene-speaker-text);
  background: color-mix(in srgb, var(--gt-scene-speaker-surface) var(--gt-scene-speaker-nameplate-surface-opacity-percent), transparent);
  border: var(--gt-scene-speaker-nameplate-border-width) solid color-mix(in srgb, var(--gt-scene-speaker-border) var(--gt-scene-speaker-nameplate-border-opacity-percent), transparent);
  border-radius: var(--gt-scene-speaker-nameplate-radius);
  box-shadow: var(--gt-scene-speaker-nameplate-shadow-x) var(--gt-scene-speaker-nameplate-shadow-y) 0 color-mix(in srgb, var(--gt-scene-speaker-nameplate-shadow) var(--gt-scene-speaker-nameplate-shadow-opacity-percent), transparent);
  font: var(--gt-scene-speaker-nameplate-font-weight) var(--gt-scene-speaker-nameplate-font-size)/var(--gt-scene-speaker-nameplate-line-height) var(--gt-font-mono);
  letter-spacing: var(--gt-scene-speaker-nameplate-letter-spacing)em;
  text-transform: uppercase;
}

#scrollback-status {
  margin: 0;
  color: color-mix(in srgb, var(--gt-scene-scrollback-text) var(--gt-scene-scrollback-text-opacity-percent), transparent);
  font: var(--gt-scene-scrollback-font-weight) var(--gt-scene-scrollback-font-size)/var(--gt-scene-scrollback-line-height) var(--gt-font-mono);
  letter-spacing: var(--gt-scene-scrollback-letter-spacing)em;
  text-align: right;
  text-transform: uppercase;
}

#scene-history {
  min-height: 0;
  padding-right: var(--gt-scene-history-padding-right);
  overflow-y: auto;
  scrollbar-color: var(--gt-scene-scrollbar-thumb) color-mix(in srgb, var(--gt-scene-scrollbar-track) var(--gt-scene-scrollbar-track-opacity-percent), transparent);
  scrollbar-width: thin;
}

.history-turn {
  padding: var(--gt-scene-history-turn-padding-top) var(--gt-scene-history-turn-padding-x) var(--gt-scene-history-turn-padding-bottom);
  border-top: var(--gt-scene-separator-width) solid color-mix(in srgb, var(--gt-scene-separator) var(--gt-scene-separator-opacity-percent), transparent);
}

.turn-nameplate { display: flex; gap: var(--gt-scene-turn-nameplate-gap); align-items: baseline; width: max-content; padding: var(--gt-scene-turn-nameplate-padding-y) var(--gt-scene-turn-nameplate-padding-x); border-left: var(--gt-scene-turn-nameplate-border-width) solid currentColor; }
.turn-nameplate strong { font: var(--gt-scene-turn-nameplate-strong-weight) var(--gt-scene-turn-nameplate-strong-size)/var(--gt-scene-turn-nameplate-line-height) var(--gt-font-mono); letter-spacing: var(--gt-scene-turn-nameplate-strong-spacing)em; text-transform: uppercase; }
.turn-nameplate span { font: var(--gt-scene-turn-nameplate-span-weight) var(--gt-scene-turn-nameplate-span-size)/var(--gt-scene-turn-nameplate-line-height) var(--gt-font-mono); letter-spacing: var(--gt-scene-turn-nameplate-span-spacing)em; opacity: var(--gt-scene-turn-nameplate-span-opacity); text-transform: uppercase; }
.history-turn p { max-width: var(--gt-scene-history-body-max-width)ch; margin: var(--gt-scene-history-body-margin-top) 0 0; padding: var(--gt-scene-history-body-padding-y) var(--gt-scene-history-body-padding-x); font-size: var(--gt-scene-speaker-body-font-size); line-height: var(--gt-scene-speaker-body-line-height); }
.history-turn p + p, .history-turn p + ul, .history-turn ul + p, .history-turn ul + ul { margin-top: var(--gt-scene-paragraph-gap); }
.history-turn ul { margin: var(--gt-scene-history-body-margin-top) 0 0; padding: var(--gt-scene-history-body-padding-y) var(--gt-scene-history-body-padding-x); padding-left: calc(var(--gt-scene-history-body-padding-x) + var(--gt-scene-list-indent)); font-size: var(--gt-scene-speaker-body-font-size); line-height: var(--gt-scene-speaker-body-line-height); list-style-position: outside; }
.history-turn li { padding-left: var(--gt-scene-list-marker-gap); }
.history-turn li + li { margin-top: var(--gt-scene-list-item-gap); }
.history-turn[data-author="speaker"] ul { font-family: var(--gt-font-serif); font-style: var(--gt-scene-speaker-body-style); transform: skewX(var(--gt-scene-speaker-body-slant)); letter-spacing: var(--gt-scene-speaker-body-letter-spacing)em; }

.history-turn[data-author="speaker"] .turn-nameplate { color: var(--gt-scene-speaker-turn); background: color-mix(in srgb, var(--gt-scene-speaker-surface) var(--gt-scene-speaker-surface-opacity-percent), transparent); }
.history-turn[data-author="speaker"] p { font-family: var(--gt-font-serif); font-style: var(--gt-scene-speaker-body-style); transform: skewX(var(--gt-scene-speaker-body-slant)); letter-spacing: var(--gt-scene-speaker-body-letter-spacing)em; }
.history-turn[data-system-record="true"] { margin-left: 0; }
.history-turn[data-system-record="true"] .turn-nameplate { color: var(--gt-scene-system-turn); background: transparent; box-shadow: none; }
.history-turn[data-system-record="true"] > p { padding: var(--gt-scene-history-body-padding-y) var(--gt-scene-history-body-padding-x); color: var(--gt-scene-dialogue-text); background: transparent; border: 0; border-radius: 0; box-shadow: none; font-family: var(--gt-font-serif); font-style: var(--gt-scene-speaker-body-style); letter-spacing: var(--gt-scene-speaker-body-letter-spacing)em; }
.system-choice-option { min-height: var(--gt-scene-system-choice-height); padding: .65rem .9rem; color: var(--gt-scene-system-choice-text); background: var(--gt-scene-system-choice-surface); border: var(--gt-scene-system-choice-border-width) solid var(--gt-scene-system-choice-back); border-radius: 0; box-shadow: none; font: 800 .82rem/1.25 var(--gt-font-mono); text-align: left; }
.system-choice-option { display: grid; cursor: pointer; transition: transform 90ms ease, color 90ms ease, border-color 90ms ease; }
.system-choice-option:hover, .system-choice-option:focus-visible { color: var(--gt-scene-system-choice-focus); border-color: var(--gt-scene-system-choice-focus); outline: none; transform: translateX(var(--gt-scene-system-choice-focus-translate-x)); }
.system-choice-option:disabled { color: color-mix(in srgb, var(--gt-scene-system-choice-disabled) var(--gt-scene-system-choice-disabled-opacity-percent), transparent); cursor: not-allowed; }
.system-choice-option small { margin-top: .2rem; font-weight: 500; }

#system-choice-popup {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: start center;
  padding-top: var(--gt-scene-system-choice-popup-top);
  background: color-mix(in srgb, var(--gt-scene-command-popup-scrim) var(--gt-scene-system-choice-popup-scrim-opacity-percent), transparent);
}
#system-choice-popup[hidden] { display: none; }
.system-choice-popup-card {
  display: grid;
  gap: var(--gt-scene-system-choice-gap);
  width: var(--gt-scene-system-choice-popup-width);
  padding: var(--gt-scene-system-choice-popup-padding);
  color: var(--gt-scene-system-choice-text);
  background: var(--gt-scene-system-choice-surface);
  border: var(--gt-scene-system-choice-border-width) solid var(--gt-scene-system-choice-back);
  border-radius: 0;
  box-shadow: none;
}
#system-choice-popup-title {
  display: grid;
  align-items: center;
  min-height: var(--gt-scene-system-choice-popup-title-height);
  font: 900 var(--gt-scene-system-choice-popup-title-size)/1.3 var(--gt-font-mono);
}
#system-choice-options { display: grid; gap: var(--gt-scene-system-choice-gap); }
#composer-dock[data-system-blocked="true"] { opacity: .56; }
#escalation-popup {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: start center;
  padding-top: var(--gt-scene-system-choice-popup-top);
  background: color-mix(in srgb, var(--gt-scene-command-popup-scrim) var(--gt-scene-system-choice-popup-scrim-opacity-percent), transparent);
}
#escalation-popup[hidden] { display: none; }
.escalation-popup-card {
  display: grid;
  gap: var(--gt-scene-system-choice-gap);
  width: var(--gt-scene-system-choice-popup-width);
  padding: var(--gt-scene-system-choice-popup-padding);
  color: var(--gt-scene-system-choice-text);
  background: var(--gt-scene-system-choice-surface);
  border: var(--gt-scene-system-choice-border-width) solid var(--gt-scene-system-choice-back);
  border-radius: 0;
  box-shadow: none;
}
#escalation-popup-title {
  display: grid;
  align-items: center;
  min-height: var(--gt-scene-system-choice-popup-title-height);
  font: 900 var(--gt-scene-system-choice-popup-title-size)/1.3 var(--gt-font-mono);
}
#escalation-popup p { margin: 0; font: 500 .82rem/1.4 var(--gt-font-mono); }
#escalation-justification-label { font-weight: 800; }
.escalation-popup-facts { display: grid; gap: .25rem; margin: 0; font: 500 .82rem/1.35 var(--gt-font-mono); }
.escalation-popup-facts div { display: grid; grid-template-columns: 12rem 1fr; gap: .5rem; }
.escalation-popup-facts dt { font-weight: 800; }
.escalation-popup-facts dd { margin: 0; }
/* The justification is model-authored. It is quoted in its own node so it can
   never be mistaken for GameTerm's own words, and it is written with
   textContent only. */
#escalation-justification {
  margin: 0;
  padding: .6rem .8rem;
  border-left: var(--gt-scene-system-choice-border-width) solid var(--gt-scene-system-choice-focus);
  font: 500 .82rem/1.45 var(--gt-font-mono);
  font-style: italic;
  overflow-wrap: anywhere;
}
#escalation-justification:focus-visible { outline: 2px solid var(--gt-scene-system-choice-focus); }
.escalation-popup-actions { display: flex; flex-direction: column; gap: var(--gt-scene-system-choice-gap); }
.escalation-popup-actions button { width: 100%; }
.escalation-popup-actions button {
  min-height: var(--gt-scene-system-choice-height);
  padding: .65rem .9rem;
  color: var(--gt-scene-system-choice-text);
  background: var(--gt-scene-system-choice-surface);
  border: var(--gt-scene-system-choice-border-width) solid var(--gt-scene-system-choice-back);
  border-radius: 0;
  box-shadow: none;
  font: 800 .82rem/1.25 var(--gt-font-mono);
  cursor: pointer;
}
.escalation-popup-actions button:hover, .escalation-popup-actions button:focus-visible {
  color: var(--gt-scene-system-choice-focus);
  border-color: var(--gt-scene-system-choice-focus);
  outline: none;
}
.history-turn[aria-busy="true"] > p { color: rgba(245, 247, 255, .68); font-family: var(--gt-font-mono); font-size: clamp(.78rem, 1vw, 1rem); font-style: normal; letter-spacing: .04em; }
.history-turn[aria-busy="true"] > p::before { display: inline-block; width: .65rem; height: .65rem; margin-right: .55rem; border: 2px solid rgba(126, 234, 255, .28); border-top-color: #7eeaff; border-radius: 50%; content: ""; vertical-align: -.08rem; animation: dialogue-wait-spin .8s linear infinite; }

@keyframes dialogue-wait-spin { to { transform: rotate(1turn); } }

.history-turn[data-author="user"] { margin: var(--gt-scene-user-margin) 0 var(--gt-scene-user-margin) var(--gt-scene-user-indent); }
.history-turn[data-author="user"] .turn-nameplate { color: var(--gt-scene-user-turn); background: color-mix(in srgb, var(--gt-scene-user-turn) var(--gt-scene-user-surface-opacity-percent), transparent); }
.history-turn[data-author="user"] p { padding: var(--gt-scene-user-card-padding-y) var(--gt-scene-user-card-padding-x); background: color-mix(in srgb, var(--gt-scene-user-card) var(--gt-scene-user-card-opacity-percent), transparent); border-left: var(--gt-scene-user-card-border-width) solid var(--gt-scene-user-card); font-family: var(--gt-font-interface); box-shadow: inset 0 0 0 var(--gt-scene-user-card-inset-border-width) color-mix(in srgb, var(--gt-scene-user-card) var(--gt-scene-user-card-inset-opacity-percent), transparent); }

#reference-notice {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  margin: 0;
  padding: .4rem .55rem;
  color: #fff;
  background: rgba(10, 12, 24, .78);
  font: 700 .58rem/1.2 var(--gt-font-mono);
  text-transform: uppercase;
}

#character-screen { overflow: hidden; }

#scene-character,
#scene-character-thinking,
#scene-character-blink,
#scene-character-speaking {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .34));
}

#scene-character-speaking[hidden], #scene-character-blink[hidden], #scene-character-thinking[hidden], #scene-character[hidden] { display: none; }
#scene-character-thinking[data-transitioning="true"] { z-index: 1; pointer-events: none; animation: character-expression-dissolve 180ms linear both; }

@keyframes character-expression-dissolve { from { opacity: 1; } to { opacity: 0; } }

#character-debug {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 2;
  display: grid;
  gap: .35rem;
  width: min(14rem, calc(100% - 1.3rem));
  padding: .65rem;
  color: #f5f7ff;
  background: rgba(10, 12, 24, .88);
  border: 1px solid rgba(126, 234, 255, .5);
  font: 700 .6rem/1.25 var(--gt-font-mono);
  text-transform: uppercase;
}

#character-debug[hidden] { display: none; }
#character-debug strong { color: #ed3979; letter-spacing: .1em; }
#speaking-test-form { display: grid; gap: .35rem; }
#speaking-test-form label { color: rgba(245, 247, 255, .72); letter-spacing: .05em; }
#speaking-test-text { min-width: 0; resize: vertical; padding: .45rem .5rem; color: #f5f7ff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(245, 247, 255, .22); font: 700 .7rem/1.35 var(--gt-font-mono); }
#speaking-test-text:focus-visible { outline: .14rem solid #7eeaff; outline-offset: .1rem; }
#character-debug button { padding: .45rem .55rem; color: #11131d; background: #7eeaff; border: 0; font: 900 .62rem/1 var(--gt-font-mono); cursor: pointer; text-transform: uppercase; }
#character-debug button:disabled { cursor: wait; opacity: .55; }
#speaking-debug-status { color: rgba(245, 247, 255, .66); }

.turn-translation { display: grid; grid-template-columns: auto 1fr; gap: .55rem; margin-top: .55rem !important; padding-top: .5rem; border-top: 1px dashed rgba(126, 234, 255, .28); color: rgba(245, 247, 255, .72) !important; font-family: system-ui, sans-serif !important; font-style: normal !important; }
.turn-translation span { color: #7eeaff; font: 900 .55rem/1.4 var(--gt-font-mono); letter-spacing: .06em; white-space: nowrap; }

 #stage[data-client-shell="launcher"] .client-login-heading,
 #stage[data-client-shell="launcher"] .client-field,
 #stage[data-client-shell="launcher"] .client-field input,
 #stage[data-client-shell="launcher"] .client-field select,
 #stage[data-client-shell="launcher"] .client-login-summary,
 .arkey-primary,
 .arkey-secondary,
 .arkey-app-shell,
 .arkey-handoff-shell {
  font-family: var(--gt-font-interface);
}

#stage[aria-busy="true"] { visibility: hidden; }
.arkey-app-art strong { font-family: var(--gt-font-display); }
.history-turn[aria-busy="true"] > p,
#reference-notice,
#character-debug,
#speaking-test-text,
#character-debug button,
.turn-translation span { font-family: var(--gt-font-mono); }
.turn-translation { font-family: var(--gt-font-interface) !important; }

#composer-dock {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: var(--gt-scene-composer-gap);
  align-items: center;
  padding: var(--gt-scene-composer-padding-y) var(--gt-scene-composer-padding-x);
  color: color-mix(in srgb, var(--gt-scene-composer-text) var(--gt-scene-composer-text-opacity-percent), transparent);
  background: color-mix(in srgb, var(--gt-scene-composer-surface) var(--gt-scene-composer-surface-opacity-percent), transparent);
  border: var(--gt-scene-composer-border-width) solid color-mix(in srgb, var(--gt-scene-composer-border) var(--gt-scene-composer-border-opacity-percent), transparent);
  border-radius: var(--gt-scene-composer-radius);
  box-shadow: var(--gt-scene-composer-cyan-offset) var(--gt-scene-composer-cyan-offset) 0 color-mix(in srgb, var(--gt-scene-composer-offset-color) var(--gt-scene-composer-offset-opacity-percent), transparent);
}

#command-popup {
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--gt-scene-command-popup-scrim) var(--gt-scene-command-popup-scrim-opacity-percent), transparent);
}
#command-popup[hidden] { display: none; }
.command-popup-card {
  position: absolute;
  top: var(--gt-scene-command-popup-top);
  left: 50%;
  display: grid;
  width: var(--gt-scene-command-popup-width);
  padding: var(--gt-scene-command-palette-padding);
  background: var(--gt-scene-command-palette-surface);
  border: var(--gt-scene-command-palette-border-width) solid var(--gt-scene-command-palette-border);
  border-radius: var(--gt-scene-command-palette-radius);
  transform: translateX(-50%);
}
.command-popup-card header { display: grid; grid-template-columns: calc(var(--gt-scene-label-width) * 2) 1fr; gap: var(--gt-scene-command-popup-header-gap); align-items: start; height: var(--gt-scene-command-popup-header-height); }
#command-popup-title { padding-top: 10px; color: var(--gt-scene-command-palette-title); font: 700 var(--gt-scene-command-popup-title-size)/1 var(--gt-font-mono); }
#command-popup-query { box-sizing: border-box; height: var(--gt-scene-command-popup-query-height); padding: 8px var(--gt-scene-command-popup-query-padding-x); color: var(--gt-scene-command-palette-token); border: var(--gt-scene-command-palette-border-width) solid var(--gt-scene-command-palette-focus); border-radius: var(--gt-scene-command-popup-query-radius); font: 700 var(--gt-scene-command-popup-title-size)/1 var(--gt-font-mono); }
#composer-command-palette {
  display: grid;
  gap: var(--gt-scene-command-palette-row-gap);
  width: 100%;
  max-height: var(--gt-scene-command-palette-max-height);
  overflow-y: auto;
}
#composer-command-palette .command-palette-option {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--gt-scene-command-palette-row-padding-x);
  align-items: center;
  min-height: var(--gt-scene-command-palette-row-height);
  padding: 0 var(--gt-scene-command-palette-row-padding-x);
  color: var(--gt-scene-command-palette-title);
  background: transparent;
  border: var(--gt-scene-command-palette-border-width) solid transparent;
  font-family: var(--gt-font-mono);
  text-align: left;
  cursor: pointer;
}
#composer-command-palette .command-palette-option[aria-selected="true"] {
  border-color: var(--gt-scene-command-palette-focus);
  transform: translateX(var(--gt-scene-command-palette-focus-translate-x));
}
.command-palette-option strong { color: var(--gt-scene-command-palette-token); font-size: var(--gt-scene-command-palette-token-size); }
.command-palette-option span { display: grid; gap: 2px; min-width: 0; }
.command-palette-option b { color: var(--gt-scene-command-palette-title); font-size: var(--gt-scene-command-palette-title-size); }
.command-palette-option small { overflow: hidden; color: var(--gt-scene-command-palette-description); font-size: var(--gt-scene-command-palette-description-size); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.command-palette-empty { display: grid; place-items: center; min-height: var(--gt-scene-command-palette-empty-height); margin: 0; color: var(--gt-scene-command-palette-empty); font: 700 var(--gt-scene-command-palette-description-size)/1.2 var(--gt-font-mono); }

#composer-label { width: var(--gt-scene-label-width); height: var(--gt-scene-label-height); padding: var(--gt-scene-label-padding-y) var(--gt-scene-label-padding-x); color: var(--gt-scene-send-text); background: var(--gt-scene-send-surface); border-left: var(--gt-scene-label-stripe-width) solid var(--gt-scene-composer-border); font: var(--gt-scene-label-font-weight) var(--gt-scene-label-font-size)/var(--gt-scene-label-line-height) var(--gt-font-mono); letter-spacing: var(--gt-scene-label-letter-spacing)em; text-transform: uppercase; }
#composer-entry { position: relative; min-width: 0; }
#composer-input {
  width: 100%;
  height: var(--gt-scene-input-height);
  min-height: var(--gt-scene-input-min-height);
  max-height: var(--gt-scene-input-max-height);
  padding: var(--gt-scene-input-padding-y) var(--gt-scene-input-padding-x);
  resize: vertical;
  color: var(--gt-scene-input-text);
  caret-color: var(--gt-scene-input-caret);
  background: color-mix(in srgb, var(--gt-scene-input-surface) var(--gt-scene-input-surface-opacity-percent), transparent);
  border: var(--gt-scene-input-border-width) solid color-mix(in srgb, var(--gt-scene-input-border) var(--gt-scene-input-border-opacity-percent), transparent);
  border-radius: var(--gt-scene-input-radius);
  font: inherit;
  line-height: var(--gt-scene-input-line-height);
}
#composer-input:focus { outline: var(--gt-scene-send-focus-outline) solid var(--gt-scene-input-border); outline-offset: var(--gt-scene-input-outline-offset); }
#composer-input::placeholder { color: color-mix(in srgb, var(--gt-scene-placeholder) var(--gt-scene-input-placeholder-opacity-percent), transparent); }
#composer-dock button { padding: var(--gt-scene-send-padding-y) var(--gt-scene-send-padding-x); color: var(--gt-scene-send-text); background: var(--gt-scene-send-surface); border: var(--gt-scene-send-border-width) solid transparent; font-weight: var(--gt-scene-send-font-weight); cursor: pointer; }
#composer-dock > button[type="submit"] { width: var(--gt-scene-send-width); height: var(--gt-scene-send-height); }
#composer-dock #harness-cancel { height: var(--gt-scene-send-height); background: transparent; border-color: currentColor; }
#composer-dock button:focus-visible { outline: var(--gt-scene-send-outline) solid var(--gt-scene-send-text); outline-offset: var(--gt-scene-send-outline-offset); }

#composer-dock #voice-hold {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "meter label" "meter status";
  gap: var(--gt-scene-voice-gap-y) var(--gt-scene-voice-gap-x);
  align-items: center;
  min-width: var(--gt-scene-voice-width);
  height: var(--gt-scene-voice-height);
  padding: var(--gt-scene-voice-padding-y) var(--gt-scene-voice-padding-x);
  color: color-mix(in srgb, var(--gt-scene-voice-text) var(--gt-scene-voice-text-opacity-percent), transparent);
  background: color-mix(in srgb, var(--gt-scene-voice-surface) var(--gt-scene-voice-surface-opacity-percent), transparent);
  border: var(--gt-scene-voice-border-width) solid color-mix(in srgb, var(--gt-scene-voice-border) var(--gt-scene-voice-border-opacity-percent), transparent);
  border-radius: var(--gt-scene-voice-radius);
  font-family: var(--gt-font-mono);
  text-align: left;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  touch-action: none;
  user-select: none;
}

#voice-hold .voice-meter { grid-area: meter; display: flex; gap: var(--gt-scene-voice-meter-gap); align-items: center; height: var(--gt-scene-voice-meter-height); }
#voice-hold .voice-meter i { display: block; width: var(--gt-scene-voice-meter-bar-width); height: var(--gt-scene-voice-bar-small-height); background: currentColor; border-radius: var(--gt-scene-voice-meter-bar-radius); opacity: var(--gt-scene-voice-bar-opacity); }
#voice-hold .voice-meter i:nth-child(2) { height: var(--gt-scene-voice-bar-large-height); }
#voice-hold .voice-label { grid-area: label; font-size: var(--gt-scene-voice-label-size); font-weight: var(--gt-scene-voice-label-weight); letter-spacing: var(--gt-scene-voice-label-spacing)em; line-height: var(--gt-scene-voice-label-line-height); text-transform: uppercase; }
#voice-status { grid-area: status; font-size: var(--gt-scene-voice-status-size); font-weight: var(--gt-scene-voice-status-weight); line-height: var(--gt-scene-voice-status-line-height); }

#composer-dock #voice-hold[data-state="listening"] {
  color: #f2fff5;
  background: rgba(20, 184, 64, .92);
  border-color: rgba(179, 255, 199, .5);
  box-shadow: 0 0 0 .22rem rgba(20, 184, 64, .18);
}

#voice-hold[data-state="listening"] .voice-meter i { animation: voice-level 480ms ease-in-out infinite alternate; opacity: 1; }
#voice-hold[data-state="listening"] .voice-meter i:nth-child(2) { animation-delay: -240ms; }
#voice-hold[data-state="listening"] .voice-meter i:nth-child(3) { animation-delay: -120ms; }

#composer-dock #voice-hold[data-state="processing"] {
  color: #11131d;
  background: #7eeaff;
  border-color: rgba(232, 252, 255, .72);
}

@keyframes voice-level { to { transform: scaleY(1.8); } }

#stage[data-compact="true"] #decoration { right: -2rem; width: 52vw; opacity: .28; bottom: 18%; }
#stage[data-compact="true"] #composer-dock { grid-template-columns: auto 1fr auto; gap: .55rem; padding: .7rem; }
#stage[data-compact="true"] .system-choice-popup-card { width: min(var(--gt-scene-system-choice-popup-width), 86%); }
#stage[data-compact="true"] .escalation-popup-card { width: min(var(--gt-scene-system-choice-popup-width), 86%); }
#stage[data-compact="true"] #composer-label { display: none; }
#stage[data-compact="true"] #composer-dock #voice-hold { min-width: 3rem; grid-template-columns: 1fr; grid-template-areas: "meter"; justify-items: center; }
#stage[data-compact="true"] #voice-hold .voice-label,
#stage[data-compact="true"] #voice-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .menu-entry, .menu-entry .marker { transition: color 120ms ease, background 120ms ease, transform 120ms ease, opacity 120ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  #stage, #menu-panel, #scene-preview { transition: none !important; }
  .arkey-handoff-progress span { width: 100%; animation: none !important; }
  #voice-hold .voice-meter i { animation: none !important; }
  #context-health-fill { transition: none !important; }
  .history-turn[aria-busy="true"] > p::before { animation: none !important; }
}


/* ---- Setup: a BIOS-style overlay inside the console frame ---- */
#setup-screen {
  container-type: size;
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 10, .72);
  --setup-green: #5cff7a;
  --setup-green-dim: #2f9a4a;
  --setup-black: #030705;
}
#setup-screen[hidden] { display: none; }
.setup-frame {
  position: relative;
  width: min(94cqw, calc(94cqh * 1448 / 1086));
  aspect-ratio: 1448 / 1086;
}
.setup-frame-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  /* The frame art has no alpha; its chamfered corners are cut here. */
  clip-path: polygon(6.5% 0, 93.5% 0, 100% 8.5%, 100% 91.5%, 93.5% 100%, 6.5% 100%, 0 91.5%, 0 8.5%);
}
.setup-frame.no-frame .setup-frame-image { display: none; }
.setup-frame.no-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3%;
  background: #d9d5cf;
  box-shadow: inset 0 0 0 .6rem #b9b3d8, 0 1.5rem 3rem rgba(0, 0, 0, .5);
}
/* The frame's black screen, measured from the image (1448x1086). */
.setup-crt {
  position: absolute;
  left: 11.4%;
  top: 12.9%;
  width: 77.7%;
  height: 74.1%;
  box-sizing: border-box;
  padding: 1.7784% 3.108%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: .6rem;
  overflow: hidden;
  outline: none;
  background: var(--setup-black);
  color: var(--setup-green);
  font: 500 clamp(11px, 1.35cqmin, 16px)/1.45 var(--gt-font-mono, "Courier Prime", ui-monospace, monospace);
  text-shadow: 0 0 .45em rgba(92, 255, 122, .55);
  transform-origin: 50% 50%;
}
.setup-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.setup-header h2 {
  margin: 0;
  font: inherit;
  font-size: 1.35em;
  letter-spacing: .12em;
}
#setup-subtitle { margin: .15em 0 0; color: var(--setup-green-dim); }
#setup-tabs { display: flex; flex-wrap: wrap; gap: 0 1.5em; border-bottom: 1px solid var(--setup-green-dim); padding-bottom: .3em; }
.setup-tab { color: var(--setup-green-dim); white-space: nowrap; cursor: pointer; }
.setup-tab[aria-selected="true"] { color: var(--setup-green); }
.setup-tab[aria-selected="true"]::before { content: "▸ "; }
#setup-rows {
  grid-row: 4; min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--setup-columns, 1), minmax(0, 1fr));
  column-gap: 1.2em;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: none;
  padding-right: .5em;
}
#setup-rows::-webkit-scrollbar { display: none; }
.setup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6em;
  padding: .1em .4em;
  white-space: nowrap;
  cursor: pointer;
}
.setup-row-label { overflow: hidden; text-overflow: ellipsis; }
.setup-row-state { min-width: 7ch; text-align: right; }
.setup-switch { position: relative; align-self: center; justify-self: end; min-width: 0; width: 2.13em; height: 1.15em; border-radius: 1em; background: var(--setup-green-dim); }
.setup-switch::after { content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc(1.15em - 6px); border-radius: 50%; background: var(--setup-black); }
.setup-switch[aria-checked="true"] { background: var(--setup-green); }
.setup-switch[aria-checked="true"]::after { left: auto; right: 3px; }
.setup-row[aria-selected="true"] .setup-switch { background: var(--setup-black); }
.setup-row[aria-selected="true"] .setup-switch::after { background: var(--setup-green); }
.setup-bulk { grid-column: 1 / -1; border-bottom: 1px dashed var(--setup-green-dim); margin-bottom: .3em; padding-bottom: .25em; }
.setup-bulk-choices { display: flex; gap: .8em; }
.setup-bulk-choice { color: var(--setup-green-dim); }
.setup-bulk-choice[data-active="true"] { color: var(--setup-green); text-decoration: underline; }
.setup-row[aria-selected="true"] .setup-bulk-choice { color: var(--setup-black); opacity: .55; }
.setup-row[aria-selected="true"] .setup-bulk-choice[data-active="true"] { opacity: 1; }
.setup-empty { grid-column: 1 / -1; }
.setup-tab[data-focused="true"] { text-decoration: underline; }
.setup-row[data-state="off"] .setup-row-state { color: var(--setup-green-dim); }
.setup-row[data-changed="true"] .setup-row-label::after { content: " *"; color: var(--gt-color-pink, #ed3979); }
.setup-row[aria-selected="true"] { background: var(--setup-green); color: var(--setup-black); text-shadow: none; }
.setup-row[aria-selected="true"] .setup-row-state { color: var(--setup-black); }
.setup-empty { color: var(--setup-green-dim); padding: .4em; }
.setup-footer { grid-row: 5; display: flex; justify-content: space-between; align-items: center; gap: 1em; border-top: 1px solid var(--setup-green-dim); padding-top: .4em; }
#setup-status { color: var(--setup-green-dim); }
.setup-actions { display: flex; gap: 1.2em; }
.setup-actions button {
  border: 0;
  background: transparent;
  color: var(--setup-green);
  font: inherit;
  padding: 0 .2em;
  cursor: pointer;
}
.setup-actions button::before { content: "[ "; }
.setup-actions button::after { content: " ]"; }
.setup-actions button[data-focused="true"] { background: var(--setup-green); color: var(--setup-black); text-shadow: none; }
.setup-hint { grid-row: 6; margin: 0; color: var(--setup-green-dim); font-size: .85em; }

/* Power transitions: a CRT collapses to a bright line and back. */
@keyframes setup-power-on {
  0% { transform: scale(1, .004); filter: brightness(4); }
  40% { transform: scale(1, .004); filter: brightness(4); }
  70% { transform: scale(1, 1); filter: brightness(2.2); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
@keyframes setup-power-off {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, .004); filter: brightness(4); }
  100% { transform: scale(.02, .004); filter: brightness(0); }
}
@keyframes setup-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: .82; }
  94% { opacity: 1; }
}
#setup-screen[data-power="on"] .setup-crt { animation: setup-power-on .62s cubic-bezier(.2, .8, .2, 1) both, setup-flicker 7s linear .7s infinite; }
#setup-screen[data-power="off"] .setup-crt { animation: setup-power-off .38s ease-in both; }
#setup-screen[data-power="on"] { animation: setup-fade-in .25s ease-out both; }
#setup-screen[data-power="off"] { animation: setup-fade-out .4s ease-in .2s both; }
@keyframes setup-fade-in { from { background: rgba(4, 6, 10, 0); } to { background: rgba(4, 6, 10, .72); } }
@keyframes setup-fade-out { from { background: rgba(4, 6, 10, .72); } to { background: rgba(4, 6, 10, 0); } }
@media (prefers-reduced-motion: reduce) {
  #setup-screen .setup-crt, #setup-screen { animation-duration: .01s !important; }
}

/* HARNESS: the function library */
.setup-library { color: var(--setup-green-dim); font-size: .9em; line-height: 1.35; }
.setup-library[hidden] { display: none; }
.setup-library b { color: var(--setup-green); font-weight: 500; }
.setup-group { grid-column: 1 / -1; margin-top: .5em; padding: .15em .4em 0; border-top: 1px dashed var(--setup-green-dim); }
.setup-group-title { color: var(--setup-green); letter-spacing: .08em; }
.setup-group-app { color: var(--setup-green-dim); margin-left: .8em; }
.setup-group-text { color: var(--setup-green-dim); font-size: .85em; white-space: normal; }
.setup-row[data-status="invalid"] .setup-row-label, .setup-row[data-status="invalid"] .setup-row-state { color: #ff6b6b; text-shadow: 0 0 .45em rgba(255, 107, 107, .5); }
.setup-row[data-status="unregistered"] .setup-row-label, .setup-row[data-status="unregistered"] .setup-row-state { color: var(--setup-green-dim); }
.setup-row[aria-selected="true"][data-status="invalid"] { background: #ff6b6b; }
.setup-row[aria-selected="true"][data-status="invalid"] .setup-row-label, .setup-row[aria-selected="true"][data-status="invalid"] .setup-row-state { color: var(--setup-black); text-shadow: none; }
.setup-row[data-app-state="off"] .setup-row-label::after { content: " (app off)"; color: var(--setup-green-dim); }
.setup-detail { color: var(--setup-green); flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: center; }

.setup-folder .setup-row-state { min-width: 12ch; }
.setup-group[role="button"], .setup-group { cursor: pointer; }
.setup-library-intro { color: var(--setup-green); margin-bottom: .2em; }
#setup-primary-input {
  width: 32ch; max-width: 100%;
  background: var(--setup-black); color: var(--setup-green);
  border: 1px solid var(--setup-green); border-radius: 0; padding: 0 .3em;
  font: inherit; text-shadow: inherit; outline: none;
}
.setup-row[aria-selected="true"] #setup-primary-input { background: var(--setup-green); color: var(--setup-black); border-color: var(--setup-black); text-shadow: none; }
.setup-primary-value { min-width: 0; }
.setup-server { grid-template-columns: minmax(0, 1fr) auto auto; }
.setup-server .setup-row-state[data-active="true"] { outline: 1px solid var(--setup-black); outline-offset: -1px; }
.setup-row[aria-selected="true"].setup-server .setup-row-state[data-active="false"] { opacity: .6; }
.setup-test { min-width: 10ch; }
.setup-test[data-result="ok"] { color: var(--setup-green); }
.setup-test[data-result="fail"] { color: #ff6b6b; }
.setup-row[aria-selected="true"] .setup-test[data-result] { color: var(--setup-black); }

/* Demo walkthrough. `local-reference` mode is how this page supplies Astro's
   standing art and its mouth and eye layers, and turning it on also reveals the
   character debug panel and the preview-only tab strip. Neither belongs on the
   website, and neither is removed from the shared preview to get rid of it. */
#character-debug, #review-tabs { display: none !important; }