.practice-app section > h2 {
  font-family: Roboto, sans-serif;
  font-weight: 300;
}

.practice-app .what_next > p, .practice-app section > h2 {
  text-shadow: 0 1px 0 var(--c-font-shadow);
}

.practice-app .study {
  flex-flow: row;
  align-items: center;
  display: flex;
}

.practice-side__header .practice-side__title, .practice-side__header, .practice-side {
  flex-flow: column;
  display: flex;
}

.practice-app .study, .practice-side {
  border-radius: var(---ui-roundness, 7px);
}

.practice-side .progress .bar {
  border-radius: 0 var(---ui-roundness, 7px) var(---ui-roundness, 7px) 0;
}

:where(html.transp) .practice-side {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.practice-side {
  border: 1px solid var(--c-border);
}

html:not([dir="rtl"]) .ribbon-wrapper {
  right: -3px;
}

html[dir="rtl"] .ribbon-wrapper {
  left: -3px;
}

.ribbon-wrapper {
  width: 88px;
  height: 88px;
  display: block;
  position: absolute;
  top: -4px;
  overflow: hidden;
}

@media (max-width: 500px) {
  html:not([dir="rtl"]) .ribbon-wrapper {
    right: -13px;
  }

  html[dir="rtl"] .ribbon-wrapper {
    left: -13px;
  }

  .ribbon-wrapper {
    top: -14px;
    scale: .75;
  }
}

.ribbon {
  --ribbon-fade: #1111116e;
}

:where(html.light) .ribbon {
  --ribbon-fade: #1111113e;
}

html:not([dir="rtl"]) .ribbon {
  left: -4px;
}

html[dir="rtl"] .ribbon {
  right: -4px;
}

.ribbon {
  text-align: center;
  color: #fff;
  z-index: 1;
  text-shadow: 0 1px #0006;
  width: 120px;
  padding: 7px 0;
  font-size: 15px;
  font-weight: bold;
  display: block;
  position: relative;
  top: 15px;
  transform: rotate(45deg);
  box-shadow: 1px 0 3px #0000004d;
}

html[dir="rtl"] .ribbon {
  transform: rotate(-45deg);
}

:where(html.light) .ribbon {
  color: #000;
  text-shadow: 0 1px #fff6;
}

.ribbon icon {
  color: hsl(from var(--c-brag) h calc(s + 10) calc(l + 10));
  text-shadow: 0 0 1.5px #00000080;
  animation: .6s ease-in-out infinite soft-hue;
}

:where(html.light) .ribbon icon {
  color: hsl(from var(--c-brag) h calc(s + 35) calc(l + 16));
  text-shadow: 0 0 1.5px #000000a8;
}

.ribbon icon:nth-child(2) {
  animation-delay: .2s;
}

.ribbon icon:nth-child(3) {
  animation-delay: .4s;
}

.ribbon:before, .ribbon:after {
  content: "";
  mix-blend-mode: overlay;
  width: 32px;
  height: 100%;
  position: absolute;
  top: 0;
}

html:not([dir="rtl"]) .ribbon:before {
  left: 0;
}

html[dir="rtl"] .ribbon:before {
  right: 0;
}

.ribbon:before {
  background: linear-gradient(90deg, var(--ribbon-fade), transparent);
}

html:not([dir="rtl"]) .ribbon:after {
  right: 0;
}

html[dir="rtl"] .ribbon:after {
  left: 0;
}

.ribbon:after {
  background: linear-gradient(270deg, var(--ribbon-fade), transparent);
}

.ribbon.done {
  background-color: hsl(from var(--c-secondary) h calc(s - 20) l);
  box-shadow: 1px 0 3px rgb(from var(--c-secondary) r g b/calc(alpha * .5));
}

:where(html.light) .ribbon.done {
  background-color: hsl(from var(--c-secondary) h calc(s - 18) calc(l + 32));
}

.ribbon.ongoing {
  background-color: hsl(from var(--c-primary) h calc(s - 20) l);
  box-shadow: 1px 0 3px rgb(from var(--c-primary) r g b/calc(alpha * .5));
}

:where(html.light) .ribbon.ongoing {
  background-color: hsl(from var(--c-primary) h calc(s - 10) calc(l + 30));
}

.ribbon.future {
  background-color: hsl(from var(--c-future) h calc(s - 20) l);
  box-shadow: 1px 0 3px rgb(from var(--c-future) r g b/calc(alpha * .5));
}

:where(html.light) .ribbon.future {
  background-color: hsl(from var(--c-future) h calc(s - 5) calc(l + 15));
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.practice-app section > h2 {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-font-dim);
  font-size: 2em;
}

.practice-app .studies {
  ---min-width: 400px;
}

@media (max-width: 500px) {
  .practice-app .studies {
    ---min-width: calc(100vw - 2em);
    padding: 0 .5em;
  }
}

.practice-app .studies {
  grid-template-columns: repeat(auto-fill, minmax(var(---min-width), 1fr));
  gap: 1em;
  margin: 1.5em 0 3em;
  display: grid;
}

.practice-app .study {
  transition: all .15s;
}

:where(html.transp) .practice-app .study {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.practice-app .study {
  min-height: 90px;
  color: var(--c-font);
  border: 1px solid var(--c-border);
  background: var(--c-bg-box);
  padding-right: 3em;
  font-size: 1.2em;
  position: relative;
  box-shadow: 0 3px 5px #00000012;
}

@media (max-width: 500px) {
  .practice-app .study {
    min-height: fit-content;
    padding: 6px 3em 6px 0;
  }

  .practice-app .study p {
    margin-top: 2px;
  }
}

.practice-app .study icon {
  opacity: .75;
  filter: brightness(1.1);
  border-radius: calc(var(---ui-roundness, 7px) / 2);
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  border-style: solid;
  border-width: 1px;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin: 0 1em;
  padding: 8px;
}

@media (max-width: 500px) {
  .practice-app .study icon {
    width: 48px;
    height: 48px;
    margin: 4px 12px;
  }
}

.practice-app .study h3 {
  font-size: 1.5em;
  line-height: 1;
}

.practice-app .study em {
  opacity: .8;
  color: var(--c-font-dim);
  margin: 4px 0 0;
  line-height: 1.2;
  display: inline-block;
}

.practice-app .study.ongoing icon {
  border-color: hsl(from var(--c-primary) h s calc(l - 10));
  background-image: var(---icon-bg-image), linear-gradient(130deg, var(--c-primary), hsl(from var(--c-primary) h s calc(l - 16)));
}

.practice-app .study.ongoing .attention-effect {
  --border-angle: 0turn;
  --gradient-border: conic-gradient(from var(--border-angle),
    transparent 25%,
    hsl(from var(--c-primary) h s calc(l + 25)),
    rgb(from var(--c-primary) r g b/calc(alpha * .3)));
  border-radius: var(---ui-roundness, 7px);
  background: var(--gradient-border) border-box, transparent border-box;
  background-position: center;
  border: 3px solid #0000;
  animation: 3.5s linear infinite bg-spin;
  position: absolute;
  inset: -1px;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.practice-app .study.done icon {
  border-color: hsl(from var(--c-secondary) h s calc(l - 10));
  background-image: var(---icon-bg-image), linear-gradient(130deg, var(--c-secondary), hsl(from var(--c-secondary) h s calc(l - 16)));
}

.practice-app .study.future icon {
  border-color: hsl(from var(--c-future) h s calc(l - 10));
  background-image: var(---icon-bg-image), linear-gradient(130deg, var(--c-future), hsl(from var(--c-future) h s calc(l - 16)));
}

.practice-app .study.active, .practice-app .study:hover {
  transform: scale(1.025);
}

.practice-app .what_next > p {
  text-align: center;
  width: 100%;
  margin: 20px 0;
  font-size: 1.2em;
}

.practice-side .progress {
  border-radius: var(---ui-roundness, 7px);
  height: 30px;
  color: var(--c-over);
  background: #1a7edb;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px #0000001a;
}

.practice-side .progress .bar {
  background: #1566b2 url("../hashed/grain.91560814.png");
  height: 100%;
  animation: 50s linear infinite animated-background, 1s forwards animated-bar;
  transform: translateX(-100px);
}

html:not([dir="rtl"]) .practice-side .progress .text {
  left: 0;
}

html[dir="rtl"] .practice-side .progress .text {
  right: 0;
}

.practice-side .progress .text {
  z-index: 3;
  width: 100%;
  line-height: 30px;
  position: absolute;
  top: 0;
}

@keyframes animated-background {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 1000%;
  }
}

@keyframes animated-bar {
  from {
    transform: translateX(-100px);
  }

  to {
    transform: translateX(0);
  }
}

.practice-side {
  background: var(--c-bg-box);
  text-align: center;
  align-self: start;
  gap: 1em;
  padding: 1em 1.25em;
}

@keyframes fat-glide {
  50% {
    transform: translateY(-4px);
  }
}

.practice-side__decoration {
  aspect-ratio: 1;
  opacity: .7;
  width: 160px;
  margin: auto;
  display: block;
}

:where(html.light) .practice-side__decoration {
  filter: brightness(.15);
}

.practice-side:hover .practice-side__decoration {
  animation: 1.5s ease-in-out infinite fat-glide;
}

.practice-side__header {
  gap: 1em;
}

.practice-side__header .practice-side__title {
  justify-content: center;
}

.practice-side__header h1 {
  font-size: 3.3em;
}

.practice-side__header h2 {
  font-size: 1.3em;
}

@media (max-width: 800px) {
  .practice-side__header {
    gap: var(---block-gap);
    text-align: left;
    flex-flow: row;
  }

  .practice-side__header .practice-side__decoration {
    width: min(100px, 30vw);
    margin: 0;
  }
}

.practice-side form {
  text-align: center;
  font-size: .9em;
}

.practice-side form button {
  opacity: .6;
  color: var(--c-font);
}

.practice-side form button:hover {
  opacity: 1;
}

icon.practice {
  background: url("../images/practice/help.svg") 0 0 / cover;
}

[class="ptQ1LLvm"] {
  ---icon-bg-image: url("../hashed/backstab.bb8833ce.svg");
}

[class="E1lqtqFt"] {
  ---icon-bg-image: url("../hashed/arrowed.6bd87e56.svg");
}

[class="xebrDvFe"] {
  ---icon-bg-image: url("../hashed/key.b6b8d59a.svg");
}

[class="A4ujYOer"] {
  ---icon-bg-image: url("../hashed/push.7882cc11.svg");
}

[class="9ogFv8Ac"] {
  ---icon-bg-image: url("../hashed/voodoo-doll.5e833c96.svg");
}

[class="Qj281y1p"] {
  ---icon-bg-image: url("../hashed/trident.26d9dea3.svg");
}

[class="tuoBxVE5"] {
  ---icon-bg-image: url("../hashed/pierced-body.189eeba8.svg");
}

[class="BJy6fEDf"] {
  ---icon-bg-image: url("../hashed/stone-pile.2045b925.svg");
}

[class="Rg2cMBZ6"] {
  ---icon-bg-image: url("../hashed/stone-spear.53a97b15.svg");
}

[class="fE4k21MW"] {
  ---icon-bg-image: url("../hashed/pocket-bow.1295d1a2.svg");
}

[class="8yadFPpU"] {
  ---icon-bg-image: url("../hashed/sword-in-stone.2db3151c.svg");
}

[class="PDkQDt6u"] {
  ---icon-bg-image: url("../hashed/catapult.febc1abe.svg");
}

[class="96Lij7wH"] {
  ---icon-bg-image: url("../hashed/musket.13caa469.svg");
}

[class="o734CNqp"] {
  ---icon-bg-image: url("../hashed/breaking-chain.6c118dee.svg");
}

[class="9cKgYrHb"] {
  ---icon-bg-image: url("../hashed/cement-shoes.9bd50f3c.svg");
}

[class="MnsJEWnI"] {
  ---icon-bg-image: url("../hashed/boxing-glove-surprise.a0498d80.svg");
}

[class="ITWY4GN2"] {
  ---icon-bg-image: url("../hashed/two-shadows.6d63b523.svg");
}

[class="lyVYjhPG"] {
  ---icon-bg-image: url("../hashed/skeletal-hand.1c2d0d49.svg");
}

[class="s5pLU7Of"] {
  ---icon-bg-image: url("../hashed/trojan-horse.b65a4037.svg");
}

[class="kdKpaYLW"] {
  ---icon-bg-image: url("../hashed/divert.70dd03d5.svg");
}

[class="jOZejFWk"] {
  ---icon-bg-image: url("../hashed/magnet.08cae37e.svg");
}

[class="49fDW0wP"] {
  ---icon-bg-image: url("../hashed/upgrade.35df0ef8.svg");
}

[class="0YcGiH4Y"] {
  ---icon-bg-image: url("../hashed/quicksand.0f5d74c5.svg");
}

[class="CgjKPvxQ"] {
  ---icon-bg-image: url("../hashed/back-forth.e5ee8749.svg");
}

[class="udx042D6"] {
  ---icon-bg-image: url("../hashed/mining.364c54d9.svg");
}

[class="Grmtwuft"] {
  ---icon-bg-image: url("../hashed/detour.e220f1d5.svg");
}

[class="g1fxVZu9"] {
  ---icon-bg-image: url("../images/practice/bolt-shield.svg");
}

[class="RUQASaZm"] {
  ---icon-bg-image: url("../hashed/rogue.b4feb415.svg");
}

[class="9c6GrCTk"] {
  ---icon-bg-image: url("../hashed/siege-tower.901f6999.svg");
}

[class="ByhlXnmM"] {
  ---icon-bg-image: url("../hashed/ghost-ally.cf14de13.svg");
}

[class="pt20yRkT"] {
  ---icon-bg-image: url("../hashed/stone-tower.2f752c87.svg");
}

[class="MkDViieT"] {
  ---icon-bg-image: url("../hashed/guarded-tower.31b71bab.svg");
}

[class="pqUSUw8Y"] {
  ---icon-bg-image: url("../hashed/siege-tower.901f6999.svg");
}

[class="heQDnvq7"] {
  ---icon-bg-image: url("../hashed/locked-fortress.0bf7ca53.svg");
}

[class="wS23j5Tm"] {
  ---icon-bg-image: url("../hashed/tower-fall.8f7e09d3.svg");
}

.page-menu__menu {
  margin: 0 0 2rem;
}

@media (min-width: 799.3px) {
  .page-menu__menu {
    margin: 0 2rem 0 0;
  }
}