/* Site integration only. Original visuals, simulation code and parameters stay intact. */
.experience-nav { margin-bottom: 16px; pointer-events: auto; }
.experience-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(11, 22, 31, 0.5);
  color: #bfd2dc;
  font-size: 11px;
  text-decoration: none;
}
.experience-nav a:hover { color: var(--text); border-color: #7da0b2; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #9cdcf4; outline-offset: 4px; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.recovery-actions a, .recovery-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 32, 45, 0.75);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.error-panel { position: fixed; }

/* Native fixed offsets overlap on narrow/short viewports. Keep the same panels
   in document flow and give the actual WebGL canvas its own observation area. */
@media (max-width: 1180px), (max-height: 700px) {
  html, body { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; }
  #app {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 24px;
    height: auto;
    min-height: 100svh;
  }
  .hero-copy { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .hero-copy h1 { font-size: clamp(32px, 5vw, 50px); }
  .hero-copy .lede { width: min(620px, 100%); font-size: 12px; }
  .mode-switch { position: relative; inset: auto; transform: none; grid-column: 1 / -1; grid-row: 2; width: min(292px, 100%); }
  #scene { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 3; width: 100%; height: clamp(320px, 55svh, 520px); border-radius: 16px; touch-action: none; }
  .control-panel, .spectrum-panel, .formula-panel { position: relative; inset: auto; width: 100%; min-width: 0; align-self: start; }
  .control-panel { grid-column: 1; grid-row: 4; }
  .spectrum-panel { grid-column: 2; grid-row: 4; }
  .formula-panel { grid-column: 1 / -1; grid-row: 5; }
  .formula { white-space: normal; overflow-wrap: anywhere; }
  .interaction-hint { position: relative; inset: auto; transform: none; grid-column: 1 / -1; grid-row: 6; white-space: normal; text-align: center; line-height: 1.8; }
  .scene-label { display: none; }
  .loading-overlay { position: fixed; }
}
@media (max-width: 700px) {
  #app { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; }
  .control-panel { grid-column: 1; grid-row: 4; }
  .spectrum-panel { grid-column: 1; grid-row: 5; }
  .formula-panel { grid-column: 1; grid-row: 6; }
  .interaction-hint { grid-column: 1; grid-row: 7; }
  .hero-copy .eyebrow { font-size: 9px; line-height: 1.7; }
}