.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.glossary-wrap{width:min(1120px,calc(100% - 40px));}
.glossary-main{margin-top:62px;}
.glossary-page .site-header,.glossary-word-page .site-header{position:relative;z-index:10;}
.glossary-footer a{color:var(--indigo);text-decoration:none;}
.glossary-footer a:hover{text-decoration:underline;}

/* Glossary index */
.glossary-hero{
  padding:0 4px;
}
.glossary-hero .section-kicker{margin:0 0 10px;}
.glossary-hero h1{
  margin:0;
  font:700 clamp(43px,6.6vw,72px)/1.03 var(--display);
  letter-spacing:-.045em;
}
.glossary-hero-copy > p:last-child{
  max-width:610px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
}
.glossary-browser{
  margin-top:42px;
  border:1px solid var(--line);
  border-top:3px solid var(--persimmon);
  border-radius:17px;
  background:rgba(255,255,255,.9);
  box-shadow:0 28px 70px -48px rgba(22,31,51,.76);
  overflow:hidden;
}
.glossary-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  padding:23px 25px 17px;
}
.glossary-search{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  min-height:50px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  transition:border-color .15s,box-shadow .15s;
}
.glossary-search:focus-within{border-color:var(--indigo-soft);box-shadow:0 0 0 3px rgba(47,71,122,.1);}
.glossary-search svg{width:20px;height:20px;fill:none;stroke:var(--indigo);stroke-width:1.8;stroke-linecap:round;}
.glossary-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 14px var(--ui);}
.glossary-search input::placeholder{color:#8992a1;}
.glossary-search kbd{padding:2px 7px;border:1px solid var(--line-soft);border-bottom-color:var(--line);border-radius:5px;background:var(--paper-2);color:var(--muted);font:600 10px var(--ui);}
.glossary-sort{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.glossary-sort select{min-height:50px;padding:0 36px 0 13px;border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink);font:700 12px var(--ui);text-transform:none;}
.glossary-sort select:focus-visible{outline:3px solid rgba(47,71,122,.2);outline-offset:2px;}
.glossary-filter-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 25px 20px;border-bottom:1px solid var(--line-soft);}
.glossary-filters{display:flex;gap:7px;flex-wrap:wrap;}
.glossary-filters button{
  min-height:34px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:100px;
  background:white;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.glossary-filters button:hover{border-color:var(--indigo-soft);color:var(--indigo);}
.glossary-filters button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:white;}
.glossary-filters button:focus-visible{outline:3px solid rgba(47,71,122,.24);outline-offset:2px;}
.glossary-result-count{margin:0;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap;}
.glossary-column-head{
  display:grid;
  grid-template-columns:56px minmax(110px,.8fr) minmax(130px,.8fr) minmax(200px,1.5fr) 105px 26px;
  gap:16px;
  align-items:center;
  padding:11px 25px;
  border-bottom:1px solid var(--line-soft);
  background:var(--paper-2);
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.glossary-list{margin:0;padding:0;list-style:none;}
.glossary-list-item{position:relative;}
.glossary-list-item + .glossary-list-item{border-top:1px solid var(--line-soft);}
.glossary-list-link{
  display:grid;
  grid-template-columns:56px minmax(110px,.8fr) minmax(130px,.8fr) minmax(200px,1.5fr) 105px 26px;
  gap:16px;
  align-items:center;
  min-height:82px;
  padding:12px 25px;
  color:var(--ink);
  text-decoration:none;
  transition:background .15s;
}
.glossary-list-link:hover{background:#f7f9fc;}
.glossary-list-link:focus-visible{position:relative;z-index:1;outline:3px solid rgba(47,71,122,.32);outline-offset:-3px;}
.glossary-number{color:var(--muted);font:500 11px var(--ui);font-variant-numeric:tabular-nums;}
.glossary-word{font:600 27px/1.2 var(--display);letter-spacing:.015em;}
.glossary-reading{color:var(--indigo);font:600 14px/1.3 var(--display);letter-spacing:.04em;}
.glossary-reading small{display:block;margin-top:3px;color:var(--muted);font:500 10px var(--ui);letter-spacing:.04em;}
.glossary-meaning{font-size:13px;font-weight:500;line-height:1.4;}
.glossary-progress{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:700;white-space:nowrap;}
.glossary-progress::before{width:7px;height:7px;border-radius:50%;background:var(--line);content:"";}
.glossary-progress[data-status="learning"]::before{background:var(--persimmon);}
.glossary-progress[data-status="reviewing"]::before{background:#548b6c;}
.glossary-progress[data-status="due"]::before{background:#b44444;box-shadow:0 0 0 3px #f7e1e1;}
.glossary-arrow{color:var(--indigo-soft);font-size:20px;transition:transform .15s;}
.glossary-list-link:hover .glossary-arrow{transform:translateX(3px);}
.glossary-list-item.has-conjugation .glossary-progress,.glossary-list-item.has-conjugation .glossary-arrow{visibility:hidden;}
.glossary-conjugate-link{
  position:absolute;
  z-index:2;
  top:50%;
  right:21px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--indigo-soft);
  border-radius:100px;
  background:white;
  color:var(--indigo);
  font-size:10px;
  font-weight:700;
  text-decoration:none;
  transform:translateY(-50%);
}
.glossary-conjugate-link:hover{border-color:var(--indigo);background:var(--indigo);color:white;}
.glossary-conjugate-link:focus-visible{outline:3px solid rgba(47,71,122,.28);outline-offset:2px;}
.glossary-empty{padding:70px 24px;text-align:center;}
.glossary-empty[hidden]{display:none;}
.glossary-empty > span{color:var(--indigo-soft);font:600 15px var(--display);letter-spacing:.08em;}
.glossary-empty h2{margin:8px 0 0;font:600 30px var(--display);}
.glossary-empty p{margin:8px 0 0;color:var(--muted);font-size:13px;}
.glossary-empty button{margin-top:20px;padding:9px 14px;border:1px solid var(--indigo);border-radius:100px;background:white;color:var(--indigo);font-size:11px;font-weight:700;}

/* Word detail */
.word-main{margin-top:46px;}
.word-breadcrumb{display:flex;align-items:center;gap:9px;margin:0 4px 16px;color:var(--muted);font-size:11px;font-weight:700;}
.word-breadcrumb a{color:var(--indigo);text-decoration:none;}
.word-breadcrumb a:hover{text-decoration:underline;}
.word-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.74fr);
  min-height:520px;
  border:1px solid var(--line);
  border-top:3px solid var(--persimmon);
  border-radius:18px;
  background:white;
  box-shadow:0 30px 70px -46px rgba(22,31,51,.76);
  overflow:hidden;
}
.word-hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:54px 58px;}
.word-hero-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.word-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:100px;background:var(--paper-2);color:var(--muted);}
.word-status::before{width:6px;height:6px;border-radius:50%;background:var(--line);content:"";}
.word-status[data-status="learning"]::before{background:var(--persimmon);}
.word-status[data-status="reviewing"]::before{background:#548b6c;}
.word-status[data-status="due"]::before{background:#b44444;}
.word-hero h1{margin:27px 0 0;font:700 clamp(76px,11vw,126px)/.96 var(--display);letter-spacing:.015em;overflow-wrap:anywhere;}
.word-title-audio{
  margin:0;
  padding:0 4px;
  border:0;
  border-radius:10px;
  appearance:none;
  color:inherit;
  background:transparent;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-align:left;
  overflow-wrap:anywhere;
  cursor:pointer;
}
.word-title-audio:hover,.word-title-audio.is-playing{color:var(--persimmon);background:var(--persimmon-tint);}
.word-title-audio:focus-visible{outline:2px solid var(--indigo);outline-offset:6px;}
.word-title-audio:active{background:var(--persimmon-tint);}
.word-reading{margin:17px 0 0;color:var(--indigo);font:600 clamp(22px,3vw,29px)/1.2 var(--display);letter-spacing:.1em;}
.word-romaji{margin:5px 0 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.word-meaning{max-width:580px;margin:22px 0 0;font-size:clamp(19px,2.7vw,27px);font-weight:700;line-height:1.32;}
.word-audio-button,.sentence-audio-button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 14px;
  border:1px solid var(--indigo);
  border-radius:100px;
  background:white;
  color:var(--indigo);
  font-size:11px;
  font-weight:700;
}
.word-audio-button{margin-top:27px;}
.word-audio-button svg,.sentence-audio-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.word-audio-button:hover,.sentence-audio-button:hover,.word-audio-button.is-playing,.sentence-audio-button.is-playing{background:var(--indigo);color:white;}
.word-audio-button:focus-visible,.sentence-audio-button:focus-visible{outline:3px solid rgba(47,71,122,.26);outline-offset:3px;}
.word-illustration{position:relative;display:grid;place-items:center;min-width:0;margin:0;padding:46px;background:linear-gradient(145deg,#f7f9fc,#e8edf4);overflow:hidden;}
.word-illustration::before{position:absolute;width:74%;aspect-ratio:1;border:1px solid rgba(94,118,168,.18);border-radius:50%;content:"";}
.word-illustration::after{position:absolute;width:54%;aspect-ratio:1;border:1px solid rgba(94,118,168,.13);border-radius:50%;content:"";}
.word-illustration img{position:relative;z-index:2;display:block;width:100%;max-width:430px;height:410px;object-fit:contain;filter:drop-shadow(0 20px 20px rgba(22,31,51,.1));}
.word-art-number{position:absolute;z-index:1;right:24px;bottom:-28px;color:rgba(47,71,122,.08);font:700 132px/1 var(--display);letter-spacing:-.06em;}
.word-detail-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);gap:20px;margin-top:20px;}
.word-example,.word-notes{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.84);}
.word-example{padding:34px 37px 38px;}
.word-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.word-section-heading .section-kicker,.word-notes .section-kicker{margin:0 0 7px;}
.word-section-heading h2,.word-notes h2{margin:0;font:600 24px/1.25 var(--display);}
.word-sentence{margin:37px 0 0;font:600 clamp(29px,4.3vw,43px)/1.6 var(--display);letter-spacing:.02em;}
.word-sentence[data-play-sentence]{
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:9px;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.word-sentence[data-play-sentence]:hover,.word-sentence[data-play-sentence].is-playing{border-color:var(--indigo-soft);background:var(--paper-2);box-shadow:0 8px 22px -20px rgba(22,31,51,.7);}
.word-sentence .word-sentence-target-audio{margin:0;padding:0;border:0;border-radius:5px;appearance:none;color:var(--persimmon);background:linear-gradient(transparent 72%,var(--persimmon-tint) 72%);font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;}
.word-sentence .word-sentence-target-audio:hover,.word-sentence .word-sentence-target-audio:focus-visible,.word-sentence .word-sentence-target-audio.is-playing{outline:2px solid var(--persimmon);outline-offset:3px;background:var(--persimmon-tint);}
.word-sentence ruby{ruby-position:over;}
.word-sentence rt{color:var(--indigo);font:500 .38em var(--ui);letter-spacing:.04em;}
.word-sentence .target-word{color:var(--persimmon);font-weight:700;}
.word-sentence-romaji{margin:10px 0 0;color:var(--indigo-soft);font-size:12px;font-weight:600;letter-spacing:.03em;}
.word-sentence-meaning{margin:16px 0 0;padding-top:17px;border-top:1px solid var(--line-soft);font-size:16px;font-weight:700;}
.word-notes{padding:31px 30px;}
.word-notes > p:not(.section-kicker){margin:15px 0 0;color:var(--muted);font-size:13px;line-height:1.65;}
.word-facts{margin:23px 0 0;}
.word-facts > div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid var(--line-soft);}
.word-facts > div[hidden]{display:none;}
.word-facts dt{color:var(--muted);font-size:10px;font-weight:700;}
.word-facts dd{margin:0;font-size:11px;font-weight:700;text-align:right;}
.word-conjugation-link{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:11px 13px;border-radius:9px;font-size:11px;font-weight:700;text-decoration:none;}
.word-conjugation-link[hidden]{display:none;}
.word-conjugation-link{margin-top:24px;border:1px solid var(--indigo);background:white;color:var(--indigo);}
.word-conjugation-link:hover{background:var(--indigo);color:white;}
.word-conjugation-link:hover span{transform:translateX(2px);}
.word-conjugation-link span{transition:transform .15s;}
.word-neighbors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;}
.word-neighbors a{display:grid;gap:2px;min-height:79px;padding:14px 17px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.76);color:var(--ink);text-decoration:none;}
.word-neighbors a:last-child{text-align:right;}
.word-neighbors a[hidden]{visibility:hidden;}
.word-neighbor-label{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.word-neighbor-word{font:600 20px/1.3 var(--display);}
.word-neighbor-meaning{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap;}
.word-not-found{margin-top:24px;padding:64px 54px;border:1px solid var(--line);border-top:3px solid var(--persimmon);border-radius:17px;background:white;}
.word-not-found[hidden]{display:none;}
.word-not-found .section-kicker{margin:0 0 8px;}
.word-not-found h1{margin:0;font:700 clamp(42px,7vw,66px)/1.05 var(--display);}
.word-not-found > p:not(.section-kicker){max-width:560px;margin:16px 0 0;color:var(--muted);}
.word-not-found a{display:inline-flex;margin-top:24px;padding:9px 14px;border-radius:100px;background:var(--ink);color:white;font-size:11px;font-weight:700;text-decoration:none;}

@media (max-width:860px){
  .glossary-column-head{grid-template-columns:42px minmax(100px,.8fr) minmax(120px,.8fr) minmax(180px,1.5fr) 26px;}
  .glossary-column-head span:nth-child(5){display:none;}
  .glossary-list-link{grid-template-columns:42px minmax(100px,.8fr) minmax(120px,.8fr) minmax(180px,1.5fr) 26px;}
  .glossary-progress{display:none;}
  .glossary-list-item.has-conjugation .glossary-meaning{padding-right:76px;}
  .word-hero{grid-template-columns:minmax(0,1fr) minmax(260px,.67fr);min-height:470px;}
  .word-hero-copy{padding:42px 38px;}
  .word-illustration{padding:25px;}
  .word-illustration img{height:330px;}
  .word-detail-grid{grid-template-columns:1fr;}
}

@media (max-width:700px){
  .glossary-wrap{width:min(100% - 24px,1120px);}
  .glossary-main{margin-top:38px;}
  .glossary-hero{padding:0 2px;}
  .glossary-hero h1{font-size:clamp(40px,13vw,56px);}
  .glossary-hero h1 br{display:none;}
  .glossary-hero-copy > p:last-child{font-size:14px;}
  .glossary-browser{margin-top:30px;border-radius:14px;}
  .glossary-tools{grid-template-columns:1fr;padding:17px 15px 12px;}
  .glossary-sort{justify-content:flex-end;}
  .glossary-sort select{min-height:38px;}
  .glossary-filter-row{align-items:flex-start;flex-direction:column;padding:0 15px 15px;}
  .glossary-filters{gap:6px;}
  .glossary-filters button{min-height:32px;padding-inline:10px;font-size:10px;}
  .glossary-column-head{display:none;}
  .glossary-list-link{grid-template-columns:36px minmax(70px,.65fr) minmax(75px,.7fr) minmax(0,1.3fr) 18px;gap:8px;min-height:78px;padding:11px 14px;}
  .glossary-conjugate-link{right:10px;padding:6px 8px;font-size:9px;}
  .glossary-number{font-size:10px;}
  .glossary-word{font-size:23px;}
  .glossary-reading{font-size:12px;}
  .glossary-reading small{font-size:9px;}
  .glossary-meaning{font-size:11px;line-height:1.35;}
  .glossary-arrow{font-size:17px;}
  .word-main{margin-top:31px;}
  .word-hero{grid-template-columns:1fr;min-height:0;}
  .word-hero-copy{padding:36px 27px 32px;}
  .word-hero h1{margin-top:22px;font-size:clamp(70px,25vw,100px);}
  .word-meaning{font-size:21px;}
  .word-illustration{min-height:300px;padding:22px;}
  .word-illustration img{height:280px;}
  .word-art-number{right:17px;font-size:100px;}
  .word-detail-grid{gap:12px;margin-top:12px;}
  .word-example{padding:26px 23px 29px;}
  .word-section-heading{align-items:flex-start;flex-direction:column;}
  .word-sentence{margin-top:30px;font-size:clamp(27px,8.5vw,37px);}
  .word-notes{padding:26px 23px;}
  .word-neighbors{gap:8px;margin-top:12px;}
  .word-neighbors a{padding:12px;}
  .word-neighbor-meaning{display:none;}
  .word-not-found{padding:45px 27px;}
}

@media (max-width:420px){
  .glossary-list-link{grid-template-columns:33px 86px minmax(0,1fr) 15px;gap:7px;}
  .glossary-reading{display:none;}
  .glossary-list-link{grid-template-columns:33px minmax(86px,.7fr) minmax(0,1.3fr) 15px;}
  .word-hero-meta{align-items:flex-start;flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  .glossary-list-link,.glossary-arrow,.word-conjugation-link span{transition:none;}
}
