#apollonian-app {
  --apollonian-cyan: #8fe8ff;
  --apollonian-violet: #b6a7ff;
  --apollonian-rose: #f4a8ca;
  --apollonian-amber: #f1cf85;
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), rgba(55, 141, 181, 0.105), transparent 34%),
    radial-gradient(circle at 78% 86%, rgba(117, 75, 143, 0.09), transparent 34%),
    #020306;
}

#apollonian-app[data-apollonian-dimension="3d"] {
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), rgba(116, 214, 246, 0.38), transparent 44%),
    radial-gradient(circle at 72% 78%, rgba(205, 145, 228, 0.24), transparent 42%),
    #102b3b;
}

#apollonian-app[data-apollonian-palette="black"] {
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), rgba(255,255,255,.98), transparent 48%),
    linear-gradient(145deg, #f8fbfd, #dce5ea);
}

#apollonian-app[data-apollonian-palette="black"][data-apollonian-dimension="3d"] {
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), #fff 0, #f4f7f9 48%, transparent 72%),
    #d8e1e6;
}

.apollonian-stage { touch-action: none; }

#apollonian-gpu-2d,
#apollonian-canvas-2d,
#apollonian-canvas-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: 0;
  touch-action: none;
}

#apollonian-gpu-2d { z-index: 1; pointer-events: none; }
#apollonian-canvas-2d { z-index: 2; cursor: grab; }
#apollonian-canvas-3d { z-index: 1; }
#apollonian-canvas-2d:active { cursor: grabbing; }
#apollonian-gpu-2d[hidden],
#apollonian-canvas-2d[hidden],
#apollonian-canvas-3d[hidden] { display: none; }

#apollonian-panel {
  --sfi-panel-width: 390px;
  --sfi-control-label-width: 92px;
  --sfi-control-value-width: 54px;
}

.apollonian-dimension { margin-top: 0; }
.apollonian-workspaces { margin-bottom: 8px; }
#apollonian-panel .apollonian-workspaces button { padding-inline: 4px; font-size: 8px; }
.apollonian-control-section { min-height: 93px; }
.apollonian-control-section[hidden], #apollonian-3d-controls[hidden] { display: none; }
.apollonian-primary-slider { margin-top: 12px; }
.apollonian-primary-slider > span { color: rgba(235, 249, 255, 0.94); font-weight: 600; }
.apollonian-primary-slider input { filter: drop-shadow(0 0 7px rgba(143, 232, 255, 0.26)); }
#apollonian-iteration-note { margin: -4px 2px 7px; text-align: left; }
.apollonian-inverse-note { margin: 8px 2px 0; color: var(--sfi-blue-muted); font-family: Georgia, "Times New Roman", serif; font-size: 12px; text-align: center; }
.apollonian-section-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 7px 0 2px; }

.apollonian-curvature-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 6px 9px;
  align-items: center;
  margin: 10px 0 7px;
}
.apollonian-curvature-axis { display: flex; grid-column: 1 / -1; justify-content: space-between; color: rgba(220,241,250,.68); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.apollonian-curvature-axis b { font-weight: 500; }
.apollonian-curvature-control input { width: 100%; min-width: 0; }
.apollonian-curvature-control output { color: rgba(242,251,255,.9); font-family: Georgia, "Times New Roman", serif; font-size: 11px; text-align: right; }

#apollonian-practice-controls { min-height: 195px; }
#apollonian-practice-feedback { position: static; min-height: 30px; margin: 8px 2px 0; text-align: left; }

#apollonian-result { margin: 7px 0 10px; }
#apollonian-result .sfi-math-readout { font-size: 22px; letter-spacing: -.025em; }
#apollonian-result .sfi-result-detail { color: rgba(191,232,251,.62); }

.apollonian-style-section { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.apollonian-mini-label { display: block; color: rgba(255,255,255,.43); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
#apollonian-panel .sfi-control-grid button { min-height: 31px; padding: 5px 3px; font-size: 8px; }
.apollonian-render-grid, .apollonian-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.apollonian-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#apollonian-visualization-controls button[aria-checked="true"] {
  border-color: rgba(143,232,255,.88);
  background: linear-gradient(180deg, rgba(87,190,232,.28), rgba(41,112,151,.2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 0 12px rgba(58,185,233,.16);
  color: #f7fdff;
}
#apollonian-visualization-controls button[aria-checked="false"] { color: rgba(219,237,245,.54); }
#apollonian-app[data-apollonian-dimension="2d"] .apollonian-render-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#apollonian-app[data-apollonian-dimension="2d"] [data-apollonian-surface="glass"],
#apollonian-app[data-apollonian-dimension="2d"] [data-apollonian-surface="glass-color"],
#apollonian-app[data-apollonian-dimension="2d"] [data-apollonian-surface="metal"],
#apollonian-app[data-apollonian-dimension="2d"] [data-apollonian-surface="metal-color"],
#apollonian-app[data-apollonian-dimension="2d"] [data-apollonian-surface="gold"] { display: none; }
.apollonian-material-note { margin: 5px 1px 0; text-align: left; }
.apollonian-color-note { margin: 5px 1px 0; text-align: left; }
.apollonian-overlay-label { margin-top: 9px; }
.apollonian-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 5px; }
.apollonian-palettes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#apollonian-panel .apollonian-palettes button { display: flex; min-width: 0; min-height: 31px; flex: 1 0 calc((100% - 8px)/3); align-items: center; justify-content: center; gap: 4px; padding: 4px 5px; font-size: 7px; text-align: center; }
.apollonian-palettes i { width: 20px; height: 8px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; }
.apollonian-palettes [data-apollonian-palette="hsv"] i { background: linear-gradient(90deg,#ff003c,#ff7600,#ffe600,#19f000,#00d9ff,#0066ff,#6900ff,#ff0090); }
.apollonian-palettes [data-apollonian-palette="electric"] i { background: linear-gradient(90deg,#00f5ff,#0075ff,#5c00ff,#d000ff,#ff007a,#ffc400); }
.apollonian-palettes [data-apollonian-palette="tropical"] i { background: linear-gradient(90deg,#00ff85,#00e5ff,#0070ff,#7c00ff,#ff00aa,#fff000); }
.apollonian-palettes [data-apollonian-palette="fire"] i { background: linear-gradient(90deg,#fff000,#ffad00,#ff5a00,#ff003c,#e0008a,#7a00ff); }
.apollonian-palettes [data-apollonian-palette="black"] i { border-color: rgba(0,0,0,.38); background: #030303; box-shadow: 0 0 0 1px rgba(255,255,255,.82); }
.apollonian-palettes [data-apollonian-palette="white"] i { border-color: rgba(255,255,255,.68); background: #fff; }
.apollonian-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.apollonian-section-head > span:last-child { color: var(--sfi-blue-muted); font-size: 8px; }
.apollonian-calculation-actions { margin-top: 7px; }
.apollonian-calculation-note { min-height: 30px; margin: 6px 1px 0; text-align: left; }
.apollonian-other-solution { width: 100%; min-height: 30px !important; margin-top: 6px !important; font-size: 8px !important; }
.apollonian-calculation .sfi-control-row { margin-bottom: 0; }
#apollonian-result { margin-top: 10px; }

.apollonian-equation-card {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 1px solid rgba(143, 232, 255, 0.34);
  background: linear-gradient(90deg, rgba(143, 232, 255, 0.055), transparent);
}
.apollonian-equation-card > span { color: rgba(255,255,255,.42); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.apollonian-equation-card > strong { color: rgba(240,250,255,.92); font-family: Georgia, "Times New Roman", serif; font-size: 11px; font-weight: 400; line-height: 1.45; }
.apollonian-equation-card > small { color: var(--sfi-blue-muted); font-size: 8px; line-height: 1.4; }

.apollonian-hover {
  position: absolute;
  z-index: 12;
  max-width: 230px;
  padding: 8px 10px;
  border: 1px solid rgba(143, 232, 255, .25);
  border-radius: 11px;
  background: rgba(3, 10, 17, .88);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  color: rgba(239,249,253,.86);
  font-size: 9px;
  line-height: 1.45;
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.apollonian-scale {
  position: absolute;
  z-index: 6;
  top: var(--sfi-stage-center-y);
  right: calc(var(--sfi-stage-right-inset) + 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(191,232,251,.1);
  border-radius: 9px;
  background: rgba(3,10,17,.34);
  color: rgba(255,255,255,.38);
  font-size: 8px;
  letter-spacing: .08em;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.apollonian-scale i { display: block; width: 7px; height: 54px; border-top: 1px solid rgba(191,232,251,.48); border-right: 1px solid rgba(191,232,251,.48); border-bottom: 1px solid rgba(191,232,251,.48); }

.apollonian-preset-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.apollonian-preset-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 7px; }
#apollonian-panel .apollonian-preset-gallery button { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid rgba(191,232,251,.16); border-radius: 50%; background: rgba(0,0,0,.18); isolation: isolate; }
.apollonian-preset-gallery button[aria-checked="true"] { border-color: rgba(130,227,255,.86); box-shadow: 0 0 0 1px rgba(130,227,255,.2),0 0 15px rgba(42,169,220,.18); }
.apollonian-preset-gallery canvas { display:block; width:100%; height:100%; border-radius:50%; clip-path:circle(49.5% at 50% 50%); image-rendering:auto; }
.apollonian-preset-gallery span { position:absolute; right:5px; bottom:5px; left:5px; overflow:hidden; padding:2px 3px; border-radius:999px; background:rgba(1,4,8,.78); color:rgba(241,251,255,.92); font:7px/1.1 Inter,system-ui,sans-serif; text-align:center; text-overflow:ellipsis; white-space:nowrap; }

@media (min-width: 1120px) {
  #apollonian-panel { width: min(410px, calc(100% - 32px)); }
  #apollonian-panel .sfi-world-panel-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 641px) and (max-width: 1119px) {
  #apollonian-panel { --sfi-world-panel-intermediate-height: 48dvh; }
  .apollonian-style-section { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 640px) {
  #apollonian-panel {
    --sfi-world-panel-compact-height: 52dvh;
    --sfi-world-panel-condensed-height: 26dvh;
    --sfi-control-label-width: 78px;
  }
  #apollonian-panel .sfi-educational-note,
  #apollonian-app .sfi-world-mode-note,
  .apollonian-calculation-note { display: none; }
  #apollonian-calculation-controls .apollonian-section-head > span:last-child { display: none; }
  #apollonian-result { margin: 5px 0 7px; padding-block: 7px; }
  #apollonian-result .sfi-math-readout { font-size: 18px; }
  #apollonian-result .sfi-result-detail,
  #apollonian-iteration-note,
  .apollonian-color-note,
  .apollonian-equation-card > small {
    display: block;
    font-size: 8px;
    line-height: 1.35;
  }
  #apollonian-iteration-note,
  .apollonian-color-note { margin: 3px 1px 5px; }
  .apollonian-control-section { min-height: 0; }
  #apollonian-practice-controls { min-height: 0; }
  .apollonian-primary-slider { margin-top: 7px; }
  .apollonian-style-section { margin-top: 7px; padding-top: 7px; }
  .apollonian-scale { right: calc(var(--sfi-stage-right-inset) + 8px); gap: 6px; padding: 5px 6px; }
  .apollonian-scale i { width: 7px; height: 38px; }
  #apollonian-app .sfi-world-contextual-guidance { max-width: min(255px, calc(var(--sfi-stage-width) - 24px)); }
  #apollonian-app .sfi-world-contextual-guidance > strong { margin-top: 3px; font-size: 19px; line-height: 1.15; }
  #apollonian-app .sfi-world-contextual-guidance > small { margin-top: 4px; font-size: 9px; line-height: 1.35; }
  .apollonian-equation-card > strong { font-size:10px; }
  .apollonian-preset-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }

  #apollonian-app.is-world-panel-compact-height #apollonian-result .sfi-result-label,
  #apollonian-app.is-world-panel-compact-height .apollonian-inverse-note { display: none; }
  #apollonian-app.is-world-panel-compact-height .apollonian-workspaces { margin-bottom: 4px; }
  #apollonian-app.is-world-panel-compact-height #apollonian-result { padding-block: 4px; }
  #apollonian-app.is-world-panel-compact-height #apollonian-result .sfi-math-readout { font-size: 15px; }
  #apollonian-app.is-world-panel-compact-height #apollonian-result .sfi-result-detail,
  #apollonian-app.is-world-panel-compact-height #apollonian-iteration-note,
  #apollonian-app.is-world-panel-compact-height .apollonian-color-note,
  #apollonian-app.is-world-panel-compact-height .apollonian-equation-card > small { font-size: 7.5px; line-height: 1.28; }
  #apollonian-app.is-world-panel-compact-height .apollonian-equation-card { gap: 2px; margin-top: 4px; padding: 5px 7px; }
  #apollonian-app.is-world-panel-compact-height .sfi-world-contextual-guidance > strong { font-size: 16px; }
  #apollonian-app.is-world-panel-compact-height .apollonian-scale { font-size: 7px; }
  #apollonian-app.is-world-panel-compact-height .apollonian-scale i { width: 7px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .apollonian-hover { transition: none; }
}