:root {
  --bg-main: #071923;
  --bg-secondary: #102c3a;
  --panel: rgba(8, 27, 36, 0.72);
  --panel-soft: rgba(17, 44, 60, 0.6);
  --ink: #e6f1f6;
  --ink-muted: #9eb7c3;
  --accent: #ff7a21;
  --accent-2: #29c18f;
  --line: rgba(132, 188, 210, 0.24);
  --danger: #f34f5f;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-lg: 0 30px 70px rgba(2, 8, 14, 0.45);
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: "Sora", "Manrope", "Avenir Next", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 14%, #264f63 0%, transparent 38%),
    radial-gradient(circle at 82% 9%, #4b2f1f 0%, transparent 32%),
    linear-gradient(140deg, var(--bg-main), var(--bg-secondary) 58%, #0d2130 100%);
  padding: 28px;
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.26;
  animation: floaty 14s ease-in-out infinite;
}

.blob-a {
  width: 380px;
  height: 380px;
  background: #2ec9a2;
  left: -100px;
  top: 120px;
}

.blob-b {
  width: 340px;
  height: 340px;
  background: #ff7a21;
  right: -70px;
  top: 40px;
  animation-delay: 2s;
}

.blob-c {
  width: 260px;
  height: 260px;
  background: #3f81ff;
  right: 20%;
  bottom: -80px;
  animation-delay: 4s;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-12px) scale(1.04);
  }
}

.hero {
  max-width: 1320px;
  margin: 0 auto 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background:
    linear-gradient(132deg, rgba(7, 23, 32, 0.78), rgba(19, 53, 70, 0.78)),
    linear-gradient(118deg, rgba(41, 193, 143, 0.15), rgba(255, 122, 33, 0.15));
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

.eyebrow {
  margin: 0;
  color: var(--accent-2);
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 11px;
}

.hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: 0.02em;
}

.hero-sub {
  margin: 0;
  color: var(--ink-muted);
  max-width: 720px;
}

.hero-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.auth-pill {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d1f8e9;
  background: rgba(20, 70, 57, 0.45);
  font-size: 12px;
}

.hidden {
  display: none !important;
}

.non-creator-only {
  display: none;
}

.layout {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.card {
  grid-column: span 12;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  padding: 18px;
}

.auth-card,
.theory-card,
.profile-card {
  grid-column: span 6;
}

.sim-card,
.board-card {
  grid-column: span 12;
}

.card-head {
  margin-bottom: 14px;
}

.card-head h2 {
  margin: 0;
  font-size: 22px;
}

.card-head p {
  margin: 6px 0 0;
  color: var(--ink-muted);
}

.auth-feedback {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(113, 200, 163, 0.5);
  background: rgba(22, 86, 66, 0.45);
  color: #d8fff1;
  font-size: 13px;
}

.auth-user {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(140deg, rgba(17, 58, 77, 0.82), rgba(14, 43, 57, 0.88)),
    radial-gradient(circle at top right, rgba(255, 122, 33, 0.23), transparent 50%);
  padding: 16px;
}

.auth-user h3 {
  margin: 0 0 8px;
}

.auth-user-copy {
  margin: 0;
  color: #dff8ec;
}

.auth-user-note {
  margin: 10px 0 0;
  color: #a9c3cf;
  font-size: 13px;
}

.grid-two {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sub-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 14px;
}

.sub-card h3 {
  margin-top: 0;
}

input,
select,
button {
  width: 100%;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  margin: 0 0 10px;
}

input,
select {
  border: 1px solid rgba(143, 193, 214, 0.36);
  background: rgba(6, 23, 33, 0.62);
  color: var(--ink);
}

input:focus,
select:focus {
  outline: 2px solid rgba(41, 193, 143, 0.48);
  border-color: transparent;
}

button {
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.12s ease, filter 0.12s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn {
  color: #04131b;
  background: linear-gradient(120deg, var(--accent), #ffbb57);
}

.btn-soft {
  color: #d9edf6;
  background: linear-gradient(120deg, rgba(57, 129, 158, 0.55), rgba(26, 88, 119, 0.75));
}

.btn-ghost {
  color: #d8e8f0;
  background: rgba(8, 29, 42, 0.62);
  border: 1px solid rgba(148, 199, 220, 0.35);
}

.button-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.button-row-compact {
  grid-template-columns: 1fr 1fr;
}

.sim-inline-field {
  display: block;
}

.sim-inline-field label {
  margin-bottom: 6px;
}

.sim-overview-zoom {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(132, 188, 210, 0.24);
  background: rgba(9, 28, 39, 0.48);
}

.sim-overview-zoom label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #d7ecf8;
  font-size: 12px;
  font-weight: 700;
}

.sim-overview-zoom input[type="range"] {
  margin: 8px 0 0;
  width: 100%;
  accent-color: #ff9f3d;
}

.creator-only-assisted-seek {
  margin-top: 8px;
}

.btn-tight {
  padding: 8px 10px;
  font-size: 12px;
  margin: 0;
}

.sim-penalty-tools {
  align-items: center;
}

.sim-penalty-total {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 143, 143, 0.42);
  background: rgba(88, 20, 29, 0.36);
  color: #ffdce0;
  line-height: 1.25;
}

pre {
  margin: 12px 0 0;
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(7, 24, 34, 0.72);
  color: #cde8f7;
  font-size: 12px;
}

.sim-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: 340px minmax(0, 1fr);
}

.sim-controls {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 12px;
}

.assisted-signal-editor {
  margin-top: 10px;
  border: 1px solid rgba(132, 188, 210, 0.24);
  border-radius: 12px;
  background: rgba(7, 24, 34, 0.45);
  padding: 10px;
  display: block;
}

.assisted-signal-editor summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #d9f0ff;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.assisted-signal-editor summary::-webkit-details-marker {
  display: none;
}

.assisted-signal-editor summary::after {
  content: "▾";
  font-size: 12px;
  color: #9ed7f5;
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

.assisted-signal-editor:not([open]) summary::after {
  transform: rotate(-90deg);
}

.assisted-signal-editor-body {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.assisted-signal-editor-standalone {
  margin-top: 14px;
}

.assisted-signal-editor-title {
  margin: 0;
  color: #d9f0ff;
  font-weight: 700;
}

.assisted-signal-pass-row {
  display: grid;
  gap: 5px;
}

.assisted-signal-pass-row label {
  margin: 0;
  font-size: 12px;
  color: #d3e8f7;
  font-weight: 700;
}

.assisted-signal-pass-row select {
  margin: 0;
}

.assisted-signal-range-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: end;
}

.assisted-signal-range-input {
  display: grid;
  gap: 4px;
}

.assisted-signal-range-input span {
  font-size: 11px;
  color: #bdd9eb;
  font-weight: 700;
}

.assisted-signal-range-input input[type="number"] {
  width: 100%;
  margin: 0;
}

.assisted-signal-range-controls .btn {
  margin: 0;
}

#assisted-signal-editor-canvas {
  width: 100%;
  height: auto;
  min-height: 160px;
  border-radius: 10px;
  border: 1px solid rgba(128, 193, 223, 0.36);
  background: linear-gradient(155deg, rgba(7, 20, 33, 0.92), rgba(8, 30, 47, 0.82));
  cursor: crosshair;
}

#assisted-divider-editor-canvas {
  width: 100%;
  height: auto;
  min-height: 160px;
  border-radius: 10px;
  border: 1px solid rgba(128, 193, 223, 0.36);
  background: linear-gradient(155deg, rgba(7, 20, 33, 0.92), rgba(8, 30, 47, 0.82));
  cursor: crosshair;
}

#assisted-signal-editor-selection,
#assisted-signal-editor-status {
  margin: 0;
}

.assisted-clip-editor {
  margin-top: 6px;
  border-top: 1px solid rgba(125, 182, 208, 0.3);
  padding-top: 8px;
  display: grid;
  gap: 8px;
}

.assisted-clip-editor-title {
  margin: 0;
  color: #d9f0ff;
  font-weight: 700;
}

#assisted-clip-editor-selection,
#assisted-clip-editor-status {
  margin: 0;
}

.assisted-divider-editor {
  margin-top: 6px;
  border-top: 1px solid rgba(125, 182, 208, 0.3);
  padding-top: 8px;
  display: grid;
  gap: 8px;
}

.assisted-divider-editor-title {
  margin: 0;
  color: #d9f0ff;
  font-weight: 700;
}

#assisted-divider-editor-selection,
#assisted-divider-editor-status {
  margin: 0;
}

.assisted-tutorial-editor {
  margin-top: 6px;
  border-top: 1px solid rgba(125, 182, 208, 0.3);
  padding-top: 8px;
  display: grid;
  gap: 8px;
}

.assisted-tutorial-editor-title {
  margin: 0;
  color: #d9f0ff;
  font-weight: 700;
}

#assisted-tutorial-editor-status {
  margin: 0;
}

.kbd-grid {
  margin: 8px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 8px 10px;
  background: rgba(9, 35, 50, 0.58);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.kbd-grid p {
  margin: 0;
  font-size: 12px;
  color: #cae0ea;
}

.mapper-panel {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 29, 40, 0.62);
  padding: 10px;
}

.mapper-panel-standalone {
  margin-top: 14px;
}

.mapper-workspace {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
  align-items: start;
}

.mapper-preview-column,
.mapper-controls-column {
  min-width: 0;
}

.mapper-controls-column {
  border-radius: 10px;
  border: 1px solid rgba(132, 188, 210, 0.24);
  background: rgba(7, 24, 34, 0.45);
  padding: 10px;
}

.mapper-panel summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #d6ecf7;
}

.mapper-note {
  margin: 10px 0;
  font-size: 12px;
  color: #b8cfda;
}

.mapper-inline-note {
  margin: 0;
  align-self: center;
  line-height: 1.2;
  color: #aac3cf;
}

.mapper-grid {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.mapper-grid-two {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

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

.mapper-grid label {
  font-size: 12px;
  color: #d0e8f2;
}

.mapper-help {
  margin: 6px 0 2px;
  font-size: 12px;
  color: #b8cfda;
}

.mapper-inline-note {
  align-self: center;
  font-size: 11px;
  color: #aac3cf;
}

.mapper-canvas {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(146, 191, 212, 0.44);
  background: rgba(6, 18, 27, 0.74);
  margin-top: 8px;
}

.mapper-panel-standalone .mapper-canvas {
  width: 100%;
  max-width: none;
}

.mapper-preview-column pre {
  margin-top: 8px;
}

.mapper-library {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(132, 188, 210, 0.24);
  background: rgba(8, 27, 38, 0.52);
}

#mapper-saved-maps {
  min-height: 160px;
  margin: 6px 0 2px;
}

.mapper-library-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .mapper-workspace {
    grid-template-columns: 1fr;
  }

  .mapper-library-actions {
    grid-template-columns: 1fr;
  }
}

.status-line {
  margin: 6px 0;
  font-size: 12px;
  color: #d0e8f2;
}

.sim-viewport {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(6, 19, 27, 0.74);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 360px;
}

#sim-gl-canvas,
#sim-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

#sim-canvas {
  pointer-events: none;
  opacity: 0;
}

.sim-demo-loading {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 36%, rgba(31, 97, 128, 0.46), rgba(7, 22, 33, 0.78) 62%),
    linear-gradient(135deg, rgba(10, 30, 44, 0.78), rgba(8, 18, 28, 0.88));
  backdrop-filter: blur(2px) saturate(1.08);
}

.sim-demo-loading-panel {
  min-width: 280px;
  max-width: min(88%, 560px);
  padding: 18px 22px 16px;
  border-radius: 16px;
  border: 1px solid rgba(146, 225, 255, 0.58);
  background: linear-gradient(142deg, rgba(10, 36, 52, 0.94), rgba(8, 26, 40, 0.92));
  box-shadow:
    0 20px 44px rgba(3, 12, 19, 0.44),
    inset 0 0 0 1px rgba(128, 209, 244, 0.12);
  text-align: center;
}

.sim-demo-loading-brand {
  position: relative;
  width: clamp(104px, 26vw, 146px);
  margin: 0 auto 10px;
  aspect-ratio: 3 / 2;
}

.sim-demo-loading-brand-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(6, 17, 30, 0.48));
}

.sim-demo-loading-ring {
  position: absolute;
  left: 50.2%;
  top: 48.3%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(98, 200, 255, 0.26);
  border-top-color: rgba(98, 220, 255, 0.95);
  border-right-color: rgba(142, 241, 255, 0.88);
  box-shadow: 0 0 18px rgba(74, 214, 255, 0.45);
  animation: simDemoLoadingSpin 0.92s linear infinite;
}

.sim-demo-loading-title {
  margin: 0;
  color: #eaf9ff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.sim-demo-loading-text {
  margin: 6px 0 0;
  color: #bee4f3;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.sim-demo-loading-progress {
  margin: 12px auto 0;
  width: min(88%, 420px);
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(134, 205, 234, 0.42);
  background: rgba(8, 26, 39, 0.78);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(97, 179, 213, 0.12);
}

.sim-demo-loading-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #29b3ff 0%, #4ddfff 54%, #86f4ff 100%);
  box-shadow: 0 0 14px rgba(68, 218, 255, 0.62);
  transition: width 220ms ease;
}

.sim-demo-loading-percent {
  margin: 7px 0 0;
  color: #d8f3ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@keyframes simDemoLoadingSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.sim-exam-report {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.2vw, 22px);
  background:
    radial-gradient(circle at 78% 8%, rgba(63, 170, 255, 0.24), transparent 52%),
    radial-gradient(circle at 20% 86%, rgba(26, 116, 210, 0.18), transparent 58%),
    rgba(4, 12, 22, 0.74);
  backdrop-filter: blur(4px) saturate(1.04);
}

.sim-exam-report-panel {
  width: min(100%, 980px);
  max-height: min(92%, 760px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 18px;
  border: 1px solid rgba(122, 198, 255, 0.45);
  background: linear-gradient(150deg, rgba(8, 26, 42, 0.96), rgba(5, 17, 31, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(156, 226, 255, 0.12),
    0 34px 70px rgba(3, 8, 16, 0.58);
  overflow: hidden;
}

.sim-exam-report-content {
  min-height: 0;
  overflow: auto;
  padding: clamp(14px, 2.4vw, 24px);
  display: grid;
  gap: 12px;
}

.sim-exam-report-header {
  display: grid;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid rgba(138, 214, 255, 0.45);
  background: linear-gradient(145deg, rgba(10, 42, 67, 0.95), rgba(7, 29, 48, 0.92));
  padding: 14px 16px;
}

.sim-exam-report-header.pass {
  border-color: rgba(110, 236, 178, 0.54);
  background: linear-gradient(145deg, rgba(10, 58, 49, 0.9), rgba(6, 39, 34, 0.9));
  box-shadow: inset 0 0 0 1px rgba(183, 255, 220, 0.08);
}

.sim-exam-report-header.fail {
  border-color: rgba(255, 138, 138, 0.55);
  background: linear-gradient(145deg, rgba(58, 22, 36, 0.9), rgba(39, 14, 26, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 180, 180, 0.08);
}

.sim-exam-report-kicker {
  margin: 0;
  color: #a8d7f8;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 800;
}

.sim-exam-report-header h3 {
  margin: 0;
  color: #eef9ff;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.01em;
}

.sim-exam-report-header p {
  margin: 0;
  color: #b5d6ea;
  font-size: 12px;
}

.sim-exam-report-score {
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(128, 203, 255, 0.55);
  background: rgba(8, 22, 36, 0.68);
  color: #dff4ff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.sim-exam-report-header.pass .sim-exam-report-score {
  border-color: rgba(122, 232, 183, 0.62);
  color: #d8ffe9;
  box-shadow: 0 0 18px rgba(88, 218, 151, 0.25);
}

.sim-exam-report-header.fail .sim-exam-report-score {
  border-color: rgba(255, 150, 150, 0.65);
  color: #ffe6e6;
  box-shadow: 0 0 18px rgba(255, 102, 102, 0.21);
}

.sim-exam-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sim-exam-report-card {
  border-radius: 12px;
  border: 1px solid rgba(116, 188, 242, 0.3);
  background: linear-gradient(150deg, rgba(9, 29, 45, 0.9), rgba(7, 20, 34, 0.9));
  padding: 11px 12px;
  display: grid;
  gap: 5px;
}

.sim-exam-report-card h4 {
  margin: 0 0 2px;
  color: #d5eeff;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sim-exam-info-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(132, 215, 255, 0.44);
  background: rgba(11, 36, 54, 0.84);
  color: #d9f2ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  pointer-events: auto;
  user-select: none;
  z-index: 2;
}

.sim-exam-info-dot::before,
.sim-exam-info-dot::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease, transform 0.08s ease, filter 0.08s ease;
}

.sim-exam-info-dot::after {
  content: attr(data-help);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translate(-50%, 4px);
  min-width: 170px;
  max-width: 260px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(133, 218, 255, 0.46);
  background: rgba(6, 23, 37, 0.9);
  color: #e8f8ff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.34;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(6px);
  z-index: 18;
  filter: blur(3px);
}

.sim-exam-info-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  transform: translate(-50%, 4px) rotate(45deg);
  border-right: 1px solid rgba(133, 218, 255, 0.42);
  border-bottom: 1px solid rgba(133, 218, 255, 0.42);
  background: rgba(6, 23, 37, 0.9);
  z-index: 17;
  filter: blur(1px);
}

.sim-exam-info-dot:hover::before,
.sim-exam-info-dot:focus-visible::before,
.sim-exam-info-dot:focus::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
  filter: blur(0);
}

.sim-exam-info-dot:hover::after,
.sim-exam-info-dot:focus-visible::after,
.sim-exam-info-dot:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
  filter: blur(0);
}

.sim-exam-info-dot[data-help=""]::before,
.sim-exam-info-dot[data-help=""]::after {
  display: none;
}

.sim-exam-info-dot:focus-visible {
  outline: 2px solid rgba(109, 230, 255, 0.88);
  outline-offset: 1px;
}

.sim-exam-report-card p {
  margin: 0;
  color: #b8d7eb;
  font-size: 12px;
  line-height: 1.34;
}

.sim-exam-line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sim-exam-line-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sim-exam-line-item strong {
  white-space: nowrap;
}

.sim-exam-report-card strong {
  color: #effaff;
  font-weight: 800;
}

.sim-exam-report-metrics {
  border-radius: 12px;
  border: 1px solid rgba(118, 191, 248, 0.3);
  background: linear-gradient(150deg, rgba(8, 26, 41, 0.9), rgba(5, 18, 30, 0.9));
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.sim-exam-metric {
  display: grid;
  gap: 4px;
}

.sim-exam-metric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #cfe8fb;
  font-size: 12px;
}

.sim-exam-metric-head strong {
  color: #effaff;
  font-size: 13px;
}

.sim-exam-metric-track {
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(126, 198, 253, 0.3);
  background: rgba(7, 20, 33, 0.84);
  overflow: hidden;
}

.sim-exam-metric-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 280ms ease;
}

.sim-exam-metric-fill.ok {
  background: linear-gradient(90deg, #2ec9ff, #86f6ff);
  box-shadow: 0 0 12px rgba(62, 215, 255, 0.42);
}

.sim-exam-metric-fill.warn {
  background: linear-gradient(90deg, #ffb85f, #ffd786);
  box-shadow: 0 0 12px rgba(255, 189, 99, 0.42);
}

.sim-exam-metric-fill.danger {
  background: linear-gradient(90deg, #ff6d72, #ffad8f);
  box-shadow: 0 0 12px rgba(255, 118, 118, 0.42);
}

.sim-exam-report-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sim-exam-report-snapshot {
  border-radius: 12px;
  border: 1px solid rgba(120, 196, 250, 0.34);
  background: linear-gradient(145deg, rgba(8, 29, 45, 0.9), rgba(6, 20, 34, 0.9));
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.sim-exam-report-snapshot h4 {
  margin: 0;
  color: #eaf7ff;
  font-size: 13px;
}

.sim-exam-report-snapshot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(142, 214, 255, 0.38);
  background: rgba(7, 18, 30, 0.75);
}

.sim-exam-zoomable-image {
  cursor: zoom-in;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.sim-exam-zoomable-image:hover,
.sim-exam-zoomable-image:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(5, 17, 29, 0.35);
}

.sim-exam-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 13000;
  background: rgba(2, 8, 15, 0.84);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
}

.sim-exam-image-lightbox.hidden {
  display: none;
}

.sim-exam-image-lightbox-media {
  position: relative;
  width: min(96vw, 1480px);
  max-width: 100%;
}

.sim-exam-image-lightbox-img {
  width: 100%;
  max-height: calc(100vh - 44px);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(170, 223, 255, 0.46);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.46);
  background: rgba(4, 14, 24, 0.96);
  display: block;
}

.sim-exam-image-lightbox-close {
  position: fixed;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(146, 216, 255, 0.62);
  background: rgba(8, 23, 38, 0.9);
  color: #d9f2ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 12px;
  cursor: pointer;
}

.sim-exam-image-lightbox-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  border-radius: 9px;
  border: 1px solid rgba(255, 181, 181, 0.6);
  background: rgba(49, 20, 25, 0.86);
  color: #ffe7e7;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}

.sim-exam-image-lightbox-caption.hidden {
  display: none;
}

.sim-exam-report-snapshot p {
  margin: 0;
  color: #b2d4ea;
  font-size: 12px;
  line-height: 1.35;
}

.sim-exam-report-snapshot.empty {
  border-style: dashed;
  border-color: rgba(124, 175, 212, 0.4);
}

.sim-exam-report-snapshot.reverse {
  border-color: rgba(255, 154, 154, 0.42);
  background: linear-gradient(145deg, rgba(41, 18, 29, 0.84), rgba(27, 12, 22, 0.84));
}

.sim-exam-report-snapshot.reverse h4 {
  color: #ffe9ee;
}

.sim-exam-report-snapshot.reverse p {
  color: #ffd8df;
}

.sim-exam-report-snapshot.trace {
  border-color: rgba(123, 214, 255, 0.42);
  background: linear-gradient(145deg, rgba(7, 27, 44, 0.9), rgba(5, 18, 31, 0.9));
}

.sim-exam-report-snapshot.trace h4 {
  color: #e8f9ff;
}

.sim-exam-report-snapshot.trace p {
  color: #cbe9f8;
}

.sim-exam-trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin: 0;
  padding: 1px 0 0;
  color: #cbe9f8;
  font-size: 12px;
  line-height: 1.3;
}

.sim-exam-trace-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 191, 228, 0.28);
  background: rgba(6, 24, 40, 0.46);
  white-space: nowrap;
}

.sim-exam-trace-legend-item.symbols,
.sim-exam-trace-legend-item.coverage {
  white-space: normal;
  border-radius: 10px;
}

.sim-exam-trace-legend-item.coverage {
  border-color: rgba(116, 209, 255, 0.38);
  background: rgba(7, 31, 48, 0.52);
}

.sim-exam-trace-legend-line {
  display: inline-block;
  width: 24px;
  height: 0;
  border-top-width: 3px;
  border-top-style: solid;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.24);
}

.sim-exam-trace-legend-line.ideal {
  border-top-color: rgba(153, 242, 255, 0.95);
}

.sim-exam-trace-legend-line.actual {
  border-top-color: rgba(255, 201, 128, 0.98);
}

.sim-exam-trace-legend-line.missing {
  border-top-color: rgba(255, 140, 152, 0.98);
}

.sim-exam-trace-legend-line.deviation {
  border-top-color: rgba(203, 154, 255, 0.98);
}

.sim-exam-trace-legend-line.unexpected-reverse {
  border-top-color: rgba(240, 171, 255, 0.98);
}

.sim-exam-trace-legend-marker {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(8, 31, 47, 0.94);
  border: 1.2px solid rgba(210, 246, 255, 0.95);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
}

.sim-exam-trace-legend-marker.ideal {
  border-color: rgba(94, 193, 255, 0.98);
}

.sim-exam-trace-legend-marker.actual {
  border-color: rgba(255, 214, 82, 0.98);
}

.sim-exam-trace-legend-marker.missing {
  border-color: rgba(255, 126, 152, 0.98);
  border-style: dashed;
}

.sim-exam-trace-legend-marker.outside {
  border-color: rgba(235, 116, 255, 0.96);
  border-style: dashed;
}

.sim-exam-trace-signal-icons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sim-exam-trace-signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(120, 191, 228, 0.34);
  background: rgba(6, 24, 40, 0.52);
  color: #d8f4ff;
  font-size: 11px;
  line-height: 1;
}

.sim-exam-trace-signal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 82, 0.98);
  color: rgba(132, 255, 176, 0.98);
  background: rgba(8, 31, 47, 0.94);
  font-weight: 800;
  font-size: 10px;
}

.sim-exam-reverse-map-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sim-exam-trace-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(134, 214, 255, 0.2);
  background: linear-gradient(160deg, rgba(9, 31, 49, 0.36), rgba(5, 20, 34, 0.36));
}

.sim-exam-trace-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 7px;
  align-content: flex-start;
  align-items: center;
}

.sim-exam-trace-switches .sim-exam-reverse-toggle:nth-child(3) {
  grid-column: auto;
}

.sim-exam-trace-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
}

.sim-exam-trace-switches .sim-exam-reverse-toggle {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 11px;
  border-color: rgba(132, 211, 255, 0.28);
  background: rgba(8, 35, 55, 0.34);
  color: #ddf4ff;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(21, 97, 132, 0.14);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.14s ease;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.sim-exam-trace-switches .sim-exam-reverse-toggle:hover {
  border-color: rgba(146, 226, 255, 0.46);
  background: rgba(10, 41, 63, 0.5);
}

.sim-exam-trace-switches .sim-exam-reverse-toggle:has(input:checked) {
  border-color: rgba(143, 229, 255, 0.64);
  background: rgba(13, 49, 75, 0.56);
  color: #f1fbff;
}

.sim-exam-trace-switches .sim-exam-reverse-toggle input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  align-self: center;
  vertical-align: middle;
}

.sim-exam-trace-filters .sim-exam-reverse-pass {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 9px;
  border-color: rgba(132, 211, 255, 0.34);
  background: rgba(8, 35, 55, 0.32);
  color: #dff4ff;
  font-size: 11px;
  min-height: 78px;
}

.sim-exam-trace-filters .sim-exam-reverse-pass select {
  min-height: 34px;
  border-radius: 9px;
  border-color: rgba(133, 216, 255, 0.5);
  background: rgba(8, 24, 38, 0.86);
  color: #e7f8ff;
  padding: 6px 9px;
}

.sim-exam-trace-filters .sim-exam-reverse-pass > .sim-exam-info-dot {
  align-self: flex-start;
  margin-top: -2px;
}

.sim-exam-filter-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sim-exam-reverse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 168, 168, 0.26);
  background: rgba(49, 18, 30, 0.35);
  color: #ffe6ed;
  font-size: 12px;
  font-weight: 700;
}

.sim-exam-reverse-toggle .sim-exam-info-dot,
.sim-exam-reverse-pass .sim-exam-info-dot {
  flex: 0 0 auto;
}

.sim-exam-reverse-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #67e6ff;
}

.sim-exam-reverse-opacity {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 168, 168, 0.26);
  background: rgba(49, 18, 30, 0.35);
  color: #ffdce6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sim-exam-reverse-opacity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.sim-exam-reverse-opacity input[type="range"] {
  width: 100%;
  accent-color: #67e6ff;
}

.sim-exam-reverse-opacity-row span {
  color: #ffeaf0;
  font-size: 11px;
  font-family: "Space Mono", "JetBrains Mono", monospace;
}

.sim-exam-reverse-pass {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid rgba(132, 211, 255, 0.3);
  background: rgba(8, 35, 55, 0.38);
  color: #e6f6ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sim-exam-reverse-pass select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(133, 216, 255, 0.42);
  background: rgba(8, 24, 38, 0.85);
  color: #d9f2ff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
}

.sim-exam-reverse-map-canvas {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(142, 214, 255, 0.38);
  background: rgba(7, 18, 30, 0.75);
}

@media (max-width: 860px) {
  .sim-exam-trace-toolbar {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .sim-exam-trace-switches {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sim-exam-trace-switches .sim-exam-reverse-toggle:nth-child(3) {
    grid-column: auto;
  }

  .sim-exam-trace-filters {
    grid-template-columns: 1fr;
  }

  .sim-exam-reverse-map-controls {
    grid-template-columns: 1fr;
  }
}

.sim-exam-report-reverse-table {
  border-radius: 12px;
  border: 1px solid rgba(255, 152, 152, 0.36);
  background: linear-gradient(145deg, rgba(36, 16, 27, 0.82), rgba(23, 11, 20, 0.82));
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.sim-exam-report-reverse-table h4 {
  margin: 0;
  color: #ffe8ee;
  font-size: 13px;
}

.sim-exam-report-reverse-table p {
  margin: 0;
  color: #ffd9e2;
  font-size: 12px;
  line-height: 1.35;
}

.sim-exam-report-reverse-table.empty {
  border-style: dashed;
  border-color: rgba(255, 162, 162, 0.42);
}

.sim-exam-report-reverse-table-scroll {
  overflow: auto;
  border-radius: 9px;
  border: 1px solid rgba(255, 156, 156, 0.34);
  background: rgba(18, 10, 18, 0.54);
}

.sim-exam-report-reverse-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 610px;
}

.sim-exam-report-reverse-table th,
.sim-exam-report-reverse-table td {
  border-bottom: 1px solid rgba(255, 156, 156, 0.16);
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
}

.sim-exam-report-reverse-table th {
  color: #ffd5df;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(48, 19, 34, 0.9);
}

.sim-exam-report-reverse-table td {
  color: #ffeaf0;
}

.sim-exam-report-reverse-table tbody tr:nth-child(even) td {
  background: rgba(255, 159, 159, 0.04);
}

.sim-exam-report-trace-table {
  border-radius: 12px;
  border: 1px solid rgba(114, 187, 241, 0.3);
  background: linear-gradient(145deg, rgba(7, 24, 39, 0.88), rgba(5, 17, 29, 0.88));
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.sim-exam-report-trace-table h4 {
  margin: 0;
  color: #e4f5ff;
  font-size: 13px;
}

.sim-exam-report-trace-table-scroll {
  overflow: auto;
  border-radius: 9px;
  border: 1px solid rgba(129, 201, 245, 0.28);
  background: rgba(8, 20, 31, 0.58);
}

.sim-exam-report-trace-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.sim-exam-report-trace-table th,
.sim-exam-report-trace-table td {
  border-bottom: 1px solid rgba(129, 201, 245, 0.16);
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
}

.sim-exam-report-trace-table th {
  color: #cdeaff;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(10, 30, 46, 0.93);
}

.sim-exam-report-trace-table td {
  color: #e6f6ff;
}

.sim-exam-report-trace-table tbody tr:nth-child(even) td {
  background: rgba(120, 196, 250, 0.05);
}

.sim-exam-report-parking-borders {
  border-radius: 12px;
  border: 1px solid rgba(255, 168, 168, 0.34);
  background: linear-gradient(145deg, rgba(36, 17, 26, 0.82), rgba(23, 11, 19, 0.82));
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.sim-exam-report-parking-borders h4 {
  margin: 0;
  color: #ffe8ef;
  font-size: 13px;
}

.sim-exam-report-parking-borders p {
  margin: 0;
  color: #ffd9e2;
  font-size: 12px;
  line-height: 1.35;
}

.sim-exam-report-parking-borders.empty {
  border-style: dashed;
  border-color: rgba(255, 169, 169, 0.44);
}

.sim-exam-report-parking-borders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.sim-exam-report-parking-borders-item {
  border-radius: 10px;
  border: 1px solid rgba(255, 177, 177, 0.28);
  background: linear-gradient(150deg, rgba(52, 19, 31, 0.76), rgba(30, 11, 21, 0.76));
  padding: 8px;
  display: grid;
  gap: 6px;
}

.sim-exam-report-parking-borders-item header {
  display: grid;
  gap: 2px;
}

.sim-exam-report-parking-borders-item header strong {
  color: #ffeef3;
  font-size: 12px;
}

.sim-exam-report-parking-borders-item header small {
  color: #ffcfda;
  font-size: 11px;
}

.sim-exam-report-parking-borders-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(255, 183, 183, 0.34);
  background: rgba(23, 9, 16, 0.55);
}

.sim-exam-report-parking-borders-item footer {
  color: #ffd5df;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: 10px;
}

.sim-exam-report-parking-borders-placeholder {
  min-height: 96px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 190, 190, 0.35);
  background: rgba(34, 12, 22, 0.52);
  color: #ffd6df;
  font-size: 11px;
  display: grid;
  place-items: center;
}

.sim-exam-report-legend {
  border-radius: 12px;
  border: 1px solid rgba(114, 187, 241, 0.3);
  background: linear-gradient(145deg, rgba(7, 24, 39, 0.88), rgba(5, 17, 29, 0.88));
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.sim-exam-report-legend h4 {
  margin: 0;
  color: #eaf7ff;
  font-size: 13px;
}

.sim-exam-report-legend ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.sim-exam-report-legend li {
  color: #c7e2f4;
  font-size: 12px;
  line-height: 1.35;
}

.sim-exam-check {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  border: 1px solid rgba(117, 193, 248, 0.28);
  background: linear-gradient(150deg, rgba(8, 28, 45, 0.9), rgba(5, 18, 31, 0.9));
  padding: 8px 10px;
}

.sim-exam-check-icon {
  width: 23px;
  height: 23px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.sim-exam-check.ok .sim-exam-check-icon {
  background: rgba(56, 205, 156, 0.22);
  color: #b4ffe1;
  border: 1px solid rgba(117, 238, 188, 0.46);
}

.sim-exam-check.bad .sim-exam-check-icon {
  background: rgba(255, 102, 102, 0.2);
  color: #ffe3e3;
  border: 1px solid rgba(255, 148, 148, 0.46);
}

.sim-exam-check-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sim-exam-check-copy strong {
  color: #e8f7ff;
  font-size: 12px;
}

.sim-exam-check-copy small {
  color: #a8cbdf;
  font-size: 11px;
}

.sim-exam-report-findings {
  border-radius: 12px;
  border: 1px solid rgba(109, 185, 244, 0.28);
  background: linear-gradient(145deg, rgba(8, 26, 40, 0.92), rgba(7, 22, 35, 0.92));
  padding: 10px 12px;
  display: grid;
  gap: 7px;
}

.sim-exam-report-findings.with-errors {
  border-color: rgba(255, 138, 138, 0.44);
  background: linear-gradient(145deg, rgba(53, 17, 27, 0.86), rgba(37, 14, 23, 0.86));
}

.sim-exam-report-findings.clean {
  border-color: rgba(124, 226, 184, 0.42);
  background: linear-gradient(145deg, rgba(14, 54, 43, 0.86), rgba(12, 41, 34, 0.84));
}

.sim-exam-report-findings h4 {
  margin: 0;
  color: #eff8ff;
  font-size: 13px;
}

.sim-exam-report-findings ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.sim-exam-report-findings li {
  color: #d4e8f8;
  font-size: 12px;
  line-height: 1.35;
}

.sim-exam-report-leaderboard {
  border-radius: 12px;
  border: 1px solid rgba(118, 192, 246, 0.3);
  background: linear-gradient(150deg, rgba(9, 29, 45, 0.9), rgba(7, 20, 34, 0.9));
  padding: 11px 12px;
  display: grid;
  gap: 8px;
}

.sim-exam-report-leaderboard h4 {
  margin: 0;
  color: #e3f5ff;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sim-exam-ranking-sub {
  margin: 0;
  color: #9bc7e2;
  font-size: 11px;
}

.sim-exam-ranking-self {
  margin: 0;
  color: #d6edfb;
  font-size: 12px;
}

.sim-exam-ranking-self strong {
  color: #f1fbff;
}

.sim-exam-ranking-self-note {
  color: #9bc6e0;
  font-size: 11px;
}

.sim-exam-ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.sim-exam-ranking-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid rgba(104, 171, 219, 0.2);
  background: rgba(7, 23, 37, 0.55);
}

.sim-exam-ranking-item.is-you {
  border-color: rgba(127, 220, 255, 0.55);
  background: rgba(15, 43, 63, 0.72);
  box-shadow: inset 0 0 0 1px rgba(133, 226, 255, 0.12);
}

.sim-exam-ranking-pos {
  color: #9cc8e5;
  font-size: 11px;
  font-weight: 700;
}

.sim-exam-ranking-name {
  color: #e5f5ff;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-exam-ranking-score {
  color: #86d8ff;
  font-size: 12px;
  font-weight: 800;
}

.sim-exam-ranking-loading,
.sim-exam-ranking-error,
.sim-exam-ranking-empty {
  margin: 0;
  color: #afcfe4;
  font-size: 12px;
}

.sim-exam-report-backend {
  margin: 2px 2px 0;
  color: #94b8cf;
  font-size: 11px;
}

.sim-exam-report-actions {
  padding: 12px 14px;
  border-top: 1px solid rgba(112, 182, 243, 0.28);
  background: linear-gradient(180deg, rgba(7, 20, 33, 0.9), rgba(5, 16, 28, 0.92));
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sim-exam-report-empty {
  margin: 0;
  color: #cae4f8;
  font-size: 13px;
}

body.display-non-creator.display-non-creator-alt .sim-exam-report-panel {
  border-color: rgba(141, 209, 255, 0.52);
  background:
    linear-gradient(160deg, rgba(5, 18, 34, 0.98), rgba(8, 30, 50, 0.95)),
    radial-gradient(circle at 74% 0, rgba(97, 188, 255, 0.16), transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(150, 220, 255, 0.12),
    0 36px 72px rgba(0, 6, 16, 0.62);
}

@media (max-width: 860px) {
  .sim-exam-report-grid {
    grid-template-columns: 1fr;
  }

  .sim-exam-report-checks {
    grid-template-columns: 1fr;
  }

  .sim-exam-report-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

.sim-hud {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(146, 191, 212, 0.35);
  background: rgba(5, 18, 27, 0.65);
  color: #e9f5fb;
  font-size: 12px;
  backdrop-filter: blur(4px);
}

.sim-cockpit-chips {
  display: none;
}

.sim-penalty-card {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 5;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: min(90%, 680px);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 143, 143, 0.65);
  background: linear-gradient(120deg, rgba(143, 19, 33, 0.94), rgba(113, 18, 36, 0.94));
  color: #ffe5e7;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

.sim-penalty-card.success {
  border: 1px solid rgba(129, 238, 167, 0.72);
  background: linear-gradient(120deg, rgba(14, 99, 49, 0.95), rgba(18, 124, 66, 0.93));
  color: #eafff2;
}

.sim-veedor-bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  max-width: min(64vw, 420px);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(147, 205, 255, 0.78);
  background: linear-gradient(135deg, rgba(19, 52, 74, 0.96), rgba(8, 31, 48, 0.94));
  color: #e8f7ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.24;
  text-align: center;
  transform: translate(-50%, -124%);
  box-shadow: 0 14px 28px rgba(4, 12, 19, 0.36);
  pointer-events: none;
  backdrop-filter: blur(3px);
}

.sim-veedor-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(12, 39, 58, 0.96);
  border-right: 1px solid rgba(147, 205, 255, 0.78);
  border-bottom: 1px solid rgba(147, 205, 255, 0.78);
}

.sim-assignment-banner {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 6;
  min-width: 320px;
  max-width: min(92%, 760px);
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 216, 121, 0.6);
  background: linear-gradient(125deg, rgba(50, 38, 14, 0.94), rgba(73, 47, 16, 0.92));
  color: #fff2c9;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.sim-assignment-banner.danger {
  border-color: rgba(255, 132, 132, 0.66);
  background: linear-gradient(125deg, rgba(107, 21, 27, 0.94), rgba(138, 25, 34, 0.94));
  color: #ffe8ea;
}

.sim-signal-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.sim-signal-flasher {
  display: inline-block;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(60, 255, 120, 0));
  transform: translateX(0);
}

.sim-signal-left {
  transform: translateX(-10px);
}

.sim-signal-right {
  transform: translateX(10px);
}

.sim-signal-flasher.active {
  animation: simSignalBlink 0.95s steps(1, end) infinite;
}

.sim-signal-icon {
  width: 110px;
  height: 72px;
  display: block;
  transform-origin: 50% 50%;
}

.sim-signal-icon path {
  fill: none;
  stroke: #28ff5f;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sim-signal-right .sim-signal-icon {
  transform: scaleX(-1);
}

@keyframes simSignalBlink {
  0% {
    opacity: 0.98;
    filter: drop-shadow(0 0 12px rgba(45, 255, 106, 0.86));
  }

  44% {
    opacity: 0.98;
    filter: drop-shadow(0 0 16px rgba(45, 255, 106, 0.88));
  }

  45% {
    opacity: 0.1;
    filter: drop-shadow(0 0 0 rgba(45, 255, 106, 0));
  }

  100% {
    opacity: 0.1;
    filter: drop-shadow(0 0 0 rgba(45, 255, 106, 0));
  }
}

.mini-map-canvas {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  width: 210px;
  height: 150px;
  border-radius: 10px;
  border: 1px solid rgba(146, 191, 212, 0.44);
  background: rgba(6, 18, 27, 0.74);
}

.sim-inset-frame {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 210px;
  height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(128, 208, 255, 0.58);
  background: linear-gradient(150deg, rgba(8, 26, 46, 0.2), rgba(6, 20, 34, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(190, 236, 255, 0.18),
    0 12px 32px rgba(0, 4, 12, 0.5),
    0 0 18px rgba(74, 186, 255, 0.2);
  pointer-events: none;
}

.sim-inset-frame::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 11px;
  border: 1px solid rgba(210, 242, 255, 0.2);
}

.sim-webgl-status {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 142, 142, 0.4);
  background: rgba(88, 20, 29, 0.7);
  color: #ffd7da;
  font-size: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  border: 1px solid rgba(139, 194, 215, 0.24);
  padding: 8px;
  text-align: left;
}

th {
  background: rgba(19, 62, 84, 0.62);
  color: #d6edf8;
}

td {
  background: rgba(7, 23, 34, 0.48);
}

.table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.table-head h3 {
  margin: 0;
}

.table-head .btn {
  margin: 0;
  width: auto;
  min-width: 110px;
}

@media (max-width: 1080px) {
  body {
    padding: 14px;
  }

  .auth-card,
  .theory-card,
  .profile-card {
    grid-column: span 12;
  }

  .sim-layout {
    grid-template-columns: 1fr;
  }

  .mini-map-canvas {
    width: 160px;
    height: 116px;
  }

  .sim-signal-overlay {
    padding: 0 24px;
  }

  .sim-signal-icon {
    width: 84px;
    height: 54px;
  }

  .sim-assignment-banner {
    min-width: 250px;
    font-size: 15px;
    padding: 8px 12px;
    bottom: 12px;
  }

  .sim-veedor-bubble {
    font-size: 12px;
    padding: 8px 10px;
    max-width: min(84vw, 320px);
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-side {
    justify-items: start;
  }
}

/* Non-creator cockpit layout */
body.display-non-creator {
  background:
    radial-gradient(circle at 16% 12%, rgba(33, 115, 156, 0.42) 0%, transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(16, 52, 95, 0.42) 0%, transparent 36%),
    linear-gradient(134deg, #040e1c 0%, #061429 56%, #081731 100%);
}

body.display-non-creator .blob {
  opacity: 0.16;
}

body.display-non-creator .layout {
  max-width: min(98vw, 1600px);
  grid-template-columns: 1fr;
  gap: 12px;
}

body.display-non-creator .auth-card,
body.display-non-creator .theory-card,
body.display-non-creator .board-card,
body.display-non-creator .profile-card {
  display: none;
}

body.display-non-creator .hero {
  max-width: min(98vw, 1600px);
  margin-bottom: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(92, 173, 255, 0.34);
  background:
    linear-gradient(128deg, rgba(5, 20, 39, 0.9), rgba(9, 30, 58, 0.86)),
    radial-gradient(circle at 80% 0, rgba(88, 180, 255, 0.2), transparent 55%);
  box-shadow:
    0 14px 38px rgba(2, 10, 21, 0.48),
    inset 0 0 0 1px rgba(122, 203, 255, 0.08);
}

body.display-non-creator .hero h1 {
  font-family: "Rajdhani", "Sora", "Avenir Next", sans-serif;
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d9efff;
}

body.display-non-creator .hero-sub {
  color: #a9c9e8;
}

body.display-non-creator .auth-pill {
  border-color: rgba(84, 211, 185, 0.42);
  background: rgba(8, 40, 38, 0.62);
  color: #bbffe9;
}

body.display-non-creator .sim-card {
  border-radius: 24px;
  border: 1px solid rgba(94, 169, 255, 0.32);
  background:
    linear-gradient(140deg, rgba(4, 18, 36, 0.93), rgba(5, 24, 44, 0.9)),
    radial-gradient(circle at 74% 4%, rgba(74, 174, 255, 0.18), transparent 55%);
  box-shadow:
    0 24px 68px rgba(1, 8, 17, 0.58),
    inset 0 0 0 1px rgba(126, 198, 255, 0.08);
  padding: 14px;
}

body.display-non-creator .sim-card .card-head {
  margin-bottom: 10px;
  padding: 6px 8px 0;
}

body.display-non-creator .sim-card .card-head h2 {
  font-family: "Rajdhani", "Sora", "Avenir Next", sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dff2ff;
}

body.display-non-creator .sim-card .card-head p {
  color: #9fc0df;
}

body.display-non-creator .sim-layout {
  gap: 12px;
  grid-template-columns: minmax(250px, 318px) minmax(0, 1fr);
  align-items: stretch;
}

body.display-non-creator .sim-controls {
  max-height: min(74vh, 760px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(104, 182, 255, 0.33);
  background:
    linear-gradient(160deg, rgba(5, 19, 37, 0.92), rgba(6, 24, 47, 0.9)),
    radial-gradient(circle at 50% 0, rgba(56, 165, 255, 0.14), transparent 50%);
  box-shadow:
    inset 0 0 0 1px rgba(105, 190, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.25);
  padding: 10px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(93, 178, 255, 0.58) rgba(7, 29, 52, 0.64);
}

body.display-non-creator .sim-controls::-webkit-scrollbar {
  width: 8px;
}

body.display-non-creator .sim-controls::-webkit-scrollbar-track {
  background: rgba(7, 29, 52, 0.64);
  border-radius: 999px;
}

body.display-non-creator .sim-controls::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(106, 202, 255, 0.85), rgba(78, 139, 255, 0.75));
  border-radius: 999px;
}

body.display-non-creator .sim-controls label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b6dcff;
  font-weight: 700;
}

body.display-non-creator .sim-inline-field {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
}

body.display-non-creator .sim-inline-field label {
  margin: 0;
}

body.display-non-creator .sim-inline-field select {
  margin: 0;
}

body.display-non-creator .sim-controls input,
body.display-non-creator .sim-controls select {
  border-color: rgba(105, 174, 238, 0.46);
  background: linear-gradient(135deg, rgba(5, 20, 37, 0.88), rgba(7, 31, 58, 0.75));
  color: #e8f5ff;
}

body.display-non-creator .sim-controls .btn {
  border-radius: 12px;
  border: 1px solid rgba(108, 196, 255, 0.22);
  color: #dff4ff;
  background: linear-gradient(125deg, rgba(26, 77, 127, 0.84), rgba(17, 101, 162, 0.8));
}

body.display-non-creator .sim-controls .btn:not(.btn-soft):not(.btn-ghost) {
  color: #041423;
  background: linear-gradient(116deg, #49e0ff 0%, #6cb9ff 48%, #8b92ff 100%);
}

body.display-non-creator .sim-controls .button-row {
  gap: 8px;
}

body.display-non-creator .non-creator-only .btn {
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(124, 212, 255, 0.34);
  background: linear-gradient(120deg, rgba(23, 86, 145, 0.9), rgba(17, 118, 183, 0.84));
  box-shadow:
    inset 0 0 0 1px rgba(152, 227, 255, 0.12),
    0 8px 18px rgba(5, 16, 29, 0.28);
}

body.display-non-creator #overview-actions-row {
  margin-top: 10px;
}

body.display-non-creator #start-sim {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 240px);
  text-align: center;
  margin-top: 8px;
}

body.display-non-creator .sim-overview-zoom,
body.display-non-creator .kbd-grid {
  border-color: rgba(98, 174, 244, 0.3);
  background: linear-gradient(145deg, rgba(7, 24, 41, 0.75), rgba(8, 37, 63, 0.65));
}

body.display-non-creator .kbd-grid p {
  color: #c8e6ff;
}

body.display-non-creator #sim-state,
body.display-non-creator #car-state {
  color: #c0e5ff;
}

body.display-non-creator .sim-viewport {
  min-height: clamp(460px, 78vh, 930px);
  aspect-ratio: auto;
  border-radius: 22px;
  border: 1px solid rgba(96, 183, 255, 0.38);
  background:
    linear-gradient(160deg, rgba(3, 16, 31, 0.98), rgba(8, 34, 58, 0.86)),
    radial-gradient(circle at 72% 0, rgba(83, 177, 255, 0.15), transparent 54%);
  box-shadow:
    inset 0 0 0 1px rgba(136, 205, 255, 0.09),
    0 22px 54px rgba(0, 5, 12, 0.5);
}

body.display-non-creator .non-creator-only {
  display: grid;
}

body.display-non-creator #finish-sim,
body.display-non-creator #assisted-signal-editor,
body.display-non-creator #assisted-divider-editor,
body.display-non-creator label[for="route-select"],
body.display-non-creator #route-select,
body.display-non-creator label[for="multiplayer-room"],
body.display-non-creator #multiplayer-room,
body.display-non-creator #multiplayer-actions-row,
body.display-non-creator #multiplayer-status,
body.display-non-creator #start-assisted-recording,
body.display-non-creator #stop-assisted-recording,
body.display-non-creator #toggle-assisted-mode,
body.display-non-creator #toggle-assisted-visibility,
body.display-non-creator #start-assisted-demo,
body.display-non-creator #creator-assisted-seek-panel,
body.display-non-creator #refresh-assisted-library,
body.display-non-creator #assisted-saved-maps-label,
body.display-non-creator #assisted-saved-maps,
body.display-non-creator #assisted-library-status,
body.display-non-creator #toggle-light,
body.display-non-creator #yield-fail,
body.display-non-creator #sim-state,
body.display-non-creator #car-state,
body.display-non-creator #sim-output {
  display: none !important;
}

body.display-non-creator .creator-only-hint {
  display: none !important;
}

body.display-non-creator .sim-cockpit-chips {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: min(72%, 520px);
  pointer-events: none;
}

body.display-non-creator .sim-cockpit-chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(113, 197, 255, 0.42);
  background: rgba(5, 23, 39, 0.82);
  color: #d2ecff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}

body.display-non-creator .sim-cockpit-chip[data-state="ok"] {
  border-color: rgba(112, 248, 198, 0.58);
  background: rgba(7, 49, 40, 0.86);
  color: #beffea;
}

body.display-non-creator .sim-cockpit-chip[data-state="warn"] {
  border-color: rgba(255, 201, 115, 0.64);
  background: rgba(64, 40, 12, 0.86);
  color: #ffe9b2;
}

body.display-non-creator .sim-cockpit-chip[data-state="danger"] {
  border-color: rgba(255, 134, 134, 0.66);
  background: rgba(83, 23, 30, 0.88);
  color: #ffd8de;
}

body.display-non-creator .mini-map-canvas {
  display: none;
}

body.display-non-creator .sim-hud {
  display: none;
}

body.display-non-creator .sim-cockpit-chips {
  display: none;
}

body.display-non-creator .sim-webgl-status {
  left: 16px;
  bottom: 16px;
}

@media (max-width: 1240px) {
  body.display-non-creator .sim-layout {
    grid-template-columns: 1fr;
  }

  body.display-non-creator .sim-controls {
    max-height: none;
  }

  body.display-non-creator .sim-viewport {
    min-height: clamp(380px, 66vh, 760px);
  }
}

@media (max-width: 760px) {
  body.display-non-creator {
    padding: 10px;
  }

  body.display-non-creator .hero {
    padding: 12px 14px;
    border-radius: 14px;
  }

  body.display-non-creator .sim-card {
    padding: 10px;
    border-radius: 16px;
  }

  body.display-non-creator .sim-controls {
    border-radius: 14px;
  }

  body.display-non-creator .sim-hud {
    min-width: 178px;
    font-size: 11px;
  }

  body.display-non-creator .sim-cockpit-chips {
    max-width: calc(100% - 24px);
    left: 12px;
    right: 12px;
    justify-content: flex-start;
  }
}

/* Non-creator alt dashboard (draft-aligned layout) */
body.display-non-creator.display-non-creator-alt {
  font-family: "Outfit", "Sora", "Avenir Next", "Trebuchet MS", sans-serif;
  padding: 0;
  background: #050d1d;
}

body.display-non-creator.display-non-creator-alt .ambient,
body.display-non-creator.display-non-creator-alt .hero {
  display: none;
}

body.display-non-creator.display-non-creator-alt .layout {
  max-width: none;
  margin: 0;
  display: block;
}

body.display-non-creator.display-non-creator-alt .sim-card {
  margin: 0;
  padding: 14px;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.display-non-creator.display-non-creator-alt .sim-card .card-head {
  display: none;
}

body.display-non-creator.display-non-creator-alt .sim-layout {
  display: grid;
  grid-template-columns: minmax(295px, 340px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar viewport";
  gap: 12px;
  height: 100%;
  min-height: 0;
}

body.display-non-creator.display-non-creator-alt #noncreator-alt-topbar {
  grid-area: topbar;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(110, 180, 255, 0.34);
  background: linear-gradient(120deg, rgba(7, 20, 39, 0.9), rgba(8, 27, 50, 0.84));
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-left {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  gap: 4px;
  width: max-content;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8d8f8;
  font-size: 14px;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-breadcrumb .active {
  color: #e6f4ff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-online-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  justify-self: center;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-status {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys {
  display: inline-flex;
  align-items: flex-end;
  gap: 9px;
  padding: 2px 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-wasd {
  display: grid;
  grid-template-columns: repeat(3, 18px);
  grid-template-rows: repeat(2, 18px);
  gap: 3px;
  align-items: center;
  justify-items: center;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .keycap {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #1d2630;
  background: linear-gradient(180deg, #ffffff 0%, #edf1f4 58%, #d7dde3 100%);
  border: 1px solid rgba(181, 192, 202, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(176, 186, 196, 0.9),
    0 1.5px 0 rgba(116, 127, 139, 0.75),
    0 3px 5px rgba(0, 0, 0, 0.25);
  user-select: none;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-wasd .key-w {
  grid-column: 2;
  grid-row: 1;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-wasd .key-a {
  grid-column: 1;
  grid-row: 2;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-wasd .key-s {
  grid-column: 2;
  grid-row: 2;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-wasd .key-d {
  grid-column: 3;
  grid-row: 2;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-extra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys .hotkeys-label {
  margin: 0;
  color: #a8c5de;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 1240px) {
  body.display-non-creator.display-non-creator-alt .noncreator-alt-hotkeys {
    display: none;
  }
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-quality-slot {
  display: inline-flex;
  align-items: center;
}

body.display-non-creator.display-non-creator-alt #render-quality-field.is-topbar {
  margin: 0;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(129, 205, 255, 0.46);
  background: rgba(8, 28, 51, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.display-non-creator.display-non-creator-alt #render-quality-field.is-topbar label {
  display: none;
}

body.display-non-creator.display-non-creator-alt #render-quality-field.is-topbar select {
  min-width: 88px;
  height: 24px;
  padding: 0 20px 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(127, 197, 255, 0.5);
  background: linear-gradient(135deg, rgba(7, 23, 42, 0.95), rgba(8, 31, 56, 0.86));
  color: #dff0ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(90, 236, 182, 0.5);
  background: rgba(8, 43, 39, 0.82);
  color: #9bffe1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

body.display-non-creator.display-non-creator-alt #render-quality-topbar-slot,
body.display-non-creator.display-non-creator-alt #render-quality-sidebar-slot {
  display: none !important;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-tour-btn {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(129, 205, 255, 0.46);
  background: rgba(8, 28, 51, 0.84);
  color: #d7efff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-layout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(129, 205, 255, 0.46);
  background: rgba(8, 28, 51, 0.84);
  color: #d7efff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-decoration: none;
  transition: filter 120ms ease;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-layout-link:hover {
  filter: brightness(1.06);
}

body.display-non-creator:not(.display-non-creator-alt) #noncreator-alt-topbar {
  display: none !important;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-tour-btn:hover {
  filter: brightness(1.06);
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-online .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #62ffd0;
  box-shadow: 0 0 10px rgba(98, 255, 208, 0.74);
  animation: noncreatorOnlinePulse 1.25s ease-in-out infinite;
}

@keyframes noncreatorOnlinePulse {
  0%,
  100% {
    opacity: 0.95;
    box-shadow: 0 0 10px rgba(98, 255, 208, 0.72);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 2px rgba(98, 255, 208, 0.2);
  }
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-timer {
  min-width: 0;
  margin: 0;
  padding: 4px 7px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(120, 182, 255, 0.44);
  background: rgba(6, 23, 44, 0.85);
  color: #d5ebff;
  font-family: "Space Mono", "JetBrains Mono", "SFMono-Regular", monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-logout {
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 6px 10px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(129, 205, 255, 0.46);
  background: rgba(8, 28, 51, 0.84);
  color: #d7efff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.1;
  white-space: nowrap;
  transition: filter 120ms ease;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-logout:hover {
  filter: brightness(1.06);
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-logout-inline {
  width: auto;
  min-width: 0;
  min-height: 26px;
  padding: 5px 9px;
  margin: 0 0 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(129, 205, 255, 0.46);
  background: rgba(8, 28, 51, 0.84);
  color: #d7efff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1.1;
  white-space: nowrap;
  transition: filter 120ms ease;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-logout-inline:hover {
  filter: brightness(1.06);
}

body.display-non-creator.display-non-creator-alt .sim-controls {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  max-height: none;
  border-radius: 16px;
  border: 1px solid rgba(109, 180, 255, 0.34);
  background:
    linear-gradient(160deg, rgba(6, 21, 39, 0.97), rgba(7, 24, 46, 0.93)),
    radial-gradient(circle at 50% 0, rgba(90, 183, 255, 0.1), transparent 54%);
  box-shadow:
    inset 0 0 0 1px rgba(127, 200, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.3);
  padding: 14px 12px 12px;
  overflow: auto;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 2px 4px;
  padding: 10px 9px;
  border-radius: 10px;
  border: 1px solid rgba(108, 182, 255, 0.34);
  background: linear-gradient(138deg, rgba(8, 28, 53, 0.88), rgba(8, 25, 44, 0.87));
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .logo-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(132, 216, 255, 0.68);
  background: radial-gradient(circle at 35% 32%, #71deff, #2077d2 72%);
  color: #edfdff;
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 700;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .logo-copy {
  display: grid;
  gap: 2px;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .v-tag {
  color: #8fc6f6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand h3 {
  margin: 0;
  color: #e5f4ff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.display-non-creator.display-non-creator-alt .sim-controls label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9ddff;
}

body.display-non-creator.display-non-creator-alt .sim-inline-field {
  margin: 4px 2px 8px;
  display: grid;
  grid-template-columns: auto minmax(126px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(108, 181, 255, 0.26);
  background: rgba(7, 24, 43, 0.55);
}

body.display-non-creator.display-non-creator-alt .sim-controls input,
body.display-non-creator.display-non-creator-alt .sim-controls select {
  margin: 0;
  border-color: rgba(122, 190, 255, 0.5);
  background: linear-gradient(135deg, rgba(7, 23, 42, 0.92), rgba(8, 31, 56, 0.82));
  color: #e9f5ff;
}

body.display-non-creator.display-non-creator-alt .sim-controls .button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn {
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(139, 214, 255, 0.42);
  color: #edf7ff;
  font-weight: 700;
  letter-spacing: 0.01em;
  background:
    linear-gradient(165deg, rgba(21, 94, 154, 0.94), rgba(20, 63, 117, 0.94)),
    linear-gradient(0deg, rgba(179, 233, 255, 0.11), rgba(179, 233, 255, 0.11));
  box-shadow:
    inset 0 1px 0 rgba(220, 245, 255, 0.24),
    inset 0 -1px 0 rgba(17, 51, 81, 0.5),
    0 8px 16px rgba(2, 10, 21, 0.28),
    0 0 0 1px rgba(111, 188, 255, 0.08);
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    filter 140ms ease;
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn:not(.btn-soft):not(.btn-ghost) {
  color: #021627;
  border-color: rgba(143, 226, 255, 0.55);
  background:
    linear-gradient(165deg, #7ff2ff 0%, #72d2ff 52%, #88a7ff 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(40, 82, 129, 0.24),
    0 10px 18px rgba(4, 16, 31, 0.32);
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn:focus-visible {
  outline: 2px solid rgba(124, 226, 255, 0.85);
  outline-offset: 1px;
}

body.display-non-creator.display-non-creator-alt #start-sim {
  grid-column: 1 / -1;
  width: min(84%, 240px);
  justify-self: center;
  margin: 6px auto 8px;
}

body.display-non-creator.display-non-creator-alt #overview-actions-row {
  margin-top: 10px;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-zone {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(128, 194, 255, 0.24);
  background: linear-gradient(150deg, rgba(8, 28, 50, 0.4), rgba(8, 31, 58, 0.28));
  overflow: hidden;
  isolation: isolate;
}

body.display-non-creator.display-non-creator-alt .sim-overview-zoom,
body.display-non-creator.display-non-creator-alt .kbd-grid {
  margin-top: 0;
  border-color: rgba(104, 178, 245, 0.32);
  background: linear-gradient(145deg, rgba(8, 27, 47, 0.78), rgba(9, 37, 63, 0.68));
}

body.display-non-creator.display-non-creator-alt .kbd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 11px;
  margin-top: 8px;
}

body.display-non-creator.display-non-creator-alt #assisted-status {
  display: none;
}

body.display-non-creator.display-non-creator-alt .sim-controls .button-row.non-creator-only {
  padding-top: 2px;
}

body.display-non-creator.display-non-creator-alt #start-assisted-demo-route-a,
body.display-non-creator.display-non-creator-alt #start-assisted-demo-route-b,
body.display-non-creator.display-non-creator-alt #start-assisted-help-route-a,
body.display-non-creator.display-non-creator-alt #start-assisted-help-route-b,
body.display-non-creator.display-non-creator-alt #start-route-exam-a,
body.display-non-creator.display-non-creator-alt #start-route-exam-b,
body.display-non-creator.display-non-creator-alt #global-overview,
body.display-non-creator.display-non-creator-alt #toggle-overlays {
  min-height: 44px;
}

body.display-non-creator.display-non-creator-alt .kbd-grid p {
  color: #cfe8ff;
  font-size: 12px;
}

body.display-non-creator.display-non-creator-alt.non-premium-lock .noncreator-premium-zone > * {
  pointer-events: none;
  user-select: none;
  filter: saturate(0.9) brightness(0.96);
}

body.display-non-creator.display-non-creator-alt.non-premium-lock .noncreator-premium-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: 12px;
  border: 1px solid rgba(255, 121, 121, 0.5);
  background:
    linear-gradient(160deg, rgba(9, 24, 42, 0.48), rgba(8, 28, 50, 0.4)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 98, 98, 0) 0px,
      rgba(255, 98, 98, 0) 17px,
      rgba(255, 98, 98, 0.26) 17px,
      rgba(255, 98, 98, 0.26) 19px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 89, 89, 0) 0px,
      rgba(255, 89, 89, 0) 17px,
      rgba(255, 89, 89, 0.24) 17px,
      rgba(255, 89, 89, 0.24) 19px
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 172, 172, 0.24),
    0 0 0 1px rgba(255, 107, 107, 0.16);
}

body.display-non-creator.display-non-creator-alt.non-premium-lock .noncreator-premium-zone::after {
  content: "Acceso para usuarios Premium";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  width: min(86%, 260px);
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(133, 220, 255, 0.48);
  background: linear-gradient(130deg, rgba(12, 40, 72, 0.76), rgba(8, 31, 56, 0.74));
  color: #dff4ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow:
    inset 0 0 0 1px rgba(170, 230, 255, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.35);
}

body.display-non-creator.display-non-creator-alt.non-premium-lock .noncreator-premium-zone > * {
  pointer-events: auto;
  user-select: auto;
  filter: none;
}

body.display-non-creator.display-non-creator-alt.non-premium-lock .noncreator-premium-zone::before,
body.display-non-creator.display-non-creator-alt.non-premium-lock .noncreator-premium-zone::after {
  content: none;
  display: none;
}

.guided-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  opacity: 1;
  transition: opacity 220ms ease;
}

.guided-tour-overlay.intro-only {
  background: rgba(2, 10, 20, 0.74);
}

.guided-tour-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.guided-tour-hole {
  position: fixed;
  z-index: 1;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(2, 10, 20, 0.72),
    0 0 0 2px rgba(132, 216, 255, 0.92),
    0 0 22px rgba(77, 202, 255, 0.58);
  transition:
    left 220ms ease,
    top 220ms ease,
    width 220ms ease,
    height 220ms ease,
    border-radius 220ms ease,
    box-shadow 220ms ease;
  pointer-events: none;
}

.guided-tour-card {
  position: fixed;
  z-index: 2;
  width: min(94vw, 760px);
  border-radius: 16px;
  border: 1px solid rgba(130, 209, 255, 0.55);
  background: linear-gradient(145deg, rgba(7, 24, 41, 0.97), rgba(9, 34, 58, 0.95));
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(149, 220, 255, 0.12);
  padding: 14px 14px 12px;
  color: #e8f6ff;
  transform: translateY(0);
  transition:
    left 220ms ease,
    top 220ms ease,
    transform 220ms ease;
}

.guided-tour-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.guided-tour-main.has-media {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
  align-items: start;
}

.guided-tour-copy {
  min-width: 0;
}

.guided-tour-step {
  margin: 0 0 6px;
  font-size: 11px;
  color: #9fd0f8;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guided-tour-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.guided-tour-body {
  margin: 10px 0 12px;
  color: #d8edfc;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}

.guided-tour-media {
  border-radius: 12px;
  border: 1px solid rgba(132, 213, 255, 0.44);
  background: linear-gradient(155deg, rgba(8, 28, 48, 0.94), rgba(8, 33, 59, 0.86));
  box-shadow:
    inset 0 0 0 1px rgba(164, 228, 255, 0.09),
    0 10px 24px rgba(0, 0, 0, 0.35);
  padding: 8px;
}

.guided-tour-media-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(145, 216, 255, 0.34);
  background:
    radial-gradient(circle at 16% 20%, rgba(92, 195, 255, 0.28), transparent 42%),
    linear-gradient(160deg, rgba(7, 20, 36, 0.95), rgba(8, 28, 47, 0.92));
  object-fit: cover;
}

.guided-tour-media-caption {
  margin: 8px 0 0;
  color: #b9daf3;
  font-size: 11px;
  line-height: 1.35;
}

.guided-tour-media.is-error .guided-tour-media-video {
  display: none;
}

.guided-tour-media.is-error .guided-tour-media-caption {
  margin-top: 0;
  color: #f2d7b0;
}

.guided-tour-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.guided-tour-main.has-media + .guided-tour-actions {
  margin-top: 14px;
}

@media (max-width: 840px) {
  .guided-tour-main.has-media {
    grid-template-columns: 1fr;
  }
}

.guided-tour-actions .btn {
  margin: 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110, 183, 252, 0.34);
  background: linear-gradient(130deg, rgba(8, 31, 54, 0.92), rgba(7, 23, 40, 0.92));
  position: static;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user .avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #ffd29f 0%, #f2a35e 38%, #c45d2e 100%),
    linear-gradient(160deg, #3f84ff, #5fc8ff);
  box-shadow:
    0 0 0 1px rgba(150, 212, 255, 0.38),
    0 6px 12px rgba(0, 0, 0, 0.3);
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user .user-details {
  display: grid;
  gap: 1px;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user .u-name {
  color: #e8f5ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user .u-rank {
  color: #9ec4e6;
  font-size: 10px;
  line-height: 1.1;
}

body.display-non-creator.display-non-creator-alt .sim-viewport {
  grid-area: viewport;
  min-height: 0;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(110, 184, 255, 0.35);
  background:
    linear-gradient(158deg, rgba(3, 15, 29, 0.99), rgba(8, 32, 56, 0.88)),
    radial-gradient(circle at 74% 0, rgba(97, 188, 255, 0.14), transparent 56%);
  box-shadow:
    inset 0 0 0 1px rgba(130, 204, 255, 0.1),
    0 20px 40px rgba(0, 5, 14, 0.54);
}

body.display-non-creator.display-non-creator-alt .sim-inset-frame {
  border: 1px solid rgba(145, 218, 255, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(198, 240, 255, 0.2),
    0 12px 28px rgba(0, 4, 11, 0.56),
    0 0 16px rgba(88, 188, 255, 0.25);
}

@media (max-width: 1240px) {
  body.display-non-creator.display-non-creator-alt .sim-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "sidebar"
      "viewport";
  }

  body.display-non-creator.display-non-creator-alt #noncreator-alt-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-left,
  body.display-non-creator.display-non-creator-alt .noncreator-alt-center,
  body.display-non-creator.display-non-creator-alt .noncreator-alt-status {
    justify-self: start;
  }

  body.display-non-creator.display-non-creator-alt .sim-controls {
    min-height: 0;
    max-height: none;
  }

  body.display-non-creator.display-non-creator-alt .sim-viewport {
    min-height: clamp(420px, 70vh, 860px);
  }

  /* The one-screen app shell only works while the sidebar and the viewport sit
     side by side. Once they stack, the column is taller than the screen, and
     the card's 100dvh + overflow:hidden clipped everything past the fold —
     which on a phone meant the whole 3D viewport. Let the page scroll instead. */
  body.display-non-creator.display-non-creator-alt .sim-card {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.display-non-creator.display-non-creator-alt .sim-layout {
    height: auto;
  }
}

@media (max-width: 780px) {
  body.display-non-creator.display-non-creator-alt .sim-card {
    padding: 10px;
  }

  body.display-non-creator.display-non-creator-alt #noncreator-alt-topbar {
    padding: 10px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-breadcrumb {
    font-size: 13px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-status {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-center {
    width: 100%;
    justify-content: space-between;
  }
}

/* Non-creator alt refresh (premium sidebar sections) */
body.display-non-creator.display-non-creator-alt {
  font-family: "Inter", "Outfit", "Sora", "Avenir Next", sans-serif;
  background:
    radial-gradient(900px 500px at 82% 52%, rgba(155, 214, 255, 0.24), transparent 35%),
    radial-gradient(1200px 800px at 60% 55%, rgba(45, 122, 255, 0.12), transparent 45%),
    linear-gradient(180deg, #030a16, #071427);
}

body.display-non-creator.display-non-creator-alt .sim-controls {
  border-radius: 20px;
  border: 1px solid rgba(110, 180, 255, 0.34);
  background: linear-gradient(180deg, rgba(7, 18, 36, 0.84), rgba(9, 22, 42, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 20px 40px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(70, 164, 255, 0.08);
  backdrop-filter: blur(12px);
  padding: 14px 6px 12px 2px;
  overflow-x: hidden;
  overflow-y: hidden;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  --logo-text-gap: 0px;
  --title-badge-gap: 14px;
  width: 100%;
  max-width: 100%;
  min-height: 108px;
  padding: 6px 0;
  margin: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(130, 188, 255, 0.08);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .brand-left {
  display: flex;
  align-items: center;
  gap: var(--logo-text-gap);
  flex: 0 1 auto;
  min-width: 0;
  margin-left: -28px;
  transform: none;
  padding-right: 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .logo-circle {
  width: 198px;
  height: 124px;
  flex: 0 0 auto;
  margin-left: -12px;
  margin-right: -20px;
  transform: translateY(2px);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  font-size: 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .logo-circle .logo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
}

@media (max-width: 1480px) {
  body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .logo-circle {
    width: 182px;
    height: 114px;
  }
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .logo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  margin-left: 0;
  padding-right: 0;
  transform: translate(-50%, -50%);
  text-align: left;
  pointer-events: none;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .v-tag {
  margin: 0;
  color: #6f86a7;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand h3 {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  width: auto;
  margin: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .version {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(88px, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 198, 255, 0.16);
  color: #cfe6ff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 1480px) {
  body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand .version {
    transform: translate(80px, -50%);
  }
}

body.display-non-creator.display-non-creator-alt #render-quality-field.sim-inline-field:not(.is-topbar) {
  margin: 4px 2px 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
}

body.display-non-creator.display-non-creator-alt #render-quality-field:not(.is-topbar) label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
}

body.display-non-creator.display-non-creator-alt #start-sim,
body.display-non-creator.display-non-creator-alt .noncreator-demo-btn {
  position: relative;
  width: 100%;
  height: 50px;
  border-radius: 14px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(120, 186, 255, 0.18);
  color: #eef6ff;
  background: linear-gradient(180deg, rgba(15, 31, 57, 0.9), rgba(8, 19, 38, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 14px rgba(67, 172, 255, 0.07);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Keep global/map controls on the same visual skin as "Iniciar sesion libre". */
body.display-non-creator.display-non-creator-alt #global-overview,
body.display-non-creator.display-non-creator-alt #toggle-overlays {
  border: 1px solid rgba(120, 186, 255, 0.18) !important;
  color: #eef6ff !important;
  background: linear-gradient(180deg, rgba(15, 31, 57, 0.9), rgba(8, 19, 38, 0.96)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 14px rgba(67, 172, 255, 0.07) !important;
}

body.display-non-creator.display-non-creator-alt #start-sim::after,
body.display-non-creator.display-non-creator-alt .noncreator-demo-btn::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(99, 232, 255, 0.95), transparent);
  box-shadow: 0 0 10px rgba(99, 232, 255, 0.45);
}

body.display-non-creator.display-non-creator-alt #start-sim {
  grid-column: 1 / -1;
  width: min(84%, 240px);
  justify-self: center;
  margin: 6px auto 10px;
}

body.display-non-creator.display-non-creator-alt .noncreator-sections {
  display: grid;
  gap: 10px;
  width: min(100%, 300px);
  margin: 2px auto 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-section {
  border-radius: 18px;
  border: 1px solid rgba(110, 177, 255, 0.14);
  background: linear-gradient(180deg, rgba(9, 22, 43, 0.76), rgba(6, 15, 30, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 20px rgba(77, 177, 255, 0.06);
  padding: 14px;
}

body.display-non-creator.display-non-creator-alt .noncreator-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #d7ecff;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
}

body.display-non-creator.display-non-creator-alt .noncreator-section-title .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #87f1ff, #24c1ff);
  box-shadow: 0 0 10px rgba(81, 220, 255, 0.55);
}

body.display-non-creator.display-non-creator-alt .noncreator-button-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.display-non-creator.display-non-creator-alt #overview-actions-row {
  width: min(100%, 300px);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.display-non-creator.display-non-creator-alt .sim-overview-zoom.noncreator-flat-range,
body.display-non-creator.display-non-creator-alt .sim-controls .sim-penalty-tools,
body.display-non-creator.display-non-creator-alt .sim-controls .kbd-grid {
  width: min(100%, 300px);
  margin-left: auto;
  margin-right: auto;
}

body.display-non-creator.display-non-creator-alt .sim-controls .sim-penalty-tools,
body.display-non-creator.display-non-creator-alt .sim-controls .kbd-grid {
  display: none !important;
}

body.display-non-creator.display-non-creator-alt #overview-zoom-panel {
  display: none !important;
}

body.display-non-creator.display-non-creator-alt .noncreator-section-zoom {
  margin-top: 10px;
}

body.display-non-creator.display-non-creator-alt #assisted-status {
  display: none;
}

body.display-non-creator.display-non-creator-alt .sim-overview-zoom,
body.display-non-creator.display-non-creator-alt .kbd-grid {
  border-color: rgba(104, 178, 245, 0.32);
  background: linear-gradient(145deg, rgba(8, 27, 47, 0.78), rgba(9, 37, 63, 0.68));
}

body.display-non-creator.display-non-creator-alt .kbd-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.display-non-creator.display-non-creator-alt .kbd-grid p {
  color: #cfe8ff;
}

/* Non-creator premium buttons (ported from premium_sidebar_preview_demo_orange.html) */
body.display-non-creator.display-non-creator-alt .noncreator-premium-zone {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

body.display-non-creator.display-non-creator-alt #start-sim,
body.display-non-creator.display-non-creator-alt .noncreator-demo-btn:not(.noncreator-premium-btn),
body.display-non-creator.display-non-creator-alt #global-overview,
body.display-non-creator.display-non-creator-alt #toggle-overlays {
  justify-content: center;
  text-align: center;
}

body.display-non-creator.display-non-creator-alt .noncreator-flat-range {
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.display-non-creator.display-non-creator-alt .noncreator-flat-range label {
  color: #b9daf7;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.display-non-creator.display-non-creator-alt .noncreator-flat-range input[type="range"] {
  margin-top: 6px;
  accent-color: #86e8ff;
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn.noncreator-premium-btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 64px 0 14px;
  border-radius: 13px;
  color: #edf6ff;
  border: 1px solid rgba(255, 173, 96, 0.22);
  background: linear-gradient(180deg, rgba(15, 31, 57, 0.9), rgba(8, 19, 38, 0.96));
  background-clip: padding-box;
  overflow: visible;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 10px 18px rgba(0, 0, 0, 0.18),
    0 0 12px rgba(255, 145, 0, 0.08),
    0 0 14px rgba(255, 143, 49, 0.18);
  animation: premium-demo-shell 2s ease-in-out infinite;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 152, 68, 0.34), rgba(255, 152, 68, 0.08) 34%, rgba(255, 152, 68, 0) 66%),
    radial-gradient(circle at 84% 0%, rgba(255, 193, 132, 0.16), rgba(255, 193, 132, 0) 40%);
  opacity: 0.62;
  animation: premium-demo-aura 2s ease-in-out infinite;
  will-change: opacity;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(255, 182, 104, 0) 0%,
      rgba(255, 182, 104, 0.2) 18%,
      rgba(255, 196, 124, 0.95) 50%,
      rgba(255, 182, 104, 0.2) 82%,
      rgba(255, 182, 104, 0) 100%) 0% 50% / 100% 100% no-repeat,
    linear-gradient(90deg,
      rgba(255, 182, 104, 0) 36%,
      rgba(255, 214, 166, 0.42) 50%,
      rgba(255, 182, 104, 0) 64%) 0% 50% / 170% 100% no-repeat;
  filter:
    drop-shadow(0 0 4px rgba(255, 148, 52, 0.3))
    drop-shadow(0 0 1px rgba(255, 204, 146, 0.18));
  animation: premium-demo-line 2s ease-in-out infinite;
}

body.display-non-creator.display-non-creator-alt .sim-controls .btn.noncreator-premium-btn:hover {
  filter: none !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 12px 22px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(255, 149, 55, 0.24),
    0 0 22px rgba(255, 130, 24, 0.16);
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .icon-lock {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #ffbf53;
  flex: 0 0 auto;
  font-size: 16px;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .label {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #edf6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .badge {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 4px 8px 5px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff0cf;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg,
      #f6bc5f 0%,
      #eda445 16%,
      #e0862a 46%,
      #c96a16 74%,
      #a94c08 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 196, 0.5),
    inset 0 -2px 4px rgba(92, 28, 0, 0.46),
    inset 0 0 0 1px rgba(255, 164, 56, 0.24),
    0 0 0 1px rgba(138, 58, 10, 0.82),
    0 2px 4px rgba(84, 27, 0, 0.22),
    0 0 8px rgba(150, 60, 8, 0.2);
  text-shadow: 0 1px 0 rgba(86, 34, 0, 0.32);
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .badge::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  height: 34%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 241, 206, 0.66), rgba(255, 241, 206, 0));
  opacity: 0.48;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .badge::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(107, 35, 0, 0), rgba(107, 35, 0, 0.35), rgba(107, 35, 0, 0));
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent {
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent.is-active {
  opacity: 1;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-run {
  display: none !important;
  fill: none;
  stroke: rgba(255, 230, 194, 0.96);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.042 0.958;
  stroke-dashoffset: 0;
  opacity: 0;
  filter:
    drop-shadow(0 0 4px rgba(255, 154, 60, 0.44))
    drop-shadow(0 0 1px rgba(255, 220, 168, 0.24));
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn:hover .edge-accent .trace-run,
body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent.is-active .trace-run {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: opacity 90ms linear;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent.is-active .trace-car {
  opacity: 1;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-body {
  fill: #ffd79a;
  stroke: rgba(54, 20, 4, 0.96);
  stroke-width: 0.75;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-roof {
  fill: #ffe9c8;
  stroke: rgba(63, 25, 6, 0.9);
  stroke-width: 0.5;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-window {
  fill: rgba(56, 102, 144, 0.95);
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-wheel {
  fill: #3c2416;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-rim {
  fill: #e3c3a5;
  stroke: rgba(47, 18, 5, 0.85);
  stroke-width: 0.28;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-divider {
  stroke: rgba(54, 20, 4, 0.9);
  stroke-width: 0.85;
  stroke-linecap: round;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-light-front {
  fill: #fff2c9;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .trace-car .car-light-rear {
  fill: #ff9b7c;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .spark-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s linear;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .spark-layer.is-active {
  opacity: 1;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-accent .spark {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-999px, -999px);
  transform-origin: 0% 50%;
  background: linear-gradient(92deg,
    rgba(255, 250, 238, 0.98) 0%,
    rgba(255, 226, 178, 0.9) 32%,
    rgba(255, 188, 112, 0.66) 64%,
    rgba(255, 154, 78, 0) 100%);
  mix-blend-mode: normal;
  filter: none;
  will-change: transform, opacity;
}

body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .edge-highlight,
body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .corner-glow,
body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .inner-tint,
body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .bottom-line {
  display: none !important;
}

@keyframes premium-demo-shell {
  0%,
  100% {
    border-color: rgba(255, 173, 96, 0.22);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
      0 0 14px rgba(255, 143, 49, 0.18);
  }
  50% {
    border-color: rgba(255, 189, 118, 0.3);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
      0 0 18px rgba(255, 146, 52, 0.28),
      0 0 26px rgba(255, 129, 28, 0.14);
  }
}

@keyframes premium-demo-aura {
  0%,
  100% { opacity: 0.62; }
  50% { opacity: 0.96; }
}

@keyframes premium-demo-line {
  0%,
  100% {
    opacity: 0.84;
    background-position: 0% 50%, 0% 50%;
    filter:
      drop-shadow(0 0 4px rgba(255, 148, 52, 0.3))
      drop-shadow(0 0 1px rgba(255, 204, 146, 0.18));
  }
  50% {
    opacity: 1;
    background-position: 0% 50%, 100% 50%;
    filter:
      drop-shadow(0 0 6px rgba(255, 148, 52, 0.44))
      drop-shadow(0 0 2px rgba(255, 214, 160, 0.24));
  }
}

@keyframes premium-trace-dash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

body.display-non-creator.display-non-creator-alt .sim-penalty-tools {
  margin-top: 10px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

body.display-non-creator.display-non-creator-alt .sim-penalty-tools .sim-penalty-total {
  margin: 0;
}

body.display-non-creator.display-non-creator-alt #reset-penalty.noncreator-premium-btn {
  width: auto;
  min-width: 180px;
}

/* Public ManejaLab landing */
.public-landing {
  display: none;
}

body.display-public-landing {
  --public-blue: #1476ff;
  --public-bg: #020911;
  --public-border: rgba(105, 164, 222, 0.27);
  padding: 0;
  color: #f5f8ff;
  background:
    radial-gradient(circle at 76% 17%, rgba(7, 86, 188, 0.25), transparent 31%),
    radial-gradient(circle at 24% 48%, rgba(14, 92, 173, 0.13), transparent 32%),
    #020911;
}

body.display-public-landing > .ambient,
body.display-public-landing > .hero,
body.display-public-landing > .layout,
body.display-public-landing > .guided-tour-overlay {
  display: none !important;
}

body.display-public-landing .public-landing {
  display: block;
  min-height: 100vh;
  overflow: hidden;
  color: #f5f8ff;
  font-family: "Inter", "Avenir Next", sans-serif;
}

.public-nav {
  position: relative;
  z-index: 20;
  width: min(1320px, calc(100% - 64px));
  height: 98px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.public-brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f8fbff;
  text-decoration: none;
}

.public-brand-mark {
  width: 43px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #48b3ff;
  font-size: 39px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(38, 151, 255, 0.56));
}

.public-brand-copy {
  display: grid;
  line-height: 1;
}

.public-brand-copy strong {
  font-size: 25px;
  letter-spacing: -0.04em;
}

.public-brand-copy strong span,
.public-features-section h2 span {
  color: var(--public-blue);
}

.public-brand-copy small {
  margin-top: 7px;
  color: #4d9ee9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.public-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.public-nav-links a,
.public-footer a {
  color: rgba(239, 246, 255, 0.88);
  text-decoration: none;
  font-size: 13px;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.public-nav-links a:hover,
.public-footer a:hover {
  color: #51aaff;
}

.public-btn {
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.public-btn:hover {
  transform: translateY(-2px);
}

.public-btn:focus-visible,
.public-nav a:focus-visible,
.public-login-close:focus-visible,
.public-menu-toggle:focus-visible {
  outline: 3px solid rgba(62, 165, 255, 0.58);
  outline-offset: 3px;
}

.public-btn-primary {
  border-color: rgba(75, 161, 255, 0.55);
  background: linear-gradient(135deg, #1683ff 0%, #0854df 100%);
  box-shadow:
    0 12px 30px rgba(0, 88, 230, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.public-btn-primary:hover {
  box-shadow:
    0 16px 34px rgba(0, 103, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.public-nav-cta {
  min-width: 146px;
  min-height: 40px;
  padding-inline: 15px;
  gap: 8px;
  border-color: rgba(42, 145, 255, 0.66);
  color: #2995ff;
  background:
    linear-gradient(145deg, rgba(5, 23, 45, 0.96), rgba(3, 14, 29, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(56, 158, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 13px rgba(0, 105, 230, 0.09);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  backdrop-filter: blur(10px);
}

.public-nav-user-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-nav-cta:hover {
  border-color: rgba(91, 184, 255, 0.98);
  color: #50adff;
  background:
    linear-gradient(145deg, rgba(7, 33, 63, 0.98), rgba(3, 18, 37, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(90, 187, 255, 0.28),
    0 0 18px rgba(0, 121, 255, 0.16);
}

.public-menu-toggle {
  display: none;
  width: 45px;
  height: 45px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--public-border);
  border-radius: 9px;
  background: rgba(5, 21, 37, 0.82);
}

.public-menu-toggle span {
  width: 100%;
  height: 2px;
  display: block;
  margin: 4px 0;
  background: #fff;
}

.public-hero-section {
  width: min(1320px, calc(100% - 64px));
  min-height: 820px;
  margin: 0 auto;
  padding: 70px 0 28px;
  display: grid;
  grid-template-columns: minmax(330px, 0.76fr) minmax(560px, 1.44fr);
  gap: 22px;
  align-items: center;
  position: relative;
}

.public-hero-section::before {
  content: "";
  position: absolute;
  inset: -170px -22vw auto 42%;
  height: 720px;
  z-index: -1;
  background:
    radial-gradient(circle at 55% 52%, rgba(32, 123, 255, 0.22), transparent 43%),
    linear-gradient(112deg, transparent 20%, rgba(8, 69, 143, 0.11), transparent 70%);
  transform: rotate(-5deg);
}

.public-hero-copy {
  position: relative;
  z-index: 3;
  align-self: start;
}

.public-kicker {
  width: max-content;
  margin: 0 auto 22px;
  padding: 6px 14px;
  border: 1px solid rgba(18, 124, 255, 0.53);
  border-radius: 999px;
  color: #2990ff;
  background: rgba(3, 25, 47, 0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.public-hero-copy h1 {
  margin: 0;
  color: #f6f7fb;
  font-size: clamp(56px, 6.2vw, 85px);
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.public-hero-copy h1 span {
  color: var(--public-blue);
  text-shadow: 0 8px 35px rgba(10, 105, 255, 0.22);
}

.public-hero-description {
  max-width: 490px;
  margin: 23px 0 0;
  color: #c2ccd8;
  font-size: 16px;
  line-height: 1.58;
}

.public-hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}

.public-hero-actions .public-btn {
  min-height: 61px;
  padding-inline: 24px;
}

.public-simulator-visual {
  height: 595px;
  align-self: start;
  position: relative;
  z-index: 2;
  perspective: 1400px;
}

.public-device-glow {
  position: absolute;
  inset: 25% 0 0 7%;
  border-radius: 50%;
  background: rgba(0, 102, 255, 0.24);
  filter: blur(70px);
}

.public-device {
  width: 790px;
  height: 500px;
  position: absolute;
  left: -5px;
  top: 10px;
  overflow: hidden;
  border: 9px solid #06101c;
  border-radius: 27px;
  background: #06101c;
  box-shadow:
    0 35px 60px rgba(0, 0, 0, 0.62),
    0 0 0 1px #197fd4,
    0 0 35px rgba(0, 91, 218, 0.3);
  transform: rotateY(-7deg) rotateZ(-4deg);
  transform-origin: center;
}

.public-device::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.09), transparent 19%, transparent 80%, rgba(35, 152, 255, 0.12));
}

.public-device-topbar {
  height: 50px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 0.7fr;
  align-items: center;
  gap: 18px;
  color: #91a7bd;
  background: #030b13;
  font-size: 10px;
}

.public-device-topbar strong {
  color: #fff;
}

.public-device-status {
  color: #40db8f;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.public-device-status i {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: #2fe285;
  box-shadow: 0 0 8px #2fe285;
}

.public-device-user {
  justify-self: end;
  color: #fff;
  font-weight: 700;
}

.public-device-user small {
  display: block;
  color: #71889f;
  font-weight: 500;
}

.public-device-body {
  height: calc(100% - 50px);
  display: grid;
  grid-template-columns: 180px 1fr;
}

.public-device-sidebar {
  padding: 15px 12px;
  border-right: 1px solid rgba(74, 145, 211, 0.2);
  background: linear-gradient(180deg, #061524, #030c15);
}

.public-device-logo {
  margin-bottom: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.public-device-logo b {
  margin-right: 5px;
  color: #38a7ff;
}

.public-device-sidebar p {
  margin: 12px 2px 6px;
  color: #96b4d0;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.public-device-sidebar button {
  height: 35px;
  margin: 0 0 5px;
  padding: 0 7px;
  border: 1px solid rgba(63, 126, 182, 0.22);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f2f7fb;
  background: linear-gradient(90deg, rgba(8, 24, 39, 0.96), rgba(10, 33, 55, 0.96));
  font-size: 7px;
  font-weight: 700;
}

.public-device-sidebar button span {
  padding: 3px 5px;
  border-radius: 4px;
  color: #fff4c9;
  background: #ed8a19;
  font-size: 6px;
}

.public-road-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #55b7ec 0 51%, #2c9d43 51% 100%);
}

.public-sun {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 36%;
  top: -50px;
  border-radius: 50%;
  background: rgba(214, 242, 255, 0.35);
}

.public-mountains {
  position: absolute;
  inset: 38% 0 auto 0;
  height: 80px;
  opacity: 0.42;
  background: linear-gradient(150deg, transparent 10%, #2d6b77 11% 20%, transparent 21% 36%, #317284 37% 50%, transparent 51%);
}

.public-road {
  position: absolute;
  width: 80%;
  height: 73%;
  left: 10%;
  bottom: 0;
  background: linear-gradient(90deg, #252b30, #333a3e 49%, #20262a);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
}

.public-road-line {
  position: absolute;
  width: 7px;
  height: 67%;
  bottom: 0;
  background: repeating-linear-gradient(180deg, #f4f3e9 0 18px, transparent 18px 35px);
  transform-origin: bottom;
}

.public-road-line-a {
  left: 43%;
  transform: rotate(9deg);
}

.public-road-line-b {
  right: 43%;
  transform: rotate(-9deg);
}

.public-tree {
  position: absolute;
  width: 48px;
  height: 95px;
  bottom: 43%;
  z-index: 2;
}

.public-tree::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 42px;
  left: 20px;
  bottom: 0;
  background: #4b2e17;
}

.public-tree::after {
  content: "";
  position: absolute;
  inset: 0 0 25px;
  background: #075d28;
  clip-path: polygon(50% 0, 100% 100%, 0 100%, 18% 68%, 3% 68%, 50% 12%, 97% 68%, 82% 68%);
}

.public-tree-a {
  left: 5%;
  transform: scale(0.86);
}

.public-tree-b {
  right: 5%;
  transform: scale(1.18);
}

.public-tree-c {
  right: 19%;
  transform: scale(0.65);
}

.public-watchtower {
  position: absolute;
  width: 48px;
  height: 90px;
  right: 24%;
  bottom: 43%;
  border: solid #5b5551;
  border-width: 0 5px 5px;
  transform: skew(-3deg);
}

.public-watchtower i {
  position: absolute;
  width: 68px;
  height: 24px;
  left: -15px;
  top: -15px;
  border-bottom: 7px solid #3a302b;
  background: #c8b9a5;
  clip-path: polygon(10% 25%, 100% 0, 88% 100%, 0 100%);
}

.public-cockpit {
  position: absolute;
  width: 110%;
  height: 42%;
  left: -5%;
  bottom: -2%;
  z-index: 4;
  border-top: 12px solid #06080b;
  border-radius: 48% 48% 0 0;
  background:
    radial-gradient(circle at 50% 44%, #06254d 0 8%, #040608 9% 13%, transparent 14%),
    linear-gradient(180deg, #0e1217, #020304);
  box-shadow: 0 -18px 20px rgba(0, 0, 0, 0.55);
}

.public-wheel {
  position: absolute;
  width: 128px;
  height: 128px;
  left: 8%;
  top: 4px;
  border: 18px solid #050608;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px #22272c,
    0 0 0 3px #181c21;
}

.public-wheel::before,
.public-wheel::after {
  content: "";
  position: absolute;
  height: 16px;
  width: 64px;
  left: 13px;
  top: 38px;
  background: #07090c;
}

.public-wheel::after {
  transform: rotate(90deg);
}

.public-speed {
  position: absolute;
  left: 47%;
  top: 12px;
  color: #5ed0ff;
  font: 700 32px/1 "Space Mono", monospace;
  text-shadow: 0 0 10px rgba(49, 170, 255, 0.75);
}

.public-speed small {
  display: block;
  color: #8ea8bf;
  font-size: 7px;
  text-align: center;
}

.public-console {
  position: absolute;
  width: 150px;
  height: 75px;
  right: 9%;
  top: 43px;
  border: 1px solid #311620;
  border-radius: 7px;
  background:
    repeating-linear-gradient(45deg, rgba(217, 16, 30, 0.38) 0 2px, transparent 2px 8px),
    #090a0b;
  box-shadow: inset 0 0 24px rgba(244, 16, 37, 0.14);
}

.public-scene-note {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 5;
  color: #7f95aa;
  font-size: 7px;
}

.public-success-card {
  grid-column: 1 / -1;
  min-height: 196px;
  margin-top: -50px;
  padding: 22px 38px;
  border: 1px solid rgba(106, 79, 91, 0.46);
  border-top-color: rgba(44, 91, 143, 0.45);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 235px 225px 260px 1px minmax(190px, 1fr) 1px 215px;
  align-items: center;
  gap: 22px;
  background:
    radial-gradient(circle at 40% 0%, rgba(15, 83, 153, 0.15), transparent 38%),
    radial-gradient(circle at 76% 50%, rgba(7, 44, 83, 0.14), transparent 34%),
    linear-gradient(104deg, #030911, #05111f 55%, #020811);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.015),
    0 20px 55px rgba(0, 0, 0, 0.38);
}

.public-success-chart {
  width: 220px;
  height: 156px;
  position: relative;
  justify-self: center;
}

.public-success-ring {
  width: 146px;
  height: 146px;
  position: absolute;
  left: 37px;
  top: 5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    from -29deg,
    #28c4ee 0deg 25.2deg,
    #f3eee7 25.2deg 32.4deg,
    #ff9a00 32.4deg 360deg
  );
  box-shadow:
    0 0 0 5px rgba(255, 170, 18, 0.16),
    0 0 22px rgba(255, 151, 8, 0.22),
    inset 0 0 5px rgba(255, 255, 255, 0.7);
}

.public-success-ring::before {
  content: "";
  position: absolute;
  inset: 23px;
  border: 1px solid rgba(255, 176, 34, 0.34);
  border-radius: inherit;
  background:
    radial-gradient(circle at 45% 35%, rgba(29, 42, 57, 0.26), transparent 48%),
    #02070d;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.65);
}

.public-success-ring span {
  position: relative;
  z-index: 1;
  color: #f5f7fa;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.public-success-chart-label {
  position: absolute;
  top: 2px;
  z-index: 2;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.public-success-chart-label::after {
  content: "";
  width: 72px;
  height: 1px;
  position: absolute;
  top: 8px;
  background: currentColor;
  opacity: 0.55;
}

.public-success-chart-label-seven {
  left: 0;
  color: #28c9f2;
}

.public-success-chart-label-seven::after {
  left: 28px;
}

.public-success-chart-label-two {
  right: 0;
  color: #f3eee7;
}

.public-success-chart-label-two::after {
  right: 25px;
  width: 84px;
}

.public-success-highlight {
  align-self: center;
  color: #eef2f7;
}

.public-success-highlight span {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.public-success-highlight strong {
  display: block;
  color: #ff9b00;
  font-size: 82px;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.07em;
  background: linear-gradient(180deg, #ffdf33 3%, #ffb600 47%, #ff7900 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 8px rgba(255, 126, 0, 0.14));
}

.public-success-highlight small {
  display: block;
  margin-top: 12px;
  color: #f2f5f8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.public-success-card p {
  margin: 0;
  color: #e3e9f0;
  font-size: 17px;
  line-height: 1.42;
}

.public-success-first {
  text-align: center;
  white-space: nowrap;
}

.public-success-first b {
  color: #ff8b00;
  font-size: 20px;
  font-weight: 650;
}

.public-success-second {
  width: max-content;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  justify-items: center;
  justify-self: center;
  column-gap: 7px;
}

.public-success-second > span {
  grid-row: 1;
  color: #edf0f4;
}

.public-success-second > strong {
  grid-row: 1;
  color: #19bdf2;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.public-success-second > small {
  grid-column: 2;
  justify-self: center;
  color: #e3e9f0;
  font-size: 15px;
  white-space: nowrap;
}

.public-success-divider {
  width: 1px;
  height: 86px;
  background: rgba(116, 136, 160, 0.35);
}

.public-features-section {
  padding: 82px max(32px, calc((100% - 1320px) / 2)) 76px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(9, 63, 117, 0.15), transparent 42%),
    #020911;
}

.public-features-section h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 45px);
  letter-spacing: -0.045em;
}

.public-section-lead {
  max-width: 720px;
  margin: 12px auto 32px;
  color: #aeb9c6;
  font-size: 14px;
  line-height: 1.65;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.public-feature-card {
  min-height: 285px;
  padding: 30px 25px;
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0, rgba(35, 118, 222, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(10, 25, 41, 0.92), rgba(4, 14, 25, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.public-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 137, 255, 0.58);
  box-shadow: 0 18px 40px rgba(0, 48, 111, 0.22);
}

.public-feature-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 19px;
  border: 2px solid #2795ff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #76baff;
  background:
    radial-gradient(circle, rgba(45, 130, 255, 0.3), transparent 62%),
    #061426;
  font-size: 41px;
  box-shadow: inset 0 0 18px rgba(33, 115, 235, 0.22);
}

/* SVG instead of a text glyph: glyph baselines/side-bearings differ per icon, so
   the old ◉ ⌖ ◆ ☷ characters never landed on the circle's true centre. */
.public-feature-icon svg {
  display: block;
  width: 0.85em;
  height: 0.85em;
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(44, 151, 255, 0.75));
}

.public-feature-card h3 {
  margin: 0 0 13px;
  font-size: 17px;
}

.public-feature-card p {
  margin: 0;
  color: #adb8c6;
  font-size: 14px;
  line-height: 1.6;
}

.public-license-section {
  padding: 62px max(32px, calc((100% - 1320px) / 2));
  display: grid;
  grid-template-columns: 1.45fr 0.9fr;
  gap: 30px;
  background:
    radial-gradient(circle at 12% 50%, rgba(22, 78, 139, 0.2), transparent 33%),
    linear-gradient(180deg, #04101d, #020912);
}

.public-testimonial,
.public-ready-card {
  min-height: 330px;
  border: 1px solid var(--public-border);
  border-radius: 18px;
  overflow: hidden;
}

.public-testimonial {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: linear-gradient(135deg, rgba(11, 27, 45, 0.95), rgba(4, 13, 24, 0.95));
}

.public-testimonial-art {
  position: relative;
  overflow: hidden;
  background: url("/assets/landing-testimonial-photo.png") center / cover no-repeat;
}

.public-testimonial-art::before,
.public-testimonial-art::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 76px;
  bottom: -8px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(140deg, #c79373, #5b3729);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.42));
}

.public-testimonial-art::before {
  left: -26px;
  transform: rotate(22deg);
}

.public-testimonial-art::after {
  right: -38px;
  transform: rotate(-19deg);
}

.public-testimonial-wheel {
  position: absolute;
  width: 210px;
  height: 210px;
  left: 50%;
  top: 50%;
  z-index: 2;
  border: 27px solid #090b0d;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px #34393e,
    0 14px 24px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, -42%);
}

.public-testimonial-art::before,
.public-testimonial-art::after,
.public-testimonial-wheel {
  display: none;
}

.public-testimonial-wheel::before {
  content: "";
  position: absolute;
  inset: 47px;
  border: 12px solid #101316;
  border-radius: 50%;
  background: #343a40;
  box-shadow: 0 0 0 2px #68717a;
}

.public-testimonial-copy {
  padding: 34px 36px 27px;
  position: relative;
}

.public-quote {
  position: absolute;
  left: 19px;
  top: 18px;
  color: #1d79f1;
  font-family: Georgia, serif;
  font-size: 75px;
  font-weight: 800;
  line-height: 1;
}

.public-testimonial blockquote {
  margin: 28px 0 24px;
  position: relative;
  color: #ecf1f8;
  font-size: 17px;
  line-height: 1.52;
}

.public-testimonial blockquote::after {
  content: "”";
  position: absolute;
  right: -12px;
  bottom: -31px;
  color: #1d79f1;
  font-family: Georgia, serif;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
}

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

.public-person > span {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 2px solid #2c83e9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d6ecff;
  background: #18314d;
  font-size: 11px;
  font-weight: 800;
}

.public-person > span {
  overflow: hidden;
  color: transparent;
  background: #18314d url("/assets/landing-testimonial-avatar-diego.jpg") center / cover no-repeat;
}

.public-person strong {
  display: grid;
  font-size: 14px;
}

.public-person small {
  margin-top: 4px;
  color: #9cabbc;
  font-size: 11px;
  font-weight: 400;
}

.public-ready-card {
  padding: 54px 48px 34px;
  background:
    radial-gradient(circle at 70% 10%, rgba(34, 123, 255, 0.23), transparent 45%),
    linear-gradient(145deg, #0b3b92, #061d50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.public-ready-card h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -0.04em;
}

.public-ready-card p {
  margin: 12px 0 26px;
  color: #e4ebf5;
  font-size: 14px;
  line-height: 1.55;
}

.public-btn-light {
  width: 100%;
  min-height: 56px;
  color: #0a3c98;
  background: #f4f7fc;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

.public-ready-card > div {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #b8c8e3;
  font-size: 10px;
}

.public-ready-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.public-ready-meta i {
  width: 17px;
  height: 17px;
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  color: #1993ff;
}

.public-ready-clock {
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.public-ready-clock::before,
.public-ready-clock::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 1.5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: bottom center;
}

.public-ready-clock::after {
  transform: rotate(125deg);
}

.public-ready-device {
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.public-ready-device::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
}

.public-footer {
  min-height: 112px;
  padding: 0 max(32px, calc((100% - 1320px) / 2));
  border-top: 1px solid rgba(93, 144, 194, 0.16);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  background: #020912;
}

.public-footer-brand .public-brand-mark {
  width: 44px;
  height: 44px;
  font-size: 30px;
}

.public-footer-brand .public-brand-mark img {
  width: 110px;
}

.public-footer-brand .public-brand-copy strong {
  font-size: 21px;
}

.public-footer p {
  margin: 0;
  color: #647489;
  font-size: 11px;
}

.public-footer > div {
  justify-self: end;
  display: flex;
  gap: 36px;
}

.public-footer > div a {
  color: #7e8da0;
  font-size: 11px;
}

.public-login-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
}

.public-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 5, 12, 0.78);
  backdrop-filter: blur(11px);
}

.public-login-card {
  width: min(440px, 100%);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  padding: 34px;
  border: 1px solid rgba(70, 147, 224, 0.48);
  border-radius: 20px;
  position: relative;
  z-index: 1;
  color: #f4f8ff;
  background:
    radial-gradient(circle at 50% 0, rgba(31, 120, 242, 0.2), transparent 36%),
    linear-gradient(150deg, #0a1c2f, #030c17);
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.public-login-close {
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(133, 172, 210, 0.28);
  border-radius: 50%;
  position: absolute;
  right: 18px;
  top: 18px;
  color: #eaf4ff;
  background: rgba(5, 17, 29, 0.7);
  font-size: 26px;
  cursor: pointer;
}

.public-login-brand {
  /* Landscape box: the logo is 1.26:1, so a square frame would shrink the
     wordmark below the point where "manejalab.com" stays readable. */
  width: 120px;
  height: 95px;
  margin: 0 auto 12px;
  padding: 8px;
  border: 1px solid rgba(50, 149, 255, 0.6);
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #4cb0ff;
  background: rgba(8, 40, 77, 0.74);
  font-size: 43px;
  box-shadow: 0 0 22px rgba(25, 119, 237, 0.25);
}

.public-login-brand img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.public-login-card .public-kicker {
  margin-bottom: 11px;
  padding: 4px 10px;
  font-size: 9px;
}

.public-login-card h2 {
  margin: 0;
  text-align: center;
  font-size: 30px;
  letter-spacing: -0.04em;
}

.public-login-lead {
  margin: 9px 0 24px;
  color: #94a8bd;
  text-align: center;
  font-size: 13px;
}

.public-auth-switch {
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid rgba(90, 151, 211, 0.25);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(1, 8, 16, 0.58);
}

.public-auth-tab {
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  color: #8196ad;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.public-auth-tab.is-active {
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(20, 96, 190, 0.72), rgba(10, 50, 98, 0.72));
  box-shadow: inset 0 0 0 1px rgba(72, 157, 244, 0.3);
}

.public-auth-tab:focus-visible {
  outline: 2px solid #3d9cff;
  outline-offset: 2px;
}

.public-login-card label {
  display: block;
  margin: 0 0 7px;
  color: #cbd7e4;
  font-size: 12px;
  font-weight: 650;
}

.public-login-card input {
  height: 50px;
  margin: 0 0 16px;
  border: 1px solid rgba(103, 155, 204, 0.35);
  border-radius: 9px;
  color: #f4f8ff;
  background: rgba(2, 10, 19, 0.78);
}

.public-login-card input:focus {
  border-color: #318ff5;
  outline: 3px solid rgba(41, 142, 255, 0.15);
}

.public-register-hint {
  margin: -9px 0 15px;
  color: #70879e;
  font-size: 10px;
  line-height: 1.45;
}

.public-login-card .public-btn {
  width: 100%;
  margin-top: 5px;
}

.public-login-help {
  margin: 18px 0 0;
  color: #6f849a;
  text-align: center;
  font-size: 11px;
}

.public-login-feedback {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 117, 0.5);
  border-radius: 8px;
  color: #ffdbe0;
  background: rgba(105, 18, 33, 0.42);
  font-size: 12px;
  line-height: 1.4;
}

.public-login-feedback.is-success {
  border-color: rgba(79, 212, 164, 0.48);
  color: #d8fff1;
  background: rgba(15, 85, 61, 0.42);
}

body.public-login-open {
  overflow: hidden;
}

.premium-upgrade-modal {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: grid;
  place-items: center;
  padding: 22px;
}

.premium-upgrade-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(27, 119, 255, 0.16), transparent 42%),
    rgba(0, 5, 13, 0.82);
  backdrop-filter: blur(12px);
}

.premium-upgrade-card {
  width: min(470px, 100%);
  padding: 32px 34px 26px;
  border: 1px solid rgba(59, 150, 255, 0.5);
  border-radius: 22px;
  position: relative;
  z-index: 1;
  color: #f5f9ff;
  background:
    radial-gradient(circle at 50% -8%, rgba(38, 135, 255, 0.3), transparent 42%),
    linear-gradient(150deg, #0b2139 0%, #071528 50%, #030c17 100%);
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.68),
    0 0 38px rgba(21, 116, 239, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.premium-upgrade-close {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(133, 184, 232, 0.3);
  border-radius: 50%;
  position: absolute;
  right: 16px;
  top: 16px;
  color: #eaf4ff;
  background: rgba(3, 14, 27, 0.72);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.premium-upgrade-close:hover {
  border-color: rgba(86, 172, 255, 0.72);
  background: rgba(11, 46, 83, 0.78);
}

.premium-upgrade-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 13px;
  border: 1px solid rgba(65, 163, 255, 0.72);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #f8c84f;
  background: linear-gradient(145deg, rgba(22, 91, 166, 0.74), rgba(8, 35, 71, 0.86));
  box-shadow: 0 0 25px rgba(27, 131, 255, 0.28);
}

.premium-upgrade-icon span {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(255, 197, 55, 0.34));
}

.premium-upgrade-kicker {
  width: max-content;
  margin: 0 auto 10px;
  padding: 5px 10px;
  border: 1px solid rgba(58, 154, 255, 0.42);
  border-radius: 999px;
  color: #55adff;
  background: rgba(9, 48, 91, 0.5);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.premium-upgrade-card h2 {
  max-width: 380px;
  margin: 0 auto;
  text-align: center;
  color: #f6f9ff;
  font-size: clamp(25px, 5vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.premium-upgrade-card h2 strong {
  display: inline-block;
  color: #48a9ff;
  white-space: nowrap;
}

.premium-upgrade-lead {
  max-width: 370px;
  margin: 12px auto 20px;
  color: #9db1c6;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

.premium-upgrade-benefits {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding: 15px 17px;
  border: 1px solid rgba(90, 160, 224, 0.22);
  border-radius: 14px;
  background: rgba(4, 18, 34, 0.55);
}

.premium-upgrade-benefits span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dceafa;
  font-size: 12px;
  font-weight: 650;
}

.premium-upgrade-benefits i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #65c5ff;
  background: rgba(25, 111, 192, 0.3);
  font-size: 12px;
  font-style: normal;
}

.premium-upgrade-pay {
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 9px 16px 9px 10px;
  border: 1px solid rgba(112, 189, 255, 0.72);
  border-radius: 13px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #087cf2, #0755c8);
  box-shadow: 0 14px 28px rgba(0, 91, 217, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.premium-upgrade-pay:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0, 91, 217, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.premium-upgrade-pay:disabled,
.premium-upgrade-pay.is-loading {
  cursor: wait;
  opacity: 0.76;
  transform: none;
}

.premium-payment-marks {
  display: flex;
  align-items: center;
}

.premium-payment-marks b {
  min-width: 39px;
  padding: 7px 8px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 9px;
  color: #fff;
  background: #68239f;
  font-size: 9px;
  letter-spacing: -0.02em;
  text-align: center;
}

.premium-payment-marks b + b {
  margin-left: -5px;
  background: linear-gradient(135deg, #6b35c8, #2a79dd);
  transform: rotate(2deg);
}

.premium-upgrade-arrow {
  font-size: 22px;
  font-weight: 500;
}

.premium-upgrade-feedback {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(81, 164, 239, 0.35);
  border-radius: 9px;
  color: #bcdfff;
  background: rgba(8, 47, 85, 0.58);
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
}

.premium-upgrade-note {
  margin: 14px 0 0;
  color: #6f849b;
  text-align: center;
  font-size: 10px;
}

body.premium-upgrade-open {
  overflow: hidden;
}

.payment-status-toast {
  position: fixed;
  z-index: 10050;
  top: 22px;
  left: 50%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(620px, calc(100vw - 32px));
  padding: 14px 16px;
  color: #eef8ff;
  background: linear-gradient(135deg, rgba(5, 35, 68, 0.98), rgba(5, 21, 42, 0.98));
  border: 1px solid rgba(31, 155, 255, 0.55);
  border-radius: 15px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42), 0 0 28px rgba(0, 130, 255, 0.18);
  transform: translateX(-50%);
}

.payment-status-toast.is-error {
  border-color: rgba(255, 123, 94, 0.62);
}

.payment-status-toast-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #06203d;
  background: #35b6ff;
  border-radius: 50%;
  font-weight: 900;
}

.payment-status-toast.is-error .payment-status-toast-icon {
  color: #3b1009;
  background: #ff8d72;
}

.payment-status-toast button {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #bdd3e8;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.payment-status-toast button:hover,
.payment-status-toast button:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.premium-upgrade-close:focus-visible,
.premium-upgrade-pay:focus-visible {
  outline: 3px solid rgba(93, 181, 255, 0.34);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .premium-upgrade-modal {
    padding: 14px;
  }

  .premium-upgrade-card {
    padding: 28px 20px 22px;
    border-radius: 18px;
  }

  .premium-upgrade-pay {
    gap: 8px;
    padding-right: 12px;
    font-size: 14px;
  }

  .premium-payment-marks b {
    min-width: 34px;
    padding-inline: 6px;
  }
}

@media (max-width: 1180px) {
  .public-nav {
    width: min(1100px, calc(100% - 42px));
  }

  .public-nav-links {
    gap: 16px;
  }

  .public-nav-links a {
    font-size: 11px;
  }

  .public-hero-section {
    width: min(1100px, calc(100% - 42px));
    grid-template-columns: minmax(330px, 0.8fr) minmax(470px, 1.2fr);
  }

  .public-device {
    left: -20px;
    transform: scale(0.82) rotateY(-7deg) rotateZ(-4deg);
    transform-origin: top left;
  }

  .public-simulator-visual {
    height: 520px;
  }

  .public-success-card {
    grid-template-columns: 190px 180px minmax(190px, 1fr) 1px 160px 1px 175px;
    gap: 14px;
    padding-inline: 20px;
  }

  .public-success-chart {
    width: 184px;
  }

  .public-success-ring {
    left: 24px;
  }

  .public-success-highlight strong {
    font-size: 70px;
  }

  .public-success-highlight span,
  .public-success-card p {
    font-size: 14px;
  }

  .public-success-first b {
    font-size: 17px;
  }

  .public-success-second > strong {
    font-size: 34px;
  }

  .public-feature-grid {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .public-nav {
    width: calc(100% - 34px);
    height: 82px;
    grid-template-columns: 1fr auto;
  }

  .public-nav-cta {
    display: none;
  }

  .public-menu-toggle {
    display: block;
  }

  .public-nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 74px;
    padding: 18px;
    border: 1px solid var(--public-border);
    border-radius: 13px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: rgba(3, 13, 24, 0.97);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  .public-nav.is-menu-open .public-nav-links {
    display: flex;
  }

  .public-nav-links a {
    padding: 8px 5px;
    font-size: 13px;
  }

  .public-hero-section {
    width: calc(100% - 34px);
    min-height: auto;
    padding-top: 46px;
    grid-template-columns: 1fr;
  }

  .public-hero-copy {
    text-align: center;
  }

  .public-hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .public-hero-actions {
    justify-content: center;
  }

  .public-simulator-visual {
    width: min(100%, 690px);
    height: 460px;
    margin: 8px auto 0;
  }

  .public-device {
    left: 50%;
    transform: translateX(-50%) scale(0.76) rotateY(-4deg) rotateZ(-2.6deg);
    transform-origin: top center;
  }

  .public-success-card {
    margin-top: -38px;
    padding: 26px;
    grid-template-columns: 180px 180px minmax(220px, 1fr);
    row-gap: 18px;
    text-align: left;
  }

  .public-success-divider {
    display: none;
  }

  .public-success-chart {
    grid-row: 1 / 3;
  }

  .public-success-first {
    grid-column: 2;
    text-align: left;
  }

  .public-success-second {
    grid-column: 3;
  }

  .public-success-highlight strong {
    font-size: 64px;
  }

  .public-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .public-license-section {
    grid-template-columns: 1fr;
  }

  .public-footer {
    padding-block: 28px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .public-footer > div {
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .public-brand-copy strong {
    font-size: 21px;
  }

  .public-brand-mark {
    width: 50px;
    height: 50px;
    font-size: 31px;
  }

  .public-hero-section {
    padding-top: 28px;
  }

  .public-hero-copy h1 {
    font-size: clamp(52px, 17vw, 70px);
  }

  .public-hero-description {
    font-size: 14px;
  }

  .public-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-hero-actions .public-btn {
    width: 100%;
  }

  .public-simulator-visual {
    height: 335px;
  }

  .public-device {
    transform: translateX(-50%) scale(0.54) rotateY(-3deg) rotateZ(-2deg);
  }

  .public-success-card {
    margin-top: -35px;
    padding: 22px 16px;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    text-align: left;
  }

  .public-success-chart {
    width: 156px;
    height: 132px;
    grid-row: auto;
    justify-self: center;
  }

  .public-success-ring {
    width: 124px;
    height: 124px;
    left: 16px;
    top: 4px;
  }

  .public-success-ring::before {
    inset: 20px;
  }

  .public-success-chart-label {
    font-size: 12px;
  }

  .public-success-chart-label::after {
    width: 48px;
  }

  .public-success-chart-label-seven::after {
    left: 23px;
  }

  .public-success-chart-label-two::after {
    right: 20px;
  }

  .public-success-highlight span {
    font-size: 13px;
    white-space: normal;
  }

  .public-success-highlight strong {
    font-size: 61px;
  }

  .public-success-explainer {
    grid-column: 1 / -1;
    padding: 13px 0 0;
    border-top: 1px solid rgba(128, 169, 209, 0.18);
  }

  .public-success-first {
    grid-column: 1;
    text-align: left;
  }

  .public-success-second {
    grid-column: 2;
  }

  .public-features-section,
  .public-license-section {
    padding-inline: 17px;
  }

  .public-feature-grid {
    grid-template-columns: 1fr;
  }

  .public-feature-card {
    min-height: 255px;
  }

  .public-testimonial {
    grid-template-columns: 1fr;
  }

  .public-testimonial-art {
    min-height: 230px;
  }

  .public-ready-card {
    padding: 42px 28px 30px;
  }

  .public-ready-card > div {
    flex-direction: column;
  }

  .public-footer > div {
    flex-direction: column;
    gap: 12px;
  }

  .public-login-card {
    padding: 30px 22px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-btn,
  .public-feature-card,
  .public-nav-links a {
    transition: none;
  }
}

.public-brand-mark {
  position: relative;
}

.public-brand-mark img {
  width: 118px;
  max-width: none;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* The oversized image is transparent margin, so it must not widen the link's
     hit area now that overflow:hidden no longer clips it. That clip is gone
     because the logo's own glow fades out right at the box edge: cutting it on
     a rectangle gave the parent's drop-shadow a rectangular alpha to trace,
     which read as a square halo wherever the box is tightest (mobile). */
  pointer-events: none;
}

.public-demo-grid {
  display: none;
}

@media (min-width: 1181px) {
  .public-nav,
  .public-hero-section {
    width: min(1560px, calc(100% - 112px));
  }

  .public-nav {
    height: 98px;
    gap: 34px;
  }

  .public-nav-links {
    gap: clamp(30px, 2.8vw, 48px);
  }

  .public-nav-links a {
    font-size: 16px;
    letter-spacing: -0.025em;
  }

  .public-brand-mark {
    width: 52px;
    height: 66px;
  }

  .public-brand-mark img {
    width: 132px;
  }

  .public-brand-copy strong {
    font-size: 31px;
  }

  .public-brand-copy small {
    margin-top: 8px;
    font-size: 11px;
  }

  .public-nav-cta {
    min-width: 158px;
    min-height: 42px;
    border-radius: 8px;
    font-size: 13px;
  }

  .public-nav-user-icon {
    width: 18px;
    height: 18px;
  }

  .public-hero-section {
    min-height: 842px;
    padding: 20px 0 28px;
    grid-template-columns: 578px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 22px;
    align-items: start;
  }

  .public-hero-copy {
    padding-left: 6px;
  }

  .public-hero-copy h1 {
    font-size: 82px;
    line-height: 0.9;
  }

  .public-hero-description {
    width: min(490px, 100%);
    max-width: 490px;
    margin-top: 42px;
    font-size: 20px;
    line-height: 1.55;
  }

  .public-hero-actions {
    margin-top: 40px;
    gap: 22px;
  }

  .public-hero-actions .public-btn {
    min-height: 64px;
    padding-inline: 29px;
    font-size: 18px;
  }

  .public-hero-actions .public-btn-primary {
    width: 260px;
  }

  .public-simulator-visual {
    width: 100%;
    height: 650px;
    align-self: start;
    overflow: visible;
  }

  .public-device-glow {
    display: none;
  }

  .public-device {
    width: 1072px;
    height: 747px;
    left: -50px;
    top: -59px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    transform: none;
    pointer-events: none;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 44px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 46px, #000 686px, transparent 700px, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 44px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 46px, #000 686px, transparent 700px, transparent 100%);
    mask-composite: intersect;
  }

  .public-device.public-device-awaiting-media {
    visibility: hidden;
    opacity: 0;
  }

  .public-device.public-device-media-ready {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms ease-out;
  }

  .public-device::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("/assets/landing-simulator-ui-perspective@2x.png");
    background-repeat: no-repeat;
    background-size: 1072px 747px;
    background-position: 0 0;
    clip-path: path("M 120 87 L 970 52 Q 1002 51 1001 84 L 978 660 Q 978 691 947 689 L 82 611 Q 53 609 56 581 L 104 105 Q 105 89 120 87 Z");
  }

  .public-device > *,
  .public-device::after {
    display: none;
  }

  .public-device::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-color: transparent;
    background-image: url("/assets/landing-simulator-reference.png");
    background-image: -webkit-image-set(
      url("/assets/landing-simulator-reference.png") 1x,
      url("/assets/landing-simulator-reference@2x.png") 2x
    );
    background-image: image-set(
      url("/assets/landing-simulator-reference.png") 1x,
      url("/assets/landing-simulator-reference@2x.png") 2x
    );
    background-repeat: no-repeat;
    background-size: 1672px 941px;
    background-position: -600px -60px;
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0,
        #000 220px,
        #000 calc(100% - 80px),
        transparent 100%
      ),
      linear-gradient(to bottom, transparent 0, transparent 25px, #000 88px, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        to right,
        transparent 0,
        #000 220px,
        #000 calc(100% - 80px),
        transparent 100%
      ),
      linear-gradient(to bottom, transparent 0, transparent 25px, #000 88px, #000 100%);
    mask-composite: intersect;
    pointer-events: none;
  }

  .public-device > .public-demo-grid {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    width: 740px;
    height: 558px;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #07182a;
    transform-origin: 0 0;
    transform: matrix3d(
      0.805271671, -0.041542884, 0, -0.000188965,
      -0.072761389, 0.840712924, 0, -0.000041074,
      0, 0, 1, 0,
      258.101, 131.825, 0, 1
    );
    backface-visibility: hidden;
  }

  .public-device > .public-demo-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(to right, transparent calc(50% - 1.5px), #07182a calc(50% - 1.5px), #07182a calc(50% + 1.5px), transparent calc(50% + 1.5px)),
      linear-gradient(to bottom, transparent calc(50% - 1.5px), #07182a calc(50% - 1.5px), #07182a calc(50% + 1.5px), transparent calc(50% + 1.5px));
  }

  .public-demo-composite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.04) brightness(0.96);
    transform: translateZ(0);
  }

  .public-demo-label {
    position: absolute;
    left: 13px;
    top: 12px;
    z-index: 3;
    padding: 5px 10px;
    border: 1px solid rgba(76, 190, 255, 0.55);
    border-radius: 999px;
    background: rgba(2, 12, 25, 0.76);
    color: #e9f7ff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  }

  .public-demo-label-third,
  .public-demo-label-top {
    left: calc(50% + 13px);
  }

  .public-demo-label-left,
  .public-demo-label-top {
    top: calc(50% + 12px);
  }

  .public-success-card {
    width: calc(100% - 12px);
    height: 200px;
    min-height: 200px;
    margin-left: 6px;
    margin-top: -44px;
    padding: 22px 42px;
    border: 1px solid rgba(106, 79, 91, 0.46);
    border-top-color: rgba(44, 91, 143, 0.45);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 230px 235px 260px 1px minmax(230px, 1fr) 1px 220px;
    gap: 30px;
    background:
      radial-gradient(circle at 40% 0%, rgba(15, 83, 153, 0.15), transparent 38%),
      radial-gradient(circle at 76% 50%, rgba(7, 44, 83, 0.14), transparent 34%),
      linear-gradient(104deg, #030911, #05111f 55%, #020811);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.015),
      0 20px 55px rgba(0, 0, 0, 0.38);
  }

  .public-features-section {
    padding-top: 16px;
    padding-bottom: 40px;
  }

  .public-features-section .public-kicker {
    margin-bottom: 10px;
  }

  .public-section-lead {
    margin-top: 4px;
    margin-bottom: 16px;
    line-height: 1.35;
  }

  .public-feature-card {
    height: 205px;
    min-height: 205px;
    padding: 13px 17px;
  }

  .public-feature-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 9px;
    font-size: 28px;
  }

  .public-feature-card h3 {
    margin-bottom: 13px;
    font-size: 15px;
  }

  .public-feature-card p {
    font-size: 11.5px;
    line-height: 1.38;
  }

  .public-license-section {
    padding-top: 36px;
    padding-bottom: 32px;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.95fr);
    gap: 24px;
  }

  .public-testimonial,
  .public-ready-card {
    height: 344px;
    min-height: 344px;
    border: 1px solid rgba(66, 111, 163, 0.38);
    border-radius: 18px;
    overflow: hidden;
  }

  .public-testimonial {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    background: linear-gradient(135deg, rgba(9, 26, 45, 0.98), rgba(3, 13, 24, 0.99));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 18px 42px rgba(0, 0, 0, 0.26);
  }

  .public-testimonial-art {
    background: url("/assets/landing-testimonial-photo.png") center / cover no-repeat;
  }

  .public-testimonial-art::before,
  .public-testimonial-wheel {
    display: none;
  }

  .public-testimonial .public-testimonial-art::after {
    content: "";
    position: absolute;
    inset: 0 -1px 0 auto;
    width: 118px;
    height: auto;
    display: block;
    border-radius: 0;
    background: linear-gradient(
      90deg,
      rgba(3, 13, 24, 0) 0%,
      rgba(3, 13, 24, 0.34) 38%,
      rgba(3, 13, 24, 0.82) 76%,
      rgba(3, 13, 24, 0.99) 100%
    );
    filter: none;
    transform: none;
    pointer-events: none;
  }

  .public-testimonial-copy {
    padding: 42px 40px 30px;
  }

  .public-quote {
    left: 21px;
    top: 23px;
    font-size: 72px;
  }

  .public-testimonial blockquote {
    margin: 37px 0 26px;
    font-size: 18px;
    line-height: 1.5;
  }

  .public-ready-card {
    display: block;
    padding: 54px 48px 34px;
    background:
      radial-gradient(circle at 88% 4%, rgba(23, 104, 235, 0.18), transparent 46%),
      linear-gradient(140deg, #061a3d 0%, #082657 58%, #083574 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 18px 42px rgba(0, 0, 0, 0.24);
  }

  .public-ready-card h2 {
    font-size: 31px;
  }

  .public-ready-card p {
    font-size: 15px;
  }

  .public-ready-card .public-btn-light {
    width: 314px;
    max-width: 100%;
    min-height: 56px;
    font-size: 16px;
  }

  .public-ready-card > .public-ready-meta {
    margin-top: 31px;
  }

  .public-ready-meta span {
    gap: 10px;
    font-size: 11px;
  }

  .public-ready-meta i {
    width: 23px;
    height: 23px;
    color: #159cff;
    filter: drop-shadow(0 0 5px rgba(21, 156, 255, 0.42));
  }

  .public-ready-clock {
    border-width: 2px;
  }

  .public-ready-clock::before,
  .public-ready-clock::after {
    left: 9px;
    top: 4px;
    width: 2px;
    height: 7px;
  }

  .public-ready-device {
    width: 15px;
    border-width: 2px;
    border-radius: 3px;
  }

  .public-ready-device::after {
    left: 3px;
    right: 3px;
    bottom: 3px;
    height: 1.5px;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .public-success-card {
    padding-inline: 20px;
    grid-template-columns: 170px 190px minmax(180px, 1fr) 1px 170px 1px 160px;
    gap: 14px;
  }

  .public-success-chart {
    width: 164px;
    height: 138px;
  }

  .public-success-ring {
    width: 128px;
    height: 128px;
    left: 18px;
  }

  .public-success-ring::before {
    inset: 20px;
  }

  .public-success-chart-label::after {
    width: 50px;
  }

  .public-success-highlight span,
  .public-success-card p {
    font-size: 14px;
  }

  .public-success-highlight strong {
    font-size: 64px;
  }

  .public-success-first b {
    font-size: 17px;
  }

  .public-success-second > strong {
    font-size: 34px;
  }

  .public-success-second > small {
    font-size: 12px;
  }
}

@media (min-width: 1451px) {
  .public-success-card {
    padding-right: 109px;
    padding-left: 55px;
    grid-template-columns:
      240px 59px 222px 36px 244px 38px
      1px 291px 1px 50px 200px;
    gap: 0;
  }

  .public-success-chart {
    width: 240px;
    grid-column: 1;
  }

  .public-success-ring {
    width: 154px;
    height: 154px;
    left: 56px;
    top: 1px;
  }

  .public-success-ring::before {
    inset: 24px;
  }

  .public-success-highlight {
    grid-column: 3;
  }

  .public-success-highlight strong {
    font-size: 114px;
  }

  .public-success-explainer {
    grid-column: 5;
    font-size: 21px;
  }

  .public-success-explainer + .public-success-divider {
    grid-column: 7;
  }

  .public-success-first {
    grid-column: 8;
    font-size: 20px;
  }

  .public-success-first b {
    font-size: 22px;
  }

  .public-success-first + .public-success-divider {
    grid-column: 9;
  }

  .public-success-second {
    grid-column: 11;
  }
}


/* Landing success-card composition v2 */
.public-success-card {
  height: 200px;
  min-height: 200px;
  padding: 20px 46px;
  grid-template-columns: 260px minmax(0, 1fr) 1px 250px;
  gap: 42px;
}

.public-success-main {
  min-width: 0;
  align-self: center;
}

.public-success-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #aebdcd;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.public-success-primary {
  display: flex;
  align-items: center;
  gap: 28px;
}

.public-success-primary > strong {
  flex: 0 0 auto;
  color: #ff9b00;
  font-size: 94px;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.07em;
  background: linear-gradient(180deg, #ffdf33 3%, #ffb600 47%, #ff7900 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 8px rgba(255, 126, 0, 0.14));
}

.public-success-card .public-success-primary p {
  margin: 0;
  color: #e8edf3;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.public-success-primary p strong {
  display: block;
  margin-top: 2px;
  color: #ff9700;
  font-size: 24px;
  font-weight: 750;
  white-space: nowrap;
}

.public-success-card .public-success-sample {
  margin: 9px 0 0;
  color: #9eafbf;
  font-size: 15px;
  line-height: 1.4;
}

.public-success-sample strong {
  color: #f2f5f8;
  font-size: 16px;
  font-weight: 750;
}

.public-success-ring .public-success-ring-copy {
  display: grid;
  justify-items: center;
  line-height: 1;
  letter-spacing: 0;
}

.public-success-ring-copy strong {
  color: #f5f7fa;
  font-size: 39px;
  font-weight: 650;
  letter-spacing: -0.05em;
}

.public-success-ring-copy small {
  margin-top: 6px;
  color: #9baaba;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-success-card > .public-success-divider {
  width: 1px;
  height: 112px;
  background: linear-gradient(transparent, rgba(116, 145, 174, 0.52), transparent);
}

.public-success-secondary {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.public-success-secondary > strong {
  color: #19bdf2;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.public-success-secondary > span {
  margin-top: 8px;
  color: #e3e9f0;
  font-size: 16px;
  line-height: 1.35;
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .public-success-card {
    padding-inline: 20px;
    grid-template-columns: 180px 560px 1px minmax(180px, 1fr);
    gap: 22px;
  }
}

@media (min-width: 1451px) {
  .public-success-card {
    padding: 20px 70px 20px 55px;
    grid-template-columns: 270px 660px 1px minmax(260px, 1fr);
    gap: 48px;
  }

  .public-success-primary > strong {
    font-size: 112px;
  }

  .public-success-card .public-success-primary p {
    font-size: 22px;
  }

  .public-success-primary p strong {
    font-size: 27px;
  }

  .public-success-card .public-success-sample {
    font-size: 16px;
  }

  .public-success-sample strong {
    font-size: 17px;
  }

  .public-success-secondary > strong {
    font-size: 60px;
  }

  .public-success-secondary > span {
    font-size: 17px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .public-success-card {
    padding: 24px 26px;
    grid-template-columns: 190px minmax(0, 1fr) 1px 180px;
    gap: 24px;
  }

  .public-success-primary {
    gap: 18px;
  }

  .public-success-primary > strong {
    font-size: 72px;
  }

  .public-success-card .public-success-primary p {
    font-size: 16px;
  }

  .public-success-primary p strong {
    font-size: 19px;
  }

  .public-success-card .public-success-sample {
    margin-top: 11px;
    font-size: 13px;
  }

  .public-success-sample strong {
    font-size: 14px;
  }

  .public-success-secondary > strong {
    font-size: 44px;
  }

  .public-success-secondary > span {
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .public-success-card {
    height: auto;
    min-height: 0;
    padding: 24px;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px 26px;
    text-align: left;
  }

  .public-success-chart {
    grid-row: 1 / 3;
    align-self: center;
  }

  .public-success-primary {
    gap: 16px;
  }

  .public-success-primary > strong {
    font-size: 70px;
  }

  .public-success-card .public-success-primary p {
    font-size: 15px;
  }

  .public-success-primary p strong {
    font-size: 18px;
  }

  .public-success-card .public-success-sample {
    margin-top: 10px;
    font-size: 13px;
  }

  .public-success-sample strong {
    font-size: 14px;
  }

  .public-success-card > .public-success-divider {
    display: none;
  }

  .public-success-secondary {
    grid-column: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .public-success-secondary > strong {
    font-size: 39px;
  }

  .public-success-secondary > span {
    margin-top: 0;
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .public-success-card {
    padding: 24px 18px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    text-align: center;
  }

  .public-success-chart {
    grid-row: auto;
  }

  .public-success-main {
    width: 100%;
  }

  .public-success-eyebrow {
    font-size: 11px;
  }

  .public-success-primary {
    justify-content: center;
    gap: 12px;
  }

  .public-success-primary > strong {
    font-size: 62px;
  }

  .public-success-card .public-success-primary p {
    font-size: 14px;
    text-align: left;
  }

  .public-success-primary p strong {
    font-size: 17px;
  }

  .public-success-card .public-success-sample {
    max-width: 320px;
    margin-inline: auto;
  }

  .public-success-secondary {
    grid-column: 1;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(128, 169, 209, 0.18);
    text-align: left;
  }
}


.public-success-mode {
  color: #ff9700;
  font-weight: 750;
}

/* Landing first-viewport height fitting */
@media (min-width: 1181px) and (max-height: 950px) {
  .public-nav {
    height: 80px;
  }

  .public-brand-mark {
    height: 58px;
  }

  .public-brand-copy strong {
    font-size: 27px;
  }

  .public-brand-copy small {
    margin-top: 5px;
    font-size: 9px;
  }

  .public-nav-links a {
    font-size: 14px;
  }

  .public-nav-cta {
    min-width: 150px;
    min-height: 40px;
    font-size: 12.5px;
  }

  .public-nav-user-icon {
    width: 17px;
    height: 17px;
  }

  .public-hero-section {
    height: calc(100vh - 80px);
    height: calc(100svh - 80px);
    min-height: 0;
    padding: 8px 0 12px;
    grid-template-rows: minmax(0, 1fr) 200px;
    row-gap: 10px;
  }

  .public-hero-copy {
    padding-top: 30px;
  }

  .public-simulator-visual {
    height: 100%;
    min-height: 0;
  }

  .public-device {
    left: -42px;
    top: -48px;
    transform: none;
    transform-origin: top left;
  }

  .public-success-card {
    height: 200px;
    min-height: 200px;
    margin-top: 0;
    align-self: end;
  }
}

@media (min-width: 1181px) and (max-height: 820px) {
  .public-nav {
    height: 72px;
  }

  .public-brand-mark {
    height: 52px;
  }

  .public-brand-copy strong {
    font-size: 24px;
  }

  .public-nav-links {
    gap: clamp(18px, 2vw, 30px);
  }

  .public-nav-links a {
    font-size: 13px;
  }

  .public-nav-cta {
    min-width: 142px;
    min-height: 38px;
    font-size: 12px;
  }

  .public-nav-user-icon {
    width: 16px;
    height: 16px;
  }

  .public-hero-section {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    padding: 4px 0 8px;
    grid-template-rows: minmax(0, 1fr) 170px;
    row-gap: 8px;
  }

  .public-hero-copy {
    padding-top: 42px;
  }

  .public-hero-copy h1 {
    font-size: 66px;
  }

  .public-hero-description {
    width: 450px;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.38;
  }

  .public-hero-actions {
    margin-top: 18px;
  }

  .public-hero-actions .public-btn {
    min-height: 50px;
    font-size: 15px;
  }

  .public-device {
    left: -30px;
    top: -36px;
    transform: scale(0.86);
  }

  .public-success-card {
    height: 170px;
    min-height: 170px;
    padding-block: 12px;
  }

  .public-success-chart {
    transform: scale(0.88);
    transform-origin: center;
  }

  .public-success-eyebrow {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .public-success-primary > strong {
    font-size: 88px;
  }

  .public-success-card .public-success-primary p {
    font-size: 17px;
  }

  .public-success-primary p strong {
    font-size: 21px;
  }

  .public-success-card .public-success-sample {
    margin-top: 5px;
    font-size: 13px;
  }

  .public-success-sample strong {
    font-size: 14px;
  }

  .public-success-secondary > strong {
    font-size: 50px;
  }

  .public-success-secondary > span {
    font-size: 14px;
  }

  .public-success-card > .public-success-divider {
    height: 92px;
  }
}

@media (min-width: 1181px) and (max-height: 720px) {
  .public-nav {
    height: 64px;
  }

  .public-hero-section {
    height: calc(100vh - 64px);
    height: calc(100svh - 64px);
    grid-template-rows: minmax(0, 1fr) 156px;
  }

  .public-hero-copy {
    padding-top: 50px;
  }

  .public-hero-copy h1 {
    font-size: 58px;
  }

  .public-hero-description {
    width: 430px;
    margin-top: 13px;
    font-size: 14px;
  }

  .public-hero-actions {
    margin-top: 13px;
  }

  .public-hero-actions .public-btn {
    min-height: 44px;
    font-size: 14px;
  }

  .public-device {
    top: -28px;
    transform: scale(0.76);
  }

  .public-success-card {
    height: 156px;
    min-height: 156px;
    padding-block: 10px;
  }

  .public-success-chart {
    transform: scale(0.8);
  }

  .public-success-primary > strong {
    font-size: 78px;
  }

  .public-success-primary p strong {
    font-size: 19px;
  }
}

/* Keep the current simulator artwork at every responsive width. */
@media (max-width: 1180px) {
  .public-device-glow {
    display: none;
  }

  .public-device {
    width: 1072px;
    height: 747px;
    left: 50%;
    top: -18px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%) scale(0.56);
    transform-origin: top center;
    pointer-events: none;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 44px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 46px, #000 686px, transparent 700px, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 44px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 46px, #000 686px, transparent 700px, transparent 100%);
    mask-composite: intersect;
  }

  .public-device.public-device-awaiting-media {
    visibility: hidden;
    opacity: 0;
  }

  .public-device.public-device-media-ready {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms ease-out;
  }

  .public-device::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("/assets/landing-simulator-ui-perspective@2x.png") 0 0 / 1072px 747px no-repeat;
    clip-path: path("M 120 87 L 970 52 Q 1002 51 1001 84 L 978 660 Q 978 691 947 689 L 82 611 Q 53 609 56 581 L 104 105 Q 105 89 120 87 Z");
  }

  .public-device > *,
  .public-device::after {
    display: none;
  }

  .public-device::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-color: transparent;
    background-image: image-set(
      url("/assets/landing-simulator-reference.png") 1x,
      url("/assets/landing-simulator-reference@2x.png") 2x
    );
    background-repeat: no-repeat;
    background-size: 1672px 941px;
    background-position: -600px -60px;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 220px, #000 calc(100% - 80px), transparent 100%),
      linear-gradient(to bottom, transparent 0, transparent 25px, #000 88px, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 220px, #000 calc(100% - 80px), transparent 100%),
      linear-gradient(to bottom, transparent 0, transparent 25px, #000 88px, #000 100%);
    mask-composite: intersect;
    pointer-events: none;
  }

  .public-device > .public-demo-grid {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    width: 740px;
    height: 558px;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #07182a;
    transform-origin: 0 0;
    transform: matrix3d(
      0.805271671, -0.041542884, 0, -0.000188965,
      -0.072761389, 0.840712924, 0, -0.000041074,
      0, 0, 1, 0,
      258.101, 131.825, 0, 1
    );
    backface-visibility: hidden;
  }

  .public-device > .public-demo-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(to right, transparent calc(50% - 1.5px), #07182a calc(50% - 1.5px), #07182a calc(50% + 1.5px), transparent calc(50% + 1.5px)),
      linear-gradient(to bottom, transparent calc(50% - 1.5px), #07182a calc(50% - 1.5px), #07182a calc(50% + 1.5px), transparent calc(50% + 1.5px));
  }

  .public-demo-composite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.04) brightness(0.96);
    transform: translateZ(0);
  }

  .public-demo-label {
    position: absolute;
    left: 13px;
    top: 12px;
    z-index: 3;
    padding: 5px 10px;
    border: 1px solid rgba(76, 190, 255, 0.55);
    border-radius: 999px;
    color: #e9f7ff;
    background: rgba(2, 12, 25, 0.76);
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  }

  .public-demo-label-third,
  .public-demo-label-top {
    left: calc(50% + 13px);
  }

  .public-demo-label-left,
  .public-demo-label-top {
    top: calc(50% + 12px);
  }
}

@media (min-width: 901px) and (max-width: 1000px) {
  .public-device {
    transform: translateX(-50%) scale(0.49);
  }
}

@media (max-width: 900px) {
  .public-device {
    top: 0;
    transform: translateX(-50%) scale(0.6);
  }
}

@media (max-width: 700px) {
  .public-simulator-visual {
    height: 410px;
  }

  .public-device {
    transform: translateX(-50%) scale(0.54);
  }
}

@media (max-width: 600px) {
  .public-simulator-visual {
    height: 360px;
  }

  .public-device {
    transform: translateX(-50%) scale(0.47);
  }
}

@media (max-width: 500px) {
  .public-simulator-visual {
    height: 300px;
  }

  .public-device {
    transform: translateX(-50%) scale(0.39);
  }
}

@media (max-width: 420px) {
  .public-simulator-visual {
    height: 245px;
  }

  .public-device {
    transform: translateX(-50%) scale(0.32);
  }
}

/* Simulator account menu and plan details */
body.display-non-creator.display-non-creator-alt #noncreator-alt-topbar {
  position: relative;
  z-index: 12;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 10px 5px 6px;
  border-radius: 9px;
  border-color: rgba(89, 175, 255, 0.42);
  background: linear-gradient(145deg, rgba(10, 25, 45, 0.96), rgba(10, 34, 58, 0.9));
  box-shadow: inset 0 1px 0 rgba(196, 233, 255, 0.07);
}

.noncreator-alt-tour-icon {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #7adfff;
  border: 1px solid rgba(104, 213, 255, 0.55);
  background: rgba(39, 133, 198, 0.12);
  font-size: 11px;
  font-weight: 900;
}

body.display-non-creator.display-non-creator-alt .noncreator-account {
  position: relative;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user {
  width: auto;
  min-width: 164px;
  min-height: 38px;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 11px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(193, 233, 255, 0.06), 0 7px 18px rgba(0, 7, 18, 0.24);
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user:hover,
body.display-non-creator.display-non-creator-alt .noncreator-alt-user[aria-expanded="true"] {
  border-color: rgba(89, 192, 255, 0.64);
  background: linear-gradient(130deg, rgba(10, 39, 67, 0.98), rgba(7, 25, 44, 0.96));
}

body.display-non-creator.display-non-creator-alt .noncreator-account-chevron {
  margin-left: auto;
  color: #77cfff;
  font-size: 15px;
  line-height: 1;
  transition: transform 160ms ease;
}

body.display-non-creator.display-non-creator-alt .noncreator-alt-user[aria-expanded="true"] .noncreator-account-chevron {
  transform: rotate(180deg);
}

body.display-non-creator.display-non-creator-alt .noncreator-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 244px;
  padding: 8px;
  border: 1px solid rgba(92, 182, 255, 0.36);
  border-radius: 13px;
  background: linear-gradient(155deg, rgba(7, 22, 40, 0.99), rgba(8, 30, 52, 0.99));
  box-shadow: 0 20px 45px rgba(0, 5, 14, 0.55), inset 0 1px 0 rgba(190, 230, 255, 0.07);
}

.noncreator-account-menu-head {
  display: grid;
  gap: 2px;
  padding: 7px 9px 10px;
  border-bottom: 1px solid rgba(115, 183, 237, 0.15);
  margin-bottom: 5px;
}

.noncreator-account-menu-head strong {
  color: #eef8ff;
  font-size: 13px;
}

.noncreator-account-menu-head span {
  color: #85a9c8;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.display-non-creator.display-non-creator-alt .noncreator-account-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #ddebfa;
  text-align: left;
}

body.display-non-creator.display-non-creator-alt .noncreator-account-menu button:hover {
  background: rgba(70, 158, 223, 0.12);
}

.noncreator-account-menu button > span:last-child {
  display: grid;
  gap: 2px;
}

.noncreator-account-menu button strong {
  font-size: 12px;
}

.noncreator-account-menu button small {
  color: #86a7c4;
  font-size: 9px;
}

.noncreator-menu-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(94, 193, 255, 0.38);
  border-radius: 8px;
  color: #78d8ff;
  background: rgba(29, 115, 178, 0.1);
}

.account-plan-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.account-plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 7, 16, 0.76);
  backdrop-filter: blur(7px);
}

.account-plan-card {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 27px;
  border: 1px solid rgba(84, 174, 255, 0.4);
  border-radius: 20px;
  color: #edf7ff;
  background: radial-gradient(circle at 100% 0, rgba(38, 117, 218, 0.2), transparent 42%), linear-gradient(150deg, #08172a, #07111f 72%);
  box-shadow: 0 28px 80px rgba(0, 5, 15, 0.62), inset 0 1px 0 rgba(220, 244, 255, 0.08);
}

.account-plan-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(124, 192, 255, 0.3);
  color: #bcd8ef;
  background: rgba(9, 29, 50, 0.84);
  font-size: 21px;
}

.account-plan-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 32px;
  margin-bottom: 20px;
}

.account-plan-badge {
  display: grid;
  place-items: center;
  min-width: 72px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(96, 194, 255, 0.55);
  border-radius: 10px;
  color: #78d8ff;
  background: rgba(28, 105, 169, 0.13);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.account-plan-badge[data-plan="premium"] {
  color: #ffd38a;
  border-color: rgba(255, 178, 76, 0.56);
  background: rgba(148, 76, 8, 0.16);
}

.account-plan-kicker {
  margin: 0 0 2px;
  color: #67cfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.account-plan-heading h2 {
  margin: 0;
  font-size: 29px;
}

.account-plan-loading,
.account-plan-error {
  padding: 18px;
  border-radius: 12px;
  color: #b9d5eb;
  background: rgba(12, 35, 58, 0.7);
}

.account-plan-error { color: #ffd2d6; }

.account-plan-content {
  display: grid;
  gap: 15px;
}

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

.account-plan-summary > div,
.account-plan-includes,
.account-plan-payment {
  border: 1px solid rgba(104, 179, 239, 0.2);
  border-radius: 13px;
  background: rgba(10, 29, 49, 0.62);
}

.account-plan-summary > div {
  display: grid;
  gap: 5px;
  padding: 14px;
}

.account-plan-summary span,
.account-plan-payment dt {
  color: #86a9c6;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-plan-summary strong { font-size: 16px; }

.account-plan-includes,
.account-plan-payment { padding: 15px; }

.account-plan-includes h3,
.account-plan-payment h3 {
  margin: 0 0 11px;
  font-size: 13px;
}

#account-plan-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

#account-plan-benefits span {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #c6d9e9;
  font-size: 12px;
  line-height: 1.35;
}

#account-plan-benefits i {
  color: #66e0b0;
  font-style: normal;
}

.account-plan-payment dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}

.account-plan-payment dl > div { display: grid; gap: 3px; }
.account-plan-payment dd { margin: 0; color: #dcebf7; font-size: 12px; word-break: break-word; }

.account-plan-upgrade {
  min-height: 46px;
  margin: 0;
  border-radius: 11px;
  border: 1px solid rgba(116, 208, 255, 0.56);
  color: #061525;
  background: linear-gradient(135deg, #76e4ff, #469bff);
  font-weight: 850;
}

.account-plan-help {
  margin: 0;
  color: #789bb8;
  font-size: 10px;
  text-align: center;
}

.account-plan-help a { color: #65cfff; }

/* Stronger signal guidance and feedback */
.sim-signal-instruction {
  position: absolute;
  top: 15%;
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(80, 226, 255, 0.64);
  border-radius: 11px;
  color: #f1fbff;
  background: rgba(3, 19, 34, 0.88);
  box-shadow: 0 12px 28px rgba(0, 5, 14, 0.45), 0 0 18px rgba(61, 201, 255, 0.2);
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 850;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 150ms ease, transform 150ms ease;
  white-space: nowrap;
}

.sim-signal-instruction.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sim-signal-result {
  position: absolute;
  top: 24%;
  left: 50%;
  z-index: 9;
  min-width: min(340px, calc(100% - 40px));
  display: grid;
  gap: 4px;
  padding: 17px 22px;
  border-radius: 15px;
  text-align: center;
  transform: translateX(-50%);
  animation: simSignalResultPop 280ms cubic-bezier(0.2, 0.8, 0.2, 1.15) both;
  overflow: visible;
  pointer-events: none;
}

.sim-signal-result.is-success {
  border: 1px solid rgba(91, 255, 171, 0.72);
  color: #eafff4;
  background: linear-gradient(135deg, rgba(11, 85, 62, 0.94), rgba(5, 48, 43, 0.94));
  box-shadow: 0 16px 36px rgba(0, 8, 16, 0.48), 0 0 26px rgba(65, 255, 161, 0.25);
}

.sim-signal-result.is-missed {
  border: 1px solid rgba(255, 140, 140, 0.72);
  color: #fff0f1;
  background: linear-gradient(135deg, rgba(111, 27, 35, 0.95), rgba(71, 16, 25, 0.95));
  box-shadow: 0 16px 36px rgba(0, 8, 16, 0.48), 0 0 24px rgba(255, 77, 97, 0.2);
}

.sim-signal-result strong { font-size: clamp(22px, 2.4vw, 34px); }
.sim-signal-result > span { font-size: clamp(12px, 1.15vw, 16px); }

@keyframes simSignalResultPop {
  from { opacity: 0; transform: translateX(-50%) scale(0.78); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.sim-signal-confetti {
  position: absolute;
  inset: -42px -25px -55px;
  overflow: hidden;
}

.sim-signal-confetti i {
  position: absolute;
  top: 35px;
  left: var(--confetti-x);
  width: 7px;
  height: 12px;
  border-radius: 2px;
  background: #5df3bc;
  animation: simSignalConfetti 1100ms ease-out var(--confetti-delay) both;
}

.sim-signal-confetti i[style*="--confetti-color:1"] { background: #ffe36b; }
.sim-signal-confetti i[style*="--confetti-color:2"] { background: #58c7ff; }
.sim-signal-confetti i[style*="--confetti-color:3"] { background: #ff83b6; }

@keyframes simSignalConfetti {
  0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(120px) rotate(420deg) scale(1); }
}

/* Keep the full simulator sidebar usable on shorter desktop displays. */
body.display-non-creator.display-non-creator-alt .sim-controls {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.display-non-creator.display-non-creator-alt #overview-actions-row {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: auto;
  padding: 9px 0 2px;
  background: linear-gradient(180deg, rgba(7, 23, 43, 0), rgba(7, 23, 43, 0.98) 32%);
}

/* A graphite/cyan shell connects the simulator controls with the landing palette. */
body.display-non-creator.display-non-creator-alt #start-sim,
body.display-non-creator.display-non-creator-alt .noncreator-demo-btn:not(.noncreator-premium-btn),
body.display-non-creator.display-non-creator-alt #global-overview,
body.display-non-creator.display-non-creator-alt #toggle-overlays,
body.display-non-creator.display-non-creator-alt .sim-controls .btn.noncreator-premium-btn {
  background: linear-gradient(180deg, rgba(17, 27, 44, 0.97), rgba(8, 16, 29, 0.99)) !important;
}

@media (min-width: 1241px) and (max-height: 900px) {
  body.display-non-creator.display-non-creator-alt .sim-card { padding: 9px; }
  body.display-non-creator.display-non-creator-alt .sim-layout { gap: 8px; grid-template-columns: minmax(270px, 310px) minmax(0, 1fr); }
  body.display-non-creator.display-non-creator-alt #noncreator-alt-topbar { padding: 7px 10px; }
  body.display-non-creator.display-non-creator-alt .sim-controls { gap: 6px; padding: 8px 8px 7px; }
  body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand { padding: 6px 7px; margin-bottom: 1px; }
  body.display-non-creator.display-non-creator-alt .noncreator-sections { gap: 6px; }
  body.display-non-creator.display-non-creator-alt .noncreator-section { padding: 9px 10px; border-radius: 14px; }
  body.display-non-creator.display-non-creator-alt .noncreator-section-title { margin-bottom: 7px; font-size: 10px; }
  body.display-non-creator.display-non-creator-alt .noncreator-button-stack { gap: 6px; }
  body.display-non-creator.display-non-creator-alt #start-sim,
  body.display-non-creator.display-non-creator-alt .noncreator-demo-btn,
  body.display-non-creator.display-non-creator-alt .sim-controls .btn.noncreator-premium-btn { height: 42px; }
  body.display-non-creator.display-non-creator-alt .noncreator-premium-btn .label { font-size: 13px; }
  body.display-non-creator.display-non-creator-alt .noncreator-section-zoom { margin-top: 6px; }
  body.display-non-creator.display-non-creator-alt #overview-actions-row { padding-top: 6px; }
}

@media (min-width: 1241px) and (max-height: 760px) {
  body.display-non-creator.display-non-creator-alt .noncreator-alt-sidebar-brand { display: none; }
  body.display-non-creator.display-non-creator-alt .noncreator-sections { gap: 4px; }
  body.display-non-creator.display-non-creator-alt .noncreator-section { padding: 7px 9px; }
  body.display-non-creator.display-non-creator-alt .noncreator-section-title { margin-bottom: 5px; }
  body.display-non-creator.display-non-creator-alt #start-sim,
  body.display-non-creator.display-non-creator-alt .noncreator-demo-btn,
  body.display-non-creator.display-non-creator-alt .sim-controls .btn.noncreator-premium-btn { height: 37px; }
}

@media (max-width: 620px) {
  .account-plan-card { padding: 22px 17px; border-radius: 16px; }
  .account-plan-summary,
  #account-plan-benefits,
  .account-plan-payment dl { grid-template-columns: 1fr; }
  .sim-signal-instruction { top: 11%; white-space: normal; width: max-content; max-width: calc(100% - 32px); text-align: center; }
}

/* ==========================================================================
   Touch driving controls + phone driving mode
   The simulator is keyboard-only (CONTROL_KEYS in app.js), so a phone had no
   way to drive. These pads route through the same handleControlKey path.
   ========================================================================== */

.sim-touch-controls {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  /* Only the pads themselves take input; the rest of the viewport stays clear
     for the HUD, the veedor bubble and the exam report above it. */
  pointer-events: none;
  touch-action: none;
}

body.sim-touch-input.sim-driving .sim-touch-controls {
  display: block;
}

.sim-touch-controls button {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: inline-grid;
  place-items: center;
  /* Undo the global `input, select, button { width: 100%; margin: 0 0 10px }`,
     which stretched the chip across the whole viewport. */
  width: auto;
  margin: 0;
  padding: 0;
  color: #dcecff;
  border: 1px solid rgba(108, 182, 255, 0.5);
  background: rgba(6, 22, 41, 0.62);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.sim-touch-controls button svg {
  width: 60%;
  height: 60%;
  fill: currentColor;
}

.sim-touch-controls button.is-pressed {
  color: #ffffff;
  border-color: rgba(150, 208, 255, 0.9);
  background: rgba(37, 122, 226, 0.72);
  box-shadow: 0 0 18px rgba(45, 140, 255, 0.5);
}

.sim-touch-bar {
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Scoped past `.sim-touch-controls button`, which resets padding to 0. */
.sim-touch-controls .sim-touch-chip {
  height: 36px;
  padding: 0 14px;
  gap: 6px;
  grid-auto-flow: column;
  border-radius: 999px;
  font: 600 13px/1 inherit;
}

.sim-touch-rotate {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6, 22, 41, 0.62);
  color: #bcd8f5;
  font-size: 12px;
  display: none;
}

.sim-touch-aux {
  position: absolute;
  /* Left, not right: the overview inset frame occupies the top-right corner for
     every account, and the accelerate pad owns the bottom-right. Below the top
     bar on the left is the only strip nothing else claims. */
  left: 10px;
  top: 56px;
  display: grid;
  /* A row, not a column: a column down the side collides with the steering pads
     on a short landscape phone. */
  grid-auto-flow: column;
  justify-content: start;
  gap: 8px;
}

.sim-touch-controls .sim-touch-key {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.sim-touch-cluster {
  position: absolute;
  bottom: 14px;
  display: grid;
  gap: 12px;
}

.sim-touch-steer {
  left: 14px;
  grid-auto-flow: column;
}

.sim-touch-drive {
  right: 14px;
  justify-items: end;
}

.sim-touch-controls .sim-touch-pad {
  width: 78px;
  height: 78px;
  border-radius: 20px;
}

.sim-touch-pad span {
  display: none;
}

.sim-touch-pad-go {
  border-color: rgba(96, 214, 148, 0.55);
}

.sim-touch-pad-go.is-pressed {
  border-color: rgba(126, 235, 172, 0.9);
  background: rgba(29, 150, 92, 0.75);
  box-shadow: 0 0 18px rgba(46, 196, 122, 0.5);
}

.sim-touch-pad-stop {
  border-color: rgba(255, 148, 132, 0.5);
}

.sim-touch-pad-stop.is-pressed {
  border-color: rgba(255, 176, 162, 0.9);
  background: rgba(190, 62, 48, 0.75);
  box-shadow: 0 0 18px rgba(232, 88, 70, 0.5);
}

/* Driving mode: give the viewport the whole screen so the pads have room and
   the sidebar is out of the way. */
@media (max-width: 900px) {
  body.sim-immersive.display-non-creator {
    overflow: hidden;
  }

  /* .card carries backdrop-filter, which makes the card the containing block for
     any fixed descendant. The viewport would then pin to the (page-tall) card
     instead of the screen, so the blur has to go while we are immersive. It is
     blurring nothing anyway -- the alt card's background is transparent. */
  body.sim-immersive.display-non-creator .sim-card {
    backdrop-filter: none;
  }

  body.sim-immersive.display-non-creator .sim-viewport {
    position: fixed;
    left: 0;
    right: 0;
    /* Fitted to the visual viewport rather than inset:0, so Safari's toolbars
       shrink the sim instead of covering its bottom controls. The vars are kept
       up to date by syncVisualViewportMetrics(); dvh is the static fallback. */
    top: var(--sim-visual-top, 0px);
    height: var(--sim-visual-height, 100dvh);
    z-index: 60;
    margin: 0;
    border: 0;
    border-radius: 0;
    min-height: 0;
    aspect-ratio: auto;
    /* Opaque: the default viewport background is translucent, which let the
       sidebar bleed through whenever WebGL had not painted a frame yet. */
    background: #050f1c;
  }

  /* The keycap legend teaches WASD, which is unreachable on a phone. */
  body.sim-touch-input .noncreator-alt-hotkeys {
    display: none !important;
  }

  /* Both live bottom-left; lift the status clear of the steering pads. */
  body.sim-touch-input.sim-driving .sim-webgl-status {
    bottom: 96px;
    max-width: calc(100% - 32px);
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.sim-touch-input.sim-driving .sim-touch-rotate {
    display: block;
  }

  /* Portrait leaves less width, so keep the pads from crowding each other. */
  body.sim-touch-input.sim-driving .sim-touch-pad {
    width: 68px;
    height: 68px;
  }
}

/* Short landscape phones: shrink so the pads never eat the road. */
@media (max-width: 900px) and (max-height: 460px) {
  .sim-touch-controls .sim-touch-pad {
    width: 66px;
    height: 66px;
  }

  /* The aux row keeps its 44px target: the squeeze here is vertical, and the
     row still clears both the top bar and the pads. */
  .sim-touch-aux {
    top: 50px;
    gap: 6px;
  }

  .sim-touch-cluster {
    bottom: 10px;
    gap: 10px;
  }
}

/* iOS Safari zooms the page in whenever a focused field has font-size < 16px, and
   it never zooms back out. That is why the simulator opened zoomed in right after
   the first login but not on later visits, when no form is ever focused.
   Fixing the font size is the accessible fix; `maximum-scale=1` would also stop it
   but would take pinch-zoom away from the user. */
@media (max-width: 900px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Phone topbar: keep the account chip on the breadcrumb's row instead of letting
   it drop to its own line. The base topbar auto-places left/center/status across
   three columns, so the two-row arrangement needs explicit placement. */
@media (max-width: 900px) {
  body.display-non-creator.display-non-creator-alt #noncreator-alt-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left status"
      "center center";
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-left {
    grid-area: left;
    min-width: 0;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-center {
    grid-area: center;
    justify-self: start;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-status {
    grid-area: status;
    justify-self: end;
  }

  /* Compact enough that both blocks fit a 390px row. */
  body.display-non-creator.display-non-creator-alt .noncreator-alt-user {
    gap: 7px;
    padding: 5px 8px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-user .avatar-sm {
    width: 20px;
    height: 20px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-user .u-name {
    font-size: 11px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-user .u-rank {
    font-size: 9px;
  }

  body.display-non-creator.display-non-creator-alt .noncreator-alt-breadcrumb {
    min-width: 0;
    font-size: 12px;
  }
}

/* iOS gestures on the driving surface. Double-tap zoom and the long-press
   selection/callout both fire on the canvas and its overlays, which is never what
   someone steering the car meant to do. */
body.sim-driving .sim-viewport {
  /* "manipulation" keeps panning and pinch-zoom but drops double-tap-to-zoom, so
     the page is still usable while a session runs but not fullscreen. */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

body.sim-immersive .sim-viewport {
  /* Fullscreen: the canvas is the whole surface, so no browser gesture on it is
     ever wanted -- pinch and pan included. */
  touch-action: none;
}

/* On the shell too, not just the viewport: a two-finger gesture is evaluated
   across all its touch points, so one finger landing in a gap between pads --
   which falls through to the page -- was enough to let a pinch through.
   Two classes deliberately: this has to outrank the shell-wide "manipulation"
   rule further down the file, which otherwise wins on source order. */
body.sim-immersive.display-non-creator,
body.sim-immersive {
  touch-action: none;
}

/* The exam report is meant to be read, so keep its text selectable. Note this is
   "manipulation", not "auto": auto would hand double-tap zoom back. */
body.sim-driving .sim-exam-report,
body.sim-immersive .sim-exam-report {
  touch-action: manipulation;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* Scoped to the viewport, the rules above left every tap in the sidebar and the
   topbar still zooming. The browser intersects touch-action up the ancestor
   chain, so declaring it on the shell covers the whole app. Pinch-zoom survives
   -- that is the one that matters for accessibility -- only double-tap goes. */
@media (max-width: 900px) {
  body.display-non-creator {
    touch-action: manipulation;
  }
}

/* Keep the pads clear of the home indicator and the notch, which matters both in
   Safari and in the standalone (home-screen) app where there is no browser chrome
   to push them in. */
@media (max-width: 900px) {
  .sim-touch-bar {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top));
  }

  .sim-touch-aux {
    left: max(10px, env(safe-area-inset-left));
  }

  .sim-touch-steer {
    left: max(14px, env(safe-area-inset-left));
  }

  .sim-touch-drive {
    right: max(14px, env(safe-area-inset-right));
  }

  .sim-touch-cluster {
    bottom: max(14px, env(safe-area-inset-bottom));
  }

}

/* The overview inset is sized and placed from JS (renderNonCreatorInsetView), and
   on a narrow screen it reaches far enough left to reach the aux row. Drop the row
   below it, but only while the inset is actually on screen. */
@media (max-width: 620px) {
  .sim-viewport:has(> .sim-inset-frame:not(.hidden)) .sim-touch-aux {
    top: 146px;
  }
}

/* Perf overlay (?perf=1). Mid-left is the one band no control occupies in either
   orientation, and pointer-events:none keeps it from ever eating a tap. */
.sim-perf-overlay {
  position: fixed;
  left: 8px;
  top: 50%;
  z-index: 9999;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 190, 255, 0.4);
  background: rgba(3, 12, 22, 0.82);
  color: #cfe8ff;
  font: 600 11px/1.45 "Space Mono", ui-monospace, monospace;
  white-space: pre;
  pointer-events: none;
  /* Own compositing layer: a translucent box repainting over a WebGL canvas can
     otherwise drag the canvas into the repaint and skew the very numbers this is
     meant to measure. */
  transform: translateZ(0) translateY(-50%);
  will-change: transform;
  contain: content;
}

/* backdrop-filter over a live WebGL canvas makes the compositor read back and
   blur the canvas region every frame, once per element -- and the driving UI
   stacks ten of them on top of it. Cutting 70% of the scene's triangles moved the
   frame rate by 1fps, and the menu sits at 33ms with nothing rendered at all, so
   the cost is not the 3D. Opaque backgrounds instead on phones. */
@media (max-width: 900px) {
  /* .card is back in this list. It was dropped earlier because removing its blur
     measured worse (33ms -> 37ms), but that whole run sat in the window where the
     idle menu wandered between 26ms and 37ms for reasons we could not explain, so
     the negative result is not trustworthy. A card-sized backdrop blur is one of
     the most expensive things a mobile compositor can be asked for, and the menu
     -- which composites this DOM and nothing else -- is measurably slower than
     the fullscreen 3D scene. Worth measuring again on a stable baseline. */
  .card,
  /* The sidebar itself, and the worst of the lot: a blur(12px) over the largest
     box on the page, composited on every frame of the menu. Needs the full
     three-class selector to outrank where that blur is declared. */
  body.display-non-creator.display-non-creator-alt .sim-controls,
  .sim-hud,
  .sim-penalty-card,
  .sim-veedor-bubble,
  .sim-assignment-banner,
  .sim-touch-controls button,
  .sim-perf-overlay,
  /* Hidden while driving, but both cover the whole canvas when they appear --
     the exam report at the end of every run, which is the worst moment for it. */
  .sim-demo-loading,
  .sim-exam-report {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The blur was carrying some of the contrast against the road; make up for it. */
  .sim-touch-controls button {
    background: rgba(6, 22, 41, 0.86);
  }

  .sim-touch-controls .sim-touch-rotate {
    background: rgba(6, 22, 41, 0.86);
  }
}

/* Decorative infinite animations, off on phones.
   premium-demo-shell animates box-shadow and border-color, and premium-demo-line
   animates background-position and a drop-shadow filter. None of those can be
   composited -- each one repaints its element every single frame, and the sidebar
   stacks six premium buttons running both at once. That matches the measurement
   that started this: 33ms per frame on the menu with nothing rendered, no 3D and
   0ms of our own JS.
   simDemoLoadingSpin and simSignalBlink stay: one is loading feedback and the
   other is the turn signal, which carries meaning. */
@media (max-width: 900px) {
  body.display-non-creator.display-non-creator-alt .sim-controls .btn.noncreator-premium-btn,
  body.display-non-creator.display-non-creator-alt .noncreator-premium-btn::before,
  body.display-non-creator.display-non-creator-alt .noncreator-premium-btn::after,
  body.display-non-creator.display-non-creator-alt .noncreator-alt-online .dot,
  .blob {
    animation: none;
  }
}

/* Fullscreen driving on a phone: the viewport covers the screen, but everything
   underneath is still in the tree and Safari still composites it -- the sidebar
   with its six premium buttons, the topbar, the hero, and .ambient, which is a
   fixed full-screen layer of blurred blobs. The menu costs 26ms a frame with
   tri=1k, call=1 and cpu=0.0ms, so the page itself is the floor every scene
   optimisation kept hitting. Take it out of the tree while it cannot be seen. */
@media (max-width: 900px) {
  body.sim-immersive.display-non-creator.display-non-creator-alt #noncreator-alt-topbar,
  body.sim-immersive.display-non-creator.display-non-creator-alt .sim-controls,
  body.sim-immersive.display-non-creator .hero,
  body.sim-immersive.display-non-creator .ambient {
    display: none;
  }
}

/* Same reasoning, the last of it: the body still carries three radial gradients
   over a full-page box that nobody can see behind the fullscreen viewport.
   Hiding the sidebar and topbar took the frame from 36ms to 21ms, so what is left
   underneath is worth taking too. */
@media (max-width: 900px) {
  body.sim-immersive.display-non-creator {
    background: #050f1c;
  }
}

/* The sidebar is a scroll container with `overscroll-behavior: contain` and a
   height cap, declared outside any media query and late enough in the file to
   beat the stacked-layout rules that tried to release it. That is right on a
   desktop, where the sidebar scrolls independently beside the viewport. Once the
   layout stacks, the page itself is what scrolls -- but the container still
   swallowed the gesture and refused to chain it to the parent, so on Android a
   drag starting anywhere inside the panel did nothing. Only the thin margin
   outside it scrolled. Let it flow with the page instead. */
@media (max-width: 1240px) {
  body.display-non-creator.display-non-creator-alt .sim-controls {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }

  /* It was sticky to the bottom of the sidebar's own scrollport. With that gone
     it would stick to the bottom of the screen instead and float over the page. */
  body.display-non-creator.display-non-creator-alt #overview-actions-row {
    position: static;
    margin-top: 0;
    background: none;
  }
}