@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../assets/fonts/zen-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../assets/fonts/zen-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../assets/fonts/zen-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../assets/fonts/zen-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

[data-theme="tokyo"] {
  --base: #1a1b26;
  --mantle: #16161e;
  --crust: #101014;
  --surface0: #292e42;
  --surface1: #3b4261;
  --overlay0: #565f89;
  --overlay1: #737aa2;
  --text: #c0caf5;
  --subtext: #a9b1d6;
  --red: #f7768e;
  --maroon: #db5b6f;
  --peach: #ff9e64;
  --yellow: #e0af68;
  --green: #9ece6a;
  --teal: #73daca;
  --sky: #7dcfff;
  --blue: #7aa2f7;
  --mauve: #bb9af7;
  --pink: #ff757f;
  --lavender: #7aa2f7;
}

[data-theme="gruvbox"] {
  --base: #282828;
  --mantle: #1d2021;
  --crust: #141617;
  --surface0: #3c3836;
  --surface1: #504945;
  --overlay0: #7c6f64;
  --overlay1: #928374;
  --text: #ebdbb2;
  --subtext: #bdae93;
  --red: #fb4934;
  --maroon: #ea6962;
  --peach: #fe8019;
  --yellow: #fabd2f;
  --green: #b8bb26;
  --teal: #8ec07c;
  --sky: #83a598;
  --blue: #7daea3;
  --mauve: #d3869b;
  --pink: #b16286;
  --lavender: #d8a657;
}

[data-theme="everforest"] {
  --base: #222a2e;
  --mantle: #1a2023;
  --crust: #14181a;
  --surface0: #2b3339;
  --surface1: #3a464c;
  --overlay0: #67766b;
  --overlay1: #7d8a7f;
  --text: #d3c6aa;
  --subtext: #9da9a0;
  --red: #e67e80;
  --maroon: #e69875;
  --peach: #e69875;
  --yellow: #dbbc7f;
  --green: #a7c080;
  --teal: #83c092;
  --sky: #7fbbb3;
  --blue: #7fbbb3;
  --mauve: #d699b6;
  --pink: #d699b6;
  --lavender: #a7c080;
}

[data-theme="dracula"] {
  --base: #282a36;
  --mantle: #21222c;
  --crust: #191a21;
  --surface0: #343746;
  --surface1: #44475a;
  --overlay0: #6272a4;
  --overlay1: #7b88b8;
  --text: #f8f8f2;
  --subtext: #bfc7d5;
  --red: #ff5555;
  --maroon: #ff6e6e;
  --peach: #ffb86c;
  --yellow: #f1fa8c;
  --green: #50fa7b;
  --teal: #8be9fd;
  --sky: #8be9fd;
  --blue: #6272a4;
  --mauve: #bd93f9;
  --pink: #ff79c6;
  --lavender: #bd93f9;
}

[data-theme="nord"] {
  --base: #2e3440;
  --mantle: #292e39;
  --crust: #242933;
  --surface0: #3b4252;
  --surface1: #434c5e;
  --overlay0: #6d7a90;
  --overlay1: #7f8ca3;
  --text: #eceff4;
  --subtext: #c3cad6;
  --red: #bf616a;
  --maroon: #bf616a;
  --peach: #d08770;
  --yellow: #ebcb8b;
  --green: #a3be8c;
  --teal: #8fbcbb;
  --sky: #88c0d0;
  --blue: #81a1c1;
  --mauve: #b48ead;
  --pink: #b48ead;
  --lavender: #88c0d0;
}

:root {
  --tbh: 59px;
  --shadow: rgba(0, 0, 0, .45);
  --shadow-strong: rgba(0, 0, 0, .55);
}

#view-landing[hidden],
#view-notes[hidden],
#view-reader[hidden] {
  display: none;
}

main {
  min-width: 0;
  overscroll-behavior: contain;
}

.wrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 780px);
  gap: 52px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 34px 22px calc(120px + env(safe-area-inset-bottom, 0px));
}

#loading {
  padding: 60px 0;
  color: var(--subtext);
  font: 600 12px "JetBrains Mono", monospace;
  letter-spacing: .15em;
}

#toTop {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--mauve);
  color: var(--mantle);
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 4px 16px var(--shadow-strong);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  cursor: pointer;
  transition: opacity .18s, transform .15s, background .2s;
}

#toTop.v {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: hover) {
  #toTop.v:hover {
    transform: scale(1.05);
  }
}

#toTop.v:active {
  transform: scale(.95);
}

@media (max-width: 880px) {
  .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 14px;
  }
}

@media (max-width: 640px) {
  .wrap {
    padding: 22px 16px 90px;
  }
}

@media (max-width: 400px) {
  .wrap {
    padding: 18px 12px 80px;
  }
}

section[data-accent="red"]      { --acc: var(--red) }
section[data-accent="maroon"]   { --acc: var(--maroon) }
section[data-accent="peach"]    { --acc: var(--peach) }
section[data-accent="yellow"]   { --acc: var(--yellow) }
section[data-accent="green"]    { --acc: var(--green) }
section[data-accent="teal"]     { --acc: var(--teal) }
section[data-accent="sky"]      { --acc: var(--sky) }
section[data-accent="blue"]     { --acc: var(--blue) }
section[data-accent="mauve"]    { --acc: var(--mauve) }
section[data-accent="pink"]     { --acc: var(--pink) }
section[data-accent="lavender"] { --acc: var(--lavender) }

.hi {
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url(../assets/home.svg) center / contain no-repeat;
          mask: url(../assets/home.svg) center / contain no-repeat;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--surface1) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--surface1);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--overlay0);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  height: 100%;
  background: var(--mantle);
  color-scheme: dark;

  scrollbar-gutter: stable;
}

@media all and (display-mode: standalone) {
  html {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mantle);
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

body {
  margin: 0;
  padding-top: calc(var(--tbh) + env(safe-area-inset-top, 0px));
  background: var(--base);
  color: var(--text);
  font: 400 15.5px/1.8 "Zen Kaku Gothic New", system-ui, sans-serif;
  transition: background .2s, color .2s;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 2px;
}

strong {
  font-weight: 700;
}

code {
  padding: .1em .4em;
  border-radius: 4px;
  background: var(--surface0);
  color: var(--peach);
  font: 600 .86em "JetBrains Mono", monospace;
}

.lab,
.kicker {
  font-family: "JetBrains Mono", monospace;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  height: calc(var(--tbh) + env(safe-area-inset-top, 0px));
  padding: calc(12px + env(safe-area-inset-top, 0px)) 22px 12px;
  border-bottom: 1px solid var(--surface0);
  background: var(--mantle);
}

.brand {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.brand i {
  color: var(--mauve);
  font-style: normal;
}

.brand .b-ico {
  display: inline-block;
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  vertical-align: -6px;
  background: var(--lavender);
  -webkit-mask: url(../assets/books.svg) center / contain no-repeat;
          mask: url(../assets/books.svg) center / contain no-repeat;
}

body.in-notes .brand .b-ico {
  -webkit-mask-image: url(../assets/notes.svg);
          mask-image: url(../assets/notes.svg);
}

body.in-reader .brand .b-ico {
  -webkit-mask-image: url(../assets/books1.svg);
          mask-image: url(../assets/books1.svg);
}

#menuBtn {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 2px;
  padding: 0;
  border: none;
  background: none;
  color: var(--subtext);
  cursor: pointer;
  transition: color .15s;
}

#menuBtn:hover {
  color: var(--text);
}

#menuBtn .mi {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

#menuBtn .mi::before,
#menuBtn .mi::after,
#menuBtn .mi > span {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

#menuBtn .mi::before {
  top: 0;
}

#menuBtn .mi > span {
  top: 50%;
  transform: translate(4px, -50%);
}

#menuBtn .mi::after {
  bottom: 0;
}

body.in-reader #menuBtn {
  display: grid;
}

#themeBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--mantle);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s;
}

@media (hover: hover) {
  #themeBtn:hover {
    border-color: var(--lavender);
  }
}

#themeBtn .tb-ico {
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url(../assets/foot.svg) center / contain no-repeat;
          mask: url(../assets/foot.svg) center / contain no-repeat;
}

#themeBtn .tb-pal {
  display: flex;
  flex: none;
  padding: 2px;
  border: 1px solid var(--surface1);
  border-radius: 4px;
}

#themeBtn .tb-pal i {
  width: 7px;
  height: 12px;
}

#themeBtn .tb-pal i:first-child { border-radius: 2px 0 0 2px; }
#themeBtn .tb-pal i:last-child  { border-radius: 0 2px 2px 0; }

body.in-reader #themeBtn {
  display: none;
}

.topbar .hdr-tools {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--surface1);
  border-radius: 8px;
  background: var(--crust);
}

body.in-reader .topbar .hdr-tools {
  display: flex;
}

.topbar .hdr-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--overlay1);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.topbar .hdr-tools button:hover {
  color: var(--text);
}

.topbar .hdr-tools button.on {
  background: var(--mauve);
  color: var(--base);
}

.topbar .hdr-tools button .ico {
  width: 15px;
  height: 15px;
  background: currentColor;
  pointer-events: none;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

.topbar .hdr-tools button[data-mode="normal"] .ico {
  -webkit-mask-image: url(../assets/sun.svg);
          mask-image: url(../assets/sun.svg);
}

.topbar .hdr-tools button[data-mode="warm"] .ico {
  -webkit-mask-image: url(../assets/moon.svg);
          mask-image: url(../assets/moon.svg);
}

.topbar .hdr-tools button[data-mode="invert"] .ico {
  -webkit-mask-image: url(../assets/dark.svg);
          mask-image: url(../assets/dark.svg);
}

.scrim {
  position: fixed;
  inset: calc(var(--tbh) + env(safe-area-inset-top, 0px)) 0 0 0;
  z-index: 35;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.scrim.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 640px) {
  .topbar {
    gap: 10px;

    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  }

  #themeBtn {
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: .1em;
  }
}

.brand .btxt i {
  color: var(--mauve);
  font-style: normal;
}

nav.side {
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 96px);
  padding-top: 4px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

nav.side a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--subtext);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}

.side-top {
  padding: 4px 6px 12px;
}

.side-top .lvl {
  margin: 6px 0 0;
}

nav.side a.root {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--surface1);
  border-radius: 8px;
  background: var(--mantle);
  color: var(--text);
  font-weight: 700;
  transition: border-color .15s, background .15s;
}

nav.side a.root:hover {
  border-color: var(--lavender);
  background: color-mix(in srgb, var(--surface0) 55%, transparent);
}

nav.side a.root.on {
  border-color: var(--lavender);
  background: color-mix(in srgb, var(--lavender) 14%, transparent);
  color: var(--lavender);
}

nav.side a.root .hi {
  width: 15px;
  height: 15px;
}

.lvl {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 0 6px 6px;
}

.lvl button {
  padding: 8px 0;
  border: 1px solid var(--surface1);
  border-radius: 8px;
  background: var(--mantle);
  color: var(--subtext);
  font: 700 12px "JetBrains Mono", monospace;
  text-align: center;
  cursor: default;
}

.lvl button.on {
  border-color: var(--lavender);
  background: var(--lavender);
  color: var(--crust);
}

.lvl button[disabled] {
  opacity: .5;
}

.grp {
  margin-top: 18px;
}

.glab {
  display: flex;
  align-items: center;
  padding: 0 12px 7px;
  color: var(--overlay1);
  font: 700 10px "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.glab b {
  margin-left: auto;
  color: var(--overlay0);
  font: 600 10px "JetBrains Mono", monospace;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}

.items a {
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--subtext);
  transition: background .12s, color .12s;
}

.items a:hover {
  background: color-mix(in srgb, var(--surface0) 55%, transparent);
  color: var(--text);
}

.items a.on {
  background: color-mix(in srgb, var(--lavender) 15%, transparent);
  color: var(--text);
  font-weight: 700;
}

.sg {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--acc, var(--lavender)) 15%, transparent);
  color: var(--acc, var(--lavender));
  font-size: 13px;
  font-weight: 900;
}

.no {
  flex: none;
  min-width: 24px;
  color: var(--overlay0);
  font: 600 10.5px "JetBrains Mono", monospace;
  text-align: right;
}

.items a.on .no {
  color: var(--lavender);
}

@media (max-width: 880px) {
  #menuBtn {
    display: grid;
  }

  nav.side {
    position: fixed;
    top: calc(var(--tbh) + env(safe-area-inset-top, 0px));
    left: 0;
    z-index: 40;
    width: min(300px, 82vw);
    height: calc(100vh - var(--tbh) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--tbh) - env(safe-area-inset-top, 0px));
    max-height: none;
    padding: 20px 14px 30px;
    border-right: 1px solid var(--surface0);
    background: var(--mantle);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    transition: transform .22s;
  }

  nav.side.open {
    transform: none;
  }
}

#view-landing {
  min-height: 100vh;
  background: var(--base);
  color: var(--text);
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  line-height: 1.5;
}

#view-landing * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#view-landing a {
  color: inherit;
  text-decoration: none;
}

#view-landing .col {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 70px;
}

#view-landing h1 {
  font-size: clamp(30px, 6.5vw, 44px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.01em;
}

#view-landing h1 .vtag {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 8px 3px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--mantle);
  color: var(--overlay1);
  font: 700 12px "JetBrains Mono", monospace;
  font-style: normal;
  letter-spacing: .06em;
  vertical-align: middle;
  transform: translateY(-.18em);
}

#view-landing h1 .vtag:empty {
  display: none;
}

#view-landing h1 span {
  background: linear-gradient(90deg, var(--mauve), var(--sky));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

#view-landing .sub {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--subtext);
  font-size: 14.5px;
  line-height: 1.7;

  text-wrap: pretty;
}

#view-landing .sub b {
  color: var(--text);
  font-weight: 700;
}

#view-landing .lab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 16px;
  color: var(--text);
  font: 700 13px "JetBrains Mono", monospace;
  letter-spacing: .24em;
}

#view-landing .lab .sym {
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--lavender);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

#view-landing .lab .sym-books {
  -webkit-mask-image: url(../assets/books1.svg);
          mask-image: url(../assets/books1.svg);
}

#view-landing .lab .sym-notes {
  -webkit-mask-image: url(../assets/notes.svg);
          mask-image: url(../assets/notes.svg);
}

#view-landing .lab .sym-records {
  -webkit-mask-image: url(../assets/record.svg);
          mask-image: url(../assets/record.svg);
}

#view-landing .lab::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--surface1);
}

#view-landing .arw {
  flex: none;
  width: 15px;
  height: 11px;
  background: var(--acc);
  -webkit-mask: url(../assets/next.svg) center / contain no-repeat;
          mask: url(../assets/next.svg) center / contain no-repeat;
}

#view-landing .shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

#view-landing .poster {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--acc) 26%, var(--mantle));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}

#view-landing .poster:hover {
  border-color: var(--acc);
  transform: translateY(-2px);
}

#view-landing .pin {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

#view-landing .cov {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: 0;
  padding-bottom: 133.333%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--acc) 14%, var(--crust));
  overflow: hidden;
}

#view-landing .cov img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-landing .pfall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#view-landing .pfall b {
  color: var(--acc);
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 900;
}

#view-landing .pfall span {
  color: var(--subtext);
  font: 700 8px "JetBrains Mono", monospace;
  letter-spacing: .22em;
}

#view-landing .pbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 2px;
  background: var(--crust);
}

#view-landing .pbar b {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-landing .shelf-note {
  margin: 14px 2px 6px;
  color: var(--overlay0);
  font: 600 11px "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-align: center;
}

#view-landing .tabs {
  display: flex;
  gap: 2px;
  width: max-content;
  margin: 8px 0 14px;
  padding: 3px;
  border: 1px solid var(--surface1);
  border-radius: 8px;
  background: var(--crust);
}

#view-landing .tabs button {
  padding: 6px 14px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--overlay0);
  font: 700 11px "JetBrains Mono", monospace;
  letter-spacing: .18em;
  cursor: pointer;
  transition: color .12s, background .12s;
}

@media (hover: hover) {
  #view-landing .tabs button:hover:not(:disabled):not(.on) {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
  }
}

#view-landing .tabs button.on {
  background: var(--mauve);
  color: var(--crust);
}

#view-landing .tabs button:disabled {
  color: var(--overlay0);
  opacity: .55;
  cursor: not-allowed;
}

#view-landing .stage {
  --row: clamp(106px, 19vw, 150px);
  display: grid;
  margin-top: 6px;
  border: 1px solid var(--surface0);
  border-top: 0;
  background: var(--surface0);
}

#view-landing .panel {
  grid-area: 1 / 1;
  min-height: 0;
  padding: 2px;
}

#view-landing .panel[hidden] {
  display: none;
}

#view-landing .mosaic,
#view-landing .ghost {
  min-height: calc(3 * var(--row) + 4px);
  height: 100%;
}

#view-landing .mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: var(--row);
  gap: 2px;
}

#view-landing .tile {
  --acc: var(--mauve);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background: var(--acc);
  color: var(--base);
  overflow: hidden;
  transition: filter .14s;
}

#view-landing .tile:hover {
  filter: brightness(1.09);
}

#view-landing .tile.big {
  grid-column: span 2;
  grid-row: span 2;
}

#view-landing .tile.wide {
  grid-column: span 2;
}

#view-landing .tile .g {
  padding: 14px 14px 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  opacity: .9;
}

#view-landing .tile.big .g {
  font-size: 60px;
}

#view-landing .tile .tl {
  padding: 0 14px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.1;
}

#view-landing .tile.big .tl {
  font-size: 19px;
}

#view-landing .tile .ct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--crust);
  color: var(--text);
  font: 700 10px "JetBrains Mono", monospace;
  letter-spacing: .04em;
}

#view-landing .tile .ct b {
  color: var(--acc);
  font-weight: 700;
}

#view-landing .tile.big .ct,
#view-landing .tile.wide .ct {
  font-size: 11px;
}

#view-landing .ghost {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 26px 24px;
  background: var(--mantle);
}

#view-landing .ghost .row {
  display: flex;
  align-items: center;
  gap: 13px;
}

#view-landing .ghost .bd {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border: 1.5px dashed var(--surface1);
  border-radius: 13px;
  background: var(--base);
  color: var(--overlay1);
  font-size: 23px;
  font-weight: 900;
}

#view-landing .ghost .gt {
  color: var(--subtext);
  font-size: 17px;
  font-weight: 700;
}

#view-landing .ghost .gt em {
  margin-left: 8px;
  color: var(--overlay1);
  font-style: normal;
}

#view-landing .ghost p {
  max-width: 46ch;
  color: var(--overlay1);
  font-size: 13px;
  line-height: 1.6;
}

#view-landing .ghost p b {
  color: var(--subtext);
  font-weight: 700;
}

#view-landing .rnote {
  margin: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--surface0);
  color: var(--overlay1);
  font: 500 12px "JetBrains Mono", monospace;
  letter-spacing: .02em;
  line-height: 1.5;
}

#view-landing .bug {
  display: flex;
  justify-content: center;
  margin: 44px 0 24px;
}

#view-landing .spine {
  display: block;
  width: 100%;
  max-width: 460px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

#view-landing .sgrid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

#view-landing .spine .rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--surface1);
  border-right: 0;
  background: var(--mantle);
  color: var(--overlay1);
  font: 700 12px/1 "JetBrains Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

#view-landing .spine .rail em {
  color: var(--peach);
  font-style: normal;
  transition: color .2s;
}

#view-landing .spine:hover .rail em {
  color: var(--green);
}

#view-landing .spine .body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--surface1);
  background: var(--mantle);
  overflow: hidden;
  transition: background .18s, border-color .18s;
}

#view-landing .spine:hover .body {
  border-color: var(--overlay0);
  background: var(--surface0);
}

#view-landing .spine .body::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 120px;
  height: 120px;
  background: var(--text);
  opacity: .16;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .18s;
  -webkit-mask: url(../assets/bug.svg) center / contain no-repeat;
          mask: url(../assets/bug.svg) center / contain no-repeat;
}

#view-landing .spine:hover .body::after {
  opacity: .24;
}

#view-landing .spine .av {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  min-width: 72px;
  border: 1px solid var(--surface1);
  border-radius: 5px;
  background: var(--surface0);
  overflow: hidden;
}

#view-landing .spine .av > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-landing .spine .av > b {
  z-index: 0;
  color: var(--mauve);
  font: 900 32px "Zen Kaku Gothic New", sans-serif;
}

#view-landing .spine .av.has-media > b {
  display: none;
}

#view-landing .spine .l1 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
}

#view-landing .spine .l1 b {
  font: 700 22px/1 "Zen Kaku Gothic New", sans-serif;
  letter-spacing: -.01em;
}

#view-landing .spine .l1 small {
  color: var(--overlay1);
  font: 500 11.5px/1.4 "Zen Kaku Gothic New", sans-serif;
  transition: color .18s;
}

@media (hover: hover) {
  #view-landing .spine:hover .l1 small {
    color: var(--subtext);
  }
}

#view-landing .foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 56px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--surface0);
  color: var(--subtext);
  font: 500 11px "JetBrains Mono", monospace;
  letter-spacing: .04em;
}

#view-landing .foot .sep {
  color: var(--overlay0);
}

#view-landing .foot a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}

@media (hover: hover) {
  #view-landing .foot a:hover {
    color: var(--sky);
    text-decoration-color: var(--sky);
  }
}

@media (max-width: 640px) {
  #view-landing .shelf {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  #view-landing .spine {
    max-width: none;
  }

  #view-landing .spine .body {
    gap: 14px;
    padding: 10px 14px 10px 10px;
  }

  #view-landing .spine .body::after {
    right: -16px;
    width: 96px;
    height: 96px;
    opacity: .14;
  }

  #view-landing .spine .av {
    width: 64px;
    height: 64px;
  }

  #view-landing .spine .l1 b {
    font-size: 19px;
  }

  #view-landing .sgrid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

#view-landing .spine .rail {
    padding: 10px 8px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  #view-landing .spine .body::after {
    width: 80px;
    height: 80px;
    opacity: .1;
  }

  #view-landing .spine .av {
    width: 56px;
    height: 56px;
  }

  #view-landing .spine .l1 b {
    font-size: 17px;
  }
}

#view-landing .recs {
  border: 1px solid var(--surface0);
}

#view-landing .rec[hidden] {
  display: none;
}

@media (max-width: 520px) {

}

#view-landing .road {
  margin: 0;
  padding: 8px;
  list-style: none;
}

#view-landing .road li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 4px 14px;
  padding: 14px 14px;
  border-radius: 8px;
  transition: background .14s;
}

#view-landing .road li:hover {
  background: color-mix(in srgb, var(--surface0) 45%, transparent);
}

#view-landing .road .bx {
  grid-row: 1 / 3;
  align-self: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--surface1);
  border-radius: 6px;
  background: var(--crust);
}

#view-landing .road .tx {
  display: contents;
}

#view-landing .road .tx b {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

#view-landing .road .tx small {

  grid-column: 2 / -1;
  grid-row: 2;
  color: var(--overlay0);
  font: 500 11.5px "JetBrains Mono", monospace;
  letter-spacing: .01em;
  line-height: 1.5;
}

#view-landing .road .dt {
  grid-column: 3;
  grid-row: 1;
  align-self: baseline;
  color: var(--overlay0);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  white-space: nowrap;
}

#view-landing .log {
  margin: 0;
  padding: 20px 20px 4px;
  max-height: 340px;
  overflow-y: auto;
  list-style: none;
}

#view-landing .ver {
  position: relative;
  padding: 0 0 22px 24px;
  border-left: 1px solid var(--surface1);
}

#view-landing .ver:last-child {
  padding-bottom: 6px;
  border-left-color: transparent;
}

#view-landing .ver::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--mantle);
}

#view-landing .vhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 3px;
}

#view-landing .vn {
  color: var(--green);
  font: 700 13.5px "JetBrains Mono", monospace;
  letter-spacing: .04em;
}

#view-landing .vd {
  color: var(--overlay1);
  font: 700 9.5px "JetBrains Mono", monospace;
  letter-spacing: .1em;
}

#view-landing .vb {
  max-width: 60ch;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--subtext);
  font-size: 13.5px;
  line-height: 1.6;
}

#view-landing .vb li {
  position: relative;
  padding-left: 14px;
}

#view-landing .vb li + li {
  margin-top: 3px;
}

#view-landing .vb li::before {
  position: absolute;
  top: -.02em;
  left: 1px;
  color: var(--overlay0);
  content: "•";
}

#view-landing .ver.empty {
  padding-left: 0;
  border-left: 0;
  color: var(--overlay0);
  font: 600 11px "JetBrains Mono", monospace;
}

#view-landing .ver.empty::before {
  display: none;
}

@media (max-width: 520px) {
  #view-landing .road li {
    grid-template-columns: auto 1fr auto;
    gap: 4px 10px;
    padding: 12px 10px;
  }

  #view-landing .log {
  margin: 0;
  padding: 20px 20px 4px;
  max-height: 340px;
  overflow-y: auto;
  list-style: none;
}
}

#view-landing .road .dt.soon {
  color: var(--overlay0);
}

#view-landing .road .dt.ongoing {
  color: var(--peach);
}

#view-landing .road .todo .bx {
  border-color: var(--surface1);
}

#view-landing .why {
  max-width: 62ch;
  margin: 46px auto 0;
  padding: 14px 16px;
  border: 2px solid color-mix(in srgb, var(--peach) 55%, transparent);
  border-radius: 8px;
}

#view-landing .why p {
  margin: 0;
  color: var(--subtext);
  font-size: 13.5px;
  line-height: 1.75;
}

#view-landing .why a {
  color: var(--text);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}

@media (hover: hover) {
  #view-landing .why a:hover {
    color: var(--peach);
    text-decoration-color: var(--peach);
  }
}

@media (max-width: 640px) {
  #view-landing .why {
    margin-top: 34px;
    padding: 13px 14px;
  }

  #view-landing .why p {
    font-size: 13px;
  }
}

section {
  counter-reset: pt;
}

section p {
  color: var(--subtext);
}

section p strong,
section li strong {
  color: var(--text);
}

section ul {
  margin: 10px 0 16px;
  padding-left: 0;
  list-style: none;
}

section li {
  position: relative;
  margin: 7px 0;
  padding-left: 18px;
  color: var(--subtext);
}

section li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--overlay0);
}

.sh {
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: 4px solid var(--acc);
}

.sh h1 {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.3;
}

.kicker {
  color: var(--acc);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.chintro {
  max-width: 64ch;
  margin: 0 0 8px;
  color: var(--subtext);
  font-size: 15px;
}

.lab {
  margin: 22px 0 6px;
  color: var(--overlay1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}

@media (max-width: 640px) {
  .sh {
    padding-left: 14px;
    border-left-width: 3px;
  }

  .sh h1 {
    font-size: 23px;
  }
}

.block {
  counter-increment: pt;
  margin-top: 18px;
  padding: 20px 22px 16px;
  border: 1px solid var(--surface0);
  border-radius: 10px;
  background: var(--mantle);
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.block h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.block h2::before {
  content: counter(pt, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--acc);
  color: var(--base);
  font: 700 12px "JetBrains Mono", monospace;
}

.block h2 + p {
  max-width: 68ch;
  color: var(--text);
  font-size: 14.5px;
}

@media (max-width: 880px) {
  .block {
    padding: 16px 14px 12px;
  }
}

@media (max-width: 640px) {
  .block h2 {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .block {
    padding: 14px 11px 10px;
  }
}

.lead {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid var(--surface1);
}

.lead span {
  display: block;
  color: var(--text);
  font-size: 16.5px;
  font-weight: 700;
}

.lead em {
  color: var(--subtext);
  font-size: 12.5px;
  font-style: normal;
}

.struct {
  position: relative;
  margin: 18px 0;
  padding: 16px 18px 13px;
  border: 1.5px solid var(--acc);
  border-radius: 6px;
  background: color-mix(in srgb, var(--acc) 8%, var(--base));
  color: var(--overlay1);
  font-size: 17px;
  font-weight: 600;
}

.struct b {
  color: var(--acc);
  font-weight: 700;
}

.struct::before {
  content: "STRUCTURE";
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 7px;
  background: var(--mantle);
  color: var(--acc);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .2em;
}

.struct[data-l]::before {
  content: attr(data-l);
}

.srow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: 14px;
  margin: 18px 0;
}

.srow .struct {
  margin: 0;
}

.ex {
  position: relative;
  margin: 8px 0;
  padding-left: 15px;
}

.ex::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--acc);
}

.ex span {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.ex i {
  display: block;
  color: var(--overlay1);
  font: 400 11.5px "JetBrains Mono", monospace;
  font-style: normal;
}

.ex em {
  display: block;
  color: var(--subtext);
  font-size: 12px;
  font-style: normal;
}

.dline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 9px 0;
}

.dline > b {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 1px solid var(--surface1);
  color: var(--overlay1);
  font: 700 10px "JetBrains Mono", monospace;
}

.dline span {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.dline em {
  display: block;
  color: var(--subtext);
  font-size: 12px;
  font-style: normal;
}

.see {
  display: inline-block;
  margin: 8px 0;
  padding: 6px 12px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  color: var(--acc);
  font-size: 12.5px;
  text-decoration: none;
}

.see::before {
  content: "→ ";
}

.see:hover {
  border-color: var(--acc);
}

.snote {
  position: relative;
  margin: 20px 0;
  padding: 15px 16px 11px;
  border: 1px dashed color-mix(in srgb, var(--yellow) 60%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--yellow) 8%, var(--base));
  color: var(--text);
  font-size: 14px;
}

.snote::before {
  content: "SIDE NOTE";
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 7px;
  background: var(--mantle);
  color: var(--yellow);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .2em;
}

blockquote {
  margin: 14px 0 18px;
  padding: 11px 16px;
  border: 1px solid var(--surface0);
  border-left: 3px solid var(--acc);
  border-radius: 6px;
  background: var(--base);
  color: var(--text);
  font-size: 14px;
}

blockquote p {
  margin: 0;
  color: var(--text);
}

@media (max-width: 640px) {
  .struct {
    padding: 14px 14px 11px;
    font-size: 15.5px;
  }
}

.quiz {
  margin: 10px 0;
  border: 1px solid var(--surface0);
  border-radius: 6px;
  background: var(--mantle);
}

.quiz summary {
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}

.quiz summary::before {
  content: "Q";
  margin-right: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--acc);
  color: var(--base);
  font: 700 10px "JetBrains Mono", monospace;
}

.quiz summary::after {
  content: "tap to reveal";
  float: right;
  margin-top: 3px;
  color: var(--overlay0);
  font: 600 9px "JetBrains Mono", monospace;
  letter-spacing: .12em;
}

.quiz[open] summary::after {
  content: "";
}

.quiz > div {
  padding: 0 14px 12px 42px;
  color: var(--subtext);
  font-size: 13.5px;
}

.deg {
  margin: 12px 0 8px;
}

.degbar {
  display: flex;
  justify-content: space-between;
  margin: 0 2px 6px;
  padding-top: 7px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--green), var(--yellow), var(--peach), var(--red)) 1;
  color: var(--overlay1);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .16em;
}

.degrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.degc {
  padding: 11px 8px 9px;
  border: 1px solid var(--surface0);
  border-radius: 6px;
  background: var(--base);
  text-align: center;
}

.degc b {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.degc i {
  display: block;
  color: var(--overlay1);
  font: 400 10.5px "JetBrains Mono", monospace;
  font-style: normal;
}

.degc em {
  display: block;
  margin-top: 4px;
  color: var(--subtext);
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 640px) {
  .deg {
    position: relative;
    padding-left: 15px;
  }

  .deg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--green), var(--yellow), var(--peach), var(--red));
  }

  .degbar {
    display: none;
  }

  .degrow {
    grid-template-columns: 1fr;
  }

  .degc {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 1px 12px;
    text-align: left;
  }

  .degc em {
    grid-column: 2;
    margin: 0;
  }
}

.tw {
  margin: 10px 0 20px;
  border: 1px solid var(--surface0);
  border-radius: 6px;
  background: var(--base);
  overflow: hidden;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

th {
  padding: 9px 16px;
  border-bottom: 1px solid var(--surface0);
  background: color-mix(in srgb, var(--acc) 10%, var(--base));
  color: color-mix(in srgb, var(--acc) 85%, var(--text));
  font: 700 10px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}

td {
  padding: 9px 16px;
  border-top: 1px solid var(--surface0);
  vertical-align: top;
}

td:first-child {
  color: var(--text);
  font-weight: 500;
}

tbody tr:hover {
  background: color-mix(in srgb, var(--surface0) 45%, transparent);
}

@media (max-width: 640px) {
  .tw table {
    min-width: 520px;
  }
}

.kfams {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}

.kfam {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border: 1px solid var(--surface0);
  border-radius: 10px;
  background: var(--base);
  transition: border-color .14s;
}

.kfam:hover {
  border-color: var(--surface1);
}

.kfam.dak {
  border-color: color-mix(in srgb, var(--acc) 22%, var(--surface0));
  background: color-mix(in srgb, var(--acc) 5%, var(--base));
}

.kfhead {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kfl {
  color: var(--acc);
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.kfg {
  color: var(--overlay0);
  font: 600 10px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gapnote b {
  color: var(--acc);
  font-weight: 700;
}

.kcells {
  display: grid;
  gap: 6px;
}

.kcells.c5 {
  grid-template-columns: repeat(5, 1fr);
}

.kcells.c3 {
  grid-template-columns: repeat(3, 1fr);
}

.kana {
  padding: 9px 2px 7px;
  border-radius: 6px;
  background: var(--mantle);
  text-align: center;
}

.kana b {
  display: block;
  color: var(--text);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}

.kana i {
  color: var(--overlay1);
  font: 600 9.5px "JetBrains Mono", monospace;
  font-style: normal;
}

.kana.ke {
  background: transparent;
  color: var(--surface1);
  font-size: 14px;
  line-height: 2.6;
}

.kcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 15px 13px;
  border: 1px solid var(--surface0);
  border-radius: 8px;
  background: var(--base);
}

.kcard:hover {
  border-color: var(--surface1);
}

.khead {
  display: flex;
  align-items: center;
  gap: 13px;
}

.kj {
  color: var(--acc);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.15;
}

.mn {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.kr-kun { --rc: var(--green) }
.kr-on  { --rc: var(--sky) }

b.kr-kun,
b.kr-on {
  color: var(--rc);
  font-weight: 700;
}

.kread {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  border-left-width: 2px;
  border-radius: 6px;
  background: var(--mantle);
}

.rline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.rline b {
  flex: none;
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--rc) 16%, transparent);
  color: var(--rc);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .08em;
}

.ksent {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--surface0);
  line-height: 1.6;
}

.kh {
  color: var(--rc);
  font-weight: 900;
  ruby-position: over;
}

.kh rt {
  color: var(--rc);
  font-size: 9.5px;
  font-weight: 700;
  opacity: .85;
}

.ksent span {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 2.1;
}

.ksent em {
  display: block;
  color: var(--subtext);
  font-size: 11.5px;
  font-style: normal;
}

@media (max-width: 640px) {
  .kanji-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  }
}

@media (max-width: 400px) {
    }

.gapnote {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--surface1);
  color: var(--overlay1);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 520px) {
  .kfam {
    grid-template-columns: 44px 1fr;
    gap: 8px;
    padding: 8px 10px;
  }

  .kcells {
    gap: 4px;
  }

  .kana b {
    font-size: 19px;
  }
}

#vocab .block {
  counter-reset: w;
}

.vitem {
  counter-increment: w;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--surface0);
  border-radius: 8px;
  background: var(--mantle);
}

.vitem:hover {
  border-color: var(--surface1);
}

.vtop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 25px;
}

.vtop::before {
  content: counter(w, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 25px;
  border-radius: 4px;
  background: var(--surface0);
  color: var(--overlay1);
  font: 700 10px "JetBrains Mono", monospace;
}

.vtop > b {
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vk {
  padding: 2px 7px;
  border: 1px solid var(--surface0);
  border-radius: 4px;
  background: var(--base);
  color: var(--overlay1);
  font-size: 12.5px;
}

.vpr {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 3px;
}

.vpr b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--surface1);
}

.vpr.t1 b:nth-child(1) {
  background: var(--overlay1);
}

.vpr.t2 b:nth-child(-n + 2) {
  background: var(--yellow);
}

.vpr.t3 b {
  background: var(--green);
}

.vtop .vpr {
  margin-left: auto;
}

.vt {
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tc, var(--overlay1)) 16%, var(--base));
  color: var(--tc, var(--overlay1));
  font: 700 8.5px "JetBrains Mono", monospace;
  font-style: normal;
  letter-spacing: .12em;
  white-space: nowrap;
}

.vt[data-t="v"]   { --tc: var(--sky) }
.vt[data-t="i"]   { --tc: var(--green) }
.vt[data-t="na"]  { --tc: var(--teal) }
.vt[data-t="adv"] { --tc: var(--mauve) }
.vt[data-t="c"]   { --tc: var(--peach) }
.vt[data-t="x"]   { --tc: var(--yellow) }
.vt[data-t="g"]   { --tc: var(--maroon) }

.vbox {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 16px 11px;
  border: 1px solid var(--surface0);
  border-radius: 6px;
  background: var(--base);
  overflow-wrap: anywhere;
}

.vbox::before {
  content: attr(data-l);
  position: absolute;
  top: -7px;
  left: 12px;
  padding: 0 7px;
  background: var(--mantle);
  color: var(--overlay0);
  font: 700 8.5px "JetBrains Mono", monospace;
  letter-spacing: .2em;
}

.vbox:last-child {
  margin-bottom: 2px;
}

.vbox[data-l="MEANING"] {
  padding: 12px 16px;
  border-color: color-mix(in srgb, var(--acc) 40%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, var(--base));
  color: var(--text);
  font-size: 15px;
}

.vbox[data-l="MEANING"]::before {
  color: var(--acc);
}

.vbox[data-l="NOTE"] {
  border: 1px dashed color-mix(in srgb, var(--yellow) 55%, transparent);
  background: color-mix(in srgb, var(--yellow) 7%, var(--base));
  color: var(--subtext);
  font-size: 13.5px;
  line-height: 1.65;
}

.vbox[data-l="NOTE"]::before {
  color: var(--yellow);
}

.vbox[data-l="NOTE"] b {
  color: var(--text);
  font-weight: 700;
}

.vexl + .vexl {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--surface0);
}

.vexl span {
  display: block;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.75;
}

.vexl i {
  display: block;
  color: var(--overlay1);
  font: 400 11px "JetBrains Mono", monospace;
  font-style: normal;
}

.vexl em {
  display: block;
  margin-top: 2px;
  color: var(--subtext);
  font-size: 12px;
  font-style: normal;
}

@media (max-width: 640px) {
  .vitem {
    padding: 12px;
  }

  .vtop {
    gap: 8px;
  }

  .vtop::before {
    width: 26px;
    height: 22px;
  }

  .vbox {
    margin-top: 16px;
    padding: 13px 13px 10px;
  }

  .vbox::before {
    left: 10px;
  }

  .vbox[data-l="MEANING"] {
    padding: 11px 13px;
  }

  .vexl span {
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .vitem {
    padding: 11px;
  }

  .vtop {
    gap: 7px;
  }

  .vtop > b {
    font-size: 16px;
  }

  .vbox {
    padding: 12px 11px 9px;
  }
}

.vfil {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--surface0);
  border-radius: 10px;
  background: var(--mantle);
}

.vfil > .vsearch {
  grid-column: 1 / -1;
}

.vfil > .vcount {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

.vfil > .flab {
  grid-column: 1;
  justify-self: start;
}

.vfil > .fseg,
.vfil > .fchips {
  grid-column: 2;
  justify-self: start;
}

.vfil .flab {
  color: var(--overlay0);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .2em;
}

.vcount {
  color: var(--overlay1);
  font: 600 10px "JetBrains Mono", monospace;
  letter-spacing: .1em;
  white-space: nowrap;
}

.vcount b {
  color: var(--text);
  font-weight: 700;
}

.fseg {
  display: inline-flex;
  gap: 2px;
  width: max-content;
  padding: 2px;
  border: 1px solid var(--surface0);
  border-radius: 7px;
  background: var(--base);
}

.fseg button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--subtext);
  font: 600 10px "JetBrains Mono", monospace;
  letter-spacing: .1em;
  cursor: pointer;
}

.fseg button:hover {
  color: var(--text);
}

.fseg button.on {
  background: var(--surface0);
  color: var(--text);
}

.fchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fchips button {
  --tc: var(--lavender);
  padding: 6px 12px;
  border: 1px solid var(--surface0);
  border-radius: 6px;
  background: none;
  color: var(--subtext);
  font: 600 10px "JetBrains Mono", monospace;
  letter-spacing: .1em;
  cursor: pointer;
}

.fchips button:hover {
  border-color: var(--surface1);
  color: var(--text);
}

.fchips button.on {
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: var(--tc);
}

.fchips button[data-t=v]   { --tc: var(--sky) }
.fchips button[data-t=i]   { --tc: var(--green) }
.fchips button[data-t=na]  { --tc: var(--teal) }
.fchips button[data-t=adv] { --tc: var(--mauve) }
.fchips button[data-t=c]   { --tc: var(--peach) }
.fchips button[data-t=g]   { --tc: var(--maroon) }
.fchips button[data-t=n]   { --tc: var(--subtext) }

@media (max-width: 640px) {
  .vfil {
    grid-template-columns: 1fr;
    padding: 12px 13px;
  }

  .vfil > .vsearch,
  .vfil > .vcount,
  .vfil > .flab,
  .vfil > .fseg,
  .vfil > .fchips {
    grid-column: 1;
  }

  .vfil > .vcount {
    grid-row: 1;
    justify-self: end;
    margin-top: -2px;
  }

  .vfil > .flab {
    margin-bottom: -4px;
  }

  .vfil > .fseg {
    width: 100%;
  }

  .fseg button {
    flex: 1;
    justify-content: center;
    padding: 6px 4px;
  }
}

@media (max-width: 400px) {
  .fchips button,
  .fseg button {
    padding: 6px 9px;
    letter-spacing: .06em;
  }
}

.vsearch {
  position: relative;
  display: block;
}

.vsearch input {
  width: 100%;
  padding: 10px 78px 10px 13px;
  border: 1px solid var(--surface0);
  border-radius: 8px;
  background: var(--base);
  color: var(--text);
  font: 500 13px "Zen Kaku Gothic New", system-ui, sans-serif;
  transition: border-color .15s;
}

.vsearch input::placeholder {
  color: var(--overlay0);
}

.vsearch input:focus {
  border-color: var(--acc);
  outline: none;
}

.vsearch input::-webkit-search-cancel-button {
  filter: grayscale(1) opacity(.6);
  cursor: pointer;
}

.vnone {
  margin: 26px 0 34px;
  color: var(--overlay1);
  font-size: 13px;
  text-align: center;
}

.vmode {
  position: absolute;
  top: 50%;
  right: 5px;
  display: flex;
  gap: 2px;
  padding: 2px;
  transform: translateY(-50%);
  border-radius: 6px;
  background: var(--surface0);
}

.vmode button {
  min-width: 28px;
  padding: 4px 5px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--overlay1);
  font: 700 10px "JetBrains Mono", "Zen Kaku Gothic New", monospace;
  cursor: pointer;
}

.vmode button.on {
  background: var(--surface1);
  color: var(--text);
}

.vresults {
  margin-top: 4px;
}

.vresults[hidden] {
  display: none;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 44px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--surface0);
}

.pager button {
  max-width: 48%;
  padding: 10px 16px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--mantle);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.pager button:hover {
  border-color: var(--acc, var(--lavender));
}

.pager button:disabled {
  visibility: hidden;
}

.pager button small {
  display: block;
  color: var(--overlay1);
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .pager button {
    min-width: 0;
    padding: 9px 12px;
    font-size: 12.5px;
  }
}

#view-reader,
body.in-reader {
  --s0: var(--surface0);
  --s1: var(--surface1);
  --ov0: var(--overlay0);
  --sub0: var(--subtext);
  --lav: var(--lavender);
}

#view-reader *,
#view-reader *::before,
#view-reader *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#view-reader .rmain {
  max-width: 860px;
  margin: 0 auto;
  padding: 4px 4px 88px;
  transition: padding-bottom .25s ease;
}

body:has(.player.v) #view-reader .rmain {
  padding-bottom: 130px;
}

#view-reader .empty {
  padding: 80px 20px;
  color: var(--ov0);
  font-size: .85rem;
  text-align: center;
}

#view-reader .sidebar {
  position: fixed;
  top: var(--tbh, 59px);
  left: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 280px;
  border-right: 1px solid var(--s0);
  background: var(--mantle);
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .25s ease;
}

#view-reader .sidebar.open {
  transform: translateX(0);
}

#view-reader .backdrop {
  position: fixed;
  inset: var(--tbh, 59px) 0 0 0;
  z-index: 35;
  background: var(--crust);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#view-reader .backdrop.v {
  opacity: .55;
  pointer-events: auto;
}

#view-reader .sb-sec {
  padding: 8px 8px 4px;
}

#view-reader .sb-sec + .sb-sec {
  position: relative;
  margin-top: 6px;
  padding-top: 12px;
}

#view-reader .sb-sec + .sb-sec::before {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--s0);
  content: "";
}

#view-reader .sb-lab {
  padding: 4px 10px 6px;
  color: var(--text);
  font: 800 9.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}

#view-reader .sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--subtext);
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s, color .13s;
}

@media (hover: hover) {
  #view-reader .sb-item:hover {
    background: color-mix(in srgb, var(--s0) 70%, transparent);
  }
}

#view-reader .sb-ico {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  background: currentColor;
  opacity: .7;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

#view-reader .sb-ico-folder {
  -webkit-mask-image: url(../assets/folder.svg);
          mask-image: url(../assets/folder.svg);
}

#view-reader .sb-ico-file {
  -webkit-mask-image: url(../assets/file.svg);
          mask-image: url(../assets/file.svg);
}

#view-reader .sb-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-reader .sb-books {
  position: relative;
  margin: 2px 8px 12px 18px;
  padding-left: 14px;
  background: linear-gradient(to bottom, var(--s0), var(--s0)) no-repeat 0 0 / 1px calc(100% - 16px);
}

#view-reader .sb-book {
  position: relative;
}

#view-reader .sb-book::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 15px;
  width: 11px;
  height: 1px;
  background: var(--s0);
}

#view-reader .sb-book-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 6px;
  color: var(--sub0);
  font: 700 11.5px "JetBrains Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  user-select: none;
  cursor: pointer;
  transition: color .15s;
}

#view-reader .sb-book-hd:hover {
  color: var(--text);
}

#view-reader .sb-book.open .sb-book-hd {
  color: var(--sub0);
}

#view-reader .sb-book-hd .sb-ico {
  width: 15px;
  height: 15px;
  opacity: .8;
}

#view-reader .sb-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

#view-reader .sb-chev svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  opacity: 0;
  transition: transform .2s ease, opacity .15s;
}

#view-reader .sb-book.open .sb-chev svg {
  opacity: .85;
  transform: rotate(90deg);
}

#view-reader .sb-count {
  margin-left: auto;
  color: var(--ov0);
  font: 600 10px "JetBrains Mono", monospace;
}

#view-reader .sb-lessons {
  position: relative;
  display: none;
  margin: 1px 0 4px 10px;
  padding-left: 14px;
  background: linear-gradient(to bottom, var(--s0), var(--s0)) no-repeat 0 0 / 1px calc(100% - 12px);
}

#view-reader .sb-book.open .sb-lessons {
  display: block;
}

#view-reader .sb-lesson {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 8px;
  border-radius: 5px;
  color: var(--sub0);
  font-size: .78rem;
  user-select: none;
  cursor: pointer;
  transition: color .12s;
}

#view-reader .sb-lesson::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12px;
  width: 11px;
  height: 1px;
  background: var(--s0);
}

#view-reader .sb-lesson:hover {
  color: var(--text);
}

#view-reader .sb-lesson.on {
  color: var(--lav);
  font-weight: 700;
}

#view-reader .sb-lesson .sb-ico {
  opacity: .5;
}

#view-reader .sb-lesson.on .sb-ico {
  background: var(--lav);
  opacity: 1;
}

#view-reader .sb-bottom {
  flex: none;
  padding: 10px 8px 10px;
  border-top: 1px solid var(--s0);
  background: var(--mantle);
}

#view-reader .sb-item .ti,
#view-reader .sb-item .hi {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

#view-reader .sb-item .hi {
  -webkit-mask-image: url(../assets/home.svg);
          mask-image: url(../assets/home.svg);
}

#view-reader .sb-item .ti {
  -webkit-mask-image: url(../assets/foot.svg);
          mask-image: url(../assets/foot.svg);
}

#view-reader .sb-nm {
  flex: 1;
  min-width: 0;
}

#view-reader .sb-go {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: .45;
  background: currentColor;
  -webkit-mask: url(../assets/next.svg) center / contain no-repeat;
          mask: url(../assets/next.svg) center / contain no-repeat;
  transition: opacity .13s, transform .13s;
}

@media (hover: hover) {
  #view-reader .sb-item:hover .sb-go {
    opacity: .9;
    transform: translateX(2px);
  }
}

#view-reader .sb-pal {
  display: flex;
  flex: none;
  padding: 2px;
  border: 1px solid var(--s1);
  border-radius: 5px;
}

#view-reader .sb-pal i {
  width: 7px;
  height: 12px;
}

#view-reader .sb-pal i:first-child { border-radius: 2px 0 0 2px; }
#view-reader .sb-pal i:last-child  { border-radius: 0 2px 2px 0; }

body.modal #view-reader .dock,
body.modal #view-reader .hint {
  display: none;
}

#view-reader .pg {
  margin-bottom: 1px;
  background: var(--mantle);
}

#view-reader .pi {
  position: relative;
  line-height: 0;
}

#view-reader .pi img {
  display: block;
  width: 100%;
  user-select: none;
  transition: filter .3s;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#view-reader .pi img.inv {
  filter: invert(1) hue-rotate(180deg);
}

#view-reader .hs {
  position: absolute;
  z-index: 2;
  border: none;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

#view-reader .hs:hover {
  background: rgba(203, 166, 247, .2);
}

#view-reader .hs.on {
  background: rgba(250, 179, 135, .2);
  box-shadow: 0 0 0 2px var(--peach);
  animation: glow .8s ease infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 0 2px var(--peach) }
  to   { box-shadow: 0 0 6px 2px var(--peach) }
}

#view-reader .shield {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: background .4s;
}

#view-reader .shield.warm {
  background: rgba(80, 50, 0, .2);
}

#view-reader .player {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 90%;
  max-width: 480px;
  padding: 10px 16px 12px;
  border: 1px solid var(--s1);
  border-radius: 10px;
  background: var(--mantle);
  box-shadow: 0 8px 32px var(--shadow);
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

#view-reader .player.v {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#view-reader .player .row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#view-reader .pp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--s1);
  border-radius: 8px;
  background: var(--s0);
  color: var(--mauve);
  cursor: pointer;
  transition: background .15s, transform .1s;
}

#view-reader .pp:hover {
  background: var(--s1);
}

#view-reader .pp:active {
  transform: scale(.95);
}

#view-reader .pp svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#view-reader .bar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  height: 18px;
  cursor: pointer;

  touch-action: none;
  user-select: none;
}

#view-reader .bar.scrub {
  cursor: grabbing;
}

#view-reader .bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--s1);
}

#view-reader .progress {
  position: absolute;
  left: 0;
  width: 0%;
  height: 4px;
  border-radius: 2px;
  background: var(--mauve);
  pointer-events: none;
}

#view-reader .thumb {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--mauve);
  box-shadow: 0 0 4px var(--shadow);
  transform: translateX(-50%);
  pointer-events: none;
  transition: width .12s, height .12s;
}

#view-reader .bar.scrub .thumb {
  width: 16px;
  height: 16px;
}

#view-reader .time {
  flex-shrink: 0;
  min-width: 38px;
  color: var(--sub0);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}

#view-reader .time.t-end {
  text-align: right;
}

#view-reader .bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 6px 6px;
}

#view-reader .bottom-nav .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  color: var(--sub0);
  user-select: none;
  cursor: pointer;
  transition: color .15s;
}

#view-reader .bottom-nav .arrow:hover {
  color: var(--mauve);
}

#view-reader .bottom-nav .arrow.off {
  color: var(--s1);
  cursor: default;
  pointer-events: none;
}

#view-reader .bottom-nav .arrow .ico {
  width: 22px;
  height: 22px;
  background: currentColor;
  pointer-events: none;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

#view-reader .bottom-nav .arrow.prev .ico {
  -webkit-mask-image: url(../assets/previous.svg);
          mask-image: url(../assets/previous.svg);
}

#view-reader .bottom-nav .arrow.next .ico {
  -webkit-mask-image: url(../assets/next.svg);
          mask-image: url(../assets/next.svg);
}

#view-reader .bottom-nav .num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 16px;
  color: var(--sub0);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  user-select: none;
  cursor: pointer;
  transition: color .15s, background .15s;
}

#view-reader .bottom-nav .num:hover {
  color: var(--text);
}

#view-reader .bottom-nav .num.on {
  background: var(--mauve);
  color: var(--mantle);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

#view-reader .bottom-nav .dots {
  padding: 0 2px;
  color: var(--ov0);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

#view-reader .credit {
  padding: 10px 4px 14px;
  color: var(--ov0);
  font-size: .72rem;
  text-align: center;
}

#view-reader .credit a {
  color: var(--ov0);
  text-decoration: none;
}

#view-reader .credit a:hover {
  color: var(--sub0);
  text-decoration: underline;
}

#view-reader .dock {
  --pad: env(safe-area-inset-bottom, 0px);
  --gap: 18px;
  position: fixed;
  right: 24px;
  top: calc(100dvh - 48px - var(--pad) - var(--gap));
  z-index: 95;
  transition: top .25s ease;
}

body:has(.player.v) #view-reader .dock {
  --gap: 116px;
}

#view-reader .dock .fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--mauve);
  color: var(--mantle);
  cursor: pointer;
  transition: transform .15s, background .2s, color .2s;
}

#view-reader .dock .fab:hover {
  transform: scale(1.05);
}

#view-reader .dock .fab:active {
  transform: scale(.95);
}

#view-reader .dock .fab .ico {
  width: 22px;
  height: 22px;
  background: currentColor;
  pointer-events: none;
  -webkit-mask: url(../assets/edit.svg) center / contain no-repeat;
          mask: url(../assets/edit.svg) center / contain no-repeat;
}

#view-reader .dock.v .fab {
  background: var(--peach);
}

#view-reader .dock.v .fab .ico {
  -webkit-mask-image: url(../assets/close.svg);
          mask-image: url(../assets/close.svg);
}

#view-reader .capsule {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  padding: 4px;
  border: 1px solid var(--s0);
  border-radius: 8px;
  background: var(--mantle);
  transform-origin: bottom center;
}

#view-reader .dock-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height .28s ease, opacity .18s ease, margin-bottom .28s ease;
}

#view-reader .dock.v .dock-panel {
  max-height: 460px;
  margin-bottom: 6px;
  opacity: 1;
  pointer-events: auto;
}

#view-reader .dock .sep {
  align-self: stretch;
  height: 1px;
  margin: 4px 2px;
  background: var(--s0);
}

#view-reader .dock .tool,
#view-reader .dock .sz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--sub0);
  cursor: pointer;
  transition: all .15s;
}

#view-reader .dock .tool {
  height: 34px;
}

#view-reader .dock .sz {
  height: 26px;
}

#view-reader .dock .tool:hover,
#view-reader .dock .sz:hover {
  border-color: var(--s1);
  color: var(--text);
}

#view-reader .dock .tool.on,
#view-reader .dock .sz.on {
  border-color: var(--mauve);
  background: rgba(203, 166, 247, .1);
  color: var(--mauve);
}

#view-reader .dock .tool:disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

#view-reader .dock .tool svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

#view-reader .dock .sz span {
  display: block;
  border-radius: 50%;
  background: currentColor;
}

#view-reader .dock .sz[data-sz="s"] span { width: 4px;  height: 4px }
#view-reader .dock .sz[data-sz="m"] span { width: 8px;  height: 8px }
#view-reader .dock .sz[data-sz="l"] span { width: 12px; height: 12px }

#view-reader .dock .cl {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .1s;
}

#view-reader .dock .cl:hover {
  transform: scale(1.12);
}

#view-reader .dock .cl.on {
  border-color: var(--text);
  box-shadow: inset 0 0 0 2px var(--mantle);
}

#view-reader .canv {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: crosshair;
  touch-action: none;
  pointer-events: none;
}

#view-reader .canv.inv {
  filter: invert(1) hue-rotate(180deg);
}

#view-reader .txt {
  position: absolute;
  z-index: 4;
  max-width: 60%;
  min-width: 8px;
  padding: 1px 4px;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-wrap: break-word;
  caret-color: currentColor;
  user-select: none;
  pointer-events: none;
}

body.draw-mode #view-reader .canv {
  pointer-events: auto;
}

body.draw-mode #view-reader .hs {
  pointer-events: none;
}

body.draw-mode #view-reader .txt {
  cursor: grab;
  pointer-events: auto;
}

body.draw-mode #view-reader .txt:hover {
  outline: 1.5px dashed var(--mauve);
  outline-offset: 2px;
  background: rgba(203, 166, 247, .08);
}

body.draw-mode #view-reader .txt.drag {
  outline: 1.5px solid var(--mauve);
  outline-offset: 2px;
  opacity: .85;
  cursor: grabbing;
}

body.text-mode #view-reader .canv {
  pointer-events: none;
}

body.text-mode #view-reader .pi {
  cursor: crosshair;
}

body.text-mode #view-reader .txt {
  cursor: text;
  user-select: text;
}

body.text-mode #view-reader .txt:focus {
  outline: 1.5px solid var(--mauve);
  outline-offset: 2px;
  background: rgba(203, 166, 247, .08);
}

body.tool-eraser #view-reader .txt {
  cursor: cell;
}

body.tool-eraser #view-reader .txt:hover {
  outline: 1.5px dashed var(--peach);
  background: rgba(250, 179, 135, .12);
}

@media (max-width: 500px) {
  #view-reader .player {
    bottom: 12px;
    width: calc(100% - 16px);
    padding: 8px 14px 10px;
  }

  #view-reader .pp {
    width: 40px;
    height: 40px;
  }

  #view-reader .dock {
    right: 14px;
    --gap: 14px;
  }

  #view-reader .dock .tool {
    width: 32px;
    height: 32px;
  }

  #view-reader .dock .sz {
    width: 32px;
    height: 24px;
  }

  #view-reader .dock .cl {
    width: 20px;
    height: 20px;
  }
}

body.sb-open #view-reader .player.v {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

body.sb-open #view-reader .dock {
  opacity: 0;
  pointer-events: none;
}

#view-reader .dock {
  transition: top .25s ease, opacity .2s ease;
}

#view-reader .sb-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#view-reader .zoomer {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

#view-reader .dock.v .zoomer {
  padding-top: 6px;
  border-top: 1px solid var(--s0);
}

#view-reader .zoomer .zbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--subtext);
  cursor: pointer;
  transition: background .15s, color .15s;
}

#view-reader .zoomer .zbtn + .zbtn {
  margin-top: 3px;
}

#view-reader .zoomer .zbtn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  pointer-events: none;
}

#view-reader .zoomer .zbtn:disabled {
  opacity: .28;
  cursor: default;
}

@media (hover: hover) {
  #view-reader .zoomer .zbtn:not(:disabled):hover {
    background: var(--s0);
    color: var(--text);
  }
}

#view-reader .zoomer .zbtn:not(:disabled):active {
  background: color-mix(in srgb, var(--mauve) 25%, transparent);
  color: var(--mauve);
}

#view-reader .hint {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 96;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 14px 14px 14px 18px;
  transform: translateX(-50%);
  border: 2px solid var(--mauve);
  border-radius: 10px;
  background: var(--mantle);
  animation: hintIn .3s cubic-bezier(.2, .8, .2, 1) both;
}

#view-reader .hint span {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

#view-reader .hint button {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 7px;
  background: var(--mauve);
  color: var(--mantle);
  font: 800 12px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .05em;
  cursor: pointer;
}

@media (hover: hover) {
  #view-reader .hint button:hover {
    filter: brightness(1.12);
  }
}

body.hinting #view-reader .dock {
  display: none;
}

@keyframes hintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 640px) {
  #view-reader .hint {
    gap: 12px;
    padding: 12px 12px 12px 15px;
  }

  #view-reader .hint span {
    font-size: 13px;
  }

  #view-reader .hint button {
    padding: 8px 13px;
  }
}

@media (max-width: 640px) {
  #view-reader .zoomer {
    display: none;
  }

  #view-reader .dock:not(.v) .capsule {
    display: none;
  }

  #view-reader .dock.v .dock-panel {
    margin-bottom: 0;
  }
}

html:has(dialog[open]) {
  overflow: hidden;
}

.tdlg {
  width: min(300px, calc(100vw - 32px));
  padding: 0;

  border: 1px solid var(--mauve);
  border-radius: 8px;
  background: var(--mantle);
  color: var(--text);
}

.tdlg:focus {
  outline: none;
}

.tdlg::backdrop {
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(2px);
}

.tdlg[open] {
  animation: tdlgIn .16s cubic-bezier(.2, .8, .2, 1);
}

@keyframes tdlgIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.tdlg-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px 10px;
  color: var(--text);
  font: 700 10px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tdlg-ico {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url(../assets/foot.svg) center / contain no-repeat;
          mask: url(../assets/foot.svg) center / contain no-repeat;
}

.tdlg-list {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
}

.tdlg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--subtext);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background .13s, color .13s;
}

.tdlg-row.on {
  background: color-mix(in srgb, var(--surface0) 70%, transparent);
  color: var(--text);
}

@media (hover: hover) {
  .tdlg-row:hover {
    background: color-mix(in srgb, var(--surface0) 45%, transparent);
    color: var(--text);
  }
}

.tdlg-dots {
  display: flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--surface1);
  border-radius: 4px;
}

.tdlg-dots i {
  width: 10px;
  height: 16px;
}

.tdlg-dots i:first-child { border-radius: 3px 0 0 3px; }
.tdlg-dots i:last-child  { border-radius: 0 3px 3px 0; }

.tdlg-name {
  flex: 1;
  min-width: 0;
}

.tdlg-tick {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.tdlg-row.on .tdlg-tick {
  opacity: 1;
}

.ndlg {
  width: min(416px, calc(100vw - 24px));
  border: 0;
  max-height: calc(100dvh - 96px);
  margin-block: auto;
  transform: translateY(40px);
  overflow: visible;
}

.ndlg[open] {
  display: flex;
  flex-direction: column;
  animation: ndlgIn .16s cubic-bezier(.2, .8, .2, 1);
}

@keyframes ndlgIn {
  from { opacity: 0; transform: translateY(46px) scale(.98); }
  to   { opacity: 1; transform: translateY(40px); }
}

.ndlg::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--mauve);
  border-radius: 8px;
  -webkit-mask: radial-gradient(circle 39px at 50% 0, #0000 92%, #000 100%);
          mask: radial-gradient(circle 39px at 50% 0, #0000 92%, #000 100%);
  pointer-events: none;
  content: "";
}

.ndlg-hd {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 16px 16px;
}

.ndlg-badge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-top: -88px;
}

.ndlg-ico {
  width: 96px;
  height: 96px;
  background: var(--green);
  -webkit-mask: url(../assets/info.svg) center / contain no-repeat;
          mask: url(../assets/info.svg) center / contain no-repeat;
}

.ndlg-t {
  margin-top: 2px;
  padding: 6px 15px 5px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--surface0);
  color: var(--subtext);
  font: 900 11px "Zen Kaku Gothic New", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ndlg-log {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0 16px;
  max-height: min(240px, 44dvh);
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--base);
  list-style: none;
  overscroll-behavior: contain;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ndlg-log::-webkit-scrollbar {
  display: none;
}

.ndlg-ver {
  padding: 0;
}

.ndlg-ver + .ndlg-ver {
  border-top: 1px solid var(--surface1);
}

.ndlg-vh {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px 9px;
  border-bottom: 1px solid var(--surface1);
  background: var(--base);
}

.ndlg-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.ndlg-vn {
  color: var(--green);
  font: 700 13px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .04em;
}

.ndlg-vd {
  margin-left: auto;
  color: var(--overlay1);
  font: 700 9.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
}

.ndlg-vb {
  margin: 0;
  padding: 11px 14px 13px;
  color: var(--subtext);
  font-size: 13.5px;
  line-height: 1.55;
  list-style: none;
}

.ndlg-vb li {
  position: relative;
  padding-left: 15px;
}

.ndlg-vb li + li {
  margin-top: 7px;
}

.ndlg-vb li::before {
  position: absolute;
  top: .58em;
  left: 1px;
  width: 4px;
  height: 1px;
  background: var(--overlay0);
  content: "";
}

.ndlg-foot {
  flex: none;
  padding: 14px 16px 16px;
}

.ndlg-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: var(--crust);
  font: 900 12px "Zen Kaku Gothic New", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .13s;
}

.ndlg-arw {
  flex: none;
  width: 15px;
  height: 11px;
  background: var(--crust);
  -webkit-mask: url(../assets/next.svg) center / contain no-repeat;
          mask: url(../assets/next.svg) center / contain no-repeat;
}

@media (hover: hover) {
  .ndlg-ok:hover {
    filter: brightness(1.08);
  }
}

.vdlg {
  position: relative;
  display: none;
  width: min(404px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  margin-block: auto;
  background: var(--mantle);
  color: var(--text);
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  overflow: visible;
  transform: translateY(40px);
}

.vdlg[open] {
  display: flex;
  flex-direction: column;
  animation: vdlgIn .16s cubic-bezier(.2, .8, .2, 1);
}

@keyframes vdlgIn {
  from { opacity: 0; transform: translateY(46px) scale(.98); }
  to   { opacity: 1; transform: translateY(40px); }
}

.vdlg:focus { outline: none; }

.vdlg::backdrop {
  background: rgb(0 0 0 / .6);
  backdrop-filter: blur(3px);
}

.vdlg::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--mauve);
  border-radius: 8px;
  -webkit-mask: radial-gradient(circle 32px at 50% 0, #0000 92%, #000 100%);
          mask: radial-gradient(circle 32px at 50% 0, #0000 92%, #000 100%);
  pointer-events: none;
  content: "";
}

.vt-hd {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 12px;
}

.vt-badge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-top: -88px;
}

.vt-ico {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.vt-tag {
  margin-top: 2px;
  padding: 6px 15px 5px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--surface0);
  color: var(--subtext);
  font: 900 11px "Zen Kaku Gothic New", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.vt-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
}

.vt-tab {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: none;
  color: var(--overlay1);
  font: 700 9.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .13s, color .13s;
}

.vt-tab:focus:not(:focus-visible),
.vt-go:focus:not(:focus-visible),
.vt-all:focus:not(:focus-visible),
.vt-done:focus:not(:focus-visible) {
  outline: none;
}

.vt-tab.on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}

.vt-panel {
  display: flex;
  flex-direction: column;
  margin: 0 16px;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  background: var(--base);
  overflow: hidden;
}

.vt-phd {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--surface1);
  background: var(--mantle);
}

.vt-phd span {
  flex: 1;
  color: var(--overlay1);
  font: 700 8.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vt-all {
  flex: none;
  padding: 6px 11px;
  border: 1px solid var(--surface1);
  border-radius: 4px;
  background: var(--surface0);
  color: var(--subtext);
  font: 700 8.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.vt-all.off {
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) {
  .vt-all:hover { border-color: var(--green); color: var(--green); }
}

.vt-body {
  display: grid;
  grid-template-columns: 100%;
  flex: 1;
  min-height: 0;
  max-height: min(360px, 46dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.vt-body::-webkit-scrollbar { display: none; }

.vt-pane {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  pointer-events: none;
}

.vt-pane.on {
  visibility: visible;
  pointer-events: auto;
}

.vt-it {
  display: flex;
  align-items: center;
  gap: 12px;
  
  padding: 9px 12px;
}

.vt-it + .vt-it { border-top: 1px solid var(--surface1); }

.vt-sw {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  aspect-ratio: .708;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--acc) 26%, var(--surface0));
  overflow: hidden;
}

.vt-sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vt-it.vt-lvl { padding-top: 4px; padding-bottom: 4px; }

.vt-it.vt-lvl .vt-sw {
  width: 24px;
  aspect-ratio: 1;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

.vt-sw .nb {
  width: 21px;
  height: 21px;
  background: var(--acc);
  -webkit-mask: url(../assets/notebook.svg) center / contain no-repeat;
          mask: url(../assets/notebook.svg) center / contain no-repeat;
}

.vt-tx {
  flex: 1;
  min-width: 0;
}

.vt-tx b {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vt-tx small {
  display: block;
  margin-top: 1px;
  color: var(--overlay1);
  font: 700 8.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vt-it.done .vt-tx small { color: var(--green); }
.vt-it.part .vt-tx small { color: var(--yellow); }
.vt-it.failed .vt-tx small { color: var(--red); }

.vt-pg {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
}

.vt-it.busy .vt-pg { display: flex; }
.vt-it.busy .vt-tx small { display: none; }

.vt-m {
  flex: 1;
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--surface0);
  overflow: hidden;
}

.vt-m i {
  display: block;
  height: 100%;
  background: var(--green);
  transition: width .2s;
}

.vt-pg em {
  flex: none;
  color: var(--green);
  font: 700 8.5px "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  letter-spacing: .08em;
}

.vt-acts {
  flex: none;
  display: flex;
  gap: 6px;
}

.vt-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--surface1);
  border-radius: 5px;
  background: var(--surface0);
  color: var(--text);
  cursor: pointer;
  transition: border-color .13s, color .13s;
}

.vt-go svg { width: 16px; height: 16px; }
.vt-go.del { color: var(--overlay1); }

.vt-go[disabled] {
  opacity: .35;
  cursor: default;
}

@media (hover: hover) {
  .vt-go:not([disabled]):hover { border-color: var(--green); color: var(--green); }
  .vt-go.del:not([disabled]):hover { border-color: var(--red); color: var(--red); }
}

.vt-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 13px;
}

.vt-use {
  flex: 1;
  min-width: 0;
}

.vt-use small {
  display: block;
  color: var(--overlay1);
  font: 700 8.5px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vt-use small b { color: var(--text); font-weight: 700; }

.vt-done {
  flex: none;
  padding: 11px 18px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: var(--crust);
  font: 900 10px "Zen Kaku Gothic New", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.vt-fab {
  --pad: env(safe-area-inset-bottom, 0px);
  position: fixed;
  right: 24px;
  bottom: calc(18px + var(--pad));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--mauve);
  color: var(--mantle);
  cursor: pointer;
  transition: transform .15s, background .2s;
}

body.in-notes .vt-fab,
body.in-reader .vt-fab,
body.modal .vt-fab { display: none; }

.vt-fab:hover { transform: scale(1.05); }
.vt-fab:active { transform: scale(.95); }

.vt-fab .ico {
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url(../assets/manage.svg) center / contain no-repeat;
          mask: url(../assets/manage.svg) center / contain no-repeat;
}

.no-install .vt-fab,
.no-install #view-notes .side-top .root[data-vault],
.no-install #view-reader #sbOffline {
  display: none;
}

#view-notes .side-top .root[data-vault] {
  margin-top: 8px;
  cursor: pointer;
}

#view-notes .side-top .root[data-vault]:focus:not(:focus-visible) {
  outline: none;
}

#view-notes .side-top .root .vi {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url(../assets/manage.svg) center / contain no-repeat;
          mask: url(../assets/manage.svg) center / contain no-repeat;
}

#view-reader .sb-item .ti.vi {
  -webkit-mask-image: url(../assets/manage.svg);
          mask-image: url(../assets/manage.svg);
}

#view-reader:has(.offpage),
#view-notes:has(.offpage) {
  min-height: 100dvh;
}

.offpage {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: calc(100dvh - var(--tbh, 59px) - env(safe-area-inset-top, 0px) - 96px);
  padding: 40px 26px;
  text-align: center;
}

.offpage .op-cat {
  width: 170px;
  height: 170px;
  object-fit: contain;
}

.offpage h3 {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.offpage p {
  max-width: 310px;
  color: var(--subtext);
  font-size: 13px;
  line-height: 1.65;
}