.lwx-theater-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  margin: 1rem 0 1.5rem;
  padding: .6rem;
  border: 1px solid #25445d;
  border-radius: 14px;
  background: #071322;
}
/* The theater mode selector owns the sticky interaction plane. The legacy
   section navigation remains visible and usable for deep links, but does not
   compete for the same physical region while theater routing is active. The
   sitewide global secondary menu is a separate sticky element (its own very
   high z-index) that predates theater routing and was never accounted for by
   this rule; real Chromium pointer-ownership evidence showed it physically
   overlapping the theater tab bar at the same top:0 sticky plane after
   scrolling, obstructing tab clicks. It gets the same treatment as .lwx-nav:
   remains visible and functional, but stops competing for the sticky plane. */
html.lwx-theater-enabled .lwx-nav,
html.lwx-theater-enabled #lakana-global-secondary-menu,
html.lwx-theater-enabled .lakana-global-menu-v3 {
  position: static;
  top: auto;
}
.lwx-theater-tabs button {
  min-width: 0;
  min-height: 52px;
  padding: .65rem;
  border: 1px solid #31536d;
  border-radius: 9px;
  background: #0b1c2c;
  color: #b8ccda;
  font: 700 .75rem/1.25 inherit;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.lwx-theater-tabs button[aria-selected="true"] {
  border-color: #6857d9;
  background: #17283e;
  color: #5fe0d2;
  box-shadow: inset 0 -3px #6857d9;
}
.lwx-theater-tabs button:focus-visible,
.lwx-control-row button:focus-visible,
#wxex-copy:focus-visible,
#wxex-scenario:focus-visible {
  outline: 3px solid #ffdb70;
  outline-offset: 3px;
}
.lwx-theater-enabled .lwx-theater-panel[hidden] { display: none; }
.lwx-theater-enabled .lwx-theater-panel { animation: lwx-enter .2s ease; }
.lwx-exercise-banner {
  position: sticky;
  top: 64px;
  z-index: 7;
  padding: .8rem 1rem;
  border: 1px solid #9c7424;
  border-radius: 10px;
  background: #35270e;
  color: #ffd786;
  font-weight: 800;
  letter-spacing: .06em;
}
.lwx-exercise-grid {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.4fr);
  gap: 1rem;
}
/* .lwx-instrument is a dark sovereign surface introduced by the theater into a
 * light-ground flagship page. The page's own foreground is body.lakana-page {
 * color: var(--lakana-ink) }, which assets/lakana-apex-2d.css resolves to the
 * near-black #06111f. Every descendant this sheet did not explicitly colour
 * therefore inherited light-page ink onto a #081827 panel -- the instrument
 * heading, its body copy, the state-grid values and the evidence-key labels all
 * rendered at ~1.06:1 in real Chromium at 390x844. The root cause is a dark
 * surface declared without its own foreground scope, not a token value, a
 * specificity accident, or a palette problem.
 *
 * The repair is to give the surface that scope, using the dark-panel foreground
 * tokens this design system already established in assets/lakana-wx-flagship.css
 * for .lwx-nonreplacement (#EAF4F4 on #081322). No !important, no global
 * override, no palette change, and the LAKANA Chromatic Lock is untouched. */
.lwx-instrument {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #24475e;
  border-radius: 14px;
  background: #081827;
  color: #EAF4F4;
}
.lwx-instrument h2,
.lwx-instrument h3 { color: #EAF4F4; }
.lwx-instrument p,
.lwx-instrument li,
.lwx-instrument dd,
.lwx-instrument label { color: rgba(234, 244, 244, .88); }
.lwx-instrument strong,
.lwx-instrument b { color: #FFFFFF; }
.lwx-instrument a { color: #7FE7DB; }
.lwx-instrument a:hover,
.lwx-instrument a:focus-visible { color: #FFFFFF; }
.lwx-authority-state {
  color: #5fe0d2;
  font: 800 clamp(1.35rem, 4vw, 2.7rem)/1.1 inherit;
  overflow-wrap: anywhere;
}
.lwx-authority-state[data-state^="SILENCE"],
.lwx-authority-state[data-state="UNAVAILABLE"] { color: #ffbd66; }
.lwx-control-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.lwx-control-row button,
.lwx-control-row select,
#wxex-copy { min-height: 44px; }
.lwx-control-row button:disabled { cursor: not-allowed; opacity: .5; }
.lwx-delta { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; }
.lwx-delta b { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.lwx-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .8rem 0;
}
.lwx-state-grid > div {
  min-width: 0;
  padding: .6rem;
  border: 1px solid #29445a;
  border-radius: 8px;
}
.lwx-state-grid dt { color: #a8bfce; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lwx-state-grid dd { margin: .2rem 0 0; font-weight: 750; overflow-wrap: anywhere; }
.lwx-timeline { max-height: 28rem; overflow: auto; list-style: none; padding: 0; margin: 0; }
.lwx-timeline li { margin: .3rem 0; padding: .55rem .8rem; border-left: 2px solid #4bc9bb; background: #0a1927; font: 600 .8rem/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.lwx-receipt { max-width: 100%; max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.lwx-truth-primer { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.lwx-truth-primer .lwx-authority-state { margin: .35rem 0; }
.lwx-evidence-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.lwx-evidence-key span { padding: .5rem; border: 1px solid #29445a; border-radius: 7px; font-size: .72rem; text-align: center; overflow-wrap: anywhere; }
.lwx-instrument .lwx-evidence-key span { color: #EAF4F4; font-weight: 700; }
.lwx-instrument .lwx-live-notes,
.lwx-instrument .lwx-live-notes li { color: rgba(234, 244, 244, .86); }
.lwx-instrument .lwx-note { color: rgba(234, 244, 244, .78); }
.lwx-theater-eyebrow { color: #5fe0d2; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.lwx-exercise-context { padding: .7rem; border-left: 3px solid #ffbd66; background: #261f12; color: #FFD786; }
.lwx-exercise-context strong,
.lwx-exercise-context b { color: #FFFFFF; }
.lwx-sr-status { min-height: 1.5em; }
@keyframes lwx-enter { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .lwx-theater-tabs { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lwx-exercise-grid,
  .lwx-truth-primer { grid-template-columns: 1fr; }
  .lwx-evidence-key,
  .lwx-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lwx-exercise-banner { top: 0; }
  .lwx-delta { grid-template-columns: 1fr; }
  .lwx-delta > span { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 430px) {
  .lwx-theater-tabs { padding: .4rem; gap: .3rem; }
  .lwx-theater-tabs button { min-height: 48px; padding: .45rem; font-size: .68rem; }
  .lwx-state-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lwx-theater-enabled .lwx-theater-panel { animation: none; }
  html { scroll-behavior: auto; }
}