/* --- general (shared) */
:root {
  --g0: 0px;
  --g0h: 4px;
  --g1: 8px;
  --g1h: 12px;
  --g2: 16px;
  --g3: 24px;
  --g5: 40px;
  --font-primary: 'Montserrat';
  --font-secondary: 'Nunito Sans';
  --r4: 4px;
  --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  --transition-800: 800ms var(--timing-function) 0ms;
  --transition-450: 450ms var(--timing-function) 0ms;
  --transition-300: 300ms var(--timing-function) 0ms;
  --transition-150: 150ms var(--timing-function) 0ms;
  --filter-for-hover: brightness(110%);
  --filter-for-active: brightness(90%);
  --filter-for-hover-inversed: brightness(95%);
  --filter-for-active-inversed: brightness(90%);
  /* day theme */
  --day-sh4: 0 2px 4px rgba(0, 0, 0, 0.16);
  --day-sh6: 0 3px 6px rgba(0, 0, 0, 0.16);
  --day-sh10: 0 5px 10px rgba(0, 0, 0, 0.16);
  --day-sh12: 0 0px 12px rgba(0, 0, 0, 0.1);
  --day-color-link: #1BA2F9;
  --day-color-link-shadow: rgba(27, 162, 249, 0.4);
  --day-color-text-normal: #3F3E3F;
  --day-color-text-bleak: #8C8B8C;
  --day-color-text-inversed: #FFFFFF;
  --day-color-text-passive: #A5AAAF;
  --day-color-icon-passive: #D8DADD;
  --day-color-text-actionable: #415B72;
  --day-color-icon-actionable: #738398;
  --day-color-border-light: #F5F5F6;
  --day-color-border-dark: #EFEFEF;
  --day-color-bg-light-3: #FFFFFF;
  --day-color-bg-light-2: #FCFCFD;
  --day-color-bg-light-1: #F7F7F9;
  --day-color-bg-neutral: #A5AAAE;
  --day-color-positive: #74BE86;
  --day-color-error: #E34E21;
  --day-color-attention: #FFCC24;
  --day-color-primary: #556180;
  --day-color-dark: #2C2D2F;
  /* night theme */
  --night-sh4: 0 1px 4px rgba(0, 0, 0, 0.4);
  --night-sh6: 0 2px 6px rgba(0, 0, 0, 0.4);
  --night-sh10: 0 3px 10px rgba(0, 0, 0, 0.4);
  --night-sh12: 0 0px 12px rgba(0, 0, 0, 0.4);
  --night-color-link: #33ABF8;
  --night-color-link-shadow: rgba(27, 162, 249, 0.4);
  --night-color-text-normal: #F2F2F2;
  --night-color-text-bleak: #B8B9BA;
  --night-color-text-inversed: #000000;
  --night-color-text-passive: #E7EAEB;
  --night-color-icon-passive: #5D6064;
  --night-color-text-actionable: #D0ECFF;
  --night-color-icon-actionable: #738398;
  --night-color-border-light: #37383A;
  --night-color-border-dark: #222121;
  --night-color-bg-light-3: #303134;
  --night-color-bg-light-2: #202124;
  --night-color-bg-light-1: #292A2D;
  --night-color-bg-neutral: #A5AAAE;
  --night-color-positive: #98C9A4;
  --night-color-error: #E94351;
  --night-color-attention: #FFD857;
  --night-color-primary: #00D8FF;
  --night-color-dark: #2C2D2F; }

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  height: 100%;
  font-size: 1em !important;
  line-height: 1.4; }

::-moz-selection, ::selection {
  background: #A5AAAF;
  text-shadow: none; }

body {
  --sh4: var(--day-sh4);
  --sh6: var(--day-sh6);
  --sh10: var(--day-sh10);
  --sh12: var(--day-sh12);
  --color-link: var(--day-color-link);
  --color-link-shadow: var(--day-color-link-shadow);
  --color-text-normal: var(--day-color-text-normal);
  --color-text-inversed: var(--day-color-text-inversed);
  --color-text-bleak: var(--day-color-text-bleak);
  --color-text-passive: var(--day-color-text-passive);
  --color-icon-passive: var(--day-color-icon-passive);
  --color-text-actionable: var(--day-color-text-actionable);
  --color-icon-actionable: var(--day-color-icon-actionable);
  --color-border-light: var(--day-color-border-light);
  --color-border-dark: var(--day-color-border-dark);
  --color-bg-light-3: var(--day-color-bg-light-3);
  --color-bg-light-2: var(--day-color-bg-light-2);
  --color-bg-light-1: var(--day-color-bg-light-1);
  --color-bg-neutral: var(--day-color-bg-neutral);
  --color-positive: var(--day-color-positive);
  --color-error: var(--day-color-error);
  --color-attention: var(--day-color-attention);
  --color-primary: var(--day-color-primary);
  --color-dark: var(--day-color-dark);
  color: var(--day-color-text-normal);
  background: var(--day-color-bg-light-2); }

body.theme-night {
  --sh4: var(--night-sh4);
  --sh6: var(--night-sh6);
  --sh10: var(--night-sh10);
  --sh12: var(--night-sh12);
  --color-link: var(--night-color-link);
  --color-link-shadow: var(--night-color-link-shadow);
  --color-text-normal: var(--night-color-text-normal);
  --color-text-bleak: var(--night-color-text-bleak);
  --color-text-inversed: var(--night-color-text-inversed);
  --color-text-passive: var(--night-color-text-passive);
  --color-icon-passive: var(--night-color-icon-passive);
  --color-text-actionable: var(--night-color-text-actionable);
  --color-icon-actionable: var(--night-color-icon-actionable);
  --color-border-light: var(--night-color-border-light);
  --color-border-dark: var(--night-color-border-dark);
  --color-bg-light-3: var(--night-color-bg-light-3);
  --color-bg-light-2: var(--night-color-bg-light-2);
  --color-bg-light-1: var(--night-color-bg-light-1);
  --color-bg-neutral: var(--night-color-bg-neutral);
  --color-positive: var(--night-color-positive);
  --color-error: var(--night-color-error);
  --color-attention: var(--night-color-attention);
  --color-primary: var(--night-color-primary);
  --color-dark: var(--night-color-dark);
  color: var(--night-color-text-normal);
  background: var(--night-color-dark); }

body {
  display: flex;
  font-family: var(--font-primary), Noto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  width: 100%;
  height: 100vh; }

button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  user-select: none;
  padding: 0;
  margin: 0; }

svg {
  font-family: var(--font-primary), Noto, sans-serif;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  transform: translateZ(0); }

audio, canvas, iframe, img, svg, video {
  vertical-align: top; }

input, textarea {
  font-family: var(--font-primary), Noto, sans-serif;
  user-select: text; }

textarea {
  resize: none; }

select:invalid {
  color: #A5AAAF; }

b {
  font-weight: 700; }

a {
  color: var(--color-link);
  text-decoration: none; }

::-webkit-scrollbar {
  display: none; }