[hidden]{display:none!important}
:root{
  --bg:#f7f3ea;--fg:#1d1d1f;--muted:#6b6b6b;--accent:#1e3a5f;--accent-fg:#fff;--card:#fffdf8;--line:#ddd5c4;--hl:#f3dc8b;
  --font:20px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111418;--fg:#e8e6e1;--muted:#9a9a9a;--accent:#2d5487;--card:#1a1f25;--line:#2c333b;--hl:#5a4a12}}
:root[data-theme=dark]{--bg:#111418;--fg:#e8e6e1;--muted:#9a9a9a;--accent:#2d5487;--card:#1a1f25;--line:#2c333b;--hl:#5a4a12}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
#app{display:flex;flex-direction:column;height:100dvh;height:100vh;height:100dvh}
.top{container-type:inline-size;display:flex;align-items:center;gap:.5rem;padding:calc(var(--safe-t) + .4rem) .75rem .4rem;background:var(--accent);color:var(--accent-fg)}
.top h1{flex:1;min-width:0;margin:0;font-size:clamp(1rem,3.2cqi,1.35rem);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:.3rem}
.tools button{background:rgba(255,255,255,.14);border:0;border-radius:.6rem;color:#fff;min-width:2.6rem;height:2.4rem;padding:0 .5rem;font-size:clamp(.9rem,2.6cqi,1.1rem)}
.panel{padding:.75rem;background:var(--card);border-bottom:1px solid var(--line)}
.panel label{display:flex;align-items:center;gap:.6rem;margin:.3rem 0;flex-wrap:wrap}
.panel input[type=range]{flex:1;min-width:8rem}
.small{font-size:.8rem;color:var(--muted);margin:.4rem 0 0}
.search form{display:flex;gap:.5rem}
.search input{flex:1;min-width:0;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.6rem;background:var(--bg)}
.search form button{padding:0 .9rem;border:0;border-radius:.6rem;background:var(--accent);color:#fff}
#results{max-height:45dvh;overflow:auto;margin-top:.5rem;font-size:calc(var(--font)*.8)}
#results .meta{color:var(--muted);font-size:.85em;margin:.3rem 0}
#results a{display:block;padding:.5rem .3rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
#results a b{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #results a b{color:#8fb4e8}}
:root[data-theme=dark] #results a b{color:#8fb4e8}
mark{background:var(--hl);color:inherit;border-radius:2px}
main{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:1rem clamp(.9rem,5vw,3rem) 2rem;font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:var(--font);line-height:1.65}
main h2{font-family:-apple-system,system-ui,sans-serif;font-size:1.15em;margin:.2em 0 .8em;color:var(--muted);font-weight:600}
.v{margin:0 0 .45em;padding:.1em .25em;border-radius:.3em;scroll-margin-top:1rem}
.v sup{font-family:-apple-system,system-ui,sans-serif;font-size:.62em;color:var(--muted);font-weight:700;margin-right:.3em}
.v.hit{background:var(--hl);transition:background 1.5s}
.loading{color:var(--muted)}
/* Bottom menu: sized from its own container width (follows split view / slide over / rotation) */
.bottom{container-type:inline-size;container-name:bottom;position:relative;background:var(--card);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.bar{display:flex;gap:1.5cqi;padding:1.5cqi 2cqi;align-items:stretch}
.bar .sel{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;
  border:1px solid var(--line);background:var(--bg);border-radius:clamp(.4rem,1.8cqi,.9rem);
  padding:clamp(.25rem,1.4cqi,.7rem) clamp(.2rem,1cqi,.6rem);font-size:clamp(.78rem,3.6cqi,1.6rem);min-height:clamp(2.6rem,9cqi,4.6rem)}
.bar .sel:first-of-type{flex-grow:2}
.bar .sel small{font-size:.62em;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bar .sel span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.bar .nav{flex:0 0 auto;width:clamp(2.2rem,9cqi,4rem);border:0;border-radius:clamp(.4rem,1.8cqi,.9rem);background:var(--accent);color:#fff;font-size:clamp(1.2rem,5cqi,2rem)}
.sheet{border-bottom:1px solid var(--line);display:flex;flex-direction:column;max-height:min(60dvh,60vh)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:clamp(.4rem,2cqi,.8rem) 3cqi;font-weight:600;font-size:clamp(.9rem,3.4cqi,1.25rem)}
.sheet-head button{border:0;background:transparent;font-size:1.2em;padding:.2em .5em}
.sheet-body{overflow:auto;padding:0 2cqi 2cqi;display:grid;gap:clamp(.25rem,1.2cqi,.6rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(2.5rem,11cqi,4.6rem),1fr))}
.sheet-body.books{grid-template-columns:repeat(auto-fill,minmax(clamp(8rem,30cqi,13rem),1fr))}
.sheet-body button{border:1px solid var(--line);background:var(--bg);border-radius:clamp(.35rem,1.4cqi,.7rem);
  padding:clamp(.35rem,1.6cqi,.8rem) .2rem;font-size:clamp(.85rem,3.4cqi,1.25rem);min-height:clamp(2.4rem,9cqi,3.8rem)}
.sheet-body.books button{text-align:left;padding-left:.7em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-body button.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.sheet-body .grp{grid-column:1/-1;font-size:clamp(.72rem,2.6cqi,.95rem);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.4rem}
@container bottom (max-width:360px){.bar .sel small{display:none}}

.trans{display:flex;border-radius:.6rem;overflow:hidden;background:rgba(255,255,255,.14);flex:0 0 auto}
.trans .tr{border:0;background:transparent;color:#fff;height:2.4rem;padding:0 clamp(.45rem,1.6cqi,.8rem);font-size:clamp(.8rem,2.4cqi,1rem);font-weight:600;opacity:.75}
.trans .tr.on{background:#fff;color:var(--accent);opacity:1}
/* parallel view: stacked on narrow, side-by-side when wide */
main{container-type:inline-size}
.pv{margin:0 0 .6em;scroll-margin-top:1rem;border-radius:.3em}
.pv .v{margin:0}
.pv .v.k{color:var(--muted);font-size:.92em}
.pv.hit{background:var(--hl);transition:background 1.5s}
.ph{display:none}
@container (min-width:640px){
  .pv{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
  .pv .v.k{color:inherit;font-size:1em}
  .ph{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;font-family:-apple-system,system-ui,sans-serif;font-size:.7em;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4em}
}
@container (max-width:639px){ .pv .v.k{padding-top:.15em} }
.top{flex-wrap:nowrap}
@container (max-width:420px){ .top h1{font-size:.95rem} .tools button{min-width:2.1rem;padding:0 .3rem} .trans .tr{padding:0 .35rem} }