/* JLPT practice section (jlpt-practice.js) and the quiet recorded-audio hint (audio.js). */
:root{--jp-ease:cubic-bezier(.32,.72,0,1);--jp-green:#315a48;--jp-red:#b84731;--jp-gold:#caa972;--jp-line:#dedfd3;--jp-paper:#fffdf8;--jp-mute:#7c887b}
.audio-hint{display:inline-block;margin-left:10px;font-size:10px;letter-spacing:.02em;color:#8c978b;vertical-align:middle}

.jlpt-practice{margin:0 0 34px;padding-bottom:30px;border-bottom:1px solid var(--jp-line)}
.jlpt-practice[hidden]{display:none}
#library.jlpt-focus .workspace>:not(#jlpt-practice){display:none}
#library.jlpt-focus .jlpt-practice{border-bottom:0;margin-bottom:0;padding-bottom:0}

.jp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.jp-head h3{font:500 clamp(24px,2.3vw,31px)/1.3 var(--serif);margin:6px 0 6px;letter-spacing:.02em}
.jp-head p{margin:0;color:#6d786e;font-size:12px;max-width:560px;line-height:1.75}
.jp-sync{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:10px;color:#6f8573;border:1px solid #d9e2d6;background:#f3f6f0;padding:5px 11px;border-radius:999px;white-space:nowrap}
.jp-sync i{width:6px;height:6px;border-radius:50%;background:#a7b5a5}
.jp-sync.cloud i{background:#57886b;box-shadow:0 0 0 3px #57886b22}

.jp-levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.jp-level{opacity:0;transform:translateY(14px);transition:opacity .8s var(--jp-ease),transform .8s var(--jp-ease)}
.jp-level.in{opacity:1;transform:none}
.jp-level-shell{height:100%;padding:5px;border-radius:7px;background:linear-gradient(160deg,#f1efe5,#f8f6ef);box-shadow:0 0 0 1px #315a481a,0 14px 30px -22px #2a45304d;transition:transform .55s var(--jp-ease),box-shadow .55s var(--jp-ease)}
.jp-level:hover .jp-level-shell{transform:translateY(-3px);box-shadow:0 0 0 1px #315a4833,0 20px 36px -24px #2a453066}
.jp-level-core{height:100%;display:flex;flex-direction:column;gap:4px;padding:16px 13px 13px;border-radius:4px;background:var(--jp-paper);box-shadow:inset 0 1px 0 #fff}
.jp-level-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.jp-level-glyph{font:42px/1 var(--serif);color:var(--jp-green)}
.jp-level.paid .jp-level-glyph{color:var(--jp-red)}
.jp-level.locked .jp-level-glyph{opacity:.42}
.jp-level strong{font:500 21px/1.25 var(--serif)}
.jp-level small{color:#8a958a;font-size:11px;line-height:1.5;min-height:33px}
.jp-level-meta{font-size:10px;color:#748276;letter-spacing:.02em}
.jp-level-progress{font-size:10px;color:#7d897d;line-height:1.5;min-height:30px}
.jp-level-progress b{color:var(--jp-red);font-weight:700}
.jp-meter{display:flex;height:4px;border-radius:4px;background:#ebede4;overflow:hidden;margin:8px 0 4px}
.jp-meter span{display:block;width:0;transition:width 1.1s var(--jp-ease)}
.jp-meter-m{background:var(--jp-green)}
.jp-meter-l{background:var(--jp-gold)}
.jp-level-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding-top:12px}
.jp-level-actions .jp-primary{width:100%;gap:6px;padding:6px 6px 6px 11px;font-size:11px;line-height:1.3;text-align:left}
.jp-level-actions .jp-primary i{flex:none}
.jp-level-actions .jp-about{align-self:flex-start}
.jp-about{font-size:10px;color:#7f8a7f;text-decoration:none;border-bottom:1px solid #cfd6ca;white-space:nowrap}
.jp-about:hover{color:var(--jp-red);border-color:var(--jp-red)}

.jp-chip{display:inline-flex;align-items:center;gap:4px;font:700 9px var(--sans);letter-spacing:.08em;padding:3px 8px;border-radius:999px;color:var(--jp-green);background:#ebf0e8;white-space:nowrap}
.jp-chip.free{color:#3c7e55;background:#e2eee4}
.jp-chip.paid{color:#9b4a35;background:#f6ebe5}
.jp-chip.ok{color:#fffaf2;background:var(--jp-green)}
.jp-lock{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

.jp-primary,.jp-ghost,.jp-text,.jp-back{font:700 12px var(--sans);cursor:pointer}
.jp-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;border:0;background:var(--jp-green);color:#fffaf2;padding:6px 6px 6px 14px;min-height:36px;text-decoration:none;transition:background .4s var(--jp-ease),transform .4s var(--jp-ease)}
.jp-primary i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff1f;font-style:normal;font-size:12px;transition:transform .5s var(--jp-ease)}
.jp-primary:hover{background:#244637}
.jp-primary:hover i{transform:translate(2px,-1px) scale(1.06)}
.jp-primary:active{transform:scale(.98)}
.jp-level.paid.open .jp-primary,.jp-locked .jp-primary,.jp-done .jp-primary{background:var(--jp-red)}
.jp-level.paid.open .jp-primary:hover,.jp-locked .jp-primary:hover,.jp-done .jp-primary:hover{background:#953b2b}
.jp-locked-button{justify-content:center;gap:7px;background:#efe7dd!important;color:#8f4532!important;padding:6px 10px!important;text-align:center!important}
.jp-locked-button .jp-lock{width:14px;height:14px}
.jp-locked-button:hover{background:#f3e2d8!important}
.jp-ghost{border:1px solid #cdd6ca;background:transparent;color:var(--jp-green);padding:9px 14px;min-height:36px}
.jp-ghost:hover{background:#eef3ec}
.jp-text{border:0;background:transparent;color:var(--jp-green);padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.jp-back{border:0;background:transparent;color:#5d6d61;padding:6px 0}
.jp-back:hover{color:var(--jp-red)}
.jp-status{color:#7b887b;font-size:12px;padding:18px 0}

.jp-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.jp-count{font:500 15px var(--serif);color:#6d7a6f}
.jp-session{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.jp-question{background:var(--jp-paper);border:1px solid var(--jp-line);padding:24px 26px 20px;box-shadow:0 18px 40px -32px #2a453055;animation:jp-rise .6s var(--jp-ease) both}
.jp-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.jp-variant{font-size:10px;color:#9aa397;margin-left:auto}
.jp-prompt{font:500 clamp(19px,1.9vw,24px)/1.6 var(--serif);margin:0 0 16px;overflow-wrap:anywhere}
.jp-choices{display:grid;gap:8px}
.jp-choice{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;text-align:left;border:1px solid var(--jp-line);background:#fffefb;padding:11px 13px;color:var(--ink);font-size:13px;line-height:1.6;transition:border-color .35s var(--jp-ease),background .35s var(--jp-ease),transform .35s var(--jp-ease)}
.jp-choice b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid #cfd8cb;font:700 11px var(--sans);color:#6b7c6f}
.jp-choice span{overflow-wrap:anywhere}
.jp-choice:hover:not(:disabled){border-color:#a9bfac;transform:translateX(2px)}
.jp-choice.selected{border-color:var(--jp-green);background:#f0f5ee}
.jp-choice.selected b{background:var(--jp-green);border-color:var(--jp-green);color:#fffaf2}
.jp-choice.correct{border-color:#6b9c75;background:#e5f1e6}
.jp-choice.correct b{background:#4f8a5d;border-color:#4f8a5d;color:#fff}
.jp-choice.wrong{border-color:#cf8c7b;background:#f7e8e3}
.jp-choice.wrong b{background:#b85d47;border-color:#b85d47;color:#fff}
.jp-choice:disabled{cursor:default}
.jp-input{width:100%;border:1px solid #cdd6ca;background:#fffefb;padding:13px 14px;font:20px var(--serif);color:var(--ink)}
.jp-input:focus{border-color:var(--jp-green);outline:2px solid #315a4822}
.jp-feedback{margin-top:14px;border-left:3px solid #6b9c75;background:#eef5ee;padding:12px 15px;font-size:13px;line-height:1.7;animation:jp-rise .5s var(--jp-ease) both}
.jp-feedback:focus{outline:none}
.jp-feedback.no{border-left-color:#c27561;background:#f8ece7}
.jp-feedback strong{display:block;font:500 16px var(--serif);color:var(--jp-green)}
.jp-feedback.no strong{color:#9b3f2c}
.jp-feedback p{margin:4px 0 0;overflow-wrap:anywhere}
.jp-feedback small{display:block;color:#8a6f62;margin-top:6px;font-size:11px}
.jp-question-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.jp-keys{font-size:10px;color:#a0a89c}
.jp-cells{display:flex;flex-wrap:wrap;gap:4px;margin-top:18px;padding-top:14px;border-top:1px solid #ecece4}
.jp-cells span{width:12px;height:12px;border-radius:2px;background:#e7e9df}
.jp-cells span.now{background:var(--jp-gold)}
.jp-cells span.ok{background:#6b9c75}
.jp-cells span.no{background:#c27561}

.jp-audio-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 4px}
.jp-audio{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;background:#e5efe7;color:var(--jp-green);padding:7px 13px 7px 9px;font:700 11px var(--sans);transition:background .35s var(--jp-ease),transform .35s var(--jp-ease)}
.jp-audio:hover{background:#d8e8dc}
.jp-audio:active{transform:scale(.97)}
.jp-audio.large{padding:10px 16px 10px 12px;font-size:12px}
.jp-audio.small{padding:5px 11px 5px 8px}
.jp-audio.playing{background:#d4e6d9}
.jp-play-icon{width:14px;height:14px;fill:currentColor}
.jp-audio-hint{font-size:10px;color:#8c978b}

.jp-card{background:#f6f5ee;border:1px solid #e3e3d8;padding:22px 22px 18px;animation:jp-rise .7s var(--jp-ease) both}
.jp-card-hidden{display:grid;place-items:center;text-align:center;min-height:220px;color:#8c978b;font-size:12px}
.jp-card-hidden span{font:34px var(--serif);color:#c2cdc2}
.jp-card h4{font:500 clamp(28px,3vw,38px)/1.25 var(--serif);margin:8px 0 2px;overflow-wrap:anywhere}
.jp-kana{margin:0;color:#5f6e62;font:18px/1.5 var(--serif)}
.jp-romaji{margin:2px 0 0;color:#97a294;font-size:12px}
.jp-mora{display:inline-block;margin:8px 0 4px;padding:4px 10px;background:#ecebe1;font:14px var(--serif);letter-spacing:.08em;color:#4d5c51}
.jp-pitch{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:10px;color:#7c887b;margin:10px 0 6px;padding-top:10px;border-top:1px solid #e5e4da}
.jp-pitch-curve{display:flex;gap:6px;width:100%;height:26px;align-items:flex-start}
.jp-pitch-curve i{width:10px;height:10px;border-radius:50%;background:var(--jp-green);margin-top:15px}
.jp-pitch-curve i.h{margin-top:2px;background:var(--jp-red)}
.jp-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:12px 0 0;font-size:12px;line-height:1.7}
.jp-facts dt{color:#97a294;font-size:10px;letter-spacing:.08em;padding-top:3px;white-space:nowrap}
.jp-facts dd{margin:0;color:#3f4d43;overflow-wrap:anywhere}
.jp-pos{display:flex;flex-wrap:wrap;gap:4px}
.jp-pos span{font-size:10px;padding:1px 7px;border:1px solid #d8dccf;border-radius:999px;background:#fbfbf6;color:#5c6b60}
.jp-example{margin-top:14px;background:#fffefa;border-left:3px solid var(--jp-gold);padding:12px 14px}
.jp-example-top{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#97a294;letter-spacing:.06em}
.jp-example-top a{color:#4c6f5b;text-decoration:underline;text-underline-offset:2px}
.jp-example-top em{font-style:normal}
.jp-ja{font:16px/1.8 var(--serif);margin:6px 0 2px;overflow-wrap:anywhere}
.jp-ja mark{background:linear-gradient(transparent 58%,#ead8b4 58%);color:inherit;padding:0 1px}
.jp-tr{margin:0;font-size:12px;color:#6d7a6f;line-height:1.7}
.jp-tips{margin:14px 0 0;padding:12px 0 0 18px;border-top:1px solid #e5e4da;font-size:12px;color:#5b695e;line-height:1.75}

.jp-locked,.jp-done{position:relative;text-align:center;background:var(--jp-paper);border:1px solid var(--jp-line);padding:38px 24px 32px;animation:jp-rise .6s var(--jp-ease) both}
.jp-locked h3,.jp-done h3{font:500 clamp(22px,2.4vw,29px)/1.4 var(--serif);margin:8px 0 8px}
.jp-locked p,.jp-done p{max-width:520px;margin:0 auto;color:#6d786e;font-size:12px;line-height:1.8}
.jp-locked-seal,.jp-done-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#f6ebe5;color:var(--jp-red);margin:0 auto 12px}
.jp-locked-seal .jp-lock{width:26px;height:26px;stroke-width:1.3}
.jp-done-mark{background:#e5efe7;color:var(--jp-green);font:30px var(--serif)}
.jp-cats{list-style:none;padding:0;margin:18px auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:520px}
.jp-cats li{display:flex;gap:8px;align-items:baseline;border:1px solid #e1e3d8;padding:5px 11px;font-size:11px;color:#647266;border-radius:999px;background:#fbfbf6}
.jp-cats b{font:500 14px var(--serif);color:var(--ink)}
.jp-locked-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:20px}

@keyframes jp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1200px){.jp-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.jp-session{grid-template-columns:1fr}}
@media(max-width:750px){
  .jp-head{display:block}.jp-sync{margin-top:12px}
  .jp-levels{grid-template-columns:1fr;gap:10px}
  .jp-level-core{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:14px}
  .jp-level-top{grid-row:1/span 3;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
  .jp-level-glyph{font-size:38px}
  .jp-level small{min-height:0}
  .jp-level-progress,.jp-meter,.jp-level-actions,.jp-level-meta{grid-column:2}
  .jp-level-progress{min-height:0}
  .jp-question{padding:18px 16px 16px}
  .jp-card{padding:18px 16px}
  .jp-keys{display:none}
  .jp-question-actions{justify-content:flex-end}
  .jp-locked,.jp-done{padding:30px 16px 26px}
}
@media(prefers-reduced-motion:reduce){.jp-level,.jp-question,.jp-card,.jp-feedback,.jp-locked,.jp-done{animation:none;transition:none;opacity:1;transform:none}}