:root{ --paper:#EDE6D6; --paper-2:#F5F0E4; --ink:#2B2620; --ink-soft:#6B6255; --seal:#A8402C; --seal-dark:#7C2E1F; --bamboo:#5C7A5C; --gold:#B8935A; --line:#D8CDB6; --card:#FBF8F1; --brush-font: "Kaiti SC", "STKaiti", "KaiTi", "SimSun", "STSong", "Songti SC", "Noto Serif SC", serif; } *{box-sizing:border-box;} /* Originally a bare `body{}` rule -- rescoped to .guwen-go-root since this stylesheet is now injected into a container div inside a Next.js page rather than owning the whole document . */ .guwen-go-root{margin:0;background:var(--paper);color:var(--ink); font-family:Georgia,"Songti SC","Noto Serif SC","Noto Sans",serif;line-height:1.6; min-height:100vh;} .wrap{max-width:720px;margin:0 auto;padding:24px 20px 40px;} h1{font-size:22px;font-weight:400;letter-spacing:.02em;margin:0 0 4px;} .sub{font-size:13px;color:var(--ink-soft);margin:0 0 10px;} .tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line); overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;} .tab{padding:10px 16px;font-size:14px;cursor:pointer;color:var(--ink-soft); border-bottom:2px solid transparent;user-select:none;white-space:nowrap;flex-shrink:0;} .tab.active{color:var(--seal);border-bottom-color:var(--seal);font-weight:600;} .panel{display:none;} .panel.active{display:block;} .stats{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;align-items:flex-end;} .stat{background:var(--paper-2);border:1px solid var(--line);border-radius:6px; padding:8px 14px;font-size:12px;color:var(--ink-soft);} .stat b{display:block;font-size:18px;color:var(--ink);font-weight:400;} .card{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:36px 24px;position:relative;min-height:220px; display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer;} .badge-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;align-items:center;margin-bottom:4px;margin-right:-10px;} .flat.show-in-list{cursor:pointer;padding:3px 10px;font-size:11px;min-height:auto; color:var(--ink-soft);background:var(--paper-2);border-radius:10px;border-color:var(--line);} button.flat.show-in-list:hover{color:var(--gold);border-color:var(--gold);} .badge{font-size:10px;color:var(--gold);white-space:nowrap;flex-shrink:0; border:1px solid var(--gold);border-radius:10px;padding:2px 8px;letter-spacing:.05em;} .char{font-size:64px;line-height:1;margin-bottom:6px;font-family:var(--brush-font);text-align:center;} .pinyin{font-size:16px;color:var(--seal);margin-bottom:4px; font-family:"Noto Sans","Segoe UI","Helvetica Neue",Arial,Georgia,sans-serif;} .pos{font-size:12px;color:var(--ink-soft);font-style:italic;} .hint{font-size:12px;color:var(--ink-soft);margin-top:14px;text-align:center;} .back{display:none;align-self:stretch;text-align:left;} .gloss{font-size:16px;line-height:1.6;margin:10px 0;max-width:480px; font-family:"Noto Sans",Georgia,"Songti SC","Noto Serif SC",serif;} .example{font-size:15px;color:var(--ink-soft);margin-top:8px;text-align:justify;} .example i{font-style:normal;} .source{font-size:12px;color:var(--gold);margin-top:4px;} .src-link{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--seal); border:1px solid var(--seal);border-radius:6px;padding:2px 8px;margin-left:6px; text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;} .src-link:hover{background:var(--seal);color:var(--paper);} .grade-row{display:flex;gap:8px;margin-top:20px;justify-content:center;flex-wrap:wrap;} .grade{flex:1;min-width:70px;max-width:120px;padding:12px 6px;border-radius:6px;border:1px solid var(--line); background:var(--paper-2);font-size:13px;cursor:pointer;color:var(--ink); font-family:inherit;} .grade:hover{border-color:var(--seal);} .grade.again{color:var(--seal-dark);} .grade.good{color:var(--bamboo);} button.flat{background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px 16px; font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;min-height:38px;} button.flat:hover{border-color:var(--seal);} .flat.toggled-active{background:var(--seal);color:#fff;border-color:var(--seal);} button.flat:disabled{opacity:0.35;cursor:default;} button.flat:disabled:hover{border-color:var(--line);} .passage-card{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:14px 24px 28px;position:relative;} .passage-zh{font-size:24px;text-align:center;margin:10px 0 18px;line-height:1.8;font-family:var(--brush-font);} .reveal{margin-top:16px;display:none;} .reveal.show{display:block;} .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;} .empty{text-align:center;color:var(--ink-soft);padding:40px 0;font-size:14px;} .sidebar-btn{position:fixed;top:20px;right:20px;width:36px;height:36px;border-radius:50%; background:var(--card);border:1px solid var(--line);cursor:pointer;font-size:16px; color:var(--seal);display:flex;align-items:center;justify-content:center;z-index:10;} .sidebar{position:fixed;top:0;right:-100vw;width:min(280px, 85vw);height:100%;background:var(--paper-2); border-left:1px solid var(--line);padding:60px 20px 20px;transition:right .2s ease; z-index:9;overflow-y:auto;} .sidebar.open{right:0;} .sidebar h3{font-size:14px;margin:0 0 4px;color:var(--seal);} .sidebar p{font-size:12px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5;} .sidebar a{display:block;font-size:13px;color:var(--ink);text-decoration:none; padding:6px 0;border-bottom:1px solid var(--line);} .sidebar a:hover{color:var(--seal);} .sidebar .close{position:absolute;top:16px;right:16px;cursor:pointer;color:var(--ink-soft); background:none;border:none;font-size:14px;} .lookup-row{margin-top:10px;font-size:12px;color:var(--ink-soft);} .lookup-row a{color:var(--seal);text-decoration:none;margin:0 4px;} .lookup-row a:hover{text-decoration:underline;} .suggest-link{color:var(--ink-soft);text-decoration:underline;margin:0 4px;cursor:pointer;} .suggest-link:hover{color:var(--gold);} .passage-list{display:flex;flex-direction:column;gap:8px;} .passage-item{background:var(--paper-2);border:1px solid var(--line);border-radius:8px; padding:12px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;} .passage-item:hover{border-color:var(--seal);} .passage-item .ti{font-size:16px;font-family:var(--brush-font);} .passage-item .sub2{font-size:12px;color:var(--ink-soft);} .passage-item .pitext{flex:1;min-width:0;overflow:hidden;} .passage-item .pitext .ti,.passage-item .pitext .sub2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .passage-item>a{flex-shrink:0;white-space:nowrap;} .row-line{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;} .row-line + .row-line{margin-top:4px;} .row-line-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;} .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .row-line .rl-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* citation lines can run long and benefit from breaking at a word boundary rather than mid-word -- short structured labels (pinyin, part of speech, etc.) stay on plain character ellipsis above, which is more reliable for brief content */ .source.rl-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal;max-height:1.5em;overflow:hidden;} .rl-text-wrap{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal;max-height:1.5em;overflow:hidden;} .row-line .rl-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;} .mem-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 24px 28px;position:relative;} .clickable{cursor:pointer;} .clickable:hover{border-color:var(--seal);} .card-header{text-align:center;margin-bottom:4px;} .mem-text{font-family:var(--brush-font);font-size:22px;line-height:2.1;letter-spacing:.02em; text-align:justify;min-height:120px;} .chunk-hidden{display:inline-block;color:var(--line);letter-spacing:.15em;user-select:none;} .chunk-shown{color:var(--ink);} .mem-controls{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;align-items:center;} .mem-progress{font-size:12px;color:var(--ink-soft);margin-left:auto;} .back-link{font-size:12px;color:var(--seal);cursor:pointer;margin-bottom:12px;display:inline-block;} .mem-gloss{font-size:13px;color:var(--ink-soft);margin-top:10px;padding-top:8px;border-top:1px solid var(--line);line-height:1.5;} .fn-marker{cursor:pointer;color:var(--seal);font-weight:700;padding:0 6px;font-size:1.15em;vertical-align:baseline;} .fn-marker:hover{opacity:0.7;} .verse-line{padding-left:1.2em;text-indent:-1.2em;} .flash-highlight{animation:flashHighlight 1.8s ease-out;} #guide-content h2,#madeof-content h2{margin-top:0;margin-bottom:10px;} #guide-content h3,#madeof-content h3{margin-top:16px;margin-bottom:6px;font-size:15px;color:var(--seal);} #guide-content p,#madeof-content p{margin:0 0 10px;} #guide-content p:last-child,#madeof-content p:last-child{margin-bottom:0;} #search-bar{position:relative;margin:14px 0;} #search-input{width:100%;box-sizing:border-box;padding:10px 36px 10px 14px;font-size:14px; font-family:inherit;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);} #search-input:focus{outline:none;border-color:var(--seal);} #search-bar .pclose{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--ink-soft);font-size:16px;} #search-results{margin-bottom:10px;} .search-result{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:6px; margin-bottom:6px;cursor:pointer;background:var(--paper-2);} .search-result:hover{border-color:var(--seal);} .search-result .sr-mode{display:inline-block;font-size:10px;color:var(--gold);background:var(--paper-2); border-radius:8px;padding:1px 8px;margin-bottom:4px;} .search-result .sr-header{font-size:15px;font-family:var(--brush-font);margin-bottom:2px;} .search-result .sr-tagline{font-size:12px;color:var(--seal);margin-bottom:3px;font-family:'Noto Sans','Segoe UI','Helvetica Neue',Arial,Georgia,sans-serif;} .search-result .sr-citation{font-size:12px;color:var(--gold);margin-bottom:3px;} .search-result .sr-clauses{font-size:10px;color:var(--seal);margin-bottom:4px;} .search-result .sr-bottom{margin-top:6px;} .search-result .row-line{margin-bottom:4px;} .search-result .sr-context{font-size:12px;color:var(--ink-soft);line-height:1.4; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .search-result mark{background:var(--gold);color:var(--card);padding:0 1px;border-radius:2px;} #search-empty{font-size:13px;color:var(--ink-soft);padding:10px 0;} #search-near-label{font-size:12px;font-style:italic;color:var(--ink-soft);padding:6px 0 4px;} #back-to-top{ position:fixed;bottom:24px;right:24px;z-index:100; width:42px;height:42px;border-radius:50%; background:var(--seal);color:#fff;border:none; font-size:18px;line-height:1;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s,transform .2s,visibility .2s; } #back-to-top.visible{opacity:0.85;visibility:visible;transform:translateY(0);} #back-to-top:hover{opacity:1;} @keyframes flashHighlight{ 0%{background:var(--gold);opacity:0.25;} 100%{background:transparent;opacity:1;} } .view-toggle{display:flex;gap:18px;margin-bottom:16px;border-bottom:1px solid var(--line);} .view-toggle button{padding:6px 2px;font-size:13px;border:none;border-bottom:2px solid transparent; background:none;cursor:pointer;font-family:inherit;color:var(--ink-soft);} .view-toggle button.active{color:var(--seal);border-bottom-color:var(--seal);font-weight:600;} .mode-btn{padding:6px 12px;font-size:12px;border-radius:10px;border:1px solid var(--line); background:var(--paper-2);cursor:pointer;font-family:inherit;color:var(--ink);} .mode-btn:hover{border-color:var(--gold);} .mode-btn.active{background:var(--gold);color:var(--card);border-color:var(--gold);} .era-header{font-size:13px;color:var(--gold);margin:18px 0 8px;font-weight:600; border-bottom:1px solid var(--line);padding-bottom:4px;cursor:pointer;user-select:none; display:flex;justify-content:space-between;align-items:center;} .era-header:hover{color:var(--seal);} .era-header .arrow{font-size:11px;transition:transform .15s;} .era-header.collapsed .arrow{transform:rotate(-90deg);} .collapsible-list{overflow:hidden;} .collapsible-list.collapsed{display:none;} .era-header:first-child{margin-top:0;} .scope-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;margin-bottom:16px;} .toggle-arrow{display:inline-block;transition:transform 0.2s ease;transform:rotate(0deg);margin-right:2px;} .toggle-arrow.open{transform:rotate(90deg);} .scope-btn{padding:5px 12px;font-size:12px;border-radius:10px;border:1px solid var(--line); background:var(--paper-2);cursor:pointer;font-family:inherit;color:var(--ink);position:relative;} .scope-btn:hover{border-color:var(--gold);} .scope-btn.active{background:var(--gold);color:var(--card);border-color:var(--gold);} .scope-btn.scope-zero{border-color:var(--seal);} .scope-btn.scope-zero::after{content:"0";position:absolute;top:-7px;right:-7px; background:var(--seal);color:#fff;font-size:9px;line-height:1;border-radius:50%; width:14px;height:14px;display:flex;align-items:center;justify-content:center;} .expand-toggle{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-soft); cursor:pointer;padding:3px 10px;border:1px solid var(--line);border-radius:10px; background:var(--paper-2);width:fit-content;} .expand-toggle:hover{color:var(--gold);border-color:var(--gold);} .expand-toggle .toggle-arrow{font-size:9px;} .filter-group{margin-bottom:6px;} .filter-group-header{display:inline-flex;align-items:center;gap:6px;cursor:pointer; font-size:11px;color:var(--ink-soft);width:fit-content;background:var(--paper-2); border:1px solid var(--line);border-radius:10px;padding:3px 10px;box-sizing:border-box;} .filter-group-header:hover{color:var(--gold);border-color:var(--gold);} .filter-group-label{font-weight:400;} .cx{cursor:pointer;border-bottom:1px dotted var(--gold);} .cx:hover{color:var(--seal);} .cx-group{cursor:pointer;border-bottom:1px dotted var(--gold);} .cx-cite{cursor:pointer;border-bottom:1px dotted var(--gold);} .cx-cite:hover{color:var(--seal);} /* clicks on these inside an already-open popup are blocked (see the click handler), so they shouldn't look clickable either -- no dotted underline, no pointer cursor, no hover color */ #char-popup .cx,#char-popup .cx-group,#char-popup .cx-cite{ cursor:inherit;border-bottom:none;pointer-events:none; } #chengyu-char .cx,#chengyu-char .cx-group{pointer-events:none;border-bottom:none;cursor:inherit;} #chengyu-char.revealed .cx,#chengyu-char.revealed .cx-group{pointer-events:auto;border-bottom:1px dotted var(--gold);cursor:pointer;} #vocab-char .cx-cite{pointer-events:none;border-bottom:none;cursor:inherit;} #vocab-char.revealed .cx-cite{pointer-events:auto;border-bottom:1px dotted var(--gold);cursor:pointer;} /* gloss-term (Glossary card headline) doesn't need the class-toggle gate that vocab-char/chengyu-char use -- its cross-link span only ever renders in the DOM once commRevealed is true, since Glossary's card re-renders on click (unlike Vocab's), so there's nothing to gate */ .cx-group:hover .cx-ch{color:var(--seal);} .cx-plain{cursor:default;} .cx-self{cursor:default;font-weight:700;} #char-popup{position:absolute;z-index:50;background:var(--card);border:1px solid var(--seal); border-radius:8px;padding:14px 16px 40px;max-width:280px;max-height:min(400px, 80vh);overflow-y:auto; box-shadow:0 4px 16px rgba(0,0,0,.2); display:none;font-size:13px;} #char-popup .pc{font-family:var(--brush-font);font-size:28px;text-align:center;margin-bottom:4px;} #char-popup .pp{color:var(--seal);text-align:left;font-size:13px;margin-bottom:6px; font-family:"Noto Sans","Segoe UI","Helvetica Neue",Arial,Georgia,sans-serif;} #char-popup .pg{margin-bottom:6px;font-family:"Noto Sans",Georgia,"Songti SC","Noto Serif SC",serif;} #char-popup .pclose{position:absolute;top:6px;right:10px;cursor:pointer;color:var(--ink-soft);font-size:14px;} #char-popup .pmissing{color:var(--ink-soft);} #footnote-popup{position:absolute;z-index:50;display:none;background:var(--card);border:1px solid var(--seal); border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.18);padding:12px 30px 12px 14px;max-width:280px;} #footnote-popup .fp-text{font-size:12px;line-height:1.5;color:var(--ink);} #footnote-popup .fp-close{position:absolute;top:6px;right:10px;cursor:pointer;color:var(--ink-soft);font-size:14px;} .stroke-toggle{font-size:12px;color:var(--seal);cursor:pointer;border:1px solid var(--line); border-radius:12px;padding:4px 12px;display:inline-block;margin-top:10px;background:var(--paper-2);} .stroke-toggle:hover{border-color:var(--seal);} .stroke-box{margin-top:12px;display:flex;flex-direction:column;align-items:center;} .stroke-canvas{background:var(--card);border:1px solid var(--line);border-radius:8px;} .stroke-controls{display:flex;gap:6px;margin-top:8px;} .stroke-controls button{font-size:11px;padding:4px 10px;border-radius:10px;border:1px solid var(--line); background:var(--paper-2);cursor:pointer;font-family:inherit;color:var(--ink);} .stroke-error{font-size:12px;color:var(--ink-soft);font-style:italic;margin-top:8px;} .logo-banner{position:fixed;left:16px;top:16px;width:90px;height:90px;z-index:6; display:block;box-shadow:0 4px 14px rgba(43,38,32,.3);border-radius:14px;} @media (min-width: 1300px){ .logo-banner{left:20px;top:20px;width:110px;height:110px;border-radius:16px;} } @media (max-width: 900px){ .logo-banner{width:60px;height:60px;border-radius:10px;left:10px;top:10px;opacity:.92;} } @media (max-width: 480px){ .logo-banner{width:44px;height:44px;border-radius:8px;left:8px;top:8px;} } @media (max-width: 420px){ .wrap{padding:16px 14px 32px;} .char{font-size:52px;} .card{padding:28px 16px;min-height:180px;} .mem-card, .passage-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 24px 28px;position:relative;} .passage-zh{font-size:20px;} .mem-text{font-size:19px;} h1{font-size:19px;} .sidebar-btn{top:14px;right:14px;width:32px;height:32px;font-size:14px;} .tab{padding:10px 12px;font-size:13px;} button.flat{padding:9px 12px;font-size:12px;} .stats{gap:8px;} .stat{padding:6px 10px;background:var(--paper-2);border-radius:6px;} }