/* LightNovel.to design system — one-file stylesheet.
   Add in <head>: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;800&family=Literata:opsz,wght@7..72,400;7..72,600&display=swap">
   then: <link rel="stylesheet" href="https://lzdevs.com/design/lightnovel/lightnovel.css">  (or copy this file into your project) */

/* ===== tokens.css ===== */
/* LightNovel.to design tokens. Generated from tokens.json (source: LZDevs/lewdmanhwa main@446d2c8).
   Themes: main (default, no attribute), [data-theme="dark"] (OLED black), [data-theme="light"]. */
:root {
  --ln-bg: oklch(0.2348 0.0041 264.5);
  --ln-card: oklch(0.2768 0 0);
  --ln-card-2: oklch(0.3139 0.0035 286.2);
  --ln-line: oklch(0.4014 0.0036 264.5);
  --ln-line-soft: oklch(0.3300 0.0036 264.5);
  --ln-btn-line: oklch(0.3763 0.0014 0);
  --ln-btn-bg: oklch(0.3169 0.0038 264.5);
  --ln-fg: oklch(0.7933 0.0072 247.9);
  --ln-fg-hi: oklch(0.9361 0.0035 247.9);
  --ln-fg-2: oklch(0.6937 0.0064 239.9);
  --ln-fg-3: oklch(0.5167 0.0020 247.9);
  --ln-accent: oklch(0.6497 0.1552 255.1);
  --ln-accent-fg: #ffffff;
  --ln-medal: oklch(0.80 0.14 85);
  --ln-warn: #e06c6c;
  --ln-badge-scrim: rgba(0, 0, 0, 0.65);
  --rd-paper-bg: #faf8f3;
  --rd-paper-fg: #23211d;
  --rd-paper-fg-2: #63605a;
  --rd-paper-line: #e3ded2;
  --rd-paper-card: #f2eee4;
  --rd-sepia-bg: #f4ecd8;
  --rd-sepia-fg: #3b3327;
  --rd-sepia-fg-2: #6b604d;
  --rd-sepia-line: #e0d5bb;
  --rd-sepia-card: #ece2c9;
  --rd-dark-bg: #1d1e20;
  --rd-dark-fg: #c8ccd0;
  --rd-dark-fg-2: #8b9096;
  --rd-dark-line: #35363a;
  --rd-dark-card: #26272a;
  --rd-black-bg: #000000;
  --rd-black-fg: #b9bdc2;
  --rd-black-fg-2: #7e8288;
  --rd-black-line: #24252a;
  --rd-black-card: #121316;
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --font-read-lora: "Lora", Georgia, serif;
  --font-read-dyslexic: "OpenDyslexic", "Comic Sans MS", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5-5: 22px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9-5: 38px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 99px;
  --size-control-sm: 32px;
  --size-control: 38px;
  --size-control-md: 44px;
  --size-control-lg: 50px;
  --size-row: 56px;
  --size-header: 82px;
  --size-content-max: 1320px;
  --size-cover-col: 236px;
  --size-menu-panel: 380px;
  --size-measure: 72ch;
  --shadow-menu: 0 18px 48px rgba(0, 0, 0, 0.66);
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-control-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
  color-scheme: dark;
}
:root[data-theme="dark"] {
  --ln-bg: oklch(0 0 0);
  --ln-card: oklch(0.1700 0.0030 264.5);
  --ln-card-2: oklch(0.2300 0.0035 286.2);
  --ln-line: oklch(0.3100 0.0036 264.5);
  --ln-line-soft: oklch(0.2600 0.0036 264.5);
  --ln-btn-line: oklch(0.2900 0.0014 0);
  --ln-btn-bg: oklch(0.2500 0.0038 264.5);
  --ln-fg: oklch(0.7933 0.0072 247.9);
  --ln-fg-hi: oklch(0.9361 0.0035 247.9);
  --ln-fg-2: oklch(0.6600 0.0064 239.9);
  --ln-fg-3: oklch(0.5000 0.0020 247.9);
  --ln-accent: oklch(0.6900 0.1500 255.1);
  --ln-medal: oklch(0.82 0.15 85);
}
:root[data-theme="light"] {
  --ln-bg: oklch(0.9674 0.0013 0);
  --ln-card: oklch(1 0 0);
  --ln-card-2: oklch(0.9437 0.0027 286.3);
  --ln-line: oklch(0.9137 0.0040 286.3);
  --ln-line-soft: oklch(0.9400 0.0030 286.3);
  --ln-btn-line: oklch(0.8868 0.0068 286.3);
  --ln-btn-bg: oklch(1 0 0);
  --ln-fg: oklch(0.3749 0.0073 264.5);
  --ln-fg-hi: oklch(0.2103 0.0059 285.9);
  --ln-fg-2: oklch(0.5199 0.0087 260.7);
  --ln-fg-3: oklch(0.6948 0.0068 255.5);
  --ln-accent: oklch(0.4711 0.1550 255.0);
  --ln-medal: oklch(0.70 0.15 75);
  color-scheme: light;
}

/* ===== fonts.css ===== */
/* Self-hosted reader faces. Montserrat, Inter and Literata come from Google Fonts (see lightnovel.css). */
@font-face { font-family: "Lora"; src: url("https://lzdevs.com/design/lightnovel/fonts/lora-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("https://lzdevs.com/design/lightnovel/fonts/lora-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("https://lzdevs.com/design/lightnovel/fonts/opendyslexic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ===== base.css ===== */
/* Minimal page base so the components sit on the right ground. Optional. */
html { background: var(--ln-bg); }
body { margin: 0; background: var(--ln-bg); color: var(--ln-fg); font: 400 16px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; color: var(--ln-fg-hi); }
.ln-container { max-width: var(--size-content-max); margin: 0 auto; padding: 0 var(--space-7); }
.ln-sprite { display: none; }

/* ===== components.css ===== */
/* LightNovel.to — component stylesheet. Ported from the site's own CSS
   (header.css, detail.css, filter-bar.css, shelf.css, novel-card.tsx, bookmark.css)
   with the tokens.css custom properties in place of the site's. */
.ln-mark { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; color: var(--ln-fg-hi); white-space: nowrap; }
.ln-mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.ln-mark b { color: var(--ln-accent); font-weight: 800; }
.ln-mark-svg { width: 26px; height: 26px; flex: none; }

.ln-sb { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--ln-btn-line); background: var(--ln-btn-bg); color: var(--ln-fg); font: 400 16px/1.55 var(--font-sans); cursor: pointer; text-align: left; transition: border-color .12s, color .12s, background-color .12s; }
.ln-sb:hover { border-color: var(--ln-fg-3); color: var(--ln-fg-hi); }
.ln-sb svg { color: var(--ln-fg-3); flex: none; }
.ln-sb.ln-pri { background: var(--ln-accent); border-color: var(--ln-accent); color: var(--ln-accent-fg); font-weight: 500; }
.ln-sb.ln-pri:hover { background: color-mix(in srgb, var(--ln-accent) 86%, #fff); border-color: color-mix(in srgb, var(--ln-accent) 86%, #fff); }
.ln-sb.ln-pri svg { color: var(--ln-accent-fg); }
.ln-mbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--ln-fg); font: 400 16px/1.55 var(--font-sans); cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; }
.ln-mbtn:hover { color: var(--ln-fg-hi); }
.ln-mbtn.ln-solid { background: var(--ln-btn-bg); border-color: var(--ln-btn-line); box-shadow: var(--shadow-control-soft); }
.ln-mbtn.ln-solid:hover { border-color: var(--ln-fg-3); }
.ln-mbtn svg { color: var(--ln-fg-3); flex: none; }
.ln-seam { width: 100%; padding: 10px 16px; border-radius: var(--radius-md); border: 1px dashed var(--ln-btn-line); background: transparent; color: var(--ln-fg); font: 400 16px/1.55 var(--font-sans); cursor: pointer; transition: border-color .12s, color .12s; }
.ln-seam:hover { border-color: var(--ln-accent); color: var(--ln-fg-hi); }
.ln-fb-apply { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid var(--ln-accent); background: transparent; color: var(--ln-fg-hi); font: 400 16px/1 var(--font-sans); cursor: pointer; }
.ln-fb-apply:hover { background: color-mix(in srgb, var(--ln-accent) 14%, transparent); }

.ln-ico { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--ln-fg-2); background: transparent; border: 0; cursor: pointer; flex: none; transition: background-color .12s, color .12s; }
.ln-ico:hover { background: var(--ln-card); color: var(--ln-fg); }
.ln-ico[data-open] { background: var(--ln-card-2); color: var(--ln-fg-hi); }
.ln-iconbtn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--ln-btn-line); background: var(--ln-btn-bg); color: var(--ln-fg-2); cursor: pointer; }
.ln-iconbtn:hover { color: var(--ln-fg-hi); border-color: var(--ln-fg-3); }
.ln-iconbtn[aria-pressed="true"] { color: var(--ln-fg-hi); border-color: var(--ln-accent); }
.ln-bm-solid { width: 46px; height: 46px; flex: none; border-radius: var(--radius-md); background: var(--ln-card); border: 1px solid var(--ln-line-soft); display: grid; place-items: center; color: var(--ln-fg-2); cursor: pointer; }
.ln-bm-solid[data-on] { color: var(--ln-accent); }

.ln-search { height: 50px; border-radius: var(--radius-md); background: var(--ln-card); display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px; min-width: 0; max-width: 470px; }
.ln-search-go { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ln-fg-3); cursor: pointer; border-radius: var(--radius-sm); }
.ln-search-go:hover { color: var(--ln-fg); }
.ln-search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--ln-fg-hi); font: 400 16px/1 var(--font-sans); }
.ln-search input::placeholder { color: var(--ln-fg-3); }
.ln-search kbd { margin-left: auto; font: 400 11px/1 var(--font-mono); background: var(--ln-card-2); color: var(--ln-fg-3); padding: 4px 7px; border-radius: var(--radius-sm); flex: none; }
.ln-find { height: 46px; border-radius: var(--radius-md); background: var(--ln-card-2); display: flex; align-items: center; gap: 11px; padding: 0 15px; color: var(--ln-fg-3); font-size: 14.5px; }
.ln-find input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ln-fg); font: 400 16px/1 var(--font-sans); }

.ln-fb-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ln-fb-field > label { font: 500 11px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ln-fg-3); }
.ln-fb-field input, .ln-fb-field select { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--ln-btn-line); background: var(--ln-btn-bg); color: var(--ln-fg-hi); font: 400 16px/1 var(--font-sans); appearance: none; -webkit-appearance: none; }
.ln-fb-field input::placeholder { color: var(--ln-fg-3); }
.ln-fb-field select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ln-fg-3) 50%), linear-gradient(135deg, var(--ln-fg-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.ln-fb-field input:focus, .ln-fb-field select:focus { outline: 2px solid var(--ln-accent); outline-offset: -1px; border-color: transparent; }

.ln-ctabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); border: 1px solid var(--ln-btn-line); background: transparent; }
.ln-ctabs button { padding: 0 14px; min-height: 38px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ln-fg-2); font: 400 15px/1 var(--font-sans); cursor: pointer; transition: color .12s; }
.ln-ctabs button:hover { color: var(--ln-fg); }
.ln-ctabs button[aria-pressed="true"] { background: var(--ln-btn-bg); color: var(--ln-fg-hi); box-shadow: var(--shadow-control); }
.ln-fb-sorts { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.ln-fb-sorts a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--radius-md); color: var(--ln-fg-2); font-size: 15px; text-decoration: none; }
.ln-fb-sorts a:hover { color: var(--ln-fg-hi); }
.ln-fb-sorts a[aria-current="page"] { background: var(--ln-btn-bg); color: var(--ln-fg-hi); box-shadow: var(--shadow-control); }

.ln-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ln-chips .ln-lead { color: var(--ln-fg-3); flex: none; }
.ln-gen, .ln-tg { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; border-radius: var(--radius-sm); padding: 5px 11px; background: var(--ln-card-2); color: var(--ln-fg); text-decoration: none; }
.ln-gen:hover, .ln-tg:hover { color: var(--ln-fg-hi); }
.ln-tg { color: var(--ln-fg-3); }
.ln-fb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-md); background: var(--ln-card-2); color: var(--ln-fg); font-size: 13.5px; text-decoration: none; }
.ln-fb-chip b { font-weight: 500; color: var(--ln-fg-3); }
.ln-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; line-height: 1.5; }
.ln-tagrow > svg { color: var(--ln-fg-3); flex: none; }
.ln-tagrow a { color: var(--ln-fg); text-decoration: none; }
.ln-tagrow a:hover { color: var(--ln-fg-hi); text-decoration: underline; text-underline-offset: 3px; }
.ln-tagrow .ln-dot { color: var(--ln-fg-3); }

.ln-meta { display: flex; flex-wrap: wrap; gap: 22px 38px; padding: 14px 0; border-bottom: 1px solid var(--ln-line-soft); }
.ln-meta p { margin: 0; }
.ln-meta .ln-k { display: block; font: 400 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ln-fg-3); margin-bottom: 5px; }
.ln-meta .ln-v { display: block; font-size: 15.5px; color: var(--ln-fg-hi); text-decoration: none; }
.ln-meta a.ln-v:hover { text-decoration: underline; text-underline-offset: 3px; }
.ln-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--ln-line-soft); color: var(--ln-fg-2); font-size: 15px; }
.ln-facts span { display: inline-flex; align-items: center; gap: 6px; }
.ln-facts svg { color: var(--ln-fg-3); flex: none; }
.ln-facts b { color: var(--ln-fg-hi); font-weight: 500; font-variant-numeric: tabular-nums; }
.ln-facts .ln-warn { color: var(--ln-warn); }

.ln-crow { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border-radius: var(--radius-md); background: var(--ln-card); margin-bottom: 7px; color: var(--ln-fg); text-decoration: none; }
.ln-crow:hover { background: var(--ln-card-2); }
.ln-crow .ln-nm { font-size: 15px; font-weight: 500; color: var(--ln-fg-hi); flex: none; font-variant-numeric: tabular-nums; }
.ln-crow .ln-ct { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-crow .ln-ago { margin-left: auto; font-size: 13px; color: var(--ln-fg-3); flex: none; }

.ln-ncard { display: block; width: 150px; text-decoration: none; color: inherit; }
.ln-ncard .ln-cv { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ln-card); aspect-ratio: 5 / 7; }
.ln-ncard .ln-cv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ln-ncard:hover .ln-cv img { transform: scale(1.02); }
.ln-ncard .ln-cv-fallback { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; font: 400 15px/1.3 var(--font-read); color: var(--ln-fg-2); }
.ln-ncard .ln-badges { position: absolute; left: 7px; right: 7px; bottom: 7px; display: flex; align-items: center; gap: 4px; }
.ln-ncard .ln-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; background: var(--ln-accent); color: var(--ln-accent-fg); padding: 2px 6px; font: 600 11px/1.4 var(--font-sans); }
.ln-ncard .ln-stat { flex: none; display: inline-flex; align-items: center; gap: 2px; border-radius: 6px; background: var(--ln-badge-scrim); color: #fff; padding: 3px 6px; font: 400 11px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.ln-ncard .ln-stat i { margin: 0 2px; width: 1px; height: 10px; background: rgba(255,255,255,.3); }
.ln-ncard h3 { margin: 10px 0 0; font: 400 14px/20px var(--font-sans); color: var(--ln-fg); min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ln-ncard:hover h3 { color: var(--ln-fg-hi); }
.ln-ncard p { margin: 4px 0 0; font-size: 12px; color: var(--ln-fg-3); }

.ln-sh { display: flex; align-items: center; gap: 9px; }
.ln-sh a { display: inline-flex; align-items: center; gap: 9px; color: var(--ln-fg-hi); text-decoration: none; }
.ln-sh h2 { font: 600 25px/1.15 var(--font-display); letter-spacing: -.015em; margin: 0; }
.ln-sh .ln-chev { color: var(--ln-fg-3); flex: none; transition: transform .15s, color .15s; }
.ln-sh a:hover .ln-chev { color: var(--ln-fg); transform: translateX(2px); }
.ln-crumb { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--ln-fg-3); font-size: 14px; text-decoration: none; }
.ln-crumb:hover { color: var(--ln-fg); }
.ln-dtitle { margin: 2px 0 0; font: 600 32px/1.15 var(--font-display); letter-spacing: -.015em; color: var(--ln-fg-hi); }
.ln-lead { margin: 10px 0 0; max-width: 72ch; font-size: 15.5px; line-height: 1.6; color: var(--ln-fg); }

.ln-read { padding: 28px; border-radius: var(--radius-md); }
.ln-read[data-rt="paper"] { background: var(--rd-paper-bg); color: var(--rd-paper-fg); }
.ln-read[data-rt="sepia"] { background: var(--rd-sepia-bg); color: var(--rd-sepia-fg); }
.ln-read[data-rt="dark"] { background: var(--rd-dark-bg); color: var(--rd-dark-fg); }
.ln-read[data-rt="black"] { background: var(--rd-black-bg); color: var(--rd-black-fg); }
.ln-prose { margin: 0 auto; max-width: 66ch; font: 400 19px/1.65 var(--font-read); }
.ln-prose p { margin: 0 0 .9em; }
.ln-prose p:last-child { margin-bottom: 0; }
.ln-read small { display: block; margin-top: 16px; font: 400 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }