html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020306; }

#hypercube-app {
  background:
    radial-gradient(circle at 69% 42%, rgba(104, 190, 221, 0.14), transparent 34%),
    radial-gradient(circle at 76% 66%, rgba(203, 137, 183, 0.065), transparent 31%),
    linear-gradient(146deg, #010205, #060910 57%, #010204);
}

#hypercube-app[aria-busy="true"] { visibility: hidden; }

#hypercube-canvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
#hypercube-canvas:active { cursor: grabbing; }

.hypercube-graph-host {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1;
}

.hypercube-graph-primary-host {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.34));
}

.hypercube-graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.hypercube-graph-canvas[data-presentation="primary"] { cursor: grab; }
.hypercube-graph-canvas[data-presentation="primary"]:active { cursor: grabbing; }

#hypercube-panel { overflow-x: hidden; }

.hypercube-hover {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--sfi-stage-center-x);
  padding: 7px 10px;
  border: 1px solid rgba(191,232,251,.26);
  border-radius: 999px;
  background: rgba(3,7,12,.7);
  color: rgba(240,250,255,.82);
  font-size: 9px;
  letter-spacing: .06em;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.hypercube-teaching-pilot {
  position: absolute;
  z-index: 12;
  top: max(14px, env(safe-area-inset-top));
  left: var(--sfi-visual-center-x);
  display: grid;
  grid-template-columns: auto auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: min(660px, calc(100vw - 40px));
  min-height: 54px;
  padding: 8px 9px 8px 13px;
  border: 1px solid rgba(191, 232, 251, 0.28);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(6, 13, 20, 0.9), rgba(1, 4, 8, 0.78));
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(115%);
  transform: translateX(-50%);
}
.hypercube-teaching-pilot-identity { display: grid; gap: 1px; white-space: nowrap; }
.hypercube-teaching-pilot-identity span { color: rgba(191, 232, 251, 0.52); font-size: 7px; letter-spacing: 0.14em; }
.hypercube-teaching-pilot-identity strong { color: rgba(245, 251, 255, 0.92); font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 400; }
.hypercube-teaching-presence { display: flex; align-items: center; gap: 2px; width: 24px; height: 28px; }
.hypercube-teaching-presence i { width: 2px; height: 20px; border-radius: 999px; background: rgba(129, 220, 247, 0.82); transform: scaleY(var(--hypercube-teaching-level, 0.24)); transition: transform 90ms linear, background-color 180ms ease; }
.hypercube-teaching-pilot[data-state="recording"] .hypercube-teaching-presence i { background: rgba(255, 150, 125, 0.9); }
.hypercube-teaching-pilot-copy { display: grid; gap: 2px; min-width: 0; }
.hypercube-teaching-pilot-status { overflow: hidden; color: rgba(238, 247, 251, 0.77); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hypercube-teaching-pilot-time { color: rgba(191, 232, 251, 0.54); font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.hypercube-teaching-pilot-controls { display: flex; gap: 6px; }
.hypercube-teaching-pilot button { min-width: 76px; min-height: 34px; padding: 6px 11px; border: 1px solid rgba(191, 232, 251, 0.34); border-radius: 10px; background: rgba(191, 232, 251, 0.1); color: rgba(242, 251, 255, 0.94); font: inherit; font-size: 9px; cursor: pointer; }
.hypercube-teaching-pilot button.is-secondary { min-width: 64px; border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.62); }
.hypercube-teaching-pilot button:hover,
.hypercube-teaching-pilot button:focus-visible { border-color: rgba(191, 232, 251, 0.66); background: rgba(191, 232, 251, 0.16); outline: none; }
.hypercube-teaching-pilot button:disabled { opacity: 0.42; cursor: wait; }
.hypercube-teaching-pilot button[hidden] { display: none; }
.hypercube-teaching-pilot:has(.sfi-teaching-storage) { grid-template-columns: auto auto minmax(150px, 1fr) auto; }
.sfi-teaching-storage { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid rgba(191, 232, 251, 0.12); }
.sfi-teaching-storage-copy { display: grid; min-width: 0; gap: 2px; }
.sfi-teaching-storage-copy strong { color: rgba(191, 232, 251, 0.52); font-size: 7px; letter-spacing: 0.14em; }
.sfi-teaching-storage-copy span { overflow: hidden; color: rgba(238, 247, 251, 0.69); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sfi-teaching-storage-controls { display: flex; flex: 0 0 auto; gap: 5px; }
.hypercube-teaching-pilot .sfi-teaching-storage button { min-width: 78px; min-height: 28px; padding: 4px 7px; font-size: 8px; }

.hypercube-experience { margin-top: 0; }
.hypercube-view-controls { margin-top: 2px; }
.hypercube-view-controls .hypercube-section-head { margin-bottom: 6px; }
.hypercube-view-selector { width: 100%; }
.hypercube-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 1px 7px; }
.hypercube-section-head > span { color: rgba(255,255,255,.42); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.hypercube-section-head output { overflow: hidden; color: var(--sfi-blue); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.hypercube-dimension-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
#hypercube-panel .hypercube-dimension-grid button { min-width: 0; min-height: 31px; padding: 4px 2px; font-size: 9px; }

.hypercube-panel-section { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.hypercube-construction-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.56); font-size: 10px; }
#hypercube-panel .hypercube-construction-head button { min-height: 32px; }
#hypercube-panel #hypercube-build {
  min-width: 94px;
  border-color: rgba(191,232,251,.42);
  background: linear-gradient(180deg, rgba(117,193,228,.18), rgba(93,164,197,.08));
  color: rgba(237,249,255,.94);
  font-weight: 600;
}
#hypercube-panel #hypercube-build[aria-pressed="true"] { border-color: rgba(205,241,255,.7); background: rgba(126,207,241,.2); }
#hypercube-construction-progress { width: 100%; margin: 9px 0 0; accent-color: var(--sfi-blue); }
.hypercube-construction-head + input + p { margin: 7px 1px 0; }

.hypercube-project-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; margin-bottom: var(--sfi-space-section); }
#hypercube-panel .hypercube-project-actions button { min-width: 0; padding-inline: 5px; font-size: 8px; }

.hypercube-toggle-grid {
  margin-top: 11px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 1px 7px rgba(0,0,0,.28);
}

#hypercube-panel .hypercube-toggle-grid button { min-width: 0; min-height: 32px; padding: 5px 4px; border-color: transparent; font-size: 9px; }

.hypercube-cell-control {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 36px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid rgba(210,175,103,.2);
  border-radius: 15px;
  background: rgba(210,175,103,.045);
}

#hypercube-panel .hypercube-cell-control button { width: 34px; min-height: 34px; padding: 0; font-size: 21px; }
#hypercube-panel .hypercube-cell-control .hypercube-cell-toggle { grid-column: 1 / -1; width: 100%; min-height: 31px; padding: 5px 8px; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.hypercube-cell-control span { display: grid; justify-items: center; gap: 2px; }
.hypercube-cell-control small { color: rgba(255,255,255,.36); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.hypercube-cell-control strong { color: var(--sfi-gold-bright); font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 400; }

.hypercube-perspective { margin-top: 10px; }

.hypercube-unfold-controls {
  padding: 10px;
  border: 1px solid rgba(191,232,251,.18);
  border-radius: 15px;
  background: radial-gradient(circle at 90% 0%, rgba(103,190,229,.11), transparent 48%), rgba(0,0,0,.2);
}
.hypercube-unfold-controls .hypercube-section-head { margin-top: 0; }
.hypercube-unfold-object { margin-block: 7px 9px; }
.hypercube-unfold-readout { display: grid; gap: 2px; margin-top: 8px; padding: 8px 10px; border-radius: 11px; background: rgba(4,12,19,.58); }
.hypercube-unfold-readout strong { color: rgba(237,250,255,.94); font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 400; }
.hypercube-unfold-readout span { color: var(--sfi-blue-muted); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.hypercube-facet-rule { margin: 8px 2px 0; color: rgba(255,255,255,.43); font-size: 8px; line-height: 1.45; }
.hypercube-facet-rule strong { color: rgba(191,232,251,.8); font-weight: 600; }

.hypercube-detail { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.09); }
.hypercube-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.72); cursor: pointer; font-size: 9px; letter-spacing: .12em; list-style: none; text-transform: uppercase; }
.hypercube-detail summary::-webkit-details-marker { display: none; }
.hypercube-detail summary::before { color: rgba(191,232,251,.62); content: "＋"; font-size: 10px; }
.hypercube-detail[open] summary::before { content: "−"; }
.hypercube-detail summary span { margin-right: auto; }
.hypercube-detail summary small { max-width: 58%; overflow: hidden; color: rgba(191,232,251,.55); font-size: 8px; font-weight: 400; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }

.hypercube-rotation-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(104px, 2fr); align-items: center; gap: 8px; margin-top: 9px; }
.hypercube-dials { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; }
.hypercube-dial-row { display: flex; width: 100%; align-items: flex-start; justify-content: center; gap: 6px; }
.hypercube-dial-wrap { display: grid; justify-items: center; }
#hypercube-panel button.hypercube-dial {
  position: relative;
  width: 50px;
  min-height: 50px;
  padding: 0;
  border-color: rgba(191,232,251,.25);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.1), rgba(255,255,255,.025) 58%, rgba(0,0,0,.26));
  touch-action: none;
}

.hypercube-dials[data-dimension="5"] .hypercube-dial-row { gap: 5px; }
.hypercube-dials[data-dimension="5"] button.hypercube-dial { width: 46px; min-height: 46px; }
.hypercube-dial::before { position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; }
.hypercube-dial-hand { position: absolute; z-index: 1; top: 50%; left: 50%; width: 38%; height: 1px; border-radius: 999px; background: var(--sfi-blue); box-shadow: 0 0 8px rgba(191,232,251,.45); transform-origin: left center; }
.hypercube-dial-center { position: absolute; z-index: 3; top: calc(50% - 2px); left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: rgba(221,247,255,.95); box-shadow: 0 0 6px rgba(143,218,248,.5); }
.hypercube-dial-plane,
.hypercube-dial-value { position: absolute; z-index: 2; right: 0; left: 0; pointer-events: none; text-align: center; }
.hypercube-dial-plane { top: 7px; color: rgba(255,255,255,.9); font-size: 9px; font-weight: 600; letter-spacing: .07em; line-height: 1; }
.hypercube-dial-value { bottom: 6px; color: rgba(191,232,251,.62); font-family: Georgia, "Times New Roman", serif; font-size: 7px; line-height: 1; }

.hypercube-rotation-tools { display: grid; align-content: center; gap: 6px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.09); }
.hypercube-rotation-tools > span { color: rgba(255,255,255,.38); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
#hypercube-panel .hypercube-rotation-tools button { min-height: 34px; padding: 6px 8px; font-size: 9px; }
.hypercube-rotation-tools small { color: rgba(191,232,251,.46); font-size: 7px; line-height: 1.35; }

.hypercube-curated { display: grid; gap: 6px; margin-top: 11px; }
.hypercube-curated small { color: rgba(191,232,251,.58); font-size: 9px; text-align: center; }

.hypercube-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; }
.hypercube-counts div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(0,0,0,.18); }
.hypercube-counts span { overflow: hidden; color: rgba(255,255,255,.42); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.hypercube-counts strong { color: rgba(225,246,255,.9); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }

#hypercube-panel .sfi-result-card { margin-top: 0; }
#hypercube-panel .sfi-result-card > .sfi-math-readout { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; line-height: 1.55; white-space: nowrap; }
#hypercube-general-formula sub,
#hypercube-equation-evaluations sub { font-size: .68em; line-height: 0; vertical-align: sub; }
#hypercube-general-formula sup,
#hypercube-equation-evaluations sup { font-size: .68em; line-height: 0; vertical-align: super; }
#hypercube-schlafli-symbol { margin-left: 6px; color: rgba(191,232,251,.7); font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.hypercube-binomial { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; white-space: nowrap; }
.hypercube-binomial-paren { font-size: 1.62em; font-weight: 300; line-height: .75; }
.hypercube-binomial-stack { display: inline-grid; min-width: 1.05em; justify-items: center; font-size: .72em; line-height: .82; }
.hypercube-fraction { display: inline-grid; justify-items: center; vertical-align: middle; line-height: 1.05; }
.hypercube-fraction > span:first-child { width: 100%; padding: 0 3px 1px; border-bottom: 1px solid currentColor; text-align: center; }
.hypercube-fraction > span:last-child { padding-top: 1px; }
.hypercube-binomial-identity { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: rgba(191,232,251,.53); font-family: Georgia, "Times New Roman", serif; font-size: 12px; }
#hypercube-equation-evaluations { display: grid; gap: 3px; max-height: 174px; margin-top: 6px; padding-right: 3px; overflow: auto; color: rgba(255,255,255,.67); font-family: Georgia, "Times New Roman", serif; font-size: 12px; scrollbar-width: thin; }
.hypercube-equation-row { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 4px; min-height: 20px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.045); }
.hypercube-equation-row > strong { color: rgba(225,246,255,.9); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

#hypercube-app[data-sfi-regime="intermediate"] .hypercube-dials,
#hypercube-app[data-sfi-regime="compact"] .hypercube-dials {
  gap: 4px;
}

#hypercube-app[data-sfi-regime="intermediate"] .hypercube-dial-row,
#hypercube-app[data-sfi-regime="compact"] .hypercube-dial-row { gap: 6px; }

#hypercube-app[data-sfi-regime="intermediate"] .hypercube-dials[data-dimension="5"] .hypercube-dial-row,
#hypercube-app[data-sfi-regime="compact"] .hypercube-dials[data-dimension="5"] .hypercube-dial-row { gap: 5px; }

@media (max-width: 390px) {
  .hypercube-dials[data-dimension="5"] .hypercube-dial-row { gap: 4px; }
  .hypercube-dials[data-dimension="5"] button.hypercube-dial { width: 45px; min-height: 45px; }
}

@media (max-width: 700px) {
  .hypercube-teaching-pilot {
    top: calc(env(safe-area-inset-top) + 56px);
    grid-template-columns: auto minmax(120px, 1fr) auto;
    gap: 8px;
    width: min(470px, calc(100vw - 18px));
    min-height: 50px;
    padding: 7px 8px 7px 11px;
  }
  .hypercube-teaching-pilot-identity { display: none; }
  .hypercube-teaching-pilot-controls { gap: 4px; }
  .hypercube-teaching-pilot button { min-width: 66px; min-height: 34px; padding-inline: 8px; }
  .hypercube-teaching-pilot:has(.sfi-teaching-storage) { grid-template-columns: auto minmax(120px, 1fr) auto; }
  .sfi-teaching-storage { align-items: stretch; flex-direction: column; gap: 5px; }
  .sfi-teaching-storage-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hypercube-teaching-pilot .sfi-teaching-storage button { min-width: 0; }
}

@media (max-width: 370px) {
  .hypercube-rotation-layout { grid-template-columns: 1fr; }
  .hypercube-rotation-tools { grid-template-columns: auto 1fr; align-items: center; padding: 7px 0 0; border-top: 1px solid rgba(255,255,255,.09); border-left: 0; }
  .hypercube-rotation-tools small { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .hypercube-teaching-presence i { transition: none; }
}
.hypercube-material-head { margin-top: 10px; }
.hypercube-material-head small { color: rgba(190, 229, 244, .48); font-size: 8px; font-weight: 500; }
.hypercube-materials { margin-top: 5px; }