:root{font-family:'Segoe UI','Microsoft YaHei',sans-serif;color:#233c32;background:#e8ece6;--green:#286447;--muted:#788177;--bg:#f6f7f2}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #92ab77;outline-offset:3px}button:active{transform:scale(.98)}button:disabled{opacity:.4;cursor:default}.phone{max-width:430px;min-height:100dvh;margin:auto;background:var(--bg);position:relative;padding:env(safe-area-inset-top) 24px 26px}.header{display:flex;align-items:center;justify-content:space-between;height:82px}.brand{font-size:23px;font-weight:750;letter-spacing:-1px}.brand span{font-size:10px;letter-spacing:1.5px;margin-left:8px;color:var(--muted);font-weight:400}.quiet{font-size:11px;color:var(--muted)}h1{font-size:28px;line-height:1.35;letter-spacing:-1px;margin:18px 0 8px}p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.mode{display:flex;padding:4px;background:#e8ece4;border-radius:13px;margin:24px 0 20px;gap:4px}.mode button{flex:1;min-height:44px;border-radius:10px;background:transparent;font-size:14px}.mode .selected{background:white;box-shadow:0 2px 5px #233c320c;font-weight:700;color:var(--green)}.resume{background:var(--green);color:white;border-radius:17px;padding:18px 20px;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.resume strong{display:block;font-size:17px}.resume small{display:block;font-size:11px;color:#d6e5d5;margin-top:5px}.arrow{font-size:24px;font-weight:300}.section{margin-top:23px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.section h2{font-size:15px;margin:0;font-weight:700}.section-head span{font-size:11px;color:var(--muted)}.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.chapter{min-height:63px;background:white;border:1px solid #e2e7df;border-radius:12px;text-align:left;padding:12px}.chapter strong{font-size:13px;display:block}.chapter small{font-size:10px;color:var(--muted);display:block;margin-top:5px}.chapter:hover{border-color:#a8bba0}.footer{font-size:10px;text-align:center;color:#8c958a;margin-top:27px;line-height:1.8}.study-top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 12px}.icon{width:44px;height:44px;background:transparent;font-size:23px;border-radius:12px;margin-left:-12px}.unit-title{text-align:center;font-size:13px}.unit-title small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.count{font-size:12px;color:var(--muted);min-width:32px;text-align:right}.track{background:#e1e7dc;height:4px;border-radius:5px;margin:12px 0 26px;overflow:hidden}.track div{height:100%;background:var(--green);transition:width .2s}.study{min-height:calc(100dvh - 26px);display:flex;flex-direction:column}.study-intro{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:14px}.card{width:100%;flex:1;min-height:310px;border:1px solid #e2e7df;background:#fff;border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 8px 30px #233c3204;overflow-wrap:anywhere}.label{font-size:11px;color:var(--muted);letter-spacing:1px}.question{font-size:28px;line-height:1.5;margin:30px 0;font-weight:600}.question.long,.en.long{font-size:20px}.en{font-family:Georgia,serif;font-size:32px;color:var(--green);line-height:1.4;margin:20px 0}.card hr{border:0;border-top:1px solid #e7ebe3;width:100%;margin:0 0 24px}.card .hint{font-size:12px;color:var(--muted);margin-top:25px}.actions{position:sticky;bottom:0;padding:20px 0 max(12px,env(safe-area-inset-bottom));background:var(--bg);display:flex;gap:12px}.actions button{min-height:56px;flex:1;border-radius:14px;font-weight:600;font-size:15px}.primary{background:var(--green);color:white}.secondary{background:#e7ece1;color:#456143}.under{color:var(--muted);text-align:center;font-size:11px;margin:17px 0 0}.complete{display:flex;flex-direction:column;justify-content:center;min-height:85dvh;text-align:center}.seal{margin:0 auto 28px;width:78px;height:78px;background:#e5edd9;border-radius:50%;display:grid;place-items:center;font-size:32px;color:var(--green)}.complete h1{font-size:29px}.complete .number{font:64px Georgia,serif;color:var(--green);margin:30px 0 5px}.complete .actions{margin-top:25px;position:static}.desktop-label{display:none}@media(min-width:600px){body{padding:36px 0}.phone{min-height:860px;border-radius:32px;box-shadow:0 24px 80px #233c321a;border:7px solid #fff;overflow:hidden}.study{min-height:800px}.complete{min-height:780px}.desktop-label{display:block;text-align:center;font-size:12px;color:#738071;margin:22px 0}.card{min-height:410px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.header{height:60px}h1{font-size:25px;margin-top:10px}.mode{margin:18px 0 14px}.section{margin-top:18px}.chapter{min-height:48px;padding:12px}.chapter small{display:none}.section-head span{display:none}.resume{padding:12px 17px;margin-bottom:16px}.resume strong{font-size:14px}.resume small{margin-top:3px}.footer{margin-top:20px}.phone{padding-left:20px;padding-right:20px}

.book-stage{height:310px;position:relative;margin:22px -20px 0;overflow:hidden;perspective:1100px;touch-action:pan-y;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}.book-stage:active{cursor:grabbing}.book-stage.animating{pointer-events:none;cursor:default}.book{position:absolute;top:24px;left:50%;width:194px;height:258px;border-radius:5px 14px 14px 5px;text-align:left;padding:26px 22px 22px 30px;color:#fff;background:var(--cover);box-shadow:inset 7px 0 9px #0002,inset 9px 0 0 #ffffff15,5px 9px 0 -3px #e4e3d7,10px 20px 28px #263c3220;transition:transform .48s cubic-bezier(.22,.7,.25,1),opacity .42s ease,box-shadow .42s ease,filter .42s ease;transform:translateX(-50%) rotateY(0) scale(1);transform-origin:center center;z-index:3;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.book.left{transform:translateX(calc(-50% - 174px)) rotateY(22deg) scale(.82);opacity:.23;z-index:1;filter:saturate(.85)}.book.right{transform:translateX(calc(-50% + 174px)) rotateY(-22deg) scale(.82);opacity:.23;z-index:1;filter:saturate(.85)}.book.dragging,.book-stage.dragging .book{transition:none}.book.flip-out-next{transform:translateX(calc(-50% - 210px)) rotateY(42deg) scale(.76);opacity:0;z-index:2;filter:brightness(.92)}.book.flip-out-prev{transform:translateX(calc(-50% + 210px)) rotateY(-42deg) scale(.76);opacity:0;z-index:2;filter:brightness(.92)}.book.flip-in{transform:translateX(-50%) rotateY(0) scale(1);opacity:1;z-index:5;filter:none;box-shadow:inset 7px 0 9px #0002,inset 9px 0 0 #ffffff15,5px 9px 0 -3px #e4e3d7,14px 26px 36px #263c3230}.book.lift{box-shadow:inset 7px 0 9px #0002,inset 9px 0 0 #ffffff15,5px 9px 0 -3px #e4e3d7,18px 32px 44px #263c3240}.book .edition{font-size:10px;letter-spacing:2px;opacity:.7}.book strong{font-size:29px;line-height:1.5;margin-top:25px;letter-spacing:3px}.book .cover-line{width:28px;height:2px;background:#ffffff60;margin-top:16px}.book .english{font:italic 27px Georgia,serif;opacity:.75;margin-top:14px}.book .class-name{font-size:10px;letter-spacing:2px;margin-top:auto;opacity:.7}.book-dots{display:flex;justify-content:center;gap:7px;margin:6px 0 28px}.book-dots i{height:5px;width:5px;background:#ccd4c7;border-radius:8px;transition:width .35s ease,background .35s ease}.book-dots i.active{width:19px;background:var(--green)}@media(prefers-reduced-motion:reduce){.book,.book-dots i{transition:none!important}}.chapter-picker{background:white;padding:20px;border:1px solid #e2e7df;border-radius:18px}.chapter-label{display:flex;align-items:center;justify-content:space-between;gap:12px}.chapter-current{display:flex;flex-direction:column;gap:2px;min-width:0}.chapter-label label{color:var(--muted);font-size:12px}.chapter-label .chapter-name{font-size:18px;font-weight:650;color:var(--green)}.chapter-range{width:100%;height:44px;margin:16px 0 0;accent-color:var(--green);cursor:pointer;touch-action:pan-y}.ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:0 5px;gap:2px;overflow:hidden}.ticks span{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launch{width:100%;min-height:54px;border-radius:14px;margin-top:18px;font-size:15px;font-weight:600}.picker-hint{text-align:center;margin:12px 0;font-size:11px}.study .mode{margin:0 0 16px;flex-shrink:0}.study .track{margin-bottom:18px}.study .card{min-height:260px}.book-home h1{margin-top:22px}.book-home .subtitle{font-size:12px}.phone{min-height:100dvh}@media(min-width:600px){.phone{min-height:850px}}@media(max-height:740px) and (max-width:599px){.book-stage{height:262px;margin-top:8px}.book{top:0;scale:.88;transform-origin:50% 0}.book-dots{margin-bottom:16px}.book-home h1{margin-top:8px}.header{height:52px}}

/* iOS-inspired cloth covers and dimensional paper stack. */
:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif}
.book-stage{perspective:1400px;isolation:isolate}
.book{padding:0;background:transparent;box-shadow:none!important;border-radius:4px 12px 12px 4px;transform-style:preserve-3d;backface-visibility:visible;overflow:visible}
.book::before{content:'';position:absolute;inset:4px -7px 3px 5px;border-radius:3px 10px 10px 3px;background:repeating-linear-gradient(0deg,#eeece4 0px,#eeece4 1px,#fffdf6 1px,#fffdf6 3px);box-shadow:2px 3px 1px #bcbcaf,9px 20px 24px #233c3220}
.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:25px 20px 22px 29px;border-radius:4px 11px 11px 4px;background:linear-gradient(90deg,#0003,transparent 4%,#ffffff1c 6%,#0002 8%,transparent 11%),var(--cover);box-shadow:inset 0 1px 1px #ffffff50,inset -1px 0 1px #0003,0 6px 15px #0001;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;z-index:4}
.cover::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.13;background-image:repeating-linear-gradient(0deg,#ffffff70 0,#ffffff70 .5px,transparent .5px,transparent 3px),repeating-linear-gradient(90deg,#0005 0,#0005 .5px,transparent .5px,transparent 3px)}
.cover::after{content:'';position:absolute;inset:15px 12px 15px 20px;border:1px solid #ffffff25;border-radius:1px 3px 3px 1px;pointer-events:none}
.book .edition{font-size:8px;letter-spacing:1.4px;position:relative}.book strong{font-weight:650;letter-spacing:4px;font-size:30px}.book .english{font-size:25px}.book .class-name{font-size:9px;letter-spacing:1px}
.paper{position:absolute;inset:5px 0 5px 8px;padding:36px 20px;display:flex;flex-direction:column;gap:20px;background:linear-gradient(90deg,#d9d6c9,#fffdf6 12%,#f8f6ed);border-radius:2px 9px 9px 2px;color:#52604f;transform-origin:left center;z-index:2;box-shadow:1px 2px 3px #0002;backface-visibility:hidden}.paper b{font-size:19px;font-family:Georgia,serif}.paper small{font-size:10px}.paper i{height:1px;width:100%;background:#dddccf}.paper.leaf{z-index:3;padding:0}.paper.leaf::after{content:'';position:absolute;inset:60px 22px;background:repeating-linear-gradient(0deg,transparent 0,transparent 19px,#dcdacb 19px,#dcdacb 20px)}
.book.current{filter:drop-shadow(0 15px 15px #233c3212)}.book.left,.book.right{filter:saturate(.65) blur(.3px)}
.book-stage.opening{overflow:visible;pointer-events:none;z-index:10}.opening .book.current{animation:book-settle .76s cubic-bezier(.2,.7,.2,1) both}.opening .book.current .cover{animation:cover-open .72s cubic-bezier(.3,.05,.2,1) both}.opening .book.current .leaf{animation:leaf-open .64s .12s cubic-bezier(.3,.05,.2,1) both}.opening .book:not(.current){opacity:0;transition:opacity .25s}.book-home.is-opening .chapter-picker,.book-home.is-opening .picker-hint,.book-home.is-opening .launch,.book-home.is-opening .book-dots{opacity:.3;transition:opacity .25s}
@keyframes cover-open{0%{transform:rotateY(0)}100%{transform:rotateY(-154deg)}}
@keyframes leaf-open{0%{transform:rotateY(0)}100%{transform:rotateY(-140deg)}}
@keyframes book-settle{0%{transform:translateX(-50%) rotateY(0) scale(1)}60%{transform:translateX(-28%) rotateY(-8deg) scale(1.03)}100%{transform:translateX(-28%) rotateY(-8deg) scale(1.05)}}
.study.entering{animation:reading-enter .28s ease-out both}@keyframes reading-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.opening .book,.opening .cover,.opening .leaf,.study.entering{animation:none!important}}
.book{transform-style:flat;isolation:isolate;perspective:1000px}.cover{transform-style:flat}
.grammar-study .question{font-size:22px;text-align:left;white-space:pre-line}.grammar-study .en{font-family:inherit;font-size:18px;text-align:left;line-height:1.75}.grammar-study .card{align-items:stretch}.grammar-study .label{text-align:left}
/* Shared visual language across the book picker, flashcards and completion. */
:root{
  --green:#426653;
  --muted:#727971;
  --bg:#f8f9f6;
  --ink:#29372e;
  --surface:#fff;
  --soft:#edf1eb;
  --line:#e1e6de;
  --radius:16px;
  --control-radius:12px;
  color:var(--ink);
  background:#eef0eb;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.brand{font-size:20px;font-weight:600;letter-spacing:0}
h1,.complete h1{font-size:24px;font-weight:600;line-height:1.5;letter-spacing:-.5px}
.quiet,.book-home .subtitle,.study-intro,.unit-title small,.under,.picker-hint,.footer,.desktop-label{color:var(--muted);font-size:12px}
.footer{line-height:1.9}
.chapter-picker,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.chapter-picker{padding:20px}
.chapter-current{gap:6px}
.chapter-label .chapter-name{font-size:18px;font-weight:600;color:var(--ink)}
.secondary{background:var(--soft);color:var(--green);border:1px solid var(--line)}
.launch,.actions button{min-height:54px;border-radius:var(--control-radius);font-size:15px;font-weight:600}
.primary{background:var(--green);color:var(--surface)}
button{transition:background-color .18s ease,transform .18s ease}
button:focus-visible,.book-stage:focus-visible,.chapter-range:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(hover:hover){.primary:hover{background:#355542}.secondary:hover{background:#e3eade}}
.chapter-range{appearance:none;-webkit-appearance:none;background:transparent;margin-top:12px}
.chapter-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--line)}
.chapter-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border:3px solid var(--surface);border-radius:50%;background:var(--green);box-shadow:0 0 0 1px var(--line)}
.chapter-range::-moz-range-track{height:4px;border-radius:4px;background:var(--line)}
.chapter-range::-moz-range-thumb{width:12px;height:12px;border:3px solid var(--surface);border-radius:50%;background:var(--green);box-shadow:0 0 0 1px var(--line)}
.ticks{color:var(--muted);font-size:11px}
.cover{background:linear-gradient(90deg,#0000000d,transparent 10%),var(--cover,var(--green));box-shadow:inset 1px 0 0 #ffffff25;border-radius:4px 10px 10px 4px}
.cover::before,.cover::after{content:none}
.book::before{background:#f2f3ed;box-shadow:2px 2px 0 #d9ded4,4px 10px 18px #29372e12}
.book.current{filter:none}
.book.left,.book.right{filter:none}
.book strong{font-family:inherit;font-size:30px;font-weight:600;letter-spacing:2px}
.book .edition{font-size:8px;letter-spacing:1.2px;opacity:.8}
.book .english{font-family:inherit;font-size:19px;font-style:normal;font-weight:400;letter-spacing:.5px;opacity:.8}
.book .class-name{font-size:10px;letter-spacing:.5px;opacity:.8}
.book .cover-line{height:1px;width:24px;background:#ffffff60}
.paper{background:#fafbf7;color:var(--green);box-shadow:1px 2px 3px #0000000d}
.paper b{font-family:inherit;font-size:18px;font-weight:500;line-height:1.5}
.paper i{background:var(--line)}
.book-dots i{background:#cdd6c9}
.book-dots i.active{background:var(--green);width:16px}
.mode{background:var(--soft);border:1px solid var(--line);border-radius:var(--control-radius);padding:3px;gap:4px}
.mode button{border-radius:8px;color:var(--muted)}
.mode .selected{background:var(--surface);box-shadow:0 1px 3px #29372e08;color:var(--green);font-weight:600}
.unit-title{font-size:14px;font-weight:500;min-width:0;flex:1;padding:0 8px;overflow-wrap:anywhere}
.unit-title small{font-weight:400}
.count{font-variant-numeric:tabular-nums}
.track{background:var(--line);height:3px}
.card{padding:28px 24px}
.label{font-size:12px;letter-spacing:.5px;color:var(--muted)}
.question{font-size:27px;font-weight:500;line-height:1.6;margin:28px 0;color:var(--ink)}
.en{font-family:inherit;font-size:28px;font-weight:500;line-height:1.6;color:var(--green)}
.question.long,.en.long{font-size:20px}
.card hr{border-color:var(--line);margin-bottom:24px}
.card .hint{font-size:12px;color:var(--muted)}
.grammar-study .question{font-size:22px;line-height:1.7}
.grammar-study .en{font-size:18px;font-weight:400;line-height:1.8}
/* 语法卡的选择题选项：只展示选项，答案仍由学生自己对照、自己判断对错 */
.grammar-study .question .prompt{display:block}
.grammar-study .question .prompt:not(:first-child){margin-top:18px}
.grammar-study .options{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:16px;font-weight:400;line-height:1.5;white-space:normal}
.grammar-study .options li{display:flex;gap:10px;align-items:flex-start}
.grammar-study .options b{flex:none;width:22px;height:22px;margin-top:2px;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:var(--green);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.grammar-study .options span{min-width:0}
/* 「答案与要点」里的知识点解析 */
.grammar-study .note{display:block;margin-top:14px;padding:12px 14px;background:var(--soft);border-radius:10px;font-size:15px;font-weight:400;line-height:1.75;color:var(--ink);white-space:pre-line}
.seal{width:64px;height:64px;font-size:28px;background:var(--soft);color:var(--green);margin-bottom:24px}
.complete .number{font-family:inherit;font-size:60px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--green)}
@media(min-width:600px){.phone{border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 40px #29372e08}.desktop-label{font-size:11px}}
@media(max-width:359px){.phone{padding-left:16px;padding-right:16px}.book-stage{margin-left:-16px;margin-right:-16px}h1,.complete h1{font-size:22px}.chapter-picker{padding:16px}.study-intro{font-size:11px}}
.audio-button{flex:0 0 auto!important;padding:0 14px;white-space:nowrap;background:var(--soft);color:var(--green);border:1px solid var(--line)}
@media(max-width:380px){.audio-button{padding:0 10px;font-size:13px!important}}