:root{--paper:#f5f0e7;--sheet:#fffdf8;--ink:#172d41;--muted:#64727b;--line:#d7d3c9;--accent:#af4f39;--accent-soft:#f8e8de;--teal:#3f7772;--shadow:0 18px 50px #1a29411c;--ui:"Segoe UI","Trebuchet MS",Arial,sans-serif;--jp:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP","MS Mincho",serif}
.kanapedia{--ink:#204647;--accent:#bc5844;--accent-soft:#f5e4dc;--teal:#2e716d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font:16px/1.65 var(--ui)}a{color:inherit}a:hover{color:var(--accent)}a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button,input{font:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.16}h1{letter-spacing:-.045em}h2{letter-spacing:-.03em}p{max-width:76ch}small{font-size:.8em}.muted,.aside-note{color:var(--muted)}
.site-header{position:relative;z-index:3;background:var(--sheet);border-bottom:1px solid var(--line)}.header-inner{max-width:1240px;min-height:82px;margin:auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:23px;font-weight:800;letter-spacing:-.04em;line-height:1.05}.brand:hover{color:var(--ink)}.brand small{display:block;margin-top:5px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.brand-seal{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--ink);color:#fff9ee;font:29px var(--jp);box-shadow:3px 3px 0 var(--accent)}.site-header nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:750}.site-header nav a{text-decoration:none}.site-header nav a[aria-current]{color:var(--accent)}.site-header nav a:last-child{padding:9px 14px;border:1px solid var(--line);border-radius:99px}.site-header nav a:last-child:hover{border-color:var(--accent)}
.home-hero{min-height:510px;display:flex;align-items:center;background:#fffaf2;border-bottom:1px solid #ded7c9}.hero-content{width:min(1240px,100%);margin:auto;padding:74px 28px 64px}.eyebrow{color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}.home-hero h1{max-width:740px;margin:16px 0 16px;font:clamp(48px,6.5vw,91px)/1.01 Georgia,var(--jp);letter-spacing:-.065em}.home-hero p:not(.eyebrow){max-width:560px;font-size:19px;line-height:1.55}.hero-stat{margin-top:21px;color:#566976;font-size:12px;font-weight:750;letter-spacing:.05em}.search-wrap{position:relative;max-width:560px;margin-top:30px}.search-wrap>label{display:block;margin-bottom:9px;font-size:13px;font-weight:800}.search-control{display:flex;align-items:center;gap:13px;height:62px;padding:0 17px;background:#fffefa;border:1px solid #bcc5c4;border-radius:13px;box-shadow:0 9px 28px #192b3b17}.search-control>span{font-size:32px;line-height:1;color:var(--accent)}.search-control input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:17px}.search-control input:focus-visible{outline:0}.search-control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #af4f3930}.search-control kbd{display:grid;place-items:center;min-width:26px;height:26px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font:13px var(--ui)}.search-results{position:absolute;top:100%;left:0;right:0;z-index:4;max-height:410px;overflow:auto;margin-top:8px;padding:8px;background:var(--sheet);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.search-results[hidden]{display:none}.search-results a{display:grid;grid-template-columns:50px minmax(0,1fr) 22px;align-items:center;gap:12px;padding:7px 11px;border-radius:8px;text-decoration:none}.search-results a:hover,.search-results a:focus-visible{background:var(--accent-soft)}.search-results .result-glyph{font:33px var(--jp)}.search-results .result-copy{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}.search-results .result-arrow{color:var(--accent)}.search-results p{margin:8px 10px;color:var(--muted);font-size:14px}
.home-main{max-width:1240px;margin:auto;padding:0 28px 80px}.home-section{padding:73px 0 0}.home-section-title{max-width:650px;margin-bottom:29px}.home-section-title h2,.history-band h2{margin:10px 0;font:clamp(31px,3.3vw,46px)/1.13 Georgia,var(--jp)}.home-section-title p:last-child{color:var(--muted)}.featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-card{min-height:170px;padding:18px 19px;display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line);border-radius:15px;text-decoration:none;box-shadow:0 6px 22px #192b3b0b;transition:transform .15s,border-color .15s}.feature-card:hover{transform:translateY(-3px);border-color:var(--accent)}.feature-card>span{font:56px/1.1 var(--jp)}.feature-card strong{margin-top:8px;font-size:16px}.feature-card small{margin-top:2px;color:var(--muted)}.browse-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.browse-card{position:relative;min-height:162px;padding:20px;background:var(--sheet);border:1px solid var(--line);border-radius:15px;text-decoration:none}.browse-card:hover{border-color:var(--accent);box-shadow:0 12px 28px #192b3b14}.browse-sample{display:block;margin-bottom:10px;color:var(--accent);font:38px/1.2 var(--jp)}.browse-card strong,.browse-card small{display:block}.browse-card small{color:var(--muted)}.browse-arrow{position:absolute;right:19px;bottom:15px;color:var(--accent);font-size:24px}.history-band{display:grid;grid-template-columns:1fr 1.1fr;gap:16px 55px;align-items:start;margin-top:76px;padding:42px 46px;background:var(--ink);color:#fffaf0;border-radius:20px}.history-band .eyebrow{color:#f3b79b}.history-band p{color:#d9e0df}.history-band .text-link{grid-column:2;color:#ffddc4;font-weight:750;text-decoration:none}.history-band .text-link:hover{text-decoration:underline}
.kana-table{max-width:730px;padding:15px 28px;background:var(--sheet);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.kana-table-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:5px 4px 14px;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.16em}.kana-pair{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;text-align:center;min-height:58px;border-bottom:1px solid #e8e3d9}.kana-pair:last-child{border-bottom:0}.kana-pair a{font:36px var(--jp);text-decoration:none}.kana-pair span{color:var(--muted);font-weight:700}
.entry-wrap,.browse-page,.sources-page{max-width:1240px;margin:auto;padding:31px 28px 85px}.breadcrumbs{margin-bottom:25px;color:var(--muted);font-size:13px;font-weight:700}.breadcrumbs a{text-decoration:none;color:var(--ink)}.breadcrumbs span{margin:0 8px;color:#a4a9a6}.entry-head{display:flex;align-items:center;gap:37px;margin-bottom:33px}.entry-glyph{display:grid;place-items:center;flex:none;width:190px;min-height:190px;background:var(--sheet);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);font:132px/1.15 var(--jp)}.entry-head h1{margin:12px 0;font:clamp(42px,5vw,72px)/1.05 Georgia,var(--jp)}.entry-meanings{margin:0 0 18px;color:var(--muted);font-size:18px}.meta-pills{display:flex;flex-wrap:wrap;gap:7px}.meta-pills span{padding:5px 10px;border:1px solid var(--line);border-radius:99px;background:#fdfaf3;color:#54626c;font-size:12px;font-weight:750}.entry-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:25px;align-items:start}.entry-main{display:grid;gap:22px}.panel,.aside-card{padding:30px 33px;background:var(--sheet);border:1px solid var(--line);border-radius:18px;box-shadow:0 9px 30px #192b3b0b}.panel h2{font:33px/1.17 Georgia,var(--jp)}.panel h3{margin:23px 0 9px;font-size:16px}.panel p:last-child{margin-bottom:0}.section-heading{display:flex;align-items:start;gap:17px;margin-bottom:20px}.section-heading>span{color:var(--accent);font-size:12px;font-weight:850}.section-heading h2{margin:0}.source-label{color:var(--muted);font-size:12px;font-weight:700}.source-label a{color:var(--accent)}.reading-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}.reading-columns h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.reading-columns h3 small{margin-left:5px;color:var(--muted);font-family:var(--jp);text-transform:none}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{padding:6px 12px;border-radius:9px;background:var(--accent-soft);font:20px/1.2 var(--jp)}.origin-lead{font-size:19px;line-height:1.55}.sense-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:25px 0;padding:19px;border:1px solid var(--line);border-radius:12px;background:#f7f4ec}.sense-pair div>span,.fact-grid div>span{display:block;margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.sense-pair strong{font-size:16px}.sense-arrow{color:var(--accent);font-size:25px}.form-comparison{display:flex;align-items:center;gap:22px;margin:23px 0;font:47px var(--jp)}.form-comparison span:nth-child(2){color:var(--accent);font:25px var(--ui)}.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:20px 0}.fact-grid div{min-width:0;padding:17px;background:#f7f4ec;border-radius:11px}.fact-grid strong{display:block;word-break:break-word;font-size:21px}.fact-grid small{display:block;margin-top:3px;color:var(--muted);line-height:1.35}.examples,.notes,.source-list{padding-left:22px}.examples{columns:2;column-gap:35px}.examples li,.notes li{break-inside:avoid;padding:3px 0}.timeline{display:grid;gap:20px;margin:4px 0 22px;padding-left:20px;border-left:2px solid var(--line)}.timeline div{position:relative;padding-left:18px}.timeline div:before{position:absolute;content:"";left:-27px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--accent)}.timeline time{display:block;color:var(--accent);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.timeline p{margin:5px 0 0}.entry-aside{display:grid;gap:16px}.aside-card{padding:23px}.aside-card dl{display:grid;grid-template-columns:1fr auto;gap:8px 13px;margin:0}.aside-card dt{color:var(--muted);font-size:12px}.aside-card dd{margin:0;text-align:right;font-size:13px;font-weight:750}.aside-card .aside-note{margin:20px 0 0;font-size:12px}.aside-card .source-list{margin-bottom:0;font-size:13px}.aside-card .source-list li{margin:8px 0}.entry-bottom{margin-top:32px}.entry-bottom a{font-weight:800;text-decoration:none}.entry-bottom a:hover{text-decoration:underline}
.browse-page h1,.sources-page h1{margin:12px 0;font:clamp(44px,5vw,72px)/1.07 Georgia,var(--jp)}.browse-page>p:not(.eyebrow),.sources-page>p:not(.eyebrow){color:var(--muted)}.browse-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:35px}.list-tile{display:flex;min-height:139px;flex-direction:column;align-items:center;justify-content:center;padding:13px;text-align:center;text-decoration:none;background:var(--sheet);border:1px solid var(--line);border-radius:13px}.list-tile:hover{border-color:var(--accent);box-shadow:0 7px 22px #192b3b12}.list-tile>span{font:51px/1.2 var(--jp)}.list-tile strong{margin-top:5px;font-size:13px}.list-tile small{color:var(--muted)}.sources-page{max-width:930px}.sources-page .panel{margin-top:20px}.sources-page .source-list li{margin:11px 0}
.site-footer{background:var(--ink);color:#f4f4ea}.footer-inner{max-width:1240px;margin:auto;padding:36px 28px;display:grid;grid-template-columns:180px 1fr auto;gap:25px;align-items:start;font-size:12px}.footer-inner strong{font-size:18px}.footer-inner span{color:#cfd7d4}.footer-inner a{color:#f2dac9;text-decoration:none}.footer-inner a:hover{text-decoration:underline}
@media(max-width:900px){.entry-layout{grid-template-columns:1fr}.entry-aside{grid-template-columns:1fr 1fr}.browse-list{grid-template-columns:repeat(4,1fr)}.browse-grid,.featured-grid{grid-template-columns:repeat(3,1fr)}.footer-inner{grid-template-columns:150px 1fr}.footer-inner div{grid-column:2}}
@media(max-width:620px){.header-inner{min-height:75px;padding:12px 17px;flex-wrap:wrap}.site-header nav{width:100%;gap:15px;overflow:auto;padding:4px 0 8px;white-space:nowrap;font-size:12px}.brand{font-size:21px}.brand-seal{width:41px;height:41px;font-size:25px}.home-hero{min-height:500px;background-position:65% center}.home-hero:before{content:"";position:absolute;left:0;right:0;height:500px;background:linear-gradient(90deg,#fbf6edeb,#fbf6edd4 68%,#fbf6ed65);pointer-events:none}.hero-content{position:relative;padding:54px 20px 45px}.home-hero h1{font-size:clamp(47px,12vw,65px)}.home-hero p:not(.eyebrow){font-size:16px}.home-main{padding:0 17px 60px}.home-section{padding-top:54px}.featured-grid,.browse-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feature-card{min-height:148px}.browse-card{min-height:145px}.history-band{grid-template-columns:1fr;padding:29px;margin-top:54px}.history-band .text-link{grid-column:1}.kana-table{padding:10px 17px}.entry-wrap,.browse-page,.sources-page{padding:22px 17px 65px}.entry-head{gap:19px;align-items:flex-start}.entry-glyph{width:110px;min-height:110px;font-size:77px;border-radius:14px}.entry-head h1{margin:6px 0;font-size:39px}.entry-meanings{font-size:14px}.meta-pills span{font-size:10px}.panel,.aside-card{padding:22px}.panel h2{font-size:26px}.entry-aside{grid-template-columns:1fr}.reading-columns,.sense-pair{grid-template-columns:1fr}.sense-arrow{transform:rotate(90deg);justify-self:start}.fact-grid{grid-template-columns:1fr 1fr}.examples{columns:1}.browse-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.list-tile{min-height:115px}.list-tile>span{font-size:40px}.footer-inner{grid-template-columns:1fr;gap:12px}.footer-inner div{grid-column:1}}
@media(max-width:390px){.entry-head{display:block}.entry-glyph{margin-bottom:18px}.fact-grid{grid-template-columns:1fr}.featured-grid,.browse-grid{grid-template-columns:1fr 1fr}.browse-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.feature-card{transition:none}}
.home-hero{position:relative}
.home-hero h1{max-width:640px}

/* MojiMichi reference: typography and real characters carry the design. */
@font-face {
  font-family: "Sumi Mincho";
  src: url("sumi-mincho-bold.woff2") format("woff2");
  font-display: swap;
}
:root {
  --paper: #f4efe5;
  --sheet: #fffaf2;
  --ink: #112d50;
  --muted: #617181;
  --line: #dedbd3;
  --accent: #ce4c45;
  --accent-soft: #fcece6;
  --teal: #315f5b;
  --shadow: 0 7px 22px #2334450b;
}
.kanapedia {
  --ink: #112d50;
  --accent: #ce4c45;
  --accent-soft: #fcece6;
}
body {
  background: url("washi-paper.png") center top / 820px auto repeat, var(--paper);
  font-family: system-ui, "Segoe UI", sans-serif;
}
.site-header {
  background: linear-gradient(#fffaf2df, #fffaf2df), url("washi-paper.png") center / 820px auto;
  border-bottom-color: #dedbd3;
}
.header-inner { min-height: 78px; }
.brand { gap: 8px; font: 600 24px/1.05 Georgia, serif; letter-spacing: -.045em; }
.brand small { margin-top: 4px; font: 600 10px/1.2 system-ui, sans-serif; letter-spacing: .11em; }
.brand-mark { display: block; flex: 0 0 76px; width: 76px; height: 50px; object-fit: contain; }
.site-header nav { gap: 25px; color: #344b60; font-size: 13px; font-weight: 650; }
.site-header nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; }
.site-header nav a:last-child { padding: 8px 12px; border-radius: 7px; }
.home-hero {
  min-height: 490px;
  isolation: isolate;
  background: linear-gradient(#fffaf2b5, #fffaf2b5), url("washi-paper.png") center / 820px auto;
  border-bottom: 1px solid #dedbd3;
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("sumi-landscape.png") center bottom / cover no-repeat;
  opacity: .45;
  pointer-events: none;
}
.home-hero::after { content: none; }
.hero-content { position: relative; z-index: 1; padding-top: 69px; padding-bottom: 57px; }
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.hero-art::before {
  content: "";
  position: absolute;
  width: min(31vw, 390px);
  height: min(31vw, 390px);
  top: 3%;
  right: 6%;
  background: url("vermilion-sun.png") center / contain no-repeat;
  opacity: .76;
}
.hero-art::after { content: none; }
.hero-art-glyph {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6%;
  color: #1f252a;
  font: 700 clamp(220px, 27vw, 360px)/1 "Sumi Mincho", var(--jp);
}
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .13em; }
.home-hero h1 { max-width: 600px; margin: 14px 0 16px; font-size: clamp(46px, 5.3vw, 71px); line-height: 1.04; letter-spacing: -.052em; }
.home-hero p:not(.eyebrow) { max-width: 540px; color: #43566a; font-size: 17px; }
.hero-stat { margin-top: 17px; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.search-wrap { max-width: 520px; margin-top: 26px; }
.search-wrap > label { color: #344b60; font-weight: 650; }
.search-control {
  height: 55px;
  background: #fffdf8;
  border-color: #bac6ce;
  border-radius: 8px;
  box-shadow: 0 3px 10px #24374a0b;
}
.search-control > span { font-size: 26px; }
.search-control input { font-size: 15px; }
.search-results { border-radius: 8px; }
.home-section { padding-top: 64px; }
.home-section-title h2, .history-band h2 { font-size: clamp(29px, 3vw, 40px); font-weight: 500; }
.featured-grid, .browse-grid { gap: 12px; }
.feature-card, .browse-card, .list-tile {
  background: #fffdf8;
  border-color: #dedbd3;
  border-radius: 8px;
  box-shadow: none;
}
.feature-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 13px;
  min-height: 106px;
  padding: 14px 16px;
}
.feature-card:hover { transform: translateY(-2px); background: #fff9ef; }
.browse-card:hover, .list-tile:hover { background: #fff9ef; box-shadow: none; }
.feature-card > span { grid-column: 1; grid-row: 1 / 3; align-self: center; color: var(--ink); font-size: 48px; }
.feature-card strong { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
.feature-card small { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-card strong, .browse-card strong { font-weight: 650; }
.browse-sample { color: #315f9a; }
.browse-arrow { font-size: 21px; }
.history-band {
  margin-top: 68px;
  padding: 36px 39px;
  background: #173f70;
  border-radius: 8px;
}
.history-band .eyebrow { color: #ffc3b2; }
.history-band .text-link { color: #fff6e5; }
.kana-table, .entry-glyph, .panel, .aside-card {
  background: #fffdf8;
  border-color: #dedbd3;
  border-radius: 8px;
  box-shadow: none;
}
.kana-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
}
.kana-table-head { display: none; }
.kana-pair {
  grid-template-columns: 1fr auto 1fr;
  gap: 7px;
  min-height: 86px;
  padding: 10px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kana-pair:last-child { border-bottom: 1px solid var(--line); }
.kana-pair a { font-size: 34px; }
.kana-pair span { font-size: 13px; }
.entry-glyph { color: var(--ink); font-family: "Sumi Mincho", var(--jp); }
.feature-card > span, .browse-sample, .list-tile > span, .kana-pair a { font-family: "Sumi Mincho", var(--jp); }
.meta-pills span { background: #f6f3ec; border-radius: 6px; }
.panel h2 { font-weight: 500; }
.chips span { border-radius: 6px; }
.sense-pair, .fact-grid div { background: #f5f2eb; border-radius: 6px; }
.site-footer { background: #173f70; }

@media (max-width: 620px) {
  .header-inner { min-height: 70px; }
  .brand { font-size: 22px; }
  .brand-mark { flex-basis: 61px; width: 61px; height: 43px; }
  .site-header nav { gap: 17px; }
  .home-hero { min-height: 0; }
  .home-hero::before { opacity: .23; background-size: auto 62%; background-position: right bottom; }
  .hero-art { display: grid; top: 20px; bottom: auto; right: -32px; width: 175px; height: 190px; opacity: .13; }
  .hero-art::before { width: 160px; height: 160px; top: 0; right: 0; }
  .hero-art-glyph { font-size: 170px; }
  .hero-content { padding: 49px 20px 48px; }
  .home-hero h1 { font-size: clamp(42px, 10vw, 58px); }
  .home-hero p:not(.eyebrow) { font-size: 15px; }
  .home-section { padding-top: 50px; }
  .feature-card, .browse-card { min-height: 138px; }
  .feature-card { grid-template-columns: 43px minmax(0, 1fr); min-height: 95px; gap: 8px; padding: 12px; }
  .feature-card > span { font-size: 39px; }
  .kana-table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kana-pair { min-height: 72px; gap: 2px; padding: 7px; }
  .kana-pair a { font-size: 27px; }
  .kana-pair span { font-size: 11px; }
  .history-band { padding: 28px; margin-top: 52px; }
}