/* minimalistic CSS reset */
*          { box-sizing: border-box; margin: 0; }
body       { min-height: 100vh; min-height: 100dvh; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; height: auto; }
input      { font: inherit; }

/* inspired by Bootstrap's Darkly theme */

/* variables */
:root {
  --font-body: poppins, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: mono, Consolas, 'Ubuntu Mono', monospace;
  --main-color: #606C77;
  --card-color: #335577;
  --headline-color: #FFFFFF;
  --bold-color: #EEEEEE;
  --nav-color: #FFFFFF;
  --text-color: #AABBCC;
  --separator-color: #778899;
  --link-color: #88CCFF;
  --hover-color: rgba(255, 255, 255, 0.05);
  --table-background: rgba(51, 85, 119, 0.18);
  --table-background-hover: rgba(136, 204, 255, 0.1);
  --footer-background: rgba(0,0,0,0.5);
  --hero-background: #335577;
  --main-background: #001822;
  --card-background: #333333;
  --nav-height: 4em;
  --side-padding: 15vw;
  --main-width: 70vw;
  --footer-clearance: 4rem;
  --default-border: 1px solid var(--card-color);
}

/* fonts */
@font-face {
  font-display: swap;
  font-family: poppins;
  src: url('assets/poppins.woff2')      format('woff2'),
       url('assets/poppins.ttf')        format('truetype');
}
@font-face {
  font-display: swap;
  font-family: mono;
  src: url('assets/sometypemono.woff2') format('woff2'),
       url('assets/sometypemono.ttf')   format('truetype');
}

/* general */
a {
  color: var(--link-color);
  white-space: nowrap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  color: var(--main-color); background: var(--main-background);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
main {
  overflow-x: auto;
  position: relative;
  width: 100%;
  padding: calc(var(--nav-height) + 2em) var(--side-padding) var(--footer-clearance);
  cursor: default;
}
nav {
  color: var(--nav-color);
  background: var(--hero-background);
  border-bottom: 0.1rem solid #D1D1D1;
  font-size: 1.1rem;
  position: fixed;
  z-index: 2;
  inset: 0 0 auto 0;
  padding: 1.2rem var(--side-padding);
}
nav :is(a, span) {
  color: var(--text-color);
  text-decoration: none;
}

.right {
  float: right;
}
.hide {
  display: none;
}

/* code / prism */
code, code[class*="language-"] {
  color: #F8F8F2;
  font-family: var(--font-code);
  display: inline-block;
  tab-size: 2;
  line-height: 1.2;
}
pre, pre[class*="language-"] {
  position: relative;
  border-radius: 0;
  width: 100%;
  margin: 0;
  overflow-x: auto;
  cursor: auto;
}
pre.line-hover::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: var(--hover-line-top) 0 auto 0;
  height: var(--hover-line-height);
  background: #444444;
  opacity: 0.35;
}
pre.line-hover > code {
  position: relative;
  z-index: 1;
}
pre.prompt {
  margin: 1rem 0;
  border-left: none;
}
pre.prompt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 2rem;
  width: 0.25rem;
  background: var(--card-color);
}
#solution code[class*="language-"] {
  margin-right: 2rem;
}
#solution pre[class*="language-"] {
  border: var(--default-border);
  background-color: var(--card-background);
  overflow-y: hidden;
}

ul {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
  list-style: square;
}

/* articles / sections */
article {
  width: fit-content; max-width: var(--main-width);
  padding-bottom: 2rem;
  margin: 1rem 0;
  overflow-x: auto;
}
article b { color: var(--bold-color); }
article > div {
  border: var(--default-border); border-radius: 0;
  padding: 1rem;
  color: #BBBBBB;
  background: var(--card-background);
}

article h2 {
  font-size: 1rem;
  background: var(--card-color);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  width: fit-content;
  border-radius: 5px 5px 0 0;
  border: none;
}
article h2 b {
  color: var(--headline-color);
  font-weight: normal;
}
article h2 .icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
article h2 a {
  color: var(--link-color);
  text-decoration: none;
}
article .summary {
  padding: 0.5rem 1rem;
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: var(--text-color);
  background: var(--card-color);
  border: var(--default-border);
  border-top: 1px solid rgba(96, 108, 119, 0.25);
  border-radius: 0 0 5px 5px;
  letter-spacing: normal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
article .summary .align-right {
  flex: 1 1 auto;
  min-width: 3rem;
}
article .summary .separator {
  color: var(--separator-color);
}
article p {
  margin: 0.5rem 0;
  overflow-wrap: anywhere;
}
article .quality-best-worst {
  display: inline-block;
  width: 8rem;
}
article a.nodeco {
  text-decoration: none;
}

h3 {
  font-size: 0.9rem;
  margin: 0.5rem 0; padding-top: 0.5rem;
  color: var(--headline-color);
}

/* search */
#search label {
  display: block;
  margin-bottom: 0.4rem;
}
#search input {
  display: block;
  width: min(100%, 32rem);
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  color: var(--bold-color);
  background: var(--main-background);
  border: 1px solid var(--separator-color);
}
#search > div {
  overflow-x: auto;
}
#search table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  text-align: left;
  font-size: 0.9rem;
}
#search table :is(th, td) {
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
  vertical-align: middle;
}
#search table svg,
table.others svg {
  vertical-align: middle;
  padding-right: 0.25rem;
}
#search table th[data-sort] {
  cursor: pointer;
}
#search table td:nth-child(1) {
  text-align: right;
}
#search table td:nth-child(2) {
  width: 40ch; max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
#search table td:nth-child(3) {
  text-align: center;
}
#search table td:nth-child(4) {
  text-align: left;
}
#search table tr:nth-child(even) {
  background: var(--table-background);
}
#search table tr:hover {
  cursor: pointer;
  background: var(--table-background-hover);
}

/* SVG icons */
svg.icon {
  max-height: 1.5rem;
  width: 1.5rem;
}
svg.inline {
  vertical-align: -0.2rem;
}

/* badges / difficulty */
.badges {
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 0.7rem;
  white-space: nowrap;
}
.badges * {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--color), 0.3);
  background-color: rgba(var(--color), 0.05);
  color: rgb(var(--color));
  text-shadow: 0 0 0.4rem rgba(var(--color), 0.65);
  transition: background-color 1s ease, text-shadow 1s ease;
}
.easy   { --color: 16, 185, 128; }
.medium { --color: 234, 180, 8; }
.hard   { --color: 244, 64, 94; }
.difficulty { color: rgb(var(--color)); }

.badges .disabled {
  --color: 110, 120, 130, 0.5;
  border: 1px solid rgba(var(--color));
  color: rgba(var(--color));
}

/* problem list */
.problems {
  font-size: 0.8rem;
  font-weight: bold;
  padding-top: 0.7rem;
}

.problems :is(a, span) {
  display: inline-block;
  margin: 0 0.1rem 0.5rem 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--color), 0.3);
  background-color: rgba(var(--color), 0.05);
  color: rgb(var(--color));
  text-shadow: 0 0 0.4rem rgba(var(--color), 0.65);
  transition: background-color 1s ease, text-shadow 1s ease;
}
.badges *:hover,
.problems a:hover {
  background-color: rgba(var(--color), 0.16);
  text-shadow: 0 0 0.4rem rgb(var(--color));
}
:is(.badges, .problems) .disabled {
  --color: 110, 120, 130, 0.5;
  color: rgba(var(--color));
}
.problems .disabled { border: none; }

svg.quality {
  height: auto;
  width: 100%;
  min-width: 60vw;
  margin: 1rem 0;
}
svg:is(.quality, .complexity) {
  background: transparent;
  transition: background 1s ease;
}
svg:is(.quality, .complexity):hover {
  background: var(--hover-color);
}
svg.quality .curve {
  fill: var(--card-color);
  stroke: none;
  opacity: 0.5;
}
svg.quality .dot {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-dasharray: 0.001 1;
  animation: quality-dot 10s linear infinite;
}
svg.quality .axis line {
  stroke: var(--text-color);
  stroke-width: 1;
}
svg.quality .label text {
  fill: var(--text-color);
  font-size: 0.7rem;
}
svg.quality text.description {
  font-size: 0.5rem;
}
svg.quality text.mean {
  fill: #FFFFFF;
}
svg.quality text.meansymbol {
  fill: var(--link-color);
  font-style: italic;
}
svg.quality [class|="rating"] {
  --r0: 229; --g0: 143; --b0: 143;
  --r1: 104; --g1: 189; --b1: 159;
  --t: calc((var(--rating, 1) - 1) / 9);
  font-size: 0.75rem;
  fill: rgb(
    calc(var(--r0) * (1 - var(--t)) + var(--r1) * var(--t)),
    calc(var(--g0) * (1 - var(--t)) + var(--g1) * var(--t)),
    calc(var(--b0) * (1 - var(--t)) + var(--b1) * var(--t))
  );
}
:where(.rating-1)  { --rating: 1; }
:where(.rating-2)  { --rating: 2; }
:where(.rating-3)  { --rating: 3; }
:where(.rating-4)  { --rating: 4; }
:where(.rating-5)  { --rating: 5; }
:where(.rating-6)  { --rating: 6; }
:where(.rating-7)  { --rating: 7; }
:where(.rating-8)  { --rating: 8; }
:where(.rating-9)  { --rating: 9; }
:where(.rating-10) { --rating: 10; }

/* complexity */
svg.complexity {
  display: block;
  margin: 1rem;
  max-width: 30rem;
  height: auto;
  width: 100%;
}
svg.complexity :is(line, path) {
  stroke: #777777;
  stroke-width: 0.25;
  marker-end: url("icons.svg#arrow");
}
svg.complexity text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2px;
  font-weight: bold;
  fill: #777777;
  text-anchor: start;
}
svg.complexity :is(line, path).current { stroke: #FFFFFF; }
svg.complexity text.current { fill: #FFFFFF; }
svg.complexity path.current {
  stroke-dasharray: 3;
  animation: dashdraw 60s linear infinite reverse;
}

/* heatmap */
.heatmap {
  display: flex;
  gap: 0.2rem;
  width: 100%;
  overflow-x: auto;
  margin: 0.25rem 0;
  padding: 0.5rem 0.5rem 0.5rem 0;
}
.heatmap div {
  display: grid;
  gap: 0.2rem;
  grid-template-rows: repeat(7, 0.7rem);
}
.heatmap span {
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid rgba(170, 187, 204, 0.15);
  background: rgba(170, 187, 204, 0.08);
  outline: 1px solid transparent;
  outline-offset: 1px;
  transition: outline-color 0.5s ease;
}
.heatmap span.level-0 { background: transparent; border: none; }
.heatmap span.level-1 { background: #315D59; }
.heatmap span.level-2 { background: #27856D; }
.heatmap span.level-3 { background: #22B887; }
.heatmap span.level-4 { background: #69D5A6; }
.heatmap span:not(.level-0):hover {
  outline-color: var(--headline-color);
  transition: outline-color 0s;
}

@keyframes dashdraw {
  to { stroke-dashoffset: 200; }
}
@keyframes quality-dot {
  to { stroke-dashoffset: -1; }
}
#complexity li.current {
  color: var(--headline-color);
}

table.sortable th {
  cursor: pointer;
  user-select: none;
}

/* other solutions */
table.others {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--card-background);
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}
table.others :is(th, td) {
  border: var(--default-border);
  padding: 0.5rem 1rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
table.others th {
  color: var(--headline-color);
  background: var(--card-color);
  font-weight: normal;
}
table.others .fullsize :is(th, td).source {
  width: 2rem;
  vertical-align: middle;
  pointer-events: none;
  border: none;
  background: none;
  padding: 0;
}
table.others .fullsize td.source span {
  display: inline-block;
  transform: rotate(270deg);
  transform-origin: center;
  font-weight: 600;
  color: var(--headline-color);
}
table.others.hideFirstColumn .fullsize .source {
  display: none;
}
table.others tr:nth-child(even) {
  background: var(--table-background);
}
table.others tr:hover {
  background: var(--table-background-hover);
}
table.others tr.separator {
  border-top: 3px solid var(--card-color);
}
table.others td:has(a) {
  cursor: pointer;
}
table.others a {
  color: var(--link-color);
}
table.others :is(thead, tbody).small {
  display: none;
}

/* videos */
.videos {
  width: fit-content;
  max-width: 100%;
}
.videos .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 100%;
  margin: 1rem 0;
}
.videos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 300px;
  max-width: 300px;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.5s ease;
  white-space: normal;
}
.videos a:hover {
  background: var(--hover-color);
}
.videos .thumbnail {
  position: relative;
  min-height: 200px;
}
.videos img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: brightness(0.7);
  transition: filter 0.5s ease;
}
.videos img:hover {
  filter: brightness(1.0);
}
.videos :is(.title, .channel) {
  margin: 0.5rem 0;
}
.videos .title {
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--headline-color);
}
.videos .channel {
  font-size: 0.8rem;
  color: #CCCCDD;
}

li span.problem {
  display: inline-block;
  text-align: right;
  padding-right: 0.75rem;
  width: 3.4rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* charts */
.chart {
  width: min(720px, calc(100vw - 4rem));
  height: 20rem;
}
.chart, .chart * {
  cursor: default !important;
}

.model-quality-axis, .model-quality-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(5rem, 1.5fr) 3rem;
  align-items: center;
  gap: 0.75rem;
}
.model-quality-axis {
  margin: 1rem 0 0.35rem;
  color: var(--main-color);
  font-size: 0.8rem;
}
.model-quality-scale {
  display: flex;
  justify-content: space-between;
}
.model-quality-chart {
  display: grid;
  gap: 0.35rem;
  opacity: 0;
}

/* footer */
footer {
  position: fixed;
  inset: auto 0 0 0;
  padding: 0.5rem 3rem 0.7rem;
  text-align: center;
  color: var(--nav-color);
  background: var(--footer-background);
  backdrop-filter: blur(2px);
  transition: backdrop-filter 1s ease, background 1s ease, padding 1s ease;
}
footer:hover {
  backdrop-filter: none;
  padding: 1rem 3rem;
  border-top: 1px solid var(--card-color);
}
footer :is(span, svg) {
  display: inline-block;
  vertical-align: middle;
}
footer span {
  margin: auto 2rem;
  font-size: 0.8rem;
}
footer svg {
  margin: 0 0.5rem 0.2rem 0.3rem;
}

/* JavaScript enabled */
.js .typewriter {
  visibility: hidden;
}
.js .typewriter.started {
  visibility: visible;
}
.js .videos .thumbnail {
  opacity: 0;
}
.js table.others td a {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.75rem);
}
.js article:not(#videos) {
  opacity: 0.2;
  transform: translateY(0.75rem);
}

/* animations */
.fade-in {
  animation: fadeInUp 1s ease forwards;
  animation-delay: var(--animation-delay, 0.1s);
}
.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* responsive */
@media (width <= 900px) {
  :root {
    --side-padding: 1.5rem;
  }
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

  article {
    font-size: 85%;
    max-width: 100%;
  }
  pre, pre[class*="language-"] {
    font-size: 85% !important;
  }

  :is(.sameday, .similar) ul {
    list-style: none;
    padding: 0;
    white-space: nowrap;
  }

  .onlydesktop {
    display: none;
  }
}
@media (width <= 1200px) {
  table.others .fullsize {
    display: none;
  }
  table.others :is(thead, tbody).small {
    display: revert;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}