.teaching {
  --accent: #ff4f63;
  --accent-2: #ff7ab8;
}
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.course {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 196px;
  position: relative;
}
.course .glyph {
  font-size: 1.9rem;
  color: var(--accent);
  height: 52px;
  display: flex;
  align-items: center;
  filter: drop-shadow(
    0 0 10px color-mix(in oklab, var(--accent) 70%, transparent)
  );
}
.course .tag {
  align-self: flex-start;
}
.course b {
  font: 400 1.5rem/1.1 var(--serif);
  color: #fff;
  margin-top: auto;
  hyphens: manual;
}
.course > span:last-child,
.course b + span {
  color: var(--muted);
  font-size: 0.88rem;
}
.course .links {
  margin-top: 6px;
}
@media (max-width: 560px) {
  .courses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .course {
    min-height: 0;
    padding: 16px 14px;
  }
  .course .glyph {
    height: 40px;
    font-size: 1.45rem;
  }
  .course b {
    font-size: 1.18rem;
  }
  .course > span:last-child,
  .course b + span {
    font-size: 0.8rem;
  }
  .lecturer {
    padding: 18px 14px;
  }
}
.inst {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent) 10%, transparent),
    transparent 70%
  );
}
.emblem {
  width: 50px;
  height: 50px;
  flex: none;
  overflow: visible;
  filter: drop-shadow(
      0 0 5px color-mix(in oklab, var(--accent) 80%, transparent)
    )
    drop-shadow(0 0 16px color-mix(in oklab, var(--accent) 45%, transparent));
}
.e-ring {
  fill: none;
  stroke: url(#g-acc);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.e-ring.thin {
  stroke-width: 0.9;
  stroke-dasharray: 3 5;
  opacity: 0.8;
}
.e-book {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.e-star {
  fill: #fff;
}
.inst b {
  display: block;
  font: 400 1.2rem/1.1 var(--serif);
  color: #fff;
}
.inst small {
  display: block;
  margin-top: 4px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (prefers-reduced-motion: no-preference) {
  .e-ring.thin {
    animation: orbit 14s linear infinite;
  }
  .e-star {
    transform-origin: 32px 18px;
    animation: twinkle 3.2s ease-in-out infinite;
  }
}
@keyframes orbit {
  to {
    stroke-dashoffset: -160;
  }
}
@keyframes twinkle {
  50% {
    scale: 0.6;
    opacity: 0.6;
  }
}
.lecturers {
  display: grid;
  gap: 18px;
}
.sig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 22px;
}
.sig-for {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.sig-name {
  padding: 8px 0.12em 0 0;
  font: italic 400 clamp(2.3rem, 5.4vw, 3.6rem)/1.05 var(--serif);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lect {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgb(0 0 0/0.28);
}
@media (max-width: 860px) {
  .lects {
    grid-template-columns: minmax(0, 1fr);
  }
}
.thm {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 2px 0;
  color: var(--soft);
  font-size: 0.95rem;
}
.thm b {
  display: block;
  margin-bottom: 8px;
  font: 500 11.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.plot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.plot .ax {
  stroke: var(--line-2);
}
.plot .guide {
  stroke: var(--line-2);
  stroke-dasharray: 3 5;
}
.plot .curve {
  fill: none;
  stroke: color-mix(in oklab, var(--accent) 45%, transparent);
  stroke-width: 1.4;
}
.plot .hi {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--accent));
}
.plot .ext {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}
.plot .seg {
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--accent));
}
.plot .band {
  fill: var(--accent);
  opacity: 0.1;
}
.plot .band.two {
  fill: var(--accent-2);
  opacity: 0.13;
}
.plot .dotp {
  fill: #fff;
  filter: drop-shadow(0 0 6px var(--accent));
}
.plot .lvl {
  fill: var(--accent);
  fill-opacity: var(--o);
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.plot .blob.a {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent));
}
.plot .blob.b {
  fill: var(--accent-2);
  filter: drop-shadow(0 0 10px var(--accent-2));
}
.plot .blob.k {
  fill: var(--accent);
  fill-opacity: 0.9;
  filter: drop-shadow(0 0 12px var(--accent));
}
.plot .cover {
  fill: none;
  stroke: rgb(255 255 255/0.1);
}
.plot circle.sub {
  fill: var(--accent-2);
  fill-opacity: 0.05;
  stroke: var(--accent-2);
  stroke-width: 1.2;
  stroke-opacity: 0.8;
}
.plot .m {
  font: italic 400 18px var(--serif);
  fill: #fff;
}
.plot .m.soft {
  fill: var(--accent-2);
}
.plot .m.ink {
  fill: #07070b;
  font-size: 20px;
}
.plot .m.small {
  font-size: 15px;
  fill: var(--muted);
}
.plot .idx {
  font-size: 12px;
  font-style: normal;
}
.plot .n {
  font: 500 11px var(--mono);
  fill: var(--faint);
}
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }
}
.h3 {
  margin-bottom: 20px;
  font: 400 clamp(1.8rem, 3vw, 2.3rem)/1 var(--serif);
  color: #fff;
}
.books {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
  padding: 0 10px;
  border-bottom: 2px solid color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 14px 22px -16px var(--accent);
}
.book {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 27px;
  height: var(--h);
  padding-top: 10px;
  border-radius: 4px 4px 2px 2px;
  writing-mode: vertical-rl;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: #07070b;
  background:
    linear-gradient(
      transparent 12px,
      rgb(0 0 0/0.22) 12px 14px,
      transparent 14px calc(100% - 16px),
      rgb(0 0 0/0.22) calc(100% - 16px) calc(100% - 14px),
      transparent calc(100% - 14px)
    ),
    linear-gradient(
      90deg,
      color-mix(in oklab, var(--b) 70%, black),
      var(--b) 30%,
      color-mix(in oklab, var(--b) 80%, white) 55%,
      var(--b) 80%,
      color-mix(in oklab, var(--b) 65%, black)
    );
  box-shadow: 0 0 14px -4px var(--b);
  transition: translate 0.35s var(--ease);
}
.book.m {
  --b: var(--accent);
}
.book.b {
  --b: var(--accent-2);
}
.book:hover {
  translate: 0 -8px;
}
.book:last-child {
  margin-left: 12px;
  rotate: 14deg;
  transform-origin: 0 100%;
}
.sup {
  display: flex;
  flex-direction: column;
}
.sup .books {
  margin-top: auto;
}
.sup p {
  margin: 20px 0 14px;
  color: var(--soft);
}
.sup p b {
  font: 400 1.7rem/1 var(--serif);
  color: #fff;
}
.deck {
  position: relative;
  isolation: isolate;
  margin: 4px 8px 0;
}
.deck::before,
.deck::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #15151b, #0d0d12);
  transition:
    rotate 0.5s var(--ease),
    translate 0.5s var(--ease);
}
.deck::before {
  rotate: -3.5deg;
  translate: -6px 5px;
}
.deck::after {
  rotate: 2.5deg;
  translate: 7px 7px;
}
.deck:hover::before {
  rotate: -6deg;
  translate: -12px 8px;
}
.deck:hover::after {
  rotate: 5deg;
  translate: 14px 10px;
}
.decks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.flip {
  display: block;
  width: 100%;
  perspective: 1600px;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
}
.flip-in {
  position: relative;
  display: grid;
  min-height: 250px;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
}
.flip.on .flip-in {
  transform: rotateY(180deg);
}
.face {
  grid-area: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-bottom: 48px;
  background: linear-gradient(180deg, #16161c, #0f0f14);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: visibility 0s linear 0.35s;
}
.face.front {
  transform: rotateY(0deg);
}
.face.back {
  transform: rotateY(180deg);
  visibility: hidden;
}
.flip.on .face.front {
  visibility: hidden;
}
.flip.on .face.back {
  visibility: visible;
}
.face .tag {
  align-self: flex-start;
}
.face .q {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e2e2ea;
}
.face .turn {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  color: var(--faint);
  transition:
    color 0.2s,
    rotate 0.5s var(--ease);
}
.flip:hover .turn {
  color: var(--accent);
  rotate: 90deg;
}
.tracks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  counter-reset: t;
}
.tracks li {
  counter-increment: t;
}
.tracks a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition:
    background 0.2s,
    padding 0.3s var(--ease);
}
.tracks a::before {
  content: counter(t, decimal-leading-zero);
  font: 500 13px var(--mono);
  color: var(--faint);
}
.tracks a:hover {
  background: rgb(255 255 255/0.03);
  padding-left: 10px;
}
.tracks a:hover::before,
.tracks a:hover .ico {
  color: var(--accent);
}
.tracks .ico {
  color: var(--faint);
  width: 15px;
  height: 15px;
}
@media (max-width: 700px) {
  .tracks {
    grid-template-columns: minmax(0, 1fr);
  }
}
.runs {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  filter: drop-shadow(
    0 0 5px color-mix(in oklab, var(--accent) 65%, transparent)
  );
}
.run {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding-top: 10px;
  color: #fff;
}
.run::before,
.run::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.run::before {
  inset: 0;
  background: conic-gradient(
    from 200deg,
    var(--accent),
    var(--accent-2),
    #fff 52%,
    var(--accent-2),
    var(--accent)
  );
  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2.6px),
      #000 calc(100% - 2px)
    ),
    repeating-conic-gradient(
      from 7deg,
      #000 0 calc(360deg / var(--n) - 14deg),
      transparent 0 calc(360deg / var(--n))
    );
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2.6px),
      #000 calc(100% - 2px)
    ),
    repeating-conic-gradient(
      from 7deg,
      #000 0 calc(360deg / var(--n) - 14deg),
      transparent 0 calc(360deg / var(--n))
    );
  mask-composite: intersect;
  transition: rotate 1.2s var(--spring);
}
.run::after {
  inset: 6px;
  background:
    radial-gradient(
      circle at 32% 26%,
      color-mix(in oklab, var(--accent-2) 38%, transparent),
      transparent 62%
    ),
    color-mix(in oklab, var(--accent) 10%, #0b0b11);
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--accent) 30%, transparent);
}
.run .rn,
.run .rx,
.run .rk {
  position: relative;
  z-index: 1;
}
.run .rn {
  font: italic 400 1.45rem/1 var(--serif);
}
.run .rx {
  margin-left: 1px;
  font: 500 10px/1 var(--mono);
  color: var(--accent-2);
}
.run .rk {
  position: absolute;
  left: 50%;
  bottom: -15px;
  translate: -50% 0;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--accent-2);
  white-space: nowrap;
}
.course:hover .run::before {
  rotate: 120deg;
}
.runs.duo {
  gap: 6px;
}
.runs.duo .run {
  width: 38px;
  height: 38px;
  padding-top: 8px;
}
.runs.duo .run .rn {
  font-size: 1.25rem;
}
@media (max-width: 560px) {
  .runs {
    top: 12px;
    right: 12px;
  }
  .run {
    width: 36px;
    height: 36px;
    padding-top: 8px;
  }
  .run .rn {
    font-size: 1.15rem;
  }
  .runs.duo .run {
    width: 32px;
    height: 32px;
    padding-top: 7px;
  }
  .runs.duo .run .rn {
    font-size: 1.05rem;
  }
}