#trigonometry-world {
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), rgba(48, 147, 193, .12), transparent 37%),
    radial-gradient(circle at 76% 20%, rgba(199, 163, 255, .055), transparent 34%),
    #020306;
}

.trig-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  isolation: isolate;
}
#trig-canvas,
#trig-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#trig-canvas { cursor: crosshair; }
#trig-3d-canvas { cursor: grab; }
#trig-canvas:active,
#trig-3d-canvas:active { cursor: grabbing; }
#trig-canvas[hidden],
#trig-3d-canvas[hidden] { display: none; }
.trig-math-overlay { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.trig-stage-math { position: absolute; max-width: min(440px, 48vw); padding: 5px 9px; border: 1px solid rgba(191, 232, 251, .2); border-radius: var(--sfi-radius-control); background: rgba(2, 8, 13, .84); box-shadow: 0 8px 26px rgba(0,0,0,.28); color: rgba(240, 251, 255, .92); transform: translate(-50%, -50%); white-space: nowrap; }
.trig-stage-math[data-function] { pointer-events: auto; cursor: pointer; }
.trig-stage-math[data-active="true"] { border-color: currentColor; box-shadow: 0 0 20px color-mix(in srgb, currentColor 23%, transparent); }
.trig-stage-math.is-banner { border-color: transparent; background: rgba(2, 8, 13, .62); font-size: clamp(12px, 1.45vw, 18px); }
.trig-stage-math.is-note { border: 0; background: rgba(2, 8, 13, .6); color: rgba(214, 242, 255, .68); font-size: 10px; }
.trig-stage-math.is-plot-title { padding: 2px 8px; border: 0; background: transparent; box-shadow: none; font-size: 12px; }
.trig-stage-math.is-cascade-title { text-shadow: 0 1px 8px #020306, 0 0 15px currentColor; }
.trig-stage-math.is-axis-tick { padding: 0; border: 0; background: transparent; box-shadow: none; color: rgba(214, 242, 255, .52); font-size: 8px; }
.trig-stage-math .katex { font-size: 1em; }
#trig-panel { --sfi-control-label-width: 116px; --sfi-control-value-width: 45px; }
.trig-master-control { margin: 0 0 9px; padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.09); }
.trig-master-control .trig-section-label { margin-top: 0; }
.trig-angle-control { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; text-align: center; }
.trig-angle-control .sfi-angle-dial-wrap { grid-row: auto; }
.trig-angle-control > output { min-width: 0; color: rgba(239,250,255,.94); font-family: Georgia, "Times New Roman", serif; font-size: 15px; text-align: center; }
.trig-angle-control > small { color: rgba(191,232,251,.55); font-size: 7px; line-height: 1.35; text-align: center; }
.trig-dial-help { display: grid; gap: 2px; }
.trig-dial-help b { color: rgba(235,249,255,.86); font-size: 8px; font-weight: 600; }
.trig-dial-help span { color: rgba(191,232,251,.48); }
#trig-panel button#trig-theta { width: 54px; min-height: 54px; }
.trig-angle-card { margin-top: 0; background: linear-gradient(120deg, rgba(8, 25, 36, .78), rgba(0, 0, 0, .22)); }
.trig-angle-card .sfi-math-readout, .trig-identity-card .sfi-math-readout { font-size: 15px; font-weight: 400; color: rgba(239, 250, 255, .96); }
.trig-angle-card .sfi-result-detail { overflow: visible; white-space: normal; }
.trig-circleometry { color: rgba(191,232,251,.48); font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-style: italic; }
.trig-angle-card .katex, .trig-identity-card .katex { font-size: 1em; }
.trig-section-label { display: block; margin: 9px 2px 5px; color: rgba(191, 232, 251, .46); font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }
.trig-activities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#trig-panel .trig-activities button { min-height: 31px; padding: 4px 2px; font-size: 7.5px; }
#trig-panel .trig-activities button[aria-selected="true"] { border-color: rgba(121, 220, 255, .58); background: rgba(121, 220, 255, .1); color: #edfaff; }
.trig-functions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.trig-functions[hidden], .trig-section-label[hidden] { display: none; }
#trig-panel .trig-functions button { min-height: 29px; padding: 4px; font-size: 10px; text-transform: none; }
.trig-functions button i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--function-color, #79dcff); box-shadow: 0 0 7px var(--function-color, #79dcff); }
.trig-functions button[data-function="sin"] { --function-color: #79dcff; }
.trig-functions button[data-function="cos"] { --function-color: #ffd08a; }
.trig-functions button[data-function="tan"] { --function-color: #fb8da7; }
.trig-functions button[data-function="cot"] { --function-color: #c7a3ff; }
.trig-functions button[data-function="sec"] { --function-color: #ffad72; }
.trig-functions button[data-function="csc"] { --function-color: #79f0cf; }
#trig-panel .trig-functions button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--function-color) 70%, transparent); background: color-mix(in srgb, var(--function-color) 12%, transparent); color: #fff; }
#trig-panel .trig-functions .trig-show-all { grid-column: 1 / -1; min-height: 30px; font-family: inherit; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.trig-transport { margin-top: 7px; }
.trig-card-toggle { grid-column: 1 / -1; }
.trig-transport button:first-child[aria-pressed="true"] { border-color: rgba(121, 220, 255, .58); background: rgba(121, 220, 255, .1); }
#trig-panel .sfi-panel-section { margin-top: 8px; }
#trig-panel .sfi-control-row { margin-block: 6px; }
.trig-complex-functions { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--sfi-radius-panel); }
#trig-panel .trig-complex-functions button { min-width: 0; min-height: 30px; padding-inline: 3px; font-size: 8px; }
.trig-key-constructions { margin-block: 6px 0; }
#trig-panel #trig-square-areas { display: block; width: auto; min-height: 32px; margin-block: 10px; padding: 5px 12px; font-size: 10px; }
#trig-panel #trig-square-areas[hidden] { display: none; }
#trig-panel .trig-key-constructions button { min-width: 0; padding-inline: 4px; font-size: 8px; }
#trig-panel .trig-key-constructions button[aria-pressed="true"] { border-color: rgba(121, 220, 255, .58); background: rgba(121, 220, 255, .11); color: #edfaff; }
.trig-section-toggle { width: 100%; min-height: 32px; }
.trig-section-toggle[aria-pressed="true"] { border-color: rgba(251,164,86,.62); background: rgba(251,164,86,.12); color: #fff5e8; }
.trig-identity-card { margin-top: 9px; border-color: rgba(191, 232, 251, .17); }
.trig-identity-card .sfi-result-detail { overflow: visible; white-space: normal; }
#trig-panel .katex { font-size: .96em; }
#trig-panel output .katex { font-size: .9em; }

.trig-graph-card { z-index: 5; display: grid; width: clamp(210px, 19vw, 280px); height: 240px; grid-template-rows: 24px 150px 48px; overflow: hidden; }
.trig-graph-card[hidden] { display: none; }
#trig-card-canvas { display: block; width: 100%; height: 150px; border-radius: 10px; background: rgba(0, 4, 9, .48); }
.trig-graph-card .sfi-floating-visual-header { align-items: center; padding: 1px 3px 4px; }
.trig-graph-card .sfi-floating-visual-title { margin: 0 0 0 auto; font-size: 14px; }
.trig-card-values { display: flex; height: 48px; min-height: 48px; align-items: center; justify-content: center; padding: 4px 3px 0; overflow: hidden; color: rgba(225,245,255,.78); font-size: 9.5px; line-height: 1.3; text-align: center; white-space: nowrap; }
.trig-card-values .katex { font-size: 1em; }

@media (max-width: 1119px) {
  .trig-activities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #trig-panel .trig-activities button { min-height: 34px; }
  .trig-functions { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #trig-panel .trig-functions .trig-show-all { grid-column: auto; }
}

@media (max-width: 640px) {
  .trig-activities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trig-functions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #trig-panel .trig-functions .trig-show-all { grid-column: span 2; }
  .trig-graph-card { width: min(52vw, 190px); height: 150px; grid-template-rows: 90px 42px; }
  #trig-card-canvas { height: 90px; }
  .trig-card-values { height: 42px; min-height: 42px; font-size: 7.2px; padding-top: 3px; }
  .trig-graph-card .sfi-floating-visual-header { display: none; }
  .trig-stage-math { max-width: 50vw; padding: 3px 6px; font-size: 8px; }
  .trig-stage-math.is-banner { font-size: 10px; }
}

.trig-stage-math.is-square-proof { font-size: clamp(14px, 1.4vw, 19px); max-width: none; border: 0; }

.trig-stage-math.is-key-angle { font-size: 14px; border: 0; }
@media (max-width: 640px) {
  .trig-stage-math.is-key-coordinate, .trig-stage-math.is-identity-area { font-size: 14px; }
  .trig-stage-math.is-identity-note { display: none; }
}