:root {
      color-scheme: dark;
      font-family: var(--font-body), sans-serif;
      color: #f4f2f7;
      background: #101116;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      --page: #101116;
      --panel: #191a21;
      --panel-soft: #202128;
      --muted: #9a9ba8;
      --line: rgb(255 255 255 / 8%);
      --accent: #c4f36b;
      --text: #f4f2f7;
      --text-soft: #c0bfca;
      --header: rgb(16 17 22 / 88%);
      --violet: #9b83ff;
    }

    * { box-sizing: border-box; }

    body.levelshadow-body {
      display: block;
      min-height: 100vh;
      margin: 0;
      background:
        radial-gradient(ellipse at 86% 0%, rgb(91 69 155 / 13%), transparent 29rem),
        var(--page);
      color: var(--text);
    }

    .levelshadow-main {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    button, input, a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    button { color: inherit; }

    .ls-wrap {
      width: min(1180px, calc(100% - 64px));
      margin: 0 auto;
    }

    .ls-header {
      position: sticky;
      z-index: 5;
      top: 0;
      border-bottom: 1px solid var(--line);
      background: var(--header);
      backdrop-filter: blur(18px);
    }

    .ls-header-inner {
      display: flex;
      min-height: 70px;
      align-items: center;
      gap: 20px;
    }

    .ls-brand {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 11px;
      font-family: var(--font-display), sans-serif;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.8px;
    }

    .ls-brand-mark {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--accent);
    }

    .ls-brand-mark svg { width: 22px; height: 22px; }
    .ls-brand span:last-child { color: var(--accent); }

    .ls-nav {
      display: flex;
      align-items: center;
      gap: 27px;
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 600;
    }

    .ls-nav a:hover, .ls-nav a.active { color: var(--accent); }
    .ls-nav a { white-space: nowrap; }
    .ls-theme-trigger {
      display: inline-flex;
      min-height: 38px;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      color: var(--text-soft);
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .ls-theme-trigger:hover { border-color: var(--accent); color: var(--accent); }
    .ls-theme-trigger svg { width: 16px; height: 16px; }
    .ls-search {
      position: relative;
      display: flex;
      width: min(250px, 23vw);
      height: 39px;
      align-items: center;
      margin-left: auto;
    }

    .ls-search svg {
      position: absolute;
      left: 13px;
      width: 17px;
      height: 17px;
      color: #8d8e9a;
      pointer-events: none;
    }

    .ls-search input {
      width: 100%;
      height: 100%;
      padding: 0 14px 0 39px;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: none;
      background: var(--panel);
      color: var(--text);
      font-size: 13px;
    }

    .ls-search input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
    .ls-search input::placeholder { color: var(--muted); }
    .ls-account { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; }
    .ls-login { color: var(--text-soft); font-size: 13px; font-weight: 700; }
    .ls-account-menu { position: relative; }
    .ls-account-menu > summary {
      display: flex;
      max-width: 190px;
      min-height: 42px;
      align-items: center;
      gap: 9px;
      padding: 3px 10px 3px 4px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--panel);
      cursor: pointer;
      list-style: none;
    }
    .ls-account-menu > summary::-webkit-details-marker { display: none; }
    .ls-account-menu > summary:hover, .ls-account-menu[open] > summary { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); }
    .ls-account-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .ls-account-avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
    .ls-account-name { overflow: hidden; color: var(--text); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .ls-account-chevron { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); transition: transform .18s ease; }
    .ls-account-menu[open] .ls-account-chevron { transform: rotate(180deg); }
    .ls-account-popover {
      position: absolute;
      z-index: 20;
      top: calc(100% + 10px);
      right: 0;
      width: min(300px, calc(100vw - 24px));
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--panel);
      box-shadow: 0 20px 50px rgb(0 0 0 / 32%);
    }
    .ls-account-identity { display: grid; gap: 5px; padding: 10px 11px 13px; border-bottom: 1px solid var(--line); }
    .ls-account-identity strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .ls-account-identity span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .ls-account-popover > a, .ls-account-popover form button {
      display: block;
      width: 100%;
      padding: 10px 11px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--text-soft);
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      text-align: left;
      text-decoration: none;
    }
    .ls-account-popover > a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
    .ls-account-popover form { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
    .ls-account-popover form button { color: #e99898; }
    .ls-account-popover form button:hover { background: rgb(233 112 112 / 10%); }
    .ls-signup, .ls-cta {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 17px;
      border: 0;
      border-radius: 10px;
      background: var(--accent);
      color: #171a11;
      font-size: 12px;
      font-weight: 800;
      transition: transform .18s ease, background .18s ease;
    }

    .ls-signup:hover, .ls-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
    .ls-signup { min-height: 36px; padding: 0 14px; }

    .ls-hero {
      position: relative;
      display: grid;
      min-height: 370px;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      overflow: hidden;
      margin-top: 22px;
      border: 1px solid rgb(255 255 255 / 7%);
      border-radius: 22px;
      background:
        linear-gradient(90deg, #1d1b27 0%, rgb(29 27 39 / 97%) 33%, rgb(29 27 39 / 60%) 63%, rgb(29 27 39 / 8%) 100%),
        linear-gradient(0deg, rgb(12 13 18 / 30%), transparent),
        url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1600&q=85") center 48% / cover;
    }

    .ls-hero::before {
      position: absolute;
      top: -160px;
      right: 7%;
      width: 470px;
      height: 470px;
      border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
      border-radius: 50%;
      box-shadow: 0 0 0 45px color-mix(in srgb, var(--accent) 3%, transparent), 0 0 0 95px color-mix(in srgb, var(--accent) 2%, transparent);
      content: "";
    }

    .ls-hero-content { position: relative; z-index: 1; max-width: 570px; padding: 42px 0 42px 48px; }
    .ls-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
    }

    .ls-kicker::before { width: 20px; height: 1px; background: currentColor; content: ""; }
    .ls-hero h1 {
      max-width: 550px;
      margin: 18px 0 14px;
      font-family: var(--font-display), sans-serif;
      font-size: clamp(40px, 4.5vw, 54px);
      font-weight: 800;
      letter-spacing: -2.2px;
      line-height: 1.08;
      color: #f4f2f7;
    }

    .ls-hero h1 em { color: var(--accent); font-style: normal; }
    .ls-hero-description { max-width: 470px; margin: 0; color: #d0cfda; font-size: 15px; line-height: 1.7; }
    .ls-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; color: #d4d2dc; font-size: 12px; }
    .ls-rating { color: #f8cf69; font-weight: 700; }
    .ls-dot { width: 3px; height: 3px; border-radius: 50%; background: #8d8b98; }
    .ls-hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
    .ls-cta svg { width: 15px; height: 15px; }
    .ls-text-link { color: #e6e3ec; font-size: 13px; font-weight: 700; }
    .ls-text-link:hover { color: var(--accent); }
    .ls-hero-cover {
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 11%;
      width: 195px;
      aspect-ratio: .69;
      transform: translateY(-50%) rotate(5deg);
      border: 5px solid rgb(255 255 255 / 12%);
      border-radius: 9px;
      background:
        linear-gradient(180deg, rgb(11 14 19 / 5%) 20%, rgb(11 14 19 / 88%) 100%),
        url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=700&q=85") center / cover;
      box-shadow: 0 30px 65px rgb(0 0 0 / 48%);
    }

    .ls-cover-copy { position: absolute; right: 13px; bottom: 17px; left: 13px; text-align: center; }
    .ls-cover-copy small { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: 2px; }
    .ls-cover-copy strong { display: block; margin-top: 7px; font-family: var(--font-display), sans-serif; font-size: 20px; line-height: 1.1; }
    .ls-cover-copy span { display: block; margin-top: 7px; color: #d3d0db; font-size: 8px; letter-spacing: 2px; }

    .ls-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0 34px; }
    .ls-benefit {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--panel);
    }

    .ls-benefit-icon {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 11px;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent);
    }

    .ls-benefit-icon svg { width: 19px; height: 19px; }
    .ls-benefit:nth-child(2) .ls-benefit-icon { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
    .ls-benefit:nth-child(3) .ls-benefit-icon { background: rgb(255 168 115 / 12%); color: #ffad7b; }
    .ls-benefit strong { display: block; font-size: 13px; }
    .ls-benefit span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 11px; }

    .ls-section { margin: 0 0 38px; scroll-margin-top: 88px; }
    .ls-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
    .ls-section-heading h2 { margin: 0; font-family: var(--font-display), sans-serif; font-size: 24px; letter-spacing: -.45px; }
    .ls-section-heading p { margin: 6px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
    .ls-view-all { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 750; }
    .ls-view-all svg { width: 14px; height: 14px; }

    .ls-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
    .ls-genre {
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--text-soft);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: .18s ease;
    }

    .ls-genre:hover, .ls-genre.is-active { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
    .ls-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 28px; }
    .ls-layout > #audio-list { min-width: 0; }
    .ls-book-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
    .ls-book { min-width: 0; }
    .ls-category-empty { grid-column: 1 / -1; margin: 0; padding: 28px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; text-align: center; }
    .ls-book-cover {
      position: relative;
      display: block;
      overflow: hidden;
      aspect-ratio: .82;
      border: 1px solid rgb(255 255 255 / 8%);
      border-radius: 11px;
      background-color: #292532;
      background-position: center;
      background-size: cover;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .ls-book:hover .ls-book-cover { transform: translateY(-4px); box-shadow: 0 15px 25px rgb(0 0 0 / 24%); }
    .ls-book-cover::after { position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 78%)); content: ""; }
    .ls-book-cover.cover-1 { background-image: linear-gradient(155deg, rgb(16 21 29 / 2%), rgb(16 21 29 / 32%)), url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-2 { background-image: linear-gradient(155deg, rgb(28 13 23 / 5%), rgb(28 13 23 / 30%)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-3 { background-image: linear-gradient(155deg, rgb(12 18 28 / 5%), rgb(12 18 28 / 33%)), url("https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-4 { background-image: linear-gradient(155deg, rgb(35 18 18 / 5%), rgb(35 18 18 / 34%)), url("https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-5 { background-image: linear-gradient(155deg, rgb(19 13 30 / 6%), rgb(19 13 30 / 32%)), url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-6 { background-image: linear-gradient(155deg, rgb(20 20 24 / 5%), rgb(20 20 24 / 33%)), url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-7 { background-image: linear-gradient(155deg, rgb(19 16 28 / 6%), rgb(19 16 28 / 32%)), url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=650&q=80"); }
    .ls-book-cover.cover-8 { background-image: linear-gradient(155deg, rgb(12 19 24 / 7%), rgb(12 19 24 / 34%)), url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=650&q=80"); }
    .ls-cover-title { position: absolute; z-index: 1; right: 11px; bottom: 13px; left: 11px; color: white; font-family: var(--font-display), sans-serif; font-size: 15px; font-weight: 800; line-height: 1.25; text-shadow: 0 2px 8px #000; }
    .ls-badge {
      position: absolute;
      z-index: 1;
      top: 9px;
      left: 9px;
      padding: 5px 7px;
      border-radius: 5px;
      background: var(--accent);
      color: #171a11;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .35px;
    }

    .ls-book-info { padding: 9px 1px 0; }
    .ls-book-info h3 { overflow: hidden; margin: 0; color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .ls-book-author { overflow: hidden; margin: 5px 0 8px; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .ls-book-status { display: inline-flex; margin: 0 0 8px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--text-soft); font-size: 10px; font-weight: 700; }
    .ls-book-status-completed { border-color: color-mix(in srgb, #69c99a 28%, var(--line)); color: #69c99a; }
    .ls-book-status-ongoing { color: var(--accent); }
    .ls-book-meta { display: flex; justify-content: space-between; gap: 6px; color: var(--text-soft); font-size: 11px; }
    .ls-book-meta span:first-child { color: var(--accent); }

    .ls-ranking { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
    .ls-ranking h3 { margin: 0 0 17px; font-family: var(--font-display), sans-serif; font-size: 16px; }
    .ls-rank-item { display: grid; grid-template-columns: 22px 43px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
    .ls-rank-number { color: #8e8d98; font-family: var(--font-display), sans-serif; font-size: 12px; font-weight: 800; text-align: center; }
    .ls-rank-item:nth-of-type(2) .ls-rank-number { color: var(--accent); }
    .ls-rank-thumb { width: 43px; height: 52px; border-radius: 5px; background-position: center; background-size: cover; }
    .ls-rank-copy { min-width: 0; }
    .ls-rank-copy strong { display: -webkit-box; overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ls-rank-copy span { display: block; margin-top: 5px; color: var(--text-soft); font-size: 11px; }
    .ls-update-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .ls-update {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
    }

    .ls-update-art { width: 48px; height: 58px; flex: 0 0 auto; border-radius: 6px; background-position: center; background-size: cover; }
    .ls-update-copy { min-width: 0; }
    .ls-update-copy strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .ls-update-copy span { display: block; margin-top: 6px; color: var(--text-soft); font-size: 11px; }
    .ls-footer { margin-top: 52px; border-top: 1px solid var(--line); color: var(--muted); }
    .ls-footer-content { display: grid; justify-items: center; gap: 15px; padding-top: 26px; }
    .ls-footer-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 50%; background: var(--panel); color: var(--accent); }
    .ls-footer-mark svg { width: 22px; height: 22px; }
    .ls-footer-nav { display: flex; align-items: center; justify-content: center; gap: 28px; padding-bottom: 12px; }
    .ls-footer-nav a { color: var(--text-soft); font-size: 12px; font-weight: 600; text-decoration: none; transition: color .18s ease; }
    .ls-footer-nav a:hover { color: var(--accent); }
    .ls-footer-bottom { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); font-size: 11px; }
    .ls-footer-bottom a { color: var(--text-soft); text-decoration: none; white-space: nowrap; }
    .ls-footer-bottom a:hover { color: var(--accent); }
    .ls-empty { display: none; grid-column: 1 / -1; padding: 30px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; text-align: center; }

    @media (max-width: 1000px) {
      .ls-wrap { width: min(100% - 40px, 900px); }
      .ls-header-inner { gap: 18px; }
      .ls-nav { gap: 14px; }
      .ls-search { width: 210px; }
      .ls-header .ls-theme-trigger span { display: none; }
      .ls-header .ls-theme-trigger { width: 38px; padding: 0; }
      .ls-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; }
      .ls-book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .ls-book:nth-of-type(n+7) { display: none; }
      .ls-hero-cover { right: 7%; width: 175px; }
    }

    @media (max-width: 760px) {
      .ls-wrap { width: calc(100% - 32px); }
      .ls-header-inner { min-height: 67px; flex-wrap: wrap; gap: 14px; padding: 12px 0; }
      .ls-brand { font-size: 18px; }
      .ls-header .ls-theme-trigger { order: 1; margin-left: auto; }
      .ls-search { order: 2; width: auto; flex: 1 1 160px; margin-left: 0; }
      .ls-account { order: 3; gap: 12px; margin-left: 0; }
      .ls-nav { order: 4; width: 100%; justify-content: center; gap: 28px; font-size: 13px; }
      .ls-hero { min-height: 370px; grid-template-columns: 1fr; margin-top: 18px; background-position: center, center, 62% center; }
      .ls-hero-content { padding: 42px 32px; }
      .ls-hero h1 { max-width: 420px; font-size: clamp(38px, 8vw, 52px); }
      .ls-hero-description { max-width: 420px; font-size: 14px; }
      .ls-hero-cover { right: 8%; width: 125px; opacity: .4; }
      .ls-hero::before { right: -25%; }
      .ls-benefits { gap: 8px; margin: 13px 0 34px; }
      .ls-benefit { align-items: flex-start; gap: 9px; padding: 12px 10px; }
      .ls-benefit-icon { width: 31px; height: 31px; border-radius: 9px; }
      .ls-benefit-icon svg { width: 16px; height: 16px; }
      .ls-benefit strong { font-size: 12px; }
      .ls-benefit span { font-size: 10px; line-height: 1.4; }
      .ls-layout { grid-template-columns: 1fr; }
      .ls-ranking { display: none; }
      .ls-book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
      .ls-update-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ls-section { margin-bottom: 36px; }
    }

    @media (max-width: 520px) {
      .ls-wrap { width: calc(100% - 28px); }
      .ls-nav { justify-content: flex-start; overflow-x: auto; gap: 23px; padding-bottom: 2px; white-space: nowrap; }
      .ls-nav a { font-size: 11px; }
      .ls-login { font-size: 12px; }
      .ls-signup { min-height: 32px; padding: 0 11px; font-size: 11px; }
      .ls-account-menu > summary { max-width: 145px; min-height: 36px; gap: 6px; padding-right: 7px; }
      .ls-account-avatar { width: 29px; height: 29px; }
      .ls-account-name { max-width: 74px; font-size: 11px; }
      .ls-account-chevron { width: 12px; height: 12px; }
      .ls-search { min-width: 120px; height: 36px; }
      .ls-hero { min-height: 390px; border-radius: 16px; background-position: center, center, 62% center; }
      .ls-hero-content { padding: 34px 22px; }
      .ls-hero h1 { max-width: 320px; font-size: 40px; letter-spacing: -1.8px; }
      .ls-hero-description { max-width: 300px; font-size: 14px; line-height: 1.65; }
      .ls-hero-cover { top: 54%; right: -10px; width: 120px; opacity: .27; }
      .ls-hero-actions { gap: 15px; }
      .ls-cta { min-height: 38px; padding: 0 13px; font-size: 12px; }
      .ls-benefits { grid-template-columns: 1fr; gap: 7px; }
      .ls-benefit { align-items: center; padding: 10px 13px; }
      .ls-benefit-icon { width: 32px; height: 32px; }
      .ls-benefit strong { font-size: 12px; }
      .ls-benefit span { margin-top: 2px; font-size: 10px; }
      .ls-section-heading h2 { font-size: 20px; }
      .ls-section-heading p { font-size: 12px; }
      .ls-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
      .ls-book:nth-of-type(n+7) { display: block; }
      .ls-cover-title { font-size: 16px; }
      .ls-book-info h3 { font-size: 12px; }
      .ls-update-list { grid-template-columns: 1fr; }
      .ls-footer-bottom { min-height: 66px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
      .ls-footer-nav { gap: 23px; }
    }

    html[data-theme="ivory"] {
      --accent: #d8aa50; --page: #14120e; --panel: #1d1a15; --panel-soft: #252119;
      --muted: #aaa295; --line: rgb(255 255 255 / 9%); --text: #f4efe4;
      --text-soft: #c8c0b3; --header: rgb(20 18 14 / 90%);
    }
    html[data-theme="warm"] {
      --accent: #c69a50; --page: #17130e; --panel: #211c15; --panel-soft: #2a241b;
      --muted: #afa596; --line: rgb(255 255 255 / 9%); --text: #f1e8d9;
      --text-soft: #c8bdab; --header: rgb(23 19 14 / 90%);
    }
    html[data-theme="emerald"] {
      --accent: #17b899; --page: #0e1714; --panel: #15211d; --panel-soft: #1c2b26;
      --muted: #9eafa8; --line: rgb(255 255 255 / 9%); --text: #e8f4ef;
      --text-soft: #bdcec7; --header: rgb(14 23 20 / 90%);
    }
    html[data-theme="amber"] {
      --accent: #d19a43; --page: #19140d; --panel: #241d14; --panel-soft: #302619;
      --muted: #b2a28a; --line: rgb(255 255 255 / 9%); --text: #f5ecdc;
      --text-soft: #d0c0a5; --header: rgb(25 20 13 / 90%);
    }
    html[data-theme="mist"] {
      --accent: #8ab3dc; --page: #11171d; --panel: #19212a; --panel-soft: #212d38;
      --muted: #a4b1bd; --line: rgb(255 255 255 / 9%); --text: #edf4fa;
      --text-soft: #c3ced8; --header: rgb(17 23 29 / 90%);
    }
    html[data-theme="rosewood"] {
      --accent: #e59a9c; --page: #1a1216; --panel: #261b20; --panel-soft: #33232a;
      --muted: #b49fa5; --line: rgb(255 255 255 / 9%); --text: #f7edf0;
      --text-soft: #d3bec4; --header: rgb(26 18 22 / 90%);
    }
    html[data-theme="lavender"] {
      --accent: #b5a0f4; --page: #151320; --panel: #201d2d; --panel-soft: #2a263a;
      --muted: #aaa4bf; --line: rgb(255 255 255 / 9%); --text: #f0edfa;
      --text-soft: #cac4dc; --header: rgb(21 19 32 / 90%);
    }
    html[data-theme="slate"] {
      --accent: #90b8cc; --page: #11171b; --panel: #192126; --panel-soft: #222c33;
      --muted: #a4b1b8; --line: rgb(255 255 255 / 9%); --text: #edf3f5;
      --text-soft: #c4d0d5; --header: rgb(17 23 27 / 90%);
    }

    html[data-display-mode="light"] { color-scheme: light; }
    html[data-display-mode="light"][data-theme="ivory"] {
      --accent: #c99a43; --page: #f6f3ed; --panel: #fffdf8; --panel-soft: #eee9df;
      --muted: #777269; --line: rgb(55 47 35 / 13%); --text: #302b23;
      --text-soft: #615a50; --header: rgb(250 248 243 / 92%);
    }
    html[data-display-mode="light"][data-theme="warm"] {
      --accent: #9e6d32; --page: #f2ece2; --panel: #fbf6ed; --panel-soft: #e9decd;
      --muted: #776d60; --line: rgb(65 48 29 / 14%); --text: #352b20;
      --text-soft: #655746; --header: rgb(248 243 234 / 93%);
    }
    html[data-display-mode="light"][data-theme="emerald"] {
      --accent: #0aa887; --page: #eef6f2; --panel: #f9fcfa; --panel-soft: #dfede7;
      --muted: #687d75; --line: rgb(25 66 52 / 13%); --text: #1e332c;
      --text-soft: #4e675e; --header: rgb(247 251 248 / 93%);
    }
    html[data-display-mode="light"][data-theme="amber"] {
      --accent: #ae772a; --page: #f6f0e5; --panel: #fffaf0; --panel-soft: #eee2cc;
      --muted: #796e5c; --line: rgb(73 52 25 / 14%); --text: #372d20;
      --text-soft: #655743; --header: rgb(251 247 238 / 93%);
    }
    html[data-display-mode="light"][data-theme="mist"] {
      --accent: #477fa8; --page: #edf3f8; --panel: #f9fbfd; --panel-soft: #dce7f0;
      --muted: #687b89; --line: rgb(34 66 91 / 14%); --text: #21323e;
      --text-soft: #4f6574; --header: rgb(248 251 253 / 93%);
    }
    html[data-display-mode="light"][data-theme="rosewood"] {
      --accent: #b85f68; --page: #f7eff0; --panel: #fffafb; --panel-soft: #eedfe2;
      --muted: #806b70; --line: rgb(83 42 49 / 14%); --text: #3d292e;
      --text-soft: #6d4f55; --header: rgb(252 247 248 / 93%);
    }
    html[data-display-mode="light"][data-theme="lavender"] {
      --accent: #7862bd; --page: #f2f0f8; --panel: #fcfbff; --panel-soft: #e5e0f1;
      --muted: #756d8d; --line: rgb(61 48 100 / 14%); --text: #302a42;
      --text-soft: #5f5677; --header: rgb(250 249 253 / 93%);
    }
    html[data-display-mode="light"][data-theme="slate"] {
      --accent: #4d788d; --page: #eef3f5; --panel: #fafcfd; --panel-soft: #dfe8ec;
      --muted: #6e7c82; --line: rgb(36 57 66 / 14%); --text: #26363d;
      --text-soft: #53676f; --header: rgb(249 251 252 / 93%);
    }

    html[data-display-mode="light"] body.levelshadow-body {
      background: radial-gradient(ellipse at 86% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 29rem), var(--page);
      color: var(--text);
    }
    html[data-display-mode="light"] .ls-header { background: var(--header); }
    html[data-display-mode="light"] .ls-nav,
    html[data-display-mode="light"] .ls-theme-trigger,
    html[data-display-mode="light"] .ls-login { color: var(--text-soft); }
    html[data-display-mode="light"] .ls-search input,
    html[data-display-mode="light"] .ls-benefit,
    html[data-display-mode="light"] .ls-ranking,
    html[data-display-mode="light"] .ls-update { background: var(--panel); color: var(--text); }
    html[data-display-mode="light"] .ls-genre { background: var(--panel); color: var(--text-soft); }
    html[data-display-mode="light"] .ls-search input::placeholder,
    html[data-display-mode="light"] .ls-search svg { color: var(--muted); }
    html[data-display-mode="light"] .ls-benefit strong,
    html[data-display-mode="light"] .ls-section-heading h2,
    html[data-display-mode="light"] .ls-book-info h3,
    html[data-display-mode="light"] .ls-ranking h3,
    html[data-display-mode="light"] .ls-rank-copy strong,
    html[data-display-mode="light"] .ls-update-copy strong { color: var(--text); }
    html[data-display-mode="light"] .ls-benefit span,
    html[data-display-mode="light"] .ls-book-author,
    html[data-display-mode="light"] .ls-book-meta,
    html[data-display-mode="light"] .ls-rank-copy span,
    html[data-display-mode="light"] .ls-update-copy span { color: var(--text-soft); }
    html[data-display-mode="light"] .ls-book-meta span:first-child { color: var(--accent); }
    html[data-display-mode="light"] .ls-footer { color: var(--muted); }
    html[data-display-mode="light"] .ls-hero { box-shadow: 0 18px 50px rgb(52 43 27 / 12%); }

    @media (prefers-color-scheme: light) {
      html[data-display-mode="system"] { color-scheme: light; }
    }

    .theme-dialog {
      width: min(970px, calc(100% - 32px));
      height: min(760px, calc(100dvh - 40px));
      max-width: none;
      max-height: min(760px, calc(100dvh - 40px));
      padding: 0;
      overflow: hidden;
      border: 1px solid rgb(198 154 80 / 25%);
      border-radius: 26px;
      background: #1c1a17;
      color: #eee7dc;
      color-scheme: dark;
      box-shadow: 0 32px 110px rgb(0 0 0 / 65%);
    }

    .theme-dialog::backdrop { background: rgb(7 8 10 / 75%); backdrop-filter: blur(7px); }
    .theme-dialog-panel { display: grid; height: 100%; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; }
    .theme-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
    .theme-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgb(198 154 80 / 22%); border-radius: 999px; background: rgb(198 154 80 / 12%); color: #d5ab62; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
    .theme-dialog-header h2 { margin: 12px 0 4px; font-family: var(--font-display), sans-serif; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.8px; }
    .theme-dialog-header p { margin: 0; color: #b7afa2; font-size: 12px; }
    .theme-close { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(255 255 255 / 9%); border-radius: 13px; background: transparent; color: #c5bcae; cursor: pointer; }
    .theme-close:hover, .theme-cancel:hover, .theme-reset:hover { border-color: #b9965d; color: #f4e3bf; }
    .theme-close svg { width: 19px; height: 19px; }
    .theme-dialog-content { display: grid; align-content: start; gap: 14px; overflow-y: auto; padding: 16px 20px 20px; overscroll-behavior: contain; }
    .theme-mode-panel { padding: 16px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 20px; background: rgb(255 255 255 / 2%); }
    .theme-mode-panel h3, .theme-options-heading h3 { margin: 0; color: #a79e91; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
    .theme-mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
    .theme-mode-options button { min-height: 43px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 14px; background: transparent; color: #c7bfb3; cursor: pointer; font-size: 12px; font-weight: 700; }
    .theme-mode-options button[aria-pressed="true"] { border-color: transparent; background: var(--accent); color: #fff; }
    .theme-options-section { padding: 16px; border-radius: 20px; background: rgb(255 255 255 / 2%); }
    .theme-options-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .theme-options-heading p { margin: 6px 0 0; color: #c1b8aa; font-size: 12px; }
    .theme-current-label { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
    .theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .theme-card { min-width: 0; padding: 9px; border: 1px solid transparent; border-radius: 19px; background: transparent; color: #eee7dc; cursor: pointer; text-align: left; }
    .theme-card:hover { background: rgb(255 255 255 / 3%); }
    .theme-card[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
    .theme-preview { position: relative; display: block; height: 126px; overflow: hidden; border-radius: 14px; background: var(--preview-bg); }
    .theme-preview::before { position: absolute; top: 16px; right: 12px; left: 37px; height: 9px; border-radius: 99px; background: var(--preview-ink); content: ""; }
    .theme-preview::after { position: absolute; top: 41px; left: 12px; width: 37%; height: 7px; border-radius: 99px; background: var(--preview-ink); content: ""; }
    .theme-preview i { position: absolute; top: 10px; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--preview-accent); }
    .theme-preview b { position: absolute; top: 62px; left: 12px; width: 54%; height: 6px; border-radius: 99px; background: var(--preview-muted); }
    .theme-preview em { position: absolute; right: 12px; bottom: 12px; left: 12px; height: 28px; border-radius: 9px; background: var(--preview-surface); }
    .theme-preview small { position: absolute; z-index: 1; right: 12px; bottom: 12px; width: 22%; height: 28px; border-radius: 0 9px 9px 0; background: var(--preview-accent); }
    .preview-ivory { --preview-bg: #f8f6f1; --preview-ink: #5d5851; --preview-muted: #b8b2aa; --preview-surface: linear-gradient(90deg, #fffdfa 48%, #f2eadc 48%); --preview-accent: #c99a43; }
    .preview-warm { --preview-bg: #f2e9db; --preview-ink: #5b5147; --preview-muted: #b2a697; --preview-surface: linear-gradient(90deg, #fbf5eb 48%, #e6d8c3 48%); --preview-accent: #9e6d32; }
    .preview-emerald { --preview-bg: #f0f8f4; --preview-ink: #52635c; --preview-muted: #a7b5af; --preview-surface: linear-gradient(90deg, #f8fcf9 48%, #d7eee6 48%); --preview-accent: #0aa887; }
    .preview-amber { --preview-bg: #f7f1e7; --preview-ink: #5e574c; --preview-muted: #b5aa98; --preview-surface: linear-gradient(90deg, #fffaf1 48%, #efe2cb 48%); --preview-accent: #ae772a; }
    .preview-mist { --preview-bg: #f1f6fa; --preview-ink: #53636e; --preview-muted: #aab8c2; --preview-surface: linear-gradient(90deg, #fbfdff 48%, #dce8f1 48%); --preview-accent: #477fa8; }
    .preview-rosewood { --preview-bg: #f8eff0; --preview-ink: #655258; --preview-muted: #c0aaae; --preview-surface: linear-gradient(90deg, #fffafb 48%, #eedfe2 48%); --preview-accent: #b85f68; }
    .preview-lavender { --preview-bg: #f4f1fa; --preview-ink: #5b566a; --preview-muted: #b1abc2; --preview-surface: linear-gradient(90deg, #fcfbff 48%, #e5e0f1 48%); --preview-accent: #7862bd; }
    .preview-slate { --preview-bg: #f0f5f7; --preview-ink: #53636a; --preview-muted: #aab7bc; --preview-surface: linear-gradient(90deg, #fafcfd 48%, #dfe8ec 48%); --preview-accent: #4d788d; }
    .theme-dialog[data-preview-mode="dark"] .preview-ivory { --preview-bg: #1c1710; --preview-ink: #c5bbae; --preview-muted: #84796b; --preview-surface: #211d17; --preview-accent: #d8aa50; }
    .theme-dialog[data-preview-mode="dark"] .preview-warm { --preview-bg: #14130f; --preview-ink: #c5bbae; --preview-muted: #84796b; --preview-surface: linear-gradient(90deg, #211d17 48%, rgb(198 154 80 / 22%) 48%); --preview-accent: #c69a50; }
    .theme-dialog[data-preview-mode="dark"] .preview-emerald { --preview-bg: #0e1714; --preview-ink: #b8c5c0; --preview-muted: #65756e; --preview-surface: linear-gradient(90deg, #17201c 48%, rgb(23 184 153 / 25%) 48%); --preview-accent: #17b899; }
    .theme-dialog[data-preview-mode="dark"] .preview-amber { --preview-bg: #19140d; --preview-ink: #c5bbae; --preview-muted: #84796b; --preview-surface: #241d14; --preview-accent: #d19a43; }
    .theme-dialog[data-preview-mode="dark"] .preview-mist { --preview-bg: #12171d; --preview-ink: #c0cbd2; --preview-muted: #7e8d98; --preview-surface: #19212a; --preview-accent: #8ab3dc; }
    .theme-dialog[data-preview-mode="dark"] .preview-rosewood { --preview-bg: #1a1216; --preview-ink: #d0bdc1; --preview-muted: #90777d; --preview-surface: #261b20; --preview-accent: #e59a9c; }
    .theme-dialog[data-preview-mode="dark"] .preview-lavender { --preview-bg: #151320; --preview-ink: #c7c1d9; --preview-muted: #89839f; --preview-surface: #201d2d; --preview-accent: #b5a0f4; }
    .theme-dialog[data-preview-mode="dark"] .preview-slate { --preview-bg: #11171b; --preview-ink: #c2cdd2; --preview-muted: #84949b; --preview-surface: #192126; --preview-accent: #90b8cc; }
    .theme-card-name { display: block; overflow: hidden; margin-top: 9px; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .theme-card[aria-pressed="true"] .theme-card-name::after { float: right; color: var(--accent); content: "✓"; }
    .theme-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 20px; border-top: 1px solid rgb(255 255 255 / 7%); background: #1c1a17; }
    .theme-dialog-footer > div { display: flex; gap: 10px; }
    .theme-reset, .theme-cancel, .theme-save { min-height: 42px; padding: 0 17px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 14px; background: transparent; color: #e2d9cb; cursor: pointer; font-size: 12px; font-weight: 700; }
    .theme-save { border-color: transparent; background: var(--accent); color: #fff; }
    .theme-save:hover { filter: brightness(1.1); }
    .theme-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    @media (max-width: 600px) {
      .theme-dialog { width: calc(100% - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
      .theme-dialog-header { padding: 18px 16px 15px; }
      .theme-dialog-content { gap: 10px; padding: 12px; }
      .theme-mode-panel, .theme-options-section { padding: 13px; border-radius: 16px; }
      .theme-mode-options { gap: 6px; }
      .theme-mode-options button { min-height: 40px; font-size: 11px; }
      .theme-options-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
      .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
      .theme-preview { height: 96px; }
      .theme-dialog-footer { padding: 10px 12px; }
      .theme-reset, .theme-cancel, .theme-save { min-height: 40px; padding: 0 13px; }
    }

    @media (prefers-color-scheme: light) {
      html[data-mode="system"] .theme-dialog { color-scheme: dark; }
    }