/* Keyboard-only focus ring. :focus-visible never fires on touch/mouse, so the
phone visuals are unchanged, but keyboard / switch users can see focus. */
:focus-visible { outline: 2px solid var(--kk-acc-line, #5cc8ff); outline-offset: 2px; }
/* Otoyomi v2 — Phase 1b: Kiku Dark Refined.
All theming via --kk-* tokens so Phase 6 can re-skin cleanly.
Mobile-first; primary target is 360x800 Chrome Android. */
/* Web fonts are loaded NON-blocking via a in
index.html (was a render-blocking @import here, which stalled first paint by
~0.5s while Google Fonts CSS was fetched, and hung offline). System fonts show
instantly; the web fonts swap in when ready (display=swap). */
:root,
[data-theme="dark"] {
--kk-bg: #14171a;
--kk-bg-2: #181c20;
--kk-surface: #1f2429;
--kk-surface-2: #262c32;
--kk-line: #2a3138;
--kk-line-2: #353d45;
--kk-text: #e8ebe6;
--kk-text-2: #a3a99f;
--kk-text-3: #6b7166;
--kk-text-4: #444842;
--kk-active: #ffffff;
--kk-acc: #9bbf7a;
--kk-acc-soft: rgba(155, 191, 122, 0.16);
--kk-acc-line: rgba(155, 191, 122, 0.36);
--kk-acc-glow: rgba(155, 191, 122, 0.55);
--kk-warn: #d8a96b;
--kk-danger: #d57676;
--kk-done: #7aaf5a;
--kk-r-2xs: 2px;
--kk-r-xs: 3px;
--kk-r-sm: 6px;
--kk-r-md: 10px;
--kk-r-lg: 16px;
--kk-r-pill: 999px;
/* Spacing scale (values match the ones already used across the app, so
swapping a hardcoded px for one of these never changes the layout). */
--kk-space-2xs: 2px;
--kk-space-xs: 4px;
--kk-space-sm: 6px;
--kk-space-md: 8px;
--kk-space-lg: 10px;
--kk-space-xl: 12px;
--kk-space-2xl: 14px;
--kk-space-3xl: 16px;
--kk-space-4xl: 24px;
/* Font-size scale (UI text). Body workhorse is 13px; reader font is set
separately by the font settings, not from these. */
--kk-text-2xs: 10px;
--kk-text-xs: 11px;
--kk-text-sm: 12px;
--kk-text-base: 13px;
--kk-text-md: 14px;
--kk-text-lg: 16px;
--kk-text-xl: 18px;
--kk-text-2xl: 22px;
/* Named stacking layers — mirror the z-map noted in index.html comments. */
--kk-z-content: 8;
--kk-z-fnbar: 10;
--kk-z-util: 11;
--kk-z-pomocap: 14;
--kk-z-float: 15;
--kk-z-sheet-dim: 19;
--kk-z-sheet: 20;
--kk-z-chap: 21;
--kk-z-confirm: 25;
/* Shadow colors (themeable: tweak once instead of editing every shadow). */
--kk-shadow: rgba(0, 0, 0, 0.25);
--kk-shadow-strong: rgba(0, 0, 0, 0.45);
--kk-font-jp: 'Klee One', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
--kk-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--kk-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-top: env(safe-area-inset-top, 0px);
}
/* Smooth book-accent swap on the highest-impact consumers. Listing them
individually (instead of using @property on --kk-acc) avoids the registered
custom-property quirk where inline style.setProperty stops cascading. */
.kk-bot-main,
.kk-mini-pp,
.kk-mini-bar > i,
.kk-m4b-controls .kk-m4b-play,
.kk-m4b-prog > i,
.kk-mini-badge,
.kk-study-clear-pill,
.kk-srch-sel-check.is-on,
.kk-card-sel-badge,
.kk-srch-card-sel-badge,
.kk-srch-card.is-selected {
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
[data-theme="light"] {
--kk-bg: #f0ebe4;
--kk-bg-2: #e8e1d8;
--kk-surface: #f5f2ed;
--kk-surface-2: #ece7df;
--kk-line: #ddd6cc;
--kk-line-2: #ccc4b8;
--kk-text: #2a2a28;
--kk-text-2: #5a5a55;
--kk-text-3: #8a8a82;
--kk-text-4: #b0aca4;
--kk-active: #1a1a18;
--kk-acc: #5a8c4a;
--kk-acc-soft: rgba(90, 140, 74, 0.12);
--kk-acc-line: rgba(90, 140, 74, 0.28);
--kk-warn: #b8863a;
--kk-danger: #c05050;
--kk-done: #4a8a3a;
}
[data-theme="matcha"] {
--kk-bg: #1a2318;
--kk-bg-2: #1f2a1c;
--kk-surface: #242f20;
--kk-surface-2: #2a3726;
--kk-line: #2f3d2a;
--kk-line-2: #3a4a33;
--kk-text: #d4dcc9;
--kk-text-2: #a8b59a;
--kk-text-3: #7a8a6a;
--kk-text-4: #5a6a4a;
--kk-active: #e8f0da;
--kk-acc: #8ab86a;
--kk-acc-soft: rgba(138, 184, 106, 0.16);
--kk-acc-line: rgba(138, 184, 106, 0.36);
--kk-warn: #c4a060;
--kk-danger: #b06060;
--kk-done: #6aaa4a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body, * {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input, textarea, [contenteditable="true"] {
user-select: text;
-webkit-user-select: text;
}
body {
margin: 0;
background: var(--kk-bg);
color: var(--kk-text);
font: 14px/1.5 var(--kk-font-ui);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
overscroll-behavior: contain;
overflow: hidden;
}
/* Hide scrollbars */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; touch-action: manipulation; }
.hidden { display: none !important; }
.muted { color: var(--kk-text-3); }
.gpu-layer { transform: translateZ(0); will-change: transform, opacity; }
/* Home scroll — initial CSS variable defaults */
.kk-lib-scroll {
--sy: 0; --hero-o: 1; --title-o: 1; --bar-a: 0; --blur: none;
--stats-o: 0; --resume-o: 1; --s1: 0; --s2: 0; --s3: 0; --s4: 0;
}
/* Japanese rendering — single rule used by every screen.
Phase 2 will add