:root{--paper: #ffffff;--paper-deep: #f2f5fa;--card: #ffffff;--ink: #1b2a4a;--ink-2: #5b6b87;--ink-3: #96a2b8;--line: #e3e8f1;--accent: #2563eb;--accent-deep: #1e40af;--accent-soft: #e8effc;--hl: #dde8fb;--hl-strong: #c6d9f8;--amber: #b45309;--ok: #1d4ed8;--serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;--sans: "Helvetica Neue", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--shadow: 0 10px 32px rgba(27, 42, 74, .1), 0 2px 8px rgba(27, 42, 74, .05)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;min-height:100vh}#app{position:relative;z-index:1}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit}a{color:inherit;text-decoration:none}::selection{background:var(--hl-strong)}.seal{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-family:var(--serif);font-weight:700;border-radius:6px}.badge{display:inline-block;font-size:11px;line-height:1;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}.badge.t0{border-color:var(--ink);color:#fff;background:var(--ink)}.badge.t1{border-color:var(--ink-3);color:var(--ink-2);background:transparent}.rule{border:none;border-top:1px solid var(--line)}.topbar{position:fixed;top:0;left:0;right:0;height:60px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 20px;background:var(--paper);border-bottom:1px solid var(--line)}.topbar .brand{font-size:15px;font-weight:700;letter-spacing:.01em;white-space:nowrap}.topbar .brand em{font-style:normal;font-family:var(--serif);padding-right:2px;color:var(--accent-deep)}.topbar .stats{display:flex;align-items:center;gap:24px;font-size:12px;color:var(--ink-3);white-space:nowrap}.topbar .stats b{color:var(--ink);font-size:13px;font-weight:600;margin-left:6px;font-variant-numeric:tabular-nums}.rail{position:fixed;top:60px;bottom:0;left:0;width:56px;z-index:40;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:12px 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail-item{position:relative;flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:color .12s}.rail-item.on{color:var(--ink);font-weight:700}.rail-item.on:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;background:var(--accent)}.rail-item .rdot{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--ink-3)}.flyout{position:fixed;left:68px;z-index:60;width:300px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:14px 16px 13px;pointer-events:none}.flyout .f-en{font-family:var(--serif);font-weight:700;font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.flyout .f-zh{color:var(--ink-2);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flyout .f-row{display:flex;align-items:center;gap:10px;margin-top:11px}.flyout .f-bar{flex:1;height:2px;background:var(--paper-deep);border-radius:1px;overflow:hidden}.flyout .f-bar i{display:block;height:100%;background:var(--accent);border-radius:1px}.flyout .f-num{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex-shrink:0}.fly-enter-active{transition:opacity .15s ease,transform .15s ease}.fly-enter-from{opacity:0;transform:translate(-5px)}.fly-leave-active{transition:opacity .1s ease}.fly-leave-to{opacity:0}.stage{margin-left:56px;padding:96px 48px 110px}.pane{max-width:720px;margin:0 auto}.art-enter-active{transition:opacity .22s ease,transform .22s ease}.art-enter-from{opacity:0;transform:translateY(6px)}.art-leave-active{transition:opacity .12s ease}.art-leave-to{opacity:0}.panel-toggle{flex-shrink:0;font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:5px 15px;transition:border-color .15s,color .15s}.panel-toggle:hover{border-color:var(--ink);color:var(--ink)}.panel-toggle.on{background:var(--ink);border-color:var(--ink);color:#fff}.pane h1{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);line-height:1.32;font-weight:700;letter-spacing:.005em}.pane .zh{color:var(--ink-2);margin-top:8px;font-size:14.5px}.pane .rule{margin:26px 0 32px}.pane-foot{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.btn-primary{background:var(--ink);color:#fff;padding:10px 22px;border-radius:999px;font-size:13.5px;transition:opacity .15s}.btn-primary:hover{opacity:.82}.btn-ghost{border:1px solid var(--line);color:var(--ink-2);padding:9px 20px;border-radius:999px;font-size:13.5px;transition:border-color .15s,color .15s}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}.read-done{color:var(--ok);font-size:13px}.pane-empty{padding:80px 0;text-align:center;color:var(--ink-2);font-size:14px}.article-body{font-family:var(--serif);font-size:18.5px;line-height:1.95;color:var(--ink)}.article-body p{margin-bottom:1.5em;text-align:justify}mark.hl{background:var(--hl);color:inherit;padding:0 2px;border-radius:2px;cursor:pointer;font:inherit;transition:background .15s}mark.hl:hover{background:var(--hl-strong)}.drawer-mask{position:fixed;inset:0;z-index:54;background:#1b2a4a38}.drawer{position:fixed;top:60px;right:0;bottom:0;width:380px;z-index:55;background:var(--paper);border-left:1px solid var(--line);overflow-y:auto;padding:18px 22px 44px}.drawer-enter-active,.drawer-leave-active{transition:transform .22s ease}.drawer-enter-from,.drawer-leave-to{transform:translate(100%)}.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.drawer-head .dt{font-size:13px;font-weight:600;letter-spacing:.08em}.drawer-head .close-x{width:26px;height:26px;border-radius:50%;color:var(--ink-3);font-size:13px;display:inline-flex;align-items:center;justify-content:center}.drawer-head .close-x:hover{background:var(--paper-deep);color:var(--ink)}.reader-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.reader-head .inner{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}.reader-head .back{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:4px}.reader-head .back:hover{color:var(--ink)}.reader-head .title{flex:1;text-align:center;min-width:0;font-family:var(--serif);font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reader-head .title .no{color:var(--ink-3);margin-right:8px;font-style:italic}.reader-head .panel-toggle{flex-shrink:0}.fab-group{position:fixed;right:18px;bottom:24px;z-index:40;display:flex;align-items:center;gap:10px}.fab-group .fab{position:static}.fab-zh{height:47px;padding:0 19px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);font-size:14px;font-weight:600;box-shadow:0 4px 14px #0000001f;transition:background .15s,border-color .15s,color .15s,transform .15s}.fab-zh:hover{transform:translateY(-2px);border-color:var(--accent-deep);color:var(--accent-deep)}.fab-zh.on{background:var(--accent);border-color:var(--accent);color:#fff}.fab{position:fixed;right:18px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:7px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:13px 20px;font-size:14px;font-weight:600;box-shadow:0 4px 14px #0000001f;transition:transform .15s,border-color .15s}.fab:hover{transform:translateY(-2px);border-color:var(--accent-deep)}.fab.fab-close{background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 14px #0000001f}.article-body p.zh-target .snt{cursor:pointer;border-radius:4px;transition:background .15s}@media(hover:hover){.article-body p.zh-target .snt:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}}.zh-pop{position:fixed;z-index:58;width:min(520px,calc(100vw - 24px));max-height:min(60vh,420px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px #1b2a4a1a}.zh-pop .para-zh{font-size:13.5px;line-height:1.85;color:var(--ink-2);text-align:justify;padding:10px 14px;margin:0}.zhp-enter-active{transition:opacity .18s ease,transform .18s ease}.zhp-enter-from{opacity:0;transform:translateY(6px)}.zhp-leave-active{transition:opacity .12s ease}.zhp-leave-to{opacity:0}.reader-progress{height:2px;background:var(--paper-deep)}.reader-progress i{display:block;height:100%;background:var(--accent);transition:width .3s}.reader-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:400px minmax(0,1fr);align-items:start}.word-side{position:sticky;top:61px;height:calc(100vh - 61px);overflow-y:auto;border-right:1px solid var(--line);padding:22px 22px 40px}.side-tabs{display:flex;gap:6px;margin-bottom:14px}.side-tabs button{font-size:13px;padding:7px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);transition:border-color .15s,color .15s}.side-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.search-box{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);margin-bottom:10px}.search-box svg{flex-shrink:0;color:var(--ink-3)}.search-box input{border:none;outline:none;background:transparent;width:100%;font-size:14px;color:var(--ink)}.filter-chips{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.filter-chips button{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);transition:border-color .15s}.filter-chips button.on{border-color:var(--ink);color:var(--ink);background:var(--paper-deep)}.word-list{display:flex;flex-direction:column}.word-row{display:flex;flex-direction:column;gap:2px;padding:9px 8px;border-bottom:1px dashed var(--line);border-radius:4px;text-align:left;width:100%;transition:background .2s}.word-row:hover{background:var(--paper-deep)}.word-row.active{background:var(--paper-deep);box-shadow:inset 2px 0 0 var(--accent)}.wr-main{display:flex;align-items:baseline;gap:8px}.word-row .w{font-family:var(--serif);font-weight:700;font-size:15px;flex-shrink:0}.word-row .w-ipa{color:var(--ink-3);font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.word-row .d,.word-row .mem-line{color:var(--ink-2);font-size:12px;line-height:1.55;padding-left:14px}.word-row .mem-line .lb{font-size:10px;letter-spacing:.15em;color:var(--ink-3);margin-right:6px}.word-row .st{flex-shrink:0;display:flex;gap:4px}.st-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:11px;line-height:1;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center}.st-btn.known{background:var(--ok);border-color:var(--ok);color:#fff}.st-btn.fuzzy{background:var(--amber);border-color:var(--amber);color:#fff}.tier-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;align-self:center}.tier-dot.t0{background:var(--accent)}.tier-dot.t1{background:var(--ink-3)}.tier-dot.t2{background:var(--line)}.side-count{color:var(--ink-3);font-size:12px;margin:4px 0 8px}.flash-wrap{margin-top:6px}.flash-progress{font-size:12px;color:var(--ink-2);margin-bottom:10px;display:flex;justify-content:space-between}.flash-card{background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:300px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow);cursor:pointer}.flash-card .fw{font-family:var(--serif);font-size:34px;font-weight:700;display:flex;align-items:center;gap:12px;justify-content:center}.flash-card .speak-inline{font-size:18px;color:var(--ink-2)}.flash-card .ipa{color:var(--ink-2);font-size:14px;margin-top:6px}.flash-card .hint{color:var(--ink-3);font-size:12px;margin-top:26px}.flash-card .back-side{margin-top:18px;font-size:14px;text-align:left}.flash-card .back-side .def{color:var(--ink);line-height:1.7}.flash-card .back-side .mem{margin-top:12px;color:var(--ink-2);font-size:13px;line-height:1.7}.flash-card .back-side .mem b{color:var(--ink)}.flash-actions{display:flex;gap:10px;margin-top:16px}.flash-actions button{flex:1;padding:11px 0;border-radius:10px;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink-2)}.flash-actions .yes{background:var(--ink);border-color:var(--ink);color:#fff}.flash-done{text-align:center;padding:40px 10px;color:var(--ink-2)}.flash-done .big{font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:10px}.article-col{padding:40px 48px 90px;max-width:860px}.article-head{margin-bottom:30px}.article-head .eyebrow{font-size:12px;letter-spacing:.3em;color:var(--ink-3);margin-bottom:10px}.article-head h2{font-family:var(--serif);font-size:clamp(26px,4vw,36px);line-height:1.3}.article-head .zh{color:var(--ink-2);margin-top:8px;font-size:15px}.article-head .meta{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}.article-foot{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}@media(max-width:1023px){.reader-grid{grid-template-columns:1fr}.word-side{position:fixed;inset:56px 0 0;height:auto;border-right:none;z-index:10;background:var(--paper)}.article-col{padding:28px 20px 110px;max-width:none}.reader-grid.show-words .article-col,.reader-grid.show-article .word-side{display:none}.reader-head .inner{padding:10px 14px}.reader-head .title{font-size:14px}.fab-group{right:14px;bottom:20px}.fab{padding:12px 18px}}@media(min-width:1024px){.reader .fab{display:none}}@media(max-width:767px){.topbar{padding:0 14px}.topbar .brand{font-size:13.5px}.topbar .stats{gap:14px;font-size:11px}.topbar .stats b{font-size:12px;margin-left:4px}.rail{width:44px}.rail-item{font-size:10px}.rail-item .rdot{right:6px}.stage{margin-left:44px;padding:84px 20px 100px}.flyout{left:54px;width:min(300px,calc(100vw - 66px))}.drawer{width:100%}}@media(hover:hover)and (pointer:fine){.rail-item{flex:0 0 30px;height:30px;line-height:1;font-size:calc(11px + var(--mag, 0) * 8px);font-weight:calc(400 + var(--mag, 0) * 300);color:color-mix(in srgb,var(--ink) calc(var(--mag, 0) * 100%),var(--ink-3))}}