/* Tanuki Sensei — UiKit design tokens + slide renderer. Self-hosted fonts below (offline-capable in the Hybrid host); Hebrew falls back to the host-loaded "Noto Sans Hebrew" (Google Fonts link) or the system Hebrew font. */ @font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.ttf") format("truetype"); } @font-face { font-family: "Klee One"; font-weight: 600; font-display: swap; src: url("../fonts/KleeOne-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Noto Sans JP"; font-weight: 400; font-display: swap; src: url("../fonts/NotoSansJP-Regular.ttf") format("truetype"); } @font-face { font-family: "Noto Sans JP"; font-weight: 700; font-display: swap; src: url("../fonts/NotoSansJP-Bold.ttf") format("truetype"); } /* Burmese (my): Padauk is the gold-standard Unicode Myanmar font with correct complex-script shaping (stacked consonants, medials, tone marks) — system Myanmar fonts render it inconsistently. Self-hosted so the offline Hybrid host is covered; the --ts-my stack still falls back to the OS Myanmar font. */ @font-face { font-family: "Padauk"; font-weight: 400; font-display: swap; src: url("../fonts/Padauk-Regular.ttf") format("truetype"); } @font-face { font-family: "Padauk"; font-weight: 700; font-display: swap; src: url("../fonts/Padauk-Bold.ttf") format("truetype"); } /* Font-scale hook (Settings → Font size). JS sets --ts-font-scale on ; rem-based sizes in the app shell + pages scale with it. */ html { font-size: calc(16px * var(--ts-font-scale, 1)); } :root { --ts-cream: #FCFBF7; --ts-cream-2: #F5F1E8; --ts-ink: #3A322E; --ts-muted: #8A7F76; --ts-line: #E9E2D5; /* Japanese glyph colour (kana/kanji) — light blue, readable on the white cells/tiles AND on the cream/dark cards. Used everywhere kana render so they never blend into a near-white surface. */ --ts-kana: #3D80CC; /* Romaji reading colour — orange, distinct from the blue kana it sits under. */ --ts-romaji: #CC6A12; --ts-indigo: #3F3D9E; --ts-indigo-soft: #E5E4FA; --ts-violet: #7C3AED; --ts-violet-soft: #EDE5FB; --ts-amber: #B26A00; --ts-amber-soft: #FBEFD2; /* Turquoise — the Announcement tone. Dark enough to read as body text on cream. */ --ts-teal: #0F766E; --ts-teal-soft: #D5F1EE; --ts-accent: var(--ts-indigo); --ts-accent-soft: var(--ts-indigo-soft); --ts-radius: 22px; --ts-shadow: 0 10px 30px rgba(58, 50, 46, .10); --ts-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --ts-he: "Noto Sans Hebrew", sans-serif; /* Burmese UI stack: bundled Padauk first, then OS Myanmar fonts, then Latin UI for romaji/brand. */ --ts-my: "Padauk", "Myanmar Text", "Noto Sans Myanmar", "Inter", sans-serif; --ts-ui: "Inter", "Segoe UI", var(--ts-jp); --ts-title: "Klee One", var(--ts-jp); } /* ── Dark theme — warm-dark recolour of the cream design system. Applied by setting data-theme="dark" on (Settings → Theme / System). ── */ [data-theme="dark"] { --ts-cream: #211E1B; --ts-cream-2: #2B2723; --ts-ink: #ECE6DD; --ts-muted: #A89E92; --ts-line: #3A352E; --ts-indigo: #8A93FF; --ts-indigo-soft: #2C2B49; --ts-violet: #B79CFB; --ts-violet-soft: #332B49; --ts-amber: #E0A33A; --ts-amber-soft: #3A2F1A; --ts-teal: #5EEAD4; --ts-teal-soft: #173C39; --ts-shadow: 0 10px 30px rgba(0, 0, 0, .45); } [data-theme="dark"] body { background: #1A1714; } .ts-n4 { --ts-accent: var(--ts-violet); --ts-accent-soft: var(--ts-violet-soft); } .ts-stage { display: flex; justify-content: center; padding: 28px 16px; font-family: var(--ts-jp); color: var(--ts-ink); } .ts-card { width: 100%; max-width: 860px; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); padding: 22px 24px 16px; } /* top bar */ .ts-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ts-level { font: 600 12px/1 var(--ts-jp); letter-spacing: .08em; color: #fff; background: var(--ts-accent); padding: 5px 10px; border-radius: 999px; } .ts-en-pill { font: 600 13px var(--ts-jp); color: var(--ts-accent); background: transparent; border: 1.5px solid var(--ts-accent); border-radius: 999px; padding: 4px 14px; cursor: pointer; } .ts-en-pill:hover { background: var(--ts-accent-soft); } /* title */ .ts-title-row { display: flex; align-items: center; gap: 10px; } .ts-title { font: 600 34px/1.25 var(--ts-title); margin: 0; color: var(--ts-kana); } .ts-reading { font-size: 17px; color: var(--ts-romaji); margin: 2px 0 8px; } .ts-title-translation { font-size: 15px; color: var(--ts-muted); margin: -4px 0 10px; font-style: italic; } /* Sensei chip */ .ts-sensei { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; } .ts-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--ts-cream-2); border: 1px solid var(--ts-line); } .ts-bubble { background: var(--ts-cream-2); border: 1px solid var(--ts-line); border-radius: 14px; padding: 8px 12px; font-size: 14px; color: var(--ts-ink); } /* JP body */ .ts-body { white-space: pre-wrap; line-height: 1.9; font-size: 16px; margin: 10px 0; } /* two-marker emphasis */ .ts-teach { background: var(--ts-indigo-soft); color: var(--ts-indigo); font-weight: 600; border-radius: 7px; padding: 1px 6px; } .ts-chg { background: linear-gradient(transparent 55%, var(--ts-amber-soft) 55%); color: var(--ts-amber); font-weight: 600; padding: 0 1px; } /* furigana */ ruby rt { font-size: .55em; color: var(--ts-muted); font-weight: 400; } /* word breakdown */ .ts-wb { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .ts-token { font: 500 20px var(--ts-jp); color: var(--ts-kana); background: var(--ts-cream-2); border: 1px solid var(--ts-line); border-radius: 12px; padding: 6px 12px; cursor: pointer; } .ts-token:hover { border-color: var(--ts-accent); } .ts-popup { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ts-line); border-left: 4px solid var(--ts-accent); border-radius: 12px; padding: 10px 14px; margin: 6px 0 12px; } .ts-popup-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ts-popup-en { color: var(--ts-muted); } /* grammar-role colours (6-role palette) */ .ts-role-topic { box-shadow: inset 0 -3px 0 #2E7D7B; } .ts-role-subject { box-shadow: inset 0 -3px 0 #C0563B; } .ts-role-object { box-shadow: inset 0 -3px 0 #6B4EA0; } .ts-role-verb { box-shadow: inset 0 -3px 0 #2F6FB0; } .ts-role-particle { box-shadow: inset 0 -3px 0 #C99A1E; } .ts-role-modifier { box-shadow: inset 0 -3px 0 #5E8A4B; } .ts-role-adjective { box-shadow: inset 0 -3px 0 #5E8A4B; } .ts-role-copula { box-shadow: inset 0 -3px 0 #9A6BB0; } .ts-role-noun { box-shadow: inset 0 -3px 0 #2E7D7B; } .ts-role-direction { box-shadow: inset 0 -3px 0 #7E57C2; } .ts-role-possessor { box-shadow: inset 0 -3px 0 #C2568A; } .ts-role-question { box-shadow: inset 0 -3px 0 #E0922A; } .ts-role-tag { font-size: 12px; color: #fff; background: var(--ts-muted); border-radius: 999px; padding: 2px 8px; } /* secondary example */ .ts-example { border: 1px dashed var(--ts-accent); border-radius: 14px; padding: 12px 14px; margin: 12px 0; background: #fff; } .ts-example-jp { font: 500 19px var(--ts-jp); color: var(--ts-kana); } /* playable rows */ .ts-playables { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .ts-prow { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ts-line); border-radius: 14px; padding: 8px 12px; } .ts-pnum { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--ts-jp); background: var(--ts-accent-soft); color: var(--ts-accent); } .ts-ptext { display: flex; flex-direction: column; flex: 1 1 auto; } .ts-pjp { font: 500 18px var(--ts-jp); color: var(--ts-kana); } .ts-preading { font-size: 15px; color: var(--ts-romaji); } .ts-pen { font-size: 13px; color: var(--ts-romaji); } /* note */ .ts-note { display: flex; gap: 10px; align-items: flex-start; background: var(--ts-amber-soft); border-radius: 14px; padding: 10px 14px; margin: 12px 0; } .ts-note-i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--ts-jp); background: var(--ts-amber); color: #fff; } /* companion panel */ .ts-panel { position: relative; background: #2C2A3A; color: #F2F0F6; border-radius: 16px; padding: 16px 18px; margin: 12px 0; } .ts-panel-body { white-space: pre-wrap; line-height: 1.7; font-size: 15px; } .ts-panel[dir="rtl"] { font-family: var(--ts-he); text-align: right; } .ts-panel-x { position: absolute; top: 8px; right: 10px; } .ts-panel[dir="rtl"] .ts-panel-x { right: auto; left: 10px; } /* play button */ .ts-play { display: inline-flex; align-items: center; gap: 8px; background: var(--ts-accent); color: #fff; border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; font: 600 14px var(--ts-jp); } .ts-play-sm { padding: 0; width: 34px; height: 34px; justify-content: center; } .ts-play-disc { font-size: 13px; } .ts-play:hover { filter: brightness(1.06); } .ts-play:disabled { opacity: .6; } /* close button */ .ts-x { background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: inherit; opacity: .6; } .ts-x:hover { opacity: 1; } /* footer */ .ts-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .ts-dots { display: flex; gap: 6px; flex-wrap: wrap; } .ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-line); } .ts-dot.on { background: var(--ts-accent); } /* Progress bar for long chapters (too many steps to show as dots). */ .ts-prog { flex: 1 1 auto; max-width: 220px; height: 6px; border-radius: 3px; background: var(--ts-line); overflow: hidden; margin-right: 12px; } .ts-prog-fill { height: 100%; background: var(--ts-accent); border-radius: 3px; transition: width .2s ease; } .ts-next { background: var(--ts-accent); color: #fff; border: none; border-radius: 999px; padding: 9px 22px; cursor: pointer; font: 600 15px var(--ts-jp); } .ts-next:hover { filter: brightness(1.06); } /* ── Exercises ──────────────────────────────────────────────── */ .ts-ex .ts-ex-prompt { white-space: pre-wrap; font: 500 16px var(--ts-jp); line-height: 1.7; margin-bottom: 14px; } .ts-choices { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; } .ts-choices-row { flex-direction: row; flex-wrap: wrap; } .ts-choice { text-align: start; font: 500 16px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1.5px solid var(--ts-line); border-radius: 14px; padding: 12px 16px; cursor: pointer; transition: border-color .12s, background .12s; } .ts-choice:hover:not(:disabled) { border-color: var(--ts-accent); } .ts-choice:disabled { cursor: default; } .ts-choice.sel { border-color: var(--ts-accent); } .ts-choice.correct { background: #E7F4EA; border-color: #4CA45F; color: #2E6B3C; } .ts-choice.wrong { background: #FBE9E7; border-color: #D1685A; color: #9A3B2E; } .ts-choice.muted { opacity: .5; } .ts-stim, .ts-passage, .ts-info { background: var(--ts-cream-2); border: 1px solid var(--ts-line); border-radius: 14px; padding: 14px 16px; margin: 8px 0; } .ts-passage { white-space: pre-wrap; line-height: 1.9; font: 400 15px var(--ts-jp); } .ts-kr-sentence { font: 500 20px var(--ts-jp); color: var(--ts-kana); } .ts-kr-target { background: var(--ts-amber-soft); color: var(--ts-amber); font-weight: 700; border-radius: 6px; padding: 0 4px; } .ts-question { font: 600 16px var(--ts-jp); margin: 12px 0 4px; } .ts-info-title { font: 600 15px var(--ts-jp); margin-bottom: 8px; } .ts-info-row { font: 400 14px ui-monospace, var(--ts-jp); padding: 3px 0; border-bottom: 1px dashed var(--ts-line); white-space: pre-wrap; } .ts-dialogue { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; } .ts-dline { display: flex; flex-direction: column; max-width: 80%; } .ts-dline.me { align-self: flex-end; align-items: flex-end; } .ts-dspeaker { font: 600 12px var(--ts-jp); color: var(--ts-muted); margin: 0 6px 2px; } .ts-dbubble { font: 500 16px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1px solid var(--ts-line); border-radius: 14px; padding: 10px 14px; } .ts-dline.me .ts-dbubble { background: var(--ts-accent-soft); } .ts-dbubble.blank { border-style: dashed; color: var(--ts-muted); } .ts-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; margin: 12px auto; max-width: 360px; } .ts-cell { aspect-ratio: 1; display: grid; place-items: center; font: 500 22px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1.5px solid var(--ts-line); border-radius: 12px; cursor: pointer; } .ts-cell:hover:not(:disabled) { border-color: var(--ts-accent); } .ts-cell.sel { background: var(--ts-accent-soft); border-color: var(--ts-accent); } .ts-cell.correct { background: #E7F4EA; border-color: #4CA45F; } .ts-cell.wrong { background: #FBE9E7; border-color: #D1685A; } .ts-cell.missed { box-shadow: inset 0 0 0 2px #4CA45F; } .ts-bigplay { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--ts-accent); color: #fff; border: none; border-radius: 16px; padding: 16px; font: 600 16px var(--ts-jp); cursor: pointer; margin: 8px 0; } .ts-bigplay:hover { filter: brightness(1.06); } .ts-bigplay-disc { font-size: 20px; } .ts-reveal { font: 500 13px var(--ts-jp); color: var(--ts-accent); background: transparent; border: 1px solid var(--ts-line); border-radius: 999px; padding: 5px 14px; cursor: pointer; margin: 4px 0; } .ts-vexp-img { width: 100%; max-width: 480px; border-radius: 16px; display: block; margin: 8px auto; border: 1px solid var(--ts-line); } .ts-audio-choice { display: flex; align-items: center; gap: 10px; } .ts-answerrow, .ts-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; align-items: center; background: var(--ts-cream-2); border: 1px dashed var(--ts-line); border-radius: 12px; padding: 10px; margin: 8px 0; } .ts-tiles, .ts-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .ts-tile, .ts-pkey { font: 500 17px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1.5px solid var(--ts-line); border-radius: 12px; padding: 8px 14px; cursor: pointer; } .ts-tile:hover:not(:disabled), .ts-pkey:hover:not(:disabled) { border-color: var(--ts-accent); } .ts-tile:disabled { opacity: .4; } .ts-tile.placed { background: var(--ts-accent-soft); border-color: var(--ts-accent); } .ts-slot { font: 600 20px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1.5px solid var(--ts-accent); border-radius: 10px; padding: 6px 12px; cursor: pointer; } .ts-slot:disabled { cursor: default; } .ts-removehint { font-size: 12px; color: var(--ts-muted); margin: 2px 0 8px; } .ts-ph { color: var(--ts-muted); } .ts-submit { background: var(--ts-accent); color: #fff; border: none; border-radius: 999px; padding: 11px 28px; font: 600 15px var(--ts-jp); cursor: pointer; margin: 8px 0; } .ts-submit:disabled { opacity: .5; cursor: default; } .ts-match { display: flex; gap: 16px; margin: 10px 0; } .ts-match-col { display: flex; flex-direction: column; gap: 10px; flex: 1; } .ts-mtile { font: 500 16px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1.5px solid var(--ts-line); border-radius: 12px; padding: 10px 12px; cursor: pointer; } .ts-mtile.sel { border-color: var(--ts-accent); background: var(--ts-accent-soft); } .ts-mtile.done { opacity: .5; } .ts-mtile.ok { background: #E7F4EA; border-color: #4CA45F; } .ts-mtile.no { background: #FBE9E7; border-color: #D1685A; } .ts-tgf-blank { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; } .ts-tgf-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--ts-jp); background: var(--ts-accent-soft); color: var(--ts-accent); } .ts-target { font: 500 16px var(--ts-jp); margin: 8px 0; } .ts-words { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .ts-word { display: flex; align-items: center; gap: 10px; font: 500 17px var(--ts-jp); color: var(--ts-kana); background: #fff; border: 1.5px solid var(--ts-line); border-radius: 12px; padding: 10px 14px; cursor: pointer; } .ts-word.sel { background: var(--ts-accent-soft); border-color: var(--ts-accent); } .ts-word.correct { background: #E7F4EA; border-color: #4CA45F; } .ts-word.wrong { background: #FBE9E7; border-color: #D1685A; } .ts-word.missed { box-shadow: inset 0 0 0 2px #4CA45F; } .ts-wnum { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--ts-cream-2); color: var(--ts-muted); } .ts-wplay { margin-inline-start: auto; color: var(--ts-accent); } .ts-feedback { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 12px 16px; margin: 14px 0 4px; } .ts-feedback.ok { background: #E7F4EA; } .ts-feedback.bad { background: #FBE9E7; } .ts-fb-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; } .ts-feedback.ok .ts-fb-icon { background: #4CA45F; } .ts-feedback.bad .ts-fb-icon { background: #D1685A; } .ts-fb-text { font: 600 15px var(--ts-jp); flex: 1; } .ts-fb-replay, .ts-fb-reset, .ts-fb-reveal { font: 500 13px var(--ts-jp); background: transparent; border: 1px solid rgba(0,0,0,.15); border-radius: 999px; padding: 5px 12px; cursor: pointer; } .ts-fb-reveal { margin-inline-start: auto; } .ts-reveal-answer { margin: 10px 0; font: 500 16px var(--ts-jp); color: var(--ts-kana); } .ts-reveal-answer strong { color: var(--ts-kana); } .ts-word-audio { font-size: 20px; color: var(--ts-accent); } /* ════════════════════════════════════════════════════════════════ App shell + the five core page shells (M4 host-shell milestone). Shared by TanukiSensei.App (Hybrid) and TanukiSensei.Web — written once. ════════════════════════════════════════════════════════════════ */ html, body { margin: 0; } .ts-app { display: flex; min-height: 100vh; background: var(--ts-cream-2); color: var(--ts-ink); font-family: var(--ts-ui); font-size: 1rem; } .ts-app[dir="rtl"] { font-family: var(--ts-he); } /* Burmese chrome uses the Myanmar font stack (keyed on the shell's lang attribute). */ .ts-app[lang="my"], .ts-auth[lang="my"] { font-family: var(--ts-my); } /* ── Navigation rail (side on wide screens, bottom bar on narrow) ── */ .ts-nav { flex: 0 0 240px; display: flex; flex-direction: column; gap: 4px; background: var(--ts-cream); border-inline-end: 1px solid var(--ts-line); padding: 18px 14px; position: sticky; top: 0; height: 100vh; } .ts-nav-brand { display: flex; align-items: center; gap: 10px; font: 600 20px var(--ts-title); padding: 6px 8px 16px; color: var(--ts-ink); } .ts-nav-brand .ts-logo { font-size: 24px; } .ts-nav-logo { width: 100%; max-width: 132px; height: auto; border-radius: 16px; display: block; margin: 2px auto 6px; } .ts-nav-link { display: flex; align-items: center; gap: 12px; font: 500 15px var(--ts-jp); color: var(--ts-ink); text-decoration: none; padding: 11px 14px; border-radius: 12px; cursor: pointer; border: none; background: transparent; text-align: start; width: 100%; } .ts-nav-link:hover { background: var(--ts-cream-2); } .ts-nav-link.active { background: var(--ts-accent-soft); color: var(--ts-accent); font-weight: 600; } .ts-nav-ico { font-size: 18px; width: 22px; text-align: center; } .ts-nav-spacer { flex: 1 1 auto; } /* language picker: one flag button → flag menu (hover a flag = native-name tooltip) */ .ts-langpick { position: relative; padding: 8px; } .ts-langpick-btn, .ts-langpick-menu button { display: flex; align-items: center; justify-content: center; width: 42px; height: 34px; padding: 5px; background: transparent; border: 1.5px solid var(--ts-line); border-radius: 10px; cursor: pointer; } .ts-langpick-btn:hover, .ts-langpick-menu button:hover { background: var(--ts-cream-2); } .ts-langpick img { width: 27px; height: 19px; object-fit: cover; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10); } .ts-langpick-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; border: none; } .ts-langpick-menu { position: absolute; z-index: 61; display: flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 208px; /* 4 flags per row once the catalog grows */ background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 12px; box-shadow: var(--ts-shadow); padding: 8px; } .ts-langpick.down .ts-langpick-menu { top: calc(100% - 2px); inset-inline-end: 8px; } .ts-langpick.up .ts-langpick-menu { bottom: calc(100% - 2px); inset-inline-start: 8px; } .ts-langpick-menu button.on { border-color: var(--ts-accent); background: var(--ts-accent-soft); } /* ── Page content frame ── */ .ts-main { flex: 1 1 auto; min-width: 0; } .ts-page { max-width: 880px; margin: 0 auto; padding: 28px 24px 96px; } .ts-page-h { font: 600 28px var(--ts-title); margin: 0 0 4px; } .ts-page-sub { color: var(--ts-muted); font-size: 14px; margin: 0 0 20px; } .ts-cardp { background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); padding: 18px 20px; margin-bottom: 16px; } .ts-cardp h2 { font: 600 16px var(--ts-jp); margin: 0 0 10px; } .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ts-accent); color: #fff; border: none; border-radius: 14px; padding: 12px 20px; font: 600 15px var(--ts-jp); cursor: pointer; text-decoration: none; } .ts-btn:hover { filter: brightness(1.06); } .ts-btn-block { width: 100%; } .ts-btn-ghost { background: transparent; color: var(--ts-accent); border: 1.5px solid var(--ts-accent); } .ts-btn-ghost:hover { background: var(--ts-accent-soft); filter: none; } .ts-btn-danger { background: #C0392B; } .ts-btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 10px; } /* ── Main menu ── */ .ts-mm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .ts-mm-avatar { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; background: var(--ts-accent-soft); border: 1px solid var(--ts-line); } .ts-mm-welcome { font: 600 22px var(--ts-title); } .ts-mm-name { color: var(--ts-accent); } .ts-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ts-chip { font: 600 13px var(--ts-jp); color: var(--ts-accent); background: var(--ts-accent-soft); border-radius: 999px; padding: 5px 12px; } .ts-continue { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .ts-continue small { font-weight: 400; opacity: .85; font-size: 12px; } .ts-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #E6F4F1; border: 1px solid #B8DED6; border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; } .ts-banner p { margin: 0; font-size: 14px; color: #2E5C54; } /* ── Chapter map (lane-based, horizontal) ── */ .ts-map-scroll { overflow-x: auto; padding: 12px 4px 20px; } .ts-map-lane { display: flex; align-items: center; gap: 0; min-width: max-content; padding: 24px 8px; } .ts-map-seg { display: flex; align-items: center; } .ts-map-connector { width: 46px; height: 3px; background: var(--ts-line); flex: 0 0 auto; } .ts-map-node { display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 0 6px; flex: 0 0 auto; } .ts-map-circle { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; position: relative; font: 600 30px var(--ts-jp); border: 3px solid var(--node-c); background: #fff; color: var(--node-c); } .ts-map-node.passed .ts-map-circle, .ts-map-node.inprogress .ts-map-circle { background: var(--node-c); color: #fff; } .ts-map-node.locked .ts-map-circle { border-color: var(--ts-line); color: var(--ts-muted); background: #F0ECE3; } .ts-map-node.selected .ts-map-circle { box-shadow: 0 0 0 4px var(--ts-cream-2), 0 0 0 6px var(--node-c); } .ts-map-badge { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; border: 2px solid var(--ts-cream-2); } .ts-map-badge.passed { background: #4CA45F; } .ts-map-badge.inprogress { background: var(--ts-accent); } .ts-map-badge.locked { background: var(--ts-muted); } .ts-map-num { font: 600 12px var(--ts-jp); color: var(--ts-muted); } .ts-map-sub { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--ts-jp); color: #fff; border-radius: 999px; padding: 3px 12px; margin-bottom: 4px; } .ts-map-subrow { display: flex; flex-direction: column; align-items: flex-start; } .ts-map-info { border-inline-start: 4px solid var(--node-c, var(--ts-accent)); } .ts-map-info-k { font: 600 40px var(--ts-jp); color: var(--node-c); } /* ── Notebook ── */ .ts-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .ts-tab { font: 600 14px var(--ts-jp); color: var(--ts-muted); background: transparent; border: 1.5px solid var(--ts-line); border-radius: 999px; padding: 8px 18px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; } .ts-tab.on { background: var(--ts-accent); color: #fff; border-color: var(--ts-accent); } .ts-tab .ts-tab-badge { background: rgba(0,0,0,.12); border-radius: 999px; padding: 1px 8px; font-size: 12px; } .ts-search { width: 100%; box-sizing: border-box; font: 400 15px var(--ts-jp); color: var(--ts-ink); background: var(--ts-cream); border: 1.5px solid var(--ts-line); border-radius: 12px; padding: 11px 14px; margin-bottom: 16px; } .ts-nb-group-h { font: 600 14px var(--ts-jp); color: var(--ts-muted); margin: 16px 4px 8px; } .ts-nb-topic { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; } .ts-nb-jp { font: 500 20px var(--ts-jp); } .ts-nb-reading { font-size: 13px; color: var(--ts-muted); } .ts-nb-gloss { flex: 1 1 160px; font-size: 14px; } .ts-tag { font-size: 12px; color: #fff; border-radius: 999px; padding: 2px 10px; } .ts-vocab-row { display: flex; align-items: center; gap: 12px; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; } .ts-vocab-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .ts-vocab-jp { font: 500 19px var(--ts-jp); } .ts-vocab-mean { font-size: 14px; color: var(--ts-ink); } .ts-vocab-tags { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .ts-empty { text-align: center; color: var(--ts-muted); padding: 40px 0; } /* ── Profile ── */ .ts-prof-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 18px; } .ts-prof-avatar { width: 120px; height: 120px; border-radius: 28px; object-fit: cover; background: var(--ts-accent-soft); border: 1px solid var(--ts-line); } .ts-prof-name { font: 600 24px var(--ts-title); } .ts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ts-stat { background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 16px; padding: 16px 10px; text-align: center; } .ts-stat-v { font: 600 28px var(--ts-title); color: var(--ts-accent); } .ts-stat-l { font-size: 12px; color: var(--ts-muted); margin-top: 2px; } .ts-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ── Settings ── */ .ts-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ts-line); } .ts-set-row:last-child { border-bottom: none; } .ts-set-label { font: 500 15px var(--ts-jp); } .ts-set-row input[type="range"] { flex: 1 1 200px; accent-color: var(--ts-accent); max-width: 280px; } .ts-set-row select { font: 500 14px var(--ts-jp); color: var(--ts-ink); background: var(--ts-cream); border: 1.5px solid var(--ts-line); border-radius: 10px; padding: 8px 12px; } .ts-set-val { font-size: 13px; color: var(--ts-muted); min-width: 48px; text-align: end; } .ts-version { text-align: center; color: var(--ts-muted); font-size: 13px; margin-top: 18px; } /* ── Responsive: nav rail → bottom bar on narrow screens ── */ @media (max-width: 720px) { .ts-app { flex-direction: column; } .ts-nav { flex: 0 0 auto; flex-direction: row; align-items: center; height: auto; position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; border-inline-end: none; border-top: 1px solid var(--ts-line); padding: 6px 4px; z-index: 50; box-sizing: border-box; } .ts-nav-brand, .ts-nav-spacer { display: none; } .ts-langpick { padding: 4px; } /* the flag button stays in the bottom bar (menu drops up) */ .ts-nav-link { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 4px; } .ts-nav-ico { font-size: 20px; } .ts-main { padding-bottom: 0; } .ts-page { padding: 20px 16px 90px; } .ts-stats { gap: 8px; } } /* ════════════════════════════════════════════════════════════════ Auth / Intro / Notebook / extra page styles (M4 functional pass). rem-based text so the Settings → Font-size slider scales them. ════════════════════════════════════════════════════════════════ */ /* ── Auth (gate / login) ── */ .ts-auth { min-height: 100vh; background: var(--ts-cream-2); color: var(--ts-ink); font-family: var(--ts-ui); display: flex; flex-direction: column; align-items: center; padding: 24px 16px 48px; } .ts-auth-lang { align-self: flex-end; } .ts-auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .ts-auth-logo { width: 120px; height: 120px; object-fit: cover; border-radius: 24px; align-self: center; box-shadow: var(--ts-shadow); } .ts-auth-gate { align-items: center; text-align: center; gap: 18px; margin-top: 12vh; } .ts-auth-lead { text-align: center; color: var(--ts-muted); font-size: .9rem; margin: 6px 0 0; } .ts-or { text-align: center; color: var(--ts-muted); font-size: .8rem; } .ts-auth-divider { height: 1px; background: var(--ts-line); margin: 8px 0; } .ts-auth-h { font: 600 1.25rem var(--ts-title); text-align: center; margin: 0; } .ts-auth-form { display: flex; flex-direction: column; gap: 10px; } .ts-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ts-muted); } .ts-soon { opacity: .6; font-size: .8em; } .ts-auth-note { font-size: .8rem; color: var(--ts-muted); text-align: center; margin: 4px 0 0; } .ts-auth-error { font-size: .85rem; color: #fff; background: #C0392B; border-radius: 10px; padding: 8px 12px; } [data-theme="dark"] .ts-auth-error { background: #E15B4C; color: #1A1714; } .ts-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ts-line); border-top-color: var(--ts-accent); animation: ts-spin 1s linear infinite; } @keyframes ts-spin { to { transform: rotate(360deg); } } /* ── Intro ── */ .ts-intro { min-height: 100vh; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; width: 100%; } .ts-intro-card { flex: 1 1 auto; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); overflow: hidden; padding-bottom: 18px; } .ts-intro-logo { width: 96px; height: 96px; object-fit: cover; border-radius: 20px; display: block; margin: 18px auto 4px; } .ts-intro-hero { width: 100%; height: 300px; object-fit: cover; display: block; border-radius: 18px 18px 0 0; } .ts-intro-dual { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px 0 8px; } .ts-intro-dual figure { margin: 0; text-align: center; } .ts-intro-dual img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ts-line); } .ts-intro-dual figcaption { font-size: .72rem; color: var(--ts-muted); margin-top: 4px; letter-spacing: .04em; } .ts-intro-arrow { font-size: 1.4rem; color: var(--ts-muted); } .ts-intro-eyebrow { text-align: center; font: 700 .72rem var(--ts-ui); letter-spacing: .12em; color: var(--ts-accent); margin: 14px 0 0; text-transform: uppercase; } .ts-intro-title { font: 600 1.5rem var(--ts-title); text-align: center; margin: 6px 24px 10px; } .ts-intro-body { white-space: pre-wrap; line-height: 1.7; font-size: 1rem; color: var(--ts-ink); padding: 0 28px; } .ts-introchip { background: var(--ts-indigo-soft); color: var(--ts-indigo); font: inherit; font-weight: 600; border: none; border-radius: 6px; padding: 1px 6px; cursor: pointer; white-space: nowrap; } .ts-introchip:hover { filter: brightness(.97); } /* tappable-word popup */ .ts-chip-scrim { position: fixed; inset: 0; background: rgba(61,61,92,.5); display: grid; place-items: center; z-index: 60; padding: 24px; } .ts-chip-card { position: relative; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 18px; box-shadow: var(--ts-shadow); padding: 22px 26px; max-width: 320px; text-align: center; } .ts-chip-x { position: absolute; top: 8px; inset-inline-end: 10px; } .ts-chip-jp { font: 600 36px var(--ts-jp); color: var(--ts-ink); } .ts-chip-romaji { font-size: .9rem; color: var(--ts-muted); letter-spacing: .04em; margin-top: 2px; } .ts-chip-gloss { margin-top: 10px; font-size: .95rem; line-height: 1.5; color: var(--ts-ink); } .ts-intro-bullets { list-style: none; padding: 0 28px; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; } .ts-intro-bullets li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; } .ts-intro-bullets.dot li::before { content: "•"; color: var(--ts-accent); font-weight: 700; } .ts-intro-marker { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 18px var(--ts-jp); background: var(--ts-accent-soft); color: var(--ts-accent); } .ts-intro-signoff { font-style: italic; color: var(--ts-muted); text-align: center; padding: 14px 28px 0; border-top: 1px solid var(--ts-line); margin: 16px 24px 0; } .ts-intro-pick-h { text-align: center; font: 700 .72rem var(--ts-ui); letter-spacing: .12em; color: var(--ts-muted); margin: 16px 0 8px; } .ts-avatar-picker { display: flex; gap: 12px; justify-content: center; } .ts-avatar-opt { padding: 0; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; } .ts-avatar-opt img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; } .ts-avatar-opt.on { border-color: var(--ts-accent); } .ts-avatar-opt.sm img { width: 44px; height: 44px; } .ts-intro-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; } .ts-introchip-nav { background: transparent; border: 1.5px solid var(--ts-line); border-radius: 999px; padding: 8px 16px; color: var(--ts-muted); cursor: pointer; font: 500 .9rem var(--ts-ui); } .ts-introchip-nav:disabled { opacity: .4; cursor: default; } .ts-intro-count { color: var(--ts-muted); font-size: .85rem; } .ts-btn-begin { background: var(--ts-accent); } /* ── Main menu extra ── */ .ts-mm-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .ts-mm-actions .ts-btn { flex: 1 1 200px; } .ts-banner strong { display: block; font-size: .95rem; margin-bottom: 2px; } /* ── Notebook ── */ .ts-nb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ts-nb-title { font: 600 1.6rem var(--ts-title); color: #0F7C72; margin: 0; } [data-theme="dark"] .ts-nb-title, [data-theme="dark"] .ts-nb-subtitle { color: #5FBFB2; } .ts-nb-subtitle { color: #0F7C72; font-size: .85rem; } .ts-nb-sensei { display: flex; align-items: center; gap: 8px; max-width: 220px; } .ts-nb-sensei img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .ts-nb-sensei span { font-size: .8rem; color: var(--ts-muted); } .ts-nb-searchrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .ts-nb-search-ico { font-size: 1rem; } .ts-nb-searchrow .ts-search { flex: 1; } .ts-pathbar { display: flex; align-items: center; gap: 10px; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; position: relative; overflow: hidden; } .ts-path-stripe { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .ts-path-glyph { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 600 22px var(--ts-jp); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); margin-inline-start: 6px; } .ts-path-name { font: 600 1rem var(--ts-ui); flex: 1; } .ts-path-prog { width: 120px; height: 6px; border-radius: 999px; background: var(--ts-line); overflow: hidden; } .ts-path-prog-fill { height: 100%; background: var(--accent); } .ts-path-prog-lbl { font-size: .75rem; color: var(--ts-muted); min-width: 34px; } .ts-chev { color: var(--ts-muted); transition: transform .15s; font-size: 1.2rem; } .ts-chev.open { transform: rotate(90deg); } .ts-chev.sm { font-size: 1rem; } .ts-subdivider { font: 600 .7rem var(--ts-ui); letter-spacing: .1em; color: var(--ts-muted); text-transform: uppercase; margin: 10px 6px 4px; } .ts-chbar { display: flex; align-items: center; gap: 10px; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 12px; padding: 10px 12px; margin: 0 0 6px 16px; cursor: pointer; } .ts-chbar.locked { opacity: .85; cursor: default; } .ts-ch-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 14px var(--ts-ui); color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); } .ts-chbar.locked .ts-ch-num { color: var(--ts-muted); background: var(--ts-cream-2); } .ts-ch-title { flex: 1; font: 500 .95rem var(--ts-ui); } .ts-ch-meta { font-size: .8rem; color: var(--ts-muted); } .ts-pill-done { font: 600 .72rem var(--ts-ui); color: #65C146; background: rgba(101,193,70,.14); border-radius: 999px; padding: 3px 9px; } .ts-ch-locked { font-size: .8rem; color: var(--ts-muted); } .ts-leaves { margin: 0 0 8px 16px; } .ts-leaf { background: var(--ts-cream); border: 1px solid var(--ts-line); border-top: none; padding: 12px 14px; } .ts-leaf:first-child { border-top: 1px solid var(--ts-line); border-radius: 12px 12px 0 0; } .ts-leaf:last-child { border-radius: 0 0 12px 12px; } .ts-leaf.has-note { cursor: pointer; } .ts-leaf-head { display: flex; align-items: baseline; gap: 10px; } .ts-leaf-jp { font: 500 1.15rem var(--ts-jp); } .ts-leaf-reading { font-size: .8rem; color: var(--ts-muted); } .ts-leaf-head .ts-chev { margin-inline-start: auto; } .ts-leaf-gloss { font-size: .9rem; color: var(--ts-muted); margin: 4px 0; } .ts-leaf-ex { font: 400 1rem var(--ts-jp); margin: 6px 0; } .ts-leaf-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ts-cat { font: 500 .72rem var(--ts-ui); color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-radius: 999px; padding: 2px 9px; } .ts-leaf-note { background: var(--ts-amber-soft); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: .88rem; line-height: 1.5; } .ts-filterbar { margin-bottom: 8px; } .ts-filter-h { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--ts-ink); font: 500 .9rem var(--ts-ui); cursor: pointer; padding: 4px 0; } .ts-filter-h strong { color: var(--ts-accent); } .ts-chiprow { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; } .ts-fchip { font: 500 .8rem var(--ts-ui); color: var(--ts-muted); background: var(--ts-cream); border: 1.5px solid var(--ts-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; } .ts-fchip.on { color: #fff; background: var(--c, var(--ts-accent)); border-color: var(--c, var(--ts-accent)); } .ts-fchip.star.on { background: #E6A100; border-color: #E6A100; } .ts-sortrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; } .ts-sortrow > span { font-size: .85rem; color: var(--ts-muted); } .ts-vgroup-h { display: flex; align-items: center; gap: 8px; font: 600 .8rem var(--ts-ui); color: var(--ts-muted); margin: 16px 4px 8px; } .ts-vgroup-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ts-accent)); } .ts-vgroup-h.letter { font: 600 1rem var(--ts-jp); color: var(--ts-ink); } .ts-vgroup-h.letter::before { background: var(--ts-accent); } .ts-vrow { background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; } .ts-vrow-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; } .ts-star { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--ts-line); padding: 0; } .ts-star.on { color: #E6A100; } .ts-vrow-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ts-vrow-jp { font: 500 1.2rem var(--ts-jp); } .ts-vrow-reading { font-size: .75rem; color: var(--ts-muted); margin-inline-start: 8px; } .ts-vrow-romaji { font-size: .72rem; color: var(--ts-muted); } .ts-vrow-en { font-size: .88rem; } .ts-vrow-tags { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .ts-vrow-detail { padding: 0 14px 14px; border-top: 1px dashed var(--ts-line); } .ts-vdetail-lbl, .ts-formgroup-lbl { font: 600 .72rem var(--ts-ui); letter-spacing: .08em; color: var(--ts-muted); text-transform: uppercase; margin: 12px 0 6px; } .ts-vex-en { font-size: .82rem; color: var(--ts-muted); } .ts-form-row { display: flex; gap: 12px; padding: 3px 0; } .ts-form-lbl { width: 120px; flex: 0 0 auto; font-size: .82rem; color: var(--ts-muted); } .ts-form-val { font: 500 1rem var(--ts-jp); } .ts-kanji-legend { font-size: .8rem; color: var(--ts-muted); margin: 0 0 10px; } .ts-kanji-mark { color: var(--ts-accent); font-weight: 700; } .ts-kanji-card { background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; } .ts-kanji-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; } .ts-kanji-glyph { font: 600 2rem var(--ts-jp); color: var(--ts-accent); width: 48px; text-align: center; flex: 0 0 auto; } .ts-kanji-main { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; } .ts-kanji-meaning { font: 500 .95rem var(--ts-ui); } .ts-kanji-readings { font-size: .8rem; color: var(--ts-muted); font-family: var(--ts-jp); } .ts-radical-chip { font: 600 .7rem var(--ts-ui); color: #fff; background: var(--ts-accent); border-radius: 999px; padding: 3px 10px; flex: 0 0 auto; } .ts-kanji-detail { padding: 0 14px 14px; border-top: 1px dashed var(--ts-line); } .ts-kanji-example-row { margin: 4px 0 10px; } .ts-kanji-example-jp { font: 400 1rem var(--ts-jp); display: flex; align-items: center; gap: 8px; } .ts-kanji-word-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; } /* ── Bug flag: fixed-position "report a problem" button + popover form (mounted once in the shell) ── Logical inset properties so it mirrors correctly under RTL; raised above the bottom nav bar <720px. */ .ts-bugflag { position: fixed; inset-block-end: 24px; inset-inline-end: 20px; z-index: 55; } .ts-bugflag-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: var(--ts-cream); border: 1.5px solid var(--ts-line); box-shadow: var(--ts-shadow); cursor: pointer; } .ts-bugflag-btn:hover { background: var(--ts-cream-2); } .ts-bugflag-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; border: none; } .ts-bugflag-panel { position: absolute; z-index: 61; inset-inline-end: 0; inset-block-end: calc(100% + 10px); width: min(320px, 84vw); background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); padding: 14px; } .ts-bugflag-title { font: 600 .95rem var(--ts-ui); margin-bottom: 8px; } .ts-bugflag-text { width: 100%; min-height: 90px; resize: vertical; box-sizing: border-box; font: 400 .88rem var(--ts-ui); border: 1.5px solid var(--ts-line); border-radius: 10px; padding: 8px 10px; } .ts-bugflag-status { font-size: .82rem; color: var(--ts-accent); margin-top: 8px; } .ts-bugflag-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } @media (max-width: 720px) { .ts-bugflag { inset-block-end: 84px; } /* clears the fixed bottom nav bar */ } /* ── Settings extra ── */ .ts-dl-size { color: var(--ts-muted); font-weight: 400; font-size: .8rem; margin-inline-start: 6px; } .ts-dl-bundled { font-size: .8rem; color: var(--ts-muted); } /* ── Chapter flow (Learn → Practice → Test) ── */ .ts-flow { max-width: 900px; margin: 0 auto; padding-bottom: 40px; } .ts-flow-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ts-line); } .ts-flow-close { background: none; border: none; font-size: 1.1rem; color: var(--ts-muted); cursor: pointer; } .ts-flow-help { margin-inline-start: auto; width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--ts-border); background: var(--ts-surface-2, #f0f0f0); color: var(--ts-romaji, #3d5afe); font-weight: 800; font-size: 1rem; cursor: pointer; flex: 0 0 auto; } .ts-flow-title { flex: 1; font: 600 1rem var(--ts-ui); } .ts-flow-phase { font-size: .8rem; color: var(--ts-accent); font-weight: 600; } .ts-flow-foot { display: flex; justify-content: flex-end; max-width: 860px; margin: 0 auto; padding: 0 24px; } .ts-flow-empty { text-align: center; } .ts-flow-kanji { font: 600 64px var(--ts-jp); color: var(--ts-accent); margin: 24px 0 8px; } .ts-flow-result { text-align: center; padding-top: 48px; } .ts-result-icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; font-size: 44px; color: #fff; } .ts-result-icon.ok { background: #43A047; } .ts-result-icon.bad { background: #C0392B; } .ts-result-score { font: 700 48px var(--ts-title); margin: 8px 0; } .ts-result-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; } /* Section tabs (Learn / Practice / Test) */ .ts-flow-tabs { display: flex; gap: 6px; } .ts-flow-tab { font: 600 .85rem var(--ts-ui); padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ts-line); background: var(--ts-cream); color: var(--ts-muted); cursor: pointer; } .ts-flow-tab.on { background: var(--ts-accent-soft); border-color: var(--ts-accent); color: var(--ts-accent); } /* Section banner + progress */ .ts-flow-banner { max-width: 860px; margin: 14px auto 4px; padding: 0 24px; font: 700 .8rem var(--ts-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ts-accent); } .ts-flow-progress { display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 0 auto 8px; padding: 0 24px; } .ts-flow-progress .ts-prog { flex: 1; } .ts-flow-progress-lbl { font-size: .8rem; color: var(--ts-muted); white-space: nowrap; } .ts-flow-foot-side { justify-content: center; margin-top: 14px; } /* Transition / intro / result cards */ .ts-flow-card { max-width: 520px; margin: 32px auto; text-align: center; background: var(--ts-cream); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 28px 24px; box-shadow: var(--ts-shadow); } .ts-flow-card-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: block; } .ts-flow-card h1 { font: 600 1.4rem var(--ts-title); margin: 6px 0; } .ts-flow-card p { color: var(--ts-ink); line-height: 1.7; margin: 8px 0; } .ts-flow-card-summary { font-weight: 600; } .ts-flow-card-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; font-size: 30px; color: #fff; } .ts-flow-card-icon.ok { background: #43A047; } .ts-flow-card-icon.bad { background: #C0392B; } /* ── Mock exam (MockExamPage) ─────────────────────────────────────────────── */ .ts-exam-hub { position: relative; text-align: center; } .ts-exam-hub .ts-flow-close { position: absolute; top: 12px; inset-inline-start: 12px; } .ts-exam-mocks { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 18px auto; } .ts-exam-mockrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--ts-card, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.08); } .ts-exam-mockinfo { text-align: start; } .ts-exam-mocktitle { font-weight: 700; } .ts-exam-mockstatus { font-size: .85rem; opacity: .75; } .ts-exam-mockstatus.ok { color: #2E7D32; opacity: 1; } .ts-exam-mockstatus.bad { color: #C62828; opacity: 1; } .ts-exam-attempts { margin-inline-start: 8px; opacity: .6; } .ts-exam-disclaimer { font-size: .8rem; opacity: .6; max-width: 560px; margin: 10px auto 24px; } .ts-exam-secno { font-size: .85rem; opacity: .7; } .ts-exam-secjp { font-size: 1.5rem; margin: 6px 0; } .ts-exam-facts { display: flex; gap: 18px; justify-content: center; margin: 12px 0; font-weight: 700; } .ts-exam-rules { font-size: .9rem; opacity: .8; } .ts-exam-practicetoggle { display: flex; gap: 8px; align-items: flex-start; text-align: start; font-size: .9rem; background: rgba(2,136,209,.08); border-radius: 10px; padding: 10px 12px; margin: 10px 0; cursor: pointer; } .ts-exam-top { position: relative; } .ts-exam-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; padding: 2px 10px; border-radius: 8px; background: rgba(0,0,0,.08); } .ts-exam-timer.warn { background: #FFD54F; animation: ts-exam-pulse 1s infinite; } @keyframes ts-exam-pulse { 50% { opacity: .55; } } .ts-exam-pause { border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; } .ts-exam-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 60; padding: 16px; } .ts-exam-verdict { font-weight: 900; font-size: 1.3rem; padding: 10px 22px; border-radius: 999px; display: inline-block; margin: 18px auto 6px; color: #fff; } .ts-exam-verdict.ok { background: #2E7D32; } .ts-exam-verdict.bad { background: #C62828; } .ts-exam-result, .ts-exam-review { text-align: center; } .ts-exam-cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; } .ts-exam-card { min-width: 130px; padding: 12px 14px; border-radius: 14px; background: var(--ts-card, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.08); } .ts-exam-cardname { font-size: .8rem; opacity: .75; } .ts-exam-cardscore { font-size: 1.3rem; font-weight: 800; margin-top: 4px; } .ts-exam-cardpct { font-size: .85rem; opacity: .6; } .ts-exam-rulespanel { max-width: 480px; margin: 10px auto; padding: 12px 16px; border-radius: 14px; background: var(--ts-card, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.08); text-align: start; } .ts-exam-rulehead { font-weight: 800; margin: 12px 0 6px; } .ts-exam-rule { display: flex; gap: 8px; padding: 4px 0; } .ts-exam-rule.ok span { color: #2E7D32; font-weight: 800; } .ts-exam-rule.bad span { color: #C62828; font-weight: 800; } .ts-exam-note { max-width: 480px; margin: 8px auto; padding: 10px 14px; border-radius: 10px; background: rgba(255,193,7,.15); font-size: .9rem; } .ts-exam-perfect { color: #2E7D32; font-weight: 700; } .ts-exam-wrong { max-width: 520px; margin: 8px auto; padding: 10px 14px; border-radius: 12px; background: var(--ts-card, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.08); text-align: start; } .ts-exam-wrongrow { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; } .ts-exam-wrongrow span { font-size: .8rem; opacity: .7; min-width: 110px; } .ts-exam-wrongrow.bad strong { color: #C62828; } .ts-exam-wrongrow.ok strong { color: #2E7D32; }