@charset "UTF-8";
:root{color-scheme:dark;--bg:#080909;--text:#deddd5;--muted:#aaa99f;--glass:rgba(237,185,44,.32);--back:#e9ca6e;--edge:#c5a451;--glass-line:rgba(255,242,186,.66);--cover-text:#fff9e6;--cover-muted:rgba(255,249,230,.8);--x:0deg;--y:0deg}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;isolation:isolate}body::before{content:"";position:fixed;inset:0;z-index:-1;background:url("assets/background-texture.jpg") center/cover no-repeat;opacity:.13;filter:invert(1);pointer-events:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #667054;outline-offset:5px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button svg{display:block}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header{display:flex;justify-content:space-between;align-items:center;padding:calc(22px + env(safe-area-inset-top)) 22px 12px;position:relative;z-index:10}.wordmark{font-family:Georgia,"Times New Roman",serif;font-size:16px;font-weight:400;white-space:nowrap;letter-spacing:-.3px}.demo-button{display:flex;align-items:center;gap:7px;min-height:44px;background:transparent;border:1px solid #73746f;border-radius:30px;padding:9px 13px;font-size:11px;color:#cccbbf}.demo-button svg{width:14px;height:14px}.demo-button.is-playing{color:#eee9d8;background:#4a4b47}
main{min-height:calc(100svh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;flex-direction:column;padding:10px 16px 24px}.stage{width:100%;max-width:720px;height:370px;position:relative;display:grid;place-items:center;perspective:1600px;isolation:isolate}.tilt{position:relative;width:240px;height:316px;transform-style:preserve-3d;transform:rotateX(var(--x)) rotateY(var(--y));transition:transform .35s cubic-bezier(.2,.8,.2,1)}.folder{width:100%;height:100%;position:relative;transform:rotateY(-10deg) rotateX(2deg) rotateZ(-1deg);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.2,1)}.folder.is-open{transform:translateX(42px) scale(.60) rotateY(-3deg)}
.folder-back{position:absolute;inset:0;border-radius:17px;overflow:hidden;background:var(--back);transform:translateZ(-4px);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset -2px 0 3px rgba(0,0,0,.09);transition:background .55s}.back-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68;pointer-events:none}.back-pocket{position:absolute;bottom:0;left:0;right:0;height:60px;border-radius:0 0 17px 17px;border-top:1px solid rgba(255,255,255,.23);background:linear-gradient(0deg,rgba(255,255,255,.15),transparent)}.spine{position:absolute;left:0;top:0;width:28px;height:100%;border-radius:14px 0 0 14px;transform-origin:left center;transform:rotateY(-90deg);background:var(--edge);transition:background .55s}.folder-edge{position:absolute;right:0;top:3px;width:28px;height:calc(100% - 6px);background:linear-gradient(90deg,var(--edge),var(--back));transform-origin:right center;transform:rotateY(90deg);border-radius:0 8px 8px 0;opacity:.86;transition:opacity .5s}.folder.is-open .folder-edge{opacity:.1}
.folder-cover{position:absolute;inset:0;border:1px solid var(--glass-line);border-radius:17px;background:var(--glass);color:var(--cover-text);text-align:left;transform:translateZ(28px);transform-origin:0 50%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 1px 1px 3px rgba(255,255,255,.35),0 3px 4px rgba(0,0,0,.04);transition:transform 1s cubic-bezier(.22,.75,.18,1),background .55s,border-color .55s;overflow:hidden;padding:0;backface-visibility:visible;z-index:4}.folder.is-open .folder-cover{transform:translateZ(28px) rotateY(-158deg)}
.cover-art{position:absolute;inset:0;pointer-events:none;opacity:.62}.cover-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;position:relative}.cover-glaze{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 55%,rgba(28,33,21,.48)),var(--glass);opacity:.58;pointer-events:none}.cover-seam{position:absolute;inset:10px 9px;border:1px solid rgba(255,255,255,.19);border-radius:11px}.cover-topline{position:absolute;left:23px;top:22px;font-family:Georgia,"Times New Roman",serif;font-size:7px;letter-spacing:1.7px;color:var(--cover-muted);transition:opacity .35s}.cover-copy{position:absolute;left:23px;right:23px;bottom:28px;display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 8px rgba(0,0,0,.14);transition:opacity .35s}.cover-title{display:flex;flex-direction:column;font-family:Georgia,"Times New Roman",serif;font-size:29px;font-weight:400;line-height:1.1;letter-spacing:1px}.cover-title-line{font-size:27px;letter-spacing:.2px;margin-top:4px;font-style:normal}.cover-subtitle{font-size:13px;letter-spacing:1.4px;margin-top:12px;color:var(--cover-text)}.cover-glint{position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.13) 46%,transparent 68%);pointer-events:none}.folder.is-open .cover-copy,.folder.is-open .cover-topline{opacity:0}
/* Closed cards remain axis-aligned and inset. Every card stays behind the cover's 28px plane. */
.paper-stack{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.paper{position:absolute;width:198px;height:266px;left:21px;top:24px;background:#777873 url("assets/background-texture.jpg") center/cover;background-blend-mode:multiply;border:1px solid rgba(210,209,190,.2);border-radius:3px;box-shadow:0 3px 6px rgba(40,35,20,.09);padding:0;transition:transform 1s cubic-bezier(.2,.75,.2,1),box-shadow .25s;backface-visibility:hidden}.paper-front{transform:translateZ(14px);z-index:2}.paper-back{transform:translateZ(7px);z-index:1}.folder.is-open .paper-stack{pointer-events:auto}.folder.is-open .paper-front{transform:translate(-3px,-14px) translateZ(14px) rotate(-7deg)}.folder.is-open .paper-back{transform:translate(91px,8px) translateZ(7px) rotate(13deg)}.ambient-shadow{position:absolute;bottom:14px;width:200px;height:23px;border-radius:50%;background:#8e8c76;filter:blur(18px);opacity:.17;transition:width 1s,opacity 1s}.stage.is-open .ambient-shadow{width:280px;opacity:.12}
.paper-number{position:absolute;top:18px;left:18px;font-family:Georgia,"Times New Roman",serif;font-size:12px;color:#d7d6cd}.paper-label{position:absolute;left:18px;bottom:22px;font-size:17px;line-height:1.6;letter-spacing:1.5px;color:#f2f0e7;text-align:left}.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px calc(22px + env(safe-area-inset-bottom));font-size:11px;color:#cccbbf}.export-button{min-height:44px;padding:8px 0;background:transparent;border:0;font-size:11px;color:inherit}.footer time{font-family:Georgia,"Times New Roman",serif;letter-spacing:.8px}.blank-page{position:fixed;inset:0;z-index:20;background:#10110f;overflow:auto;isolation:isolate;animation:page-in .25s ease-out}.blank-page::before{content:"";position:fixed;inset:0;z-index:-1;background:url("assets/card-texture.jpg") center/cover no-repeat;opacity:.65;pointer-events:none}.page-header{padding:calc(18px + env(safe-area-inset-top)) 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#d3d0c3;font-size:12px}.back-button{padding:10px 0;background:transparent;border:0;min-height:44px;font-size:12px}.page-content{max-width:700px;margin:0 auto;padding:28px 24px calc(40px + env(safe-area-inset-bottom))}.page-heading{margin-bottom:34px}.page-number{font-family:Georgia,"Times New Roman",serif;font-size:12px;color:#9d998a}.page-heading h2{font-size:24px;font-weight:400;letter-spacing:2px;margin:12px 0}.book-name{font-size:11px;letter-spacing:1px;color:#a8a394;margin:0}.writing-field{display:flex;flex-direction:column;gap:14px;font-size:13px;letter-spacing:1px;color:#d8d4c7;margin-bottom:28px}textarea,input{font:inherit;color:#e7e4d8}textarea{resize:vertical;width:100%;min-height:140px;padding:16px;border:1px solid #66665a70;border-radius:3px;background:#080a079c;line-height:1.85;font-size:16px;letter-spacing:.2px;outline:none}textarea:focus{border-color:#aba38b}form{margin:0}.daily-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:30px}.date-field{display:flex;flex-direction:column;gap:12px;font-size:12px;color:#d8d4c7}input[type="date"]{background:#080a07b0;border:1px solid #66665a70;border-radius:3px;font-size:14px;min-height:44px;padding:10px;max-width:180px}.checkin-button{min-height:44px;border:1px solid #8a826b;border-radius:3px;background:#25251eaa;color:#ddd6be;padding:10px 16px;font-size:12px}.checkin-button[aria-pressed="true"]{background:#5a523966;color:#eee4bf}.save-status{font-size:10px;color:#b3ae9d;min-height:16px;margin:20px 0 0}.history{border-top:1px solid #66665a70;padding-top:16px;color:#c9c3b2;font-size:12px}.history summary{cursor:pointer;min-height:44px;padding:10px 0}.history summary span{margin-left:8px;color:#938e7e}.history-entry{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:15px 0;background:transparent;border:0;border-bottom:1px solid #66665a40;color:#ccc7b8;font-size:12px}.history-entry span:last-child{font-size:10px;color:#aaa28b}.toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:30;font-size:11px;color:#e5dfcb;background:#151713ed;border:1px solid #6b6c5c;padding:12px 18px;border-radius:3px;white-space:nowrap;margin:0}.toast:empty{display:none}body.page-open{overflow:hidden}@keyframes page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:601px){.header{padding:30px 42px 12px}.wordmark{font-size:20px}main{min-height:calc(100svh - 144px);padding-bottom:20px}.stage{height:440px}.tilt{width:270px;height:352px}.paper{width:224px;height:300px;left:23px;top:24px}.folder.is-open{transform:translateX(85px) scale(.88) rotateY(-3deg)}.folder.is-open .paper-back{transform:translate(105px,8px) translateZ(7px) rotate(13deg)}.footer{padding-inline:42px}.page-header{max-width:900px;margin:auto}}
@media(max-width:360px){.header{padding-inline:16px}.footer{padding-inline:16px;font-size:9px}.wordmark{font-size:14px}.demo-button{font-size:10px;padding-inline:10px}.folder.is-open{transform:translateX(40px) scale(.56) rotateY(-3deg)}}
@media(max-height:720px) and (max-width:600px){main{padding-top:0;padding-bottom:0}.stage{height:320px}.tilt{width:218px;height:288px}.paper{width:180px;height:240px;left:19px;top:22px}.folder.is-open{transform:translateX(36px) scale(.60) rotateY(-3deg)}.cover-title{font-size:26px}.cover-title-line{font-size:24px}.cover-subtitle{font-size:12px}.footer{padding-top:0}}
@media(hover:hover){.demo-button:hover{background:#454642}.folder.is-open .paper:hover{box-shadow:0 6px 16px rgba(40,35,20,.16)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.tilt{transform:none}}
@media(max-width:360px) and (max-height:720px){.folder.is-open{transform:translateX(34px) scale(.54) rotateY(-3deg)}}

@media(max-width:360px){.page-content{padding-inline:18px}.page-heading h2{font-size:22px}.checkin-button{padding-inline:12px}}
.paper-label{font-size:20px}.paper-back .paper-label{left:auto;right:12px;writing-mode:vertical-rl;font-size:20px;letter-spacing:2px;bottom:24px}

/* A single portrait poster keeps its border and credits intact on phones. */
@font-face{font-family:"Bodoni Moda";src:url("assets/bodoni-moda.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
body.home-visible::before{opacity:0}.landing{min-height:100svh;display:flex;align-items:center;justify-content:center;background:#000;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.poster-frame{position:relative;width:min(100%,calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3));aspect-ratio:2/3;container-type:inline-size}.home-poster{display:block;width:100%;height:auto}.home-title{position:absolute;left:6%;right:6%;top:17%;margin:0;text-align:center;font-family:"Bodoni Moda",Didot,"Times New Roman",serif;font-size:14cqw;font-weight:400;font-optical-sizing:auto;line-height:.81;letter-spacing:-.055em;color:#c95800}.home-title a{display:flex;align-items:center;flex-direction:column;padding:2% 0;min-height:44px;transition:opacity .2s}.home-title span{display:block;white-space:nowrap}.home-title a:focus-visible{outline:1px solid #c95800;outline-offset:12px}.home-title a:active{opacity:.72}.book-page{min-height:100svh}
@media(hover:hover){.home-title a:hover{opacity:.82}}

/* Physical cards: smaller Songti lettering, staggered size and grey tone. */
.paper-front{background-color:#888980}.paper-back{width:190px;height:244px;top:37px;background-color:#555750}
.paper-label,.paper-back .paper-label{font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;font-weight:400;font-size:15px;letter-spacing:1px}.paper-back .paper-label{right:10px;bottom:20px}
@media(min-width:601px){.book-page{max-width:430px;margin:auto}.header{padding:calc(22px + env(safe-area-inset-top)) 22px 12px}.wordmark{font-size:16px}main{min-height:calc(100svh - 150px);padding:10px 16px 24px}.stage{height:370px}.tilt{width:240px;height:316px}.paper{width:198px;height:266px;left:21px;top:24px}.paper-back{width:190px;height:244px;top:37px}.folder.is-open{transform:translateX(42px) scale(.60) rotateY(-3deg)}.folder.is-open .paper-back{transform:translate(91px,8px) translateZ(7px) rotate(13deg)}.footer{padding-inline:22px}}
@media(max-height:720px) and (max-width:600px){.paper-back{width:174px;height:220px;top:32px}}
/* Reading and chapter tracking are designed for a phone-width column. */
.page-header{position:sticky;top:0;z-index:5;max-width:430px;background:#11120fe8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.page-content{max-width:430px;padding:20px 22px calc(40px + env(safe-area-inset-bottom))}.page-heading h2{font-family:"Songti SC","STSong","SimSun",serif;font-size:22px;letter-spacing:1px}.page-heading{margin-bottom:28px}.source-intro,.lesson-source{font-size:11px;line-height:1.8;color:#9e9d92}.part-heading{font-size:11px;font-weight:400;letter-spacing:1px;margin:30px 0 12px;color:#a7a494}.chapter-link{display:grid;grid-template-columns:26px 1fr;gap:8px 10px;text-align:left;width:100%;padding:20px 0;background:transparent;border:0;border-bottom:1px solid #74796f40}.chapter-index{grid-row:1/3;font-family:Georgia,serif;font-size:12px;color:#919688;padding-top:5px}.chapter-link-title{font-family:"Songti SC","STSong","SimSun",serif;font-size:17px;line-height:1.65;color:#dddcd1}.chapter-link-detail{grid-column:2;font-size:10px;line-height:1.7;color:#95988e}.directory-button{border:0;background:transparent;padding:10px 0;min-height:44px;font-size:11px;color:#b5b7a9}.lesson-kicker{font-size:11px;color:#abae9c;letter-spacing:2px;margin-top:22px}.lesson-title{font-family:"Songti SC","STSong","SimSun",serif;font-size:25px;font-weight:400;line-height:1.6;margin:12px 0}.lesson-block,.example-block,.practice-block{margin:28px 0}.lesson-block h4,.example-block h4,.practice-block h4{font-size:12px;font-weight:400;color:#b9b9a6;letter-spacing:1px;margin:0 0 14px}.lesson-block p,.example-block p,.reference-answer p,.lesson-section-body dd,.lesson-goals,.legacy-entry p{font-size:15px;line-height:1.95;color:#d2d3c9;overflow-wrap:anywhere;white-space:pre-wrap}.lesson-goals{padding-left:20px;margin:22px 0 28px}.lesson-goals li{margin:10px 0}.lesson-section{border-top:1px solid #74796f50}.lesson-section>summary{font-family:"Songti SC","STSong","SimSun",serif;font-size:18px;line-height:1.7;cursor:pointer;padding:22px 0;min-height:44px;color:#e1e1d7}.lesson-section-body{padding:0 0 22px}.concept-list{margin:26px 0}.concept-list dt{font-size:14px;color:#e0ddce;margin:18px 0 6px}.concept-list dd{margin:0;color:#bcbfb2}.example-block{padding:18px 16px;background:#36392a38;border-left:1px solid #a49b73}.example-block p{margin-bottom:0}.exercise-prompt{line-height:1.8;font-size:14px;letter-spacing:0}.exercise-answer{min-height:110px;line-height:1.8}.reference-answer{margin:-12px 0 30px;padding:0 0 14px;border-bottom:1px solid #6a706135}.reference-answer summary{min-height:44px;padding:12px 0;font-size:12px;color:#aeb29f;cursor:pointer}.reference-answer p{margin-top:10px;color:#b9bcaf}.lesson-navigation{display:flex;justify-content:space-between;border-top:1px solid #74796f50;padding-top:18px;gap:12px}.lesson-navigation button{min-height:44px;font-size:12px;background:transparent;border:0;padding:10px 0;color:#d5d4c1}.extension-sources a{display:block;text-decoration:underline;font-size:11px;line-height:1.8;padding:6px 0;color:#b9bdab}.reading-progress{margin-bottom:26px;font-size:11px;color:#b4b7a5}.reading-progress progress{width:100%;height:3px;appearance:none;border:0;background:#464b40;margin-top:8px}.reading-progress progress::-webkit-progress-bar{background:#464b40}.reading-progress progress::-webkit-progress-value{background:#b4b09b}.tracking-chapter{border-top:1px solid #777d7045}.tracking-heading,.tracking-row{display:grid;grid-template-columns:30px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:68px}.tracking-title{font-family:"Songti SC","STSong","SimSun",serif;font-size:16px;line-height:1.8;padding:12px 0;color:#d9dacf;cursor:pointer;overflow-wrap:anywhere;transition:color .2s}.tracking-title.is-complete{color:#6e7467;text-decoration:line-through;text-decoration-thickness:1px}.completion-checkbox{width:22px;height:22px;margin:0;accent-color:#b6b2a0;cursor:pointer}.notes-toggle{min-height:44px;font-size:10px;white-space:nowrap;padding:10px 0;background:transparent;border:0;color:#a4aa97}.tracking-body{padding:2px 0 26px 0}.chapter-count{font-size:10px;color:#9ca28e;margin:4px 0 24px}.tracking-unit{border-top:1px solid #5c625439}.tracking-row .tracking-title{font-size:15px}.unit-note-panel{padding:12px 0 4px 0}.unit-note-panel .writing-field,.tracking-body>.writing-field{font-size:11px;letter-spacing:0}.unit-note{min-height:126px}.legacy-records{border-top:1px solid #6e746348;margin-top:36px;padding:16px 0;color:#aeb2a0;font-size:12px}.legacy-records summary{min-height:44px;padding:12px 0;cursor:pointer}.legacy-entry h4{font-size:12px;font-weight:400}.legacy-entry p{font-size:13px}.legacy-entry{margin:22px 0}.save-status{color:#b4b69f}
@media(max-width:360px){.page-content{padding-inline:18px}.tracking-title{font-size:15px}.lesson-title{font-size:23px}.lesson-section>summary{font-size:17px}}
.book-page{display:flex;flex-direction:column;height:100svh;min-height:520px}.book-page main{flex:1;min-height:0}.book-page .header,.book-page .footer{flex-shrink:0}

/* Card silhouettes follow the ticket and stamp references; transparent cuts reveal the book. */
.paper{border:0;border-radius:0;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.paper-front{-webkit-mask-image:url("assets/card-ticket-mask.svg");mask-image:url("assets/card-ticket-mask.svg")}
.paper-back{-webkit-mask-image:url("assets/card-stamp-mask.svg");mask-image:url("assets/card-stamp-mask.svg")}
.paper-planet{position:absolute;width:98px;height:98px;right:8px;top:66px;fill:none;stroke:#b48a48;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:.84;pointer-events:none}
.paper-planet .planet-core{fill:currentColor;stroke:none;color:#b48a48}
.paper-back .paper-planet{width:76px;height:76px;right:2px;top:72px}
.paper-number,.paper-label{z-index:1}.paper:focus-visible .paper-label{text-decoration:underline;text-underline-offset:5px}