:root{--ink:#253c36;--ink2:#475c51;--muted:#75847a;--bg:#f8f5ee;--paper:#fffdf8;--cream:#f0ecdf;--sage:#e6e9dd;--green:#2f5a4b;--green2:#557e69;--line:#deded3;--peach:#e6b69a;--gold:#c5a574;--shadow:0 16px 48px #2b493b12;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.62}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--peach);outline-offset:4px}.wrap{max-width:1140px;margin:0 auto;padding:0 34px}.topbar{height:86px;max-width:1390px;margin:0 auto;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:12px}.logo-icon{font:italic 47px/.9 Georgia,serif;letter-spacing:-.18em;color:var(--green);width:56px}.logo-icon span{color:var(--peach)}.logo-label{font-size:11px;line-height:1.32;letter-spacing:.18em;font-weight:800}.nav-right{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted)}.status-dot{height:7px;width:7px;border-radius:50%;background:#6b9c75}.nav-tag{border:1px solid #b4bcad;padding:3px 8px;border-radius:14px;margin-left:13px}.eyebrow{letter-spacing:.18em;color:var(--green2);font-size:11px;font-weight:800}.rule{display:inline-block;width:42px;height:1px;background:var(--green2);vertical-align:middle;margin:0 8px}.hero{display:grid;grid-template-columns:1.03fr .97fr;gap:76px;min-height:585px;align-items:center;padding-top:64px;padding-bottom:70px}.hero-text h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,5vw,74px);letter-spacing:-.06em;line-height:1.09;margin:24px 0 24px;font-weight:500}.hero-text h1 em{font-weight:400;color:var(--green2)}.hero-cn{font-weight:650;font-size:20px;margin:0 0 8px}.hero-desc{font-size:14px;line-height:1.95;color:var(--muted);max-width:450px;margin:0 0 28px}.primary-btn{background:var(--green);color:white;display:inline-flex;align-items:center;gap:65px;font-size:14px;font-weight:650;padding:13px 20px;border-radius:8px;transition:transform .2s,background .2s}.primary-btn:hover{background:#234539;transform:translateY(-2px)}.hero-tiny{font-size:11px;color:var(--muted);margin-top:15px}.hero-art{height:455px;border-radius:8px;background:linear-gradient(145deg,#8ea390 0%,#526c5d 53%,#344e42 100%);position:relative;overflow:hidden;box-shadow:var(--shadow);color:#f9efe2}.art-orbit{position:absolute;border:1px solid #f5f5ed3d;border-radius:50%;width:590px;height:590px;top:-64px;right:-224px}.orbit-two{width:360px;height:360px;top:64px;right:-111px}.art-label{position:absolute;font-size:10px;letter-spacing:.21em;font-weight:700;z-index:1}.label-top{top:32px;left:32px}.label-bottom{bottom:31px;right:32px}.art-symbol{position:absolute;right:44px;top:20px;font:200px Georgia,serif;color:#d8dcc355;line-height:1}.art-title{position:absolute;left:45px;bottom:79px;font:italic 51px/1.09 Georgia,serif;letter-spacing:-.05em}.library-area{padding:70px 0 90px;background:#f1f0e8;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;gap:16px}.section-heading h2{margin:6px 0 0;font-size:30px;letter-spacing:-.03em}.heading-note{font-size:13px;color:var(--muted);font-weight:400}.shelf-note{font-size:12px;color:var(--muted)}.book-list{display:grid;grid-template-columns:1fr;gap:22px}.book-card{background:var(--paper);display:grid;grid-template-columns:230px 1fr;gap:34px;padding:26px;border-radius:11px;border:1px solid #e1e2d8;box-shadow:0 6px 22px #40594a08;transition:box-shadow .2s}.book-card:hover{box-shadow:0 14px 26px #40594a18}.cover{background:linear-gradient(145deg,#23382f,#55705b);min-height:285px;border-radius:5px;color:#f5eadd;position:relative;overflow:hidden;padding:25px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset -5px 0 1px #1b33262e}.cover:before{content:'';position:absolute;border:1px solid #d4caaa66;width:210px;height:210px;right:-110px;top:40px;border-radius:50%}.cover:after{content:'';position:absolute;border:1px solid #d4caaa66;width:290px;height:290px;right:-155px;top:1px;border-radius:50%}.cover-top{font-size:9px;letter-spacing:.22em;position:relative;z-index:1}.cover-title{font:italic 30px/1.08 Georgia,serif;position:relative;z-index:1;max-width:170px}.cover-bottom{font-size:10px;letter-spacing:.15em;position:relative;z-index:1}.book-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:12px}.pill{background:var(--sage);color:var(--green);font-weight:750;font-size:11px;border-radius:100px;padding:4px 12px}.book-info h3{font-family:Georgia,serif;font-size:34px;line-height:1.2;font-weight:500;margin:16px 0 5px;letter-spacing:-.02em}.book-sub{font-size:16px;color:var(--green2);font-weight:650}.book-desc{font-size:14px;color:var(--muted);line-height:1.9;max-width:580px}.book-divider{height:1px;background:var(--line);margin:22px 0 19px}.book-bottom{display:flex;align-items:center;gap:20px;justify-content:space-between}.book-stats{font-size:12px;color:var(--muted)}.text-link{font-weight:750;color:var(--green);font-size:13px;white-space:nowrap}.text-link:hover{text-decoration:underline}.how{padding-top:83px;padding-bottom:90px}.how h2{font:normal 34px Georgia,serif;margin:7px 0 34px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.how article{border-top:1px solid var(--line);padding-top:20px}.how article span{font:italic 25px Georgia,serif;color:var(--green2)}.how article h3{font-size:17px;margin:8px 0 7px}.how article p{font-size:13px;color:var(--muted);margin:0;max-width:275px}.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:11px}.footer .wrap{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer strong{color:var(--green);font-size:12px;letter-spacing:.04em}.loading{padding:45px 0;color:var(--muted)}.error{padding:20px;border:1px solid #d6aaa0;color:#9b4d3b;background:#f9ebe6;border-radius:8px}
/* Reader */
.back-link{color:var(--green2);font-size:13px;font-weight:650}.reader-root{min-height:70vh}.reader-intro{max-width:1180px;margin:0 auto;padding:36px 34px 24px}.breadcrumb{font-size:11px;color:var(--muted);letter-spacing:.07em;margin-bottom:15px}.reader-intro h1{font:normal clamp(33px,4vw,49px)/1.12 Georgia,serif;margin:8px 0}.reader-subtitle{font-size:15px;color:var(--muted);margin:0 0 16px}.reader-chiprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.reading-meter{margin-top:24px;display:flex;gap:12px;align-items:center}.meter-track{background:#e1e2d8;height:5px;flex:1;border-radius:99px;overflow:hidden}.meter-value{height:100%;width:0;background:var(--green2);border-radius:99px;transition:width .2s}.meter-number{font-size:11px;color:var(--green);font-weight:800;width:38px;text-align:right}.reading-layout{max-width:1180px;padding:0 34px 85px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:24px;align-items:start}.paper{background:var(--paper);border:1px solid #e5e3d8;border-radius:11px;box-shadow:0 6px 30px #2b493b0b;min-width:0;overflow:hidden}.paper-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:18px 26px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.small-action{border:1px solid #d0d9cf;border-radius:7px;background:transparent;color:var(--green);padding:6px 11px;font-size:12px;font-weight:700}.small-action[aria-pressed="true"]{background:#dfe9de;border-color:#a3bba9}.story-text{padding:30px clamp(22px,3.3vw,45px) 36px;font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:2;letter-spacing:.004em}.story-paragraph{margin:0 0 26px}.story-sentence{background:transparent;border:0;box-shadow:none;padding:2px 4px;margin:0 -1px;border-radius:4px;font:inherit;text-align:left;line-height:inherit;color:#2a362f;white-space:normal;transition:background .15s;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.story-sentence:hover{background:#eef0e6}.story-sentence.active{background:#e8ede1;box-shadow:0 0 0 2px #e8ede1}.note-underline{text-decoration:underline;text-decoration-color:#ad9271;text-decoration-thickness:1.5px;text-underline-offset:5px}.inline-translation{display:block;font:14px/1.7 "PingFang SC","Microsoft YaHei",sans-serif;color:#557268;background:#f0f3ea;border-left:3px solid #86a692;padding:8px 13px;margin:9px 0 15px;border-radius:0 6px 6px 0}.paper-bottom{padding:18px 28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}.study-panel{border:1px solid var(--line);border-radius:11px;background:#f9f9f3;padding:0 22px 24px;position:sticky;top:20px}.study-panel-label{padding:22px 0 13px;font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--green2)}.study-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-bottom:1px solid var(--line)}.study-tab{padding:10px 3px;background:none;border:none;font-size:12px;color:var(--muted);font-weight:650;border-bottom:2px solid transparent}.study-tab.active{color:var(--green);border-bottom-color:var(--green)}.study-content{padding-top:22px;min-height:235px}.study-en{font:21px/1.6 Georgia,serif;margin:0 0 13px}.study-zh{font-size:14px;color:var(--ink2);line-height:1.85;margin:0 0 18px}.study-hint{color:var(--muted);font-size:12px;line-height:1.8}.notes-list{display:flex;flex-direction:column;gap:11px}.note-card{background:#fffef9;border:1px solid var(--line);border-radius:8px;padding:14px}.note-card h4{font:600 17px Georgia,serif;margin:0 0 2px}.note-type{font-size:10px;color:var(--green2);letter-spacing:.1em;text-transform:uppercase}.note-card p{font-size:12px;color:var(--ink2);margin:8px 0 0}.note-card .example{font-family:Georgia,serif;font-style:italic;color:var(--muted)}.study-section-heading{font-size:12px;font-weight:800;margin:0 0 15px;letter-spacing:.08em;color:var(--green2)}.vocab-item{padding:13px 0;border-bottom:1px solid var(--line)}.vocab-item:first-child{padding-top:0}.vocab-item:last-child{border-bottom:0}.vocab-term{font:italic 20px Georgia,serif}.vocab-meaning{color:var(--green2);font-size:12px;margin:3px 0}.vocab-tip{font-size:12px;color:var(--muted);line-height:1.8}.grammar-quote{background:var(--sage);border-radius:8px;padding:13px;margin:12px 0;font:italic 15px Georgia,serif}.listen-actions{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}.nav-lesson-btn{background:var(--green);color:white;border:0;border-radius:7px;padding:9px 16px;font-weight:700;font-size:12px}.note-only{color:var(--muted);font-size:12px;margin-top:10px}.mobile-bar{display:none}.emptytext{color:var(--muted);font-size:13px}
@media(max-width:820px){.topbar{height:72px;padding:0 22px}.hero{grid-template-columns:1fr;gap:28px;padding-top:45px;padding-bottom:50px}.hero-art{height:280px;order:-1}.art-title{font-size:37px;left:25px;bottom:65px}.label-top{top:22px;left:25px}.label-bottom{right:22px;bottom:22px}.hero-text h1{font-size:53px}.reading-layout{grid-template-columns:1fr}.study-panel{position:static}.reader-intro{padding-top:25px}.footer .wrap{flex-direction:column;align-items:flex-start}.reading-layout{padding-bottom:105px}.mobile-bar{position:fixed;display:flex;bottom:0;left:0;right:0;z-index:15;justify-content:space-around;background:#fffdf9eF;border-top:1px solid var(--line);padding:10px 14px max(10px,env(safe-area-inset-bottom));backdrop-filter:blur(10px)}.mobile-bar button{background:transparent;border:0;min-height:40px;color:var(--green);font-size:13px;font-weight:750;padding:7px 16px}.mobile-bar button.center{background:var(--green);border-radius:7px;color:white}}
@media(max-width:590px){.wrap{padding:0 21px}.nav-right{font-size:9px}.nav-tag{display:none}.logo-icon{font-size:38px;width:47px}.logo-label{font-size:9px}.hero{padding-top:25px}.hero-art{height:205px}.art-title{font-size:30px;bottom:45px}.art-symbol{font-size:130px}.art-orbit{top:-90px}.hero-text h1{font-size:47px;margin:12px 0}.hero-cn{font-size:17px}.hero-desc{font-size:13px}.library-area{padding:42px 0 55px}.section-heading{align-items:start}.section-heading h2{font-size:24px}.heading-note{display:block;margin-top:3px;font-size:12px}.shelf-note{display:none}.book-card{grid-template-columns:112px 1fr;gap:16px;padding:14px;align-items:start}.cover{min-height:181px;padding:12px}.cover-title{font-size:20px}.cover-top,.cover-bottom{font-size:7px}.book-info h3{font-size:23px;margin:9px 0 2px}.book-sub{font-size:13px}.book-desc{font-size:12px;margin:9px 0}.book-meta{font-size:10px;gap:5px}.book-divider{margin:12px 0}.book-bottom{align-items:start;gap:4px;flex-direction:column}.book-stats,.text-link{font-size:11px}.how{padding-top:55px;padding-bottom:55px}.how-grid{grid-template-columns:1fr;gap:24px}.how h2{font-size:28px}.topbar-reader{padding:0 16px}.back-link{font-size:12px}.reader-intro{padding:21px 20px}.reader-intro h1{font-size:34px}.reader-subtitle{font-size:13px}.reading-layout{padding:0 12px 105px;gap:14px}.paper-toolbar{padding:13px 16px}.story-text{font-size:18px;padding:20px 17px 26px;line-height:1.92}.story-paragraph{margin-bottom:22px}.paper-bottom{padding:16px 18px}.study-panel{padding:0 18px 23px}.reading-meter{margin-top:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Phase 2: grouping all chapters of the same story on one bookshelf card. */
.chapter-list{display:flex;flex-direction:column;gap:7px;margin-top:18px;margin-bottom:8px}
.chapter-link{border:1px solid #dde7dd;background:#f8faf7;border-radius:9px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#244d36;gap:12px;font-size:14px}
.chapter-link:hover{border-color:#87ae93;background:#eff7f1}
.chapter-link small{color:#648070;font-size:12px}
.chapter-switch{max-width:1160px;margin:22px auto 32px;padding:16px 22px;border:1px solid #dfe5dd;border-radius:13px;background:#fff}
.chapter-switch strong{display:block;font-size:13px;color:#345642;margin-bottom:10px}
.chapter-switch-links{display:flex;flex-wrap:wrap;gap:8px}
.chapter-switch-link{padding:8px 13px;font-size:13px;color:#315b42;border:1px solid #cddacc;border-radius:8px;text-decoration:none}
.chapter-switch-link.current{background:#315b42;color:#fff}
@media(max-width:600px){.chapter-link{padding:11px;font-size:13px}.chapter-switch{margin:16px 12px 78px;padding:14px}}

/* Plotlish branding */
.logo-zh{font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--green2)}
@media(max-width:590px){.logo-zh{font-size:10px}}