/* [project]/app/globals.css [app-client] (css) */
:root {
  --ink: #173e5d;
  --muted: #597c91;
  --accent: #0878d1;
  --line: #9cbfd047;
  --paper: #f8fcffeb;
}

.town-stage {
  position: absolute;
  inset: 0;
}

.town-about {
  z-index: 40;
  color: #37647e;
  background: #f8fcffe0;
  border: 1px solid #ffffffa6;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 11px;
  position: absolute;
  top: 91px;
  right: 30px;
}

.town-about span {
  padding-left: 9px;
}

.is-walking .town-about {
  top: 141px;
}

.has-welcome .town-stage > :not(.scene-shell) {
  visibility: hidden;
}

.welcome-layer {
  z-index: 100;
  isolation: isolate;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 1;
  background: linear-gradient(90deg, #d9ecf5a8 0%, #d9ecf541 53%, #173b5820 100%);
  align-items: center;
  padding: 94px clamp(28px, 6vw, 104px) 82px;
  transition: opacity .28s;
  display: flex;
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

.welcome-layer.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.welcome-topline {
  letter-spacing: 2px;
  color: #285b79;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  display: flex;
  position: absolute;
  top: 29px;
  left: clamp(28px, 6vw, 104px);
  right: clamp(28px, 6vw, 104px);
}

.welcome-wordmark {
  letter-spacing: -2px;
  color: #087ac8;
  font-size: 30px;
  font-weight: 850;
}

.welcome-wordmark > span {
  letter-spacing: 3px;
  vertical-align: middle;
  border-left: 1px solid #3977984d;
  margin-left: 11px;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 600;
}

.welcome-card {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: linear-gradient(140deg, #f8fdfff0, #f5fbffd6 70%, #def2ffb8);
  border: 1px solid #fffd;
  border-radius: 26px;
  flex-shrink: 0;
  width: min(554px, 100%);
  padding: 32px 38px 25px;
  animation: .55s both welcome-arrive;
  position: relative;
  box-shadow: 0 24px 80px #194e7826, inset 0 1px #fff;
}

.welcome-card-top {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 29px;
  display: flex;
}

.welcome-tag {
  color: #3b7e9c;
  letter-spacing: 1px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.welcome-tag > span {
  background: #32b6a2;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px #32b6a217;
}

.welcome-coast {
  letter-spacing: 1.2px;
  color: #6e95aa;
  font-size: 9px;
}

.welcome-kicker {
  color: #587e94;
  letter-spacing: 3px;
  margin: 0 0 13px;
  font-size: 14px;
}

.welcome-title {
  letter-spacing: 1px;
  outline: none;
  margin: 0;
  font-weight: 650;
}

.welcome-title > span {
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.4;
  display: block;
}

.welcome-title > strong {
  letter-spacing: 2px;
  color: #087dcd;
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.22;
  display: block;
}

.welcome-title-dot {
  color: #2db6ac;
}

.welcome-subtitle {
  letter-spacing: 1.3px;
  color: #25668d;
  margin: 17px 0;
  font-size: 14px;
  font-weight: 500;
}

.welcome-description {
  color: #52768d;
  margin: 0;
  font-size: 13px;
  line-height: 1.95;
}

.welcome-districts {
  border-top: 1px solid #7cabc029;
  margin: 23px 0 25px;
  padding-top: 19px;
}

.welcome-section-label {
  color: #7693a4;
  letter-spacing: 1px;
  font-size: 10px;
}

.welcome-districts > div {
  flex-wrap: wrap;
  gap: 8px 15px;
  max-width: 390px;
  margin-top: 11px;
  display: flex;
}

.welcome-districts > div > span {
  color: #3e7998;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.6;
}

.welcome-districts > div > span:before {
  content: "";
  vertical-align: middle;
  background: #69acc8;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  margin-right: 6px;
  display: inline-block;
}

.welcome-actions {
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  display: grid;
}

.welcome-primary, .welcome-secondary {
  border-radius: 12px;
  min-height: 49px;
  padding: 12px 19px;
  font-size: 13px;
  font-weight: 600;
}

.welcome-primary {
  color: #fff;
  background: linear-gradient(110deg, #087ac7, #0a91db);
  border: 1px solid #0a85cf;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
  box-shadow: 0 6px 16px #1688c82b;
}

.welcome-primary > span {
  font-size: 21px;
  font-weight: 400;
}

.welcome-primary:hover {
  background: #0574bb;
}

.welcome-secondary {
  color: #296e94;
  background: #ffffff72;
  border: 1px solid #9dc7dda6;
}

.welcome-secondary:hover {
  background: #fff;
}

.welcome-footnote {
  color: #7692a3;
  margin: 14px 0 0;
  font-size: 10px;
}

.welcome-scene-note {
  color: #204d6b;
  letter-spacing: 2px;
  text-shadow: 0 1px 8px #ffffffc9;
  pointer-events: none;
  align-items: center;
  gap: 16px;
  font-size: 21px;
  display: flex;
  position: absolute;
  bottom: 114px;
  right: 7vw;
}

.welcome-scene-line {
  background: #268cb9;
  width: 37px;
  height: 2px;
}

.welcome-scene-note small {
  letter-spacing: 3px;
  color: #43738e;
  margin-top: 9px;
  font-size: 10px;
  display: block;
}

.welcome-footer {
  color: #3e6e86;
  letter-spacing: .5px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  display: flex;
  position: absolute;
  bottom: 27px;
  left: clamp(28px, 6vw, 104px);
  right: clamp(28px, 6vw, 104px);
}

.welcome-scene-status {
  align-items: center;
  gap: 8px;
  display: flex;
}

.welcome-scene-status i {
  background: #27a895;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.welcome-back {
  color: #4a819f;
  background: none;
  border: 0;
  margin-bottom: 22px;
  padding: 0;
  font-size: 11px;
}

.welcome-account-title {
  letter-spacing: 1px;
  outline: none;
  margin: 0 0 14px;
  font-size: 29px;
  font-weight: 650;
}

.welcome-account-fields {
  border: 0;
  min-width: 0;
  margin: 25px 0 15px;
  padding: 0;
}

.welcome-account-fields legend {
  color: #4c7894;
  margin-bottom: 17px;
  padding: 0;
  font-size: 11px;
}

.welcome-account-fields label {
  color: #52768d;
  margin: 14px 0 8px;
  font-size: 11px;
  display: block;
}

.welcome-phone-row, .welcome-code-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.welcome-phone-row {
  background: #ffffff8a;
  border: 1px solid #b9d5e5;
  border-radius: 9px;
  padding: 0 12px;
}

.welcome-phone-row > span {
  color: #648497;
  border-right: 1px solid #cfdee6;
  padding-right: 12px;
  font-size: 12px;
}

.welcome-account-fields input {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: #52768d;
  opacity: 1;
  background: none;
  border: 0;
  padding: 13px 0;
  font-size: 13px;
}

.welcome-account-fields input::placeholder {
  color: #8aa3b1;
}

.welcome-code-row input {
  background: #ffffff8a;
  border: 1px solid #b9d5e5;
  border-radius: 9px;
  padding: 13px 12px;
}

.welcome-code-row button {
  color: #6896ae;
  background: #eaf5fc;
  border: 1px solid #b9d5e5;
  border-radius: 9px;
  flex-shrink: 0;
  padding: 12px;
  font-size: 11px;
}

.welcome-account-fields button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.welcome-account-submit {
  color: #63859a;
  background: #d6e8f3;
  border: 0;
  border-radius: 9px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font-size: 12px;
}

.welcome-account-note {
  color: #718b9b;
  margin-bottom: 18px;
  font-size: 11px;
  line-height: 1.9;
}

.welcome-account-guest {
  width: 100%;
}

@keyframes welcome-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@media (min-width: 761px) and (max-height: 780px) {
  .welcome-layer {
    padding-top: 76px;
    padding-bottom: 66px;
  }

  .welcome-card {
    padding: 24px 32px 21px;
  }

  .welcome-card-top {
    margin-bottom: 19px;
  }

  .welcome-title > strong {
    font-size: 53px;
  }

  .welcome-title > span {
    font-size: 29px;
  }

  .welcome-districts {
    margin: 17px 0 20px;
    padding-top: 14px;
  }

  .welcome-subtitle {
    margin: 13px 0;
  }

  .welcome-topline {
    top: 21px;
  }

  .welcome-footer {
    bottom: 20px;
  }

  .welcome-scene-note {
    bottom: 92px;
  }
}

@media (max-width: 1050px) {
  .welcome-scene-note {
    display: none;
  }
}

@media (max-width: 760px) {
  .town-about {
    padding: 8px 11px;
    font-size: 10px;
    top: 110px;
    right: 17px;
  }

  .is-walking .town-about {
    top: 198px;
    left: 17px;
    right: auto;
  }

  .welcome-layer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(#e7f4fc40, #ccdfed68);
    justify-content: center;
    align-items: flex-start;
    padding: 82px 18px 92px;
  }

  .welcome-topline {
    top: 23px;
    left: 23px;
    right: 23px;
  }

  .welcome-topline > span:last-child {
    letter-spacing: .5px;
    font-size: 9px;
  }

  .welcome-wordmark {
    font-size: 26px;
  }

  .welcome-wordmark > span {
    letter-spacing: 2px;
    margin-left: 7px;
    padding-left: 10px;
    font-size: 9px;
  }

  .welcome-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: linear-gradient(145deg, #f8fdfff0, #edf8ffe3);
    border-radius: 22px;
    margin: auto 0;
    padding: 25px 24px 24px;
  }

  .welcome-card-top {
    margin-bottom: 24px;
  }

  .welcome-tag {
    font-size: 10px;
  }

  .welcome-coast {
    font-size: 8px;
  }

  .welcome-title > span {
    letter-spacing: 0;
    font-size: 27px;
  }

  .welcome-title > strong {
    font-size: 56px;
  }

  .welcome-kicker {
    font-size: 12px;
  }

  .welcome-subtitle {
    letter-spacing: .6px;
    font-size: 12px;
  }

  .welcome-description {
    font-size: 12px;
    line-height: 1.9;
  }

  .welcome-wide-break {
    display: none;
  }

  .welcome-districts {
    margin: 21px 0;
    padding-top: 17px;
  }

  .welcome-districts > div {
    gap: 8px 12px;
  }

  .welcome-districts > div > span {
    font-size: 10px;
  }

  .welcome-actions {
    gap: 9px;
  }

  .welcome-primary, .welcome-secondary {
    min-height: 48px;
    padding: 11px 13px;
    font-size: 12px;
  }

  .welcome-footnote {
    font-size: 9px;
    line-height: 1.7;
  }

  .welcome-footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: 9px;
    bottom: 25px;
    left: 18px;
    right: 18px;
  }

  .welcome-footer > span:first-child {
    text-align: center;
    width: 100%;
  }

  .welcome-account-title {
    font-size: 27px;
  }

  .welcome-account-fields {
    margin-top: 20px;
  }

  .welcome-phone-row input, .welcome-code-row input {
    font-size: 16px;
  }

  .welcome-back {
    margin-bottom: 18px;
  }
}

@media (max-height: 700px) {
  .welcome-layer {
    display: block;
  }

  .welcome-card {
    margin: 0 auto 0 0;
  }

  .welcome-footer {
    flex-wrap: wrap;
    margin-top: 25px;
    position: static;
  }

  .welcome-scene-note {
    display: none;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .welcome-layer {
    padding-bottom: 25px;
  }

  .welcome-card {
    margin: 0 auto;
  }

  .welcome-topline > span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-layer {
    transition: none;
  }

  .welcome-card {
    animation: none;
  }
}

.town-stage {
  pointer-events: none;
}

.town-stage > * {
  pointer-events: auto;
}

.welcome-wordmark {
  white-space: nowrap;
}

.welcome-wordmark > span {
  letter-spacing: 1px;
  font-size: 13px;
}

@media (min-width: 761px) {
  .welcome-card {
    width: min(554px, 44vw);
  }

  .welcome-layer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(90deg, #d9ecf580 0%, #d9ecf510 58%, #d9ecf500 100%);
  }
}

@media (max-width: 760px) {
  .welcome-wordmark > span {
    letter-spacing: .5px;
    font-size: 11px;
  }

  .welcome-topline > span:last-child {
    display: none;
  }
}

.welcome-layer {
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: 20px;
  padding: 26px clamp(28px, 6vw, 104px) 24px;
  display: grid;
}

.welcome-topline, .welcome-footer {
  position: static;
}

.welcome-card {
  align-self: center;
  margin: 0;
}

.welcome-footer {
  margin: 0;
}

@media (max-width: 760px) {
  .welcome-layer {
    justify-content: normal;
    padding: 23px 18px 25px;
  }

  .welcome-card {
    background: linear-gradient(145deg, #f8fdffe8, #edf8ffd6);
    justify-self: center;
    margin: 0;
  }

  .welcome-topline {
    padding: 0 5px;
  }

  .welcome-footer {
    row-gap: 10px;
  }
}

@media (min-width: 761px) {
  .welcome-layer {
    pointer-events: none;
  }

  .welcome-card, .welcome-topline, .welcome-footer {
    pointer-events: auto;
  }
}

.welcome-wordmark {
  align-items: center;
  line-height: 1.2;
  display: flex;
}

.welcome-wordmark > span {
  font-size: inherit;
  letter-spacing: 0;
  vertical-align: baseline;
  font-weight: 700;
}

.welcome-footer {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.welcome-footer > span:first-child {
  letter-spacing: 1px;
  color: #285873;
  text-shadow: 0 1px 3px #ffffff90;
  font-size: 14px;
  font-weight: 600;
}

.welcome-scene-status {
  letter-spacing: .5px;
  font-size: 10px;
  font-weight: 400;
}

@media (max-width: 1050px) {
  .welcome-topline > span:last-child {
    display: none;
  }
}

@media (max-width: 760px) {
  .welcome-wordmark {
    font-size: clamp(20px, 5.65vw, 26px);
  }

  .welcome-title > span {
    font-size: clamp(22px, 6.2vw, 27px);
  }

  .welcome-footer > span:first-child {
    letter-spacing: .4px;
    font-size: 11px;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  color: var(--ink);
  background: #c6e4f7;
  font-family: Segoe UI, Microsoft YaHei, sans-serif;
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #f3a817;
}

button:disabled {
  opacity: .45;
  cursor: wait;
}

.town-app {
  width: 100%;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.scene-shell {
  touch-action: none;
  position: absolute;
  inset: 0;
}

.scene-shell canvas {
  outline: none;
  display: block;
}

.masthead {
  pointer-events: none;
  z-index: 20;
  align-items: center;
  gap: 12px;
  display: flex;
  position: absolute;
  top: 24px;
  left: 30px;
}

.brand-symbol {
  letter-spacing: -1px;
  color: #fff;
  background: #0878ce;
  border-radius: 12px;
  place-items: center;
  width: 48px;
  height: 50px;
  font-size: 17px;
  font-weight: 800;
  display: grid;
  box-shadow: 0 5px 18px #287aad22;
}

.eyebrow {
  letter-spacing: 2px;
  color: #397b9e;
  margin: 0 0 5px;
  font-size: 9px;
}

.masthead h1 {
  letter-spacing: 1px;
  margin: 0;
  font-size: 23px;
}

.brand-caption {
  letter-spacing: 1.7px;
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 10px;
}

.mode-switch {
  background: var(--paper);
  z-index: 25;
  border: 1px solid #fffa;
  border-radius: 12px;
  gap: 4px;
  padding: 5px;
  display: flex;
  position: absolute;
  top: 28px;
  right: 28px;
  box-shadow: 0 4px 20px #416d8712;
}

.mode-switch button {
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 10px 17px;
  font-size: 12px;
}

.mode-switch button.active {
  background: var(--accent);
  color: #fff;
}

.camera-tools {
  background: var(--paper);
  z-index: 20;
  border: 1px solid #fff;
  border-radius: 12px;
  gap: 3px;
  padding: 5px;
  display: grid;
  position: absolute;
  top: 42%;
  right: 24px;
  box-shadow: 0 4px 18px #416d8712;
}

.camera-tools button {
  color: #37647e;
  background: none;
  border: 0;
  border-radius: 7px;
  width: 38px;
  height: 39px;
  font-size: 25px;
}

.camera-tools button:hover {
  background: #e1eff7;
}

.camera-tools > span {
  background: var(--line);
  height: 1px;
  margin: 2px 6px;
}

.interaction-hint {
  letter-spacing: .5px;
  color: #4d7991;
  pointer-events: none;
  z-index: 20;
  justify-content: center;
  gap: 22px;
  font-size: 10px;
  display: flex;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}

.mobile-hint {
  display: none;
}

.walk-top {
  background: var(--paper);
  pointer-events: none;
  z-index: 20;
  border-radius: 9px;
  gap: 14px;
  padding: 10px 14px;
  font-size: 11px;
  display: flex;
  position: absolute;
  top: 104px;
  left: 30px;
}

.walk-top > span:first-child {
  color: var(--accent);
  font-weight: 600;
}

.is-walking .masthead {
  background: var(--paper);
  border-radius: 12px;
  padding: 12px;
  top: 16px;
  left: 20px;
}

.is-walking .brand-caption {
  display: none;
}

.is-walking .masthead h1 {
  font-size: 18px;
}

.is-walking .brand-symbol {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.crosshair {
  pointer-events: none;
  background: #fff9;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1px #295a7766;
}

.walk-destinations {
  background: var(--paper);
  z-index: 25;
  white-space: nowrap;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 8px;
  display: flex;
  position: absolute;
  bottom: 24px;
  left: 50%;
  overflow-x: auto;
  transform: translateX(-50%);
}

.walk-destinations > span {
  color: var(--muted);
  padding: 0 6px;
  font-size: 10px;
}

.walk-destinations button {
  color: #1a608d;
  background: #e5f0f8;
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 11px;
}

.walk-destinations button:last-child {
  color: #fff;
  background: #147bc8;
}

.joystick {
  z-index: 25;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #e7f5ff88;
  border: 1px solid #fffa;
  border-radius: 50%;
  place-items: center;
  width: 112px;
  height: 112px;
  display: grid;
  position: absolute;
  bottom: 108px;
  left: 30px;
}

.joystick > span {
  pointer-events: none;
  background: #308bccb8;
  border: 2px solid #e9f7ff;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: block;
  box-shadow: 0 4px 12px #28577922;
}

.scene-loading, .scene-unavailable {
  text-align: center;
  color: #3d6f8b;
  background: #c6e4f7;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 30px;
  display: flex;
  position: absolute;
  inset: 0;
}

.scene-unavailable h2 {
  margin: 0;
  font-size: 20px;
}

.scene-unavailable p {
  max-width: 380px;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.scene-unavailable button {
  color: #fff;
  background: #137ec8;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
}

.fallback-icon {
  font-size: 45px;
}

@media (max-width: 1100px) {
  .masthead h1 {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .masthead {
    gap: 9px;
    top: 20px;
    left: 17px;
  }

  .brand-symbol {
    border-radius: 9px;
    width: 37px;
    height: 42px;
    font-size: 14px;
  }

  .masthead h1 {
    letter-spacing: 0;
    font-size: 18px;
  }

  .eyebrow {
    letter-spacing: 1.3px;
    font-size: 7px;
  }

  .brand-caption {
    letter-spacing: 1px;
    font-size: 9px;
  }

  .mode-switch {
    border-radius: 10px;
    padding: 3px;
    top: 107px;
    left: 17px;
    right: auto;
  }

  .mode-switch button {
    padding: 8px 15px;
    font-size: 11px;
  }

  .camera-tools {
    padding: 3px;
    top: auto;
    bottom: 62px;
    right: 12px;
  }

  .camera-tools button {
    width: 32px;
    height: 33px;
    font-size: 22px;
  }

  .interaction-hint {
    gap: 10px;
    font-size: 8px;
    bottom: 17px;
  }

  .desktop-hint {
    display: none;
  }

  .mobile-hint {
    display: inline;
  }

  .walk-top {
    gap: 10px;
    padding: 9px;
    font-size: 10px;
    top: 152px;
    left: 17px;
    right: 17px;
  }

  .is-walking .masthead {
    padding: 9px;
    top: 12px;
    left: 12px;
  }

  .is-walking .masthead h1 {
    font-size: 16px;
  }

  .is-walking .brand-symbol {
    width: 32px;
    height: 36px;
  }

  .walk-destinations {
    justify-content: flex-start;
    bottom: 16px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  .walk-destinations button {
    padding: 10px;
    font-size: 10px;
  }

  .joystick {
    width: 108px;
    height: 108px;
    bottom: 100px;
    left: 22px;
  }
}

@media (max-height: 600px) and (min-width: 761px) {
  .masthead {
    top: 12px;
    left: 18px;
  }

  .masthead h1 {
    font-size: 18px;
  }

  .brand-caption {
    display: none;
  }

  .mode-switch {
    top: 14px;
    right: 18px;
  }

  .mode-switch button {
    padding: 8px 12px;
    font-size: 10px;
  }

  .interaction-hint {
    font-size: 8px;
    bottom: 8px;
  }

  .camera-tools {
    top: 24%;
  }

  .camera-tools button {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .walk-top {
    top: 82px;
  }

  .joystick {
    width: 86px;
    height: 86px;
    bottom: 80px;
  }
}

@media (pointer: coarse) {
  .desktop-hint {
    display: none;
  }

  .mobile-hint {
    display: inline;
  }
}

@media (max-width: 760px) {
  .walk-destinations {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    display: grid;
    overflow: visible;
  }

  .walk-destinations > span {
    display: none;
  }

  .walk-destinations button {
    padding: 10px 6px;
  }

  .joystick {
    bottom: 140px;
  }
}

.player-label {
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  background: #139952;
  border: 2px solid #e5fff0;
  border-radius: 14px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  display: block;
  box-shadow: 0 3px 8px #134c4733;
}

.npc-talk-prompt {
  color: #167fc4;
  background: #fff;
  border: 2px solid #177ac0;
  border-radius: 14px;
  min-width: 58px;
  padding: 0 8px 6px;
  font-size: 24px;
  font-weight: 800;
  position: relative;
  box-shadow: 0 3px 12px #19517333;
}

.npc-talk-prompt small {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  display: block;
}

.npc-talk-prompt:after {
  content: "";
  border: 5px solid #0000;
  border-top: 6px solid #177ac0;
  border-bottom-width: 0;
  position: absolute;
  bottom: -7px;
  left: 23px;
}

.view-toggle {
  background: var(--paper);
  color: #21638b;
  z-index: 25;
  border: 1px solid #fff;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 11px;
  position: absolute;
  top: 91px;
  right: 29px;
}

.nearby-talk {
  color: #fff;
  z-index: 26;
  background: #087aca;
  border: 1px solid #fffa;
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 12px;
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 16px #004b6c33;
}

kbd {
  font: inherit;
  opacity: .8;
  border: 1px solid;
  border-radius: 4px;
  margin-left: 6px;
  padding: 2px 5px;
  font-size: 10px;
}

.dialog-shade {
  z-index: 50;
  pointer-events: auto;
  background: #173e5d14;
  justify-content: center;
  align-items: flex-end;
  padding: 24px;
  display: flex;
  position: absolute;
  inset: 0;
}

.npc-dialog {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #fbfefff5;
  border: 1px solid #fff;
  border-radius: 18px;
  width: min(550px, 100%);
  padding: 24px;
  box-shadow: 0 14px 50px #183a5940;
}

.dialog-person {
  align-items: center;
  gap: 12px;
  display: flex;
}

.npc-portrait {
  color: #edb849;
  background: #deeffb;
  border-radius: 12px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 32px;
  display: grid;
}

.dialog-person h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.dialog-person h2 small {
  color: #6e91a8;
  margin-left: 9px;
  font-size: 10px;
  font-weight: 400;
}

.dialog-person > div > span {
  color: #4284aa;
  font-size: 10px;
}

.npc-dialog p {
  min-height: 56px;
  margin: 22px 0 26px;
  font-size: 16px;
  line-height: 1.8;
}

.dialog-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.dialog-actions > span {
  color: #6c8c9f;
  margin-right: auto;
  font-size: 10px;
}

.dialog-actions button {
  color: #21638b;
  background: #e4f1fa;
  border: 0;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12px;
}

.dialog-actions button:last-child {
  color: #fff;
  background: #087bc8;
}

@media (max-width: 760px) {
  .view-toggle {
    padding: 9px 10px;
    font-size: 10px;
    top: 109px;
    right: 14px;
  }

  .walk-top {
    gap: 8px;
    font-size: 9px;
  }

  .nearby-talk {
    padding: 11px 13px;
    font-size: 11px;
    bottom: 155px;
    left: auto;
    right: 18px;
    transform: none;
  }

  .dialog-shade {
    padding: 12px;
  }

  .npc-dialog {
    padding: 20px;
  }

  .npc-dialog p {
    font-size: 15px;
  }

  .dialog-actions > span {
    display: none;
  }

  .dialog-actions {
    justify-content: flex-end;
  }
}

.music-control {
  z-index: 28;
  color: #427790;
  background: #f8fcffeb;
  border: 1px solid #fff;
  border-radius: 24px;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 4px 5px;
  display: flex;
  position: absolute;
  bottom: 32px;
  left: 30px;
  box-shadow: 0 3px 16px #325c7410;
}

.music-toggle {
  color: inherit;
  background: none;
  border: 0;
  border-radius: 18px;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 10px;
  display: flex;
}

.music-toggle > span:first-child {
  color: #539eb2;
  font-size: 19px;
}

.music-toggle i {
  background: #64b4a8;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  display: block;
}

.music-volume {
  font-size: 9px;
  position: relative;
}

.music-volume summary {
  cursor: pointer;
  border-left: 1px solid #d1e4ed;
  padding: 10px 7px;
  list-style: none;
}

.music-volume summary::-webkit-details-marker {
  display: none;
}

.music-volume > div {
  background: #f8fcfff5;
  border: 1px solid #fff;
  border-radius: 12px;
  width: 192px;
  padding: 15px;
  position: absolute;
  bottom: 44px;
  left: auto;
  right: -7px;
  box-shadow: 0 8px 24px #224c6a20;
}

.music-volume label {
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.music-volume input {
  accent-color: #55a6b7;
  cursor: pointer;
  width: 100%;
  margin: 15px 0 10px;
}

.music-volume small {
  color: #7496a7;
  font-size: 9px;
}

.is-walking .music-control {
  bottom: 100px;
  left: auto;
  right: 29px;
}

.music-volume summary:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #f3a817;
}

@media (max-width: 760px) {
  .music-control {
    padding: 2px 6px;
    top: 164px;
    bottom: auto;
    left: 17px;
  }

  .is-walking .music-control {
    inset: 198px 16px auto auto;
  }

  .music-volume > div {
    inset: 39px -7px auto auto;
  }

  .music-toggle, .music-volume summary {
    font-size: 9px;
  }

  .music-control .music-toggle > span:first-child {
    font-size: 17px;
  }
}

@media (max-height: 600px) and (min-width: 761px) {
  .music-control {
    bottom: 28px;
  }

  .is-walking .music-control {
    bottom: 83px;
  }
}

.player-arrow {
  filter: drop-shadow(0 1px 1px #eafff0);
  pointer-events: none;
  border-top: 12px solid #24b96d;
  border-left: 7px solid #0000;
  border-right: 7px solid #0000;
  width: 0;
  height: 0;
  display: block;
}

.player-speech-bubble {
  color: #255746;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  pointer-events: none;
  background: #fffffff2;
  border: 1px solid #bedfd1;
  border-radius: 16px;
  width: max-content;
  max-width: min(260px, 65vw);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  animation: 8s ease-out forwards player-speech;
  position: relative;
  transform: translateY(-55%);
  box-shadow: 0 5px 18px #124b3920;
}

.player-speech-bubble:after {
  content: "";
  border: 6px solid #0000;
  border-top: 7px solid #fffffff2;
  border-bottom-width: 0;
  margin-left: -6px;
  position: absolute;
  bottom: -7px;
  left: 50%;
}

.player-chat {
  z-index: 32;
  position: absolute;
  bottom: 158px;
  right: 29px;
}

.speech-open {
  color: #287854;
  background: #f8fffbed;
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 11px;
}

.speech-notice {
  text-align: right;
  color: #3b765d;
  pointer-events: none;
  min-height: 14px;
  margin-top: 7px;
  font-size: 10px;
  display: block;
}

.player-chat.editing {
  width: min(510px, 100% - 32px);
  bottom: 96px;
  right: 50%;
  transform: translateX(50%);
}

.speech-composer {
  background: #fbfffded;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 16px;
  box-shadow: 0 7px 30px #164d3325;
}

.speech-composer label {
  color: #287854;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.speech-composer label small {
  color: #789b8a;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 400;
}

.speech-input-row {
  gap: 7px;
  display: flex;
}

.speech-input-row input {
  min-width: 0;
  font: inherit;
  color: #245d43;
  outline-offset: 2px;
  background: #fff;
  border: 1px solid #c6e1d3;
  border-radius: 8px;
  flex: 1;
  padding: 11px;
  font-size: 14px;
}

.speech-input-row input:focus {
  outline: 2px solid #6dbb95;
}

.speech-input-row button {
  color: #fff;
  background: #25805a;
  border: 0;
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 12px;
}

.speech-input-row button:last-child {
  color: #4f8066;
  background: #edf5f0;
  padding: 8px 10px;
}

.speech-help {
  color: #779285;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 10px;
  display: flex;
}

.first-person-speech {
  color: #255746;
  overflow-wrap: anywhere;
  z-index: 26;
  pointer-events: none;
  background: #f6fff9ec;
  border-radius: 14px;
  max-width: min(440px, 80vw);
  padding: 12px 16px;
  font-size: 13px;
  animation: 8s ease-out forwards first-speech;
  position: absolute;
  bottom: 245px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes player-speech {
  0% {
    opacity: 0;
    transform: translateY(-35%);
  }

  6%, 82% {
    opacity: 1;
    transform: translateY(-55%);
  }

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

@keyframes first-speech {
  0% {
    opacity: 0;
  }

  6%, 82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .player-chat {
    bottom: 222px;
    right: 16px;
  }

  .speech-open {
    padding: 10px 12px;
    font-size: 10px;
  }

  .player-chat.editing {
    width: calc(100% - 24px);
    bottom: 126px;
  }

  .speech-composer {
    padding: 12px;
  }

  .speech-input-row input {
    font-size: 16px;
  }

  .speech-input-row button {
    padding: 8px 10px;
  }

  .speech-notice {
    max-width: 165px;
    font-size: 9px;
  }

  .player-speech-bubble {
    padding: 10px 13px;
    font-size: 12px;
  }

  .first-person-speech {
    bottom: 306px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-speech-bubble, .first-person-speech {
    animation: none;
  }
}

.scene-shell [tabindex]:focus {
  outline: none;
}

.company-credit {
  left: 12px;
  right: 12px;
  bottom: max(10px,env(safe-area-inset-bottom));
  text-align: center;
  letter-spacing: 1px;
  color: #4c7188;
  pointer-events: none;
  z-index: 20;
  text-shadow: 0 1px 3px #fffc;
  font-size: 11px;
  line-height: 18px;
  position: absolute;
}

.interaction-hint {
  bottom: 35px;
}

.walk-destinations {
  bottom: 42px;
}

@media (max-width: 760px) {
  .company-credit {
    letter-spacing: .35px;
    bottom: max(8px,env(safe-area-inset-bottom));
    font-size: 9px;
  }

  .interaction-hint {
    bottom: calc(33px + env(safe-area-inset-bottom, 0px));
    font-size: 8px;
  }

  .walk-destinations {
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
  }

  .joystick {
    bottom: calc(162px + env(safe-area-inset-bottom, 0px));
  }

  .nearby-talk {
    bottom: calc(177px + env(safe-area-inset-bottom, 0px));
  }

  .player-chat {
    bottom: calc(244px + env(safe-area-inset-bottom, 0px));
  }

  .player-chat.editing {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  .first-person-speech {
    bottom: calc(328px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-height: 600px) and (min-width: 761px) {
  .company-credit {
    font-size: 9px;
    bottom: 5px;
  }

  .interaction-hint {
    bottom: 26px;
  }

  .walk-destinations {
    bottom: 31px;
  }
}

.is-walking .company-credit {
  color: #426880;
  width: max-content;
  max-width: calc(100% - 24px);
  text-shadow: none;
  background: #f8fcffe0;
  border-radius: 5px;
  padding: 0 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.bench-prompt {
  padding-top: 6px;
  font-size: 20px;
}

.bench-action {
  background: #17866c;
}

.seat-notice {
  color: #335f63;
  z-index: 27;
  white-space: nowrap;
  background: #fffef2;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12px;
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .walk-destinations {
    grid-template-columns: repeat(4, 1fr);
  }

  .seat-notice {
    bottom: calc(212px + env(safe-area-inset-bottom, 0px));
    font-size: 10px;
  }
}

.district-arrow-target {
  cursor: pointer;
  touch-action: manipulation;
  background: none;
  border: 0;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: block;
}

.district-arrow-target:focus-visible {
  outline-offset: 2px;
  background: #ffe07922;
  outline: 2px solid #e8b229;
}

.district-entry-action {
  color: #5b4816 !important;
  background: #ffe079 !important;
  border-color: #fff0b4 !important;
}

@media (max-width: 760px) {
  .walk-destinations {
    justify-content: flex-start;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }
}

.town-online-status {
  left: 30px;
  bottom: calc(var(--site-footer-height, 20px) + 90px);
  z-index: 40;
  color: #35728c;
  background: #f4fbffe8;
  border: 1px solid #ffffffbd;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 60px);
  padding: 8px 13px;
  font-size: 11px;
  display: flex;
  position: absolute;
}

.town-online-status button {
  color: #1b729c;
  background: #e0f1f8;
  border: 1px solid #a6cedd;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 11px;
}

.is-walking .town-online-status {
  left: 30px;
  bottom: calc(var(--site-footer-height, 20px) + 205px);
}

.character-name.is-resident {
  color: #237cac;
  background: #edf8ffeb;
  border-color: #99ceeb;
}

@media (max-width: 760px) {
  .town-online-status, .is-walking .town-online-status {
    left: 12px;
    bottom: calc(var(--site-footer-height, 20px) + 159px);
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    font-size: 10px;
  }

  .is-walking .town-online-status {
    bottom: calc(var(--site-footer-height, 20px) + 40dvh);
  }
}

.private-shade {
  z-index: 70;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #163d571c;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0;
}

.private-chat {
  color: #245a7c;
  pointer-events: auto;
  background: #f8fcff;
  border: 1px solid #fff;
  border-radius: 22px;
  width: min(440px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  box-shadow: 0 20px 80px #24527440;
}

.private-chat header {
  background: #ecf7ff;
  border-bottom: 1px solid #dceef7;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  display: flex;
}

.private-chat h2 {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  font-size: 18px;
}

.private-chat header small {
  color: #4389b6;
  letter-spacing: 1px;
  font-size: 11px;
}

.private-chat button {
  color: #2b6b90;
  cursor: pointer;
  background: #fff;
  border: 1px solid #badcec;
  border-radius: 10px;
  padding: 10px 16px;
}

.private-chat button:disabled {
  opacity: .55;
  cursor: wait;
}

.private-chat header button {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 20px;
}

.private-chat .primary {
  color: #fff;
  background: #168dcc;
  border-color: #168dcc;
}

.private-invitation {
  text-align: center;
  padding: 26px 24px;
}

.private-invitation > div:first-child {
  color: #3197c5;
  background: #e4f4ff;
  border-radius: 20px;
  width: 68px;
  margin: 0 auto 18px;
  padding: 12px;
  font-size: 32px;
}

.private-invitation p {
  font-size: 14px;
  line-height: 1.8;
}

.private-invitation > small {
  color: #7d99ae;
  font-size: 11px;
}

.private-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.private-messages {
  overscroll-behavior: contain;
  height: min(300px, 35dvh);
  padding: 18px 22px;
  overflow-y: auto;
}

.private-empty {
  text-align: center;
  color: #80a3b9;
  margin-top: 55px;
  font-size: 13px;
}

.private-empty small {
  margin-top: 10px;
  font-size: 11px;
  display: block;
}

.private-message {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px;
  display: flex;
}

.private-message.mine {
  align-items: flex-end;
}

.private-message > small {
  color: #7a9aaf;
  margin: 0 5px 5px;
  font-size: 10px;
}

.private-message p {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: #e4f1fa;
  border: 1px solid #daebf7;
  border-radius: 4px 14px 14px;
  max-width: 90%;
  margin: 0;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.65;
}

.private-message.mine p {
  color: #2f715d;
  background: #dff4ed;
  border-color: #cce9e0;
  border-radius: 14px 4px 14px 14px;
}

.private-chat form {
  border-top: 1px solid #deedf5;
  padding: 16px 22px 20px;
}

.private-chat label {
  margin-bottom: 8px;
  font-size: 11px;
  display: block;
}

.private-chat textarea {
  resize: none;
  width: 100%;
  font: inherit;
  color: #245a7c;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #bddbeb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  display: block;
}

.private-chat textarea:focus {
  outline-offset: 1px;
  outline: 2px solid #86c7e9;
}

.private-send {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  display: flex;
}

.private-send small {
  color: #7a9aae;
  font-size: 10px;
  line-height: 1.7;
}

.private-error {
  color: #b65040;
  padding: 0 22px 14px;
  font-size: 12px;
  line-height: 1.6;
}

.private-notice {
  z-index: 45;
  color: #347598;
  pointer-events: none;
  background: #f5fcfff2;
  border: 1px solid #fff;
  border-radius: 12px;
  width: max-content;
  max-width: 85%;
  padding: 10px 16px;
  font-size: 12px;
  position: absolute;
  bottom: 280px;
  left: 50%;
  transform: translateX(-50%);
}

.private-near {
  overflow-wrap: anywhere;
  background: #168bb4;
  max-width: calc(100% - 30px);
}

@media (max-width: 760px) {
  .private-shade {
    align-items: center;
    padding: 12px;
  }

  .private-chat {
    border-radius: 17px;
    max-height: calc(100dvh - 24px);
  }

  .private-chat header {
    padding: 16px;
  }

  .private-chat h2 {
    font-size: 16px;
  }

  .private-chat form {
    padding: 12px 16px 16px;
  }

  .private-chat textarea {
    font-size: 16px;
  }

  .private-messages {
    height: min(260px, 32dvh);
    padding: 16px;
  }

  .private-notice {
    bottom: 50dvh;
  }

  .private-invitation {
    padding: 22px 18px;
  }
}

.moderation-management {
  gap: 20px;
  display: grid;
}

.moderation-management h2 {
  margin: 0 0 18px;
  font-size: 18px;
}

.moderation-management > .management-notice {
  margin: 0;
}

.moderation-form {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  display: flex;
}

.moderation-management label {
  color: #537993;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  display: flex;
}

.moderation-management input:not([type="checkbox"]), .moderation-management select, .moderation-management textarea {
  font: inherit;
  color: #245477;
  background: #fbfdff;
  border: 1px solid #c8dce9;
  border-radius: 9px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
}

.moderation-management textarea {
  box-sizing: border-box;
  resize: vertical;
  width: 100%;
  line-height: 1.7;
}

.moderation-form label:first-child {
  flex: 1;
  min-width: 190px;
}

.moderation-form label {
  min-width: 120px;
}

.moderation-management .management-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.moderation-management .management-stats strong {
  font-size: 26px;
}

.moderation-batch {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 18px 0;
  display: flex;
}

.moderation-batch > span {
  color: #65849a;
  margin-right: auto;
  font-size: 12px;
}

.moderation-columns {
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  gap: 20px;
  display: grid;
}

.moderation-columns label {
  margin: 14px 0;
}

.moderation-columns .account-secondary {
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
}

.moderation-preview {
  color: #397598;
  overflow-wrap: anywhere;
  background: #edf7ff;
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.8;
}

.moderation-success {
  color: #287048;
  background: #e9f6ee;
  border-radius: 10px;
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
}

.moderation-management .admin-table td {
  overflow-wrap: anywhere;
  max-width: 300px;
}

.moderation-management .admin-table td:last-child {
  white-space: nowrap;
}

.moderation-file input {
  box-sizing: border-box;
  width: 100%;
}

.moderation-management button:disabled {
  opacity: .5;
  cursor: default;
}

@media (max-width: 900px) {
  .moderation-columns {
    grid-template-columns: 1fr;
  }

  .moderation-management .management-stats strong {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .moderation-management .management-stats {
    grid-template-columns: 1fr;
  }

  .moderation-form label {
    flex: 1;
    min-width: 130px;
  }

  .moderation-management input:not([type="checkbox"]), .moderation-management textarea, .moderation-management select {
    font-size: 16px;
  }

  .moderation-management {
    gap: 14px;
  }
}

.room-shade {
  z-index: 80;
}

.room-picker {
  color: #245a7c;
  background: #f8fcff;
  border: 1px solid #fff;
  border-radius: 22px;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 80px #24527440;
}

.room-picker header {
  background: #ecf7ff;
  border-bottom: 1px solid #dbeaf5;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  display: flex;
}

.room-picker h2 {
  margin: 6px 0 0;
  font-size: 20px;
}

.room-picker h2 span {
  color: #6e91aa;
  margin-left: 12px;
  font-size: 11px;
  font-weight: 400;
}

.room-picker header small {
  color: #6693b1;
  font-size: 11px;
}

.room-picker button {
  color: #2777a2;
  cursor: pointer;
  background: #fff;
  border: 1px solid #bddbec;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 12px;
}

.room-picker button:disabled {
  opacity: .5;
  cursor: default;
}

.room-body {
  overscroll-behavior: contain;
  padding: 18px 22px;
  overflow-y: auto;
}

.room-picker label {
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.room-picker input {
  box-sizing: border-box;
  min-width: 0;
  font: inherit;
  color: #245a7c;
  background: #fff;
  border: 1px solid #bfd9eb;
  border-radius: 9px;
  padding: 11px 12px;
  font-size: 15px;
}

.room-picker input:focus {
  outline-offset: 1px;
  outline: 2px solid #95ccec;
}

.room-search > div {
  gap: 9px;
  margin-top: 9px;
  display: flex;
}

.room-search input {
  flex: 1;
}

.room-help {
  color: #7695aa;
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.8;
}

.room-row {
  background: #fff;
  border: 1px solid #deebf4;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  padding: 14px 12px;
  display: flex;
}

.room-row.current {
  background: #effaf5;
  border-color: #9dd1c4;
}

.room-row strong {
  font-size: 14px;
}

.room-row small {
  color: #7296ad;
  margin-top: 5px;
  font-size: 10px;
  display: block;
}

.room-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 270px;
  display: flex;
}

.room-actions button {
  padding: 7px 10px;
  font-size: 11px;
}

.room-picker .room-create {
  background: #e9f5fe;
  border-style: dashed;
  width: 100%;
  margin-top: 7px;
}

.room-entry {
  background: #edf6fe;
  border: 1px solid #d1e6f6;
  border-radius: 12px;
  margin-top: 15px;
  padding: 17px;
}

.room-entry h3 {
  margin: 0 0 13px;
  font-size: 15px;
}

.room-entry input {
  width: 100%;
  margin-top: 8px;
  display: block;
}

.room-entry > div {
  gap: 10px;
  display: flex;
}

.room-entry button:first-child {
  color: #fff;
  background: #168dcc;
  border-color: #168dcc;
}

.room-pagination {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  display: flex;
}

.room-picker .private-error {
  margin: 8px 0;
  padding: 0;
}

.town-online-status {
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .room-picker header {
    padding: 16px;
  }

  .room-picker h2 {
    font-size: 18px;
  }

  .room-body {
    padding: 15px;
  }

  .room-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .room-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .room-picker input {
    font-size: 16px;
  }

  .room-entry {
    padding: 13px;
  }

  .room-picker h2 span {
    margin: 7px 0 0;
    display: block;
  }

  .room-picker {
    border-radius: 17px;
  }
}

.room-members {
  background: #edf6fe;
  border: 1px solid #d1e6f6;
  border-radius: 12px;
  margin-top: 16px;
  padding: 15px;
}

.room-members-heading, .room-member {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.room-members h3 {
  margin: 0;
  font-size: 15px;
}

.room-member {
  border-top: 1px solid #d1e6f6;
  padding: 11px 0;
}

.room-member > span {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 13px;
}

.room-member small {
  color: #368778;
  margin-top: 4px;
  font-size: 11px;
  display: block;
}

.room-member button {
  color: #b16536;
  border-color: #efd6bd;
  flex-shrink: 0;
}

.room-kick-confirm {
  overflow-wrap: anywhere;
  background: #fff8ef;
  border: 1px solid #efd6bd;
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.7;
}

.room-kick-confirm > div {
  gap: 8px;
  display: flex;
}

.room-kick-confirm p {
  margin: 0 0 10px;
}

/* [project]/app/account.css [app-client] (css) */
.account-page {
  color: #224d68;
  background: radial-gradient(at 90% 0, #d6f2ff, #0000 50%), #f1f7fa;
  height: 100dvh;
  padding: 0 5vw;
  overflow: auto;
}

.account-page a {
  color: #157bad;
  text-decoration: none;
}

.account-page a:hover {
  text-decoration: underline;
}

.account-page-header {
  border-bottom: 1px solid #c9deea;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  max-width: 1180px;
  margin: auto;
  padding: 27px 0;
  font-size: 12px;
  display: flex;
}

.account-brand {
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
}

.account-brand b {
  letter-spacing: -2px;
  font-size: 30px;
}

.account-page-header nav {
  gap: 20px;
  display: flex;
}

.account-page-body {
  max-width: 1120px;
  min-height: 60vh;
  margin: 42px auto 60px;
}

.account-eyebrow {
  letter-spacing: 2px;
  color: #61899f;
  margin: 0 0 13px;
  font-size: 11px;
}

.account-page h1 {
  letter-spacing: 1px;
  margin: 0 0 13px;
  font-size: 33px;
}

.account-intro {
  color: #68889b;
  margin-bottom: 32px;
  font-size: 13px;
  line-height: 1.8;
}

.account-panel {
  background: #ffffffde;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 32px #19405c08;
}

.account-panel h2 {
  margin: 0 0 18px;
  font-size: 19px;
}

.account-panel h3 {
  margin-top: 26px;
  font-size: 15px;
}

.account-login-panel {
  max-width: 500px;
}

.account-signin {
  margin-top: 20px;
}

.account-signin label, .account-panel form > label, .admin-account-action label {
  margin: 17px 0 8px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.account-signin input, .account-panel input, .account-panel select {
  font: inherit;
  color: #275775;
  outline-offset: 2px;
  background: #fff;
  border: 1px solid #c0d8e6;
  border-radius: 9px;
  min-width: 0;
  padding: 12px;
  font-size: 14px;
}

.account-signin input:focus, .account-panel input:focus {
  outline: 2px solid #5fb1db;
}

.account-signin input:disabled {
  background: #f0f5f8;
}

.account-phone {
  background: #fff;
  border: 1px solid #c0d8e6;
  border-radius: 9px;
  align-items: center;
  display: flex;
}

.account-phone > span {
  border-right: 1px solid #d7e5ed;
  padding: 0 13px;
  font-size: 12px;
}

.account-phone input {
  background: none;
  border: 0;
  flex: 1;
}

.account-code {
  gap: 9px;
  display: flex;
}

.account-code input {
  flex: 1;
  width: 50%;
}

.account-code > button {
  color: #2279a8;
  white-space: nowrap;
  background: #e8f4fb;
  border: 1px solid #b4d3e4;
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 12px;
}

.account-primary, .account-secondary, .account-danger {
  border: 0;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.account-primary {
  color: #fff;
  background: #0786ce;
}

.account-primary:hover {
  background: #0877ba;
}

.account-secondary {
  color: #326b8c;
  background: #eaf3f9;
}

.account-danger {
  color: #fff;
  background: #b85855;
}

.account-signin > .account-primary {
  width: 100%;
  margin-top: 20px;
}

.account-help {
  color: #7892a2;
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.8;
}

.account-error {
  color: #a34540;
  background: #fff0ed;
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.7;
}

.account-local-note {
  color: #83703c;
  background: #f5f1df;
  border: 1px solid #e6dcba;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 11px;
  line-height: 1.7;
}

.account-local-note strong {
  margin-bottom: 2px;
  font-size: 12px;
  display: block;
}

.account-local-note span {
  display: block;
}

.account-test-code {
  color: #467554;
  background: #edf7ee;
  border: 1px dashed #96bca1;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  font-size: 11px;
  display: flex;
}

.account-test-code strong {
  letter-spacing: 3px;
  margin-top: 5px;
  font-size: 18px;
  display: block;
}

.account-test-code button {
  color: #397550;
  background: #fff;
  border: 1px solid #bbd9c6;
  border-radius: 7px;
  padding: 9px;
  font-size: 11px;
}

.account-signin button:disabled, .account-panel button:disabled {
  cursor: not-allowed;
}

.resident-grid {
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
  gap: 24px;
  display: grid;
}

.resident-summary {
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
  display: flex;
}

.resident-summary h2 {
  margin: 0 0 10px;
}

.resident-avatar {
  color: #fff;
  border-radius: 17px;
  flex-shrink: 0;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 30px;
  display: inline-grid;
  box-shadow: inset 0 1px 1px #ffffff45;
}

.resident-badge {
  color: #298266;
  background: #e6f4ee;
  border-radius: 5px;
  margin-right: 7px;
  padding: 4px 8px;
  font-size: 10px;
}

.admin-badge {
  color: #4675a6;
  background: #e7effb;
}

.resident-grid form > input {
  width: 100%;
}

.avatar-options {
  border: 0;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 16px;
  padding: 0;
  display: flex;
}

.avatar-options legend {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
}

.avatar-options button {
  color: #5f8196;
  background: #f3f8fa;
  border: 2px solid #0000;
  border-radius: 12px;
  padding: 7px;
}

.avatar-options button.selected {
  background: #e0f1fb;
  border-color: #0b8ccc;
}

.avatar-options .resident-avatar {
  border-radius: 11px;
  width: 44px;
  height: 44px;
  font-size: 24px;
}

.avatar-options small {
  margin-top: 6px;
  font-size: 10px;
  display: block;
}

.account-notice {
  color: #278468;
  min-height: 18px;
  font-size: 12px;
}

.resident-side {
  gap: 22px;
  display: grid;
}

.account-panel dl {
  grid-template-columns: 100px 1fr;
  gap: 15px;
  margin: 20px 0 24px;
  font-size: 12px;
  line-height: 1.8;
  display: grid;
}

.account-panel dt {
  color: #7691a1;
}

.account-panel dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.account-admin-link {
  margin-top: 17px;
  font-size: 12px;
  display: block;
}

.resident-next p {
  color: #7190a1;
  font-size: 12px;
  line-height: 1.9;
}

.resident-next a {
  font-size: 12px;
}

.account-page-footer {
  text-align: center;
  color: #7190a1;
  letter-spacing: .5px;
  padding: 20px 0 28px;
  font-size: 11px;
}

.welcome-secondary[href] {
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.welcome-signed-in {
  margin: 22px 0;
  font-size: 13px;
  line-height: 1.8;
}

.welcome-signed-in a {
  color: #0b86bc;
}

.welcome-account-guest {
  margin-top: 18px;
}

.welcome-card .account-signin {
  margin-top: 17px;
}

.welcome-card .account-local-note {
  font-size: 10px;
}

.town-account-link {
  z-index: 40;
  color: #19759e;
  background: #f0fbfff0;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 11px;
  text-decoration: none;
  position: absolute;
  top: 91px;
  right: 145px;
}

.is-walking .town-account-link {
  top: 141px;
}

.admin-toolbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 12px;
  display: flex;
}

.admin-toolbar button, .admin-table button, .admin-pagination button {
  color: #3180a8;
  background: #f4fbff;
  border: 1px solid #c5dfea;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 11px;
}

.admin-filters {
  gap: 10px;
  margin-bottom: 23px;
  display: flex;
}

.admin-filters input {
  flex: 1;
}

.admin-filters .account-primary {
  min-height: 40px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
  font-size: 12px;
}

.admin-table th {
  text-align: left;
  color: #7a95a4;
  border-bottom: 1px solid #d6e6ee;
  padding: 12px 10px;
  font-size: 11px;
  font-weight: 500;
}

.admin-table td {
  border-bottom: 1px solid #edf3f6;
  padding: 16px 10px;
}

.admin-user-name {
  align-items: center;
  gap: 9px;
  display: flex;
}

.admin-user-name .resident-avatar {
  border-radius: 9px;
  width: 33px;
  height: 33px;
  font-size: 19px;
}

.account-state {
  color: #369267;
  background: #e8f5ec;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10px;
}

.account-state.is-banned {
  color: #bd6a5b;
  background: #f9eae7;
}

.admin-pagination {
  color: #7892a3;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 11px;
  display: flex;
}

.admin-pagination > span {
  margin-right: auto;
}

.admin-empty {
  text-align: center;
  color: #7c98a7;
  padding: 25px;
  font-size: 13px;
}

.admin-detail {
  margin-top: 25px;
}

.admin-detail-heading {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.admin-detail-heading h2 {
  margin: 0;
}

.admin-account-action {
  background: #f9f8f4;
  border-radius: 12px;
  max-width: 500px;
  padding: 18px;
}

.admin-account-action label {
  margin-top: 0;
}

.admin-account-action input {
  width: 100%;
}

.admin-audit {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-audit li {
  border-top: 1px solid #e3eef4;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  font-size: 12px;
  display: flex;
}

.admin-audit small {
  color: #94a7b3;
  margin-top: 5px;
  font-size: 10px;
  display: block;
}

.admin-audit time {
  color: #7796a6;
  white-space: nowrap;
  font-size: 11px;
}

.sr-only {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@media (max-width: 760px) {
  .account-page {
    padding: 0 18px;
  }

  .account-page-header {
    align-items: flex-start;
    padding: 20px 0;
  }

  .account-brand {
    gap: 8px;
    font-size: 12px;
  }

  .account-brand b {
    font-size: 25px;
  }

  .account-page-header > a:last-child, .account-page-header nav {
    gap: 10px;
    font-size: 10px;
  }

  .account-page-body {
    margin: 30px auto 40px;
  }

  .account-page h1 {
    font-size: 27px;
  }

  .account-intro {
    font-size: 12px;
  }

  .account-panel {
    border-radius: 16px;
    padding: 22px 19px;
  }

  .resident-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .account-signin input, .account-panel input {
    font-size: 16px;
  }

  .account-help {
    font-size: 11px;
  }

  .town-account-link {
    padding: 9px 12px;
    font-size: 10px;
    top: 164px;
    right: 17px;
  }

  .is-walking .town-account-link {
    top: 246px;
    right: 17px;
  }

  .admin-filters {
    flex-wrap: wrap;
  }

  .admin-filters input {
    min-width: 160px;
  }

  .admin-filters select {
    width: 100%;
  }

  .admin-audit li {
    flex-direction: column;
    gap: 5px;
  }

  .admin-pagination {
    font-size: 10px;
  }

  .admin-pagination button {
    padding: 8px;
  }

  .account-panel dl {
    grid-template-columns: 85px 1fr;
  }

  .account-page-header nav {
    flex-direction: column;
    align-items: flex-end;
  }

  .account-test-code {
    padding: 10px;
    font-size: 10px;
  }

  .account-code > button {
    padding: 10px;
    font-size: 11px;
  }
}

.character-editor {
  border-top: 1px solid #dfebe9;
  margin: 24px 0;
  padding-top: 22px;
}

.character-editor-heading h3 {
  color: #225d73;
  margin: 0;
  font-size: 17px;
}

.character-editor-heading p {
  color: #6d8a91;
  margin: 8px 0 16px;
  font-size: 12px;
}

.character-editor-layout {
  grid-template-columns: minmax(150px, .85fr) minmax(220px, 1.15fr);
  gap: 22px;
  display: grid;
}

.character-preview {
  background: #eef6f4;
  border: 1px solid #e0eeea;
  border-radius: 18px;
  place-items: center;
  height: 280px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.character-preview > div {
  width: 100%;
  height: 100%;
}

.character-preview > span {
  text-align: center;
  color: #77998c;
  pointer-events: none;
  font-size: 10px;
  position: absolute;
  bottom: 13px;
  left: 0;
  right: 0;
}

.character-options fieldset {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}

.character-options legend {
  color: #35677b;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
}

.character-options legend span {
  color: #88a0a5;
  margin-left: 12px;
  font-size: 11px;
  font-weight: 400;
}

.hair-style-options {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  display: grid;
}

.hair-style-options button {
  color: #668592;
  background: #f6fafb;
  border: 1px solid #deeaed;
  border-radius: 8px;
  min-height: 36px;
  padding: 6px;
  font-size: 11px;
}

.hair-style-options button[aria-pressed="true"] {
  color: #187dad;
  background: #e7f6fc;
  border-color: #85c5df;
}

.character-color-options {
  flex-wrap: wrap;
  gap: 9px;
  display: flex;
}

.character-color-options button {
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  display: grid;
  box-shadow: 0 0 0 1px #dbe6e9;
}

.character-color-options button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #158fc1;
}

.character-color-options button span {
  color: #214b62;
  background: #ffffffce;
  border-radius: 50%;
  width: 14px;
  font-size: 11px;
  line-height: 14px;
}

.character-color-options button span:empty {
  display: none;
}

.character-preview-fallback {
  color: #668592;
  padding: 20px;
  font-size: 12px;
}

.character-name {
  white-space: nowrap;
  color: #247247;
  pointer-events: none;
  background: #edf9f2eb;
  border: 1px solid #ffffffc9;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  font: 600 11px Arial, Microsoft YaHei, sans-serif;
  display: flex;
  box-shadow: 0 2px 6px #28453515;
}

.character-name small {
  color: #30845a;
  background: #ccefd9;
  border-radius: 4px;
  padding: 2px 3px;
  font-size: 8px;
}

.character-name.is-npc {
  color: #376f90;
  background: #f0f8fff0;
}

.character-name.is-npc small {
  color: #61829b;
  background: #dcecf7;
}

.character-name span {
  text-overflow: ellipsis;
  max-width: 160px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .character-editor-layout {
    grid-template-columns: 1fr;
  }

  .character-preview {
    height: 250px;
  }

  .character-color-options button {
    width: 34px;
    height: 34px;
  }

  .hair-style-options {
    grid-template-columns: repeat(3, 1fr);
  }

  .character-name {
    font-size: 10px;
  }

  .character-name span {
    max-width: 120px;
  }
}

.service-batch-actions {
  background: #f0f8fc;
  border: 1px solid #d5e7ef;
  border-radius: 16px;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  padding: 18px;
  display: flex;
}

.service-batch-actions label {
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.service-batch-actions select, .service-batch-actions textarea {
  color: #254a61;
  font: inherit;
  background: #fff;
  border: 1px solid #bdd6e1;
  border-radius: 9px;
  max-width: 100%;
  padding: 10px;
}

.service-batch-reason {
  flex: 1;
  min-width: 200px;
}

.service-batch-results {
  overflow-wrap: anywhere;
  background: #eff8f3;
  border-radius: 12px;
  margin: 14px 0;
  padding: 16px;
}

.service-batch-results ul {
  margin-bottom: 0;
  padding-left: 22px;
}

.service-row-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.admin-table input[type="checkbox"] {
  accent-color: #248cba;
  width: 18px;
  height: 18px;
}

.service-batch-actions button {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .service-batch-actions > label, .service-batch-actions > button {
    width: 100%;
  }

  .service-batch-reason {
    min-width: 0;
  }
}

/* [project]/app/management.css [app-client] (css) */
.management-app {
  --mg-blue: #087fc2;
  --mg-ink: #244d67;
  --mg-muted: #7892a3;
  --mg-line: #dfe9ef;
  height: 100dvh;
  color: var(--mg-ink);
  background: #f3f7fa;
  grid-template-columns: 236px minmax(0, 1fr);
  font-size: 13px;
  display: grid;
}

.management-app a {
  color: inherit;
  text-decoration: none;
}

.management-app button, .management-app a {
  outline-offset: 4px;
}

.management-app a:focus-visible, .management-app button:focus-visible {
  outline: 2px solid #288bc3;
}

.management-app button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.management-sidebar {
  border-right: 1px solid var(--mg-line);
  background: #fff;
  flex-direction: column;
  padding: 27px 16px 22px;
  display: flex;
  overflow-y: auto;
}

.management-brand {
  align-items: center;
  gap: 10px;
  margin: 0 5px 27px;
  display: flex;
}

.management-brand > b {
  background: var(--mg-blue);
  color: #fff;
  letter-spacing: -2px;
  border-radius: 12px;
  flex-shrink: 0;
  place-items: center;
  width: 45px;
  height: 45px;
  font-size: 23px;
  font-style: italic;
  font-weight: 900;
  display: grid;
}

.management-brand > span {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}

.management-brand small {
  letter-spacing: 1px;
  color: #8ba0ae;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 400;
  display: block;
}

.management-nav-group > p {
  letter-spacing: 1px;
  color: #94a8b4;
  margin: 17px 13px 7px;
  font-size: 10px;
}

.management-nav-group > a {
  color: #637f91;
  border-radius: 8px;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
  padding: 11px 12px;
  font-size: 12px;
  display: flex;
}

.management-nav-group > a:hover {
  background: #f3f8fb;
}

.management-nav-group > a.selected {
  color: #087fc2;
  background: #e8f4fc;
  font-weight: 650;
}

.management-nav-group > a > span {
  text-align: center;
  width: 17px;
  font-size: 17px;
  line-height: 1;
}

.management-nav-group > a > small {
  color: #9aaab6;
  margin-left: auto;
  font-size: 9px;
  font-weight: 400;
}

.management-sidebar-foot {
  color: #9aadb9;
  margin: auto 13px 0;
  padding-top: 26px;
  font-size: 10px;
  line-height: 1.9;
}

.management-main {
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.management-header {
  border-bottom: 1px solid var(--mg-line);
  background: #ffffffd9;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 78px;
  padding: 0 32px;
  display: flex;
}

.management-breadcrumb {
  color: #7892a3;
  font-size: 11px;
}

.management-breadcrumb > span {
  color: #b4c4cf;
  margin: 0 12px;
}

.management-account {
  align-items: center;
  gap: 20px;
  font-size: 11px;
  display: flex;
}

.management-account > a {
  align-items: center;
  gap: 10px;
  display: flex;
}

.management-account > a > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 145px;
  overflow: hidden;
}

.management-account .resident-avatar {
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 20px;
}

.management-account > button {
  color: #7194a8;
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: 11px;
}

.management-menu-toggle {
  display: none;
}

.management-content {
  scrollbar-gutter: stable;
  flex: 1;
  min-width: 0;
  padding: 32px 34px 0;
  overflow-y: auto;
}

.management-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
  display: flex;
}

.management-heading h1 {
  letter-spacing: .5px;
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.35;
}

.management-heading h1:focus {
  outline: none;
}

.management-heading > div > p:last-child {
  color: #7892a3;
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
}

.management-town-link {
  white-space: nowrap;
  background: #ffffff91;
  border: 1px solid #d6e6ef;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 11px;
  color: #4c819e !important;
}

.management-hero {
  background: linear-gradient(110deg, #e4f3fd, #eefaf8);
  border: 1px solid #cfe4ee;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 23px;
  padding: 27px 29px;
  display: flex;
}

.management-label {
  color: #368aab;
  background: #e5f3fa;
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 10px;
  display: inline-block;
}

.management-label.pending {
  color: #aa8746;
  background: #fbf2de;
}

.management-hero h2 {
  margin: 16px 0 12px;
  font-size: 22px;
}

.management-hero p {
  color: #688ca0;
  margin: 0 0 17px;
  font-size: 12px;
  line-height: 1.9;
}

.management-hero a {
  color: #2d80a9;
  background: #fff;
  border: 1px solid #d9e8ef;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 11px;
  display: inline-block;
}

.management-watermark {
  color: #148dbc1f;
  letter-spacing: -7px;
  flex-shrink: 0;
  font-size: 80px;
  font-weight: 850;
}

.management-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  display: grid;
}

.management-stats > section {
  border: 1px solid var(--mg-line);
  background: #fff;
  border-radius: 12px;
  padding: 21px;
}

.management-stats p {
  color: #6e8b9e;
  margin: 0;
  font-size: 12px;
}

.management-stats strong {
  color: #347a9f;
  margin: 14px 0 9px;
  font-size: 30px;
  line-height: 1;
  display: block;
}

.management-stats small {
  color: #97acb9;
  font-size: 10px;
}

.management-columns {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px;
  display: grid;
}

.management-card {
  border: 1px solid var(--mg-line);
  background: #fff;
  border-radius: 13px;
  min-width: 0;
  margin-bottom: 23px;
  padding: 24px;
}

.management-card h2, .management-card-heading h2 {
  margin: 0;
  font-size: 17px;
}

.management-card-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.management-card-heading > a {
  color: #4384a8;
  font-size: 11px;
}

.management-feature-icon {
  color: #4294bb;
  background: #eaf5fc;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 19px;
  display: inline-grid;
}

.management-work-row {
  border-bottom: 1px solid #edf2f6;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  display: flex;
}

.management-work-row > div {
  flex: 1;
}

.management-work-row h3 {
  margin: 0 0 7px;
  font-size: 13px;
}

.management-work-row p {
  color: #8099a8;
  margin: 0;
  font-size: 11px;
  line-height: 1.8;
}

.management-work-row > span:last-child {
  color: #6c9cb5;
}

.management-notice {
  color: #66899e;
  background: #f2f8fc;
  border-left: 3px solid #91c6df;
  margin-top: 19px;
  padding: 13px 16px;
  font-size: 11px;
  line-height: 1.9;
}

.management-empty {
  color: #88a0af;
  text-align: center;
  background: #f8fbfd;
  border: 1px dashed #d9e7ef;
  border-radius: 9px;
  padding: 28px 14px;
  font-size: 12px;
}

.management-log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.management-log li {
  border-bottom: 1px solid #edf2f6;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 0;
  display: flex;
}

.management-log li:last-child {
  border-bottom: 0;
}

.management-log-dot {
  background: #89bcd4;
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 6px;
}

.management-log li > div {
  flex: 1;
  min-width: 0;
}

.management-log strong {
  font-size: 12px;
  font-weight: 500;
}

.management-log time {
  color: #97aab7;
  margin-top: 8px;
  font-size: 10px;
  display: block;
}

.management-log p {
  color: #708fa1;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.management-log li > span:last-child {
  color: #8ca6b5;
  white-space: nowrap;
  font-size: 10px;
}

.management-districts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  display: grid;
}

.management-districts > a {
  border: 1px solid var(--mg-line);
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  transition: border-color .15s;
  display: block;
}

.management-districts > a:hover {
  border-color: #79b9da;
}

.management-districts .management-label {
  float: right;
  font-size: 9px;
}

.management-districts h3 {
  margin: 17px 0 10px;
  font-size: 14px;
}

.management-districts p {
  color: #7f99a8;
  margin: 0 0 15px;
  font-size: 11px;
  line-height: 1.9;
}

.management-districts small {
  color: #3f8db4;
  font-size: 10px;
}

.management-footer {
  color: #96aab7;
  text-align: center;
  padding: 32px 0 23px;
  font-size: 10px;
}

.management-pending {
  max-width: 920px;
}

.management-pending > .management-label {
  margin-left: 12px;
}

.management-pending h2 {
  margin: 23px 0 13px;
  font-size: 22px;
}

.management-pending > p {
  color: #7191a4;
  font-size: 12px;
  line-height: 1.9;
}

.management-module-tabs {
  color: #819cac;
  border-bottom: 1px solid #e1ebf1;
  gap: 16px;
  margin: 28px 0 18px;
  padding-bottom: 15px;
  font-size: 12px;
  display: flex;
}

.management-residents .account-panel {
  border: 1px solid var(--mg-line);
  box-shadow: none;
  border-radius: 13px;
}

.management-residents {
  min-width: 0;
}

.management-residents .admin-filters > input {
  width: 0;
}

.management-residents .admin-detail-heading h2 {
  font-size: 19px;
}

@media (min-width: 1600px) {
  .management-content {
    padding-left: 48px;
    padding-right: 48px;
  }

  .management-columns {
    grid-template-columns: 1.3fr 1fr;
  }

  .management-districts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .management-app {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .management-brand {
    gap: 8px;
  }

  .management-brand > span {
    font-size: 11px;
  }

  .management-content {
    padding: 27px 22px 0;
  }

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

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

  .management-header {
    padding: 0 22px;
  }
}

@media (max-width: 760px) {
  .management-app {
    display: block;
    position: relative;
  }

  .management-main {
    height: 100%;
  }

  .management-sidebar {
    z-index: 100;
    width: min(300px, 90vw);
    padding: 20px 16px;
    display: none;
    position: absolute;
    top: 65px;
    bottom: 0;
    left: 0;
    box-shadow: 10px 0 35px #173d5c24;
  }

  .management-sidebar.is-open {
    display: flex;
  }

  .management-brand {
    margin-bottom: 15px;
  }

  .management-brand > span {
    font-size: 13px;
  }

  .management-menu-toggle {
    color: #367fa7;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #d7e6ee;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 11px;
    display: block;
  }

  .management-header {
    gap: 10px;
    height: 65px;
    padding: 0 17px;
  }

  .management-account {
    gap: 10px;
    margin-left: auto;
  }

  .management-account > a > span:last-child {
    display: none;
  }

  .management-breadcrumb {
    font-size: 10px;
  }

  .management-breadcrumb > span {
    margin: 0 5px;
  }

  .management-content {
    padding: 25px 17px 0;
  }

  .management-heading h1 {
    font-size: 24px;
  }

  .management-heading {
    gap: 8px;
    margin-bottom: 21px;
  }

  .management-town-link {
    padding: 7px 9px;
    font-size: 10px;
  }

  .management-heading > div > p:last-child {
    font-size: 11px;
  }

  .management-hero {
    padding: 22px;
  }

  .management-hero h2 {
    font-size: 19px;
    line-height: 1.6;
  }

  .management-watermark {
    display: none;
  }

  .management-stats {
    gap: 11px;
  }

  .management-stats > section {
    padding: 17px;
  }

  .management-card {
    padding: 20px;
  }

  .management-districts {
    gap: 11px;
  }

  .management-districts > a {
    padding: 16px;
  }

  .management-districts .management-label {
    float: none;
    width: fit-content;
    margin-top: 10px;
    display: block;
  }

  .management-log li > span:last-child {
    display: none;
  }

  .management-card-heading {
    gap: 8px;
  }

  .management-card-heading h2 {
    font-size: 15px;
  }

  .management-card-heading .account-help {
    text-align: right;
    max-width: 135px;
    font-size: 10px;
  }

  .management-residents .admin-filters > input {
    width: auto;
  }

  .management-residents .admin-detail-heading {
    align-items: flex-start;
  }

  .management-residents .admin-detail-heading h2 {
    overflow-wrap: anywhere;
  }

  .management-residents .account-panel {
    padding: 20px 16px;
  }

  .management-account > button {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .management-districts > a {
    transition: none;
  }
}

/* [project]/app/system.css [app-client] (css) */
.system-app {
  --mg-blue: #3469b1;
}

.system-app .management-brand > b {
  background: #3469b1;
}

.system-app .management-hero {
  background: linear-gradient(110deg, #e8f0fc, #edf7fb);
}

.system-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-panel {
  box-shadow: none;
  border: 1px solid #dfe9ef;
  border-radius: 13px;
  margin-bottom: 24px;
}

.system-panel form > input {
  width: 100%;
}

.system-panel .admin-filters > input {
  width: 0;
}

.system-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 21px;
  display: flex;
}

.system-actions > a.account-primary {
  color: #fff;
}

.system-notice {
  color: #2e8062;
  background: #edf8f1;
  border: 1px solid #bde0cf;
  border-radius: 9px;
  padding: 14px 18px;
  font-size: 12px;
}

.system-audit-detail {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 350px;
  line-height: 1.8;
}

.system-panel .system-settings {
  margin: 20px 0;
  display: block;
}

.system-settings > div {
  border-bottom: 1px solid #e7eef3;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 17px 0;
  display: grid;
}

.system-settings dd {
  margin: 0;
}

.system-panel .management-card-heading {
  align-items: flex-start;
}

.system-panel .management-card-heading > select {
  max-width: 180px;
}

@media (max-width: 760px) {
  .system-stats {
    grid-template-columns: 1fr;
  }

  .system-panel {
    padding: 20px 16px;
  }

  .system-panel .admin-filters > input {
    width: auto;
  }

  .system-settings > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .system-panel .management-card-heading {
    flex-wrap: wrap;
  }
}

/* [project]/app/site.css [app-client] (css) */
.site-brand {
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.25;
  display: inline-flex;
}

.site-brand-mark {
  flex-shrink: 0;
  font-weight: 800;
}

.site-brand-mark img {
  object-fit: contain;
  max-width: 130px;
  height: 42px;
  display: block;
}

.site-brand-text {
  overflow-wrap: anywhere;
  white-space: normal;
  font-weight: 700;
}

.welcome-wordmark > .site-brand {
  font-size: inherit;
  border: 0;
  margin: 0;
  padding: 0;
}

.welcome-wordmark {
  white-space: normal;
  max-width: min(100%, 900px);
}

.town-brand-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.site-footer {
  overflow-wrap: anywhere;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.65;
  display: flex;
}

.site-footer .site-company {
  font-weight: 600;
}

.site-records {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  display: flex;
}

.site-footer a {
  color: inherit;
  pointer-events: auto;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer a:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #1675bc;
}

.site-footer.company-credit {
  pointer-events: auto;
  max-width: calc(100% - 24px);
  margin: auto;
}

.is-walking .site-footer.company-credit {
  width: calc(100% - 24px);
  padding: 0 6px;
}

.town-app .interaction-hint {
  bottom: calc(var(--site-footer-height, 20px) + 22px);
}

.town-app .walk-destinations {
  bottom: calc(var(--site-footer-height, 20px) + 20px);
}

.town-app .nearby-talk {
  bottom: calc(var(--site-footer-height, 20px) + 90px);
}

.town-app .joystick {
  bottom: calc(var(--site-footer-height, 20px) + 100px);
}

.town-app .player-chat {
  bottom: calc(var(--site-footer-height, 20px) + 150px);
}

.town-app .seat-notice {
  bottom: calc(var(--site-footer-height, 20px) + 128px);
}

.town-app .first-person-speech {
  bottom: calc(var(--site-footer-height, 20px) + 185px);
}

.site-editor-tabs {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  display: flex;
}

.site-editor-tabs button {
  color: #46677e;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cedfea;
  border-radius: 8px;
  padding: 10px 16px;
}

.site-editor-tabs button[aria-pressed="true"] {
  color: #245c9e;
  background: #e8f1fc;
  border-color: #6594ca;
}

.site-editor-tabs button:disabled {
  opacity: .6;
  cursor: wait;
}

.site-fields {
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  min-width: 0;
  margin: 25px 0;
  padding: 0;
  display: grid;
}

.site-field {
  min-width: 0;
}

.site-field label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.site-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.site-field small {
  color: #718995;
  margin: 6px 0;
  font-size: 11px;
  display: block;
}

.site-image-field {
  background: #f7fbff;
  border: 1px solid #e0e9ee;
  border-radius: 10px;
  padding: 16px;
}

.site-upload-preview {
  color: #6d879a;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  height: 90px;
  margin: 10px 0;
  font-size: 12px;
  display: flex;
}

.site-upload-preview img {
  object-fit: contain;
  max-width: 100%;
  max-height: 90px;
}

.site-field input[type="file"] {
  padding: 10px 0;
  font-size: 12px;
}

.site-preview {
  color: #295470;
  border: 1px solid #cddde8;
  border-radius: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transition: max-width .15s;
  overflow: hidden;
}

.site-preview.is-mobile {
  max-width: 390px;
}

.site-preview-tab {
  overflow-wrap: anywhere;
  background: #edf2f6;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 12px;
  display: flex;
}

.site-preview-tab img {
  object-fit: contain;
  width: 18px;
  height: 18px;
}

.site-preview-body {
  background: linear-gradient(135deg, #f0faff, #d3eafa);
  padding: 24px;
}

.site-preview .site-brand {
  font-size: 24px;
}

.site-preview p {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.9;
}

.site-preview .site-preview-town {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 700;
}

.site-preview .site-footer {
  border-top: 1px solid #b9d2e1;
  margin-top: 34px;
  padding-top: 20px;
  font-size: 12px;
}

.site-share-preview {
  object-fit: contain;
  max-width: 100%;
  max-height: 180px;
  margin: 15px auto;
  display: block;
}

.site-history details {
  border-top: 1px solid #e1eaf0;
  padding: 14px 0;
  font-size: 12px;
}

.site-history summary {
  cursor: pointer;
  line-height: 1.8;
}

.site-history dl > div {
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 8px;
  display: grid;
}

.site-history dd {
  overflow-wrap: anywhere;
  color: #527088;
  margin: 0;
}

.site-history dt {
  font-weight: 600;
}

@media (max-width: 760px) {
  .site-brand {
    gap: 9px;
  }

  .site-brand-mark img {
    max-width: 80px;
    height: 32px;
  }

  .site-brand-text {
    font-size: clamp(17px, 5vw, 24px);
  }

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

  .site-preview-body {
    padding: 17px;
  }

  .site-history dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .town-app .joystick {
    bottom: calc(var(--site-footer-height, 20px) + 145px);
  }

  .town-app .nearby-talk {
    bottom: calc(var(--site-footer-height, 20px) + 160px);
  }

  .town-app .seat-notice {
    bottom: calc(var(--site-footer-height, 20px) + 195px);
  }

  .town-app .player-chat {
    bottom: calc(var(--site-footer-height, 20px) + 227px);
  }

  .town-app .player-chat.editing {
    bottom: calc(var(--site-footer-height, 20px) + 131px);
  }

  .town-app .first-person-speech {
    bottom: calc(var(--site-footer-height, 20px) + 310px);
  }

  .welcome-footer.site-footer {
    font-size: 10px;
  }

  .welcome-footer.site-footer > .site-company {
    font-size: 12px;
  }

  .site-editor .management-card-heading {
    gap: 12px;
  }
}

/* [project]/app/service.css [app-client] (css) */
.service-page {
  color: #254d66;
  background: radial-gradient(at 90% 0, #d7effb, #0000 46%), #f3f8fb;
  height: 100dvh;
  font-size: 14px;
  overflow: auto;
}

.service-page a {
  color: #147aaa;
  text-decoration: none;
}

.service-page a:hover {
  text-decoration: underline;
}

.service-header {
  border-bottom: 1px solid #d3e3ed;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  margin: auto;
  padding: 26px 30px;
  display: flex;
}

.service-header .site-brand {
  font-size: 21px;
}

.service-header nav {
  flex-wrap: wrap;
  gap: 23px;
  font-size: 12px;
  display: flex;
}

.service-main {
  max-width: 1240px;
  min-height: 75vh;
  margin: auto;
  padding: 36px 30px 60px;
}

.service-main > h1 {
  font-size: 32px;
}

.service-footer {
  color: #7792a4;
  padding: 20px 20px 30px;
  font-size: 11px;
}

.service-hero {
  background: linear-gradient(110deg, #e8f5fd, #deeff5);
  border: 1px solid #fff;
  border-radius: 22px;
  grid-template-columns: 1fr 300px;
  align-items: center;
  gap: 40px;
  margin-bottom: 38px;
  padding: 40px 46px;
  display: grid;
  overflow: hidden;
}

.service-eyebrow {
  letter-spacing: 2.6px;
  color: #648fa8;
  font-size: 10px;
  font-weight: 600;
}

.service-hero h1 {
  letter-spacing: 1px;
  margin: 14px 0 17px;
  font-size: 38px;
}

.service-hero p {
  color: #52788f;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 650px;
  line-height: 1.9;
}

.service-hero-actions {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  font-size: 12px;
  display: flex;
}

.service-hero-actions a:first-child {
  color: #fff;
  background: #1685bf;
  border-radius: 9px;
  padding: 13px 19px;
}

.service-hero-actions a:last-child {
  padding: 13px 5px;
}

.service-house {
  background: #dbedf5;
  border: 7px solid #fff;
  border-radius: 6px;
  justify-content: space-around;
  justify-self: center;
  align-items: flex-end;
  width: 210px;
  height: 130px;
  padding-bottom: 15px;
  display: flex;
  position: relative;
  transform: skewY(-5deg);
  box-shadow: 15px 15px #bfd9e7;
}

.service-house > span {
  color: #fff;
  text-align: center;
  letter-spacing: 3px;
  background: #438eb6;
  border: 4px solid #e5f4fb;
  padding: 9px;
  font-size: 20px;
  font-weight: 800;
  position: absolute;
  top: -39px;
  left: 18px;
  right: 18px;
}

.service-house i {
  background: linear-gradient(0deg, #0000 47%, #d0edfa 47% 53%, #0000 53%), linear-gradient(90deg, #368abb 45%, #d0edfa 45% 55%, #368abb 55%);
  border: 4px solid #fff;
  width: 39px;
  height: 65px;
  display: block;
}

.service-house b {
  text-align: center;
  letter-spacing: 3px;
  color: #467b98;
  font-size: 11px;
  position: absolute;
  bottom: -35px;
  left: 0;
  right: 0;
}

.service-board-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 28px;
  display: grid;
}

.service-section-heading {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  display: flex;
}

.service-section-heading h2 {
  margin: 5px 0 0;
  font-size: 22px;
}

.service-section-heading > span {
  color: #7a96a5;
  white-space: nowrap;
  font-size: 11px;
}

.service-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
  display: flex;
}

.service-filters label {
  flex: 1;
  min-width: 120px;
}

.service-filters > input {
  flex: 1;
  min-width: 140px;
}

.service-page input:not([type="checkbox"]), .service-page select, .service-page textarea, .service-management input:not([type="checkbox"]), .service-management select, .service-management textarea, .service-panel input:not([type="checkbox"]), .service-panel select, .service-panel textarea {
  font: inherit;
  color: #315974;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #c6dbe8;
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  font-size: 13px;
}

.service-page input:focus, .service-page select:focus, .service-page textarea:focus, .service-panel input:focus, .service-panel textarea:focus, .service-panel select:focus {
  outline-offset: 2px;
  outline: 2px solid #77b1d2;
}

.service-filters > select {
  width: auto;
}

.service-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.service-title-card {
  background: #fff;
  border: 1px solid #d9e6ed;
  border-radius: 15px;
  flex-direction: column;
  min-width: 0;
  padding: 25px;
  display: flex;
}

.service-title-card h3 {
  overflow-wrap: anywhere;
  margin: 19px 0 9px;
  font-size: 19px;
}

.service-title-card p {
  color: #6d8797;
  overflow-wrap: anywhere;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.85;
}

.service-title-card > small {
  color: #7e98a8;
  margin-top: auto;
  font-size: 10px;
}

.service-card-top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.service-badge {
  border-radius: 14px;
  flex-shrink: 0;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 32px;
  display: inline-grid;
}

.service-tag {
  color: #537c97;
  background: #ecf4f9;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.6;
  display: inline-block;
}

.service-card-actions {
  border-top: 1px solid #e8eef2;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 15px;
  font-size: 12px;
  display: flex;
}

.service-card-actions button, .service-text-button {
  color: #558aa8;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 5px 0;
  font-size: 11px;
}

.service-guide {
  background: linear-gradient(150deg, #eff9ff, #e8f3f8);
  border: 1px solid #d0e3ee;
  border-radius: 18px;
  padding: 27px;
  position: sticky;
  top: 20px;
}

.service-guide h2 {
  margin: 15px 0;
  font-size: 19px;
  line-height: 1.6;
}

.service-guide p {
  color: #58778a;
  font-size: 13px;
  line-height: 1.9;
}

.service-guide > small {
  color: #8099a7;
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.6;
  display: block;
}

.service-guide .account-primary {
  color: #fff;
  font-size: 12px;
}

.service-guide-person {
  width: 70px;
  height: 85px;
  margin: 0 0 20px 10px;
  position: relative;
}

.service-guide-person span {
  color: #754f36;
  text-align: center;
  background: #f6d5a0;
  border-top: 7px solid #ddac63;
  border-radius: 8px;
  width: 34px;
  height: 33px;
  padding-top: 5px;
  font-size: 12px;
  display: block;
  position: absolute;
  top: 0;
  left: 18px;
}

.service-guide-person b {
  color: #fff;
  background: #448fb9;
  border-radius: 10px 10px 3px 3px;
  place-items: center;
  width: 55px;
  height: 42px;
  font-size: 12px;
  display: grid;
  position: absolute;
  top: 38px;
  left: 8px;
  box-shadow: -7px 7px 0 -2px #9ec7de, 7px 7px 0 -2px #9ec7de;
}

.service-empty {
  text-align: center;
  color: #728e9f;
  background: #ffffff9c;
  border: 1px dashed #c5dce9;
  border-radius: 15px;
  padding: 55px 25px;
}

.service-empty > span {
  color: #6eacd0;
  font-size: 34px;
}

.service-empty h3 {
  color: #49738f;
  font-size: 18px;
}

.service-empty p {
  font-size: 12px;
  line-height: 1.9;
}

.service-empty-inline, .service-muted {
  color: #7590a1;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.8;
}

.service-explain {
  border-top: 1px solid #d9e5ed;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 38px;
  padding: 25px 0;
  display: grid;
}

.service-explain h2 {
  font-size: 18px;
}

.service-explain p {
  color: #6c8799;
  font-size: 13px;
  line-height: 2;
}

.service-resource-link {
  background: #fff;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  margin: 10px 0;
  padding: 13px 16px;
  font-size: 13px;
  display: block;
}

.service-panel {
  background: #fff;
  border: 1px solid #dce7ee;
  border-radius: 16px;
  min-width: 0;
  margin-bottom: 24px;
  padding: 28px;
  font-size: 13px;
  line-height: 1.8;
}

.service-panel h2 {
  margin: 0 0 18px;
  font-size: 21px;
}

.service-panel h3 {
  font-size: 16px;
}

.service-panel > p {
  line-height: 1.9;
}

.service-back {
  margin-bottom: 24px;
  font-size: 12px;
  display: inline-block;
}

.service-apply-layout {
  grid-template-columns: 1fr 1.15fr;
  align-items: start;
  gap: 26px;
  display: grid;
}

.service-title-heading {
  align-items: center;
  gap: 18px;
  display: flex;
}

.service-title-heading h2 {
  margin: 8px 0 0;
}

.service-title-info > p {
  color: #6c8695;
  line-height: 1.9;
}

.service-title-info dl {
  border-top: 1px solid #e1eaf0;
  margin-top: 23px;
  font-size: 12px;
  display: block;
}

.service-title-info dl > div {
  border-bottom: 1px solid #e1eaf0;
  grid-template-columns: 80px 1fr;
  gap: 15px;
  padding: 14px 0;
  display: grid;
}

.service-title-info dd {
  margin: 0;
}

.service-title-info dt {
  color: #7d94a3;
}

.service-benefit {
  display: block;
}

.service-conditions {
  background: #f3f8fc;
  border-radius: 9px;
  margin-top: 22px;
  padding: 16px;
}

.service-conditions h3 {
  margin: 0 0 10px;
}

.service-prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.95;
}

.service-fields {
  border: 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin: 20px 0;
  padding: 0;
  display: flex;
}

.service-field, .service-fields > label {
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
}

.service-field label {
  font-weight: 600;
}

.service-field small {
  color: #7f96a4;
  font-size: 11px;
}

.service-checkboxes {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.service-check, .service-checkboxes label {
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.8;
  display: flex;
}

.service-check input, .service-checkboxes input {
  accent-color: #2589bb;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
}

.service-page button:disabled, .service-panel button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.service-page button:focus-visible, .service-panel button:focus-visible, .service-page a:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #238abe;
}

.service-status {
  white-space: nowrap;
  background: #eef3f7;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
}

.status-pending {
  color: #a0772b;
  background: #fff4dc;
}

.status-returned {
  color: #ab672e;
  background: #fff0e6;
}

.status-approved {
  color: #2e8a63;
  background: #e9f7ef;
}

.status-rejected, .status-withdrawn {
  color: #9a6865;
  background: #f7eded;
}

.service-application-list > a, .service-application-list > button {
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  border-top: 1px solid #e1eaf0;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  display: flex;
}

.service-application-list small {
  color: #879ba8;
  margin-top: 7px;
  font-size: 11px;
  display: block;
}

.service-application-list strong {
  font-size: 14px;
}

.service-mine-group {
  margin: 30px 0;
}

.service-mine-group h2 {
  font-size: 21px;
}

.is-inactive {
  opacity: .75;
}

.service-notice {
  border-top: 1px solid #e1eaf0;
  padding: 16px;
  font-size: 12px;
}

.service-notice.unread {
  background: #f0f8fc;
}

.service-notice small {
  color: #7893a5;
}

.service-notice > div {
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  display: flex;
}

.service-notice button, .service-withdraw button, .service-field-actions button {
  color: #4e7d99;
  background: #edf4f8;
  border: 1px solid #d0e0eb;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11px;
}

.service-withdraw {
  border-top: 1px solid #dfebf1;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
}

.service-withdraw p {
  width: 100%;
}

.service-timeline-item {
  border-left: 2px solid #bcd9e9;
  margin-left: 4px;
  padding: 0 0 22px 18px;
}

.service-timeline-item > small {
  color: #8aa0ad;
  margin-top: 8px;
  font-size: 10px;
  display: block;
}

.service-timeline-item summary {
  cursor: pointer;
  color: #377b9e;
  font-size: 12px;
}

.service-timeline-item details {
  background: #f3f8fb;
  border-radius: 8px;
  padding: 10px;
}

.service-timeline-item p {
  font-size: 12px;
}

.service-reading {
  max-width: 850px;
  margin: 0 auto 30px;
}

.service-reading h1 {
  overflow-wrap: anywhere;
  font-size: 30px;
}

.service-reading .service-prose {
  font-size: 15px;
  line-height: 2.1;
}

.service-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  display: grid;
}

.service-form-grid > label {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.service-editor-section {
  border-top: 1px solid #dce7ee;
  margin-top: 25px;
  padding-top: 20px;
}

.service-field-editor {
  background: #f6f9fc;
  border: 1px solid #dce8f0;
  border-radius: 10px;
  margin: 15px 0;
  padding: 20px;
}

.service-field-editor > label {
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  display: flex;
}

.service-field-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.service-field-actions label {
  margin-right: auto;
}

.service-draft-preview {
  background: #f3f9fd;
  border: 1px dashed #9ac4dd;
  border-radius: 12px;
  max-width: 680px;
  margin-top: 25px;
  padding: 25px;
}

.service-draft-preview blockquote {
  white-space: pre-wrap;
  background: #e0f0fa;
  border-radius: 12px;
  margin: 15px 0;
  padding: 15px;
}

.service-work-counts {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 22px;
  display: grid;
}

.service-work-counts > div {
  background: #f0f7fb;
  border-radius: 9px;
  padding: 18px;
}

.service-work-counts span {
  color: #7895a8;
  font-size: 11px;
}

.service-work-counts strong {
  margin-top: 7px;
  font-size: 24px;
  display: block;
}

.service-management .service-panel a.account-primary {
  color: #fff;
}

.service-management .service-panel .service-panel {
  background: #f7fbfd;
  border-radius: 9px;
  padding: 20px;
}

.service-map-board {
  white-space: normal;
  color: #347797;
  cursor: pointer;
  text-align: center;
  background: #f4fcffef;
  border: 2px solid #9bcbdc;
  border-radius: 7px;
  width: 190px;
  padding: 9px;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}

.service-map-board b {
  font-size: 12px;
  display: block;
}

.service-map-board span {
  margin: 5px 0;
  font-size: 10px;
  display: block;
}

.service-map-board small {
  font-size: 9px;
  display: block;
}

@media (max-width: 1000px) {
  .service-board-layout {
    grid-template-columns: minmax(0, 1fr) 245px;
  }

  .service-hero {
    grid-template-columns: 1fr 220px;
    padding: 34px;
  }

  .service-hero h1 {
    font-size: 32px;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

  .service-header nav {
    gap: 12px;
  }

  .service-main {
    padding: 26px 24px 40px;
  }
}

@media (max-width: 760px) {
  .service-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px;
  }

  .service-header .site-brand {
    font-size: 22px;
  }

  .service-header nav {
    gap: 18px;
    font-size: 11px;
  }

  .service-main {
    padding: 25px 18px 40px;
  }

  .service-hero {
    margin-bottom: 28px;
    padding: 27px 23px;
    display: block;
  }

  .service-hero h1 {
    font-size: 27px;
    line-height: 1.5;
  }

  .service-hero p {
    font-size: 12px;
  }

  .service-house {
    display: none;
  }

  .service-hero-actions {
    gap: 8px;
    font-size: 11px;
  }

  .service-hero-actions a:first-child {
    padding: 11px 13px;
  }

  .service-board-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-guide {
    padding: 24px;
    position: static;
  }

  .service-section-heading {
    flex-wrap: wrap;
    gap: 13px;
  }

  .service-section-heading h2 {
    font-size: 20px;
  }

  .service-section-heading > span {
    font-size: 10px;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

  .service-title-card {
    padding: 22px;
  }

  .service-filters {
    gap: 8px;
  }

  .service-filters label:first-child {
    flex-basis: 100%;
  }

  .service-filters > select {
    max-width: 100%;
  }

  .service-explain {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-apply-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .service-panel {
    padding: 22px 18px;
  }

  .service-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-page input:not([type="checkbox"]), .service-page textarea, .service-page select, .service-panel input:not([type="checkbox"]), .service-panel textarea, .service-panel select {
    font-size: 16px;
  }

  .service-field-editor {
    padding: 15px;
  }

  .service-work-counts {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .service-panel .service-section-heading .account-primary {
    font-size: 12px;
  }

  .service-main > h1 {
    font-size: 27px;
  }

  .service-application-list > a, .service-application-list > button {
    flex-wrap: wrap;
  }

  .service-application-list > a > div {
    flex-basis: 100%;
  }

  .service-panel .admin-pagination {
    flex-wrap: wrap;
  }

  .service-panel .admin-pagination > span {
    width: 100%;
  }

  .service-title-info dl > div {
    grid-template-columns: 70px 1fr;
  }

  .service-draft-preview {
    padding: 18px;
  }

  .service-title-heading h2 {
    font-size: 21px;
  }

  .service-panel .system-actions {
    gap: 9px;
  }

  .service-panel .system-actions button {
    padding: 10px 13px;
    font-size: 12px;
  }
}

.service-board-filters {
  background: #eaf3f8;
  border: 1px solid #dceaf2;
  border-radius: 16px;
  grid-template-columns: 1.25fr 1fr 1fr;
  align-items: end;
  gap: 12px;
  margin: 23px 0 12px;
  padding: 15px;
  display: grid;
}

.service-filter-label {
  color: #698b9e;
  letter-spacing: .5px;
  margin: 0 0 8px 2px;
  font-size: 11px;
  display: block;
}

.service-filter-select, .service-filter-search {
  min-width: 0;
  position: relative;
}

.service-filter-trigger, .service-search-control {
  color: #285b75;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #cbdee9;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0 13px;
  display: flex;
  box-shadow: 0 2px 5px #3c739508;
}

.service-filter-trigger {
  font: inherit;
  text-align: left;
  cursor: pointer;
  justify-content: space-between;
  font-size: 13px;
}

.service-filter-trigger > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.service-filter-trigger svg, .service-search-control svg {
  fill: none;
  stroke: #5e9fbd;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.service-filter-trigger[aria-expanded="true"] {
  border-color: #58a4c8;
  box-shadow: 0 0 0 3px #3996c013;
}

.service-filter-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.service-filter-trigger:hover {
  border-color: #7fb5cf;
}

.service-filter-trigger:focus-visible, .service-search-control:focus-within {
  outline-offset: 2px;
  outline: 2px solid #65b1d2;
}

.service-search-control input[type="search"] {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: #285b75;
  font-size: 13px;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
}

.service-search-control input::placeholder {
  color: #91a9b7;
}

.service-filter-menu {
  z-index: 30;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #bbd7e7 transparent;
  background: #fcfeff;
  border: 1px solid #c8dfec;
  border-radius: 12px;
  max-height: min(245px, 38dvh);
  padding: 6px;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 12px 30px #2a64852b;
}

.service-filter-menu [role="option"] {
  box-sizing: border-box;
  color: #487188;
  cursor: pointer;
  overflow-wrap: anywhere;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 10px;
  font-size: 13px;
  display: flex;
}

.service-filter-menu [role="option"].is-active {
  color: #247ba2;
  background: #edf6fb;
}

.service-filter-menu [aria-selected="true"] {
  color: #177ead;
  background: #e1f1f9;
  font-weight: 600;
}

.service-filter-summary {
  color: #839cac;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 2px 20px;
  font-size: 11px;
  display: flex;
}

.service-filter-summary button {
  font: inherit;
  color: #2985ad;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px;
}

.service-catalog-row {
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  display: grid;
}

.service-catalog-row button {
  color: #457d98;
  background: #f4f9fc;
  border: 1px solid #c9dfeb;
  border-radius: 7px;
  padding: 8px;
}

.service-catalog-row label {
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.service-catalog-districts {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.service-catalog-districts label {
  background: #f2f8fb;
  border: 1px solid #dfebf2;
  border-radius: 8px;
  padding: 12px;
}

.service-catalog-row input[type="checkbox"], .service-catalog-districts input {
  accent-color: #2589bb;
}

@media (max-width: 760px) {
  .service-board-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 9px;
    padding: 12px;
  }

  .service-filter-search {
    grid-column: 1 / -1;
  }

  .service-filter-trigger {
    padding: 0 10px;
    font-size: 12px;
  }

  .service-search-control input[type="search"] {
    font-size: 16px;
  }

  .service-filter-label {
    font-size: 10px;
  }

  .service-filter-menu [role="option"] {
    padding: 11px 8px;
    font-size: 12px;
  }

  .service-catalog-districts {
    grid-template-columns: 1fr 1fr;
  }

  .service-catalog-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .service-catalog-row label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .service-management .service-filters {
    flex-wrap: wrap;
  }

  .service-management .service-filters > input {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
  }

  .service-management .service-filters > select {
    flex: 1;
    min-width: 100px;
  }
}

/* [project]/app/service-hall.css [app-client] (css) */
.hall-page {
  color: #285570;
  background: #d9edf4;
  width: 100%;
  height: 100dvh;
  min-height: 440px;
  font-family: Arial, Microsoft YaHei, sans-serif;
  position: relative;
  overflow: hidden;
}

.hall-scene {
  touch-action: none;
  position: absolute;
  inset: 0;
}

.hall-scene canvas:focus-visible {
  outline-offset: -3px;
  outline: 2px solid #3ba0c3;
}

.hall-ui {
  pointer-events: none;
  flex-direction: column;
  display: flex;
  position: absolute;
  inset: 0;
}

.hall-ui button, .hall-ui a, .hall-ui nav, .hall-joystick {
  pointer-events: auto;
}

.hall-page button {
  font: inherit;
  cursor: pointer;
}

.hall-page button:disabled {
  opacity: .5;
  cursor: default;
}

.hall-page button:focus-visible, .hall-page a:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #177dac;
}

.hall-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 28px;
  display: flex;
}

.hall-brand {
  background: #f9fdffd9;
  border: 1px solid #ffffffbc;
  border-radius: 16px;
  max-width: 420px;
  padding: 15px 18px;
  box-shadow: 0 6px 25px #4f91ac0d;
}

.hall-brand .site-brand {
  color: #186986;
  font-size: 20px;
}

.hall-brand > span:not(.site-brand) {
  letter-spacing: 1.2px;
  color: #6191a4;
  margin-top: 10px;
  font-size: 11px;
  display: block;
}

.hall-brand i {
  color: #9ab8c7;
  margin: 0 6px;
  font-style: normal;
}

.hall-header nav {
  background: #fafdffe8;
  border: 1px solid #fff;
  border-radius: 30px;
  align-items: center;
  gap: 6px;
  padding: 7px;
  font-size: 12px;
  display: flex;
}

.hall-header a {
  color: #46758c;
  border-radius: 25px;
  padding: 10px 14px;
  text-decoration: none;
}

.hall-header a:last-child {
  color: #fff;
  background: #2588b4;
}

.hall-caption {
  max-width: 255px;
  position: absolute;
  top: 157px;
  left: 40px;
}

.hall-kicker {
  letter-spacing: 2px;
  color: #4e8aa4;
  font-size: 8px;
  font-weight: 700;
}

.hall-caption h1 {
  letter-spacing: 1px;
  color: #2a627d;
  margin: 12px 0;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.5;
}

.hall-caption p {
  color: #5a8597;
  max-width: 210px;
  font-size: 11px;
  line-height: 1.9;
}

.hall-quick {
  background: #f9fdffe6;
  border: 1px solid #fff;
  border-radius: 15px;
  width: 152px;
  padding: 17px;
  position: absolute;
  top: 156px;
  right: 30px;
  box-shadow: 0 6px 25px #4f91ac0d;
}

.hall-quick > span {
  letter-spacing: 2px;
  color: #84a7b6;
  margin-bottom: 10px;
  font-size: 10px;
  display: block;
}

.hall-quick button {
  text-align: left;
  color: #3d7a94;
  background: none;
  border: 0;
  border-bottom: 1px solid #dfebf0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  font-size: 12px;
  display: flex;
}

.hall-quick b {
  color: #78a7bc;
  font-weight: 400;
}

.hall-quick small {
  color: #91aab6;
  margin-top: 13px;
  font-size: 9px;
  display: block;
}

.hall-destinations {
  white-space: nowrap;
  background: #f8fcfff0;
  border: 1px solid #fff;
  border-radius: 15px;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 35px);
  padding: 7px 10px;
  display: flex;
  position: absolute;
  bottom: 57px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 5px 20px #285a7814;
}

.hall-destinations > span {
  color: #8aa6b7;
  padding: 0 6px;
  font-size: 10px;
}

.hall-destinations button {
  color: #457990;
  background: #edf5fa;
  border: 0;
  border-radius: 9px;
  padding: 12px 13px;
  font-size: 11px;
}

.hall-destinations button:hover {
  background: #d6edf6;
}

.hall-footer {
  color: #537d92;
  text-align: center;
  pointer-events: auto;
  background: linear-gradient(#0000, #e6f3fbd9 60%);
  padding: 13px 20px 10px;
  font-size: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.hall-walk-help {
  color: #57869a;
  background: #f8fdffdb;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 10px;
  position: absolute;
  bottom: 147px;
  left: 30px;
}

.hall-joystick {
  touch-action: none;
  background: #c3e8f2ad;
  border: 1px solid #ffffffcf;
  border-radius: 50%;
  place-items: center;
  width: 79px;
  height: 79px;
  display: grid;
  position: absolute;
  bottom: 52px;
  left: 34px;
}

.hall-joystick span {
  pointer-events: none;
  background: #61b0cc;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  box-shadow: 0 2px 10px #47879e26;
}

.hall-interact {
  color: #fff;
  white-space: nowrap;
  background: #1687b7;
  border: 1px solid #ffffffc4;
  border-radius: 30px;
  padding: 12px 20px;
  font-size: 12px;
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3px 18px #22607c35;
}

.hall-interact kbd {
  font: inherit;
  border: 1px solid #91c9df;
  border-radius: 4px;
  margin-left: 8px;
  padding: 2px 5px;
}

.hall-error {
  pointer-events: auto;
  background: #fffaf0;
  border: 1px solid #ead7b4;
  border-radius: 12px;
  max-width: 400px;
  padding: 15px 20px;
  font-size: 12px;
  position: absolute;
  top: 145px;
  left: 50%;
  transform: translateX(-50%);
}

.hall-error button {
  color: #8b6c36;
  background: #f3e5c9;
  border: 0;
  border-radius: 5px;
  padding: 7px 12px;
}

.hall-loading, .hall-render-fallback {
  text-align: center;
  color: #638ca0;
  font-size: 14px;
  line-height: 2;
  position: absolute;
  inset: 40% 20%;
}

.hall-dialog {
  color: #285570;
  background: #f1f7fb;
  border: 1px solid #fff;
  border-radius: 22px;
  width: min(1120px, 100vw - 70px);
  max-width: none;
  height: min(850px, 100dvh - 56px);
  max-height: none;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 25px 100px #1f435452;
}

.hall-dialog[open] {
  flex-direction: column;
  display: flex;
}

.hall-dialog::backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #23475973;
}

.hall-dialog-header {
  background: #fbfdff;
  border-bottom: 1px solid #dce9ef;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 27px;
  display: flex;
}

.hall-dialog-header > div > span {
  letter-spacing: 2px;
  color: #7ea0b3;
  font-size: 8px;
}

.hall-dialog-header h2 {
  margin: 5px 0 0;
  font-size: 21px;
  font-weight: 600;
}

.hall-dialog-header button {
  color: #548299;
  cursor: pointer;
  background: #e7f2f8;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 17px;
  padding: 10px 13px;
  font-size: 12px;
  display: flex;
}

.hall-dialog-header button span {
  font-size: 24px;
  line-height: 1;
}

.hall-dialog-content {
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding: 25px 28px;
  overflow: auto;
}

.service-embedded {
  color: #285570;
  min-width: 0;
  font-size: 14px;
}

.service-embedded a {
  color: #157ea7;
  text-decoration: none;
}

.service-embedded a:hover {
  text-decoration: underline;
}

.service-embedded > h1 {
  font-size: 28px;
}

.service-embedded .service-hero {
  display: none;
}

.service-embedded .service-board-layout {
  grid-template-columns: minmax(0, 1fr) 245px;
}

.service-embedded .service-section-heading {
  margin-top: 0;
}

.service-embedded .service-guide {
  top: 0;
}

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

.hall-welcome-panel {
  max-width: 830px;
  margin: 15px auto 35px;
  padding: 10px 25px;
}

.hall-welcome-panel > .service-guide-person {
  float: right;
  margin: 0 15px 25px 30px;
}

.hall-welcome-panel h3 {
  margin: 12px 0 20px;
  font-size: 30px;
  font-weight: 600;
}

.hall-welcome-panel > p {
  color: #5f8499;
  font-size: 14px;
  line-height: 2;
}

.hall-welcome-panel h4 {
  margin: 35px 0 12px;
  font-size: 18px;
}

.hall-intro-options {
  clear: both;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0;
  display: grid;
}

.hall-intro-options button {
  text-align: left;
  color: #387995;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8e6ed;
  border-radius: 13px;
  padding: 25px 20px;
}

.hall-intro-options b {
  font-size: 15px;
  display: block;
}

.hall-intro-options span {
  color: #86a0af;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.8;
  display: block;
}

.hall-leave-confirm {
  background: #fff7e8;
  border-bottom: 1px solid #ecd8b8;
  flex-shrink: 0;
  padding: 15px 25px;
  font-size: 13px;
}

.hall-leave-confirm button {
  color: #83662d;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddcba9;
  border-radius: 8px;
  margin-right: 12px;
  padding: 9px 12px;
}

.hall-dialog-notice {
  background: #edf4e2;
  margin: 0;
  padding: 10px 27px;
  font-size: 12px;
}

.hall-dialog .service-page {
  height: auto;
}

.hall-dialog .service-apply-layout {
  grid-template-columns: 1fr 1.1fr;
}

.hall-dialog .service-title-info .service-title-heading h2 {
  font-size: 22px;
}

.hall-dialog .service-panel {
  padding: 22px;
}

.hall-dialog .service-filters input, .hall-dialog .service-filters select {
  width: 100%;
  min-width: 0;
}

.hall-dialog .service-title-card {
  padding: 20px;
}

.hall-dialog .service-back {
  margin-bottom: 18px;
}

@media (max-width: 1000px) {
  .hall-caption {
    max-width: 190px;
    top: 145px;
    left: 25px;
  }

  .hall-caption h1 {
    font-size: 23px;
  }

  .hall-kicker {
    letter-spacing: 1px;
    font-size: 7px;
  }

  .hall-quick {
    width: 132px;
    padding: 14px;
    right: 20px;
  }

  .hall-header {
    padding: 17px 20px;
  }

  .hall-brand .site-brand {
    font-size: 17px;
  }

  .service-embedded .service-board-layout {
    grid-template-columns: 1fr;
  }

  .service-embedded .service-guide {
    position: static;
  }

  .hall-dialog {
    width: calc(100vw - 36px);
  }

  .hall-dialog .service-apply-layout {
    grid-template-columns: 1fr 1.1fr;
  }

  .hall-walk-help {
    display: none;
  }
}

@media (max-width: 760px) {
  .hall-page {
    min-height: 400px;
  }

  .hall-header {
    align-items: center;
    gap: 8px;
    padding: 12px;
  }

  .hall-brand {
    border-radius: 12px;
    max-width: 210px;
    padding: 10px 12px;
  }

  .hall-brand .site-brand {
    gap: 6px;
    font-size: 13px;
  }

  .hall-brand > span:not(.site-brand) {
    letter-spacing: 0;
    margin-top: 7px;
    font-size: 9px;
  }

  .hall-brand i {
    margin: 0 2px;
  }

  .hall-header nav {
    border-radius: 11px;
    gap: 0;
    padding: 4px;
  }

  .hall-header a {
    padding: 8px 9px;
    font-size: 10px;
  }

  .hall-header a:first-child {
    display: none;
  }

  .hall-caption {
    max-width: 210px;
    top: 104px;
    left: 17px;
  }

  .hall-kicker {
    letter-spacing: 1px;
    font-size: 7px;
  }

  .hall-caption h1 {
    margin: 8px 0;
    font-size: 22px;
    line-height: 1.4;
  }

  .hall-caption h1 br {
    display: none;
  }

  .hall-caption p {
    max-width: 178px;
    margin: 7px 0;
    font-size: 10px;
    line-height: 1.7;
  }

  .hall-quick {
    border-radius: 11px;
    width: 101px;
    padding: 10px;
    top: 108px;
    right: 13px;
  }

  .hall-quick > span {
    margin-bottom: 4px;
    font-size: 8px;
  }

  .hall-quick button {
    padding: 10px 0;
    font-size: 10px;
  }

  .hall-quick small {
    margin-top: 9px;
    font-size: 8px;
  }

  .hall-destinations {
    border-radius: 10px;
    gap: 3px;
    width: calc(100% - 24px);
    max-width: none;
    padding: 5px;
    bottom: 43px;
    overflow-x: auto;
  }

  .hall-destinations > span {
    display: none;
  }

  .hall-destinations button {
    flex: 1;
    padding: 11px 8px;
    font-size: 9px;
  }

  .hall-footer {
    padding: 10px 12px;
    font-size: 8px;
    line-height: 1.7;
  }

  .hall-joystick {
    width: 70px;
    height: 70px;
    bottom: 106px;
    left: 18px;
  }

  .hall-interact {
    max-width: calc(100% - 112px);
    padding: 11px 14px;
    font-size: 11px;
    bottom: 112px;
    left: auto;
    right: 15px;
    transform: none;
  }

  .hall-error {
    width: calc(100% - 50px);
    max-width: none;
    padding: 12px;
    font-size: 11px;
    top: 270px;
  }

  .hall-dialog {
    border-radius: 15px;
    width: calc(100vw - 16px);
    height: calc(100dvh - 18px);
  }

  .hall-dialog-header {
    padding: 14px 16px;
  }

  .hall-dialog-header h2 {
    font-size: 18px;
  }

  .hall-dialog-header button {
    gap: 9px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .hall-dialog-content {
    padding: 18px 14px;
  }

  .service-embedded .service-cards {
    grid-template-columns: 1fr;
  }

  .hall-dialog .service-apply-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hall-dialog .service-panel {
    padding: 18px;
  }

  .hall-welcome-panel {
    margin: 8px auto 20px;
    padding: 4px;
  }

  .hall-welcome-panel h3 {
    font-size: 24px;
    line-height: 1.5;
  }

  .hall-welcome-panel > .service-guide-person {
    margin: 0 0 15px 10px;
    transform: scale(.8);
  }

  .hall-intro-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hall-intro-options button {
    padding: 18px;
  }

  .hall-intro-options span {
    margin-top: 7px;
  }

  .hall-dialog-content input:not([type="checkbox"]), .hall-dialog-content textarea, .hall-dialog-content select {
    font-size: 16px;
  }

  .hall-dialog .service-panel .service-section-heading {
    gap: 10px;
  }

  .hall-dialog .service-section-heading h1 {
    overflow-wrap: anywhere;
    font-size: 23px;
  }

  .hall-leave-confirm {
    padding: 12px 16px;
    font-size: 12px;
  }
}

@media (max-height: 560px) and (min-width: 761px) {
  .hall-caption {
    top: 117px;
  }

  .hall-caption h1 {
    font-size: 21px;
  }

  .hall-caption p {
    display: none;
  }

  .hall-quick {
    top: 113px;
  }

  .hall-header {
    padding: 12px 20px;
  }

  .hall-brand {
    padding: 10px 14px;
  }

  .hall-destinations {
    bottom: 39px;
  }

  .hall-interact {
    bottom: 99px;
  }
}

.hall-brand .site-brand-text, .hall-brand .site-brand-mark {
  font-size: inherit;
}

.hall-page {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.hall-destinations {
  bottom: calc(var(--hall-footer-height, 40px) + 14px);
}

.hall-interact {
  bottom: calc(var(--hall-footer-height, 40px) + 77px);
}

.hall-joystick {
  bottom: calc(var(--hall-footer-height, 40px) + 15px);
}

.hall-brand .site-brand-mark img {
  max-width: 75px;
  height: 36px;
}

@media (max-width: 760px) {
  .hall-destinations {
    bottom: calc(var(--hall-footer-height, 28px) + 9px);
  }

  .hall-interact {
    bottom: calc(var(--hall-footer-height, 28px) + 76px);
  }

  .hall-joystick {
    bottom: calc(var(--hall-footer-height, 28px) + 70px);
  }

  .hall-brand .site-brand-mark img {
    max-width: 40px;
    height: 28px;
  }
}

.hall-caption {
  max-width: 240px;
  top: 130px;
  left: 30px;
}

.hall-caption h1 {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.hall-caption p {
  background: #f7fcffd9;
  border-radius: 8px;
  max-width: 220px;
  margin: 0;
  padding: 9px 12px;
}

.hall-quick {
  top: 130px;
}

.hall-scene canvas {
  touch-action: none;
}

@media (max-width: 760px) {
  .hall-caption {
    max-width: 210px;
    top: 100px;
    left: 13px;
  }

  .hall-caption p {
    max-width: 185px;
    padding: 7px 9px;
  }

  .hall-quick {
    top: 100px;
  }
}

/* [project]/app/scene-ui.css [app-client] (css) */
.scene-layout {
  --scene-dock-bottom: calc(var(--site-footer-height, 28px) + 14px);
  --scene-interaction-bottom: calc(var(--scene-dock-bottom) + 84px);
}

.scene-icon {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  display: block;
}

.scene-header {
  z-index: 35;
  pointer-events: none;
  color: #285a76;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  display: flex;
  position: absolute;
  top: 22px;
  left: 24px;
  right: 24px;
}

.scene-identity {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  background: #f5fcfff0;
  border: 1px solid #ffffffed;
  border-radius: 18px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px 12px;
  max-width: min(530px, 100% - 225px);
  padding: 14px 17px;
  display: grid;
  box-shadow: 0 5px 24px #376b8b12;
}

.scene-logo {
  color: #fff;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #1694d1, #076eae);
  border-radius: 12px;
  place-items: center;
  width: 44px;
  height: 46px;
  font-size: 15px;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

.scene-logo img {
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
}

.scene-heading {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.scene-brand-name {
  color: #62899e;
  letter-spacing: .5px;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.scene-title {
  letter-spacing: .3px;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  display: block;
}

.scene-subtitle {
  color: #7192a4;
  font-size: 10px;
  line-height: 1.5;
}

.scene-status {
  border-top: 1px solid #a6c8d63d;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 9px;
  padding-top: 8px;
  font-size: 11px;
  display: flex;
}

.scene-connection {
  flex: 1;
  min-width: 0;
}

.scene-room-button {
  text-align: left;
  color: #377e95;
  background: none;
  border: 0;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 25px;
  padding: 0;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
}

.scene-room-button > span {
  margin-left: auto;
}

.scene-room-button i {
  background: #35aa8a;
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px #35aa8a13;
}

.scene-guest {
  color: #6c91a4;
  font-size: 10px;
}

.scene-reconnect {
  color: #347ca1;
  background: #fff;
  border: 1px solid #b9d9e8;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 10px;
}

.scene-account-actions {
  pointer-events: auto;
  gap: 8px;
  display: flex;
}

.scene-account-actions > a, .scene-account-actions > button {
  color: #3c7390;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #f5fcfff0;
  border: 1px solid #fff;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 15px;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 5px 24px #376b8b10;
}

.scene-account-actions .scene-icon {
  width: 18px;
  height: 18px;
}

.scene-account-actions > button:hover, .scene-account-actions > a:hover {
  color: #087cb7;
  background: #fff;
}

.scene-header-flow {
  max-width: 1180px;
  margin: auto;
  padding: 24px 30px;
  position: relative;
  inset: auto;
}

.scene-header-flow .scene-identity {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border-color: #0000;
  padding: 0;
}

.scene-header-flow .scene-title {
  font-size: 17px;
}

.scene-dock {
  left: 50%;
  bottom: var(--scene-dock-bottom);
  z-index: 35;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  background: #f5fcfff2;
  border: 1px solid #fff;
  border-radius: 20px;
  align-items: stretch;
  gap: 5px;
  max-width: calc(100% - 32px);
  padding: 7px;
  display: flex;
  position: absolute;
  transform: translateX(-50%);
  box-shadow: 0 8px 35px #245b7c20;
}

.scene-dock > button, .scene-dock > a, .scene-dock .speech-open {
  color: #3a7593;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 108px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 12px;
  text-decoration: none;
  transition: background .15s, color .15s;
  display: flex;
}

.scene-dock > button:hover, .scene-dock > a:hover, .scene-dock .speech-open:hover {
  color: #0a7fbd;
  background: #e3f1f9;
}

.scene-dock > .scene-action-primary {
  color: #fff;
  background: linear-gradient(120deg, #118ccb, #157bb3);
  box-shadow: 0 4px 12px #187fac22;
}

.scene-dock > .scene-action-primary:hover {
  color: #fff;
  background: #087cb8;
}

.scene-dock > button:disabled {
  opacity: .45;
  cursor: default;
}

.scene-layout :is(.scene-dock, .scene-header, .scene-panel) :is(button, a, summary, input):focus-visible {
  outline-offset: 3px;
  outline: 3px solid #edb749;
}

.scene-panel-shade {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 65;
  pointer-events: auto;
  background: #264f6626;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: absolute;
  inset: 0;
}

.scene-panel-shade[hidden] {
  display: none;
}

.scene-panel {
  color: #2c617d;
  background: #f7fcff;
  border: 1px solid #fff;
  border-radius: 22px;
  flex-direction: column;
  width: min(470px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 90px #22496233;
}

.scene-panel > header {
  background: #edf7ff;
  border-bottom: 1px solid #dceaf2;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 21px 24px;
  display: flex;
}

.scene-panel header small {
  color: #779aaf;
  letter-spacing: 1px;
  font-size: 10px;
}

.scene-panel h2 {
  margin: 7px 0 0;
  font-size: 20px;
  line-height: 1.35;
}

.scene-panel header > button {
  color: #4b819e;
  background: #ffffff9e;
  border: 1px solid #c9e1ee;
  border-radius: 10px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 22px;
}

.scene-panel-body {
  overscroll-behavior: contain;
  min-height: 0;
  padding: 22px 24px;
  overflow: auto;
}

.scene-panel-intro {
  color: #7995a6;
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.8;
}

.scene-destination-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.scene-destination-grid button {
  text-align: left;
  color: #397791;
  background: #fff;
  border: 1px solid #d8e8f2;
  border-radius: 13px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px 10px;
  padding: 17px 13px;
  font-size: 13px;
  display: grid;
}

.scene-destination-grid small {
  color: #8aa3b2;
  grid-column: 2;
  font-size: 10px;
  font-weight: 400;
}

.scene-destination-grid button:hover {
  background: #edf8ff;
  border-color: #89bdd8;
}

.scene-tool-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  display: grid;
}

.scene-tool-grid button {
  color: #387c9e;
  background: #fff;
  border: 1px solid #d8e8f2;
  border-radius: 13px;
  align-items: center;
  gap: 13px;
  padding: 16px;
  font-size: 13px;
  display: flex;
}

.scene-tool-grid b {
  font-size: 24px;
  font-weight: 400;
}

.scene-options section + section {
  margin-top: 20px;
}

.scene-options h3 {
  color: #668ba1;
  margin: 0 0 12px;
  font-size: 13px;
}

.scene-options .music-control {
  box-shadow: none;
  background: #fff;
  border: 1px solid #d8e8f2;
  border-radius: 13px;
  padding: 9px 12px;
  display: block;
  position: static !important;
}

.scene-options .music-toggle {
  width: 100%;
  min-height: 34px;
  padding: 7px 0;
  font-size: 12px;
}

.scene-options .music-volume {
  display: block;
}

.scene-options .music-volume summary {
  display: none;
}

.scene-options .music-volume > div {
  width: 100%;
  box-shadow: none;
  background: none;
  border: 0;
  border-top: 1px solid #dfebf1;
  border-radius: 0;
  margin-top: 9px;
  padding: 14px 0 3px;
  position: static;
}

.scene-options .music-volume label {
  font-size: 12px;
}

.scene-options .music-volume input {
  margin: 15px 0 8px;
}

.scene-options .music-volume small {
  font-size: 10px;
}

.scene-help {
  background: #fff;
  border: 1px solid #d8e8f2;
  border-radius: 13px;
  margin-top: 18px;
  padding: 0 14px;
}

.scene-help summary {
  cursor: pointer;
  color: #3b7898;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: 13px;
  list-style: none;
  display: flex;
}

.scene-help summary::-webkit-details-marker {
  display: none;
}

.scene-help > div {
  color: #7291a3;
  border-top: 1px solid #dfebf1;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.9;
}

.scene-more-links {
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.scene-more-links button, .scene-more-links a {
  color: #3b7898;
  background: #fff;
  border: 1px solid #d8e8f2;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  font-size: 13px;
  text-decoration: none;
  display: flex;
}

.scene-layout .company-credit, .scene-layout .hall-footer {
  text-align: center;
  width: auto;
  max-width: none;
  padding: 8px 16px max(8px,env(safe-area-inset-bottom));
  letter-spacing: .3px;
  color: #668799;
  text-shadow: none;
  z-index: 20;
  pointer-events: auto;
  background: linear-gradient(#0000, #eaf6fbd6);
  border-radius: 0;
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
}

.scene-layout .joystick, .scene-layout .hall-joystick {
  display: none;
}

.scene-layout .nearby-talk, .scene-layout .hall-interact {
  bottom: var(--scene-interaction-bottom);
  white-space: normal;
  text-align: center;
  z-index: 34;
  border-radius: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.scene-layout .seat-notice, .scene-layout .private-notice {
  bottom: calc(var(--scene-interaction-bottom) + 60px);
  white-space: normal;
  text-align: center;
  max-width: calc(100% - 32px);
}

.scene-layout .first-person-speech {
  bottom: calc(var(--scene-interaction-bottom) + 65px);
}

.scene-dock .scene-chat, .scene-dock .scene-chat.editing {
  width: auto;
  display: flex;
  position: static;
  bottom: auto;
  right: auto;
  transform: none;
}

.scene-chat .speech-composer {
  background: #f7fffbfa;
  border-radius: 18px;
  width: min(510px, 100vw - 24px);
  padding: 18px;
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 40px #295a6b26;
}

.scene-chat > .speech-notice:not(:empty) {
  text-align: center;
  background: #f6fff9f0;
  border: 1px solid #fff;
  border-radius: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  line-height: 1.6;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.scene-chat .speech-notice:empty {
  display: none;
}

.scene-chat .speech-composer .speech-notice {
  text-align: left;
  max-width: none;
  font-size: 11px;
  line-height: 1.7;
}

.scene-layout .hall-error {
  z-index: 40;
  top: 145px;
}

.scene-layout.hall-page {
  min-height: 0;
}

@media (any-pointer: coarse) {
  .scene-layout .joystick, .scene-layout .hall-joystick {
    bottom: var(--scene-interaction-bottom);
    width: 88px;
    height: 88px;
    display: grid;
    left: 24px;
  }

  .scene-layout .joystick > span, .scene-layout .hall-joystick > span {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 760px) {
  .scene-layout {
    --scene-dock-bottom: calc(var(--site-footer-height, 28px) + 8px);
    --scene-interaction-bottom: calc(var(--scene-dock-bottom) + 92px);
  }

  .scene-header {
    top: max(12px,env(safe-area-inset-top));
    gap: 8px;
    left: 12px;
    right: 12px;
  }

  .scene-identity {
    border-radius: 14px;
    grid-template-columns: 33px minmax(0, 1fr);
    gap: 7px 9px;
    max-width: calc(100% - 80px);
    padding: 11px 12px;
  }

  .scene-logo {
    border-radius: 9px;
    width: 33px;
    height: 37px;
    font-size: 13px;
  }

  .scene-brand-name {
    letter-spacing: 0;
    font-size: 9px;
  }

  .scene-title {
    letter-spacing: 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .scene-subtitle {
    font-size: 10px;
  }

  .scene-status {
    gap: 6px;
    padding-top: 7px;
  }

  .scene-room-button {
    gap: 7px;
    font-size: 10px;
  }

  .scene-account-actions {
    flex-direction: column;
    flex-shrink: 0;
    gap: 6px;
  }

  .scene-account-actions > a, .scene-account-actions > button {
    border-radius: 11px;
    gap: 5px;
    min-height: 38px;
    padding: 8px;
    font-size: 10px;
  }

  .scene-account-actions .scene-icon {
    width: 15px;
    height: 15px;
  }

  .scene-header-flow {
    padding: 18px 16px;
    position: relative;
    inset: auto;
  }

  .scene-header-flow .scene-title {
    font-size: 15px;
  }

  .scene-dock {
    border-radius: 17px;
    gap: 3px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    padding: 5px;
  }

  .scene-dock > button, .scene-dock > a, .scene-dock > .scene-chat {
    flex: 1;
    min-width: 0;
  }

  .scene-dock > button, .scene-dock > a, .scene-dock .speech-open {
    border-radius: 12px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 57px;
    padding: 8px 4px;
    font-size: 10px;
    line-height: 1.3;
  }

  .scene-dock .speech-open {
    width: 100%;
  }

  .scene-dock .scene-icon {
    width: 21px;
    height: 21px;
  }

  .scene-panel-shade {
    align-items: flex-end;
    padding: 12px 12px 0;
  }

  .scene-panel {
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-height: calc(100dvh - 80px);
  }

  .scene-panel > header {
    padding: 17px 18px;
  }

  .scene-panel h2 {
    font-size: 19px;
  }

  .scene-panel-body {
    padding: 18px 18px max(24px,env(safe-area-inset-bottom));
  }

  .scene-destination-grid button {
    padding: 15px 12px;
    font-size: 12px;
  }

  .scene-destination-grid {
    gap: 9px;
  }

  .scene-destination-grid small {
    font-size: 9px;
  }

  .scene-panel-intro {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .scene-layout .joystick, .scene-layout .hall-joystick {
    left: 18px;
    bottom: var(--scene-interaction-bottom);
    width: 82px;
    height: 82px;
    display: grid;
  }

  .scene-layout .joystick > span, .scene-layout .hall-joystick > span {
    width: 34px;
    height: 34px;
  }

  .scene-layout .nearby-talk, .scene-layout .hall-interact {
    max-width: calc(100% - 124px);
    left: auto;
    right: 14px;
    bottom: calc(var(--scene-interaction-bottom) + 15px);
    padding: 11px 13px;
    font-size: 11px;
    transform: none;
  }

  .scene-layout .company-credit, .scene-layout .hall-footer {
    letter-spacing: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 9px;
  }

  .scene-layout .private-shade, .scene-layout .room-shade {
    align-items: flex-end;
    padding: 12px 12px 0;
  }

  .scene-layout .room-picker, .scene-layout .private-chat {
    border-radius: 22px 22px 0 0;
    max-height: calc(100dvh - 40px);
  }

  .scene-layout .hall-dialog {
    border-radius: 22px 22px 0 0;
    width: calc(100% - 16px);
    height: calc(100dvh - 35px);
    margin: auto 8px 0;
  }

  .scene-chat .speech-composer {
    padding: 15px;
  }

  .scene-chat .speech-composer label small {
    margin: 6px 0 0;
    display: block;
  }

  .scene-layout .private-notice {
    font-size: 11px;
  }
}

@media (max-height: 520px) {
  .scene-panel {
    max-height: calc(100dvh - 20px);
  }

  .scene-header {
    top: 10px;
  }

  .scene-identity {
    padding: 8px 12px;
  }

  .scene-subtitle {
    display: none;
  }

  .scene-dock > button, .scene-dock > a, .scene-dock .speech-open {
    flex-direction: row;
    gap: 7px;
    min-height: 40px;
  }

  .scene-panel-shade {
    padding-top: 10px;
  }

  .scene-layout .joystick, .scene-layout .hall-joystick {
    width: 65px;
    height: 65px;
  }

  .scene-layout .scene-logo {
    height: 34px;
  }

  .scene-layout .hall-error {
    top: 105px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-dock > button, .scene-dock > a, .scene-dock .speech-open {
    transition: none;
  }
}

/* [project]/app/identity-display.css [app-client] (css) */
.identity-badges {
  pointer-events: auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 280px;
  font-family: Arial, Microsoft YaHei, sans-serif;
  display: flex;
  position: relative;
}

.identity-chip {
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  border: 1px solid;
  border-radius: 7px;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffa0;
  display: inline-block !important;
}

.identity-badges.is-compact {
  flex-wrap: nowrap;
  gap: 3px;
  width: max-content;
  max-width: 260px;
}

.is-compact > .identity-chip {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100px;
  padding: 3px 5px;
  font-size: 10px;
}

.identity-more {
  color: #396078;
  cursor: pointer;
  background: #f3faff;
  border: 1px solid #b7d0df;
  border-radius: 7px;
  flex-shrink: 0;
  min-height: 24px;
  padding: 3px 5px;
  font-size: 10px;
}

.identity-expanded {
  z-index: 3;
  background: #fffffffa;
  border: 1px solid #c7dce9;
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 5px;
  width: 240px;
  max-height: 220px;
  padding: 10px;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  overflow: auto;
  box-shadow: 0 5px 20px #21466626;
}

.identity-expanded .identity-chip {
  max-width: 100%;
  font-size: 11px;
}

.character-label {
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.identity-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.identity-heading strong {
  color: #4d869e;
  font-size: 13px;
}

.identity-editor {
  grid-column: 1 / -1;
}

.identity-editor fieldset {
  border: 0;
  min-width: 0;
  margin: 20px 0;
  padding: 0;
}

.identity-editor legend, .identity-editor h3 {
  color: #335f75;
  font-size: 14px;
  font-weight: 600;
}

.identity-preview {
  background: linear-gradient(140deg, #eef8fc, #edf8f2);
  border: 1px solid #dbeaec;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 100px;
  margin: 16px 0;
  padding: 22px;
  display: flex;
}

.identity-preview > b {
  color: #286550;
  font-size: 13px;
}

.identity-preview > small {
  color: #627f8b;
  font-size: 11px;
}

.identity-choices {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 16px 0 25px;
  display: grid;
}

.identity-choices label {
  border: 1px solid #dce8ed;
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin: 0 !important;
  display: flex !important;
}

.identity-choices label > input {
  accent-color: #2594b5;
  width: 17px !important;
  height: 17px !important;
}

.identity-choices label > small {
  color: #6d8995;
  width: 100%;
  padding-left: 25px;
  font-size: 11px;
}

.identity-order {
  flex-direction: column;
  gap: 7px;
  padding: 0;
  list-style: none;
  display: flex;
}

.identity-order li {
  color: #6a8691;
  background: #f8fcfd;
  border: 1px solid #dfebee;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  font-size: 12px;
  display: flex;
}

.identity-order .identity-chip {
  flex-shrink: 1;
  min-width: 0;
}

.identity-order li > div {
  flex-shrink: 0;
  gap: 4px;
  margin-left: auto;
  display: flex;
}

.identity-order button {
  color: #36718b;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4e5ed;
  border-radius: 6px;
  padding: 7px;
}

.identity-order button:disabled {
  opacity: .35;
  cursor: default;
}

.identity-grip {
  cursor: grab;
}

.identity-actions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.identity-presets {
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  display: flex;
}

.identity-presets button {
  cursor: pointer;
  background: none;
  border: 2px solid #0000;
  border-radius: 10px;
  padding: 3px;
}

.identity-presets button[aria-pressed="true"] {
  border-color: #248eb8;
}

.identity-style-editor input[type="color"] {
  width: 100%;
  min-width: 80px;
  height: 40px;
  padding: 4px;
}

.identity-more:focus-visible, .identity-presets button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #248eb8;
}

@media (max-width: 600px) {
  .identity-choices {
    grid-template-columns: 1fr;
  }

  .identity-order li {
    gap: 4px;
    padding: 7px 5px;
  }

  .identity-order button {
    min-height: 36px;
    padding: 5px;
  }

  .identity-grip {
    display: none;
  }

  .identity-badges.is-compact {
    max-width: 225px;
  }

  .identity-preview {
    padding: 18px 10px;
  }
}

.identity-visible {
  display: contents;
}

.identity-badges.is-compact {
  align-items: flex-end;
  gap: 4px;
  width: max-content;
  max-width: 270px;
  display: flex;
}

.is-compact .identity-visible {
  gap: 3px;
  min-width: 0;
  max-width: 236px;
  display: grid;
}

.is-compact .identity-visible > .identity-chip {
  text-align: center;
  min-width: 0;
  max-width: 150px;
  padding: 3px 5px;
  font-size: 10px;
}

.character-label.has-identities {
  transform: translateY(-34px);
}

.character-label.is-distant .character-identity-row {
  display: none;
}

.character-label.has-identities.is-distant {
  transform: none;
}

.character-label .identity-badges.is-compact {
  max-width: 260px;
}

.character-label .identity-visible {
  max-width: 225px;
}

.character-label .identity-visible > .identity-chip {
  padding: 3px 5px;
  font-size: 9px;
}

.character-label .identity-more {
  min-height: 21px;
  font-size: 9px;
}

.identity-expanded {
  text-align: left;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.character-label .identity-expanded {
  top: calc(100% + 8px);
}

.character-identity-row:empty {
  display: none;
}

@media (max-width: 600px) {
  .identity-badges.is-compact {
    max-width: 245px;
  }

  .is-compact .identity-visible {
    max-width: 208px;
  }

  .is-compact .identity-visible > .identity-chip {
    font-size: 9px;
  }

  .character-label .identity-badges.is-compact {
    max-width: 240px;
  }

  .character-label .identity-visible {
    max-width: 205px;
  }
}

/* [project]/app/district-access.css [app-client] (css) */
.district-access-page {
  color: #244562;
  background: radial-gradient(at 75% 15%, #d4f1ee, #0000 50%), #edf6ff;
  flex-direction: column;
  gap: 30px;
  min-height: 100dvh;
  padding: 28px clamp(18px, 5vw, 72px);
  display: flex;
}

.district-access-page > header a {
  color: #245c88;
  text-decoration: none;
}

.district-access-page .site-brand {
  align-items: center;
  gap: 10px;
  font-weight: 700;
  display: inline-flex;
}

.district-access-page .site-brand-mark {
  color: #fff;
  background: #167acb;
  border-radius: 11px;
  place-items: center;
  min-width: 42px;
  height: 38px;
  padding: 5px;
  display: grid;
}

.district-access-page .site-brand-mark img {
  object-fit: contain;
  max-width: 70px;
  max-height: 28px;
}

.district-access-card {
  background: #fffffff2;
  border: 1px solid #d6e6f2;
  border-radius: 26px;
  width: min(100%, 520px);
  margin: auto;
  padding: 32px;
  box-shadow: 0 18px 70px #39789e16;
}

.district-access-icon {
  color: #fff;
  background: #167acb;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 20px;
  font-weight: 800;
  display: inline-flex;
}

.district-access-eyebrow {
  letter-spacing: 1px;
  color: #43859e;
  margin: 20px 0 8px;
  font-size: 12px;
}

.district-access-card h1 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.5;
}

.district-access-card > p:not(.district-access-eyebrow) {
  color: #567189;
  font-size: 14px;
  line-height: 1.8;
}

.district-access-return {
  text-align: center;
  color: #2472aa;
  margin-top: 20px;
  font-size: 14px;
  display: block;
}

.district-access-page > footer {
  text-align: center;
  color: #567189;
  font-size: 12px;
}

@media (max-width: 600px) {
  .district-access-page {
    gap: 22px;
    padding: 20px 14px;
  }

  .district-access-card {
    padding: 24px 20px;
  }

  .district-access-card h1 {
    font-size: 22px;
  }

  .district-access-page .site-brand {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/*# sourceMappingURL=app_0_ea0dt._.css.map*/