/* Tiridle – the KEI eBook reading view */
:root {
	--navy: #1d2a4d;
	--gold: #d2a66f;
	--gold-ink: #9c7134;
	--font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--top-h: 56px;
	--bottom-h: 64px;
	--safe-t: env(safe-area-inset-top, 0px);
	--safe-b: env(safe-area-inset-bottom, 0px);
}

/* Themes: stage = area around the page, paper = tint multiplied onto the page, ui = chrome */
.kr[data-theme="light"] { --stage: #eeede8; --paper: #ffffff; --ui: rgba(255,255,255,.94); --ink: #1b1b19; --muted: #6f6f67; --line: rgba(0,0,0,.09); --hover: rgba(0,0,0,.05); --page-filter: none; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.10); }
.kr[data-theme="sepia"] { --stage: #e8dcc2; --paper: #f5ecd6; --ui: rgba(249,242,226,.95); --ink: #4a3b25; --muted: #7c6a4e; --line: rgba(74,59,37,.14); --hover: rgba(74,59,37,.07); --page-filter: none; --shadow: 0 1px 2px rgba(74,59,37,.08), 0 8px 28px rgba(74,59,37,.14); }
.kr[data-theme="green"] { --stage: #d5e3d0; --paper: #e4eedf; --ui: rgba(234,242,230,.95); --ink: #253226; --muted: #5a6b58; --line: rgba(37,50,38,.13); --hover: rgba(37,50,38,.06); --page-filter: none; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.10); }
.kr[data-theme="dark"]  { --stage: #0f0f10; --paper: #ffffff; --ui: rgba(24,24,26,.94); --ink: #e9e7e1; --muted: #9b9a94; --line: rgba(255,255,255,.1); --hover: rgba(255,255,255,.07); --page-filter: invert(.88) hue-rotate(180deg) contrast(1.05); --shadow: 0 0 0 1px rgba(255,255,255,.04); }

* { box-sizing: border-box; }
html, body.kr-body { margin: 0; height: 100%; overflow: hidden; background: #0f0f10; overscroll-behavior: none; }
body.kr-body { font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

.kr {
	position: fixed; inset: 0;
	background: var(--stage); color: var(--ink);
	transition: background-color .25s ease, color .25s ease;
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.kr svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kr button { font: inherit; color: inherit; }
.kr a { color: inherit; }

/* ---------- Chrome (top & bottom bars) ---------- */
.kr-top, .kr-bottom {
	position: absolute; left: 0; right: 0; z-index: 20;
	background: var(--ui);
	-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
	transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s ease, background-color .25s;
}
.kr-top {
	top: 0; height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 8px 0;
	display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line);
}
.kr-bottom { bottom: 0; padding: 6px 18px calc(8px + var(--safe-b)); border-top: 1px solid var(--line); }
.kr.chrome-hidden .kr-top { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.kr.chrome-hidden .kr-bottom { transform: translateY(100%); opacity: 0; pointer-events: none; }

.kr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-width: 42px; height: 42px; padding: 0 9px; border: 0; border-radius: 10px;
	background: transparent; cursor: pointer; text-decoration: none; color: var(--ink);
}
.kr-btn:hover, .kr-btn:focus-visible { background: var(--hover); outline: none; }
.kr-btn[aria-pressed="true"] svg, .kr-btn.is-on svg { fill: var(--gold); stroke: var(--gold); }
.kr-btn-label { font-size: 14px; font-weight: 600; }
.kr-aa { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 600; letter-spacing: -.5px; }

.kr-title { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.kr-title strong { display: block; font-family: var(--head); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-title span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-tools { display: flex; align-items: center; gap: 2px; }

.kr-scrub { position: relative; height: 26px; display: flex; align-items: center; }
.kr-scrub input[type=range] { width: 100%; }
.kr-scrub output {
	position: absolute; bottom: 30px; transform: translateX(-50%);
	background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
}
.kr-status { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kr-status #kr-left { flex: 1; text-align: center; }

.kr input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.kr input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--gold) var(--fill, 0%), var(--line) var(--fill, 0%)); }
.kr input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.kr input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
.kr input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.kr input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }

.kr-sample-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	margin: 0 -18px 6px; padding: 8px 18px; background: var(--navy); color: #fff; font-size: 13px;
}
.kr-buy { background: var(--gold); color: #fff !important; text-decoration: none; font-weight: 700; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }

/* ---------- Stage & pages ---------- */
.kr-stage {
	position: absolute; inset: 0; overflow: hidden;
	padding: calc(var(--top-h) + var(--safe-t) + 14px) 16px calc(var(--bottom-h) + var(--safe-b) + 14px);
	display: flex; align-items: center; justify-content: center;
	touch-action: pan-y pinch-zoom;
}
.kr.is-sample .kr-stage { padding-bottom: calc(var(--bottom-h) + var(--safe-b) + 54px); }
.kr.chrome-hidden .kr-stage { padding-top: calc(var(--safe-t) + 14px); padding-bottom: calc(var(--safe-b) + 14px); }
.kr.is-zoomed .kr-stage { overflow: auto; display: block; touch-action: auto; }
.kr.is-zoomed .kr-pages { margin: 0 auto; }

.kr-pages { position: relative; display: flex; align-items: center; justify-content: center; }
.kr-view { display: flex; gap: 2px; align-items: center; justify-content: center; }
.kr-view.anim-next { animation: kr-in-next .26s cubic-bezier(.2,.7,.2,1); }
.kr-view.anim-prev { animation: kr-in-prev .26s cubic-bezier(.2,.7,.2,1); }
.kr-view.anim-fade { animation: kr-fade .2s ease; }
@keyframes kr-in-next { from { opacity: .15; transform: translateX(36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kr-in-prev { from { opacity: .15; transform: translateX(-36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kr-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kr-view.anim-next, .kr-view.anim-prev, .kr-view.anim-fade { animation: none; } }

.kr-page {
	position: relative; background: #fff; box-shadow: var(--shadow); overflow: hidden;
	transition: box-shadow .25s;
}
.kr-view.is-spread .kr-page:first-child { border-radius: 3px 0 0 3px; }
.kr-view.is-spread .kr-page:last-child { border-radius: 0 3px 3px 0; }
.kr-view.is-spread .kr-page:first-child::after,
.kr-view.is-spread .kr-page:last-child::before {
	content: ""; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2;
}
.kr-view.is-spread .kr-page:first-child::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.10), transparent); }
.kr-view.is-spread .kr-page:last-child::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,.10), transparent); }
.kr-page canvas { display: block; filter: var(--page-filter); transition: filter .25s; }
.kr-page::selection { background: transparent; }
.kr-tint { position: absolute; inset: 0; background: var(--paper); mix-blend-mode: multiply; pointer-events: none; z-index: 1; transition: background-color .25s; }
.kr[data-theme="dark"] .kr-tint { display: none; }
.kr-page-ph { background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.kr-page-ph::after { content: ""; width: 26px; height: 26px; border: 2.5px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: kr-spin .8s linear infinite; }
@keyframes kr-spin { to { transform: rotate(360deg); } }

.kr-wm {
	position: absolute; left: 0; right: 0; bottom: 6px; z-index: 3; text-align: center;
	font-size: 9px; letter-spacing: .3px; color: rgba(0,0,0,.28); pointer-events: none; white-space: nowrap; overflow: hidden;
}
.kr[data-theme="dark"] .kr-wm { color: rgba(255,255,255,.22); }

.kr-ribbon {
	position: absolute; z-index: 5; top: calc(var(--top-h) + var(--safe-t) + 14px); width: 18px; height: 34px;
	background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); pointer-events: none;
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); transition: top .28s;
}
.kr.chrome-hidden .kr-ribbon { top: calc(var(--safe-t) + 14px); }

.kr-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 4; }

.kr-arrow {
	position: absolute; top: 50%; z-index: 15; transform: translateY(-50%);
	width: 44px; height: 72px; border: 0; border-radius: 12px; cursor: pointer;
	background: var(--ui); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.08);
	display: none; align-items: center; justify-content: center; opacity: .0; transition: opacity .2s;
}
.kr-arrow-prev { left: 12px; }
.kr-arrow-next { right: 12px; }
@media (hover: hover) and (pointer: fine) {
	.kr-arrow { display: flex; }
	.kr:hover .kr-arrow { opacity: .75; }
	.kr .kr-arrow:hover { opacity: 1; }
	.kr.chrome-hidden .kr-arrow { opacity: 0; }
	.kr.chrome-hidden:hover .kr-arrow { opacity: .35; }
}
.kr-arrow[disabled] { visibility: hidden; }

/* ---------- Side panel ---------- */
.kr-panel {
	position: absolute; top: 0; bottom: 0; left: 0; z-index: 40; width: min(380px, 92vw);
	background: var(--ui); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	box-shadow: 8px 0 40px rgba(0,0,0,.18); display: flex; flex-direction: column;
	transform: translateX(-104%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
	padding-top: var(--safe-t); padding-bottom: var(--safe-b);
	user-select: text; -webkit-user-select: text;
}
.kr-panel.is-open { transform: none; }
.kr-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.kr-panel-tabs { flex: 1; display: flex; gap: 4px; background: var(--hover); padding: 3px; border-radius: 10px; }
.kr-panel-tabs button { flex: 1; border: 0; background: transparent; padding: 7px 6px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); }
.kr-panel-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.kr[data-theme="dark"] .kr-panel-tabs button[aria-selected="true"] { background: #2b2b2e; }
.kr-panel-body { flex: 1; overflow: auto; padding: 14px; -webkit-overflow-scrolling: touch; }

.kr-book-card { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.kr-book-card img { width: 54px; height: auto; border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.kr-book-card strong { display: block; font-family: var(--head); font-size: 15px; line-height: 1.25; }
.kr-book-card span { display: block; font-size: 12.5px; color: var(--muted); }

.kr-goto { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.kr-goto label { white-space: nowrap; }
.kr-goto input, .kr-search input {
	flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
	background: var(--paper); color: var(--ink); font: inherit; font-size: 14px;
}
.kr[data-theme="dark"] .kr-goto input, .kr[data-theme="dark"] .kr-search input { background: #232326; }
.kr-goto button { height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; }

.kr-toc ul { list-style: none; margin: 0; padding: 0; }
.kr-toc ul ul { padding-left: 14px; }
.kr-toc a, .kr-list a {
	display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px;
	text-decoration: none; font-size: 14px; line-height: 1.35; cursor: pointer;
}
.kr-toc a:hover, .kr-list a:hover { background: var(--hover); }
.kr-toc a.is-current { background: var(--hover); font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
.kr-toc a small, .kr-list a small { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.kr-list { list-style: none; margin: 0; padding: 0; }
.kr-list li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.kr-list li a { flex: 1; flex-direction: column; gap: 2px; }
.kr-list li a span { color: var(--muted); font-size: 12.5px; }
.kr-list li button { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 8px; border-radius: 8px; }
.kr-list li button:hover { background: var(--hover); color: var(--ink); }
.kr-results mark { background: rgba(210,166,111,.45); color: inherit; border-radius: 2px; padding: 0 1px; }
.kr-empty, .kr-search-status { color: var(--muted); font-size: 13px; }
.kr-search { margin-bottom: 8px; display: flex; }

/* ---------- Settings popover ---------- */
.kr-pop {
	position: absolute; z-index: 45; right: 10px; top: calc(var(--top-h) + var(--safe-t) + 8px);
	width: min(340px, calc(100vw - 20px)); padding: 16px; border-radius: 16px;
	background: var(--ui); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	box-shadow: 0 12px 40px rgba(0,0,0,.22); border: 1px solid var(--line);
}
.kr-pop[hidden] { display: none; }
.kr-pop-row { display: grid; gap: 8px; margin-bottom: 14px; }
.kr-pop-row:last-child { margin-bottom: 0; }
.kr-pop-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kr-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kr-themes button { height: 44px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; font-size: 12.5px; font-weight: 700; }
.kr-themes .t-light { background: #fff; color: #1b1b19; border-color: #ddd; }
.kr-themes .t-sepia { background: #f5ecd6; color: #4a3b25; }
.kr-themes .t-green { background: #e4eedf; color: #253226; }
.kr-themes .t-dark { background: #1b1b1d; color: #e9e7e1; }
.kr-themes button.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(210,166,111,.3); }
.kr-slider { display: flex; align-items: center; gap: 10px; }
.kr-slider input { flex: 1; }
.kr-slider svg.kr-sm { width: 16px; height: 16px; }
.kr-seg { display: flex; background: var(--hover); padding: 3px; border-radius: 10px; gap: 3px; }
.kr-seg button { flex: 1; border: 0; background: transparent; padding: 8px 4px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); }
.kr-seg button.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.kr[data-theme="dark"] .kr-seg button.is-on { background: #2b2b2e; }
.kr-zoom { display: flex; align-items: center; gap: 10px; }
.kr-zoom button { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-size: 20px; cursor: pointer; }
.kr-zoom span { min-width: 54px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.kr-scrim { position: absolute; inset: 0; z-index: 35; background: rgba(0,0,0,.28); }
.kr-scrim[hidden] { display: none; }

/* ---------- Loading / overlays / toast ---------- */
.kr-loading {
	position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	background: var(--stage); text-align: center; padding: 24px; transition: opacity .35s ease, visibility .35s;
}
.kr-loading img { width: 140px; max-width: 40vw; border-radius: 4px; box-shadow: 0 10px 34px rgba(0,0,0,.25); animation: kr-breathe 2s ease-in-out infinite; }
.kr-loading strong { font-family: var(--head); font-size: 18px; max-width: 420px; }
.kr-loading small { color: var(--muted); }
.kr-loading-bar { width: 180px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.kr-loading-bar span { display: block; height: 100%; width: 30%; background: var(--gold); border-radius: 4px; animation: kr-indet 1.2s ease-in-out infinite; }
.kr-loading-bar span.is-det { animation: none; transition: width .2s; }
@keyframes kr-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@keyframes kr-breathe { 50% { transform: translateY(-4px); } }
.kr:not([data-state="loading"]) .kr-loading { opacity: 0; visibility: hidden; pointer-events: none; }

.kr-overlay { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); }
.kr-overlay[hidden] { display: none; }
.kr-card { background: var(--ui); color: var(--ink); border-radius: 18px; padding: 28px 26px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.kr-card img { width: 96px; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.kr-card h2 { font-family: var(--head); font-size: 20px; margin: 14px 0 8px; }
.kr-card p { color: var(--muted); margin: 8px 0; }
.kr-cta { display: inline-block; background: var(--navy); color: #fff !important; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 700; margin-right: 8px; }
.kr-link { border: 0; background: transparent; color: var(--muted); text-decoration: underline; cursor: pointer; }

.kr-toast {
	position: absolute; left: 50%; bottom: calc(var(--bottom-h) + var(--safe-b) + 24px); z-index: 80;
	transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
	background: rgba(20,20,22,.9); color: #fff; font-size: 13.5px; padding: 10px 16px; border-radius: 999px; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center;
}
.kr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
	:root { --top-h: 52px; }
	.kr-btn { min-width: 38px; height: 40px; padding: 0 6px; }
	.kr-btn-label { display: none; }
	.kr-title strong { font-size: 14px; }
	.kr-stage { padding-left: 6px; padding-right: 6px; }
	.kr-bottom { padding-left: 14px; padding-right: 14px; }
	.kr-sample-bar { margin: 0 -14px 6px; padding: 8px 14px; }
	#kr-fullscreen { display: none; }
	.kr-status #kr-left { display: none; }
}
@media (max-width: 380px) {
	.kr-title span { display: none; }
}
.kr.no-fullscreen #kr-fullscreen { display: none; }

/* ================= Tiridle polish ================= */

/* Wordmark */
.kr-wordmark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-weight: 700; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.kr-wordmark .kr-logo { width: 22px; height: 22px; stroke: none; flex-shrink: 0; }
.kr-wordmark > span { font-size: 15px; }
.kr-wordmark-top { padding: 0 6px 0 4px; opacity: .9; }
.kr-wordmark-sm .kr-logo { width: 18px; height: 18px; }
.kr-wordmark-sm > span { font-size: 13px; }
.kr-wordmark-lg .kr-logo { width: 34px; height: 34px; }
.kr-wordmark-lg > span { font-size: 22px; }
.kr[data-theme="dark"] .kr-logo rect { fill: #e9e7e1; }
.kr[data-theme="dark"] .kr-logo path:first-of-type { stroke: #1d2a4d; }

/* Top bar: tidier spacing, clear pressed states */
.kr-top { padding-left: 10px; padding-right: 10px; }
.kr-tools { gap: 4px; }
.kr-btn { transition: background-color .15s, color .15s, transform .1s; }
.kr-btn:active { transform: scale(.94); }
.kr-btn[aria-expanded="true"] { background: var(--hover); color: var(--gold-ink); }
.kr[data-theme="dark"] .kr-btn[aria-expanded="true"] { color: var(--gold); }
.kr-title strong { font-size: 15.5px; }

/* Bottom bar: chapter-aware, roomier slider */
.kr-bottom { padding-top: 8px; }
.kr-status { padding: 2px 2px 0; }
.kr-status #kr-pct { font-weight: 700; color: var(--ink); }

/* Reading-mode status (when the bars are hidden) */
.kr-mini {
  position: absolute; left: 0; right: 0; bottom: calc(6px + var(--safe-b)); z-index: 6; text-align: center;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.kr.chrome-hidden .kr-mini { opacity: .85; }
.kr-progress-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 7; background: transparent; pointer-events: none; opacity: 0; transition: opacity .3s; }
.kr-progress-line span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s ease; }
.kr.chrome-hidden .kr-progress-line { opacity: .9; }
.kr.chrome-hidden .kr-stage { padding-bottom: calc(var(--safe-b) + 28px); }

/* Tap-zone feedback */
.kr-zone { position: absolute; top: 0; bottom: 0; width: 30%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.kr-zone-prev { left: 0; background: linear-gradient(to right, rgba(210,166,111,.22), transparent); }
.kr-zone-next { right: 0; background: linear-gradient(to left, rgba(210,166,111,.22), transparent); }
.kr-zone.is-on { opacity: 1; transition: none; }

/* Desktop arrows: softer, larger hit */
.kr-arrow { border-radius: 999px; width: 48px; height: 48px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.kr-arrow svg { width: 24px; height: 24px; }

/* Panel & popover */
.kr-panel { border-radius: 0 18px 18px 0; }
.kr-book-card { padding: 12px; border-radius: 14px; background: var(--hover); }
.kr-pop { border-radius: 18px; }
.kr-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.kr-pop-foot .kr-link { font-size: 13px; font-weight: 600; color: var(--gold-ink); text-decoration: none; padding: 4px 0; }
.kr[data-theme="dark"] .kr-pop-foot .kr-link { color: var(--gold); }
.kr-pop-foot .kr-link:hover { text-decoration: underline; }

/* Loading screen */
.kr-loading { gap: 14px; }
.kr-loading .kr-wordmark-lg { margin-bottom: 10px; }

/* Welcome guide */
.kr-guide { background: rgba(10,14,28,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kr-guide-card { max-width: 460px; padding: 26px 24px 22px; }
.kr-guide-card h2 { margin-top: 12px; }
.kr-guide-lead { margin-top: 0 !important; }
.kr-guide-zones { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 6px; margin: 16px 0 14px; }
.kr-guide-zones span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 12px; background: var(--hover); font-size: 13px; font-weight: 700; color: var(--ink); }
.kr-guide-zones span.is-mid { background: rgba(210,166,111,.18); }
.kr-guide-zones b { font-size: 22px; line-height: 1; color: var(--gold-ink); }
.kr[data-theme="dark"] .kr-guide-zones b { color: var(--gold); }
.kr-guide-zones small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.kr-guide-list { list-style: none; margin: 0 0 6px; padding: 0; text-align: left; font-size: 13.5px; color: var(--muted); }
.kr-guide-list li { padding: 7px 2px; border-top: 1px solid var(--line); }
.kr kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--paper); color: var(--ink); font: 700 12px/1.5 var(--font); text-align: center; }
.kr[data-theme="dark"] kbd { background: #232326; }
@media (hover: none) { .kr-guide-list li:first-child kbd { display: none; } }
.kr-cta { border: 0; cursor: pointer; font: inherit; font-weight: 700; margin-right: 0; }

@media (max-width: 600px) {
  .kr-wordmark-top { display: none; }
  .kr-guide-card { padding: 22px 16px 18px; }
  .kr-panel { border-radius: 0; }
}

@media print { body * { display: none !important; } body::after { content: "Printing is not available for this eBook."; display: block !important; } }