:root {
    --muted-color: #888;
    --danger-color: #ff1917;
    --positive-color: #1f8a4c;
    --telegram-color: #0088cc;
    --avatar-bg: #bdc3c7;
    --separator-color: rgba(0, 0, 0, 0.08);
    --form-separator-color: rgba(0, 0, 0, 0.1);
    --vibe-good-bg: #e7f6ec;
    --vibe-good-color: #1b7a3d;
    --vibe-bad-bg: #fdeceb;
    --vibe-bad-color: #c62a22;
    --rating-selected-color: #fff;
    --button-emphasis-bg: #111;
    --button-emphasis-hover-bg: var(--brighter-text-color);
    --form-reveal-shadow: 0 10px 28px rgba(51, 51, 51, 0.16), 0 2px 8px rgba(51, 51, 51, 0.08);
    --form-reveal-shadow-hover: 0 16px 36px rgba(51, 51, 51, 0.24), 0 4px 12px rgba(51, 51, 51, 0.12);
    --rating-positive-hover-bg: #e7f6ee;
    --rating-negative-hover-bg: #fdecec;

    --sans-font: "Ubuntu", Helvetica, Verdana, sans-serif;
    --serif-font: Georgia, Times, serif;

    --max-page-width: 1600px;
    --sidebar-width: 280px;
    --sidebar-icon-size: 28px;
    --sidebar-item-padding-x: 20px;
    --index-gap: 40px;
    --search-gap: 12px;
    --page-padding: 20px;
    --header-padding-top: 32px;
    --block-padding: 30px;
    --body-font-size: 15px;
    --item-content-width: 600px;
    --highlight-bg: rgba(0, 0, 0, 0.05);
    --highlight-bg-active: rgba(0, 0, 0, 0.12);

    --block-border-radius: 15px;
    --button-border-radius: 15px;
    --input-border-radius: 10px;

    --button-color: #fff;
    --button-bg-color: var(--text-color);
    --button-border: solid 2px var(--button-bg-color);
    --button-hover-color: var(--text-color);
    --button-hover-bg-color: var(--block-bg-color);
    --button-hover-border: var(--button-border);
    --button-disabled-bg-color: #DDD;

    --input-font-size: 120%;
    --input-shadow: 0 4px 8px -2px rgba(9, 30, 66, .25), 0 0 0 1px rgba(9, 30, 66, .08);
    --input-shadow-focus: 0 4px 12px -2px rgba(9, 30, 66, .45), 0 0 0 1px rgba(9, 30, 66, .32);

    --badge-color: rgba(255, 196, 85, 0.91);

    --inline-block-bg-default: #f2f3f5;
    --inline-block-hover-bg: #e4e6ea;

    --bg-color: #FCFDFF;
    --opposite-bg-color: #282c35;

    --text-color: #333;
    --brighter-text-color: #000;
    --opposite-text-color: #DDD;

    --block-bg-color: #fff;
    --opposite-block-bg-color: #282c35;
    --block-shadow: 10px 15px 40px rgba(83, 91, 110, 0.11);
    --block-shadow-hover: 0 8px 16px -2px rgba(9, 30, 66, .35), 0 0 0 1px rgba(9, 30, 66, .18);
    --block-border: none;

    --link-color: var(--text-color);
    --link-hover-color: var(--brighter-text-color);
    --visited-link-color: var(--link-color);

    --select-color: var(--text-color);
    --select-bg-color: var(--block-bg-color);

    --input-color: var(--brighter-text-color);
    --input-bg-color: var(--block-bg-color);
    --input-border-color: #ddd;

    --location-bg: #e4f6de;
    --location-text: var(--text-color);
    --contacts-bg: #e4f3fc;
    --contacts-text: var(--text-color);
    --promo-bg: #fff0d0;
    --promo-text: var(--text-color);
    --photos-bg: #4e5560;
    --photos-text: #f4f5f7;

    --note-bg: #fffdf8;
    --note-gradient: linear-gradient(180deg, rgba(255, 244, 220, 0.7), transparent 140px);
    --note-border: 1px solid rgba(176, 142, 78, 0.22);
    --note-accent: #9a5b16;

    --block-gradient: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

body {
    font-family: var(--sans-font);
    font-size: var(--body-font-size);
    line-height: 1.42;
    color: var(--text-color);
    background-color: var(--bg-color);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
  Viewport widths. Media queries cannot read custom properties, so these
  pixel values are the shared breakpoints (also sidebar-toggle.ts):

  big     1200px and wider — full desktop
  small   740px–1199px — tablets and compact desktops, including iPad portrait
  mobile  739px and narrower — phones

  739px sits under iPad mini portrait (744px). iPad Pro 11" is 834px and
  iPad Pro 12.9"/13" portrait is 1024–1032px, so they stay on the small desktop.
*/

@media (max-width: 1199px) {
    :root {
        --sidebar-width: 220px;
        --sidebar-icon-size: 22px;
        --sidebar-item-padding-x: 12px;
        --index-gap: 24px;
        --page-padding: 16px;
        --header-padding-top: 24px;
        --block-padding: 22px;
        --body-font-size: 14px;
    }
}

@media (max-width: 739px) {
    :root {
        --index-gap: 20px;
        --page-padding: 12px;
        --header-padding-top: 16px;
        --block-padding: 18px;
        --body-font-size: 13px;
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color linear .1s;
}

a:hover {
    color: var(--link-hover-color);
}

button {
    font-family: inherit;
    font-size: inherit;
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
[id] {
    scroll-margin-top: 40px;
}

li {
    margin-bottom: 0.8em;
}

input[type=text],
input[type=number],
input[type=file],
input[type=email],
input[type=time],
input[type=url],
input[type=datetime-local],
input[type=date],
input[type=password],
input[type=search],
textarea,
select,
.input-select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: var(--input-shadow);
    outline: none;
    padding: 8px 15px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.4em;
    font-family: var(--sans-font);
    font-size: var(--input-font-size);
    background: var(--input-bg-color);
    color: var(--input-color);
    border-radius: var(--input-border-radius);
}

select,
.input-select {
    color: var(--select-color);
    background-color: var(--select-bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
    cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
    box-shadow: var(--input-shadow-focus);
}

pre>code {
    display: block;
    padding: 15px 20px;
    white-space: pre-wrap;
    background-color: var(--opposite-block-bg-color);
    color: var(--opposite-text-color);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}