/* Leser — "Reclam yellow". Fontovi su lokalni (OFL): Literata + Bricolage Grotesque. */
@font-face{font-family:Literata;font-style:normal;font-weight:200 900;font-display:swap;src:url('fonts/literata-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;font-style:normal;font-weight:200 900;font-display:swap;src:url('fonts/literata-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Literata;font-style:italic;font-weight:200 900;font-display:swap;src:url('fonts/literata-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;font-style:italic;font-weight:200 900;font-display:swap;src:url('fonts/literata-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Bricolage;font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/bricolage-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bricolage;font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/bricolage-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light dark;
  --paper:#FFFFFF; --ink:#16140F; --muted:#6E695F; --faint:#A39E93;
  --line:#EEEBE4; --soft:#F3F1EB; --track:#E2DED4;
  --yellow:#FEC300; --on-yellow:#16140F; --yellow-soft:#FFF1BC;
  --blue:#2B4BD6; --blue-soft:#E8EDFF;
  --translation:#A9A49B;
  --press:#16140F; --on-press:#FFFFFF;
  --size:1;
  --gutter:max(20px,env(safe-area-inset-left),env(safe-area-inset-right));
  --serif:Literata,Charter,"Iowan Old Style","Noto Serif",Georgia,serif;
  --sans:Bricolage,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#12110E; --ink:#F3EFE6; --muted:#A39D92; --faint:#6F6A61;
  --line:#25231F; --soft:#1F1D19; --track:#34312B;
  --yellow-soft:#3A2F07; --blue:#A9B8FF; --blue-soft:#1C2550;
  --translation:#5E5A54;
  --press:#F3EFE6; --on-press:#12110E;
}}

*{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{opacity:.3;cursor:default}
button:focus-visible,a:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:12px}
[hidden]{display:none!important}
img{display:block}
::selection{background:color-mix(in srgb,var(--yellow) 55%,transparent)}
.shell{width:100%;max-width:640px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.nowrap{white-space:nowrap}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:16px;margin:0}

/* Ulazna animacija — kratka, samo jednom, isključena kod "reduce motion" */
.rise{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}


.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--on-yellow);color:#fff;font:600 12px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;width:fit-content}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex-shrink:0}

/* "Knjižica" serije */
.booklet{position:relative;display:block;width:48px;height:64px;border-radius:6px;background:var(--yellow);overflow:hidden;flex-shrink:0;transform:rotate(-4deg);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.booklet::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:rgba(0,0,0,.10)}
.booklet img{width:100%;height:100%;object-fit:cover}

/* ───────────── Biblioteka ───────────── */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:calc(env(safe-area-inset-top) + 18px)}
.wordmark{display:flex;align-items:baseline;gap:2px;font:800 28px/34px var(--serif);letter-spacing:-.035em}
.wordmark i{width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.tally{display:flex;align-items:center;gap:8px;padding:6px 13px 6px 6px;border-radius:999px;background:var(--soft);font:500 14px/18px var(--sans);color:var(--muted)}
.tally b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tally svg{transform:rotate(-90deg)}
.tally circle{fill:none;stroke-width:3}
.tally-track{stroke:var(--track)}
.tally-fill{stroke:var(--ink);stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}

.hello{padding:36px 0 26px}
.hello .eyebrow{margin-bottom:12px}
.hello h1{font:800 clamp(38px,11.4vw,50px)/1.05 var(--serif);letter-spacing:-.035em;margin:0}
.hello h1 em{font-style:normal;color:var(--yellow)}
.hello h1 i{font-weight:400}

.feature{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:236px;padding:20px;border-radius:28px;background:var(--yellow);color:var(--on-yellow);overflow:hidden;isolation:isolate;transition:transform .15s var(--ease)}
.feature:active{transform:scale(.985)}
.feature-art{position:absolute;z-index:-1;right:-12px;top:0;height:calc(100% + 16px);width:auto;aspect-ratio:2/3;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent,#000 32%);mask-image:linear-gradient(to right,transparent,#000 32%)}
.feature-top{display:flex;flex-direction:column;gap:10px;max-width:60%}
.feature h2{font:700 27px/30px var(--serif);letter-spacing:-.025em;margin:0;overflow-wrap:break-word}
.feature-top p{font:500 14px/18px var(--sans);margin:0;opacity:.75}
.feature-bottom{display:flex;align-items:center;gap:14px}
.feature-progress{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.feature-progress span{font:600 13px/16px var(--sans)}
.bar{height:6px;border-radius:999px;background:rgba(22,20,15,.14);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--on-yellow);transition:width .8s var(--ease)}
.go{width:56px;height:56px;border-radius:50%;background:var(--on-yellow);color:var(--yellow);display:grid;place-items:center;flex-shrink:0}

.library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:40px 0 16px}
.library-head h2{font:800 28px/32px var(--serif);letter-spacing:-.03em;margin:0}
.library-head span{font:500 14px/20px var(--sans);color:var(--muted)}
.filters{display:flex;gap:8px;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:none;scroll-snap-type:x proximity}
.filters::-webkit-scrollbar{display:none}
.filters button{flex-shrink:0;height:42px;padding:0 18px;border-radius:999px;border:1.5px solid var(--track);font:500 15px/20px var(--sans);white-space:nowrap;scroll-snap-align:start;transition:background-color .15s,color .15s,border-color .15s}
.filters .selected{background:var(--press);border-color:var(--press);color:var(--on-press);font-weight:600}

.series{padding-top:28px}
.series-head{display:flex;align-items:center;gap:14px;padding-bottom:8px}
.series:nth-of-type(even) .booklet{transform:rotate(3deg)}
.series-title{flex:1;min-width:0}
.series-title h3{font:800 22px/28px var(--serif);letter-spacing:-.025em;margin:0}
.series-title p{font:500 14px/18px var(--sans);color:var(--muted);margin:2px 0 0}
.series-count{font:600 14px/18px var(--sans);color:var(--faint);font-variant-numeric:tabular-nums}
.series-count.has-read{color:var(--ink)}

.text-row{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 0;border-bottom:1px solid var(--line);transition:opacity .15s}
.text-row:last-child{border-bottom:0}
.text-row:active{opacity:.6}
.row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-body strong{font:600 18px/24px var(--serif);letter-spacing:-.01em;overflow-wrap:break-word}
.row-sub{font:400 14px/18px var(--sans);color:var(--muted)}
.row-status{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;color:var(--faint)}
.row-status .done{width:28px;height:28px;border-radius:50%;background:var(--press);color:var(--yellow);display:grid;place-items:center}
.row-status .ring{transform:rotate(-90deg)}
.row-status .ring circle{fill:none;stroke-width:3}
.row-status .ring circle:first-child{stroke:var(--line)}
.row-status .ring circle:last-child{stroke:var(--yellow);stroke-linecap:round}
.text-row.is-read strong{color:var(--muted)}

.library-footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px 0 calc(48px + env(safe-area-inset-bottom));text-align:center}
.squiggle{color:var(--yellow)}
.squiggle svg{width:64px;height:15px}
.library-footer p{font:italic 400 20px/26px var(--serif);margin:0}
.library-footer>span:last-child{font:600 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.empty-filter{padding:40px 0;text-align:center;color:var(--muted)}

/* ───────────── Čitač ───────────── */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:7;background:transparent}
.reading-progress i{display:block;height:100%;width:0;background:var(--yellow);border-radius:0 3px 3px 0;transition:width .12s}
.reader-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:68px;padding-top:calc(env(safe-area-inset-top) + 10px);padding-bottom:10px;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.icon-button{width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex-shrink:0;transition:transform .12s}
.icon-button:active{transform:scale(.92)}
.font-button{font:700 17px/1 var(--serif)}
.font-button[aria-expanded=true]{background:var(--press);color:var(--on-press)}
.mode-switch{display:flex;padding:4px;border-radius:999px;background:var(--soft)}
.mode-switch button{min-width:94px;height:38px;border-radius:999px;font:600 15px/1 var(--sans);color:var(--muted);transition:background-color .15s,color .15s}
.mode-switch button[aria-pressed=true]{background:var(--press);color:var(--on-press)}

.settings{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + 76px);right:max(var(--gutter),calc((100vw - 600px)/2));width:min(340px,calc(100vw - 40px));padding:6px 18px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 50px rgba(22,20,15,.12);animation:pop .15s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;font:500 15px/1.2 var(--sans)}
.settings-row+.settings-row{border-top:1px solid var(--line)}
.size-controls,.translation-switch{display:flex;align-items:center;gap:6px}
.size-controls button{width:44px;height:44px;border-radius:50%;background:var(--soft);font:700 16px/1 var(--serif)}
.size-controls span{min-width:38px;text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.translation-switch{padding:3px;border-radius:999px;background:var(--soft)}
.translation-switch button{height:36px;padding:0 13px;border-radius:999px;font:600 13px/1 var(--sans);color:var(--muted)}
.translation-switch button[aria-pressed=true]{background:var(--press);color:var(--on-press)}

.text-heading{padding:8px 0 30px}
.cover{position:relative;min-height:204px;padding:20px;border-radius:28px;background:var(--yellow);color:var(--on-yellow);overflow:hidden;isolation:isolate;display:flex;animation:rise .55s var(--ease) both}
.cover-art{position:absolute;z-index:-1;right:-8px;top:0;height:calc(100% + 36px);width:auto;aspect-ratio:2/3;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}
.cover-text{display:flex;flex-direction:column;justify-content:space-between;gap:14px;max-width:58%}
.cover-series{font:italic 500 24px/28px var(--serif);letter-spacing:-.02em;margin:0}
.cover-part{font:600 14px/18px var(--sans);margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cover.no-art .cover-text{max-width:none}
.text-heading h1{font:800 clamp(32px,9.4vw,40px)/1.1 var(--serif);letter-spacing:-.03em;margin:28px 0 12px;overflow-wrap:break-word;animation:rise .55s var(--ease) .06s both}
.reading-meta{font:500 14px/20px var(--sans);color:var(--muted);margin:0}
.reading-meta .dot{padding:0 7px;color:var(--faint)}

.prose{font-family:var(--serif);font-size:calc(21px * var(--size));line-height:1.6;overflow-wrap:break-word;hyphens:manual}
.prose p{margin:0 0 1.4em}
.word{border-radius:4px;cursor:pointer;transition:background-color .12s}
.word.speaking{background:var(--yellow-soft);box-shadow:0 0 0 2px var(--yellow-soft)}

.text-end{display:flex;flex-direction:column;align-items:center;padding:36px 0 calc(56px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center}
.end-mark{width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center}
.text-end p{font:italic 400 19px/1.4 var(--serif);margin:16px 0 0}
.primary-link{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:68px;margin-top:26px;padding:14px 18px 14px 22px;border-radius:20px;background:var(--soft);color:var(--ink);text-align:left;font:600 16px/1.2 var(--sans);transition:transform .12s}
.primary-link:active{transform:scale(.985)}
.primary-link>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.primary-link small{font:600 12px/14px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.primary-link b{font:700 18px/1.25 var(--serif);letter-spacing:-.01em;overflow-wrap:break-word}
.primary-link svg{flex-shrink:0;color:var(--muted);width:26px;height:26px}
.subtle-link{display:block;width:100%;min-height:48px;margin-top:6px;padding:14px;text-align:center;font:500 15px/20px var(--sans);color:var(--muted)}

.sentence-title{font:italic 400 15px/1.4 var(--serif);color:var(--muted);margin:22px 0 0;overflow-wrap:break-word}
.sentence-content{padding-top:clamp(48px,10vh,104px)}
#sentence-de{font:500 calc(30px * var(--size))/1.35 var(--serif);letter-spacing:-.01em;overflow-wrap:break-word;animation:fade .15s ease-out}
@keyframes fade{from{opacity:.2}}
#translation{display:block;width:100%;min-height:44px;margin-top:20px;padding:0;text-align:left;font:400 12px/1.7 var(--sans);color:var(--translation);cursor:default}
#translation.reveal{width:auto;cursor:pointer;border-bottom:1px dashed var(--track)}
.reading-hint{position:fixed;left:20px;right:20px;bottom:calc(110px + env(safe-area-inset-bottom));margin:0;text-align:center;font:500 13px/1 var(--sans);color:var(--faint)}
.sentence-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:640px;display:flex;align-items:center;gap:12px;padding:14px var(--gutter) calc(20px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--paper) 22%)}
.sentence-nav button{flex:1;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--soft);transition:transform .12s}
.sentence-nav button:active:not(:disabled){transform:scale(.96)}
#counter{min-width:64px;text-align:center;font:700 15px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
#sentence-view{padding-bottom:180px}

.finished{display:flex;flex-direction:column;align-items:center;padding-top:56px;padding-bottom:calc(40px + env(safe-area-inset-bottom));text-align:center}
.finish-art{position:relative;margin-bottom:30px;animation:bounce .6s var(--ease) both}
@keyframes bounce{0%{opacity:0;transform:scale(.7) rotate(-10deg)}60%{transform:scale(1.04) rotate(2deg)}100%{transform:none}}
.booklet.big{width:120px;height:160px;border-radius:12px;transform:rotate(-5deg);box-shadow:0 14px 30px rgba(22,20,15,.16)}
.booklet.big::after{width:8px}
.finish-badge{position:absolute;right:-16px;bottom:-12px;width:52px;height:52px;border-radius:50%;background:var(--press);color:var(--yellow);display:grid;place-items:center;border:4px solid var(--paper)}
.finished h1{font:800 32px/1.15 var(--serif);letter-spacing:-.03em;margin:14px 0 10px}
.finished h1 i{font-weight:400}
.finished-title{font:500 16px/1.4 var(--serif);color:var(--muted);margin:0}

.empty{padding-top:96px}
.empty h1{font:800 34px/1.15 var(--serif);letter-spacing:-.03em;margin:12px 0}
.empty>p:not(.eyebrow){font:400 16px/1.5 var(--sans);color:var(--muted)}

/* ───────────── Nivo A2 ───────────── */
.level{display:inline-block;margin-right:7px;padding:1px 6px;border-radius:5px;background:var(--press);color:var(--on-press);font:700 11px/15px var(--sans);letter-spacing:.04em;vertical-align:1px}
.cover-part .level{margin:0;background:var(--on-yellow);color:#fff}

/* ───────────── Gramatičke beleške ───────────── */
.bar-actions{display:flex;gap:8px}
.notes-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:26px;padding:14px 16px 14px 14px;border-radius:22px;background:var(--yellow);color:var(--on-yellow);text-align:left;transition:transform .12s}
.notes-card:active{transform:scale(.985)}
.notes-card+.primary-link{margin-top:10px}
.notes-card-icon{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.5);display:grid;place-items:center;flex-shrink:0}
.notes-card>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.notes-card b{font:700 18px/1.2 var(--serif);letter-spacing:-.01em}
.notes-card small{font:500 13px/1.3 var(--sans);opacity:.75}
.sheet-backdrop{position:fixed;inset:0;z-index:20;background:rgba(22,20,15,.38);animation:fadein .2s ease-out}
@keyframes fadein{from{opacity:0}}
.sheet{position:fixed;z-index:21;left:50%;bottom:0;width:100%;max-width:640px;max-height:min(88vh,88dvh);display:flex;flex-direction:column;border-radius:28px 28px 0 0;background:var(--paper);box-shadow:0 -10px 40px rgba(22,20,15,.18);transform:translateX(-50%);animation:sheetin .32s var(--ease)}
@keyframes sheetin{from{transform:translate(-50%,100%)}}
.sheet.dragging{transition:none}
.sheet:focus{outline:none}
.sheet-grip{display:flex;justify-content:center;padding:10px 0 4px;cursor:grab;touch-action:none}
.sheet-grip i{width:40px;height:5px;border-radius:99px;background:var(--track)}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px var(--gutter) 14px;border-bottom:1px solid var(--line);touch-action:none}
.sheet-head h2{font:800 26px/1.15 var(--serif);letter-spacing:-.025em;margin:6px 0 0}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom))}
.note{position:relative;padding:22px 0 24px 0;border-bottom:1px solid var(--line)}
.note:last-child{border-bottom:0}
.note-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);font:700 14px/1 var(--sans);margin-bottom:10px}
.note h3{font:700 21px/1.25 var(--serif);letter-spacing:-.015em;margin:0 0 8px}
.note>p{font:400 16px/1.55 var(--sans);color:var(--ink);margin:0}
.note em{font-family:var(--serif);font-style:italic;font-weight:600}
.note-example{margin:14px 0 0;padding:12px 14px;border-radius:16px;background:var(--soft)}
.note-example p{font:500 19px/1.4 var(--serif);margin:0}
.note-example figcaption{font:400 14px/1.4 var(--sans);color:var(--muted);margin-top:4px}
.word.hl{background:var(--yellow-soft);box-shadow:0 0 0 2px var(--yellow-soft);border-radius:4px;font-weight:700}
@media (prefers-color-scheme:dark){.word.hl{background:rgba(254,195,0,.22);box-shadow:0 0 0 2px rgba(254,195,0,.22);color:var(--yellow)}.note-num{color:#16140F}}
body.sheet-open{overflow:hidden}

/* ───────────── Zvuk ───────────── */
.listen{display:flex;align-items:center;gap:14px;width:100%;margin-top:20px;padding:10px 16px 10px 10px;border-radius:20px;background:var(--soft);text-align:left;transition:transform .12s}
.listen:active{transform:scale(.985)}
.listen-icon{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;flex-shrink:0}
.listen>span:last-child{display:flex;flex-direction:column;gap:2px}
.listen b{font:700 17px/1.2 var(--serif)}
.listen small{font:500 13px/1.2 var(--sans);color:var(--muted)}
.sentence{border-radius:4px;transition:background-color .2s,box-shadow .2s}
.sentence.now{background:var(--yellow-soft);box-shadow:0 0 0 3px var(--yellow-soft)}
@media (prefers-color-scheme:dark){.sentence.now{background:rgba(254,195,0,.16);box-shadow:0 0 0 3px rgba(254,195,0,.16)}}
.player{position:fixed;z-index:8;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 2 * var(--gutter));max-width:600px;display:flex;align-items:center;gap:12px;padding:8px;border-radius:999px;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px rgba(22,20,15,.14)}
.player-btn{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;flex-shrink:0}
.player-track{position:relative;flex:1;height:28px;cursor:pointer}
.player-track::before,.player-track i{content:"";position:absolute;left:0;top:11px;height:6px;border-radius:99px}
.player-track::before{right:0;background:var(--track)}
.player-track i{width:0;background:var(--ink)}
.player-time{min-width:38px;text-align:right;font:600 13px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.player-close{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
body.has-player .text-end{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.say{display:grid;place-items:center;width:48px;height:48px;margin-top:6px;border-radius:50%;background:var(--soft);color:var(--ink);transition:background-color .15s}
.say.playing{background:var(--yellow);color:var(--on-yellow);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(254,195,0,.25)}}

@media (min-width:700px){
  .filters{margin-inline:0;padding-inline:0;scroll-padding-inline:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .hello{padding-top:52px}
  .feature{min-height:270px;padding:26px}
  .feature h2{font-size:32px;line-height:36px}
  .cover{min-height:240px;padding:26px}
}
@media (max-height:620px){.sentence-content{padding-top:24px}.reading-hint{display:none}.sentence-nav{padding-top:8px;padding-bottom:12px}#sentence-view{padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}