@font-face {
  font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/onest/onest-cyrillic-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/onest/onest-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/onest/onest-latin-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/onest/onest-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
html[data-look="epoch"] {
  --font-ui: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}
html[data-look="epoch"] body, html[data-look="epoch"] button, html[data-look="epoch"] input,
html[data-look="epoch"] select, html[data-look="epoch"] textarea { font-family: var(--font-ui); }

html:root[data-look="epoch"] #exam-mode-overlay { font-family: var(--font-ui); }

html[data-look="epoch"] {
  --ep-0: #b4441f;   
  --ep-1: #9a5b0a;   
  --ep-2: #0f766e;   
  --ep-3: #4f46e5;   
  --ep-4: #57534e;   
  --c-bg: #f6f5f2;
  --c-card-2: #f2f1ed;
  --c-border: #e7e5e0;
}
html.dark[data-look="epoch"] {
  --ep-0: #f08a65;
  --ep-1: #f2b65a;
  --ep-2: #4fd1c1;
  --ep-3: #a5a6ff;
  --ep-4: #d6d3d1;
  
  --c-bg: #121212;
  --c-card-2: #181818;
  --c-border: #2c2c2c;
}
html[data-look="epoch"]:not(.dark) body { background: var(--c-bg); }


html[data-look="epoch"] .td-card[data-era] .td-k-day { display: none; }
html[data-look="epoch"] .td-card[data-era] .td-k-era { display: inline; }
html[data-look="epoch"] .td-card[data-era="0"] .td-bar span { background: var(--ep-0); }
html[data-look="epoch"] .td-card[data-era="1"] .td-bar span { background: var(--ep-1); }
html[data-look="epoch"] .td-card[data-era="2"] .td-bar span { background: var(--ep-2); }
html[data-look="epoch"] .td-card[data-era="3"] .td-bar span { background: var(--ep-3); }
html[data-look="epoch"] .td-card[data-era="4"] .td-bar span { background: var(--ep-4); }


html[data-look="epoch"] .lp-strip { align-items: center; }
html[data-look="epoch"] .lp-strip i { height: 6px; }
html[data-look="epoch"] .lp-strip i.is-cur { height: 12px; }
html[data-look="epoch"] .lp-eras { display: block; position: relative; height: 16px; margin-top: 2px; }
html[data-look="epoch"] .lp-eras span {
  position: absolute; top: 0;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .04em; line-height: 16px;
  font-variant-numeric: tabular-nums;
}


html[data-look="epoch"] .lp-era-h {
  display: block; padding: 14px 8px 2px;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
html[data-look="epoch"] .lp-row.is-closed .lp-num,
html[data-look="epoch"] .lp-row.is-cur .lp-num { background: var(--ep); color: var(--c-card); }
html[data-look="epoch"] .lp-row.is-cur { outline-color: var(--ep); }
html[data-look="epoch"] .lp-bar u { background: var(--ep); }
html[data-look="epoch"] .lp-bar s { background: var(--c-border-2); background: color-mix(in srgb, var(--ep) 28%, transparent); }


html:root[data-look="epoch"] {
  
  --ep-0t: #eed6ce; --ep-1t: #e9dbc9; --ep-2t: #cae1df; --ep-3t: #d8d6f9; --ep-4t: #dad9d8;

  --dm-bar: var(--c-brand);

  
  --sw-bg: var(--c-bg); --sw-ink: var(--c-text); --sw-mute: var(--c-muted-2); --sw-link: var(--c-brand);
  --sw-btn: var(--c-card); --sw-btn-line: 1px solid var(--c-border); --sw-btn-ink: var(--c-text);
  --sw-main: var(--c-brand); --sw-main-ink: #fff; --sw-main-line: none;
  --sw-score: var(--c-text); --sw-timer: var(--c-danger);
  --sw-card: var(--c-card); --sw-card-line: 1px solid var(--c-border); --sw-card-shadow: var(--e-2); --sw-card-ink: var(--c-text);
  --sw-left: var(--c-brand); --sw-left-ink: var(--c-brand-strong); --sw-left-tint: rgba(59,130,246,.10); --sw-left-line: var(--c-brand);
  --sw-right: var(--ep-1); --sw-right-ink: var(--ep-1); --sw-right-tint: var(--ep-1t); --sw-right-line: var(--ep-1);
  --sw-sheet: var(--c-card); --sw-sheet-line: var(--c-border); --sw-item: transparent; --sw-item-on: rgba(59,130,246,.10); --sw-item-line-on: var(--c-brand);

  
  --om-e1: var(--ep-0t); --om-e2: var(--ep-2t); --om-e3: var(--ep-3t); --om-e4: var(--ep-4t);
  --om-d1: var(--ep-0); --om-d2: var(--ep-2); --om-d3: var(--ep-3); --om-d4: var(--ep-4);
}
html:root[data-look="epoch"].dark {
  --ep-0t: #53392f; --ep-1t: #53442d; --ep-2t: #2a4b47; --ep-3t: #404056; --ep-4t: #4c4b4b;
  --sw-left-tint: rgba(96,165,250,.14); --sw-item-on: rgba(96,165,250,.14);
}


html:root[data-look="epoch"] #tetris-overlay { background: var(--c-bg); }
html:root[data-look="epoch"] #tetris-overlay[data-ep="0"] { --dt-c: var(--ep-0); --dt-t: var(--ep-0t); }
html:root[data-look="epoch"] #tetris-overlay[data-ep="1"] { --dt-c: var(--ep-1); --dt-t: var(--ep-1t); }
html:root[data-look="epoch"] #tetris-overlay[data-ep="2"] { --dt-c: var(--ep-2); --dt-t: var(--ep-2t); }
html:root[data-look="epoch"] #tetris-overlay[data-ep="3"] { --dt-c: var(--ep-3); --dt-t: var(--ep-3t); }
html:root[data-look="epoch"] #tetris-overlay[data-ep="4"] { --dt-c: var(--ep-4); --dt-t: var(--ep-4t); }
html:root[data-look="epoch"] #tetris-overlay[data-ep] .dt-block:not(.dt-burn) { background: var(--dt-c); border-bottom-color: rgba(0,0,0,.22); }
html:root[data-look="epoch"].dark #tetris-overlay[data-ep] .dt-block:not(.dt-burn) { color: #111; }
html:root[data-look="epoch"] #tetris-overlay[data-ep] .dt-lane { background: var(--dt-t); opacity: .55; }
html:root[data-look="epoch"] #tetris-overlay[data-ep] .dt-cup { background: var(--dt-t); border-color: var(--dt-t); color: var(--c-text); }
html:root[data-look="epoch"] #tetris-overlay[data-ep] .dt-key-main { background: var(--dt-c); border-color: var(--dt-c); color: var(--c-card); }


html:root[data-look="epoch"] #order-overlay { background: var(--c-bg); }


html:root[data-look="epoch"] #match-overlay .mm-card.mm-sel { border-color: var(--c-brand) !important; }