:root {
  --bi-void: #07090f;
  --bi-deep: #090e18;
  --bi-bone: #efe8db;
  --bi-muted: #aaa397;
  --bi-gold: #d7b65a;
  --bi-blue: #78a7e8;
  --bi-violet: #a58be2;
  --bi-mint: #76ceb0;
  --bi-rule: rgba(239, 232, 219, 0.18);
  --bi-glass: rgba(7, 9, 15, 0.72);
}

html[data-gestalt="v2"] { overflow: hidden; }
body.bi-page {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bi-void);
  color: var(--bi-bone);
  font: 400 1rem/1.5 var(--g2-sans);
}

.bi-page *, .bi-page *::before, .bi-page *::after { box-sizing: border-box; }
.bi-page a { color: inherit; text-underline-offset: .22em; }
.bi-page :focus-visible { outline: 3px solid var(--bi-mint); outline-offset: 4px; }
.bi-stage { position: relative; width: 100vw; height: 100svh; isolation: isolate; overflow: hidden; }
#burrisphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.bi-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,15,.72) 0%, transparent 29%, transparent 70%, rgba(7,9,15,.48) 100%),
    linear-gradient(0deg, rgba(7,9,15,.94) 0%, transparent 31%),
    radial-gradient(circle at 58% 44%, transparent 0 23%, rgba(7,9,15,.22) 52%, rgba(7,9,15,.88) 100%);
}

.bi-skip {
  position: fixed; z-index: 100; left: 16px; top: 12px; padding: 12px 16px;
  transform: translateY(-160%); background: var(--bi-bone); color: var(--bi-void);
}
.bi-skip:focus { transform: none; }

.bi-header {
  position: absolute; z-index: 4; inset: max(18px, env(safe-area-inset-top)) 24px auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font: 600 .76rem/1 var(--g2-mono); letter-spacing: .08em; text-transform: uppercase;
}
.bi-back, .bi-nav a {
  min-height: 48px; display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--bi-muted); transition: color .2s ease;
}
.bi-back:hover, .bi-nav a:hover { color: var(--bi-bone); }
.bi-back span:first-child { color: var(--bi-gold); font-size: 1.15rem; }
.bi-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.bi-nav a:last-child { color: var(--bi-gold); }

.bi-thesis {
  position: absolute; z-index: 3; left: clamp(24px, 4vw, 68px); top: clamp(94px, 15vh, 164px);
  width: min(385px, 32vw); pointer-events: none;
}
.bi-kicker { margin: 0 0 16px; color: var(--bi-muted); font: 500 .68rem/1.4 var(--g2-mono); letter-spacing: .08em; text-transform: uppercase; }
.bi-kicker span:first-child { color: var(--bi-mint); }
.bi-kicker span:last-child { color: var(--bi-violet); }
.bi-thesis h1 { margin: 0; font: 430 clamp(3rem, 5.6vw, 6.6rem)/.82 var(--g2-display); letter-spacing: -.055em; }
.bi-thesis h1 em { color: var(--bi-blue); font-weight: 300; }
.bi-thesis > p:last-child { max-width: 36ch; margin: 25px 0 0; color: var(--bi-muted); font-size: .94rem; }
.bi-thesis strong { color: var(--bi-bone); font-weight: 550; }

.bi-chart-key {
  position: absolute; z-index: 3; right: clamp(22px, 3.5vw, 58px); top: clamp(100px, 16vh, 170px);
  width: min(300px, 25vw); padding: 18px 20px; border: 1px solid var(--bi-rule);
  background: var(--bi-glass); backdrop-filter: blur(16px); pointer-events: none;
}
.bi-chart-key__item { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; padding: 8px 0; }
.bi-chart-key__line { display: block; height: 2px; background: currentColor; box-shadow: 0 0 12px currentColor; }
.bi-chart-key__item--phi { color: var(--bi-blue); }
.bi-chart-key__item--nu { color: var(--bi-mint); }
.bi-chart-key__item--titan { color: var(--bi-gold); }
.bi-chart-key__item--titan .bi-chart-key__line {
  height: 28px;
  width: 1px;
  justify-self: center;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.bi-chart-key strong { display: block; font: 650 .76rem/1.3 var(--g2-mono); text-transform: uppercase; letter-spacing: .06em; }
.bi-chart-key small { display: block; margin-top: 3px; color: var(--bi-muted); font-size: .7rem; }
.bi-chart-key > p { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--bi-rule); color: var(--bi-muted); font-size: .72rem; }

.bi-readout {
  position: absolute; z-index: 3; right: clamp(22px, 3.5vw, 58px); top: 56%; transform: translateY(-50%);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(330px, 27vw);
  border-top: 1px solid var(--bi-rule); border-left: 1px solid var(--bi-rule); pointer-events: none;
}
.bi-readout div { min-height: 66px; min-width: 0; padding: 11px 10px; border-right: 1px solid var(--bi-rule); border-bottom: 1px solid var(--bi-rule); background: rgba(7,9,15,.5); }
.bi-readout span { display: block; color: var(--bi-muted); font: 500 .64rem/1 var(--g2-mono); letter-spacing: .08em; text-transform: uppercase; }
.bi-readout strong { display: block; overflow: hidden; margin-top: 8px; color: var(--bi-bone); font: 450 .86rem/1 var(--g2-mono); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.bi-readout div:nth-child(1) strong { color: var(--bi-blue); }
.bi-readout div:nth-child(2) strong { color: var(--bi-mint); }
.bi-readout div:nth-child(4) strong { color: var(--bi-gold); }
.bi-readout div:nth-child(6) strong { color: var(--bi-violet); }

.bi-action-plane {
  position: absolute; z-index: 3; left: clamp(24px, 4vw, 68px); bottom: clamp(198px, 23vh, 242px);
  width: min(370px, 32vw); pointer-events: none;
}
.bi-action-plane__current { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-left: 12px; border-left: 2px solid var(--bi-violet); }
.bi-phase__index { display: block; color: var(--bi-violet); font: 600 .61rem/1.2 var(--g2-mono); letter-spacing: .08em; text-transform: uppercase; }
.bi-action-plane__current > strong { color: var(--bi-bone); font: 420 1.25rem/1 var(--g2-display); }
.bi-action-plane__map { position: relative; margin-top: 10px; padding: 19px 57px 20px; }
.bi-action-plane__grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 106px;
  border: 1px solid rgba(165,139,226,.42); background: rgba(7,9,15,.56); backdrop-filter: blur(12px);
}
.bi-action-plane__cell {
  display: grid; place-content: center; gap: 4px; padding: 7px 8px; opacity: .76;
  border-right: 1px solid rgba(165,139,226,.28); border-bottom: 1px solid rgba(165,139,226,.28);
  transition: opacity .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.bi-action-plane__cell:nth-child(even) { border-right: 0; }
.bi-action-plane__cell:nth-child(n+3) { border-bottom: 0; }
.bi-action-plane__cell strong { font: 600 .66rem/1.1 var(--g2-mono); letter-spacing: .045em; text-transform: uppercase; }
.bi-action-plane__cell small { color: var(--bi-muted); font: 500 .55rem/1.3 var(--g2-mono); }
.bi-action-plane__cell.is-active { opacity: 1; background: rgba(165,139,226,.15); box-shadow: inset 0 0 22px rgba(165,139,226,.12); }
.bi-action-plane__axis { position: absolute; color: rgba(239,232,219,.58); font: 550 .49rem/1 var(--g2-mono); letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; }
.bi-action-plane__axis--top { top: 0; left: 50%; transform: translateX(-50%); color: var(--bi-blue); }
.bi-action-plane__axis--bottom { bottom: 0; left: 50%; transform: translateX(-50%); color: var(--bi-gold); }
.bi-action-plane__axis--left { left: 0; top: 50%; transform: translate(-42%, -50%) rotate(-90deg); }
.bi-action-plane__axis--right { right: 0; top: 50%; transform: translate(42%, -50%) rotate(90deg); }
.bi-action-plane__fence { display: block; margin-top: 5px; color: var(--bi-muted); font: 500 .51rem/1.3 var(--g2-mono); text-align: center; }

.bi-console {
  position: absolute; z-index: 5; left: clamp(24px, 4vw, 68px); right: clamp(24px, 4vw, 68px); bottom: max(22px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(210px, .75fr) minmax(360px, 1.8fr) minmax(350px, 1.15fr); gap: 22px; align-items: center;
  min-height: 166px; padding: 18px 22px; border: 1px solid var(--bi-rule);
  background: rgba(7,9,15,.8); backdrop-filter: blur(20px); box-shadow: 0 26px 80px rgba(0,0,0,.34);
}
.bi-console__formula span, .bi-console__formula strong { display: block; }
.bi-console__formula span { color: var(--bi-muted); font: 500 .66rem/1.5 var(--g2-mono); }
.bi-console__formula strong { margin: 5px 0; color: var(--bi-bone); font: 500 .76rem/1.5 var(--g2-mono); }
.bi-console code { font: inherit; }
.bi-control-stack { display: grid; gap: 7px; }
.bi-control-row { display: grid; gap: 1px; }
.bi-control-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-inline: 86px; }
.bi-control-row__head label { color: var(--bi-muted); font: 600 .61rem/1.2 var(--g2-mono); letter-spacing: .05em; text-transform: uppercase; }
.bi-control-row__head label span { color: var(--bi-mint); }
.bi-control-row__head output { color: var(--bi-bone); font: 500 .65rem/1 var(--g2-mono); font-variant-numeric: tabular-nums; }
.bi-slider { display: grid; grid-template-columns: 74px 1fr 74px; align-items: center; gap: 12px; }
.bi-slider__pole { display: grid; color: var(--bi-muted); text-align: center; }
.bi-slider__pole b { color: var(--bi-bone); font: 400 1.4rem/1 var(--g2-display); }
.bi-slider__pole small { margin-top: 5px; font: 500 .58rem/1.2 var(--g2-mono); text-transform: uppercase; }
.bi-slider input { width: 100%; min-height: 48px; accent-color: var(--bi-gold); cursor: ew-resize; }
.bi-slider--rotation input { accent-color: var(--bi-violet); }
.bi-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bi-actions button {
  min-height: 48px; padding: 8px 10px; border: 1px solid var(--bi-rule); border-radius: 0;
  background: rgba(239,232,219,.035); color: var(--bi-muted); cursor: pointer;
  font: 550 .66rem/1.2 var(--g2-mono); text-transform: uppercase; letter-spacing: .04em;
}
.bi-actions button:hover { border-color: rgba(239,232,219,.44); color: var(--bi-bone); }
.bi-actions button:disabled { cursor: not-allowed; opacity: .62; }
.bi-action-icon { display: inline-block; min-width: 18px; margin-right: 5px; color: var(--bi-gold); font-size: .9rem; }

.bi-boundary { position: absolute; z-index: 6; right: clamp(22px, 3.5vw, 58px); bottom: clamp(190px, 23vh, 238px); width: min(430px, 34vw); }
.bi-boundary summary { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; color: var(--bi-muted); cursor: pointer; font: 550 .66rem/1.3 var(--g2-mono); text-transform: uppercase; letter-spacing: .05em; }
.bi-boundary[open] { padding: 0 18px 16px; border: 1px solid var(--bi-rule); background: rgba(7,9,15,.94); backdrop-filter: blur(20px); }
.bi-boundary[open] summary { justify-content: flex-start; border-bottom: 1px solid var(--bi-rule); }
.bi-boundary p { margin: 14px 0 0; color: var(--bi-muted); font-size: .76rem; }
.bi-boundary strong { color: var(--bi-bone); }
.bi-drag-hint { position: absolute; z-index: 2; left: 50%; top: max(24px, env(safe-area-inset-top)); transform: translateX(-50%); color: rgba(239,232,219,.42); font: 500 .6rem/1 var(--g2-mono); text-transform: uppercase; letter-spacing: .08em; }

.bi-fallback { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; padding: 30px; overflow: auto; background: var(--bi-void); text-align: center; }
.bi-fallback[hidden] { display: none; }
.bi-fallback__figure { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--bi-muted); }
.bi-fallback__figure i { width: 72px; height: 1px; background: var(--bi-rule); }
.bi-fallback h2 { margin: 22px 0 10px; font: 420 2.4rem/1 var(--g2-display); }
.bi-fallback p { max-width: 52ch; color: var(--bi-muted); }
.bi-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 980px) {
  .bi-thesis { width: min(340px, 42vw); }
  .bi-chart-key { width: 260px; }
  .bi-readout { width: 285px; }
  .bi-action-plane { width: min(340px, 40vw); }
  .bi-console { grid-template-columns: minmax(340px, 1.65fr) minmax(320px, 1fr); }
  .bi-console__formula { display: none; }
  .bi-boundary { bottom: 214px; }
}

@media (max-width: 700px) {
  .bi-atmosphere { background: linear-gradient(0deg, rgba(7,9,15,.96) 0%, transparent 42%), radial-gradient(circle at 50% 38%, transparent 0 28%, rgba(7,9,15,.74) 100%); }
  .bi-header { inset-inline: 16px; }
  .bi-back span:last-child { display: none; }
  .bi-back, .bi-nav a { min-width: 48px; justify-content: center; }
  .bi-nav { gap: 16px; }
  .bi-nav a:nth-child(2) { display: none; }
  .bi-thesis { top: 76px; left: 18px; width: calc(100vw - 36px); }
  .bi-kicker { margin-bottom: 10px; font-size: .58rem; }
  .bi-thesis h1 { font-size: clamp(2.7rem, 14vw, 4.4rem); line-height: .84; }
  .bi-thesis > p:last-child { display: none; }
  .bi-chart-key { top: auto; right: 16px; bottom: 250px; width: 195px; padding: 10px 12px; }
  .bi-chart-key__item { grid-template-columns: 28px 1fr; gap: 8px; padding: 4px 0; }
  .bi-chart-key small { display: none; }
  .bi-chart-key > p { display: block; margin-top: 7px; padding-top: 7px; font-size: .58rem; line-height: 1.35; }
  .bi-readout { top: auto; right: auto; left: 16px; bottom: 250px; transform: none; width: 154px; grid-template-columns: 1fr 1fr; }
  .bi-readout div { min-height: 48px; padding: 7px 8px; }
  .bi-readout div:nth-child(3) { grid-column: 1 / -1; }
  .bi-readout div:nth-child(4), .bi-readout div:nth-child(5), .bi-readout div:nth-child(6) { display: none; }
  .bi-readout strong { margin-top: 5px; font-size: .75rem; }
  .bi-action-plane { left: 16px; bottom: 402px; width: 255px; }
  .bi-action-plane__current { gap: 10px; }
  .bi-phase__index { font-size: .58rem; }
  .bi-action-plane__current > strong { font-size: .95rem; }
  .bi-action-plane__map { margin-top: 7px; padding: 15px 41px 16px; }
  .bi-action-plane__grid { height: 74px; }
  .bi-action-plane__cell { gap: 2px; padding: 4px; }
  .bi-action-plane__cell strong { font-size: .62rem; }
  .bi-action-plane__cell small { display: none; }
  .bi-action-plane__axis { font-size: 0; }
  .bi-action-plane__axis::after { font: 600 .6rem/1 var(--g2-mono); letter-spacing: .03em; }
  .bi-action-plane__axis--top::after { content: "Φ₅ · possible"; }
  .bi-action-plane__axis--bottom::after { content: "V₄ · actual"; }
  .bi-action-plane__axis--left::after { content: "self / ego · taking"; }
  .bi-action-plane__axis--right::after { content: "giving · other / collective"; }
  .bi-action-plane__fence { display: none; }
  .bi-console { left: 0; right: 0; bottom: 0; min-height: 232px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); border-inline: 0; border-bottom: 0; grid-template-columns: 1fr; gap: 5px; }
  .bi-control-stack { gap: 2px; }
  .bi-control-row__head { padding-inline: 60px; }
  .bi-slider { grid-template-columns: 48px 1fr 48px; }
  .bi-slider__pole small { display: none; }
  .bi-actions { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .bi-actions button {
    display: grid;
    min-height: 50px;
    place-content: center;
    gap: 2px;
    padding: 5px 2px;
    font-size: .58rem;
  }
  .bi-actions button span:last-child { display: block; }
  .bi-action-icon { margin: 0; font-size: .92rem; }
  .bi-boundary { right: 16px; bottom: 402px; width: auto; }
  .bi-boundary summary { font-size: 0; }
  .bi-boundary summary::after { content: "A / I / C ?"; font-size: .62rem; }
  .bi-boundary[open] { left: 16px; bottom: 246px; max-height: 50vh; overflow: auto; }
  .bi-boundary[open] summary { font-size: .58rem; }
  .bi-boundary[open] summary::after { content: ""; }
  .bi-drag-hint { display: none; }
}

@media (max-width: 380px) {
  .bi-chart-key { display: none; }
  .bi-action-plane { width: calc(100vw - 32px); }
  .bi-action-plane__map { padding-inline: 45px; }
}

@media (max-width: 700px) and (max-height: 700px) {
  .bi-thesis { display: block; top: 66px; left: 14px; width: calc(100vw - 28px); }
  .bi-thesis .bi-kicker { margin: 0; font-size: .54rem; }
  .bi-thesis h1 { margin-top: 4px; font-size: clamp(1.65rem, 9vw, 2.4rem); line-height: .88; }
  .bi-thesis h1 br { display: none; }
  .bi-action-plane { right: 14px; left: auto; bottom: 238px; width: 138px; }
  .bi-action-plane__current { display: flex; justify-content: flex-start; }
  .bi-action-plane__current > strong { display: none; }
  .bi-action-plane__fence { display: none; }
  .bi-action-plane__map { margin-top: 0; padding: 12px 19px 13px; }
  .bi-action-plane__grid { height: 72px; }
  .bi-action-plane__cell { padding: 2px; }
  .bi-action-plane__cell strong { font-size: .5rem; }
  .bi-action-plane__axis--left, .bi-action-plane__axis--right { display: none; }
  .bi-readout { bottom: 240px; width: 150px; }
  .bi-chart-key { display: none; }
  .bi-boundary { display: block; right: 14px; bottom: 352px; }
  .bi-boundary[open] { left: 14px; right: 14px; bottom: 238px; max-height: 43vh; }
}

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

@media (forced-colors: active) {
  .bi-console, .bi-chart-key, .bi-readout div, .bi-boundary[open], .bi-action-plane__grid { border-color: CanvasText; }
  .bi-actions button { border-color: ButtonText; color: ButtonText; forced-color-adjust: auto; }
  .bi-control-row__head label span { color: LinkText; }
}
