@font-face {
      font-family: "Applet MathJax Math";
      src: url("vendor/MathJax_Math-Italic.woff") format("woff");
      font-style: italic;
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: "Applet MathJax Upright";
      src: url("vendor/MathJax_Math-Italic.woff") format("woff");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }



    :root {
      --text: #111111;
      --muted: #6f7480;
      --left-tint: rgba(32, 93, 160, 0.075);
      --right-tint: rgba(150, 48, 48, 0.075);
      --border-tint: rgba(70, 70, 70, 0.22);
      --positive: #7f1717;
      --negative: #123c74;
      --zero: #111111;
      --ease-out: cubic-bezier(.2,.9,.25,1);
      --bounce: cubic-bezier(.2, 1.35, .42, 1);
      --formula-base-size: clamp(52px, 8vw, 88px);
      --equation-base-size: clamp(65px, 10vw, 110px);
      --cm: "Applet MathJax Math", "Computer Modern Serif", "Latin Modern Math", "CMU Serif", "STIX Two Text", "Times New Roman", serif;
      --cm-upright: "Applet MathJax Upright", "Computer Modern Serif", "Latin Modern Math", "CMU Serif", "STIX Two Text", "Times New Roman", serif;
    }

    html {
      height: 100%;
      background: #ffffff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      background: #ffffff;
      color: var(--text);
      font-family: system-ui, sans-serif;
      padding: 24px;
    }

    .app {
      width: min(1020px, 100%);
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }

    .app.is-embedded {
      --formula-base-size: clamp(38px, 7vw, 62px);
      --equation-base-size: clamp(48px, 8.75vw, 72px);
    }

    .toolbar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-bottom: 0;
      flex-wrap: wrap;
    }

    .formula-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font: 14px system-ui, sans-serif;
    }

    .formula-control math-field {
      display: inline-block;
      width: clamp(280px, 42vw, 520px);
      min-height: 38px;
      border: 1px solid #d7dce5;
      border-radius: 999px;
      padding: 5px 13px;
      color: var(--text);
      background: #ffffff;
      outline: none;
      font-size: 18px;
      --caret-color: var(--text);
      --selection-background-color: rgba(60, 90, 130, .16);
    }

    .formula-control math-field::part(menu-toggle),
    .formula-control math-field::part(virtual-keyboard-toggle) {
      display: none;
    }

    .formula-control math-field:focus-within {
      border-color: #aeb8c8;
      box-shadow: 0 0 0 3px rgba(60, 90, 130, .10);
    }

    .formula-editor {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }


    .formula-error {
      flex-basis: 100%;
      color: #9a1f1f;
      font: 13px/1.35 system-ui, sans-serif;
      min-height: 1.35em;
      text-align: right;
      opacity: 0;
      transition: opacity 240ms ease;
    }

    .formula-error.visible { opacity: 1; }

    .mode-select {
      width: 280px;
      min-width: 280px;
      max-width: 100%;
      border: 1px solid #d7dce5;
      border-radius: 999px;
      padding: 8px 38px 8px 14px;
      background: #ffffff;
      color: var(--text);
      font: 14px system-ui, sans-serif;
    }

    :root[data-applet-theme="site"] [data-applet-command-left] > [data-applet-role="mode-control"] {
      --applet-select-preferred-width: 280px;
      flex-basis: 340px !important;
      width: 340px;
      max-width: 100%;
    }

    button {
      border: 1px solid #d7dce5;
      background: #ffffff;
      border-radius: 999px;
      padding: 8px 14px;
      font: 14px system-ui, sans-serif;
      cursor: pointer;
      transition: transform 320ms ease, background 320ms ease;
    }

    .toolbar button {
      width: 112px;
      text-align: center;
    }

    button:hover { transform: translateY(-1px); background: #f7f8fb; }

    .stage {
      position: relative;
      height: clamp(190px, 38vh, 300px);
      min-height: 190px;
      overflow: hidden;
      border-radius: 20px;
      background: #ffffff;
      user-select: none;
      touch-action: none;
      transition: box-shadow 840ms ease;
    }

    .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background:
        linear-gradient(90deg,
          var(--left-tint) 0%,
          rgba(32, 93, 160, 0.025) calc(50% - 54px),
          rgba(255,255,255,0) calc(50% - 14px),
          rgba(255,255,255,0) calc(50% + 14px),
          rgba(150, 48, 48, 0.025) calc(50% + 54px),
          var(--right-tint) 100%);
      transition: opacity 920ms ease;
      pointer-events: none;
    }

    .stage::after {
      content: "";
      position: absolute;
      top: 16%;
      bottom: 16%;
      left: 50%;
      width: 2px;
      transform: translateX(-50%) scaleY(.82);
      border-radius: 999px;
      background: var(--border-tint);
      opacity: 0;
      transition: opacity 720ms ease, transform 920ms var(--ease-out);
      pointer-events: none;
    }

    .stage.active { box-shadow: inset 0 0 0 1px rgba(20, 30, 50, 0.08); }
    .stage.active::before { opacity: 1; }
    .stage.active::after { opacity: 1; transform: translateX(-50%) scaleY(1); }

    .equation {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: .30em;
      padding: 0 clamp(24px, 6vw, 72px);
      font-family: var(--cm);
      font-size: var(--equation-font-size, var(--equation-base-size));
      font-style: italic;
      line-height: 1;
    }

    :root[data-applet-theme="site"] .app .equation,
    :root[data-applet-theme="site"] .app .ghost {
      font-size: var(--equation-font-size, var(--equation-base-size));
    }

    .side {
      position: relative;
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: nowrap;
      white-space: nowrap;
      min-width: 0;
      min-height: 1.4em;
      transition: background-color 520ms ease;
      border-radius: 16px;
      padding: .18em .04em;
    }

    .side[data-side="left"] { justify-content: flex-end; }
    .side[data-side="right"] { justify-content: flex-start; }

    .stage.active .side.hovered { background: rgba(255,255,255,.48); }

    .equals {
      position: relative;
      z-index: 1;
      font-style: normal;
      font-weight: 400;
    }

    .term, .zero, .placeholder {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      flex: 0 0 auto;
      min-width: .40em;
      transition:
        transform 840ms var(--ease-out),
        opacity 520ms ease,
        color 440ms ease,
        margin 840ms var(--ease-out);
      will-change: transform, opacity;
    }

    .term {
      cursor: grab;
      padding: 0 .01em;
      color: var(--text);
    }

    .term > span:not(.sign), .factor > span {
      display: inline-block;
      transition: transform 840ms var(--ease-out);
      will-change: transform;
    }


    .term sub, .factor sub, .ghost sub {
      font-size: .62em;
      line-height: 0;
      vertical-align: -0.34em;
      font-style: normal;
      margin-left: .02em;
    }


    .term sup, .factor sup, .ghost sup {
      font-size: .62em;
      line-height: 0;
      vertical-align: 0.52em;
      font-style: normal;
      margin-left: .02em;
    }

    .upright-number, .upright-paren {
      font-style: normal;
    }

    .outer-paren {
      display: inline-block;
      width: .28em;
      min-width: .28em;
      text-align: center;
      overflow: visible;
      vertical-align: middle;
      line-height: 1;
      transform-origin: 50% 55%;
    }

    .outer-paren.tall-paren {
      width: .36em;
      min-width: .36em;
      font-size: 1.55em;
      line-height: .72;
    }

    .outer-paren.vanish {
      animation: paren-vanish 640ms ease both;
    }

    .collapsed-paren-overlay.vanish {
      animation: collapsed-paren-vanish 640ms ease both;
    }

    .collapsed-paren-overlay.pop {
      animation: collapsed-paren-pop 620ms var(--bounce) both;
    }

    .outer-paren.pop {
      animation: paren-pop 620ms var(--bounce) both;
    }

    .collapsed-paren-wrap {
      position: relative;
      display: inline-block;
      vertical-align: baseline;
    }

    .collapsed-paren-overlay {
      position: absolute;
      top: 50%;
      width: .28em;
      min-width: .28em;
      text-align: center;
      pointer-events: none;
      line-height: 1;
      transform: translateY(-50%);
      transform-origin: 50% 55%;
    }

    .collapsed-paren-overlay.tall-paren {
      width: .36em;
      min-width: .36em;
      font-size: 1.55em;
      line-height: .72;
    }

    .collapsed-paren-overlay.left { right: 100%; }
    .collapsed-paren-overlay.right { left: 100%; }

    .inline-op {
      display: inline-block;
      font-style: normal;
      margin: 0 .10em;
      vertical-align: middle;
    }

    .inline-paren-group {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      white-space: nowrap;
    }

    .inline-paren-group.has-fraction > .upright-paren {
      display: inline-block;
      font-size: 1.55em;
      line-height: .72;
      transform-origin: 50% 50%;
    }

    .inline-fraction {
      position: relative;
      display: inline-grid;
      grid-template-rows: repeat(2, minmax(.72em, 1fr));
      justify-items: center;
      align-items: center;
      line-height: .92;
      padding: .02em .06em;
      vertical-align: middle;
    }

    .inline-fraction > :first-child {
      padding-bottom: .08em;
    }

    .inline-fraction-denominator {
      padding-top: .08em;
      min-width: 100%;
    }

    .inline-fraction::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      height: .035em;
      border-radius: 999px;
      background: currentColor;
      transform: translate(-50%, -50%);
    }

    .term:has(.inline-fraction) {
      align-items: center;
    }

    .term:has(.inline-fraction) > .sign {
      align-self: center;
      vertical-align: middle;
    }

    .term.drag-source {
      opacity: 0;
      pointer-events: none;
    }

    .term:active { cursor: grabbing; }

    .term.drag-colored.positive { color: var(--positive); }
    .term.drag-colored.negative { color: var(--negative); }
    .stage:not(.active) .term[data-drag-color="positive"]:hover,
    .stage:not(.active) .term[data-drag-color="positive"]:focus-visible { color: var(--positive); }
    .stage:not(.active) .term[data-drag-color="negative"]:hover,
    .stage:not(.active) .term[data-drag-color="negative"]:focus-visible { color: var(--negative); }

    .zero {
      color: var(--text);
      font-style: normal;
      padding: 0 .01em;
    }

    .placeholder {
      width: .56em;
      height: .74em;
      align-self: center;
      opacity: .55;
      margin: 0 .10em;
      border: .035em solid rgba(17, 17, 17, .26);
      border-radius: .15em;
      background: rgba(17, 17, 17, .055);
      transform: translateY(.015em);
    }

    .mul-side { align-items: center; }
    .mul-product, .mul-flat {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .mul-fraction {
      position: relative;
      display: inline-grid;
      grid-template-rows: repeat(2, minmax(.72em, 1fr));
      justify-items: center;
      align-items: center;
      line-height: .92;
      padding: .02em .06em;
      transition: transform 840ms var(--ease-out), opacity 520ms ease;
    }
    .mul-numerator, .mul-denominator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: .72em;
    }
    .mul-numerator {
      padding-bottom: .08em;
    }
    .mul-denominator {
      padding-top: .08em;
      min-width: 100%;
    }
    .mul-fraction::before {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(var(--fraction-bar-y, 50%) - .23em);
      width: 100%;
      height: .035em;
      border-radius: 999px;
      background: currentColor;
      transform: translate(-50%, -50%) scaleX(1);
      transform-origin: 50% 50%;
    }
    .mul-fraction.fraction-pop::before {
      animation: fraction-bar-pop 520ms var(--bounce) both;
    }
    .mul-fraction.fraction-collapse::before {
      animation: fraction-bar-vanish 180ms ease-in both;
    }
    .factor, .one {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      flex: 0 0 auto;
      min-width: .40em;
      transition: transform 840ms var(--ease-out), opacity 520ms ease, color 440ms ease, margin 840ms var(--ease-out);
      will-change: transform, opacity;
    }
    .factor { cursor: grab; padding: 0 .01em; color: var(--text); }
    .factor.drag-colored.num { color: var(--positive); }
    .factor.drag-colored.den { color: var(--negative); }
    .stage:not(.active) .factor[data-group="num"]:hover,
    .stage:not(.active) .factor[data-group="num"]:focus-visible { color: var(--positive); }
    .stage:not(.active) .factor[data-group="den"]:hover,
    .stage:not(.active) .factor[data-group="den"]:focus-visible { color: var(--negative); }
    .one { color: var(--text); font-style: normal; padding: 0 .01em; }
    .one.pop { animation: zero-pop 980ms var(--bounce) both; }
    .one.vanish { animation: zero-vanish 560ms ease both; }
    .op {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      width: .40em;
      margin: 0 .22em;
      font-style: normal;
      line-height: 1;
      opacity: 1;
      transition: opacity 520ms ease, width 560ms var(--ease-out), margin 560ms var(--ease-out), transform 520ms var(--ease-out);
    }
    .op.hidden { width: 0; margin-left: 0; margin-right: 0; opacity: 0; transform: scale(.35); overflow: hidden; }
    .op.pop { animation: sign-pop 760ms var(--bounce) both; }
    .op.vanish { animation: sign-vanish 560ms ease both; }
    .op-dot::before { content: "\00B7"; font-size: 1em; line-height: 1; }
    .op-div::before { content: "\00F7"; font-size: 1em; line-height: 1; }
    .mul-placeholder {
      width: .56em; height: .74em; align-self: center; opacity: .55; margin: 0 .10em;
      border: .035em solid rgba(17,17,17,.26); border-radius: .15em; background: rgba(17,17,17,.055);
    }

    .sign {
      display: inline-block;
      position: relative;
      width: .40em;
      height: .40em;
      margin: 0 .22em 0 .22em;
      color: inherit;
      font-style: normal;
      opacity: 1;
      transform-origin: 50% 50%;
      vertical-align: -0.03em;
      transition:
        opacity 640ms ease,
        width 720ms var(--ease-out),
        margin 720ms var(--ease-out),
        transform 640ms var(--ease-out);
    }

    .sign::before,
    .sign::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: .46em;
      height: .045em;
      border-radius: 999px;
      background: currentColor;
      transform: translate(-50%, -50%);
    }

    .sign.sign-plus::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .sign.hidden, .sign.collapse {
      width: 0;
      margin-left: 0;
      margin-right: 0;
      opacity: 0;
      transform: scale(.35);
      overflow: hidden;
    }

    .sign.vanish {
      overflow: visible;
      animation: sign-vanish 840ms ease both;
    }

    .sign.leading-plus {
      overflow: visible;
    }

    .sign.leading-plus.hidden {
      width: 0;
      margin-left: 0;
      margin-right: 0;
      opacity: 0;
      transform: scale(.35);
      overflow: hidden;
    }

    .sign.leading-plus.left-reserved.hidden {
      width: .40em;
      margin: 0 .22em 0 .22em;
      opacity: 0;
      transform: none;
      overflow: hidden;
    }

    .sign.leading-plus.vanish {
      overflow: visible;
    }

    .sign.pop { animation: sign-pop 1120ms var(--bounce) both; }

    .ghost {
      position: absolute;
      z-index: 10;
      pointer-events: none;
      display: inline-flex;
      align-items: baseline;
      flex-wrap: nowrap;
      white-space: nowrap;
      max-width: none;
      font-family: var(--cm);
      font-size: var(--equation-font-size, var(--equation-base-size));
      font-style: italic;
      line-height: 1;
      transform: translate(-50%, -55%) scale(1.03);
      filter: drop-shadow(0 10px 18px rgba(20, 20, 30, .18));
      transition: color 360ms ease;
    }

    .ghost * { white-space: nowrap; }

    .ghost .sign { width: .40em; opacity: 1; transform: none; margin: 0 .18em; vertical-align: -0.03em; transition: none; }
    .ghost.positive { color: var(--positive); }
    .ghost.negative { color: var(--negative); }

    .zero.pop { animation: zero-pop 980ms var(--bounce) both; }
    .zero.vanish { animation: zero-vanish 840ms ease both; }

    .term.land { animation: term-land 620ms var(--bounce) both; }
    .term:has(.inline-fraction).land { animation: none; }


    .standard-form-view {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px clamp(24px, 6vw, 72px) 0;
      font-family: var(--cm-upright);
      font-size: var(--formula-font-size, var(--formula-base-size));
      font-style: normal;
      line-height: 1;
      white-space: nowrap;
    }

    .standard-form-view[hidden] { display: none; }

    .stage.standard-form-mode {
      min-height: 220px;
    }

    .app.is-embedded .stage.standard-form-mode {
      min-height: 190px !important;
    }

    .stage.standard-form-mode::before,
    .stage.standard-form-mode::after {
      display: none;
    }

    .standard-form-shell {
      position: relative;
      display: inline-block;
      padding: 18px 12px 0;
    }

    .standard-form-shell::before {
      --standard-frame-progress: 0;
      content: "";
      position: absolute;
      z-index: 0;
      top: -72px;
      right: 1px;
      bottom: -8px;
      left: 1px;
      padding: 1.5px;
      border-radius: 18px;
      background: conic-gradient(
        from -90deg,
        rgba(32, 93, 160, .58) 0turn,
        rgba(32, 93, 160, .58) calc(var(--standard-frame-progress) * 1turn),
        transparent calc(var(--standard-frame-progress) * 1turn),
        transparent 1turn
      );
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0;
      pointer-events: none;
    }

    .app.is-embedded .standard-form-shell {
      padding-top: 14px;
    }

    .app.is-embedded .standard-form-shell::before {
      top: -54px;
      bottom: -7px;
      border-radius: 15px;
    }

    .app.is-embedded .standard-form-badge {
      bottom: -31px;
      font-size: 12px;
    }

    .standard-form-shell.is-standard::before {
      --standard-frame-progress: 1;
      opacity: 1;
    }

    .standard-form-shell.is-entering-standard::before {
      animation: standard-frame-draw 720ms ease-out both;
    }

    .standard-form-badge {
      position: absolute;
      z-index: 2;
      bottom: -35px;
      left: 50%;
      padding: 2px 9px;
      border-radius: 999px;
      background: #ffffff;
      color: var(--negative);
      font: 500 13px/1.25 system-ui, sans-serif;
      letter-spacing: .01em;
      opacity: 0;
      transform: translate(-50%, -6px);
      pointer-events: none;
    }

    .standard-form-shell.is-standard .standard-form-badge {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .standard-form-shell.is-entering-standard .standard-form-badge {
      animation: standard-badge-appear 620ms var(--bounce) both;
    }

    .standard-expression {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: flex-start;
      justify-content: center;
      gap: .18em;
    }

    .standard-labelled-part {
      position: relative;
      display: inline-flex;
      align-items: baseline;
    }

    .standard-mantissa,
    .standard-power,
    .standard-ten-content {
      display: inline-flex;
      justify-content: center;
    }

    .standard-mantissa {
      align-items: baseline;
      transform-origin: 50% 60%;
    }

    .standard-digit {
      display: inline-block;
      min-width: .52em;
      text-align: center;
      font-variant-numeric: tabular-nums;
      transition: transform var(--standard-step-transition, 400ms) var(--ease-out), opacity var(--standard-step-transition, 400ms) ease;
      will-change: transform;
    }

    .standard-sign {
      display: inline-block;
      margin-right: .03em;
    }

    .standard-comma {
      position: relative;
      z-index: 2;
      display: inline-flex;
      width: .20em;
      min-width: .20em;
      align-self: baseline;
      align-items: flex-end;
      justify-content: center;
      cursor: ew-resize;
      touch-action: none;
      outline: none;
      transition: transform var(--standard-step-transition, 400ms) var(--ease-out);
      will-change: transform;
    }

    .standard-comma::before {
      content: "";
      position: absolute;
      inset: -.48em -.22em -.24em;
      border-radius: .18em;
    }

    .standard-comma:hover::before,
    .standard-comma:focus-visible::before {
      background: rgba(60, 90, 130, .09);
      box-shadow: 0 0 0 1px rgba(60, 90, 130, .16);
    }

    .standard-comma-glyph {
      position: relative;
      z-index: 1;
      display: inline-block;
      transform-origin: 50% 75%;
    }

    .standard-product {
      align-self: flex-start;
      margin: 0 .06em;
      line-height: 1;
      transform-origin: 50% 55%;
    }

    .standard-order-part {
      min-width: 1.45em;
      transform-origin: 50% 40%;
    }

    .standard-power {
      position: relative;
      align-items: flex-start;
      min-width: 1.35em;
      min-height: 1em;
      padding-right: .18em;
      line-height: 1;
      transform-origin: 50% 55%;
    }

    .standard-ten-content {
      align-items: flex-start;
      justify-self: center;
    }

    .standard-base {
      line-height: 1;
    }

    .standard-exponent-part {
      position: relative;
      top: -.48em;
      display: inline-flex;
      align-self: flex-start;
      min-width: 0;
      margin-left: .03em;
      font-size: .58em;
    }

    .standard-exponent {
      position: relative;
      display: inline-block;
      min-width: .55em;
      font-size: 1em;
      line-height: 1;
      vertical-align: baseline;
      text-align: left;
      transition: transform var(--standard-step-transition, 400ms) var(--ease-out), color var(--standard-step-transition, 400ms) ease;
      will-change: transform;
    }

    .standard-power-one {
      display: inline-block;
      min-width: .52em;
      text-align: center;
    }

    .standard-power.is-one .standard-ten-content {
      animation: standard-ten-collapse 380ms ease both;
    }

    .standard-power.is-one .standard-power-one {
      position: absolute;
      left: 50%;
      top: 0;
      animation: standard-one-appear 380ms var(--bounce) both;
    }

    .standard-product.is-hiding,
    .standard-order-part.is-hiding {
      animation: standard-power-hide 320ms ease both;
    }

    .standard-product.is-revealing,
    .standard-order-part.is-revealing {
      animation: standard-power-reveal 240ms var(--bounce) both;
    }

    .standard-exponent.is-decrease {
      animation: standard-decrease-pulse var(--standard-step-cycle, 440ms) var(--bounce) both;
    }

    .standard-exponent.is-increase {
      animation: standard-increase-pulse var(--standard-step-cycle, 440ms) var(--bounce) both;
    }

    .standard-part-bracket {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 20px);
      display: grid;
      grid-template-rows: auto 7px;
      width: calc(100% - 8px);
      min-width: 54px;
      margin: 0;
      color: var(--muted);
      opacity: 0;
      visibility: hidden;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .standard-form-shell.is-standard .standard-part-bracket {
      opacity: 1;
      visibility: visible;
      transition: opacity 240ms ease 160ms;
    }

    .standard-part-bracket-line {
      position: relative;
      grid-row: 2;
      align-self: start;
      width: 100%;
      height: 5px;
      border-bottom: 1px solid rgba(80, 88, 102, .58);
    }

    .standard-part-bracket-line::before,
    .standard-part-bracket-line::after {
      content: "";
      position: absolute;
      top: 4px;
      width: 1px;
      height: 5px;
      background: rgba(80, 88, 102, .58);
    }

    .standard-part-bracket-line::before { left: 0; }
    .standard-part-bracket-line::after { right: 0; }

    .standard-part-label {
      display: block;
      grid-row: 1;
      padding-bottom: 3px;
      font: 400 12px/1.1 system-ui, sans-serif;
      text-align: center;
      white-space: nowrap;
    }

    .standard-exponent-part .standard-part-bracket {
      width: 100%;
      min-width: 0;
    }

    .standard-exponent-part .standard-part-label {
      position: absolute;
      left: 50%;
      bottom: 7px;
      width: max-content;
      transform: translateX(-50%);
    }

    .app.is-embedded .standard-part-bracket {
      bottom: calc(100% + 14px);
    }

    .conditions {
      min-height: 1.15em;
      margin-top: 0.55em;
      text-align: center;
      font-family: var(--cm);
      font-size: var(--condition-font-size, clamp(24px, 4vw, 44px));
      font-style: italic;
      line-height: 1.2;
      color: var(--muted);
      opacity: .92;
      transition: opacity 360ms ease;
    }
    .conditions:empty { opacity: 0; }
    .condition-item {
      display: inline-block;
      margin: 0 .18em;
      transform-origin: 50% 55%;
    }
    .condition-item.condition-pop { animation: condition-pop 520ms var(--bounce) both; }
    .condition-item.condition-vanish { animation: condition-vanish 420ms ease both; }
    .condition-separator {
      display: inline-block;
      margin: 0 .10em 0 .04em;
      font-style: normal;
    }
    .condition-op, .condition-number { font-style: normal; }

    .caption {
      margin-top: 18px;
      color: var(--muted);
      font: 17px/1.45 system-ui, sans-serif;
      text-align: center;
      transition: opacity 360ms ease, transform 360ms ease, margin 360ms ease;
    }

    .caption.hidden {
      opacity: 0;
      transform: translateY(-6px);
      margin-top: 0;
      pointer-events: none;
    }


    @keyframes standard-decrease-pulse {
      0% { color: var(--text); transform: scale(1); }
      48% { color: var(--negative); transform: scale(1.075); }
      100% { color: var(--text); transform: scale(1); }
    }

    @keyframes standard-increase-pulse {
      0% { color: var(--text); transform: scale(1); }
      48% { color: var(--positive); transform: scale(1.075); }
      100% { color: var(--text); transform: scale(1); }
    }

    @property --standard-frame-progress {
      syntax: "<number>";
      inherits: false;
      initial-value: 0;
    }

    @keyframes standard-frame-draw {
      0% { --standard-frame-progress: 0; opacity: 1; }
      100% { --standard-frame-progress: 1; opacity: 1; }
    }

    @keyframes standard-badge-appear {
      0% { opacity: 0; transform: translate(-50%, -7px); }
      100% { opacity: 1; transform: translate(-50%, 0); }
    }

    @keyframes standard-ten-collapse {
      0% { opacity: 1; transform: scale(1); filter: blur(0); }
      100% { opacity: 0; transform: scale(.42); filter: blur(1px); }
    }

    @keyframes standard-one-appear {
      0% { opacity: 0; transform: translateX(-50%) scale(.42); }
      62% { opacity: 1; transform: translateX(-50%) scale(1.14); }
      100% { opacity: 1; transform: translateX(-50%) scale(1); }
    }

    @keyframes standard-power-hide {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(.52); }
    }

    @keyframes standard-power-reveal {
      0% { opacity: 0; transform: scale(.48); }
      68% { opacity: 1; transform: scale(1.10); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes sign-pop {
      0% { opacity: 0; transform: scale(.25); }
      58% { opacity: 1; transform: scale(1.22); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes sign-vanish {
      0% { opacity: 1; transform: scale(1); filter: blur(0); }
      45% { opacity: 1; transform: scale(1.10); filter: blur(0); }
      100% { opacity: 0; transform: scale(.35); filter: blur(1px); }
    }

    @keyframes paren-vanish {
      0% { opacity: 1; transform: scale(1); filter: blur(0); }
      42% { opacity: 1; transform: scale(1.18); filter: blur(0); }
      100% { opacity: 0; transform: scale(.35); filter: blur(1px); }
    }

    @keyframes collapsed-paren-vanish {
      0% { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
      42% { opacity: 1; transform: translateY(-50%) scale(1.18); filter: blur(0); }
      100% { opacity: 0; transform: translateY(-50%) scale(.35); filter: blur(1px); }
    }

    @keyframes collapsed-paren-pop {
      0% { opacity: 0; transform: translateY(-50%) scale(.35); }
      58% { opacity: 1; transform: translateY(-50%) scale(1.18); }
      100% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    @keyframes paren-pop {
      0% { opacity: 0; transform: scale(.35); }
      58% { opacity: 1; transform: scale(1.18); }
      100% { opacity: 1; transform: scale(1); }
    }


    @keyframes fraction-bar-pop {
      0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
      62% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.20); }
      100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
    }

    @keyframes fraction-bar-vanish {
      0% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
      100% { opacity: 1; transform: translate(-50%, -50%) scaleX(0); }
    }

    @keyframes zero-pop {
      0% { opacity: 0; transform: scale(.35); }
      58% { opacity: 1; transform: scale(1.18); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes condition-pop {
      0% { opacity: 0; transform: scale(.72); }
      62% { opacity: 1; transform: scale(1.14); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes condition-vanish {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(.72); }
    }

    @keyframes zero-vanish {
      0% { opacity: 1; transform: scale(1); filter: blur(0); }
      45% { opacity: 1; transform: scale(1.08); filter: blur(0); }
      100% { opacity: 0; transform: scale(.42); filter: blur(1px); }
    }

    @keyframes term-land {
      0% { transform: translate(var(--land-x, 0px), var(--land-y, 0px)) scale(1.05); }
      68% { transform: translate(0, 0) scale(1.08); }
      100% { transform: translate(0, 0) scale(1); }
    }

    @media (max-width: 700px) {
      .equation { column-gap: .28em; padding: 0 16px; }
      .standard-form-view { padding-right: 16px; padding-left: 16px; }
    }