/* Original bamboo-and-water art direction. This sheet intentionally follows the
   established application stylesheet so its routes and interactive states stay intact. */
:root {
  --forest: #173d31;
  --green: #35745a;
  --leaf: #789970;
  --mist: #e9f0e7;
  --water: #eef5f1;
  --ivory: #f7f8f2;
  --ink: #233d33;
  --muted: #7b8980;
  --line: #dce5da;
  --paper: #fffefa;
  --page: #f7f8f2;
  --orange: #35745a;
  --orange-light: #91ae80;
  --player: #183a30;
  --personal-border: #e1e8dc;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
html { scroll-padding-top: 24px; }
body { font: 14px/1.65 "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: var(--page); padding-bottom: 38px; }
body, input, button, select, textarea { -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
a, button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
a:hover { color: var(--green); }
input, select, textarea { border-color: var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); }
input::placeholder, textarea::placeholder { color: #98a197; }
input:focus, textarea:focus, select:focus { outline: 2px solid #89aa91; outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
img { color: #677e6a; }
.viewport { width: min(1280px, calc(100% - 80px)); margin: 0 auto; }
.initial-loading { color: var(--green); font-size: 15px; }
#main { min-height: 50vh; }
#header { background: var(--paper); box-shadow: none; border-bottom: 1px solid var(--line); }
.utility { height: 33px; line-height: 32px; border-bottom: 1px solid #e5eadd; background: #edf2e8; }
.utility .viewport { height: 100%; }
.utility-brand { font-size: 11px; letter-spacing: .7px; gap: 7px; color: #71816c; }
.publication-icon { width: 15px; height: 15px; }
.utility-account { color: #7a8577; font-size: 11px; line-height: 32px; }
.utility-account .utility-login, .utility-user .nickname { color: var(--green); font-weight: 500; }
.utility-account button { min-height: 30px; }
.utility-user-menu { top: 30px; border-color: var(--line); padding: 8px; min-width: 112px; border-radius: 10px; box-shadow: 0 10px 30px #173d3114; }
.utility-user-menu a, .utility-user-menu button { padding: 8px 12px; font-size: 13px; border-radius: 5px; }
.utility-user-menu a:hover, .utility-user-menu button:hover { background: var(--water); }
.nature-masthead { background: var(--paper); }
.nature-nav { display: flex; align-items: center; gap: 38px; min-height: 92px; }
.nature-nav .logo { height: auto; width: auto; min-width: 180px; gap: 10px; }
.logo .site-brand-icon { color: var(--forest); }
.logo .site-brand-icon svg { width: 42px; height: 42px; }
.logo .site-brand-name { color: var(--forest); font: 600 27px/1.3 var(--serif); letter-spacing: 2px; max-width: 210px; }
.nature-brand-sub { display: block; color: #8b9885; font-size: 10px; font-weight: 400; line-height: 1.7; letter-spacing: 3px; }
.main-nav { height: 92px; gap: 24px; align-items: stretch; }
.main-nav > a { width: auto; height: 92px; padding: 0 5px; font-size: 15px; color: #647466; letter-spacing: 1px; }
.main-nav > a:after { left: 4px; right: 4px; bottom: 22px; height: 2px; border-radius: 2px; }
.main-nav > a.active { color: var(--forest); font-weight: 600; }
.main-nav > a:hover { color: var(--green); }
.header-search { height: 41px; width: 287px; margin-left: auto; border: 1px solid #dfe6d9; border-radius: 24px; background: #f6f8f1; }
.header-search:focus-within { border-color: #83a48b; box-shadow: 0 0 0 3px #83a48b15; }
.header-search input { flex: 1; width: 0; min-width: 0; border: 0; padding: 0 16px; background: transparent; font-size: 12px; color: var(--ink); }
.header-search input:focus { outline: none; }
.header-search button { flex-shrink: 0; width: 44px; min-height: 39px; background: transparent; color: var(--green); border-radius: 50%; }
.header-search button span { display: none; }
.header-search button svg { width: 18px; height: 18px; }
.header-search button:hover { background: #e7eee2; }

/* Home: an editorial introduction, original feature artwork, and a full library. */
.home.nature-home { padding-top: 28px; }
.nature-hero { display: grid; grid-template-columns: .88fr 1.12fr; gap: 38px; align-items: center; min-height: 410px; padding: 44px 48px; position: relative; isolation: isolate; border-radius: 22px; background: #eaf0e3; overflow: hidden; }
.nature-hero:before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 22% 8%, #fcfcf4 0%, #f7f8ed55 45%, transparent 70%), linear-gradient(118deg, #eaf0e4, #e4edde); }
.nature-hero:after { content: ""; position: absolute; width: 330px; height: 410px; background: url("./assets/bamboo-water.svg") no-repeat center/contain; left: 26%; bottom: -85px; z-index: -1; pointer-events: none; opacity: .54; }
.nature-intro { padding: 8px 0; position: relative; z-index: 1; }
.nature-eyebrow, .nature-intro .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.8; letter-spacing: 2px; color: #71896b; }
.nature-eyebrow:before, .nature-intro .eyebrow:before { content: ""; display: block; width: 25px; height: 1px; background: #8ca67a; }
.nature-intro h1 { font: 500 clamp(36px, 4vw, 53px)/1.32 var(--serif); letter-spacing: 3px; color: var(--forest); margin: 18px 0 15px; text-wrap: balance; }
.nature-intro h1 em { font-style: normal; color: #74965c; }
.nature-intro-note { display: block; margin-top: 26px; color: #9dab8d; font-size: 9px; letter-spacing: 3px; }
.nature-intro > p:not(.nature-eyebrow):not(.eyebrow) { font-size: 14px; letter-spacing: 2px; color: #7b8b70; }
.nature-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.nature-hero-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 8px 0; color: #58724e; font-size: 13px; letter-spacing: 1px; }
.nature-hero-actions a:first-child { background: var(--forest); color: #fffefa; border: 1px solid var(--forest); border-radius: 24px; padding: 9px 23px; box-shadow: 0 4px 10px #173d310b; }
.nature-hero-actions a:first-child:hover { background: #2b5945; }
.nature-hero-actions a:last-child:hover { color: var(--forest); }
.nature-feature { position: relative; min-width: 0; overflow: hidden; border-radius: 12px; border: 7px solid #fffefa; background: var(--paper); box-shadow: 0 18px 40px #3d5a2b16; transform: rotate(-1deg); }
.nature-feature .hero, .nature-feature .hero img, .nature-feature .hero-empty { width: 100%; height: auto; min-height: 0; aspect-ratio: 1200 / 342; }
.nature-feature .hero { background: #dfe7d5; border-radius: 6px 6px 0 0; }
.nature-feature .hero img { object-fit: contain; }
.nature-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 16px; font-size: 10px; color: #a0ac91; letter-spacing: 1px; }
.nature-feature-heading > span:first-child { color: #809768; }
.hero-arrow { opacity: .5; height: 40px; width: 27px; font-size: 28px; background: #173d3166; }
.hero:hover .hero-arrow { opacity: 1; }
.hero-dots { right: 12px; bottom: 12px; gap: 8px; }
.hero-dots button { width: 7px; height: 7px; box-shadow: 0 0 2px #0003; background: #fffefa; }
.hero-dots button.active { background: var(--green); box-shadow: 0 0 0 2px #fffefa; }
.nature-feature-foot { padding: 18px 19px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--forest); }
.nature-feature-foot small, .nature-feature-foot > span { font-size: 11px; color: #96a18c; letter-spacing: 1px; white-space: nowrap; }
.nature-feature-foot strong, .nature-feature-foot h2 { font: 400 17px/1.5 var(--serif); }
.nature-feature-foot p { font-size: 12px; color: #78876f; }
.nature-feature-foot > a { color: #70865f; font-size: 12px; }
.nature-discovery { margin: 30px 0 18px; display: flex; align-items: center; gap: 25px; }
.nature-discovery > strong, .nature-discovery > h2 { font: 400 17px/1.5 var(--serif); letter-spacing: 1px; white-space: nowrap; }
.nature-discovery > span { font-size: 12px; color: #7d8c76; flex-shrink: 0; }
.nature-categories { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nature-categories a { font-size: 12px; min-height: 36px; display: inline-flex; align-items: center; padding: 6px 16px; color: #67795d; background: #edf1e6; border: 1px solid #e2e9d9; border-radius: 20px; }
.nature-categories a:hover { background: #dfe9d8; border-color: #b8ccb2; color: var(--forest); }
.nature-categories a.active { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.nature-all-categories { margin-left: auto; flex-shrink: 0; font-size: 11px; color: #8b9d7b; }
.ticker { height: 42px; background: transparent; margin: 0 0 35px; padding: 0; gap: 10px; color: #86907d; font-size: 12px; border-bottom: 1px solid var(--line); }
.ticker .speaker { width: 17px; height: 17px; color: #96a086; }
.ticker .speaker svg { width: 17px; height: 17px; }
.ticker a { line-height: 40px; color: #86907d; max-width: calc(100% - 28px); }
.ticker a:hover { color: var(--green); }
.recommend-row.editorial-layout { grid-template-columns: minmax(0, 1fr) 282px; gap: 36px; margin-bottom: 48px; }
.editor-panel { background: transparent; padding: 0; min-height: 0; }
.section-title { height: auto; min-height: 65px; padding: 0 0 20px; gap: 11px; color: var(--forest); font: 500 25px/1.5 var(--serif); letter-spacing: 2px; }
.section-title .section-symbol { display: none; }
.section-title .more { margin: 0 0 0 auto; color: #809073; font: 12px/1.6 "Microsoft YaHei", sans-serif; letter-spacing: 0; white-space: nowrap; }
.section-title .more:hover { color: var(--green); }
.editor-panel .section-title { height: auto; font: 500 25px/1.5 var(--serif); gap: 11px; color: var(--forest); }
.editor-panel .section-title .more { margin-right: 0; color: #809073; font-size: 12px; }
.editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 28px; padding-bottom: 0; }
.editor-card { height: 132px; gap: 17px; border-bottom: 1px solid var(--line); padding-bottom: 25px; }
.editor-card .cover { width: 105px; height: 105px; border-radius: 5px; box-shadow: 0 5px 14px #173d310d; }
.editor-info { width: auto; flex: 1; padding-top: 1px; min-width: 0; }
.editor-info h3 { font-size: 15px; line-height: 24px; height: 24px; font-weight: 500; margin-bottom: 4px; }
.editor-info .credits { display: block; color: #89917e; font-size: 11px; line-height: 19px; margin: 0; }
.editor-info .credits span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-info .description { font-size: 11px; line-height: 19px; height: 19px; margin-top: 4px; color: #94a08a; white-space: nowrap; text-overflow: ellipsis; }
.editor-info .detail-link { width: auto; height: auto; padding: 0; border: 0; color: #63875d; font-size: 10px; line-height: 20px; margin-top: 3px; border-radius: 0; }
.editor-info .detail-link:after { content: " ↗"; }
.rank-side { min-width: 0; background: #edf2e8; border: 1px solid #e1e8da; border-radius: 12px; padding: 17px 18px 12px; }
.checkin { height: 42px; margin: 0 0 16px; gap: 12px; }
.checkin button { width: 112px; background: var(--forest); font-size: 14px; border-radius: 24px; }
.checkin button:hover { background: var(--green); }
.checkin .day { flex: 1; width: auto; background: transparent; color: #87947c; font-size: 10px; line-height: 17px; text-align: right; padding: 4px 0; }
.rank-widget { border: 0; background: transparent; }
.rank-widget-tabs { height: 40px; border-bottom: 1px solid #d8e1ce; gap: 20px; }
.rank-widget-tabs button { width: auto; flex: 1; border: 0; border-bottom: 2px solid transparent; color: #98a08e; font-size: 14px; padding: 0 0 11px; }
.rank-widget-tabs button.active { background: transparent; color: var(--forest); border-bottom-color: #638558; font-weight: 500; }
.rank-small { padding: 7px 0 0; height: auto; }
.rank-small li { height: 48px; gap: 9px; border-bottom: 1px solid #dde5d5; }
.rank-small .rank-number { width: 16px; font: italic 19px/1 Georgia, serif; color: #aab49f; }
.rank-small li:nth-child(-n+3) .rank-number { color: #527849; }
.rank-small .rank-cover { width: 32px; height: 32px; border-radius: 3px; }
.rank-small h3 { font-size: 12px; margin-bottom: 1px; color: #526547; }
.rank-small .credits { color: #96a08c; font-size: 9px; }
.rank-all { height: auto; padding: 10px 0 0; font-size: 11px; color: #839176; }
.home-book-module { margin: 0; background: transparent; }
.book-section { background: transparent; padding: 0; margin-bottom: 45px; }
.home-book-module > .book-section { margin-bottom: 46px; padding-top: 12px; border-top: 1px solid var(--line); }
.home-book-module > .book-section .section-title { padding-top: 20px; min-height: 87px; }
.book-section .section-title .more { margin-right: 0; }
.book-grid, .booklist-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 26px; padding-bottom: 0; }
.book-card, .booklist-card { width: auto; min-width: 0; }
.cover { border-radius: 6px; background: #e6ecdf; }
.cover img { transition: transform .4s ease; }
.cover:hover img { transform: scale(1.035); }
.book-card .cover, .booklist-card .cover { width: 100%; height: auto; aspect-ratio: 1; box-shadow: 0 6px 14px #183a300a; }
.book-card .cover:after { box-shadow: inset 0 0 0 1px #173d3106; border-radius: inherit; }
.book-card h3 { margin: 11px 0 4px; line-height: 23px; max-height: 46px; height: 46px; font-size: 14px; font-weight: 500; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.book-card > .credits { display: block; width: 100%; max-width: 100%; line-height: 20px; font-size: 11px; color: #91a087; }
.book-card > .credits + .credits { margin-left: 0; text-align: left; }
.book-card .status-tag { top: 8px; right: 8px; border-radius: 3px; font-size: 9px; background: #254d39d9; padding: 1px 7px; backdrop-filter: blur(5px); }
.booklist-card { position: relative; }
.booklist-card .cover { border-radius: 6px; }
.booklist-card h3 { margin-top: 12px; font-size: 14px; line-height: 24px; font-weight: 500; max-height: 48px; }
.booklist-card p { color: #90a080; font-size: 11px; margin-top: 5px; }
.book-section:has(.booklist-grid) { padding: 26px 30px 30px; border-radius: 15px; background: #eaf0e3; border-top: 0; }
.home-book-module > .book-section:has(.booklist-grid) .section-title { padding-top: 0; min-height: 58px; }
.booklist-grid { gap: 26px; }
.narrator-showcase { border-top: 1px solid var(--line); padding: 27px 0 12px; margin-bottom: 0; }
.narrator-stage { height: auto; padding: 0 32px 28px; overflow: hidden; }
.narrator-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.narrator-feature { min-width: 0; }
.narrator-feature-head { height: 104px; gap: 18px; border-bottom-color: var(--line); }
.narrator-feature-head .avatar { width: 78px; height: 78px; border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.narrator-feature-head h3 { font: 500 18px/1.7 var(--serif); margin-bottom: 4px; }
.narrator-feature-head p { font-size: 12px; line-height: 22px; color: #8b9880; }
.narrator-feature-head > span { background: var(--page); font-size: 10px; color: #98a18e; letter-spacing: 2px; }
.narrator-works { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 23px; gap: 14px; }
.narrator-works article { width: auto; }
.narrator-works .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; }
.narrator-works h4 { font-size: 11px; line-height: 28px; color: #7c8c72; }
.narrator-arrow { top: 94px; width: 24px; height: 44px; line-height: 42px; font-size: 32px; color: #90a17f; }

/* The same language extends to every catalog, detail, account, and overlay. */
.content-page { padding-top: 30px; }
.crumb { height: auto; line-height: 1.7; padding: 0 0 22px; color: #91a084; font-size: 12px; }
.page-white, .library-main, .account-content, .wallet-content { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0 28px 30px; }
.page-white { margin-bottom: 26px; }
.page-heading { font: 500 24px/1.5 var(--serif); min-height: 80px; padding: 23px 0; margin-bottom: 25px; border-color: var(--line); }
.library-layout { grid-template-columns: 184px minmax(0, 1fr); gap: 28px; }
.side-menu { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 10px 0 18px; }
.side-menu h3 { font: 500 19px/1.5 var(--serif); padding: 15px 22px 20px; border-bottom-color: var(--line); margin-bottom: 8px; }
.side-menu a, .side-menu button { color: #7b8d70; font-size: 13px; line-height: 42px; padding: 0 23px; }
.side-menu a.active, .side-menu button.active { background: #eaf1e4; color: var(--forest); border-left: 2px solid #6c8d59; padding-left: 21px; font-weight: 500; }
.side-menu a:hover, .side-menu button:hover { background: var(--water); }
.side-menu .menu-subtitle { color: #adba9e; font-size: 11px; letter-spacing: 2px; margin: 20px 22px 6px; }
.library-main .book-grid, .library-main .booklist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 22px; }
.library-main .book-card, .library-main .book-card .cover { width: 100%; }
.filter-head { min-height: 84px; border-color: var(--line); margin-bottom: 26px; gap: 16px; }
.filter-head h1 { font: 500 24px/1.5 var(--serif); }
.filter-tabs { gap: 18px; font-size: 12px; color: #91a084; }
.filter-tabs a { display: inline-flex; min-height: 40px; align-items: center; }
.filter-tabs a.active { color: var(--green); }
.filter-pills { gap: 8px; font-size: 12px; }
.filter-pills a { padding: 6px 12px; border-radius: 20px; background: #f3f6ed; }
.filter-pills .active { background: #e7f0df; color: var(--forest); }
.pagination { gap: 7px; margin: 32px 0 0; font-size: 12px; }
.pagination a { border-color: var(--line); border-radius: 5px; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; background: var(--paper); color: #809374; }
.pagination a.current { background: var(--forest); border-color: var(--forest); }
.pagination a:hover { border-color: var(--green); }
.empty-state { padding: 70px 20px; color: #9aa78f; }
.empty-book { color: #c3cfb8; }
.empty-state h3 { font-size: 17px; color: #6f8664; }
.empty-state p { font-size: 13px; }
.reference-note, .account-state, .membership-status { border-color: #dce7d4; border-radius: 7px; background: #edf4e8; color: #718d64; font-size: 12px; line-height: 1.9; }
.rank-tabs { border-color: var(--line); }
.rank-tabs a { background: transparent; padding: 15px 26px; font-size: 15px; }
.rank-large > li { gap: 22px; padding: 22px 0; border-bottom-color: var(--line); }
.rank-large .rank-no { font-size: 30px; color: #acb99e; }
.rank-large > li:nth-child(-n+3) .rank-no { color: #568249; }
.rank-large h3 { font-size: 16px; font-weight: 500; }
.rank-large .credits, .rank-large p, .rank-large .metric { font-size: 12px; color: #93a186; }
.rank-large .cover { width: 90px; height: 90px; }
.book-detail-page .detail-crumb { height: auto; line-height: 1.8; padding: 0 0 20px; color: #91a084; font: 12px/1.8 "Microsoft YaHei", sans-serif; }
.detail-layout, .book-detail-page .detail-layout { grid-template-columns: minmax(0, 1fr) 255px; gap: 28px; }
.detail-head, .book-detail-page .detail-head { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 30px; gap: 30px; min-height: 250px; align-items: flex-start; margin-bottom: 24px; }
.detail-cover, .detail-cover img, .book-detail-page .detail-cover, .book-detail-page .detail-cover img { width: 176px; height: 176px; border-radius: 5px; }
.detail-cover, .book-detail-page .detail-cover { box-shadow: 0 8px 18px #183a300c; margin: 0; }
.detail-info, .book-detail-page .detail-info { width: auto; flex: 1; padding-top: 0; }
.detail-info h1, .book-detail-page .detail-info h1 { font: 500 25px/1.5 var(--serif); color: var(--forest); margin: 0 0 14px; }
.completion-tag, .book-detail-page .completion-tag { width: auto; height: auto; line-height: 1.6; border: 1px solid #cbdcbd; color: #789364; background: #f0f6e9; border-radius: 4px; font: 10px/1.7 "Microsoft YaHei", sans-serif; padding: 1px 7px; }
.detail-meta-row, .detail-credits { color: #93a087; font-size: 12px; line-height: 23px; }
.detail-meta-row > span + span:before { color: #d5dfca; margin: 0 14px; }
.detail-meta-row .meta-value, .detail-meta-row .meta-value a { color: #628c54; }
.detail-price, .book-detail-page .detail-price { color: #96a38a; font-size: 12px; margin-top: 10px; }
.detail-price strong, .book-detail-page .detail-price em { color: var(--green); }
.button { min-height: 39px; padding: 8px 18px; line-height: 21px; color: #708563; border: 1px solid #d3dfc8; border-radius: 6px; background: var(--paper); font-size: 13px; }
.button:hover { border-color: #8caa7b; color: var(--green); background: #f2f6ec; }
.button.primary { border-color: var(--forest); background: var(--forest); color: #fffefa; }
.button.primary:hover { border-color: var(--green); background: var(--green); color: #fff; }
.button.soft { background: #f1f6eb; border-color: #d5e3cb; color: #63864f; }
.button.small { min-height: 31px; padding: 4px 12px; font-size: 12px; }
.book-detail-page .detail-actions { gap: 10px; margin-top: 18px; }
.book-detail-page .detail-actions .button { width: auto; min-width: 78px; min-height: 38px; height: auto; padding: 6px 13px; border: 1px solid #d3dfc8; border-radius: 6px; font-size: 12px; line-height: 24px; background: #fffefa; color: #708563; }
.book-detail-page .detail-actions .detail-action-play { min-width: 111px; background: var(--forest); color: #fffefa; border-color: var(--forest); }
.book-detail-page .detail-actions .detail-action-buy { min-width: 100px; background: #609050; color: #fffefa; border-color: #609050; }
.detail-button-icon { color: #94a287; }
.book-detail-page .detail-actions .detail-action-play:hover, .book-detail-page .detail-actions .detail-action-buy:hover { background: var(--green); border-color: var(--green); }
.detail-intro, .book-detail-page .detail-intro, .detail-directory, .detail-comments { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px; margin-bottom: 24px; color: #7d8d73; font-size: 13px; line-height: 2; }
.detail-intro h2, .book-detail-page .detail-intro h2, .detail-directory > h2, .detail-comments > h2 { font: 500 21px/1.5 var(--serif); color: var(--forest); margin: 0 0 20px; padding: 0; border: 0; }
.book-detail-page .detail-intro p { line-height: 2.05; margin-bottom: 18px; }
.detail-tabs { border-color: var(--line); background: var(--paper); border-radius: 12px 12px 0 0; }
.chapters { background: var(--paper); border-radius: 0 0 12px 12px; }
.chapter-row, .book-detail-page .chapter-row { grid-template-columns: minmax(0, 1fr) 88px 106px 92px; gap: 10px; min-height: 49px; padding: 3px 0; background: transparent; border-bottom: 1px solid #edf1e7; }
.book-detail-page .chapter-row:nth-child(2n+1) { background: transparent; }
.book-detail-page .chapter-row .chapter-title { font-size: 13px; padding: 0 8px; }
.book-detail-page .chapter-row .chapter-duration, .book-detail-page .chapter-row .chapter-price { color: #9caa8e; font-size: 11px; }
.book-detail-page .chapter-row button { color: var(--green); font-size: 12px; min-height: 40px; padding: 5px; }
.book-detail-page .chapter-heading > span { background: #eef3e8; color: #7d926d!important; font-size: 11px!important; font-weight: 400; }
.chapter-pagination button { border-color: #dce6d2; color: #7a9069; border-radius: 4px; }
.chapter-pagination button.current { background: var(--forest); border-color: var(--forest); }
.comment-avatar { background: #f0f4ea; border-color: #dce5d4; border-radius: 50%; color: #b7c3ab; }
.comment-composer textarea { background: #fbfcf6; border-color: var(--line); color: #a5b099; }
.comments-empty { color: #9caa8e; }
.detail-related, .sidebar-box { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.detail-related h2, .sidebar-box h2 { padding: 0; margin: 0 0 15px; font: 500 18px/1.5 var(--serif); color: var(--forest); }
.detail-related-list { padding: 0; border: 0; }
.detail-related-list li { gap: 12px; margin-bottom: 19px; }
.detail-related-list .cover, .detail-related-list .cover img { width: 56px; height: 56px; }
.detail-related-list h3 { font-size: 12px; line-height: 21px; }
.detail-related-list p { color: #96a58a; font-size: 10px; }
.detail-mobile-links > a, .detail-mobile-links > button { width: 100%; border-color: #dce5d4; color: #89a078; }
.profile-head, .account-head { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 26px 30px; }
.profile-head h1, .account-head h1 { font: 500 26px/1.5 var(--serif); }
.profile-head .avatar, .account-head .avatar { border-radius: 50%; border: 4px solid #edf3e6; }
.profile-head p, .account-head p { color: #92a086; }
.account-page { width: min(1124px, calc(100% - 80px)); margin: 30px auto; }
.account-bottom { grid-template-columns: 200px minmax(0, 1fr); gap: 25px; }
.account-content { min-width: 0; }
.account-content .page-heading { font: 500 22px/1.5 var(--serif); padding: 21px 0; min-height: 77px; margin-bottom: 24px; }
.account-content .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.account-content .book-card, .account-content .book-card .cover { width: 100%; height: auto; }
.account-content .book-card .cover { aspect-ratio: 1; }
.account-head .account-coins { color: #9caa8c; line-height: 25px; }
.account-coins strong { color: var(--green); }
.profile-line { line-height: 1.9; padding: 14px 0; border-bottom: 1px solid #edf1e6; }
.account-label { color: #9baa89; }
.profile-line > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.account-side .menu-subtitle .personal-group-link { font-size: 11px; color: #a0b28c; font-weight: 500; }
.form label { color: #7c916c; font-size: 13px; }
.form input, .form select { height: 44px; font-size: 13px; padding: 10px 13px; }
.form textarea { font-size: 13px; }
.form input[readonly] { color: #a3b197; background: #f5f7ef; }
.form .field-hint, .form-notice { color: #9caa8e; font-size: 11px; line-height: 1.9; }
.form .form-submit { height: 45px; font-size: 14px; }
.auth-page { width: min(900px, calc(100% - 80px)); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 45px 55px; gap: 55px; grid-template-columns: minmax(0, 1fr) 240px; margin: 45px auto; }
.auth-page h1 { font: 500 29px/1.5 var(--serif); margin-bottom: 25px; }
.auth-prompt { padding: 65px 0 0 35px; border-color: var(--line); color: #91a082; }
.auth-prompt strong { color: #628750; font: 500 23px/1.5 var(--serif); }
.membership-plan { border-color: #dce6d2; border-radius: 9px; background: #f8faf3; }
.membership-plan h2 { font: 500 20px/1.5 var(--serif); color: #6d8d5a; }
.member-price strong { color: var(--green); }
.membership-plan p, .membership-plan .member-price { color: #97a68a; }
.audio-vip-badge { color: #7c9062; background: #f1f6e7; border-color: #d2e0bb; }
.book-detail-page .detail-actions .detail-action-vip { background: #f1f6e7; color: #7c9062; border-color: #d2e0bb; }
.audio-vip-offer { background: #f0f6e8; border-color: #dbe7cc; color: #7e9567; border-radius: 7px; }
.record-tabs { border-color: var(--line); gap: 24px; }
.record-tabs a, .record-tabs button { color: #98aa8b; font-size: 13px; min-height: 45px; }
.data-table { font-size: 12px; }
.data-table th { background: #f1f5ea; color: #8da077; border-color: #dbe6cf; padding: 13px 10px; }
.data-table td { border-color: #e7eedf; color: #7e9370; overflow-wrap: anywhere; }
.history-row { border-color: #e4ecdb; }
.history-row p { font-size: 12px; color: #98a98a; }
.history-row h3 { font-weight: 500; }
.text-button { color: #8ca17a; font-size: 12px; }
.personal-form h2, .personal-section h2 { font: 500 20px/1.5 var(--serif); color: #547544; }
.personal-muted, .personal-section-heading, .personal-recent p, .personal-avatar-current p, .personal-collection-grid p { color: #96a58a; }
.personal-form select, .personal-form textarea { border-color: var(--line); color: #708563; background: var(--paper); border-radius: 6px; }
.personal-collection-cover { background: #edf3e5; border-radius: 6px; }
.personal-recent, .personal-contact > div { border-color: #e3ebd9; }
.personal-section-heading > a, .personal-contact a { color: #668c53; }
.personal-contact dt { color: #91a47e; }
.personal-feedback-reply { background: #eef5e6; border-color: #acc99a; color: #7e946c; }
.personal-feedback-reply strong { color: #6e9258; }
.personal-preset input:focus-visible + span { outline-color: var(--green); }
.wallet-page.viewport { width: min(1124px, calc(100% - 80px)); max-width: none; margin: 0 auto 36px; }
.wallet-page .crumb { padding-top: 25px; color: #98a98b; }
.wallet-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 25px; }
.wallet-layout > .account-side { width: auto; border-color: var(--line); }
.wallet-layout > .account-side h3 { border-color: var(--line); }
.wallet-layout > .account-side h3 a { font: inherit; }
.wallet-layout > .account-side .menu-subtitle { color: #a6b597; }
.wallet-layout > .account-side .client-note { border-color: var(--line); color: #a4b196; }
.wallet-layout > .account-side .client-note strong { color: #7e946c; }
.wallet-content { padding: 30px; }
.wallet-heading h1 { font: 500 26px/1.5 var(--serif); color: var(--forest); }
.wallet-heading p, .wallet-record-link { color: #97a78a; }
.wallet-balance { background: #eff5e8; border-color: #dce7d1; border-radius: 8px; }
.wallet-balance-icon { background: #e0ebd4; color: #87a96e; }
.wallet-balance-main > span, .wallet-balance-main > small, .wallet-account > span { color: #95aa80; }
.wallet-balance-main > strong { color: #5c8a44; }
.wallet-account { border-color: #d8e4cb; color: #95aa80; }
.wallet-account > strong, .wallet-account > button { color: #6a9053; }
.wallet-amount { border-color: #dde6d3; border-radius: 7px; }
.wallet-amount:hover { background: #f8fbf3; border-color: #a5bf93; }
.wallet-amount.active { background: #edf5e5; border-color: #84aa6a; }
.wallet-amount.active > strong { color: #608c48; }
.wallet-amount.active > small { color: #95ad80; }
.wallet-amount-check { background: linear-gradient(135deg, transparent 49%, #85a96b 50%); }
.wallet-custom-field { border-color: #dce6d2; border-radius: 6px; }
.wallet-custom-field:focus-within { border-color: #86a96f; box-shadow: 0 0 0 2px #86a96f18; }
.wallet-section h2 { color: #5c774a; }
.wallet-total > strong { color: #628b4b; }
.wallet-checkout, .wallet-footnotes { border-color: #e3ecda; }
.wallet-footnotes a { color: #74965e; }
.wallet-account, .wallet-account > span, .wallet-estimate, .wallet-payment-note, .wallet-footnotes p { color: #9aaa8a; }
.wallet-payment-note > span, .wallet-cashier-notice > span { background: #a5bb94; }
.wallet-cashier-title .wallet-order-state { background: #f1f6e8; color: #8a9f6e; }
.event-grid { gap: 28px; }
.event-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.event-card .event-caption { padding: 22px; }
.event-card h2 { font: 500 22px/1.5 var(--serif); }
.event-card p { color: #96a58a; font-size: 13px; }
.client-hero { background-color: #eaf1e2; border-radius: 14px; }
.client-hero h1 { color: var(--forest); font-family: var(--serif); }
.client-hero p { color: #8a9e78; }
.client-columns { padding: 30px 0; }
.client-columns h2 { font-family: var(--serif); color: #60824d; }
.client-columns p { color: #98a88b; }
.info-layout { grid-template-columns: 200px minmax(0, 1fr); }
.info-copy { color: #7f9271; }
.info-copy h2 { color: #5d7c4a; font-family: var(--serif); }
.client-note { color: #9aa98d; }
.client-note strong { color: #7e956d; }

#footer { margin-top: 46px; background: #eaf0e3; border-top: 1px solid #dce5d2; color: #94a287; }
.footer-inner { padding: 32px 0 30px; line-height: 25px; gap: 25px; }
.footer-links { gap: 26px; margin-bottom: 13px; color: #607950; font-size: 12px; }
.footer-description, .site-icp { color: #9eac91; font-size: 11px; }
.footer-right strong { font: 500 21px/1.6 var(--serif); letter-spacing: 2px; color: #6a8558; }
.footer-right p { font-size: 11px; }
.modal-shade { background: #173d316b; backdrop-filter: blur(5px); }
.modal-card { border: 1px solid var(--line); border-radius: 14px; padding: 33px 38px 36px; background: var(--paper); box-shadow: 0 20px 70px #173d3129; }
.modal-card h2 { font: 500 27px/1.5 var(--serif); color: var(--forest); }
.modal-close { color: #a2b296; width: 32px; height: 32px; }
.auth-switch { border-color: var(--line); }
.auth-switch button { color: #9baa8c; font: 500 22px/1.5 var(--serif); }
.auth-switch button.active { color: var(--green); }
.purchase-summary { border-color: var(--line); }
.purchase-summary p, .purchase-note { color: #95a588; }
.purchase-summary strong { color: var(--green); }
.toast { border-color: #cfdec2; border-radius: 9px; background: var(--paper); color: #70905b; font-size: 13px; box-shadow: 0 10px 30px #173d311a; }
.inline-error { border-radius: 6px; }
.player-bar { background: #193e32f7; height: 82px; color: #a8bba9; border-top: 1px solid #476f55; box-shadow: 0 -5px 30px #173d311a; backdrop-filter: blur(15px); }
.player-main { width: min(1280px, calc(100% - 80px)); height: 82px; gap: 20px; }
.player-controls { width: 126px; gap: 9px; }
.player-controls button { color: #bdd1b8; }
.player-controls .play-toggle { width: 39px; height: 39px; color: #f0f5e8; border-color: #b3c9a9; }
.player-controls button:hover { color: #d3e9b9; }
.player-cover { width: 48px; height: 48px; border-radius: 4px; background: #2b513e; }
.player-track { width: 344px; }
.player-track-title { font-size: 12px; color: #e9f1e3; }
.player-track-subtitle { color: #8da98d; }
.player-time { color: #a2b99b; }
.seek-slider { height: 3px; border-radius: 2px; background: linear-gradient(to right, #b5cb8f var(--seek,0%), #55765e var(--seek,0%)); }
.seek-slider::-webkit-slider-thumb { background: #d6e6bc; width: 9px; height: 9px; }
.seek-slider::-moz-range-thumb { background: #d6e6bc; width: 9px; height: 9px; }
.volume-wrap button, .queue-toggle { color: #a1bc99; }
.volume-slider { accent-color: #b5cb8f; }
.rate-select { background: #244e3d; border-color: #4d7053; color: #a2bc99; border-radius: 4px; height: 29px; }
.queue-toggle { border-color: #4d7053; }
.queue-toggle strong { color: #809f7b; }
.queue-panel { bottom: 82px; right: max(40px, calc((100vw - 1280px)/2)); background: #1b4033f7; color: #acc6a0; border: 1px solid #4a7050; border-radius: 12px 12px 0 0; }
.queue-heading { border-color: #47684b; color: #c2d7b6; }
.queue-heading button { color: #8eab82; }
.queue-items li { border-color: #35573b; }
.queue-items li.active { background: #2b513c; color: #c3db9f; }
.queue-items .queue-duration, .queue-items .queue-remove, .queue-empty { color: #7c9d70; }
.player-expand-toggle { left: max(40px, calc((100vw - 1280px)/2)); border-radius: 7px 7px 0 0; background: #193e32; color: #c7d9b8; height: 26px; line-height: 26px; }
.player-expand-toggle:hover { background: #2d5843; }
.player-expanded { padding-bottom: 100px; }
.player-expanded .player-expand-toggle { bottom: 82px; }

@media (min-width: 769px) and (max-width: 1199px) {
  .viewport { width: calc(100% - 48px); margin: 0 auto; }
  .nature-nav { gap: 22px; }
  .nature-nav .logo { min-width: 150px; }
  .logo .site-brand-name { font-size: 24px; max-width: 155px; }
  .main-nav { gap: 15px; }
  .main-nav > a { font-size: 13px; padding: 0 2px; }
  .header-search { width: 225px; }
  .nature-hero { gap: 24px; padding: 34px; min-height: 365px; }
  .nature-intro h1 { font-size: 42px; }
  .nature-feature-foot { padding: 14px; flex-wrap: wrap; gap: 6px; }
  .nature-feature-foot strong { font-size: 15px; }
  .recommend-row.editorial-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 25px; }
  .editor-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .editor-card { height: 94px; padding-bottom: 16px; gap: 15px; }
  .editor-card .cover { width: 77px; height: 77px; }
  .editor-info .description { display: none; }
  .editor-info .credits { display: flex; gap: 10px; }
  .book-grid, .booklist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .library-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
  .library-main { padding: 0 22px 26px; }
  .library-main .book-grid, .library-main .booklist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 20px; }
  .detail-layout, .book-detail-page .detail-layout { grid-template-columns: minmax(0, 1fr) 225px; gap: 20px; }
  .detail-head, .book-detail-page .detail-head { padding: 23px; gap: 20px; }
  .detail-cover, .detail-cover img, .book-detail-page .detail-cover, .book-detail-page .detail-cover img { width: 140px; height: 140px; }
  .detail-info h1, .book-detail-page .detail-info h1 { font-size: 21px; }
  .book-detail-page .detail-actions { gap: 7px; }
  .book-detail-page .detail-actions .button { padding: 5px 9px; min-width: 68px; }
  .book-detail-page .chapter-row { grid-template-columns: minmax(0, 1fr) 62px 75px 68px; gap: 4px; }
  .book-detail-page .chapter-row .chapter-title { font-size: 12px; }
  .account-page, .wallet-page.viewport { width: calc(100% - 48px); margin-left: auto; margin-right: auto; }
  .account-bottom, .wallet-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
  .wallet-layout > .account-side { width: auto; }
  .account-content .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .narrator-feature-grid { gap: 30px; }
  .narrator-works { gap: 10px; }
  .player-main { width: calc(100% - 48px); gap: 14px; }
  .player-track { flex: 1; width: auto; }
  .player-controls { width: 110px; gap: 6px; }
  .player-time { font-size: 10px; gap: 3px; }
  .volume-wrap { display: none; }
  .player-expand-toggle { left: 24px; }
  .queue-panel { right: 24px; }
}

@media (max-width: 768px) {
  body { font-size: 14px; padding-bottom: 32px; }
  .viewport { width: calc(100% - 36px); margin: 0 auto; }
  .utility { height: 29px; line-height: 28px; }
  .utility-brand { font-size: 9px; gap: 5px; max-width: 53%; letter-spacing: .5px; }
  .utility-account { font-size: 9px; line-height: 28px; }
  .utility-welcome { max-width: 160px; }
  .utility-account button { min-height: 28px; }
  .publication-icon { width: 12px; height: 12px; }
  .utility-user-menu { top: 27px; }
  .nature-nav { min-height: 116px; display: flex; flex-wrap: wrap; gap: 0; padding-top: 7px; }
  .nature-nav .logo { min-width: 0; height: 58px; gap: 8px; width: 151px; }
  .logo .site-brand-icon svg { width: 32px; height: 32px; }
  .logo .site-brand-name { font-size: 23px; max-width: 112px; letter-spacing: 1px; }
  .nature-brand-sub { font-size: 8px; letter-spacing: 2px; }
  .header-search { width: calc(100% - 164px); height: 36px; max-width: 250px; }
  .header-search input { font-size: 10px; padding-left: 12px; }
  .header-search button { width: 32px; min-height: 34px; }
  .header-search button svg { width: 15px; height: 15px; }
  .main-nav { order: 3; width: 100%; height: 48px; justify-content: space-between; gap: 8px; }
  .main-nav > a { flex: 0 1 auto; width: auto; min-width: 44px; height: 48px; padding: 0 4px; font-size: 13px; line-height: 1; }
  .main-nav > a:after { bottom: 6px; left: 3px; right: 3px; }
  .home.nature-home { padding-top: 18px; }
  .nature-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 27px; padding: 29px 25px 22px; border-radius: 16px; min-height: 0; }
  .nature-hero:after { width: 235px; height: 295px; left: auto; right: -30px; bottom: 156px; opacity: .42; }
  .nature-intro { padding: 0; }
  .nature-eyebrow, .nature-intro .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .nature-eyebrow:before, .nature-intro .eyebrow:before { width: 18px; }
  .nature-intro h1 { font-size: 36px; letter-spacing: 2px; line-height: 1.35; margin: 15px 0 12px; }
  .nature-intro > p:not(.nature-eyebrow):not(.eyebrow) { font-size: 11px; letter-spacing: 1px; }
  .nature-intro-note { margin-top: 20px; font-size: 8px; letter-spacing: 2px; }
  .nature-hero-actions { margin-top: 20px; gap: 21px; }
  .nature-hero-actions a { min-height: 40px; font-size: 11px; padding: 8px 0; }
  .nature-hero-actions a:first-child { padding: 8px 19px; }
  .nature-feature { transform: none; border-width: 5px; border-radius: 9px; box-shadow: 0 10px 24px #3d5a2b15; }
  .nature-feature .hero, .nature-feature .hero img, .nature-feature .hero-empty { aspect-ratio: 1200 / 342; height: auto; }
  .nature-feature-heading { padding: 8px 9px 12px; font-size: 8px; letter-spacing: .3px; }
  .nature-feature-foot { padding: 12px 10px 10px; gap: 7px; align-items: baseline; }
  .nature-feature-foot small, .nature-feature-foot > span { font-size: 9px; letter-spacing: 0; }
  .nature-feature-foot strong, .nature-feature-foot h2 { font-size: 13px; line-height: 1.6; }
  .nature-feature-foot p { font-size: 10px; }
  .nature-feature-foot > a { font-size: 10px; }
  .hero-arrow { height: 32px; width: 21px; font-size: 23px; }
  .hero-dots { bottom: 8px; right: 9px; gap: 7px; }
  .hero-dots button { width: 5px; height: 5px; }
  .nature-discovery { margin: 23px 0 9px; display: block; }
  .nature-all-categories { display: block; width: fit-content; font-size: 10px; margin: 4px 0 0 auto; }
  .nature-discovery > strong, .nature-discovery > h2 { display: block; margin-bottom: 12px; font-size: 15px; }
  .nature-discovery > span { display: block; margin-bottom: 12px; font-size: 11px; }
  .nature-categories { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 7px; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .nature-categories::-webkit-scrollbar { display: none; }
  .nature-categories a { flex-shrink: 0; font-size: 11px; min-height: 36px; padding: 6px 14px; }
  .ticker { height: 39px; font-size: 10px; margin: 0 0 24px; gap: 7px; }
  .ticker a { line-height: 38px; }
  .ticker .speaker, .ticker .speaker svg { width: 15px; height: 15px; }
  .recommend-row.editorial-layout { display: block; margin-bottom: 30px; }
  .section-title, .editor-panel .section-title { min-height: 0; height: auto; font-size: 22px; letter-spacing: 1px; padding: 0 0 20px; }
  .section-title .more, .editor-panel .section-title .more { font-size: 10px; }
  .editor-panel { padding: 0; }
  .editor-grid { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .editor-card { height: 115px; gap: 17px; padding-bottom: 18px; }
  .editor-card .cover { width: 96px; height: 96px; border-radius: 4px; }
  .editor-info { padding-top: 1px; }
  .editor-info h3 { font-size: 14px; height: 24px; line-height: 24px; margin-bottom: 3px; }
  .editor-info .credits { display: flex; flex-wrap: wrap; font-size: 10px; line-height: 18px; gap: 0 10px; }
  .editor-info .description { font-size: 11px; line-height: 18px; max-height: 36px; height: auto; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 3px; }
  .editor-info .detail-link { font-size: 10px; height: auto; line-height: 21px; padding: 0; margin-top: 3px; }
  .rank-side { display: block; margin-top: 25px; border-radius: 11px; padding: 18px; }
  .checkin { height: 42px; gap: 12px; margin-bottom: 16px; }
  .checkin button { width: 125px; font-size: 14px; }
  .checkin .day { font-size: 10px; line-height: 17px; }
  .rank-widget-tabs { height: 43px; gap: 25px; }
  .rank-widget-tabs button { font-size: 14px; padding-bottom: 12px; }
  .rank-small { height: auto; padding: 5px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .rank-small li { height: 60px; gap: 7px; min-width: 0; }
  .rank-small .rank-number { width: 14px; font-size: 17px; }
  .rank-small .rank-cover { width: 31px; height: 31px; }
  .rank-small h3 { font-size: 11px; line-height: 18px; margin-bottom: 1px; }
  .rank-small .credits { font-size: 8px; line-height: 16px; }
  .rank-all { padding-top: 14px; font-size: 10px; }
  .book-section { padding: 0; margin-bottom: 32px; }
  .home-book-module > .book-section { margin-bottom: 31px; padding-top: 23px; }
  .home-book-module > .book-section .section-title { min-height: 0; padding: 0 0 20px; }
  .book-grid, .booklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; padding-bottom: 0; }
  .book-card .cover, .booklist-card .cover { width: 100%; height: auto; border-radius: 5px; }
  .book-card h3 { font-size: 13px; font-weight: 500; line-height: 21px; height: 42px; max-height: 42px; margin: 9px 0 4px; }
  .book-card > .credits { display: block; width: 100%; max-width: 100%; font-size: 10px; line-height: 19px; }
  .book-card .status-tag { font-size: 8px; padding: 1px 5px; top: 6px; right: 6px; }
  .booklist-card h3 { font-size: 13px; line-height: 23px; margin-top: 9px; max-height: 46px; }
  .booklist-card p { font-size: 10px; margin-top: 4px; }
  .book-section:has(.booklist-grid) { padding: 22px 18px 25px; border-radius: 12px; }
  .home-book-module > .book-section:has(.booklist-grid) .section-title { min-height: 0; padding: 0 0 20px; }
  .booklist-grid { gap: 23px 16px; }
  .narrator-showcase { border-top: 1px solid var(--line); padding-top: 23px; }
  .narrator-stage { height: auto; max-height: none; padding: 0 20px 16px; }
  .narrator-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .narrator-feature-head { height: 90px; gap: 13px; }
  .narrator-feature-head .avatar { width: 65px; height: 65px; border-width: 3px; }
  .narrator-feature-head > div { max-height: 72px; }
  .narrator-feature-head h3 { font-size: 16px; line-height: 26px; margin-bottom: 2px; }
  .narrator-feature-head p { font-size: 10px; line-height: 19px; }
  .narrator-feature-head > span { font-size: 9px; }
  .narrator-works { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 20px; overflow: visible; }
  .narrator-works article { width: auto; max-width: none; }
  .narrator-works .cover { border-radius: 3px; }
  .narrator-works h4 { font-size: 9px; line-height: 25px; }
  .narrator-arrow { top: 85px; width: 17px; height: 44px; font-size: 26px; }
  .content-page { padding-top: 23px; }
  .crumb, .book-detail-page .detail-crumb { font-size: 10px; padding-bottom: 16px; line-height: 1.8; height: auto; }
  .page-white, .library-main, .account-content { padding: 0 18px 24px; border-radius: 10px; }
  .page-heading { min-height: 0; font-size: 22px; line-height: 1.5; padding: 20px 0; margin-bottom: 20px; }
  .library-layout { display: block; }
  .library-layout > .side-menu, .info-layout .side-menu { display: flex; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; gap: 2px; padding: 5px; margin-bottom: 17px; border-radius: 8px; }
  .library-layout > .side-menu a, .library-layout > .side-menu button, .info-layout .side-menu a { width: auto; padding: 0 13px; min-height: 42px; line-height: 42px; font-size: 12px; border-radius: 5px; }
  .library-layout > .side-menu a.active, .library-layout > .side-menu button.active, .info-layout .side-menu a.active { border: 0; padding-left: 13px; background: #e8f0e0; }
  .library-main .book-grid, .library-main .booklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 17px; }
  .filter-head { min-height: 75px; margin-bottom: 22px; gap: 8px; }
  .filter-head h1 { font-size: 22px; }
  .filter-tabs { font-size: 10px; gap: 12px; }
  .filter-tabs a { min-height: 44px; }
  .filter-pills { gap: 6px; font-size: 11px; padding-bottom: 20px; }
  .filter-pills a { min-height: 33px; padding: 6px 10px; }
  .pagination { gap: 6px; margin-top: 27px; }
  .pagination a { font-size: 11px; min-width: 32px; min-height: 34px; padding: 5px 9px; }
  .pagination span { font-size: 10px; padding-left: 5px; }
  .empty-state { padding: 50px 10px; }
  .empty-state h3 { font-size: 15px; }
  .empty-state p { font-size: 12px; }
  .rank-tabs a { font-size: 12px; padding: 12px 14px; }
  .rank-large > li { gap: 12px; padding: 19px 0; }
  .rank-large .rank-no { width: 20px; font-size: 25px; }
  .rank-large .cover { width: 65px; height: 65px; }
  .rank-large h3 { font-size: 13px; line-height: 21px; margin-bottom: 5px; }
  .rank-large .credits, .rank-large p { font-size: 10px; line-height: 18px; margin-bottom: 2px; }
  .rank-large .metric { display: none; }
  .detail-layout, .book-detail-page .detail-layout { display: block; }
  .detail-head, .book-detail-page .detail-head { border-radius: 10px; padding: 19px 17px; gap: 16px; min-height: 0; margin-bottom: 17px; }
  .detail-cover, .detail-cover img, .book-detail-page .detail-cover, .book-detail-page .detail-cover img { width: 98px; height: 98px; border-radius: 4px; }
  .detail-info, .book-detail-page .detail-info { padding: 0; width: auto; flex: 1; }
  .detail-info h1, .book-detail-page .detail-info h1 { font-size: 19px; line-height: 1.6; margin-bottom: 9px; }
  .completion-tag, .book-detail-page .completion-tag { height: auto; font-size: 8px; line-height: 1.5; padding: 1px 4px; margin-left: 4px; }
  .detail-meta-row, .detail-credits { font-size: 10px; line-height: 19px; margin-top: 5px; }
  .detail-meta-row > span + span:before { margin: 0 5px; }
  .detail-price, .book-detail-page .detail-price { font-size: 10px; gap: 5px; margin-top: 7px; line-height: 20px; }
  .book-detail-page .detail-price em { font-size: 11px; }
  .button { min-height: 38px; padding: 7px 13px; font-size: 12px; }
  .button.small { min-height: 31px; font-size: 11px; }
  .detail-actions, .book-detail-page .detail-actions { gap: 7px; margin-top: 13px; }
  .book-detail-page .detail-actions .button, .book-detail-page .detail-actions .detail-action-play, .book-detail-page .detail-actions .detail-action-buy, .book-detail-page .detail-actions .detail-action-vip { width: auto; min-width: 58px; min-height: 35px; height: auto; line-height: 23px; padding: 5px 8px; font-size: 10px; border-radius: 5px; gap: 4px; }
  .book-detail-page .detail-actions .detail-action-play, .book-detail-page .detail-actions .detail-action-buy { min-width: 72px; }
  .book-detail-page .detail-actions svg { width: 12px; height: 12px; }
  .detail-intro, .book-detail-page .detail-intro, .detail-directory, .detail-comments { border-radius: 10px; padding: 19px 18px 22px; margin-bottom: 17px; font-size: 12px; }
  .detail-intro h2, .book-detail-page .detail-intro h2, .detail-directory > h2, .detail-comments > h2 { font-size: 21px; margin: 0 0 16px; }
  .book-detail-page .detail-intro p { font-size: 12px; line-height: 2.1; margin-bottom: 15px; }
  .detail-directory { padding-left: 12px; padding-right: 12px; }
  .detail-directory > h2 { padding-left: 6px; }
  .chapter-row, .book-detail-page .chapter-row { grid-template-columns: minmax(0, 1fr) 44px 54px; gap: 3px; min-height: 48px; padding: 3px 0; }
  .book-detail-page .chapter-row .chapter-title { font-size: 11px; padding: 0 5px; }
  .book-detail-page .chapter-row .chapter-duration { font-size: 9px; }
  .book-detail-page .chapter-row .chapter-price { display: none; }
  .book-detail-page .chapter-row button { min-height: 42px; font-size: 10px; padding: 4px 0; }
  .book-detail-page .chapter-heading > span { font-size: 10px!important; line-height: 36px; height: 36px; }
  .chapter-pagination { gap: 2px; margin-top: 21px; }
  .chapter-pagination button { width: 29px; height: 32px; line-height: 30px; margin: 0 2px; font-size: 11px; }
  .detail-directory .book-grid { gap: 22px 16px; }
  .comment-composer { gap: 10px; }
  .comment-avatar { width: 32px; height: 32px; font-size: 22px; }
  .comment-composer textarea { font-size: 11px; }
  .comments-empty { font-size: 11px; }
  .detail-sidebar { display: block; }
  .detail-related { padding: 20px 18px 0; }
  .detail-related h2 { font-size: 20px; margin-bottom: 18px; }
  .detail-related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; }
  .detail-related-list li { gap: 9px; }
  .detail-related-list .cover, .detail-related-list .cover img { width: 42px; height: 42px; }
  .detail-related-list h3 { font-size: 10px; line-height: 17px; max-height: 34px; }
  .detail-related-list p { font-size: 9px; line-height: 17px; }
  .profile-head, .account-head { padding: 20px 18px; border-radius: 10px; gap: 16px; margin-bottom: 18px; }
  .profile-head h1, .account-head h1 { font-size: 23px; }
  .profile-head .avatar { width: 76px; height: 76px; }
  .profile-head p { font-size: 11px; }
  .account-page, .wallet-page.viewport { width: calc(100% - 36px); margin: 23px auto 30px; max-width: none; }
  .account-head .avatar { width: 66px; height: 66px; }
  .account-head p { font-size: 10px; }
  .account-head .account-coins { font-size: 10px; margin-top: 5px; }
  .account-bottom, .wallet-layout { display: block; }
  .account-side, .wallet-layout > .account-side { width: 100%; display: flex!important; padding: 5px; gap: 2px; margin-bottom: 17px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; white-space: nowrap; }
  .account-side h3, .account-side .menu-subtitle, .account-side .client-note { display: none; }
  .account-side a, .wallet-layout > .account-side > a { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: auto; min-height: 42px; line-height: 42px; font-size: 12px; padding: 0 13px; border-radius: 5px; }
  .account-side a.active, .wallet-layout > .account-side > a.active { border: 0; padding-left: 13px; background: #e8f0e0; }
  .account-content { min-height: 350px; }
  .account-content .page-heading { min-height: 0; font-size: 22px; line-height: 1.5; padding: 20px 0; margin-bottom: 20px; }
  .account-content .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 16px; }
  .account-content .book-card .cover { height: auto; }
  .profile-line { font-size: 12px; line-height: 1.9; padding: 11px 0; }
  .account-label { width: 75px; }
  .account-state { font-size: 11px; }
  .form label { font-size: 12px; }
  .form input, .form select { height: 44px; font-size: 13px; }
  .form textarea { font-size: 12px; }
  .auth-page { width: calc(100% - 36px); display: block; margin: 24px auto; padding: 28px 24px; }
  .auth-page h1 { font-size: 27px; }
  .auth-prompt { display: block; padding: 24px 0 0; margin-top: 25px; border-left: 0; border-top: 1px solid var(--line); }
  .auth-prompt strong { font-size: 20px; margin-bottom: 8px; }
  .auth-prompt p { font-size: 12px; }
  .auth-prompt .button { margin-top: 12px; }
  .account-content .membership-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .membership-plan { padding: 24px 17px; }
  .membership-plan h2 { font-size: 21px; }
  .record-tabs { gap: 20px; }
  .record-tabs a, .record-tabs button { font-size: 12px; }
  .data-table { font-size: 10px; }
  .data-table th, .data-table td { padding: 12px 5px; line-height: 20px; }
  .history-row { gap: 11px; }
  .history-row .cover { width: 60px; height: 60px; }
  .history-row p { font-size: 10px; }
  .history-row .text-button { font-size: 10px; }
  .personal-form h2, .personal-section h2 { font-size: 19px; }
  .personal-section-heading { font-size: 10px; gap: 8px; }
  .personal-muted, .personal-recent p { font-size: 11px; }
  .personal-contact > div { grid-template-columns: 75px minmax(0, 1fr); gap: 10px; }
  .personal-contact dt, .personal-contact dd { font-size: 12px; }
  .wallet-page.viewport { margin-top: 0; }
  .wallet-page .crumb { padding-top: 20px; font-size: 10px; }
  .wallet-content { padding: 24px 18px; border-radius: 10px; }
  .wallet-heading { gap: 10px; }
  .wallet-heading h1 { font-size: 24px; }
  .wallet-heading p { font-size: 10px; line-height: 19px; }
  .wallet-record-link { font-size: 10px; }
  .wallet-balance { padding: 17px 13px; margin: 22px 0; }
  .wallet-account { border-top-color: #d8e4cb; }
  .wallet-account > span, .wallet-account > strong { font-size: 10px; }
  .wallet-section h2 { font-size: 14px; }
  .wallet-amounts { gap: 9px; }
  .wallet-amount { border-radius: 6px; }
  .wallet-amount > strong { font-size: 10px; }
  .wallet-amount > strong > b { font-size: 23px; }
  .wallet-amount > small { font-size: 9px; }
  .wallet-custom { gap: 12px; }
  .wallet-custom > label { font-size: 11px; }
  .wallet-custom-field input { font-size: 14px; }
  .wallet-estimate { font-size: 10px; }
  .wallet-checkout { gap: 15px; }
  .wallet-pay-submit { width: 139px; font-size: 13px; }
  .wallet-total > span { font-size: 10px; }
  .wallet-payment-note, .wallet-footnotes p { font-size: 10px; }
  .event-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .event-card { border-radius: 10px; }
  .event-card .event-caption { padding: 19px; }
  .event-card h2 { font-size: 21px; }
  .event-card p { font-size: 11px; }
  .client-hero { padding: 35px 20px; }
  .client-hero h1 { font-size: 27px; }
  .client-hero p { font-size: 12px; }
  .client-columns { padding: 15px 0; gap: 24px; }
  .client-columns h2 { font-size: 20px; }
  .client-columns p { font-size: 12px; }
  .info-layout { display: block; }
  .info-copy { font-size: 13px; }
  .info-copy h2 { font-size: 20px; }
  .narrator-grid { padding-bottom: 0; }
  .narrator-card { gap: 15px; margin-bottom: 24px; }
  .narrator-card h3 { font-family: var(--serif); font-size: 19px; }
  .narrator-card p { font-size: 11px; color: #8b9e7b; }
  #footer { margin-top: 30px; }
  .footer-inner { display: block; padding: 25px 0 27px; font-size: 10px; }
  .footer-links { flex-wrap: wrap; gap: 8px 20px; font-size: 11px; margin-bottom: 11px; }
  .footer-links a { min-height: 25px; }
  .footer-description, .site-icp { font-size: 10px; line-height: 22px; }
  .footer-right { text-align: left; margin-top: 20px; }
  .footer-right strong { font-size: 20px; }
  .footer-right p { font-size: 10px; }
  .modal-card { width: calc(100vw - 36px); max-width: 430px; padding: 30px 26px; border-radius: 12px; }
  .modal-card h2 { font-size: 26px; }
  .modal-close { top: 8px; right: 8px; }
  .auth-switch button { font-size: 21px; }
  .toast { font-size: 12px; padding: 12px 16px; top: 15px; }
  .player-bar { height: 82px; }
  .player-main { width: 100%; height: 82px; padding: 0 15px; gap: 11px; }
  .player-cover { width: 43px; height: 43px; }
  .player-track { width: auto; flex: 1; max-width: calc(100% - 145px); }
  .player-track-title { font-size: 11px; line-height: 20px; }
  .player-track-subtitle { font-size: 9px; }
  .seek-slider { height: 3px; margin-top: 7px; }
  .player-controls { width: 84px; gap: 4px; }
  .player-controls button { width: 22px; height: 40px; font-size: 14px; }
  .player-controls .play-toggle { width: 32px; height: 32px; min-width: 32px; font-size: 12px; }
  .player-time, .player-spacer, .volume-wrap { display: none; }
  .rate-select { right: 55px; top: -27px; height: 24px; width: 50px; font-size: 10px; border-radius: 5px 5px 0 0; border-color: #4d7053; }
  .queue-toggle { right: 0; top: -27px; height: 24px; min-width: 50px; background: #244e3d; border-radius: 5px 5px 0 0; font-size: 10px; padding: 3px 8px; }
  .queue-panel { bottom: 82px; width: 100%; right: 0; left: 0; border-radius: 12px 12px 0 0; }
  .queue-heading { height: 45px; }
  .queue-items { max-height: 320px; }
  .queue-items li { min-height: 45px; font-size: 11px; }
  .player-expand-toggle { left: 18px; height: 26px; }
  .player-expanded { padding-bottom: 104px; }
  .player-expanded .player-expand-toggle { bottom: 82px; }
}
@media (max-width: 359px) {
  .viewport, .account-page, .wallet-page.viewport { width: calc(100% - 28px); }
  .nature-nav .logo { width: 135px; }
  .logo .site-brand-name { font-size: 20px; max-width: 92px; }
  .header-search { width: calc(100% - 144px); }
  .nature-hero { padding: 25px 20px 20px; }
  .nature-intro h1 { font-size: 31px; }
  .nature-feature-foot { flex-wrap: wrap; }
  .book-grid, .booklist-grid { gap: 22px 14px; }
  .editor-info .credits { display: block; }
  .editor-info .description { -webkit-line-clamp: 1; }
  .rank-small { gap: 0 12px; }
  .rank-small .rank-cover { display: none; }
  .detail-head, .book-detail-page .detail-head { padding: 17px 14px; gap: 13px; }
  .detail-cover, .detail-cover img, .book-detail-page .detail-cover, .book-detail-page .detail-cover img { width: 83px; height: 83px; }
  .detail-info h1, .book-detail-page .detail-info h1 { font-size: 17px; }
  .book-detail-page .detail-actions .button { font-size: 10px; min-width: 48px; padding: 5px; }
  .book-detail-page .detail-actions .detail-action-play, .book-detail-page .detail-actions .detail-action-buy { min-width: 62px; }
  .wallet-content { padding: 22px 15px; }
  .wallet-checkout { flex-wrap: wrap; }
  .wallet-pay-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none!important; transition: none!important; }
  .cover:hover img { transform: none; }
}