* { box-sizing:border-box; }
body { margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.5; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
button:disabled { opacity:.35; cursor:default; }
[hidden] { display:none!important; }
.header {
  max-width:1392px;
  margin:auto;
  display:flex;
  align-items:center;
  padding:0 64px;
  gap:40px;
  border-bottom:1px solid var(--line);
}
.brand { text-decoration:none; font-weight:800; font-size:35px; }
.language {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
}
.language-line { height:1px; width:25px; }
.header-note { margin-left:auto; font-size:14px; }
.layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:70px;
  max-width:1250px;
  margin:58px auto 46px;
  padding:0 36px;
}
aside { padding-top:7px; }
.progress-panel { border-width:1px; border-style:solid; border-radius:18px; padding:27px 23px; }
.progress-ring {
  width:154px;
  height:154px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto;
}
.progress-ring>div {
  width:132px;
  height:132px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.progress-ring strong { font-size:42px; font-weight:650; line-height:1.15; letter-spacing:-2px; }
.progress-ring strong span { font-size:23px; letter-spacing:0; }
.progress-ring>div>span { font-size:12px; margin-top:3px; }
.progress-panel>p { text-align:center; font-size:14px; margin:23px 0; }
.counts { border-top:1px solid var(--line); padding-top:17px; }
.counts>div {
  display:flex;
  align-items:center;
  font-size:14px;
  margin:9px 0;
  gap:9px;
}
.counts strong { margin-left:auto; font-weight:600; }
.dot { width:7px; height:7px; border-radius:50%; }
.saved-note { display:flex; gap:12px; padding:25px 3px; }
.saved-note svg { width:21px; min-width:21px; height:24px; margin-top:2px; }
.saved-note strong { font-size:14px; font-weight:600; }
.saved-note p { font-size:13px; line-height:1.65; margin:6px 0 0; }
.intro { display:flex; justify-content:space-between; gap:15px; }
h1 {
  font-size:40px;
  line-height:1.2;
  letter-spacing:-1.6px;
  margin:11px 0 8px;
  font-weight:650;
}
.collection-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  writing-mode:vertical-rl;
  border-left:1px solid var(--line);
  padding-left:10px;
}
.toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:32px 0 24px;
  gap:15px;
}
.tabs { display:flex; gap:4px; border-radius:10px; padding:4px; }
.tab {
  border:0;
  border-radius:7px;
  font-size:14px;
  padding:9px 14px;
  font-weight:500;
}
.tab span { font-size:12px; margin-left:5px; border-radius:4px; padding:1px 5px; }
.position { font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.card-stack { position:relative; perspective:1500px; }
.card-shadow { position:absolute; inset:12px -9px -12px 11px; border-radius:20px; transform:rotate(1.5deg); }
.flashcard {
  display:block;
  width:100%;
  position:relative;
  border:0;
  padding:0;
  border-radius:20px;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
  text-align:left;
}
.flashcard.flipped { transform:rotateY(180deg); }
.face {
  position:absolute;
  inset:0;
  border-radius:20px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  padding:28px 35px;
  flex-direction:column;
}
.front { border-width:1px; border-style:solid; }
.back { transform:rotateY(180deg); }
.card-top, .card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-lang { font-size:11px; letter-spacing:2px; font-weight:650; }
.status-badge {
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  padding:5px 8px;
  border-width:1px;
  border-style:solid;
  border-radius:5px;
}
.word-area { margin:24px 0 23px; }
.pos { display:inline-block; font-size:12px; padding:3px 11px; border-radius:20px; }
.word-area h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(42px,5.4vw,68px);
  letter-spacing:-1.7px;
  line-height:1.1;
  margin:9px 0 0;
  overflow-wrap:anywhere;
}
.example>span { font-size:10px; letter-spacing:1.4px; font-weight:650; }
.example p { font-size:18px; margin:7px 0 0; line-height:1.5; }
.example strong { font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.card-bottom { margin-top:auto; padding-top:17px; font-size:12px; }
.flip-icon { font-size:22px; line-height:1; }
.back-label { font-size:10px; letter-spacing:1.6px; }
.translation-area { margin:auto 0; }
.translation-area>span { font-size:18px; font-family:Georgia,serif; }
.translation-area h2 { line-height:1.3; letter-spacing:-.8px; margin:10px 0 12px; overflow-wrap:anywhere; }
.actions { display:flex; justify-content:center; gap:12px; min-height:53px; }
.button {
  min-height:52px;
  border-radius:10px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:600;
  padding:13px 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  transition:background .15s,transform .15s;
}
.button:active { transform:translateY(1px); }
.primary { min-width:235px; }
.review-button, .learned-button { flex:1; }
.navigation {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:20px;
}
.text-button { border:0; font-size:14px; padding:9px 0; }
#keyboard-note { font-size:12px; }
kbd {
  font-family:inherit;
  border-width:1px;
  border-style:solid;
  padding:2px 5px;
  border-radius:4px;
  font-size:11px;
  margin-right:4px;
}
.learning-note { padding-top:23px; border-top:1px solid var(--line); align-items:center; }
.note-number { font-family:Georgia,serif; font-style:italic; font-size:29px; }
.learning-note p { margin:0; }
footer {
  max-width:1250px;
  margin:0 auto;
  padding:20px 36px 32px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  font-size:12px;
}
footer details { max-width:610px; }
summary { cursor:pointer; text-align:right; }
footer p { line-height:1.8; font-size:13px; }
.message {
  font-size:14px;
  border-width:1px;
  border-style:solid;
  padding:13px;
  border-radius:10px;
  margin-bottom:20px;
}
.empty {
  border-width:1px;
  border-style:solid;
  border-radius:20px;
  padding:60px 30px;
  text-align:center;
  min-height:430px;
}
.empty-symbol {
  display:inline-grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  font-size:28px;
}
.empty h2 { font-size:28px; margin:20px 0 10px; }
.empty p { margin-bottom:25px; }
.empty .button { margin:auto; }
@media(max-width:1000px) {
  .header { padding:0 32px; }
  .layout { grid-template-columns:220px minmax(0,1fr); gap:32px; margin-top:35px; padding:0 32px; }
  .face { padding:24px; }
  .progress-panel { padding:23px 16px; }
  h1 { font-size:35px; }
}
@media(max-width:720px) {
  .header { padding:0 22px; }
  .brand { font-size:30px; }
  .header-note { display:none; }
  .language { margin-left:auto; }
  .layout {
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:0 22px;
    margin:27px auto;
  }
  .layout main { order:0; }
  .layout aside { order:1; }
  .collection-label { display:none; }
  .tab { font-size:13px; }
  .position { font-size:12px; letter-spacing:0; }
  .face { padding:25px; }
  .word-area { margin:24px 0; }
  .word-area h2 { font-size:57px; }
  .example p { font-size:17px; }
  .card-shadow { inset:9px -5px -9px 7px; }
  .navigation { margin-top:15px; }
  .button { padding:13px 20px; }
  .saved-note svg { display:none; }
  .progress-panel {
    display:grid;
    grid-template-columns:85px 1fr;
    padding:18px;
    gap:0 20px;
    border-radius:14px;
  }
  .progress-ring { width:82px; height:82px; grid-row:1 / 3; }
  .progress-ring>div { width:70px; height:70px; }
  .progress-ring strong { font-size:25px; letter-spacing:-1px; }
  .progress-ring strong span { font-size:15px; }
  .progress-ring>div>span { font-size:10px; }
  .progress-panel>p { margin:0 0 7px; text-align:left; font-size:13px; align-self:center; }
  .counts { padding-top:3px; }
  .counts>div { font-size:12px; margin:5px 0; }
  .saved-note { padding:16px 3px 0; }
  .saved-note strong { font-size:13px; }
  .saved-note p { font-size:12px; margin-top:3px; }
  footer { padding:18px 22px 28px; flex-direction:column; gap:10px; }
  summary { text-align:left; }
}
@media(prefers-reduced-motion:reduce) {
  .flashcard { transition:none; }
}
@media(max-width:360px) {
  .layout { padding:0 16px; }
  .tab { padding:8px; font-size:12px; }
  .face { padding:21px; }
  .word-area h2 { font-size:49px; }
  .card-bottom, .position { font-size:11px; }
}
@media(min-width:721px) {
  .layout main { max-width:750px; }
}
.toolbar { margin-top:18px; }
.flashcard { height:410px; }
.front .word-area { margin:28px 0; }
.back .translation-area { margin:22px 0 18px; }
.back .pos { font-family:inherit; font-size:12px; }
.translation-area h2 { margin-top:10px; margin-bottom:0; font-size:clamp(26px,3.2vw,39px); }
.translated-example p { font-size:18px; margin-top:7px; }
.actions kbd {
  opacity:.7;
  min-width:23px;
  text-align:center;
  font-size:14px;
  font-weight:400;
  margin-right:0;
}
.keyboard-note {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  margin-top:14px;
  font-size:12px;
}
.keyboard-note>span { white-space:nowrap; }
.flip-button { display:flex; align-items:center; gap:9px; font-weight:500; }
.flip-button>span { font-size:20px; }
.flashcard:disabled { opacity:1; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.face { overflow-y:auto; }
.face h2, .card-bottom { flex-shrink:0; }
.learning-note { margin-top:25px; }
@media(max-width:720px) {
  .front .word-area { margin:26px 0; }
  .translation-area h2 { font-size:30px; }
  .translated-example p { font-size:17px; }
  .back .translation-area { margin:21px 0 15px; }
  .keyboard-note, .actions kbd { display:none; }
}
@media(pointer:coarse) {
  .actions kbd, .keyboard-note { display:none; }
}
.header-tools { margin-left:auto; display:flex; align-items:center; gap:24px; }
.header-tools .header-note { margin:0; }
.brand {
  display:flex;
  gap:9px;
  align-items:baseline;
  letter-spacing:-.5px;
  line-height:1.2;
}
.brand .brand-number { font-size:31px; letter-spacing:-1px; }
.brand .brand-name { font-size:21px; letter-spacing:-.7px; }
.icon-button {
  height:44px;
  width:44px;
  border-width:1px;
  border-style:solid;
  border-radius:12px;
  place-items:center;
  position:relative;
  flex-shrink:0;
}
.sun-icon, html[data-theme=dark] .moon-icon { display:none; }
html[data-theme=dark] .sun-icon { display:block; }
.toolbar-tools { display:flex; align-items:center; gap:18px; }
.face-toggle { height:43px; width:43px; }
.card-viewport { margin:-28px -28px -5px; padding:28px 28px 5px; overflow:hidden; }
.card-stack { will-change:transform,opacity; }
.flashcard { will-change:transform; }
.theme-toggle { touch-action:manipulation; }
@media(min-width:721px) {
  .layout { grid-template-rows:auto auto auto auto; row-gap:0; align-items:start; }
  .layout>aside, .layout>main { display:contents; }
  .sidebar-heading { grid-column:1; padding-top:7px; }
  .sidebar-progress { grid-column:1; grid-row:3; }
  .intro { grid-column:2; grid-row:1; }
  .toolbar { grid-column:2; grid-row:2; margin:25px 0 24px; }
  .study-region { grid-column:2; grid-row:3; min-width:0; }
  .learning-note { grid-column:2; grid-row:4; }
  .progress-panel { margin-top:0; }
  .card-viewport { min-width:0; }
}
@media(max-width:1000px) {
  .header { gap:23px; }
  .header-tools { gap:16px; }
  .brand .brand-name { font-size:19px; }
  .brand .brand-number { font-size:28px; }
  .toolbar-tools { gap:10px; }
  .tab { padding:9px 10px; }
}
@media(max-width:720px) {
  .brand { gap:7px; }
  .brand .brand-number { font-size:26px; }
  .brand .brand-name { font-size:17px; letter-spacing:-.5px; }
  .header { gap:12px; }
  .header .language { display:none; }
  .header-tools { gap:0; }
  .toolbar { margin:22px 0 20px; }
  .tabs { gap:1px; }
  .tab { padding:8px 9px; }
  .sidebar-progress { width:100%; }
  .card-viewport { margin:-20px -20px -5px; padding:20px 20px 5px; }
  .theme-toggle { height:40px; width:40px; border-radius:10px; }
}
@media(max-width:390px) {
  .toolbar { flex-wrap:wrap; }
  .toolbar-tools { margin-left:auto; }
  .tab { font-size:12px; padding:8px; }
  .position { font-size:11px; }
  .brand .brand-name { font-size:16px; }
  .header, .layout { padding:0 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .card-stack, .flashcard { will-change:auto; }
}
.face { display:grid; grid-template-rows:32px 174px minmax(75px,1fr) 34px; align-content:stretch; }
.face .word-area, .face .translation-area {
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
}
.face .word-area h2, .face .translation-area h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,3.6vw,48px);
  font-weight:400;
  letter-spacing:-.8px;
  line-height:1.16;
  margin:10px 0 0;
}
.face .pos {
  font-family:inherit;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  padding:3px 11px;
}
.face .example { align-self:start; min-width:0; }
.face .example p {
  font-family:inherit;
  font-size:18px;
  font-weight:400;
  line-height:1.5;
  margin:7px 0 0;
}
.face .card-top { align-self:start; }
.face .card-bottom { margin:0; padding:0; align-self:end; font-size:12px; }
#keyboard-note {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  width:100%;
  text-align:center;
}
#keyboard-note>span:first-child { text-align:left; }
#keyboard-note>span:last-child { text-align:right; }
html[data-theme=dark] .card-shadow { border-width:1px; border-style:solid; }
@media(max-width:720px) {
  .face .word-area h2, .face .translation-area h2 { font-size:30px; }
  .face .example p { font-size:17px; }
  #keyboard-note { display:none; }
}
@media(pointer:coarse) {
  #keyboard-note { display:none; }
}
.face .example { max-height:100%; overflow-y:auto; scrollbar-width:thin; padding-bottom:3px; }
.face .word-area, .face .translation-area { max-height:100%; overflow-y:auto; scrollbar-width:thin; }
.header { height:76px; }
.layout { margin-top:25px; margin-bottom:28px; }
.intro { min-height:34px; align-items:center; }
.intro h1 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.5px;
  margin:0;
  line-height:1.35;
}
.intro .collection-label { writing-mode:horizontal-tb; border:0; padding:0; font-size:11px; }
.sidebar-heading { padding-top:3px!important; }
.sidebar-heading h2 {
  font-size:20px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.4px;
  margin:0;
}
.learning-note {
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:18px;
  list-style:none;
  padding:19px 0 0;
  margin-bottom:0;
}
.learning-note li { display:flex; align-items:flex-start; gap:10px; }
.learning-note .note-number { font-size:25px; line-height:1.35; }
.learning-note p { font-size:13px; line-height:1.6; padding-top:1px; }
.back .example strong { text-decoration:underline; text-underline-offset:5px; font-weight:600; }
.swipe-hint {
  display:none;
  font-size:12px;
  text-align:center;
  line-height:1.5;
  margin:12px 0 0;
}
.card-viewport { touch-action:pan-y pinch-zoom; }
.card-stack.is-dragging { transition:none; }
.flashcard.is-dragging { cursor:grabbing; }
.card-stack { transform-origin:50% 80%; }
@media(min-width:721px) {
  .toolbar { margin-top:13px; margin-bottom:19px; }
  .sidebar-heading { grid-row:1 / 3; }
  .learning-note { margin-top:22px; }
}
@media(max-width:720px) {
  .header { height:66px; }
  .layout { margin-top:18px; }
  .sidebar-heading { display:none; }
  .intro h1 { font-size:21px; }
  .toolbar { margin-top:12px; margin-bottom:18px; }
  .learning-note { grid-template-columns:1fr; gap:10px; padding-top:15px; margin-top:18px; }
  .learning-note li { align-items:center; }
  .learning-note li p { font-size:13px; padding:0; }
  .learning-note li br { display:none; }
  .learning-note .note-number { font-size:21px; }
  .intro .collection-label { display:inline; }
  .swipe-hint { display:block; }
  .flashcard { height:365px; }
  .face { grid-template-rows:28px 138px minmax(75px,1fr) 32px; }
}
@media(pointer:coarse) {
  .swipe-hint { display:block; }
}
@media(min-width:1440px) {
  .layout { margin-top:30px; }
}
@media(min-width:721px) and (max-height:760px) {
  .layout { margin-top:18px; }
  .flashcard { height:350px; }
  .face { grid-template-rows:30px 138px minmax(75px,1fr) 32px; }
  .navigation { margin-top:12px; }
}
.card-stack { margin-bottom:44px; }
.flashcard { cursor:grab; user-select:none; -webkit-user-select:none; }
.flashcard:active { cursor:grabbing; }
html[data-theme=dark] .back { border-width:1px; border-style:solid; }
.mouse-hint { display:none; }
@media(pointer:fine) {
  .swipe-hint { display:block; }
  .touch-hint { display:none; }
  .mouse-hint { display:inline; }
}
@media(min-width:721px) and (max-height:760px) {
  .card-stack { margin-bottom:44px; }
}
.theme-toggle svg {
  width:22px;
  height:22px;
  flex:none;
  display:block;
  margin:0;
}
.theme-toggle .sun-icon, html[data-theme=dark] .theme-toggle .moon-icon { display:none; }
html[data-theme=dark] .theme-toggle .sun-icon { display:block; }
.icon-button, .face-toggle, .theme-toggle, #shuffle {
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.icon-button svg, .face-toggle svg {
  display:block;
  width:24px;
  height:24px;
  flex:none;
  margin:0;
}
.icon-button .sun-icon, html[data-theme=dark] .icon-button .moon-icon { display:none; }
html[data-theme=dark] .icon-button .sun-icon { display:block; }
@media(max-width:720px) {
  .toolbar { position:relative; flex-wrap:nowrap; gap:8px; }
  .toolbar-tools { margin-left:auto; gap:6px; flex-shrink:0; }
  .toolbar .position { position:absolute; right:0; top:-28px; white-space:nowrap; }
  .toolbar .tabs { min-width:0; gap:0; padding:3px; flex:1; }
  .toolbar .tab {
    flex:1;
    white-space:nowrap;
    font-size:12px;
    padding:8px 6px;
    min-height:40px;
  }
  .toolbar .tab span { font-size:10px; margin-left:3px; padding:1px 3px; }
  #shuffle, .face-toggle { height:40px; width:40px; }
}
@media(max-width:390px) {
  .toolbar { gap:5px; }
  .toolbar-tools { gap:4px; }
  .toolbar .tab { font-size:11px; padding:8px 4px; }
  .toolbar .tabs { padding:2px; }
}

/* Crawlable explanatory content and vocabulary reference. */
.seo-content,.vocabulary-page{max-width:1250px;margin:0 auto 32px;padding:0 36px;line-height:1.75}
.seo-content{border-top:1px solid var(--line);padding-top:22px}
.seo-content h2{font-size:21px;line-height:1.4;margin:24px 0 10px}
.seo-content p,.vocabulary-page>p{font-size:15px;color:var(--muted)}
.seo-content details{padding:12px 0;border-bottom:1px solid var(--line)}
.seo-content summary{text-align:left;font-weight:600}
.seo-content details p{margin-bottom:0}
.vocabulary-link,.vocabulary-page a{color:var(--blue);text-underline-offset:4px}
.vocabulary-link{font-weight:600}
.vocabulary-page{margin-top:30px}
.vocabulary-page h1{font-size:clamp(25px,4vw,38px);letter-spacing:-.8px;margin:24px 0 18px}
.breadcrumb{font-size:13px;display:flex;gap:10px;flex-wrap:wrap;color:var(--muted)}
.vocabulary-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:24px 0;background:var(--surface)}
.vocabulary-table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}
.vocabulary-table caption{text-align:left;padding:16px;font-weight:600;color:var(--ink)}
.vocabulary-table th,.vocabulary-table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.vocabulary-table thead{background:var(--surface-soft)}
.vocabulary-table th[scope=row]{color:var(--blue)}
.vocabulary-table td:last-child{min-width:260px}
.vocabulary-table p{margin:0 0 6px}
.vocabulary-table p:last-child{color:var(--muted);margin-bottom:0}
.vocabulary-table strong{text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.seo-content,.vocabulary-page{padding-left:22px;padding-right:22px}.vocabulary-page .header-tools{font-size:12px}.vocabulary-table th,.vocabulary-table td{padding:12px}.vocabulary-page{margin-top:22px}.seo-content h2{font-size:19px}}
@media(max-width:390px){.seo-content,.vocabulary-page{padding-left:16px;padding-right:16px}.header>.vocabulary-link{font-size:11px;white-space:nowrap}}

.home-screen-guide h3{font-size:16px;line-height:1.5;margin:20px 0 8px}
.home-screen-guide ol{padding-left:24px;margin:8px 0 16px;font-size:15px;color:var(--muted)}
.home-screen-guide li{margin-bottom:10px;padding-left:4px;overflow-wrap:break-word}
.home-screen-guide strong{color:var(--ink)}