:root{--font-ui:Georgia,"Times New Roman","Songti SC","SimSun","Noto Serif CJK SC",serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;display:grid;grid-template-rows:78px minmax(0,1fr) 83px;background:#79090d;color:#fff5e9;font-family:var(--font-ui);isolation:isolate}.hero-art{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,transparent 28%,#34000222 48%,#37000660),url('mao-hero-user-selected.png') left center/cover no-repeat}.grain{position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(0deg,#45000835,transparent 50%)}header{display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #e9c48626;background:linear-gradient(#25000085,transparent)}.brand{text-decoration:none;color:#ffe5b4;font:27px var(--font-ui);text-shadow:0 2px 15px #390000;letter-spacing:1px}.dotcom{font-size:15px;letter-spacing:0;margin-left:2px}.brand small{display:block;font:10px var(--font-ui);letter-spacing:3px;margin-top:8px;color:#f3d5b2}.language{display:flex;align-items:center;gap:9px;color:#e6c995}select{font:12px var(--font-ui);color:#ffe6bd;background:#530710c9;border:1px solid #e0b97566;border-radius:2px;padding:9px;max-width:170px}select option{background:#60131a}main{min-height:0;display:flex;padding:20px 7% 18px 50%;align-items:center}.left{width:100%;height:100%;max-height:730px;display:flex;flex-direction:column;min-height:0;margin:auto}.eyebrow{display:flex;gap:10px;align-items:center;font-size:9px;color:#edc78c;letter-spacing:3px}.eyebrow>span:first-child{width:22px;height:1px;background:#ecc78e}h1{font-family:var(--font-ui);font-weight:400;font-size:clamp(26px,4.4vh,46px);line-height:1.23;letter-spacing:4px;margin:13px 0 20px;text-shadow:0 2px 12px #680609}h1 span{color:#e9c991}.card-stage{perspective:1400px;flex:1;min-height:0;max-height:430px}.card-turner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1)}.card-turner.flipped{transform:rotateY(-180deg)}.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #efd093;border-radius:2px;padding:24px 29px;background:linear-gradient(130deg,#a97739ed,#754218f5);box-shadow:0 18px 45px #28000355,inset 0 0 0 5px #793f2240,inset 0 0 0 6px #ecc28266;display:flex;flex-direction:column;min-height:0}.card-back{transform:rotateY(180deg);background:linear-gradient(135deg,#613918fa,#301d15fa);padding:20px 26px}.card-top,.card-bottom{display:flex;justify-content:space-between;color:#ebca94;font-size:9px;letter-spacing:2px}.quote-mark{position:absolute;top:45px;left:18px;font:85px var(--font-ui);color:#e4c48c30}blockquote{position:relative;flex:1;display:flex;align-items:center;margin:16px 0;font-family:var(--font-ui);font-size:clamp(21px,2.7vh,32px);line-height:1.6;letter-spacing:1px;min-height:0;overflow:auto}html:not([lang="zh-CN"]) blockquote{font-size:clamp(17px,2.35vh,25px);letter-spacing:0;line-height:1.45}.citation{display:flex;gap:12px}.line{width:20px;height:1px;background:#e4bf83;margin-top:7px;flex-shrink:0}cite{font-size:11px;font-style:normal;line-height:1.4}.citation p{font-size:10px;color:#dcb88c;margin:6px 0 0}.card-bottom{margin-top:17px;padding-top:12px;border-top:1px solid #e1bd7950;font-size:8px}.actions{display:flex;gap:12px;margin-top:18px}button{font:12px var(--font-ui);cursor:pointer;border:1px solid #d4ad6e88;border-radius:2px;padding:14px 18px;color:#f4d69f;background:#5c0915b5;display:flex;align-items:center;justify-content:space-between;gap:10px}button:hover:not(:disabled){filter:brightness(1.13)}button:disabled{opacity:.3;cursor:default}button,select,a{outline-offset:4px}.primary{background:#eed19a;color:#501117;flex:1}.secondary{flex:1}.under{font-size:10px;color:#e2b6a2;margin:12px 0 0;letter-spacing:1px}footer{padding:12px 5%;display:flex;justify-content:space-between;align-items:center;gap:35px;border-top:1px solid #ecc48635;background:#42050cba;color:#e1bfb0;font:10px/1.7 var(--font-ui)}footer p{margin:0;max-width:49%}footer p:last-child{text-align:right;color:#c7a69a}.library-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#efd1a1;font-size:9px;letter-spacing:2px}.library-top select{max-width:155px;padding:6px;font-size:11px;background:#351e14}h2{font:24px var(--font-ui);margin:12px 0 5px;font-weight:400;color:#f1d5a5}.library-intro{font:11px/1.5 var(--font-ui);color:#c9ad91;margin:0 0 10px}#resourceList{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}#resourceList a{min-height:0;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #dbb47745;text-decoration:none;color:#f6ddb3;padding:7px 10px}#resourceList a:hover{background:#fff1d012;border-color:#e9c68b}#resourceList a>span:first-child{min-width:0}#resourceList strong{display:block;font-size:11px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#resourceList small{display:block;color:#bfa389;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px;font:10px var(--font-ui);color:#dabb90}.pagination button{padding:3px 12px;font-size:17px;background:transparent}.resource-note{font:9px var(--font-ui);color:#bda189;text-align:center;margin:8px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-height:730px){body{grid-template-rows:64px minmax(0,1fr) 72px}main{padding-top:12px;padding-bottom:12px}h1{font-size:27px;margin:8px 0 12px}.card-face{padding:17px 23px}.card-back{padding:14px 20px}.card-bottom{margin-top:9px;padding-top:8px}.actions{margin-top:12px}button{padding:11px 14px}.under{margin-top:8px}h2{font-size:21px;margin-top:9px}.library-intro{margin-bottom:7px}.pagination{margin-top:6px}.resource-note{margin-top:5px}}@media(max-width:760px){body{grid-template-rows:68px minmax(0,1fr) 98px}.hero-art{background-position:23% center}.grain{background:#55050b99}header{padding:0 5%;background:#36000688}.brand{font-size:23px}.brand small{font-size:8px;letter-spacing:2px}.dotcom{font-size:12px}.language>span{display:none}main{padding:14px 5%}.left{max-width:540px}h1{font-size:28px;margin:10px 0 13px}.card-face{background:linear-gradient(130deg,#986931f2,#6b391bf5)}.card-back{background:linear-gradient(130deg,#573319fc,#301c15fc)}footer{padding:9px 5%;gap:7px;flex-direction:column;align-items:start;font-size:8px;line-height:1.45}footer p{max-width:100%}footer p:last-child{text-align:left}.desktop-break{display:none}.under{font-size:9px}.library-top{letter-spacing:1px}}@media(max-height:560px){body{grid-template-rows:48px minmax(0,1fr) 58px}header .brand small,.eyebrow,.under{display:none}h1{font-size:20px;margin:0 0 8px}h1 br{display:none}.card-face{padding:12px 18px}.card-bottom{display:none}blockquote{font-size:18px;margin:9px 0}.citation p{margin-top:3px}.actions{margin-top:8px}.actions button{padding:8px}.library-intro,.resource-note{display:none}h2{font-size:17px;margin:7px 0}.card-back{padding:10px 15px}footer{font-size:8px}.pagination{margin-top:4px}.pagination button{padding:1px 10px}}@media(prefers-reduced-motion:reduce){.card-turner{transition:none}}

.draw-back{transform:rotateY(180deg)}
html[lang="zh-CN"] h1{font-size:clamp(32px,5vh,54px);font-weight:400}
html[lang="zh-CN"] blockquote{font-size:clamp(25px,3.2vh,38px);line-height:1.55}
html[lang="zh-CN"] .actions button{font-size:17px}
.brand small,.eyebrow,.under{font-size:12px}
html[lang="zh-CN"] cite{font-size:15px}
html[lang="zh-CN"] .citation p{font-size:13px}
@media(max-height:730px){html[lang="zh-CN"] h1{font-size:32px}html[lang="zh-CN"] blockquote{font-size:25px}}

@font-face{font-family:"GreatMao Serif";src:url("fonts/GreatMaoSerif-subset.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root{--font-ui:"GreatMao Serif","Songti SC","SimSun",serif}
body,body *{font-weight:200!important;font-synthesis:none}

.brand,.brand small{color:#b51c24;text-shadow:0 1px 8px #fff4db55}
h1,html[lang="zh-CN"] h1{font-size:clamp(38px,5.7vh,66px);line-height:1.15;letter-spacing:2px}
h1 .headline-sub{display:block;font-size:clamp(16px,2vh,23px);line-height:1.6;letter-spacing:1px;color:#fff0dc;margin-top:14px}
@media(max-height:730px){h1,html[lang="zh-CN"] h1{font-size:38px;margin:8px 0 14px}h1 .headline-sub{font-size:16px;margin-top:8px}}
@media(max-width:760px){h1,html[lang="zh-CN"] h1{font-size:36px}h1 .headline-sub{font-size:15px}}
@media(max-height:560px){h1,html[lang="zh-CN"] h1{font-size:26px}h1 .headline-sub{font-size:13px;margin-top:4px}}

html:not([lang="zh-CN"]) .brand small{letter-spacing:.5px;max-width:42vw}h1[dir="rtl"]{text-align:right}html:not([lang="zh-CN"]) h1{font-size:clamp(30px,4.5vh,52px)}

/* Three text lines must fit inside each resource row, including tall serif metrics. */
#resourceList{grid-template-rows:repeat(3,minmax(70px,1fr));overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
#resourceList a{padding:8px 10px;overflow:hidden;align-items:center}
#resourceList a>span:first-child{display:block;width:100%;min-width:0}
#resourceList strong{line-height:1.4;margin:0}
#resourceList small{line-height:1.4;margin-top:3px}
.library-top{flex-shrink:0;letter-spacing:1px}
.library-top>span{min-width:0;line-height:1.4}
.library-top label{flex-shrink:0}
#resourcesPanel h2{line-height:1.25;flex-shrink:0}
.library-intro,.pagination,.resource-note{flex-shrink:0}
.resource-note{line-height:1.45;overflow-wrap:anywhere}
 .translation-badge{align-self:flex-start;margin:0 0 9px;padding:3px 7px;border:1px solid #efcf9366;color:#e8c78f;font:9px var(--font-ui);letter-spacing:.35px;opacity:.82}

/* Keep each card region bounded: a long citation must never consume the quote. */
.left>h1,.actions,.eyebrow,.under{flex-shrink:0}
.card-face{overflow:hidden}
.card-top,.card-bottom,.translation-badge{flex-shrink:0}
.card-top{gap:12px;align-items:flex-start;line-height:1.5}
.card-top>span:first-child{min-width:0;flex:1}
.card-top>span:last-child{white-space:nowrap;letter-spacing:1px}
blockquote{display:block;flex:1 1 0;min-height:0;margin:12px 0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;overflow-wrap:break-word}
.quote-copy{display:block}
.citation{flex:0 1 auto;min-height:0;max-height:26%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.citation>div{min-width:0}
cite{display:block;overflow-wrap:anywhere}
.citation p:empty{display:none}
.card-bottom{margin-top:10px;padding-top:8px}
.translation-badge{margin-bottom:7px;max-width:100%;line-height:1.3}
#resourceList{grid-template-rows:repeat(var(--resource-rows,3),minmax(0,1fr));overflow:hidden;gap:7px}
#resourceList a{min-height:0;padding:7px 10px}
#resourceList strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.3}
#resourceList small{font-size:9px;line-height:1.3;margin-top:3px}
.library-top>span{letter-spacing:.5px}
@media(max-width:760px){
 body{grid-template-rows:64px minmax(0,1fr) 94px}
 header{gap:14px}
 .brand{font-size:23px;min-width:0;flex:1}
 .brand small,html:not([lang="zh-CN"]) .brand small{max-width:none;font-size:9px;line-height:1.3;letter-spacing:.3px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .language{flex-shrink:0}
 .language select{max-width:125px;padding:7px;font-size:12px}
 main{padding:12px 5%}
 .eyebrow,.under{display:none}
 h1,html[lang="zh-CN"] h1,html:not([lang="zh-CN"]) h1{font-size:clamp(27px,4.2dvh,34px);letter-spacing:.5px;line-height:1.15;margin:0 0 12px}
 h1 .headline-sub{font-size:14px;line-height:1.4;letter-spacing:0;margin-top:7px}
 .card-stage{max-height:none}
 .card-face{padding:16px 18px}
 .card-top{font-size:9px;letter-spacing:1px;gap:10px}
 blockquote,html[lang="zh-CN"] blockquote{font-size:25px;line-height:1.5;letter-spacing:.5px;margin:10px 0}
 html:not([lang="zh-CN"]) blockquote{font-size:19px;line-height:1.4;letter-spacing:0}
 cite,html[lang="zh-CN"] cite{font-size:11px;line-height:1.45}
 .citation{max-height:24%;gap:8px}
 .citation .line{width:16px}
 .card-bottom{font-size:8px;letter-spacing:1px}
 .actions{gap:10px;margin-top:12px}
 .actions button,html[lang="zh-CN"] .actions button{font-size:13px;line-height:1.3;padding:10px 12px;min-height:44px}
 .actions button>span:first-child{min-width:0}
 .actions button>span:last-child{flex-shrink:0}
 .card-back{padding:14px 18px}
 .library-top{gap:8px;font-size:9px}
 .library-top select{max-width:116px;padding:6px;font-size:11px}
 #resourcesPanel h2{font-size:21px;margin:10px 0 4px}
 .library-intro{font-size:10px;line-height:1.35;margin:0 0 8px}
 .pagination{margin-top:8px;gap:16px}
 .pagination button{padding:3px 12px;min-height:30px}
 .resource-note{font-size:9px;line-height:1.35;margin-top:7px}
 footer{padding:8px 5%;font-size:8px;line-height:1.35;gap:5px;justify-content:center}
}
@media(max-width:760px) and (max-height:650px){
 body{grid-template-rows:56px minmax(0,1fr) 86px}
 h1,html[lang="zh-CN"] h1,html:not([lang="zh-CN"]) h1{font-size:25px;margin-bottom:8px}
 h1 .headline-sub{font-size:12px;margin-top:5px}
 main{padding-top:8px;padding-bottom:8px}
 .card-face{padding:12px 15px}
 .actions{margin-top:8px}
 .card-bottom{display:none}
 .library-intro,.resource-note{display:none}
}