:root { color-scheme: dark; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #010205; }

#fractions-world {
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), rgba(43, 145, 190, .12), transparent 38%),
    radial-gradient(circle at 78% 18%, rgba(199, 163, 255, .055), transparent 34%),
    linear-gradient(rgba(191, 232, 251, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 232, 251, .018) 1px, transparent 1px),
    #020306;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

.fractions-stage { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; isolation: isolate; }
#fractions-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; outline: none; touch-action: none; }
#fractions-canvas:active { cursor: grabbing; }
#fractions-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(155, 227, 255, .74); }

#fractions-panel { --sfi-control-label-width: 104px; --sfi-control-value-width: 42px; }
.fractions-section-label { display: block; margin: 10px 2px 5px; color: rgba(191, 232, 251, .48); font-size: 7px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }

.fractions-primary-readout { margin-top: 1px; background: linear-gradient(124deg, rgba(9, 28, 40, .78), rgba(0, 0, 0, .24)); }
.fractions-form-chain { display: flex; min-height: 44px; min-width: 0; align-items: center; justify-content: center; gap: 8px; overflow: hidden; color: rgba(241, 250, 255, .94); font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 400 !important; line-height: 1.1; white-space: nowrap; }
.fractions-form-chain > span:not(.fractions-stacked-fraction) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.fractions-stacked-fraction { display: inline-grid; min-width: 25px; flex: 0 0 auto; grid-template-rows: auto auto; color: inherit; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1; text-align: center; vertical-align: middle; }
.fractions-stacked-fraction > span:first-child { min-width: 22px; padding: 0 4px 3px; border-bottom: 1px solid currentColor; }
.fractions-stacked-fraction > span:last-child { padding-top: 3px; }
.fractions-density-symbol { color: rgba(255, 224, 177, .96); font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; }

.fractions-activities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#fractions-panel .fractions-activities button { min-height: 32px; padding: 4px 5px; font-size: 8px; }
#fractions-panel .fractions-activities button[aria-selected="true"] { border-color: rgba(121, 220, 255, .58); background: rgba(121, 220, 255, .11); color: #edfaff; }

.fractions-semantic-notation { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 7px; margin: 10px 0 8px; }
.fractions-conventional-notation { display: grid; min-height: 68px; place-items: center; padding: 7px; border: 1px solid rgba(191, 232, 251, .15); border-radius: 14px; background: rgba(0, 0, 0, .28); }
.fractions-conventional-notation > span:first-child { color: rgba(191, 232, 251, .45); font-size: 6px; letter-spacing: .12em; text-transform: uppercase; }
.fractions-conventional-notation .fractions-stacked-fraction { color: rgba(243, 251, 255, .94); font-size: 17px; }
.fractions-role-notation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.fractions-role-notation > div { display: grid; min-width: 0; place-items: center; align-content: center; gap: 3px; padding: 6px; border: 1px solid rgba(191, 232, 251, .17); border-radius: 13px; background: linear-gradient(145deg, rgba(26, 66, 86, .2), rgba(0, 0, 0, .2)); text-align: center; }
.fractions-role-notation strong { color: rgba(240, 251, 255, .94); font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; }
.fractions-role-notation span { color: rgba(191, 232, 251, .52); font-size: 6px; letter-spacing: .065em; line-height: 1.25; text-transform: uppercase; }
.fractions-semantic-note { margin-bottom: 7px; }
.fractions-readout-control { --sfi-control-label-width: 82px; --sfi-control-value-width: 24px; margin: 7px 0 0; padding-top: 7px; border-top: 1px solid rgba(191, 232, 251, .1); font-size: 7px; }

.fractions-unit-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#fractions-panel .fractions-unit-gallery button,
#fractions-panel .fractions-infinity-presets button { display: grid; min-height: 34px; place-items: center; padding: 4px; border-radius: 10px; }
#fractions-panel .fractions-unit-gallery button[aria-pressed="true"],
#fractions-panel .fractions-infinity-presets button[aria-pressed="true"] { border-color: rgba(121, 220, 255, .62); background: rgba(121, 220, 255, .12); }
.fractions-unit-gallery .fractions-stacked-fraction,
.fractions-infinity-presets .fractions-stacked-fraction { min-width: 18px; font-size: 9px; }
.fractions-unit-gallery .fractions-stacked-fraction > span:first-child,
.fractions-infinity-presets .fractions-stacked-fraction > span:first-child { min-width: 15px; padding: 0 2px 2px; }
.fractions-unit-gallery .fractions-stacked-fraction > span:last-child,
.fractions-infinity-presets .fractions-stacked-fraction > span:last-child { padding-top: 2px; }

.fractions-inquiries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#fractions-panel .fractions-inquiries button { min-width: 0; min-height: 31px; padding: 4px 2px; font-size: 7px; }
#fractions-panel .fractions-inquiries button[aria-selected="true"] { border-color: rgba(121, 240, 207, .56); background: rgba(121, 240, 207, .1); color: #edfff9; }

.fractions-context-controls[hidden],
#fractions-operation-controls[hidden],
#fractions-infinity-controls[hidden],
#fractions-quantity-controls[hidden],
#fractions-telescope-actions[hidden],
#fractions-orbit-actions[hidden] { display: none; }

.fractions-representations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#fractions-panel .fractions-representations button { min-width: 0; min-height: 31px; padding: 4px 3px; font-size: 7.5px; }
#fractions-panel .fractions-representations button[aria-checked="true"] { border-color: rgba(121, 220, 255, .6); background: rgba(121, 220, 255, .11); color: #edfaff; }
.fractions-transform-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#fractions-panel .fractions-transform-actions button { min-height: 32px; font-size: 8px; }

.fractions-operand-grid { display: grid; gap: 6px; }
.fractions-operand-card { padding: 5px 8px 4px; border: 1px solid rgba(191, 232, 251, .14); border-radius: 12px; background: linear-gradient(145deg, rgba(24, 62, 81, .13), rgba(0, 0, 0, .18)); }
.fractions-operand-card > span { display: block; margin-bottom: 1px; color: rgba(226, 246, 253, .58); font-size: 7px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.fractions-operand-card .sfi-control-row { --sfi-control-label-width: 72px; --sfi-control-value-width: 24px; gap: 6px; margin: 5px 0; font-size: 8px; }

.fractions-operation-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#fractions-panel .fractions-operation-selector button { min-width: 0; min-height: 31px; padding: 4px 2px; font-size: 7.5px; }
#fractions-panel .fractions-operation-selector button[aria-checked="true"] { border-color: rgba(255, 208, 138, .62); background: rgba(255, 208, 138, .11); color: #fff8ed; }
.fractions-operation-views { margin-block: 8px; }
#fractions-panel .fractions-operation-views button { min-width: 0; padding-inline: 3px; font-size: 7px; }

#fractions-panel .fractions-primary-action { width: 100%; min-height: 35px; margin-top: 8px; border-color: rgba(121, 220, 255, .42); background: linear-gradient(145deg, rgba(27, 80, 105, .34), rgba(6, 22, 33, .36)); color: rgba(238, 251, 255, .92); font-size: 9px; }
#fractions-panel .fractions-primary-action:hover { border-color: rgba(121, 220, 255, .7); background: rgba(121, 220, 255, .15); }
.fractions-operation-actions { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; margin-bottom: 0; }
#fractions-panel .fractions-operation-actions .fractions-primary-action { margin-top: 0; }
#fractions-panel .fractions-operation-actions button { min-width: 0; min-height: 36px; padding-inline: 7px; font-size: 8px; }
#fractions-panel .fractions-operation-actions .fractions-primary-action { min-height: 44px; border-color: rgba(121, 220, 255, .72); background: linear-gradient(145deg, rgba(38, 112, 145, .48), rgba(7, 31, 45, .62)); color: #f4fcff; font-size: 9px; }
#fractions-operation-note { position: relative; display: block; clear: both; margin: 12px 2px 4px; padding-top: 10px; border-top: 1px solid rgba(191, 232, 251, .12); line-height: 1.55; }

.fractions-infinity-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fractions-infinity-selector { margin-block: 8px; }
#fractions-panel .fractions-infinity-selector button { min-width: 0; padding-inline: 4px; font-size: 7.5px; }
#fractions-telescope-actions { --sfi-button-columns: 3; gap: 4px; }
#fractions-panel #fractions-telescope-actions button { min-width: 0; min-height: 32px; padding: 4px 2px; font-size: 6.8px; line-height: 1.15; }

@media (min-width: 641px) and (max-width: 1119px) {
  .fractions-semantic-notation { grid-template-columns: 70px minmax(0, 1fr); margin-top: 6px; }
  .fractions-unit-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fractions-inquiries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fractions-representations { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #fractions-panel .fractions-representations button { min-height: 34px; }
  .fractions-infinity-presets { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #fractions-panel { --sfi-control-label-width: 86px; --sfi-control-value-width: 34px; }
  .fractions-form-chain { min-height: 36px; gap: 5px; font-size: 11px; }
  .fractions-stacked-fraction { min-width: 20px; font-size: 10px; }
  .fractions-stacked-fraction > span:first-child { min-width: 18px; padding-inline: 2px; }
  .fractions-semantic-notation { grid-template-columns: 64px minmax(0, 1fr); margin-block: 7px 5px; }
  .fractions-conventional-notation { min-height: 58px; }
  .fractions-role-notation strong { font-size: 15px; }
  .fractions-unit-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #fractions-panel .fractions-unit-gallery button { min-height: 31px; }
  .fractions-inquiries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fractions-representations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fractions-infinity-presets { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .fractions-operand-grid { gap: 4px; }
  .fractions-operand-card { padding-block: 4px 3px; }
}

@media (max-width: 370px) {
  .fractions-unit-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fractions-inquiries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fractions-infinity-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #fractions-canvas { scroll-behavior: auto; }
}