:root {
  --brand:#b8442b; --brand-dark:#943522; --amber:#e6a21a;
  --paper:#fff9ee; --surface:#fffcf6; --surface-raised:#fffefb; --surface-highlight:#fff;
  --surface-soft:#f7ead1; --surface-control:#fffaf1; --surface-hover:#f8eedc;
  --surface-selected:#f9e1d9; --surface-pill:#f5e5be;
  --ink:#1f2522; --muted:#6d665d; --ink-warm:#805212; --ink-pill:#755000;
  --border:#e8dcc6; --border-accent:#d58b78; --border-selected:#e3ae9f;
  --link:#28637a; --green:#34765e; --on-brand:#fff;
  --graph-surface:#fffdf8; --graph-dot:#e7d6bd; --graph-border:#f0e6d5;
  --speaker-surface:#cfe0ff; --speaker-ink:#315b8d;
  --shadow-soft:#49392a12; --shadow-card:#49392a14; --shadow-highlight:#49392a20;
}
.practice-status-badge { align-items:center; background:var(--surface-soft); border-radius:50%; display:flex; font-size:11px; font-weight:800; height:20px; justify-content:center; line-height:1; width:20px; }.practice-status-badge[hidden] { display:none; }.practice-status-badge.is-learned { background:#d9eee2; color:#287354; }.practice-status-badge.is-learning { background:#ffeadf; color:var(--brand); }
.practice-status-badge { justify-self:end; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.45 Inter, sans-serif; }
.graph { transition:opacity .18s ease,transform .18s ease; }.graph.is-changing-word { opacity:.12; transform:scale(.975); }@media (prefers-reduced-motion:reduce) { .graph { transition:none; } }
.quick-review-card { display:flex; flex-direction:column; gap:12px; }.quick-review-head { align-items:flex-start; display:flex; justify-content:space-between; }.quick-review-head .eyebrow { margin-bottom:4px; }.quick-review-link { color:var(--link); font-size:12px; font-weight:700; text-decoration:none; }.quick-review-actions { display:grid; gap:9px; grid-template-columns:1fr 1fr; }.quick-review-actions button { align-items:center; border-radius:10px; display:grid; gap:0 9px; grid-template-columns:20px minmax(0,1fr); padding:10px; text-align:left; }.quick-review-actions button > svg { grid-row:1; height:18px; width:18px; }.quick-review-label { display:grid; gap:3px; grid-column:2; grid-row:1; min-width:0; }.quick-review-actions button strong { font-size:13px; line-height:1.2; }.quick-review-actions small { font-size:10px; font-weight:500; line-height:1.25; }.quick-review-status { color:var(--green); font-size:11px; font-weight:700; margin:0; min-height:16px; }
article.study-card > p.quick-review-status { min-height:0; }
.quick-review-actions button:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.practice-shell { margin:0 auto; max-width:620px; padding:48px 22px; text-align:center; }.practice-shell h1 { font:600 42px/1 'Noto Serif JP',serif; margin:7px 0; }.practice-intro,.practice-count { color:var(--muted); }.practice-tabs { display:flex; gap:8px; justify-content:center; margin:24px 0 8px; }.practice-tabs button { background:var(--surface); border:1px solid var(--border); border-radius:999px; color:var(--muted); font-weight:700; padding:8px 12px; }.practice-tabs button.is-active { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }.practice-card { background:transparent; border:0; margin:22px 0 14px; min-height:330px; padding:0; perspective:1200px; }.practice-card-inner { min-height:330px; position:relative; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.75,.25,1); }.practice-card-inner.is-flipped { transform:rotateY(180deg); }.practice-card-face { align-items:center; backface-visibility:hidden; background:var(--surface); border:1px solid var(--border); border-radius:20px; display:flex; flex-direction:column; inset:0; justify-content:center; padding:24px; position:absolute; }.practice-card-back { transform:rotateY(180deg); }.practice-kanji { color:var(--brand); font:600 120px/1 'Noto Serif JP',serif; }.practice-kanji-small { font-size:72px; }.practice-card h2 { font:600 28px 'Noto Serif JP',serif; margin:17px 0; }.practice-flip-hint { color:var(--muted); font-size:11px; margin-top:22px; }.practice-answer { border-top:1px solid var(--border); margin-top:18px; padding-top:16px; width:min(100%,360px); }.practice-answer ruby { font:600 25px 'Noto Serif JP',serif; }.practice-answer rt { color:var(--muted); font:13px Inter,sans-serif; }.practice-answer p { color:var(--muted); font-size:17px; margin:12px 0 0; }.practice-reveal { align-items:center; display:flex; justify-content:center; min-height:52px; }.practice-reveal button { background:var(--brand); border:0; border-radius:10px; color:var(--on-brand); font-size:16px; font-weight:700; padding:13px 28px; }.practice-actions { display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-top:14px; }.practice-actions button { border-radius:11px; font-size:16px; font-weight:700; padding:12px; }.practice-actions small { font-size:10px; font-weight:500; }.practice-forget { background:#fff0e8; border:1px solid var(--border-selected); color:var(--brand-dark); }.practice-remember { background:#e8f3ed; border:1px solid #9ac7ab; color:#276247; }
.stroke-order-controls { align-items:center; display:flex; gap:9px; justify-content:flex-end; margin:-4px 36px 12px 0; }.stroke-order-controls label { color:var(--muted); font-size:12px; font-weight:700; }.stroke-order-controls select,.stroke-order-controls button { background:var(--paper); border:1px solid var(--border); border-radius:7px; color:var(--ink); font:inherit; padding:6px 8px; }.stroke-order-controls button { color:var(--brand); cursor:pointer; font-size:12px; font-weight:700; }
.about-shell { margin:0 auto; max-width:760px; padding:56px 24px; }.about-shell h1 { font:600 42px/1.1 'Noto Serif JP',serif; margin:5px 0 12px; }.about-shell section { background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-top:15px; padding:18px 20px; }.about-shell h2 { font-size:17px; margin:0 0 7px; }.about-shell p { color:var(--muted); margin:0; }.about-shell a { color:var(--link); }.about-credit { font-size:12px; margin-top:20px !important; }.stroke-order-modal { background:transparent; border:0; padding:0; width:min(460px,calc(100vw - 32px)); }.stroke-order-modal::backdrop { background:#1f2522a8; backdrop-filter:blur(3px); }.stroke-order-shell { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:25px; position:relative; }.stroke-order-close { background:transparent; border:0; color:var(--muted); font-size:30px; position:absolute; right:12px; top:10px; }.stroke-order-canvas { align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:14px; display:flex; justify-content:center; min-height:320px; padding:20px; }.stroke-order-canvas svg { height:min(360px,70vw); max-width:100%; width:auto; }.stroke-order-canvas path { fill:none; stroke:#b8442b; stroke-linecap:round; stroke-linejoin:round; stroke-width:4; }.stroke-order-credit { color:var(--muted); font-size:10px; margin:12px 0 0; text-align:center; }@keyframes stroke-reveal { to { stroke-dashoffset:0; } }
/* Editorial/OCR workflow indicators are private to editors and admins. */
.public-user .sidebar-status,.public-user .kanji-row .grade { display:none; }
.public-user .kanji-row { grid-template-columns:32px minmax(0,1fr) auto; }
.virtual-kanji-inner { min-height:100%; position:relative; }
.virtual-list-initial { display:grid; gap:9px; padding:8px 0; }.virtual-list-initial.is-error { color:var(--muted); font-size:12px; line-height:1.6; padding:18px 10px; text-align:center; }.virtual-list-initial.is-error button { background:var(--surface); border:1px solid var(--border); border-radius:7px; color:var(--brand); font-weight:700; margin-top:8px; padding:6px 10px; }.virtual-list-skeleton { align-items:center; display:grid; gap:9px; grid-template-columns:32px 1fr; min-height:54px; padding:7px; }.virtual-list-skeleton > span,.virtual-list-skeleton b,.virtual-list-skeleton small { animation:list-skeleton-pulse 1.3s ease-in-out infinite; background:linear-gradient(90deg,#eee7db,#f7f2e9,#eee7db); background-size:200% 100%; border-radius:7px; display:block; }.virtual-list-skeleton > span { border-radius:50%; height:32px; width:32px; }.virtual-list-skeleton i { display:grid; gap:7px; }.virtual-list-skeleton b { height:11px; width:58%; }.virtual-list-skeleton small { height:9px; width:86%; animation-delay:.12s; }.virtual-list-skeleton:nth-child(even) b { animation-delay:.18s; }.virtual-list-skeleton:nth-child(even) small { animation-delay:.28s; }.dark .virtual-list-skeleton > span,.dark .virtual-list-skeleton b,.dark .virtual-list-skeleton small { background:linear-gradient(90deg,#393d35,#484c43,#393d35); background-size:200% 100%; }@keyframes list-skeleton-pulse { 50% { opacity:.58; background-position:100% 0; } }@media (prefers-reduced-motion:reduce) { .virtual-list-skeleton > span,.virtual-list-skeleton b,.virtual-list-skeleton small { animation:none; } }
.virtual-sticky-grade { align-items:baseline; background:color-mix(in srgb,var(--surface) 94%,transparent); border-bottom:1px solid var(--border); display:flex; height:27px; justify-content:space-between; padding:5px 9px; pointer-events:none; position:sticky; top:0; z-index:4; }.virtual-sticky-grade-title { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.04em; }.virtual-sticky-grade-count { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:0; }
.virtual-kanji-inner .kanji-row,.virtual-grade-heading { left:0; position:absolute; right:0; }
.virtual-grade-heading { align-items:center; border-bottom:1px solid var(--border); color:var(--muted); display:flex; font-size:11px; font-weight:700; justify-content:space-between; letter-spacing:.06em; margin:0 7px; padding:0 1px; text-transform:uppercase; }
.virtual-grade-heading span:first-child { color:var(--brand); }
.virtual-list-status { align-items:center; color:var(--muted); display:flex; font-size:11px; font-style:italic; justify-content:center; left:0; position:absolute; right:0; }
.virtual-previous-loading { align-self:start; color:var(--muted); font-size:11px; height:0; line-height:30px; min-height:0; pointer-events:none; position:sticky; text-align:center; top:27px; visibility:visible; z-index:5; }.virtual-previous-loading.is-hidden { visibility:hidden; }.virtual-previous-loading::before { animation:list-loading-spin .8s linear infinite; border:2px solid var(--border); border-right-color:var(--brand); border-radius:50%; content:""; display:inline-block; height:10px; margin:0 7px -2px 0; width:10px; }.virtual-previous-loading::after { background:color-mix(in srgb,var(--surface) 94%,transparent); border:1px solid var(--border); border-radius:999px; content:""; height:28px; left:50%; position:absolute; top:0; transform:translateX(-50%); width:170px; z-index:-1; }@keyframes list-loading-spin { to { transform:rotate(360deg); } }@media (prefers-reduced-motion:reduce) { .virtual-previous-loading::before { animation:none; } }
.modal-card-detail { display:grid; gap:16px; }.modal-card-detail header { align-items:center; display:grid; gap:18px; grid-template-columns:150px 1fr; }.modal-kanji { color:var(--brand); font:600 118px/1 'Noto Serif JP',serif; text-align:center; }.modal-grade { background:var(--surface-pill); border-radius:999px; color:var(--ink-pill); display:inline-block; font-size:12px; font-weight:700; padding:4px 9px; }.modal-meaning { font-size:19px; font-weight:700; margin:10px 0 4px; }.modal-readings { display:grid; gap:10px; grid-template-columns:1fr 1fr; }.modal-readings > div,.modal-example { background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }.modal-readings small,.modal-example small { color:var(--muted); display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.modal-readings strong { color:var(--brand); display:block; font-family:'Noto Serif JP',serif; font-size:19px; margin-top:4px; }.modal-example h2 { font:600 29px/1.25 'Noto Serif JP',serif; margin:7px 0; }.modal-example h2 rt { color:var(--muted); font:500 13px Inter,sans-serif; }.modal-example p { margin:5px 0; }.modal-card-detail .han-viet { color:var(--brand); font-size:13px; font-weight:700; }
@media (max-width:560px) { .modal-card-detail header { grid-template-columns:104px 1fr; gap:10px; }.modal-kanji { font-size:82px; }.modal-meaning { font-size:16px; }.modal-readings { gap:7px; }.modal-readings > div,.modal-example { padding:10px 11px; }.modal-example h2 { font-size:24px; } }
@media (max-width:900px) { .practice-page { padding-bottom:0; }.practice-page .practice-shell { padding-bottom:150px; }.practice-page .practice-actions:not([hidden]) { background:color-mix(in srgb,var(--surface) 96%,transparent); border-top:1px solid var(--border); bottom:0; box-shadow:0 -8px 24px #1f25221c; left:0; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); position:fixed; right:0; z-index:35; }.practice-page .practice-actions button { min-height:58px; } }
.flow-legend { background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--border); border-radius:999px; bottom:12px; color:var(--muted); font-size:10px; left:12px; padding:5px 9px; pointer-events:none; position:absolute; z-index:3; }
.graph-reading-legend { align-items:center; background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--border); border-radius:999px; bottom:12px; color:var(--ink); display:flex; flex-wrap:wrap; gap:6px 13px; left:12px; max-width:calc(100% - 24px); padding:7px 11px; pointer-events:none; position:absolute; z-index:3; }
.graph-reading-legend--chain { bottom:43px; }
.grade-filter { flex:none; position:relative; }
.grade-filter summary { align-items:center; background:var(--paper); border:1px solid var(--border); border-left:0; border-radius:0 9px 9px 0; color:var(--muted); cursor:pointer; display:flex; height:100%; justify-content:center; list-style:none; width:42px; }
.grade-filter summary::-webkit-details-marker { display:none; }
.grade-filter summary svg { height:17px; width:17px; }
.grade-filter.is-active summary,.grade-filter[open] summary { background:var(--surface-selected); color:var(--brand); }
.grade-filter summary:focus-visible { outline:2px solid var(--amber); outline-offset:-2px; }
.grade-filter-popover { background:var(--surface-raised); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px var(--shadow-highlight); display:grid; gap:2px; padding:8px; position:absolute; right:0; top:calc(100% + 7px); width:170px; z-index:20; }
.grade-filter-popover > strong { color:var(--muted); font-size:11px; padding:4px 7px 7px; }
.grade-filter-option { align-items:center; border-radius:7px; color:var(--ink); cursor:pointer; display:flex; font-size:12px; gap:8px; min-height:32px; padding:5px 7px; }
.grade-filter-option:hover,.grade-filter-option:has(input:checked) { background:var(--surface-selected); color:var(--brand); }
.search-form .grade-filter-option input[type="radio"] { accent-color:var(--brand); background:none; border:0; box-shadow:none; flex:none; height:15px; margin:0; padding:0; width:15px; }
.active-grade-filter { align-items:center; color:var(--muted); display:flex; font-size:11px; gap:4px; margin:-7px 0 10px; }
.active-grade-filter[hidden] { display:none; }
.active-grade-filter strong { background:var(--surface-selected); border-radius:999px; color:var(--brand); font-size:11px; padding:3px 7px; }
.active-grade-filter button { background:transparent; border:0; color:var(--muted); font-size:17px; line-height:1; padding:2px 4px; }
.graph-reading-legend-item { align-items:center; display:inline-flex; font-size:11px; font-weight:600; gap:6px; white-space:nowrap; }
.graph-legend-dot { background:var(--legend-color); border-radius:50%; display:inline-block; flex:none; height:10px; width:10px; }
button, input { font:inherit; } button { cursor:pointer; }
.topbar { height:58px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface) 92%,transparent); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); }
.brand { align-items:center; color:var(--ink); display:flex; font-weight:700; font-size:16px; gap:10px; text-decoration:none; }.brand-mark { align-items:center; background:var(--brand); border-radius:8px; color:var(--on-brand); display:inline-flex; font:600 21px 'Noto Serif JP',serif; height:34px; justify-content:center; width:34px; }.header-actions { align-items:center; display:flex; gap:12px; }.review-link { color:var(--link); font-size:12px; font-weight:700; text-decoration:none; }.review-link:hover { text-decoration:underline; }.language-picker { background:var(--surface); border:1px solid var(--border); border-radius:7px; color:var(--ink); font-size:11px; font-weight:700; padding:5px; }.source-pill,.grade { background:var(--surface-pill); border-radius:999px; color:var(--ink-pill); font-size:11px; font-weight:700; padding:5px 9px; }.icon-button { background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--ink); font-size:19px; height:34px; width:34px; }
.app-shell { display:grid; grid-template-columns:278px minmax(0,1fr); min-height:calc(100vh - 58px); }.sidebar { background:var(--surface); border-right:1px solid var(--border); padding:18px 12px; }.search-form { display:flex; margin-bottom:19px; }.search-form input[name="q"] { background:var(--paper); border:1px solid var(--border); border-radius:9px 0 0 9px; color:var(--ink); min-width:0; outline:none; padding:10px 11px; width:100%; }.search-form input[name="q"]:focus { border-color:var(--amber); box-shadow:0 0 0 3px #e6a21a33; }.sidebar-heading { color:var(--muted); display:flex; font-size:11px; font-weight:700; justify-content:space-between; letter-spacing:.08em; padding:0 8px 5px; text-transform:uppercase; }.sidebar-status { color:var(--brand); font-size:11px; margin:0 8px 12px; }.kanji-list { align-content:start; display:grid; gap:13px; max-height:calc(100vh - 185px); overflow:auto; overflow-anchor:none; padding-right:2px; }.grade-group { display:grid; gap:4px; }.grade-heading { align-items:center; border-bottom:1px solid var(--border); color:var(--muted); display:flex; font-size:11px; font-weight:700; justify-content:space-between; letter-spacing:.06em; margin:0 7px 2px; padding:0 1px 6px; text-transform:uppercase; }.grade-heading span:first-child { color:var(--brand); }.empty-grade { color:var(--muted); font-size:11px; font-style:italic; margin:2px 8px; }.kanji-row { align-items:center; border:1px solid transparent; border-radius:10px; color:var(--ink); display:grid; gap:9px; grid-template-columns:32px 1fr auto; padding:7px; text-decoration:none; }.kanji-row:hover { background:var(--surface-hover); }.kanji-row.is-selected { background:var(--surface-selected); border-color:var(--border-selected); }.kanji-glyph { font:600 25px 'Noto Serif JP',serif; }.kanji-row strong,.kanji-row small { display:block; }.kanji-row small { color:var(--muted); font-size:11px; margin-top:1px; }.grade { font-size:9px; padding:3px 6px; }
.drawer-toggle,.drawer-title,.drawer-scrim,.drawer-utilities,.mobile-bottom-nav { display:none; }
.workspace { min-width:0; padding:22px; }.detail-grid { display:grid; gap:16px; grid-template-columns:1.05fr 1.2fr 1fr; }.kanji-card,.word-card,.study-card,.map-section { background:var(--surface); border:1px solid var(--border); border-radius:16px; }.kanji-card,.word-card,.study-card { min-height:218px; padding:22px; }.eyebrow { color:var(--brand); font-size:10px; font-weight:700; letter-spacing:.11em; margin:0 0 12px; }.main-kanji { font:600 76px/1 'Noto Serif JP',serif; }.kanji-readings { display:flex; gap:7px; margin:8px 0; }.kanji-readings div { background:var(--surface-soft); border-radius:7px; display:grid; padding:4px 8px; }.kanji-readings span { color:var(--ink-warm); font-size:9px; font-weight:700; text-transform:uppercase; }.kanji-readings strong { font:600 15px 'Noto Serif JP',serif; }.meaning { color:var(--muted); margin:8px 0; }.han-viet { color:var(--ink-warm); font:600 13px 'Noto Serif JP',serif; margin:3px 0 8px; }.source-link { color:var(--link); font-size:12px; }.word-card h1 { font:600 31px/1.1 'Noto Serif JP',serif; margin:4px 0 2px; }.word-card ruby { ruby-position:over; }.word-card rt { color:var(--brand); font:500 11px 'Noto Serif JP',serif; }.word-card p { margin:4px 0; }.word-meaning { color:var(--muted); font-size:12px; }.example-line { align-items:center; display:flex; gap:12px; justify-content:space-between; }.example-line + .example-line { border-top:1px solid var(--border); margin-top:10px; padding-top:13px; }.example-label { color:var(--brand); font:600 11px 'Noto Serif JP',serif; }.listen-button { background:#fff; border:1px solid var(--border); border-radius:8px; color:var(--link); padding:8px 10px; }.study-card { background:linear-gradient(145deg,var(--surface-control),#fbefd7); }.study-card>p:not(.eyebrow) { color:var(--muted); min-height:68px; }.review-actions { display:flex; gap:8px; }.review-actions button { border-radius:8px; font-weight:700; padding:9px 12px; }.remember { background:var(--green); border:1px solid var(--green); color:var(--on-brand); }.again { background:transparent; border:1px solid var(--border-accent); color:var(--brand); }
.map-section { margin-top:18px; padding:22px; }.section-heading { align-items:end; display:flex; justify-content:space-between; }.section-heading h2 { font:600 22px 'Noto Serif JP',serif; margin:0; }.map-note { color:var(--muted); font-size:12px; }.graph-toolbar { align-items:center; display:flex; justify-content:space-between; margin-top:18px; }.view-switch,.graph-actions { display:flex; gap:6px; }.graph-toolbar button { background:var(--surface-control); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-weight:600; padding:7px 10px; }.toolbar-icon { display:none; }.graph-toolbar button:hover,.graph-toolbar button.is-active { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }.graph { background-color:var(--graph-surface); background-image:radial-gradient(var(--graph-dot) 1px,transparent 1px); background-size:18px 18px; border:1px solid var(--graph-border); border-radius:12px; height:460px; margin-top:10px; overflow:hidden; position:relative; }.graph-canvas { height:100%; width:100%; }.graph-canvas canvas { cursor:grab; }.graph-canvas canvas:active { cursor:grabbing; }.graph-3d-label-layer { inset:0; pointer-events:none; position:absolute; }.graph-3d-label { background:#fffdf0e8; border:1px solid var(--ink-warm); border-radius:5px; box-shadow:0 1px 5px #1f252233; color:#1f2522; font:700 14px/1.2 'Noto Serif JP',serif; padding:2px 5px; position:absolute; transform:translate(-50%,-145%); white-space:nowrap; }.graph-3d-label.is-central { background:#b8442b; border-color:#fff4e3; color:var(--on-brand); font-size:17px; padding:3px 7px; }
.graph-loading { align-items:center; backdrop-filter:blur(4px); background:#fffdf899; display:grid; inset:0; justify-items:center; position:absolute; z-index:3; }.graph-loading[hidden] { display:none; }.graph-loading-skeleton { height:190px; position:relative; width:min(280px,75%); }.graph-loading-skeleton::before,.graph-loading-skeleton::after { background:var(--border); content:""; height:2px; left:50%; opacity:.7; position:absolute; top:50%; transform-origin:left center; width:34%; }.graph-loading-skeleton::before { transform:rotate(-145deg); }.graph-loading-skeleton::after { transform:rotate(35deg); }.graph-loading-node { animation:graph-skeleton-pulse 1.4s ease-in-out infinite; background:linear-gradient(135deg,#d9e8e8,#b8d0d5); border:5px solid #fffdf8cc; border-radius:50%; box-shadow:0 4px 16px #324b4b1f; height:54px; position:absolute; width:54px; }.graph-loading-node-center { background:linear-gradient(135deg,#e8b3a5,#c86f5b); height:76px; left:calc(50% - 38px); top:calc(50% - 38px); width:76px; z-index:1; }.graph-loading-node-one { left:12%; top:8%; }.graph-loading-node-two { right:10%; top:14%; animation-delay:.18s; }.graph-loading-node-three { bottom:7%; left:18%; animation-delay:.36s; }.graph-loading-node-four { bottom:5%; right:15%; animation-delay:.54s; }.graph-loading-error { color:var(--muted); display:none; font-size:13px; font-weight:600; margin:0; padding:16px; text-align:center; }.graph-loading.is-error { backdrop-filter:none; background:#fffdf8e8; }.graph-loading.is-error .graph-loading-skeleton { display:none; }.graph-loading.is-error .graph-loading-error { display:block; }@keyframes graph-skeleton-pulse { 50% { opacity:.58; transform:scale(.94); } }
.dark .graph-loading { background:#24282199; }.dark .graph-loading-node { border-color:#242821cc; }.dark .graph-loading.is-error { background:#242821e8; }
@media (prefers-reduced-motion:reduce) { .graph-loading-node { animation:none; } }
:root.dark {
  color-scheme:dark;
  --brand:#ff9b83; --brand-dark:#ffb19f; --amber:#ffd166;
  --paper:#171a18; --surface:#232824; --surface-raised:#2d332e; --surface-highlight:#343b35;
  --surface-soft:#353b32; --surface-control:#30342e; --surface-hover:#383d34;
  --surface-selected:#46332e; --surface-pill:#463d2c;
  --ink:#f4f1e9; --muted:#c4c9c1; --ink-warm:#ffd166; --ink-pill:#e9c574;
  --border:#50594f; --border-accent:#a6655a; --border-selected:#805345;
  --link:#8bc9e8; --green:#83d6a5; --on-brand:#fff;
  --graph-surface:#242821; --graph-dot:#4c5146;
  --graph-border:color-mix(in srgb,var(--border) 70%,var(--paper));
  --speaker-surface:#2b4b68; --speaker-ink:#d7e9ff;
  --shadow-soft:#0002; --shadow-card:#0003; --shadow-highlight:#0004;
}
.dark .graph-toolbar button,.dark .listen-button:not(.speaker-button) { background:var(--surface-control); }.dark .graph-toolbar button:hover,.dark .graph-toolbar button.is-active,.dark .practice-tabs button.is-active,.dark .practice-reveal button { background:#8f3f32; border-color:#d98976; color:var(--on-brand); }.dark .canvas-options .graph-toolbar button.is-active { background:#8f3f32 !important; border-color:#d98976 !important; color:var(--on-brand) !important; }.dark .connection-switch a { background:var(--surface-control); border-color:#596456; color:var(--muted); }.dark .connection-switch a.is-active { background:#49302c; border-color:var(--border-accent); color:#ffb19f; }.dark .brand-mark { background:#8f3f32; }.dark .source-link,.dark .detail-actions .source-link { background:var(--surface-control); border-color:#596456; }.dark .study-card { background:linear-gradient(145deg,#392f22,#2b2e28); }.dark .source-pill,.dark .grade { background:var(--surface-pill); color:var(--ink-pill); }.dark .kanji-row:hover,.dark .review-row:hover { background:var(--surface-hover); }.dark .kanji-row.is-selected,.dark .review-row.is-selected { background:var(--surface-selected); border-color:var(--border-selected); }.dark .kanji-readings div { background:var(--surface-soft); }.dark .kanji-readings span { color:var(--amber); }.dark .han-viet { color:#ffd08a; }.dark .practice-forget { background:#49302c; border-color:var(--border-accent); color:#ffc2b3; }.dark .practice-remember { background:#263c30; border-color:#5b9c76; color:#a6e8bd; }.dark .document-tab.is-selected small { background:var(--surface-selected); color:#ffb19f; }
body[data-language="vi"] .lang-en,body[data-language="en"] .lang-vi { display:none; }
.review-shell { display:grid; grid-template-columns:290px minmax(0,1fr); min-height:calc(100vh - 58px); }.review-sidebar { background:var(--surface); border-right:1px solid var(--border); padding:18px 12px; }.review-filters { display:grid; gap:11px; }.review-filters label,.edit-card label { color:var(--muted); display:grid; font-size:12px; font-weight:700; gap:5px; }.review-filters select,.edit-card input { background:var(--paper); border:1px solid var(--border); border-radius:8px; color:var(--ink); outline:0; padding:9px 10px; }.review-list { display:grid; gap:4px; max-height:calc(100vh - 230px); overflow:auto; }.review-row { align-items:center; border:1px solid transparent; border-radius:10px; color:var(--ink); display:grid; gap:9px; grid-template-columns:32px 1fr; padding:7px; text-decoration:none; }.review-row:hover { background:var(--surface-hover); }.review-row.is-selected { background:var(--surface-selected); border-color:var(--border-selected); }.review-row strong,.review-row small { display:block; }.review-row small { color:var(--muted); font-size:11px; }.review-workspace { margin:0 auto; max-width:1000px; padding:36px; width:100%; }.review-heading { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:21px; }.review-heading h1 { font:600 28px 'Noto Serif JP',serif; margin:0; }.review-grid { display:grid; gap:20px; grid-template-columns:minmax(280px,1fr) minmax(280px,1fr); }.source-card,.edit-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; }.source-card img { background:white; border:1px solid var(--border); border-radius:9px; display:block; image-rendering:auto; max-height:480px; object-fit:contain; width:100%; }.source-card details { margin-top:15px; }.source-card summary { color:var(--link); cursor:pointer; font-size:12px; font-weight:700; }.source-card pre { background:var(--paper); border-radius:8px; font:12px/1.5 'Noto Serif JP',monospace; overflow:auto; padding:11px; white-space:pre-wrap; }.edit-card { display:grid; align-content:start; gap:15px; }.edit-card input { font:500 18px 'Noto Serif JP',serif; }.reading-inputs { display:grid; gap:10px; grid-template-columns:1fr 1fr; }.examples-editor { border:1px solid var(--border); border-radius:10px; display:grid; gap:10px; margin:0; padding:13px; }.examples-editor legend { color:var(--brand); font-size:12px; font-weight:700; padding:0 5px; }.examples-editor legend small { color:var(--muted); font-weight:400; }.save-button { background:var(--green); border:1px solid var(--green); border-radius:9px; color:var(--on-brand); font-weight:700; margin-top:5px; padding:11px; }.form-note { color:var(--muted); font-size:11px; margin:0; }.save-notice { background:#e5f1e9; border:1px solid #a6d1b3; border-radius:9px; color:#1e6548; font-size:13px; margin:0 0 18px; padding:10px 12px; }
.pdf-shell { display:grid; grid-template-columns:235px minmax(0,1fr); min-height:calc(100vh - 58px); }.pdf-sidebar { background:var(--surface); border-right:1px solid var(--border); padding:22px 14px; }.pdf-sidebar h1 { font:600 23px 'Noto Serif JP',serif; margin:0 0 18px; }.page-thumbnails { display:grid; gap:12px; }.page-thumbnail { background:var(--paper); border:1px solid var(--border); border-radius:9px; color:var(--muted); display:block; overflow:hidden; padding:5px; text-decoration:none; }.page-thumbnail:hover { border-color:var(--amber); }.page-thumbnail.is-selected { border:2px solid var(--brand); color:var(--brand); }.page-thumbnail img { display:block; height:144px; object-fit:cover; object-position:top; width:100%; }.page-thumbnail span { display:block; font-size:12px; font-weight:700; padding:6px 4px 2px; }.pdf-workspace { min-width:0; padding:26px; }.pdf-heading { align-items:end; display:flex; justify-content:space-between; margin:0 auto 16px; max-width:1080px; }.pdf-heading h2 { font:600 27px 'Noto Serif JP',serif; margin:0; }.pdf-heading p:last-child { color:var(--muted); font-size:12px; margin:0; }.pdf-canvas { background:#ddd4c5; border:1px solid var(--border); border-radius:12px; margin:0 auto; max-height:calc(100vh - 164px); max-width:1080px; overflow:auto; padding:14px; }.pdf-image-layer { margin:auto; min-width:720px; position:relative; width:100%; }.pdf-image-layer img { background:#fff; display:block; height:auto; width:100%; }.pdf-hotspot { border:1px solid transparent; display:block; position:absolute; }.pdf-hotspot:hover,.pdf-hotspot:focus { background:#e6a21a33; border-color:var(--brand); outline:2px solid #b8442b88; z-index:2; }.pdf-hotspot span { background:var(--brand); border-radius:4px; color:var(--on-brand); display:none; font:11px 'Noto Serif JP',serif; left:0; padding:3px 5px; position:absolute; top:0; white-space:nowrap; }.pdf-hotspot:hover span,.pdf-hotspot:focus span { display:block; }
@media (max-width:900px) { body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }.topbar { position:sticky; z-index:30; }.header-actions { display:none; }.drawer-toggle { align-items:center; background:transparent; border:0; border-radius:0; color:var(--ink); display:flex; font-size:23px; line-height:1; padding:6px 0 6px 8px; }.app-shell { display:block; min-height:0; }.sidebar { border:0; box-shadow:8px 0 28px #1f252255; bottom:0; display:flex; flex-direction:column; left:0; padding:18px 12px; position:fixed; top:0; transform:translateX(-105%); transition:transform .22s ease; width:min(330px,88vw); z-index:50; }.sidebar.is-open { transform:translateX(0); }.drawer-scrim { background:#1f252266; inset:0; opacity:0; pointer-events:none; position:fixed; transition:opacity .2s; z-index:45; }.drawer-scrim.is-open { opacity:1; pointer-events:auto; }.drawer-title { align-items:center; display:flex; justify-content:space-between; margin:0 3px 16px; padding-top:max(2px, env(safe-area-inset-top)); }.drawer-title strong { color:var(--brand); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }.drawer-close { background:transparent; border:0; color:var(--muted); font-size:30px; line-height:1; padding:0 4px; }.search-form { margin-bottom:12px; }.kanji-list { flex:1; max-height:none; min-height:0; overflow:auto; }.drawer-utilities { border-top:1px solid var(--border); display:grid; gap:7px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; padding-top:12px; }.drawer-utilities a,.drawer-utilities button { align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:8px; color:var(--ink); display:flex; font-size:11px; font-weight:700; gap:5px; justify-content:center; min-height:38px; text-decoration:none; }.drawer-utilities span { color:var(--brand); font-size:16px; }.drawer-utilities small { font:inherit; }.detail-grid { grid-template-columns:1fr; }.workspace { padding:14px; }.map-section { padding:15px; }.map-note { display:none; }.graph { height:380px; }.mobile-bottom-nav { align-items:stretch; background:var(--surface); border-top:1px solid var(--border); bottom:0; box-shadow:0 -4px 18px #1f252212; display:grid; grid-template-columns:repeat(4,1fr); height:calc(64px + env(safe-area-inset-bottom)); left:0; padding-bottom:env(safe-area-inset-bottom); position:fixed; right:0; z-index:30; }.mobile-bottom-nav a,.mobile-bottom-nav button { align-items:center; background:transparent; border:0; color:var(--muted); display:flex; flex-direction:column; font:600 10px Inter,sans-serif; gap:3px; justify-content:center; text-decoration:none; }.mobile-bottom-nav svg { color:var(--brand); flex:none; height:20px; width:20px; }.mobile-bottom-nav span { color:var(--brand); font-size:24px; line-height:1; }.mobile-bottom-nav small { font:inherit; } #kanji,#examples,#practice,#wordmap { scroll-margin-top:64px; } body.drawer-open { overflow:hidden; } }
@media (max-width:560px) { .topbar { height:54px; padding:0 12px; }.brand { font-size:13px; gap:7px; }.brand-mark { border-radius:7px; font-size:18px; height:30px; width:30px; }.drawer-toggle { padding:6px 8px; }.workspace { padding:10px; }.detail-grid { gap:10px; }.kanji-card,.word-card,.study-card { min-height:auto; padding:17px; }.main-kanji { font-size:65px; }.kanji-readings strong { font-size:13px; }.word-card h1 { font-size:28px; }.study-card>p:not(.eyebrow) { min-height:0; }.map-section { margin-top:10px; padding:14px 10px; }.section-heading h2 { font-size:18px; }.graph-toolbar { margin-top:12px; }.graph { height:310px; }.graph-toolbar button { align-items:center; display:flex; font-size:19px; height:38px; justify-content:center; min-width:38px; padding:0; }.toolbar-icon { display:block; line-height:1; }.toolbar-text { display:none; } }
@media (max-width:800px) { .review-shell { grid-template-columns:1fr; }.review-sidebar { border-bottom:1px solid var(--border); border-right:0; }.review-list { display:flex; max-height:150px; overflow:auto; }.review-row { flex:0 0 155px; }.review-workspace { padding:18px; }.review-grid { grid-template-columns:1fr; } }
@media (max-width:800px) { .pdf-shell { grid-template-columns:1fr; }.pdf-sidebar { border-bottom:1px solid var(--border); border-right:0; }.page-thumbnails { display:flex; overflow:auto; }.page-thumbnail { flex:0 0 130px; }.page-thumbnail img { height:92px; }.pdf-workspace { padding:16px; }.pdf-heading p:last-child { display:none; }.pdf-canvas { max-height:none; }.pdf-canvas img { min-width:620px; } }
.breadcrumbs { align-items:center; color:var(--muted); display:flex; flex-wrap:wrap; font-size:11px; gap:7px; margin:0 0 15px; }.breadcrumbs a { color:var(--link); font-weight:700; text-decoration:none; }.breadcrumbs a:hover { text-decoration:underline; }.breadcrumbs strong { color:var(--ink); font-weight:700; }
.connection-switch { display:flex; gap:7px; margin-top:14px; }.connection-switch a { background:var(--surface-control); border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px; font-weight:700; padding:7px 11px; text-decoration:none; }.connection-switch a.is-active { background:var(--surface-selected); border-color:var(--border-accent); color:var(--brand); }
.detail-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.detail-actions .source-link { background:var(--surface-control); border:1px solid var(--border); border-radius:7px; padding:6px 8px; text-decoration:none; }.detail-actions .source-link:hover { border-color:var(--amber); }
.kanji-examples-panel { display:contents; }
@media (max-width:800px) { .review-page .topbar,.pdf-page .topbar { position:sticky; top:0; z-index:20; }.review-sidebar,.pdf-sidebar { padding:13px 10px; }.review-sidebar .sidebar-status { margin-bottom:7px; }.review-workspace,.pdf-workspace { padding:14px; }.review-heading { margin-bottom:14px; }.review-heading h1,.pdf-heading h2 { font-size:22px; }.review-grid { gap:12px; }.source-card,.edit-card { border-radius:12px; padding:15px; }.source-card img { max-height:360px; }.pdf-canvas { border-radius:9px; padding:8px; }.pdf-image-layer { min-width:620px; }.breadcrumbs { margin-bottom:11px; }.detail-actions { margin-top:10px; } }
@media (max-width:560px) { .connection-switch { margin-top:10px; }.connection-switch a { font-size:11px; padding:6px 9px; } }
.canvas-options { align-items:flex-start; display:flex; gap:10px; justify-content:space-between; left:12px; pointer-events:none; position:absolute; right:12px; top:12px; z-index:4; }.canvas-options>* { pointer-events:auto; }.canvas-options .connection-switch,.canvas-options .graph-toolbar { margin:0; }.canvas-options .graph-toolbar { flex:0 0 auto; }.canvas-options .graph-toolbar button { background:var(--surface); box-shadow:0 2px 8px #1f252218; }
@media (max-width:560px) { .canvas-options { flex-wrap:wrap; gap:7px; left:8px; right:8px; top:8px; }.canvas-options .connection-switch { margin:0; }.canvas-options .graph-toolbar { margin:0; width:100%; }.canvas-options .graph-toolbar button { background:var(--surface); }.canvas-options .graph-toolbar .view-switch,.canvas-options .graph-toolbar .graph-actions { gap:5px; } }
.map-title { margin:20px 0 9px; }.map-section { background:transparent; border:0; border-radius:0; margin:0; padding:0; }
@media (max-width:560px) { .map-title { margin:16px 0 8px; }.map-section { margin:0 -10px; padding:0; }.map-section .graph { border-left:0; border-radius:0; border-right:0; height:min(650px,calc(100dvh - 128px)); min-height:440px; } }
@media (max-width:900px) { .mobile-bottom-nav button.is-active { background:var(--surface-selected); color:var(--brand); }.mobile-bottom-nav button.is-active span { color:var(--brand); }.tab-panel[hidden] { display:none !important; } }
@media (max-width:900px) { .dark .mobile-bottom-nav button.is-active { background:var(--surface-selected); color:#f0a18b; }.dark .mobile-bottom-nav button.is-active span { color:#f0a18b; } }
@media (max-width:900px) { html[data-initial-tab="wordmap"] .tab-panel { display:none; } html[data-initial-tab="wordmap"] .tab-panel[data-tab-panel="wordmap"] { display:block; } }
@media (max-width:900px) { .kanji-examples-panel { display:grid; gap:10px; } .mobile-bottom-nav { grid-template-columns:repeat(3,1fr); }.mobile-bottom-nav [data-tab="kanji"] { order:0; }.mobile-bottom-nav [data-tab="wordmap"] { order:1; }.mobile-bottom-nav [data-tab="practice"] { order:2; } }
.digital-page-link { min-height:62px; padding:11px 12px; }.digital-page-link strong { color:var(--brand); display:block; font-size:13px; }.digital-page-link span { font-size:11px; padding:4px 0 0; }.document-actions { align-items:center; color:var(--muted); display:flex; font-size:12px; gap:12px; }.document-actions a { background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--link); font-weight:700; padding:7px 9px; text-decoration:none; }.digital-document { background:#fffdf8; border:1px solid var(--border); border-radius:14px; display:grid; gap:7px; grid-template-columns:repeat(8,minmax(0,1fr)); padding:14px; }.digital-kanji-card { background:var(--surface); border:1px solid var(--border); border-radius:9px; color:var(--ink); display:grid; min-height:125px; overflow:hidden; padding:8px; position:relative; text-decoration:none; transition:border-color .14s,box-shadow .14s,transform .14s; }.digital-kanji-card:hover,.digital-kanji-card:focus-visible { border-color:var(--brand); box-shadow:0 5px 14px #b8442b24; outline:0; transform:translateY(-2px); z-index:1; }.digital-grade { color:var(--ink-warm); font-size:9px; font-weight:700; }.digital-kanji-card strong { font:600 31px/1 'Noto Serif JP',serif; margin:5px 0 3px; }.digital-on { color:var(--brand); font:500 10px 'Noto Serif JP',serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.digital-word,.digital-kun { font:500 12px/1.25 'Noto Serif JP',serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.digital-kun { color:var(--ink-warm); }.digital-kanji-card small { color:var(--muted); font-size:9px; line-height:1.25; margin-top:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1100px) { .digital-document { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:800px) { .document-actions { align-items:flex-start; flex-direction:column; gap:6px; }.digital-document { gap:6px; grid-template-columns:repeat(4,minmax(0,1fr)); padding:9px; }.digital-kanji-card { min-height:116px; padding:7px; }.digital-kanji-card strong { font-size:29px; } }
@media (max-width:430px) { .digital-document { grid-template-columns:repeat(3,minmax(0,1fr)); }.digital-kanji-card { min-height:110px; }.digital-kanji-card strong { font-size:27px; }.digital-word,.digital-kun { font-size:11px; } }
.digital-document { background:linear-gradient(135deg,#fffdf8,#fbefd7); box-shadow:0 12px 32px #6d4a1d12; }.digital-kanji-card { animation:digital-card-in .38s cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(var(--card-order) * 5ms); background:linear-gradient(155deg,var(--surface-raised) 0%,#fff9ee 100%); box-shadow:0 1px 0 #fff inset,0 2px 5px #6d4a1d0b; isolation:isolate; transition:border-color .2s,box-shadow .2s,transform .2s; }.digital-kanji-card>* { position:relative; z-index:1; }.digital-kanji-card::before { background:linear-gradient(118deg,transparent 26%,#ffffffc9 48%,transparent 67%); content:""; inset:0; opacity:0; pointer-events:none; position:absolute; transform:translateX(-115%); transition:opacity .2s,transform .5s ease; z-index:0; }.digital-kanji-card:hover,.digital-kanji-card:focus-visible { border-color:var(--border-accent); box-shadow:0 10px 20px #b8442b2b,0 1px 0 #fff inset; transform:translateY(-4px) rotate(-.35deg); }.digital-kanji-card:hover::before,.digital-kanji-card:focus-visible::before { opacity:1; transform:translateX(115%); }.digital-kanji-card:active { box-shadow:0 2px 7px #b8442b2b; transform:translateY(-1px) scale(.98); }.digital-kanji-card strong { text-shadow:0 1px 0 #fff; }.digital-grade { background:#f6e5bd; border-radius:99px; justify-self:start; padding:2px 5px; }
@keyframes digital-card-in { from { opacity:0; transform:translateY(9px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.digital-kanji-card:nth-child(n + 25) { animation:none; }
@media (prefers-reduced-motion:reduce) { .digital-kanji-card { animation:none; transition:none; }.digital-kanji-card:hover,.digital-kanji-card:focus-visible { transform:none; }.digital-kanji-card::before { display:none; } }
.document-shell { min-height:calc(100vh - 58px); padding:26px; }.document-workspace { margin:0 auto; max-width:1560px; }.document-page-nav { display:grid; gap:8px; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 16px; }.document-page-tab { background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--muted); display:block; padding:10px 13px; text-decoration:none; transition:border-color .16s,background .16s,transform .16s; }.document-page-tab strong { color:var(--brand); display:block; font-size:12px; }.document-page-tab span { display:block; font-size:11px; margin-top:3px; }.document-page-tab:hover { border-color:var(--amber); transform:translateY(-1px); }.document-page-tab.is-selected { background:var(--surface-selected); border-color:var(--border-accent); box-shadow:0 3px 10px #b8442b16; }.document-workspace .digital-document { grid-template-columns:repeat(10,minmax(0,1fr)); }
@media (max-width:1100px) { .document-workspace .digital-document { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media (max-width:800px) { .document-shell { padding:14px 10px; }.document-page-nav { display:flex; margin-bottom:12px; overflow:auto; padding-bottom:2px; }.document-page-tab { flex:0 0 138px; }.document-workspace .digital-document { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:430px) { .document-workspace .digital-document { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.digital-kanji-card { display:grid; gap:5px; grid-template-rows:auto auto 1fr auto; min-height:154px; padding:9px 10px 8px; }.digital-card-head { align-items:center; display:flex; justify-content:space-between; min-width:0; }.digital-card-head .digital-on { color:var(--brand); font-size:10px; font-weight:700; max-width:70%; text-align:right; }.digital-card-title { align-self:start; font-size:37px !important; line-height:.95 !important; margin:1px 0 0 !important; }.digital-card-content { align-self:stretch; border-left:2px solid #edc56b; display:flex; flex-direction:column; gap:2px; justify-content:center; margin-top:1px; min-width:0; padding-left:6px; }.digital-card-content .digital-word { color:var(--ink); font-size:13px; font-weight:700; }.digital-card-content .digital-kun { color:var(--ink-warm); font-size:11px; }.digital-card-subtitle { border-top:1px solid #eadfca; font-size:9px !important; line-height:1.25; margin:0 !important; padding-top:5px; }.digital-grade { letter-spacing:.04em; min-width:23px; text-align:center; }
.digital-card-content ruby { ruby-position:over; white-space:nowrap; }.digital-card-content rt { color:var(--brand); font:600 8px/1 'Noto Serif JP',serif; letter-spacing:0; }.digital-card-content .digital-kun rt { color:#9a6918; }
@media (max-width:1100px) { .digital-kanji-card { min-height:148px; }.digital-card-title { font-size:35px !important; } }
@media (max-width:800px) { .digital-kanji-card { min-height:143px; padding:8px; }.digital-card-title { font-size:33px !important; }.digital-card-content .digital-word { font-size:12px; } }
@media (max-width:430px) { .digital-kanji-card { min-height:136px; }.digital-card-title { font-size:31px !important; }.digital-card-head .digital-on { font-size:9px; }.digital-card-content { padding-left:5px; }.digital-card-subtitle { font-size:8px !important; } }
.document-heading { align-items:center; display:flex; justify-content:space-between; margin:0 0 9px; }.document-heading h1 { font:600 27px/1.15 'Noto Serif JP',serif; margin:0; }.document-source-link { color:var(--link); font-size:12px; font-weight:700; text-decoration:none; }.document-source-link:hover { text-decoration:underline; }.document-tabs { border-bottom:1px solid var(--border); display:flex; gap:19px; margin:0 0 16px; overflow-x:auto; scrollbar-width:none; }.document-tabs::-webkit-scrollbar { display:none; }.document-tab { align-items:center; color:var(--muted); display:flex; flex:0 0 auto; font-size:13px; font-weight:700; gap:6px; padding:9px 2px 11px; position:relative; text-decoration:none; transition:color .18s; }.document-tab small { background:#f3e6d0; border-radius:99px; color:var(--ink-warm); font-size:9px; font-weight:700; line-height:1; min-width:22px; padding:3px 5px; text-align:center; }.document-tab::after { background:var(--brand); border-radius:999px 999px 0 0; bottom:-1px; content:""; height:3px; left:0; position:absolute; transform:scaleX(0); transform-origin:center; transition:transform .22s ease; width:100%; }.document-tab:hover { color:var(--brand); }.document-tab.is-selected { color:var(--brand); }.document-tab.is-selected small { background:#f3c9bd; color:var(--brand-dark); }.document-tab.is-selected::after { transform:scaleX(1); }.document-panel { min-height:180px; transform:translateX(0); }.document-panel.is-leaving-next { animation:document-out-next .15s ease-in both; }.document-panel.is-leaving-previous { animation:document-out-previous .15s ease-in both; }.document-panel.is-entering-next { animation:document-in-next .24s cubic-bezier(.2,.8,.25,1) both; }.document-panel.is-entering-previous { animation:document-in-previous .24s cubic-bezier(.2,.8,.25,1) both; }
@keyframes document-out-next { to { opacity:0; transform:translateX(-28px); } } @keyframes document-out-previous { to { opacity:0; transform:translateX(28px); } } @keyframes document-in-next { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:translateX(0); } } @keyframes document-in-previous { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }
@media (max-width:800px) { .document-heading h1 { font-size:24px; }.document-tabs { gap:17px; margin-bottom:12px; }.document-tab { font-size:12px; padding-bottom:10px; } }
@media (prefers-reduced-motion:reduce) { .document-panel.is-leaving-next,.document-panel.is-leaving-previous,.document-panel.is-entering-next,.document-panel.is-entering-previous { animation:none; } }
.digital-card-open-hint { background:#fffaf1e8; border:1px solid var(--border); border-radius:99px; bottom:8px; color:var(--link); display:none; font-size:10px; font-weight:700; padding:3px 6px; position:absolute !important; right:8px; z-index:2 !important; }.digital-document { isolation:isolate; }.digital-kanji-card { transform-origin:center; }.digital-kanji-card:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (hover:hover) and (pointer:fine) and (min-width:801px) { .digital-kanji-card:hover,.digital-kanji-card:focus-visible { border-color:var(--brand); box-shadow:0 12px 24px #6d2d2040,0 1px 0 #fff inset; transform:translateY(-3px) scale(1.1); z-index:12; }.digital-kanji-card:hover .digital-card-open-hint,.digital-kanji-card:focus-visible .digital-card-open-hint { display:block; }.digital-kanji-card:hover .digital-card-title,.digital-kanji-card:focus-visible .digital-card-title { color:var(--brand-dark); } }
@media (hover:none), (pointer:coarse) { .digital-kanji-card:hover,.digital-kanji-card:focus-visible { box-shadow:0 1px 0 #fff inset,0 2px 5px #6d4a1d0b; transform:none; }.digital-kanji-card::before { display:none; } }
@media (max-width:620px) { .document-workspace .digital-document { grid-template-columns:repeat(3,minmax(0,1fr)); }.digital-kanji-card { min-height:152px; }.digital-card-title { font-size:35px !important; } }
@media (max-width:430px) { .document-workspace .digital-document { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.digital-kanji-card { min-height:164px; padding:10px; }.digital-card-title { font-size:40px !important; }.digital-card-content .digital-word { font-size:14px; }.digital-card-subtitle { font-size:9px !important; } }
.document-card-modal { background:transparent; border:0; max-height:calc(100dvh - 24px); padding:0; width:min(680px,calc(100vw - 32px)); }.document-card-modal::backdrop { background:#1f2522a8; backdrop-filter:blur(3px); }.document-modal-shell { background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:0 24px 70px #1118; max-height:calc(100dvh - 24px); overflow:auto; padding:28px; position:relative; }.document-modal-shell h2 { font:600 24px/1.1 'Noto Serif JP',serif; margin:0 0 18px; }.document-modal-close { background:transparent; border:0; color:var(--muted); font-size:31px; line-height:1; padding:3px 6px; position:absolute; right:14px; top:14px; }.document-modal-preview { margin:0 0 20px; max-width:none; }.modal-preview-card { animation:none !important; cursor:default; display:grid; gap:12px; grid-template-columns:minmax(185px,.8fr) minmax(0,1.2fr); grid-template-rows:auto 1fr auto; min-height:320px !important; padding:20px 22px !important; pointer-events:none; transform:none !important; }.modal-preview-card .digital-card-head { grid-column:2; grid-row:1; }.modal-preview-card .digital-card-title { align-self:center; font-size:104px !important; grid-column:1; grid-row:1 / span 3; justify-self:center; line-height:.9 !important; margin:0 !important; }.modal-preview-card .digital-card-content { grid-column:2; grid-row:2; min-height:112px; }.modal-preview-card .digital-card-head .digital-on { font-size:14px; }.modal-preview-card .digital-card-content .digital-word { font-size:22px; }.modal-preview-card .digital-card-content .digital-kun { font-size:17px; }.modal-preview-card .digital-card-content rt { font-size:12px; }.modal-preview-card .digital-card-subtitle { font-size:13px !important; grid-column:2; grid-row:3; }.modal-preview-card .digital-card-open-hint { display:none !important; }.document-modal-detail { background:var(--brand); border-radius:10px; color:var(--on-brand); display:block; font-size:15px; font-weight:700; padding:13px; text-align:center; text-decoration:none; }.document-modal-detail:hover { background:var(--brand-dark); }.document-card-modal[open] .document-modal-shell { animation:modal-pop .22s cubic-bezier(.2,.8,.25,1); } @keyframes modal-pop { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:560px) { .document-card-modal { width:calc(100vw - 20px); }.document-modal-shell { border-radius:18px; padding:21px 17px 17px; }.document-modal-shell h2 { font-size:21px; margin-bottom:14px; }.modal-preview-card { display:grid; gap:8px; grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto; min-height:290px !important; padding:15px !important; }.modal-preview-card .digital-card-head,.modal-preview-card .digital-card-title,.modal-preview-card .digital-card-content,.modal-preview-card .digital-card-subtitle { grid-column:1; grid-row:auto; }.modal-preview-card .digital-card-title { font-size:82px !important; justify-self:start; }.modal-preview-card .digital-card-content { min-height:86px; }.modal-preview-card .digital-card-content .digital-word { font-size:19px; }.modal-preview-card .digital-card-subtitle { font-size:12px !important; }.document-modal-detail { font-size:14px; } }
.document-card-modal { width:min(760px,calc(100vw - 32px)); }.document-modal-shell h2 { font-size:30px; }.modal-preview-card { grid-template-columns:minmax(220px,.85fr) minmax(0,1.3fr); min-height:385px !important; padding:26px 30px !important; }.modal-preview-card .digital-card-title { font-size:132px !important; }.modal-preview-card .digital-card-head .digital-grade { font-size:12px; padding:4px 8px; }.modal-preview-card .digital-card-head .digital-on { font-size:18px; }.modal-preview-card .digital-card-content { min-height:145px; padding-left:11px; }.modal-preview-card .digital-card-content .digital-word { font-size:30px; }.modal-preview-card .digital-card-content .digital-kun { font-size:23px; }.modal-preview-card .digital-card-content rt { font-size:15px; }.modal-preview-card .digital-card-subtitle { font-size:17px !important; padding-top:9px; }.document-modal-detail { font-size:17px; padding:15px; }
@media (max-width:560px) { .document-modal-shell h2 { font-size:25px; }.modal-preview-card { min-height:340px !important; padding:20px !important; }.modal-preview-card .digital-card-title { font-size:112px !important; }.modal-preview-card .digital-card-head .digital-on { font-size:16px; }.modal-preview-card .digital-card-content { min-height:112px; }.modal-preview-card .digital-card-content .digital-word { font-size:26px; }.modal-preview-card .digital-card-content .digital-kun { font-size:20px; }.modal-preview-card .digital-card-content rt { font-size:13px; }.modal-preview-card .digital-card-subtitle { font-size:15px !important; }.document-modal-detail { font-size:16px; } }
/* Word Map owns the remaining visual viewport on phones. The JS value follows
   mobile browser address-bar changes, while the dvh fallback works before JS. */
@media (max-width:900px) { .map-section { margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); width:100dvw; }.map-section .graph { height:var(--mobile-graph-height,calc(100dvh - 128px)); min-height:360px; width:100%; }.map-section .graph-canvas { min-height:0; overflow:hidden; }.map-section .graph-canvas canvas { display:block; } }
@media (max-width:560px) { .map-section { margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }.map-section .graph { height:var(--mobile-graph-height,calc(100dvh - 118px)); min-height:360px; } }
.graph-canvas { inset:0; position:absolute; }.graph-canvas[hidden] { display:none; }
@media (min-width:901px) { .sidebar { align-self:start; display:flex; flex-direction:column; height:calc(100vh - 58px); height:calc(100dvh - 58px); position:sticky; top:58px; }.kanji-list { flex:1; max-height:none; min-height:0; } }
.map-view-label { display:block; font-size:12px; font-weight:800; letter-spacing:.03em; min-width:24px; }.canvas-options .graph-toolbar button { -webkit-tap-highlight-color:transparent; isolation:isolate; overflow:hidden; position:relative; }.canvas-options .graph-toolbar button > span { pointer-events:none; position:relative; z-index:1; }.canvas-options .graph-toolbar button.is-active { background:var(--brand) !important; border-color:var(--brand) !important; color:var(--on-brand) !important; }.canvas-options .graph-toolbar button:active { background:var(--brand-dark) !important; color:var(--on-brand) !important; transform:scale(.96); }.canvas-options .graph-actions [data-graph-action="fit"] { align-items:center; display:flex; height:38px; justify-content:center; min-width:38px; padding:0; width:38px; }.canvas-options .graph-actions [data-graph-action="fit"] .toolbar-icon { background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat; border:1.7px solid currentColor; border-radius:50%; display:block; height:15px; width:15px; }
.example-actions { align-items:center; display:flex; gap:7px; }.sentence-button { background:var(--paper); border:1px solid var(--border); border-radius:8px; color:var(--link); font-size:11px; font-weight:700; padding:7px 9px; white-space:nowrap; }.sentence-button:hover { border-color:var(--amber); color:var(--brand); }.sentence-modal { width:min(720px,calc(100vw - 24px)); }.sentence-modal-content { display:grid; gap:11px; }.sentence-item { background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:15px 16px; }.sentence-item p { margin:0; }.sentence-head { align-items:flex-start; display:flex; gap:12px; justify-content:space-between; }.sentence-ja { font:600 23px/1.55 'Noto Serif JP',serif; }.sentence-ja ruby { ruby-position:over; }.sentence-ja rt { color:var(--brand); font:500 11px 'Noto Serif JP',serif; }.sentence-listen-button { margin-top:2px; }.listen-button.is-speaking,.sentence-listen-button.is-speaking { animation:speech-pulse .8s ease-in-out infinite alternate; background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-size:0; }.listen-button.is-speaking::after,.sentence-listen-button.is-speaking::after { content:'❚❚'; font-size:10px; letter-spacing:-2px; }.listen-button.is-paused,.sentence-listen-button.is-paused { background:var(--surface-soft); border-color:var(--amber); color:var(--brand); font-size:0; }.listen-button.is-paused::after,.sentence-listen-button.is-paused::after { content:'▶'; font-size:11px; padding-left:2px; }.sentence-listen-button.is-speaking,.sentence-listen-button.is-paused { padding:0; }@keyframes speech-pulse { from { box-shadow:0 0 0 0 #b8442b44; } to { box-shadow:0 0 0 7px #b8442b00; } }.sentence-romaji { color:var(--muted); font:500 12px/1.45 Inter,sans-serif; letter-spacing:.025em; margin-top:4px !important; }.sentence-target { color:var(--brand); font:600 13px 'Noto Serif JP',serif; margin-top:7px !important; }.sentence-translation,.sentence-credit,.sentence-empty,.sentence-loading { color:var(--muted); font-size:13px; margin-top:7px !important; }.sentence-credit { font-size:10px; text-align:center; }.sentence-empty,.sentence-loading { background:var(--paper); border:1px dashed var(--border); border-radius:11px; padding:20px; text-align:center; }@media (prefers-reduced-motion:reduce) { .listen-button.is-speaking,.sentence-listen-button.is-speaking { animation:none; } }@media (max-width:560px) { .sentence-button { font-size:0; min-height:34px; min-width:34px; padding:6px; }.sentence-button::before { content:'文'; font:600 16px 'Noto Serif JP',serif; }.sentence-ja { font-size:20px; }.sentence-ja rt { font-size:10px; }.sentence-item { padding:13px; } }

/* A node is a navigation target: make that affordance explicit on hover. */
.graph-canvas.has-hovered-node canvas { cursor:pointer; }

@media (max-width:900px) { .drawer-toggle { font-size:0; }.drawer-toggle > span { display:none; }.drawer-toggle::before { background:linear-gradient(currentColor 0 0) 0 0/100% 3px,linear-gradient(currentColor 0 0) 0 8px/100% 3px,linear-gradient(currentColor 0 0) 0 16px/100% 3px; background-repeat:no-repeat; content:""; display:block; height:19px; width:25px; } }
.sentence-source { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.025em; margin-top:9px !important; }.sentence-source.is-ai-generated { color:#a05a00; }

.digital-document,.dark .digital-document { background:transparent; border:0; box-shadow:none; }
.drawer-utilities { gap:6px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:8px; padding-top:8px; }
.drawer-utilities a,.drawer-utilities button { flex-direction:column; gap:4px; min-height:54px; padding:5px 2px; }
.drawer-utilities a span:last-child,.drawer-utilities button small { color:var(--muted); font-size:10px; font-weight:600; line-height:1.15; }
.drawer-utilities svg { color:var(--brand); flex:none; height:17px; width:17px; }
@media (max-width:900px) { .drawer-scrim { display:block; } }
.dark .digital-kanji-card { background:linear-gradient(155deg,#2c322d 0%,#232824 100%); border-color:#50594f; box-shadow:0 1px 0 #ffffff0a inset,0 2px 5px #0003; }
.dark .digital-kanji-card:hover,.dark .digital-kanji-card:focus-visible { border-color:#d98976; box-shadow:0 10px 20px #0005,0 1px 0 #ffffff12 inset; }
.dark .digital-kanji-card::before { background:linear-gradient(118deg,transparent 26%,#ffffff18 48%,transparent 67%); }
.dark .digital-kanji-card strong { text-shadow:none; }
.dark .digital-grade { background:var(--surface-pill); color:var(--amber); }
.dark .digital-kun,.dark .digital-card-content .digital-kun { color:var(--amber); }
.dark .digital-card-content { border-left-color:#c49b4c; }
.dark .digital-card-subtitle { border-top-color:#50594f; color:var(--muted); }
.dark .document-page-tab.is-selected { background:var(--surface-selected); border-color:var(--border-accent); box-shadow:0 3px 10px #0003; color:#f4f1e9; }
.about-shell { max-width:1100px; padding:24px 24px 64px; }
.about-shell > .about-hero { align-items:center; background:radial-gradient(circle at 82% 50%,#f2dfbd 0,transparent 28%),linear-gradient(125deg,#fffdf8,#f8ead2); border:1px solid var(--border); border-radius:24px; display:grid; gap:30px; grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr); margin:22px 0 42px; min-height:300px; overflow:hidden; padding:38px clamp(24px,6vw,72px); position:relative; }
.about-hero-copy { max-width:650px; position:relative; z-index:1; }
.about-hero .eyebrow,.about-section-heading .eyebrow { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.12em; margin:0 0 12px; }
.about-hero h1 { color:var(--ink); font:600 clamp(34px,5vw,54px)/1.08 'Noto Serif JP',serif; margin:0 0 15px; max-width:640px; }
.about-shell .about-lead { color:var(--muted); font-size:16px; line-height:1.75; max-width:600px; }
.about-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.about-hero-actions a { border-radius:9px; font-size:13px; font-weight:750; padding:11px 15px; text-decoration:none; transition:transform .16s,background .16s; }
.about-hero-actions a:hover { transform:translateY(-2px); }
.about-primary-link { background:var(--brand); color:var(--on-brand) !important; }
.about-primary-link:hover { background:var(--brand-dark); }
.about-secondary-link { background:var(--surface); border:1px solid var(--border); color:var(--ink) !important; }
.about-kanji-art { align-items:center; color:#b8442b; display:flex; font-family:'Noto Serif JP',serif; height:230px; justify-content:center; position:relative; }
.about-kanji-art span { font-size:clamp(120px,18vw,190px); font-weight:600; line-height:1; text-shadow:0 8px 26px #80521224; }
.about-kanji-art i,.about-kanji-art b { background:var(--surface); border:1px solid #e8dcc6; border-radius:50%; box-shadow:0 6px 20px #80521218; font-size:28px; font-style:normal; height:60px; line-height:58px; position:absolute; text-align:center; width:60px; }
.about-kanji-art i { right:12%; top:13%; }.about-kanji-art b { bottom:7%; left:9%; }
.about-kanji-art em { bottom:13%; color:var(--ink-warm); font:700 11px Inter,sans-serif; letter-spacing:.14em; position:absolute; right:3%; transform:rotate(-8deg); }
.about-shell > .about-section { background:transparent; border:0; border-radius:0; margin:42px 0 0; padding:0; }
.about-shell > .about-start { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:clamp(20px,4vw,36px); }
.about-section-heading { margin-bottom:18px; max-width:680px; }
.about-section-heading h2 { color:var(--ink); font:600 clamp(25px,3vw,34px)/1.2 'Noto Serif JP',serif; margin:0 0 9px; }
.about-section-heading>p:last-child { color:var(--muted); line-height:1.7; margin:0; }
.about-feature-grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.about-feature-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; margin:0 !important; min-height:190px; padding:21px !important; }
.about-feature-icon { align-items:center; background:var(--surface-soft); border-radius:12px; color:var(--brand); display:flex; font:600 24px 'Noto Serif JP',serif; height:48px; justify-content:center; margin-bottom:16px; width:48px; }
.about-feature-card h3,.about-steps h3,.about-credit-grid h3 { color:var(--ink); font-size:15px; margin:0 0 7px; }
.about-feature-card p,.about-steps p,.about-credit-grid p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.about-start .about-section-heading { margin-bottom:24px; }
.about-steps { display:grid; gap:0; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
.about-steps li { align-items:flex-start; display:flex; gap:13px; padding:0 17px; }
.about-steps li:first-child { padding-left:0; }.about-steps li+li { border-left:1px solid var(--border); }
.about-steps li>span { color:var(--brand); font:700 12px Inter,sans-serif; letter-spacing:.08em; padding-top:2px; }
.about-steps h3 { font-size:14px; }
.about-data-section { padding-top:4px; }
.about-credit-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.about-credit-grid article { background:var(--surface); border:1px solid var(--border); border-radius:13px; margin:0 !important; padding:17px 18px !important; }
.about-credit-grid a { overflow-wrap:anywhere; }
.about-credit { border-top:1px solid var(--border); color:var(--muted); font-size:12px; margin-top:18px !important; padding-top:15px; }
.dark .about-hero { background:radial-gradient(circle at 82% 50%,#504638 0,transparent 30%),linear-gradient(125deg,#292e28,var(--surface-control)); }
.dark .about-kanji-art i,.dark .about-kanji-art b { background:var(--surface); border-color:var(--border); }
.dark .about-feature-icon { background:var(--surface-selected); color:#f0a18b; }
@media (max-width:760px) {
  .about-shell { padding:16px 16px 48px; }
  .about-shell > .about-hero { gap:8px; grid-template-columns:minmax(0,1fr) 150px; margin:16px 0 32px; min-height:250px; padding:25px 22px; }
  .about-kanji-art { height:180px; }
  .about-kanji-art span { font-size:120px; }
  .about-kanji-art i,.about-kanji-art b { font-size:21px; height:46px; line-height:44px; width:46px; }
  .about-kanji-art em { font-size:9px; }
  .about-feature-grid { gap:10px; }
  .about-feature-card { min-height:205px; padding:16px !important; }
  .about-steps { gap:17px; grid-template-columns:1fr; }
  .about-steps li,.about-steps li:first-child { padding:0; }
  .about-steps li+li { border-left:0; }
}
@media (max-width:520px) {
  .about-shell > .about-hero { display:block; min-height:0; padding:26px 21px 10px; }
  .about-hero h1 { font-size:36px; }
  .about-shell .about-lead { font-size:14px; }
  .about-kanji-art { height:130px; margin:8px auto 0; max-width:250px; }
  .about-kanji-art span { font-size:104px; }
  .about-kanji-art i,.about-kanji-art b { height:40px; line-height:38px; width:40px; }
  .about-feature-grid,.about-credit-grid { grid-template-columns:1fr; }
  .about-feature-card { min-height:0; }
  .about-feature-icon { margin-bottom:11px; }
  .about-section { margin-top:32px; }
}

/* Desktop gives the map and study rail separate columns. */
.map-panel-toggle,.inline-stroke { display:none; }
.reading-example-group { background:var(--surface); border-radius:12px; box-shadow:0 4px 16px var(--shadow-soft); padding:11px 12px; }
.reading-example-group + .reading-example-group { margin-top:10px; }
.reading-example-head { align-items:baseline; display:flex; flex-wrap:wrap; gap:5px 9px; margin-bottom:10px; }
.reading-example-head span { background:var(--surface-soft); border-radius:5px; color:var(--ink-warm); font-size:10px; font-weight:800; padding:3px 6px; text-transform:uppercase; }
.reading-example-head strong { color:var(--brand); font:600 15px/1.35 'Noto Serif JP',serif; overflow-wrap:anywhere; }
.reading-word-box { background:var(--paper); border-radius:8px; padding:12px; }
.reading-word-row { align-items:center; display:flex; gap:8px; justify-content:space-between; }
.reading-word-row h1 { min-width:0; overflow-wrap:anywhere; }
.reading-example-group .word-meaning { font-size:13px; margin:8px 0 3px; }
.reading-example-group .han-viet { font-size:12px; margin:3px 0 0; }
button.speaker-button { align-items:center; background:var(--speaker-surface); border:0; border-radius:50%; color:var(--speaker-ink); display:flex; flex:none; font-size:13px; height:40px; justify-content:center; padding:0; width:40px; }
button.speaker-button:not(.is-speaking):not(.is-paused):hover { background:color-mix(in srgb,var(--speaker-surface) 85%,var(--surface-highlight)); }
button.speaker-button svg { height:20px; width:20px; }
button.speaker-button.is-speaking,button.speaker-button.is-paused { border:0; font-size:0; }
button.speaker-button.is-speaking { animation:speech-pulse .8s ease-in-out infinite alternate; background:var(--brand); color:var(--on-brand); }
button.speaker-button.is-paused { background:var(--surface-soft); color:var(--brand); }
button.speaker-button.is-speaking svg,button.speaker-button.is-paused svg { display:none; }
@media (prefers-reduced-motion:reduce) { button.speaker-button.is-speaking { animation:none; } }
.reading-sentence-button { align-items:center; background:var(--paper); border:0; display:flex; font-size:11px; gap:6px; justify-content:center; margin-top:10px; min-height:38px; white-space:normal; width:100%; }
.reading-sentence-button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.reading-sentence-button::before { content:none; }
.reading-sentence-button > span:first-child { font-size:15px; line-height:1; }
.kanji-summary { align-items:center; display:grid; gap:9px; grid-template-columns:40px minmax(0,1fr); min-height:42px; position:relative; }
.kanji-summary-mark { align-items:center; background:var(--brand); border-radius:7px; color:var(--on-brand); display:flex; font:600 24px/1 'Noto Serif JP',serif; height:40px; justify-content:center; width:40px; }
.kanji-summary-copy { min-width:0; padding-right:48px; }
.kanji-summary-name { color:var(--ink); display:block; font:700 15px/1.25 'Noto Serif JP',serif; overflow-wrap:anywhere; }
.kanji-summary-meaning { color:var(--muted); display:block; font-size:10px; line-height:1.3; margin-top:3px; }
.kanji-summary-grade { background:var(--surface-pill); border-radius:5px; color:var(--ink-pill); font-size:9px; font-weight:800; line-height:1.1; padding:4px 5px; position:absolute; right:0; top:0; white-space:nowrap; }
@media (min-width:901px) {
  .workspace { padding:16px; }
  .workspace-main > .breadcrumbs { margin-bottom:6px; }
  .workspace-main > .map-title { margin:0 0 8px; }
  .map-layout { align-items:start; display:grid; gap:12px; grid-template-columns:minmax(0,1fr) var(--right-panel-width,330px); position:relative; }
  .map-layout .workspace-main { grid-column:1; grid-row:1; min-width:0; }
  .map-layout .map-section { width:100%; }
  .map-layout .graph { height:max(520px,calc(100dvh - 139px)); margin:0; }
  .map-layout .detail-grid { display:flex; flex-direction:column; gap:10px; grid-column:2; grid-row:1; height:max(564px,calc(100dvh - 95px)); min-width:0; overflow:hidden; pointer-events:auto; position:relative; width:100%; }
  .map-layout .kanji-examples-panel { display:flex; flex:1 1 auto; flex-direction:column; gap:12px; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; scrollbar-width:thin; }
  .map-layout .kanji-card,.map-layout .word-card,.map-layout .study-card { box-shadow:0 5px 18px var(--shadow-card); min-height:0; pointer-events:auto; }
  .map-layout .kanji-card,.map-layout .reading-example-group,.map-layout .study-card { background:var(--surface-raised); }
  .map-layout .kanji-card { border:0; flex:none; padding:18px; position:relative; }
  .map-layout .word-card { background:transparent; border:0; box-shadow:none; flex:none; padding:0; position:relative; }
  .map-layout .study-card { border:0; flex:none; padding:14px; }
  .map-layout .word-card > .eyebrow { margin:0 0 8px 4px; }
  .map-layout .reading-example-group { background:var(--surface-highlight); box-shadow:0 8px 24px var(--shadow-highlight); }
  .map-layout .quick-review-card { align-items:center; flex:none; flex-direction:row; flex-wrap:wrap; gap:6px; justify-content:space-between; padding:8px 10px; }
  .map-layout .quick-review-head { flex:1; min-width:0; }
  .map-layout .quick-review-head .eyebrow { display:none; }
  .map-layout .quick-review-link { font-size:11px; white-space:nowrap; }
  .map-layout .quick-review-actions { display:flex; flex:none; gap:5px; }
  .map-layout .quick-review-actions button { display:flex; height:36px; justify-content:center; min-width:0; padding:0; width:36px; }
  .map-layout .quick-review-actions button > svg { height:18px; width:18px; }
  .map-layout .quick-review-label { display:none; }
  .map-layout .quick-review-status { flex-basis:100%; }
  .map-layout .quick-review-status:empty { display:none; }
  .map-layout .canvas-options { flex-wrap:wrap; justify-content:center; left:12px; right:12px; }
  .map-panel-toggle { align-items:center; background:var(--paper); border:0; border-radius:8px; color:var(--brand); display:flex; font-size:23px; height:30px; justify-content:center; line-height:1; position:absolute; right:12px; top:12px; width:30px; z-index:2; }
  .map-panel-toggle:hover,.map-panel-toggle:focus-visible { border-color:var(--brand); outline:none; }
  .map-layout .kanji-summary { padding-right:28px; }
  .map-layout .kanji-summary-grade { right:32px; }
  .inline-stroke { display:block; margin-top:12px; }
  .inline-stroke-head { align-items:center; color:var(--brand); display:flex; flex-wrap:wrap; font-size:11px; font-weight:700; gap:5px; justify-content:space-between; margin-bottom:7px; }
  .inline-stroke-actions,.inline-stroke-actions label { align-items:center; display:flex; gap:5px; }
  .inline-stroke-actions select { background:var(--paper); border:0; border-radius:5px; color:var(--ink); font-size:11px; padding:2px 3px; }
  .inline-stroke-head button { background:transparent; border:0; color:var(--brand); font-size:11px; font-weight:700; line-height:1; padding:4px 0 4px 6px; }
  .inline-stroke-canvas { align-items:center; background:var(--paper); border-radius:9px; display:flex; height:112px; justify-content:center; }
  .inline-stroke-canvas svg { height:108px; max-width:100%; width:auto; }
  .inline-stroke-canvas path { fill:none; stroke:var(--brand); stroke-linecap:round; stroke-linejoin:round; stroke-width:4; }
  .inline-stroke > small { color:var(--muted); display:block; font-size:9px; line-height:1.3; text-align:center; }
  .map-layout .kanji-card .stroke-order-button { display:none; }
  .map-layout .kanji-card .detail-actions:has(.stroke-order-button:only-child) { display:none; }
  .map-layout.is-right-collapsed { --right-panel-width:46px; }
  .map-layout.is-right-collapsed .kanji-card { height:88px; overflow:hidden; padding:8px; }
  .map-layout.is-right-collapsed .kanji-card > :not(.map-panel-toggle),.map-layout.is-right-collapsed .word-card,.map-layout.is-right-collapsed .study-card { display:none; }
  .map-layout.is-right-collapsed .kanji-card::after { color:var(--brand); content:'漢'; display:block; font:600 21px 'Noto Serif JP',serif; margin-top:37px; text-align:center; }
  .map-layout.is-right-collapsed .kanji-card .map-panel-toggle { left:8px; right:auto; top:7px; }
  .map-layout.is-right-collapsed .kanji-card .map-panel-toggle span { transform:rotate(180deg); }
}
@media (min-width:901px) and (max-width:1300px) {
  .map-layout:not(.is-right-collapsed) { --right-panel-width:255px; }
}
@media (min-width:901px) and (max-width:1100px) {
  .app-shell { grid-template-columns:220px minmax(0,1fr); }
  .workspace { padding:12px; }
  .map-layout:not(.is-right-collapsed) { --right-panel-width:230px; }
  .map-layout .kanji-card { padding:14px; }
  .map-layout .inline-stroke-canvas { height:88px; }
  .map-layout .inline-stroke-canvas svg { height:84px; }
  .map-layout .inline-stroke > small { display:none; }
  .map-layout .reading-example-group { padding:9px 10px; }
  .map-layout .reading-word-box { padding:9px; }
  .map-layout .reading-sentence-button { min-height:34px; }
}
@media (min-width:901px) and (max-height:800px) {
  .map-layout .kanji-examples-panel { gap:8px; }
  .map-layout .kanji-card { padding:12px; }
  .map-layout .inline-stroke { margin-top:8px; }
  .map-layout .inline-stroke-head { margin-bottom:4px; }
  .map-layout .inline-stroke-canvas { height:76px; }
  .map-layout .inline-stroke-canvas svg { height:72px; }
  .map-layout .inline-stroke > small { display:none; }
  .map-layout .word-card > .eyebrow { margin-bottom:5px; }
  .map-layout .reading-example-group { padding:8px 9px; }
  .map-layout .reading-example-group + .reading-example-group { margin-top:7px; }
  .map-layout .reading-example-head { margin-bottom:6px; }
  .map-layout .reading-word-box { padding:8px; }
  .map-layout .reading-sentence-button { margin-top:7px; min-height:30px; }
}
@media (min-width:901px) and (max-height:740px) {
  .map-layout .inline-stroke-canvas { height:62px; }
  .map-layout .inline-stroke-canvas svg { height:58px; }
  .map-layout .reading-example-group { padding:7px 8px; }
  .map-layout .reading-word-box { padding:7px; }
}