.ar-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.gps-page {
  position: fixed;
  inset: 0;
}

.poster-scan-page {
  position: fixed;
  inset: 0;
}

.model-viewer-page {
  position: fixed;
  inset: 0;
}

.room-page {
  position: fixed;
  inset: 0;
}

.browser-page {
  position: fixed;
  inset: 0;
}

.web-browser-page {
  position: fixed;
  inset: 0;
}

.internet-browser-page {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 122, 0, 0.22), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255, 210, 63, 0.2), transparent 24%),
    linear-gradient(145deg, #0F1A33, #1B2B4D 58%, #0B1226);
}

#model-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background: #000;
}

#room-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background: #000;
}

#browser-video,
.browser-camera-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background: #0F1A33;
}

#web-browser-video,
.web-browser-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background: #0F1A33;
}

.web-browser-backdrop {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 122, 0, 0.26), transparent 28%),
    radial-gradient(circle at 76% 18%, rgba(255, 210, 63, 0.22), transparent 24%),
    linear-gradient(145deg, #0B1226, #1D2E52 54%, #0C1430);
}

.web-browser-backdrop span {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 34px;
  font-weight: 900;
}

.web-browser-page.camera-on .web-browser-backdrop {
  display: none;
}

.web-browser-shell {
  position: fixed;
  z-index: 12;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 92px);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.42));
}

.web-browser-top,
.web-browser-hero,
.web-browser-checks div,
.web-browser-controls,
.web-browser-card,
.web-browser-empty,
.web-browser-sheet,
.web-browser-onboarding > div,
.web-browser-dock {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(16, 33, 42, 0.84);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.web-browser-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.web-browser-top .back-link,
.web-browser-top button,
.web-browser-hero button,
.web-browser-card-actions button,
.web-browser-card-actions a,
.web-browser-sheet a,
.web-sheet-close,
.web-browser-onboarding button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.web-browser-top .back-link {
  background: rgba(255, 255, 255, 0.14);
}

.web-browser-top strong,
.web-browser-card h2,
.web-browser-sheet h2,
.web-browser-onboarding h2 {
  display: block;
  margin: 0;
}

.web-browser-top strong {
  font-size: 18px;
}

.web-browser-top span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.web-browser-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  background:
    linear-gradient(135deg, rgba(255, 122, 0, 0.86), rgba(16, 33, 42, 0.9)),
    rgba(16, 33, 42, 0.86);
}

.web-browser-hero p,
.web-browser-hero h1,
.web-browser-hero span {
  margin: 0;
}

.web-browser-hero p,
.web-browser-card p,
.web-browser-sheet p,
.web-browser-onboarding p {
  color: #FFD23F;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.web-browser-hero h1 {
  margin-top: 4px;
  font-size: clamp(27px, 7vw, 48px);
  line-height: 0.98;
}

.web-browser-hero span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.38;
}

.web-browser-hero button {
  color: #16213E;
  background: #ffffff;
}

.web-browser-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.web-browser-checks div {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.web-browser-checks div.ok {
  border-color: rgba(24, 211, 153, 0.52);
  background: rgba(16, 80, 64, 0.66);
}

.web-browser-checks strong {
  font-size: 12px;
}

.web-browser-checks span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
}

.web-browser-controls {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.web-browser-controls label {
  display: grid;
  gap: 6px;
}

.web-browser-controls label span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.web-browser-controls input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font: inherit;
  outline: none;
}

.web-browser-controls input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.web-browser-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.web-browser-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.web-browser-tabs button.active {
  color: #16213E;
  background: #FFD23F;
}

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

.web-browser-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px;
  overflow: hidden;
}

.web-browser-card::before {
  position: absolute;
  right: -22px;
  top: -28px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 122, 0, 0.18);
  content: "";
}

.web-browser-card.scan::before {
  background: rgba(255, 210, 63, 0.22);
}

.web-browser-card.learn::before {
  background: rgba(79, 135, 220, 0.22);
}

.web-favorite {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px;
}

.web-favorite.active {
  color: #16213E;
  background: #FFD23F;
}

.web-browser-card p,
.web-browser-card h2,
.web-browser-card span {
  margin: 0;
}

.web-browser-card h2 {
  padding-right: 34px;
  font-size: 19px;
  line-height: 1.08;
}

.web-browser-card span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.36;
}

.web-browser-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.web-browser-needs small {
  border-radius: 999px;
  padding: 5px 7px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  font-size: 10px;
  font-weight: 800;
}

.web-browser-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.web-browser-card-actions button {
  background: rgba(255, 255, 255, 0.14);
}

.web-browser-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 18px;
}

.web-browser-sheet {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  display: grid;
  gap: 10px;
  width: min(540px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 16px;
  color: #ffffff;
}

.web-browser-sheet.is-hidden,
.web-browser-onboarding.is-hidden {
  display: none;
}

.web-sheet-close {
  justify-self: end;
  background: rgba(255, 255, 255, 0.14);
}

.web-browser-sheet p,
.web-browser-sheet h2,
.web-browser-sheet span,
.web-browser-sheet strong,
.web-browser-sheet ol {
  margin: 0;
}

.web-browser-sheet h2 {
  font-size: 30px;
  line-height: 1;
}

.web-browser-sheet span,
.web-browser-sheet li {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.42;
}

.web-browser-sheet strong {
  margin-top: 6px;
  color: #ffffff;
}

.web-browser-sheet ol {
  padding-left: 20px;
}

.web-browser-onboarding {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
}

.web-browser-onboarding > div {
  display: grid;
  gap: 10px;
  width: min(440px, 100%);
  padding: 22px;
}

.web-browser-onboarding p,
.web-browser-onboarding h2,
.web-browser-onboarding span {
  margin: 0;
}

.web-browser-onboarding h2 {
  font-size: clamp(32px, 9vw, 54px);
  line-height: 0.96;
}

.web-browser-onboarding span {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.web-browser-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(560px, calc(100vw - 24px));
  gap: 6px;
  transform: translateX(-50%);
  padding: 6px;
}

.web-browser-dock a {
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 900;
}

.web-browser-dock a[aria-current="page"] {
  color: #16213E;
  background: #FFD23F;
}

.internet-browser-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 10px;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 82px);
  color: #ffffff;
}

.internet-browser-top,
.internet-address,
.internet-tabs,
.internet-panel,
.internet-preview,
.internet-dock {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(16, 33, 42, 0.84);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.internet-browser-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.internet-browser-top .back-link,
.internet-browser-top button,
.internet-address button,
.internet-card button,
.internet-preview-bar a,
.internet-dock button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.internet-browser-top .back-link {
  background: rgba(255, 255, 255, 0.14);
}

.internet-browser-top strong {
  display: block;
  font-size: 18px;
}

.internet-browser-top span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.internet-address {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
}

.internet-address label {
  display: grid;
  gap: 6px;
}

.internet-address label span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.internet-address input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font: inherit;
  outline: none;
}

.internet-address input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.internet-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
}

.internet-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.internet-tabs button.active {
  color: #16213E;
  background: #FFD23F;
}

.internet-panel {
  min-height: 112px;
  padding: 10px;
}

.internet-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.internet-card,
.internet-empty {
  display: grid;
  gap: 10px;
  min-height: 98px;
  align-content: space-between;
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.internet-card strong,
.internet-empty strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}

.internet-card span,
.internet-empty span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.3;
}

.internet-card button {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
}

.internet-preview {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  min-height: 420px;
  overflow: hidden;
}

.internet-preview-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.internet-preview-bar span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.internet-preview-bar a {
  min-height: 34px;
  padding: 7px 10px;
  color: #16213E;
  background: #ffffff;
}

#internet-frame {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  background: #ffffff;
}

.internet-frame-help {
  display: grid;
  gap: 4px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.16);
}

.internet-frame-help strong {
  color: #ffffff;
  font-size: 12px;
}

.internet-frame-help span {
  font-size: 12px;
  line-height: 1.35;
}

.internet-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(560px, calc(100vw - 24px));
  gap: 6px;
  transform: translateX(-50%);
  padding: 6px;
}

.internet-dock button {
  min-width: 0;
  background: rgba(255, 255, 255, 0.12);
}

.internet-dock button.active {
  color: #16213E;
  background: #FFD23F;
}

.browser-camera-fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 210, 63, 0.24), transparent 26%),
    linear-gradient(135deg, #0F1A33, #16213E 52%, #0B1226);
}

.browser-camera-fallback span {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 122, 0, 0.22);
  font-size: 28px;
  font-weight: 900;
}

.browser-page.camera-on .browser-camera-fallback {
  display: none;
}

.browser-shell {
  position: fixed;
  z-index: 12;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 92px);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34));
}

.browser-topbar,
.browser-search-panel,
.browser-featured,
.browser-card,
.browser-empty {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(16, 33, 42, 0.84);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.browser-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.browser-topbar .back-link,
.browser-topbar button,
.browser-featured a,
.browser-card a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.browser-topbar .back-link {
  background: rgba(255, 255, 255, 0.14);
}

.browser-topbar button.active {
  color: #16213E;
  background: #FFD23F;
}

.browser-topbar strong {
  display: block;
  font-size: 18px;
}

.browser-topbar span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.browser-search-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.browser-search {
  display: grid;
  gap: 6px;
}

.browser-search span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.browser-search input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.browser-search input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.browser-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.browser-filters button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.browser-filters button.active {
  color: #16213E;
  background: #FFD23F;
}

.browser-featured {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 122, 0, 0.88), rgba(16, 33, 42, 0.88)),
    rgba(16, 33, 42, 0.86);
}

.browser-featured p,
.browser-featured h1,
.browser-featured span {
  margin: 0;
}

.browser-featured p {
  color: #FFD23F;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.browser-featured h1 {
  margin-top: 4px;
  font-size: clamp(23px, 6vw, 40px);
  line-height: 1;
}

.browser-featured span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.36;
}

.browser-featured a {
  color: #16213E;
  background: #ffffff;
}

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

.browser-card {
  overflow: hidden;
}

.browser-card-visual {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.browser-card-visual span,
.browser-card-visual i {
  position: absolute;
  display: block;
  content: "";
}

.browser-card-visual span {
  left: 16px;
  top: 18px;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
}

.browser-card-visual i {
  right: 18px;
  bottom: 18px;
  width: 76px;
  height: 30px;
  border-radius: 8px;
  background: #FFD23F;
}

.browser-card.room .browser-card-visual {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.35), rgba(255, 210, 63, 0.18));
}

.browser-card.scan .browser-card-visual {
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.34), rgba(255, 255, 255, 0.1));
}

.browser-card.space .browser-card-visual {
  background: linear-gradient(135deg, rgba(68, 119, 201, 0.38), rgba(255, 210, 63, 0.18));
}

.browser-card.campus .browser-card-visual {
  background: linear-gradient(135deg, rgba(46, 169, 116, 0.36), rgba(255, 255, 255, 0.08));
}

.browser-card-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.browser-card-body p,
.browser-card-body h2,
.browser-card-body span {
  margin: 0;
}

.browser-card-body p {
  color: #FFD23F;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.browser-card-body h2 {
  font-size: 18px;
  line-height: 1.08;
}

.browser-card-body span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.35;
}

.browser-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.browser-needs small {
  border-radius: 999px;
  padding: 5px 7px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  font-size: 10px;
  font-weight: 800;
}

.browser-card a {
  margin-top: 2px;
}

.browser-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 18px;
}

.browser-empty strong {
  font-size: 20px;
}

.browser-empty span {
  color: rgba(255, 255, 255, 0.76);
}

.browser-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(520px, calc(100vw - 24px));
  gap: 6px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px;
  background: rgba(16, 33, 42, 0.9);
  backdrop-filter: blur(14px);
}

.browser-dock a {
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 900;
}

.browser-dock a[aria-current="page"] {
  color: #16213E;
  background: #FFD23F;
}
#room-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  touch-action: none;
}

#room-stage canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

#model-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  touch-action: none;
  pointer-events: auto;
}

#model-stage canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

.model-scan-frame {
  position: fixed;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(500px, calc(100vw - 44px));
  aspect-ratio: 1.65;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(244, 182, 66, 0.9);
  border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.model-scan-frame span {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.76);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.model-panel {
  position: fixed;
  z-index: 15;
  left: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  display: grid;
  gap: 8px;
  width: min(430px, calc(100vw - 28px));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.room-panel {
  position: fixed;
  z-index: 15;
  left: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  display: grid;
  gap: 9px;
  width: min(460px, calc(100vw - 28px));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.84);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.room-panel-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.room-panel .back-link {
  justify-self: start;
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.room-panel strong {
  display: block;
  font-size: 18px;
}

.room-panel span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.room-actions,
.room-furniture-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.room-actions button,
.room-furniture-list button,
.room-toolbar button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.room-actions button:disabled {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.15);
}

.room-furniture-list button {
  background: rgba(255, 255, 255, 0.14);
}

.room-furniture-list button.active {
  color: #16213E;
  background: #FFD23F;
}

.room-scan-guide {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 56%;
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.room-reticle {
  display: grid;
  width: min(260px, 52vw);
  aspect-ratio: 1;
  place-items: center;
  transform: perspective(340px) rotateX(62deg);
  border: 3px solid rgba(22, 198, 191, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(22, 198, 191, 0.08), inset 0 0 30px rgba(22, 198, 191, 0.18);
}

.room-reticle span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}

.room-scan-guide.is-scanning .room-reticle {
  animation: roomScanPulse 1s ease-in-out infinite;
}

.room-scan-guide p {
  margin: 0;
  border-radius: 8px;
  padding: 9px 12px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.78);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.room-toolbar {
  position: fixed;
  z-index: 15;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  width: min(560px, calc(100vw - 24px));
  gap: 8px;
  transform: translateX(-50%);
}

.room-toolbar button {
  flex: 1;
  min-width: 0;
  background: rgba(16, 33, 42, 0.88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

@keyframes roomScanPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: perspective(340px) rotateX(62deg) scale(0.94);
  }

  50% {
    opacity: 1;
    transform: perspective(340px) rotateX(62deg) scale(1.04);
  }
}

.model-panel-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.model-panel .back-link {
  justify-self: start;
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.model-panel strong {
  display: block;
  font-size: 18px;
}

.model-panel span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

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

.model-quick-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-height: 122px;
  overflow-y: auto;
  padding-right: 2px;
  gap: 6px;
}

.model-quick-list.is-hidden {
  display: none;
}

.model-actions button,
.model-actions a,
.model-quick-list button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.model-actions a {
  min-height: 38px;
}

.model-actions button.active {
  background: #FFD23F;
  color: #16213E;
}

.model-quick-list button {
  min-height: 32px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
}

.model-info {
  position: fixed;
  z-index: 16;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 28px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 16px;
  padding-right: 78px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

.model-info.is-hidden {
  display: none;
}

.model-info-close {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.model-info p,
.model-info h1,
.model-info span {
  margin: 0;
}

.model-info p {
  color: #FFD23F;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.model-info h1 {
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.02;
}

.model-info span {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.model-example-page {
  min-height: 100vh;
  background: #F8FEFF;
}

.model-example-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.model-example-grid.planets {
  grid-template-columns: repeat(4, 1fr);
}

.model-scan-card {
  display: grid;
  gap: 8px;
  min-height: 210px;
  align-content: center;
  border: 2px solid #16213E;
  border-radius: 8px;
  padding: 24px;
  background: #ffffff;
  color: #16213E;
  text-align: center;
  box-shadow: 0 18px 55px rgba(13, 32, 38, 0.14);
}

.model-scan-card span {
  display: block;
  font-size: clamp(34px, 7vw, 74px);
  font-weight: 900;
  line-height: 1;
}

.model-scan-card strong {
  font-size: 18px;
}

.model-scan-card p {
  margin: 0;
  color: #4A5568;
}

.primary-model-card {
  color: #ffffff;
  background: #16213E;
}

.primary-model-card p,
.earth-card p {
  color: #FFE8CC;
}

.sun-card {
  background: #fff3bf;
}

.moon-card {
  background: #F8FEFF;
}

.earth-card {
  color: #ffffff;
  background: #185FA5;
}

.model-scan-card.handwriting span {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-weight: 700;
  transform: rotate(-2deg);
}

#poster-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background: #000;
}

.poster-frame {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 48%;
  width: min(520px, calc(100vw - 44px));
  aspect-ratio: 1.55;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 148, 51, 0.86);
  border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.poster-frame span {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%);
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.76);
  font-size: 12px;
  font-weight: 800;
}

.poster-frame span::before {
  content: "Place text inside frame";
}

.poster-panel {
  position: fixed;
  z-index: 12;
  left: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  display: grid;
  gap: 7px;
  width: min(380px, calc(100vw - 28px));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.poster-panel-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.poster-panel .back-link {
  justify-self: start;
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.poster-panel strong {
  display: block;
  font-size: 18px;
}

.poster-panel span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.poster-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}

.quick-matches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.poster-actions button,
.poster-actions a,
.quick-matches button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.quick-matches button {
  min-height: 32px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
}

.poster-actions button.active {
  background: #FFD23F;
  color: #16213E;
}

.poster-actions button:disabled {
  opacity: 0.58;
}

.scan-result {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 28px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

.scan-result.is-hidden {
  display: none;
}

.scan-result.is-idle {
  width: min(430px, calc(100vw - 28px));
  padding-right: 74px;
}

.scan-close {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.scan-result.brand-result {
  border-color: rgba(255, 148, 51, 0.86);
}

.scan-result p,
.scan-result h1,
.scan-result span,
.scan-result small {
  margin: 0;
}

.scan-result p {
  color: #FFD23F;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.scan-result h1 {
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.02;
}

.scan-result span,
.scan-result small {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.scan-result small {
  font-size: 12px;
}

.scan-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.scan-result-actions a,
.scan-result-actions button {
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffffff;
  background: #FF7A00;
  font: inherit;
  font-weight: 900;
}

.scan-result-actions button {
  background: rgba(255, 255, 255, 0.14);
}

.poster-example-page {
  min-height: 100vh;
  background: #F8FEFF;
}

.example-header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(234, 241, 238, 0.92);
  backdrop-filter: blur(12px);
}

.example-sheet {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 64px;
}

.example-intro {
  margin-bottom: 24px;
}

.example-intro h1 {
  color: #16213E;
  font-size: clamp(36px, 7vw, 72px);
}

.example-intro p:not(.eyebrow) {
  max-width: 680px;
  color: #4A5568;
  line-height: 1.6;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.scan-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  align-content: center;
  border: 2px solid #16213E;
  border-radius: 8px;
  padding: 24px;
  background: #ffffff;
  color: #16213E;
  text-align: center;
  box-shadow: 0 18px 55px rgba(13, 32, 38, 0.14);
}

.scan-card + .scan-card,
.example-grid {
  margin-top: 16px;
}

.scan-card span {
  display: block;
  font-size: clamp(42px, 9vw, 92px);
  font-weight: 900;
  line-height: 1;
}

.scan-card strong {
  font-size: 20px;
}

.scan-card p {
  margin: 0;
  color: #4A5568;
}

.apgs-card {
  color: #ffffff;
  background: #16213E;
}

.apgs-card p {
  color: #FFE8CC;
}

.handwritten-card span {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-weight: 700;
  transform: rotate(-2deg);
}

#gps-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background: #000;
}

#gps-stage {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.gps-card {
  position: absolute;
  display: grid;
  grid-template-columns: 42px minmax(110px, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  min-width: 238px;
  max-width: min(320px, calc(100vw - 36px));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  transition: left 0.18s ease, top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}

.gps-card.is-edge {
  filter: grayscale(0.2);
}

.gps-card.is-complete {
  border-color: rgba(154, 196, 107, 0.82);
}

.gps-card-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.gps-orb {
  grid-row: 1 / 3;
  align-self: center;
  width: 36px;
  height: 36px;
  border: 3px solid var(--point-color);
  border-radius: 50%;
}

.gps-orb::after {
  display: block;
  width: 16px;
  height: 16px;
  margin: 7px;
  border-radius: 50%;
  background: var(--point-color);
  content: "";
}

.gps-card strong {
  font-size: 16px;
  line-height: 1.15;
}

.gps-card small {
  color: #FFE8CC;
  font-size: 12px;
}

.gps-card em {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #FFD23F;
  font-style: normal;
  font-weight: 900;
}

.trail-hud {
  position: fixed;
  z-index: 7;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 94px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  width: min(340px, calc(100vw - 28px));
  color: #ffffff;
  pointer-events: none;
}

.trail-progress,
.trail-score {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: rgba(16, 33, 42, 0.78);
  backdrop-filter: blur(12px);
}

.trail-progress span,
.trail-score span {
  display: block;
  color: #FFE8CC;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.trail-progress strong,
.trail-score strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
}

.trail-progress i {
  display: block;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.trail-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #FF9433;
}

.trail-radar {
  position: fixed;
  z-index: 8;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  width: 116px;
  height: 116px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 28%, rgba(255, 255, 255, 0.15) 29% 30%, transparent 31% 58%, rgba(255, 255, 255, 0.15) 59% 60%, transparent 61%),
    rgba(16, 33, 42, 0.76);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.trail-radar::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  content: "";
}

.radar-north {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.radar-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--point-color);
  box-shadow: 0 0 14px var(--point-color);
  cursor: pointer;
}

.radar-dot.is-complete {
  background: #3DDC97;
}

.trail-toolbar {
  position: fixed;
  z-index: 8;
  left: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(420px, calc(100vw - 156px));
  color: #ffffff;
  pointer-events: auto;
}

.trail-toolbar button,
.trail-toolbar span {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.78);
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.lesson-sheet {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 28px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 16px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
}

.lesson-sheet h2,
.lesson-sheet p,
.lesson-sheet strong,
.lesson-sheet span {
  margin: 0;
}

.lesson-sheet p {
  color: var(--point-color);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-sheet h2 {
  font-size: 24px;
}

.lesson-sheet strong {
  color: #FFE8CC;
}

.lesson-sheet span {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.lesson-marker {
  display: block;
  width: 44px;
  height: 7px;
  border-radius: 999px;
  background: var(--point-color);
}

.lesson-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.lesson-actions button {
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: #16213E;
  background: var(--point-color);
  font-weight: 900;
}

.lesson-actions button + button {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
}

.gps-compass {
  position: fixed;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  color: #ffffff;
  font-size: 12px;
}

.gps-compass span,
.gps-compass b {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(16, 33, 42, 0.74);
  backdrop-filter: blur(10px);
}

.ar-page .a-enter-vr,
.ar-page .a-enter-ar {
  display: none;
}

.ar-panel {
  position: fixed;
  z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 14px;
  display: grid;
  gap: 6px;
  width: min(330px, calc(100vw - 28px));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  background: rgba(16, 33, 42, 0.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.ar-panel strong {
  font-size: 17px;
}

.ar-panel span,
.ar-panel a,
.ar-panel button {
  font-size: 13px;
}

.ar-panel a,
.ar-panel button {
  justify-self: start;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: #FF7A00;
  font-weight: 800;
  cursor: pointer;
}

.ar-panel .back-link {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 640px) {
  .internet-browser-shell {
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .internet-browser-top {
    gap: 8px;
    padding: 10px;
  }

  .internet-browser-top strong {
    font-size: 16px;
  }

  .internet-browser-top span,
  .internet-browser-top .back-link,
  .internet-browser-top button,
  .internet-address button,
  .internet-dock button {
    font-size: 12px;
  }

  .internet-address {
    grid-template-columns: 1fr auto;
    padding: 10px;
  }

  .internet-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .internet-preview {
    min-height: 360px;
  }

  .internet-preview-bar {
    grid-template-columns: 1fr;
  }

  .web-browser-shell {
    padding-right: 12px;
    padding-left: 12px;
  }

  .web-browser-top {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 10px;
  }

  .web-browser-top strong {
    font-size: 16px;
  }

  .web-browser-top span,
  .web-browser-top .back-link,
  .web-browser-top button,
  .web-browser-hero button {
    font-size: 12px;
  }

  .web-browser-hero {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .web-browser-checks {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .web-browser-checks div {
    padding: 8px;
  }

  .web-browser-grid {
    grid-template-columns: 1fr;
  }

  .web-browser-sheet {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    max-height: 68vh;
  }

  .model-panel {
    top: calc(env(safe-area-inset-top, 0px) + 94px);
    left: 12px;
    right: 12px;
    width: auto;
    padding: 10px;
  }

  .model-panel-head {
    grid-template-columns: auto 1fr;
    gap: 8px;
  }

  .model-panel strong {
    font-size: 16px;
  }

  .model-panel span,
  .model-actions button,
  .model-quick-list button {
    font-size: 12px;
  }

  .model-actions button {
    min-height: 36px;
    padding: 8px 9px;
  }

  .model-actions a {
    min-height: 36px;
    padding: 8px 9px;
    font-size: 12px;
  }

  .model-quick-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 74px;
  }

  .model-quick-list button {
    min-height: 31px;
    padding: 7px 5px;
  }

  .model-scan-frame {
    top: 51%;
    width: calc(100vw - 42px);
  }

  .model-info {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    width: calc(100vw - 24px);
    padding: 13px;
    padding-right: 76px;
  }

  .model-info h1 {
    font-size: 22px;
  }

  .model-example-grid,
  .model-example-grid.planets {
    grid-template-columns: 1fr;
  }

  .model-scan-card {
    min-height: 190px;
    padding: 20px;
  }

  .poster-panel {
    top: calc(env(safe-area-inset-top, 0px) + 94px);
    left: 12px;
    right: 12px;
    width: auto;
    padding: 10px;
  }

  .poster-panel-head {
    grid-template-columns: auto 1fr;
    gap: 8px;
  }

  .poster-panel strong {
    font-size: 16px;
  }

  .poster-panel span,
  .poster-actions button,
  .poster-actions a,
  .quick-matches button {
    font-size: 12px;
  }

  .poster-actions {
    grid-template-columns: 1fr 1fr auto;
    gap: 7px;
  }

  .poster-actions button,
  .poster-actions a {
    min-height: 36px;
    padding: 8px 9px;
  }

  .poster-frame {
    top: 48%;
    width: calc(100vw - 42px);
  }

  .scan-result {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    width: calc(100vw - 24px);
    padding: 13px;
    padding-right: 76px;
  }

  .scan-result.is-hidden {
    display: none;
  }

  .scan-result h1 {
    font-size: 22px;
  }

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

  .gps-page .ar-panel {
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    left: 12px;
    right: 12px;
    width: auto;
    gap: 5px;
    padding: 10px;
    background: rgba(16, 33, 42, 0.72);
  }

  .gps-page .ar-panel .back-link {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .gps-page .ar-panel strong {
    max-width: calc(100% - 76px);
    font-size: 16px;
  }

  .gps-page .ar-panel span {
    max-width: calc(100% - 12px);
    font-size: 12px;
    line-height: 1.28;
  }

  .gps-page .ar-panel button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .ar-panel {
    top: calc(env(safe-area-inset-top, 0px) + 92px);
    gap: 4px;
    width: min(260px, calc(100vw - 28px));
    padding: 10px;
  }

  .ar-panel strong {
    font-size: 15px;
  }

  .ar-panel span,
  .ar-panel a,
  .ar-panel button {
    font-size: 12px;
  }

  .trail-hud {
    left: 12px;
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 236px);
    grid-template-columns: 1fr auto;
    width: calc(100vw - 24px);
    gap: 6px;
  }

  .trail-progress,
  .trail-score {
    padding: 8px;
    background: rgba(16, 33, 42, 0.66);
  }

  .trail-progress span,
  .trail-score span {
    font-size: 10px;
  }

  .trail-progress strong,
  .trail-score strong {
    font-size: 17px;
  }

  .trail-progress i {
    height: 5px;
    margin-top: 6px;
  }

  .gps-card {
    grid-template-columns: 36px minmax(92px, 1fr) auto;
    min-width: min(272px, calc(100vw - 36px));
    max-width: min(302px, calc(100vw - 36px));
    padding: 10px;
    left: 50% !important;
    top: 58% !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    background: rgba(16, 33, 42, 0.78);
  }

  .gps-card strong {
    font-size: 14px;
  }

  .gps-card small,
  .gps-card em {
    font-size: 11px;
  }

  .gps-orb {
    width: 32px;
    height: 32px;
  }

  .gps-orb::after {
    width: 14px;
    height: 14px;
    margin: 6px;
  }

  .trail-toolbar {
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    width: auto;
    justify-content: flex-start;
    gap: 6px;
  }

  .trail-toolbar button,
  .trail-toolbar span {
    padding: 8px 9px;
    font-size: 11px;
  }

  .trail-toolbar span {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trail-radar {
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    width: 88px;
    height: 88px;
    background:
      radial-gradient(circle, transparent 0 27%, rgba(255, 255, 255, 0.13) 28% 30%, transparent 31% 58%, rgba(255, 255, 255, 0.13) 59% 61%, transparent 62%),
      rgba(16, 33, 42, 0.66);
  }

  .radar-dot {
    width: 12px;
    height: 12px;
  }

  .radar-north {
    top: 5px;
    font-size: 10px;
  }

  .gps-compass {
    display: none;
  }

  .lesson-sheet {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    width: calc(100vw - 24px);
    padding: 14px;
  }

  .lesson-sheet h2 {
    font-size: 21px;
  }
}

.marker-page {
  min-height: 100vh;
  background: #F8FEFF;
}

.marker-sheet {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.marker-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.button.dark,
.button.secondary.dark {
  border-color: #B8C6D8;
  color: #16213E;
  background: #ffffff;
}

.marker-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  border: 1px solid #DBE6EF;
  border-radius: 8px;
  padding: clamp(24px, 6vw, 54px);
  background: #ffffff;
  text-align: center;
  box-shadow: 0 18px 55px rgba(13, 32, 38, 0.14);
}

.marker-card h1 {
  color: #16213E;
  font-size: clamp(34px, 7vw, 64px);
}

.marker-card p:not(.eyebrow) {
  max-width: 520px;
  color: #4A5568;
  line-height: 1.6;
}

.marker-card img {
  width: min(420px, 88vw);
  aspect-ratio: 1;
  object-fit: contain;
  border: 18px solid #ffffff;
  box-shadow: 0 12px 34px rgba(16, 33, 42, 0.16);
}

/* ============================================================
   APGS AR — brand chrome (matches aplusgamesstudio.com)
   Comic/sticker accents layered over the functional AR UI.
   Palette already remapped to brand colors above.
============================================================ */
.ar-page{cursor:auto}
.ar-page h1,.ar-page h2,.ar-page h3{font-family:'Luckiest Guy',cursive;letter-spacing:.4px}
.ar-page strong{font-family:'Fredoka One',cursive}
/* Branded "Back" pill, consistent across every AR app */
.ar-page .back-link{
  font-family:'Fredoka One',cursive !important;
  border:2px solid #16213E !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 #16213E !important;
  background:#fff !important;
  color:#16213E !important;
  transition:transform .15s, box-shadow .15s;
}
.ar-page .back-link:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 #16213E !important;
  background:#FFD23F !important;
}

/* ============================================================
   Campus Learning Trail — new gamified feature UI (brand style)
============================================================ */
.gps-orb{display:grid;place-items:center;font-size:20px;line-height:1}
.gps-card.is-arrived{animation:gps-pulse 1.1s ease-in-out infinite}
@keyframes gps-pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}50%{box-shadow:0 0 0 12px rgba(61,220,151,0)}}

/* Turn-by-turn guidance */
.trail-guide{
  position:absolute;top:82px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;z-index:14;
  padding:12px 18px 12px 14px;background:rgba(22,33,62,.92);
  border:3px solid #16213E;border-radius:18px;box-shadow:5px 5px 0 rgba(0,0,0,.35);
  backdrop-filter:blur(6px);max-width:min(90vw,420px);
}
.guide-arrow{
  width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;
  font-size:30px;color:#fff;background:var(--point-color,#FF7A00);
  border:3px solid #16213E;border-radius:50%;box-shadow:3px 3px 0 rgba(0,0,0,.35);
  transition:transform .25s ease;
}
.guide-text{display:flex;flex-direction:column;gap:2px;color:#fff;line-height:1.25}
.guide-text span{font-family:'Fredoka One',cursive;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#FFD23F}
.guide-text strong{font-family:'Fredoka One',cursive;font-size:1rem}
.guide-text b{font-size:.82rem;font-weight:800;color:rgba(255,255,255,.85)}

/* Live stats strip */
.trail-stats{
  position:absolute;top:150px;left:16px;right:16px;z-index:12;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;pointer-events:none;
}
.trail-stats span{
  font-family:'Fredoka One',cursive;font-size:12px;color:#16213E;
  background:#fff;border:2px solid #16213E;border-radius:999px;
  padding:5px 12px;box-shadow:2px 2px 0 #16213E;
}

/* Toolbar active state */
.trail-toolbar button.is-on{background:#FF7A00;color:#fff;border-color:#16213E}

/* Quiz */
.lesson-quiz{margin:14px 0 4px;padding:14px;background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.35);border-radius:14px}
.lesson-quiz.shake{animation:gps-shake .4s}
@keyframes gps-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.quiz-q{font-family:'Fredoka One',cursive;font-size:.98rem;color:#fff;margin-bottom:12px}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quiz-opt{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.9rem;
  padding:11px 10px;background:#fff;color:#16213E;border:2px solid #16213E;
  border-radius:12px;box-shadow:2px 2px 0 #16213E;cursor:pointer;transition:all .12s;
}
.quiz-opt:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #16213E;background:#FFD23F}
.quiz-opt.is-wrong{background:#EF4444;color:#fff;animation:gps-shake .4s}
.lesson-done{margin:12px 0 4px;padding:12px 14px;background:rgba(61,220,151,.16);border:2px solid #3DDC97;border-radius:12px;color:#eafff6;font-family:'Fredoka One',cursive;font-size:.9rem;text-align:center}

/* Completion celebration */
.trail-complete{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:rgba(11,18,38,.75);backdrop-filter:blur(6px)}
.complete-card{
  width:min(92vw,400px);text-align:center;background:#fff;color:#16213E;
  border:3px solid #16213E;border-radius:28px;box-shadow:8px 8px 0 #16213E;
  padding:32px 26px;animation:gps-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gps-pop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
.complete-emoji{font-size:56px;display:block;margin-bottom:6px}
.complete-card h2{font-family:'Luckiest Guy',cursive;font-size:1.9rem;margin-bottom:6px}
.complete-card p{color:#4a5568;font-weight:700;margin-bottom:14px}
.complete-score{font-family:'Luckiest Guy',cursive;font-size:2.6rem;color:#FF7A00;line-height:1}
.complete-score b{font-family:'Fredoka One',cursive;font-size:1rem;color:#16213E}
.complete-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.complete-badges .badge{font-family:'Fredoka One',cursive;font-size:.82rem;background:#FFD23F;border:2px solid #16213E;border-radius:999px;padding:6px 14px;box-shadow:2px 2px 0 #16213E}
.complete-stats{display:flex;gap:16px;justify-content:center;font-weight:800;color:#4a5568;margin-bottom:20px}
.complete-replay{font-family:'Fredoka One',cursive;font-size:1rem;padding:13px 28px;background:#FF7A00;color:#fff;border:3px solid #16213E;border-radius:999px;box-shadow:4px 4px 0 #16213E;cursor:pointer;transition:all .15s}
.complete-replay:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #16213E}

/* Confetti */
.gps-confetti{position:fixed;top:-12px;z-index:60;pointer-events:none;animation:gps-fall 2s ease-in forwards}
@keyframes gps-fall{to{transform:translateY(105vh) rotate(680deg);opacity:0}}