@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@media (prefers-color-scheme: light) {
  :root {
    /****************** COLORS ******************/
    --MAIN-COLOR: #f7f7f7;
    --MAIN-COLOR-COVER: hsla(0, 0%, 97%, 0.35);
    --MOBILE-PANEL: hsl(0, 0%, 94%);
    --TEXT-COLOR: #111;
    --TEXT-COLOR-OPPOSITE: #f7f7f7;
    --PANEL-LIGHT: hsla(0, 0%, 96%, 0.95);
    --PANEL-DARK: hsla(0, 0%, 43%, 0.25);
    --PANEL-SHADOW-COLOR: hsla(0, 0%, 23%, 0.4);
    --CALC-SCROLLBAR-TRACK: #f7f7f7;
    --CALC-SCROLLBAR: hsla(0, 0%, 29%, 0.65);
    --CALC-SCROLLBAR-HOVER: hsla(0, 0%, 17%, 0.75);
    --CALC-HISTORY-BORDER-COLOR: hsla(0, 0%, 55%, 0.75);
    --CALC-BG-LIGHT: hsla(0, 0%, 91%, 0.45);
    --CALC-BG-DARK: hsla(0, 0%, 73%, 0.35);
    --CALC-BORDER-COLOR: hsla(0, 0%, 96%, 0.95);
    --CALC-SHADOW-COLOR: hsla(0, 0%, 57%, 0.75);
    --BTN-BG-OPERAND-LIGHT: hsl(0, 0%, 97%);
    --BTN-BG-OPERAND-LIGHT80: hsla(0, 0%, 97%, 0.8);
    --BTN-BG-OPERAND-LIGHT60: hsla(0, 0%, 97%, 0.6);
    --BTN-BG-OPERAND-DARK: hsl(0, 0%, 85%);
    --BTN-BG-OPERAND-DARK80: hsla(0, 0%, 85%, 0.8);
    --BTN-BG-OPERAND-DARK60: hsla(0, 0%, 85%, 0.6);
    --BTN-BG-OPERATOR-LIGHT: hsl(196, 45%, 93%);
    --BTN-BG-OPERATOR-LIGHT80: hsla(196, 45%, 93%, 0.8);
    --BTN-BG-OPERATOR-LIGHT60: hsla(196, 45%, 93%, 0.6);
    --BTN-BG-OPERATOR-DARK: hsl(204, 18%, 75%);
    --BTN-BG-OPERATOR-DARK80: hsla(204, 18%, 75%, 0.8);
    --BTN-BG-OPERATOR-DARK60: hsla(204, 18%, 75%, 0.6);
    --BTN-BG-SPECIAL-LIGHT: hsl(195, 2%, 67%);
    --BTN-BG-SPECIAL-LIGHT80: hsla(195, 2%, 67%, 0.8);
    --BTN-BG-SPECIAL-LIGHT60: hsla(195, 2%, 67%, 0.6);
    --BTN-BG-SPECIAL-DARK: hsl(192, 3%, 44%);
    --BTN-BG-SPECIAL-DARK80: hsla(192, 3%, 44%, 0.8);
    --BTN-BG-SPECIAL-DARK60: hsla(192, 3%, 44%, 0.6);
    --BTN-SHADOW-COLOR: hsla(0, 0%, 23%, 0.35);
    --BTN-TEXT-SHADOW-OPERAND-COLOR: hsla(0, 0%, 53%, 0.55);
    --BTN-TEXT-SHADOW-OPERATOR-COLOR: hsla(204, 4%, 53%, 0.8);
    --BTN-TEXT-SHADOW-SPECIAL-COLOR: hsla(0, 0%, 72%, 0.5);
    --BTN-HOVER-BRIGHTNESS: 1.075;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    /****************** COLORS ******************/
    --MAIN-COLOR: #333333;
    --MAIN-COLOR-COVER: hsla(0, 0%, 27%, 0.35);
    --MOBILE-PANEL: hsl(221, 2%, 18%);
    --TEXT-COLOR: #e9e7e1;
    --TEXT-COLOR-OPPOSITE: #e9e7e1;
    --PANEL-LIGHT: hsla(0, 0%, 32%, 0.9);
    --PANEL-DARK: hsla(0, 0%, 27%, 0.75);
    --PANEL-SHADOW-COLOR: hsla(0, 0%, 0%, 1);
    --CALC-SCROLLBAR-TRACK: hsla(0, 0%, 38%, 0.85);
    --CALC-SCROLLBAR: hsla(0, 0%, 76%, 0.9);
    --CALC-SCROLLBAR-HOVER: hsla(0, 0%, 91%, 0.9);
    --CALC-HISTORY-BORDER-COLOR: hsla(0, 0%, 48%, 0.95);
    --CALC-BG-LIGHT: hsla(230, 3%, 11%, 0.4);
    --CALC-BG-DARK: hsla(227, 5%, 21%, 0.4);
    --CALC-BORDER-COLOR: hsla(230, 2%, 27%, 0.95);
    --CALC-SHADOW-COLOR: hsla(0, 0%, 5%, 0.75);
    --BTN-BG-OPERAND-LIGHT: hsl(222, 4%, 35%);
    --BTN-BG-OPERAND-LIGHT80: hsla(222, 4%, 35%, 0.8);
    --BTN-BG-OPERAND-LIGHT60: hsla(222, 4%, 35%, 0.6);
    --BTN-BG-OPERAND-DARK: hsl(225, 2%, 19%);
    --BTN-BG-OPERAND-DARK80: hsla(225, 2%, 19%, 0.8);
    --BTN-BG-OPERAND-DARK60: hsla(225, 2%, 19%, 0.6);
    --BTN-BG-OPERATOR-LIGHT: hsl(35, 70%, 61%);
    --BTN-BG-OPERATOR-LIGHT80: hsla(35, 70%, 61%, 0.8);
    --BTN-BG-OPERATOR-LIGHT60: hsla(35, 70%, 61%, 0.6);
    --BTN-BG-OPERATOR-DARK: hsl(27, 59%, 42%);
    --BTN-BG-OPERATOR-DARK80: hsla(27, 59%, 42%, 0.8);
    --BTN-BG-OPERATOR-DARK60: hsla(27, 59%, 42%, 0.6);
    --BTN-BG-SPECIAL-LIGHT: hsl(205, 12%, 67%);
    --BTN-BG-SPECIAL-LIGHT80: hsla(205, 12%, 67%, 0.8);
    --BTN-BG-SPECIAL-LIGHT60: hsla(205, 12%, 67%, 0.6);
    --BTN-BG-SPECIAL-DARK: hsl(209, 7%, 39%);
    --BTN-BG-SPECIAL-DARK80: hsla(209, 7%, 39%, 0.8);
    --BTN-BG-SPECIAL-DARK60: hsla(209, 7%, 39%, 0.6);
    --BTN-SHADOW-COLOR: hsla(0, 0%, 2%, 0.7);
    --BTN-TEXT-SHADOW-OPERAND-COLOR: hsla(0, 0%, 79%, 0.65);
    --BTN-TEXT-SHADOW-OPERATOR-COLOR: hsla(54, 86%, 75%, 0.45);
    --BTN-TEXT-SHADOW-SPECIAL-COLOR: hsla(0, 0%, 73%, 0.65);
    --BTN-HOVER-BRIGHTNESS: 1.325;
  }
}
:root {
  --KEYBOARD-SHORTCUTS-HEIGHT: calc(12 * (19.2px + var(--SPACING-SM) + var(--SPACING-MD)) + var(--FS-SM) + 3px + var(--SPACING-SM) + (2 * var(--SPACING-MD)));
  --HISTORY-PANEL-MOBILE-HEIGHT: clamp(100px, 80vh, 225px);
  /****************** SHADOWS ******************/
  --CALC-SHADOW:
      2px 2px 14px var(--CALC-SHADOW-COLOR),
      2px 2px 24px var(--CALC-SHADOW-COLOR);
  --HEADER-SHADOW:
      -2px -2px 8px var(--PANEL-LIGHT),
      2px 2px 9px var(--PANEL-SHADOW-COLOR);
  --BTN-SHADOW:
      2px 2px 14px var(--BTN-SHADOW-COLOR);
  --BTN-SHADOW-ACTIVE:
      1px 2px 16px var(--BTN-SHADOW-COLOR),
      1px 2px 6px var(--BTN-SHADOW-COLOR);
  --BTN-TEXT-SHADOW-OPERAND: 0 0 3px var(--BTN-TEXT-SHADOW-OPERAND-COLOR);
  --BTN-TEXT-SHADOW-OPERATOR: 0 0 3px var(--BTN-TEXT-SHADOW-OPERATOR-COLOR);
  --BTN-TEXT-SHADOW-SPECIAL: 0 0 3px var(--BTN-TEXT-SHADOW-SPECIAL-COLOR);
  /****************** SPACING (PADDING & MARGIN & GAP) ******************/
  --SPACING-XL: clamp(0.5rem, 4.75vw, 1.25rem);
  --SPACING-LG: clamp(0.35rem, 3.25vw, 1rem);
  --SPACING-MD: clamp(0.125rem, 1.35vw, 0.5rem);
  --SPACING-SM: clamp(0.0625rem, 0.75vw, 0.25rem);
  --SPACING-XS: clamp(0.0325rem, 0.35vw, 0.125rem);
  /****************** FONT SIZES ******************/
  --FS-XL: clamp(1.25rem, 5.5vh, 3rem);
  --FS-LG: clamp(0.5rem, 7.25vw, 1.5rem);
  --FS-MD: clamp(0.75rem, 3vh, 1.5rem);
  --FS-SM: clamp(0.5rem, 2.175vh, 1rem);
  --FS-XS: clamp(11px, 2.5vw, 14px);
  --FS-BTN-LG: clamp(0.8rem, 6.5vw, 1.75rem);
  --FS-BTN-MD: clamp(0.6rem, 5vw, 1.35rem);
  --FS-BTN-SM: clamp(0.35rem, 4vw, 1.25rem);
}

@media screen and (max-width: 319.9px) and (min-aspect-ratio: 8/10) {
  :root {
    --SPACING-XL: 10px;
    --SPACING-LG: 6px;
    --SPACING-MD: 3px;
    --SPACING-SM: 2px;
    --SPACING-XS: 1px;
    --FS-XL: clamp(1rem, 7.75vh, 1.75rem);
    --FS-LG: clamp(0.65rem, 6.125vw, 1.5rem);
    --FS-MD: clamp(0.5rem, 4.5vh, 1.25rem);
    --FS-SM: clamp(0.25rem, 3vh, 1rem);
    --FS-XS: clamp(0.125px, 2.5vh, 0.75px);
    --FS-BTN-LG: clamp(0.65rem, 4.25vw, 1.85rem);
    --FS-BTN-MD: clamp(0.45rem, 3.5vw, 1.35rem);
    --FS-BTN-SM: clamp(0.25rem, 2.8vw, 1.25rem);
  }
}
@media screen and (min-width: 320px) {
  :root {
    --SPACING-XL: clamp(0.85rem, 4.75vw, 1.25rem);
    --SPACING-LG: clamp(0.65rem, 3.25vw, 1rem);
    --SPACING-MD: clamp(0.25rem, 1.35vw, 0.5rem);
    --SPACING-SM: clamp(0.125rem, 0.75vw, 0.25rem);
    --SPACING-XS: clamp(0.0625rem, 0.35vw, 0.125rem);
    --FS-XL: clamp(1.95rem, 5.25vh, 3rem);
    --FS-LG: clamp(1.5rem, 6.5vw, 2rem);
    --FS-MD: clamp(1rem, 2.45vh, 1.5rem);
    --FS-SM: clamp(12px, 2.15vh, 1rem);
    --FS-XS: clamp(11px, 2.5vw, 14px);
    --FS-BTN-LG: clamp(1.35rem, 6.15vw, 1.75rem);
    --FS-BTN-MD: clamp(0.85rem, 4.5vw, 1.35rem);
    --FS-BTN-SM: clamp(0.45rem, 3.95vw, 1.25rem);
  }
}
@media screen and (min-width: 320px) and (max-width: 575.9px) and (min-aspect-ratio: 19/20) {
  :root {
    --SPACING-XL: clamp(0.8rem, 5vh, 1.25rem);
    --SPACING-LG: clamp(0.6rem, 3vh, 1rem);
    --SPACING-MD: clamp(0.2rem, 1.5vh, 0.5rem);
    --SPACING-SM: clamp(0.12rem, 0.65vh, 0.25rem);
    --SPACING-XS: clamp(0.062rem, 0.3vh, 0.125rem);
    --FS-XL: clamp(1.35rem, 7.75vh, 2.25rem);
    --FS-LG: clamp(0.75rem, 5.25vw, 1.55rem);
    --FS-MD: clamp(0.5rem, 4.5vh, 1.25rem);
    --FS-SM: clamp(0.25rem, 3vh, 1rem);
    --FS-XS: clamp(0.125px, 3.5vh, 0.75px);
    --FS-BTN-LG: clamp(1rem, 4.25vw, 1.85rem);
    --FS-BTN-MD: clamp(0.55rem, 3.5vw, 1.35rem);
    --FS-BTN-SM: clamp(0.5rem, 2.8vw, 1.25rem);
  }
}
@media screen and (min-width: 576px) {
  :root {
    --SPACING-XL: 1.25rem;
    --SPACING-LG: 1rem;
    --SPACING-MD: 0.5rem;
    --SPACING-SM: 0.25rem;
    --SPACING-XS: 0.125rem;
    --FS-XL: 2.5rem;
    --FS-LG: 2rem;
    --FS-MD: 1.45rem;
    --FS-SM: 1rem;
    --FS-XS: 14px;
    --FS-BTN-LG: clamp(1.85rem, 5.75vw, 2rem);
    --FS-BTN-MD: clamp(1.45rem, 3.75vw, 1.55rem);
    --FS-BTN-SM: clamp(1.35rem, 3.35vw, 1.45rem);
  }
}
@media screen and (min-width: 576px) and (max-width: 767.9px) and (min-aspect-ratio: 20.5/19) {
  :root {
    --SPACING-XL: clamp(0.85rem, 5vh, 1.25rem);
    --SPACING-LG: clamp(0.65rem, 3vh, 1rem);
    --SPACING-MD: clamp(0.25rem, 1.5vh, 0.5rem);
    --SPACING-SM: clamp(0.125rem, 0.65vh, 0.25rem);
    --SPACING-XS: clamp(0.0625rem, 0.3vh, 0.125rem);
    --FS-XL: clamp(2rem, 6.75vh, 2.5rem);
    --FS-LG: clamp(1.5rem, 5.25vh, 2rem);
    --FS-MD: clamp(1.25rem, 4.5vh, 1.45rem);
    --FS-SM: clamp(0.75rem, 2.75vh, 1rem);
    --FS-XS: clamp(12px, 3.5vh, 14px);
    --FS-BTN-LG: clamp(1.75rem, 4.15vw, 2rem);
    --FS-BTN-MD: clamp(1.15rem, 2.85vw, 1.5rem);
    --FS-BTN-SM: clamp(1rem, 2.65vw, 1.45rem);
  }
}
@media screen and (min-width: 768px) {
  :root {
    --SPACING-XL: 1.25rem;
    --SPACING-LG: clamp(0.5rem, 2vh, 1rem);
    --SPACING-MD: clamp(0.35rem, 1vh, 0.5rem);
    --SPACING-SM: clamp(0.15rem, 0.5vh, 0.25rem);
    --SPACING-XS: 0.125rem;
    --FS-XL: clamp(2.15rem, 5.25vh, 2.5rem);
    --FS-LG: clamp(1.5rem, 7vw, 2rem);
    --FS-MD: clamp(1.25rem, 2.25vw, 1.5rem);
    --FS-SM: clamp(12px, 1.75vw, 1rem);
    --FS-XS: clamp(11px, 1.5vw, 14px);
    --FS-BTN-LG: clamp(1.5rem, 3.25vw, 1.75rem);
    --FS-BTN-MD: clamp(1.2rem, 2.25vw ,1.35rem);
    --FS-BTN-SM: clamp(1rem, 2.35vw, 1.285rem);
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --SPACING-XL: 1.25rem;
    --SPACING-LG: 1rem;
    --SPACING-MD: 0.5rem;
    --SPACING-SM: 0.25rem;
    --SPACING-XS: 0.125rem;
    --FS-XL: 2.5rem;
    --FS-LG: 2rem;
    --FS-MD: clamp(1.15rem, 2.25vw, 1.5rem);
    --FS-SM: 1rem;
    --FS-XS: 14px;
    --FS-BTN-LG: 1.75rem;
    --FS-BTN-MD: 1.35rem;
    --FS-BTN-SM: 1.285rem;
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --SPACING-XL: max(1.25rem, 1.25vw);
    --SPACING-LG: max(1rem, 1vw);
    --SPACING-MD: max(0.5rem, 0.5vw);
    --SPACING-SM: max(0.25rem, 0.25vw);
    --SPACING-XS: max(0.125rem, 0.125vw);
    --FS-XL: max(2.5rem, 2.5vw);
    --FS-LG: max(2rem, 2vw);
    --FS-MD: max(1.5rem, 1.5vw);
    --FS-SM: max(1rem, 1vw);
    --FS-XS: max(14px, 0.875vw);
    --FS-BTN-LG: max(1.75rem, 1.75vw);
    --FS-BTN-MD: max(1.35rem, 1.35vw);
    --FS-BTN-SM: max(1.285rem, 1.285vw);
  }
}
.themes h2, .calculator__history h3, .calculator__panel h3, .calculator__btns h3 {
  position: absolute;
  left: -10000px;
}

header h1, .themes__panel-mobile-current, .mobile-options__panel button, .mobile-options__panel a, .calculator__history-entries .calculator__history-empty, .calculator__history-entries .calculator__history-entry .entry-header-time, .calculator__history-entries .calculator__history-entry .entry-body .entry-input, .calculator__history-entries .calculator__history-entry .entry-body .entry-output, .calculator__panel-output-main, .calculator__panel-output-prev {
  white-space: nowrap;
}

.credits a, .github__btn {
  display: inline-block;
  transition: scale 0.125s;
}
.credits a:-moz-any-link, .github__btn:-moz-any-link {
  color: var(--TEXT-COLOR);
}
.credits a:any-link, .github__btn:any-link {
  color: var(--TEXT-COLOR);
}
.credits a:hover, .github__btn:hover, .credits a:focus-visible, .github__btn:focus-visible {
  scale: 1.025;
}
.credits a:active, .github__btn:active {
  scale: 0.975;
}

@keyframes fade-out {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}
@keyframes fade-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

body {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

form, input, button, label, textarea {
  font: inherit;
}

.calculator__btns {
  -ms-flex-positive: 1;
      flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--SPACING-MD);
  padding-top: var(--SPACING-SM);
  animation: none;
}
.calculator__btns.mobile-active {
  animation: hide-buttons-mobile 0.75s forwards;
}
@keyframes hide-buttons-mobile {
  from {
    opacity: 1;
    translate: 0 0;
  }
  70% {
    opacity: 0.5;
  }
  to {
    opacity: 0;
    translate: 0 110%;
  }
}
@keyframes show-buttons-mobile {
  from {
    opacity: 0;
    translate: 0 110%;
  }
  30% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
    translate: 0 0%;
  }
}
.calculator__btns button {
  color: var(--TEXT-COLOR);
  cursor: pointer;
  transition: text-shadow 0.125s, filter 0.08s, box-shadow 0.25s, transform 0.25s;
  margin: var(--SPACING-SM);
  border-radius: clamp(11.25px, 3vmin, 20px);
  border: none;
  position: relative;
  box-shadow: var(--BTN-SHADOW);
  font-size: var(--FS-BTN-MD);
  line-height: var(--FS-BTN-MD);
  outline-color: transparent;
}
.calculator__btns button span {
  position: relative;
  z-index: 1;
}
.calculator__btns button:hover, .calculator__btns button:focus-visible {
  filter: brightness(1.075);
  box-shadow: var(--BTN-SHADOW-ACTIVE);
  transform: translate(0, -1%);
}
.calculator__btns button:active, .calculator__btns button.pressed {
  filter: brightness(0.925);
  transform: translate(0, 1%);
  transition: text-shadow 0.125s, filter 0.075s, box-shadow 0.075s, transform 0.0075s;
}
.calculator__btns button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: clamp(9px, 2.75vmin, 16px);
  width: 85%;
  height: 85%;
}
.calculator__btns .btn-operand {
  color: var(--TEXT-COLOR);
  background-color: var(--BTN-BG-OPERAND-LIGHT);
  background-image: linear-gradient(135deg, var(--BTN-BG-OPERAND-LIGHT), var(--BTN-BG-OPERAND-DARK));
}
.calculator__btns .btn-operand::before {
  background-image: linear-gradient(135deg, var(--BTN-BG-OPERAND-DARK), var(--BTN-BG-OPERAND-DARK80), transparent, var(--BTN-BG-OPERAND-LIGHT80), var(--BTN-BG-OPERAND-LIGHT));
}
.calculator__btns .btn-operand:hover, .calculator__btns .btn-operand:focus-visible {
  text-shadow: var(--BTN-TEXT-SHADOW-OPERAND);
}
.calculator__btns .btn-operator {
  color: var(--TEXT-COLOR);
  background-color: var(--BTN-BG-OPERATOR-LIGHT);
  background-image: linear-gradient(135deg, var(--BTN-BG-OPERATOR-LIGHT), var(--BTN-BG-OPERATOR-DARK));
}
.calculator__btns .btn-operator::before {
  background-image: linear-gradient(135deg, var(--BTN-BG-OPERATOR-DARK80), var(--BTN-BG-OPERATOR-DARK80), transparent, var(--BTN-BG-OPERATOR-LIGHT80), var(--BTN-BG-OPERATOR-LIGHT));
}
.calculator__btns .btn-operator:hover, .calculator__btns .btn-operator:focus-visible {
  text-shadow: var(--BTN-TEXT-SHADOW-OPERATOR);
}
.calculator__btns .btn-special {
  color: var(--TEXT-COLOR-OPPOSITE);
  background-color: var(--BTN-BG-SPECIAL-LIGHT);
  background-image: linear-gradient(135deg, var(--BTN-BG-SPECIAL-LIGHT), var(--BTN-BG-SPECIAL-DARK));
}
.calculator__btns .btn-special::before {
  background-image: linear-gradient(135deg, var(--BTN-BG-SPECIAL-DARK80), var(--BTN-BG-SPECIAL-DARK60), transparent, var(--BTN-BG-SPECIAL-LIGHT60), var(--BTN-BG-SPECIAL-LIGHT80));
}
.calculator__btns .btn-special:hover, .calculator__btns .btn-special:focus-visible {
  text-shadow: var(--BTN-TEXT-SHADOW-SPECIAL);
}
.calculator__btns #calculator__theme-header {
  font-size: var(--FS-BTN-SM);
  grid-column: 1/3;
  color: var(--TEXT-COLOR-OPPOSITE);
  background-color: var(--BTN-BG-SPECIAL-LIGHT);
  background-image: linear-gradient(150deg, var(--BTN-BG-SPECIAL-LIGHT), var(--BTN-BG-SPECIAL-DARK));
}
.calculator__btns #calculator__theme-header::before {
  width: 93%;
  background-image: linear-gradient(150deg, var(--BTN-BG-SPECIAL-DARK80), var(--BTN-BG-SPECIAL-DARK60), transparent, var(--BTN-BG-SPECIAL-LIGHT60), var(--BTN-BG-SPECIAL-LIGHT80));
}
.calculator__btns #calculator__theme-header:hover, .calculator__btns #calculator__theme-header:focus-visible {
  text-shadow: var(--BTN-TEXT-SHADOW-SPECIAL);
}
.calculator__btns #btn-eq, .calculator__btns #btn-add, .calculator__btns #btn-sub, .calculator__btns #btn-mul, .calculator__btns #btn-div, .calculator__btns #btn-exp, .calculator__btns #btn-dec {
  font-size: var(--FS-BTN-LG);
}

@media screen and (max-width: 319.9px) and (min-aspect-ratio: 8/10) {
  .calculator__btns {
    grid-template-areas: "sev eig nin cle div pa1" "fou fiv six del mul pa2" "one two thr equ sub per" "zer dec nbg nbg add exp";
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(6, 1fr);
  }
  .calculator__btns #btn-b0 {
    grid-area: zer;
  }
  .calculator__btns #btn-b1 {
    grid-area: one;
  }
  .calculator__btns #btn-b2 {
    grid-area: two;
  }
  .calculator__btns #btn-b3 {
    grid-area: thr;
  }
  .calculator__btns #btn-b4 {
    grid-area: fou;
  }
  .calculator__btns #btn-b5 {
    grid-area: fiv;
  }
  .calculator__btns #btn-b6 {
    grid-area: six;
  }
  .calculator__btns #btn-b7 {
    grid-area: sev;
  }
  .calculator__btns #btn-b8 {
    grid-area: eig;
  }
  .calculator__btns #btn-b9 {
    grid-area: nin;
  }
  .calculator__btns #btn-dec {
    grid-area: dec;
  }
  .calculator__btns #btn-add {
    grid-area: add;
  }
  .calculator__btns #btn-sub {
    grid-area: sub;
  }
  .calculator__btns #btn-mul {
    grid-area: mul;
  }
  .calculator__btns #btn-exp {
    grid-area: exp;
  }
  .calculator__btns #btn-per {
    grid-area: per;
  }
  .calculator__btns #btn-pa1 {
    grid-area: pa1;
  }
  .calculator__btns #btn-pa2 {
    grid-area: pa2;
  }
  .calculator__btns #btn-eq {
    grid-area: equ;
  }
  .calculator__btns #btn-cle {
    grid-area: cle;
  }
  .calculator__btns #btn-del {
    grid-area: del;
  }
  .calculator__btns #calculator__theme-header {
    grid-area: nbg;
  }
  .calculator__btns button {
    border-radius: 6.25px;
  }
  .calculator__btns button::before {
    border-radius: 5px;
  }
}
@media screen and (min-width: 320px) and (max-width: 575.9px) and (min-aspect-ratio: 19/20) {
  .calculator__btns {
    grid-template-areas: "sev eig nin cle div pa1" "fou fiv six del mul pa2" "one two thr equ sub per" "zer dec nbg nbg add exp";
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(6, 1fr);
  }
  .calculator__btns #btn-b0 {
    grid-area: zer;
  }
  .calculator__btns #btn-b1 {
    grid-area: one;
  }
  .calculator__btns #btn-b2 {
    grid-area: two;
  }
  .calculator__btns #btn-b3 {
    grid-area: thr;
  }
  .calculator__btns #btn-b4 {
    grid-area: fou;
  }
  .calculator__btns #btn-b5 {
    grid-area: fiv;
  }
  .calculator__btns #btn-b6 {
    grid-area: six;
  }
  .calculator__btns #btn-b7 {
    grid-area: sev;
  }
  .calculator__btns #btn-b8 {
    grid-area: eig;
  }
  .calculator__btns #btn-b9 {
    grid-area: nin;
  }
  .calculator__btns #btn-dec {
    grid-area: dec;
  }
  .calculator__btns #btn-add {
    grid-area: add;
  }
  .calculator__btns #btn-sub {
    grid-area: sub;
  }
  .calculator__btns #btn-mul {
    grid-area: mul;
  }
  .calculator__btns #btn-exp {
    grid-area: exp;
  }
  .calculator__btns #btn-per {
    grid-area: per;
  }
  .calculator__btns #btn-pa1 {
    grid-area: pa1;
  }
  .calculator__btns #btn-pa2 {
    grid-area: pa2;
  }
  .calculator__btns #btn-eq {
    grid-area: equ;
  }
  .calculator__btns #btn-cle {
    grid-area: cle;
  }
  .calculator__btns #btn-del {
    grid-area: del;
  }
  .calculator__btns #calculator__theme-header {
    grid-area: nbg;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.9px) and (min-aspect-ratio: 20.5/19) {
  .calculator__btns {
    grid-template-areas: "sev eig nin cle div pa1" "fou fiv six del mul pa2" "one two thr equ sub per" "zer dec nbg nbg add exp";
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(6, 1fr);
  }
  .calculator__btns #btn-b0 {
    grid-area: zer;
  }
  .calculator__btns #btn-b1 {
    grid-area: one;
  }
  .calculator__btns #btn-b2 {
    grid-area: two;
  }
  .calculator__btns #btn-b3 {
    grid-area: thr;
  }
  .calculator__btns #btn-b4 {
    grid-area: fou;
  }
  .calculator__btns #btn-b5 {
    grid-area: fiv;
  }
  .calculator__btns #btn-b6 {
    grid-area: six;
  }
  .calculator__btns #btn-b7 {
    grid-area: sev;
  }
  .calculator__btns #btn-b8 {
    grid-area: eig;
  }
  .calculator__btns #btn-b9 {
    grid-area: nin;
  }
  .calculator__btns #btn-dec {
    grid-area: dec;
  }
  .calculator__btns #btn-add {
    grid-area: add;
  }
  .calculator__btns #btn-sub {
    grid-area: sub;
  }
  .calculator__btns #btn-mul {
    grid-area: mul;
  }
  .calculator__btns #btn-exp {
    grid-area: exp;
  }
  .calculator__btns #btn-per {
    grid-area: per;
  }
  .calculator__btns #btn-pa1 {
    grid-area: pa1;
  }
  .calculator__btns #btn-pa2 {
    grid-area: pa2;
  }
  .calculator__btns #btn-eq {
    grid-area: equ;
  }
  .calculator__btns #btn-cle {
    grid-area: cle;
  }
  .calculator__btns #btn-del {
    grid-area: del;
  }
  .calculator__btns #calculator__theme-header {
    grid-area: nbg;
  }
  .calculator__btns button {
    border-radius: clamp(11.25px, 3vmin, 20px);
  }
  .calculator__btns button::before {
    border-radius: clamp(9px, 2.75vmin, 16px);
  }
}
@media screen and (min-width: 768px) {
  .calculator__btns {
    grid-template-areas: unset;
  }
  .calculator__btns #btn-b0 {
    grid-area: unset;
  }
  .calculator__btns #btn-b1 {
    grid-area: unset;
  }
  .calculator__btns #btn-b2 {
    grid-area: unset;
  }
  .calculator__btns #btn-b3 {
    grid-area: unset;
  }
  .calculator__btns #btn-b4 {
    grid-area: unset;
  }
  .calculator__btns #btn-b5 {
    grid-area: unset;
  }
  .calculator__btns #btn-b6 {
    grid-area: unset;
  }
  .calculator__btns #btn-b7 {
    grid-area: unset;
  }
  .calculator__btns #btn-b8 {
    grid-area: unset;
  }
  .calculator__btns #btn-b9 {
    grid-area: unset;
  }
  .calculator__btns #btn-dec {
    grid-area: unset;
  }
  .calculator__btns #btn-add {
    grid-area: unset;
  }
  .calculator__btns #btn-sub {
    grid-area: unset;
  }
  .calculator__btns #btn-mul {
    grid-area: unset;
  }
  .calculator__btns #btn-exp {
    grid-area: unset;
  }
  .calculator__btns #btn-per {
    grid-area: unset;
  }
  .calculator__btns #btn-pa1 {
    grid-area: unset;
  }
  .calculator__btns #btn-pa2 {
    grid-area: unset;
  }
  .calculator__btns #btn-eq {
    grid-area: unset;
  }
  .calculator__btns #btn-cle {
    grid-area: unset;
  }
  .calculator__btns #btn-del {
    grid-area: unset;
  }
  .calculator__btns #calculator__theme-header {
    grid-area: 1/1/2/3;
  }
  .calculator__btns.mobile-active {
    animation: none;
  }
  .calculator__btns button {
    border-radius: clamp(11.25px, 3vmin, 20px);
  }
  .calculator__btns button::before {
    border-radius: clamp(9px, 2.75vmin, 16px);
  }
}
@media screen and (min-width: 1280px) {
  .calculator__btns button {
    border-radius: max(20px, 1.3vw);
  }
  .calculator__btns button::before {
    border-radius: max(16px, 1.04vw);
  }
}
.calculator__panel {
  padding: var(--SPACING-MD);
  margin: var(--SPACING-SM);
  margin-bottom: 0;
  color: var(--TEXT-COLOR);
  position: relative;
  animation: none;
}
.calculator__panel.mobile-active {
  animation: slide-down 0.85s forwards;
}
@keyframes slide-down {
  from {
    top: 0%;
    translate: 0 0;
  }
  to {
    top: 100%;
    translate: 0 -100%;
  }
}
@keyframes slide-up {
  from {
    top: 100%;
    translate: 0 -100%;
  }
  to {
    top: 0%;
    translate: 0 0%;
  }
}
.calculator__panel-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
}
.calculator__panel-header .calculator-error {
  justify-self: flex-start;
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding-left: var(--SPACING-MD);
  opacity: 0;
  color: var(--TEXT-COLOR);
  animation: unset;
  font-size: var(--FS-SM);
}
.calculator__panel-header #calculator-history-btn {
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--HEADER-SHADOW);
  color: var(--TEXT-COLOR);
  cursor: pointer;
  transition: border-radius 0.25s, filter 0.25s, box-shadow 0.25s, scale 0.125s;
  width: var(--FS-XL);
  aspect-ratio: 1/1;
  border-radius: 50% 50% 0 50%;
  font-size: var(--FS-SM);
  position: relative;
}
.calculator__panel-header #calculator-history-btn:hover, .calculator__panel-header #calculator-history-btn:focus-visible {
  filter: brightness(var(--BTN-HOVER-BRIGHTNESS));
}
.calculator__panel-header #calculator-history-btn:active, .calculator__panel-header #calculator-history-btn.pressed {
  scale: 0.975;
  filter: brightness(0.95);
  transition: filter 0.075s, scale 0.075s;
}
.calculator__panel-header #calculator-history-btn i {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.calculator__panel-header #calculator-history-btn #open-history {
  animation: fade-in 0.5s forwards;
}
.calculator__panel-header #calculator-history-btn #close-history {
  display: none;
  opacity: 0;
}
.calculator__panel-header #calculator-history-btn #close-history-mobile {
  opacity: 0;
}
.calculator__panel-header #calculator-history-btn.history-active {
  border-radius: 50% 0 50% 50%;
}
.calculator__panel-header #calculator-history-btn.history-active #open-history {
  animation: fade-out 0.25s forwards;
}
.calculator__panel-header #calculator-history-btn.history-active #close-history {
  animation: fade-in 0.5s forwards;
}
.calculator__panel-header #calculator-history-btn.history-active #close-history-mobile {
  animation: fade-in 0.5s forwards;
}
.calculator__panel-output {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  padding-top: 0.5rem;
}
.calculator__panel-output-main {
  font-size: var(--FS-XL);
  text-align: right;
  -ms-flex-positive: 1;
      flex-grow: 1;
  width: 100%;
  background-color: transparent;
  border: none;
  outline-color: transparent;
  padding: var(--SPACING-SM);
  padding-bottom: 0;
  margin-bottom: 3px;
  overflow-x: auto;
}
.calculator__panel-output-main::-webkit-scrollbar {
  height: 3px;
}
.calculator__panel-output-main::-webkit-scrollbar-track {
  background: var(--CALC-SCROLLBAR-TRACK);
  border-radius: 10px;
}
.calculator__panel-output-main::-webkit-scrollbar-thumb {
  background: var(--CALC-SCROLLBAR);
  border-radius: 10px;
}
.calculator__panel-output-main::-webkit-scrollbar-thumb:hover {
  background: var(--CALC-SCROLLBAR-HOVER);
}
.calculator__panel-output-prev {
  width: 100%;
  text-align: right;
  padding: var(--SPACING-SM);
  padding-bottom: 0;
  margin-bottom: 3px;
  overflow-x: auto;
  font-size: var(--FS-SM);
}
.calculator__panel-output-prev::-webkit-scrollbar {
  height: 3px;
}
.calculator__panel-output-prev::-webkit-scrollbar-track {
  background: var(--CALC-SCROLLBAR-TRACK);
  border-radius: 10px;
}
.calculator__panel-output-prev::-webkit-scrollbar-thumb {
  background: var(--CALC-SCROLLBAR);
  border-radius: 10px;
}
.calculator__panel-output-prev::-webkit-scrollbar-thumb:hover {
  background: var(--CALC-SCROLLBAR-HOVER);
}

@media screen and (min-width: 768px) {
  .calculator__panel {
    animation: none;
  }
  .calculator__panel.mobile-active {
    animation: none;
  }
  .calculator__panel-header #calculator-history-btn #close-history {
    display: inline-block;
  }
  .calculator__panel-header #calculator-history-btn #close-history-mobile {
    display: none;
  }
  .calculator__panel-header #calculator-history-btn.history-active {
    border-radius: 50% 50% 0 50%;
  }
}
.calculator__history {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: unset;
      justify-content: unset;
  -ms-flex-align: unset;
      align-items: unset;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  padding: var(--SPACING-MD);
  position: absolute;
  top: 30vh;
  transform: translateY(calc(-0.32 * clamp(100px, 80vh, 425px)));
  z-index: 2;
  width: clamp(150px, 95vw, 310px);
  height: var(--HISTORY-PANEL-MOBILE-HEIGHT);
  -ms-flex-item-align: start;
      align-self: flex-start;
  visibility: hidden;
  animation: none;
  -ms-flex-order: 1;
      order: 1;
  color: var(--TEXT-COLOR);
  animation: none;
}
.calculator__history.history-panel-active {
  visibility: visible;
  animation: show-history-panel-mobile 0.75s forwards;
}
.calculator__history.history-panel-mobile-fade-out {
  animation: fade-out 0.25s forwards !important;
}
.calculator__history.history-panel-mobile-fade-in {
  animation: fade-in 0.25s forwards !important;
}
@keyframes show-history-panel-mobile {
  from {
    height: 0;
    opacity: 0;
  }
  30% {
    opacity: 0.8;
  }
  to {
    opacity: 1;
    height: var(--HISTORY-PANEL-MOBILE-HEIGHT);
  }
}
@keyframes hide-history-panel-mobile {
  from {
    opacity: 1;
    visibility: visible;
    height: var(--HISTORY-PANEL-MOBILE-HEIGHT);
  }
  70% {
    opacity: 0.8;
  }
  to {
    height: 0;
    opacity: 0;
  }
}
.calculator__history-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  padding: var(--SPACING-SM);
  animation: fade-out 1.25s forwards;
}
.calculator__history-header.history-header-active {
  animation: fade-in 0.25s backwards;
}
.calculator__history-header button {
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--HEADER-SHADOW);
  color: var(--TEXT-COLOR);
  cursor: pointer;
  transition: border-radius 0.25s, filter 0.25s, box-shadow 0.25s, scale 0.125s;
  margin-right: var(--SPACING-XS);
  padding: var(--SPACING-MD) var(--SPACING-LG);
  font-size: var(--FS-SM);
}
.calculator__history-header button:hover, .calculator__history-header button:focus-visible {
  filter: brightness(var(--BTN-HOVER-BRIGHTNESS));
}
.calculator__history-header button:active, .calculator__history-header button.pressed {
  scale: 0.975;
  filter: brightness(0.95);
  transition: filter 0.075s, scale 0.075s;
}
.calculator__history-entries {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding: var(--SPACING-MD);
  padding-bottom: 0;
  margin: var(--SPACING-SM);
  overflow-x: hidden;
  overflow-y: auto;
  animation: fade-out 1.5s forwards;
}
.calculator__history-entries.entries-active {
  animation: fade-in 0.25s backwards;
}
.calculator__history-entries::-webkit-scrollbar {
  width: 2px;
}
.calculator__history-entries::-webkit-scrollbar-track {
  background: var(--CALC-SCROLLBAR-TRACK);
  border-radius: 10px;
}
.calculator__history-entries::-webkit-scrollbar-thumb {
  background: var(--CALC-SCROLLBAR);
  border-radius: 10px;
}
.calculator__history-entries::-webkit-scrollbar-thumb:hover {
  background: var(--CALC-SCROLLBAR-HOVER);
}
.calculator__history-entries .calculator__history-empty {
  text-align: center;
  animation: fade-in 0.35s;
  font-size: var(--FS-SM);
}
.calculator__history-entries .calculator__history-entry {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  border-top: 1px solid var(--CALC-HISTORY-BORDER-COLOR);
  padding: var(--SPACING-MD) 0;
}
.calculator__history-entries .calculator__history-entry .entry-header {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  gap: var(--SPACING-XS);
}
.calculator__history-entries .calculator__history-entry .entry-header-time {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding-left: var(--SPACING-MD);
  font-size: calc(var(--FS-SM) * 1.1);
}
.calculator__history-entries .calculator__history-entry .entry-header-copy, .calculator__history-entries .calculator__history-entry .entry-header-delete {
  background-color: transparent;
  color: var(--TEXT-COLOR);
  border: none;
  padding: var(--SPACING-MD);
  cursor: pointer;
  font-size: calc(var(--FS-SM) * 1.1);
  line-height: calc(var(--FS-SM) * 1.25);
  border-radius: clamp(2px, 2.25vw, 8px);
  display: grid;
  place-content: center;
  transition: transform 0.15s, background-color 0.125s;
}
.calculator__history-entries .calculator__history-entry .entry-header-copy > i, .calculator__history-entries .calculator__history-entry .entry-header-delete > i {
  scale: 1.1;
}
.calculator__history-entries .calculator__history-entry .entry-header-copy:hover, .calculator__history-entries .calculator__history-entry .entry-header-copy:focus-visible, .calculator__history-entries .calculator__history-entry .entry-header-delete:hover, .calculator__history-entries .calculator__history-entry .entry-header-delete:focus-visible {
  background-color: var(--PANEL-LIGHT);
}
.calculator__history-entries .calculator__history-entry .entry-header-copy:active, .calculator__history-entries .calculator__history-entry .entry-header-delete:active {
  transform: scale(0.925);
  transition: transform 0.075s;
  background-color: var(--PANEL-DARK);
}
.calculator__history-entries .calculator__history-entry .entry-body {
  width: 100%;
  padding: 0 var(--SPACING-MD);
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-input {
  width: 100%;
  text-align: right;
  margin-bottom: 3px;
  overflow-x: auto;
  font-size: var(--FS-SM);
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-input::-webkit-scrollbar {
  height: 1px;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-input::-webkit-scrollbar-track {
  background: var(--CALC-SCROLLBAR-TRACK);
  border-radius: 10px;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-input::-webkit-scrollbar-thumb {
  background: var(--CALC-SCROLLBAR);
  border-radius: 10px;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-input::-webkit-scrollbar-thumb:hover {
  background: var(--CALC-SCROLLBAR-HOVER);
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-output {
  width: 100%;
  font-size: var(--FS-MD);
  text-align: right;
  overflow-x: auto;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-output::-webkit-scrollbar {
  height: 1px;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-output::-webkit-scrollbar-track {
  background: var(--CALC-SCROLLBAR-TRACK);
  border-radius: 10px;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-output::-webkit-scrollbar-thumb {
  background: var(--CALC-SCROLLBAR);
  border-radius: 10px;
}
.calculator__history-entries .calculator__history-entry .entry-body .entry-output::-webkit-scrollbar-thumb:hover {
  background: var(--CALC-SCROLLBAR-HOVER);
}

@media screen and (max-width: 319.9px) and (min-aspect-ratio: 8/10) {
  .calculator__history {
    top: 0;
    transform: translateY(0);
    height: clamp(80px, 80vh, 300px);
  }
  .calculator__history-entries .calculator__history-entry .entry-header :is(.entry-header-copy, .entry-header-delete) {
    border-radius: clamp(2px, 1.75vh, 6px);
  }
}
@media screen and (min-width: 320px) {
  .calculator__history {
    transform: translateY(calc(-0.32 * clamp(340px, 75vh, 610px)));
    width: clamp(280px, 94vw, 450px);
  }
  .calculator__history-entries .calculator__history-entry .entry-header :is(.entry-header-copy, .entry-header-delete) {
    border-radius: clamp(4px, 2.25vw, 10px);
  }
}
@media screen and (min-width: 320px) and (max-width: 575.9px) and (min-aspect-ratio: 19/20) {
  .calculator__history {
    top: 0;
    transform: translateY(0);
    width: clamp(300px, 96vw, 550px);
  }
  .calculator__history-entries .calculator__history-entry .entry-header :is(.entry-header-copy, .entry-header-delete) {
    border-radius: clamp(5px, 2vh, 10px);
  }
}
@media screen and (min-width: 576px) {
  .calculator__history {
    transform: translateY(calc(-0.32 * clamp(510px, 84vh, 720px)));
    width: clamp(495px, 75vw, 530px);
  }
  .calculator__history-entries::-webkit-scrollbar {
    width: 3px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.9px) and (min-aspect-ratio: 20.5/19) {
  .calculator__history {
    top: 0;
    transform: translateY(0);
    width: clamp(525px, 90vw, 700px);
  }
  .calculator__history-entries .calculator__history-entry .entry-header :is(.entry-header-copy, .entry-header-delete) {
    border-radius: clamp(6px, 2vh, 10px);
  }
}
@media screen and (min-width: 768px) {
  .calculator__history {
    background-color: var(--CALC-BG-LIGHT);
    background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
    border-radius: 32px;
    border: 1px solid var(--CALC-BORDER-COLOR);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    box-shadow: var(--CALC-SHADOW);
    width: clamp(225px, 37vw, 307.5px);
    height: clamp(450px, 80vh, 615px);
    position: static;
    z-index: 0;
    -ms-flex-item-align: center;
        align-self: center;
    visibility: visible;
    overflow: hidden;
    display: none;
    animation: hide-history-panel 0.35s 0.05s backwards;
    transform: translateY(0);
  }
  .calculator__history.history-panel-active {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: unset;
        justify-content: unset;
    -ms-flex-align: unset;
        align-items: unset;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    animation: show-history-panel 0.35s forwards;
  }
  @keyframes show-history-panel {
    from {
      width: 0;
      opacity: 0;
    }
    30% {
      opacity: 0.8;
    }
    to {
      opacity: 1;
      width: clamp(225px, 37vw, 307.5px);
    }
  }
  @keyframes hide-history-panel {
    from {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: unset;
          justify-content: unset;
      -ms-flex-align: unset;
          align-items: unset;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      opacity: 1;
      width: clamp(225px, 37vw, 307.5px);
    }
    70% {
      opacity: 0.5;
    }
    to {
      width: 0;
      padding: 0;
      opacity: 0;
    }
  }
  .calculator__history-header {
    animation: fade-out 0.15s forwards;
  }
  .calculator__history-header.history-header-active {
    animation: fade-in 0.15s 0.125s backwards;
  }
  .calculator__history-entries {
    animation: fade-out 0.15s forwards;
  }
  .calculator__history-entries.entries-active {
    animation: fade-in 0.15s 0.125s backwards;
  }
  .calculator__history-entries .calculator__history-entry .entry-header {
    gap: 0;
  }
  .calculator__history-entries .calculator__history-entry .entry-header-time {
    font-size: var(--FS-SM);
  }
  .calculator__history-entries .calculator__history-entry .entry-header-copy, .calculator__history-entries .calculator__history-entry .entry-header-delete {
    font-size: var(--FS-SM);
    line-height: var(--FS-SM);
  }
  .calculator__history-entries .calculator__history-entry .entry-header :is(.entry-header-copy, .entry-header-delete) {
    border-radius: max(9px, 0.585vw);
  }
}
@media screen and (min-width: 1024px) {
  .calculator__history {
    width: 325px;
    height: clamp(550px, 81vh, 650px);
  }
  @keyframes show-history-panel {
    from {
      width: 0;
      opacity: 0;
    }
    30% {
      opacity: 0.8;
    }
    to {
      opacity: 1;
      width: 325px;
    }
  }
  @keyframes hide-history-panel {
    from {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: unset;
          justify-content: unset;
      -ms-flex-align: unset;
          align-items: unset;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      opacity: 1;
      width: 325px;
    }
    70% {
      opacity: 0.5;
    }
    to {
      width: 0;
      padding: 0;
      opacity: 0;
    }
  }
}
@media screen and (min-width: 1280px) {
  .calculator__history {
    width: max(325px, 20.5vw);
    height: max(650px, 41vw);
    border-radius: max(32px, 2.08vw);
  }
  @keyframes show-history-panel {
    from {
      width: 0;
      opacity: 0;
    }
    30% {
      opacity: 0.8;
    }
    to {
      opacity: 1;
      width: max(325px, 20.5vw);
    }
  }
  @keyframes hide-history-panel {
    from {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: unset;
          justify-content: unset;
      -ms-flex-align: unset;
          align-items: unset;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      opacity: 1;
      width: max(325px, 20.5vw);
    }
    70% {
      opacity: 0.5;
    }
    to {
      width: 0;
      padding: 0;
      opacity: 0;
    }
  }
}
.github__btn {
  padding: var(--SPACING-SM);
  font-size: var(--FS-MD);
  font-weight: bold;
  text-decoration: none;
  background: none;
  border: none;
  display: none;
}
.github__btn i {
  font-size: var(--FS-BTN-LG);
}

@media screen and (min-width: 768px) {
  .github__btn {
    display: block;
  }
}
.credits {
  color: var(--TEXT-COLOR);
  padding: var(--SPACING-SM);
  font-size: var(--FS-SM);
  display: none;
}
@media screen and (min-width: 768px) {
  .credits {
    display: block;
  }
}
.mobile-options {
  position: absolute;
  right: var(--SPACING-XL);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.mobile-options__button {
  color: var(--TEXT-COLOR);
  cursor: pointer;
  border-radius: 10px;
  padding: var(--SPACING-SM) var(--SPACING-MD);
  background: none;
  border: none;
  font-size: var(--FS-LG);
  transition: filter 0.125s, transform 0.125s;
}
.mobile-options__button:hover, .mobile-options__button:focus-visible {
  filter: brightness(1.075);
  transform: translate(0, -1%);
}
.mobile-options__button:active {
  filter: brightness(0.925);
  transform: translate(0, 1%);
  transition: filter 0.075s, transform 0.075s;
}
.mobile-options__panel {
  display: none;
  position: absolute;
  right: var(--SPACING-MD);
  padding: var(--SPACING-MD);
  background-color: var(--MOBILE-PANEL);
  border-radius: 7px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  box-shadow: 1px 2px 10px var(--CALC-SHADOW-COLOR);
  animation: fade-out-mobile 0.25s backwards;
}
@keyframes fade-out-mobile {
  from {
    opacity: 1;
    display: block;
  }
  to {
    opacity: 0;
  }
}
.mobile-options__panel.panel-active {
  display: block;
  animation: fade-in 0.25s forwards;
}
.mobile-options__panel button, .mobile-options__panel a {
  color: var(--TEXT-COLOR);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  gap: var(--SPACING-MD);
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: var(--SPACING-MD);
  text-decoration: none;
  border-radius: 5px;
  font-size: var(--FS-MD);
  transition: background-color 0.125s, scale 0.125s;
}
.mobile-options__panel button:hover, .mobile-options__panel a:hover {
  background-color: var(--PANEL-DARK);
}
.mobile-options__panel button:active, .mobile-options__panel a:active {
  transform: translateY(1%);
  scale: 0.975;
  filter: brightness(0.95);
}
.mobile-options__panel .mobile-options__themes-current {
  display: inline-block;
  width: var(--FS-MD);
  height: var(--FS-MD);
  background-color: var(--MAIN-COLOR);
  border-radius: 50%;
  border: 1px solid var(--TEXT-COLOR);
}
.mobile-options__cover {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 4;
}
.mobile-options__cover.panel-active {
  display: block;
}

@media screen and (min-width: 768px) {
  .mobile-options {
    display: none;
  }
  .mobile-options__cover.panel-active {
    display: none;
  }
}
.themes {
  display: block;
}
.themes__btn {
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--HEADER-SHADOW);
  color: var(--TEXT-COLOR);
  cursor: pointer;
  transition: border-radius 0.25s, filter 0.25s, box-shadow 0.25s, scale 0.125s;
  display: none;
  gap: var(--SPACING-SM);
  padding: var(--SPACING-MD);
  font-size: var(--FS-SM);
}
.themes__btn:hover, .themes__btn:focus-visible {
  filter: brightness(var(--BTN-HOVER-BRIGHTNESS));
}
.themes__btn:active, .themes__btn.pressed {
  scale: 0.975;
  filter: brightness(0.95);
  transition: filter 0.075s, scale 0.075s;
}
.themes__btn .themes__current {
  width: var(--FS-SM);
  height: var(--FS-SM);
  background-color: var(--MAIN-COLOR);
  border-radius: 50%;
  border: 1px solid var(--TEXT-COLOR);
}
.themes__btn #open-themes {
  animation: fade-in 0.5s forwards;
}
.themes__btn #close-themes {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-80%, -45%);
  opacity: 0;
}
.themes__btn.themes-active #open-themes {
  animation: fade-out 0.25s forwards;
}
.themes__btn.themes-active #close-themes {
  animation: fade-in 0.5s forwards;
}
.themes__panel {
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--CALC-SHADOW);
  border-radius: 16px;
  z-index: 3;
  display: none;
  position: absolute;
  top: calc(30vh + 2 * var(--SPACING-MD) + var(--FS-XL));
  left: 50%;
  transform: translate(-50%, -32%);
  width: clamp(150px, 95vw, 310px);
  height: clamp(100px, 80vh, 425px);
  gap: var(--SPACING-MD);
  padding: calc(var(--SPACING-XL) * 4);
}
.themes__panel-mobile-current {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  gap: var(--SPACING-MD);
  color: var(--TEXT-COLOR);
  font-size: var(--FS-LG);
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
}
.themes__panel-mobile-current .themes__current {
  width: var(--FS-LG);
  height: var(--FS-LG);
  background-color: var(--MAIN-COLOR);
  border-radius: 50%;
  border: 1px solid var(--TEXT-COLOR);
}
.themes__panel-mobile-close {
  color: var(--TEXT-COLOR);
  cursor: pointer;
  transition: border-radius 0.25s, filter 0.25s, box-shadow 0.25s, scale 0.125s;
  background-color: transparent;
  border: none;
  position: absolute;
  top: var(--SPACING-XL);
  right: var(--SPACING-XL);
  font-size: var(--FS-LG);
  line-height: var(--FS-LG);
}
.themes__panel-mobile-close:hover, .themes__panel-mobile-close:focus-visible {
  filter: brightness(var(--BTN-HOVER-BRIGHTNESS));
}
.themes__panel-mobile-close:active, .themes__panel-mobile-close.pressed {
  scale: 0.975;
  filter: brightness(0.95);
  transition: filter 0.075s, scale 0.075s;
}
.themes__panel-mobile-close:active {
  scale: 0.9;
}
.themes__panel-option {
  width: calc(var(--FS-LG) * 1.5);
  height: calc(var(--FS-LG) * 1.5);
  background: white;
  border-radius: 50%;
  border: 1px solid black;
  cursor: pointer;
  transition: transform 0.15s;
}
.themes__panel-option:hover, .themes__panel-option:focus-visible {
  transform: scale(1.125);
}
.themes__panel-option:active {
  transform: scale(0.85);
  transition: transform 0.075s;
}
.themes__panel.panel-active {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  animation: fade-in 0.25s forwards;
}

@media screen and (max-width: 319.9px) and (min-aspect-ratio: 8/10) {
  .themes .themes__panel {
    top: calc(2 * var(--SPACING-MD) + var(--FS-XL));
    transform: translate(-50%, 0);
    height: clamp(80px, 80vh, 300px);
    border-radius: 12px;
  }
  .themes .themes__panel-mobile-current {
    top: 5%;
  }
  .themes .themes__panel-option {
    width: var(--FS-XL);
    height: var(--FS-XL);
  }
}
@media screen and (min-width: 320px) {
  .themes .themes__panel {
    width: clamp(280px, 94vw, 450px);
    height: clamp(340px, 75vh, 610px);
    border-radius: clamp(22px, 5.5vw, 28px);
  }
  .themes .themes__panel-mobile-current {
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 320px) and (max-width: 575.9px) and (min-aspect-ratio: 19/20) {
  .themes .themes__panel {
    top: calc(2 * var(--SPACING-MD) + var(--FS-XL));
    transform: translate(-50%, 0);
    width: clamp(300px, 96vw, 550px);
    height: clamp(200px, 85vh, 420px);
    border-radius: 28px;
  }
  .themes .themes__panel-mobile-current {
    top: 5%;
  }
}
@media screen and (min-width: 576px) {
  .themes .themes__panel {
    width: clamp(495px, 75vw, 530px);
    height: clamp(510px, 84vh, 720px);
  }
  .themes .themes__panel-mobile-current {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 576px) and (max-width: 767.9px) and (min-aspect-ratio: 20.5/19) {
  .themes .themes__panel {
    top: calc(2 * var(--SPACING-MD) + var(--FS-XL));
    transform: translate(-50%, 0);
    width: clamp(525px, 90vw, 700px);
    height: clamp(260px, 80vh, 575px);
    border-radius: 30px;
  }
  .themes .themes__panel-mobile-current {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 768px) {
  .themes {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: var(--SPACING-XL);
  }
  .themes__btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
  }
  .themes .themes__panel {
    background-color: var(--CALC-BG-LIGHT);
    background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
    border-radius: 32px;
    border: 1px solid var(--CALC-BORDER-COLOR);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    box-shadow: var(--HEADER-SHADOW);
    z-index: 1;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(0%);
    height: auto;
    width: auto;
    gap: var(--SPACING-SM);
    padding: var(--SPACING-MD);
    border-radius: 10px;
    margin-top: var(--SPACING-MD);
    width: unset;
    height: unset;
  }
  .themes .themes__panel-mobile-current {
    display: none;
  }
  .themes .themes__panel-mobile-close {
    display: none;
  }
  .themes .themes__panel-option {
    width: var(--FS-SM);
    height: var(--FS-SM);
    background: white;
    border-radius: 50%;
    border: 1px solid black;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .themes .themes__panel-option:hover, .themes .themes__panel-option:focus-visible {
    transform: scale(1.125);
  }
  .themes .themes__panel-option:active {
    transform: scale(0.95);
    transition: transform 0.075s;
  }
  .themes .themes__panel.panel-active {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    animation: none;
  }
}
@media screen and (min-width: 1280px) {
  .themes .themes__panel {
    border-radius: max(10px, 0.65vw);
  }
}
.keyboard-shortcuts {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: var(--SPACING-LG);
  color: var(--TEXT-COLOR);
}
.keyboard-shortcuts__btn {
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--HEADER-SHADOW);
  color: var(--TEXT-COLOR);
  cursor: pointer;
  transition: border-radius 0.25s, filter 0.25s, box-shadow 0.25s, scale 0.125s;
  padding: var(--SPACING-MD);
  padding-right: calc(var(--SPACING-MD) + 2px);
  position: relative;
  transform: translateY(-50%);
  font-size: var(--FS-SM);
}
.keyboard-shortcuts__btn:hover, .keyboard-shortcuts__btn:focus-visible {
  filter: brightness(var(--BTN-HOVER-BRIGHTNESS));
}
.keyboard-shortcuts__btn:active, .keyboard-shortcuts__btn.pressed {
  scale: 0.975;
  filter: brightness(0.95);
  transition: filter 0.075s, scale 0.075s;
}
.keyboard-shortcuts__btn #open-keyboard-shortcuts {
  animation: fade-in 0.5s forwards;
}
.keyboard-shortcuts__btn #close-keyboard-shortcuts {
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(80%, -45%);
  opacity: 0;
}
.keyboard-shortcuts__btn.keyboard-shortcuts-active #open-keyboard-shortcuts {
  animation: fade-out 0.25s forwards;
}
.keyboard-shortcuts__btn.keyboard-shortcuts-active #close-keyboard-shortcuts {
  animation: fade-in 0.5s forwards;
}
.keyboard-shortcuts__panel {
  display: none;
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--HEADER-SHADOW);
  padding: var(--SPACING-MD);
  border-radius: 10px;
  position: relative;
  border-collapse: collapse;
  overflow: hidden;
  animation: hide-keyboard-shortcuts-panel 0.5s forwards;
  z-index: 2;
}
.keyboard-shortcuts__panel.panel-active {
  display: block;
  animation: show-keyboard-shortcuts-panel 0.5s forwards;
}
@keyframes show-keyboard-shortcuts-panel {
  from {
    height: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  30% {
    padding-bottom: var(--SPACING-MD);
    opacity: 0.8;
  }
  to {
    opacity: 1;
    height: var(--KEYBOARD-SHORTCUTS-HEIGHT);
  }
}
@keyframes hide-keyboard-shortcuts-panel {
  from {
    display: block;
    opacity: 1;
    height: var(--KEYBOARD-SHORTCUTS-HEIGHT);
    padding-bottom: var(--SPACING-MD);
  }
  70% {
    opacity: 0.5;
  }
  to {
    height: 0;
    opacity: 0;
    padding-bottom: 0;
  }
}
.keyboard-shortcuts__panel tbody tr {
  position: relative;
}
.keyboard-shortcuts__panel tbody tr td:first-child {
  padding: var(--SPACING-SM) 0 var(--SPACING-MD) 0;
  position: relative;
  padding-right: var(--SPACING-MD);
}
.keyboard-shortcuts__panel tbody tr td:first-child .kbd {
  display: inline;
}
.keyboard-shortcuts__panel tbody tr td:first-child .kbd kbd {
  z-index: 1;
  vertical-align: middle;
  border-radius: 5px;
  padding: 1px 5px;
  border: 1px solid var(--TEXT-COLOR);
  box-shadow: 0 1px 0 var(--TEXT-COLOR);
  font-size: calc(var(--FS-XS) - 1px);
}
.keyboard-shortcuts__panel tbody tr td:first-child .line {
  z-index: 3;
  width: 0px;
  height: 1px;
  background-color: var(--TEXT-COLOR);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(calc(-1 * var(--SPACING-MD)), -50%);
}
.keyboard-shortcuts__panel tbody tr td:last-child {
  font-size: var(--FS-XS);
}
.keyboard-shortcuts__panel th {
  text-align: left;
  padding-bottom: var(--SPACING-SM);
  font-size: var(--FS-SM);
}

@media screen and (min-width: 768px) {
  .keyboard-shortcuts {
    display: block;
  }
}
@media screen and (min-width: 1280px) {
  .keyboard-shortcuts .keyboard-shortcuts__panel {
    border-radius: max(10px, 0.65vw);
  }
}
header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  padding: var(--SPACING-MD);
  background-color: var(--MAIN-COLOR-COVER);
  position: relative;
}
header h1 {
  font-size: var(--FS-LG);
  line-height: var(--FS-XL);
  text-align: center;
  color: var(--TEXT-COLOR);
  transform: translateX(1.25%);
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: var(--SPACING-XL);
  margin-bottom: var(--SPACING-LG);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
}

@media screen and (max-width: 1120px) {
  footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: end;
        align-items: flex-end;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    margin-bottom: var(--SPACING-MD);
  }
  footer .github__btn {
    -ms-flex-order: 1;
        order: 1;
  }
  footer .github__btn i {
    font-size: var(--FS-MD);
  }
}
#outer-container {
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: unset;
      justify-content: unset;
  -ms-flex-align: unset;
      align-items: unset;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  background-position: center;
  background-size: cover;
}

.calculator__container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  height: 100%;
  background-color: var(--MAIN-COLOR-COVER);
  position: relative;
}
.calculator__container .calculator {
  background-color: var(--CALC-BG-LIGHT);
  background-image: linear-gradient(135deg, var(--CALC-BG-DARK), var(--CALC-BG-LIGHT), var(--CALC-BG-LIGHT), var(--CALC-BG-DARK));
  border-radius: 32px;
  border: 1px solid var(--CALC-BORDER-COLOR);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: var(--CALC-SHADOW);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: unset;
      justify-content: unset;
  -ms-flex-align: unset;
      align-items: unset;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  padding: var(--SPACING-MD);
  position: absolute;
  z-index: 1;
  overflow: hidden;
  animation: none;
  width: clamp(150px, 95vw, 310px);
  height: clamp(100px, 80vh, 425px);
  top: 30vh;
  transform: translateY(-32%);
  border-radius: 16px;
}

@media screen and (max-width: 319.9px) and (min-aspect-ratio: 8/10) {
  .calculator__container .calculator {
    top: 0;
    transform: translateY(0);
    height: clamp(80px, 80vh, 300px);
    border-radius: 12px;
  }
}
@media screen and (max-width: 319.9px) and (min-aspect-ratio: 25/20) {
  .calculator__panel .calculator__panel-output .calculator__panel-output-prev {
    display: none;
  }
  .calculator__panel .calculator__panel-output .calculator__panel-output-main {
    padding: none;
    font-size: var(--FS-BTN-LG);
  }
}
@media screen and (min-width: 320px) {
  .calculator__container .calculator {
    width: clamp(280px, 94vw, 450px);
    height: clamp(340px, 75vh, 610px);
    border-radius: clamp(22px, 5.5vw, 28px);
  }
}
@media screen and (min-width: 320px) and (max-width: 575.9px) and (min-aspect-ratio: 25/19) {
  .calculator__panel .calculator__panel-output .calculator__panel-output-prev {
    display: none;
  }
  .calculator__panel .calculator__panel-output .calculator__panel-output-main {
    padding: none;
    font-size: var(--FS-BTN-LG);
  }
  .calculator__container .calculator {
    top: 0;
    transform: translateY(0);
    width: clamp(300px, 85vw, 550px) !important;
    border-radius: 22px !important;
  }
  .themes .themes__panel {
    border-radius: 22px !important;
  }
  .themes .themes__panel {
    width: clamp(300px, 85vw, 550px) !important;
  }
  .calculator__history {
    width: clamp(300px, 85vw, 550px) !important;
  }
  :root {
    --FS-BTN-LG: clamp(0.85rem, 3.75vw, 1.65rem) !important;
    --FS-BTN-MD: clamp(0.45rem, 3vw, 1.15rem) !important;
    --FS-BTN-SM: clamp(0.25rem, 2.5vw, 0.9rem) !important;
  }
}
@media screen and (min-width: 320px) and (max-width: 575.9px) and (min-aspect-ratio: 19/20) {
  .calculator__container .calculator {
    top: 0;
    transform: translateY(0);
    width: clamp(300px, 96vw, 550px);
    height: clamp(200px, 85vh, 420px);
    border-radius: 28px;
  }
}
@media screen and (min-width: 576px) {
  .calculator__container .calculator {
    width: clamp(495px, 75vw, 530px);
    height: clamp(510px, 84vh, 720px);
  }
}
@media screen and (min-width: 576px) and (max-width: 767.9px) and (min-aspect-ratio: 25/16) {
  .calculator__panel .calculator__panel-output .calculator__panel-output-prev {
    display: none;
  }
  .calculator__panel .calculator__panel-output .calculator__panel-output-main {
    padding: none;
    font-size: var(--FS-BTN-LG);
  }
  .calculator__container .calculator {
    top: 0;
    transform: translateY(0);
    width: clamp(500px, 80vw, 570px) !important;
    border-radius: 20px !important;
  }
  .themes .themes__panel {
    border-radius: 20px !important;
  }
  .themes .themes__panel {
    width: clamp(500px, 80vw, 570px) !important;
  }
  .calculator__history {
    width: clamp(500px, 80vw, 570px) !important;
  }
  :root {
    --FS-BTN-LG: clamp(1.35rem, 3.65vw, 1.75rem) !important;
    --FS-BTN-MD: clamp(0.85rem, 2.65vw, 1.3rem) !important;
    --FS-BTN-SM: clamp(0.75rem, 2.375vw, 1.15rem) !important;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.9px) and (min-aspect-ratio: 20.5/19) {
  .calculator__container .calculator {
    top: 0;
    transform: translateY(0);
    width: clamp(525px, 90vw, 700px);
    height: clamp(260px, 80vh, 575px);
    border-radius: 30px;
  }
}
@media screen and (min-width: 768px) {
  .calculator__container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    position: static;
  }
  .calculator__container .calculator {
    position: relative;
    top: unset;
    transform: translateY(0);
    width: clamp(375px, 55vw, 450px);
    height: clamp(450px, 80vh, 615px);
    border-radius: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .calculator__container .calculator {
    width: clamp(450px, 45vw, 475px);
    height: clamp(550px, 81vh, 650px);
  }
}
@media screen and (min-width: 1280px) {
  .calculator__container .calculator {
    width: max(475px, 30vw);
    height: max(650px, 41.1vw);
    border-radius: max(32px, 2.08vw);
  }
}/*# sourceMappingURL=style.css.map */