:root {
  --paper: #f6f1e5; --card: #fffcf4; --ink: #22283a; --soft: #6c7284; --rule: #e1e7ef;
  --coral: #e25846; --teal: #14847c; --indigo: #4e58c4; --mustard: #e8ac2c;
  --head: Georgia, "Times New Roman", serif;
  --body: Candara, Calibri, "Segoe UI", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5;
  font-variant-numeric: lining-nums; background: var(--paper);
}
:lang(ja) body, :lang(ja) .tr, :lang(ja) .gram, :lang(ja) .def, :lang(ja) .subtitle, :lang(ja) h2, :lang(ja) .hint, :lang(ja) .glist {
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Candara, Calibri, sans-serif;
}
a { color: var(--teal); }
.top, main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-top: 12px; }
.brand { font-weight: 700; letter-spacing: .04em; color: var(--ink); text-decoration: none; font-size: 15px; }
.langs { display: flex; gap: 4px; }
.langs a { padding: 1px 10px; border: 2px solid var(--teal); border-radius: 999px; text-decoration: none; font-weight: 700;
  font-size: 13px; background: var(--card); }
.langs a[aria-current] { background: var(--teal); color: #fff; }
.kicker { color: var(--teal); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 12px; margin: 16px 0 0; }
h1 { font-family: var(--head); font-size: clamp(26px, 4.5vw, 34px); line-height: 1.15; margin: 2px 0; }
.subtitle { font-weight: 700; margin: 0 0 6px; }
h2 { font-family: var(--head); font-size: 20px; margin: 22px 0 6px; padding-bottom: 2px; border-bottom: 3px solid var(--mustard); }
h3 { font-family: var(--head); font-size: 16px; margin: 16px 0 4px; color: var(--soft); }
.video { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #000; margin: 8px 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
.tools button { font: inherit; font-size: 14px; font-weight: 700; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink); cursor: pointer; }
.hint { color: var(--soft); font-size: 13px; }

/* folded lines: words and sentences */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.w, .s { margin: 0; padding: 3px 8px 3px 22px; position: relative; border-radius: 6px; }
details.w > summary::before, details.s > summary::before {
  content: "›"; position: absolute; left: 7px; color: var(--teal); font-weight: 700; transition: transform .15s;
}
details[open].w > summary::before, details[open].s > summary::before { transform: rotate(90deg); }
details.w:hover, details.s:hover { background: rgba(20, 132, 124, .07); }
details[open].w, details[open].s { background: var(--card); box-shadow: inset 3px 0 0 var(--teal); }
.plain { padding-left: 22px; }
.hw { font-family: var(--head); font-style: italic; }
.def { margin-left: 4px; }
.words .w { padding-top: 2px; padding-bottom: 2px; }
.ex, .tr, .gram { margin: 2px 0 4px; font-size: 15px; }
.ex { color: var(--ink); }
.tr { color: var(--soft); }
.gram { padding-left: 8px; border-left: 3px solid var(--mustard); }
.gram b { color: var(--teal); margin-right: 4px; }
.badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--mustard);
  color: var(--ink); font-size: 11px; font-weight: 700; text-align: center; vertical-align: 2px; }
mark { background: linear-gradient(transparent 55%, rgba(232, 172, 44, .55) 55%); color: inherit; scroll-margin-top: 60px; }
.para { margin-bottom: 6px; }
.t { font-size: 12px; font-weight: 700; color: var(--coral); text-decoration: none; margin-left: 4px; }
h3 .t { margin: 0 4px 0 0; }

/* collapsible lists */
.glist, .sources { margin-top: 18px; }
.glist > summary, .sources > summary { font-family: var(--head); font-size: 20px; font-weight: 700; border-bottom: 3px solid var(--mustard); }
.glist > summary::after, .sources > summary::after { content: " +"; color: var(--teal); }
.glist[open] > summary::after, .sources[open] > summary::after { content: " −"; }
.glist ol { padding-left: 22px; font-size: 14px; margin: 8px 0; }
.glist ol.cols { columns: 2; column-gap: 24px; }
.glist li { break-inside: avoid; }
.sources ul { padding-left: 20px; font-size: 14px; }
.list li { margin: 8px 0; font-size: 18px; }
footer { color: var(--soft); font-size: 13px; padding-top: 16px; padding-bottom: 40px; }
@media (max-width: 600px) { .glist ol.cols { columns: 1; } body { font-size: 16px; } }
@media print {
  body { background: #fff; font-size: 11pt; }
  .langs, .tools, .video, footer a, details > summary::before { display: none; }
  details[open].w, details[open].s { box-shadow: none; background: none; }
  a { color: inherit; text-decoration: none; }
}
.pos { margin-left: 6px; padding: 0 6px; border: 1px solid var(--indigo); border-radius: 6px; color: var(--indigo); font-size: 11px; font-weight: 700; vertical-align: 2px; }
mark.v { background: none; color: inherit; border-bottom: 2px solid var(--indigo); }
.badge.v { background: var(--indigo); color: #fff; }
.vocab { margin: 2px 0 4px; font-size: 15px; padding-left: 8px; border-left: 3px solid var(--indigo); }
span[id^="v"] { scroll-margin-top: 60px; }
.glist .item { margin: 0; padding: 3px 8px 3px 22px; position: relative; border-radius: 6px; font-size: 15px; }
.glist .item > summary::before { content: "›"; position: absolute; left: 7px; color: var(--teal); font-weight: 700; transition: transform .15s; }
.glist .item[open] > summary::before { transform: rotate(90deg); }
.glist .item:hover { background: rgba(20, 132, 124, .07); }
.glist .item[open] { background: var(--card); box-shadow: inset 3px 0 0 var(--teal); }
.glist > .item:first-of-type { margin-top: 6px; }