@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

 *, *:after, *:before {
	 box-sizing: border-box;
}
 :root {
	 --c-text-primary: #191919;
	 --c-text-secondary: #737374;
	 --c-border-primary: #ccc;
	 --c-bg-body: #ccc;
	 --c-bg-primary: #fff;
	 --c-bg-secondary: #d4d8dd;
	 --c-bg-button: #fff;
	 --slider-shadow: inset 0 1px 1px #ddd, 0 2px 3px #ccc;
}
 :root.dark-theme {
	 --c-text-primary: #eee;
	 --c-text-secondary: #d3d5db;
	 --c-border-primary: #454545;
	 --c-bg-primary: #323339;
	 --c-bg-secondary: #222128;
	 --c-bg-button: #494a50;
	 --slider-shadow: inset 0 1px 1px #767676;
}
 :root.black-theme {
	 --c-text-primary: #edeeef;
	 --c-text-secondary: #d4d7e1;
	 --c-border-primary: #323232;
	 --c-bg-primary: #1b1d23;
	 --c-bg-secondary: #000001;
	 --c-bg-button: #343844;
	 --slider-shadow: inset 0 1px 1px #555;
}
 body {
	 font-family: "Inter", sans-serif;
	 line-height: 1.5;
	 min-height: 100vh;
	 display: flex;
	 align-items: flex-end;
	 justify-content: center;
	 background-color: var(--c-bg-body);
	 color: var(--c-text-primary);
}
 .menu {
	 width: 90%;
	 max-width: 320px;
	 background-color: var(--c-bg-primary);
	 transition: background-color 0.15s ease;
	 border-radius: 10px 10px 0 0;
	 box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 -4px 16px rgba(0, 0, 0, 0.1);
}
 .menu-header {
	 padding: 1rem;
}
 .menu-header-title {
	 font-size: 0.875rem;
	 color: var(--c-text-secondary);
	 margin-bottom: 0.375rem;
	 font-weight: 500;
}
 .theme-switcher {
	 background-color: var(--c-bg-secondary);
	 border-radius: 10px;
	 display: flex;
	 padding: 0 3px;
	 align-items: center;
	 position: relative;
	 overflow: hidden;
}
 .theme-switcher .slider {
	 display: block;
	 position: absolute;
	 z-index: 1;
	 width: calc((100% - 6px) / 3);
	 top: 3px;
	 transform: translatex(-110%);
	 bottom: 3px;
	 border-radius: 6px;
	 transition: 0.15s ease, transform 0.25s ease-out;
	 background-color: var(--c-bg-button);
	 box-shadow: var(--slider-shadow);
}
 .theme-switcher input {
	 display: none;
}
 .theme-switcher input:nth-of-type(1):checked ~ .slider {
	 transform: translateX(0);
}
 .theme-switcher input:nth-of-type(2):checked ~ .slider {
	 transform: translateX(100%);
}
 .theme-switcher input:nth-of-type(3):checked ~ .slider {
	 transform: translateX(200%);
}
 .theme-switcher label {
	 position: relative;
	 z-index: 2;
	 width: calc(100% / 3);
	 color: var(--c-text-secondary);
}
 .theme-switcher label span {
	 padding: 8px 0;
	 border-radius: 6px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 font-weight: 500;
}
 .theme-switcher label svg {
	 display: inline-block;
	 margin-right: 0.5rem;
	 width: 20px;
}
 .menu-body {
	 display: flex;
	 flex-direction: column;
	 padding: 0.5rem;
	 border-top: 1px solid var(--c-border-primary);
	 transition: border-color 0.15s ease;
}
 .menu-body a {
	 text-decoration: none;
	 color: inherit;
	 display: flex;
	 align-items: center;
	 padding: 0.625rem 0.5rem;
	 border-radius: 4px;
	 font-weight: 500;
	 transition: 0.15s ease;
}
 .menu-body a svg {
	 margin-right: 1rem;
	 color: var(--c-text-secondary);
	 transition: color 0.15s ease;
}
 .menu-body a:hover {
	 background-color: var(--c-bg-secondary);
}