/* ==========================================================================
   Kanji in the Wild — the newspaper.
   Paper, ink and one red. Serif headlines, sans for the small print.
   ========================================================================== */
.kw {
  --kw-paper: #ebe6da; --kw-sheet: #f8f5ec; --kw-box: #f4f0e5;
  --kw-ink: #1b1b1b; --kw-grey: #555; --kw-soft: #8a8577; --kw-rule: #bdb6a6;
  --kw-red: #b3261e; --kw-green: #2f7d4f;
  --kw-serif: Georgia, 'Noto Serif JP', 'Times New Roman', serif;
  background: var(--kw-paper); color: var(--kw-ink); padding-bottom: 80px;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);
}
.kw .jp { font-family: 'Noto Serif JP', serif; }
.kw [hidden] { display: none !important; }
.kw button { font-family: inherit; }

/* ---------- masthead ---------- */
.kw-mast { max-width: 1272px; margin: 0 auto; padding: 30px 24px 22px; }
.kw-dl { display: flex; justify-content: space-between; gap: 1rem; font: 700 .7rem Outfit, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: #444; border-bottom: 1px solid var(--kw-ink); padding: 0 2px 6px; }
.kw-title { margin: 0; text-align: center; font: 900 3.5rem var(--kw-serif); letter-spacing: .01em; line-height: 1.25;
  border-bottom: 4px double var(--kw-ink); padding: 10px 0 8px; }
.kw-title .jp { color: var(--kw-red); margin-right: .25em; font-weight: 900; }
.kw-ed { display: flex; justify-content: center; gap: 1.4rem; font: italic 600 .95rem var(--kw-serif); color: #333; text-align: center;
  padding: 6px 0; border-bottom: 1px solid var(--kw-ink); }

/* ---------- layout ---------- */
.kw-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.kw-main { min-width: 0; max-width: 1000px; margin: 0 auto; }
.kw.is-front .kw-main, .kw.is-play .kw-front { display: none; }

/* ---------- the front page: how it works in three columns ---------- */
.kw-how3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--kw-ink); border-bottom: 1px solid var(--kw-ink); margin: 4px 0 22px; }
.kw-how3 > div { padding: 12px 16px 14px; border-left: 1px solid var(--kw-rule); }
.kw-how3 > div:first-child { border-left: 0; }
.kw-hh { display: flex; align-items: center; gap: 8px; font: 900 1.08rem var(--kw-serif); margin-bottom: 4px; }
.kw-hh i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--kw-red); color: #fff; display: grid; place-items: center; font: 800 .85rem Outfit, sans-serif; flex: none; }
.kw-how3 p { margin: 0; font-size: .88rem; line-height: 1.5; color: #333; }
.kw-ex { font-size: 1rem; }
.kw-ex u { color: var(--kw-red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kw-backw { text-align: center; margin: -8px 0 16px; }
.kw-backb { background: var(--kw-ink); color: #fff; border: 0; padding: .6rem 1.2rem; font: 800 .88rem Outfit, sans-serif; cursor: pointer; }

/* ---------- the reading bar over the story ---------- */
.kw-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-top: 2px solid var(--kw-ink); border-bottom: 1px solid var(--kw-ink);
  padding: 7px 2px; margin: 4px 0 16px; font: 600 .84rem Outfit, sans-serif; }
.kw-strip b { font-weight: 800; }
.kw-strip .kw-pips { margin: 0; }
.kw-sp { flex: 1; }
.kw-chg { background: none; border: 1px solid var(--kw-ink); padding: .35rem .8rem; font: 700 .8rem Outfit, sans-serif; cursor: pointer; color: var(--kw-ink); }
.kw-chg:hover { background: var(--kw-ink); color: #fff; }
.kw-tip { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: .85rem; color: #444; }
.kw-tip-k { width: 30px; height: 30px; border-radius: 50%; background: #1a1a2e; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }

/* ---------- Study first: the kanji's card ---------- */
.kw-card .kw-kick { margin-bottom: 14px; }
.kw-cardb { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.kw-big { font: 700 7rem/1 'Noto Serif JP', serif; width: 1.3em; height: 1.3em; display: grid; place-items: center; border: 2px solid var(--kw-ink); background: #fff; }
.kw-ckw { font: 800 .9rem Outfit, sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.kw-crow { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px dotted #9a958a; }
.kw-crow .lbl { font: 800 .62rem Outfit, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #6b665b; }
.kw-crd { font-size: 1.5rem; font-weight: 700; }
.kw-crd small { font-size: .7em; font-weight: 500; color: var(--kw-soft); }
.kw-crd i { font-style: normal; color: var(--kw-soft); margin: 0 .2em; font-weight: 400; }
.kw-cw > span { display: inline-block; margin: 0 1.2rem .2rem 0; font-size: .9rem; }
.kw-cw .jp { font-size: 1.1rem; margin-right: .25rem; }
.kw-cw rt { font-size: .55em; color: var(--kw-soft); }
.kw-cnext { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--kw-ink); font: italic .92rem var(--kw-serif); color: #3d3a33; }
.kw-cnext .kw-next { flex: none; padding: .8rem 1.2rem; }

/* ---------- settings ---------- */
.kw-set { background: var(--kw-box); border: 1px solid var(--kw-ink); padding: 20px 24px 16px; max-width: 780px; margin: 0 auto; }
.kw-set-h { font: 900 1.15rem var(--kw-serif); border-bottom: 2px solid var(--kw-ink); padding-bottom: 6px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.kw-set-x { display: none; background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--kw-grey); }
.kw-g { margin-bottom: 13px; }
.kw-l { font: 800 .62rem Outfit, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b665b; margin-bottom: 6px; }
.kw-l small { letter-spacing: 0; text-transform: none; font-weight: 600; font-style: italic; }
.kw-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--kw-ink); }
.kw-seg.kw-lv { grid-template-columns: repeat(5, 1fr); }
.kw-seg button { background: none; border: 0; border-left: 1px solid var(--kw-ink); padding: .5rem .2rem; font: 700 .78rem Outfit, sans-serif; color: var(--kw-ink); cursor: pointer; }
.kw-seg button:first-child { border-left: 0; }
.kw-seg button:hover { background: rgba(0,0,0,.05); }
.kw-seg button.on { background: var(--kw-ink); color: var(--kw-box); }
.kw-seg button.under { background: rgba(0,0,0,.08); }
.kw-r { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dotted #9a958a; font-size: .84rem; cursor: pointer; outline-offset: 2px; }
.kw-r:last-child { border-bottom: 0; }
.kw-r i { width: 13px; height: 13px; flex: none; border: 1.5px solid var(--kw-ink); border-radius: 2px; box-sizing: border-box; }
.kw-r.on i { background: var(--kw-red); border-color: var(--kw-red); box-shadow: inset 0 0 0 2px var(--kw-box); }
.kw-r > span { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.kw-r small { font-size: .72rem; color: #6b665b; }
.kw-r select, .kw-r input { font: 600 .78rem Outfit, sans-serif; border: 1px solid var(--kw-ink); background: var(--kw-sheet); color: var(--kw-ink); border-radius: 0; padding: 3px 5px; }
.kw-r input { margin-top: 4px; font-family: 'Noto Serif JP', serif; font-size: .9rem; width: 100%; box-sizing: border-box; }
.kw-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 5px 0; cursor: pointer; }
.kw-sw input { position: absolute; opacity: 0; pointer-events: none; }
.kw-sw em { width: 32px; height: 18px; border-radius: 99px; background: #c9c3b5; flex: none; position: relative; transition: background .15s; }
.kw-sw em::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.kw-sw input:checked + em { background: var(--kw-ink); }
.kw-sw input:checked + em::after { left: 16px; }
.kw-sw input:focus-visible + em { outline: 2px solid var(--kw-red); outline-offset: 2px; }
.kw-fit { font-size: .8rem; color: var(--kw-grey); text-align: center; margin: 8px 0 2px; line-height: 1.4; }
.kw-fit b { font-size: 1.05rem; color: var(--kw-ink); }
.kw-fit.none { color: var(--kw-red); }
.kw-go { width: 100%; background: var(--kw-red); color: #fff; border: 0; padding: .8rem; font: 800 .92rem Outfit, sans-serif !important; cursor: pointer; }
.kw-go:disabled { background: #b9b2a3; cursor: default; }
.kw-go.fresh { box-shadow: 0 0 0 3px var(--kw-paper), 0 0 0 5px var(--kw-red); }
.kw-demo { margin: 10px 0 0; font: italic .74rem var(--kw-serif); color: var(--kw-soft); line-height: 1.4; }

/* ---------- the story ---------- */
.kw-art { background: var(--kw-sheet); border: 1px solid var(--kw-rule); padding: 20px 30px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.08); transition: box-shadow .25s; }
.kw-art.is-right { box-shadow: 0 0 0 3px rgba(47,125,79,.55), 0 8px 20px rgba(0,0,0,.08); }
.kw-art.is-wrong { box-shadow: 0 0 0 3px rgba(179,38,30,.5), 0 8px 20px rgba(0,0,0,.08); }
.kw-kick { display: flex; justify-content: space-between; gap: 1rem; font: 800 .68rem Outfit, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kw-red); border-bottom: 1px solid var(--kw-ink); padding-bottom: 7px; }
.kw-kick .jp { font-size: .9rem; letter-spacing: 0; }
.kw-kick span:last-child { color: var(--kw-ink); white-space: nowrap; }
.kw-sent { font: 700 2.6rem/2.2 'Noto Serif JP', serif; text-align: center; margin: .45rem 0 .1rem; letter-spacing: .03em; }
.kw-sent rt { font: 500 .36em 'Noto Sans JP', sans-serif; color: #7d776a; letter-spacing: 0; }
.kw-t { color: var(--kw-red); position: relative; display: inline-block; line-height: 1.15; }
.kw-t::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.02em; height: .08em; background: var(--kw-red); }
.kw-w { border-bottom: 2px dotted #8a8577; padding: 0 .04em; }
.kw-w.good { border-bottom: 0; background: rgba(47,125,79,.12); box-shadow: inset 0 -3px 0 rgba(47,125,79,.55); padding: 0 .08em; }
.kw-w.bad { border-bottom: 0; background: rgba(179,38,30,.08); box-shadow: inset 0 -3px 0 rgba(179,38,30,.5); padding: 0 .08em; }
.kw-sent.is-mid { font-size: 2.2rem; }
.kw-sent.is-long { font-size: 1.85rem; }
.kw-en { text-align: center; font: italic 1.08rem var(--kw-serif); color: #3d3a33; margin: -.2rem 0 .5rem; }
.kw-by { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--kw-ink); padding-top: 9px; margin-top: 6px; }
.kw-credit { font: italic .82rem var(--kw-serif); color: var(--kw-grey); }
.kw-credit a { color: inherit; }
.kw-by-b { display: flex; gap: 8px; }
.kw-by-b button { font: 700 .76rem Outfit, sans-serif; background: none; border: 1px dashed #777; padding: .35rem .8rem; color: #333; cursor: pointer; }
.kw-by-b button small { font-weight: 500; }
.kw-by-b button:hover { border-style: solid; border-color: var(--kw-ink); }
.kw-by-b button.playing { background: var(--kw-ink); color: var(--kw-sheet); border-style: solid; }

/* ---------- classifieds (the answers) ---------- */
.kw-clh { margin: 22px 0 8px; display: flex; align-items: baseline; gap: 12px; border-top: 3px solid var(--kw-ink); padding-top: 6px; }
.kw-clh b { font: 900 1.15rem var(--kw-serif); }
.kw-clh span { font: 600 .78rem Outfit, sans-serif; color: var(--kw-grey); }
.kw-cl { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--kw-ink); background: var(--kw-sheet); }
.kw-ad { position: relative; background: none; border: 0; border-left: 1px solid var(--kw-ink); padding: 13px 12px 15px; text-align: left; cursor: pointer;
  font: 700 1.02rem/1.3 var(--kw-serif) !important; color: var(--kw-ink); transition: background .12s; }
.kw-ad:first-child { border-left: 0; }
.kw-ad small { display: block; font: 800 .6rem Outfit, sans-serif; letter-spacing: .14em; color: var(--kw-red); margin-bottom: 6px; }
.kw-ad:hover:not(:disabled) { background: #efe9da; }
.kw-cl.kana .kw-ad { font: 500 1.7rem 'Noto Serif JP', serif !important; text-align: center; padding: 10px 8px 12px; }
.kw-cl.kana .kw-ad small { text-align: left; }
.kw-ad:disabled { cursor: default; }
.kw-ad.dim { color: #aaa397; }
.kw-ad.dim small { color: #c2bba9; }
.kw-ad.right { background: var(--kw-ink); color: #fff; }
.kw-ad.right small { color: #9ee0b5; }
.kw-ad.right::after { content: '✓'; position: absolute; right: 10px; top: 8px; font: 800 1rem Outfit, sans-serif; color: #9ee0b5; }
.kw-ad.wrong { color: var(--kw-red); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- the answer, as a news item ---------- */
.kw-story { margin-top: 18px; background: var(--kw-sheet); border: 1px solid var(--kw-ink); border-top: 5px solid var(--kw-green); padding: 16px 22px 14px; }
.kw-story.bad { border-top-color: var(--kw-red); }
.kw-story.skip { border-top-color: #b98a2a; }
.kw-story h3 { margin: 0; font: 900 1.25rem/1.35 var(--kw-serif); }
.kw-story h3 .jp { font-weight: 700; }
.kw-word { display: flex; align-items: baseline; flex-wrap: wrap; gap: .8rem; margin: .6rem 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--kw-rule); }
.kw-word .jp { font-size: 2rem; font-weight: 700; }
.kw-word .rd { font: 500 1.05rem 'Noto Sans JP', sans-serif; color: var(--kw-grey); }
.kw-word .gl { font: italic 700 1.1rem var(--kw-serif); }
.kw-rows { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; align-items: baseline; font-size: .92rem; line-height: 1.5; }
.kw-rows .lbl { font: 800 .62rem Outfit, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #6b665b; white-space: nowrap; }
.kw-rows .rd b { color: var(--kw-red); font: 700 1.05rem 'Noto Serif JP', serif; }
.kw-rows .rd small { color: var(--kw-soft); font-size: .82rem; }
.kw-rows .oth > span { display: inline-block; margin: 0 1.1rem .15rem 0; }
.kw-rows .oth .jp { font-size: 1.05rem; margin-right: .25rem; }
.kw-rows rt { font-size: .55em; color: var(--kw-soft); }
.kw-story-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.kw-katsu { display: inline-flex; align-items: center; gap: .4rem; background: var(--kw-ink); color: #fff; border: 0; padding: .45rem .95rem; font: 700 .8rem Outfit, sans-serif !important; cursor: pointer; }
.kw-katsu b { font-family: 'Noto Serif JP', serif; color: #f0b8a8; }
.kw-story-b .kw-plain { background: none; border: 1px solid var(--kw-ink); padding: .45rem .9rem; font: 700 .8rem Outfit, sans-serif !important; cursor: pointer; color: var(--kw-ink); }
.kw-story-b .kw-plain.playing { background: var(--kw-ink); color: #fff; }

.kw-acts { display: flex; gap: 12px; margin-top: 16px; }
.kw-skip, .kw-next { flex: 1; padding: .9rem; font: 800 .95rem Outfit, sans-serif !important; cursor: pointer; }
.kw-skip { background: none; border: 1px solid var(--kw-ink); color: var(--kw-ink); }
.kw-skip:hover { background: rgba(0,0,0,.04); }
.kw-next { background: var(--kw-red); border: 0; color: #fff; }
.kw-keys { font: 600 .74rem Outfit, sans-serif; color: var(--kw-soft); text-align: center; margin-top: 8px; }

/* ---------- end of a round ---------- */
.kw-done { background: var(--kw-sheet); border: 1px solid var(--kw-rule); padding: 22px 30px 24px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.kw-done .kw-kick { margin-bottom: 10px; }
.kw-done h2 { margin: 0; font: 900 2.3rem/1.2 var(--kw-serif); text-align: center; }
.kw-done .lede { font: italic 1.05rem/1.5 var(--kw-serif); color: #3d3a33; text-align: center; max-width: 36rem; margin: .5rem auto 1rem; }
.kw-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 1.2rem; }
.kw-tile { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font: 700 1.5rem 'Noto Serif JP', serif; border: 1.5px solid var(--kw-ink); position: relative; }
.kw-tile.ok { background: var(--kw-ink); color: #fff; }
.kw-tile.no { color: var(--kw-red); border-color: var(--kw-red); }
.kw-tile.half { background: #f2dfaa; }
.kw-done .kw-corr-list { border-top: 3px solid var(--kw-ink); padding-top: 6px; }
.kw-done h4 { margin: 0 0 4px; font: 900 1.05rem var(--kw-serif); }
.kw-mis { padding: .55rem 0; border-bottom: 1px dotted #9a958a; }
.kw-mis-s { display: block; font-size: 1.2rem; line-height: 2.1; }
.kw-mis-s rt { font-size: .45em; color: var(--kw-soft); }
.kw-mis small { color: var(--kw-grey); font-size: .82rem; }
.kw-done .kw-acts { margin-top: 1.2rem; }

/* ---------- pips (in the reading bar) ---------- */
.kw-pips { margin: 0; }
.kw-sp { flex: 1; }
.kw-chg { background: none; border: 1px solid var(--kw-ink); padding: .35rem .8rem; font: 700 .8rem Outfit, sans-serif; cursor: pointer; color: var(--kw-ink); }
.kw-chg:hover { background: var(--kw-ink); color: #fff; }
.kw-tip { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: .85rem; color: #444; }
.kw-tip-k { width: 30px; height: 30px; border-radius: 50%; background: #1a1a2e; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }

/* ---------- Study first: the kanji's card ---------- */
.kw-card .kw-kick { margin-bottom: 14px; }
.kw-cardb { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.kw-big { font: 700 7rem/1 'Noto Serif JP', serif; width: 1.3em; height: 1.3em; display: grid; place-items: center; border: 2px solid var(--kw-ink); background: #fff; }
.kw-ckw { font: 800 .9rem Outfit, sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.kw-crow { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px dotted #9a958a; }
.kw-crow .lbl { font: 800 .62rem Outfit, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #6b665b; }
.kw-crd { font-size: 1.5rem; font-weight: 700; }
.kw-crd small { font-size: .7em; font-weight: 500; color: var(--kw-soft); }
.kw-crd i { font-style: normal; color: var(--kw-soft); margin: 0 .2em; font-weight: 400; }
.kw-cw > span { display: inline-block; margin: 0 1.2rem .2rem 0; font-size: .9rem; }
.kw-cw .jp { font-size: 1.1rem; margin-right: .25rem; }
.kw-cw rt { font-size: .55em; color: var(--kw-soft); }
.kw-cnext { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--kw-ink); font: italic .92rem var(--kw-serif); color: #3d3a33; }
.kw-cnext .kw-next { flex: none; padding: .8rem 1.2rem; }

/* ---------- settings ---------- */
.kw-set { background: var(--kw-box); border: 1px solid var(--kw-ink); padding: 20px 24px 16px; max-width: 780px; margin: 0 auto; }
.kw-q { margin: 0 0 10px; font: 900 1.18rem var(--kw-serif); }
.kw-q small { font: 600 .8rem Outfit, sans-serif; color: var(--kw-soft); margin-left: 6px; }
.kw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.kw-seg.kw-cards { border: 0; grid-template-columns: 1fr 1fr; }
.kw-seg.kw-cards button, .kw-which .kw-r { border: 1.5px solid var(--kw-ink); background: var(--kw-sheet); padding: 10px 12px; text-align: left; cursor: pointer; color: var(--kw-ink); font: inherit; }
.kw-seg.kw-cards button:first-child { border-left: 1.5px solid var(--kw-ink); }
.kw-c b { display: block; font: 800 .95rem Outfit, sans-serif; }
.kw-c b .jp { font-weight: 700; }
.kw-c > span, .kw-which .kw-r small { display: block; font-size: .76rem; line-height: 1.35; color: var(--kw-grey); margin-top: 3px; font-weight: 500; }
.kw-seg.kw-cards button.on, .kw-which .kw-r.on { background: var(--kw-ink); color: var(--kw-box); }
.kw-seg.kw-cards button.on > span, .kw-which .kw-r.on small { color: #cfc9bb; }
.kw-which .kw-r { display: block; }
.kw-which .kw-r > i { display: none; }
.kw-which .kw-r > span { display: block; }
.kw-which .kw-r select { margin-top: 6px; border-color: currentColor; background: transparent; color: inherit; }
.kw-which .kw-r select option { color: #1b1b1b; }
.kw-which .kw-kit { grid-column: 1 / -1; }
.kw-more { border-top: 1px dotted #9a958a; padding-top: 10px; }
.kw-more summary { cursor: pointer; font: 700 .86rem Outfit, sans-serif; color: var(--kw-grey); list-style: none; }
.kw-more summary::-webkit-details-marker { display: none; }
.kw-more summary::before { content: '＋ '; color: var(--kw-red); }
.kw-more[open] summary::before { content: '－ '; }
.kw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; margin-top: 12px; }
.kw-g-wide { grid-column: 1 / -1; }
.kw-typed-r { border-bottom: 0; padding: 0; }
.kw-typed-r > span { flex: 1; }
.kw-typed-r input { margin-top: 0; }
.kw-set .kw-go { margin-top: 14px; font-size: 1rem !important; padding: .95rem; }
.kw-set-h { font: 900 1.15rem var(--kw-serif); border-bottom: 2px solid var(--kw-ink); padding-bottom: 6px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.kw-set-x { display: none; background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--kw-grey); }
.kw-g { margin-bottom: 13px; }
.kw-l { font: 800 .62rem Outfit, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b665b; margin-bottom: 6px; }
.kw-l small { letter-spacing: 0; text-transform: none; font-weight: 600; font-style: italic; }
.kw-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--kw-ink); }
.kw-seg.kw-lv { grid-template-columns: repeat(5, 1fr); }
.kw-seg button { background: none; border: 0; border-left: 1px solid var(--kw-ink); padding: .5rem .2rem; font: 700 .78rem Outfit, sans-serif; color: var(--kw-ink); cursor: pointer; }
.kw-seg button:first-child { border-left: 0; }
.kw-seg button:hover { background: rgba(0,0,0,.05); }
.kw-seg button.on { background: var(--kw-ink); color: var(--kw-box); }
.kw-seg button.under { background: rgba(0,0,0,.08); }
.kw-r { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dotted #9a958a; font-size: .84rem; cursor: pointer; outline-offset: 2px; }
.kw-r:last-child { border-bottom: 0; }
.kw-r i { width: 13px; height: 13px; flex: none; border: 1.5px solid var(--kw-ink); border-radius: 2px; box-sizing: border-box; }
.kw-r.on i { background: var(--kw-red); border-color: var(--kw-red); box-shadow: inset 0 0 0 2px var(--kw-box); }
.kw-r > span { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.kw-r small { font-size: .72rem; color: #6b665b; }
.kw-r select, .kw-r input { font: 600 .78rem Outfit, sans-serif; border: 1px solid var(--kw-ink); background: var(--kw-sheet); color: var(--kw-ink); border-radius: 0; padding: 3px 5px; }
.kw-r input { margin-top: 4px; font-family: 'Noto Serif JP', serif; font-size: .9rem; width: 100%; box-sizing: border-box; }
.kw-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 5px 0; cursor: pointer; }
.kw-sw input { position: absolute; opacity: 0; pointer-events: none; }
.kw-sw em { width: 32px; height: 18px; border-radius: 99px; background: #c9c3b5; flex: none; position: relative; transition: background .15s; }
.kw-sw em::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.kw-sw input:checked + em { background: var(--kw-ink); }
.kw-sw input:checked + em::after { left: 16px; }
.kw-sw input:focus-visible + em { outline: 2px solid var(--kw-red); outline-offset: 2px; }
.kw-fit { font-size: .8rem; color: var(--kw-grey); text-align: center; margin: 8px 0 2px; line-height: 1.4; }
.kw-fit b { font-size: 1.05rem; color: var(--kw-ink); }
.kw-fit.none { color: var(--kw-red); }
.kw-go { width: 100%; background: var(--kw-red); color: #fff; border: 0; padding: .8rem; font: 800 .92rem Outfit, sans-serif !important; cursor: pointer; }
.kw-go:disabled { background: #b9b2a3; cursor: default; }
.kw-go.fresh { box-shadow: 0 0 0 3px var(--kw-paper), 0 0 0 5px var(--kw-red); }
.kw-demo { margin: 10px 0 0; font: italic .74rem var(--kw-serif); color: var(--kw-soft); line-height: 1.4; }

/* ---------- the story ---------- */
.kw-art { background: var(--kw-sheet); border: 1px solid var(--kw-rule); padding: 20px 30px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.08); transition: box-shadow .25s; }
.kw-art.is-right { box-shadow: 0 0 0 3px rgba(47,125,79,.55), 0 8px 20px rgba(0,0,0,.08); }
.kw-art.is-wrong { box-shadow: 0 0 0 3px rgba(179,38,30,.5), 0 8px 20px rgba(0,0,0,.08); }
.kw-kick { display: flex; justify-content: space-between; gap: 1rem; font: 800 .68rem Outfit, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kw-red); border-bottom: 1px solid var(--kw-ink); padding-bottom: 7px; }
.kw-kick .jp { font-size: .9rem; letter-spacing: 0; }
.kw-kick span:last-child { color: var(--kw-ink); white-space: nowrap; }
.kw-sent { font: 700 2.6rem/2.2 'Noto Serif JP', serif; text-align: center; margin: .45rem 0 .1rem; letter-spacing: .03em; }
.kw-sent rt { font: 500 .36em 'Noto Sans JP', sans-serif; color: #7d776a; letter-spacing: 0; }
.kw-t { color: var(--kw-red); position: relative; display: inline-block; line-height: 1.15; }
.kw-t::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.02em; height: .08em; background: var(--kw-red); }
.kw-w { border-bottom: 2px dotted #8a8577; padding: 0 .04em; }
.kw-w.good { border-bottom: 0; background: rgba(47,125,79,.12); box-shadow: inset 0 -3px 0 rgba(47,125,79,.55); padding: 0 .08em; }
.kw-w.bad { border-bottom: 0; background: rgba(179,38,30,.08); box-shadow: inset 0 -3px 0 rgba(179,38,30,.5); padding: 0 .08em; }
.kw-sent.is-mid { font-size: 2.2rem; }
.kw-sent.is-long { font-size: 1.85rem; }
.kw-en { text-align: center; font: italic 1.08rem var(--kw-serif); color: #3d3a33; margin: -.2rem 0 .5rem; }
.kw-by { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--kw-ink); padding-top: 9px; margin-top: 6px; }
.kw-credit { font: italic .82rem var(--kw-serif); color: var(--kw-grey); }
.kw-credit a { color: inherit; }
.kw-by-b { display: flex; gap: 8px; }
.kw-by-b button { font: 700 .76rem Outfit, sans-serif; background: none; border: 1px dashed #777; padding: .35rem .8rem; color: #333; cursor: pointer; }
.kw-by-b button small { font-weight: 500; }
.kw-by-b button:hover { border-style: solid; border-color: var(--kw-ink); }
.kw-by-b button.playing { background: var(--kw-ink); color: var(--kw-sheet); border-style: solid; }

/* ---------- classifieds (the answers) ---------- */
.kw-clh { margin: 22px 0 8px; display: flex; align-items: baseline; gap: 12px; border-top: 3px solid var(--kw-ink); padding-top: 6px; }
.kw-clh b { font: 900 1.15rem var(--kw-serif); }
.kw-clh span { font: 600 .78rem Outfit, sans-serif; color: var(--kw-grey); }
.kw-cl { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--kw-ink); background: var(--kw-sheet); }
.kw-ad { position: relative; background: none; border: 0; border-left: 1px solid var(--kw-ink); padding: 13px 12px 15px; text-align: left; cursor: pointer;
  font: 700 1.02rem/1.3 var(--kw-serif) !important; color: var(--kw-ink); transition: background .12s; }
.kw-ad:first-child { border-left: 0; }
.kw-ad small { display: block; font: 800 .6rem Outfit, sans-serif; letter-spacing: .14em; color: var(--kw-red); margin-bottom: 6px; }
.kw-ad:hover:not(:disabled) { background: #efe9da; }
.kw-cl.kana .kw-ad { font: 500 1.7rem 'Noto Serif JP', serif !important; text-align: center; padding: 10px 8px 12px; }
.kw-cl.kana .kw-ad small { text-align: left; }
.kw-ad:disabled { cursor: default; }
.kw-ad.dim { color: #aaa397; }
.kw-ad.dim small { color: #c2bba9; }
.kw-ad.right { background: var(--kw-ink); color: #fff; }
.kw-ad.right small { color: #9ee0b5; }
.kw-ad.right::after { content: '✓'; position: absolute; right: 10px; top: 8px; font: 800 1rem Outfit, sans-serif; color: #9ee0b5; }
.kw-ad.wrong { color: var(--kw-red); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- the answer, as a news item ---------- */
.kw-story { margin-top: 18px; background: var(--kw-sheet); border: 1px solid var(--kw-ink); border-top: 5px solid var(--kw-green); padding: 16px 22px 14px; }
.kw-story.bad { border-top-color: var(--kw-red); }
.kw-story.skip { border-top-color: #b98a2a; }
.kw-story h3 { margin: 0; font: 900 1.25rem/1.35 var(--kw-serif); }
.kw-story h3 .jp { font-weight: 700; }
.kw-word { display: flex; align-items: baseline; flex-wrap: wrap; gap: .8rem; margin: .6rem 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--kw-rule); }
.kw-word .jp { font-size: 2rem; font-weight: 700; }
.kw-word .rd { font: 500 1.05rem 'Noto Sans JP', sans-serif; color: var(--kw-grey); }
.kw-word .gl { font: italic 700 1.1rem var(--kw-serif); }
.kw-rows { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; align-items: baseline; font-size: .92rem; line-height: 1.5; }
.kw-rows .lbl { font: 800 .62rem Outfit, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #6b665b; white-space: nowrap; }
.kw-rows .rd b { color: var(--kw-red); font: 700 1.05rem 'Noto Serif JP', serif; }
.kw-rows .rd small { color: var(--kw-soft); font-size: .82rem; }
.kw-rows .oth > span { display: inline-block; margin: 0 1.1rem .15rem 0; }
.kw-rows .oth .jp { font-size: 1.05rem; margin-right: .25rem; }
.kw-rows rt { font-size: .55em; color: var(--kw-soft); }
.kw-story-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.kw-katsu { display: inline-flex; align-items: center; gap: .4rem; background: var(--kw-ink); color: #fff; border: 0; padding: .45rem .95rem; font: 700 .8rem Outfit, sans-serif !important; cursor: pointer; }
.kw-katsu b { font-family: 'Noto Serif JP', serif; color: #f0b8a8; }
.kw-story-b .kw-plain { background: none; border: 1px solid var(--kw-ink); padding: .45rem .9rem; font: 700 .8rem Outfit, sans-serif !important; cursor: pointer; color: var(--kw-ink); }
.kw-story-b .kw-plain.playing { background: var(--kw-ink); color: #fff; }

.kw-acts { display: flex; gap: 12px; margin-top: 16px; }
.kw-skip, .kw-next { flex: 1; padding: .9rem; font: 800 .95rem Outfit, sans-serif !important; cursor: pointer; }
.kw-skip { background: none; border: 1px solid var(--kw-ink); color: var(--kw-ink); }
.kw-skip:hover { background: rgba(0,0,0,.04); }
.kw-next { background: var(--kw-red); border: 0; color: #fff; }
.kw-keys { font: 600 .74rem Outfit, sans-serif; color: var(--kw-soft); text-align: center; margin-top: 8px; }

/* ---------- end of a round ---------- */
.kw-done { background: var(--kw-sheet); border: 1px solid var(--kw-rule); padding: 22px 30px 24px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.kw-done .kw-kick { margin-bottom: 10px; }
.kw-done h2 { margin: 0; font: 900 2.3rem/1.2 var(--kw-serif); text-align: center; }
.kw-done .lede { font: italic 1.05rem/1.5 var(--kw-serif); color: #3d3a33; text-align: center; max-width: 36rem; margin: .5rem auto 1rem; }
.kw-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 1.2rem; }
.kw-tile { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font: 700 1.5rem 'Noto Serif JP', serif; border: 1.5px solid var(--kw-ink); position: relative; }
.kw-tile.ok { background: var(--kw-ink); color: #fff; }
.kw-tile.no { color: var(--kw-red); border-color: var(--kw-red); }
.kw-tile.half { background: #f2dfaa; }
.kw-done .kw-corr-list { border-top: 3px solid var(--kw-ink); padding-top: 6px; }
.kw-done h4 { margin: 0 0 4px; font: 900 1.05rem var(--kw-serif); }
.kw-mis { padding: .55rem 0; border-bottom: 1px dotted #9a958a; }
.kw-mis-s { display: block; font-size: 1.2rem; line-height: 2.1; }
.kw-mis-s rt { font-size: .45em; color: var(--kw-soft); }
.kw-mis small { color: var(--kw-grey); font-size: .82rem; }
.kw-done .kw-acts { margin-top: 1.2rem; }

/* ---------- the three boxes underneath ---------- */
.kw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.kw-box { border: 1px solid var(--kw-ink); padding: 10px 13px 12px; background: var(--kw-box); font-size: .84rem; line-height: 1.5; }
.kw-box h4 { margin: 0 0 6px; font: 900 .98rem var(--kw-serif); border-bottom: 1px solid var(--kw-ink); padding-bottom: 4px; }
.kw-box p { margin: 0; }
.kw-pips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kw-pips span { width: 19px; height: 19px; border: 1px solid var(--kw-ink); font: 800 .56rem Outfit, sans-serif; display: flex; align-items: center; justify-content: center; }
.kw-pips .r { background: var(--kw-ink); color: #fff; }
.kw-pips .w { color: var(--kw-red); border-color: var(--kw-red); }
.kw-pips .h { background: #f2dfaa; }
.kw-pips .n { background: var(--kw-red); border-color: var(--kw-red); color: #fff; }
.kw-corr-i { padding: 3px 0; border-bottom: 1px dotted #b3ad9f; }
.kw-corr-i:last-child { border-bottom: 0; }
.kw-corr-i .jp { font-weight: 700; }

/* ---------- bits the live page adds ---------- */
.kw-qw { font-size: .95rem; letter-spacing: 0; color: var(--kw-ink); text-transform: none; }
.kw-ad em { display: block; font: 500 .82rem 'Noto Serif JP', serif; font-style: normal; margin-top: 4px; opacity: .75; }
.kw-ad.right em { opacity: .85; }
.kw-kwd { font: 800 .78rem Outfit, sans-serif; letter-spacing: .06em; margin-left: .3rem; }
.kw-klc { color: var(--kw-soft); margin-left: .35rem; }
.kw-art.is-loading .kw-kick, .kw-art.is-loading .kw-by { visibility: hidden; }
.kw-loading { font: italic 600 1.1rem var(--kw-serif); color: var(--kw-soft); letter-spacing: 0; }
.kw-empty { background: var(--kw-sheet); border: 1px solid var(--kw-rule); padding: 26px 30px; text-align: center; }
.kw-empty h2 { margin: 0 0 .4rem; font: 900 1.6rem var(--kw-serif); }
.kw-empty p { margin: 0 auto 1rem; max-width: 34rem; color: #3d3a33; font: italic 1rem/1.5 var(--kw-serif); }
.kw-empty button { background: var(--kw-ink); color: #fff; border: 0; padding: .7rem 1.2rem; font: 800 .88rem Outfit, sans-serif; cursor: pointer; }
.kw-r.kw-kit b::after { content: ''; }
.kw-r .kw-kit-k { font-family: 'Noto Serif JP', serif; letter-spacing: .05em; }
.kw-colophon { max-width: 1272px; margin: 26px auto 0; padding: 10px 24px 0; border-top: 1px solid var(--kw-ink); font: .74rem/1.55 Outfit, sans-serif; color: var(--kw-grey); }
.kw-colophon b { color: var(--kw-ink); }
.kw-colophon a { color: inherit; }
.kw-set .kw-r.kw-kit { background: rgba(179,38,30,.06); }

/* two-way switch in the settings */
.kw-seg.kw-seg2 { grid-template-columns: 1fr 1fr; }
/* a sentence you got wrong before */
.kw-prev { display: inline-block; margin: 10px 0 0; font: 700 .78rem Outfit, sans-serif; color: var(--kw-red); border: 1.5px solid var(--kw-red);
  padding: 3px 10px; transform: rotate(-1deg); background: rgba(179,38,30,.05); }
/* writing the answer */
.kw-type { display: flex; gap: 0; border: 1px solid var(--kw-ink); background: var(--kw-sheet); }
.kw-input { flex: 1; min-width: 0; border: 0; background: none; padding: 14px 16px; font: 700 1.15rem var(--kw-serif); color: var(--kw-ink); outline: none; }
.kw-input.kana { font: 500 1.5rem 'Noto Serif JP', serif; }
.kw-input::placeholder { color: #a9a293; font-weight: 500; font-style: italic; font-size: 1rem; }
.kw-type:focus-within { box-shadow: 0 0 0 3px rgba(27,27,27,.12); }
.kw-input.right { background: rgba(47,125,79,.12); }
.kw-input.wrong { background: rgba(179,38,30,.08); color: var(--kw-red); text-decoration: line-through; }
.kw-check { border: 0; border-left: 1px solid var(--kw-ink); background: var(--kw-ink); color: #fff; padding: 0 1.4rem; font: 800 .9rem Outfit, sans-serif; cursor: pointer; }
.kw-check:disabled { background: #b9b2a3; cursor: default; }
.kw-type-msg { margin-top: 8px; font: italic 700 .95rem var(--kw-serif); color: #9a6a12; }
.kw-stop { display: block; margin: 10px auto 0; background: none; border: 0; font: 700 .82rem Outfit, sans-serif; color: var(--kw-grey); text-decoration: underline; cursor: pointer; }
.kw-stop:hover { color: var(--kw-ink); }

/* ---------- the edition card (front page) ---------- */
.kw-q { margin: 0 0 10px; font: 900 1.18rem var(--kw-serif); }
.kw-q small { font: 600 .8rem Outfit, sans-serif; color: var(--kw-soft); margin-left: 6px; }
.kw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.kw-seg.kw-cards { border: 0; grid-template-columns: 1fr 1fr; }
.kw-seg.kw-cards button, .kw-which .kw-r { border: 1.5px solid var(--kw-ink); background: var(--kw-sheet); padding: 10px 12px; text-align: left; cursor: pointer; color: var(--kw-ink); font: inherit; }
.kw-seg.kw-cards button:first-child { border-left: 1.5px solid var(--kw-ink); }
.kw-c b { display: block; font: 800 .95rem Outfit, sans-serif; }
.kw-c b .jp { font-weight: 700; }
.kw-c > span, .kw-which .kw-r small { display: block; font-size: .76rem; line-height: 1.35; color: var(--kw-grey); margin-top: 3px; font-weight: 500; }
.kw-seg.kw-cards button.on, .kw-which .kw-r.on { background: var(--kw-ink); color: var(--kw-box); }
.kw-seg.kw-cards button.on > span, .kw-which .kw-r.on small { color: #cfc9bb; }
.kw-which .kw-r { display: block; }
.kw-which .kw-r > i { display: none; }
.kw-which .kw-r > span { display: block; }
.kw-which .kw-r select { margin-top: 6px; border-color: currentColor; background: transparent; color: inherit; }
.kw-which .kw-r select option { color: #1b1b1b; }
.kw-which .kw-kit { grid-column: 1 / -1; }
.kw-more { border-top: 1px dotted #9a958a; padding-top: 10px; }
.kw-more summary { cursor: pointer; font: 700 .86rem Outfit, sans-serif; color: var(--kw-grey); list-style: none; }
.kw-more summary::-webkit-details-marker { display: none; }
.kw-more summary::before { content: '＋ '; color: var(--kw-red); }
.kw-more[open] summary::before { content: '－ '; }
.kw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; margin-top: 12px; }
.kw-g-wide { grid-column: 1 / -1; }
.kw-typed-r { border-bottom: 0; padding: 0; }
.kw-typed-r > span { flex: 1; }
.kw-typed-r input { margin-top: 0; }
.kw-set .kw-go { margin-top: 14px; font-size: 1rem !important; padding: .95rem; }
.kw-which .kw-r:last-child { border-bottom: 1.5px solid var(--kw-ink); }
.kw-which .kw-r b { color: var(--kw-ink); }
.kw-which .kw-r.on b { color: var(--kw-box); }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 900px) {
  .kw-in { padding: 0 14px; }
  .kw-dl-mid { display: none; }
  .kw-how3 { grid-template-columns: 1fr; }
  .kw-how3 > div { border-left: 0; border-top: 1px solid var(--kw-rule); padding: 10px 4px; }
  .kw-how3 > div:first-child { border-top: 0; }
  .kw-set { padding: 16px 14px 14px; }
  .kw-cards, .kw-seg.kw-cards, .kw-opts { grid-template-columns: 1fr; }
  .kw-cards { gap: 8px; }
  .kw-cardb { grid-template-columns: 1fr; gap: 12px; justify-items: center; }
  .kw-big { font-size: 5rem; }
  .kw-crow { grid-template-columns: 4rem 1fr; }
  .kw-crd { font-size: 1.25rem; }
  .kw-cnext .kw-next { width: 100%; }
  .kw-mast { padding: 18px 14px 14px; }
  .kw-title { font-size: 1.9rem; }
  .kw-title .jp { display: block; margin: 0; font-size: 1.5rem; }
  .kw-art { padding: 16px 14px 12px; }
  .kw-sent, .kw-sent.is-mid { font-size: 1.7rem; line-height: 2.15; }
  .kw-sent.is-long { font-size: 1.45rem; }
  .kw-kick { font-size: .6rem; letter-spacing: .1em; }
  .kw-cl { grid-template-columns: 1fr; }
  .kw-ad { border-left: 0; font-size: 1rem !important; padding: 9px 12px 11px; display: flex; align-items: baseline; gap: 10px; }
  .kw-ad + .kw-ad { border-top: 1px solid var(--kw-ink); }
  .kw-ad small { margin: 0; flex: none; width: 3.4rem; }
  .kw-cl.kana .kw-ad { font-size: 1.4rem !important; text-align: left; padding: 6px 12px 8px; }
  .kw-story { padding: 14px 14px 12px; }
  .kw-rows { grid-template-columns: 1fr; gap: .1rem; }
  .kw-rows .lbl { margin-top: .5rem; }
  .kw-keys { display: none; }
  .kw-colophon { padding: 10px 14px 0; }
  .kw-done { padding: 18px 14px; }
  .kw-done h2 { font-size: 1.7rem; }
}