:root {
  --bg: #111111;
  --bg-deep: #111111;
  --surface: #111111;
  --surface-raised: #111111;
  --ink: #ffffff;
  --ink-dim: #ffffff;
  --ink-faint: #ffffff;
  --line: #ffffff;
  --line-strong: #ffffff;
  --session: #f25c94;
  --max-width: 430px;
  --tap: 52px;
  --mono: "SFMono-Regular", "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  --sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: none;
}

body.menu-open {
  overflow: hidden;
}

body.inactive-phone-hub-tab {
  overflow: hidden;
}

.inactive-tab-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 25px;
  background: #111111;
  color: #ffffff;
}

.inactive-tab-card {
  width: min(100%, 430px);
  padding: 30px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  text-align: center;
}

.inactive-tab-card span {
  display: block;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.inactive-tab-card h1 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(24px, 8vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.inactive-tab-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
}

.inactive-tab-takeover {
  width: 100%;
  min-height: 54px;
  margin-top: 30px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
}

button,
input {
  color: inherit;
  font: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

a {
  text-align: center;
}

button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 3px;
}

.app {
  width: min(100%, var(--max-width));
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 25px 72px;
}

body.has-dock .app {
  padding-bottom: 150px;
}

.statusbar:empty {
  display: none;
}

.global-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: max(16px, env(safe-area-inset-top)) 0 14px;
  border-bottom: 1px dotted var(--line);
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.15;
}

.global-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dev-reset-button {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.7);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
}

.language-button {
  min-height: 42px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.rose-menu-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.rose-menu-button:active {
  transform: scale(0.95);
  opacity: .72;
}

.rose-mark {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rose-mark-image {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 190%;
  max-width: none;
  height: auto;
  filter: grayscale(1) contrast(1.18) brightness(.84);
  transform: translateX(-50%);
}

/* Legacy vector parts remain as a harmless fallback when the PNG cannot load. */
.rose-mark .petal,
.rose-mark .rose-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 11px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 62% 38% 60% 40%;
  transform-origin: 50% 100%;
}

.rose-mark .petal-a {
  transform: translate(-50%, -100%) rotate(-42deg);
}

.rose-mark .petal-b {
  transform: translate(-50%, -100%) rotate(42deg);
}

.rose-mark .petal-c {
  transform: translate(-50%, -100%) rotate(180deg);
}

.rose-mark .rose-core {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.menu-rose {
  color: var(--session);
  transform: none;
}

.screen {
  padding: 46px 0 34px;
}

.screen-kicker,
.section-heading-row,
.cover-meta,
.final-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.screen-kicker,
.cover-meta,
.final-header,
.micro-label,
.map-coordinate,
.screen-footer-meta,
.visual-note,
.module-coordinate {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.screen-title {
  max-width: 18ch;
  margin: 18px auto 26px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 2.55rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-align: center;
}

.compact-title {
  margin: 7px auto 0;
  font-size: 2rem;
}

.screen h1,
.screen h2,
.screen h3,
.confirmation-card h2 {
  text-align: center;
}

.intro-copy {
  margin: 25px 0;
  color: var(--ink-dim);
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.75;
}

.arrival-thesis {
  margin: 28px 0 20px;
  padding: 26px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.arrival-thesis p {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: -.025em;
  line-height: 1.65;
}

.arrival-thesis p:last-child {
  margin-bottom: 0;
}

.phone-role-copy {
  color: #ffffff;
}

.copy-stack {
  display: grid;
  gap: 14px;
}

.copy-stack p {
  margin: 0;
}

.quiet-entry.local-only-entry {
  display: inline-flex;
  width: auto;
  min-height: auto;
  margin: 2px auto 0;
  padding: 10px 0 4px;
  border: 0;
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
}

.arrival-cover {
  padding-top: 42px;
}

.arrival-project-title {
  max-width: 14ch;
  margin: 30px auto 18px;
  font-family: var(--display);
  font-size: clamp(2rem, 9.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .98;
  text-align: center;
}

.arrival-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px auto 12px;
  font-size: clamp(2.65rem, 12.5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.065em;
  line-height: .9;
}

.arrival-title span:last-child {
  margin-left: 0.43em;
  color: var(--ink-dim);
}

.arrival-byline {
  margin: 0 auto 28px;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .11em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.arrival-summary {
  margin: 28px 0 22px;
  padding: 26px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.arrival-summary > p {
  margin: 16px 0 0;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: -.02em;
  line-height: 1.85;
}

.rose-visual {
  position: relative;
  min-height: 330px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px dotted var(--line);
  background: var(--bg);
}

.rose-visual-arrival {
  min-height: 340px;
  margin-top: 16px;
  --session: #d9d4cf;
}

.asset-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 280px;
  place-items: center;
  overflow: hidden;
  border: 1px dotted #ffffff;
  background: var(--bg);
}

.asset-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-placeholder {
  display: flex;
  width: 100%;
  min-height: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 18px;
  color: #ffffff;
  font-family: var(--mono);
  text-align: center;
}

.asset-placeholder[hidden],
.asset-image[hidden] {
  display: none;
}

.asset-placeholder::before {
  content: "+";
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  place-items: center;
  border: 1px solid #ffffff;
  border-radius: 50%;
  font-size: 22px;
}

.asset-placeholder .asset-type,
.asset-placeholder small {
  color: #ffffff;
  font-size: 8px;
  letter-spacing: .15em;
}

.asset-placeholder strong {
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}

.asset-placeholder p {
  max-width: 24em;
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
}

.arrival-asset {
  min-height: 0;
  aspect-ratio: 1;
  margin: 24px 0;
}

.arrival-asset .asset-image {
  object-fit: contain;
}

.rose-asset {
  position: absolute;
  inset: 16px;
  transition: transform 480ms ease, inset 480ms ease;
}

.rose-asset img,
.personal-rose img,
.module-rose img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.06) brightness(0.92);
}

.rose-asset .rose-tint {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--session);
  /* 원본 PNG의 명암·질감을 그대로 두고 색상만 투영한다. */
  opacity: .64;
  mix-blend-mode: color;
  -webkit-mask: url('./assets/images/rose_specimen.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  mask: url('./assets/images/rose_specimen.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  pointer-events: none;
}

/* 작은 header/menu 장미도 같은 PNG의 투명 alpha 안에서만 색이 보인다. */
.personal-rose .rose-tint,
.rose-mark .rose-tint {
  position: absolute;
  display: block;
  background: var(--session);
  opacity: .64;
  mix-blend-mode: color;
  -webkit-mask: url('./assets/images/rose_specimen.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  mask: url('./assets/images/rose_specimen.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  pointer-events: none;
}

/* 메뉴에서는 줄기 대신 꽃머리만 이미지와 같은 비율로 확대해 착색한다. */
.rose-mark .rose-mark-tint {
  inset: 0;
  opacity: .82;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-size: 190% auto;
  mask-size: 190% auto;
}

.scanline,
.module-scanline {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 51%;
  display: block;
  height: 1px;
  background: #ffffff;
  box-shadow: none;
  opacity: 0.58;
  animation: scan 8s ease-in-out infinite;
}

/* TD의 결과값은 수치로 보여주지 않고 MY SPECIMEN의 장미에만 반영한다.
   배경 그라데이션 없이, 크기·회전·스캔 리듬만 달라진다. */
.rose-visual.has-td-trace {
  box-shadow: inset 0 0 0 1px var(--session);
}

.rose-visual.trace-intensity-0 .rose-asset {
  inset: 25px 30px;
  transform: rotate(-1.2deg) scale(.95);
}

.rose-visual.trace-intensity-1 .rose-asset {
  inset: 18px;
  transform: rotate(.6deg) scale(1.02);
}

.rose-visual.trace-intensity-2 .rose-asset {
  inset: 10px;
  transform: rotate(1.6deg) scale(1.07);
}

.rose-visual.has-td-trace .scan-corner {
  border-color: var(--session);
}

.rose-visual.trace-count-2 .scanline,
.rose-visual.trace-count-3 .scanline,
.rose-visual.trace-count-4 .scanline {
  animation-duration: 5.5s;
}

@keyframes scan {
  0%, 15% { transform: translateY(-110px); opacity: 0; }
  25%, 70% { opacity: .58; }
  85%, 100% { transform: translateY(110px); opacity: 0; }
}

.scan-corner {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-color: var(--line-strong);
}

.corner-a {
  left: 12px;
  top: 12px;
  border-left: 1px solid;
  border-top: 1px solid;
}

.corner-b {
  right: 12px;
  bottom: 12px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.visual-note {
  position: absolute;
  z-index: 3;
}

.note-a {
  left: 17px;
  bottom: 16px;
}

.note-b {
  right: 17px;
  top: 16px;
  writing-mode: vertical-rl;
}

.record-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.record-line strong {
  font-size: 14px;
  font-weight: 500;
}

.screen-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 0 8px;
  color: var(--ink-faint);
  border-top: 1px dotted var(--line);
  text-align: center;
}

.screen-footer-meta strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
}

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 40px;
  padding: 24px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 1px dotted #ffffff;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-align: center;
}

.disclosure {
  border-top: 1px dotted var(--line);
}

.disclosure:last-of-type {
  border-bottom: 1px dotted var(--line);
}

.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 58px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  list-style: none;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

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

.disclosure[open] summary span {
  transform: rotate(45deg);
}

.disclosure-body {
  padding: 0 0 20px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.7;
}

.disclosure-body p {
  margin: 0;
}

.module-info-block {
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px dotted var(--line);
}

.module-capture-panel {
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px dotted var(--line);
}

.module-capture-panel h2 {
  margin: 14px auto 18px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.04em;
  text-align: center;
}

.capture-result-stage {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  overflow: hidden;
  border: 1px dotted var(--line);
  background: var(--bg);
}

.capture-empty {
  display: grid;
  max-width: 320px;
  justify-items: center;
  gap: 12px;
  padding: 30px 22px;
  text-align: center;
}

.capture-empty-mark {
  font: 300 30px/1 var(--mono);
}

.capture-empty p,
.capture-empty small {
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.7;
}

.capture-empty small {
  font-size: 10px;
  letter-spacing: .06em;
}

.capture-result-stage.has-capture {
  display: block;
  min-height: 0;
}

.capture-result-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.capture-result-meta {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-top: 1px dotted var(--line);
  font: 10px/1 var(--mono);
  letter-spacing: .08em;
}

.capture-result-nav {
  display: flex;
  gap: 4px;
}

.capture-result-nav button {
  display: grid;
  width: 36px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}

.capture-result-open {
  display: flex;
  width: calc(100% - 28px);
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  color: var(--ink);
  font: 10px/1 var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
}

.module-info-block h2 {
  margin: 14px auto 16px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.04em;
}

.module-info-block > p {
  margin: 0 0 16px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.75;
}

.detailed-step-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 4px 0 0 1.5em;
}

.detailed-step-list li {
  padding-left: .25em;
}

.registration-screen .rose-visual {
  min-height: 350px;
}

.input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 30px 0;
}

.input-group label,
.numbered-input label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.input-group input[type='text'],
.numbered-input input[type='text'] {
  width: 100%;
  min-height: 58px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px dotted var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  letter-spacing: -0.03em;
}

.input-group input::placeholder,
.numbered-input input::placeholder {
  color: rgba(255, 255, 255, .5);
  opacity: 1;
}

.input-note {
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.5;
}

.continuous-color-field {
  width: 100%;
  height: 88px;
  padding: 0;
  overflow: hidden;
  border: 1px dotted var(--line);
  border-radius: 0;
  background: transparent;
  cursor: crosshair;
}

.continuous-color-field::-webkit-color-swatch-wrapper {
  padding: 0;
}

.continuous-color-field::-webkit-color-swatch {
  border: 0;
}

.continuous-color-field::-moz-color-swatch {
  border: 0;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.palette-choice {
  position: relative;
  aspect-ratio: 1;
  min-height: 64px;
  border: 1px solid var(--line);
  background: #090909;
}

.palette-choice span {
  position: absolute;
  inset: 7px;
  background: var(--choice-color);
}

.palette-choice.is-selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #090909, 0 0 0 3px #ffffff;
}

.palette-choice.is-selected::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff;
}

.field-error {
  min-height: 18px;
  margin: 2px 0;
  color: #ff8b8b;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.emotional-naming-intro {
  margin: 42px 0 8px;
  padding: 24px 0 0;
  border-top: 1px dotted #ffffff;
}

.section-code {
  display: block;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
}

.emotional-naming-intro h2 {
  max-width: 18em;
  margin: 0 auto 16px;
  color: #ffffff;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.25;
}

.emotional-naming-intro > p {
  margin: 0 0 24px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.7;
}

.emotional-naming-guide {
  gap: 18px;
}

.emotional-naming-guide p {
  line-height: 1.8;
}

.emotional-naming-example {
  margin: 4px 0;
  padding: 18px;
  border: 1px solid #ffffff;
  text-align: center;
}

.emotional-naming-example span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
}

.emotional-naming-example p,
.emotional-naming-example strong {
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.emotional-naming-example strong {
  margin-top: 8px;
  font-size: 16px;
}

.personal-header {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 14px;
  width: 100%;
  min-height: 84px;
  padding: 10px 0 18px;
  border-bottom: 1px dotted var(--line);
  text-align: left;
}

.personal-rose {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
}

.personal-rose .rose-tint {
  inset: 4px;
}

.personal-copy {
  align-self: center;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.personal-copy small,
.connection-state,
.header-arrow {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.personal-copy strong {
  overflow: hidden;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-state,
.header-arrow {
  align-self: center;
}

.connection-state.is-connected {
  color: #ffffff;
}

.home-screen {
  padding-top: 18px;
}

.home-screen .section-heading-row {
  margin-top: 32px;
}

.home-screen > .section-heading-row {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

.home-screen > .section-heading-row > div {
  width: 100%;
}

.home-screen > .section-heading-row .map-coordinate {
  position: absolute;
  right: 0;
  top: 0;
}

.map-coordinate {
  padding-top: 8px;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
}

.floorplan-stage {
  position: relative;
  height: 460px;
  margin: 22px 0 10px;
  overflow: hidden;
  border: 1px dotted var(--line);
  background: var(--bg);
  cursor: grab;
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
  perspective: 820px;
  perspective-origin: 50% 42%;
}

.floorplan-stage.is-dragging {
  cursor: grabbing;
}

.floorplan-turntable-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
  pointer-events: none;
}

.floorplan-turntable-image[hidden] {
  display: none;
}

.actual-floorplan-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(7px);
  backface-visibility: hidden;
}

.actual-floorplan-image[hidden] {
  display: none;
}

.floorplan-rotor {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 3;
  width: min(calc(100% - 16px), 340px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(var(--plan-tilt, 42deg)) rotateZ(var(--plan-angle, 0deg));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 60ms linear;
  pointer-events: none;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,.76));
}

.floorplan-rotor::before {
  content: '';
  position: absolute;
  inset: 9% 1.5%;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.2);
  background: #0d0d0d;
  box-shadow:
    0 7px 0 rgba(255,255,255,.14),
    0 11px 0 #080808;
  transform: translateZ(-8px);
  pointer-events: none;
}

.floorplan-stage.is-dragging .floorplan-rotor {
  transition: none;
}

.floorplan-stage.has-turntable .floorplan-rotor {
  transform: translate(-50%, -50%);
  filter: none;
}

.floorplan-stage.has-turntable .floorplan-rotor::before {
  display: none;
}

.floorplan-rotor button {
  pointer-events: auto;
  transform: translateZ(22px);
  backface-visibility: hidden;
}

.miniature-walls {
  --wall-height: 140px;
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  pointer-events: none;
}

.mini-wall {
  position: absolute;
  display: block;
  background: #f5f5f5;
  box-shadow:
    0 0 0 .5px #111111,
    0 7px 14px rgba(0,0,0,.42);
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.mini-wall::after {
  content: '';
  position: absolute;
  display: block;
  background: #6d6d6d;
  backface-visibility: visible;
}

.mini-wall.is-horizontal {
  height: 4px;
  transform: translateZ(var(--wall-height));
}

.mini-wall.is-horizontal::after {
  left: 0;
  top: 100%;
  width: 100%;
  height: var(--wall-height);
  transform: rotateX(90deg);
  transform-origin: top;
}

.mini-wall.is-vertical {
  width: 4px;
  transform: translateZ(var(--wall-height));
}

.mini-wall.is-vertical::after {
  left: 100%;
  top: 0;
  width: var(--wall-height);
  height: 100%;
  transform: rotateY(-90deg);
  transform-origin: left;
}

.wall-top-a { left: 4.8%; top: 23.3%; width: 37.6%; }
.wall-top-b { left: 51.9%; top: 23.3%; width: 43.3%; }
.wall-left { left: 4.8%; top: 23.3%; height: 56%; }
.wall-right-a { left: 95.2%; top: 23.3%; height: 18.7%; }
.wall-right-b { left: 95.2%; top: 50.2%; height: 13.4%; }
.wall-notch-top { left: 54.5%; top: 63.6%; width: 40.7%; }
.wall-notch-side { left: 54.5%; top: 63.6%; height: 15.7%; }
.wall-bottom { left: 4.8%; top: 79.3%; width: 49.7%; }
.wall-partition {
  left: 21.7%;
  top: 45.7%;
  height: 26.7%;
  opacity: .54;
}

.map-plane {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 285px;
  height: 285px;
  transform: translate(-50%, -50%) rotate(calc(45deg + var(--turntable-angle, 0deg))) skew(-7deg, -7deg);
  transform-origin: center;
  transition: transform 70ms linear;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow: 14px 14px 0 #111111, 15px 15px 0 #ffffff;
}

.map-room {
  position: absolute;
  display: block;
  border: 1px solid var(--line);
  background: var(--bg);
}

.room-a { left: 13px; top: 13px; width: 124px; height: 124px; }
.room-b { right: 13px; top: 13px; width: 124px; height: 76px; }
.room-c { right: 13px; top: 101px; width: 124px; height: 76px; }
.room-d { left: 13px; bottom: 13px; width: 212px; height: 124px; }

.route-line {
  position: absolute;
  display: block;
  height: 0;
  border-top: 1px dashed #ffffff;
}

.route-a { left: 110px; top: 87px; width: 82px; transform: rotate(-45deg); }
.route-b { left: 92px; top: 176px; width: 116px; transform: rotate(45deg); }

.map-hotspot {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: rgba(17,17,17,.94);
  box-shadow:
    0 10px 18px rgba(0,0,0,.66),
    inset 0 0 0 1px rgba(255,255,255,.08);
  text-align: center;
  touch-action: manipulation;
}

.floorplan-rotor .map-hotspot {
  transform: translateZ(172px);
}

.map-hotspot::before {
  content: '';
  position: absolute;
  right: 1px;
  top: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid #111111;
  border-radius: 50%;
  background: var(--session);
  box-shadow: 0 0 9px var(--session);
}

.map-hotspot.is-visited,
.map-hotspot.is-connected {
  border-color: var(--session);
  background: var(--session);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.12),
    0 0 20px var(--session),
    0 10px 18px rgba(0,0,0,.7);
}

.map-hotspot.is-visited::before,
.map-hotspot.is-connected::before {
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

.map-hotspot.is-visited .hotspot-number,
.map-hotspot.is-connected .hotspot-number {
  color: #000000;
  font-weight: 700;
}

.map-hotspot.is-visited .hotspot-label,
.map-hotspot.is-connected .hotspot-label {
  padding: 4px 6px;
  background: var(--session);
  color: #000000;
  font-weight: 700;
  text-shadow: none;
}

.hotspot-complete {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid #000000;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
}

.map-hotspot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 172px;
  background: rgba(255,255,255,.42);
  opacity: .55;
  transform: translateX(-50%) rotateX(90deg);
  transform-origin: top;
  pointer-events: none;
}

.map-hotspot .hotspot-number {
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.map-hotspot .hotspot-label {
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  width: max-content;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-align: left;
  text-shadow: 0 1px 10px #000000;
  transform: translateY(-50%);
  white-space: nowrap;
}

.hotspot-02 .hotspot-label,
.hotspot-03 .hotspot-label {
  right: calc(100% + 9px);
  left: auto;
  text-align: right;
}

.hotspot-01 { left: 22%; top: 67%; }
.hotspot-02 { left: 69.5%; top: 52%; }
.hotspot-03 { left: 68.8%; top: 28%; }
.hotspot-04 {
  left: 4%;
  top: 44%;
}

.floorplan-info-table {
  position: absolute;
  left: 12%;
  top: 27%;
  z-index: 3;
  padding: 5px 7px;
  border: 1px dotted rgba(255,255,255,.72);
  background: rgba(17,17,17,.9);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
  pointer-events: none;
  transform: translateZ(16px);
  backface-visibility: hidden;
}

.floorplan-passage {
  position: absolute;
  right: 4.5%;
  top: 43.5%;
  z-index: 3;
  color: rgba(255,255,255,.78);
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: .1em;
  white-space: nowrap;
  transform: translateZ(150px);
  pointer-events: none;
}

.map-exit {
  position: absolute;
  left: 46.8%;
  top: 15.7%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%) translateZ(172px);
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  justify-content: center;
  z-index: 7;
  touch-action: manipulation;
  padding: 5px 7px;
  border: 1px dotted rgba(255,255,255,.72);
  background: rgba(17,17,17,.94);
}

.turntable-ui {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dotted #ffffff;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  pointer-events: none;
}

.you-marker {
  position: absolute;
  left: 45%;
  top: 44%;
  z-index: 5;
  color: var(--marker);
  pointer-events: none;
}

.you-marker .marker-rose {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 12px var(--marker));
}

.you-marker > span:last-child {
  position: absolute;
  left: 30px;
  top: 6px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
}

.route-note {
  margin: 0 0 30px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
}

.melbourne-floorplan-section {
  margin: 34px 0 38px;
  padding: 28px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.melbourne-floorplan-address {
  margin: 10px 0 16px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: center;
}

.melbourne-floorplan-warning {
  max-width: 34rem;
  margin: 0 auto 20px;
  text-align: left;
}

.melbourne-provisional-plan {
  position: relative;
  width: 100%;
  min-height: 330px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--bg);
  background-size: 24px 24px;
}

.melbourne-plan-caption,
.melbourne-entry-tbc {
  position: absolute;
  z-index: 1;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.4;
}

.melbourne-plan-caption {
  left: 16px;
  top: 14px;
}

.melbourne-entry-tbc {
  left: 50%;
  bottom: -1px;
  padding: 6px 10px;
  border: 1px dashed var(--line-strong);
  border-bottom: 0;
  background: var(--bg);
  transform: translateX(-50%);
  white-space: nowrap;
}

.melbourne-map-marker {
  position: absolute;
  z-index: 2;
  display: flex;
  width: min(38%, 148px);
  min-width: 106px;
  min-height: 72px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: rgba(17,17,17,.94);
  color: var(--ink);
  text-align: left;
  touch-action: manipulation;
}

.melbourne-map-marker::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 10px;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--session);
  box-shadow: 0 0 10px var(--session);
}

.melbourne-map-marker.position-01 { left: 7%; top: 18%; }
.melbourne-map-marker.position-02 { right: 7%; top: 18%; }
.melbourne-map-marker.position-03 { right: 7%; bottom: 17%; }
.melbourne-map-marker.position-04 { left: 7%; bottom: 17%; }

.melbourne-map-number {
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1;
}

.melbourne-map-name {
  max-width: calc(100% - 12px);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.25;
}

.melbourne-map-status {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1.2;
}

.melbourne-map-marker.is-visited,
.melbourne-map-marker.is-connected {
  border-color: var(--session);
  box-shadow: inset 4px 0 0 var(--session), 0 0 20px var(--session);
}

.melbourne-map-marker.is-connected .melbourne-map-status {
  color: var(--ink);
}

.melbourne-map-access-note {
  margin: 14px 0 0;
  text-align: left;
}

.floorplan-route-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  margin: 20px 0 14px;
  padding: 14px 0;
  border-top: 1px dotted #ffffff;
  border-bottom: 1px dotted #ffffff;
}

.route-order-step {
  display: flex;
  width: 48px;
  min-width: 48px;
  min-height: 50px;
  flex: 0 0 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 3px;
  border: 1px solid rgba(255,255,255,.55);
  text-align: center;
}

.route-order-step strong {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.route-order-step span {
  overflow: hidden;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-order-step.is-visited {
  border-color: var(--session);
  background: var(--session);
  color: #000000;
  box-shadow: 0 0 14px var(--session);
}

.route-order-arrow {
  flex: 0 1 12px;
  min-width: 10px;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 14px;
  text-align: center;
}

.route-order-choice {
  color: var(--session);
}

.route-note-primary {
  margin: 18px 0 28px;
  padding: 18px 12px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: -.015em;
  line-height: 1.65;
  text-align: center;
  white-space: pre-line;
}

.module-index-list {
  border-top: 1px dotted var(--line);
}

.module-index-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  border-bottom: 1px dotted var(--line);
  text-align: center;
}

.module-index-key {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 12px 0;
}

.module-index-key strong {
  line-height: 1.35;
  text-align: center;
}

.module-code {
  grid-column: 2;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  text-align: center;
}

.module-index-key .visit-status {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.module-number,
.visit-status,
.row-arrow {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.module-index-row strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.visit-status {
  font-size: 8px;
}

.project-intro {
  margin: 48px 0 30px;
}

.home-project-lead {
  margin-top: 42px;
  margin-bottom: 50px;
  padding-bottom: 34px;
  border-bottom: 1px dotted var(--line);
}

.home-project-lead h1 {
  max-width: 13em;
  margin: 14px auto 0;
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1.05;
  text-align: center;
}

.home-reading-links {
  margin: 48px 0 36px;
}

.home-reading-links h2 {
  margin: 14px auto 24px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
}

.home-about-primary {
  width: 100%;
  min-height: 58px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.home-work-about-links {
  border-top: 1px dotted var(--line);
  margin-top: 28px;
}

.home-work-about-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  border-bottom: 1px dotted var(--line);
  text-align: center;
}

.home-work-about-link > span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
}

.home-work-about-link strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.project-intro h2 {
  margin: 14px auto 0;
  color: #ffffff;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.035em;
}

.project-intro > p {
  max-width: 26em;
  margin: 14px 0 28px;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.7;
}

.home-name-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px dotted var(--line);
}

.home-name-action > span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 42px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  margin-right: auto;
  margin-left: auto;
}

/* Audience-facing small type stays readable on older and smaller phones. */
.language-button,
.quiet-entry.local-only-entry,
.record-line,
.input-group label,
.numbered-input label,
.personal-copy small,
.connection-state,
.header-arrow,
.module-number,
.visit-status,
.row-arrow,
.home-name-action > span,
.connected-banner,
.instruction-level,
.specimen-name span,
.final-emotional-name span,
.trace-row,
.missing-list span,
.menu-index,
.menu-arrow,
.menu-language {
  font-size: 10px;
}

.module-code,
.home-work-about-link > span,
.about-anchor-nav button span,
.about-to-top {
  font-size: 9px;
}

.screen a,
.site-footer a {
  text-align: center;
}

.module-screen {
  padding-top: 40px;
}

.module-title-block {
  margin: 34px 0 22px;
}

.module-title-display {
  max-width: 100%;
  margin: 8px auto 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
}

.module-korean-title {
  margin: 10px auto 0;
  color: var(--ink-dim);
  font-size: 14px;
  text-align: center;
}

.module-hero {
  position: relative;
  height: 360px;
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px dotted var(--line);
  background: var(--bg);
}

.module-hero-grid {
  position: absolute;
  inset: 0;
  display: none;
}

.module-asset {
  min-height: 100%;
  height: 100%;
  border: 0;
}

.module-rose {
  position: absolute;
  inset: 20px;
}

.module-reenactment .module-rose {
  clip-path: polygon(0 0, 100% 0, 100% 22%, 4% 30%, 100% 37%, 100% 60%, 10% 68%, 100% 77%, 100% 100%, 0 100%);
  filter: contrast(1.25);
}

.module-mourning .module-rose img,
.module-mourning .module-rose .rose-tint {
  transform: scaleY(1.14);
  filter: blur(.8px) grayscale(1);
  opacity: .78;
}

.module-archive .module-rose {
  inset: 54px;
  opacity: .45;
}

.module-archive .module-hero-grid {
  background-size: 22px 22px;
}

.module-coordinate {
  position: absolute;
  z-index: 3;
}

.coordinate-a { left: 15px; top: 14px; }
.coordinate-b { right: 14px; bottom: 14px; writing-mode: vertical-rl; }

.connected-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 14px;
  border: 1px dotted #ffffff;
  border-top: 0;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
}

.tag-instruction,
.essential-instruction {
  margin: 28px 0;
  padding: 22px 0;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
}

.tag-instruction {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
}

.tag-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #ffffff;
  font-size: 24px;
}

.tag-instruction h2,
.essential-instruction h2,
.survey-block h2 {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.tag-instruction p,
.essential-instruction p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
}

.pattern-entry {
  position: relative;
  margin: 30px 0 34px;
  padding: 28px 0 24px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  text-align: center;
}

.pattern-entry::before,
.pattern-entry::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid #ffffff;
  content: '';
  pointer-events: none;
}

.pattern-entry::before {
  top: -4px;
  left: 0;
}

.pattern-entry::after {
  right: 0;
  bottom: -4px;
}

.pattern-entry > .micro-label {
  display: block;
  margin-bottom: 16px;
  color: #ffffff;
  text-align: center;
}

.pattern-entry h2 {
  max-width: 17em;
  margin: 0 auto;
  color: #ffffff;
  font-family: var(--display);
  font-size: clamp(23px, 7vw, 31px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.035em;
  text-align: center;
}

.pattern-entry-instruction {
  max-width: 25em;
  margin: 15px auto 24px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}

.pattern-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.rose-pattern-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 136px;
  padding: 13px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: #09090a;
  color: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.rose-pattern-button::after {
  position: absolute;
  inset: 7px;
  border: 1px dotted rgba(255, 255, 255, .25);
  content: '';
  pointer-events: none;
}

.rose-pattern-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.rose-pattern-button:disabled {
  cursor: wait;
}

.rose-pattern-graphic {
  display: block;
  width: min(100%, 118px);
  aspect-ratio: 1;
}

.rose-pattern-graphic svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rose-pattern-graphic circle,
.rose-pattern-graphic ellipse,
.rose-pattern-graphic path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.rose-pattern-graphic .pattern-rose-core {
  opacity: .9;
}

.rose-pattern-graphic .pattern-structure {
  opacity: .72;
}

.rose-pattern-graphic .pattern-solid {
  fill: currentColor;
  stroke: none;
}

.rose-pattern-graphic .pattern-scan-axis {
  stroke-dasharray: 1 5;
}

.rose-pattern-button.is-dimmed {
  opacity: .18;
}

.rose-pattern-button.is-selected,
.rose-pattern-button.is-matched {
  color: var(--session-ink, #09090a);
  background: var(--session);
}

.rose-pattern-button.is-matched .rose-pattern-graphic {
  animation: pattern-match-pulse 260ms ease-out both;
}

.rose-pattern-button.is-mismatch {
  animation: pattern-mismatch 420ms ease-out;
}

.pattern-entry-feedback {
  min-height: 3.1em;
  margin: 17px auto 0;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .06em;
  text-align: center;
}

.pattern-entry-feedback:empty {
  min-height: 0;
  margin-top: 0;
}

.pattern-entry-feedback.is-busy {
  padding: 12px 10px;
  border: 1px dotted #ffffff;
}

.pattern-entry-fallback {
  margin: 10px auto 0;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

.pattern-animation-preview > h1 {
  max-width: 11em;
  margin: 0 auto;
  font-size: clamp(30px, 10vw, 42px);
  line-height: 1.05;
  text-align: center;
}

.pattern-animation-preview-note {
  max-width: 27em;
  margin: 18px auto 30px;
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.pattern-animation-stage {
  --pattern-animation-duration: 4200ms;
  --pattern-scan-distance: 268px;
  position: relative;
  min-height: 500px;
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid #ffffff;
  background: #09090a;
  color: #ffffff;
  contain: paint;
  isolation: isolate;
}

.pattern-animation-stage::before,
.pattern-animation-stage::after {
  position: absolute;
  z-index: 7;
  width: 16px;
  height: 16px;
  content: '';
  pointer-events: none;
}

.pattern-animation-stage::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
}

.pattern-animation-stage::after {
  right: 10px;
  bottom: 10px;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.pattern-animation-index,
.pattern-animation-coordinate {
  position: absolute;
  z-index: 8;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.pattern-animation-index {
  top: 18px;
  left: 18px;
}

.pattern-animation-coordinate {
  top: 18px;
  right: 18px;
  opacity: .62;
}

.pattern-animation-field {
  position: absolute;
  top: 56px;
  left: 50%;
  width: min(82vw, 330px);
  max-width: calc(100% - 28px);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.pattern-animation-guide {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: .28;
}

.pattern-animation-guide.guide-a {
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 1px dotted #ffffff;
}

.pattern-animation-guide.guide-b {
  top: 0;
  left: 50%;
  height: 100%;
  border-left: 1px dotted #ffffff;
}

.pattern-animation-symbol,
.pattern-animation-specimen {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform, opacity;
}

.pattern-animation-symbol {
  z-index: 4;
  width: 68%;
  color: var(--session);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.9);
}

.pattern-animation-symbol svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pattern-animation-symbol circle,
.pattern-animation-symbol ellipse,
.pattern-animation-symbol path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}

.pattern-animation-symbol .pattern-solid {
  fill: currentColor;
  stroke: none;
}

.pattern-animation-symbol .pattern-structure {
  opacity: .72;
}

.pattern-animation-symbol .pattern-scan-axis {
  stroke-dasharray: 1 5;
}

.pattern-animation-specimen {
  z-index: 3;
  width: 88%;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.72);
}

.pattern-animation-specimen-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  filter: grayscale(1) contrast(1.08) brightness(.9);
  transform: translateZ(0);
}

.pattern-animation-tint {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--session);
  opacity: 0;
  mix-blend-mode: color;
  -webkit-mask: url('./assets/images/rose_specimen_animation.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  mask: url('./assets/images/rose_specimen_animation.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  will-change: opacity;
}

.pattern-animation-scan {
  position: absolute;
  z-index: 4;
  top: 7%;
  left: 5%;
  right: 5%;
  display: block;
  height: 1px;
  background: #ffffff;
  opacity: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, .38);
  will-change: transform, opacity;
}

.pattern-motion-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.pattern-motion-fragment {
  --piece-x: 0px;
  --piece-y: 0px;
  --piece-rotate: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 68%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.pattern-motion-fragment.fragment-a { clip-path: polygon(0 0, 52% 0, 52% 52%, 0 52%); }
.pattern-motion-fragment.fragment-b { clip-path: polygon(48% 0, 100% 0, 100% 52%, 48% 52%); }
.pattern-motion-fragment.fragment-c { clip-path: polygon(0 48%, 52% 48%, 52% 100%, 0 100%); }
.pattern-motion-fragment.fragment-d { clip-path: polygon(48% 48%, 100% 48%, 100% 100%, 48% 100%); }

.pattern-motion-fragment svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pattern-motion-fragment circle,
.pattern-motion-fragment ellipse,
.pattern-motion-fragment path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  vector-effect: non-scaling-stroke;
}

.pattern-motion-fragment .pattern-solid {
  fill: currentColor;
  stroke: none;
}

.pattern-motion-fragment .pattern-structure { opacity: .86; }
.pattern-motion-fragment .pattern-scan-axis { stroke-dasharray: 1 5; }

.pattern-motion-merge-ring,
.pattern-motion-merge-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.2);
  will-change: transform, opacity;
}

.pattern-motion-merge-ring {
  width: 44%;
  aspect-ratio: 1;
  border: 2px solid var(--session);
}

.pattern-motion-merge-core {
  width: 9px;
  height: 9px;
  background: var(--session);
  box-shadow: 0 0 15px var(--session);
}

.pattern-animation-copy {
  position: absolute;
  right: 22px;
  bottom: 28px;
  left: 22px;
  z-index: 8;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .08em;
  text-align: center;
}

.pattern-animation-copy-step {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}

.pattern-animation-stage.is-playing .pattern-animation-symbol {
  animation: pattern-preview-symbol-v5 var(--pattern-animation-duration) cubic-bezier(.16, 1, .3, 1) both;
}

.pattern-animation-stage.is-playing .pattern-animation-specimen {
  animation: pattern-preview-specimen-v5 var(--pattern-animation-duration) cubic-bezier(.16, 1, .3, 1) both;
}

.pattern-animation-stage.is-playing .pattern-animation-tint {
  animation: pattern-preview-colour-v5 var(--pattern-animation-duration) ease-in-out both;
}

.pattern-animation-stage.is-playing .pattern-animation-scan {
  animation: pattern-preview-scan-v5 var(--pattern-animation-duration) cubic-bezier(.32, 0, .16, 1) both;
}

.pattern-animation-stage.is-playing .pattern-motion-fragment {
  animation: pattern-fragments-merge-v5 var(--pattern-animation-duration) cubic-bezier(.4, 0, .2, 1) both;
}

.pattern-animation-stage.is-playing .pattern-motion-merge-ring {
  animation: pattern-merge-ring-v5 var(--pattern-animation-duration) ease-out both;
}

.pattern-animation-stage.is-playing .pattern-motion-merge-core {
  animation: pattern-merge-core-v5 var(--pattern-animation-duration) ease-out both;
}

.pattern-animation-stage.is-playing .pattern-animation-copy .step-a {
  animation: pattern-preview-copy-a var(--pattern-animation-duration) ease-in-out both;
}

.pattern-animation-stage.is-playing .pattern-animation-copy .step-b {
  animation: pattern-preview-copy-b var(--pattern-animation-duration) ease-in-out both;
}

.pattern-animation-replay {
  width: 100%;
}

.pattern-animation-return {
  display: block;
  margin: 18px auto 0;
  text-align: center;
}

.pattern-entry-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  background: #09090a;
  opacity: 0;
  overscroll-behavior: none;
  animation: pattern-live-overlay-in 180ms ease-out both;
}

.pattern-entry-transition-overlay.is-leaving {
  pointer-events: none;
  animation: pattern-live-overlay-out 180ms ease-in both;
}

.pattern-animation-stage.is-live-entry {
  width: min(100%, 430px);
  min-height: min(620px, calc(100dvh - 44px));
  max-height: calc(100dvh - 44px);
  margin: 0;
}

.pattern-animation-stage.is-live-entry .pattern-animation-field {
  top: 50%;
  width: min(78vw, 340px);
  transform: translate(-50%, -50%);
}

@keyframes pattern-live-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pattern-live-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.pattern-animation-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0 0 22px;
}

.pattern-animation-comparison-card {
  min-width: 0;
}

.pattern-animation-stage.is-compact {
  --pattern-animation-duration: 4200ms;
  --pattern-scan-distance: 148px;
  min-height: 260px;
  margin: 0;
}

.pattern-animation-stage.is-compact .pattern-animation-index,
.pattern-animation-stage.is-compact .pattern-animation-coordinate {
  top: 13px;
  font-size: 6px;
  letter-spacing: .08em;
}

.pattern-animation-stage.is-compact .pattern-animation-index {
  left: 12px;
}

.pattern-animation-stage.is-compact .pattern-animation-coordinate {
  right: 12px;
}

.pattern-animation-stage.is-compact .pattern-animation-field {
  top: 42px;
  width: calc(100% - 18px);
  max-width: none;
}

.pattern-animation-stage.is-compact .pattern-animation-copy {
  right: 10px;
  bottom: 18px;
  left: 10px;
  min-height: 36px;
  font-size: 7px;
  line-height: 1.45;
  letter-spacing: .04em;
}

.pattern-animation-stage.is-compact .pattern-animation-tint {
  -webkit-mask-image: url('./assets/images/rose_specimen_animation_compact.png?v=melbourne-onsite-v15-20261003');
  mask-image: url('./assets/images/rose_specimen_animation_compact.png?v=melbourne-onsite-v15-20261003');
}

.pattern-animation-card-replay {
  width: 100%;
  min-height: 42px;
  padding: 9px 4px;
  border: 1px solid #ffffff;
  border-top: 0;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .06em;
  text-align: center;
}

/* Each work begins with the same four fragments, but from an unmistakably
   different direction. Every route resolves into the exact centre. */
.pattern-animation-stage[data-station="01"] .fragment-a,
.pattern-animation-stage[data-station="01"] .fragment-c {
  --piece-x: -78px;
  --piece-y: 0px;
  --piece-rotate: -5deg;
}

.pattern-animation-stage[data-station="01"] .fragment-b,
.pattern-animation-stage[data-station="01"] .fragment-d {
  --piece-x: 78px;
  --piece-y: 0px;
  --piece-rotate: 5deg;
}

.pattern-animation-stage[data-station="02"] .fragment-a {
  --piece-x: -66px;
  --piece-y: -66px;
  --piece-rotate: -12deg;
}

.pattern-animation-stage[data-station="02"] .fragment-b {
  --piece-x: 66px;
  --piece-y: -66px;
  --piece-rotate: 12deg;
}

.pattern-animation-stage[data-station="02"] .fragment-c {
  --piece-x: -66px;
  --piece-y: 66px;
  --piece-rotate: 12deg;
}

.pattern-animation-stage[data-station="02"] .fragment-d {
  --piece-x: 66px;
  --piece-y: 66px;
  --piece-rotate: -12deg;
}

.pattern-animation-stage[data-station="03"] .fragment-a,
.pattern-animation-stage[data-station="03"] .fragment-b {
  --piece-x: 0px;
  --piece-y: -82px;
  --piece-rotate: -4deg;
}

.pattern-animation-stage[data-station="03"] .fragment-c,
.pattern-animation-stage[data-station="03"] .fragment-d {
  --piece-x: 0px;
  --piece-y: 82px;
  --piece-rotate: 4deg;
}

.pattern-animation-stage[data-station="04"] .fragment-a {
  --piece-x: 0px;
  --piece-y: -88px;
  --piece-rotate: -18deg;
}

.pattern-animation-stage[data-station="04"] .fragment-b {
  --piece-x: 88px;
  --piece-y: 0px;
  --piece-rotate: 18deg;
}

.pattern-animation-stage[data-station="04"] .fragment-c {
  --piece-x: -88px;
  --piece-y: 0px;
  --piece-rotate: 18deg;
}

.pattern-animation-stage[data-station="04"] .fragment-d {
  --piece-x: 0px;
  --piece-y: 88px;
  --piece-rotate: -18deg;
}

@keyframes pattern-mismatch {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes pattern-match-pulse {
  0% { opacity: .7; transform: scale(.94); }
  55% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pattern-preview-copy-a {
  0% { opacity: 0; transform: translate3d(0, 4px, 0); }
  14%, 40% { opacity: 1; transform: translate3d(0, 0, 0); }
  62%, 100% { opacity: 0; transform: translate3d(0, -4px, 0); }
}

@keyframes pattern-preview-copy-b {
  0%, 44% { opacity: 0; transform: translate3d(0, 4px, 0); }
  64%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pattern-preview-symbol-v5 {
  0%, 54% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.92);
  }
  64% {
    opacity: .24;
    transform: translate3d(-50%, -50%, 0) scale(.96);
  }
  78% {
    opacity: .82;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  90%, 100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes pattern-fragments-merge-v5 {
  0% {
    color: #ffffff;
    opacity: 0;
    transform: translate3d(
      calc(-50% + var(--piece-x)),
      calc(-50% + var(--piece-y)),
      0
    ) rotate(var(--piece-rotate)) scale(.94);
  }
  7%, 18% {
    color: #ffffff;
    opacity: 1;
    transform: translate3d(
      calc(-50% + var(--piece-x)),
      calc(-50% + var(--piece-y)),
      0
    ) rotate(var(--piece-rotate)) scale(1.06);
  }
  52% {
    color: #ffffff;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
  61% {
    color: var(--session);
    opacity: .96;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.98);
  }
  72% {
    color: var(--session);
    opacity: .12;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.03);
  }
  78%, 100% {
    color: var(--session);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.04);
  }
}

@keyframes pattern-preview-specimen-v5 {
  0%, 35% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.8);
  }
  49% {
    opacity: .18;
    transform: translate3d(-50%, -50%, 0) scale(.87);
  }
  64% {
    opacity: .74;
    transform: translate3d(-50%, -50%, 0) scale(.96);
  }
  78%, 100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes pattern-preview-colour-v5 {
  0%, 48% { opacity: 0; }
  62% { opacity: .22; }
  78% { opacity: .62; }
  90%, 100% { opacity: .76; }
}

@keyframes pattern-preview-scan-v5 {
  0%, 35% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  43% {
    opacity: .86;
    transform: translate3d(0, 0, 0);
  }
  77% {
    opacity: .62;
    transform: translate3d(0, var(--pattern-scan-distance), 0);
  }
  86%, 100% {
    opacity: 0;
    transform: translate3d(0, calc(var(--pattern-scan-distance) + 16px), 0);
  }
}

@keyframes pattern-merge-ring-v5 {
  0%, 39% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.16);
  }
  50% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(.42);
  }
  65% {
    opacity: .46;
    transform: translate3d(-50%, -50%, 0) scale(1.08);
  }
  78%, 100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.42);
  }
}

@keyframes pattern-merge-core-v5 {
  0%, 43% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.2);
  }
  52% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.55);
  }
  65% {
    opacity: .84;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  78%, 100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rose-pattern-button.is-mismatch,
  .rose-pattern-button.is-matched .rose-pattern-graphic {
    animation: none;
  }

  .pattern-animation-stage.is-playing .pattern-animation-scan,
  .pattern-animation-stage.is-playing .pattern-motion-fragment,
  .pattern-animation-stage.is-playing .pattern-motion-merge-ring,
  .pattern-animation-stage.is-playing .pattern-motion-merge-core,
  .pattern-animation-stage.is-playing .pattern-animation-copy .step-a {
    display: none;
    animation: none !important;
  }

  .pattern-animation-stage.is-playing .pattern-animation-symbol {
    display: block;
    color: var(--session);
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    animation: none !important;
  }

  .pattern-animation-stage.is-playing .pattern-animation-specimen {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    animation: none !important;
  }

  .pattern-animation-stage.is-playing .pattern-animation-tint {
    opacity: .72;
    animation: none !important;
  }

  .pattern-animation-stage.is-playing .pattern-animation-copy .step-b {
    opacity: 1;
    animation: none !important;
  }

  .pattern-animation-stage.is-playing .pattern-structure {
    animation: none !important;
  }
}

/* Melbourne review v8 — route locating, clean access controls and spacing
   corrections. These visual changes do not alter station or capture logic. */
.route-order-step.is-selected {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.route-order-entry,
.route-order-exit {
  grid-template-rows: auto auto;
  row-gap: 2px;
}

.route-step-label {
  display: block;
  font: 600 6px/1 var(--mono);
  letter-spacing: .06em;
}

.melbourne-confirmed-marker.is-route-highlighted {
  z-index: 16;
  border-color: #ffffff;
  border-style: solid;
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--session) 55%, transparent),
    0 0 28px var(--session);
  transform: translate(-50%, -50%) translateZ(80px) scale(1.08);
}

.access-layer-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.result-capture-gallery > .micro-label + h2 {
  margin: 14px auto 18px;
}

.module-screen > .connected-banner {
  border-top: 1px dotted #ffffff;
}

/* ================================================================
   MELBOURNE ACCESS EDITION
   These overrides preserve the Seoul stylesheet while making the new flow
   reflow-safe, keyboard-visible, touchable and usable with reduced motion.
   ================================================================ */

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 20000;
  padding: 12px 16px;
  transform: translateY(-160%);
  border: 2px solid #fff;
  background: #111;
  color: #fff;
  font: 600 14px/1.3 var(--mono);
}

.skip-link:focus {
  transform: translateY(0);
}

body {
  overflow-x: clip;
  font-size: 16px;
  line-height: 1.6;
}

body.has-dock .app {
  padding-bottom: calc(var(--dock-height, 120px) + 32px + env(safe-area-inset-bottom));
}

button,
a,
input,
textarea,
select,
summary {
  min-height: 44px;
}

textarea,
select {
  color: inherit;
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.micro-label,
.asset-type,
.module-coordinate,
.visit-status,
.module-code,
.input-note,
.specimen-label span,
.specimen-label p,
.specimen-label strong {
  font-size: max(12px, .75rem);
  line-height: 1.45;
}

.site-footer {
  gap: 12px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.access-fringe-credit {
  line-height: 1.55;
}

.rose-menu-overlay,
.inactive-tab-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inactive-tab-takeover,
.inactive-tab-reset {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border: 1px solid #fff;
  color: #fff;
  font: 600 12px/1.4 var(--mono);
}

.phone-data-notice,
.access-credit-card,
.home-direct-actions,
.result-summary,
.result-next-actions,
.access-guide-item,
.access-route-card {
  margin-top: 24px;
  padding: 22px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.phone-data-notice h2,
.access-guide-item h2,
.access-route-card h2,
.home-direct-actions h2,
.result-next-actions h2,
.result-capture-gallery h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1.2;
  text-align: center;
}

.pattern-entry-alternative {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  text-align: center;
}

.pattern-entry-alternative > span,
.rose-pattern-number {
  font: 600 12px/1.4 var(--mono);
  letter-spacing: .08em;
}

.rose-pattern-number {
  position: absolute;
  right: 10px;
  bottom: 8px;
}

.capture-fetch-status,
.result-capture-status {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 44px;
  margin: 12px 0;
  color: #fff;
  font: 600 12px/1.5 var(--mono);
  text-align: center;
}

.capture-carousel-announcement,
.capture-poll-announcement {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.capture-retry-button {
  min-width: 150px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid #fff;
  color: #fff;
  font: 600 12px/1.4 var(--mono);
}

.result-capture-gallery {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #fff;
}

.result-capture-items {
  display: grid;
  gap: 18px;
}

.result-capture-card {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px dotted #fff;
}

.result-capture-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: #000;
}

.result-capture-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  font: 12px/1.5 var(--mono);
}

.result-capture-card-meta a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.record-no-capture-note {
  margin: 24px 0;
  padding: 16px;
  border: 1px dotted #fff;
  font-size: 15px;
  line-height: 1.65;
}

.result-summary dl {
  margin: 0;
}

.result-summary dl > div {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) minmax(0, 1.35fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted #fff;
}

.result-summary dt,
.result-summary dd {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.result-summary dt {
  font-family: var(--mono);
}

.result-colour-chip {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 8px;
  border: 1px solid #fff;
  vertical-align: -.2em;
}

.survey-choice-question {
  margin: 0;
  padding: 28px 0;
  border: 0;
  border-bottom: 2px solid #fff;
}

.survey-choice-question legend {
  width: 100%;
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.55;
}

.survey-choice-endpoints {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  font: 11px/1.4 var(--mono);
}

.survey-number-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 8px;
}

.survey-number-option {
  position: relative;
  display: grid;
  min-width: 44px;
  min-height: 48px;
  place-items: center;
  cursor: pointer;
}

.survey-number-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.survey-number-option span {
  display: grid;
  width: 100%;
  min-height: 48px;
  place-items: center;
  border: 1px solid #fff;
  font: 600 14px/1 var(--mono);
}

.survey-number-option input:checked + span {
  background: var(--session);
  color: var(--session-ink);
  box-shadow: inset 0 0 0 3px #fff;
}

.survey-number-option input:focus-visible + span {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.numbered-input input::placeholder,
.survey-text-question textarea::placeholder {
  color: rgba(255, 255, 255, .5);
  opacity: 1;
}

.selected-colour-text {
  display: block;
  min-height: 44px;
  padding: 10px 0;
  color: #fff;
  font-size: 15px;
}

.record-visit-banner {
  flex-wrap: wrap;
}

.pattern-entry-transition-overlay.is-reduced-motion .pattern-animation-field,
body.reduce-motion .pattern-animation-field {
  animation: none !important;
  transition: none !important;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

@media (max-width: 420px) {
  .app {
    width: 100%;
    padding-right: clamp(16px, 6vw, 25px);
    padding-left: clamp(16px, 6vw, 25px);
  }

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

@media (max-width: 280px) {
  .survey-number-grid {
    grid-template-columns: repeat(2, minmax(44px, 1fr));
  }

  .global-header,
  .result-capture-card-meta {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-entry-transition-overlay .pattern-animation-field {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: #fff;
    --line-strong: #fff;
  }

  .text-button,
  .primary-action,
  .secondary-action,
  .module-index-row {
    border-width: 2px;
  }
}

/* Melbourne final accessibility corrections. Keep these last so older Seoul
   component-specific sizes cannot override the visitor-facing baseline. */
.wordmark,
.language-button,
.rose-menu-button,
.dev-reset-button,
.text-button,
.capture-result-nav button,
.capture-result-open,
.capture-result-save,
.menu-language,
.menu-instagram,
.about-to-top,
.result-capture-card-actions a,
.result-capture-card-actions button {
  min-width: 44px;
  min-height: 44px;
}

.wordmark,
.language-button,
.text-button,
.capture-result-open,
.capture-result-save,
.menu-language,
.menu-instagram,
.about-to-top,
.result-capture-card-actions a,
.result-capture-card-actions button {
  font-size: max(12px, .75rem);
  line-height: 1.35;
}

.capture-result-actions,
.result-capture-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.capture-result-actions .capture-result-open,
.capture-result-actions .capture-result-save {
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.result-capture-card-actions a,
.result-capture-card-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  text-align: center;
}

.access-venue-address {
  margin: -12px auto 24px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.local-only-station-notice .text-button {
  width: 100%;
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  line-height: 1.5;
}

.naming-prerequisite {
  margin: 28px 0;
  padding: 26px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.naming-prerequisite h2 {
  max-width: 18em;
  margin: 0 auto 14px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.naming-prerequisite > p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.7;
}

.naming-prerequisite-actions {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.naming-prerequisite-actions .text-button,
.module-full-story {
  width: 100%;
  min-height: 52px;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
}

.module-full-story {
  margin-top: 28px;
}

.about-screen {
  padding-top: 20px;
}

.about-back {
  width: 100%;
  min-height: 50px;
  border-bottom: 1px dotted var(--line);
}

.about-hero {
  padding: 56px 0 46px;
  border-bottom: 1px solid #ffffff;
  text-align: center;
}

.about-hero h1 {
  max-width: 12em;
  margin: 16px auto 14px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 11vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1;
}

.about-hero > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.about-hero .about-hero-lead {
  margin-top: 28px;
  color: var(--ink-dim);
  font-size: 16px;
  text-align: left;
}

.about-toc {
  margin: 34px 0 64px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.about-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  list-style: none;
  cursor: pointer;
}

.about-toc > summary::-webkit-details-marker {
  display: none;
}

.about-toc[open] > summary span {
  transform: rotate(45deg);
}

.about-anchor-nav {
  display: grid;
  padding-bottom: 14px;
  border-top: 1px dotted var(--line);
}

.about-anchor-nav button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px dotted var(--line);
  text-align: center;
}

.about-anchor-nav button span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
}

.about-anchor-nav button strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.about-section {
  position: relative;
  padding: 64px 0 52px;
  border-top: 1px solid #ffffff;
  scroll-margin-top: 76px;
}

.about-section-index {
  display: block;
  margin-bottom: 18px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-align: center;
}

.about-section h2 {
  max-width: 15em;
  margin: 0 auto 24px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.1;
  text-align: center;
}

.about-section > p {
  margin: 0 0 20px;
  color: var(--ink-dim);
  font-size: 16px;
  letter-spacing: -.012em;
  line-height: 1.82;
  text-align: left;
}

.about-section .about-section-lead {
  margin-bottom: 30px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.6;
}

.about-section .disclosure {
  margin-top: 34px;
  border-bottom: 1px dotted var(--line);
}

.about-section .disclosure-body {
  padding-top: 4px;
  padding-bottom: 28px;
}

.about-deeper-copy p {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.8;
}

.about-to-top {
  display: block;
  min-height: 42px;
  margin: 34px auto 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-align: center;
}

.about-page-end {
  padding: 64px 0 24px;
  border-top: 1px solid #ffffff;
  text-align: center;
}

.about-page-end p {
  margin: 0 0 28px;
  font-size: 18px;
}

.about-page-end .text-button {
  display: flex;
  width: 100%;
  border-bottom: 1px dotted var(--line);
}

.final-epilogue {
  margin: 46px 0 28px;
  padding: 34px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  text-align: center;
}

.final-epilogue p {
  max-width: 32em;
  margin: 0 auto 18px;
  line-height: 1.9;
}

.final-epilogue p:last-child {
  margin-bottom: 0;
}

.instruction-level {
  display: block;
  margin-bottom: 28px;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
}

.essential-instruction h2 {
  font-size: 24px;
}

.essential-instruction p {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.65;
}

.specimen-back-button {
  width: 100%;
  min-height: 50px;
  margin-bottom: 22px;
  border-bottom: 1px dotted #ffffff;
}

.return-home {
  width: 100%;
  margin-top: 22px;
  text-align: center;
}

.specimen-screen .rose-visual {
  min-height: 440px;
  margin-top: 22px;
}

.specimen-name {
  padding: 22px 0 32px;
  text-align: center;
}

.specimen-name span,
.final-emotional-name span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
}

.specimen-name h1,
.final-emotional-name h1 {
  margin: 9px auto 0;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: 1.05;
}

.trace-section {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.trace-section .section-heading-row {
  min-height: 70px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.trace-section h2,
.trace-section .section-heading-row span {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
}

.trace-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  min-height: 56px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .09em;
}

.trace-row > span {
  color: var(--ink-faint);
}

.trace-row > span.is-visited {
  color: #ffffff;
}

.trace-row strong {
  font-weight: 500;
}

.quiet-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
}

.missing-list {
  margin: 32px 0;
  border-top: 1px solid var(--line);
}

.missing-list button {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.missing-list span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
}

.missing-list strong {
  font-size: 13px;
  font-weight: 500;
}

.numbered-input {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 5px 12px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.numbered-input > span {
  grid-row: 1 / 3;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 10px;
}

.numbered-input input {
  grid-column: 2;
}

.final-name-input {
  border-bottom: 1px solid var(--line);
}

.survey-block {
  margin: 40px 0 12px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.survey-block h2 {
  margin: 14px 0 22px;
  font-size: 20px;
  line-height: 1.45;
}

.survey-scale-note {
  margin: 0 0 22px;
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.survey-question,
.survey-text-question {
  min-width: 0;
  margin: 0 0 14px;
  padding: 30px 0 38px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.82);
  border-bottom: 1px dotted var(--line);
}

.survey-question legend,
.survey-text-question label {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.survey-text-question textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 13px;
}

.survey-text-question textarea:focus {
  outline: 0;
  border-color: #ffffff;
}

.survey-text-question textarea::placeholder {
  color: var(--ink-dim);
  opacity: 1;
}

.survey-slider-question {
  padding-bottom: 38px;
}

.survey-slider-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin: 0 0 13px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.35;
}

.survey-slider-header span:last-child {
  text-align: right;
}

.survey-slider-value {
  min-width: 28px;
  color: #ffffff;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.survey-slider-input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}

.survey-slider-input:focus {
  outline: 0;
}

.survey-slider-input::-webkit-slider-runnable-track {
  height: 2px;
  background: #ffffff;
}

.survey-slider-input::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  margin-top: -15px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--bg);
}

.survey-slider-input::-moz-range-track {
  height: 2px;
  background: #ffffff;
}

.survey-slider-input::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--bg);
}

.survey-slider-input:focus::-webkit-slider-thumb,
.survey-slider-input:active::-webkit-slider-thumb,
.survey-slider-input:focus::-moz-range-thumb,
.survey-slider-input:active::-moz-range-thumb {
  background: #ffffff;
}

.survey-slider-ticks {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  margin-top: 5px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
}

.survey-slider-ticks span {
  text-align: center;
}

.survey-slider-ticks span:first-child {
  text-align: left;
}

.survey-slider-ticks span:last-child {
  text-align: right;
}

.final-specimen-screen {
  padding-top: 26px;
}

.final-header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.final-header strong {
  color: var(--ink);
  font-weight: 500;
}

.vertical-specimen {
  position: relative;
  padding-top: 10px;
}

.rose-visual-final {
  min-height: 470px;
  border: 0;
  background: var(--bg);
}

.final-emotional-name {
  position: relative;
  z-index: 2;
  max-width: 300px;
  margin: 0 auto;
  padding: 20px 16px;
  background: var(--bg);
  text-align: center;
}

.specimen-stem {
  width: 1px;
  height: 84px;
  margin: 0 auto;
  background: #ffffff;
}

.stem-top {
  height: 44px;
  margin-top: -32px;
}

.stem-bottom {
  height: 120px;
}

.specimen-reference {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  min-height: 190px;
  align-items: center;
}

.specimen-reference:nth-of-type(even) .reference-image {
  grid-column: 2;
}

.specimen-reference:nth-of-type(even) .reference-copy {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

.reference-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.reference-line::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--bg);
}

.reference-image {
  position: relative;
  z-index: 2;
  min-height: 110px;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.result-reference-asset {
  min-height: 108px;
  border: 0;
}

.result-reference-asset .asset-placeholder {
  min-height: 108px;
  gap: 4px;
  padding: 10px 6px;
}

.result-reference-asset .asset-placeholder::before,
.result-reference-asset .asset-placeholder p {
  display: none;
}

.result-reference-asset .asset-placeholder strong {
  font-size: 7px;
}

.reference-image > span,
.reference-copy span,
.reference-copy small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
}

.reference-visual {
  display: block;
  height: 78px;
  margin-top: 7px;
  background: var(--bg);
  filter: grayscale(.25);
}

.ref-02 { clip-path: polygon(0 0, 100% 0, 100% 28%, 7% 38%, 100% 51%, 100% 100%, 0 100%); }
.ref-03 { filter: blur(1px) grayscale(.5); transform: scaleY(1.08); }
.ref-04 { background-size: 12px 100%, 100% 100%; opacity: .6; }

.reference-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reference-copy strong {
  font-size: 12px;
  font-weight: 500;
}

.specimen-label {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 24px 0 10px;
  border-top: 1px solid var(--line-strong);
}

.specimen-label div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.specimen-label span,
.specimen-label p {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}

.specimen-label strong {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
}

.specimen-label p {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 12px 25px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  pointer-events: none;
}

.dock:empty {
  display: none;
}

.dock-actions {
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, var(--max-width));
  gap: 8px;
  margin: 0 auto;
  pointer-events: auto;
}

.primary-action,
.secondary-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid #ffffff;
  background: var(--bg);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.secondary-action {
  border-color: var(--line-strong);
  background: var(--bg);
  color: #ffffff;
}

.rose-menu-overlay,
.confirmation-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom);
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(12px);
  animation: overlay-in 180ms ease-out;
}

@keyframes overlay-in {
  from { opacity: 0; }
}

.rose-menu-panel {
  width: min(100%, var(--max-width));
  min-height: 100%;
  padding: max(20px, env(safe-area-inset-top)) 25px 28px;
  overflow-y: auto;
  background: var(--bg);
}

.rose-menu-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 92px;
  border-bottom: 1px solid var(--line);
}

.rose-menu-head > div {
  width: 100%;
}

.rose-menu-head h2 {
  margin: 8px auto 0;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -.06em;
  text-align: center;
}

.menu-close {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-dim);
  font-size: 24px;
  font-weight: 200;
}

.rose-menu-nav {
  border-bottom: 1px solid var(--line);
}

.rose-menu-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.rose-menu-item:last-child {
  border-bottom: 0;
}

.menu-index,
.menu-arrow {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
}

.menu-index {
  justify-self: start;
}

.menu-arrow {
  justify-self: end;
}

.menu-label {
  font-size: 14px;
  letter-spacing: .03em;
}

.rose-menu-item:active .menu-label {
  color: #ffffff;
}

.rose-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 22px;
}

.test-preview-panel {
  margin-top: 26px;
  padding: 20px 0;
  border-top: 1px dotted #ffffff;
  border-bottom: 1px dotted #ffffff;
}

.home-test-preview {
  margin: 42px 0 24px;
  padding: 24px 0;
}

.home-test-preview h2 {
  margin: 12px auto 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.035em;
}

.home-test-preview > p {
  margin: 14px 0 20px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

.test-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.test-preview-button {
  min-height: 44px;
  padding: 8px;
  border: 1px solid #ffffff;
  background: var(--bg);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-align: center;
}

.menu-language {
  align-self: flex-start;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.menu-instagram {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 42px;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-decoration: none;
}

.menu-instagram:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 3px;
}

.rose-menu-foot > span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-align: center;
}

.rose-menu-foot .menu-copyright {
  font-size: 7px;
}

.confirmation-overlay {
  align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 25px max(18px, env(safe-area-inset-bottom));
}

.confirmation-card {
  width: min(100%, var(--max-width));
  max-height: min(720px, 92vh);
  padding: 28px 25px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.confirmation-card .rose-visual {
  min-height: 230px;
  margin: 18px 0;
}

.confirmation-card h2 {
  margin: 20px 0 10px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.04em;
}

.confirmation-card > p {
  margin: 0 0 22px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
}

.confirmation-card .primary-action {
  width: 100%;
}

.confirmation-card .text-button {
  width: 100%;
  margin-top: 8px;
}

.debug {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  max-height: 28vh;
  padding: 8px;
  overflow: auto;
  border-top: 1px solid #295;
  background: rgba(0,0,0,.95);
  color: #7f9;
  font: 10px/1.4 var(--mono);
}

/* Day 2: the operational path stays short; the long curatorial text remains
   on the dedicated project page. These rules do not alter the project page. */
.arrival-about-link {
  width: 100%;
  margin-top: 8px;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
}

.arrival-auto-note {
  margin: 12px auto 4px;
  color: var(--ink-faint);
  font: 10px/1.6 var(--mono);
  letter-spacing: .04em;
  text-align: center;
}

.primary-action:disabled,
.text-button:disabled {
  opacity: .45;
  cursor: wait;
}

.compact-setup-note {
  margin: 8px auto 0;
  text-align: center;
}

.home-quick-start {
  margin: 38px 0 24px;
  text-align: center;
}

.home-quick-start .intro-copy {
  max-width: 29em;
  margin: 16px auto 0;
}

.home-primary-modules {
  margin-top: 8px;
  border-top-color: #ffffff;
}

.home-primary-modules .module-index-row {
  min-height: 70px;
}

.home-primary-modules .module-index-row strong {
  font-size: 16px;
}

.home-short-route {
  margin-top: 20px;
}

.home-project-compact {
  margin: 36px 0 28px;
  padding: 28px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.home-project-compact h2 {
  text-align: center;
}

.home-project-compact > p {
  margin-right: auto;
  margin-left: auto;
  font-size: 15px;
  text-align: center;
}

.home-name-action {
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.home-name-action > strong {
  width: 100%;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

.module-quick-intro {
  margin-top: 28px;
  padding: 22px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.module-quick-intro > p {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

.module-quick-steps {
  margin-top: 24px;
  padding-top: 24px;
}

.quick-step-list {
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: quick-step;
}

.quick-step-list li {
  position: relative;
  min-height: 64px;
  padding: 18px 8px 18px 50px;
  border-top: 1px dotted var(--line);
  font-size: 16px;
  line-height: 1.6;
  counter-increment: quick-step;
}

.quick-step-list li:last-child {
  border-bottom: 1px dotted var(--line);
}

.quick-step-list li::before {
  position: absolute;
  top: 20px;
  left: 8px;
  color: var(--session);
  font: 11px/1 var(--mono);
  content: counter(quick-step, decimal-leading-zero);
}

.module-quick-note {
  margin: 16px auto 0 !important;
  color: #ffffff !important;
  font-family: var(--mono);
  font-size: 11px !important;
  text-align: center;
}

.module-anonymous-start {
  margin-top: 22px;
  padding: 18px 16px;
  border: 1px solid #ffffff;
  text-align: center;
}

.module-anonymous-start strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font: 12px/1.4 var(--mono);
  letter-spacing: .04em;
}

.module-anonymous-start p {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.65;
}

.module-full-story,
.module-name-optional,
.exit-optional-reflection {
  width: 100%;
  margin-top: 20px;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
}

.exit-missing-note {
  margin: 20px 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 360px) {
  .global-actions {
    gap: 10px;
  }

  .floorplan-stage {
    height: 440px;
  }

  .map-plane {
    width: 250px;
    height: 250px;
  }

  .map-hotspot strong {
    font-size: 7px;
  }

  .floorplan-route-order {
    gap: 3px;
  }

  .route-order-step {
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    flex-basis: 42px;
  }

  .route-order-step span {
    font-size: 7px;
    letter-spacing: 0;
  }

  .route-order-arrow {
    min-width: 6px;
    font-size: 11px;
  }

  .melbourne-provisional-plan {
    min-height: 310px;
  }

  .melbourne-map-marker {
    width: 40%;
    min-width: 96px;
    min-height: 68px;
    padding: 10px;
  }

  .melbourne-map-name {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Melbourne release accessibility overrides.
   This block must remain the final stylesheet block so legacy Seoul display
   rules cannot shrink essential controls or clip 200% zoom content. */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: visible;
  font-size: 16px;
}

.app,
.screen,
.module-screen,
.about-screen,
.final-specimen-screen {
  min-width: 0;
  max-width: 100%;
}

p,
li,
dd,
dt,
label,
summary,
button,
a {
  overflow-wrap: anywhere;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  min-width: 44px;
  min-height: 44px;
}

.micro-label,
.module-coordinate,
.visual-note,
.pattern-animation-index,
.pattern-animation-coordinate,
.access-venue-address {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.module-quick-note,
.input-note,
.pattern-entry-feedback,
.capture-fetch-status,
.result-capture-status,
.survey-scale-note,
.module-anonymous-start strong,
.capture-result-open,
.capture-result-save,
.result-capture-card-actions a,
.result-capture-card-actions button,
.capture-retry-button,
.text-button,
.language-button,
.menu-language,
.menu-instagram,
.about-to-top,
.input-group label,
.numbered-input label {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.primary-action,
.secondary-action {
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.pattern-entry-skip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 2;
  padding: 10px 12px;
  border: 1px solid #fff;
  color: #fff;
  background: #09090a;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.35;
}

.pattern-entry-skip:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #09090a, 0 0 0 8px #fff;
}

.inactive-tab-takeover,
.inactive-tab-reset {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #fff;
  color: #fff;
  background: #111;
  font: 14px/1.45 var(--mono);
}

.inactive-tab-takeover {
  margin-top: 30px;
}

.capture-result-actions,
.result-capture-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.capture-result-actions .capture-result-open,
.capture-result-actions .capture-result-save,
.result-capture-card-actions a,
.result-capture-card-actions button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 320px), (min-resolution: 2dppx) and (max-width: 640px) {
  .app {
    padding-right: 16px;
    padding-left: 16px;
  }

  .capture-result-actions,
  .result-capture-card-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-entry-transition-overlay .pattern-animation-stage {
    animation: none !important;
    transition: none !important;
  }
}

/* Melbourne visitor interface: final layout and accessibility overrides.
   Keep this block last. It supports the compact global controls, explicit
   connection step and provisional venue model added for the 2026 release. */

/* Every visible interactive control keeps a WCAG-sized activation area. */
:where(button, a[href], input, select, textarea, summary, [role="button"]) {
  min-width: 44px;
  min-height: 44px;
}

:where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* Compact, legible global actions. */
.global-header {
  gap: clamp(6px, 2.5vw, 14px);
}

.wordmark {
  min-width: 58px;
  flex: 1 1 auto;
}

.global-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.language-button,
.rose-menu-button {
  display: inline-flex;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.82);
  background: #111111;
  color: #ffffff;
}

.language-button {
  width: 44px;
  padding: 0;
}

.language-globe {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.language-globe::before,
.language-globe::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.language-globe::before {
  inset: 2px 6px;
  border-right: 1px solid currentColor;
  border-left: 1px solid currentColor;
  border-radius: 50%;
}

.language-globe::after {
  top: 50%;
  right: 2px;
  left: 2px;
  border-top: 1px solid currentColor;
  transform: translateY(-50%);
}

.rose-menu-button {
  width: auto;
  min-width: 70px;
  gap: 7px;
  padding: 0 10px;
}

.menu-trigger-symbol {
  font: 400 16px/1 var(--mono);
}

.menu-trigger-label {
  font: 600 10px/1.2 var(--mono);
  letter-spacing: .12em;
}

/* The language control opens a real modal chooser rather than cycling an
   unexplained abbreviation. The card remains scrollable at browser zoom. */
.language-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  min-width: 0;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow-y: auto;
  place-items: center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  overscroll-behavior: contain;
}

.language-dialog-card {
  display: grid;
  width: min(100%, 430px);
  max-height: calc(100dvh - 36px);
  gap: 12px;
  padding: clamp(22px, 7vw, 34px);
  overflow-y: auto;
  border: 1px solid #ffffff;
  background: #111111;
}

.language-dialog-card h2 {
  max-width: 18ch;
  margin: 4px auto 16px;
  font-family: var(--display);
  font-size: clamp(26px, 8vw, 36px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-align: center;
}

.language-choice,
.language-dialog-close {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.72);
  background: transparent;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}

.language-choice[aria-pressed="true"] {
  border-color: #ffffff;
  background: #ffffff;
  color: #111111;
  box-shadow: inset 0 0 0 2px #111111;
}

.language-dialog-close {
  margin-top: 8px;
  border-color: transparent;
  color: var(--ink-dim);
  font-size: 13px;
}

/* Menu labels create useful groups; whitespace replaces the former stack of
   rules so the menu remains easy to scan and reflow. */
.rose-menu-nav {
  display: grid;
  gap: 4px;
  padding: 18px 0 8px;
  border-bottom: 0;
}

.menu-group-label {
  margin: 20px 0 4px;
  padding: 8px 8px 4px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

.rose-menu-item {
  grid-template-columns: minmax(32px, auto) minmax(0, 1fr) minmax(32px, auto);
  min-width: 0;
  min-height: 52px;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 0;
}

.rose-menu-item:hover,
.rose-menu-item:focus-visible {
  background: rgba(255,255,255,.08);
}

.menu-label {
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rose-menu-foot {
  margin-top: 22px;
  padding-top: 0;
}

.menu-language,
.menu-instagram {
  padding: 10px 8px;
}

/* Viewing a work never implies connection. This panel makes the separate,
   explicit station claim prominent without changing its event handling. */
.station-connection-panel {
  margin: 48px 0 52px;
  padding: clamp(24px, 7vw, 34px);
  border: 1px solid rgba(255,255,255,.84);
  background: rgba(255,255,255,.025);
  text-align: center;
}

.station-connection-panel h2 {
  max-width: 18ch;
  margin: 14px auto 16px;
  font-family: var(--display);
  font-size: clamp(25px, 7.5vw, 34px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.station-connection-instruction {
  max-width: 32em;
  margin: 0 auto;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.7;
}

.station-connection-panel .direct-station-entry {
  margin-top: 24px;
}

.station-connection-feedback {
  margin: 18px auto 0;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .035em;
  line-height: 1.55;
}

.station-connection-feedback:empty {
  display: none;
}

.station-connection-feedback.is-busy {
  color: var(--session);
}

.station-connection-panel[data-state="connecting"] .direct-station-entry {
  opacity: .62;
  cursor: wait;
}

/* The venue dimensions and work positions are intentionally provisional.
   This is a rectangular room model, not a claim about the final site plan. */
.melbourne-floorplan-section {
  margin: 58px 0 64px;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}

.melbourne-floorplan-warning {
  margin-bottom: 28px;
}

.floorplan-route-order {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
  margin: 28px 0 24px;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}

.route-order-arrow {
  display: none;
}

.route-order-step {
  width: auto;
  min-width: 44px;
  min-height: 56px;
  padding: 7px 4px;
  flex: none;
}

.melbourne-floorplan-stage {
  position: relative;
  isolation: isolate;
  height: clamp(340px, 105vw, 460px);
  margin: 20px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.065), transparent 52%),
    #0d0d0d;
  perspective: 900px;
  perspective-origin: 50% 42%;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  overscroll-behavior-x: contain;
}

.melbourne-floorplan-stage:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

.melbourne-rectangular-rotor {
  --room-wall-height: 64px;
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  width: min(82%, 340px);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%) rotateX(var(--plan-tilt, 42deg)) rotateZ(var(--plan-angle, 0deg));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 80ms linear;
}

.melbourne-floorplan-stage.is-dragging .melbourne-rectangular-rotor {
  transition: none;
}

.melbourne-room-floor {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #ffffff;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    #171717;
  background-size: 24px 24px;
  box-shadow: 0 22px 30px rgba(0,0,0,.72);
  transform: translateZ(0);
  backface-visibility: visible;
}

.melbourne-room-label {
  max-width: 68%;
  padding: 8px 10px;
  background: rgba(17,17,17,.88);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.45;
  text-align: center;
}

.melbourne-rectangular-walls {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  pointer-events: none;
}

.melbourne-room-wall {
  position: absolute;
  display: block;
  border: 1px solid rgba(17,17,17,.9);
  background: linear-gradient(180deg, #f4f4f4, #8e8e8e);
  box-shadow: 0 5px 12px rgba(0,0,0,.38);
  backface-visibility: visible;
}

.melbourne-room-wall.wall-north,
.melbourne-room-wall.wall-south {
  left: 0;
  width: 100%;
  height: var(--room-wall-height);
}

.melbourne-room-wall.wall-north {
  top: 0;
  transform: rotateX(90deg);
  transform-origin: 50% 0;
}

.melbourne-room-wall.wall-south {
  bottom: 0;
  transform: rotateX(-90deg);
  transform-origin: 50% 100%;
}

.melbourne-room-wall.wall-east,
.melbourne-room-wall.wall-west {
  top: 0;
  width: var(--room-wall-height);
  height: 100%;
}

.melbourne-room-wall.wall-east {
  right: 0;
  transform: rotateY(90deg);
  transform-origin: 100% 50%;
}

.melbourne-room-wall.wall-west {
  left: 0;
  transform: rotateY(-90deg);
  transform-origin: 0 50%;
}

.melbourne-confirmed-marker {
  position: absolute;
  z-index: 4;
  display: flex;
  width: min(112px, 34%);
  min-width: 44px;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid #ffffff;
  background: rgba(17,17,17,.94);
  color: #ffffff;
  text-align: center;
  transform: translate(-50%, -50%) translateZ(68px);
  backface-visibility: visible;
}

.melbourne-confirmed-marker.is-visited,
.melbourne-confirmed-marker.is-connected {
  border-color: var(--session);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 18px var(--session);
}

.melbourne-confirmed-marker .melbourne-map-number {
  font-size: 12px;
}

.melbourne-confirmed-marker .melbourne-map-name {
  max-width: 100%;
  font-size: 10px;
  line-height: 1.25;
}

.melbourne-floorplan-stage .turntable-ui {
  gap: 8px;
  align-items: flex-end;
  padding-top: 0;
  border-top: 0;
  line-height: 1.45;
}

.melbourne-floorplan-stage .view-mode,
.melbourne-floorplan-stage .frame-counter {
  max-width: 68%;
  overflow-wrap: anywhere;
}

.floorplan-view-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
  margin: 12px 0 30px;
}

.floorplan-view-controls button {
  display: flex;
  width: 100%;
  min-width: 44px;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border: 1px solid rgba(255,255,255,.7);
  background: transparent;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .035em;
  line-height: 1.3;
  text-align: center;
}

.venue-access-tbc {
  display: grid;
  gap: 0;
  margin: 32px 0 0;
}

.venue-access-tbc > div {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(8rem, .7fr);
  gap: 18px;
  padding: 14px 0;
}

.venue-access-tbc > div + div {
  border-top: 1px dotted rgba(255,255,255,.52);
}

.venue-access-tbc dt,
.venue-access-tbc dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.venue-access-tbc dt {
  font-family: var(--mono);
}

.venue-access-tbc dd {
  color: var(--ink-dim);
  text-align: right;
}

/* Spacious content grouping replaces repeated ornamental separators. */
.screen {
  padding-bottom: 56px;
}

.home-project-compact,
.module-quick-intro,
.home-direct-actions,
.result-next-actions {
  border-top: 0;
  border-bottom: 0;
}

.home-project-compact {
  margin-top: 48px;
  margin-bottom: 0;
  padding: 0;
}

.home-quick-start,
.home-direct-actions,
.result-next-actions {
  margin-top: 52px;
}

.module-quick-intro,
.module-quick-steps,
.troubleshooting-block {
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
}

.quick-step-list {
  gap: 10px;
}

.quick-step-list li {
  border-top: 0;
}

.quick-step-list li:last-child {
  border-bottom: 0;
}

/* Visitor-selected larger text persists through body.large-text. */
body.large-text {
  font-size: 20px;
  line-height: 1.65;
}

body.large-text .screen :is(p, li, dd, dt, label, summary),
body.large-text .arrival-cover :is(p, li, dd, dt, label, summary),
body.large-text .confirmation-card > p,
body.large-text .language-dialog-card :is(p, label) {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

body.large-text :is(.arrival-auto-note, .arrival-summary > p,
  .arrival-access-summary p, .phone-data-notice p) {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

body.large-text :is(button, a, input, select, textarea, summary) {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

body.large-text :is(.micro-label, .module-coordinate, .visual-note,
  .menu-index, .menu-arrow, .module-number, .visit-status, .module-code,
  .connection-state, .personal-copy small, .view-mode, .frame-counter,
  .melbourne-room-label, .station-connection-feedback) {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.large-text :is(.screen-title, .module-title-display) {
  max-width: 100%;
  font-size: clamp(2.15rem, 10vw, 3.15rem);
  line-height: 1.12;
}

body.large-text .menu-trigger-label {
  font-size: 16px !important;
}

body.large-text .menu-label,
body.large-text .language-choice,
body.large-text .station-connection-instruction,
body.large-text .floorplan-view-controls button {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

body.large-text .menu-group-label {
  font-size: 15px;
}

body.large-text .personal-copy strong {
  font-size: 21px;
  line-height: 1.35;
  white-space: normal;
}

body.large-text .global-header {
  flex-wrap: wrap;
}

body.large-text .wordmark {
  flex-basis: 100%;
}

body.large-text .global-actions {
  width: 100%;
  justify-content: flex-end;
}

body.large-text .rose-menu-button {
  min-width: 94px;
}

body.large-text .venue-access-tbc > div {
  grid-template-columns: 1fr;
  gap: 4px;
}

body.large-text .venue-access-tbc dd {
  text-align: left;
}

/* Reflow cleanly at narrow CSS viewports, including approximately 200% zoom
   on a phone-sized display. No operational or capture controls are hidden. */
@media (max-width: 360px) {
  .app,
  .rose-menu-panel {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .global-header {
    gap: 6px;
  }

  .global-actions {
    gap: 5px;
  }

  .rose-menu-button {
    min-width: 62px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .menu-trigger-label {
    letter-spacing: .06em;
  }

  .language-dialog-overlay {
    padding-right: 10px;
    padding-left: 10px;
  }

  .language-dialog-card {
    padding: 20px 16px;
  }

  .rose-menu-item {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .personal-header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .personal-rose {
    width: 48px;
    height: 48px;
  }

  .personal-header .connection-state,
  .personal-header .header-arrow {
    grid-column: 2;
    justify-self: start;
  }

  .station-connection-panel {
    padding: 24px 16px;
  }

  .melbourne-floorplan-stage {
    height: clamp(310px, 125vw, 390px);
  }

  .melbourne-rectangular-rotor {
    --room-wall-height: 48px;
    width: 86%;
  }

  .floorplan-view-controls {
    grid-template-columns: repeat(2, minmax(44px, 1fr));
  }

  .venue-access-tbc > div,
  .result-summary dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .venue-access-tbc dd {
    text-align: left;
  }

  .capture-result-actions,
  .result-capture-card-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 260px) {
  .global-header {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .wordmark {
    flex-basis: 100%;
  }

  .global-actions {
    width: 100%;
    justify-content: space-between;
  }

  .rose-menu-button {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .melbourne-rectangular-rotor {
    transition: none;
  }
}

/* Melbourne review v5 — restore the visual Seoul navigation language while
   keeping the verified Melbourne connection and capture contracts intact. */
.global-header {
  border-bottom: 0;
}

.wordmark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
}

.wordmark-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.wordmark-rose {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--session);
}

.arrival-festival {
  max-width: 14em;
  margin: 38px auto 18px;
  color: #ffffff;
  font-family: var(--display);
  font-size: clamp(22px, 7vw, 32px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-align: center;
}

.stacked-action-label {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.stacked-action-label strong,
.stacked-action-label small {
  display: block;
  font: inherit;
}

.stacked-action-label small {
  font-size: .82em;
  opacity: .8;
}

.arrival-summary,
.arrival-access-summary,
.phone-data-notice,
.project-intro,
.home-direct-actions,
.module-info-block,
.about-section {
  border-top: 0;
  border-bottom: 0;
}

.arrival-summary,
.arrival-access-summary {
  margin-top: 48px;
  margin-bottom: 48px;
  padding: 0;
}

.arrival-access-summary {
  padding-left: 18px;
  border-left: 4px solid var(--session);
}

.phone-data-notice {
  margin: 44px 0 12px;
  padding: 0;
}

.phone-data-notice > .disclosure {
  margin: 0;
}

.phone-data-details h2 {
  margin: 4px 0 20px;
  font-size: 22px;
}

.rose-name-journey-note {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.home-project-compact {
  margin-bottom: 74px;
}

.melbourne-floorplan-section {
  margin-top: 0;
}

.floorplan-route-order {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin: 30px 0 28px;
  padding: 0 0 6px;
  overflow-x: auto;
  border: 0;
  scrollbar-width: thin;
}

.route-order-step {
  width: 52px;
  min-width: 52px;
  min-height: 58px;
  flex: 0 0 52px;
  padding: 7px 4px;
  border-color: rgba(255,255,255,.76);
}

.route-order-step.is-visited {
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
  box-shadow: 0 0 0 2px #0b0b0b, 0 0 18px var(--session);
}

.route-order-arrow {
  display: block;
  min-width: 14px;
  flex: 0 0 14px;
  font-size: 17px;
}

.floorplan-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
}

.floorplan-tabs button {
  width: 100%;
  min-height: 52px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.72);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.35;
  text-align: center;
}

.floorplan-tabs button[aria-selected="true"] {
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
  font-weight: 700;
}

.floorplan-tab-panel[hidden] {
  display: none;
}

.work-list-tab-panel {
  min-height: 310px;
  padding-top: 12px;
}

.work-list-tab-panel .module-index-list {
  margin-top: 0;
}

.melbourne-floorplan-stage {
  background: #0d0d0d;
}

.melbourne-room-floor {
  background: #171717;
}

.melbourne-room-wall {
  background: #d8d8d8;
}

.melbourne-confirmed-marker {
  width: min(92px, 29%);
  min-height: 54px;
  padding: 7px 5px;
}

.melbourne-confirmed-marker::before {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--session);
  box-shadow: 0 0 12px var(--session);
  content: '';
}

.melbourne-confirmed-marker.is-visited,
.melbourne-confirmed-marker.is-connected {
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
}

.melbourne-confirmed-marker.is-visited::before,
.melbourne-confirmed-marker.is-connected::before {
  background: var(--session-ink);
  box-shadow: none;
}

.melbourne-confirmed-marker.is-visited .melbourne-map-status,
.melbourne-confirmed-marker.is-connected .melbourne-map-status {
  color: var(--session-ink);
}

.melbourne-map-status {
  max-width: 100%;
  overflow: visible;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.melbourne-map-name {
  max-width: 100%;
  overflow: visible;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.route-step-status {
  display: block;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .045em !important;
  line-height: 1.2;
  white-space: normal !important;
}

.floorplan-tab-panel > .disclosure {
  margin-top: 34px;
}

.venue-access-tbc {
  margin-top: 0;
}

.module-title-block {
  margin-bottom: 34px;
}

.module-hero {
  margin-bottom: 46px;
}

.module-asset .asset-image:not([hidden]) {
  display: block;
  object-fit: contain;
}

.module-image-translation {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  left: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(0,0,0,.92);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.module-quick-intro {
  margin-top: 0;
  margin-bottom: 22px;
}

.module-full-story {
  margin-top: 0;
  margin-bottom: 54px;
  color: #ffffff;
}

.station-connection-panel {
  margin: 54px 0 60px;
  padding: 0;
  border: 0;
  background: transparent;
}

.station-connection-panel .direct-station-entry {
  width: 100%;
  min-height: 66px;
  margin: 0;
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
  font-size: 14px;
  font-weight: 700;
}

.station-connection-panel > .connected-banner {
  min-height: 58px;
  margin-bottom: 14px;
  border-top: 1px dotted #ffffff;
}

.station-connection-feedback {
  margin-top: 14px;
}

.station-connection-feedback:empty {
  display: none;
}

.module-quick-steps,
.troubleshooting-block,
.module-capture-panel {
  margin-top: 64px;
}

.troubleshooting-no-phone strong {
  color: var(--session);
}

.home-direct-actions,
.about-section,
.about-page-end {
  margin-top: 76px;
}

.about-section + .about-section {
  padding-top: 0;
  border-top: 0;
}

.about-deeper-copy {
  gap: 22px;
}

.about-deeper-copy p {
  line-height: 1.82;
}

.rose-menu-foot > span,
.rose-menu-foot .menu-copyright {
  font-size: 12px;
  line-height: 1.5;
}

body.large-text :is(.route-step-status, .melbourne-map-name, .melbourne-map-status,
  .module-image-translation, .rose-menu-foot > span, .rose-menu-foot .menu-copyright) {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

@media (max-width: 520px) {
  .floorplan-route-order {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }

  .route-order-arrow {
    display: none;
  }

  .route-order-step {
    width: 100%;
    min-width: 0;
    min-height: 70px;
    padding: 9px 6px;
  }

  .route-order-step > span:not(.route-step-status) {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .route-order-exit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .wordmark {
    min-width: 0;
  }

  .wordmark-rose {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .wordmark-copy {
    font-size: 10px;
  }

  .melbourne-confirmed-marker {
    width: min(86px, 30%);
    min-height: 50px;
  }

  .melbourne-confirmed-marker .melbourne-map-name {
    font-size: 12px;
  }

  .floorplan-route-order {
    margin-right: 0;
    padding-right: 0;
  }
}

/* Melbourne review v6 — restore the approved hierarchy and Seoul floor-plan
   grammar without changing station, capture or Supabase contracts. */
.wordmark-fringe {
  font-size: .72em;
  letter-spacing: .16em;
}

.primary-action,
.text-button {
  position: relative;
  justify-content: center;
  text-align: center;
}

.primary-action {
  padding-right: 46px;
  padding-left: 46px;
}

.primary-action > span[aria-hidden="true"] {
  position: absolute;
  right: 18px;
}

.text-button {
  min-width: min(100%, 220px);
  padding-right: 34px;
  padding-left: 34px;
}

.text-button > span[aria-hidden="true"] {
  position: absolute;
  right: 8px;
}

.stacked-action-label {
  align-items: center;
  text-align: center;
}

.arrival-phone-primary {
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
}

.arrival-about-link {
  margin-top: 10px;
  margin-bottom: 54px;
}

.arrival-access-summary {
  margin-top: 0;
}

.rose-setup-guidance {
  display: grid;
  min-height: clamp(160px, 24vh, 240px);
  place-content: center;
  gap: 14px;
  padding: 28px 0 34px;
  text-align: center;
}

.rose-setup-guidance p {
  max-width: 32em;
  margin: 0 auto;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.7;
}

.rose-setup-guidance p > span {
  display: block;
}

.floorplan-route-order {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: 30px 0 28px;
    padding: 0;
    overflow: visible;
    border: 0;
    scrollbar-width: none;
}

.floorplan-route-order::-webkit-scrollbar {
    display: none;
}

.route-order-step {
    position: relative;
    display: grid;
    width: 40px;
    min-width: 36px;
    min-height: 44px;
    flex: 1 1 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font: 500 13px/1 var(--mono);
}

.route-order-step.is-visited {
    background: var(--session);
    color: var(--session-ink);
    box-shadow: 0 0 16px color-mix(in srgb, var(--session) 70%, transparent);
}

.route-step-check {
    position: absolute;
    top: -3px;
    right: -1px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #0b0b0b;
    color: #ffffff;
    font-size: 10px;
}

.route-order-arrow {
    display: block;
    min-width: 8px;
    flex: 0 1 10px;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    text-align: center;
}

.route-order-exit {
    grid-column: auto;
}

.melbourne-floorplan-stage.is-idle:not(.has-interacted) .melbourne-rectangular-rotor {
  animation: floorplan-idle-drift 9s ease-in-out infinite alternate;
}

@keyframes floorplan-idle-drift {
  from {
    transform: translate(-50%, -50%) rotateX(var(--plan-tilt, 42deg)) rotateZ(calc(var(--plan-angle, 0deg) - 2deg));
  }
  to {
    transform: translate(-50%, -50%) rotateX(var(--plan-tilt, 42deg)) rotateZ(calc(var(--plan-angle, 0deg) + 2deg));
  }
}

.melbourne-floorplan-stage.has-interacted .melbourne-rectangular-rotor,
.melbourne-floorplan-stage.is-dragging .melbourne-rectangular-rotor,
body.reduce-motion .melbourne-floorplan-stage .melbourne-rectangular-rotor {
  animation: none;
}

.floorplan-drag-hint {
  position: absolute;
  left: 50%;
  bottom: 56px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(8,8,8,.9);
  color: #ffffff;
  font: 10px/1.2 var(--mono);
  letter-spacing: .08em;
  transform: translateX(-50%);
  pointer-events: none;
}

.floorplan-drag-hint[hidden] {
  display: none;
}

.floorplan-hand-icon {
  font-size: 19px;
  line-height: 1;
}

.floorplan-angle-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.floorplan-reset-icon {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  color: #ffffff;
  font-size: 21px;
}

.floorplan-reset-corner {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 12;
  background: rgba(8,8,8,.9);
  pointer-events: auto;
}

.melbourne-confirmed-marker {
  width: min(76px, 25%);
  min-height: 48px;
  padding: 6px 5px;
  border-style: dashed;
  background: rgba(12,12,12,.96);
  transform: translate(-50%, -50%) translateZ(76px);
}

.melbourne-confirmed-marker.is-visited,
.melbourne-confirmed-marker.is-connected {
  border-style: solid;
  background: var(--session);
}

.melbourne-map-name {
  font-size: 10px;
}

.melbourne-map-check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #0b0b0b;
  color: #ffffff;
  font-size: 12px;
}

.melbourne-marker-footprint,
.melbourne-marker-stem {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.melbourne-marker-footprint {
  width: 22px;
  height: 22px;
  border: 1px dashed rgba(255,255,255,.76);
  border-radius: 50%;
  background: #0d0d0d;
  transform: translate(-50%, -50%) translateZ(3px);
}

.melbourne-marker-footprint::after {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.76);
  content: '';
}

.melbourne-marker-footprint.is-visited,
.melbourne-marker-footprint.is-connected {
  border-color: var(--session);
  box-shadow: 0 0 12px var(--session);
}

.melbourne-marker-footprint.is-visited::after,
.melbourne-marker-footprint.is-connected::after {
  background: var(--session);
}

.melbourne-marker-stem {
  width: 1px;
  height: 76px;
  border-left: 1px dashed rgba(255,255,255,.72);
  transform: translate(-50%, -100%) rotateX(-90deg);
  transform-origin: 50% 100%;
}

.melbourne-marker-stem.is-visited,
.melbourne-marker-stem.is-connected {
  border-left-style: solid;
  border-left-color: var(--session);
  box-shadow: 0 0 8px var(--session);
}

.floorplan-permanent-fixtures {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform-style: preserve-3d;
  pointer-events: none;
}

.floorplan-permanent-fixture {
  position: absolute;
  display: grid;
  min-width: 58px;
  place-items: center;
  gap: 3px;
  color: #ffffff;
  text-align: center;
  transform: translate(-50%, -50%) translateZ(42px);
}

.floorplan-fixture-label {
  max-width: 92px;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(9,9,9,.94);
  font: 7px/1.25 var(--mono);
  letter-spacing: .04em;
}

.floorplan-rose-installation {
  min-width: 0;
  transform: translate(-50%, -100%) translateZ(3px) rotateX(-90deg);
  transform-origin: 50% 100%;
}

.floorplan-standing-rose {
  position: relative;
  display: block;
  width: 66px;
  height: 88px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--session) 82%, transparent));
}

.floorplan-standing-rose::before {
  position: absolute;
  z-index: 0;
  bottom: 5px;
  left: 50%;
  width: 2px;
  height: 62px;
  background: color-mix(in srgb, var(--session) 82%, #ffffff 18%);
  box-shadow: 0 0 6px var(--session);
  content: '';
  transform: translateX(-50%);
}

.floorplan-standing-rose-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.12) brightness(1.24);
}

.floorplan-standing-rose-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: var(--session);
  opacity: .76;
  mix-blend-mode: color;
  -webkit-mask: url('./assets/images/rose_specimen.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
  mask: url('./assets/images/rose_specimen.png?v=melbourne-onsite-v15-20261003') center / contain no-repeat;
}

.floorplan-entry-fixture {
  min-width: 112px;
  transform: translate(-50%, -8%) translateZ(64px);
}

.floorplan-entry-symbol {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #ffffff;
  background: #0b0b0b;
  color: var(--session);
  font: 700 18px/1 var(--mono);
}

.melbourne-floorplan-stage.show-access-entry-exit .floorplan-entry-fixture {
  filter: drop-shadow(0 0 10px var(--session));
}

.melbourne-floorplan-stage.show-access-entry-exit .floorplan-entry-fixture .floorplan-fixture-label {
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
}

.floorplan-access-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  transform: translateZ(86px);
  transform-style: preserve-3d;
  pointer-events: none;
}

.access-preview-route-segment,
.access-preview-route-node,
.access-preview-route-arrow,
.access-preview-point,
.access-preview-label {
  position: absolute;
  transition: opacity 180ms ease;
}

.access-preview-route-segment {
  height: 0;
  border-top: 3px dashed var(--session);
  filter: drop-shadow(0 0 3px var(--session));
  opacity: 0;
  transform-origin: 0 50%;
}

.access-preview-route-node {
  width: 10px;
  height: 10px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--session);
  box-shadow: 0 0 7px var(--session);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.access-preview-route-arrow {
  z-index: 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--session);
  color: var(--session-ink);
  font: 700 15px/1 var(--mono);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.access-preview-point {
  max-width: 142px;
  padding: 4px 6px;
  border: 1px dashed rgba(255,255,255,.84);
  background: rgba(9,9,9,.94);
  color: #ffffff;
  font: 8px/1.35 var(--mono);
  letter-spacing: .04em;
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

.access-entry,
.access-exit {
  transform: translate(0, -50%);
}

.access-toilet {
  max-width: 112px;
  transform: translate(-100%, 0);
}

.access-courtyard {
  transform: translate(0, 0);
}

.access-toilet,
.access-courtyard,
.access-preview-label {
  opacity: 0;
}

.access-preview-label {
  left: 50%;
  top: 52%;
  padding: 5px 7px;
  background: rgba(9,9,9,.9);
  color: var(--session);
  font: 8px/1.3 var(--mono);
  text-align: center;
  transform: translate(-50%, -50%);
}

.melbourne-floorplan-stage.show-access-entry-exit .access-entry-exit,
.melbourne-floorplan-stage.show-access-route .access-layer-route,
.melbourne-floorplan-stage.show-access-toilet .access-layer-toilet,
.melbourne-floorplan-stage.show-access-courtyard .access-layer-courtyard {
  opacity: 1;
}

.access-preview-warning {
  margin: 4px 0 24px !important;
  color: #ffffff !important;
}

.access-layer-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.access-layer-button {
  min-height: 52px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.72);
  background: transparent;
  color: #ffffff;
  font: 600 10px/1.35 var(--mono);
  letter-spacing: .04em;
  text-align: center;
}

.access-layer-button[aria-pressed="true"] {
  border-color: var(--session);
  background: var(--session);
  color: var(--session-ink);
}

.access-layer-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.access-layer-status {
  min-height: 1.5em;
  margin: 0 0 12px;
  color: var(--ink-dim);
  font: 11px/1.5 var(--mono);
  text-align: center;
}

.about-section-media {
  margin: 34px 0 30px;
}

.about-section-media .asset-frame {
  min-height: clamp(220px, 70vw, 420px);
}

.about-section-media .asset-image {
  display: block;
  object-fit: contain;
}

.about-section-media figcaption {
  margin-top: 10px;
  color: var(--ink-faint);
  font: 11px/1.5 var(--mono);
  letter-spacing: .04em;
  text-align: center;
}

.troubleshooting-block + .module-capture-panel {
  border-top: 0;
}

.survey-question-list {
  margin-top: 48px;
}

.survey-question-section {
  margin: 0 0 52px;
  padding: 0 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.82);
}

.survey-screen .survey-choice-question {
  margin: 0;
  padding: 0;
  border: 0;
}

.survey-screen .survey-choice-question legend,
.survey-screen .survey-text-question label {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.65;
}

.survey-screen .survey-choice-endpoints {
  margin-bottom: 14px;
}

.survey-screen .survey-number-option input:checked + span {
  border: 1px solid #ffffff;
  box-shadow: none;
}

.survey-screen .survey-text-question {
  margin: 4px 0 0;
  padding: 0 0 48px;
  border-top: 0;
  border-bottom: 1px solid rgba(255,255,255,.82);
}

.result-name-inline {
  margin: 16px auto 30px;
}

@media (max-width: 520px) {
  .access-layer-controls {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .melbourne-floorplan-stage .melbourne-rectangular-rotor {
    animation: none !important;
  }

  .access-preview-route-segment,
  .access-preview-route-node,
  .access-preview-point,
  .access-preview-label {
    transition: none;
  }
}

/* Melbourne review v10. Keep these final so older responsive rules cannot
   restore circular route controls or shrink the single Work List title. */
.floorplan-route-order .route-order-step {
  min-height: 48px;
  padding: 7px 3px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 0;
  background: transparent;
}

.floorplan-route-order .route-order-step.is-visited {
  border-color: var(--session);
  background: var(--session);
}

.work-list-tab-panel .work-list-row {
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  min-height: 82px;
  padding: 14px 0;
}

.work-list-tab-panel .work-list-row .work-list-title {
  font-size: clamp(1.35rem, 5.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .025em;
  text-align: center;
}

.work-list-tab-panel .work-list-row .visit-status {
  width: 64px;
  justify-self: end;
  text-align: right;
}

/* Melbourne on-site revision, 02 Oct 2026. Landing disclosures stay closed
   until requested; the full data notice remains nested inside the notice. */
.arrival-access-summary {
  margin: 12px 0 18px;
  padding: 0;
  border-left: 0;
}

.arrival-access-summary > .disclosure {
  margin: 0;
}

.arrival-notice-details {
  gap: 14px;
}

.arrival-notice-details > .disclosure {
  margin-top: 18px;
}

/* Work markers read as wall-mounted screens while remaining legible through
   the rotating floor-plan view. */
.melbourne-confirmed-marker[data-wall] {
  border-width: 2px;
  box-shadow: 0 5px 0 rgba(255,255,255,.16);
}

@media (max-width: 520px) {
  .floorplan-route-order .route-order-step {
    width: 40px;
    min-width: 36px;
    min-height: 48px;
    flex: 1 1 40px;
    padding: 6px 2px;
  }

  .floorplan-route-order .route-order-arrow {
    min-width: 8px;
    flex: 0 0 8px;
  }
}