:root{ color-scheme: light; }
  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  html,body{margin:0;padding:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang TC","Noto Sans CJK TC",sans-serif;
    background:#faf8f4;
    color:#2b2620;
    font-size:21px;
    line-height:1.7;
    -webkit-tap-highlight-color:transparent;
  }
  .app{
    max-width:560px;
    margin:0 auto;
    min-height:100%;
    background:#faf8f4;
    display:flex;
    flex-direction:column;
  }
  .topbar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 16px;
    background:#fff;
    border-bottom:1px solid #eae4d8;
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:10;
  }
  .backArrow{
    font-size:30px;
    color:#8a6d3b;
    cursor:pointer;
    padding:4px 6px;
    line-height:1;
    user-select:none;
  }
  .topbar h1{
    font-size:24px;
    margin:0;
    font-weight:700;
    color:#3d3020;
    flex:1;
  }
  .screen{
    display:none;
    flex-direction:column;
    flex:1;
    padding:20px 18px 40px;
  }
  .screen.active{ display:flex; }
  #screen-categories{ justify-content:center; min-height:100vh; min-height:100dvh; }
  #screen-categories .shelf-ring{ margin-top:0; }

  /* Language screen */
  .lang-hero{
    text-align:center;
    margin-bottom:28px;
    margin-top:12px;
  }
  .lang-hero .logo{
    font-size:33px;
    font-weight:800;
    color:#3d3020;
    margin-bottom:4px;
  }
  .lang-hero .sub{
    font-size:19.5px;
    color:#a89a7c;
  }
  .lang-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .lang-btn{
    width:100%;
    padding:16px;
    font-size:24px;
    border-radius:12px;
    border:1px solid #e6ddc9;
    background:#fff;
    color:#3d3020;
    text-align:start;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:52px;
  }
  .lang-btn:active{ background:#f3ecda; }
  .lang-btn .native{ font-weight:700; }
  .lang-btn .code{ font-size:18px; color:#b0a68f; }

  /* Category screen */
  .cat-list{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .cat-card{
    padding:22px 18px;
    border-radius:14px;
    background:#fff;
    border:1px solid #eae4d8;
    cursor:pointer;
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .cat-card .name{
    font-size:25.5px;
    font-weight:700;
    color:#3d3020;
  }
  .cat-card .count{
    font-size:19.5px;
    color:#a89a7c;
  }
  .cat-card:active{ background:#f8f4ea; }

  /* Home */
  .home{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:36px;
    min-height:70vh;
    text-align:center;
  }
  .home-title{ margin:0; display:flex; flex-direction:column; gap:6px; }
  .home-zh{
    font-size:clamp(52px, 17vw, 84px);
    font-weight:800;
    letter-spacing:.12em;
    color:#3d3020;
    line-height:1.2;
  }
  .home-en{
    font-family:Georgia,"Times New Roman",serif;
    font-style:italic;
    font-size:clamp(26px, 8vw, 39px);
    font-weight:400;
    color:#8a6d3b;
  }
  .lang-picker{ display:flex; flex-direction:column; gap:8px; width:min(100%, 300px); }
  .lang-picker-label{ font-size:19.5px; color:#a89a7c; }
  .lang-picker select{
    width:100%;
    font:inherit;
    font-size:24px;
    padding:13px 40px 13px 16px;
    border:1px solid #d9ccb1;
    border-radius:12px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a1743f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
    color:#3d3020;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
  }
  .lang-picker select:focus-visible, .back-btn:focus-visible, .shelf:focus-visible, .search-box input:focus-visible{
    outline:2px solid #c0733f; outline-offset:2px;
  }

  /* Bookshelf ring */
  .shelf-ring{
    position:relative;
    width:min(100%, 380px);
    aspect-ratio:1;
    margin:12px auto 0;
  }
  .shelf-title{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    margin:0;
    font-size:33px;
    font-weight:800;
    color:#3d3020;
    text-align:center;
    width:40%;
    line-height:1.35;
    text-wrap:balance;
  }
  .shelf{
    position:absolute;
    width:27%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    font:inherit;
  }
  .shelf-art{
    width:100%;
    aspect-ratio:1;
    border-radius:50%;
    background:#fff;
    border:1px solid #eae4d8;
    box-shadow:0 2px 6px rgba(90,70,40,.08);
    display:flex; align-items:center; justify-content:center;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .shelf-art svg{ width:68%; height:68%; }
  .shelf-name{
    position:absolute;
    top:calc(100% + 4px);
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-size:19.5px;
    font-weight:700;
    color:#6b4f2a;
    background:#fff;
    border:1px solid #eae4d8;
    border-radius:999px;
    padding:2px 10px;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
    z-index:2;
  }
  .shelf:hover .shelf-art, .shelf:focus-visible .shelf-art{ transform:scale(1.06); box-shadow:0 6px 16px rgba(90,70,40,.16); }
  .shelf:hover .shelf-name, .shelf:focus-visible .shelf-name{ opacity:1; }
  .shelf-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:36px;
  }
  .back-btn{
    font:inherit;
    font-size:21px;
    font-weight:700;
    color:#8a6d3b;
    background:#fff;
    border:1px solid #e6ddc9;
    border-radius:12px;
    padding:10px 14px;
    cursor:pointer;
    white-space:nowrap;
  }
  .search-box{
    flex:1 1 180px;
    display:flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:1px solid #e6ddc9;
    border-radius:12px;
    padding:0 12px;
  }
  .search-icon{ color:#a1743f; font-size:27px; }
  .search-box input{
    flex:1;
    min-width:0;
    font:inherit;
    font-size:24px;
    border:0;
    background:none;
    padding:10px 0;
    color:#3d3020;
  }
  .search-box input:focus-visible{ outline:none; }
  .search-box:focus-within{ border-color:#c0733f; }
  .search-results{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
  .result-item{
    display:flex; align-items:center; gap:12px;
    background:#fff; border:1px solid #eae4d8; border-radius:12px;
    padding:8px 12px 8px 8px; cursor:pointer; text-align:start;
    font:inherit; width:100%;
  }
  .result-item .cover-visual{ width:44px; border-radius:6px; padding:4px; flex-shrink:0; }
  .result-item .cover-visual .icon{ font-size:21px; }
  .result-item .cover-visual .title{ display:none; }
  .result-title{ font-weight:700; color:#3d3020; font-size:22.5px; }
  .result-author{ font-size:18px; color:#8a7c63; }
  .result-empty{ font-size:21px; color:#a89a7c; text-align:center; padding:12px; }

  [dir="rtl"] .backArrow, [dir="rtl"] .back-btn span[aria-hidden]{ display:inline-block; transform:scaleX(-1); }

  /* Legend + card stats */
  .legend{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:12px 18px;
    margin:16px 0 18px;
    padding:14px 16px;
    background:#fff;
    border:1px solid #eae4d8;
    border-radius:12px;
  }
  .legend-group{ display:flex; flex-direction:column; gap:7px; }
  .legend-head{ font-size:18px; font-weight:700; color:#a1743f; letter-spacing:.04em; }
  .legend-item{ display:flex; align-items:center; gap:10px; font-size:18.8px; color:#5c5142; line-height:1.45; }
  .legend-item > .battery, .legend-item > .stars{ flex-shrink:0; width:128px; }
  .card-stats{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:8px; }
  .battery.sm .battery-body{ width:44px; height:17px; border-width:1.5px; padding:1.5px; border-radius:4px; }
  .battery.sm .battery-cap{ width:3px; height:7px; }
  .battery.lvl-none .battery-body{ border-color:#d6ccb8; }
  .battery.lvl-none .battery-cap{ background:#d6ccb8; }
  .stars.sm{ font-size:21px; gap:2px; }
  .bat-pct{ margin-inline-start:6px; font-size:18px; font-weight:700; color:#6b5a3e; font-variant-numeric:tabular-nums; min-width:3.2em; }
  .battery.lvl-none .bat-pct{ color:#b8ad96; font-weight:500; }
  .cover-zoom{
    position:fixed;
    z-index:50;
    pointer-events:none;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(60,45,25,.35);
    background:#fff;
  }
  .cover-zoom .cover-visual{ border-radius:0; }
  .article-cover .cover-visual{ cursor:zoom-in; }
  .cover-zoom .cover-visual .title{ font-size:30px; }
  .cover-zoom .cover-visual .icon{ font-size:72px; }

  /* Theme song player */
  .theme-song{
    display:flex; align-items:center; gap:14px;
    margin:0 auto 22px; width:100%; max-width:420px;
    padding:12px 16px;
    background:#fff; border:1px solid #eae4d8; border-radius:999px;
  }
  .song-btn{
    flex-shrink:0; width:52px; height:52px; border-radius:50%;
    border:0; background:#c0733f; color:#fff; font-size:21px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .song-btn:disabled{ background:#e2d8c4; cursor:default; }
  .song-btn:focus-visible{ outline:2px solid #3d3020; outline-offset:2px; }
  .song-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .song-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .song-label{ font-size:18px; font-weight:700; color:#3d3020; }
  .song-time{ font-size:15px; color:#a89a7c; font-variant-numeric:tabular-nums; }
  .song-coming{ font-size:16px; color:#a89a7c; }
  #songSeek{ width:100%; accent-color:#c0733f; margin:0; }

  /* Book grid screen */
  .book-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .book-card{
    background:#fff;
    border:1px solid #eae4d8;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
  }
  .book-card:active{ background:#f8f4ea; }
  .book-card .meta .book-title{
    font-weight:700;
    font-size:25.5px;
    color:#3d3020;
    text-align:center;
    line-height:1.45;
    text-wrap:balance;
  }
  .cover-visual{
    width:100%;
    aspect-ratio:3/4;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:14px;
    text-align:center;
    color:#fff;
  }
  .cover-visual.has-photo{ padding:0; overflow:hidden; background:#e9e3d6; }
  .cover-visual.has-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
  .cover-visual .icon{
    font-size:39px;
    margin-bottom:8px;
    opacity:.9;
  }
  .cover-visual .title{
    font-size:19.5px;
    font-weight:700;
    line-height:1.4;
  }
  .book-card .meta{
    padding:10px 10px 14px;
  }
  .book-card .meta .author{
    font-size:18px;
    color:#8a7c63;
  }

  /* Article screen */
  .article-cover{
    width:150px;
    margin:4px auto 18px;
  }
  .article-cover .cover-visual{
    border-radius:10px;
    aspect-ratio:3/4;
  }
  .article-title{
    font-size:31.5px;
    font-weight:800;
    color:#3d3020;
    text-align:center;
    margin-bottom:4px;
  }
  .article-original{
    font-size:19.5px;
    color:#a89a7c;
    text-align:center;
    margin-bottom:2px;
    font-style:italic;
  }
  .article-author{
    font-size:21px;
    color:#8a7c63;
    text-align:center;
    margin-bottom:24px;
  }
  .article-body h3{
    color:#6b4f2a;
    font-size:24px;
    margin-top:22px;
    margin-bottom:8px;
  }
  .article-body p{
    font-size:22.5px;
    color:#2b2620;
    margin:0 0 8px 0;
  }
  .note{
    font-size:16.5px;
    color:#c2b89e;
    text-align:center;
    margin-top:28px;
    line-height:1.6;
  }

  /* New structured article template */
  .section-block{
    margin-top:26px;
  }
  .section-label{
    font-size:19.5px;
    font-weight:700;
    color:#a1743f;
    letter-spacing:.02em;
    margin-bottom:8px;
  }
  .video-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff4e4;
    border:1px solid #f0dcb8;
    border-radius:12px;
    padding:14px 16px;
    font-size:21px;
    color:#7a5a26;
    text-decoration:none;
  }
  .video-box .play-icon{
    font-size:27px;
    flex-shrink:0;
  }
  .plain-text{
    font-size:22.5px;
    color:#2b2620;
    margin:0;
  }
  .key-sentence-box{
    position:relative;
    padding:28px 8px 30px;
    font-size:clamp(20px, 5.9vw, 28.5px);
    font-weight:700;
    line-height:1.85;
    letter-spacing:.02em;
    color:#3d3020;
    text-align:center;
    text-wrap:balance;
  }
  html[lang="ko"] .key-sentence-box{ word-break:keep-all; }
  .key-sentence-box::before,
  .key-sentence-box::after{
    display:block;
    font-family:Georgia,"Times New Roman",serif;
    font-size:66px;
    line-height:1;
    color:#c0733f;
    font-weight:400;
  }
  .key-sentence-box::before{ content:"\201C"; margin-bottom:10px; }
  .key-sentence-box::after{ content:"\201D"; margin-top:16px; }
  .key-sentence-box .seg{ display:inline-block; max-width:100%; }

  /* Reading progress (battery) + rating */
  .book-stats{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin:0 auto 22px;
  }
  .stat-row{
    display:grid;
    grid-template-columns:5.5em auto 3em;
    align-items:center;
    gap:10px;
    font-size:18px;
    color:#a89a7c;
  }
  .stat-label{ text-align:end; }
  .stat-value{ font-variant-numeric:tabular-nums; color:#6b5a3e; font-weight:700; }
  .battery{ display:inline-flex; align-items:center; }
  .battery-body{
    position:relative;
    width:86px; height:24px;
    border:2px solid #6b5a3e;
    border-radius:5px;
    padding:2px;
    box-sizing:border-box;
    display:block;
  }
  .battery-fill{
    display:block;
    height:100%;
    border-radius:2px;
    background:var(--battery-color, #c0733f);
  }
  .battery-cap{
    width:4px; height:10px;
    margin-inline-start:2px;
    background:#6b5a3e;
    border-radius:0 2px 2px 0;
  }
  .battery.lvl-low{ --battery-color:#b83227; }
  .battery.lvl-mid{ --battery-color:#e39a3b; }
  .battery.lvl-80{ --battery-color:#e8572a; }
  .battery.lvl-90{ --battery-color:#4caf50; }
  .battery.lvl-100 .battery-body{ border-color:#b8902c; }
  .battery.lvl-100 .battery-cap{ background:#b8902c; }
  .battery.lvl-100 .battery-fill{
    background:linear-gradient(110deg,#c9971c 0%,#f3d36b 30%,#fff6c9 45%,#f3d36b 60%,#c9971c 100%);
    background-size:250% 100%;
    animation:goldShine 2.2s linear infinite;
  }
  .battery.lvl-100 .battery-body{ animation:goldGlow 2.2s ease-in-out infinite; }
  @keyframes goldShine{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }
  @keyframes goldGlow{
    0%,100%{ box-shadow:0 0 4px rgba(232,190,70,.45); }
    50%{ box-shadow:0 0 14px rgba(245,205,80,.95); }
  }
  @media (prefers-reduced-motion: reduce){
    .battery.lvl-100 .battery-fill, .battery.lvl-100 .battery-body{ animation:none; }
  }
  .stars{ display:inline-flex; gap:3px; font-size:25.5px; line-height:1; letter-spacing:0; }
  .stars .on{ color:#e0a526; }
  .stars .off{ color:#e2d8c4; }
  .video-box.is-coming{ background:#f6f2ea; border-style:dashed; color:#a89a7c; }

  /* Long-form notes inside accordions */
  .accordion-body h4{
    font-size:22.5px;
    color:#6b4f2a;
    margin:20px 0 8px;
  }
  .accordion-body h5{
    font-size:21px;
    color:#8a6d3b;
    margin:16px 0 6px;
  }
  .accordion-body ol.steps-summary{
    background:#faf6ee;
    border-radius:10px;
    padding-block:12px; padding-inline:34px 14px;
  }
  .accordion-body ol.steps-summary li{ margin-bottom:2px; }
  .accordion-body p.script{
    border-inline-start:3px solid #e6d7b8;
    padding-inline-start:12px;
    color:#6b5a3e;
  }
  .accordion-item{
    border:1px solid #eae4d8;
    border-radius:12px;
    margin-bottom:10px;
    overflow:hidden;
    background:#fff;
  }
  .accordion-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    cursor:pointer;
    font-size:22.5px;
    font-weight:700;
    color:#3d3020;
  }
  .accordion-head .chev{
    font-size:18px;
    color:#a1743f;
    transition:transform .15s ease;
    flex-shrink:0;
    margin-inline-start:10px;
  }
  .accordion-item.open .accordion-head .chev{
    transform:rotate(180deg);
  }
  .accordion-body{
    padding:0 16px 16px;
  }
  .accordion-body[hidden]{ display:none !important; }
  .accordion-body p{
    font-size:21px;
    color:#5c5142;
    margin:0 0 10px 0;
  }
  .accordion-body p:last-child{ margin-bottom:0; }
  .accordion-body ul, .accordion-body ol{
    margin:0 0 10px 0;
    padding-inline-start:20px;
  }
  .accordion-body ul:last-child, .accordion-body ol:last-child{ margin-bottom:0; }
  .accordion-body li{
    font-size:21px;
    color:#5c5142;
    margin-bottom:6px;
  }
  .accordion-body strong{ color:#3d3020; }
  .accordion-item.top-level > .accordion-head{
    font-size:24px;
  }
  .accordion-item.top-level{
    margin-bottom:12px;
  }
  .accordion-item .accordion-item{
    margin:0 0 8px 0;
  }
  .accordion-item .accordion-item:last-child{ margin-bottom:0; }
  .key-sentence-box{
    margin-top:2px;
  }
  .shang-box{
    font-size:21px;
    color:#5c5142;
    line-height:1.7;
  }
  .other-books-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .other-book-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    background:#fff;
    border:1px solid #eae4d8;
    border-radius:10px;
    font-size:21px;
    color:#3d3020;
    cursor:pointer;
  }
  .other-book-link .arrow{ color:#c2b89e; }