:root { color-scheme: dark; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #010205; }
.fractal-stage { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 45% 42%, #06131f 0, #02060b 48%, #010205 100%); }
#fractal-canvas, #fractal-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#fractal-canvas { cursor: grab; touch-action: none; outline: none; }
#fractal-canvas:active { cursor: grabbing; }
#fractal-world[data-pointer-intent="c"] #fractal-canvas { cursor: move; }
#fractal-world[data-pointer-intent="z0"] #fractal-canvas { cursor: move; }
#fractal-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(155,227,255,.74); }
#fractal-overlay { z-index: 2; pointer-events: none; }
.fractal-hover { position: fixed; z-index: 9; max-width: 270px; pointer-events: none; padding: 8px 10px; border: 1px solid rgba(191,232,251,.26); border-radius: 9px; background: rgba(2,7,12,.88); box-shadow: 0 12px 32px rgba(0,0,0,.3); color: rgba(235,249,255,.88); font: 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-line; backdrop-filter: blur(12px); }
.fractal-section-label, .fractal-section-head { display: flex; min-height: 14px; align-items: center; justify-content: space-between; gap: 8px; margin: 11px 0 6px; color: rgba(215,241,252,.62); font: 600 8px/1.2 Inter,system-ui,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.fractal-section-head { margin-top: 0; }
.fractal-section-head output, .fractal-section-head small { min-width: 0; color: rgba(226,247,255,.82); font: 9px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: 0; text-align: right; text-transform: none; }
.fractal-equation-card { margin-top: 1px; }
.fractal-equation-card .sfi-math-readout { font-size: 18px; }
.fractal-equation-card .katex { font-size: 1.08em; }
.fractal-primary-selector { margin-bottom: 5px; }
.fractal-dimension { margin-top: 5px; }
.fractal-complex-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.fractal-complex-inputs label { display: grid; gap: 4px; color: rgba(220,243,252,.55); font: 8px/1.2 Inter,system-ui,sans-serif; }
.fractal-complex-inputs input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(191,232,251,.2); border-radius: 7px; padding: 7px 8px; background: rgba(2,9,15,.7); color: #e8f8ff; font: 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.fractal-complex-inputs input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.fractal-complex-inputs input[type="number"]::-webkit-inner-spin-button,
.fractal-complex-inputs input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.fractal-connected { display: flex; min-height: 16px; align-items: center; gap: 7px; margin-top: 7px; overflow: hidden; color: rgba(218,246,255,.76); font: 10px/1.3 Inter,system-ui,sans-serif; white-space: nowrap; }
.fractal-connected i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #79efcd; box-shadow: 0 0 10px rgba(121,239,205,.75); }
.fractal-connected.is-disconnected i { background: #ff9c71; box-shadow: 0 0 10px rgba(255,156,113,.72); }
.fractal-connected.is-disconnected span { color: rgba(255,207,186,.9); }
.fractal-power-control { margin-bottom: 1px !important; }
.fractal-power-ticks { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin: 0 48px 0 42px; color: rgba(191,232,251,.4); font: 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: center; }
.fractal-orbit-actions, .fractal-compatible-toggles { grid-template-columns: repeat(2,minmax(0,1fr)); }
.fractal-view-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.fractal-iteration-presets { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
#fractal-panel .fractal-iteration-presets button { min-width: 0; min-height: 27px; padding: 3px 4px; font-size: 7px; }
.fractal-definition-equations { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: rgba(219,243,252,.68); font-family: Georgia,"Times New Roman",serif; font-size: 12px; }
.fractal-method-grid { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 4px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--sfi-radius-control); background: rgba(0,0,0,.25); box-shadow: inset 0 1px 7px rgba(0,0,0,.28); }
.fractal-method-grid button { min-height: 31px; padding-inline: 5px; font-size: 8px; white-space: nowrap; }
.fractal-compatible-toggles { margin-top: 6px; }
.fractal-compatible-toggles button { min-height: 31px; padding: 5px 6px; font-size: 8px; white-space: nowrap; }
.fractal-compatible-toggles button:disabled { opacity: .34; }
.fractal-math-note { min-height: 27px; margin: 6px 2px 0; color: rgba(191,232,251,.5); font: 8px/1.35 Georgia,"Times New Roman",serif; }
.fractal-palettes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fractal-palettes button { display: flex; min-width: 0; min-height: 32px; flex: 0 0 calc((100% - 8px)/3); align-items: center; gap: 3px; overflow: hidden; padding: 4px; font-size: 6px; letter-spacing: 0; line-height: 1; text-align: left; text-transform: none; white-space: nowrap; }
.fractal-palettes i { width: 14px; height: 6px; flex: 0 0 auto; border-radius: 4px; background: linear-gradient(90deg,#4825d4,#36dcff,#7ff0bd,#ff83d5,#ffdc75); }
.fractal-palettes [data-palette="1"] i { background: linear-gradient(90deg,#041226,#0f7bd1,#baf5ff,#2eacef,#041226); }
.fractal-palettes [data-palette="2"] i { background: linear-gradient(90deg,#070707,#fafafa,#2e2e2e,#c7c7c7,#070707); }
.fractal-palettes [data-palette="3"] i { background: linear-gradient(90deg,#120200,#eb2904,#ffb81f,#fff2a6,#120200); }
.fractal-palettes [data-palette="4"] i { background: linear-gradient(90deg,#090b0d,#767f84,#f5f8fa,#3b4a52,#090b0d); }
.fractal-palettes [data-palette="5"] i { background: linear-gradient(90deg,#01050d,#072c69,#11a8ef,#bffaff,#01050d); }
.fractal-z0-line { display: flex; min-height: 29px; justify-content: space-between; gap: 8px; padding: 6px 8px; border-left: 2px solid rgba(121,220,255,.48); background: rgba(3,11,18,.42); color: rgba(221,245,255,.72); font: 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.fractal-orbit-verdict { display: grid; min-height: 70px; grid-template-columns: auto minmax(0,1fr); align-items: baseline; align-content: start; gap: 3px 8px; margin-top: 8px; padding: 8px 9px; border-left: 2px solid rgba(121,220,255,.48); background: rgba(3,11,18,.44); }
.fractal-orbit-verdict span { color: #8fe4ff; font: 600 12px Georgia,serif; }
.fractal-orbit-verdict strong { overflow: hidden; color: #ecfaff; font: 9px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.fractal-orbit-verdict small, .fractal-orbit-verdict em { grid-column: 1/-1; color: rgba(210,240,252,.58); font: normal 8px/1.4 Inter,system-ui,sans-serif; }
.fractal-orbit-verdict.is-escape { border-left-color: #ffac73; }
.fractal-orbit-verdict.is-periodic { border-left-color: #80efca; }
.fractal-orbit-sequence { display: grid; height: 132px; overflow-y: auto; margin-top: 7px; padding-right: 2px; scrollbar-gutter: stable; scrollbar-width: thin; }
#fractal-panel .fractal-orbit-sequence button { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 6px; min-height: 26px; align-items: center; padding: 4px 6px; border: 0; border-bottom: 1px solid rgba(191,232,251,.08); border-radius: 0; background: transparent; box-shadow: none; color: rgba(218,242,252,.6); font: 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: left; }
#fractal-panel .fractal-orbit-sequence button:hover { border-color: rgba(191,232,251,.16); background: rgba(191,232,251,.06); }
#fractal-panel .fractal-orbit-sequence button[aria-current="step"] { background: rgba(72,171,211,.16); color: #f0fbff; }
.fractal-orbit-sequence button.is-cycle { color: #9df4d6; }
.fractal-orbit-sequence button.is-escaped { color: #ffc19c; }
.fractal-probe-card .sfi-math-readout { font-size: 11px; }
.fractal-anatomy-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; }
#fractal-panel .fractal-anatomy-grid button { min-width: 0; min-height: 30px; padding: 4px 2px; font-size: 7.5px; }
#fractal-panel section[aria-label="Mandelbrot anatomy"] .fractal-section-head { min-height: 26px; margin-bottom: 7px; }
#fractal-anatomy-toggle { min-height: 24px; flex: 0 0 auto; padding: 3px 7px; font-size: 7px; white-space: nowrap; }
#fractal-anatomy-note { min-height: 30px; margin: 9px 2px 0; line-height: 1.45; }
.fractal-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.fractal-gallery button { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid rgba(191,232,251,.17); border-radius: 50%; background: transparent; isolation: isolate; }
.fractal-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); }
.fractal-gallery canvas { display: block; width: 100%; height: 100%; border-radius: 50%; clip-path: circle(49.5% at 50% 50%); }
.fractal-gallery span { position: absolute; right: 4px; bottom: 4px; left: 4px; overflow: hidden; padding: 2px 3px; border-radius: 999px; background: rgba(1,4,8,.75); color: rgba(241,251,255,.92); font: 7px/1.1 Inter,system-ui,sans-serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.fractal-journeys { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
.fractal-journeys button { min-width: 0; padding: 7px 6px; font-size: 8px; }
.fractal-journey-readout { display: grid; gap: 3px; margin-top: 7px; padding: 7px 8px; border: 1px solid rgba(191,232,251,.1); border-radius: var(--sfi-radius-control); background: rgba(3,11,18,.42); }
.fractal-journey-readout strong { color: rgba(237,249,255,.86); font: 11px Georgia,serif; }
.fractal-journey-readout span { color: rgba(142,222,252,.74); font: 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.fractal-journey-readout small { color: rgba(210,240,252,.5); font: 8px/1.35 Inter,system-ui,sans-serif; }
.fractal-view-actions { margin-top: 6px; }
.fractal-live-definition .sfi-math-readout { font-size: 13px; }
.fractal-live-definition .katex { font-size: .95em; }
.fractal-field-selector button { min-width: 0; font-size: 8px !important; }
.fractal-surface-readout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 8px; }
.fractal-surface-readout div { display: grid; min-width: 0; gap: 2px; padding: 6px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(0,0,0,.18); }
.fractal-surface-readout span { color: rgba(255,255,255,.42); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.fractal-surface-readout strong { overflow: hidden; color: rgba(225,246,255,.9); font: 500 8px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.fractal-plane-card { display: grid; aspect-ratio: 1; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }
.fractal-plane-card .sfi-floating-visual-header { padding: 0 1px 7px; }
.fractal-card-stage { position: relative; width: 100%; min-height: 0; overflow: hidden; border-radius: 10px; background: #010307; }
.fractal-card-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#fractal-card-canvas { cursor: crosshair; }
#fractal-card-canvas[data-mode="mandelbrot"] { cursor: move; }
#fractal-card-overlay { pointer-events: none; }
.fractal-card-values { overflow: hidden; margin-top: 6px; color: rgba(218,243,252,.67); font: 8px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
.fractal-plane-card .sfi-floating-visual-toggle { position: static; min-height: 24px; padding: 3px 6px; font-size: 6.5px; }
.fractal-plane-card .sfi-floating-visual-toggle[aria-pressed="true"] { border-color: rgba(121,220,255,.5); color: #e5f9ff; }
.katex { color: inherit; }

#fractal-panel { overflow-x: hidden; scrollbar-gutter: stable; }
#fractal-panel .sfi-panel-section { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.09); }
#fractal-panel .sfi-control-row { margin-block: 7px; }
#fractal-panel .sfi-control-row > output { width: var(--sfi-control-value-width,48px); font-variant-numeric: tabular-nums; }
#fractal-panel .sfi-button-grid { gap: 4px; margin-top: 6px; }
#fractal-panel output, #fractal-panel input { font-variant-numeric: tabular-nums; }
#fractal-panel .fractal-orbit-actions button { min-width: 0; min-height: 31px; padding: 5px 4px; font-size: 8px; }
#fractal-iterations-output { min-width: 38px; }
#fractal-radius-output { min-width: 38px; }
#fractal-orbit-step-output { min-width: 54px; }
#fractal-height-output { min-width: 42px; }

@media (min-width: 641px) and (max-width: 1119px) {
  .fractal-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .fractal-orbit-sequence { max-height: 108px; }
  .fractal-equation-card .sfi-math-readout { font-size: 16px; }
}

@media (max-width: 640px) {
  .fractal-hover { display: none; }
  .fractal-equation-card .sfi-math-readout { font-size: 15px; }
  .fractal-orbit-sequence { max-height: 92px; }
  .fractal-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .fractal-card-values { font-size: 7px; }
  .fractal-plane-card .sfi-floating-visual-toggle { display: none; }
}