:root{--bg:#fdfdfc;--fg:#222;--muted:#555;--surface:#fff;--border:#ddd;--link:#0645AD;--link-hover:color-mix(in oklab, var(--link) 20%, black);--accent:var(--accent-green);--surface-elevated:#f8f8f8;--accent-green:#2e7d32;--accent-orange:#e65100;}
*{box-sizing:border-box}

:root{--bg:#f6f0e4;--fg:#1f1c17;--muted:#625b4f;--surface:#fff;--border:#d9cdbb;--link:#23518a;--link-hover:color-mix(in oklab, var(--link) 22%, black);--accent:var(--accent-green);--surface-elevated:#f6efe2;--accent-green:#2c6f52;--accent-orange:#c46a1f;--font-body:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;--font-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;--font-heading:"Source Han Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;--shadow-soft:0 18px 45px rgba(58,38,15,.08);--shadow-card:0 8px 18px rgba(58,38,15,.08);}

html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:radial-gradient(circle at top left, rgba(255,255,255,.9), transparent 34%),radial-gradient(circle at top right, rgba(255,241,216,.7), transparent 30%),linear-gradient(180deg, #faf6ee 0%, #f3ebdd 100%);color:var(--fg);padding:0 1rem 2rem 1rem;line-height:1.65;min-height:100vh;}
footer,main{max-width:960px;margin:0 auto}
.page-layout{max-width:960px;margin:0 auto}
.page-layout--with-sidebar main{max-width:none;margin:0}
.page-sidebar{width:100%}
body.home-page .header-inner,
body.home-page footer,
body.home-page .page-layout{max-width:900px}
body.home-page main{max-width:none;margin:0}
body.home-page .page-category-links{max-width:900px}
body.home-page .footer-content,
body.home-page .footer-bottom{max-width:900px}
header{
  position:sticky;
  top:0;
  z-index:1000;
  width:calc(100% + 2rem);
  margin:0 -1rem 1rem -1rem;
  padding:0.32rem 1rem;
  background:color-mix(in oklab,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid color-mix(in oklab,var(--border) 65%,transparent);
  box-shadow:0 10px 24px rgba(58,38,15,.08)
}
@media (min-width: 769px) {
  header {
    padding: 0.32rem 3rem;
  }
}
.header-inner{
  width:100%;
  max-width:none;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem
}
@media (min-width: 1024px) {
  .header-inner {
    max-width: 1200px;
  }
}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.2}
h1{font-size:1.5rem}
header h1{font-size:1.35rem;margin:0.4rem 0;line-height:.96;letter-spacing:.04em}
header h1 a{color:var(--fg)}
header a{text-decoration:none;color:var(--fg)}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: .4rem;
  z-index: 1001;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: var(--fg);
  height: 2px;
  width: 1.5rem;
  border-radius: 2px;
  position: relative;
  transition: all .2s;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.nav-toggle-label span::before { bottom: 7px; }
.nav-toggle-label span::after { top: 7px; }

.header-nav{display:flex;gap:1rem;align-items:center}
.header-nav a{padding:.5rem 1rem;border-radius:6px;background:var(--surface);border:1px solid var(--border);transition:all .15s;font-size:.95rem;white-space:nowrap}
.header-nav a:hover{background:var(--surface-elevated);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.08)}
a{color:var(--link);text-decoration:none;transition:color .15s}
a:hover{color:var(--link-hover);text-decoration:none}
a:focus{outline:3px solid color-mix(in oklab, var(--link) 30%, transparent);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}
.kanji-tile{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px;text-align:center;font-size:28px;line-height:42px;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s}
.kanji-tile:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.12)}
.meta{font-size:.9rem;color:var(--muted)}
code{background:color-mix(in oklab, var(--fg) 10%, transparent);padding:2px 4px;border-radius:3px}
.content{margin-top:1rem}



.kanji-page,
.yoji-page,
.kotowaza-page{max-width:800px;margin:0 auto}
.kanji-hero{text-align:center}
.kanji-hero-character{font-family:var(--font-display);font-size:6rem;line-height:1;margin:.5rem;font-weight:600}
.kanji-code{font-size:1.25rem;color:var(--muted);font-family:ui-monospace,monospace}
.kanji-section h2,
.yoji-section h2,
.kotowaza-section h2{font-size:1.1rem;margin:0 0 0.5rem;color:var(--accent);font-weight:600}
.kanji-content{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;line-height:1.8;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.kanji-content--entry > * + *{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.entry-subsection h2{font-size:1.1rem;margin:0 0 0.5rem;color:var(--accent);font-weight:600}

/* Ensure ordered lists inside kanji content look stable and readable */
.kanji-content ul{margin:0.5rem 0 0.5rem 1.25rem;padding-left:0}
.kanji-content ol{margin:0.5rem 0 0.5rem 1.25rem;padding-left:0}
.kanji-content ol li{margin:0.35rem 0}
.kanji-readings{display:flex;flex-direction:column;gap:0.5rem}
@media (min-width: 768px) {
  .kanji-readings{flex-direction:row;gap:1rem}
  
}
.reading-group{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.5rem 1rem;display:flex;flex-direction:row;align-items:center;gap:1rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.reading-label{font-weight:600;color:var(--muted);font-size:.95rem}
.reading-value{font-size:1.1rem;flex:1}
/* .kanji-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem} */
.kanji-info-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1rem;}
.info-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.5rem 1rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.info-label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem;font-weight:500}
.info-value{display:block;font-size:1.2rem;font-weight:500}
.info-value-font{display:block;font-size:3rem;font-weight:500}
.gothic-sample{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo","Noto Sans JP",sans-serif}
.mincho-sample{font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho","Noto Serif JP",serif}
.kanji-technical{margin:1rem 0;border:1px solid var(--border);border-radius:8px;background:var(--surface-elevated)}
.kanji-technical summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;color:var(--muted);user-select:none;transition:color .15s}
.kanji-technical summary:hover{color:var(--fg)}
.kanji-technical[open] summary{border-bottom:1px solid var(--border);color:var(--accent)}
.kanji-technical .kanji-info-grid{padding:1.25rem;margin:0}
.hero-image {
  width: 160px;
  max-width: 100%;
  height: auto;       /* アスペクト比維持 */
  display: block;
  margin: 0 auto;
}
.stroke-order-image {
  width: 160px;
  max-width: 100%;
  height: auto;       /* アスペクト比維持 */
  display: block;
  margin: 0 auto;
}
.kanji-credit{font-size:.8rem;text-align:right;color:var(--muted);padding-top:.5rem}

/* Site-wide footer styles */
.site-footer{background:var(--surface);border-top:2px solid var(--border);margin-top:4rem;padding:3rem 1rem 1.5rem;font-size: 1rem;}
.footer-content{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3{font-size:1.25rem;margin:0 0 0.75rem;color:var(--fg);font-weight:600}
.footer-section h4{font-size:1rem;margin:0 0 0.75rem;color:var(--fg);font-weight:600}
.footer-section p{color:var(--muted);line-height:1.6}
.footer-section ul{list-style:none;padding:0;margin:0}
.footer-section ul li{margin-bottom:0.5rem}
.footer-section ul li a{color:var(--link);text-decoration:none;transition:color .15s}
.footer-section ul li a:hover{color:var(--link-hover);text-decoration:none}
.footer-bottom{max-width:960px;margin:0 auto;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center}
.footer-bottom p{margin:0;color:var(--muted);font-size:0.9rem}

/* Search page styles */
.search-section{max-width:1200px;margin:0 auto;background:linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--accent) 6%, var(--surface)));border:2px solid color-mix(in oklab, var(--accent) 35%, var(--border));border-radius:10px;padding:1.75rem;margin-bottom:1.75rem;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.search-section h2{font-size:1.5rem;margin:0 0 2rem 0;}
.search-input-group{display:grid;gap:1.5rem;margin-bottom:0.75rem}
.search-input-group label{display:block;font-weight:700;margin:0;font-size:1.05rem;color:var(--fg)}
.search-input-group input{width:100%;padding:.9rem 1rem;font-size:1.1rem;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg);transition:border-color .15s, box-shadow .15s}
.search-input-group input::placeholder{color:color-mix(in oklab, var(--muted) 70%, transparent)}
.search-input-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent)}
.search-result-list{display:grid;gap:.35rem;padding:.75rem;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.search-result-list__heading{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.search-result-list__list{display:grid;gap:.35rem}
.search-result-list__empty{display:grid;gap:.75rem;padding:.25rem 0 .1rem}
.search-result-list__message{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.search-suggestion{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;min-width:0;padding:.75rem .9rem;border:1px solid transparent;border-radius:10px;background:var(--surface);color:var(--fg);box-shadow:0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;cursor:pointer;text-align:left}
.search-suggestion:hover{border-color:color-mix(in oklab, var(--accent) 35%, var(--border));transform:translateY(-1px);box-shadow:0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);outline:none}
.search-suggestion__main{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.search-suggestion__char{font-family:var(--font-display);font-size:1.6rem;line-height:1;font-weight:600}
.search-suggestion__meta{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.filter-item label{display:block;font-weight:500;margin-bottom:.5rem;font-size:.9rem;color:var(--muted)}
.filter-item select,.filter-item input{width:100%;padding:.5rem;font-size:.95rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);transition:border-color .15s}
.filter-item select:focus,.filter-item input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 15%, transparent)}
.search-actions{margin-top:1.25rem;display:flex;justify-content:flex-end}
.search-results-header{margin-bottom:1rem}
.search-result-list .loading,.search-result-list .no-results{text-align:center;padding:1rem 0;color:var(--muted);font-size:1.1rem}
.home-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1rem,3.5vw,3rem);margin-bottom:2rem;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,236,.9));border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-soft)}
.home-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, color-mix(in oklab, var(--accent-green) 18%, transparent), transparent 36%),radial-gradient(circle at bottom left, color-mix(in oklab, var(--accent-orange) 16%, transparent), transparent 32%);pointer-events:none}
.home-hero__copy,.home-hero__search{position:relative;z-index:1}
.home-kicker{margin:0 0 .75rem;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.home-hero h2{font-size:1.5rem;margin:0 0 1rem;line-height:1.08}
.home-lead{margin:0 0 1.5rem;font-size:1.05rem;color:var(--muted);max-width:54ch}
.cta-button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.82rem 1.25rem;background:var(--link);color:#fff;border-radius:999px;font-weight:700;transition:all .15s;box-shadow:var(--shadow-card);font-size:1rem}
.cta-button:hover{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 22px rgba(35,81,138,.18)}
.cta-button.cta-button--green{background:var(--accent-green)}
.cta-button.cta-button--orange{background:var(--accent-orange)}

@media (max-width: 640px){
  .search-section{padding:1rem}
  .search-suggestion{align-items:flex-start;flex-direction:column;gap:.3rem;padding:.7rem .8rem}
  .search-suggestion__meta{white-space:normal;overflow:visible;text-overflow:clip}
}

@media (min-width:800px){
.page-layout--with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:2.5rem;align-items:start;max-width:1024px}
.page-layout--with-sidebar .page-sidebar{margin-top:0}
.page-layout--with-sidebar .page-category-links{max-width:none;margin:0;padding:0;border-top:0}
}

.page-layout--three-column{display:grid;grid-template-columns:1fr;grid-template-areas:"main" "left" "right";gap:2rem}
.page-layout--three-column main{grid-area:main}
.page-layout--three-column .page-sidebar--left{grid-area:left}
.page-layout--three-column .page-sidebar--right{grid-area:right}
.page-sidebar--left,.page-sidebar--right{display:flex;flex-direction:column;}
.page-layout--three-column .page-category-links{margin:0}

.related-entries__list{display:grid;gap:.6rem}
.related-entries__list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}

@media (min-width:1024px){
  .page-layout--three-column{grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(200px,260px);grid-template-areas:"left main right";align-items:start;max-width:1200px}
  .page-sidebar--right{position:sticky;top:8rem;align-self:start}
}

@media (max-width:1023px){
  .page-layout--three-column .page-toc{display:none}
}

.page-toc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.page-toc h3{font-size:1.15rem;font-weight:600;margin:0 0 0.75rem;color:var(--fg)}
.page-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.35rem}
.page-toc li{border-radius:6px}
.page-toc li a{display:block;padding:.45rem .5rem;border-radius:6px;color:var(--link);transition:color .15s,background .15s}
.page-toc li a:hover{background:var(--surface-elevated);color:var(--accent)}

/* Kanji lists by category: use page-category-links partial styles */
.page-category-links{max-width:960px;margin:1rem auto 0;padding:1rem;border-top:1px solid var(--border);text-align:left}
.page-category-links h3{font-size:1.25rem;color:var(--fg);margin:0 0 1.5rem;text-align:center;font-weight:600}
.page-category-links .smaller-heading{font-size:1.25rem;margin-bottom:1rem;text-align:center;font-weight:600}
.category-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.category-list{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .15s,box-shadow .15s}
.category-list:hover{box-shadow:0 4px 8px rgba(0,0,0,.1)}
.category-list h4{font-size:1rem;color:var(--fg);margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);font-weight:600}
.category-list ul{list-style:none;padding:0;margin:0}
.category-list ul li{margin-bottom:.5rem}
.category-list ul li:last-child{margin-bottom:0}
.category-list ul li a{color:var(--link);display:block;padding:.25rem 0;transition:color .15s,padding-left .15s}
.category-list ul li a:hover{color:var(--link-hover);text-decoration:none}

/* Blocks page styles */
.blocks-section{max-width:1200px;margin:0 auto}
.blocks-section h2{font-size:1.75rem;margin-bottom:1rem}
.blocks-container{margin-top:2rem}
.block-section{margin-bottom:3rem}
.block-section h3{font-size:1.25rem;color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}
.blocks-container .loading,.blocks-container .error{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:1.1rem}
.blocks-container .error{color:#d32f2f}

/* Kanji section page styles */
.kanji-section-page{max-width:1200px;margin:0 auto}
.kanji-section-page h2{font-size:1.75rem;margin-bottom:.5rem}
.section-description{color:var(--muted);margin-bottom:1.5rem;font-size:1rem}
.kanji-index-content{line-height:2.2;column-gap:1.5rem}
.kanji-index-content h1{font-size:1.5rem;margin:0 0 1rem;color:var(--fg);font-weight:600}
.kanji-index-content h2{font-size:1.15rem;color:var(--fg);margin:1.5rem 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);font-weight:600}
.kanji-index-content p{margin:0 0 1rem}
.kanji-index-content a{display:inline-block;font-size:24px;line-height:32px;padding:6px;margin:4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;text-decoration:none;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s,color .15s;vertical-align:middle}
.kanji-index-content a:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.12);text-decoration:none}
.radical-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:1rem}
.radical-card{display:grid;justify-items:center;align-content:center;gap:.35rem;min-height:120px;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-card);color:var(--fg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.radical-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(58,38,15,.12);border-color:color-mix(in oklab, var(--accent) 40%, var(--border));color:var(--fg);text-decoration:none}
.radical-card__glyph{font-family:var(--font-display);font-size:2rem;line-height:1;font-weight:600}
.radical-card__label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.radical-card__count{font-size:.95rem;font-weight:700;color:var(--accent)}
.radical-title-name{font-size:1.25rem;color:var(--muted);font-weight:400}
.radical-page .radical-page__back{margin:0 0 1rem}
.radical-page .radical-page__back a{font-weight:700;color:var(--link)}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:1.1rem}

/* Reading drill-down navigation */
.reading-nav{
  --reading-nav-accent: var(--accent-green);
  --reading-nav-accent-soft: color-mix(in oklab, var(--reading-nav-accent) 9%, var(--surface));
  --reading-nav-accent-border: color-mix(in oklab, var(--reading-nav-accent) 28%, var(--border));
  --reading-nav-accent-strong: color-mix(in oklab, var(--reading-nav-accent) 72%, black);
  margin-top:1rem;
}
.reading-nav--kun{
  --reading-nav-accent: var(--accent-orange);
}
.reading-nav__hint{
  margin:0 0 1rem;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.7;
}
.reading-nav__groups{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:.75rem;
  align-items:start;
}
.reading-nav__group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.6rem;
  padding:.7rem;
  border:1px solid var(--reading-nav-accent-border);
  border-radius:16px;
  box-shadow:var(--shadow-card);
}
.reading-nav__group[data-reading-nav-open="true"]{
  border-color:color-mix(in oklab, var(--reading-nav-accent) 48%, var(--border));
  box-shadow:0 12px 24px rgba(58,38,15,.1);
}
.reading-nav__parent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.65rem .5rem;
  border:1px solid var(--reading-nav-accent-border);
  border-radius:12px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--reading-nav-accent) 16%, var(--surface)) 0%, var(--surface-elevated) 100%);
  color:var(--fg);
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.reading-nav__parent:hover,
.reading-nav__parent:focus-visible{
  border-color:color-mix(in oklab, var(--reading-nav-accent) 60%, var(--border));
  background:linear-gradient(180deg, color-mix(in oklab, var(--reading-nav-accent) 22%, var(--surface)) 0%, color-mix(in oklab, var(--reading-nav-accent) 8%, var(--surface-elevated)) 100%);
  color:var(--reading-nav-accent-strong);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  outline:none;
}
.reading-nav__parent[aria-expanded="true"]{
  border-color:color-mix(in oklab, var(--reading-nav-accent) 68%, var(--border));
  color:var(--reading-nav-accent-strong);
  background:linear-gradient(180deg, color-mix(in oklab, var(--reading-nav-accent) 28%, var(--surface)) 0%, color-mix(in oklab, var(--reading-nav-accent) 10%, var(--surface-elevated)) 100%);
}
.reading-nav__panel{
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--reading-nav-accent-border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.reading-nav__panel[hidden]{
  display: none !important;
}
.reading-nav__children{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.reading-nav__child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.5rem;
  padding:.45rem .8rem;
  border:1px solid color-mix(in oklab, var(--reading-nav-accent) 18%, var(--border));
  border-radius:999px;
  background:color-mix(in oklab, var(--reading-nav-accent) 7%, var(--surface));
  color:var(--fg);
  font-size:1.03rem;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;
}
.reading-nav__child:hover,
.reading-nav__child:focus-visible{
  border-color:color-mix(in oklab, var(--reading-nav-accent) 42%, var(--border));
  background:color-mix(in oklab, var(--reading-nav-accent) 13%, var(--surface-elevated));
  color:var(--reading-nav-accent-strong);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  outline:none;
}
.reading-nav__empty{
  margin:0;
  padding:.25rem .1rem .15rem;
  color:var(--muted);
  font-size:.92rem;
}

/* Compact tiles for the radical/stroke/on/kun index pages */
.kanji-section-page--radical-index .radical-grid,
.kanji-section-page--stroke-index .radical-grid,
.kanji-section-page--reading-index .radical-grid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:.625rem}
.kanji-section-page--radical-index .radical-card,
.kanji-section-page--stroke-index .radical-card,
.kanji-section-page--reading-index .radical-card{min-height:96px;padding:.75rem .5rem;border-radius:14px}
.kanji-section-page--radical-index .radical-card__glyph,
.kanji-section-page--stroke-index .radical-card__glyph,
.kanji-section-page--reading-index .radical-card__glyph{font-size:1.55rem}
.kanji-section-page--radical-index .radical-card__label{font-size:.66rem;letter-spacing:.12em}
.kanji-section-page--radical-index .radical-card__count,
.kanji-section-page--stroke-index .radical-card__count,
.kanji-section-page--reading-index .radical-card__count{font-size:.85rem}

/* Multi-column layout for kanji-section index pages */
@media (min-width:768px){
.kanji-index-content{column-count:2}
}

/* Center inline ad blocks placed in templates */
.ad-center{display:flex;justify-content:center;align-items:center;padding-top:2rem;flex-direction: row;flex-wrap:wrap;gap:2rem;}
.ad-sidebar-top{margin:1rem 0;display:flex;justify-content:left;align-items:center;flex-direction: row;flex-wrap:wrap;gap:2rem;}
.ad-vertical{margin:1rem 0;display:flex;justify-content:center;align-items:center;flex-direction: row;flex-wrap:wrap;gap:2rem;}
.ad-home-page,.ad-after-content{margin:1rem 0;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;gap:2rem;}

/* Collapsible index rows for radical/on/kun reading indexes */
.index-row{margin:0.5rem 0;border:1px solid var(--border);border-radius:8px;background:var(--surface-elevated);break-inside:avoid}
.index-row summary{padding:.75rem 1rem;cursor:pointer;font-weight:600;font-size:1.1rem;color:var(--fg);user-select:none;transition:color .15s,background .15s;list-style:none;display:flex;align-items:center;gap:.5rem}
.index-row summary::-webkit-details-marker{display:none}
.index-row summary::before{content:"▶";font-size:.75rem;color:var(--muted);transition:transform .2s}
.index-row[open] summary::before{transform:rotate(90deg)}
.index-row summary:hover{color:var(--accent);background:color-mix(in oklab, var(--fg) 3%, transparent)}
.index-row[open] summary{border-bottom:1px solid var(--border);color:var(--accent)}
.index-row-content{padding:1rem}
.index-row-content p{margin:0}

/* 404 Error page styles */
.error-page{text-align:center;padding:4rem 1rem}
.error-code{font-size:4rem;font-weight:700;color:var(--accent);margin:0;line-height:1}
.error-title{font-size:1.75rem;color:var(--fg);margin:1rem 0}
.error-message{font-size:1.1rem;color:var(--muted);margin:0 0 2rem}
.error-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.btn-home,.btn-search{display:inline-block;padding:.75rem 1.5rem;border-radius:6px;font-weight:600;text-decoration:none;transition:all .15s;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.btn-home{background:var(--accent);color:#fff}
.btn-home:hover{color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}
.btn-search{background:var(--surface);color:var(--accent);border:1px solid var(--border)}
.btn-search:hover{color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}

/* Yoji-jukugo (四字熟語) page styles */
.yoji-page .kanji-hero-character{font-size:clamp(3rem, 15vw, 4rem); letter-spacing: 0.1em; padding-top: 1rem;font-weight:600;}
.yoji-page .yoji-badges{justify-content:center;margin-top:1rem}

.yoji-intro{margin-bottom:1.5rem;color:var(--muted);line-height:1.8}
.yoji-results .loading,.yoji-results .no-results,.yoji-results .error{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:1.1rem}
.yoji-results .error{color:#d32f2f}
.yoji-list{display:flex;flex-direction:column;gap:1rem}
.yoji-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){
.yoji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
.yoji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.yoji-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:box-shadow .15s;display:block;color:var(--fg);text-decoration:none}
.yoji-card:hover{box-shadow:0 4px 8px rgba(0,0,0,.1);color:var(--fg);text-decoration:none}
.yoji-header{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem}
h3.yoji-title{font-family:var(--font-body);font-size:1.5rem;margin:0;color:var(--link);font-weight:600}
.yoji-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.yoji-badge{font-size:.75rem;padding:.25rem .5rem;border-radius:4px;font-weight:500}
.yoji-badge.difficulty-beginner{background:#e8f5e9;color:var(--accent-green)}
.yoji-badge.difficulty-intermediate{background:#fff3e0;color:#ef6c00}
.yoji-badge.difficulty-advanced{background:#ffebee;color:#c62828}
.yoji-meaning-ja{margin:0 0 .5rem;line-height:1.7;color:var(--fg)}
.yoji-meaning-en{margin:0;font-size:.95rem;color:var(--muted);line-height:1.6}

.list-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1rem}
.yoji-list-meta{margin:0 0 1rem}

/* Pagination generic styles */
.pagination-container {
  padding-top: 2rem;
}

.pagination, .kotowaza-pagination, .yoji-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.kanji-section-page .pagination {
  flex-direction: column;
  gap: 0.75rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.page-btn, .kotowaza-page-link, .yoji-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.page-btn:hover:not(:disabled):not(.is-disabled), 
.kotowaza-page-link:hover:not(.is-disabled), 
.yoji-page-link:hover:not(.is-disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-elevated);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.page-btn:active:not(:disabled):not(.is-disabled),
.kotowaza-page-link:active:not(.is-disabled),
.yoji-page-link:active:not(.is-disabled) {
  transform: translateY(0);
}

.page-btn:disabled,
.page-btn.is-disabled, 
.kotowaza-page-link.is-disabled, 
.yoji-page-link.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
  box-shadow: none;
}

.pagination-info {
  font-size: 1.1rem;
  color: var(--fg);
  font-weight: 700;
  padding: 0 1rem;
  font-variant-numeric: tabular-nums;
}

#kotowaza-pagination .pagination-info,
#yoji-pagination .pagination-info {
  flex-basis: 100%;
  text-align: center;
}

.pagination .icon {
  margin: 0 0.5rem;
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.page-btn.prev .icon { margin-right: 0.5rem; margin-left: 0; }
.page-btn.next .icon { margin-left: 0.5rem; margin-right: 0; }

.page-btn.prev:hover .icon { transform: translateX(-3px); }
.page-btn.next:hover .icon { transform: translateX(3px); }

/* Kotowaza (ことわざ) page styles */
.kotowaza-page .kanji-hero-character{font-size:clamp(2rem, 8vw, 3rem); letter-spacing: 0.05em; padding-top: 1rem;font-weight:600;}

.kotowaza-intro{margin-bottom:1.5rem;color:var(--muted);line-height:1.8}
.kotowaza-results .loading,.kotowaza-results .no-results,.kotowaza-results .error{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:1.1rem}
.kotowaza-results .error{color:#d32f2f}
.kotowaza-list{display:flex;flex-direction:column;gap:1rem}
.kotowaza-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){
.kotowaza-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
.kotowaza-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.kotowaza-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:box-shadow .15s;display:block;color:var(--fg);text-decoration:none}
.kotowaza-card:hover{box-shadow:0 4px 8px rgba(0,0,0,.1);color:var(--fg);text-decoration:none}
.kotowaza-header{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem}
h3.kotowaza-title{font-family:var(--font-body);font-size:1.5rem;margin:0;color:var(--link);font-weight:600}
.kotowaza-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.kotowaza-badge{font-size:.75rem;padding:.25rem .5rem;border-radius:4px;font-weight:500}
.kotowaza-badge.difficulty-beginner{background:#fff3e0;color:var(--accent-orange)}
.kotowaza-badge.difficulty-intermediate{background:#fff3e0;color:#ef6c00}
.kotowaza-badge.difficulty-advanced{background:#ffebee;color:#c62828}
.kotowaza-meaning-ja{margin:0 0 .5rem;line-height:1.7;color:var(--fg)}

.kotowaza-list-meta{margin:0 0 1rem}


@media (max-width:600px){
/* .kanji-info-grid{grid-template-columns:1fr} */
.reading-group{flex: 1}
.reading-label{min-width:auto}
.filter-group{grid-template-columns:1fr}
.welcome-section{padding:1rem 0}
.welcome-section h2{font-size:1.5rem}
.footer-content{grid-template-columns:1fr;gap:1.5rem}
.site-footer{padding:2rem 1rem 1rem}
.error-code{font-size:5rem}
.error-title{font-size:1.5rem}
.error-actions{flex-direction:column;align-items:center}
.kanji-section-page--radical-index .radical-grid,
.kanji-section-page--stroke-index .radical-grid,
.kanji-section-page--reading-index .radical-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.kanji-section-page--radical-index .radical-card,
.kanji-section-page--stroke-index .radical-card,
.kanji-section-page--reading-index .radical-card{min-height:72px;padding:.45rem .25rem;border-radius:10px}
.kanji-section-page--radical-index .radical-card__glyph,
.kanji-section-page--stroke-index .radical-card__glyph,
.kanji-section-page--reading-index .radical-card__glyph{font-size:1.4rem;line-height:1.05}
.kanji-section-page--radical-index .radical-card__label{font-size:.75rem;letter-spacing:.08em}
.kanji-section-page--radical-index .radical-card__count,
.kanji-section-page--stroke-index .radical-card__count,
.kanji-section-page--reading-index .radical-card__count{font-size:.68rem;line-height:1.1}
}

/* Header Navigation - Mobile */
@media screen and (max-width: 768px) {
  body {
    font-size: 1rem;
  }

  .nav-toggle-label {
    display: block;
    grid-column: 2;
    justify-self: end;
  }
  
  .header-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg);
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-top: 1px solid var(--border);
    gap: 0.5rem;
  }
  
  .nav-toggle:checked ~ .header-nav {
    display: flex;
  }
  
  .header-nav a {
    width: 100%;
    text-align: center;
    background: var(--surface);
  }

  .header-inner{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }

  header h1 {
    grid-column: 1;
  }

  /* Animate Hamburger */
  .nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }
  .nav-toggle:checked + .nav-toggle-label span::before {
    transform: rotate(45deg);
    bottom: 0;
  }
  .nav-toggle:checked + .nav-toggle-label span::after {
    transform: rotate(-45deg);
    top: 0;
  }
}

.kanji-related-list,
.kanji-related-list-single-kanji {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.kanji-related-list li a,
.kanji-related-list-single-kanji li a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: all 0.15s;
}
.kanji-related-list-single-kanji li a {
  font-size: 1.4rem;
}
.kanji-related-list li a:hover,
.kanji-related-list-single-kanji li a:hover {
  background: var(--surface-elevated);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}

.kanji-related-list li[hidden] {
  display: none;
}

.kanji-related-list-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.kanji-related-list-toggle:hover,
.kanji-related-list-toggle:focus-visible {
  background: var(--surface-elevated);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  outline: none;
}

/* Shared search input row */
.search-input-wrapper {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  position: relative;
}

.search-input-wrapper input {
  flex: 1;
}

.search-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: white !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #84c97c, #2f7d4a, #0f4d2e);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(15, 77, 46, 0.25);
  white-space: nowrap;
}

.search-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 77, 46, 0.35);
  filter: brightness(1.08);
  color: white !important;
  text-decoration: none !important;
}

.search-cta-btn:active {
  transform: translateY(0);
}

.ai-search-btn:disabled {
  background: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  opacity: 0.7;
}

.sparkle-icon {
  animation: pulse-sparkle 2s infinite ease-in-out;
}

@keyframes pulse-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.15) rotate(10deg); opacity: 1; }
}

/* Dynamic placeholder with smooth transitions */
.dynamic-placeholder {
  position: absolute;
  left: 1.1rem;
  top: 0;
  height: 3.12rem;
  display: flex;
  align-items: center;
  color: color-mix(in oklab, var(--muted) 70%, transparent);
  font-size: 1.1rem;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 150px);
}

.dynamic-placeholder .placeholder-text {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#search-input:focus ~ .dynamic-placeholder,
#search-input:not(:placeholder-shown) ~ .dynamic-placeholder,
#search-input:disabled ~ .dynamic-placeholder {
  opacity: 0;
  transform: translateX(10px);
}

@media (max-width: 576px) {
  .dynamic-placeholder {
    max-width: calc(100% - 2.5rem);
  }
  .header-search-btn {
    padding: 0.44rem 1.15rem !important;
    font-size: 0.95rem !important;
  }
}

.header-search-btn {
  padding: 0.44rem 1.75rem;
  line-height: 1.32;
}

/* AI Explanation Card */
.ai-explanation-container {
  margin-bottom: 2rem;
}

.ai-explanation-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(236, 72, 153, 0.05));
  border: 1.5px solid color-mix(in oklab, #a855f7 20%, var(--border));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 24px rgba(168, 85, 247, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: ai-slide-down 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-explanation-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ai-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.2);
}

.ai-explanation-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
}

.ai-explanation-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
  margin: 0;
}

/* Loader Styles */
.ai-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  text-align: center;
  gap: 1.5rem;
}

.ai-loader__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid color-mix(in oklab, #a855f7 10%, transparent);
  border-left-color: #a855f7;
  border-radius: 50%;
  animation: ai-spin 0.85s linear infinite;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.1);
}

.ai-loader__text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
  animation: ai-pulse-text 1.5s infinite ease-in-out;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

@keyframes ai-pulse-text {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes ai-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
  .search-input-wrapper {
    flex-direction: column;
  }
  .ai-search-btn {
    width: 100%;
    padding: 0.85rem;
  }
}