@font-face{font-family:"ListeningKey Chinese";src:url("/fonts/noto-sans-sc-light-182a37da8dee.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#211c15;--fg:#e5d5bc;--surface:#16120d;--surface2:#372d22;--border:#a58c68;--fgstrong:#fff0d6;--danger:#ffb5a7;--muted:var(--fg);--elevated:var(--surface);--hover:#373129;--active:var(--hover);--selected:#2d2821;--primary:var(--surface);--primary-hover:var(--hover);--on-primary:var(--fg);--featured-action:var(--fgstrong);--on-featured-action:var(--surface);--featured-hover:var(--fg);--disabled:var(--surface2);--disabled-text:var(--fg);--focus:var(--border);--selection:var(--fgstrong);--selection-text:var(--surface);--marker:var(--fgstrong);--display-font:inherit;--font-family:"Noto Sans SC",monospace,sans-serif;font:24px/1.5 var(--font-family)}
body{background:var(--bg);color:var(--fg);margin:0}
button,a,select,input{background:var(--surface);color:var(--fg);border:0;border-radius:0;text-decoration:none}
button,a,select{cursor:pointer}
input,textarea{cursor:text}
button[aria-pressed=true],button[aria-expanded=true],a[aria-expanded=true]{background:var(--selected);color:var(--selected-text,var(--fgstrong))}
@media(hover:hover) and (pointer:fine){button:enabled:hover,a[href]:hover,select:enabled:hover,input:enabled:hover{background:var(--hover);color:var(--fgstrong)}}
button:enabled:active{background:var(--active);color:var(--selected-text,var(--fgstrong))}
main p a{white-space:normal}
button:disabled,select:disabled,input:disabled{background:var(--disabled);color:var(--disabled-text);cursor:default}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--selection);color:var(--selection-text)}
h1,h2,h3,.wordmark{font-family:var(--display-font);font-synthesis:none}
#navigation{max-height:60dvh;overflow-y:auto}
#app .archive-entry{display:flex;flex-direction:column;align-items:start;text-align:start;white-space:normal;min-width:0}
.archive-entry span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.archive-entry small{color:var(--muted);font-size:.7em}
#passage{white-space:pre-wrap;line-height:1.9;min-height:var(--wl-row);padding:calc(2 * var(--wl-gap));background:var(--reading-surface,var(--surface));color:var(--fgstrong);overflow-wrap:anywhere}
#passage:lang(zh){font-family:"ListeningKey Chinese","Noto Sans SC",sans-serif;font-weight:300}
#listen{white-space:pre-line}
#listen .remaining-time{display:block}
#listen .remaining-time[hidden]{display:none}
#status,[role=status]{min-height:1lh}
#status.error{color:var(--danger)}
.result{white-space:pre-wrap;border-top:1px solid var(--border);padding-block:var(--wl-gap)}
.translation-result{white-space:pre-wrap;padding-block:var(--wl-gap)}
.dictionary-entry{white-space:pre-wrap;padding-block:var(--wl-gap,.25em)}
.dictionary-entry + .dictionary-entry{border-top:1px solid var(--border)}
#dictionary-popup{position:fixed;z-index:3;width:max-content;max-width:min(24rem,calc(100vw - 1rem));max-height:min(22rem,calc(100dvh - 1rem));overflow:auto;padding:.5rem;background:var(--elevated);color:var(--fgstrong);border:1px solid var(--border);font-family:var(--font-family);font-size:18px;line-height:1.4;overflow-wrap:anywhere}
#dictionary-popup .dictionary-entry{padding-block:.35rem}
#dictionary-popup .dictionary-entry:first-child{padding-top:0}
#dictionary-popup .dictionary-entry:last-child{padding-bottom:0}
#dictionary-popup .gloss{display:block;color:var(--muted)}
#reading-marker{position:absolute;top:0;left:0;border-radius:1px;background:var(--marker);pointer-events:none;z-index:1;will-change:transform}
.page{box-sizing:border-box;max-width:64rem;margin-block:0;margin-inline:auto;padding:var(--wl-gap)}
#app{overflow-anchor:none}
#app>.wl-layout,#app .playback-slot{overflow:visible}
:root{--wl-gap:4px;--wl-row:calc(1em + 4 * var(--wl-gap))}
.page :is(button,select,input){font:inherit;line-height:1.2;padding:var(--wl-gap) calc(2 * var(--wl-gap))}
.page :is(.wl-body,.wl-group)>a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--wl-row);padding:var(--wl-gap) calc(2 * var(--wl-gap))}
.page :is(h1,h2,h3,p,section){margin:0}
.page textarea{width:100%;min-height:var(--wl-row);font:inherit;resize:vertical}
.page select{text-overflow:ellipsis}
.playback-slot{align-self:start}
.playback-slot[data-active]{position:sticky;bottom:calc(var(--wl-gap) + env(safe-area-inset-bottom));z-index:2}
.playback-slot>.wl-body{background:var(--bg)}