#polar-graph-app {
  background:
    radial-gradient(circle at var(--sfi-visual-center-x) var(--sfi-visual-center-y), rgba(74, 167, 207, 0.11), transparent 34%),
    radial-gradient(circle at 78% 76%, rgba(210, 175, 103, 0.04), transparent 36%),
    #020306;
}

.polar-stage { isolation: isolate; }

#polar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

#polar-canvas:active { cursor: grabbing; }

#polar-graph-panel {
  --sfi-control-label-width: 104px;
  --sfi-control-value-width: 42px;
}

#polar-equation-card {
  margin-top: 0;
  border-color: rgba(191, 232, 251, 0.2);
  background: linear-gradient(120deg, rgba(8, 20, 30, 0.72), rgba(0, 0, 0, 0.28));
}

#polar-equation-card .sfi-math-readout {
  color: rgba(236, 249, 255, 0.98);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.polar-evaluation {
  color: var(--sfi-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#polar-equation-card .sfi-result-detail {
  margin-top: 2px;
  line-height: 1.4;
  white-space: normal;
}

.polar-presets { gap: 5px; }

#polar-graph-panel .polar-presets button {
  min-height: 32px;
  padding: 5px 4px;
  font-size: 9px;
}

.polar-function-tier-label { display: block; margin: 8px 2px -3px; color: rgba(255,255,255,.36); font-size: 7px; letter-spacing: .13em; text-transform: uppercase; }
.polar-variant { margin-top: 7px; }
.polar-additional-functions { margin-top: 6px; }
.polar-additional-functions .polar-function-tier-label { margin: 0 2px 5px; }
.polar-additional-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#polar-graph-panel .polar-additional-grid button { min-height: 27px; padding: 3px 2px; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: rgba(255,255,255,.58); font-size: 7.5px; letter-spacing: .015em; }
#polar-graph-panel .polar-additional-grid button[aria-pressed="true"] { border-color: rgba(191,232,251,.56); background: rgba(191,232,251,.11); color: rgba(239,250,255,.92); }
.polar-display { margin-block: 7px; }
.polar-view-controls { margin-top: 7px; }
.polar-morph-controls { margin-top: 8px; }
.polar-morph-controls .sfi-control-row { margin-block: 5px; }
.polar-morph-labels { display: flex; justify-content: space-between; margin: -3px 48px 5px 104px; color: rgba(255,255,255,.33); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
#polar-graph-panel #polar-morph-play { width: 100%; min-height: 32px; padding-block: 5px; font-size: 10px; }
.polar-parameters { margin-top: 8px; }
.polar-parameters .sfi-control-row,
.polar-trace .sfi-control-row { margin-block: 7px; }
.polar-parameters i,
.polar-trace i { font-family: Georgia, "Times New Roman", serif; font-size: 1.12em; }
.polar-transport { margin-top: 8px; }
.polar-transport button span:first-child { display: inline-block; width: 13px; }
.polar-domain-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.66); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.polar-domain-head output { color: var(--sfi-blue-muted); font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: 0; text-transform: none; }
.polar-domain-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
#polar-graph-panel .polar-domain-buttons button { min-height: 30px; padding: 4px; font-size: 9px; }
.polar-domain .sfi-mode-note { margin: 6px 2px 0; text-align: left; }
.polar-tau-note { margin: 6px 2px 0; color: rgba(255,255,255,.4); font-family: Georgia, "Times New Roman", serif; font-size: 9px; }

#polar-graph-panel input:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

#polar-graph-panel .sfi-control-row.is-disabled { color: rgba(255, 255, 255, 0.28); }

.polar-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%);
}

.polar-teaching-pilot-identity { display: grid; gap: 1px; white-space: nowrap; }
.polar-teaching-pilot-identity span { color: rgba(191, 232, 251, 0.52); font-size: 7px; letter-spacing: 0.14em; }
.polar-teaching-pilot-identity strong { color: rgba(245, 251, 255, 0.92); font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 400; }
.polar-teaching-presence { display: flex; align-items: center; gap: 2px; width: 24px; height: 28px; }
.polar-teaching-presence i { width: 2px; height: 20px; border-radius: 999px; background: rgba(129, 220, 247, 0.82); transform: scaleY(var(--polar-teaching-level, 0.24)); transition: transform 90ms linear, background-color 180ms ease; }
.polar-teaching-pilot[data-state="recording"] .polar-teaching-presence i { background: rgba(255, 150, 125, 0.9); }
.polar-teaching-pilot-copy { display: grid; gap: 2px; min-width: 0; }
.polar-teaching-pilot-status { overflow: hidden; color: rgba(238, 247, 251, 0.77); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.polar-teaching-pilot-time { color: rgba(191, 232, 251, 0.54); font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.polar-teaching-pilot-controls { display: flex; gap: 6px; }
.polar-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; }
.polar-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); }
.polar-teaching-pilot button:hover,
.polar-teaching-pilot button:focus-visible { border-color: rgba(191, 232, 251, 0.66); background: rgba(191, 232, 251, 0.16); outline: none; }
.polar-teaching-pilot button:disabled { opacity: 0.42; cursor: wait; }
.polar-teaching-pilot button[hidden] { display: none; }
.polar-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; }
.polar-teaching-pilot .sfi-teaching-storage button { min-width: 78px; min-height: 28px; padding: 4px 7px; font-size: 8px; }

.polar-function-window {
  z-index: 4;
  width: clamp(270px, 24vw, 350px);
  padding: 9px;
}

.polar-function-window[hidden] { display: none; }

.polar-function-window.is-expanded {
  z-index: 32;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(68vw, 72vh, 720px);
  padding: 12px;
  border-radius: 22px;
  translate: -50% -50%;
  transform: none;
}

#polar-function-backdrop { z-index: 31; }

.polar-function-window .sfi-floating-visual-header { padding-right: 36px; }
.polar-function-actions { position: absolute; z-index: 2; top: 7px; right: 7px; display: flex; }
.polar-function-window.is-expanded .polar-function-actions { top: 10px; right: 10px; }
.polar-function-window.is-expanded .sfi-floating-visual-toggle { width: 32px; min-height: 32px; }

#polar-function-canvas {
  display: block;
  width: 100%;
  height: 164px;
  border-radius: 10px;
  background: rgba(0, 3, 7, 0.42);
}

.polar-function-window.is-expanded #polar-function-canvas { height: min(48vh, 420px); background: #00050a; }

.polar-function-key {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 3px 0;
  color: rgba(191, 232, 251, 0.45);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.polar-gallery {
  position: absolute;
  z-index: 30;
  inset: clamp(14px, 3vw, 38px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid rgba(210, 175, 103, 0.42);
  border-radius: 20px;
  background: rgba(5, 8, 13, 0.94);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(24px);
}

.polar-gallery[hidden] { display: none; }

.polar-gallery > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.polar-gallery > header span {
  color: rgba(191, 232, 251, 0.72);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.polar-gallery h2 {
  margin: 4px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 3vw, 38px);
  font-weight: 400;
}

.polar-gallery header p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
}

.polar-gallery button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

.polar-gallery > header button { border-radius: var(--sfi-radius-control); }

.polar-gallery button:hover,
.polar-gallery button:focus-visible {
  border-color: rgba(191, 232, 251, 0.52);
  background: rgba(191, 232, 251, 0.08);
}

.polar-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}

.polar-gallery-group-label { grid-column: 1 / -1; padding: 8px 4px 1px; color: rgba(191,232,251,.54); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.polar-gallery-card.is-secondary { min-height: 142px !important; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); }

.polar-gallery-card {
  display: grid;
  grid-template-rows: minmax(92px, 1fr) auto;
  min-width: 0;
  min-height: 154px !important;
  overflow: hidden;
  padding: 7px !important;
  text-align: left;
}

.polar-gallery-card canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 92px;
  border-radius: 9px;
  background: radial-gradient(circle, rgba(55, 132, 165, 0.08), rgba(0, 0, 0, 0.18) 68%);
}

.polar-gallery-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 4px 2px;
}

.polar-gallery-card strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.polar-gallery-card small {
  overflow: hidden;
  color: rgba(191, 232, 251, 0.56);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1080px) and (min-width: 821px) {
  .polar-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  #polar-graph-panel {
    --sfi-control-label-width: 96px;
    --sfi-control-value-width: 38px;
  }

  .polar-morph-labels { margin-left: 96px; margin-right: 38px; }

  #polar-equation-card .sfi-math-readout { font-size: 14px; }
  .polar-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .polar-function-window {
    width: min(49vw, 210px);
    padding: 6px;
    border-radius: 13px;
  }

  .polar-function-window .sfi-floating-visual-header { padding-bottom: 4px; }
  .polar-function-window .sfi-floating-visual-title { font-size: 10px; }
  .polar-function-window .sfi-floating-visual-kicker { display: none; }
  .polar-function-window .sfi-floating-visual-toggle { width: 24px; min-height: 24px; font-size: 11px; }
  #polar-function-canvas { height: 102px; }
  .polar-function-key { display: none; }

  .polar-function-window.is-expanded {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(88vw, 54vh, 560px);
    padding: 9px;
    border-radius: 18px;
  }

  .polar-function-window.is-expanded #polar-function-canvas { height: min(43vh, 330px); }

  .polar-gallery { inset: 8px; padding: 14px; border-radius: 17px; }
  .polar-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .polar-gallery-card { min-height: 142px !important; }
  .polar-gallery header p { display: none; }

  .polar-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;
  }
  .polar-teaching-pilot-identity { display: none; }
  .polar-teaching-pilot-controls { gap: 4px; }
  .polar-teaching-pilot button { min-width: 66px; min-height: 34px; padding-inline: 8px; }
  .polar-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)); }
  .polar-teaching-pilot .sfi-teaching-storage button { min-width: 0; }
}

@media (max-width: 430px) {
  #polar-equation-card .sfi-result-detail { font-size: 9px; }
  .polar-gallery-card { padding: 6px !important; }
  .polar-gallery-card strong { font-size: 11px; }
  .polar-gallery-card small { font-size: 9px; }
  .polar-teaching-pilot-status { font-size: 8px; }
  .polar-teaching-presence { width: 20px; }
  .polar-teaching-pilot button.is-secondary { min-width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .polar-teaching-presence i { transition: none; }
}