:root { --ink:#19334a; --action:#0b7278; --teal:#19a7ae; --paper:#f6f8f7; --muted:#526775; --line:#dce6e5; }
body { color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--action); text-underline-offset:4px; }
a:hover { color:var(--ink); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--action)!important; outline-offset:4px; box-shadow:none!important; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px 20px; background:white; border:2px solid var(--action); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.container { max-width:1180px; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-link { display:flex; align-items:center; width:220px; height:64px; flex-shrink:0; }
.brand-link img { width:100%; height:auto; }
.site-header nav { display:flex; flex-wrap:wrap; gap:26px; align-items:center; font-size:.925rem; font-weight:550; }
.site-header nav a { color:var(--muted); text-decoration:none; padding:8px 0; }
.site-header nav a[aria-current],.site-header nav a:hover { color:var(--action); }
.site-header nav a.nav-install { color:var(--action); border:1px solid var(--line); border-radius:12px; padding:8px 16px; }
.site-header nav a[hidden] { display:none; }
@media (display-mode: standalone) { .nav-install, .install-promotion { display:none!important; } }
.language-selector { display:flex; align-items:center; gap:6px; margin:0; flex-shrink:0; }
.language-control { position:relative; display:block; margin:0; color:var(--action); }
.language-globe { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; }
.language-control::after { content:""; position:absolute; right:15px; top:calc(50% - 4px); width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none; }
.language-control select { appearance:none; -webkit-appearance:none; width:162px; min-height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); padding:9px 34px 9px 40px; font:550 .875rem/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; cursor:pointer; transition:border-color .15s ease,background-color .15s ease; }
.language-control select:hover { border-color:#8dbabb; background:#f4f9f8; }
.language-control select option { color:var(--ink); background:#fff; }
.language-apply { min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:12px; color:var(--action); background:#fff; }
@media (max-width:991px) {
 .header-inner { flex-wrap:wrap; column-gap:12px; row-gap:0; padding-bottom:12px; }
 .site-header nav { order:3; width:100%; justify-content:center; column-gap:24px; row-gap:0; }
 .language-selector { margin-left:auto; }
}
.main-content { padding-bottom:64px; min-height:65vh; }
.hero { display:flex; align-items:center; gap:60px; padding:68px 0 46px; }
.hero.hero-install { display:block; }
.hero-copy { flex:1; min-width:0; }
.eyebrow { font-size:.75rem; color:var(--action); text-transform:uppercase; letter-spacing:.13em; font-weight:650; }
h1 { font-size:clamp(2.15rem,4.5vw,3.6rem); letter-spacing:-.045em; line-height:1.13; font-weight:650; margin:18px 0 22px; overflow-wrap:anywhere; }
.hero p { color:var(--muted); max-width:660px; font-size:1.0625rem; line-height:1.8; }
.hero.compact { padding-top:48px; }
.hero.compact h1 { font-size:clamp(2rem,3.7vw,3rem); }
.hero-art { width:300px; min-width:220px; text-align:center; border-radius:32px; background:#ebf4f2; border:1px solid #deece8; padding:18px 24px 24px; }
.hero-art img { width:192px; height:192px; object-fit:contain; }
.hero-tag { display:block; font-size:.875rem; color:var(--action); }
h2 { font-size:1.4rem; font-weight:650; letter-spacing:-.02em; margin-bottom:18px; }
h3 { font-size:1.05rem; font-weight:650; line-height:1.4; }
.muted { color:var(--muted); }
.btn { border-radius:12px; padding:11px 20px; font-weight:600; }
.btn-primary { --bs-btn-bg:var(--action); --bs-btn-border-color:var(--action); --bs-btn-hover-bg:var(--ink); --bs-btn-hover-border-color:var(--ink); --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink); }
.btn-outline-primary { --bs-btn-color:var(--action); --bs-btn-border-color:var(--action); --bs-btn-hover-bg:var(--action); --bs-btn-hover-border-color:var(--action); --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink); }
.btn-sm { padding:8px 12px; }
.search-surface { border:1px solid var(--line); border-radius:20px; background:#fff; padding:22px 26px; }
.search-row { display:flex; gap:16px; }
.search-input { flex:1; position:relative; min-width:0; }
.search-input .form-control { min-height:52px; font-size:1.05rem; border-color:var(--line); padding-left:43px; border-radius:12px; }
.search-icon { font-size:2rem; position:absolute; top:0px; left:14px; color:var(--muted); line-height:48px; pointer-events:none; }
.filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:18px 30px; margin-top:20px; font-size:.875rem; }
.medium-filter { display:flex; align-items:center; gap:12px; }
.form-select { font-size:.875rem; border-color:var(--line); border-radius:9px; min-height:42px; padding-right:16px; background-image:none; appearance:auto; }
.form-control:focus,.form-select:focus { border-color:var(--action); box-shadow:0 0 0 .2rem #0b727820; }
.reader-surface { max-width:680px; }
.reader-code { text-transform:uppercase; max-width:240px; letter-spacing:.25em; font-size:1.35rem; }
.reader-otp { display:flex; gap:clamp(.4rem,2vw,.75rem); margin-bottom:1rem; max-width:100%; }
.reader-otp-cell { flex:0 0 auto; width:clamp(2.65rem,10vw,3.5rem); height:4rem; padding:0; text-align:center; text-transform:uppercase; font-size:1.65rem; font-weight:600; font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:12px; background:#fff; caret-color:var(--action); }
.reader-otp-cell.is-filled { border-color:#8caeb0; background:#f2f8f7; }
.reader-otp-cell:focus { border-color:var(--action); background:#fff; }
.form-check { margin:0; display:flex; align-items:center; gap:8px; padding:0; }
.form-check .form-check-input { margin:0; float:none; appearance:auto; accent-color:var(--action); width:18px; height:18px; background-image:none!important; background-color:transparent!important; border:0; }
.form-check-label { padding:10px 0; }
.reset-search { margin-left:auto; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.section-heading h2 { margin:0; }
.book-card { background:white; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.book-art { position:relative; min-height:222px; display:grid; place-items:center; padding:22px; background:#ebf0ee; color:#849b94; text-decoration:none; }
.col-sm-6:nth-child(4n+2) .book-art { background:#edf0f4; color:#8194a7; }
.col-sm-6:nth-child(4n+3) .book-art { background:#f3efe8; color:#a59881; }
.col-sm-6:nth-child(4n+4) .book-art { background:#edf2ed; color:#879887; }
.book-symbol { font-size:4rem; line-height:1; font-weight:300; opacity:.65; }
.book-art .book-cover { max-height:190px; max-width:82%; object-fit:contain; position:absolute; inset:0; margin:auto; width:auto; height:auto; }
.book-info { padding:20px; display:flex; flex-direction:column; flex:1; gap:8px; }
.medium-tag { font-size:.6875rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.book-card h3 { margin:0; font-size:1.04rem; }
.book-card h3 a { color:var(--ink); text-decoration:none; }
.book-card h3 a:hover { color:var(--action); text-decoration:underline; }
.book-author,.book-edition { color:var(--muted); font-size:.8125rem; margin:0; overflow-wrap:anywhere; }
.book-library { font-size:.8125rem; margin-top:auto; padding-top:8px; }
.availability { display:inline-flex; gap:7px; align-items:center; color:var(--muted); font-size:.75rem; line-height:1.5; margin-top:4px; }
.availability::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#8b9da6; }
.availability.is-available { color:#276644; }
.availability.is-available::before { background:#378054; }
.surface { background:white; border:1px solid var(--line); border-radius:18px; padding:28px; }
.surface p { color:var(--muted); }
.empty-state { padding:64px 20px; text-align:center; border:1px dashed var(--line); border-radius:18px; margin-top:20px; }
.empty-state h3 { margin-top:18px; }
.empty-state p { color:var(--muted); }
.pagination-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px; margin-top:34px; }
.library-card { display:flex; flex-direction:column; text-decoration:none; }
.library-card h3 { color:var(--ink); margin:14px 0; font-size:1.2rem; }
.library-card p { font-size:.9rem; }
.card-link { padding-top:22px; margin-top:auto; font-size:.875rem; font-weight:600; }
.library-profile { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.bibliography { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,2fr); gap:8px 20px; margin:26px 0 0; font-size:.875rem; }
.bibliography dt { font-weight:500; color:var(--muted); }
.bibliography dd { margin:0; overflow-wrap:anywhere; }
.library-profile .bibliography { margin:18px 0; }
.preserve-lines { white-space:pre-line; overflow-wrap:anywhere; }
.reader-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.35rem; margin-left:.35rem; padding:0 .35rem; border-radius:999px; background:#a63231; color:#fff; font-size:.72rem; font-weight:700; line-height:1; vertical-align:middle; }
.reader-count[hidden] { display:none; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; font-size:.875rem; padding:30px 0; }
.detail-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:60px; align-items:start; }
.detail-art { min-height:340px; border:1px solid var(--line); border-radius:20px; position:relative; background:#e8efeb; display:grid; place-items:center; padding:28px; }
.detail-art img { width:auto; height:auto; max-width:88%; max-height:310px; position:absolute; inset:0; margin:auto; object-fit:contain; }
.detail-main h1 { font-size:clamp(2rem,3.5vw,3rem); margin-bottom:12px; }
.subtitle { font-size:1.2rem; color:var(--muted); }
.authors { margin-bottom:24px; font-size:1.0625rem; }
.library-line { display:flex; flex-direction:column; gap:2px; font-size:.875rem; margin-bottom:26px; }
.library-line span { color:var(--muted); }
.notice { background:#eaf3f1; border:1px solid #d7e8e3; border-radius:14px; padding:20px; font-size:.875rem; }
.notice p { color:var(--muted); margin-top:8px; }
.copy-table { margin-bottom:14px; font-size:.875rem; --bs-table-color:var(--ink); --bs-table-border-color:var(--line); }
.copy-table th { font-weight:550; color:var(--muted); }
.copy-table td { padding-block:14px; vertical-align:middle; max-width:400px; overflow-wrap:anywhere; }
.alternative { display:flex; flex-direction:column; gap:12px; text-decoration:none; }
.topics { display:flex; flex-wrap:wrap; gap:10px; }
.topics a { display:inline-block; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; font-size:.8125rem; text-decoration:none; overflow-wrap:anywhere; max-width:100%; }
.app-callout { background:#eaf3f1; border:1px solid #d7e8e3; border-radius:24px; display:flex; align-items:center; gap:28px; padding:30px 40px; }
.app-callout img { width:90px; height:90px; object-fit:contain; }
.app-callout p { color:var(--muted); margin-bottom:20px; }
.ecosystem { background:#fff; border-block:1px solid var(--line); padding:26px 0 40px; }
.ecosystem a,.ecosystem-item { display:flex; flex-direction:column; gap:6px; color:var(--muted); text-decoration:none; font-size:.875rem; }
.ecosystem strong { color:var(--ink); font-size:1.125rem; }
.store-links { display:flex; flex-wrap:wrap; gap:12px; }
.ecosystem .store-links a { display:inline-block; color:var(--action); padding:8px 0; font-weight:600; text-decoration:underline; }
.site-footer { background:#fff; padding:28px 0; font-size:.8125rem; color:var(--muted); }
.footer-inner { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.footer-inner small { margin-left:auto; }
.reader-surface h2,.reader-account-email { overflow-wrap:anywhere; }
.footer-brand { font-weight:650; color:var(--ink); font-size:1.05rem; text-decoration:none; }
.instruction-list { color:var(--muted); padding-left:22px; }
.instruction-list li { padding-left:6px; margin:14px 0; }
.error-state { flex-direction:column; align-items:flex-start; min-height:55vh; gap:0; }
@media (max-width:767px) {
 .header-inner { min-height:80px; gap:10px; flex-wrap:wrap; padding-bottom:14px; }
 .brand-link { width:160px; height:62px; }
 .language-control select { width:136px; padding-left:32px; padding-right:26px; font-size:.8125rem; }
 .language-globe { left:10px; width:16px; height:16px; }
 .language-control::after { right:11px; }
 .site-header nav { width:100%; column-gap:18px; row-gap:0; font-size:.875rem; justify-content:center; }
 .site-header nav a.nav-install { padding:7px 14px; }
 .main-content { padding-bottom:40px; }
 .hero { padding:36px 0 28px; gap:20px; }
 .hero-art { display:none; }
 .hero p { font-size:1rem; }
 .hero.compact { padding-top:34px; }
 .search-surface { padding:18px; }
 .search-row { flex-wrap:wrap; gap:12px; }
 .search-input { flex-basis:100%; }
 .search-row>.btn { width:100%; }
 .filter-row { gap:12px; }
 .medium-filter { width:100%; }
 .medium-filter select { flex:1; }
 .reset-search { margin-left:0; }
 .surface { padding:22px; }
 .library-profile { grid-template-columns:1fr; gap:26px; }
 .detail-grid { grid-template-columns:1fr; gap:30px; }
 .detail-art { max-width:250px; width:100%; margin-inline:auto; min-height:310px; }
 .detail-art img { max-height:280px; }
 .detail-main h1 { font-size:2.1rem; }
 .book-art { min-height:220px; }
 .app-callout { padding:24px; gap:18px; }
 .app-callout img { width:56px; height:56px; }
 .app-callout h2 { font-size:1.25rem; }
 .footer-inner small { margin-left:0; }
}
@media (max-width:359px) {
 .brand-link { width:146px; }
 .header-inner { column-gap:8px; }
}
.reader-message-body { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.reader-installed-only { display:none!important; }
.reader-installed .reader-installed-only { display:block!important; }
.reader-installed a.reader-installed-only { display:inline-block!important; }
.reader-installed .reader-browser-only { display:none!important; }
@media (display-mode:standalone) {
 .reader-installed-only { display:block!important; }
 a.reader-installed-only { display:inline-block!important; }
 .reader-browser-only { display:none!important; }
}
.reader-card-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px; align-items:start; max-width:960px; margin-inline:auto; }
.reader-pass { border:1px solid #d3e0e2; border-radius:22px; background:linear-gradient(145deg,#fff 65%,#edf8f7); padding:24px; box-shadow:0 16px 36px #19334a0b; overflow:hidden; }
.reader-pass-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-bottom:1px solid #dce7e9; padding-bottom:12px; }
.reader-pass-top img { width:126px; height:auto; }
.reader-pass-top span { font-size:.65rem; letter-spacing:.12em; color:#546873; font-weight:700; }
.reader-pass-library { color:#546873; margin-top:16px; overflow-wrap:anywhere; }
.reader-pass-name { font-size:1.45rem; line-height:1.25; margin:8px 0 16px; overflow-wrap:anywhere; }
.reader-pass-fields { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:12px; }
.reader-pass-fields dt { font-size:.75rem; font-weight:400; color:#546873; margin-bottom:4px; }
.reader-pass-fields dd { font-weight:650; font-size:1rem; margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.card-state { display:inline-flex; padding:6px 11px; border-radius:8px; font-size:.8rem; font-weight:600; }
.card-state-active { color:#155447; background:#e1f2eb; }
.card-state-inactive { color:#7b3826; background:#fcece7; }
.reader-pass-code { text-align:center; border-top:1px solid #dce7e9; margin-top:4px; padding-top:12px; }
.reader-card-qr { display:block; width:100%; max-width:280px; height:auto; margin:0 auto 8px; }
[data-card-qr]:not(.reader-card-qr-live) { display:none; }
.reader-pass-help p { overflow-wrap:anywhere; }
.reader-device-icon { flex:none; border-radius:16px; }
.reader-device-label { overflow-wrap:anywhere; min-width:0; }
.reader-push-panel { max-width:850px; }
.reader-push-panel .btn-primary { --bs-btn-disabled-bg:var(--line); --bs-btn-disabled-border-color:var(--line); --bs-btn-disabled-color:var(--muted); --bs-btn-disabled-opacity:1; }
.reader-device-state.text-bg-primary { background-color:var(--action)!important; }
@media (max-width:767px) { .reader-card-layout { grid-template-columns:minmax(0,1fr); } .reader-pass { padding:22px; } }
@media print { [data-card-qr] { display:none!important; } }
@media (prefers-reduced-motion:no-preference) {
 .hero,.detail-grid { animation:eb-enter .25s ease-out both; }
 .book-card,.library-card,.alternative { transition:transform .16s ease,border-color .16s ease; }
 .book-card:hover,.library-card:hover,.alternative:hover { transform:translateY(-3px); border-color:#9fbbb3; }
 @keyframes eb-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
}