/* A reading surface beside the original atlas, not a second graph implementation. */
:root { --dictionary-detail-width:clamp(340px,34vw,520px); }
@media(min-width:801px) { [class*='experience-module'][class$='__canvas'][data-shift='true'] { transform:translateX(calc(var(--dictionary-detail-width) / -2)) !important; } }
.dictionary-detail { position:fixed; z-index:20; inset:0 0 0 auto; width:var(--dictionary-detail-width); display:grid; grid-template-rows:auto minmax(0,1fr) auto; color:var(--color-body); background:var(--color-paper); border-left:1px solid var(--color-hairline); font:400 14px/1.8 var(--font-sans); visibility:hidden; opacity:0; pointer-events:none; transform:translateX(100%); transition:transform 200ms var(--ease-out),opacity 140ms ease,visibility 0s 200ms; }
.dictionary-detail[data-open='true'] { visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s; }
.dictionary-detail * { box-sizing:border-box; }
.dictionary-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:28px 28px 20px; }
.dictionary-header h2 { margin:0; padding-top:3px; min-width:0; color:var(--color-ink); font:500 32px/1.25 var(--font-sans); letter-spacing:0; overflow-wrap:anywhere; }
.dictionary-header h2:focus { outline:none; }
.dictionary-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; margin:-3px -10px 0 0; padding:0; border:0; border-radius:50%; color:var(--color-ink-soft); background:transparent; cursor:pointer; }
.dictionary-close svg { width:20px; height:20px; }
.dictionary-reading { min-height:0; padding:0 28px 32px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--color-border-hover) transparent; }
.dictionary-category { display:flex; align-items:baseline; gap:8px; margin:0 0 24px; color:var(--color-ink-soft); font-size:13px; line-height:1.6; }
.dictionary-category::before,.dictionary-directory h4::before { content:''; flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--chapter-color); }
.dictionary-introduction p { margin:0; }
.dictionary-definition { color:var(--color-ink); font-size:16px; line-height:1.8; }
.dictionary-definition-en { margin-top:14px !important; color:var(--color-ink-soft); font-size:14px; line-height:1.75; }
.dictionary-jump { display:flex; flex-wrap:wrap; column-gap:20px; margin-top:24px; padding-block:4px; border-block:1px solid var(--color-hairline); }
.dictionary-jump a { display:inline-flex; align-items:center; min-height:40px; font-size:13px; color:var(--color-ink-soft); text-decoration:none; text-underline-offset:5px; }
.dictionary-section { margin-top:32px; scroll-margin-top:16px; }
.dictionary-section h3 { margin:0 0 16px; color:var(--color-ink); font:500 16px/1.5 var(--font-sans); letter-spacing:0; }
.dictionary-section p { margin:0 0 16px; white-space:pre-line; overflow-wrap:anywhere; }
.dictionary-section p:last-child { margin-bottom:0; }
.dictionary-pair { padding:20px 0; border-top:1px solid var(--color-hairline); }
.dictionary-pair-zh { color:var(--color-ink); font-size:14px; line-height:1.85; }
.dictionary-pair-en { margin-top:12px; color:var(--color-ink-soft); font-size:13px; line-height:1.8; }
.dictionary-pair-zh p,.dictionary-pair-en p { margin:0; }
.dictionary-usage { margin:24px 0 12px; color:var(--color-ink); font:500 14px/1.6 var(--font-sans); }
.dictionary-table { overflow:auto; margin:20px 0; border:1px solid var(--color-hairline-strong); border-radius:8px; }
.dictionary-table table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.6; }
.dictionary-table th,.dictionary-table td { padding:10px 12px; min-width:110px; border-bottom:1px solid var(--color-hairline); text-align:left; vertical-align:top; }
.dictionary-table th { font-weight:500; color:var(--color-ink); background:var(--color-plate); }
.dictionary-table tr:last-child td { border:0; }
.dictionary-related { margin-top:24px; border-top:1px solid var(--color-hairline); }
.dictionary-related-summary { display:flex; align-items:center; gap:8px; min-height:48px; color:var(--color-ink); font:500 14px/1.6 var(--font-sans); cursor:pointer; list-style:none; }
.dictionary-related-summary::-webkit-details-marker { display:none; }
.dictionary-related-count { color:var(--color-ink-soft); font:400 12px/1.6 var(--font-sans); }
.dictionary-related-summary::after { content:''; width:7px; height:7px; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform 150ms ease; }
.dictionary-related[open] .dictionary-related-summary::after { transform:rotate(225deg); }
.dictionary-related-content { padding:0 0 12px; }
.dictionary-directory { margin-top:12px; }
.dictionary-directory h4 { display:flex; align-items:center; gap:8px; margin:0 0 4px; color:var(--color-ink-soft); font:400 12px/1.6 var(--font-sans); }
.dictionary-directory ul { display:flex; flex-wrap:wrap; gap:0 12px; padding:0; margin:0; list-style:none; }
.dictionary-term { display:inline-flex; align-items:center; min-height:32px; color:var(--color-ink); font:500 13px/1.5 var(--font-sans); text-decoration:none; text-underline-offset:4px; overflow-wrap:anywhere; }
.dictionary-pagination { display:flex; border-top:1px solid var(--color-hairline); padding:12px 18px max(12px,env(safe-area-inset-bottom)); gap:12px; background:var(--color-paper); }
.dictionary-neighbor { display:flex; flex:1; align-items:center; justify-content:flex-start; gap:8px; min-width:0; min-height:52px; padding:6px 10px; border:0; border-radius:8px; color:var(--color-ink); background:transparent; text-decoration:none; text-align:left; cursor:pointer; }
.dictionary-neighbor svg { flex:none; width:18px; height:18px; }
.dictionary-neighbor > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dictionary-neighbor-label { font:400 12px/1.6 var(--font-sans); color:var(--color-ink-soft); }
.dictionary-neighbor-name { font:500 13px/1.5 var(--font-sans); overflow-wrap:anywhere; }
.dictionary-neighbor[data-direction='next'] { flex-direction:row-reverse; text-align:right; }
.dictionary-neighbor:disabled { opacity:.4; cursor:default; }
.dictionary-detail a:focus-visible,.dictionary-detail button:focus-visible,.dictionary-related-summary:focus-visible { outline:2px solid var(--color-ink); outline-offset:3px; }
.dictionary-close,.dictionary-neighbor { transition:background-color 150ms ease,color 150ms ease; }
@media(hover:hover) and (pointer:fine) { .dictionary-close:hover,.dictionary-neighbor:hover:not(:disabled) { background:var(--color-plate); color:var(--color-ink); } .dictionary-term:hover,.dictionary-jump a:hover { text-decoration:underline; color:var(--color-ink); } }
@media(max-width:800px) { .dictionary-detail { inset:auto 0 0; width:100%; height:68dvh; border:0; border-top:1px solid var(--color-hairline-strong); border-radius:16px 16px 0 0; transform:translateY(100%); } .dictionary-detail[data-open='true'] { transform:none; } .dictionary-header { padding:20px 24px 16px; } .dictionary-header h2 { font-size:26px; } .dictionary-reading { padding:0 24px 28px; } [class*='experience-module'][class$='__canvas'][data-shift='true'] { transform:translateY(-34dvh) !important; } }
@media(prefers-reduced-motion:reduce) { .dictionary-detail,.dictionary-close,.dictionary-neighbor,.dictionary-related-summary::after { transition:none; } }
html[data-input='keyboard'] .dictionary-detail { transition:none; }