@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-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:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-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:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-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}
/* Skripta · Hrbat. Subjects are book spines: the subject colour (--s) carries identity on the spine,
   the shelf and the key callouts; reading text stays calm ink on paper. Display: Anybody (width axis),
   body: Atkinson Hyperlegible Next. Mobile first; breakpoints only add. */
:root{
  --bg:#FAFAFB; --card:#FFFFFF; --ink:#17171D; --mu:#585964; --rule:#E3E3E9; --tint:#F0F0F4;
  --s:#3F51B5; --st:#FFFFFF;
  --ok:#2E7D4F; --late:#C62828; --warn-bg:#FFF4D6; --warn-ink:#6B4E00; --lect:#8E24AA; --lab:#33B679;
  --disp:"Anybody",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --measure:66ch; --spine:52px; --gut:16px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111115; --card:#18181E; --ink:#EFEFF2; --mu:#A2A3AE; --rule:#2A2A32; --tint:#1F1F26;
  --warn-bg:#3A3014; --warn-ink:#F3D98A; color-scheme:dark}}
/* --sl (subject colour as readable text) must resolve where each page sets --s, so it lives on body */
body{--sl:color-mix(in srgb,var(--s) 88%,var(--ink))}
@media (prefers-color-scheme:dark){body{--sl:color-mix(in srgb,var(--s) 55%,#FFFFFF)}}
@media (min-width:720px){:root{--spine:72px;--gut:40px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17.5px/1.6 var(--body)}
@media (min-width:720px){body{font-size:18px}}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--sl) 55%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px}
h1,h2,h3,h4{margin:0;line-height:1.08;text-wrap:balance}
p,ul,ol,dl,table,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--sl);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d{font-family:var(--disp)}
.sp{flex:1}
.ib{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;flex:none}
.ib:hover{background:var(--tint)}
.ib svg{width:22px;height:22px}
.muted{color:var(--mu)}

/* ---------- shell ---------- */
.wrap{max-width:1180px;margin:0 auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px));padding-block:0 120px}
.topbar{display:flex;align-items:center;gap:6px;min-height:60px;padding-top:env(safe-area-inset-top,0px)}
.brand{font:900 20px/1 var(--disp);font-stretch:80%;text-decoration:none;letter-spacing:-.01em}
.brand small{display:block;font:700 12px var(--body);color:var(--mu);letter-spacing:0;margin-top:3px}
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:34px 0 10px}
.sec h2{font:900 26px/1 var(--disp);font-stretch:75%}
.sec a,.sec small{font:700 14px var(--body);color:var(--mu)}
.sec a{text-decoration:none}

/* ---------- next deadline ---------- */
.next{display:flex;flex-direction:column;gap:2px;padding:16px 18px 18px;background:var(--ink);color:var(--bg)}
.next .in{font-size:14px;font-weight:700;opacity:.78}
.next .big{font:900 clamp(56px,17vw,96px)/.9 var(--disp);font-stretch:60%;letter-spacing:-.02em;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.next b{font-size:18px;line-height:1.3}
.next p{font-size:15px;opacity:.78;margin-top:4px}
.next.none .big{font-size:40px}

/* ---------- shelf ---------- */
.shelf{display:flex;gap:4px;height:clamp(300px,56vh,440px);align-items:flex-end}
.book{position:relative;flex:1;min-width:0;height:var(--h);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0 9px;background:var(--bk);color:var(--bt);text-decoration:none;overflow:hidden;transition:transform .18s ease}
.book::after{content:"";position:absolute;inset:auto 0 0;height:var(--p,0%);background:rgba(0,0,0,.22);pointer-events:none;transition:height .4s ease}
.book:hover{transform:translateY(-6px)}
.book .w{position:relative;z-index:1;font:900 clamp(34px,11vw,52px)/1 var(--disp);font-stretch:80%;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.book .w.long{font-size:clamp(24px,7.4vw,38px)}
.book small{position:relative;z-index:1;font-size:11.5px;font-weight:700;line-height:1.1;text-align:center}
.shelf-base{height:9px;background:var(--ink)}
.hint{font-size:13px;color:var(--mu);margin-top:8px}

/* ---------- checklist + deadlines ---------- */
.chk{list-style:none;padding:0}
.chk li{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-top:2.5px solid var(--ink)}
.chk li:last-child{border-bottom:2.5px solid var(--ink)}
.tick{flex:none;width:28px;height:28px;border:2.5px solid var(--ink);display:grid;place-items:center;position:relative}
.tick::before{content:"";position:absolute;inset:-9px}
.tick svg{width:18px;height:18px;opacity:0}
.tick[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tick[aria-pressed="true"] svg{opacity:1}
.chk .tt{flex:1;min-width:0;line-height:1.3}
.chk .tt small{display:block;font-size:13.5px;color:var(--mu);margin-top:2px}
.chk li.done .tt>span{text-decoration:line-through;opacity:.55}
.chk .dd{font:800 15px/1.15 var(--disp);font-stretch:70%;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.chk .dd small{display:block;font:700 12px var(--body);color:var(--mu)}
.chip{display:inline-block;font:800 11.5px/1 var(--body);padding:4px 6px;margin-right:6px;vertical-align:1px;background:var(--bk);color:var(--bt)}
.dl{display:flex;flex-direction:column}
.dl .m{font:900 22px/1 var(--disp);font-stretch:75%;margin:26px 0 8px}
.dl .m:first-child{margin-top:4px}
.dl .r{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--rule);align-items:baseline}
.dl .r .w{font:900 20px/1.05 var(--disp);font-stretch:65%;font-variant-numeric:tabular-nums}
.dl .r .w small{display:block;font:700 12.5px var(--body);color:var(--mu);margin-top:3px}
.dl .r b{font-weight:700;line-height:1.3}
.dl .r p{font-size:15px;color:var(--mu);margin-top:3px;line-height:1.45}
.kind{font-size:12.5px;font-weight:700;color:var(--mu);margin-left:6px}
.kind.ispit{color:var(--late)}
.kind.ok{color:var(--ok)}
.dl .r.other{opacity:.55}
.dl .r.past .w,.dl .r.past b{color:var(--mu)}
.dl .r.past .w::after{content:"prošlo";display:block;font:700 11.5px var(--body);color:var(--mu);margin-top:3px}
.dl .r.isnext{background:linear-gradient(90deg,color-mix(in srgb,var(--sl) 12%,transparent),transparent)}
.dl .r.done b{text-decoration:line-through}
.unk{font-size:15.5px;color:var(--mu);display:flex;flex-direction:column;gap:4px;padding-left:1.1em}

/* ---------- continue pill ---------- */
.pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);min-height:52px;padding:6px 20px 6px 8px;border-radius:99px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.pill .code{flex:none;min-width:40px;height:40px;padding:0 8px;border-radius:99px;display:grid;place-items:center;background:var(--bk);color:var(--bt);font:900 17px var(--disp);font-stretch:65%}
.pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- home layout ---------- */
.home h1.title{font:900 clamp(44px,13vw,88px)/.88 var(--disp);font-stretch:62%;letter-spacing:-.02em;margin:10px 0 18px}
@media (min-width:960px){
  .home .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"n b" "c b";column-gap:56px;align-items:start}
  .home .n{grid-area:n;padding-top:34px}.home .b{grid-area:b}.home .c{grid-area:c}
  .home .shelf{height:520px}
}

/* ---------- reading layout (subject + chapter) ---------- */
.read{display:grid;grid-template-columns:var(--spine) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.spine{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:max(14px,env(safe-area-inset-top,0px)) 0 max(14px,env(safe-area-inset-bottom,0px));background:var(--s);color:var(--st);overflow:hidden;text-decoration:none;width:100%}
.spine::after{content:"";position:absolute;inset:0 0 auto;height:var(--p,0%);background:rgba(0,0,0,.22);pointer-events:none;transition:height .25s linear}
.spine>*{position:relative;z-index:1}
.spine .code{font:900 18px/1 var(--disp);font-stretch:60%}
.spine .w{font:900 clamp(38px,12vw,64px)/1 var(--disp);font-stretch:85%;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.spine .w.long{font-size:clamp(28px,8.5vw,48px)}
.spine small{font-size:11.5px;font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;gap:6px;align-items:center}
.spine small svg{width:16px;height:16px;transform:rotate(90deg)}
.rbody{min-width:0;padding-inline:14px max(16px,env(safe-area-inset-right,0px));padding-bottom:120px}
@media (min-width:720px){.rbody{padding-inline:40px}}
.rtop{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:4px;min-height:56px;padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding-right:10px;font-weight:700;text-decoration:none;font-size:15.5px}
.back svg{width:20px;height:20px}
.rprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.rprog i{display:block;height:100%;width:var(--p,0%);background:var(--sl)}
.side{display:none}
@media (min-width:1080px){
  .read{grid-template-columns:var(--spine) 290px minmax(0,1fr)}
  .side{display:block;position:sticky;top:0;height:100vh;overflow:auto;padding:24px 18px 40px 22px;border-right:1px solid var(--rule)}
  .side .lab{font-size:13px;font-weight:700;color:var(--mu);margin-bottom:8px}
  .rbody{padding-inline:56px}
}

/* ---------- table of contents (sheet + side) ---------- */
.toc{list-style:none;padding:0}
.toc li a{display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:baseline;gap:8px;min-height:48px;padding:9px 4px;border-top:1px solid var(--rule);text-decoration:none;line-height:1.3}
.toc .c{font:900 22px/1 var(--disp);font-stretch:60%;color:var(--sl)}
.toc .st{align-self:center;color:var(--mu)}
.toc .st svg{width:18px;height:18px}
.toc li.done .t{color:var(--mu)}
.toc li.now a{background:color-mix(in srgb,var(--sl) 10%,transparent)}
.toc li.now .t{font-weight:700}
.side .toc li a{grid-template-columns:40px minmax(0,1fr) 18px;font-size:15px;min-height:40px;padding:7px 4px}
.side .toc .c{font-size:19px}
dialog.sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:82vh;max-height:82dvh;border:0;padding:0 0 env(safe-area-inset-bottom,0px);background:var(--card);color:var(--ink);border-top:6px solid var(--s);overflow:auto}
dialog.sheet:focus{outline:none}
dialog.sheet::backdrop{background:rgba(10,10,16,.45)}
dialog.sheet .shh{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:10px 8px 10px 18px;background:var(--card)}
dialog.sheet .shh b{flex:1;font:900 22px/1 var(--disp);font-stretch:75%}
dialog.sheet .toc{padding:0 12px 18px}
dialog.srch{inset:0 0 auto;max-height:90vh;max-height:90dvh;border-top:0;border-bottom:6px solid var(--ink)}
.sbox{flex:1;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border:2.5px solid var(--ink);background:var(--bg)}
.sbox svg{width:20px;height:20px;flex:none}
.sbox input{flex:1;min-width:0;font:inherit;font-size:17px;color:inherit;background:none;border:0;outline:0}
.sbox:focus-within{outline:3px solid var(--sl);outline-offset:2px}
dialog.srch .shh{padding:max(10px,env(safe-area-inset-top,0px)) 8px 10px 14px}
.res{list-style:none;margin:0;padding:0 14px 18px}
.res li a{display:block;padding:12px 2px;border-top:1px solid var(--rule);text-decoration:none}
.res b{display:block;font:900 18px/1.15 var(--disp);font-stretch:85%}
.res small{font-size:12.5px;font-weight:700;color:var(--mu)}
.res p{font-size:15px;line-height:1.45;color:var(--mu);margin-top:4px}
.res mark{background:none;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.res .none{padding:14px 2px;color:var(--mu)}
@media (min-width:720px){dialog.srch{inset:8vh auto auto 50%;transform:translateX(-50%);width:640px;max-height:76vh;border:2.5px solid var(--ink)}}
@media (min-width:720px){dialog.sheet:not(.srch){inset:0 auto 0 0;width:420px;max-height:none;height:100%;border-top:0;border-left:6px solid var(--s)}}

/* ---------- subject page ---------- */
.shead{display:flex;flex-direction:column;gap:10px;padding:18px 0 4px}
.shead .k{font-size:14px;font-weight:700;color:var(--mu)}
.shead h1{font:900 clamp(40px,11vw,84px)/.9 var(--disp);font-stretch:68%;letter-spacing:-.015em}
.shead .who{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14.5px;color:var(--mu)}
.shead .who a{font-weight:700;color:var(--ink)}
.split{display:flex;height:40px;overflow:hidden;font:900 15px var(--disp);font-stretch:80%}
.split span{display:flex;align-items:center;padding:0 10px;background:var(--s);color:var(--st);white-space:nowrap;overflow:hidden;min-width:0}
.split span:nth-child(2){background:color-mix(in srgb,var(--s) 72%,#000)}
.split span:nth-child(3){background:color-mix(in srgb,var(--s) 50%,#000)}
.split span:nth-child(n+4){background:color-mix(in srgb,var(--s) 35%,#000)}
.split span:nth-child(n+2){color:#fff}
.rule{font-size:15.5px;color:var(--mu);line-height:1.5;margin-top:8px;max-width:var(--measure)}
.chapters{list-style:none;padding:0;border-bottom:2.5px solid var(--ink)}
.chapters li a{display:grid;grid-template-columns:72px minmax(0,1fr) 24px;gap:10px;align-items:center;min-height:64px;padding:10px 0;border-top:2.5px solid var(--ink);text-decoration:none}
.chapters .c{font:900 30px/1 var(--disp);font-stretch:55%;color:var(--sl)}
.chapters .t{font-weight:700;line-height:1.3}
.chapters .t small{display:block;font-weight:400;font-size:14px;color:var(--mu)}
.chapters .st{color:var(--mu)}
.chapters .st svg{width:20px;height:20px}
.chapters li.done .t{color:var(--mu)}
.gauges{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.gauges{grid-template-columns:1fr 1fr}}
.gauge{border-top:2.5px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.gauge h3{font:900 18px var(--disp);font-stretch:80%}
.gauge .num{font:900 34px/1 var(--disp);font-stretch:60%}
.gauge .num small{display:block;font:400 13.5px var(--body);color:var(--mu);margin-top:4px}
.meter{position:relative;height:10px;background:var(--tint)}
.meter span{position:absolute;inset:0 auto 0 0;background:var(--s)}
.meter em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.gauge p{font-size:14.5px;color:var(--mu);line-height:1.4}
.gauge.bad .num{color:var(--late)}

/* ---------- chapter ---------- */
.chapter{display:flex;flex-direction:column;gap:18px;max-width:var(--measure);overflow-wrap:break-word;padding-top:8px;font-size:calc(17.5px * var(--fsk,1))}
@media (min-width:720px){.chapter{font-size:calc(18px * var(--fsk,1))}}
.chapter>header{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:2.5px solid var(--ink)}
.chapter>header .no{font:900 calc(16px * var(--fsk,1))/1 var(--disp);font-stretch:75%;color:var(--sl)}
.chapter>header h1{font:900 calc(clamp(32px,8.6vw,54px) * var(--fsk,1))/1 var(--disp);font-stretch:76%;letter-spacing:-.01em}
.chapter h2{font:900 calc(clamp(24px,6vw,30px) * var(--fsk,1))/1.05 var(--disp);font-stretch:78%;margin-top:22px}
.chapter h3{font:800 calc(20px * var(--fsk,1))/1.15 var(--disp);font-stretch:92%;margin-top:8px}
.chapter h4{font-size:calc(17px * var(--fsk,1));font-weight:700}
.chapter ul,.chapter ol:not([class]){padding-left:1.25em;display:flex;flex-direction:column;gap:6px}
.chapter strong{font-weight:700}
.lead{font-size:calc(19.5px * var(--fsk,1));line-height:1.5;font-weight:500}
.meta{font-size:calc(14.5px * var(--fsk,1));line-height:1.5;color:var(--mu)}
.chapter code{font:500 .86em var(--mono);background:var(--tint);padding:.1em .35em;overflow-wrap:anywhere}
.chapter pre{margin:0;max-width:100%;background:var(--tint);padding:12px 14px}
.chapter pre code{display:block;background:none;padding:0;white-space:pre-wrap;font-size:calc(14px * var(--fsk,1));line-height:1.5}
.table{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;font-size:calc(15.5px * var(--fsk,1));line-height:1.4;width:100%;font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
th{font-size:calc(13.5px * var(--fsk,1));font-weight:700;color:var(--mu);border-bottom:2.5px solid var(--ink)}
@media (max-width:719px){table{font-size:calc(14.5px * var(--fsk,1))}th,td{padding:7px 8px}}

/* callouts */
.callout{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.callout::before{font:900 calc(14px * var(--fsk,1))/1 var(--disp);font-stretch:85%}
.callout p,.callout li{max-width:none}
.callout ul{padding-left:1.2em}
.callout.key{background:var(--s);color:var(--st);margin-inline:-14px;padding-inline:14px}
.callout.key::before{content:"Ključno";opacity:.85}
.callout.key a{color:inherit}
.callout.key p{font-size:calc(19px * var(--fsk,1));line-height:1.45;font-weight:700}
.callout.exam{background:var(--ink);color:var(--bg)}
.callout.exam::before{content:"Na ispitu";color:color-mix(in srgb,var(--s) 45%,#fff)}
.callout.example{border:2px dashed var(--rule)}
.callout.example::before{content:"Primjer";color:var(--mu)}
.callout.warn{background:var(--warn-bg);color:var(--warn-ink)}
.callout.warn::before{content:"Pazi"}
@media (min-width:720px){.callout.key{margin-inline:-24px;padding-inline:24px}}

dl.terms{display:grid;grid-template-columns:1fr;border-top:2.5px solid var(--ink)}
dl.terms dt{font:900 calc(19px * var(--fsk,1)) var(--disp);font-stretch:85%;padding-top:12px}
dl.terms dd{margin:0;padding:2px 0 12px;border-bottom:1px solid var(--rule)}
@media (min-width:720px){dl.terms{grid-template-columns:minmax(150px,30%) 1fr}dl.terms dt{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}dl.terms dd{padding:12px 0}}

ol.flow{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:f}
ol.flow li{counter-increment:f;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:10px;align-items:baseline;background:var(--card);border:1px solid var(--rule);padding:10px 12px}
ol.flow li::before{content:counter(f);grid-row:1/3;font:900 calc(32px * var(--fsk,1))/1 var(--disp);font-stretch:55%;color:var(--sl)}
ol.flow li b{font-weight:700;line-height:1.3}
ol.flow li span{font-size:calc(15.5px * var(--fsk,1));line-height:1.4;color:var(--mu)}
ol.flow.loop::after{content:"↺ ciklus se ponavlja";font-weight:700;font-size:calc(14px * var(--fsk,1));color:var(--sl);padding:4px 0}

ol.funnel{list-style:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px}
ol.funnel li{width:var(--w,100%);background:var(--s);color:var(--st);padding:10px 14px;text-align:center;display:flex;flex-direction:column}
ol.funnel li b{font:900 calc(18px * var(--fsk,1)) var(--disp);font-stretch:85%}
ol.funnel li span{font-size:calc(14.5px * var(--fsk,1));line-height:1.35;opacity:.92}
ol.funnel li:nth-child(2){--w:88%;background:color-mix(in srgb,var(--s) 86%,#000);color:#fff}
ol.funnel li:nth-child(3){--w:76%;background:color-mix(in srgb,var(--s) 74%,#000);color:#fff}
ol.funnel li:nth-child(4){--w:64%;background:color-mix(in srgb,var(--s) 62%,#000);color:#fff}
ol.funnel li:nth-child(5){--w:54%;background:color-mix(in srgb,var(--s) 52%,#000);color:#fff}
ol.funnel li:nth-child(n+6){--w:46%;background:color-mix(in srgb,var(--s) 44%,#000);color:#fff}

.matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;position:relative;padding:0 0 28px 26px}
.matrix::before{content:attr(data-y);position:absolute;left:0;top:50%;transform:translate(-40%,-50%) rotate(-90deg);font-size:calc(13px * var(--fsk,1));font-weight:700;color:var(--mu);white-space:nowrap}
.matrix::after{content:attr(data-x);position:absolute;bottom:0;left:26px;right:0;text-align:center;font-size:calc(13px * var(--fsk,1));font-weight:700;color:var(--mu)}
.matrix>div{min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;background:var(--card);border:1px solid var(--rule);padding:12px;display:flex;flex-direction:column;gap:4px;min-height:96px}
.matrix>div:nth-child(2){background:var(--s);color:var(--st);border-color:var(--s)}
.matrix>div:nth-child(2) span{color:inherit;opacity:.9}
.matrix>div b{font:900 calc(18px * var(--fsk,1)) var(--disp);font-stretch:85%}
.matrix>div span{font-size:calc(14.5px * var(--fsk,1));line-height:1.4;color:var(--mu)}

.compare{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.compare{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.compare>div{border-top:6px solid var(--s);background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.compare>div:nth-child(2){border-top-color:color-mix(in srgb,var(--s) 60%,var(--ink))}
.compare>div:nth-child(3){border-top-color:color-mix(in srgb,var(--s) 35%,var(--ink))}
.compare h4{font:900 calc(19px * var(--fsk,1)) var(--disp);font-stretch:85%}
.compare p,.compare li{font-size:calc(15.5px * var(--fsk,1));line-height:1.45}
.compare ul{padding-left:1.1em}

.formula{background:var(--tint);padding:16px 18px;display:flex;flex-direction:column;gap:8px;overflow-x:auto}
.formula code{font:500 calc(16.5px * var(--fsk,1))/1.5 var(--mono);background:none;padding:0;color:var(--ink);white-space:pre-wrap}
.formula p{font-size:calc(15.5px * var(--fsk,1));color:var(--mu)}

.bars{display:flex;flex-direction:column;gap:7px}
.bars::before{content:attr(data-title);font:900 calc(17px * var(--fsk,1)) var(--disp);font-stretch:85%}
.bars>div{display:grid;grid-template-columns:minmax(0,34%) 1fr auto;gap:10px;align-items:center;font-size:calc(15px * var(--fsk,1))}
.bars>div b{font-weight:700;font-size:calc(14.5px * var(--fsk,1))}
.bars>div::after{content:"";grid-column:2;grid-row:1;height:14px;width:calc(var(--v)*1%);background:var(--s)}
.bars>div span{grid-column:3;font:900 calc(16px * var(--fsk,1)) var(--disp);font-stretch:70%;font-variant-numeric:tabular-nums}

ol.timeline{list-style:none;padding:0 0 0 22px;border-left:4px solid var(--s);display:flex;flex-direction:column;gap:14px}
ol.timeline li{position:relative;display:flex;flex-direction:column;gap:2px}
ol.timeline li::before{content:"";position:absolute;left:-31px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:4px solid var(--s)}
ol.timeline time{font:900 calc(17px * var(--fsk,1)) var(--disp);font-stretch:70%;color:var(--sl)}
ol.timeline b{font-weight:700}
ol.timeline span{font-size:calc(15.5px * var(--fsk,1));color:var(--mu)}

.hub{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:18px;background:var(--tint)}
.hub>b{flex-basis:100%;text-align:center;font:900 calc(20px * var(--fsk,1)) var(--disp);font-stretch:80%;color:var(--sl)}
.hub>span{background:var(--card);border:1px solid var(--rule);border-radius:99px;padding:6px 12px;font-size:calc(14.5px * var(--fsk,1));font-weight:700}

svg.chart{width:100%;max-width:640px;height:auto;display:block}
svg.chart .s-line{fill:none;stroke:var(--sl);stroke-width:3}
svg.chart .s-area{fill:color-mix(in srgb,var(--s) 16%,transparent);stroke:none}
svg.chart .s-accent{fill:var(--sl);stroke:var(--sl)}
svg.chart .s-text{fill:var(--mu);font:700 calc(13px * var(--fsk,1)) var(--body)}
svg.chart line,svg.chart path:not([class]){stroke:var(--rule)}

figure{display:flex;flex-direction:column;gap:6px}
figure img{border:1px solid var(--rule);background:#fff}
figcaption{font-size:calc(13.5px * var(--fsk,1));color:var(--mu)}

details.q{border-top:2.5px solid var(--ink)}
details.q:last-of-type{border-bottom:2.5px solid var(--ink)}
details.q summary{cursor:pointer;padding:12px 0;font-weight:700;line-height:1.4;list-style:none;display:flex;gap:12px;overflow-wrap:anywhere}
details.q summary::-webkit-details-marker{display:none}
details.q summary::before{content:"?";flex:none;width:28px;height:28px;display:grid;place-items:center;background:var(--s);color:var(--st);font:900 calc(16px * var(--fsk,1)) var(--disp)}
details.q[open] summary::before{content:"✓";background:var(--ink);color:var(--bg)}
details.q summary>span{min-width:0}
details.q>div{padding:0 0 14px 40px;font-size:calc(16.5px * var(--fsk,1))}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr;gap:8px;margin-top:48px;max-width:var(--measure)}
.pn a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;text-decoration:none;border:2.5px solid var(--ink)}
.pn a small{font-size:13px;font-weight:700;color:var(--mu)}
.pn a b{font:900 20px/1.1 var(--disp);font-stretch:80%}
.pn a.nx{background:var(--s);color:var(--st);border-color:var(--s)}
.pn a.nx small{color:inherit;opacity:.85}
@media (min-width:720px){.pn{grid-template-columns:1fr 1fr}.pn a.nx{text-align:right}}

footer.end{margin-top:72px;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.5;color:var(--mu);max-width:var(--measure)}

/* ---------- print / PDF ---------- */
@page{size:A4;margin:16mm 14mm}
@media print{
  body{background:#fff;color:#000;font-size:10.5pt}
  .spine,.side,.rtop,.pn,.pill,dialog,.topbar{display:none!important}
  .read{display:block}
  .rbody{padding:0}
  .chapter{max-width:none;break-before:page}
  .callout,figure,.matrix,.formula,ol.flow,details.q,.compare,ol.funnel{break-inside:avoid}
  details.q>div{display:block}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.book:hover{transform:none}}

/* ---------- account ---------- */
.hello{font:900 clamp(34px,10vw,56px)/.95 var(--disp);font-stretch:66%;letter-spacing:-.01em;margin:8px 0 18px}
.hello b{font-weight:inherit}
.acct{position:relative}
.acct .ini{display:none}
.acct.in svg{display:none}
.acct.in .ini{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font:900 16px var(--disp);font-stretch:80%}
dialog.acc-d .acc{padding:4px 18px 22px;display:flex;flex-direction:column;gap:14px;max-width:460px}
.acc h2{font:900 clamp(40px,12vw,56px)/.9 var(--disp);font-stretch:68%;letter-spacing:-.01em}
.acc p{line-height:1.5}
.acc form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.field input{font:inherit;font-size:18px;font-weight:400;color:var(--ink);background:var(--bg);border:2.5px solid var(--ink);border-radius:0;min-height:52px;padding:0 14px;width:100%}
.field input:focus{outline:3px solid var(--s);outline-offset:2px}
.field input.otp{font:900 40px/1 var(--disp);font-stretch:60%;letter-spacing:.42em;text-align:center;padding-left:.42em;font-variant-numeric:tabular-nums;min-height:72px}
.btn{min-height:52px;padding:0 20px;background:var(--ink);color:var(--bg);font-weight:700;font-size:17px;border:2.5px solid var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:none;color:var(--ink)}
.lnk{font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 2px}
.lnk:disabled{opacity:.5;text-decoration:none;cursor:default}
.acc .row{display:flex;flex-wrap:wrap;gap:4px 18px}
.acc .fine{font-size:14px;color:var(--mu)}
.acc .who{font-weight:700;font-size:18px;overflow-wrap:anywhere}
.acc .err{color:var(--late);font-weight:700;font-size:15px;min-height:1px}
.acc .err:empty{display:none}
.sync{list-style:none;padding:0;border-top:2.5px solid var(--ink)}
.sync li{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--rule);font-weight:700}
.sync li::before{content:"";width:22px;height:22px;flex:none;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- reading tools, reports, calendar, privacy ---------- */
.ib.fs{font:900 16px/1 var(--disp);font-stretch:80%;width:40px}
.ib.fs:disabled{opacity:.35;cursor:default}
.ib.fs:disabled:hover{background:none}
.report{margin-top:40px;max-width:var(--measure);border-top:2.5px solid var(--ink)}
.report summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;list-style:none}
.report summary::-webkit-details-marker{display:none}
.report summary::after{content:"+";margin-left:auto;font:900 22px var(--disp)}
.report[open] summary::after{content:"−"}
.report form{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.report textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:2.5px solid var(--ink);padding:10px 12px;width:100%;resize:vertical}
.report textarea:focus{outline:3px solid var(--sl);outline-offset:2px}
.report .btn{align-self:flex-start}
.fine{font-size:14px;color:var(--mu)}
.calbox{margin-top:18px;padding:16px;border:2.5px solid var(--ink);display:flex;flex-direction:column;gap:8px}
.calbox b{font:900 22px/1.05 var(--disp);font-stretch:78%}
.calbox .row{display:flex;flex-wrap:wrap;gap:8px}
.calbox .btn{display:inline-flex;align-items:center;text-decoration:none}
.calbox code{font:500 13px var(--mono);overflow-wrap:anywhere}
.lnk.bad,.btn.bad{color:var(--late)}
.btn.bad{background:var(--late);border-color:var(--late);color:#fff}
.danger{border-top:2.5px solid var(--late);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.danger b{color:var(--late)}
.prose ul{padding-left:1.25em}