:root{
  --bg:#F6F1E4;
  --card:#FFFDF7;
  --ink:#26314A;
  --ink-soft:#5A6684;
  --accent:#B3432F;
  --accent-soft:#EADBC9;
  --muted:#8C8672;
  --border:#E3DAC5;
  --radius:16px;
  --disabled-bg:#57534A;
  --disabled-text:#E8E3D6;
  --disabled-num:#B9B2A0;
  --disabled-border:#82796A;
  --sakura:#C97C8C;
  --sakura-soft:#F3DEE2;
  --gold:#B98B2E;
  --gold-soft:#EFE1BE;
  --success:#3E7A56;
  --success-soft:#DCEAE1;
--info:#4A6FA5;
  --info-soft:#DCE4F0;
--teal:#2F8A8A;   --teal-soft:#DCEAEA;
  --plum:#7A5BA6;   --plum-soft:#E6DFF0;
  --slate:#5E6B7F;  --slate-soft:#E1E5EB;
  --rust:#C97A3C;   --rust-soft:#F2E2D2;
  --crimson:#AF2E33; --crimson-soft:#F6DDDE;
--indigo:#5A5FC4; --indigo-soft:#E1E2F4;
  --grade-d:#C97A3C;
  --grade-b:#4A6FA5;
--aurora:linear-gradient(135deg, var(--teal), var(--info), var(--plum));
--aurora-bar:linear-gradient(90deg, var(--teal), var(--info), var(--plum));
  --on-aurora:#fff;
}
:root[data-theme="dark"]{
  --bg:#181C27;
  --card:#232838;
  --ink:#EDE9DD;
  --ink-soft:#A9AFC4;
  --accent:#E0715C;
  --accent-soft:#3A2A26;
  --muted:#8890A6;
  --border:#333A50;
  --disabled-bg:#12141C;
  --disabled-text:#8890A6;
  --disabled-num:#5D6478;
  --disabled-border:#3A4056;
  --sakura:#E08FA0;
  --sakura-soft:#3A2830;
  --gold:#D9AE5C;
  --gold-soft:#3A331F;
  --success:#6FBE8C;
  --success-soft:#213A2B;
  --info:#7B9CC7;
  --info-soft:#1F2A3C;
  --teal:#5FB8B8;   --teal-soft:#1C3232;
  --plum:#A98BD4;   --plum-soft:#2B2338;
  --slate:#93A1B5;  --slate-soft:#232833;
  --rust:#E0975C;   --rust-soft:#3A2A1C;
  --crimson:#E96A70; --crimson-soft:#3B2022;
  --indigo:#9A9CF2; --indigo-soft:#25263F;
  --grade-d:#E0975C;
  --grade-b:#7B9CC7;
  --on-aurora:#15171f;
}
*{box-sizing:border-box;}
html{
  height:100%;
}
body{
  margin:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  flex:1 0 auto;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:2.5rem 1.25rem 4rem;
}
header{
  margin-bottom:1.75rem;
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:14px;
}
.header-nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  padding-right:52px;
  flex-wrap:wrap;
}
.header-nav-row .back-link{ margin-bottom:0; }
.back-link:hover{ color:var(--accent); }
.back-link svg{ width:12px; height:12px; }
.sn-top,
.sn-bot,
.sn-box{
  --sn-accent:var(--teal);
  font-family:'Work Sans', sans-serif;
}
.sn-ico{
  width:19px;
  height:19px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sn-ico.sn-play{ fill:currentColor; stroke:none; }
.sn-face{ width:28px; height:28px; flex:none; display:block; border-radius:50%; }
.sn-face-bg{ fill:var(--sn-accent); }
.sn-face-fg{ fill:var(--card); }
.sn-ghost{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:none;
  box-sizing:border-box;
  border:1.5px dashed currentColor;
  border-radius:50%;
}
.sn-ghost svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.sn-top{
  position:relative;
  z-index:900;
margin:0;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
@media (min-width:700px){
  .sn-top ~ .wrap{ padding-top:24px; }
html{ --sn-top-h:59px; }
}
.sn-in{
  display:flex;
  align-items:center;
  gap:6px;
  box-sizing:border-box;
  max-width:1200px;
  height:58px;
  margin:0 auto;
  padding:0 24px;
}
.sn-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  min-width:0;
  color:var(--ink);
  font-size:17px;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
}
.sn-brand img{ display:block; width:32px; height:32px; border-radius:50%; transition:box-shadow .2s; }
.sn-brand:hover img{ box-shadow:0 0 0 3px color-mix(in srgb, var(--sn-accent) 45%, transparent); }
.sn-brand:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
.sn-wrap{ position:relative; display:inline-flex; }
.sn-it{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:38px;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink-soft);
  font:600 14px 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.sn-it:hover,
.sn-it.sn-open{ background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); }
.sn-it:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.sn-learn,
.sn-learn:hover,
.sn-learn.sn-open{ padding:0 16px 0 12px; border-radius:999px; background:var(--success); color:var(--card); }
.sn-learn:hover,
.sn-learn.sn-open{ filter:brightness(1.08); }
.sn-learn .sn-play{ width:17px; height:17px; }
.sn-chev{ width:13px; height:13px; stroke-width:2.4; opacity:.7; }
.sn-sep{ width:1px; height:24px; margin:0 6px; background:var(--border); }
.sn-it.sn-me{ gap:8px; padding:0 12px 0 6px; }
.sn-me-name{ max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.sn-it.sn-guest{
  height:36px;
  padding:0 14px 0 8px;
  border:1.5px solid color-mix(in srgb, var(--sn-accent) 70%, transparent);
  border-radius:999px;
  color:var(--sn-accent);
}
.sn-it.sn-guest:hover,
.sn-it.sn-guest.sn-open{ background:color-mix(in srgb, var(--sn-accent) 14%, transparent); color:var(--sn-accent); }
@media (max-width:1000px){
  .sn-it[data-sn="settings"] .sn-lbl,
  .sn-it[data-sn="more"] .sn-lbl,
  .sn-it.sn-me .sn-lbl{ display:none; }
  .sn-it[data-sn="settings"],
  .sn-it[data-sn="more"]{ padding:0 10px; }
  .sn-it.sn-me{ padding:0 6px; }
}
@media (max-width:820px){ .sn-name{ display:none; } }
.sn-bot{ display:none; }
@media (max-width:699px){
  .sn-top{ display:none; }
  .sn-bot{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:900;
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
    padding:5px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--card) 92%, transparent);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    transition:transform .2s ease;
  }
html{ --sn-bot-h:50px; }       
  body:has(> .sn-bot){ padding-bottom:calc(var(--sn-bot-h) + 12px); }
  html.sn-typing .sn-bot{ transform:translateY(110%); }
}
.sn-nb{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  color:var(--ink-soft);
  font:600 10px 'Work Sans', sans-serif;
  text-decoration:none;
  cursor:pointer;
}
.sn-nb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; }
.sn-ic{ display:flex; align-items:center; justify-content:center; width:46px; height:26px; border-radius:999px; }
.sn-nb .sn-ico{ width:20px; height:20px; }
.sn-nb .sn-face{ width:22px; height:22px; }
.sn-nb .sn-ghost{ width:20px; height:20px; }
.sn-nb[aria-current="page"],
.sn-nb.sn-open{ color:var(--sn-accent); }
.sn-nb[aria-current="page"] .sn-ic,
.sn-nb.sn-open .sn-ic{ background:color-mix(in srgb, var(--sn-accent) 18%, transparent); }
.sn-nb-learn{ color:var(--ink); }
.sn-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  margin-top:-24px;
  border-radius:50%;
  background:var(--success);
  color:var(--card);
  box-shadow:0 4px 12px rgba(0,0,0,.3), 0 0 0 4px var(--bg);
}
.sn-circle .sn-play{ width:24px; height:24px; margin-left:2px; }
.sn-nb-learn.sn-open{ color:var(--ink); }
.sn-nb-learn.sn-open .sn-circle{ background:var(--ink-soft); }
.sn-box{
  box-sizing:border-box;
  padding:8px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  font-size:14px;
  text-align:left;
}
.sn-dd{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:950;
  width:max-content;
  min-width:260px;
  max-width:340px;
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.sn-dd.sn-left{ right:auto; left:0; }
.sn-dd[data-sn-box="settings"]{ width:330px; max-width:none; }
.sn-dd[data-sn-box="profile"]{ width:310px; max-width:none; }
.sn-dim{ position:fixed; inset:0; z-index:960; background:rgba(10, 12, 20, .45); }
html.sn-lock,
html.sn-lock body{ overflow:hidden; }
.sn-pick{
  position:fixed;
  left:50%;
  bottom:calc(var(--sn-bot-h, 62px) + 14px);
  z-index:970;
  width:250px;
  transform:translateX(-50%);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.sn-sheet{
  position:fixed;
  left:0;
  right:0;
bottom:var(--sn-kb, 0px);
  z-index:970;
  max-height:min(85dvh, calc(100dvh - var(--sn-kb, 0px) - 24px));
  overflow-y:auto;
  padding:14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  border-width:1px 0 0;
  border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.35);
}
.sn-side{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:970;
  width:86%;
  max-width:380px;
  overflow-y:auto;
  padding:14px 10px 24px;
  background:var(--bg);
  border-width:0 0 0 1px;
  box-shadow:-12px 0 40px rgba(0,0,0,.35);
}
.sn-phone-only{ display:none; }
.sn-sheet .sn-phone-only,
.sn-side .sn-phone-only{ display:block; }
.sn-h{
  margin:6px 10px 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.sn-side > .sn-h:first-child,
.sn-sheet > .sn-h:first-child{ margin:2px 10px 10px; color:var(--ink); font-size:20px; letter-spacing:0; text-transform:none; }
.sn-row{
  display:flex;
  align-items:center;
  gap:12px;
  box-sizing:border-box;
  width:100%;
  padding:10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font:600 15px 'Work Sans', sans-serif;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.sn-row:hover{ background:var(--bg); }
.sn-side .sn-row:hover{ background:var(--card); }
.sn-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sn-row small{ display:block; margin-top:1px; color:var(--muted); font-size:12px; font-weight:500; }
.sn-ri{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:none;
  border-radius:10px;
  background:color-mix(in srgb, var(--c, var(--sn-accent)) 18%, transparent);
  color:var(--c, var(--sn-accent));
}
.sn-ri.sn-solid{ background:var(--c); color:var(--card); }
.sn-row.sn-sub{ padding:7px 10px 7px 56px; font-size:14px; font-weight:500; }
.sn-count{
  box-sizing:border-box;
  min-width:20px;
  height:20px;
  margin-left:auto;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font:700 11px/20px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.sn-hr{ height:1px; margin:6px 4px; background:var(--border); }
.sn-note{ margin:6px 6px 0; color:var(--muted); font-size:12px; line-height:1.45; }
.sn-set{ padding:6px 10px 10px; }
.sn-set + .sn-set{ padding-top:12px; border-top:1px solid var(--border); }
.sn-l{
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sn-seg{ display:flex; gap:4px; padding:4px; background:var(--bg); border:1px solid var(--border); border-radius:11px; }
.sn-seg button{
  flex:1;
  padding:7px 6px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink-soft);
  font:600 13px 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.sn-seg button[aria-checked="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.18); }
.sn-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.sn-radio{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:8px 6px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--ink);
  font:500 14px 'Work Sans', sans-serif;
  text-align:left;
  cursor:pointer;
}
.sn-radio:hover{ background:var(--bg); }
.sn-radio:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sn-radio i{ width:16px; height:16px; flex:none; margin-top:1px; box-sizing:border-box; border:2px solid var(--border); border-radius:50%; }
.sn-radio[aria-checked="true"] i{ border:5px solid var(--info); }
.sn-radio b{ font-weight:500; }
.sn-radio small{ display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.4; }
.sn-tg{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; }
.sn-tg span{ flex:1; }
.sn-sw{ position:relative; flex:none; width:44px; height:26px; padding:0; border:0; border-radius:999px; background:var(--border); cursor:pointer; }
.sn-sw::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.sn-sw[aria-checked="true"]{ background:var(--success); }
.sn-sw[aria-checked="true"]::after{ transform:translateX(18px); }
.sn-sw:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:no-preference){ .sn-sw::after{ transition:transform .15s; } }
.sn-who{ display:flex; align-items:center; gap:12px; padding:8px 10px 10px; }
.sn-who .sn-face{ width:48px; height:48px; }
.sn-who-txt{ min-width:0; }
.sn-who-txt strong{ display:block; font-size:16px; overflow-wrap:anywhere; }
.sn-who-txt span{ color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.sn-pitch{ padding:8px 10px 4px; }
.sn-pitch h3{ margin:0 0 4px; font-size:17px; font-weight:700; }
.sn-pitch p{ margin:0 0 12px; color:var(--ink-soft); font-size:13px; line-height:1.45; }
.sn-perks{ margin:0 0 14px; padding:0; list-style:none; }
.sn-perks li{ position:relative; margin:0 0 9px; padding-left:30px; font-size:14px; line-height:1.4; }
.sn-perks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  border-radius:50%;
  background:color-mix(in srgb, var(--success) 22%, transparent);
  color:var(--success);
  font-size:12px;
  font-weight:700;
  line-height:20px;
  text-align:center;
}
.sn-cta{
  display:block;
  width:100%;
  padding:11px;
  border:0;
  border-radius:12px;
  background:var(--sn-accent);
  color:var(--card);
  font:700 15px 'Work Sans', sans-serif;
  cursor:pointer;
}
.sn-cta-sub{ margin:6px 0 10px !important; color:var(--muted) !important; font-size:12px !important; text-align:center; }
.sn-ghost-btn{
  display:block;
  width:100%;
  padding:9px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:600 14px 'Work Sans', sans-serif;
  cursor:pointer;
}
.sn-cta:focus-visible,
.sn-ghost-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sn-as-guest{ margin:8px 10px 6px; padding:8px 10px; border-radius:10px; background:var(--bg); color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.sn-as-guest strong{ color:var(--ink-soft); font-weight:600; }
.sn-box .siw-row{ padding:0 4px; }
.sn-box .siw-input{ box-sizing:border-box; font-size:15px; padding:10px 12px; }
.sn-box .siw-btn{ padding:10px; font-size:14px; border-radius:10px; }
.sn-box .siw-btn:not(.siw-btn-alt){ background:var(--sn-accent); color:var(--card); }
.rf-page header.practice-head,
.rf-page .rf-numbers{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.rf-bar .rf-spacer{ flex:1; }
@media (min-width:700px){
  .sn-top ~ .wrap.rf-page{ padding-top:2px; }
}
@media (max-width:699px){
  body:has(> .rf-page) > .sn-bot{ display:none; }
  body:has(> .rf-page){ padding-bottom:0; }
  html:has(> body > .rf-page){ --sn-bot-h:0px; }
}
header.practice-head{
  text-align:center;
}
h1{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:26px;
  margin:0;
  color:var(--ink);
}
p.subhead{
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  color:var(--ink-soft);
  margin:8px 0 0;
}
header.drill-title-block{
  text-align:center;
}
.wrap:not(.qp-page):has(> header.drill-title-block, > header.practice-head){ padding-top:16px; }
.wrap:not(.qp-page) > header:is(.drill-title-block, .practice-head){ margin-bottom:18px; }
@media (max-width:699px){
  .wrap:not(.qp-page) > header:is(.drill-title-block, .practice-head){ margin-bottom:14px; }
}
header.drill-title-block h1{
font-size:clamp(28px, 7.5vw, 40px);
  line-height:1.15;
}
.stage{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 1.5rem 0.75rem;
  text-align:center;
  margin-bottom:1.5rem;
  position:relative;
  transition:box-shadow 0.25s ease, border-color 0.25s ease;
}
.stage.stage-glow-correct{
  border-color:var(--success);
  box-shadow:0 0 0 3px var(--success-soft), 0 0 22px -6px var(--success);
}
.stage-grade-bar{
  position:absolute;
  top:0;
  left:var(--radius);
  right:var(--radius);
  height:3px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.stage-grade-bar-fill{
  width:0;
  height:100%;
  border-radius:0 0 3px 3px;
  background:transparent;
  transition:width 0.3s ease, background-color 0.3s ease;
}
@media (prefers-reduced-motion:reduce){
  .stage-grade-bar-fill{ transition:none; }
}
.stage-grade-bar[data-grade="f"] .stage-grade-bar-fill{ width:22%; background:var(--accent); }
.stage-grade-bar[data-grade="d"] .stage-grade-bar-fill{ width:40%; background:var(--grade-d); }
.stage-grade-bar[data-grade="c"] .stage-grade-bar-fill{ width:60%; background:var(--gold); }
.stage-grade-bar[data-grade="b"] .stage-grade-bar-fill{ width:80%; background:var(--grade-b); }
.stage-grade-bar[data-grade="a"] .stage-grade-bar-fill{ width:100%; background:var(--success); }
[data-theme="dark"] .stage-grade-bar{ height:2px; }
.stage-ignore-btn{
  position:absolute;
  top:14px;
  right:14px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:10px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:transparent;
  border:2px solid var(--ink-soft);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
}
.stage-ignore-btn:hover{ border-color:var(--ink); color:var(--ink); }
.stage-ignore-btn.active{
  border-color:var(--accent);
  color:var(--accent);
}
.stage-ignore-btn:disabled{
  opacity:0.4;
  cursor:default;
}
.stage-star-btn{
  position:absolute;
  bottom:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid var(--ink-soft);
  background:transparent;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.stage-star-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linejoin:round;
}
.stage-star-btn:hover{ border-color:var(--ink); color:var(--ink); }
.stage-star-btn.active{
  border-color:var(--accent);
  color:var(--accent);
}
.stage-star-btn.active svg{ fill:var(--accent); }
.stage-star-btn:disabled{
  opacity:0.4;
  cursor:default;
}
.row-unit-tag{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:10px;
  letter-spacing:0.03em;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  margin-left:8px;
  vertical-align:middle;
white-space:nowrap;
}
.row-vt{
  --chip-accent:var(--muted);
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:10px;
  letter-spacing:0.03em;
  color:var(--chip-accent);
  border:1px solid var(--chip-accent);
  border-radius:999px;
  padding:2px 8px;
  margin-left:8px;
  vertical-align:middle;
  white-space:nowrap;
}
.wg-vt{
  --chip-accent:var(--muted);
  display:block;
  width:fit-content;
  margin:0 auto 10px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--chip-accent);
  border:1px solid var(--chip-accent);
  border-radius:999px;
  padding:3px 12px;
  white-space:nowrap;
}
.wg-vt[hidden]{ display:none; }
.wg-vt-transitive{ --chip-accent:var(--accent); }
.wg-vt-intransitive{ --chip-accent:var(--teal); }
.row-vt-transitive{ --chip-accent:var(--accent); }
.row-vt-intransitive{ --chip-accent:var(--teal); }
@media (max-width:400px){
  .row-vt{ font-size:9px; padding:1px 5px; margin-left:5px; letter-spacing:0; }
}
.empty-state-message{
  text-align:center;
  padding:2.5rem 1.5rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  line-height:1.5;
}
.stage-count{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.65rem;
  min-height:16px;
}
.stage-word-wrap{
display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:120px;
  margin-bottom:2rem;
}
.stage-word{
  font-family:'Noto Sans JP', sans-serif;
font-weight:500;
  font-size:52px;
  line-height:1.1;
  margin:0;
  color:var(--ink);
  padding:0 6px;
}
.stage-word rt{
  font-family:'Work Sans', sans-serif;
  font-size:18px;
  font-weight:500;
  color:var(--accent);
  letter-spacing:0.02em;
  opacity:0;
  transition:opacity 0.15s;
}
.stage-word.show-furigana rt{
  opacity:1;
}
.stage-translation{
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  color:var(--ink-soft);
  margin:0 0 0.75rem;
  height:22px;
  line-height:22px;
  overflow:hidden;
  opacity:0;
  transition:opacity 0.15s;
}
.stage-translation.show-translation{
  opacity:1;
}
.ink-bar{
  height:3px;
  background:var(--accent);
  width:0%;
  border-radius:2px;
  margin-top:10px;
}
.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:1.1rem;
}
.icon-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.15s, transform 0.1s;
}
.icon-btn:hover{ background:var(--accent-soft); }
.icon-btn:active{ transform:scale(0.94); }
.icon-btn:active::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
.icon-btn.play{
  width:60px;
  height:60px;
  background:var(--ink);
  border-color:var(--ink);
  color:var(--card);
}
.icon-btn.play:hover{ background:var(--info); border-color:var(--info); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn.play svg{ width:22px; height:22px; }
.modebar{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.voicebar{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.voicebar[hidden]{ display:none; }
.pill{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.pill:hover{ border-color:var(--ink-soft); color:var(--ink); }
.pill.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--card);
}
.pill[hidden]{ display:none; }
.score-line{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--accent);
  margin:0;
}
.gapbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.gapbar label{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--muted);
}
.gapbar select{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
}
.gapbar select:hover{ border-color:var(--ink-soft); }
.gapbar select:focus{ outline:2px solid var(--accent-soft); outline-offset:1px; }
.list-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:0 2px 8px;
}
.list-head[hidden]{ display:none; }
.list-head h2{
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  margin:0;
}
.list-head span{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
}
.list-head .score-line{
  color:var(--accent);
}
ul.wordlist{
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
}
li.word-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
li.word-row:last-child{ border-bottom:none; }
li.word-row:hover{ background:var(--accent-soft); }
li.word-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 8px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
li.word-group-head[hidden]{ display:none; }
.word-group-title{
  font:600 14px 'Work Sans', sans-serif;
  color:var(--ink);
}
.word-group-count{
  font:500 12px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
@media (max-width:360px){
  li.word-row{ gap:5px; }
  .row-vt{ margin-left:0; }
}
li.word-row.current{ background:var(--accent-soft); }
.row-num{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
  width:24px;
  flex-shrink:0;
}
.row-word{
  font-family:'Noto Sans JP', sans-serif;
  font-size:19px;
  flex:1;
}
.row-play{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
}
.row-play svg{ width:13px; height:13px; }
.row-star{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  color:var(--ink-soft);
}
.row-star svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linejoin:round;
}
.row-star:hover{ border-color:var(--ink); color:var(--ink); }
.row-star.active{
  border-color:var(--accent);
  color:var(--accent);
}
.row-star.active svg{ fill:var(--accent); }
li.word-row.disabled .row-star{
  border-color:var(--disabled-border);
  color:var(--disabled-text);
}
li.word-row.disabled .row-star.active svg{ fill:var(--disabled-text); }
li.word-row.disabled{
  background:var(--disabled-bg);
}
li.word-row.disabled .row-num{
  color:var(--disabled-num);
}
li.word-row.disabled .row-word{
  color:var(--disabled-text);
  text-decoration:line-through;
}
li.word-row.disabled .row-play{
  border-color:var(--disabled-border);
  color:var(--disabled-text);
}
.row-toggle{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:10px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:transparent;
  border:2px solid var(--ink-soft);
  border-radius:999px;
  padding:5px 10px;
  cursor:pointer;
  flex-shrink:0;
  white-space:nowrap;
}
.row-toggle:hover{ border-color:var(--ink); color:var(--ink); }
li.word-row.disabled .row-toggle{
  border-color:var(--accent);
  color:var(--accent);
  border-width:2px;
}
.home-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  padding:2.25rem 1.5rem 1.75rem;
}
.home-hero-logo{
  position:absolute;
  top:50%;
  right:-18px;
  transform:translateY(-50%);
  width:190px;
  height:190px;
  pointer-events:none;
  user-select:none;
}
.home-hero-text{
  position:relative;
  z-index:1;
  max-width:calc(100% - 170px);
}
@media (max-width:640px){
  .home-hero-text{ max-width:100%; }
  .home-hero-logo{
    width:150px;
    height:150px;
    right:-34px;
    opacity:0.16;
  }
}
.unit-card.has-accent::after{
  content:'';
  position:absolute;
  top:0;
  left:16px;
  right:16px;
  height:3px;
  border-radius:0 0 3px 3px;
  background:var(--card-accent, var(--accent));
}
.wrap-wide{ max-width:900px; }
.unit-grid{
  display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (min-width:700px){
  .unit-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
.unit-grid[data-building]{
  visibility:hidden;
  animation:unit-grid-reveal 0s linear 2s forwards;
}
@keyframes unit-grid-reveal{ to{ visibility:visible; } }
.unit-card{
min-width:0;
  overflow-wrap:break-word;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  text-decoration:none;
  color:var(--ink);
  display:block;
  position:relative;
}
.unit-card[hidden]{ display:none !important; }
.unit-card:hover{ background:var(--accent-soft); border-color:var(--ink-soft); }
.unit-card.grade-f{ border-width:2px; border-color:var(--accent); }
.unit-card.grade-d{ border-width:2px; border-color:var(--grade-d); }
.unit-card.grade-c{ border-width:2px; border-color:var(--gold); }
.unit-card.grade-b{ border-width:2px; border-color:var(--grade-b); }
.unit-card.grade-a{ border-width:2px; border-color:var(--success); }
.card-badge{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--card);
  background:var(--ink);
  border-radius:8px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}
.unit-card.has-accent .card-badge:not(.card-badge-name){
  background:transparent;
  border:1.5px solid var(--card-accent, var(--ink));
  width:40px;
  height:40px;
  border-radius:11px;
}
.card-badge svg{ width:27px; height:27px; }
.card-title{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:14px;
  margin:0 0 3px;
}
.empty-note{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:24px;
  grid-column:1/-1;
}
.stat-card{
  cursor:default;
}
.stat-card:hover{
  background:var(--card);
  border-color:var(--border);
}
.unit-card.disabled{
  opacity:0.55;
  cursor:default;
}
.unit-card.disabled:hover{
  background:var(--card);
  border-color:var(--border);
}
.stat-label{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
}
.stat-value{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:26px;
  color:var(--ink);
  margin:0 0 4px;
}
.stat-value.stat-word{
  font-family:'Noto Sans JP', sans-serif;
}
.stat-sub{
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  color:var(--ink-soft);
  margin:0;
}
.copy-all-btn{
  display:block;
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  text-align:center;
  margin-bottom:1.5rem;
}
.copy-all-btn:hover{ background:var(--accent-soft); border-color:var(--ink-soft); }
.copy-all-btn.copied{
  border-color:var(--accent);
  color:var(--accent);
}
.theme-toggle-btn{
  position:fixed;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1000;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.theme-toggle-btn:hover{ background:var(--accent-soft); border-color:var(--ink-soft); }
.theme-toggle-btn svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (max-width:699px){
  .theme-toggle-btn{ width:34px; height:34px; }
  .theme-toggle-btn svg{ width:17px; height:17px; }
}
.wrap.wrap-home{
  padding-top:24px;
  --book:var(--teal);
  --home-panel:color-mix(in srgb, var(--book) 5%, var(--bg));
--band-a:62%;
  --band-b:34%;
}
:root[data-theme="dark"] .wrap.wrap-home{ --band-a:26%; --band-b:10%; }
.wrap-home .home-admin-link{
  align-self:center;
  margin:0 8px 8px auto;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  font:600 12px 'Work Sans', sans-serif;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.wrap-home .home-admin-link[hidden]{ display:none; }
.wrap-home .home-admin-link:hover{ background:var(--accent-soft); }
@media (max-width:640px){
  .wrap-home .home-admin-link{ padding:5px; margin:0 6px 7px auto; }
  .wrap-home .home-admin-link .hal-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}
html[data-book="book2"] .wrap.wrap-home{ --book:var(--plum); }
.wrap-home .home-hero{
  margin-bottom:0;
  padding-bottom:0;
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(circle at -8% 120%, color-mix(in srgb, var(--book) 40%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 60% -30%, color-mix(in srgb, var(--book) 23%, transparent) 0%, transparent 50%),
    var(--card);
  transition:background .35s;
}
.wrap-home .home-hero-logo{ right:-19px; }
@media (max-width:640px){
  .wrap-home .home-hero-logo{ right:-35px; }
}
.wrap-home .home-hero h1{ font-weight:700; }
@media (min-width:700px){
  .wrap-home .home-hero h1{
    font-size:min(42px, calc(8.3vw - 22px));
    letter-spacing:-0.01em;
    line-height:1.1;
  }
}
@media (max-width:699px){
  .wrap-home .home-hero h1{ font-size:min(26px, calc(7.1vw - 2.5px)); }
}
.wrap-home .home-tab-row{
  position:relative;
  z-index:1;
  max-width:calc(100% - 170px);
  display:flex;
  align-items:flex-end;
  margin-top:22px;
}
.wrap-home .home-book-tabs{ display:flex; gap:4px; }
.wrap-home .home-tab{
  position:relative;
  overflow:hidden;
  font:600 13px 'Work Sans', sans-serif;
  padding:10px 22px;
  border:1px solid transparent;
  border-bottom:0;
  border-radius:10px 10px 0 0;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .2s, background .35s;
}
.wrap-home .home-tab:hover{ color:var(--ink); }
.wrap-home .home-tab[aria-selected="true"]{
  background:var(--home-panel);
  border-color:var(--border);
  color:var(--book);
}
.wrap-home .home-tab[aria-selected="true"]::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--book);
}
.wrap-home .home-tab:focus-visible,
.wrap-home .week-strip:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
:is(.wrap-home .week-strip, .week-strip.sn-week){
  margin-left:auto;
  margin-bottom:8px;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
}
:is(.wrap-home .week-strip, .week-strip.sn-week):hover{
  border-color:var(--border);
  background:color-mix(in srgb, var(--card) 60%, transparent);
}
:is(.wrap-home, .sn-week) .ws-letters,
:is(.wrap-home, .sn-week) .ws-boxes{ display:flex; gap:5px; }
:is(.wrap-home, .sn-week) .ws-l{
  width:22px;
  text-align:center;
  font:500 10px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  line-height:1;
  color:var(--muted);
}
:is(.wrap-home, .sn-week) .ws-l.ws-today{ color:var(--book); font-weight:700; }
:is(.wrap-home, .sn-week) .ws-box{
  width:22px;
  height:22px;
  border-radius:6px;
  border:1.5px solid var(--border);
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
}
:is(.wrap-home, .sn-week) .ws-box svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
:is(.wrap-home, .sn-week) .ws-box.ws-done{ background:var(--success); border-color:var(--success); color:var(--card); }
:is(.wrap-home, .sn-week) .ws-box.ws-future{ border-style:dashed; border-color:color-mix(in srgb, var(--muted) 55%, transparent); background:transparent; }
:is(.wrap-home, .sn-week) .ws-box.ws-today{
  border-color:var(--book);
  border-width:2px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--book) 25%, transparent);
}
:is(.wrap-home, .sn-week) .ws-prompt{ display:none; }
:is(.wrap-home .week-strip, .week-strip.sn-week).ws-guest .ws-letters{ display:none; }
:is(.wrap-home .week-strip, .week-strip.sn-week).ws-guest .ws-prompt{
  display:block;
  font:600 10px 'Work Sans', sans-serif;
  line-height:1;
  white-space:nowrap;
color:var(--ink-soft);
}
.week-strip.sn-week{ margin:0 10px 8px; }
@media (min-width:760px){
  .wrap-home .week-strip{ margin-bottom:6px; }
  .wrap-home .ws-letters,
  .wrap-home .ws-boxes{ gap:6px; }
  .wrap-home .ws-l{ width:26px; font-size:11px; }
  .wrap-home .ws-box{ width:26px; height:26px; border-radius:7px; }
  .wrap-home .ws-box svg{ width:15px; height:15px; }
  .wrap-home .week-strip.ws-guest .ws-prompt{ font-size:11px; }
}
.wrap-home .home-panel{
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  background:var(--home-panel);
  padding:18px 16px 16px;
  transition:background .35s;
}
.wrap-home .home-qp-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
  margin-bottom:12px;
}
.wrap-home .unit-card.home-qp,
.wrap-home .unit-card.home-qp:hover{
  background:var(--card-accent);
  border-color:var(--card-accent);
}
.wrap-home .unit-card.home-qp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:112px;
  padding:14px 22px;
}
.wrap-home .unit-card.home-qp:hover{ filter:brightness(1.07); }
.wrap-home .unit-card.home-qp::after{ display:none; }
.wrap-home .home-qp-play{
  flex:0 0 auto;
  width:66px;
  height:66px;
  border-radius:17px;
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.22);
  position:relative;
}
.wrap-home .home-qp-play svg{ width:32px; height:32px; fill:var(--card-accent); }
.wrap-home .home-qp-book{
  display:flex;
  visibility:hidden;
  transform:scale(0);
  position:absolute;
  right:-9px;
  bottom:-9px;
  box-sizing:border-box;
  width:30px;
  height:30px;
  border-radius:50%;
  border:3px solid var(--card);
background:var(--plum);
  color:var(--card);
  font:800 16px/1 'Work Sans', sans-serif;
  align-items:center;
  justify-content:center;
}
html[data-book="book2"] .wrap-home .home-qp-book{ visibility:inherit; transform:none; }
.wrap-home .unit-card .home-qp-title{
  min-width:0;
  margin:0;
  font-weight:700;
  font-size:32px;
  line-height:1.1;
  white-space:nowrap;
  color:var(--card);
}
.wrap-home .unit-card.home-tile,
.wrap-home .unit-card.home-tile:hover{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--card-accent) var(--band-a), var(--card)),
    color-mix(in srgb, var(--card-accent) var(--band-b), var(--card)));
  border-color:var(--border);
  border-bottom:3px solid var(--card-accent);
}
.wrap-home .unit-card.home-tile{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:90px;
  padding:10px 14px;
}
.wrap-home .unit-card.home-tile:hover{ filter:brightness(1.08); }
.wrap-home .unit-card.home-tile::after{ display:none; }
.wrap-home .unit-card.home-tile .card-badge{
  flex:none;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}
.wrap-home .home-tile .card-badge svg{ width:48px; height:48px; }
.wrap-home .home-tile .card-title{
  min-width:0;
  margin:0;
  font-weight:600;
  font-size:clamp(16px, calc(7.14vw - 6.4px), 23px);
  line-height:1.2;
  white-space:nowrap;
  text-align:left;
}
.wrap-home .unit-card.home-qp:focus-visible,
.wrap-home .unit-card.home-tile:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wrap-home .ic-b2{ display:none; }
html[data-book="book2"] .wrap-home .ic-b1{ display:none; }
html[data-book="book2"] .wrap-home .ic-b2{ display:block; }
html[data-book="book2"] .wrap-home [data-book-visibility="book1-only"],
html:not([data-book="book2"]) .wrap-home [data-book-visibility="book2-only"]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .wrap-home .unit-card.home-tile,
  .wrap-home .unit-card.home-qp{
    transition:transform .18s cubic-bezier(.2, .7, .3, 1), filter .18s ease;
  }
  .wrap-home .home-tile .card-badge svg,
  .wrap-home .home-qp-play,
  .wrap-home .home-qp-play > svg,
  .wrap-home .week-strip{ transition:transform .18s cubic-bezier(.2, .7, .3, 1); }
.wrap-home .home-qp-book{ transition:transform .16s ease-in, visibility 0s linear .16s; }
  html[data-book="book2"] .wrap-home .home-qp-book{ transition:transform .28s cubic-bezier(.3, 1.7, .5, 1), visibility 0s; }
@media (hover:hover){
    .wrap-home .home-tile:hover .card-badge svg{ transform:scale(1.1) rotate(-3deg); }
    .wrap-home .home-qp:hover .home-qp-play{ transform:scale(1.06); }
    .wrap-home .home-qp:hover .home-qp-play > svg{ transform:translateX(3px); }
    .wrap-home .week-strip:hover .ws-box{ animation:ws-hop .34s ease-out backwards; }
    .wrap-home .week-strip:hover .ws-box:nth-child(2){ animation-delay:.035s; }
    .wrap-home .week-strip:hover .ws-box:nth-child(3){ animation-delay:.07s; }
    .wrap-home .week-strip:hover .ws-box:nth-child(4){ animation-delay:.105s; }
    .wrap-home .week-strip:hover .ws-box:nth-child(5){ animation-delay:.14s; }
    .wrap-home .week-strip:hover .ws-box:nth-child(6){ animation-delay:.175s; }
    .wrap-home .week-strip:hover .ws-box:nth-child(7){ animation-delay:.21s; }
  }
.wrap-home .unit-card.home-tile:active,
  .wrap-home .unit-card.home-qp:active,
  .wrap-home .week-strip:active{
    transform:translateY(1px) scale(.985);
    transition-duration:.06s;
  }
.wrap-home .unit-card.home-tile:active::before,
  .wrap-home .unit-card.home-qp:active::before,
  .wrap-home .week-strip:active::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
}
@keyframes ws-hop{ 40%{ transform:translateY(-4px); } }
.wrap-home .home-soon{
  grid-column:1 / -1;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:64px;
  padding:12px;
  border:1px dashed var(--border);
  border-radius:12px;
  font:600 14px 'Work Sans', sans-serif;
  color:var(--muted);
  text-align:center;
}
.wrap-home .home-soon-label{
  font:500 10px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
}
.wrap-home .home-soon-names{ display:flex; gap:8px; align-items:center; }
.wrap-home .home-soon-dot{ opacity:.6; }
html:not([data-book="book2"]) .wrap-home .home-soon:nth-child(2n of :not([data-book-visibility="book2-only"])),
html[data-book="book2"] .wrap-home .home-soon:nth-child(2n of :not([data-book-visibility="book1-only"])){
  grid-column:auto;
  flex-direction:column;
}
@media (min-width:700px){
  html:not([data-book="book2"]) .wrap-home .home-soon:nth-child(3n+1 of :not([data-book-visibility="book2-only"])),
  html[data-book="book2"] .wrap-home .home-soon:nth-child(3n+1 of :not([data-book-visibility="book1-only"])){
    grid-column:1 / -1;
    flex-direction:row;
  }
  html:not([data-book="book2"]) .wrap-home .home-soon:nth-child(3n+2 of :not([data-book-visibility="book2-only"])),
  html[data-book="book2"] .wrap-home .home-soon:nth-child(3n+2 of :not([data-book-visibility="book1-only"])){
    grid-column:span 2;
    flex-direction:column;
  }
  html:not([data-book="book2"]) .wrap-home .home-soon:nth-child(3n of :not([data-book-visibility="book2-only"])),
  html[data-book="book2"] .wrap-home .home-soon:nth-child(3n of :not([data-book-visibility="book1-only"])){
    grid-column:auto;
    flex-direction:column;
  }
}
@media (min-width:700px){
.wrap-home .home-panel{ padding-top:30px; }
  .wrap-home .home-qp-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); margin-bottom:26px; }
  .wrap-home .home-tile .card-badge svg{ width:calc(1.54vw + 37.2px); height:calc(1.54vw + 37.2px); }
  .wrap-home .home-tile .card-title{ font-size:calc(2.7vw - 0.9px); }
}
@media (min-width:961px){
  .wrap-home .home-tile .card-badge svg{ width:52px; height:52px; }
  .wrap-home .home-tile .card-title{ font-size:25px; }
}
@media (min-width:700px) and (max-width:900px){
  .wrap-home .unit-card .home-qp-title{ font-size:calc(6vw - 23px); }
}
@media (max-width:640px){
  .wrap.wrap-home{ padding-top:12px; }
  .wrap-home .home-folder{ margin:0 -12px; }
  .wrap-home .home-hero{ padding:20px 16px 0; }
  .wrap-home .home-tab-row{ max-width:100%; margin-top:14px; }
  .wrap-home .home-tab{ padding:9px 16px; }
  .wrap-home .home-panel{ padding:12px 11px 11px; }
.wrap-home .week-strip{ margin:0 0 5px auto; padding:3px 4px; gap:2px; align-self:flex-end; }
  .wrap-home .ws-letters,
  .wrap-home .ws-boxes{ gap:3px; }
  .wrap-home .ws-l{ width:17px; font-size:9px; }
  .wrap-home .ws-box{ width:17px; height:17px; border-radius:5px; }
  .wrap-home .ws-box svg{ width:11px; height:11px; }
  .wrap-home .ws-box.ws-today{ box-shadow:none; }
  .wrap-home .week-strip.ws-guest .ws-prompt{ font-size:9px; }
}
@media (max-width:369px){
  .wrap-home .home-tab-row{ flex-wrap:wrap; }
  .wrap-home .week-strip{ order:-1; flex-basis:100%; margin:-2px 0 10px -4px; align-items:flex-start; }
}
@media (max-width:520px){
  .wrap-home .home-qp-row{ gap:10px; margin-bottom:10px; }
  .wrap-home .unit-card.home-qp{ min-height:96px; padding:12px 16px; gap:16px; }
  .wrap-home .home-qp-play{ width:58px; height:58px; border-radius:15px; }
  .wrap-home .home-qp-play svg{ width:28px; height:28px; }
  .wrap-home .home-qp-book{ right:-8px; bottom:-8px; width:27px; height:27px; font-size:14px; }
  .wrap-home .unit-card .home-qp-title{ font-size:clamp(19px, calc(12.5vw - 21px), 28px); }
.wrap-home .unit-card.home-tile{ flex-direction:column; gap:6px; min-height:126px; padding:10px; }
  .wrap-home .home-tile .card-badge svg{ width:40px; height:40px; }
  .wrap-home .home-tile .card-title{ text-align:center; }
}
.siw-row{
  font-size:13px;
  color:var(--ink);
  margin-bottom:8px;
  word-break:break-word;
}
.siw-row.siw-sub{
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.4;
}
.siw-btn{
  display:block;
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  color:#fff;
  background:var(--accent);
  border:none;
  border-radius:8px;
  padding:8px 10px;
  margin-top:8px;
  cursor:pointer;
}
.siw-btn:hover{ opacity:0.9; }
.siw-btn-alt{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--border);
}
.siw-input{
  display:block;
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  padding:8px 10px;
  margin-top:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
}
.siw-error{
  font-size:11.5px;
  color:var(--accent);
  margin-top:6px;
  min-height:14px;
}
.acct-row{
  border-top:1px solid var(--border);
  padding:14px 0;
}
.acct-row:last-child{ padding-bottom:0; }
.acct-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.acct-head[hidden]{ display:none; }
.acct-label{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.acct-value{ font-size:15px; color:var(--ink); word-break:break-word; margin-top:2px; }
.acct-quiet{ font-size:13px; color:var(--ink-soft); }
.acct-note{ font-size:12px; line-height:1.4; color:var(--ink-soft); margin-top:3px; }
.acct-change{
  flex-shrink:0;
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:none;
  color:var(--ink);
  cursor:pointer;
}
.acct-change:hover{ background:var(--bg); }
.acct-form{ margin-top:10px; }
.acct-hint{ font-size:12.5px; line-height:1.45; color:var(--ink-soft); margin:0 0 4px; }
.acct-actions{ display:flex; gap:8px; }
.acct-actions[hidden]{ display:none; }
.acct-actions .siw-btn{ flex:1; }
.acct-done{
  font-size:13px;
  margin:12px 0 0;
  padding:8px 10px;
  border-radius:8px;
  background:var(--bg);
  border-left:3px solid var(--info);
}
.siw-row.siw-note{
  font-size:12px;
  line-height:1.4;
  padding:6px 8px;
  border-radius:8px;
  background:var(--bg);
  border-left:3px solid var(--info);
}
.as-overlay{
  position:fixed;
  inset:0;
bottom:var(--sn-kb, 0px);
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
z-index:2000;
  font-family:'Work Sans', sans-serif;
}
.as-card{
  position:relative;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
  padding:24px;
  width:100%;
  max-width:440px;
max-height:calc(100vh - 40px - var(--sn-kb, 0px));
  overflow-y:auto;
}
.as-close{
  position:absolute;
  top:10px;
  right:12px;
  background:none;
  border:none;
  color:var(--ink-soft);
  font-size:26px;
  line-height:1;
  padding:4px 8px;
  cursor:pointer;
  border-radius:8px;
}
.as-close:hover{ color:var(--ink); background:var(--bg); }
.as-title{
  font-size:19px;
  font-weight:700;
  margin:0 0 2px;
  color:var(--ink);
}
@media (max-width:480px){
  .as-card{ padding:20px 16px; }
}
.kana-practice-stage .stage-body{ padding-top:calc(1.5rem + 16px + 1.65rem); }
.stage-switch-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
@media (max-width:560px){
.stage-switches.stage-switches-stack{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
align-items:start;
    gap:4px;
    width:100%;
  }
  .stage-switches-stack .stage-switch{
    flex-direction:column;
    gap:5px;
    white-space:normal;
    font-size:12px;
    line-height:1.2;
    text-align:center;
  }
  .stage-switches-stack .stage-switch-label{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
}
@media (max-width:340px){
  .stage-switches-stack .stage-switch{ font-size:11.5px; }
}
.kana-settings{
  --m:var(--info);
  container-type:inline-size;
  margin-bottom:1.5rem;
}
.kana-settings .set-fold{
  padding:13px 16px;
  border-radius:14px;
  background:var(--card);
}
.kana-settings .set-fold.is-open{ border-radius:14px 14px 0 0; }
.kana-settings .set-fold .set-head{ white-space:nowrap; }
.kana-settings .set-fold .set-aside{ min-width:0; text-align:right; }
.kana-settings .set-fold-body{
  margin-top:-1px;
  padding:0 14px 14px;
  border-radius:0 0 14px 14px;
  background:var(--card);
}
.kana-settings .set-fold-body .set-hint{ font-size:13px; }
.set-row-name small{
  font:500 12px 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.kana-row-kana{
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kana-prompt-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
height:92px;
  margin-bottom:0.25rem;
}
.kana-prompt-word{ font-size:52px; }
.kana-prompt-gloss{
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  color:var(--muted);
  text-align:center;
  margin:.4rem 0 0;
  height:20px;
  line-height:20px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  flex:none;
}
.kana-answer-row{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}
.kana-input{
  font-family:'Work Sans', sans-serif;
  font-size:18px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  color:var(--ink);
  width:100%;
max-width:320px;
  text-align:center;
}
:root{ --answer-w:320px; }
@media (min-width:760px){
  :root{ --answer-w:520px; }
}
.kana-answer-row .kana-input:not(.eg-input){ max-width:var(--answer-w); }
.kana-input::placeholder{
  font-size:16px;
}
.kana-input, .cw-gap-input{ -webkit-appearance:none; appearance:none; }
.kana-input::-webkit-search-cancel-button, .cw-gap-input::-webkit-search-cancel-button,
.kana-input::-webkit-search-decoration, .cw-gap-input::-webkit-search-decoration{ display:none; -webkit-appearance:none; }
.kana-input:focus{ outline:2px solid var(--accent-soft); outline-offset:1px; border-color:var(--ink-soft); }
.kana-input:disabled{ opacity:0.7; }
.kana-feedback{ min-height:22px; margin:0 0 8px; }
.kana-stage-words .kana-feedback{ min-height:75px; }
.kana-practice-stage .kana-feedback{ min-height:91px; }
.verb-type-hint{
  height:22px;
  line-height:22px;
  margin:0 0 4px;
  overflow:hidden;
}
.conj-stage .kana-feedback{ min-height:75px; margin:0 0 10px; }
.sec-page{
  --sec:var(--plum);
  --sec-book:var(--teal);
  --sec-panel:color-mix(in srgb, var(--sec) 5%, var(--bg));
}
.sec-page[data-section="kanji"]{ --sec:var(--sakura); }
.sec-page[data-book="book2"]{ --sec-book:var(--plum); }
.wrap-wide.sec-page,
.wrap-wide.stats-page,
.wrap-wide.pp-page,
.wrap-wide.conj-wide{ max-width:1360px; }
.wrap-wide.pp-page{ padding-top:16px; }
.pp-page > header{ margin-bottom:0; }
@media (min-width:1100px){
  .sec-page .unit-grid{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
  .sec-page .wd-list{ grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); }
}
.sec-page .wd-search-row{ max-width:900px; }
.sec-head{
  position:relative;
  overflow:hidden;
  margin:0;
  padding:22px 22px 0;
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(circle at -8% 120%, color-mix(in srgb, var(--sec) 40%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 60% -30%, color-mix(in srgb, var(--sec) 23%, transparent) 0%, transparent 50%),
    var(--card);
}
.sec-top{
  display:flex;
  align-items:center;
  gap:16px;
}
.sec-icon{ flex:none; display:flex; }
.sec-icon svg{ width:58px; height:58px; }
.sec-name{ min-width:0; }
.sec-kicker{
  display:block;
  margin-bottom:2px;
  font:600 12px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sec-book);
}
.sec-page .sec-head h1,
.conj-hub .sec-head h1,
.hub-page .sec-head h1{
  margin:0;
  font:700 38px/1.1 'Work Sans', sans-serif;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.sec-prog{
  display:block;
  flex:1 1 100%;
  order:3;
  min-width:0;
  margin:-8px -10px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  color:inherit;
  text-decoration:none;
}
.sec-prog:hover{
  border-color:var(--border);
  background:color-mix(in srgb, var(--card) 60%, transparent);
}
.sec-prog:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.sec-prog-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:7px;
  font:600 13px 'Work Sans', sans-serif;
  white-space:nowrap;
}
.sec-prog-pct{
  font:500 14px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.sec-prog-track{
  display:block;
  height:8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
  overflow:hidden;
}
.sec-prog-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--aurora);
}
@media (max-width:699px){
  .sec-top{ flex-wrap:wrap; row-gap:14px; }
}
@media (min-width:700px){
  .sec-prog{
    position:absolute;
    right:22px;
    bottom:10px;
    width:min(270px, 32vw);
    margin:0;
    padding:6px 10px;
  }
}
@media (min-width:700px) and (max-width:900px){
  .sec-prog-row{ font-size:12px; }
  .sec-prog-pct{ font-size:13px; }
}
.sec-tabs{
  display:flex;
  align-items:flex-end;
  gap:4px;
  margin-top:20px;
}
@media (min-width:700px){
.sec-tabs{ padding-right:calc(min(270px, 32vw) + 12px); }
}
.sec-tab{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  border:1px solid transparent;
  border-bottom:0;
  border-radius:10px 10px 0 0;
  background:transparent;
  color:var(--ink-soft);
  font:600 13px 'Work Sans', sans-serif;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.sec-tab[hidden]{ display:none; }
.sec-tab svg{
  flex:none;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sec-tab:hover{ color:var(--ink); }
.sec-tab[aria-selected="true"]{
  background:var(--sec-panel);
  border-color:var(--border);
  color:var(--sec);
}
.sec-tab[aria-selected="true"]::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--sec);
}
.sec-tab:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
@media (min-width:700px) and (max-width:900px){
  .sec-tab{ padding:10px 14px; }
}
.sec-panel{
  padding:24px 16px 16px;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  background:var(--sec-panel);
}
.kanji-credit{
  margin:28px auto 0;
  max-width:640px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
.kanji-credit-tabs{ display:none; }
.kanji-credit-tabs[hidden], .kanji-credit-foot[hidden]{ display:none; }
@media (min-width:1200px){
  .kanji-credit-foot{ display:none; }
  .kanji-credit-tabs{
    display:block;
    position:absolute;
    bottom:6px;
    left:calc(22px + 290px);
    right:calc(22px + min(270px, 32vw) + 24px);
    margin:0;
    max-width:none;
    font-size:10.5px;
    line-height:1.35;
  }
  .sec-page:has(#cardsPanel[hidden]) .kanji-credit-tabs{ display:none; }
}
.sec-shortcuts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:26px;
}
.sec-short{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:0;
  min-height:84px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-bottom:3px solid var(--short);
  border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--short) 50%, var(--card)), color-mix(in srgb, var(--short) 24%, var(--card)));
  color:var(--ink);
  text-decoration:none;
}
:root[data-theme="dark"] .sec-short{
  background:linear-gradient(135deg, color-mix(in srgb, var(--short) 26%, var(--card)), color-mix(in srgb, var(--short) 10%, var(--card)));
}
.sec-short:hover{ filter:brightness(1.08); }
.sec-short:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.sec-short svg{ flex:none; width:42px; height:42px; }
.sec-short-title{
  font:600 21px/1.2 'Work Sans', sans-serif;
  white-space:nowrap;
}
.sec-units-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 10px;
}
.sec-units-label{
  margin:0;
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.sec-book-switch{
  display:inline-flex;
  gap:2px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
}
.sec-book-switch a{
  padding:4px 11px;
  border-radius:999px;
  color:var(--ink-soft);
  font:500 11px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
}
.sec-book-switch a:hover{ color:var(--ink); }
.sec-book-switch a[aria-current="page"]{
  background:var(--sec-book);
  color:var(--card);
  font-weight:600;
}
.sec-book-switch a:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.sec-tile{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  min-height:104px;
  padding:10px 16px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  text-decoration:none;
}
.sec-tile[hidden],
.sec-short[hidden]{ display:none; }
a.sec-tile:hover{ border-color:var(--sec); background:color-mix(in srgb, var(--sec) 7%, var(--card)); }
.sec-tile:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.sec-tile-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sec-tile-id{ min-width:0; }
.sec-tile-lbl{
  display:block;
  margin-bottom:3px;
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.sec-tile-num{
  display:block;
  font:700 52px/.9 'Work Sans', sans-serif;
  letter-spacing:-.03em;
  color:var(--sec);
  white-space:nowrap;
}
.sec-tile-count{
  flex:none;
  font:500 18px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  color:var(--ink-soft);
  white-space:nowrap;
}
.sec-tile-soon{ font-size:14px; }
.sec-tile.is-soon{ opacity:.55; }
.sec-tile-edge{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:color-mix(in srgb, var(--rank, var(--sec)) 22%, transparent);
}
.sec-tile-fill{
  display:block;
  height:100%;
  background:var(--rank, var(--sec));
}
.sec-tile.rank-f{ --rank:var(--accent); }
.sec-tile.rank-d{ --rank:var(--grade-d); }
.sec-tile.rank-c{ --rank:var(--gold); }
.sec-tile.rank-b{ --rank:var(--grade-b); }
.sec-tile.rank-a{ --rank:var(--success); }
.sec-tile.is-ranked,
a.sec-tile.is-ranked:hover{
  border:2px solid var(--rank);
  background:linear-gradient(135deg, color-mix(in srgb, var(--rank) 16%, var(--card)), var(--card));
}
:root[data-theme="dark"] .sec-tile.is-ranked,
:root[data-theme="dark"] a.sec-tile.is-ranked:hover{
  background:linear-gradient(135deg, color-mix(in srgb, var(--rank) 20%, var(--card)), color-mix(in srgb, var(--rank) 6%, var(--card)));
}
a.sec-tile.is-ranked:hover{ filter:brightness(1.05); }
.sec-tile.is-ranked{ padding:9px 15px 13px; }
.sec-tile.is-ranked .sec-tile-num{ color:var(--rank); }
.sec-rank{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:2px solid var(--rank);
  border-radius:10px;
  background:color-mix(in srgb, var(--rank) 16%, var(--card));
  color:var(--rank);
  font:700 20px 'Work Sans', sans-serif;
}
.sec-extras-tile[hidden]{ display:none; }
.sec-extras-tile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
  min-height:104px;
  padding:12px 16px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink-soft);
  text-decoration:none;
}
.sec-extras-tile:hover{ border-style:solid; border-color:var(--sec); color:var(--ink); }
.sec-extras-tile:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.sec-extras-title{ font:600 18px/1.2 'Work Sans', sans-serif; }
.sec-extras-sub{
  font:500 13px/1.3 'Work Sans', sans-serif;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.extras-stats{ margin-top:28px; }
.extras-stat{
  width:100%;
  font:inherit;
  color:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.extras-stat:hover{ border-color:var(--ink-soft); }
.extras-stat:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.sec-tile-num.sec-tile-name{
  overflow:hidden;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.01em;
}
@media (max-width:560px){
.sec-grid.sec-sets{ grid-template-columns:minmax(0, 1fr); }
  .sec-extras-tile{ min-height:96px; padding:10px 12px; }
  .sec-extras-title{ font-size:16px; }
  .sec-tile-num.sec-tile-name{ font-size:22px; }
  .sec-head{ padding:18px 16px 0; }
  .sec-top{ gap:12px; }
  .sec-icon svg{ width:46px; height:46px; }
  .sec-page .sec-head h1,
  .conj-hub .sec-head h1,
  .hub-page .sec-head h1{ font-size:clamp(24px, calc(8vw - 2px), 30px); }
  .sec-tabs{ margin-top:16px; }
  .sec-tab{ padding:9px 12px; gap:6px; }
  .sec-panel{ padding:14px 11px 11px; }
  .sec-shortcuts{ gap:10px; margin-bottom:18px; }
  .sec-short{ flex-direction:column; gap:6px; min-height:110px; padding:10px; }
  .sec-short svg{ width:36px; height:36px; }
  .sec-short-title{ font-size:clamp(15px, calc(5vw - 1px), 18px); text-align:center; }
  .sec-grid{ gap:10px; }
  .sec-tile{ min-height:96px; padding:8px 12px 12px; }
  .sec-tile.is-ranked{ padding:7px 11px 11px; }
  .sec-tile-lbl{ font-size:12px; }
  .sec-tile-num{ font-size:46px; }
  .sec-tile-count{ font-size:16px; }
  .sec-rank{ width:30px; height:30px; border-radius:9px; font-size:17px; }
}
@media (max-width:370px){
  .sec-tab svg{ display:none; }
  .sec-tab{ padding:9px 10px; font-size:12px; }
  .sec-tile-lbl{ font-size:11px; }
  .sec-tile-num{ font-size:40px; }
  .sec-tile-count{ font-size:14px; }
}
.conj-hub{
  --sec:var(--gold);
  --sec-panel:color-mix(in srgb, var(--sec) 5%, var(--bg));
}
.conj-hub .sec-panel{ padding:22px 16px 16px; }
.conj-tabs .sec-tab{ align-items:center; gap:9px; }
.set-seg.conj-reg button{ flex-direction:row; align-items:baseline; gap:8px; padding:10px 14px; font-size:15px; white-space:nowrap; }
.set-seg.conj-reg button small{ font:500 13px 'Noto Sans JP', sans-serif; }
#conjPanel > .conj-reg{ width:min(340px, 100%); margin:0 auto 16px; }
@media (max-width:359px){
  .set-seg.conj-reg button{ padding:8px 6px; gap:6px; }
  .set-seg.conj-reg button small{ font-size:12px; }
}
.conj-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (min-width:700px){
  .conj-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1200px){
  .conj-wide .conj-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
}
.conj-tile{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"name mark" "end end" "foot foot";
  column-gap:10px;
  min-width:0;
  padding:16px 18px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  text-decoration:none;
}
.conj-tile:hover{
  border-color:var(--card-accent);
  background:color-mix(in srgb, var(--card-accent) 7%, var(--card));
}
.conj-tile:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.conj-name{
  grid-area:name;
  min-width:0;
  overflow:hidden;
  font:700 30px/1.1 'Work Sans', sans-serif;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
}
.conj-mark{
  grid-area:mark;
  align-self:start;
  display:flex;
  margin-top:3px;
}
.conj-mark:empty{ display:none; }
.conj-end{
  grid-area:end;
  min-width:0;
  overflow:hidden;
  margin-top:4px;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:600;
  font-size:26px;
  line-height:1.2;
  color:var(--conj-ink);
  white-space:nowrap;
}
.conj-tile{ --conj-ink:var(--card-accent); }
:root:not([data-theme="dark"]) .conj-tile{
  --conj-ink:color-mix(in srgb, var(--card-accent) 65%, var(--ink));
}
.conj-foot{
  grid-area:foot;
  align-self:end;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding-top:12px;
}
.conj-eg{
  min-width:0;
  overflow:hidden;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:500;
  font-size:15px;
  line-height:1.3;
  color:var(--ink-soft);
  white-space:nowrap;
}
.conj-arr{
  margin:0 5px;
  font-family:'Work Sans', sans-serif;
  color:var(--muted);
}
.conj-eg b{ font-weight:600; color:var(--ink); }
.conj-hl{ color:var(--conj-ink); }
.conj-unit{
  flex:none;
  font:600 12px 'Work Sans', sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:right;
  white-space:nowrap;
}
.conj-rv{
  display:block;
  margin-top:1px;
  font-size:10px;
}
.conj-dot{ display:none; }
.conj-edge{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:color-mix(in srgb, var(--card-accent) 20%, transparent);
}
.conj-fill{
  display:block;
  width:0;
  height:100%;
  background:var(--card-accent);
}
.conj-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:2px solid var(--rank);
  border-radius:9px;
  background:color-mix(in srgb, var(--rank) 16%, var(--card));
  color:var(--rank);
  font:700 17px 'Work Sans', sans-serif;
}
.conj-rank.rank-f{ --rank:var(--accent); }
.conj-rank.rank-d{ --rank:var(--grade-d); }
.conj-rank.rank-c{ --rank:var(--gold); }
.conj-rank.rank-b{ --rank:var(--grade-b); }
.conj-rank.rank-a{ --rank:var(--success); }
.conj-new{
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font:600 10px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
color:var(--ink-soft);
}
.conj-extras{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
  padding:16px 18px 18px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink-soft);
  text-decoration:none;
}
.conj-extras[hidden]{ display:none; }
.conj-extras:hover{ border-style:solid; border-color:var(--gold); color:var(--ink); }
.conj-extras:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.conj-extras-name{
  min-width:0;
  overflow:hidden;
font:700 30px/1.1 'Work Sans', sans-serif;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.conj-extras-sub{
  overflow:hidden;
  font:500 13px/1.3 'Work Sans', sans-serif;
  color:var(--ink-soft);
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:560px){
  .conj-hub .sec-panel{ padding:14px 11px 11px; }
  .conj-grid{ gap:10px; }
  .conj-tile{
    grid-template-areas:"name name" "end mark" "foot foot";
    column-gap:6px;
    padding:13px 12px 16px;
  }
  .conj-name{ font-size:22px; }
  .conj-mark{ align-self:center; margin-top:4px; }
  .conj-end{ font-size:23px; }
  .conj-rank{ width:26px; height:26px; border-radius:8px; font-size:15px; }
  .conj-new{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--gold);
    font-size:0;
  }
  .conj-src{ display:none; }
  .conj-eg{ font-size:14px; }
  .conj-extras{ padding:13px 12px 16px; }
  .conj-extras-name{ font-size:22px; }
  .conj-foot{ gap:6px; padding-top:10px; }
  .conj-unit{ font-size:10px; }
}
@media (max-width:370px){
  .conj-tile{ padding:12px 10px 15px; }
  .conj-eg{ font-size:13px; }
  .conj-foot{ flex-direction:column; align-items:flex-start; gap:5px; }
  .conj-unit{ text-align:left; }
  .conj-rv{ display:inline; margin:0; font-size:inherit; }
  .conj-dot{ display:inline; }
}
.conj-rules-ask{
  margin:0 0 14px;
  text-align:center;
  font:600 16px 'Work Sans', sans-serif;
  color:var(--info);
}
#conjPanel.is-rules .conj-mark,
#conjPanel.is-rules .conj-end,
#conjPanel.is-rules .conj-unit,
#conjPanel.is-rules .conj-edge{ display:none; }
#conjPanel.is-rules .conj-grid{ grid-template-columns:minmax(0, 1fr); gap:8px; }
@media (min-width:700px){
  #conjPanel.is-rules .conj-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1100px){
  .conj-wide #conjPanel.is-rules .conj-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
#conjPanel.is-rules .conj-tile{
  grid-template-rows:auto auto;
  grid-template-areas:"name go" "foot go";
  align-items:center;
  padding:11px 16px 11px 14px;
  border-left:5px solid var(--card-accent);
  border-radius:10px;
}
#conjPanel.is-rules .conj-tile::after{
  content:"Rules \203A";
  grid-area:go;
  font:600 15px 'Work Sans', sans-serif;
  color:var(--conj-ink);
  white-space:nowrap;
}
#conjPanel.is-rules .conj-name,
#conjPanel.is-rules .conj-extras-name{ font-size:21px; }
#conjPanel.is-rules .conj-foot{ padding-top:2px; }
#conjPanel.is-rules .conj-eg{ font-size:15px; }
#conjPanel.is-rules .conj-src{ display:inline; }
#conjPanel.is-rules .conj-extras{
  position:relative;
  gap:2px;
  padding:11px 74px 11px 14px;
  border-radius:10px;
}
#conjPanel.is-rules .conj-extras::after{
  content:"Rules \203A";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font:600 15px 'Work Sans', sans-serif;
  color:var(--gold);
}
.conj-tabs:has(.conj-tab-mix){ padding-right:0; }
@media (max-width:560px){
  .conj-tabs .sec-tab svg{ display:none; }
}
.conj-mix-row .conj-set-body{ container-type:inline-size; }
.conj-gear-rows .conj-mix-row{ grid-template-columns:minmax(0, 1fr); gap:10px; }
.mix-twin{ --mix-gap:8px; }
.mix-grid{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--mix-gap);
}
.mix-extras{ margin-top:var(--mix-gap); }
@container (max-width:1059px){
  .mix-grid + .mix-grid{ margin-top:var(--mix-gap); }
  .mix-grid + .mix-grid > :is(.mix-corner, .mix-h){ display:none; }
}
@container (min-width:1060px){
  .mix-twin{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:28px;
    align-items:start;
  }
  .mix-twin > #mixGrid{ display:contents; }
  .mix-grid{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mix-grid:first-child{ grid-row:1 / span 2; }
  .mix-extras{ grid-column:2; }
}
.mix-h{
  align-self:end;
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
}
.mix-name{
  display:flex;
  align-items:baseline;
  align-self:center;
  gap:8px;
  min-width:0;
  padding:4px 4px 4px 12px;
  border-left:3px solid var(--c);
}
.mix-name b{ font:600 18px/1.2 'Work Sans', sans-serif; color:var(--ink); white-space:nowrap; }
.mix-name small{ font:500 13.5px 'Work Sans', sans-serif; color:var(--ink-soft); white-space:nowrap; }
.mix-pick, .mix-xrow{ --mix-ink:var(--c); }
:root:not([data-theme="dark"]) :is(.mix-pick, .mix-xrow){
  --mix-ink:color-mix(in srgb, var(--c) 65%, var(--ink));
}
.mix-pick{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:0;
  min-height:48px;
  padding:3px 5px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.mix-pick:hover{ border-color:color-mix(in srgb, var(--c) 60%, var(--border)); }
.mix-pick:focus-visible, .mix-xrow:focus-visible, .mix-fold:focus-visible{ outline:2px solid var(--m, var(--info)); outline-offset:2px; }
.mix-pick[aria-pressed="true"]{
  padding:2px 4px;
  border:2px solid var(--c);
  background:color-mix(in srgb, var(--c) 14%, var(--card));
}
.mix-pick small{ font:500 12px 'Work Sans', sans-serif; color:var(--ink-soft); }
.mix-pick.mix-wide{ grid-column:span 2; flex-direction:row; gap:10px; }
.mix-eg{
  max-width:100%;
  overflow:hidden;
  font:500 21px/1.2 'Noto Sans JP', sans-serif;
  color:var(--ink);
  white-space:nowrap;
}
.mix-hl{ color:var(--mix-ink); }
.mix-none{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border:1px dashed var(--border);
  border-radius:10px;
  color:var(--muted);
  font:500 14px 'Work Sans', sans-serif;
}
.mix-rk{
  position:absolute;
  left:10px;
  top:6px;
  font:500 13px/1 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.mix-pick[aria-pressed="true"] > .mix-rk{ left:9px; top:5px; }
.mix-tick{
  position:absolute;
  top:-7px;
  right:-7px;
  display:none;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--c);
  color:var(--card);
}
.mix-tick svg{ width:11px; height:11px; }
[aria-pressed="true"] > .mix-tick{ display:flex; }
.mix-fold{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:600 16px 'Work Sans', sans-serif;
  text-align:left;
  cursor:pointer;
}
.mix-fold:hover{ border-color:color-mix(in srgb, var(--m, var(--info)) 60%, var(--border)); }
.mix-fold b{ flex:none; color:var(--m, var(--info)); font:600 14px 'Work Sans', sans-serif; }
.mix-fold-body{ margin-top:var(--mix-gap); }
.mix-xrow{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.mix-xrow:hover{ border-color:color-mix(in srgb, var(--c) 60%, var(--border)); }
.mix-xrow[aria-pressed="true"]{
  padding:7px 13px;
  border:2px solid var(--c);
  background:color-mix(in srgb, var(--c) 12%, var(--card));
}
.mix-xrow + .mix-xrow{ margin-top:6px; }
.mix-dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--c); }
.mix-xrow b{ font:600 16px 'Work Sans', sans-serif; }
.mix-xrow small{ font:500 13px 'Work Sans', sans-serif; color:var(--ink-soft); }
.mix-xrow .mix-eg{ margin-left:auto; font-size:19px; }
.mix-box{ flex:none; width:17px; height:17px; border:1.5px solid var(--border); border-radius:50%; }
.mix-xrow[aria-pressed="true"] > .mix-box{ display:none; }
.mix-xrow > .mix-tick{ position:static; flex:none; }
.conj-mix .set-aside{ white-space:nowrap; }
.mix-units-fold{ display:none; }
@container (min-width:1060px){
  .conj-mix .unit-tiles{ grid-template-columns:repeat(13, minmax(0, 1fr)); gap:8px; }
  #mixPanel #unitToggleRow .unit-tile b{ font-size:23px; }
}
@media (max-width:560px){
  .conj-mix:not(.units-open) .mix-units-fold{ display:flex; }
  .conj-mix:not(.units-open) :is(#unitToggleRow, .mix-unit-links){ display:none; }
}
.set-card.conj-mix{ overflow:clip; }
.conj-mix .set-actions{
  position:sticky;
  bottom:var(--sn-bot-h, 0px);
  z-index:2;
  padding-block:12px;
  background:var(--card);
  box-shadow:0 0 0 100vmax var(--card), 0 -1px 0 100vmax var(--border);
  clip-path:inset(-1px -100vmax 0);
}
#mixPanel #startBtn{ padding-block:13px; }
#mixPanel #startHint:not(.is-ask){ margin-top:-2px; font-size:13px; }
.mix-grid[hidden], .mix-name[hidden], .mix-pick[hidden], .mix-none[hidden],
.mix-xrow[hidden], .mix-tick[hidden], .mix-fold[hidden], .mix-fold-body[hidden]{ display:none; }
@container (max-width:619px){
  .mix-name{ flex-direction:column; align-items:stretch; gap:1px; }
}
@container (max-width:500px){
  .mix-twin{ --mix-gap:5px; }
  .mix-grid{ grid-template-columns:minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mix-name{ padding:4px 0 4px 7px; }
  .mix-name b{ font-size:13.5px; white-space:normal; }
  .mix-name small{ font-size:11.5px; }
  .mix-pick, .mix-none{ min-height:46px; }
  .mix-pick{ padding:6px 2px; }
  .mix-pick[aria-pressed="true"]{ padding:5px 1px; }
  .mix-pick small{ font-size:10.5px; }
  .mix-eg{ font-size:14.5px; }
  .mix-rk{ left:6px; top:4px; font-size:11.5px; }
  .mix-pick[aria-pressed="true"] > .mix-rk{ left:5px; top:3px; }
  .mix-fold{ padding:8px 11px; font-size:14.5px; }
  .mix-fold b{ font-size:13px; }
  .mix-xrow{ padding:8px 11px; gap:8px; }
  .mix-xrow[aria-pressed="true"]{ padding:7px 10px; }
  .mix-xrow b{ font-size:14px; }
  .mix-xrow small{ font-size:11px; }
  .mix-xrow .mix-eg{ font-size:14.5px; }
}
@media (max-width:370px){
.set-card.conj-mix{ padding:12px; }
  .mix-twin{ --mix-gap:4px; }
  .mix-grid{ grid-template-columns:minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mix-name{ padding-left:5px; }
  .mix-name b{ font-size:12.5px; }
  .mix-pick{ padding-inline:1px; }
  .mix-pick[aria-pressed="true"]{ padding-inline:0; }
}
.conj-stats .sec-panel{ padding:22px 20px 20px; }
.cs-pick{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:0 2px 18px;
}
.cs-pick-label{
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.cs-select{
  min-width:0;
  max-width:100%;
  padding:8px 34px 8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  font:600 16px 'Work Sans', sans-serif;
  cursor:pointer;
}
.cs-select:hover{ border-color:var(--sec); }
.cs-select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.conj-stats .grade-summary{ gap:14px; margin-bottom:6px; }
.conj-stats .grade-summary-letter{ font-size:28px; font-weight:700; }
.conj-stats .grade-summary-track{ height:9px; }
.conj-stats .grade-summary-caption{ font-size:14px; }
.conj-stats .breakdown-heading{
  margin:22px 2px 8px;
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.conj-stats .breakdown-row{
  grid-template-columns:12rem 1.4ch minmax(48px, 1fr) 13.5rem;
  padding:11px 14px;
}
.conj-stats .breakdown-label{ font-size:15px; }
.conj-stats .breakdown-letter{ font-size:16px; }
.conj-stats .breakdown-caption{ font-size:13px; }
.conj-stats #gradeGrid{ margin-top:24px; }
@media (max-width:560px){
.conj-stats .sec-head h1{ font-size:clamp(20px, calc(11.5vw - 17px), 30px); }
  .conj-stats .sec-panel{ padding:14px 11px 11px; }
  .conj-stats .grade-summary-letter{ font-size:24px; }
  .conj-stats .grade-summary-caption{ font-size:13px; }
  .conj-stats .breakdown-row{ grid-template-columns:minmax(0, 1fr) 1.4ch; padding:10px 12px; }
  .conj-stats .breakdown-label{ font-size:14px; }
  .conj-stats .breakdown-caption{ font-size:12px; text-align:left; }
  .cs-select{ font-size:15px; }
}
.hub-page{
  --sec:var(--teal);
  --sec-panel:color-mix(in srgb, var(--sec) 5%, var(--bg));
}
.hub-page[data-section="games"]{ --sec:var(--accent); }
.hub-page[data-section="kana"]{ --sec:var(--rust); }
.hub-page[data-section="books"]{ --sec:var(--indigo); }
.hub-page .sec-panel{ padding:20px 16px 16px; }
.hub-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
}
.hub-grid[hidden]{ display:none; }
@media (min-width:560px){
  .hub-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:760px){
  .hub-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .hub-grid.hub-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.hub-tile{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:18px 18px 20px;
  border:1px solid var(--border);
  border-bottom:3px solid var(--card-accent);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  text-decoration:none;
}
.hub-tile:hover{
  border-color:var(--card-accent);
  background:color-mix(in srgb, var(--card-accent) 7%, var(--card));
}
.hub-tile:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.hub-tile-icon{ flex:none; display:flex; }
.hub-tile-icon svg{ width:48px; height:48px; }
.hub-tile-words{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.hub-tile-title{
  margin:0;
  font:700 21px/1.2 'Work Sans', sans-serif;
  letter-spacing:-.01em;
}
.hub-tile-desc{
  margin:0;
  font:400 14px/1.4 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
@media (max-width:559px){
  .hub-tile{ flex-direction:row; align-items:center; gap:14px; padding:14px 14px 15px; }
  .hub-tile-icon svg{ width:42px; height:42px; }
  .hub-tile-title{ font-size:18px; }
  .hub-tile-desc{ font-size:13px; }
}
.hub-tab-kana{
  font-family:'Noto Sans JP', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--muted);
}
.sec-tab[aria-selected="true"] .hub-tab-kana{ color:var(--ink-soft); }
.sec-head-plain{ padding-bottom:22px; }
.sec-head-plain + .sec-panel{ border-top:1px solid var(--border); }
.sec-head-plain .sec-name{ flex:1 1 0; min-width:0; }
.sec-panel .wd{ display:block; }
.wd-search-row[hidden],
.wd-body[hidden]{ display:none; }
.wd-search-row{
  position:sticky;
  top:8px;
  z-index:5;
  display:flex;
  gap:8px;
  margin:0 0 14px;
}
.wd-search{ position:relative; flex:1; min-width:0; }
.wd-input{
  width:100%;
  padding:14px 44px 14px 46px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  font:500 17px 'Work Sans', 'Noto Sans JP', sans-serif;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:0 6px 18px rgba(0, 0, 0, .16);
}
.wd-input::-webkit-search-cancel-button{ display:none; }
.wd-input::placeholder{ color:var(--muted); font-weight:400; }
.wd-input:focus{
  border-color:var(--sec);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sec) 22%, transparent), 0 6px 18px rgba(0, 0, 0, .16);
}
.wd-mag{
  position:absolute;
  left:15px;
  top:50%;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  fill:none;
  stroke:var(--muted);
  stroke-width:2.2;
  stroke-linecap:round;
  pointer-events:none;
}
.wd-input:focus ~ .wd-mag{ stroke:var(--sec); }
.wd-clear{
  position:absolute;
  right:8px;
  top:50%;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.wd-clear[hidden]{ display:none; }
.wd-clear:hover{ background:color-mix(in srgb, var(--ink) 10%, transparent); color:var(--ink); }
.wd-clear:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.wd-clear svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.wd-filter{ position:relative; flex:none; display:flex; }
.wd-fbtn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink-soft);
  font:600 14px 'Work Sans', 'Noto Sans JP', sans-serif;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0, 0, 0, .16);
}
.wd-fbtn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wd-fbtn:hover,
.wd-fbtn[aria-expanded="true"]{ color:var(--ink); border-color:color-mix(in srgb, var(--sec) 60%, var(--border)); }
.wd-fbtn.is-on{ color:var(--ink); border-color:var(--sec); background:color-mix(in srgb, var(--sec) 16%, var(--card)); }
.wd-fbtn.is-on svg{ color:var(--sec); }
.wd-fbtn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wd-fmenu{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  z-index:6;
  min-width:220px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  box-shadow:0 12px 32px rgba(0, 0, 0, .3);
}
.wd-fmenu[hidden]{ display:none; }
.wd-fmenu-t{
  padding:6px 10px 4px;
  font:500 10px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.wd-fitem{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font:500 14px 'Work Sans', 'Noto Sans JP', sans-serif;
  text-align:left;
  cursor:pointer;
}
.wd-fitem:hover,
.wd-fitem:focus-visible{ background:color-mix(in srgb, var(--sec) 12%, transparent); outline:none; }
.wd-fitem:disabled{ opacity:.4; cursor:default; background:transparent; }
.wd-tick{ flex:none; width:16px; color:var(--sec); font-weight:700; }
.wd-fc{ margin-left:auto; font:500 12px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; color:var(--muted); }
.wd-clear-f{
  margin-left:8px;
  padding:2px 6px;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--ink-soft);
  font:500 12px 'Work Sans', sans-serif;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
}
.wd-clear-f:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wd-clear-f:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.sec-book-switch button{
  padding:4px 11px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font:500 11px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
}
.sec-book-switch button:hover{ color:var(--ink); }
.sec-book-switch button[aria-current="true"]{ background:var(--sec-book); color:var(--card); font-weight:600; }
.sec-book-switch button:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.wd .sec-units-row{ flex-wrap:wrap; }
.wd .sec-units-label{ display:flex; align-items:center; }
.wd .sec-book-switch button[data-book="book1"]{ --sec-book:var(--teal); }
.wd .sec-book-switch button[data-book="book2"]{ --sec-book:var(--plum); }
.wd-tile{ justify-content:flex-start; gap:8px; min-height:118px; }
.wd-set .sec-tile-id{ min-width:0; flex:1 1 auto; }
.wd-set .sec-tile-name{ display:block; white-space:nowrap; }
@media (max-width:560px){ .wd-grid .wd-set{ grid-column:1 / -1; } }
.wd-count{ text-align:right; }
.wd-count small{ display:block; margin-top:1px; font-size:12px; color:var(--muted); }
.wd-peek{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font:400 13px 'Noto Sans JP', sans-serif;
  color:var(--muted);
}
.wd-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
}
@media (min-width:700px){
  .wd-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.wd-list > li{ min-width:0; }
.wd-row:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .wd .wd-row:hover{ border-color:var(--sec); background:color-mix(in srgb, var(--sec) 7%, var(--card)); }
}
.wd-row.is-first{ border-color:color-mix(in srgb, var(--sec) 55%, var(--border)); }
.wd-row .wc-tile-word{ font-weight:600; font-size:20px; }
.wd-also{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12.5px;
  color:var(--ink-soft);
}
.wd-where{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.wd-unit{
  font:500 11px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--sec);
}
.wd-book{
  padding:1px 7px;
  border:1px solid color-mix(in srgb, var(--wd-book, var(--teal)) 55%, transparent);
  border-radius:999px;
  font:500 10px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--wd-book, var(--teal));
}
.wd-book[data-book="book2"]{ --wd-book:var(--plum); }
.wd-book.wd-extra{ --wd-book:var(--ink-soft); }
.wd mark{
  border-radius:3px;
  padding:0 1px;
  background:color-mix(in srgb, var(--gold) 38%, transparent);
  color:inherit;
}
.wd-res-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 10px;
}
.wd-res-n{
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.wd-res-enter{ font:400 12.5px 'Work Sans', sans-serif; color:var(--muted); }
.wd-more{ margin:12px 2px 0; font-size:13px; color:var(--ink-soft); }
.wd-grp{
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 2px 10px;
  font:700 17px 'Work Sans', sans-serif;
}
.wd-units-row + .wd-grp{ margin-top:4px; }
.wd-grp::after{ content:''; order:1; flex:1; height:1px; background:var(--border); }
.wd-grp a{ color:var(--sec); text-decoration:none; }
.wd-grp a:hover{ text-decoration:underline; }
.wd-grp-c{ order:2; font:500 12px 'Work Sans', sans-serif; color:var(--muted); }
.wd-none{
  padding:34px 16px 38px;
  border:1px dashed var(--border);
  border-radius:12px;
  text-align:center;
  font-size:14px;
  color:var(--ink-soft);
}
.wd-none b{ display:block; margin-bottom:6px; font:600 17px 'Work Sans', sans-serif; color:var(--ink); }
.wd-none a{ color:var(--sec); }
@media (max-width:560px){
  .sec-head-plain{ padding-bottom:16px; }
.wd-input{ font-size:16px; padding:12px 42px; }
  .wd-mag{ left:13px; width:18px; height:18px; }
  .wd-fbtn{ padding:0 13px; }
  .wd-fbtn .wd-ft{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .wd-fbtn.is-on .wd-ft{ position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; }
  .wd-tile{ min-height:110px; gap:6px; }
  .wd-peek{ font-size:12px; }
  .wd-row{ gap:10px; padding:9px 12px; }
  .wd-row .wc-tile-word{ font-size:18px; }
  .wd-res-enter{ display:none; }
}
@media (max-width:370px){
  .wd-row .wc-tile-kanji{ display:none; }
}
.wu-view{
--wu-new:var(--muted);
}
.wu-r-a{ --gc:var(--success); }
.wu-r-b{ --gc:var(--grade-b); }
.wu-r-c{ --gc:var(--gold); }
.wu-r-d{ --gc:var(--grade-d); }
.wu-r-f{ --gc:var(--accent); }
.wu-r-new{ --gc:var(--wu-new); }
.wd-unit-view[hidden]{ display:none; }
.wu-head{
  margin:0 2px 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.wu-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:-4px 0 10px -6px;
  padding:4px 8px 4px 4px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--ink-soft);
  font:600 13px 'Work Sans', sans-serif;
  cursor:pointer;
}
.wu-back:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.wu-back:focus-visible{ outline:2px solid var(--sec); outline-offset:1px; }
.wu-back svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wu-head-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 16px;
}
.wu-name{ min-width:0; }
.wu-kicker{
  display:block;
  margin-bottom:2px;
  font:600 12px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sec);
}
.wu-title{
  margin:0;
  font:700 30px/1.1 'Work Sans', sans-serif;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.wu-title:focus{ outline:none; }
.wu-switch{
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.wu-arrow{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
}
.wu-arrow[hidden]{ display:none; }
.wu-arrow:hover:not(:disabled){ border-color:var(--sec); color:var(--sec); }
.wu-arrow:disabled{ opacity:.35; cursor:default; }
.wu-arrow:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wu-arrow svg,
.wu-pick svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wu-arrow svg{ width:18px; height:18px; }
.wu-pick{ position:relative; display:flex; }
.wu-select{
  -webkit-appearance:none;
  appearance:none;
  height:40px;
  max-width:100%;
  padding:0 34px 0 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  font:600 14px 'Work Sans', sans-serif;
  cursor:pointer;
}
.wu-select:hover{ border-color:var(--sec); }
.wu-select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wu-pick svg{
  position:absolute;
  right:11px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  color:var(--ink-soft);
  pointer-events:none;
}
.wu-prog{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.wu-prog-bar{
  flex:1;
  max-width:340px;
  height:6px;
  border-radius:999px;
  background:color-mix(in srgb, var(--sec) 20%, transparent);
  overflow:hidden;
}
.wu-prog-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--sec);
}
.wu-prog-text{
  margin:0;
  font:500 13px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  white-space:nowrap;
}
.wu-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 14px;
  margin:0 2px 14px;
}
.wu-tools-l{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  min-width:0;
}
.wu-tools-title{
  margin:0;
  font:600 13px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.wu-seg{
  display:inline-flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
}
.wu-seg button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 13px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font:500 13px 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.wu-seg button:hover{ color:var(--ink); }
.wu-seg button.on{
  background:var(--card);
  color:var(--ink);
  font-weight:600;
  box-shadow:0 1px 4px rgba(0, 0, 0, .18);
}
.wu-seg button:focus-visible{ outline:2px solid var(--sec); outline-offset:1px; }
.wu-seg-n{
  font:500 12px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.wu-seg-star{ width:14px; height:14px; fill:var(--gold); }
.wu-rf{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}
.wu-rf-label{
  margin-right:4px;
  font:500 10px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.wu-rf-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px 3px 3px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font:500 12px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.wu-rf-btn:hover:not(:disabled){ border-color:var(--border); color:var(--ink); }
.wu-rf-btn:focus-visible{ outline:2px solid var(--sec); outline-offset:1px; }
.wu-rf-btn:disabled{ opacity:.35; cursor:default; }
.wu-rf-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:1.5px solid color-mix(in srgb, var(--gc) 70%, transparent);
  border-radius:999px;
  color:var(--gc);
  font:700 11px 'Work Sans', sans-serif;
}
.wu-r-new .wu-rf-dot{
  width:auto;
  padding:0 6px;
  font:800 10px 'Nunito', 'Work Sans', sans-serif;
  letter-spacing:.06em;
}
.wu-rf-btn.on{
  border-color:color-mix(in srgb, var(--gc) 60%, var(--border));
  background:color-mix(in srgb, var(--gc) 14%, var(--card));
  color:var(--ink);
}
.wu-rf-btn.on .wu-rf-dot{ background:var(--gc); border-color:var(--gc); color:var(--card); }
.wu-rf-clear{
  padding:4px 8px;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--ink-soft);
  font:500 12px 'Work Sans', sans-serif;
  cursor:pointer;
}
.wu-rf-clear:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.wu-rf-clear:focus-visible{ outline:2px solid var(--sec); outline-offset:1px; }
.wu-empty{
  padding:34px 16px;
  border:1px dashed var(--border);
  border-radius:12px;
  text-align:center;
  font-size:14px;
  color:var(--ink-soft);
}
.wu-empty[hidden]{ display:none; }
.wu-empty b{
  display:block;
  margin-bottom:4px;
  font:600 16px 'Work Sans', sans-serif;
  color:var(--ink);
}
.wu-empty .wu-rf-clear{ margin-top:4px; font-size:13px; }
.wu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(212px, 1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.wu-grid[hidden]{ display:none; }
.wu-tile{
  position:relative;
  overflow:hidden;
  min-width:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.wu-tile:hover,
.wu-tile:focus-within{
  border-color:var(--sec);
  background:color-mix(in srgb, var(--sec) 7%, var(--card));
}
.wu-tile.current{ border-color:var(--sec); }
.wu-open{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  padding:14px 14px 12px 18px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.wu-open:focus-visible{
  outline:2px solid var(--sec);
  outline-offset:-3px;
}
.wu-top{
  display:flex;
  align-items:flex-start;
  gap:4px;
}
.wu-word{
  flex:1;
  min-width:0;
  font:600 28px/1.2 'Noto Sans JP', sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wu-rank{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-top:4px;
  border-radius:999px;
  background:var(--gc);
  color:var(--card);
  font:700 12px 'Work Sans', sans-serif;
}
.wu-rank.wu-rank-new{
  width:auto;
  background:transparent;
  color:var(--wu-new);
  font:800 11px 'Nunito', 'Work Sans', sans-serif;
  letter-spacing:.06em;
}
.wu-mid{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  min-height:22px;
}
.wu-kanji{
  min-width:0;
  font:400 16px 'Noto Sans JP', sans-serif;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wu-num{
  flex:none;
  font:600 11.5px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--muted);
}
.wu-foot{
  display:flex;
  margin-top:10px;
  padding:10px 60px 0 0;
  border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.wu-en{
  flex:1;
  min-width:0;
  font:400 15px/1.3 'Work Sans', sans-serif;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wu-edge{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:color-mix(in srgb, var(--gc) 55%, transparent);
  pointer-events:none;
}
.wu-r-new .wu-edge{ background:color-mix(in srgb, var(--wu-new) 18%, transparent); }
.wu-marks{
  position:absolute;
  right:10px;
  bottom:8px;
  display:flex;
  gap:2px;
}
.wu-mk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.wu-mk svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wu-mk:hover{ background:color-mix(in srgb, var(--ink) 9%, transparent); color:var(--ink); }
.wu-mk:focus-visible{ outline:2px solid var(--sec); outline-offset:1px; }
.wu-mk-star.on{ color:var(--gold); }
.wu-mk-star.on svg{ fill:var(--gold); }
.wu-mk-ignore.on{ color:var(--ink-soft); }
.wu-mk:not(.on){ opacity:0; }
.wu-tile:hover .wu-mk,
.wu-tile:focus-within .wu-mk{ opacity:1; }
@media (hover:none){
  .wu-mk:not(.on){ opacity:.45; }
}
@media (prefers-reduced-motion:no-preference){
  .wu-mk{ transition:opacity .12s; }
  .wu-tile{ transition:border-color .12s, background-color .12s; }
}
.wu-tile.is-star{ border-color:color-mix(in srgb, var(--gold) 55%, var(--border)); }
.wu-tile.is-star .wu-edge{ background:var(--gold); }
.wu-tile.is-ign{ border-style:dashed; background:transparent; }
.wu-tile.is-ign .wu-word,
.wu-tile.is-ign .wu-kanji,
.wu-tile.is-ign .wu-en,
.wu-tile.is-ign .wu-num,
.wu-tile.is-ign .wu-rank,
.wu-tile.is-ign .wu-edge{ opacity:.45; }
@media (max-width:699px){
  .wu-switch{ flex:1 1 100%; }
  .wu-pick{ flex:1; min-width:0; }
  .wu-select{ width:100%; }
}
@media (max-width:560px){
.wrap-wide.wu-has-unit{ padding-left:16px; padding-right:16px; }
  .wu-has-unit .sec-panel{ padding:12px 10px 10px; }
  .wu-title{ font-size:26px; }
  .wu-rank.wu-rank-new{ font-size:10px; letter-spacing:.04em; }
  .wu-prog{ margin-top:12px; }
  .wu-prog-bar{ max-width:none; }
  .wu-tools-title{ display:none; }
  .wu-tools-l{ order:2; width:100%; }
  .wu-rf{ width:100%; justify-content:space-between; }
  .wu-rf-label{ display:none; }
  .wu-rf-btn{ gap:4px; padding:3px 6px 3px 3px; }
  .wu-seg{ width:100%; }
  .wu-seg button{ flex:1; padding:6px 8px; }
  .wu-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .wu-open{ padding:11px 10px 9px 13px; }
  .wu-word{ font-size:24px; }
  .wu-rank{ width:22px; height:22px; margin-top:3px; font-size:11px; }
  .wu-kanji{ font-size:14.5px; }
.wu-marks .wu-mk-star{ display:none; }
  .wu-foot{ margin-top:8px; padding:8px 30px 0 0; }
  .wu-en{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:14px;
    line-height:1.25;
    white-space:normal;
  }
  .wu-marks{ right:6px; bottom:5px; }
}
@media (max-width:370px){
  .wu-word{ font-size:22px; }
  .wu-seg-n{ display:none; }
}
.conj-stage .stage-body{ padding-top:1.5rem; }
.conj-stage .stage-switches{ flex-wrap:nowrap; }
@media (max-width:420px){
  .conj-stage .stage-switches{ gap:14px; }
}
@media (max-width:360px){
  .conj-stage .stage-foot{ padding-left:8px; padding-right:8px; }
  .conj-stage .stage-switches{ gap:9px; }
  .conj-stage .stage-switch{ gap:5px; font-size:11.5px; }
  .conj-stage .stage-switch-track{ width:28px; }
  .conj-stage .stage-switch[aria-pressed="true"] .stage-switch-track::after{ transform:translateX(10px); }
}
@media (min-width:760px){
  .wrap.conj-drill{ max-width:820px; }
}
@media (min-width:760px) and (min-height:780px){
  .conj-stage .form-chip-row{ margin-bottom:14px; }
  .conj-stage .form-chip{ font-size:13.5px; padding:5px 12px; }
  .conj-stage .kana-prompt-wrap{ height:108px; }
  .conj-stage .kana-prompt-word{ font-size:70px; }
  .conj-stage .stage-word rt{ font-size:20px; }
  .conj-stage .stage-translation{ margin-bottom:10px; }
  .conj-stage .kana-answer-row .kana-input{ height:54px; font-size:22px; }
  .conj-stage .kana-input::placeholder{ font-size:18px; }
  .conj-stage .verb-type-hint{ font-size:15px; }
}
.hint-row{ position:relative; display:flex; justify-content:center; align-items:center; min-height:32px; margin:0 0 8px; }
.hint-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--ink-soft); font:600 14px 'Work Sans', sans-serif; cursor:pointer; }
.hint-btn[hidden]{ display:none; }
.hint-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hint-btn svg[hidden]{ display:none; }
.hint-btn:hover{ color:var(--ink); border-color:var(--ink-soft); }
.hint-btn[aria-expanded="true"]{ border-color:var(--info); background:var(--info-soft); color:var(--ink); }
.hint-btn[aria-disabled="true"]{ opacity:.5; cursor:default; }
.hint-btn[aria-disabled="true"]:hover{ color:var(--ink-soft); border-color:var(--border); }
.hint-tip{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:7; padding:7px 11px; border-radius:8px; background:var(--ink); color:var(--bg); font:600 13px 'Work Sans', sans-serif; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.35); pointer-events:none; }
.hint-tip::after{ content:''; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:var(--ink); }
.hint-cover{ position:absolute; z-index:5; left:10px; right:10px; display:flex; flex-direction:column; box-sizing:border-box; padding:12px 16px; border:1px solid color-mix(in srgb, var(--info) 45%, var(--border)); border-radius:14px; background:color-mix(in srgb, var(--info) 6%, var(--card)); box-shadow:0 10px 30px rgba(0,0,0,.35); text-align:left; }
.hint-cover[hidden]{ display:none; }
.hint-cover:not(.is-tall){ justify-content:center; left:50%; right:auto; transform:translateX(-50%); width:min(600px, calc(100% - 20px)); gap:10px; }
.hint-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.hint-cover:not(.is-tall) .hint-head{ justify-content:center; margin-bottom:0; }
.hint-cover:not(.is-tall) .hint-x{ position:absolute; top:10px; right:10px; }
.hc-say{ margin:0; font:600 14px 'Work Sans', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); outline:none; }
.hint-x{ display:flex; flex:none; width:30px; height:30px; padding:0; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--ink-soft); cursor:pointer; }
.hint-x svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.hint-x:hover{ color:var(--ink); }
.hc-mid{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hint-cover.is-tall .hc-mid{ align-items:stretch; }
.hs-list{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 10px; margin:0; padding:0; list-style:none; }
.hs{ display:flex; align-items:center; gap:6px; }
.hs-n{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--ink-soft); color:var(--card); font:700 14px 'Work Sans', sans-serif; flex:none; }
.hs-arrow{ display:flex; color:var(--muted); }
.hs-arrow svg{ width:22px; height:22px; }
.hint-cover:not(.is-tall) .form-chip{ font-size:18px; padding:7px 16px; }
.hc-foot{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:16px; }
.hc-back{ width:300px; padding:12px 22px; border:0; border-radius:999px; background:var(--info); color:var(--card); font:700 16px 'Work Sans', sans-serif; cursor:pointer; }
.hc-rules{ width:300px; padding:12px 22px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--ink); font:600 16px 'Work Sans', sans-serif; cursor:pointer; }
.hc-rules:hover{ border-color:var(--ink-soft); }
.hf{ display:flex; flex-direction:column; gap:14px; }
.hf-step{ display:flex; gap:10px; align-items:center; }
.hf-step:has(.rl-chart, .hg){ align-items:flex-start; }
.hf-body{ flex:1; min-width:0; }
.hf-say{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; font:500 15px 'Work Sans', sans-serif; color:var(--ink); }
.hf-one .hf-say{ justify-content:center; text-align:center; }
.hint-cover:not(.is-tall) .hf-say{ font-size:17px; }
.hf-change{ font:600 16px 'Noto Sans JP', sans-serif; }
.hf-key{ font-weight:700; white-space:nowrap; }
.hf-term{ color:var(--say); }
.hf-add{ padding:1px 6px; border-radius:6px; background:color-mix(in srgb, var(--say) 22%, transparent); color:var(--ink); }
.rl-chart{ display:flex; flex-direction:column; gap:4px; width:max-content; max-width:100%; margin:10px auto 0; }
.rl-row{ display:grid; grid-template-columns:150px 30px minmax(0, 1fr); align-items:center; column-gap:10px; padding:3px 12px; border-radius:9px; }
.rl-row:nth-child(odd){ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.rl-chart:not(.rl-no-eg) .rl-row{ grid-template-columns:150px 30px 120px minmax(0, 1fr); }
.rl-from{ justify-self:end; display:flex; align-items:baseline; gap:6px; font:600 21px/1.3 'Noto Sans JP', sans-serif; color:var(--ink); white-space:nowrap; }
.rl-from small{ order:-1; font:600 10.5px 'Work Sans', sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.rl-arrow{ display:flex; color:var(--muted); }
.rl-arrow svg{ width:24px; height:24px; }
.rl-to{ font:600 21px/1.3 'Noto Sans JP', sans-serif; color:var(--gold); white-space:nowrap; }
.rl-eg{ font:500 14px 'Noto Sans JP', sans-serif; color:var(--muted); white-space:nowrap; }
.rl-irr .rl-from, .rl-irr .rl-arrow, .rl-irr .rl-to{ color:var(--crimson); }
.rl-blank{ display:inline-block; width:64px; height:26px; vertical-align:middle; border:1.5px dashed var(--border); border-radius:7px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.rl-row.rl-hit{ background:color-mix(in srgb, var(--gold) 22%, transparent); box-shadow:inset 0 0 0 1.5px var(--gold); }
.rl-note{ margin:10px 2px 0; font:500 13.5px 'Work Sans', sans-serif; color:var(--muted); text-align:center; }
.rl-irr-key{ color:var(--crimson); font-weight:600; }
.hg{ display:grid; grid-template-columns:repeat(5, auto); justify-content:center; gap:4px 22px; margin-top:10px; }
.hg-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); }
.hg-c{ display:inline-flex; align-items:center; gap:4px; font:600 17px 'Noto Sans JP', sans-serif; color:var(--ink); white-space:nowrap; }
.hg-c small{ font:600 9px 'Work Sans', sans-serif; text-transform:uppercase; color:var(--muted); }
.hg-c svg{ width:14px; height:14px; color:var(--muted); }
.hg-to{ color:var(--info); }
.hg-irr > span:first-child, .hg-irr .hg-to{ color:var(--crimson); }
.hg-c.hg-hit{ margin:-2px -6px; padding:2px 6px; border-radius:7px; background:color-mix(in srgb, var(--gold) 26%, transparent); box-shadow:inset 0 0 0 1.5px var(--gold); }
.hg-eg{ margin-left:6px; font:500 12.5px 'Noto Sans JP', sans-serif; color:var(--muted); }
.hg.hg-egs{ grid-template-columns:repeat(3, auto); }
@media (max-width:560px){
  .hint-cover{ left:6px; right:6px; padding:12px; }
  .hint-cover:not(.is-tall){ width:calc(100% - 12px); }
  .hint-cover:not(.is-tall) .form-chip{ font-size:16px; padding:6px 12px; }
  .hc-back, .hc-rules{ width:100%; }
  .hc-foot{ align-items:stretch; }
  .hg{ grid-template-columns:repeat(3, auto); gap:4px 14px; }
  .hg-c{ font-size:16px; }
  .rl-row, .rl-chart:not(.rl-no-eg) .rl-row{ grid-template-columns:minmax(0, 1fr) 24px minmax(0, 1fr); }
  .rl-chart:not(.rl-no-eg) .rl-row{ grid-template-areas:"from arrow to" "eg eg eg"; }
  .rl-chart:not(.rl-no-eg) .rl-from{ grid-area:from; }
  .rl-chart:not(.rl-no-eg) .rl-arrow{ grid-area:arrow; }
  .rl-chart:not(.rl-no-eg) .rl-to{ grid-area:to; }
  .rl-chart:not(.rl-no-eg) .rl-eg{ grid-area:eg; justify-self:center; font-size:12.5px; }
  .rl-from, .rl-to{ font-size:19px; }
  .rl-arrow svg{ width:20px; height:20px; }
  .rl-chart{ width:100%; }
.hg.hg-egs{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; }
  .hg-egs .hg-c{ flex-wrap:wrap; row-gap:0; }
  .hg-egs .hg-eg{ flex-basis:100%; margin-left:0; }
  .built-list{ flex-direction:column; align-items:flex-start; gap:6px; }
  .built-list li{ display:grid; grid-template-columns:18px auto auto; gap:8px; }
  .built-list li:first-child{ padding-left:26px; }
}
@media (max-width:370px){
  .hint-cover:not(.is-tall) .hs-list{ gap:6px 5px; }
  .hint-cover:not(.is-tall) .form-chip{ font-size:13px; padding:4px 9px; gap:4px; }
  .hint-cover:not(.is-tall) .form-chip svg{ width:12px; height:12px; }
  .hint-cover:not(.is-tall) .hs-n{ width:20px; height:20px; font-size:12px; }
  .hint-cover:not(.is-tall) .hs{ gap:4px; }
  .hint-cover:not(.is-tall) .hs-arrow svg{ width:15px; height:15px; }
  .rl-from, .rl-to{ font-size:17px; }
  .rl-from small{ font-size:9px; }
  .rl-row{ padding:3px 4px; column-gap:6px; }
}
html.rl-lock, html.rl-lock body{ overflow:hidden; }
.rl-dim{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.6); }
.rl-dialog{ position:fixed; z-index:1301; left:50%; top:16px; transform:translateX(-50%); box-sizing:border-box; width:min(820px, calc(100% - 24px)); overflow:auto; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.rl-card{ padding:18px 20px 16px; border:1px solid var(--border); border-radius:14px; background:var(--card); text-align:left; }
.rl-form + .rl-form{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.rl-card-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; padding-right:44px; position:relative; }
.rl-card-head h2{ margin:0; font:700 26px 'Work Sans', sans-serif; color:var(--ink); outline:none; }
.rl-kana{ margin-left:6px; font:600 24px 'Noto Sans JP', sans-serif; color:var(--rl-c, var(--gold)); }
.rl-unit{ margin-left:auto; font:600 12px 'Work Sans', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.rl-x{ position:absolute; top:-4px; right:0; display:flex; width:34px; height:34px; padding:0; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--ink-soft); cursor:pointer; }
.rl-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.rl-x:hover{ color:var(--ink); }
.rl-types{ width:min(520px, 100%); margin:0 auto 16px; }
.rl-types button{ font-size:15px; padding:10px 8px; }
.rl-card .hf{ gap:18px; }
.rl-card .hf-say{ font-size:18px; }
.rl-card .hf-change{ font-size:21px; }
.rl-card .form-chip{ font-size:15px; padding:5px 12px; }
.rl-card .hs-n{ width:30px; height:30px; font-size:15px; }
.rl-card .hg{ gap:10px 30px; margin-top:14px; }
.rl-card .hg-more{ gap:10px 30px; margin-top:12px; padding-top:12px; }
.rl-card .hg-c{ font-size:25px; gap:6px; }
.rl-card .hg-c svg{ width:18px; height:18px; }
.rl-card .hg-c small{ font-size:11px; }
.rl-card .hg-eg{ margin-left:10px; font-size:16px; }
.rl-card .rl-chart{ gap:6px; margin-top:14px; }
.rl-card .rl-row, .rl-card .rl-chart:not(.rl-no-eg) .rl-row{ grid-template-columns:190px 34px 150px minmax(0, 1fr); padding:5px 14px; }
.rl-card .rl-from, .rl-card .rl-to{ font-size:28px; }
.rl-card .rl-from small{ font-size:12px; }
.rl-card .rl-arrow svg{ width:28px; height:28px; }
.rl-card .rl-eg{ font-size:17px; }
.rl-card .rl-note{ font-size:15px; }
.rl-card .hf-change{ white-space:nowrap; }
.rl-card .rl-to{ color:var(--rl-c, var(--gold)); }
.rl-fold summary{ display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; box-sizing:border-box; margin:12px auto 0; padding:9px 16px; border:1px solid color-mix(in srgb, var(--info) 55%, transparent); border-radius:10px; background:color-mix(in srgb, var(--info) 12%, transparent); font:600 15px 'Work Sans', sans-serif; color:var(--info); cursor:pointer; list-style:none; }
.rl-fold summary::-webkit-details-marker{ display:none; }
.rl-fold summary::after{ content:""; width:7px; height:7px; margin-top:-3px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); }
.rl-fold[open] summary::after{ margin-top:3px; transform:rotate(-135deg); }
.rl-fold summary:hover{ background:color-mix(in srgb, var(--info) 22%, transparent); }
.rl-fold summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.rl-vars{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0; padding:12px 0 0; border-top:1px dashed var(--border); }
.rl-main, .rl-var > summary{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; box-sizing:border-box; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb, var(--ink) 4%, transparent); font:500 17px 'Work Sans', sans-serif; color:var(--ink); }
.rl-main{ margin:14px 0 0; }
.rl-var > summary{ cursor:pointer; list-style:none; }
.rl-var > summary::-webkit-details-marker{ display:none; }
.rl-var > summary:hover{ border-color:var(--ink-soft); }
.rl-var > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.rl-var > summary::after{ content:""; flex:none; width:8px; height:8px; margin:-3px 4px 0; border:solid var(--ink-soft); border-width:0 2px 2px 0; transform:rotate(45deg); }
.rl-var[open] > summary::after{ margin-top:3px; transform:rotate(-135deg); }
.rl-var[open] > summary{ border-radius:10px 10px 0 0; }
.rl-var > .hf{ padding:14px; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; }
.rl-var-name{ font:700 17px 'Work Sans', sans-serif; color:var(--ink); }
.rl-ex{ margin-left:auto; color:var(--ink-soft); font-weight:500; }
.rl-ex [lang="ja"]{ color:var(--ink); font-weight:600; }
.rl-card .hf-step{ align-items:flex-start; }
.rl-trace{ margin:6px 0 0; font:500 20px 'Noto Sans JP', sans-serif; color:var(--ink); }
.rl-trace b{ font-weight:600; color:var(--say); }
.hf-one .rl-trace{ text-align:center; }
@media (max-width:560px){
  .rl-dialog{ width:calc(100% - 16px); }
  .rl-card .hf-say{ font-size:16px; }
  .rl-card .hf-change{ font-size:18px; }
  .rl-card .hg{ gap:10px 14px; }
  .rl-card .hg-c{ font-size:21px; }
  .rl-card .hg-eg{ margin-left:0; font-size:14px; }
  .rl-card .rl-row, .rl-card .rl-chart:not(.rl-no-eg) .rl-row{ grid-template-columns:minmax(0, 1fr) 26px minmax(0, 1fr); padding:5px 8px; }
  .rl-card .rl-from, .rl-card .rl-to{ font-size:22px; }
  .rl-card .rl-eg{ font-size:14px; }
  .rl-types button{ font-size:13px; padding:9px 4px; white-space:normal; }
  .rl-card{ padding:14px 12px 12px; }
  .rl-card-head{ flex-wrap:wrap; }
  .rl-card-head h2{ font-size:22px; }
  .rl-unit{ margin-left:0; flex-basis:100%; }
  .rl-main, .rl-var > summary{ font-size:16px; padding:10px 12px; }
  .rl-var > .hf{ padding:12px; }
  .rl-var-name{ font-size:16px; }
  .rl-ex{ margin-left:0; order:3; flex-basis:100%; }
  .rl-var > summary::after{ margin-left:auto; }
  .rl-trace{ font-size:18px; }
}
@media (max-width:370px){
  .rl-card-head h2{ font-size:19px; }
  .rl-kana{ font-size:18px; }
}
.wd-stage .kana-prompt-wrap{ display:flex; align-items:center; justify-content:center; }
.wd-stage .kana-prompt-wrap > .stage-word{
  display:inline-block;
  max-width:min(100%, var(--wd-fit-w, 480px));
  box-sizing:border-box;
  font-size:var(--fit-max);
}
.wd-stage .vw-prompt-english{ --fit-max:64px; --fit-now:46px; }
.wd-stage .kana-prompt-word{ --fit-max:128px; }
.wd-stage .wg-gloss{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  line-height:46px;
  margin:2px auto 6px;
  max-width:100%;
  font-size:18px;
  color:var(--info);
  white-space:nowrap;
  overflow:hidden;
}
.wd-stage .wg-gloss > span{ line-height:1; }
.wd-stage .gl-lead{ font-family:'Noto Sans JP', sans-serif; font-size:38px; font-weight:600; }
.wd-stage #promptGloss:not([lang]) .gl-lead{ font-family:'Work Sans', sans-serif; font-weight:500; }
.wd-stage .gl-rest{ white-space:pre; }
.wd-page > header.practice-head{ position:relative; }
.wd-page > header.practice-head > h1{ padding:0 44px; }
.wd-close{
  position:absolute;
  left:-6px;
  top:-5px;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:var(--accent);
  transition:background-color 0.15s ease;
}
.wd-close svg{ width:26px; height:26px; }
.wd-close:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .wd-close:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); }
}
.wd-opt-dim{
  position:fixed;
  inset:0;
  z-index:1290;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10, 12, 20, 0.55);
}
.wd-opt-dim[hidden]{ display:none; }
.wd-opt-dim .wd-options{
  width:100%;
  max-width:640px;
  max-height:calc(100vh / var(--page-zoom, 1) - 32px);
  max-height:calc(100dvh / var(--page-zoom, 1) - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  margin:0;
  box-shadow:0 12px 36px rgba(0, 0, 0, 0.3);
}
html.wd-opt-lock,
html.wd-opt-lock body{ overflow:hidden; }
.rf-set-body{ display:contents; }
.rf-set-body[hidden]{ display:none; }
.wd-opt-btn{
  position:absolute;
  right:-6px;
  top:-5px;
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.wd-opt-btn[hidden]{ display:none; }
.wd-opt-btn svg{ width:24px; height:24px; }
.wd-opt-btn[aria-expanded="true"]{ color:var(--info); }
.wd-opt-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .wd-opt-btn:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
}
.wd-options h2:focus{ outline:none; }
.wrap.wd-page{ padding-bottom:12px; }
@media (min-width:760px){
  .wrap.wd-page{ max-width:940px; }
  .wd-stage{ margin-bottom:0; }
}
@media (min-width:760px) and (min-height:780px){
  .wd-page{ --wd-fit-w:600px; }
  .wd-stage{ min-height:520px; display:flex; flex-direction:column; }
  .wd-stage .stage-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
  .wd-stage .kana-prompt-wrap{ height:172px; }
  .wd-stage .vw-prompt-english{ --fit-max:80px; --fit-now:52px; }
  .wd-stage .kana-prompt-word{ --fit-max:150px; }
  .wd-stage .kana-answer-row .kana-input{ height:72px; font-size:28px; }
  .wd-stage .kana-input::placeholder{ font-size:22px; }
  .wd-stage .wg-gloss{ height:52px; line-height:52px; font-size:20px; }
  .wd-stage .gl-lead{ font-size:44px; }
}
@media (max-width:759px){
  .wd-page{ --wd-fit-w:100%; }
  .wd-stage .stage-body{ min-height:456px; display:flex; flex-direction:column; }
  .wd-stage .kana-prompt-wrap{ flex:1 0 128px; height:auto; }
  .wd-stage .vw-prompt-english{ --fit-max:52px; --fit-now:34px; }
  .wd-stage .kana-prompt-word{ --fit-max:112px; }
  .wd-stage{ --answer-w:100%; }
  .wd-stage .kana-answer-row .kana-input{ height:64px; font-size:24px; width:100%; }
  .wd-stage .kana-input::placeholder{ font-size:20px; }
  .wd-stage .wg-gloss{ height:40px; line-height:40px; font-size:16px; }
  .wd-stage .gl-lead{ font-size:32px; }
  .wd-close{ width:38px; height:38px; left:-4px; top:-4px; }
  .wd-close svg{ width:24px; height:24px; }
  .wd-opt-btn{ width:38px; height:38px; right:-4px; top:-4px; }
  .wd-opt-btn svg{ width:22px; height:22px; }
}
@media (max-width:759px) and (max-height:620px){
  .wd-stage .stage-body{ min-height:385px; }
  .wd-stage .wg-gloss{ height:34px; line-height:34px; font-size:14px; }
  .wd-stage .gl-lead{ font-size:28px; }
}
@media (max-width:560px){
  .wd-page{ --wd-type-h:max(240px, calc(100vh - 108px - var(--kb-h, 38vh))); }
  @supports (height:100svh){
    .wd-page{ --wd-type-h:max(240px, calc(100svh - 108px - var(--kb-h, 38svh))); }
  }
  .wd-stage .stage-body{ min-height:var(--wd-type-h); box-sizing:border-box; }
.wd-stage .kana-prompt-wrap{ flex:1 1 0; min-height:44px; margin-bottom:4px; }
  .wd-stage .stage-body{ position:relative; padding-top:38px; padding-bottom:8px; }
  .wd-stage .stage-head{ position:absolute; top:8px; left:12px; right:12px; height:30px; margin:0; }
  .wd-stage .stage-head .stage-star-btn{ width:30px; height:30px; }
  .wd-stage .wg-gloss{ margin:0 auto 4px; }
  .wd-stage .kana-answer-row{ margin-bottom:6px; }
  .wd-stage .kana-feedback{ margin-bottom:0; }
  .wd-stage .kana-actions{ margin-bottom:0; }
}
@media (max-width:560px) and (max-height:620px){
  .wd-page{ --wd-type-h:max(220px, calc(100vh - 83px - var(--kb-h, 38vh))); }
  @supports (height:100svh){
    .wd-page{ --wd-type-h:max(220px, calc(100svh - 83px - var(--kb-h, 38svh))); }
  }
.wd-stage .kana-answer-row .kana-input{ height:52px; font-size:20px; }
  .wd-stage .kana-input::placeholder{ font-size:17px; }
  .wd-stage .kana-feedback{ min-height:62px; }
}
.conj-forms{ margin:0 0 1.25rem; }
.conj-forms[hidden]{ display:none; }
.conj-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (min-width:700px){
  .conj-form-grid{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
}
.conj-form-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  min-width:0;
  padding:12px 14px 11px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink-soft);
  text-align:left;
  cursor:pointer;
  font-family:'Work Sans', sans-serif;
}
.conj-form-card:hover{ border-color:var(--ink-soft); }
.conj-form-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.conj-form-card.active{ border-color:var(--ink); color:var(--ink); }
.conj-form-ex{
  display:block;
  width:100%;
  font-family:'Noto Sans JP', sans-serif;
  font-size:19px;
  font-weight:500;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
}
.conj-form-name{ font-size:12.5px; color:var(--muted); padding-right:24px; }
.conj-form-card.active .conj-form-name{ color:var(--ink-soft); }
.conj-form-check{
  position:absolute;
  bottom:10px;
  right:10px;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid var(--border);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}
.conj-form-check svg{ width:12px; height:12px; visibility:hidden; }
.conj-form-card.active .conj-form-check{ background:var(--ink); border-color:var(--ink); color:var(--card); }
.conj-form-card.active .conj-form-check svg{ visibility:inherit; }
@media (max-width:400px){
  .conj-form-card{ padding:10px 10px 9px; }
  .conj-form-check{ bottom:8px; right:8px; }
}
.conj-drill > header.drill-title-block{ position:relative; }
.conj-drill > header.drill-title-block > h1{ padding:0 44px; }
.conj-drill > header.drill-title-block > .wd-close,
.conj-drill > header.drill-title-block > .wd-opt-btn{ top:50%; margin-top:-20px; }
@media (max-width:759px){
  .conj-drill > header.drill-title-block > .wd-close,
  .conj-drill > header.drill-title-block > .wd-opt-btn{ margin-top:-19px; }
}
.conj-gear-catch{ position:fixed; inset:0; z-index:1290; }
.conj-gear-catch[hidden]{ display:none; }
.conj-gear-box{
  position:fixed;
  z-index:1291;
  box-sizing:border-box;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px 20px 18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  color:var(--ink);
  text-align:left;
  box-shadow:0 14px 40px rgba(0, 0, 0, 0.3);
}
.conj-gear-box[hidden]{ display:none; }
.conj-gear-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.conj-gear-top h2{ margin:0; font-size:20px; }
.conj-gear-top h2:focus{ outline:none; }
.conj-gear-close{
  width:36px;
  height:36px;
  margin-right:-8px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.conj-gear-close svg{ width:22px; height:22px; }
.conj-gear-close:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .conj-gear-close:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
}
.conj-gear-rows .conj-forms{ margin:0 0 4px; }
.conj-gear-rows .conj-form-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-flow:row; grid-auto-columns:auto; }
.conj-gear-rows .conj-more-panel{ margin:0; padding:0; border:0; background:none; }
.conj-gear-mix{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:color-mix(in srgb, var(--info) 8%, transparent);
  color:var(--ink);
  text-decoration:none;
  font-family:'Work Sans', sans-serif;
}
.conj-gear-mix:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .conj-gear-mix:hover{ border-color:var(--info); }
}
.conj-gear-mix-ico{
  flex:none;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:color-mix(in srgb, var(--info) 20%, transparent);
  color:var(--info);
  font:500 15px 'Noto Sans JP', sans-serif;
  letter-spacing:-1px;
}
.conj-gear-mix-txt{ min-width:0; }
.conj-gear-mix-txt b{ display:block; font-size:15px; font-weight:600; }
.conj-gear-mix-txt small{ display:block; margin-top:2px; font-size:13px; color:var(--muted); }
.conj-gear-mix-arr{ margin-left:auto; font-size:20px; color:var(--info); }
html.conj-gear-lock,
html.conj-gear-lock body{ overflow:hidden; }
.conj-more-btn[hidden]{ display:none; }
.conj-more-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  font-family:'Work Sans', sans-serif;
}
.conj-more-btn:hover{ border-color:var(--ink-soft); }
.conj-more-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.conj-more-icon{ width:20px; height:20px; flex:none; color:var(--ink-soft); }
.conj-more-text{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.conj-more-label{ font-size:14px; font-weight:600; }
.conj-more-summary{ font-size:12.5px; color:var(--muted); }
.conj-more-chevron{ width:18px; height:18px; flex:none; color:var(--muted); transition:transform 0.2s ease; }
.conj-more-btn.open .conj-more-chevron{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){
  .conj-more-chevron{ transition:none; }
}
.conj-more-panel{
  margin-top:8px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.conj-more-panel[hidden]{ display:none; }
.conj-set-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
  padding:14px 0;
  border-top:1px solid var(--border);
}
.conj-set-row:first-child{ border-top:none; }
.conj-set-row[hidden]{ display:none; }
@media (min-width:560px){
  .conj-set-row{ grid-template-columns:110px minmax(0, 1fr); gap:16px; align-items:start; }
  .conj-set-label{ padding-top:7px; }
}
.conj-set-label{ font-size:13px; font-weight:600; color:var(--ink); }
.conj-set-sub{
  display:block;
  margin-top:2px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11.5px;
  font-weight:400;
  color:var(--muted);
}
.conj-set-note{ margin:6px 0 0; font-size:12px; color:var(--muted); }
.conj-set-note:empty{ display:none; }
.conj-more-panel .conj-segmented{ justify-content:center; gap:0; margin:0; }
.conj-segmented .pill{ border-radius:0; }
.conj-segmented .pill:first-child{ border-radius:999px 0 0 999px; }
.conj-segmented .pill:last-child{ border-radius:0 999px 999px 0; margin-left:-1px; }
.conj-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.conj-check-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px 6px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.conj-check-chip:hover{ border-color:var(--ink-soft); }
.conj-check-chip.active{ border-color:var(--ink); color:var(--ink); }
.conj-check-chip:disabled{ opacity:0.45; cursor:default; }
.conj-chip-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  box-sizing:border-box;
  border:1.5px solid var(--border);
  border-radius:4px;
}
.conj-chip-box svg{ width:11px; height:11px; visibility:hidden; }
.conj-check-chip.active .conj-chip-box{ background:var(--ink); border-color:var(--ink); color:var(--card); }
.conj-check-chip.active .conj-chip-box svg{ visibility:inherit; }
.conj-unit-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}
.conj-unit-cell{
  position:relative;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.conj-unit-cell:hover{ border-color:var(--ink-soft); }
.conj-unit-cell.active{ background:var(--ink); border-color:var(--ink); color:var(--card); }
.conj-unit-cell.locked{
  background:color-mix(in srgb, var(--ink) 45%, var(--card));
  border-color:transparent;
  color:var(--card);
  cursor:default;
}
.conj-unit-lock{ position:absolute; top:3px; right:3px; width:9px; height:9px; opacity:0.85; }
.conj-unit-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.conj-unit-foot .conj-set-note{ margin:0; }
.conj-unit-links{ display:flex; gap:4px; flex:none; margin-left:auto; }
.conj-text-link{
  padding:2px 4px;
  border:none;
  background:none;
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.conj-text-link:hover{ color:var(--ink); }
.kana-feedback .kana-politeness-note{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  line-height:1.4;
  margin:6px 0 0;
  color:var(--ink-soft);
}
.kana-feedback .retry-note{
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  margin:6px 0 0;
  text-align:center;
  color:var(--ink);
}
@keyframes retry-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(2px); }
}
@keyframes retry-flash{
  0%{ box-shadow:0 0 0 3px var(--gold); }
  100%{ box-shadow:0 0 0 3px transparent; }
}
.retry-shake{ animation:retry-shake 0.36s ease-in-out; }
@media (prefers-reduced-motion:reduce){
  .retry-shake{ animation:retry-flash 0.7s ease-out; }
}
.answer-diff{
  margin:0 auto;
  border-collapse:collapse;
}
.answer-diff td{
  padding:2px 0;
  text-align:center;
  line-height:1.25;
}
.answer-diff .ans-label{
  width:46px;
  min-width:46px;
  padding-right:6px;
  text-align:right;
  font-family:'Work Sans', sans-serif;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
.answer-diff .ans-pad{
  width:46px;
  min-width:46px;
}
.ans-cell{
  font-family:'Noto Sans JP', sans-serif;
  font-size:var(--ans-size, 26px);
  min-width:calc(var(--ans-size, 26px) + 4px);
  padding:2px 1px;
  color:var(--ink);
  white-space:nowrap;
}
.ans-typed .ans-cell.is-diff{
  color:var(--crimson);
  background:var(--crimson-soft);
  border-radius:6px 6px 0 0;
}
.ans-answer .ans-cell.is-diff{
  color:var(--success);
  background:var(--success-soft);
  border-radius:0 0 6px 6px;
}
.wg-gloss{ margin:0 auto 6px; }
@media (max-width:560px){
  .choice-page .wg-gloss{ height:16px; line-height:16px; font-size:12.5px; margin:0 auto 2px; }
}
@media (max-width:480px){
  .answer-diff .ans-label{
    width:38px;
    min-width:38px;
    padding-right:4px;
    font-size:10px;
  }
  .answer-diff .ans-pad{
    width:38px;
    min-width:38px;
  }
  .ans-cell{ min-width:var(--ans-size, 26px); }
}
.ans-gap{ color:var(--muted); }
.ans-cell.is-given{ color:var(--ink-soft); }
.answer-diff.ans-has-size .ans-cell{ vertical-align:bottom; }
.ans-sz{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  vertical-align:bottom;
}
.ans-sz[hidden]{ display:none; }
.ans-sz-word{
  display:block;
  height:11px;
  font-family:'Work Sans', sans-serif;
  font-size:10px;
  font-weight:600;
  line-height:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ans-sz-word[hidden]{ display:none; }
.answer-diff .ans-romaji td{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  color:var(--muted);
  padding-top:1px;
  line-height:1.2;
}
.answer-diff .ans-under-kana td{ font-family:'Noto Sans JP', sans-serif; }
.kana-feedback:has(> .answer-ok){
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.answer-ok{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.ao-word{
  font-family:'Noto Sans JP', sans-serif;
  font-size:var(--ans-size, 26px);
  line-height:1.3;
  color:var(--ink);
  white-space:nowrap;
}
.ao-word.is-right{ color:var(--success); }
.ao-romaji{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}
.ao-grid{
  display:grid;
  grid-template-rows:auto auto;
  column-gap:3px;
  justify-items:center;
}
.ao-grid .ao-word,
.ao-grid .ao-romaji{ display:contents; }
.ao-k{ grid-row:1; }
.ao-r{
  grid-row:2;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:14px;
  line-height:1.3;
  color:var(--muted);
  white-space:nowrap;
}
@media (max-width:520px){
  .stage-top-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:1.65rem;
min-height:34px;
  }
.stage-top-row .stage-count{
    margin:0;
    flex:1 1 auto;
    min-width:0;
font-size:11px;
  }
.stage-top-row .stage-ignore-btn{
    position:static;
    flex:0 0 auto;
  }
}
@media (max-width:430px){
  .kana-actions .kana-btn-primary{ padding:11px 20px; font-size:14px; }
  .kana-actions .pill{ padding:8px 12px; font-size:12px; }
.kana-actions .reveal-btn{ padding:9.5px 18px 8px; font-size:14px; gap:6px; }
  .stage-star-btn{ width:32px; height:32px; bottom:10px; right:10px; }
}
.stage.stage-with-foot{ padding:0; }
.stage-body{ padding:14px 1.5rem 0.75rem; }
.stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:36px;
  margin-bottom:calc(1.5rem + 16px + 1.65rem - 14px - 36px);
}
.stage-head .stage-star-btn,
.stage-head .stage-ignore-btn{
  position:static;
  flex:none;
}
.stage-head .stage-star-btn{ width:36px; height:36px; }
.stage-foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 16px 12px;
  border-top:1px solid var(--border);
  border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background:color-mix(in srgb, var(--bg) 45%, var(--card));
}
.stage-score{
  margin:0;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.stage-score b{ font-weight:500; color:var(--ink); }
.stage-switches{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.stage-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  border:none;
  border-radius:6px;
  background:none;
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  white-space:nowrap;
  cursor:pointer;
}
.stage-switch[aria-pressed="true"]{ color:var(--ink); }
.stage-switch[hidden]{ display:none; }
.stage-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.stage-switch-track{
  position:relative;
  flex:none;
  width:32px;
  height:18px;
  border-radius:999px;
  background:var(--border);
}
.stage-switch-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
  transition:transform 0.2s ease;
}
.stage-switch[aria-pressed="true"] .stage-switch-track{ background:var(--aurora); }
.stage-switch[aria-pressed="true"] .stage-switch-track::after{ transform:translateX(14px); }
.stage-switch svg{ width:16px; height:16px; flex:none; color:var(--muted); }
.stage-switch[aria-pressed="true"] svg{ color:var(--info); }
@media (prefers-reduced-motion:reduce){
  .stage-switch-track::after{ transition:none; }
}
@media (max-width:360px){
  .stage-foot{ padding-left:12px; padding-right:12px; }
  .stage-switch{ gap:6px; font-size:12px; }
}
.kana-actions{
  display:flex;
  justify-content:center;
  margin-bottom:6px;
}
.kana-actions[hidden]{ display:none; }
.kana-btn-primary{
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--card);
  background:var(--ink);
  border:none;
  border-radius:999px;
  padding:12px 32px;
  cursor:pointer;
}
.kana-btn-primary:hover{ background:var(--info); }
.reveal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10.5px 26px 9px;
  border:1.5px solid color-mix(in srgb, var(--ink-soft) 35%, var(--border));
  border-bottom-width:3px;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.reveal-btn .reveal-eye{ width:16px; height:16px; flex:none; color:var(--muted); }
.reveal-btn:hover:not(:disabled){ color:var(--ink); border-color:var(--ink-soft); }
.reveal-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.reveal-btn:disabled{ opacity:0.5; cursor:default; }
.kana-actions:has(> .reveal-btn + .check-btn){
  --pair-w:186px;
  --pair-trim:154px;
  --pair-bleed:8px;
  container:answer-pair / inline-size;
  width:calc(100% + 2 * var(--pair-bleed));
  margin-left:calc(-1 * var(--pair-bleed));
  margin-right:calc(-1 * var(--pair-bleed));
  flex-wrap:nowrap;
  gap:0;
}
.stage-body .kana-actions:has(> .reveal-btn + .check-btn){ --pair-bleed:16px; }
.kana-actions:has(> .reveal-btn + .check-btn) > .reveal-btn,
.kana-actions:has(> .reveal-btn + .check-btn) > .check-btn{ min-width:var(--pair-w); }
.kana-actions:has(> .reveal-btn + .check-btn) > .check-btn{ margin-left:12px; }
.check-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.check-btn[hidden]{ display:none; }
.check-btn .check-tick{ width:16px; height:16px; flex:none; }
@media (max-width:430px){
  .kana-actions:has(> .reveal-btn + .check-btn){ --pair-trim:145px; }
}
@container answer-pair (max-width:383px){
  .kana-actions:has(> .reveal-btn + .check-btn) > .reveal-btn{ padding-left:10px; padding-right:10px; }
  .kana-actions:has(> .reveal-btn + .check-btn) > .reveal-btn,
  .kana-actions:has(> .reveal-btn + .check-btn) > .check-btn{ min-width:var(--pair-trim); }
}
@container answer-pair (max-width:301px){
  .kana-actions:has(> .reveal-btn + .check-btn) > .reveal-btn{ min-width:auto; }
  .kana-actions:has(> .reveal-btn + .check-btn) > .check-btn{ min-width:116px; margin-left:10px; }
}
@container answer-pair (max-width:273px){
  .kana-actions:has(> .reveal-btn + .check-btn) > .check-btn{ min-width:auto; padding-left:14px; padding-right:14px; margin-left:8px; }
}
.kana-actions:has(> .reveal-btn + .check-btn) > .pair-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-sizing:border-box;
  width:var(--next-w, calc(2 * var(--pair-w) + 12px));
  max-width:100%;
  padding-left:20px;
  padding-right:20px;
  background:var(--success);
  color:#fff;
  transition:background-color 0.15s ease;
}
.kana-actions > .pair-next[hidden]{ display:none; }
:root[data-theme="dark"] .kana-actions:has(> .reveal-btn + .check-btn) > .pair-next{ color:var(--card); }
.kana-actions:has(> .reveal-btn + .check-btn) > .pair-next:hover{ background:color-mix(in srgb, var(--success) 80%, #000); }
:root[data-theme="dark"] .kana-actions:has(> .reveal-btn + .check-btn) > .pair-next:hover{ background:color-mix(in srgb, var(--success) 78%, #fff); }
.pair-next .next-arrow{ display:inline-block; margin-left:6px; }
.check-btn .enter-key,
.pair-next .enter-key{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:1px solid currentColor;
  border-radius:4px;
  padding:2px 4px;
  line-height:0;
  opacity:0.55;
}
.check-btn .enter-key svg,
.pair-next .enter-key svg{ display:block; width:12px; height:12px; }
.check-btn .enter-key{ right:16px; }
.pair-next .enter-key{ right:18px; }
.kana-actions > .check-btn{ position:relative; }
@media (hover:hover) and (pointer:fine){
  @container answer-pair (min-width:384px){
    .check-btn .enter-key{ display:block; }
.kana-actions:has(> .reveal-btn + .check-btn) > .check-btn:has(> .enter-key){ padding-left:20px; padding-right:46px; }
  }
  @container answer-pair (min-width:300px){
    .pair-next .enter-key{ display:block; }
  }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pair-next .next-arrow{ transition:transform 0.15s ease; }
  .pair-next:hover .next-arrow{ transform:translateX(5px); }
}
.kana-hint{
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin:0;
}
.collapse-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 0;
  margin:26px 0 14px;
  background:none;
  border:none;
  border-bottom:1px solid var(--border);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.collapse-toggle:hover{ color:var(--accent); }
.collapse-toggle:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.collapse-toggle::before{
  content:'';
  width:0; height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:rotate(90deg);
  transition:transform 0.15s ease;
  flex-shrink:0;
}
.collapse-toggle.collapsed::before{ transform:rotate(0deg); }
.kana-stats-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin:1.5rem 0 1rem;
}
.kana-stats-sort{
  display:flex;
  gap:8px;
}
.kana-stats-filter{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
}
.kana-stats-filter input{
  width:16px;
  height:16px;
  accent-color:var(--accent);
  cursor:pointer;
}
.kana-stats-section{ margin-bottom:1.5rem; }
.kana-stats-row-heading{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
}
.kana-stats-nomatch{
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  color:var(--muted);
  text-align:center;
  padding:2rem;
}
.kana-stat-list{
  display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (min-width:480px){
  .kana-stat-list{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}
.kana-stat-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 10px 12px;
  border:2px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
}
.kana-stat-item.grade-f{ border-color:var(--accent); }
.kana-stat-item.grade-d{ border-color:var(--grade-d); }
.kana-stat-item.grade-c{ border-color:var(--gold); }
.kana-stat-item.grade-b{ border-color:var(--grade-b); }
.kana-stat-item.grade-a{ border-color:var(--success); }
.kana-stat-char{
  font-family:'Noto Sans JP', sans-serif;
  font-size:24px;
  color:var(--ink);
  line-height:1.1;
}
.kana-stat-romaji{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
}
.kana-stat-bar-track{
  width:100%;
  height:6px;
  border-radius:999px;
  background:var(--accent-soft);
  overflow:hidden;
  margin-top:2px;
}
.kana-stat-bar-fill{
  height:100%;
  border-radius:999px;
}
.kana-stat-bar-fill.good{ background:var(--success); }
.kana-stat-bar-fill.ok{ background:var(--gold); }
.kana-stat-bar-fill.weak{ background:var(--accent); }
.kana-stat-bar-fill.unpracticed{ background:transparent; }
.kana-stat-result{
  display:flex;
  align-items:baseline;
  gap:6px;
  justify-content:center;
}
.kana-stat-fraction{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  color:var(--ink-soft);
}
.kana-stat-pct{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  min-width:38px;
  text-align:right;
}
.kana-stat-unpracticed{
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  color:var(--muted);
  font-style:italic;
}
.conj-grade-item .conj-grade-label{
  font-size:17px;
  line-height:1.25;
  text-align:center;
padding:0 26px;
min-height:2.5em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.conj-grade-item{
  justify-content:flex-start;
}
.conj-grade-item .kana-stat-bar-track{ margin-top:auto; }
.kana-stats-reset-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:0.75rem;
}
.kanji-stat-list{
  display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (min-width:760px){
  .kanji-stat-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1100px){
  .stats-page .kanji-stat-list{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.stats-page .conj-grade-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
  .stats-page .conj-overview-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.stats-page .grade-summary,
.stats-page .breakdown-heading,
.stats-page .breakdown-block{ max-width:900px; }
.kanji-stat-item.ws-open{ cursor:pointer; }
.kanji-stat-item.ws-open:hover{ background:color-mix(in srgb, var(--ink) 5%, var(--card)); }
.kanji-stat-item.ws-open:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
@media (max-width:380px){
  .kanji-stat-progress-row{ flex-wrap:wrap; row-gap:4px; }
  .kanji-stat-progress-row .kana-stat-result{ width:100%; text-align:right; }
}
.kanji-stat-item{
  min-width:0;
  overflow-wrap:break-word;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border:2px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  min-width:0;
}
.kanji-stat-item.grade-f{ border-color:var(--accent); }
.kanji-stat-item.grade-d{ border-color:var(--grade-d); }
.kanji-stat-item.grade-c{ border-color:var(--gold); }
.kanji-stat-item.grade-b{ border-color:var(--grade-b); }
.kanji-stat-item.grade-a{ border-color:var(--success); }
.grade-badge{
  position:absolute;
  top:10px;
  right:10px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fff;
}
.grade-badge.grade-f{ background:var(--accent); }
.grade-badge.grade-d{ background:var(--grade-d); }
.grade-badge.grade-c{ background:var(--gold); }
.grade-badge.grade-b{ background:var(--grade-b); }
.grade-badge.grade-a{ background:var(--success); }
.kanji-stat-word-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
  padding-right:26px; 
}
.kanji-stat-char{
  font-family:'Noto Sans JP', sans-serif;
  font-size:19px;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kanji-stat-romaji{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kanji-stat-progress-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.kanji-stat-bar-track{
  flex:1;
  min-width:0;
  height:8px;
  border-radius:999px;
  background:var(--accent-soft);
  overflow:hidden;
}
.kana-stats-reset-btn{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 22px;
  cursor:pointer;
}
.kana-stats-reset-btn:hover{ color:var(--accent); border-color:var(--accent); }
.vw-prompt-english{
  font-family:'Work Sans', sans-serif;
  font-weight:500;
  font-size:30px;
  line-height:1.25;
  max-width:22ch;
  text-wrap:balance;
}
@media (max-width:479px){
  .vw-prompt-english{ font-size:24px; max-width:18ch; }
}
.wg-host{ display:contents; }
.choice-page .kana-feedback.wg-feedback{
  height:auto;
  min-height:75px;
  line-height:normal;
  white-space:normal;
  overflow:visible;
}
.mode-toggle-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:1.75rem;
min-height:36px;
}
.vw-stat-english{
  margin:2px 0 8px;
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  line-height:1.35;
  color:var(--ink);
  opacity:.7;
}
.admin-chip .chip-tag{
  font-family:'Work Sans', sans-serif;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.6;
  margin-left:2px;
}
.form-chip-row{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 19px;
  min-height:30px;
}
.form-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  background:var(--card);
  color:var(--ink);
}
.form-chip-icon{
  width:15px;
  height:15px;
  flex:none;
  color:var(--ink-soft);
}
.form-chip-plain{
  background:var(--card);
  border-color:var(--border);
  color:var(--ink);
}
.form-chip-plain .form-chip-icon{ color:var(--ink-soft); }
.form-chip-form{
  background:var(--chip-accent-soft, var(--accent-soft));
  border-color:var(--chip-accent, var(--accent));
  color:var(--chip-accent, var(--accent));
}
.form-chip-form .form-chip-icon{ color:var(--chip-accent, var(--accent)); }
.form-chip-polite{
  background:var(--success-soft);
  border-color:var(--success);
  color:var(--success);
}
.form-chip-polite .form-chip-icon{ color:var(--success); }
.form-chip-no{
  background:var(--crimson-soft);
  border-color:var(--crimson);
  color:var(--crimson);
}
.form-chip-no .form-chip-icon{ color:var(--crimson); }
.form-chip-want{
  background:var(--sakura-soft);
  border-color:var(--sakura);
  color:var(--sakura);
}
.form-chip-want .form-chip-icon{ color:var(--sakura); }
.form-chip-time{
  background:var(--info-soft);
  border-color:var(--info);
  color:var(--info);
}
.form-chip-time .form-chip-icon{ color:var(--info); }
@media (max-width:500px){
  .conj-stage .form-chip-row{ gap:4px; margin-left:-16px; margin-right:-16px; }
  .conj-stage .form-chip{ font-size:11px; padding:3px 5px; gap:3px; }
  .conj-stage .form-chip-icon{ width:12px; height:12px; }
}
@media (max-width:359px){
  .conj-stage .form-chip-row{ gap:3px; }
  .conj-stage .form-chip{ font-size:10px; padding:3px 4px; gap:3px; }
  .conj-stage .form-chip-icon{ width:10px; height:10px; }
}
.grade-summary{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.grade-summary-letter{
  font-family:'Work Sans', sans-serif;
  font-size:20px;
  font-weight:600;
  min-width:1ch;
}
.grade-summary.grade-f .grade-summary-letter{ color:var(--accent); }
.grade-summary.grade-d .grade-summary-letter{ color:var(--grade-d); }
.grade-summary.grade-c .grade-summary-letter{ color:var(--gold); }
.grade-summary.grade-b .grade-summary-letter{ color:var(--grade-b); }
.grade-summary.grade-a .grade-summary-letter{ color:var(--success); }
.grade-summary.grade-none .grade-summary-letter{ color:var(--muted); }
.grade-summary-track{
  flex:1;
  min-width:110px;
  height:7px;
  border-radius:4px;
  background:var(--border);
  overflow:hidden;
}
.grade-summary-track.split{ display:flex; gap:2px; background:none; overflow:visible; }
.grade-summary-done{ background:var(--success); border-radius:4px 0 0 4px; }
.grade-summary-todo{ background:var(--border); border-radius:0 4px 4px 0; }
.grade-summary-fill{ display:block; height:100%; background:var(--muted); }
.grade-summary-fill.grade-f{ background:var(--accent); }
.grade-summary-fill.grade-d{ background:var(--grade-d); }
.grade-summary-fill.grade-c{ background:var(--gold); }
.grade-summary-fill.grade-b{ background:var(--grade-b); }
.grade-summary-fill.grade-a{ background:var(--success); }
.grade-summary-caption{ font-size:12px; color:var(--ink-soft); }
.collapse-toggle.collapse-toggle-inline{
  width:auto;
  margin:0;
  padding:0;
  border-bottom:none;
  font-size:14px;
}
.breakdown-heading{
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  color:var(--muted);
  margin:18px 0 6px;
}
.breakdown-block{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.breakdown-row{
  display:grid;
grid-template-columns:9.5rem 1.4ch minmax(48px, 1fr) 12rem;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
}
.breakdown-row:last-child{ border-bottom:none; }
.breakdown-label{ font-size:13px; color:var(--ink); min-width:0; }
@media (max-width:560px){
  .breakdown-row{
    grid-template-columns:minmax(0, 1fr) 1.4ch;
    row-gap:6px;
  }
  .breakdown-label{ grid-column:1; }
  .breakdown-letter{ grid-column:2; text-align:right; }
  .breakdown-row .grade-summary-track{ grid-column:1 / -1; }
  .breakdown-caption{ grid-column:1 / -1; }
}
.breakdown-letter{
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  font-weight:600;
  min-width:1.2ch;
}
.breakdown-row.grade-f .breakdown-letter{ color:var(--accent); }
.breakdown-row.grade-d .breakdown-letter{ color:var(--grade-d); }
.breakdown-row.grade-c .breakdown-letter{ color:var(--gold); }
.breakdown-row.grade-b .breakdown-letter{ color:var(--grade-b); }
.breakdown-row.grade-a .breakdown-letter{ color:var(--success); }
.breakdown-row.grade-none .breakdown-label,
.breakdown-row.grade-none .breakdown-letter,
.breakdown-row.grade-none .breakdown-caption{ color:var(--muted); }
.breakdown-row .grade-summary-track{ flex:1; min-width:80px; height:6px; }
.breakdown-caption{ font-size:11px; color:var(--ink-soft); text-align:right; }
#gradeBreakdown{ margin-bottom:22px; }
.wc-tile{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  padding:11px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
@media (hover:hover){
  .wc-tile:hover{ background:var(--accent-soft); border-color:var(--ink-soft); }
}
.wc-tile-main{
  flex:1;
  min-width:0;
}
.wc-tile-line{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wc-tile-word{
  font-family:'Noto Sans JP', sans-serif;
  font-size:19px;
  line-height:1.3;
}
.wc-tile-kanji{
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  color:var(--muted);
  margin-left:8px;
}
.wc-tile-en{
  display:block;
  font-size:12.5px;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wc-tile .grade-badge{ position:static; flex-shrink:0; }
.wc-new{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  height:22px;
  padding:0 7px;
  border:1.5px dashed var(--border);
  border-radius:999px;
  font-family:'Work Sans', sans-serif;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--muted);
}
.wc-lock,
.wc-lock body{ overflow:hidden; }
.wc-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transition:opacity 0.2s ease, visibility 0s linear 0.2s;
pointer-events:none;
}
.wc-overlay.open{
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transition:opacity 0.2s ease;
}
.wc-panel{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  background:var(--bg);
  transform:translateY(24px);
  transition:transform 0.25s ease;
  outline:none;
}
.wc-overlay.open .wc-panel{ transform:none; }
@media (min-width:700px){
  .wc-overlay{ background:rgba(10, 12, 20, 0.55); }
  .wc-panel{
    border:1px solid var(--border);
    overflow:hidden;
  }
}
@media (prefers-reduced-motion:reduce){
  .wc-overlay,
  .wc-overlay.open,
  .wc-panel{ transition:none; }
}
.wc-bar,
.wc-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  padding:8px 16px;
}
.wc-bar{ border-bottom:1px solid var(--border); }
.wc-foot{
  border-top:1px solid var(--border);
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.wc-foot[hidden]{ display:none; }
.wc-nav[hidden]{ display:none; }
.wc-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:1;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--card);
  background:var(--ink);
  border:none;
  border-radius:999px;
  padding:11px 28px;
  cursor:pointer;
}
.wc-primary:hover{ background:var(--info); }
.wc-primary[hidden]{ display:none; }
.wc-close{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 4px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.wc-close:hover{ color:var(--accent); }
.wc-scroll{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:14px 16px;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.wc-nav{
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.wc-nav:hover{ background:var(--accent-soft); }
.wc-nav:disabled{ opacity:0.35; cursor:default; background:var(--card); }
.wc-nav svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-hint{
  font-size:11px;
  color:var(--muted);
  text-align:center;
}
.wc-marks{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-width:0;
}
.wc-marks[hidden]{ display:none; }
.wc-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:7px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  font:600 13px 'Work Sans', sans-serif;
  cursor:pointer;
}
.wc-mark[hidden]{ display:none; }
.wc-mark:hover{ border-color:var(--ink-soft); }
.wc-mark:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wc-mark svg{
  flex:none;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-mark-star.on{ border-color:var(--gold); color:var(--gold); }
.wc-mark-star.on svg{ fill:var(--gold); }
.wc-mark-ignore.on{ border-style:dashed; color:var(--ink-soft); }
.wc-mark-short{ display:none; }
@keyframes wc-slide-next{
  from{ opacity:0; transform:translateX(18px); }
  to{ opacity:1; transform:none; }
}
@keyframes wc-slide-prev{
  from{ opacity:0; transform:translateX(-18px); }
  to{ opacity:1; transform:none; }
}
.wc-label{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
}
.wc-pic{
  position:relative;
  width:100%;
  max-width:240px;
  aspect-ratio:1 / 1;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  background:var(--bg);
  border:1.5px dashed var(--border);
}
.wc-pic.has-picture{ border-color:transparent; }
.wc-pic.loading .wc-pic-empty,
.wc-pic.has-picture .wc-pic-empty{ visibility:hidden; }
.wc-pic-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--muted);
}
.wc-pic-empty svg{
  width:44px;
  height:44px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0.7;
}
.wc-pic-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.15s ease;
}
.wc-pic-img.loaded{ opacity:1; }
.wc-kanji-row{
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:8px;
  font-size:46px;
  line-height:1.15;
}
.wc-kanji{
  display:inline-block;
  flex:0 0 auto;
  white-space:nowrap;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:500;
  font-size:1em;
  line-height:inherit;
  letter-spacing:0.02em;
  padding:6px 20px 8px;
  border:2px solid var(--teal);
  border-radius:14px;
background:color-mix(in srgb, var(--teal) 14%, var(--card));
  box-shadow:0 0 18px color-mix(in srgb, var(--teal) 45%, transparent),
             inset 0 0 14px color-mix(in srgb, var(--teal) 25%, transparent);
  color:var(--ink);
}
.wc-kanji-row .wc-kanji:not(:only-child){ padding-left:12px; padding-right:12px; }
.wc-kanji-btn{
  position:relative;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.wc-kanji-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (hover:hover){
  .wc-overlay .wc-kanji-btn:hover{
    border-color:color-mix(in srgb, var(--teal) 70%, var(--ink));
    box-shadow:0 0 26px color-mix(in srgb, var(--teal) 65%, transparent),
               inset 0 0 16px color-mix(in srgb, var(--teal) 35%, transparent);
  }
}
.wc-kanji-btn.wc-kanji-wait{ opacity:0.6; cursor:progress; }
.wc-kback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:7px 16px 7px 11px;
  border:none;
  border-radius:10px;
  background:var(--teal);
  color:var(--card);
  font:700 13px 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 0 16px color-mix(in srgb, var(--teal) 55%, transparent);
  transition:background-color 0.15s, box-shadow 0.15s;
}
.wc-kback[hidden]{ display:none; }
.wc-kback:hover{
  background:color-mix(in srgb, var(--teal) 85%, var(--ink));
  box-shadow:0 0 22px color-mix(in srgb, var(--teal) 70%, transparent);
}
.wc-kback:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wc-kback svg{
  flex:none;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-audio-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.wc-audio-btn:hover{ border-color:var(--ink-soft); }
.wc-audio-btn.playing{ border-color:var(--accent); color:var(--accent); }
.wc-audio-btn svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-sentence{
  font-family:'Noto Sans JP', sans-serif;
  font-size:24px;
  line-height:1.9;
  margin:0;
  color:var(--ink);
}
.wc-tok{
  font:inherit;
  color:inherit;
  background:transparent;
  border:none;
  border-bottom:2px dotted var(--ink-soft);
  border-radius:3px;
  padding:0 1px;
margin:0 4px 0 0;
  cursor:pointer;
}
.wc-nobr{ display:inline-block; max-width:100%; }
.wc-nobr[hidden]{ display:none; }
.wc-nobr > .wc-tok:not(:last-child){ margin-right:0; }
.wc-tok:hover,
.wc-tok.open{ background:var(--info-soft); border-bottom-color:var(--info); }
.wc-tok.wc-target,
.wc-sentence .wc-plain{ display:inline-block; }
.wc-tok.wc-target[hidden],
.wc-sentence .wc-plain[hidden]{ display:none; }
.wc-tok.wc-target{
  cursor:default;
  background:var(--teal-soft);
  border-bottom:3px solid var(--teal);
  font-weight:600;
  padding:0 3px;
}
.wc-sentence-en{
  margin:4px 0 0;
  font-size:14px;
  color:var(--ink-soft);
}
.wc-pop{
  position:fixed;
  z-index:1150;
  min-width:190px;
  max-width:min(340px, calc(100vw - 16px));
  padding:14px 18px;
  background:var(--card);
  border:1px solid var(--ink-soft);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0, 0, 0, 0.25);
}
.wc-pop[hidden]{ display:none; }
.wc-pop-word{
  font-family:'Noto Sans JP', sans-serif;
  font-size:26px;
}
.wc-pop-reading{
  font-family:'Noto Sans JP', sans-serif;
  font-size:16px;
  color:var(--muted);
  margin-left:8px;
}
.wc-pop-en{ margin-top:4px; font-size:17.5px; color:var(--ink); }
.wc-pop-note{ margin-top:6px; font-size:14.5px; color:var(--ink-soft); }
.wc-pop-unit{
  display:inline-block;
  margin-top:8px;
  padding:1px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
}
.choice-progress-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.choice-progress-text{
  margin:0;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--ink-soft);
  min-width:52px;
  text-align:right;
}
.choice-score{
  margin:0;
  min-width:38px;
  padding:4px 0;
  border-radius:999px;
  background:var(--success-soft);
  color:var(--success);
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:13px;
  text-align:center;
}
.choice-stage{ padding-bottom:1.25rem; padding-top:1.1rem; }
.choice-prompt-tag{
  margin:0 0 2px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.choice-prompt-sub{
  margin:0 0 10px;
  height:26px;
  line-height:26px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:19px;
  color:var(--ink-soft);
}
@media (min-width:561px){
  .choice-word{ font-size:64px; }
  .choice-prompt-sub{ font-size:22px; }
}
.choice-page{ max-width:760px; }
.choice-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
margin:4px 0 12px;
}
@media (min-width:760px){
  .choice-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.choice-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:16px 18px;
  border:1.5px solid var(--border);
  border-bottom-width:4px;
  border-radius:14px;
  background:var(--card);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
}
[data-theme="dark"] .choice-option{ border-bottom-color:rgba(0,0,0,0.45); }
.choice-option:hover:not(:disabled){ border-color:color-mix(in srgb, var(--info) 55%, var(--border)); }
.choice-option:active:not(:disabled){
  transform:translateY(2px);
  border-bottom-width:2px;
  margin-bottom:2px;
}
.choice-option:active:not(:disabled)::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
.choice-option:disabled{ cursor:default; }
.choice-key{
  flex:0 0 auto;
  box-sizing:border-box;
  width:26px;
  height:26px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.choice-text{
  font-family:'Work Sans', sans-serif;
  font-size:19px;
  font-weight:500;
  line-height:31px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.choice-text-ja{ font-family:'Noto Sans JP', sans-serif; font-size:24px; }
.choice-told-in{
  flex:0 0 auto;
  margin-left:auto;
  padding-left:10px;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  opacity:0.85;
}
.choice-told-in [lang="ja"],
.choice-told-in:lang(ja){ font-family:'Noto Sans JP', sans-serif; }
.choice-option .choice-told-in .choice-told,
.choice-option .choice-told-in .choice-flash{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  animation:none;
}
.choice-option.is-stacked{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  grid-template-rows:auto auto;
  align-content:center;
  row-gap:1px;
  padding-top:0;
  padding-bottom:0;
}
.choice-option.is-stacked .choice-key{ grid-row:1 / span 2; align-self:center; }
.choice-option.is-stacked .choice-text{ line-height:1.15; }
.choice-option.is-stacked .choice-told-in{
  grid-column:2;
  min-width:0;
  margin-left:0;
  padding-left:0;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
}
.choice-option.is-correct{
  border-color:var(--success);
  background:var(--success-soft);
}
.choice-option.is-correct .choice-key{ background:var(--success); border-color:var(--success); color:var(--card); }
.choice-option.is-wrong{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.choice-option.is-wrong .choice-key{ background:var(--accent); border-color:var(--accent); color:var(--card); }
.choice-option.is-dim{ opacity:0.45; }
.choice-page .kana-actions{ min-height:42px; align-items:center; gap:10px; }
.choice-page .kana-actions .pill,
.choice-page .kana-actions .kana-btn-primary{ white-space:nowrap; }
.choice-page .kana-feedback{
  height:22px;
  line-height:22px;
  white-space:nowrap;
  overflow:hidden;
}
.choice-told{
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  color:var(--ink-soft);
}
.choice-flash{
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  font-weight:500;
  color:var(--success);
  animation:choice-flash-in 0.18s ease-out;
}
@keyframes choice-flash-in{
  from{ opacity:0; transform:translateY(-3px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .choice-flash{ animation:none; }
}
.choice-summary{ text-align:center; }
.choice-summary-label{
  margin:0;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.choice-summary-score{
  margin:6px 0 2px;
  font-family:'Work Sans', sans-serif;
  font-size:44px;
  font-weight:600;
  color:var(--ink);
}
.choice-summary-note{
  margin:0 0 4px;
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  color:var(--ink-soft);
}
.choice-missed-list{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
  margin-bottom:18px;
  text-align:left;
}
@media (min-width:620px){
  .choice-missed-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.choice-missed{
  display:flex;
  align-items:baseline;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  text-align:left;
}
.choice-missed:hover:not(:disabled){ border-color:var(--ink-soft); }
.choice-missed:disabled{ cursor:default; }
.choice-missed-word{
  font-family:'Noto Sans JP', sans-serif;
  font-size:19px;
}
.choice-missed-reading{
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
}
.choice-missed-en{
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  margin-left:auto;
  text-align:right;
  overflow-wrap:anywhere;
}
.set-card{
  --m:var(--info);
  --well:color-mix(in srgb, var(--ink) 5%, var(--card));
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:20px;
  margin:0 0 1.5rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  text-align:left;
}
.set-card[hidden]{ display:none; }
:root[data-theme="dark"] .set-card{ --well:color-mix(in srgb, #000 18%, var(--card)); }
.set-body{ display:contents; }
.set-card button:focus-visible,
.set-card a:focus-visible,
.set-card select:focus-visible{
  outline:2px solid var(--m);
  outline-offset:2px;
}
.set-grp{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.set-grp[hidden]{ display:none; }
.set-head{
  margin:0;
  font:600 15px 'Work Sans', sans-serif;
  color:var(--ink);
}
.set-aside{
  font:500 12px 'Work Sans', sans-serif;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.set-hint{
  margin:0;
  font:400 13px/1.45 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.set-hint[hidden]{ display:none; }
.set-intro{
  margin:0;
  font:400 14px/1.5 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.set-seg{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:3px;
  padding:3px;
  border-radius:12px;
  background:var(--well);
  border:1px solid var(--border);
}
.set-seg[hidden]{ display:none; }
.set-seg button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:0;
  padding:9px 8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--ink-soft);
  font:600 14px/1.25 'Work Sans', sans-serif;
  text-align:center;
  cursor:pointer;
}
.set-seg button[hidden]{ display:none; }
.set-seg button small{
  font:500 11px 'Work Sans', sans-serif;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.set-seg button:hover{ color:var(--ink); }
.set-seg button[aria-checked="true"]{
  background:var(--card);
  color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,0.18), inset 0 0 0 1px var(--border);
}
.set-seg button[aria-checked="true"] small{ color:var(--ink-soft); }
.set-seg.accent button[aria-checked="true"]{
  background:var(--m);
  color:var(--card);
  box-shadow:none;
}
@media (max-width:359px){
  .set-seg button{ font-size:13px; padding:9px 4px; }
}
.set-headrow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.set-links{ display:flex; gap:4px; }
.set-link{
  padding:2px 6px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--m);
  font:600 13px 'Work Sans', sans-serif;
  cursor:pointer;
}
.set-link:hover{ background:color-mix(in srgb, var(--m) 12%, transparent); }
.unit-tiles{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:7px;
}
@container (min-width:620px){
  .unit-tiles{ grid-template-columns:repeat(7, minmax(0, 1fr)); }
}
.unit-tile{
  --c:var(--m, var(--info));
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:52px;
  padding:6px 2px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.unit-tile b{ font:700 18px/1.1 'Work Sans', sans-serif; }
.unit-tile small{
  font:600 10.5px 'Work Sans', sans-serif;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.unit-tile:hover{ border-color:color-mix(in srgb, var(--m, var(--info)) 60%, var(--border)); }
.unit-tile.active{
  padding:5px 1px;
  border:2px solid var(--m, var(--info));
  background:color-mix(in srgb, var(--m, var(--info)) 14%, var(--card));
  color:var(--ink);
}
.unit-tile.active small{ color:var(--m, var(--info)); }
:root:not([data-theme="dark"]) .unit-tile.active small{
  color:color-mix(in srgb, var(--m, var(--info)) 65%, var(--ink));
}
.unit-tile-ignored{
  font:500 9.5px/1.15 'Work Sans', sans-serif;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.unit-tile-ignored[hidden]{ display:none; }
.unit-tile.is-empty,
.unit-tile.is-empty:hover{
  opacity:0.45;
  border-color:var(--border);
  cursor:default;
}
.set-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.set-start{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px 16px;
  border:0;
  border-radius:12px;
  background:var(--ink);
  color:var(--card);
  font:600 15px 'Work Sans', sans-serif;
  text-decoration:none;
  cursor:pointer;
}
.set-start svg{ width:17px; height:17px; }
a.set-start:hover{ background:var(--info); }
.set-start.is-changed{ background:var(--m); }
a.set-start.is-disabled{
  background:color-mix(in srgb, var(--ink) 25%, var(--card));
  pointer-events:none;
  cursor:default;
}
.set-foot{
  margin:0;
  text-align:center;
  font:400 12px/1.45 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.set-foot[hidden]{ display:none; }
.set-foot.is-ask{
  padding:8px 12px;
  border-radius:10px;
  background:color-mix(in srgb, var(--m) 12%, var(--card));
  color:var(--m);
  font:600 14px/1.45 'Work Sans', sans-serif;
}
.set-fold{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.set-fold:hover{ background:color-mix(in srgb, var(--m) 6%, transparent); }
.set-fold .set-head{ flex:1; }
.set-fold-chev{
  width:16px;
  height:16px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--ink-soft);
  transition:transform .15s;
}
.set-fold.is-open{
  border-radius:12px 12px 0 0;
  border-bottom-color:transparent;
}
.set-fold.is-open .set-fold-chev{ transform:rotate(180deg); }
.set-fold-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:-10px;
  padding:0 12px 12px;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 12px 12px;
}
.set-fold-body[hidden]{ display:none; }
.set-rows{
  display:grid;
grid-template-columns:minmax(0, 1fr);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--card);
}
@container (min-width:540px){
  .set-rows{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .set-rows .set-row:nth-child(odd){ border-right:1px solid var(--border); }
  .set-rows .set-row:nth-last-child(2):nth-child(odd){ border-bottom:0; }
}
.set-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 14px;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.set-rows .set-row:last-child{ border-bottom:0; }
@container (min-width:540px){
  .set-rows.set-rows-one{ grid-template-columns:minmax(0, 1fr); }
  .set-rows.set-rows-one .set-row:nth-child(odd){ border-right:0; }
}
.set-rows-one .set-row-name,
.set-rows-one .set-row:not(.is-on) .set-row-name{ font:600 15px 'Work Sans', sans-serif; color:var(--ink); }
.set-rows-one .set-row{ justify-content:center; }
.set-rows-one .set-row-txt{ flex:0 1 auto; }
@container (min-width:540px){
  .set-rows.set-radios{ grid-template-columns:minmax(0, 1fr); }
  .set-rows.set-radios .set-row:nth-child(odd){ border-right:0; }
  .set-rows.set-radios .set-row:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--border); }
}
.set-radio{
  flex:none;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  box-sizing:border-box;
  border:2px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius:50%;
}
.set-row.is-on .set-radio{ border-color:var(--m); }
.set-row.is-on .set-radio::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--m); }
.set-row:hover{ background:color-mix(in srgb, var(--m) 6%, transparent); }
.set-row-txt{
  display:flex;
  flex-direction:column;
  gap:1px;
  flex:1;
  min-width:0;
}
.set-row-name{ font:600 14px 'Work Sans', sans-serif; }
.set-row-desc{ font:400 12px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); }
.set-row:not(.is-on) .set-row-name{ color:var(--ink-soft); }
.set-switch{
  position:relative;
  flex:none;
  width:42px;
  height:25px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  transition:background .15s;
}
.set-switch::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:19px;
  height:19px;
  border-radius:999px;
  background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
  transition:transform .15s;
}
.set-row.is-on .set-switch{ background:var(--m); }
.set-row.is-on .set-switch::after{ transform:translateX(17px); }
.qp-games-row .qp-games-word{ color:var(--crimson); }
.qp-games-row.is-on .qp-games-word{ color:var(--success); }
.set-row.qp-games-row.is-on .set-switch{ background:var(--success); }
.set-row.qp-games-row:not(.is-on) .set-switch{ background:var(--crimson-soft); box-shadow:inset 0 0 0 1.5px var(--crimson); }
.set-row.qp-games-row:not(.is-on) .set-switch::after{ background:var(--crimson); box-shadow:none; }
.qp-always{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0;
  font:400 12.5px/1.45 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.qp-always svg{ width:14px; height:14px; margin-top:2px; color:var(--muted); }
.qp-always b{ font-weight:600; color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .set-switch, .set-switch::after, .set-fold-chev{ transition:none; }
}
@media (max-width:560px){
  .set-card{ padding:16px 14px; gap:20px; }
}
@media (min-width:760px){
  .wrap:has(#setupPanel){ padding-bottom:16px; }
  .wrap:has(#setupPanel) .set-card{ padding:24px; gap:22px; border-radius:17px; margin-bottom:0; }
  .wrap:has(#setupPanel) .set-intro{ font-size:15.5px; }
  .wrap:has(#setupPanel) .set-head{ font-size:16.5px; }
  .wrap:has(#setupPanel) .set-aside{ font-size:13px; }
  .wrap:has(#setupPanel) .set-link{ font-size:13.5px; }
  .wrap:has(#setupPanel) .unit-tiles{ gap:8px; }
  .wrap:has(#setupPanel) .unit-tile{ min-height:62px; border-radius:11px; gap:2px; }
  .wrap:has(#setupPanel) .unit-tile b{ font-size:22px; }
  .wrap:has(#setupPanel) .unit-tile small{ font-size:12px; }
  .wrap:has(#setupPanel) .set-start{ padding:15px 16px; font-size:16.5px; border-radius:13px; }
  .wrap:has(#setupPanel) .set-foot{ font-size:13px; }
  .wrap:has(#setupPanel) .set-card .set-hint{ font-size:13.5px; }
  .wrap:has(#setupPanel) .set-card .set-seg button{ padding:10px 8px; font-size:15px; }
  .wrap:has(#setupPanel) .set-card .set-seg button small{ font-size:11.5px; }
  .wrap:has(#setupPanel) .set-card .set-foot.is-ask{ font-size:15px; }
}
@media (min-width:760px) and (min-height:780px){
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))){ padding-bottom:16px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card{ padding:28px; gap:26px; border-radius:18px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-intro{ font-size:16.5px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-head{ font-size:18px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-aside{ font-size:14px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-link{ font-size:14px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tiles{ gap:10px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tile{ min-height:74px; border-radius:12px; gap:3px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tile b{ font-size:26px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tile small{ font-size:13px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-start{ padding:17px 16px; font-size:17.5px; border-radius:14px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-start svg{ width:19px; height:19px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-hint{ font-size:14.5px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-seg{ padding:4px; border-radius:13px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-seg button{ padding:12px 10px; font-size:16px; border-radius:10px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-seg button small{ font-size:12.5px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-fold{ padding:15px 16px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-foot.is-ask{ font-size:15.5px; padding:10px 14px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-foot{ font-size:14px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) header h1{ font-size:2.1rem; }
}
@media (max-width:759px){
  .wrap:has(#setupPanel){ padding-top:20px; padding-bottom:12px; }
  .wrap:has(#setupPanel) .set-card{ margin-bottom:0; gap:16px; }
}
@media (max-width:759px){
  .wrap:has(#setupPanel) .set-card{ padding-left:16px; padding-right:16px; }
  .wrap:has(#setupPanel) .set-intro{ font-size:14.5px; }
  .wrap:has(#setupPanel) .unit-tile{ min-height:54px; }
  .wrap:has(#setupPanel) .unit-tile b{ font-size:20px; }
  .wrap:has(#setupPanel) .unit-tile small{ font-size:11.5px; }
}
@media (max-width:759px) and (min-height:700px){
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card{ padding:20px 18px; gap:24px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-intro{ font-size:15px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-head{ font-size:16px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-aside{ font-size:13px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-link{ font-size:14px; padding:4px 8px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:9px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tile{ min-height:64px; border-radius:12px; gap:2px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tile b{ font-size:23px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .unit-tile small{ font-size:12px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-seg button{ padding:11px 6px; font-size:14.5px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-seg button small{ font-size:11.5px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-hint{ font-size:14px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-start{ padding:15px 16px; font-size:16.5px; border-radius:13px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-foot{ font-size:13px; }
  .wrap:has(#setupPanel):not(:has(.set-card .set-grp:not([hidden]) .set-seg:not([hidden]))) .set-card .set-foot.is-ask{ font-size:15px; }
}
#qpSettings.qp-set-review{ --m:var(--success); }
#qpSettings .set-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  margin:-9px -20px -20px;
  padding:12px 20px 20px;
  background:var(--card);
  border-top:1px solid var(--border);
  border-radius:0 0 15px 15px;
  box-shadow:0 -10px 18px -12px rgba(0, 0, 0, .35);
}
@media (max-width:560px){
  #qpSettings .set-actions{ margin:-9px -14px -16px; padding:12px 14px 16px; }
}
#qpSettings .set-start.is-blocked{ background:var(--m); }
#qpSettings .qp-units-ask{
margin:-8px;
  padding:8px;
  border-radius:14px;
  box-shadow:0 0 0 2px var(--m);
}
@media (prefers-reduced-motion:no-preference){
  #qpSettings .qp-units-ask{ animation:qp-units-ask .7s ease-in-out 2; }
}
@keyframes qp-units-ask{
  50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--m) 35%, transparent); }
}
#qpSettings svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.qp-set-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.qp-set-title h2{
  margin:0;
  font:700 22px/1.1 'Work Sans', sans-serif;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.qp-set-icon{ width:20px; height:20px; color:var(--m); }
.qp-floor-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
}
.qp-floor-row .set-hint{ flex:1; min-width:180px; }
.qp-pick{
  position:relative;
  display:inline-flex;
  max-width:100%;
}
.qp-set-select{
  -webkit-appearance:none;
  appearance:none;
  max-width:100%;
  padding:9px 38px 9px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--well);
  color:var(--ink);
  font:600 14px 'Work Sans', sans-serif;
  cursor:pointer;
}
.qp-pick svg{
  position:absolute;
  right:12px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  color:var(--ink-soft);
  pointer-events:none;
}
.qp-start{
  --qps-c:var(--success);
  --qps-well:color-mix(in srgb, var(--ink) 5%, var(--card));
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:4px 0 6px;
  text-align:center;
}
:root[data-theme="dark"] .qp-start{ --qps-well:color-mix(in srgb, #000 18%, var(--card)); }
.qp-start.is-kanji{ --qps-c:var(--info); }
.qps-head{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.qps-title{
  margin:0;
  font-family:'Work Sans', sans-serif;
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.qps-go{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
.qps-start{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:360px;
  max-width:100%;
  height:90px;
  border:none;
  border-radius:999px;
  background:var(--qps-c);
  color:var(--card);
  font-family:'Work Sans', sans-serif;
  font-size:28px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 22px color-mix(in srgb, var(--qps-c) 32%, transparent);
}
.qps-start svg{ width:28px; height:28px; fill:currentColor; flex:none; }
.qps-start:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.qps-kbd{
  margin:0;
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}
.qps-kbd kbd{
  font:inherit;
  color:var(--ink-soft);
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:5px;
  padding:1px 6px;
}
@media (hover:none){ .qps-kbd{ display:none; } }
.qps-info{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.qps-info.is-three{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.qps-box{
  min-height:86px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  padding:10px 8px;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:12px;
  background:var(--qps-well);
  font-family:'Work Sans', sans-serif;
}
.qps-label{ font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.2; }
.qps-value{
  display:block;
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.qps-value svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.qps-streak .qps-value{ display:inline-flex; align-items:center; gap:6px; color:color-mix(in srgb, var(--accent) 75%, var(--ink-soft)); }
.qps-box > *{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qps-rank .qps-rank-place{ font-size:17px; display:block; }
@media (min-width:561px) and (max-width:759px){
  .qps-box{ min-height:102px; }
  .qps-rank .qps-rank-place{ font-size:15px; }
  .qps-box > .qps-note,
  .qps-box > .qps-rank-none{
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
  }
}
.qps-rank.is-gold .qps-rank-place{ color:color-mix(in srgb, var(--gold) 85%, var(--ink-soft)); }
.qps-rank-none{ font-size:13px; }
.qps-note{ font-size:11.5px; font-weight:500; line-height:1.3; color:var(--muted); }
.qps-note b{ font-weight:600; color:var(--ink-soft); }
.qps-signup{
  padding:0;
  border:none;
  background:none;
  font-family:'Work Sans', sans-serif;
  font-size:11.5px;
  font-weight:600;
  color:var(--info);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.qps-bar{
  display:flex;
  width:80%;
  max-width:130px;
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
}
.qps-bar i{ display:block; height:100%; background:color-mix(in srgb, var(--qps-c) 70%, var(--muted)); }
@media (max-width:560px){
  .qps-title{ font-size:25px; }
  .qps-start{ width:100%; max-width:330px; height:80px; font-size:27px; }
  .qps-start svg{ width:27px; height:27px; }
  .qps-info,
  .qps-info.is-three{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .qps-info > .qps-streak,
  .qps-info > .qps-rank{ display:none; }
  .qps-box{ min-height:0; padding:10px 6px; }
}
@media (max-width:560px) and (max-height:620px){
  .qp-start{ gap:10px; padding:0; }
  .qps-head{ gap:8px; }
  .qps-title{ font-size:23px; }
  .qps-start{ height:68px; font-size:24px; }
  .qps-box{ padding:8px 6px; gap:5px; }
}
@media (prefers-reduced-motion:no-preference){
  .qps-start{ transition:transform .12s ease, box-shadow .12s ease; }
  .qps-start:active{ transform:translateY(1px); }
.qps-start:active::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .qps-start:hover{ transform:translateY(-1px); box-shadow:0 9px 28px color-mix(in srgb, var(--qps-c) 40%, transparent); }
  .qps-start:hover:active{ transform:translateY(1px); }
.qps-start:hover::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
}
.qp-start{ position:relative; --qps-review:linear-gradient(135deg, var(--success), var(--teal)); }
.qp-page :is(#qpStage, .rf-stage).qp-is-start{
  position:relative;
  --qpe-well:color-mix(in srgb, var(--ink) 5%, var(--card));
}
:root[data-theme="dark"] .qp-page :is(#qpStage, .rf-stage).qp-is-start{ --qpe-well:color-mix(in srgb, #000 18%, var(--card)); }
.qps-modes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  width:100%;
  max-width:380px;
  padding:3px;
  border-radius:12px;
  background:var(--qps-well);
  border:1px solid var(--border);
}
.qps-modes button{
  min-width:0;
  padding:9px 6px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--ink-soft);
  font:600 14px/1.25 'Work Sans', sans-serif;
  cursor:pointer;
}
.qps-modes button[aria-checked="true"]{ background:var(--qps-c); color:var(--card); }
.qps-modes button[data-mode="review"][aria-checked="true"]{ background:var(--qps-review); }
.qps-modes button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){ .qps-modes button[aria-checked="false"]:hover{ color:var(--ink); } }
.qp-start.is-review .qps-start{
  background:var(--qps-review);
  box-shadow:0 6px 22px color-mix(in srgb, var(--success) 32%, transparent);
}
.qps-start .qps-again{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .qp-start.is-review .qps-start:hover{ box-shadow:0 9px 28px color-mix(in srgb, var(--success) 40%, transparent); }
}
.qps-start.is-choose{
  background:transparent;
  color:var(--success);
  border:2px solid var(--success);
  box-shadow:none;
  font-size:22px;
  gap:10px;
  white-space:nowrap;
}
.qp-start.is-review .qps-start.is-choose{ background:transparent; box-shadow:none; }
.qps-start.is-choose svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.qps-blocked{
  margin:0;
  max-width:420px;
  font:500 15px/1.45 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.qps-units{ margin:0; font:500 13px/1.3 'Work Sans', sans-serif; color:var(--muted); }
.qps-units.is-none{ color:var(--ink-soft); }
.qps-link{
  padding:0;
  border:0;
  background:none;
  font:600 13px 'Work Sans', sans-serif;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.qps-units.is-none .qps-link{ color:var(--success); }
.qps-foot{ width:100%; }
.qps-book-pick{ position:absolute; left:0; top:0; z-index:2; }
.qps-book-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 11px 0 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--qps-well);
  color:var(--ink-soft);
  font:600 14.5px 'Work Sans', sans-serif;
  cursor:pointer;
}
.qps-book-btn svg{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.qps-book-btn .qps-book-ic{ width:16px; height:16px; stroke-width:1.8; opacity:0.85; }
.qps-book-btn .qps-chev{ width:14px; height:14px; stroke-width:2.2; }
.qps-book-btn[aria-expanded="true"]{ color:var(--ink); }
.qps-book-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .qps-book-btn:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--ink) 25%, var(--border)); }
}
.qps-book-menu{
  position:absolute;
  left:0;
  top:calc(100% + 4px);
  display:flex;
  flex-direction:column;
  min-width:120px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  text-align:left;
}
.qps-book-menu[hidden]{ display:none; }
.qps-book-menu a{
  display:block;
  padding:8px 10px;
  text-decoration:none;
  border:0;
  border-radius:7px;
  background:none;
  color:var(--ink-soft);
  font:600 13.5px 'Work Sans', sans-serif;
  text-align:left;
  cursor:pointer;
}
.qps-book-menu a[aria-checked="true"]{ color:var(--ink); }
.qps-book-menu a[aria-checked="true"]::after{ content:" \2713"; color:var(--qps-c); }
.qps-book-menu a:hover,
.qps-book-menu a:focus-visible{ background:var(--qps-well); color:var(--ink); outline:none; }
button.qps-box{ font:inherit; color:inherit; text-align:center; cursor:pointer; }
button.qps-box:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){ button.qps-box:hover{ border-color:color-mix(in srgb, var(--qps-c) 45%, var(--border)); } }
@media (max-width:560px){
  .qps-foot{ position:relative; }
  .qps-book-pick{ left:calc(50% + 4px); right:0; top:auto; bottom:100%; margin-bottom:6px; display:flex; justify-content:center; }
  .qps-book-btn{ height:30px; gap:6px; padding:0 9px 0 10px; font-size:13.5px; }
  .qps-book-btn .qps-book-ic{ width:15px; height:15px; }
  .qps-book-menu{ left:50%; top:auto; bottom:calc(100% + 4px); transform:translateX(-50%); }
  .qps-start.is-choose{ font-size:19px; }
}
@media (max-width:560px) and (max-height:620px){
  .qps-start.is-choose{ font-size:17px; gap:8px; }
}
@media (max-width:359px){
  .qps-modes button{ font-size:13px; padding:9px 4px; }
  .qps-start.is-choose{ font-size:17px; gap:8px; }
}
.qp-end{
  --qpe-c:var(--success);
  --qpe-well:color-mix(in srgb, var(--ink) 5%, var(--card));
  --qpe-ring:200px;
}
.qp-end.is-kanji{ --qpe-c:var(--info); }
:root[data-theme="dark"] .qp-end{ --qpe-well:color-mix(in srgb, #000 18%, var(--card)); }
.qp-page #qpSummary.qp-end{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  height:var(--qp-karuta-h);
  padding:16px 20px 14px;
  margin-bottom:10px;
  text-align:left;
  overflow:hidden;
}
.qp-page #qpSummary.qp-end[hidden]{ display:none; }
@media (min-width:760px) and (min-height:780px){
  .qp-end{ --qpe-ring:220px; }
}
.qpe-rA{ --rc:var(--success); }
.qpe-rB{ --rc:var(--grade-b); }
.qpe-rC{ --rc:var(--gold); }
.qpe-rD{ --rc:var(--grade-d); }
.qpe-rF{ --rc:var(--accent); }
.qpe-rN{ --rc:color-mix(in srgb, var(--ink) 22%, transparent); }
.qpe-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:270px minmax(0, 1fr);
  gap:0 20px;
}
.qp-end:not(.has-ring) .qpe-body{ grid-template-columns:minmax(0, 1fr); }
.qpe-left{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px;
  border-radius:16px;
  cursor:pointer;
}
@media (hover:hover){ .qpe-left:hover{ background:var(--qpe-well); } }
.qpe-ring{ position:relative; width:var(--qpe-ring); height:var(--qpe-ring); flex:none; }
.qpe-ring svg{ display:block; width:100%; height:100%; transform:rotate(-90deg); }
.qpe-track{ fill:none; stroke:color-mix(in srgb, var(--ink) 9%, transparent); stroke-width:11; }
.qpe-seg{ fill:none; stroke:var(--rc); stroke-width:11; }
.qpe-mid{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 30px;
}
.qpe-mid b{ font:800 44px/1 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:-.02em; }
.qpe-mid b small{ font-size:22px; }
.qpe-mid > span{ margin-top:5px; font:600 13px/1.25 'Work Sans', sans-serif; color:var(--ink-soft); }
.qpe-pill{
  margin-top:8px;
  padding:3px 10px;
  border-radius:999px;
  font:700 12px 'Work Sans', sans-serif;
  white-space:nowrap;
}
.qpe-pill-up{ color:var(--success); background:color-mix(in srgb, var(--success) 15%, var(--card)); }
.qpe-pill-miss{ color:var(--accent); background:color-mix(in srgb, var(--accent) 11%, var(--card)); }
.qpe-side{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.qpe-legend{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:3px 7px;
  font:500 13px 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.qpe-legend b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.qpe-sw{ display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--success); flex:none; }
.qpe-ulgh .qpe-sw{ background:var(--rc); }
.qpe-gain{ margin-left:4px; font-style:normal; font-weight:700; color:var(--success); }
.qpe-dot{ color:var(--muted); }
.qpe-info{
  width:18px;
  height:18px;
  padding:0;
  border:1.5px solid var(--muted);
  border-radius:50%;
  background:none;
  color:var(--ink-soft);
  font:700 11px/1 Georgia, serif;
  font-style:italic;
  cursor:pointer;
}
.qpe-info[aria-expanded="true"]{ border-color:var(--ink-soft); color:var(--ink); }
.qpe-break{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:max-content;
  max-width:240px;
  padding:7px 11px;
  border-radius:10px;
  background:var(--ink);
  color:var(--card);
  font:500 12px/1.35 'Work Sans', sans-serif;
  text-align:center;
}
.qpe-break[hidden]{ display:none; }
@media (hover:hover){
  .qpe-info:hover + .qpe-break[hidden]{ display:block; }
}
.qpe-seeall{
  padding:2px 4px;
  border:none;
  background:none;
  color:var(--qpe-c);
  font:600 13px 'Work Sans', sans-serif;
  cursor:pointer;
}
.qpe-seeall:focus-visible, .qpe-info:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:6px; }
.qpe-right{ min-width:0; min-height:0; display:flex; flex-direction:column; }
.qpe-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.qpe-head-ph{ display:none; }
.qpe-head-l{ min-width:0; }
.qpe-title{
  margin:0;
  font:700 26px/1.15 'Work Sans', sans-serif;
  letter-spacing:-.015em;
  color:var(--ink);
}
.qpe-tjp{ font-family:'Noto Sans JP', sans-serif; font-weight:600; }  
.qpe-ten{ font-size:.62em; font-weight:600; color:var(--ink-soft); letter-spacing:0; }
.qpe-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.qpe-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font:600 12px 'Work Sans', sans-serif;
  color:var(--ink-soft);
  white-space:nowrap;
}
.qpe-tag svg{ width:14px; height:14px; fill:currentColor; flex:none; }
.qpe-tag-streak svg{ color:var(--accent); }
.qpe-tag-new{ color:var(--qpe-c); border-color:color-mix(in srgb, var(--qpe-c) 40%, var(--border)); background:color-mix(in srgb, var(--qpe-c) 9%, var(--card)); }
.qpe-score{ flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.qpe-score b{ font:800 30px/1 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; color:var(--qpe-c); }
.qpe-score b span{ font-size:16px; font-weight:600; color:var(--muted); }
.qpe-score small{ margin-top:4px; font:600 10.5px 'Work Sans', sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.qpe-words{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  margin-top:12px;
  padding:2px 4px 4px 2px;
}
.qpe-words .qpe-cut{ display:none; }
.qpe-more{
  align-self:center;
  padding:4px 11px;
  border:1px dashed var(--border);
  border-radius:999px;
  background:none;
  color:var(--info);
  font:600 13px/1.3 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.qpe-cards > .qpe-more{ border-radius:12px; }
.qpe-more:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){ .qpe-more:hover{ background:var(--qpe-well); } }
.qpe-all .qpe-ulb{ padding-top:12px; }
.qpe-all .qpe-chips:last-child, .qpe-all .qpe-cards:last-child{ margin-bottom:0; }
.qpe-lab{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font:600 10.5px 'Work Sans', sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.qpe-lab b{ font-size:13px; letter-spacing:0; color:var(--ink-soft); }
.qpe-lab-miss b{ color:var(--accent); }
.qpe-lab-ok b{ color:var(--success); }
.qpe-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:5px 0 9px; }
.qpe-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:6px 9px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.qpe-card-top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; min-width:0; }
.qpe-w{ font:600 18px/1.2 'Noto Sans JP', sans-serif; white-space:nowrap; }
.qpe-card.is-long .qpe-w{ font-size:15px; }
.qpe-rd{ font:400 11.5px 'Noto Sans JP', sans-serif; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.qpe-marks{ display:inline-flex; gap:3px; margin-left:auto; flex:none; align-self:center; }
.qpe-marks i{ width:8px; height:8px; border-radius:50%; }
.qpe-marks i.is-ok{ background:var(--success); }
.qpe-marks i.is-no{ background:var(--accent); }
.qpe-why{ font:500 12px/1.3 'Work Sans', 'Noto Sans JP', sans-serif; color:var(--ink-soft); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.qpe-why b{ font-weight:600; color:var(--accent); }
.qpe-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:2px 0 8px; }
.qpe-chips .qpe-lab{ margin-right:2px; }
.qpe-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--ink);
  font:500 15px/1.3 'Noto Sans JP', sans-serif;
  cursor:pointer;
}
.qpe-chip.is-up{ border-color:color-mix(in srgb, var(--success) 45%, var(--border)); background:color-mix(in srgb, var(--success) 10%, var(--card)); }
.qpe-up{ font:700 11px 'Work Sans', sans-serif; color:var(--success); white-space:nowrap; }
.qpe-pb{ font:600 11px 'Work Sans', sans-serif; color:var(--info); white-space:nowrap; }
.qpe-none{ margin:8px 0; font:500 14px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qpe-card:focus-visible, .qpe-chip:focus-visible, .qpe-uchip:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover){
  .qpe-card:hover, .qpe-chip:hover, .qpe-uchip:hover{ background:var(--qpe-well); }
}
.qpe-strip{
  flex:none;
  display:flex;
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.qpe-sec{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; padding:0 14px; }
.qpe-sec:first-child{ padding-left:2px; }
.qpe-sec + .qpe-sec{ border-left:1px solid var(--border); }
.qpe-k{ font:600 10.5px 'Work Sans', sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qpe-k-info{ color:var(--info); }
.qpe-v{ display:flex; align-items:center; gap:8px; min-width:0; min-height:20px; }
.qpe-v b{ font:700 16px/1 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.qpe-v b small{ font-size:12.5px; font-weight:500; color:var(--muted); }
.qpe-v em{ font:500 12.5px/1.2 'Work Sans', sans-serif; font-style:normal; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.qpe-v em b{ font-size:inherit; white-space:normal; }
.qpe-gold > b{ color:var(--gold); }
.qpe-dots{ display:inline-flex; gap:5px; flex:none; }
.qpe-dots i{ width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); }
.qpe-dots i.is-full{ background:var(--qpe-c); box-shadow:none; }
.qpe-gbar{ position:relative; flex:1 1 auto; min-width:40px; height:6px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.qpe-gbar i{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; }
.qpe-gbar-now{ background:color-mix(in srgb, var(--qpe-c) 45%, transparent); }
.qpe-gbar-was{ background:var(--qpe-c); }
.qpe-gbar.is-done .qpe-gbar-now, .qpe-gbar.is-done .qpe-gbar-was{ background:var(--success); }
.qpe-signup{
  flex:none;
  padding:4px 12px;
  border-radius:999px;
  background:var(--info);
  color:var(--card);
  font:700 12.5px 'Work Sans', sans-serif;
  text-decoration:none;
}
.qpe-lblink{ font:600 12.5px 'Work Sans', sans-serif; color:var(--ink-soft); text-decoration:none; }
.qpe-skel{ display:block; width:110px; height:10px; border-radius:999px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.qpe-go{
  flex:none;
  display:flex;
  justify-content:center;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.qpe-go-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:400px;
  max-width:100%;
  min-height:62px;
  padding:9px 36px;
  border:none;
  border-radius:999px;
  background:var(--qpe-c);
  color:var(--card);
  cursor:pointer;
  box-shadow:0 6px 22px color-mix(in srgb, var(--qpe-c) 32%, transparent);
}
.qpe-go-btn svg{ width:22px; height:22px; fill:currentColor; flex:none; }
.qpe-go-btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.qpe-go-lbls{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; line-height:1.1; }
.qpe-go-label{ font:700 22px/1.1 'Work Sans', sans-serif; }
.qpe-go-why{ display:block; max-width:100%; margin-top:3px; font:600 13px/1.2 'Work Sans', 'Noto Sans JP', sans-serif; opacity:.86; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qpe-go-why[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .qpe-go-btn{ transition:transform .12s ease, box-shadow .12s ease; }
  .qpe-go-btn:active{ transform:translateY(1px) scale(.98); }
.qpe-go-btn:active::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .qpe-go-btn:hover{ transform:translateY(-1px); box-shadow:0 9px 28px color-mix(in srgb, var(--qpe-c) 40%, transparent); }
.qpe-go-btn:hover::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
}
.qpe-ovl{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-radius:inherit;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
}
.qpe-ulist{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:640px;
  max-height:100%;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.qpe-ulh{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 10px 16px; border-bottom:1px solid var(--border); }
.qpe-ulh b{ display:block; font:700 17px 'Work Sans', sans-serif; color:var(--ink); }
.qpe-ulh span{ font:500 12.5px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qpe-ulh strong{ color:var(--success); }
.qpe-x{ width:34px; height:34px; flex:none; border:none; border-radius:50%; background:var(--qpe-well); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.qpe-ulb{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 16px 12px; }
.qpe-ulg + .qpe-ulg{ margin-top:10px; }
.qpe-ulgh{ display:flex; align-items:center; gap:7px; font:600 12px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qpe-ulgh b{ color:var(--muted); font-weight:600; }
.qpe-ulc{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.qpe-uchip{
  padding:3px 10px;
  border:1px solid color-mix(in srgb, var(--rc) 35%, var(--border));
  border-radius:999px;
  background:color-mix(in srgb, var(--rc) 9%, var(--card));
  color:var(--ink);
  font:500 14.5px/1.3 'Noto Sans JP', sans-serif;
  cursor:pointer;
}
.qpe-uchip.qpe-rN{ border-style:dashed; border-color:var(--border); background:var(--card); color:var(--muted); }
.qpe-uchip.is-ses{ box-shadow:0 0 0 2px var(--ink); }
.qpe-ulf{ display:flex; align-items:center; gap:8px; padding:8px 16px 10px; border-top:1px solid var(--border); font:500 12px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qpe-seskey{ width:16px; height:12px; border-radius:999px; box-shadow:0 0 0 2px var(--ink); }
.qpe-tip{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:8px 8px 8px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  font:500 13px/1.35 'Work Sans', 'Noto Sans JP', sans-serif;
  color:var(--ink-soft);
  text-align:left;
}
.qpe-tip[hidden], .qp-end[hidden] ~ .qpe-tip{ display:none; }
.qpe-tip-ic{ width:17px; height:17px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qpe-tip-lb{ flex:none; font:700 10.5px 'Work Sans', sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.qpe-tip-tx{ flex:1 1 auto; min-width:0; }
.qpe-tip-tx b{ color:var(--ink); font-weight:600; }
.qpe-tip-tx kbd{ font:600 11px 'Work Sans', sans-serif; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:0 5px; color:var(--ink); }
.qpe-tip-set{ padding:0; border:none; background:none; color:var(--info); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }
.qpe-tip-next{ flex:none; width:30px; height:30px; border:none; border-radius:50%; background:none; color:var(--ink-soft); font-size:22px; line-height:1; cursor:pointer; }
@media (hover:hover){ .qpe-tip-next:hover{ background:var(--qpe-well, color-mix(in srgb, var(--ink) 6%, var(--card))); } }
.qp-gear.qp-glow{ box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 45%, transparent); }
@media (prefers-reduced-motion:no-preference){
  .qp-gear.qp-glow{ animation:qpe-glow 1.6s ease-out 1; }
  @keyframes qpe-glow{
    0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--info) 60%, transparent); }
    40%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--info) 35%, transparent); }
    100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 0%, transparent); }
  }
}
@media (min-width:760px) and (max-height:779px){
  .qp-end{ --qpe-ring:172px; }
  .qpe-body{ grid-template-columns:220px minmax(0, 1fr); }
  .qpe-mid b{ font-size:36px; }
  .qpe-mid{ padding:0 24px; }
.qpe-rd{ display:none; }
  .qpe-go-btn{ min-height:56px; }
}
@media (max-width:759px){
  .qp-end{ --qpe-ring:100px; }
  .qp-page #qpSummary.qp-end{ padding:14px 14px 12px; }
  .qpe-body{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); gap:0; }
.qpe-left{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title title score"
      "ring  .     ."
      "ring  tags  tags"
      "ring  legend legend"
      "ring  seeall seeall"
      "ring  .     .";
    grid-template-rows:auto 1fr auto auto auto 1fr;
    column-gap:16px;
    padding:0;
    border-radius:12px;
  }
  .qpe-side, .qpe-head-ph, .qpe-head-ph .qpe-head-l{ display:contents; }
  .qpe-head-ph .qpe-title{ grid-area:title; align-self:center; margin-bottom:10px; }
  .qpe-head-ph .qpe-score{ grid-area:score; align-self:start; margin-bottom:10px; }
  .qpe-head-ph .qpe-tags{ grid-area:tags; margin:0 0 6px; }
  .qpe-tag-more{ display:none; }
  .qpe-ring{ grid-area:ring; align-self:center; }
  .qpe-legend{ grid-area:legend; justify-content:flex-start; font-size:13px; gap:3px 7px; }
  .qpe-seeall{ grid-area:seeall; justify-self:start; margin-top:5px; padding:0; font-size:13px; }
  .qpe-mid{ padding:0 16px; }
  .qpe-mid b{ font-size:30px; }
  .qpe-mid b small{ font-size:15px; }
  .qpe-mid > span, .qpe-mid .qpe-pill{ display:none; }
  .qpe-right > .qpe-head{ display:none; }
  .qpe-title{ font-size:21px; }
  .qpe-tags{ margin-top:6px; gap:5px; }
  .qpe-tag{ padding:2px 8px; font-size:11px; }
  .qpe-score b{ font-size:26px; }
  .qpe-score b span{ font-size:14px; }
  .qpe-break{ left:0; transform:none; }
.qpe-words{ flex:0 1 auto; margin-top:16px; }
  .qpe-words + .qpe-banner, .qpe-words + .qpe-strip{ margin-top:auto; }
  .qpe-chips{ gap:6px; margin-bottom:9px; }
  .qpe-cards{ gap:5px; }
  .qpe-card{ padding:5px 7px; }
  .qpe-w{ font-size:16px; }
  .qpe-card.is-long .qpe-w{ font-size:12.5px; }
  .qpe-rd{ display:none; }
  .qpe-why{ font-size:11px; }
.qpe-say{ display:none; }
  .qpe-chip{ padding:3px 9px; font-size:14px; }
  .qpe-sec{ padding:0 8px; }
  .qpe-strip{ padding-top:10px; }
  .qpe-banner{ margin-bottom:10px; }
.qpe-k .qpe-k-long{ display:none; }
  .qpe-k .qpe-k-short{ display:inline; }
  .qpe-today{ flex:0 0 auto; }
  .qpe-board .qpe-signup + em{ display:none; }
  .qpe-week .qpe-v{ flex-wrap:wrap; gap:4px 8px; }
  .qpe-week .qpe-gbar{ flex-basis:100%; }
  .qpe-week .qpe-v em{ display:none; }
.qpe-board .qpe-v{ align-items:flex-start; }
  .qpe-board .qpe-v em{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:11px; line-height:1.25; }
  .qpe-go{ margin-top:10px; padding-top:12px; }
  .qpe-go-btn{ width:100%; min-height:58px; padding:8px 18px; }
  .qpe-go-label{ font-size:20px; }
}
.qpe-k-short{ display:none; }
@media (max-width:759px) and (max-height:779px){
  .qp-end{ --qpe-ring:88px; }
  .qpe-mid b{ font-size:26px; }
  .qpe-head-ph .qpe-title, .qpe-head-ph .qpe-score{ margin-bottom:6px; }
  .qpe-head-ph .qpe-tags{ flex-wrap:nowrap; }
  .qpe-tag{ padding:1px 7px; font-size:10.5px; }
  .qpe-words{ margin-top:10px; }
}
@media (max-width:759px) and (min-height:780px){
  .qp-end{ --qpe-ring:124px; }
  .qpe-mid b{ font-size:34px; }
}
@media (max-width:560px){
  .qp-page #qpSummary.qp-end{ height:calc(var(--qp-karuta-h) - 64px); margin-bottom:6px; }
  .qpe-tip{ gap:6px; margin-bottom:6px; padding:5px 4px 5px 10px; font-size:11.5px; line-height:1.3; }
  .qpe-tip-lb{ display:none; }
  .qpe-tip-tx{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .qpe-tip-next{ width:26px; height:26px; }
}
@media (max-width:560px) and (max-height:620px){
  .qp-page #qpSummary.qp-end{ height:var(--qp-karuta-h); }
  .qpe-tip{ display:none; }
}
@media (max-width:374px){
  .qpe-today .qpe-v em{ display:none; }
}
@media (max-width:560px) and (max-height:620px){
  .qp-end{ --qpe-ring:78px; }
  .qpe-mid b{ font-size:20px; }
  .qpe-mid b small{ font-size:12px; }
  .qpe-left{ gap:10px; }
  .qpe-title{ font-size:15.5px; }
  .qpe-tjp + .qpe-ten{ display:none; }
  .qpe-tags{ gap:3px; margin-top:4px; }
  .qpe-dots{ gap:4px; }
  .qpe-dots i{ width:9px; height:9px; }
  .qpe-tag{ padding:1px 7px; font-size:10.5px; }
  .qpe-tag svg{ width:12px; height:12px; }
  .qpe-score b{ font-size:20px; }
  .qpe-score small{ font-size:9.5px; }
  .qpe-legend{ font-size:11px; }
  .qpe-seeall{ font-size:11px; }
  .qpe-words{ margin-top:6px; }
  .qpe-cards{ margin:4px 0 8px; }
  .qpe-k{ font-size:9.5px; }
  .qpe-v b{ font-size:14px; }
  .qpe-go{ margin-top:8px; padding-top:8px; }
  .qpe-go-btn{ min-height:46px; padding:6px 16px; }
  .qpe-go-label{ font-size:18px; }
  .qpe-go-why{ font-size:12px; }
}
.qp-page{ position:relative; }
.qp-page #qpSummary.qp-end{ position:relative; }
.qpe-skip{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  text-align:center;
  font:500 10px/12px 'Work Sans', sans-serif;
  color:var(--muted);
  pointer-events:none;
}
.qpe-skip[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .qpe-reveal .qpe-card,
  .qpe-reveal .qpe-chip{ opacity:0; transform:translateY(6px) scale(.96); }
.qpe-reveal:not(.qpe-landed) .qpe-more{ opacity:0; }
  .qpe-reveal.qpe-landed .qpe-more{ transition:opacity .22s ease; }
  .qpe-reveal .qpe-card.is-in,
  .qpe-reveal .qpe-chip.is-in{ opacity:1; transform:none; transition:opacity .22s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
.qpe-reveal .qpe-chip.is-up:not(.is-lit){ border-color:var(--border); background:var(--card); }
  .qpe-reveal .qpe-chip.is-up:not(.is-lit) .qpe-up,
  .qpe-reveal .qpe-card:not(.is-lit) .qpe-up{ opacity:0; }
  .qpe-chip.is-lit, .qpe-card.is-lit{ animation:qpe-burst .45s ease-out 1; }
  @keyframes qpe-burst{
    0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
    100%{ box-shadow:0 0 0 10px color-mix(in srgb, var(--success) 0%, transparent); }
  }
  .qpe-reveal:not(.qpe-landed) .qpe-pill,
  .qpe-reveal:not(.qpe-landed) .qpe-gain{ opacity:0; transform:scale(.6); }
  .qpe-landed .qpe-pill, .qpe-landed .qpe-gain{ animation:qpe-pop .4s cubic-bezier(.3,1.6,.5,1) both; }
  .qpe-grow .qpe-seg{ transition:stroke-dasharray .8s cubic-bezier(.3,.8,.3,1), stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1); }
.qpe-reveal:not(.qpe-landed) .qpe-dots i.is-new{ background:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); }
  .qpe-dots i.is-pop{ animation:qpe-pop .45s cubic-bezier(.3,1.6,.5,1) 1; }
  @keyframes qpe-pop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.25); opacity:1; } 100%{ transform:none; } }
  .qpe-gbar-now{ transition:width .7s cubic-bezier(.3,.8,.3,1); }
.qpe-go-btn.qpe-hop{ animation:qpe-hop 3.2s ease-in-out .6s infinite; }
  .qpe-go-btn.qpe-hop:hover, .qpe-go-btn.qpe-hop:focus-visible{ animation-play-state:paused; }
  @keyframes qpe-hop{
    0%, 22%, 100%{ transform:none; }
    5%{ transform:translateY(-8px) scale(1.02, .98); }
    10%{ transform:translateY(0) scale(1.04, .95); }
    14%{ transform:translateY(-3px); }
    18%{ transform:translateY(0); }
  }
.qp-end.qpe-shake{ animation:qpe-shake .38s ease-in-out var(--qpe-shake-at, .32s) 1; }
  @keyframes qpe-shake{ 0%, 100%{ transform:none; } 20%{ transform:translate(-5px, 2px); } 40%{ transform:translate(5px, -2px); } 60%{ transform:translate(-3px, 1px); } 80%{ transform:translate(2px, 0); } }
}
.qpe-seal-done{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0 26px;
  text-align:center;
  opacity:0;
  transform:scale(.6);
  pointer-events:none;
}
.qpe-ck{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--success); color:var(--card);
  font:800 24px/1 'Work Sans', sans-serif;
}
.qpe-seal-done b{ font:800 17px/1.15 'Work Sans', sans-serif; color:var(--ink); }
.qpe-seal-done > span:last-child{ font:600 11px/1.3 'Work Sans', sans-serif; color:var(--success); }
.qpe-ring.is-complete .qpe-seal-done{ opacity:1; transform:none; }
.qpe-ring.is-complete .qpe-mid{ opacity:0; }
.qpe-ring.is-complete svg{ filter:drop-shadow(0 0 10px color-mix(in srgb, var(--success) 45%, transparent)); }
@media (prefers-reduced-motion:no-preference){
  .qpe-seal-done{ transition:opacity .3s ease, transform .4s cubic-bezier(.3,1.6,.5,1); }
  .qpe-mid{ transition:opacity .2s ease; }
}
.qpe-done-t{ color:var(--success); }
.qpe-banner{
  flex:none;
  margin:6px 0 0;
  padding:6px 12px;
  border-radius:10px;
  background:color-mix(in srgb, var(--success) 12%, var(--card));
  font:600 13px 'Work Sans', sans-serif;
  color:var(--ink);
}
.qpe-banner span{ color:var(--gold); }
.qpe-banner b{ color:var(--success); }
.qpe-banner[hidden]{ display:none; }
@media (max-width:759px){
  .qpe-ck{ width:26px; height:26px; font-size:15px; }
  .qpe-seal-done b{ font-size:11.5px; }
  .qpe-seal-done > span:last-child{ display:none; }
  .qpe-banner{ padding:4px 10px; font-size:12px; }
}
.qpe-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; }
.qpe-cele{ position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; border-radius:inherit; }
.qpe-cele.is-out{ animation:qpe-out .45s ease-in forwards; }
@keyframes qpe-out{ to{ opacity:0; } }
@keyframes qpe-in{ from{ opacity:0; } to{ opacity:1; } }
.qpe-cele-k{ font:800 13px 'Work Sans', sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--success); }
.qpe-cele-big{ font:800 52px/1.05 'Work Sans', sans-serif; letter-spacing:-.02em; color:var(--ink); }
.qpe-cele-jp{ font:600 20px 'Noto Sans JP', sans-serif; color:var(--gold); }
.qpe-slam{ background:radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--success) 22%, transparent), color-mix(in srgb, var(--bg) 84%, transparent) 75%); animation:qpe-in .2s ease-out both; }
.qpe-slam-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:24px 50px 22px; border-radius:22px; text-align:center; overflow:hidden;
  background:var(--card); border:2px solid var(--success);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--success) 18%, transparent), 0 24px 60px rgba(0,0,0,.35);
  animation:qpe-slam .5s cubic-bezier(.2,1.4,.4,1) .08s both;
}
@keyframes qpe-slam{ 0%{ opacity:0; transform:scale(2.2) rotate(-6deg); } 60%{ opacity:1; transform:scale(.94) rotate(1deg); } 100%{ transform:none; } }
.qpe-stars{ display:flex; gap:10px; font-size:26px; color:var(--gold); }
.qpe-stars span{ animation:qpe-star .4s cubic-bezier(.3,1.8,.5,1) both; }
.qpe-stars span:nth-child(1){ animation-delay:.5s; }
.qpe-stars span:nth-child(2){ animation-delay:.62s; font-size:32px; }
.qpe-stars span:nth-child(3){ animation-delay:.74s; }
@keyframes qpe-star{ from{ opacity:0; transform:scale(0) rotate(-90deg); } to{ opacity:1; transform:none; } }
.qpe-dim{ background:radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--success) 16%, color-mix(in srgb, var(--bg) 90%, transparent)), color-mix(in srgb, var(--bg) 94%, transparent) 75%); animation:qpe-in .2s ease-out both; }
.qpe-rz{ position:relative; width:240px; height:240px; display:flex; align-items:center; justify-content:center; margin-top:-40px; animation:qpe-rzin .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes qpe-rzin{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
.qpe-rays{ position:absolute; inset:-110px; border-radius:50%; opacity:.55;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--success) 35%, transparent) 0 8deg, transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle, #000 25%, transparent 68%); mask:radial-gradient(circle, #000 25%, transparent 68%);
  animation:qpe-spin 6s linear infinite; }
@keyframes qpe-spin{ to{ transform:rotate(360deg); } }
.qpe-rz svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.qpe-rz-track{ fill:none; stroke:color-mix(in srgb, var(--ink) 10%, transparent); stroke-width:9; }
.qpe-rz-draw{ fill:none; stroke:var(--success); stroke-width:9; stroke-linecap:round; stroke-dasharray:0 100; animation:qpe-draw .7s cubic-bezier(.5,0,.3,1) .25s forwards; }
@keyframes qpe-draw{ to{ stroke-dasharray:100 0; } }
.qpe-rz b{ position:relative; font:800 60px/1 'Work Sans', sans-serif; color:var(--ink); opacity:0; animation:qpe-pop .4s cubic-bezier(.3,1.6,.5,1) .85s both; }
.qpe-rz b small{ font-size:28px; }
.qpe-rzcap{ position:absolute; left:0; right:0; bottom:12%; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.qpe-rzcap .qpe-cele-k, .qpe-rzcap em{ opacity:0; animation:qpe-pop .35s ease-out 1s both; }
.qpe-rzcap em{ font:700 22px 'Work Sans', sans-serif; font-style:normal; color:var(--ink); animation-delay:1.1s; }
.qpe-hk{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.qpe-seal{
  position:relative; width:170px; height:170px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  border:9px solid var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  font:600 70px/1 'Noto Sans JP', sans-serif; letter-spacing:-.04em;
  animation:qpe-hanko .42s cubic-bezier(.6,0,.9,.4) both;
  transform:rotate(-12deg);
}
.qpe-seal i{ position:absolute; border-radius:50%; background:var(--accent); opacity:0; animation:qpe-splat .3s ease-out .42s forwards; }
@keyframes qpe-hanko{ 0%{ opacity:0; transform:scale(3.2) rotate(-24deg); } 100%{ opacity:1; transform:scale(1) rotate(-12deg); } }
@keyframes qpe-splat{ from{ opacity:0; transform:scale(.2); } to{ opacity:.85; transform:none; } }
.qpe-hk-cap{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; opacity:0; animation:qpe-pop .35s ease-out .6s both; }
.qpe-hk-cap b{ font:800 28px 'Work Sans', sans-serif; color:var(--ink); }
.qpe-hk-cap span{ font:600 14px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qpe-hk-cap em{ font-style:normal; font-family:'Noto Sans JP', sans-serif; color:var(--accent); font-weight:600; }
.qpe-ribbon{ background:color-mix(in srgb, var(--bg) 55%, transparent); animation:qpe-in .2s ease-out both; }
.qpe-rib{
  position:absolute; left:-8%; right:-8%; top:50%; height:120px; margin-top:-60px;
  display:flex; align-items:center; justify-content:center; gap:24px;
  transform:skewY(-5deg);
  background:linear-gradient(90deg, color-mix(in srgb, var(--success) 92%, #000), var(--success) 30%, color-mix(in srgb, var(--success) 60%, var(--gold)) 70%, color-mix(in srgb, var(--gold) 90%, #000));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 70%, transparent), 0 20px 50px rgba(0,0,0,.35);
  animation:qpe-ribin .4s cubic-bezier(.2,1,.3,1) both;
}
@keyframes qpe-ribin{ from{ transform:skewY(-5deg) translateX(-110%); } to{ transform:skewY(-5deg); } }
.qpe-cele.is-out .qpe-rib{ animation:qpe-ribout .45s cubic-bezier(.6,0,.9,.4) forwards; }
@keyframes qpe-ribout{ to{ transform:skewY(-5deg) translateX(110%); } }
.qpe-rib-tx{ display:flex; flex-direction:column; align-items:center; transform:skewY(5deg); }
.qpe-rib-tx small{ font:800 13px 'Work Sans', sans-serif; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.qpe-rib-tx b{ display:flex; font:900 50px/1 'Work Sans', sans-serif; font-style:italic; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.25); }
.qpe-rib-tx b span{ display:inline-block; animation:qpe-letter .35s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes qpe-letter{ from{ opacity:0; transform:translateY(-30px) scale(.4); } to{ opacity:1; transform:none; } }
.qpe-rib-st{ font-size:38px; color:#FFE38A; transform:skewY(5deg); text-shadow:0 2px 0 rgba(0,0,0,.25); animation:qpe-star .45s cubic-bezier(.3,1.8,.5,1) .55s both; }
.qpe-rib-st.is-r{ animation-delay:.7s; }
@media (max-width:560px){
  .qpe-slam-card{ padding:18px 24px 16px; }
  .qpe-cele-big{ font-size:36px; }
  .qpe-cele-jp{ font-size:16px; }
  .qpe-rz{ width:180px; height:180px; }
  .qpe-rz b{ font-size:44px; }
  .qpe-seal{ width:130px; height:130px; font-size:52px; }
  .qpe-hk-cap b{ font-size:22px; }
  .qpe-rib{ height:96px; margin-top:-48px; gap:12px; }
  .qpe-rib-tx b{ font-size:30px; }
  .qpe-rib-st{ font-size:26px; }
}
.qp-page .qpe-sideboard{
  position:absolute;
  left:calc(100% + 24px);
  width:300px;
  box-sizing:border-box;
  margin:0;
  z-index:2;
}
.qp-page .qpe-sideboard[hidden]{ display:none; }
.qp-end.has-side .qpe-board{ display:none; }
.qp-help{
  --qph-well:color-mix(in srgb, var(--ink) 5%, var(--card));
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  font-family:'Work Sans', sans-serif;
}
:root[data-theme="dark"] .qp-help{ --qph-well:color-mix(in srgb, #000 18%, var(--card)); }
.qp-page :is(#qpStage, .rf-stage).qp-is-help{ overflow-y:auto; }
.qph{ flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.qph-title{ margin:0; font:700 26px/1.2 'Work Sans', sans-serif; color:var(--ink); outline:none; }
.qph-note{ margin:0; font:400 12.5px/1.4 'Work Sans', sans-serif; color:var(--muted); }
.qph-btn{
  min-width:220px; padding:12px 20px; border:0; border-radius:12px;
  background:var(--info); color:var(--card);
  font:600 16px 'Work Sans', sans-serif; cursor:pointer;
}
.qph-btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.qph-back{
  align-self:flex-start; padding:4px 8px; border:0; border-radius:8px;
  background:transparent; color:var(--ink-soft);
  font:600 13px 'Work Sans', sans-serif; cursor:pointer;
}
.qph-back:hover{ color:var(--ink); }
.qph-back:focus-visible{ outline:2px solid var(--info); }
.qph-welcome{ justify-content:center; gap:22px; }
.qph-head{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.qph-kicker{ margin:0; font:700 12.5px 'Work Sans', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--success); }
.qph-welcome .qph-title{ font-size:28px; }
.qph-login{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  border:1px solid var(--border); border-radius:999px; background:transparent; cursor:pointer;
  color:var(--ink-soft); font:500 14px 'Work Sans', sans-serif;
}
.qph-login b{ color:var(--ink); font-weight:600; }
.qph-login:hover{ border-color:var(--ink-soft); }
.qph-login:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.qph-sub{ margin:0; font:400 14px/1.4 'Work Sans', sans-serif; color:var(--ink-soft); }
.qph-form{ width:100%; max-width:340px; text-align:left; }
.qph-form .siw-input{ box-sizing:border-box; font-size:15px; padding:10px 12px; }
.qph-form .siw-btn{ padding:10px; font-size:14px; border-radius:10px; }
.qph-form .siw-btn:not(.siw-btn-alt){ background:var(--success); color:var(--card); }
.qph-choices{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:680px; }
.qph-choice{
  --c:var(--success);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:22px 20px 18px;
  border:1px solid var(--border); border-radius:16px;
  background:var(--qph-well); color:var(--ink);
  text-align:left; font-family:'Work Sans', sans-serif; cursor:pointer;
}
.qph-choice.is-choose{ --c:var(--info); }
.qph-choice::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--c); }
.qph-choice:hover{ border-color:var(--c); background:color-mix(in srgb, var(--c) 7%, var(--qph-well)); }
.qph-choice:focus-visible{ outline:3px solid var(--c); outline-offset:3px; }
.qph-icon{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); }
.qph-icon svg{ width:22px; height:22px; fill:currentColor; }
.qph-choice.is-choose .qph-icon svg{ fill:none; stroke:currentColor; stroke-width:1.9; }
.qph-ch-t{ font:700 18px/1.3 'Work Sans', sans-serif; color:var(--ink); }
.qph-ch-d{ font:400 14px/1.45 'Work Sans', sans-serif; color:var(--ink-soft); }
.qph-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.qph-tag{ display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--card); font:500 12.5px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qph-tag b{ font:600 15px 'Noto Sans JP', 'Work Sans', sans-serif; color:var(--ink); }
.qph-go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:4px; font:600 14.5px 'Work Sans', sans-serif; color:var(--c); }
.qph-arrow{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.qph-pick{ container-type:inline-size; gap:8px; text-align:left; }
.qph-pick > .qph-title{ font-size:23px; align-self:center; text-align:center; }
.qph-books{ width:100%; max-width:320px; align-self:center; }
.qph-pick .set-seg button{ padding:6px 8px; }
.qph-pick .unit-tiles{ width:100%; }
.qph-pick .unit-tile{ min-height:42px; font-family:'Work Sans', sans-serif; }
.qph-pick .unit-tile.active{ --m:var(--info); }
.qph-words{ width:100%; box-sizing:border-box; padding:10px 14px; border-radius:12px; background:var(--qph-well); border:1px solid var(--border); }
.qph-wordshead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.qph-wordshead h3{ margin:0; font:600 14px 'Work Sans', sans-serif; color:var(--ink); }
.qph-seeall{ flex:none; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--info); font:600 13px 'Work Sans', sans-serif; cursor:pointer; }
.qph-seeall:hover{ border-color:var(--info); background:color-mix(in srgb, var(--info) 10%, var(--card)); }
.qph-seeall:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.qph-words ul{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 14px; margin:0; padding:0; list-style:none; }
.qph-words li{ display:flex; flex-direction:column; min-width:0; }
.qph-words li:nth-child(n+4){ display:none; }
.qph-words li b{ font:600 17px/1.25 'Noto Sans JP', 'Work Sans', sans-serif; color:var(--ink); }
.qph-words li span{ font:400 12.5px/1.3 'Work Sans', sans-serif; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qph-foot{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.qph-list{ flex:1 1 auto; min-height:0; }
.qph-listhead{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; width:100%; }
.qph-listhead .qph-back{ justify-self:start; }
.qph-listhead .qph-title{ font-size:22px; text-align:center; }
.qph-count{ justify-self:end; font:500 13px 'Work Sans', sans-serif; color:var(--muted); font-variant-numeric:tabular-nums; }
.qph-all{
  flex:1 1 auto; min-height:0; width:100%; box-sizing:border-box;
  margin:0; padding:4px 6px; list-style:none; overflow-y:auto;
  border:1px solid var(--border); border-radius:12px; background:var(--qph-well);
  display:grid; grid-template-columns:1fr 1fr; align-content:start; column-gap:18px;
}
.qph-list:not(.qph-sort) .qph-all li{ display:grid; grid-template-columns:26px minmax(0,1fr) minmax(0,1.1fr); align-items:baseline; gap:8px; padding:7px 6px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.qph-n{ font:500 12px 'Work Sans', sans-serif; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.qph-jp{ display:flex; flex-direction:column; min-width:0; }
.qph-jp b{ font:600 16px/1.3 'Noto Sans JP', 'Work Sans', sans-serif; color:var(--ink); }
.qph-jp small{ font:400 11.5px 'Noto Sans JP', sans-serif; color:var(--muted); }
.qph-en{ font:400 13px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); min-width:0; overflow-wrap:anywhere; }
.qph-sorthelp{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; font:400 13.5px 'Work Sans', sans-serif; color:var(--ink-soft); }
.qph-sorttools{ display:flex; gap:2px; --m:var(--info); }
.qph-sorttools .set-link{ white-space:nowrap; }
.qph-row{
  display:grid; grid-template-columns:26px minmax(0,1fr) minmax(0,1.1fr) auto; align-items:center; gap:8px;
  width:100%; margin:2px 0; padding:6px 8px 6px 4px;
  border:1px solid transparent; border-radius:10px; background:transparent; color:inherit;
  text-align:left; font-family:'Work Sans', sans-serif; cursor:pointer;
}
.qph-row:hover{ border-color:var(--border); background:var(--card); }
.qph-row:focus-visible{ outline:2px solid var(--info); outline-offset:1px; }
.qph-mark{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); font:600 11.5px 'Work Sans', sans-serif; color:var(--muted); visibility:hidden; }
.qph-mark svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qph-row[aria-pressed="true"]{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.qph-row[aria-pressed="true"] .qph-jp,
.qph-row[aria-pressed="true"] .qph-en{ opacity:.45; }
.qph-row[aria-pressed="true"] .qph-jp b{ text-decoration:line-through; text-decoration-thickness:1.5px; }
.qph-row[aria-pressed="true"] .qph-mark{ visibility:inherit; background:var(--ink-soft); border-color:var(--ink-soft); color:var(--card); }
@media (hover:hover){
  .qph-row:hover .qph-mark{ visibility:inherit; }
}
.qph-msg{ justify-content:center; gap:12px; }
.qph-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.qph-chip{ display:inline-flex; align-items:baseline; gap:6px; padding:5px 11px; border-radius:999px; background:var(--qph-well); border:1px solid var(--border); }
.qph-chip b{ font:600 15px 'Noto Sans JP', 'Work Sans', sans-serif; color:var(--ink); }
.qph-chip small{ font:500 12px 'Work Sans', sans-serif; color:var(--muted); }
.qph-sub{ margin:0; max-width:520px; font:400 15px/1.5 'Work Sans', sans-serif; color:var(--ink-soft); }
.qph-sub b{ color:var(--ink); }
.qph-opts{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:520px; }
.qph-opt{
  --c:var(--info);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  width:100%; padding:11px 14px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--qph-well); color:var(--ink);
  text-align:left; font-family:'Work Sans', sans-serif; cursor:pointer;
}
.qph-opt.is-sort{ --c:var(--success); }
.qph-opt.is-keep{ --c:var(--ink-soft); }
.qph-opt:hover{ border-color:var(--c); background:color-mix(in srgb, var(--c) 7%, var(--qph-well)); }
.qph-opt:focus-visible{ outline:3px solid var(--c); outline-offset:2px; }
.qph-opt-ic{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:color-mix(in srgb, var(--c) 16%, transparent); color:var(--c); }
.qph-opt-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.qph-opt.is-keep .qph-opt-ic svg{ fill:currentColor; stroke:none; }
.qph-opt-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.qph-opt-txt b{ font:600 15.5px/1.3 'Work Sans', sans-serif; }
.qph-opt-txt small{ font:400 13px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); }
.qph-chev{ width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qph-opt:hover .qph-chev{ stroke:var(--c); }
@media (max-width:700px){
  .qph-all{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .qph{ gap:9px; }
  .qph-title{ font-size:20px; }
  .qph-welcome{ justify-content:flex-start; gap:12px; }
  .qph-welcome .qph-title{ font-size:19px; }
  .qph-kicker{ font-size:11px; }
  .qph-choices{ grid-template-columns:1fr; gap:10px; }
  .qph-choice{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:5px; padding:14px 14px 12px; }
  .qph-icon{ grid-row:span 2; width:36px; height:36px; }
  .qph-icon svg{ width:19px; height:19px; }
  .qph-ch-t{ font-size:16px; }
  .qph-ch-d{ font-size:13px; }
  .qph-tags, .qph-go{ grid-column:2; }
  .qph-tags{ gap:4px; }
  .qph-tag{ gap:4px; padding:2px 7px; font-size:11.5px; }
  .qph-tag b{ font-size:13.5px; }
  .qph-go{ font-size:13.5px; padding-top:0; }
  .qph-pick > .qph-title{ font-size:19px; }
  .qph-pick .qph-back{ display:none; }
  .qph-pick .unit-tile{ min-height:39px; padding:4px 2px; }
  .qph-words{ padding:9px 12px; }
  .qph-wordshead{ margin-bottom:5px; }
  .qph-words ul{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .qph-words li:nth-child(n+3){ display:none; }
  .qph-words li b{ font-size:15px; }
  .qph-seeall{ font-size:12px; padding:3px 9px; }
  .qph-pick .qph-note{ display:none; }
  .qph-btn{ min-width:0; width:100%; padding:12px 16px; }
  .qph-listhead{ grid-template-columns:auto 1fr auto; }
  .qph-listhead .qph-back{ display:inline-block; padding:4px 2px; }
  .qph-listhead .qph-title{ font-size:16px; text-align:left; }
  .qph-sort .qph-count{ display:none; }
  .qph-sorthelp{ font-size:12.5px; }
  .qph-sorttools .set-link{ font-size:12.5px; }
  .qph-row{ grid-template-columns:22px minmax(0,1fr) minmax(0,1.1fr) auto; gap:6px; }
  .qph-mark span{ display:none; }
  .qph-mark{ padding:3px 5px; }
  .qph-msg{ justify-content:flex-start; gap:9px; }
  .qph-msg .qph-chips{ display:none; }
  .qph-sub{ font-size:14px; }
  .qph-opt{ padding:9px 11px; gap:10px; }
  .qph-opt-ic{ width:32px; height:32px; }
  .qph-opt-txt b{ font-size:14.5px; }
  .qph-opt-txt small{ font-size:12.5px; }
}
@media (max-width:380px){
  .qph-welcome .qph-title{ font-size:18px; }
  .qph-choice{ grid-template-columns:1fr; }
  .qph-choice .qph-icon{ display:none; }
  .qph-tags, .qph-go{ grid-column:auto; }
}
@media (prefers-reduced-motion:no-preference){
  .qph-choice, .qph-opt{ transition:border-color .15s, background-color .15s; }
  .qph-arrow{ transition:transform .15s; }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .qph-choice:hover .qph-arrow{ transform:translateX(3px); }
}
@media (max-width:560px){
  .choice-page{ padding-top:16px; }
  .choice-page header{ margin-bottom:0.7rem; }
  .choice-page h1{ font-size:21px; }
  .choice-page p.subhead{ font-size:12px; margin-top:3px; }
.choice-page .choice-progress-row{ margin-bottom:8px; }
  .choice-page .choice-score{ padding:2px 0; font-size:12px; }
.choice-page .choice-stage{ padding:0.85rem 0.85rem 0.7rem; margin-bottom:0.7rem; }
  .choice-page .choice-prompt-tag{ font-size:10px; }
.choice-page .kana-prompt-wrap{ height:58px; margin-bottom:0.1rem; }
  .choice-page .kana-prompt-word{ font-size:40px; }
  .choice-page .vw-prompt-english{ font-size:21px; }
  .choice-page .choice-prompt-sub{ height:20px; line-height:20px; font-size:15px; margin-bottom:5px; }
.choice-page .choice-grid{ gap:8px; margin:2px 0 8px; }
.choice-page .choice-option{ padding:10px 12px; border-radius:12px; }
  .choice-page .choice-text{ font-size:16px; line-height:26px; }
  .choice-page .choice-text-ja{ font-size:20px; }
  .choice-page .choice-key{ width:20px; height:20px; font-size:11px; }
.choice-page .kana-feedback{ height:20px; line-height:20px; margin-bottom:4px; }
  .choice-page .kana-actions{ min-height:42px; }
  .choice-page .choice-told,
  .choice-page .choice-flash{ font-size:15px; }
  .choice-page .kana-toggle-row{ margin-bottom:0.6rem; }
}
@media (max-width:380px){
.choice-page .kana-actions{ gap:7px; }
  .choice-page .kana-actions .pill{ padding-left:10px; padding-right:10px; font-size:13px; }
  .choice-page .kana-actions .kana-btn-primary{ padding-left:14px; padding-right:14px; }
  .choice-page .kana-actions .reveal-btn{ padding-left:12px; padding-right:12px; }
  .choice-page .choice-grid{ gap:6px; }
.choice-page .choice-option{ padding:8px 9px; gap:9px; }
  .choice-page .choice-text{ font-size:15px; line-height:25px; }
  .choice-page .choice-text-ja{ font-size:19px; }
  .choice-page .choice-key{ width:19px; height:19px; font-size:10px; }
}
@media (max-width:560px) and (max-height:620px){
  .choice-page{ padding-top:10px; }
  .choice-page header{ margin-bottom:0.45rem; }
  .choice-page h1{ font-size:17px; }
  .choice-page p.subhead{ display:none; }
  .choice-page .choice-stage{ padding:0.6rem 0.75rem 0.5rem; margin-bottom:0.5rem; }
  .choice-page .kana-prompt-wrap{ height:50px; }
  .choice-page .kana-prompt-word{ font-size:34px; }
  .choice-page .vw-prompt-english{ font-size:19px; }
  .choice-page .choice-prompt-sub{ height:18px; line-height:18px; font-size:14px; margin-bottom:3px; }
  .choice-page .choice-grid{ gap:5px; }
  .choice-page .choice-option{ padding:7px 11px; }
  .choice-page .choice-text{ font-size:15px; line-height:25px; }
  .choice-page .choice-text-ja{ font-size:19px; }
.choice-page .choice-told,
  .choice-page .choice-flash{ font-size:13px; }
  .choice-page .kana-feedback{ height:18px; line-height:18px; margin-bottom:2px; }
  .choice-page .kana-actions{ min-height:40px; }
  .choice-page .kana-toggle-row{ margin-bottom:0.4rem; }
}
.qp-page .qp-head{ margin-bottom:0; }
.qp-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 18px;
}
.qp-bar .qp-icon-btn{
  flex:none;
  position:relative;
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color 0.15s ease, background-color 0.15s ease;
}
.qp-bar .qp-icon-btn > svg{ width:21px; height:21px; }
.qp-bar .qp-icon-btn[hidden]{ display:none; }
.qp-bar .qp-icon-btn > svg.qp-x{ width:26px; height:26px; color:var(--accent); }
.qp-bar .qp-icon-btn.has-word{ flex-direction:column; gap:1px; width:auto; min-width:40px; padding:0 4px; }
.qp-bar .qp-icon-btn.has-word > svg{ width:19px; height:19px; }
.qp-end-word{ font:600 10.5px/1 'Work Sans', sans-serif; letter-spacing:.02em; }
.qp-bar .qp-gear{ margin-left:auto; }
.qp-bar .qp-end-game{
  flex:none; margin-left:auto; height:40px; padding:0 15px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer;
  font:600 14px 'Work Sans', sans-serif; color:var(--ink); border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  background:color-mix(in srgb, var(--ink) 6%, transparent);
}
.qp-bar .qp-end-game[hidden]{ display:none; }
.qp-bar .qp-end-game svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.qp-bar .qp-end-game:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:hover){
  .qp-bar .qp-end-game:hover{ background:color-mix(in srgb, var(--ink) 12%, transparent); }
}
.qp-gnote-catch{ position:fixed; inset:0; z-index:2000; }
.qp-gnote-ring{
  position:fixed; z-index:2001; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 3px var(--success), 0 0 18px 4px color-mix(in srgb, var(--success) 55%, transparent), 0 0 0 200vmax rgba(0,0,0,.45);
}
.qp-gnote-box{
  position:fixed; z-index:2002; width:340px; box-sizing:border-box; padding:16px 16px 14px;
  border-radius:16px; background:var(--card); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow:0 12px 32px rgba(0,0,0,.35); font:400 15px/1.45 'Work Sans', sans-serif;
}
.qp-gnote-arrow{
  position:absolute; top:-9px; width:16px; height:16px; transform:rotate(45deg); background:var(--card);
  border-left:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-top:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.qp-gnote-head{ font-weight:600; font-size:17px; margin-bottom:4px; }
.qp-gnote-text{ margin:0; color:var(--ink-soft); }
.qp-gnote-text b{ color:var(--ink); }
.qp-gnote-btns{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; }
.qp-gnote-btns button{ font:600 14px/1 'Work Sans', sans-serif; padding:10px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.qp-gnote-quiet{ background:transparent; color:var(--ink); border:2px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.qp-gnote-go{ background:var(--success); color:var(--card); border:2px solid var(--success); }
.qp-gnote-btns button:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.qp-bar .qp-icon-btn[aria-expanded="true"]{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
@media (hover:hover){
  .qp-bar .qp-icon-btn:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
}
.qp-bar .qp-icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qp-gear-sound{
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:19px;
  height:19px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:var(--card);
  pointer-events:none;
}
.qp-gear-sound svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.qp-gear-sound.is-on{ background:var(--card); color:var(--ink-soft); box-shadow:0 0 0 1.5px var(--border); }
.qp-bar-progress{
  position:relative;
  flex:1;
  min-width:0;
  height:26px;
  display:flex;
  align-items:center;
}
.qp-bar-track{
  position:relative;
  flex:1;
  min-width:0;
  height:12px;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
}
.qp-bar-fill{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:0;
  border-radius:999px;
  background:var(--aurora-bar);
  transition:width 0.4s ease;
}
.qp-bar-fill::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:3px;
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,0.35);
}
.qp-bar-progress.is-review .qp-bar-fill{ background:var(--success); }
.qp-bar-ring{
  position:absolute;
  top:50%;
  z-index:1;
  width:22px;
  height:22px;
  margin:-11px 0 0 -11px;
  box-sizing:border-box;
  border-radius:50%;
  border:3px solid transparent;
  background:linear-gradient(var(--bg), var(--bg)) padding-box, var(--aurora) border-box;
  pointer-events:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
.qp-bar-ring[hidden]{ display:none; }
.qp-bar-ring.is-now,
.qp-bar-ring.is-done{ border:0; background:var(--aurora); box-shadow:0 0 0 2px var(--bg); }
.qp-bar-ring.is-now{ transform:scale(1.15); box-shadow:0 0 0 3px var(--bg), 0 0 12px 3px color-mix(in srgb, var(--plum) 55%, transparent); }
@media (prefers-reduced-motion:reduce){
  .qp-bar-fill, .qp-bar-ring{ transition:none; }
}
.qp-sound-box{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:60;
  width:340px;
  max-width:calc(100vw - 32px);
  gap:14px;
  padding:16px;
  margin:0;
  box-shadow:0 18px 44px rgba(0,0,0,0.35);
}
.qp-sound-box[hidden]{ display:none; }
.qp-sound-box .set-hint{ margin:8px 0 0; }
.qp-sound-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:600 14px 'Work Sans', sans-serif;
  cursor:pointer;
}
@media (hover:hover){ .qp-sound-more:hover{ border-color:var(--ink-soft); background:color-mix(in srgb, var(--ink) 5%, transparent); } }
.qp-sound-more svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qp-set-back{
  margin-left:auto;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 14px 8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font:600 14px 'Work Sans', sans-serif;
  cursor:pointer;
}
.qp-set-back[hidden]{ display:none; }
@media (hover:hover){ .qp-set-back:hover{ border-color:var(--ink-soft); background:color-mix(in srgb, var(--ink) 5%, transparent); } }
.qp-set-back svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.qp-set-close{
  margin-left:auto;
  flex:none;
  width:38px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.qp-set-close[hidden]{ display:none; }
@media (hover:hover){ .qp-set-close:hover{ color:var(--ink); border-color:var(--ink-soft); background:color-mix(in srgb, var(--ink) 5%, transparent); } }
.qp-set-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qp-set-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.qps-done{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.qps-done-title{ margin:0; color:var(--ink); font:600 24px/1.2 'Work Sans', sans-serif; letter-spacing:-0.01em; text-wrap:balance; }
.qps-done-text{ margin:0 0 6px; color:var(--ink-soft); font:400 15px/1.4 'Work Sans', sans-serif; }
.qp-done-back{ margin-top:4px; font-size:14px; font-weight:500; }
@media (max-width:560px){
  .qps-done{ gap:8px; padding-bottom:30px; }
  .qps-done-title{ font-size:20px; }
  .qps-done-text{ display:none; }
  .qps-done .qp-done-actions{ width:100%; gap:8px; }
  .qps-done .qp-done-btn{ width:100%; min-height:0; padding:10px 12px; font-size:15px; white-space:nowrap; }
  .qp-done-back{ margin-top:2px; }
}
.qps-left{ margin:0 0 4px; max-width:30em; color:var(--ink-soft); font:400 15px/1.35 'Work Sans', sans-serif; text-align:center; text-wrap:balance; }
.qps-left b{ color:var(--ink); font-weight:600; }
@media (max-width:560px){ .qps-left{ font-size:13.5px; } }
.qpe-go-btn[hidden]{ display:none; }
.qps-done[hidden], .qpe-done[hidden]{ display:none; }
.qpe-done{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.qpe-done-text{ margin:0; color:var(--ink-soft); font:400 14px/1.35 'Work Sans', sans-serif; }
.qpe-done-text b{ color:var(--ink); font-weight:600; }
@media (max-width:759px){
  .qpe-done .qp-done-actions{ width:100%; gap:8px; }
  .qpe-done .qp-done-btn{ flex:1 1 0; width:auto; min-width:0; padding:10px 12px; font-size:15px; }
  .qpe-done .qp-done-btn.is-review{ flex-basis:100%; }
}
.qp-done-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.qp-done-actions[hidden]{ display:none; }
.qp-done-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:12px 22px;
  border:0;
  border-radius:999px;
  color:var(--card);
  font:600 16px 'Work Sans', sans-serif;
  text-decoration:none;
  cursor:pointer;
}
.qp-done-btn[hidden]{ display:none; }
.qp-done-btn.is-review{ background:var(--success); }
.qp-done-btn.is-next{ background:var(--info); }
.qp-done-btn.is-back{ background:transparent; color:var(--ink); border:1px solid var(--border); }
.qp-done-btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
@media (max-width:420px){ .qp-done-btn{ width:100%; } }
.qp-stage-wrap{ position:relative; }
.qp-stage-wrap > .qp-ignore{
  top:12px;
  right:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--card);
}
.qp-ignore[hidden]{ display:none; }
.qp-ignore svg{ width:13px; height:13px; flex:none; }
.qp-stage-wrap > .qp-furigana{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  width:30px;
  height:30px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--ink-soft);
  font:500 14px/1 'Noto Sans JP', sans-serif;
  cursor:pointer;
}
.qp-furigana[hidden]{ display:none; }
@media (hover:hover){ .qp-furigana:hover{ color:var(--ink); border-color:var(--ink-soft); } }
.qp-furigana:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qp-furigana ruby{ ruby-position:over; line-height:1; }
.qp-furigana rt{ font-size:7.5px; font-weight:600; letter-spacing:-0.02em; color:var(--info); }
.qp-furigana[aria-pressed="false"]{ color:var(--muted); }
.qp-furigana[aria-pressed="false"] rt{ visibility:hidden; }
.qp-furigana[aria-pressed="false"]::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:50%;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(-40deg);
}
.qp-ignore:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qp-page{ --qp-stage-h:441px; }
@media (min-width:561px) and (max-width:759px){
  .qp-page{ --qp-stage-h:615px; }
}
.qp-page{ --qp-medium-w:900px; --qp-medium-h:520px; }
@media (min-width:760px) and (min-height:780px){
  .qp-page.choice-page{ max-width:var(--qp-medium-w); }
  .qp-page{ --qp-stage-h:var(--qp-medium-h); }
}
@media (min-width:760px){
  .qp-page.choice-page.qp-game-medium{ max-width:var(--qp-medium-w); }
  .qp-page.qp-game-medium{ --qp-stage-h:var(--qp-medium-h); }
}
.qp-page :is(#qpStage, .rf-stage)[data-activity]:not([data-activity="matching"]),
.qp-page :is(#qpStage, .rf-stage).qp-is-start,
.qp-page :is(#qpStage, .rf-stage).qp-is-help{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  height:var(--qp-stage-h);
}
.qp-page :is(#qpStage, .rf-stage)[data-activity] > .kana-actions{ margin-top:auto; }
@media (min-width:760px){
  .qp-page :is(#qpStage, .rf-stage)[data-activity] > .kana-actions{ height:42px; }
}
.qp-page :is(#qpStage, .rf-stage)[data-activity] > .kana-prompt-wrap,
.qp-page :is(#qpStage, .rf-stage)[data-activity] > .listen-prompt{
  flex:1 1 auto;
  height:auto;
  min-height:0;
}
.qp-page :is(#qpStage, .rf-stage)[data-activity] > .kana-prompt-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.qp-page{ --qp-fit-w:480px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .kana-prompt-wrap > .stage-word,
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .kana-prompt-wrap > .stage-word{
  display:inline-block;
  max-width:min(100%, var(--qp-fit-w));
  box-sizing:border-box;
  font-size:var(--fit-max);
}
.qp-page :is(#qpStage, .rf-stage)[data-activity] .kana-prompt-wrap > .stage-word[hidden]{ display:none; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .vw-prompt-english{ --fit-max:64px; --fit-now:46px; max-width:min(100%, var(--qp-fit-w)); }
.qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .kana-prompt-word{ --fit-max:128px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .kana-prompt-word{ --fit-max:128px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .vw-prompt-english{ --fit-max:46px; --fit-now:46px; max-width:min(100%, var(--qp-fit-w)); }
.qp-page :is(#qpStage, .rf-stage)[data-activity] .kana-answer-row .kana-input{ height:56px; font-size:20px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"]) .kana-answer-row .kana-input{ height:64px; font-size:24px; }
@media (max-width:759px){
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"]){ --answer-w:380px; }
}
.qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"]) .kana-answer-row .kana-input::placeholder{ font-size:20px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity] .cw-hint{
  --cw-max:92px;
  --cw-s:min(var(--cw-max), calc((min(100vw - 76px, 640px) - (var(--cw-n, 1) - 1) * 2px) / (var(--cw-n, 1) * 0.84)));
  height:calc(var(--cw-s) + 4px);
}
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] > .listen-prompt{ justify-content:flex-end; gap:8px; margin-bottom:4px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] > .listen-prompt > *{ flex-shrink:0; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-prompt .choice-prompt-tag{ margin:0; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play{ --fit-max:140px; width:124px; height:124px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play svg{ width:52px; height:52px; }
.qp-page{ --qp-line-h:46px; --qp-line-lead:38px; --qp-line-rest:18px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity] .wg-gloss,
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-cap{
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--qp-line-h);
  line-height:var(--qp-line-h);
  margin:2px auto 6px;
  max-width:100%;
  font-size:var(--qp-line-rest);
  color:var(--info);
  white-space:nowrap;
  overflow:hidden;
  visibility:inherit;
}
.qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-cap{ margin:0; }
.qp-page :is(#qpStage, .rf-stage)[data-activity] .wg-gloss > span,
.qp-page :is(#qpStage, .rf-stage)[data-activity] .listen-cap > span{ line-height:1; }
.qp-page :is(#qpStage, .rf-stage)[data-activity] .gl-lead{ font-family:'Noto Sans JP', sans-serif; font-size:var(--qp-line-lead); font-weight:600; }
.qp-page :is(#qpStage, .rf-stage)[data-activity] #promptGloss:not([lang]) .gl-lead{ font-family:'Work Sans', sans-serif; font-weight:500; }
.qp-page :is(#qpStage, .rf-stage)[data-activity] .gl-rest{ white-space:pre; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .cw-line{ font-family:'Work Sans', sans-serif; font-size:12.5px; color:var(--muted); }
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .cw-line:has(.gl-lead){ color:var(--info); }
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .cw-line .gl-lead{ font-family:'Noto Sans JP', sans-serif; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .kana-prompt-wrap > .stage-word{
  display:inline-block;
  max-width:min(100%, var(--qp-fit-w));
  box-sizing:border-box;
  font-size:var(--fit-max);
}
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .kana-prompt-word{ --fit-max:128px; --fit-now:64px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .vw-prompt-english{ --fit-max:64px; --fit-now:40px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-prompt-sub{
  height:44px; line-height:44px; font-size:34px; margin-bottom:6px;
  flex-shrink:0;   
}
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-prompt-sub[hidden]{ display:none; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-option{ padding:15px 18px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-text{ font-size:26px; line-height:42px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-text-ja{ font-size:32px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-key{ width:28px; height:28px; font-size:14px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-told-in{ font-size:17px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) > .mw-prompt{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-sentence{ flex:1 1 auto; height:auto; min-height:0; --fit-max:56px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-english{ flex-shrink:0; --fit-max:20px; }
@media (min-width:760px){
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-option{ padding:15px 18px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-text{ font-size:32px; line-height:42px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-key{ width:28px; height:28px; font-size:14px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-told-in{ font-size:17px; }
}
@media (max-width:759px){
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-grid.is-pair{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:561px) and (max-width:759px){
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .is-pair .choice-option{ padding:15px 18px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .is-pair .choice-text{ font-size:32px; line-height:42px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .is-pair .choice-key{ width:28px; height:28px; font-size:14px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .is-pair .choice-told-in{ font-size:17px; }
}
.qp-page :is(#qpStage, .rf-stage)[data-activity="truefalse"] > .tf-arena{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  grid-template-rows:minmax(0, 1fr) auto;
}
.qp-page :is(#qpStage, .rf-stage)[data-activity="truefalse"] .tf-card{ height:auto; }
@media (min-width:760px) and (min-height:780px){
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .listen-play{ width:104px; height:104px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .listen-play svg{ width:44px; height:44px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .choice-option{ padding:15px 18px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .choice-text{ font-size:26px; line-height:42px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .choice-key{ width:28px; height:28px; font-size:14px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .choice-told-in{ font-size:17px; }
}
@media (min-width:760px) and (min-height:780px){
  .qp-page{ --qp-fit-w:600px; --qp-line-h:52px; --qp-line-lead:44px; --qp-line-rest:20px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .vw-prompt-english{ --fit-max:80px; --fit-now:52px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .kana-prompt-word{ --fit-max:150px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .kana-prompt-word{ --fit-max:150px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"]) .kana-answer-row .kana-input{ height:72px; font-size:28px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"]) .kana-answer-row .kana-input::placeholder{ font-size:22px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play{ --fit-max:170px; width:150px; height:150px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play svg{ width:62px; height:62px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .vw-prompt-english{ --fit-max:54px; --fit-now:54px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity] .cw-hint{
    --cw-max:108px;
    --cw-s:min(var(--cw-max), calc((min(100vw - 76px, 720px) - (var(--cw-n, 1) - 1) * 2px) / (var(--cw-n, 1) * 0.84)));
  }
}
.qp-mute{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10, 12, 20, 0.55);
}
.qp-mute[hidden]{ display:none; }
.qp-mute-box{
  width:100%;
  max-width:420px;
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:22px 22px 16px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 12px 36px rgba(0, 0, 0, 0.3);
}
.qp-mute-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-bottom:12px;
  border-radius:50%;
  background:color-mix(in srgb, var(--info) 16%, transparent);
  color:var(--info);
}
.qp-mute-icon svg{ width:24px; height:24px; }
.qp-mute-title{ margin:0 0 8px; font-size:20px; }
.qp-mute-text{ margin:0 0 8px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.qp-mute-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 6px;
  padding:0;
  list-style:none;
}
.qp-mute-list[hidden]{ display:none; }
.qp-mute-list li{
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:13px;
  color:var(--ink-soft);
}
.qp-mute-opt{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  margin-top:10px;
  padding:12px 16px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.qp-mute-opt[hidden]{ display:none; }
.qp-mute-opt b{ font-size:15px; font-weight:600; }
.qp-mute-opt span{ font-size:13px; color:var(--muted); }
.qp-mute-opt:hover{ border-color:var(--ink-soft); }
.qp-mute-main{ background:var(--info); border-color:var(--info); color:var(--card); }
.qp-mute-main span{ color:inherit; opacity:.85; }
.qp-mute-main:hover{ border-color:var(--info); filter:brightness(1.08); }
.qp-mute-keep{
  display:block;
  margin:12px auto 0;
  padding:6px 10px;
  border:none;
  background:none;
  font:inherit;
  font-size:14px;
  color:var(--muted);
  text-decoration:underline;
  cursor:pointer;
}
.qp-mute-keep:hover{ color:var(--ink); }
.qp-mute-opt:focus-visible, .qp-mute-keep:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.set-row.is-paused{ cursor:default; opacity:.6; }
.set-row.is-paused:hover{ background:transparent; }
.set-row-tag{
  margin-left:6px;
  padding:1px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--info) 18%, transparent);
  color:var(--info);
  font-size:11.5px;
  font-weight:600;
  vertical-align:1px;
  white-space:nowrap;
}
@media (max-width:560px){
  .qp-bar{ gap:8px; margin:8px 0 8px; }
  .qp-bar .qp-icon-btn{ width:38px; height:38px; }
  .qp-bar .qp-icon-btn > svg{ width:19px; height:19px; }
  .qp-bar .qp-icon-btn > svg.qp-x{ width:24px; height:24px; }
  .qp-bar .qp-icon-btn.has-word{ width:auto; height:38px; }
  .qp-bar .qp-icon-btn.has-word > svg{ width:17px; height:17px; }
  .qp-bar .qp-end-game{ height:38px; padding:0 13px; font-size:13.5px; }
  .qp-end-word{ font-size:10px; }
  .qp-bar-track{ height:10px; }
.qp-stage-wrap > .qp-ignore{ top:6px; right:8px; padding-top:4px; padding-bottom:4px; }
  .qp-stage-wrap > .qp-furigana{ top:6px; left:8px; width:28px; height:28px; }
  .qp-page{ --qp-stage-h:456px; --qp-fit-w:100%; --qp-line-h:40px; --qp-line-lead:32px; --qp-line-rest:16px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .vw-prompt-english{ --fit-max:52px; --fit-now:34px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .kana-prompt-word{ --fit-max:112px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .kana-prompt-word{ --fit-max:112px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .vw-prompt-english{ --fit-max:34px; --fit-now:34px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity] .cw-hint{ --cw-max:84px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play{ --fit-max:150px; width:96px; height:96px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play svg{ width:42px; height:42px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .kana-prompt-word{ --fit-max:112px; --fit-now:40px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .vw-prompt-english{ --fit-max:52px; --fit-now:30px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-prompt-sub{ height:36px; line-height:36px; font-size:28px; margin-bottom:4px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-option{ padding:9px 12px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-text{ font-size:21px; line-height:34px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-text-ja{ font-size:26px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-key{ width:22px; height:22px; font-size:12px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-told-in{ font-size:16px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-sentence{ --fit-max:44px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-english{ --fit-max:17px; }
}
@media (max-width:380px){
  .qp-stage-wrap > .qp-ignore{
    width:28px;
    height:28px;
    padding:0;
    justify-content:center;
    top:6px;
    right:6px;
  }
  .qp-ignore svg{ width:14px; height:14px; }
  .qp-ignore-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
}
@media (max-width:560px) and (max-height:620px){
  .qp-bar{ margin:6px 0 6px; }
  .qp-bar .qp-icon-btn{ width:34px; height:34px; }
  .qp-bar .qp-icon-btn.has-word{ width:auto; height:34px; }
  .qp-bar .qp-icon-btn.has-word > svg{ width:15px; height:15px; }
  .qp-bar .qp-end-game{ height:34px; padding:0 12px; font-size:13px; }
  .qp-end-word{ font-size:9.5px; }
  .qp-page{ --qp-stage-h:385px; --qp-line-h:34px; --qp-line-lead:28px; --qp-line-rest:14px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .vw-prompt-english{ --fit-max:46px; --fit-now:30px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="writing"] .kana-prompt-word{ --fit-max:96px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .kana-prompt-word{ --fit-max:96px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .vw-prompt-english{ --fit-max:30px; --fit-now:30px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity] .cw-hint{ --cw-max:72px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] .listen-play{ --fit-max:116px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .kana-prompt-word{ --fit-max:96px; --fit-now:34px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .vw-prompt-english{ --fit-max:46px; --fit-now:26px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-prompt-sub{ height:30px; line-height:30px; font-size:24px; margin-bottom:3px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-option{ padding:6px 11px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-text{ font-size:18px; line-height:30px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-text-ja{ font-size:23px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-key{ width:20px; height:20px; font-size:11px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"]) .choice-told-in{ font-size:15px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-sentence{ --fit-max:36px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-english{ --fit-max:15px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="complete-word"] .cw-enter{ display:none; }
}
.listen-prompt{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
height:118px;
  margin-bottom:10px;
}
.listen-play{
  flex:none;
  width:84px;
  height:84px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--aurora);
  color:var(--on-aurora);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px -10px color-mix(in srgb, var(--info) 70%, transparent);
  transition:transform 0.12s ease, filter 0.12s ease;
}
.listen-play svg{ width:36px; height:36px; margin-left:-3px; }
.listen-play:hover{ filter:brightness(1.06); }
.listen-play:active{ transform:scale(0.97); }
.listen-play:active::after{ pointer-events:inherit; }
.listen-play:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.listen-cap{
  margin:0;
  height:16px;
max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  line-height:16px;
  color:var(--muted);
}
.listen-play{ position:relative; }
.listen-play::after{
  content:'';
  position:absolute;
  top:-4px; right:-4px; bottom:-4px; left:-4px;
  border:2px solid var(--info);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.listen-play.is-playing::after{ animation:listen-pulse 0.9s ease-out infinite; }
@keyframes listen-pulse{
  0%{   opacity:0.55; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.4); }
}
.listen-play::before{
  content:'';
  position:absolute;
  top:-10px; right:-10px; bottom:-10px; left:-10px;
  border:2px solid color-mix(in srgb, var(--info) 40%, transparent);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.listen-play.needs-tap::before{ animation:listen-ring 2.4s ease-out infinite; }
@keyframes listen-ring{
  0%{   transform:scale(0.9); opacity:1; }
  100%{ transform:scale(1.15); opacity:0; }
}
.choice-prompt-tag.is-blocked{ color:var(--gold); }
@media (prefers-reduced-motion:reduce){
  .listen-play.is-playing::after,
  .listen-play.needs-tap::before{ animation:none; }
  .listen-play.needs-tap::before{ opacity:1; }
}
.listen-page .kana-feedback{ height:26px; line-height:26px; }
.listen-page .choice-told,
.listen-page .choice-flash{ font-size:16px; }
@media (max-width:560px){
  .choice-page .listen-prompt{ height:86px; gap:5px; margin-bottom:6px; }
  .choice-page .listen-play{ width:64px; height:64px; box-shadow:0 6px 18px -8px color-mix(in srgb, var(--info) 70%, transparent); }
  .choice-page .listen-play svg{ width:30px; height:30px; }
  .choice-page .listen-play::before{ top:-6px; right:-6px; bottom:-6px; left:-6px; }
  .choice-page .listen-cap{ font-size:12px; }
  .listen-page .kana-feedback{ height:22px; line-height:22px; margin-bottom:4px; }
  .listen-page .choice-told,
  .listen-page .choice-flash{ font-size:15px; }
}
@media (max-width:560px) and (max-height:620px){
  .choice-page .listen-prompt{ height:58px; margin-bottom:4px; }
  .choice-page .listen-play{ width:52px; height:52px; }
  .choice-page .listen-play svg{ width:25px; height:25px; }
  .choice-page .listen-cap{ display:none; }
  .listen-page .kana-feedback{ height:22px; line-height:22px; margin-bottom:2px; }
  .listen-page .choice-told,
  .listen-page .choice-flash{ font-size:13px; }
}
.cw-hint{
  --cw-max:60px;
  --cw-s:min(var(--cw-max), calc((100vw - 76px - (var(--cw-n, 1) - 1) * 2px) / (var(--cw-n, 1) * 0.84)));
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  height:64px;
  margin:2px 0 12px;
}
.cw-gap{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:2px;
}
.cw-cell{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--cw-s) * 0.84);
  height:var(--cw-s);
  font-family:'Noto Sans JP', sans-serif;
  font-size:calc(var(--cw-s) * 0.66);
  line-height:1;
  color:var(--ink);
}
.cw-cell.is-small{
  width:calc(var(--cw-s) * 0.56);
  height:calc(var(--cw-s) * 0.62);
  font-size:calc(var(--cw-s) * 0.5);
}
.cw-cell.is-blank{
  border:2px solid var(--info);
  border-radius:7px;
  background:var(--bg);
}
.cw-cell.is-small.is-blank{ border-radius:5px; }
.cw-cell.is-given{
  border:2px solid color-mix(in srgb, var(--info) 35%, transparent);
  border-radius:7px;
  background:var(--bg);
}
.cw-cell.is-small.is-given{ border-radius:5px; }
.cw-cell.is-ghost{ color:color-mix(in srgb, var(--ink) 30%, transparent); }
.cw-gap .cw-cell.is-cursor{
  border-color:var(--info);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--info) 38%, transparent);
}
.cw-gap .cw-cell.is-miss{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent),
             0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cw-cell.is-pending{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:calc(var(--cw-s) * 0.36);
  color:var(--muted);
}
.cw-hint.is-answered .cw-cell{ box-shadow:none; }
.cw-hint.is-right .cw-cell{ border-color:var(--success); background:var(--success-soft); }
.cw-cell.is-revealed{ color:var(--info); }
.cw-hint.is-answered .cw-cell.is-revealed{ border-color:var(--border); background:var(--bg); }
.cw-type-hint{
  margin:0 0 10px;
  height:18px;
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  line-height:18px;
  color:var(--muted);
}
.cw-hint.is-answered + .cw-type-hint{ visibility:hidden; }
.cw-type-hint kbd{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  padding:1px 6px;
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:5px;
  background:var(--card);
  color:var(--ink-soft);
}
.cw-gap-input{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
font-size:16px;
  cursor:text;
}
@media (max-width:560px){
  .choice-page .cw-hint{ margin:0 0 8px; }
  .choice-page .cw-type-hint{ margin-bottom:6px; font-size:12px; }
}
@media (max-width:560px) and (max-height:620px){
  .choice-page .cw-hint{ margin:0 0 6px; }
  .choice-page .cw-type-hint{ display:none; }
}
.mw-tag-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 4px;
}
.mw-tag-row .choice-prompt-tag{ margin:0; }
.mw-tag-row.is-quiet{ height:13px; }
@media (max-width:560px){ .mw-tag-row.is-quiet{ height:11px; } }
.mw-furigana-btn{ padding:3px 11px; font-size:12px; line-height:18px; }
.mw-prompt{ margin:0 0 10px; }
.mw-sentence{
  height:118px;
  margin:0;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  align-items:baseline;
  justify-content:center;
  font-family:'Noto Sans JP', sans-serif;
  font-size:28px;
  line-height:2.05;
  color:var(--ink);
}
.mw-tok,
.mw-punct{ white-space:nowrap; }
.mw-nobr{ display:inline-flex; align-items:baseline; white-space:nowrap; }
.mw-nobr[hidden]{ display:none; }
.mw-sentence .wc-tok:not(.mw-blank):not(.mw-target){ margin:0; padding:0; border-bottom:none; }
.mw-sentence .mw-blank.wc-tok,
.mw-sentence .mw-target.wc-tok{
  cursor:pointer;
}
.mw-sentence .mw-blank.wc-tok:hover,
.mw-sentence .mw-target.wc-tok:hover,
.mw-sentence .mw-blank.wc-tok.open,
.mw-sentence .mw-target.wc-tok.open{ background:inherit; }
.mw-sentence rt{
  font-size:0.46em;
  line-height:1;
  color:var(--ink-soft);
}
.mw-blank{
  display:inline-block;
  text-align:center;
  min-width:3.4em;
  height:1.4em;
  margin:0 0.18em;
  box-sizing:border-box;
  border:2px dashed var(--ink-soft);
  border-radius:8px;
  line-height:1.4;
}
.mw-blank:empty::before{ content:"\200B"; }
.mw-blank.is-filled{
  height:auto;
  padding:0 0.2em 0.2em;
  border-style:solid;
  white-space:nowrap;
}
.mw-blank.is-right{ border-color:var(--success); background:var(--success-soft); color:var(--success); }
.mw-blank.is-missed{ border-color:var(--gold); background:var(--gold-soft); color:var(--ink); }
.mw-target{
  display:inline-block;
  text-align:center;
  margin:0 0.14em;
  padding:0 0.2em 0.2em;
  box-sizing:border-box;
  border-bottom:3px solid var(--accent);
  border-radius:6px 6px 0 0;
  background:var(--accent-soft);
  line-height:1.4;
  white-space:nowrap;
}
.mw-target.is-right{ border-color:var(--success); background:var(--success-soft); color:var(--success); }
.mw-target.is-missed{ border-color:var(--gold); background:var(--gold-soft); color:var(--ink); }
.mw-english{
  height:46px;
  margin:2px 0 0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.35;
  color:var(--ink-soft);
}
.mw-show-en{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 13px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Work Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:18px;
  cursor:pointer;
}
.mw-show-en svg{ width:15px; height:15px; flex:none; color:var(--muted); }
@media (hover:hover){ .mw-show-en:hover{ color:var(--ink); border-color:var(--ink-soft); } }
.mw-show-en:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mw-show-en[hidden]{ display:none; }
@media (max-width:560px){
  .choice-page .mw-prompt{ margin-bottom:6px; }
.choice-page .mw-sentence{ height:88px; font-size:23px; line-height:1.8; }
  .choice-page .mw-english{ height:32px; font-size:14px; }
  .choice-page .mw-furigana-btn{ padding:2px 9px; font-size:11px; }
}
@media (max-width:560px) and (max-height:620px){
  .choice-page .mw-prompt{ margin-bottom:3px; }
  .choice-page .mw-sentence{ height:68px; font-size:19px; line-height:1.8; }
  .choice-page .mw-english{ height:28px; font-size:13px; line-height:1.2; }
  .choice-page .mw-show-en{ padding:2px 10px; font-size:12px; }
}
.match-board{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:6px 0 2px;
}
.match-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.match-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 14px;
border:1.5px solid var(--border);
  border-bottom-width:4px;
  border-radius:14px;
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  transition:transform 0.08s ease,
             border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}
[data-theme="dark"] .match-tile{ border-bottom-color:rgba(0,0,0,0.45); }
.match-tile:hover:not(:disabled){ border-color:color-mix(in srgb, var(--info) 55%, var(--border)); }
.match-tile:active:not(:disabled){
  transform:translateY(2px);
  border-bottom-width:2px;
  margin-bottom:2px;
}
.match-tile:active:not(:disabled)::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
.match-tile:disabled{ cursor:default; }
.match-clip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:52px;
  overflow:hidden;
}
.match-text{
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:26px;
  text-align:center;
}
.match-text-ja{ font-family:'Noto Sans JP', sans-serif; font-size:23px; }
.match-text-furi ruby{ ruby-position:over; }
.match-text-furi rt{
  font-family:'Noto Sans JP', sans-serif;
  font-size:0.46em;
  font-weight:400;
  line-height:1.15;
  color:var(--ink-soft);
}
.match-tile.is-picked{
  border-color:var(--info);
  background:var(--info-soft);
}
.match-tile.is-wrong{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.match-tile.is-done{
  border-color:var(--success);
  background:var(--success-soft);
  opacity:0.4;
}
.match-clock{
  margin:0;
  min-width:46px;
  padding:4px 0;
  border-radius:999px;
  background:var(--border);
  color:var(--ink);
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:13px;
  text-align:center;
}
.match-clock.is-waiting{ color:var(--muted); }
.match-page .choice-summary-score{ font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums; }
@media (max-width:560px){
  .match-board{ gap:8px; margin:4px 0 0; }
  .match-col{ gap:8px; }
.match-tile{ padding:8px 10px; border-radius:12px; }
  .match-clip{ height:40px; }
  .match-text{ font-size:14px; line-height:20px; }
  .match-text-ja{ font-size:18px; }
  .match-clock{ min-width:42px; font-size:12px; }
}
@media (max-width:380px){
  .match-page{ padding-left:12px; padding-right:12px; }
  .match-board{ gap:6px; }
  .match-col{ gap:6px; }
.match-tile{ padding-left:6px; padding-right:6px; }
  .match-text{ font-size:13px; }
  .match-text-ja{ font-size:17px; }
}
@media (max-width:560px) and (max-height:620px){
  .match-clip{ height:36px; }
  .match-text{ font-size:13px; line-height:18px; }
  .match-text-ja{ font-size:16px; }
  .match-tile{ padding-top:6px; padding-bottom:6px; }
}
.tf-arena{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
gap:28px;
max-width:460px;
  margin:10px auto 0;
}
.tf-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:238px;
  padding-top:9px;
  padding-bottom:7px;
  padding-left:18px;
  padding-right:18px;
border:1.5px solid var(--border);
  border-bottom-width:4px;
  border-radius:18px;
  background:var(--card);
touch-action:pan-y;
cursor:grab;
  transition:transform 0.12s ease, border-color 0.15s ease,
             background 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .tf-card{ border-bottom-color:rgba(0,0,0,0.45); }
.tf-card.is-dragging{
  cursor:grabbing;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.tf-card.is-leaving{
  opacity:0;
  transition:transform 170ms cubic-bezier(0.32, 0, 0.67, 0),
             opacity 110ms linear 60ms;
}
.tf-card.is-entering{ animation:tf-card-in 130ms ease-out; }
@keyframes tf-card-in{
  from{ opacity:0; transform:translateY(16px) scale(0.94); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .tf-card{ transition:border-color 0.15s ease, background 0.15s ease; }
  .tf-card.is-entering{ animation:none; }
  .tf-card.is-leaving{ transform:none !important; opacity:1; }
}
.tf-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0 12px;
}
.tf-clip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  overflow:hidden;
}
.tf-panel-ja .tf-clip{ height:88px; }
.tf-panel-shown .tf-clip{ max-height:88px; }
.tf-kanji .tf-panel-ja .tf-clip{ height:74px; }
.tf-kanji .tf-panel-ja .tf-text-ja{ line-height:74px; }
.tf-text{
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:34px;
  font-weight:500;
  line-height:44px;
  text-align:center;
  color:var(--ink);
}
.tf-text-ja{ font-family:'Noto Sans JP', sans-serif; font-size:64px; line-height:88px; }
.tf-panel-shown .tf-text-ja{ font-size:42px; line-height:44px; }
.tf-text-furi{ line-height:64px; }
.tf-text-furi rt{
  font-size:0.36em;
  font-weight:400;
  line-height:1;
  color:var(--ink-soft);
}
.tf-link{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  height:40px;
  font-family:'Work Sans', sans-serif;
  font-size:19px;
  font-weight:500;
  line-height:40px;
  color:var(--ink-soft);
}
.tf-equals{ position:relative; width:28px; height:28px; top:4px; flex:none; }
.tf-kanji .tf-equals{ top:1px; }
.tf-card.tf-kanji{ padding-top:4px; padding-bottom:12px; }
.tf-card.is-right{
  border-color:var(--success);
  background:var(--success-soft);
}
.tf-card.is-wrong{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.tf-taps{
  display:flex;
  gap:10px;
}
.tf-tap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px;
  border:2px solid transparent;
  border-radius:14px;
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.tf-tap-mark{ display:flex; }
.tf-tap-mark svg{ width:20px; height:20px; }
.tf-tap-false{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.tf-tap-true{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
@media (hover:hover){
  .tf-tap:hover{ filter:brightness(1.06); }
}
.tf-tap:active{ transform:scale(0.97); }
.tf-tap:active::before{ content:''; position:absolute; inset:-6px; z-index:-1; }
.tf-tap:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.tf-arena.lean-false .tf-tap-false,
.tf-arena.lean-true .tf-tap-true{
  filter:brightness(1.12);
  box-shadow:0 0 0 4px var(--border);
}
.tf-feedback{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:4px 0 -8px;
  height:52px;
  color:var(--ink);
  overflow:hidden;
}
.tf-feedback-text{
  width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  font-weight:500;
  line-height:26px;
  text-align:center;
}
.tf-feedback.is-right{ color:var(--success); }
.tf-feedback.is-wrong{ color:var(--accent); }
@media (min-width:561px) and (max-height:760px){
  .tf-arena{ margin-top:6px; }
  .tf-card{ height:210px; padding-top:9px; padding-bottom:5px; }
  .tf-card.tf-kanji{ padding-top:4px; padding-bottom:10px; }
  .tf-panel-ja .tf-clip{ height:76px; }
  .tf-panel-shown .tf-clip{ max-height:78px; }
  .tf-text{ font-size:30px; line-height:39px; }
  .tf-text-ja{ font-size:56px; line-height:76px; }
  .tf-text-furi{ line-height:56px; }
  .tf-kanji .tf-panel-ja .tf-clip{ height:64px; }
  .tf-kanji .tf-panel-ja .tf-text-ja{ line-height:64px; }
  .tf-panel-shown .tf-text-ja{ font-size:37px; line-height:39px; }
  .tf-link{ height:36px; font-size:17px; line-height:36px; }
  .tf-equals{ width:26px; height:26px; top:4px; }
  .tf-kanji .tf-equals{ top:1px; }
  .tf-feedback{ height:46px; margin-top:2px; }
  .tf-feedback-text{ line-height:23px; }
}
@media (max-width:560px){
  .tf-arena{ gap:26px; margin-top:8px; }
  .tf-card{ height:191px; padding-top:7px; padding-bottom:3px; padding-left:12px; padding-right:12px; border-radius:16px; }
  .tf-card.tf-kanji{ padding-top:3px; padding-bottom:7px; }
  .tf-panel{ padding:0 10px; }
  .tf-panel-ja .tf-clip{ height:71px; }
  .tf-panel-shown .tf-clip{ max-height:70px; }
  .tf-text{ font-size:26px; line-height:35px; }
  .tf-text-ja{ font-size:52px; line-height:71px; }
  .tf-text-furi{ line-height:52px; }
  .tf-kanji .tf-panel-ja .tf-clip{ height:60px; }
  .tf-kanji .tf-panel-ja .tf-text-ja{ line-height:60px; }
  .tf-panel-shown .tf-text-ja{ font-size:33px; line-height:35px; }
  .tf-link{ height:34px; font-size:16px; line-height:34px; }
  .tf-equals{ width:24px; height:24px; top:4px; }
  .tf-kanji .tf-equals{ top:1px; }
  .tf-feedback{ height:46px; margin-top:2px; }
  .tf-feedback-text{ font-size:15px; line-height:23px; }
}
@media (max-width:380px){
  .tf-page{ padding-left:12px; padding-right:12px; }
  .tf-tap{ padding:11px 8px; font-size:15px; }
  .tf-card{ padding-left:8px; padding-right:8px; }
  .tf-panel{ padding-left:6px; padding-right:6px; }
}
@media (max-width:560px) and (max-height:620px){
  .tf-arena{ margin-top:4px; }
  .tf-card{ height:162px; padding-top:6px; padding-bottom:2px; }
  .tf-card.tf-kanji{ padding-top:1px; padding-bottom:7px; }
  .tf-panel-ja .tf-clip{ height:60px; }
  .tf-panel-shown .tf-clip{ max-height:60px; }
  .tf-text{ font-size:22px; line-height:30px; }
  .tf-text-ja{ font-size:44px; line-height:60px; }
  .tf-text-furi{ line-height:44px; }
  .tf-kanji .tf-panel-ja .tf-clip{ height:51px; }
  .tf-kanji .tf-panel-ja .tf-text-ja{ line-height:51px; }
  .tf-panel-shown .tf-text-ja{ font-size:28px; line-height:30px; }
  .tf-link{ height:28px; font-size:15px; line-height:28px; }
  .tf-equals{ width:20px; height:20px; top:3px; }
  .tf-kanji .tf-equals{ top:1px; }
  .tf-feedback{ height:40px; margin-top:0; }
  .tf-feedback-text{ line-height:20px; }
}
.eg-how,
.eg-stage{ text-align:left; }
.eg-how{ padding:1rem 1.25rem; }
.eg-how-title{
  margin:0 0 4px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.eg-how-list{
  margin:0 0 8px;
  padding-left:1.2rem;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
.eg-how .kana-hint{ text-align:left; }
.eg-levels{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
  margin-bottom:16px;
}
.eg-levels[hidden]{ display:none; }
.eg-level{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  cursor:pointer;
}
.eg-level[hidden]{ display:none; }
.eg-level.active{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
.eg-level-title{ display:block; font-family:'Work Sans', sans-serif; font-size:16px; font-weight:600; }
.eg-level-blurb{ display:block; margin-top:2px; font-family:'Work Sans', sans-serif; font-size:13.5px; color:var(--ink-soft); }
.eg-progress{
  margin:0 2px 8px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--muted);
}
.eg-stage{ padding:1rem 1.1rem; }
.eg-hints{
  display:grid;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.eg-hints[hidden]{ display:none; }
.eg-hint{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 10px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
}
.eg-hint[hidden]{ display:none; }
.eg-hint-num{
  flex:none;
  min-width:1em;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
}
.eg-hint-text{
  flex:1 1 0;
  min-width:0;
  margin:0;
  font-family:'Noto Sans JP', sans-serif;
  font-size:20px;
  line-height:1.8;
  color:var(--ink);
}
.eg-hint-text .wc-tok{ margin:0 1px; border-bottom:none; }
.eg-hint-new{ animation:eg-hint-in 1.4s ease-out; }
@keyframes eg-hint-in{
  from{ background:var(--gold-soft); border-color:var(--gold); }
  to{ background:var(--bg); border-color:var(--border); }
}
@media (prefers-reduced-motion: reduce){ .eg-hint-new{ animation:none; } }
.eg-hint-unused{ background:transparent; border-style:dashed; }
.eg-hint-unused .eg-hint-text{ color:var(--ink-soft); }
.eg-unused-tag{
  flex:none;
  margin-left:auto;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:11px;
  line-height:18px;
  color:var(--muted);
}
.eg-tap-hint{
  margin:6px 2px 12px;
  font-family:'Work Sans', sans-serif;
  font-size:11.5px;
  color:var(--muted);
}
.eg-play{ text-align:center; }
.eg-input{ max-width:420px; }
.eg-preview{
  height:20px;
  line-height:20px;
  margin:0 0 2px;
  overflow:hidden;
  font-family:'Noto Sans JP', 'Work Sans', sans-serif;
  font-size:14px;
  color:var(--muted);
}
.eg-feedback{
  min-height:24px;
  margin:0 0 6px;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  color:var(--ink);
}
.eg-feedback [lang="ja"]{ font-family:'Noto Sans JP', sans-serif; }
.eg-tried{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin:0 0 12px;
}
.eg-tried[hidden]{ display:none; }
.eg-chip{
  padding:1px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family:'Noto Sans JP', 'Work Sans', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:line-through;
  text-decoration-color:var(--muted);
}
.eg-actions{ flex-wrap:wrap; gap:10px; }
.eg-reveal{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
  text-align:center;
}
.eg-reveal-label{
  margin:0;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.eg-reveal-word{
  margin:4px 0 0;
  font-family:'Noto Sans JP', sans-serif;
  font-size:44px;
  font-weight:500;
  line-height:1.25;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.eg-reveal-reading{
  margin:0;
  font-family:'Noto Sans JP', sans-serif;
  font-size:17px;
  color:var(--ink-soft);
}
.eg-reveal-en{
  margin:4px 0 14px;
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  color:var(--ink);
}
.eg-recap{ text-align:center; }
.eg-recap-list{
  display:grid;
  gap:8px;
  list-style:none;
  margin:10px 0 16px;
  padding:0;
  text-align:left;
}
.eg-recap-list[hidden]{ display:none; }
.eg-recap-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
}
.eg-recap-row[hidden]{ display:none; }
.eg-recap-word{ font-family:'Noto Sans JP', sans-serif; font-size:20px; color:var(--ink); }
.eg-recap-reading{ font-family:'Noto Sans JP', sans-serif; font-size:13px; color:var(--muted); }
.eg-recap-en{ font-family:'Work Sans', sans-serif; font-size:14px; color:var(--ink-soft); }
.eg-recap-how{
  margin-left:auto;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
}
.eg-recap-how.solved{ color:var(--success); }
@media (max-width:420px){
  .eg-stage{ padding:0.8rem 0.75rem; }
  .eg-hint{ padding:5px 8px; }
  .eg-hint-text{ font-size:18px; line-height:1.75; }
  .eg-reveal-word{ font-size:36px; }
}
@media (min-width:700px){
  .wrap.eg-page{ max-width:860px; }
  .eg-how-title{ font-size:14px; }
  .eg-how-list{ font-size:22px; }
  .eg-how .kana-hint{ font-size:17px; }
  .eg-level-title{ font-size:23px; }
  .eg-level-blurb{ font-size:19px; }
  .eg-progress{ font-size:17px; }
  .eg-stage{ padding:1rem 1.5rem; }
  .eg-hints{ gap:6px; }
  .eg-hint{ padding:6px 14px; }
.eg-reveal{ margin-top:8px; padding-top:8px; }
  .eg-reveal-en{ margin-bottom:10px; }
  .eg-hint-num{ font-size:17px; }
  .eg-hint-text{ font-size:29px; }
  .eg-unused-tag{ font-size:15px; line-height:26px; }
  .eg-tap-hint{ font-size:15.5px; }
  .eg-input{ max-width:520px; font-size:25px; }
  .eg-input::placeholder{ font-size:21px; }
  .eg-preview{ height:29px; line-height:29px; font-size:20px; }
  .eg-feedback{ min-height:34px; font-size:21.5px; }
  .eg-chip{ font-size:18px; }
  .eg-actions .kana-btn-primary{ font-size:20px; }
.eg-actions .reveal-btn{ font-size:20px; }
.kana-actions.eg-actions:has(> .reveal-btn + .check-btn){ --pair-w:222px; }
  .eg-reveal-label{ font-size:15.5px; }
  .eg-reveal-word{ font-size:65px; }
  .eg-reveal-reading{ font-size:24px; }
  .eg-reveal-en{ font-size:24px; }
  .eg-reveal .kana-btn-primary{ font-size:20px; }
  .eg-recap-word{ font-size:29px; }
  .eg-recap-reading{ font-size:18px; }
  .eg-recap-en{ font-size:20px; }
  .eg-recap-how{ font-size:15.5px; }
}
.game-start-row{ display:flex; justify-content:center; align-items:stretch; gap:12px; width:100%; }
.game-start-row[hidden], .game-skip[hidden]{ display:none; }
.game-start-row > button{ margin-top:0; margin-bottom:0; }
.game-skip{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  font:600 16px 'Work Sans', sans-serif; padding:0 24px; border-radius:999px; cursor:pointer;
  background:transparent; color:inherit; white-space:nowrap;
  border:2px solid color-mix(in srgb, currentColor 35%, transparent);
}
.game-skip:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
@media (hover:hover){ .game-skip:hover{ background:color-mix(in srgb, currentColor 7%, transparent); } }
.kr-intro .game-start-row{ margin-top:4px; }
@media (max-width:560px){
  .game-skip{ font-size:15px; padding:0 16px; }
  .game-start-row .kr-go-big, .game-start-row .ss-go-big, .game-start-row .ym-go-big{
    flex:1 1 0; min-width:0; max-width:240px; padding-left:16px; padding-right:16px;
  }
}
@media (max-width:380px){
  .game-skip{ font-size:14px; padding:0 12px; }
  .game-start-row{ gap:8px; }
}
.kr{
  --kr-c:var(--success);
  --kr-on-c:#fff;
  --kr-tatami:#E4DCC2; --kr-tatami-line:#D6CCAE;
  --kr-card:#FFFEFA; --kr-card-edge:#D9CFB8; --kr-pic:#F3EEDF;
  --kr-cover:#2F4A78; --kr-cover-ring:#4E6CA0;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  container-type:size;
  user-select:none;
  -webkit-user-select:none;
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
}
.kr.kr-kanji{ --kr-c:var(--info); }
:root[data-theme="dark"] .kr{
  --kr-on-c:#141824;
  --kr-tatami:#2A3042; --kr-tatami-line:#323a50;
  --kr-card:#2F3549; --kr-card-edge:#444C66; --kr-pic:#384058;
  --kr-cover:#243A62; --kr-cover-ring:#36528A;
}
.kr:focus{ outline:none; }
.kr [lang="ja"], .kr .kr-jp{ font-family:'Noto Sans JP', sans-serif; }
.kr .kr-ic{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.kr .kr-ic-fill{ fill:currentColor; stroke:none; }
.kr button{ font-family:inherit; }
.kr button:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.kr-go{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; background:var(--kr-c); color:var(--kr-on-c);
  font:700 16px 'Work Sans', sans-serif; padding:13px 26px; border-radius:12px;
  box-shadow:0 6px 22px color-mix(in srgb, var(--kr-c) 32%, transparent);
}
.kr-go[hidden]{ display:none; }
.kr-go-big{ padding:18px 64px; font-size:20px; border-radius:999px; margin-top:4px; gap:12px; }
.kr-go-big .kr-ic{ width:20px; height:20px; }
.kr-intro{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:20px 16px 22px; overflow:hidden; }
.kr-hero{ position:relative; flex:none; width:min(440px, 100%); height:170px; border-radius:16px; overflow:hidden;
  background:repeating-linear-gradient(90deg, var(--kr-tatami) 0 7px, var(--kr-tatami-line) 7px 8px); }
.kr-fcard{ position:absolute; left:50%; bottom:20px; width:86px; height:112px; margin-left:-43px; border-radius:10px; transform-origin:50% 130%;
  transform:translate(calc(var(--x) * var(--sp, 1)), var(--y)) rotate(var(--r));
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.18);
  display:grid; place-items:center; overflow:hidden; }
.kr-fcard-bk, .kr-cover, .kr-lc-b{
  background-color:var(--kr-cover);
  background-image:radial-gradient(circle at 50% 100%, transparent 28%, var(--kr-cover-ring) 29% 33%, transparent 34% 44%, var(--kr-cover-ring) 45% 49%, transparent 50% 60%, var(--kr-cover-ring) 61% 65%, transparent 66%);
  background-size:22px 11px;
}
.kr-fcard-bk{ border:1px solid color-mix(in srgb, #000 20%, var(--kr-cover)); }
.kr-fcard-bk b, .kr-cover b{ font:700 11px 'Noto Sans JP', sans-serif; letter-spacing:.12em; color:#F6F1E4; background:var(--kr-cover); padding:3px 6px; border-radius:5px; border:1px solid color-mix(in srgb, #F6F1E4 40%, transparent); }
.kr-fcard-up{ background:var(--kr-card); border:1px solid var(--kr-card-edge); z-index:1; padding:5px; }
.kr-fcard-up::after{ content:""; position:absolute; inset:5px; border-radius:7px; border:1.5px solid color-mix(in srgb, var(--kr-c) 45%, transparent); pointer-events:none; }
.kr-fcard:nth-child(3){ z-index:2; }
.kr-fa.kr-pic{ width:100%; aspect-ratio:1; }
.kr-fcard{ container-type:inline-size; }
.kr-fa.kr-kj{ font:600 min(26px, calc(78cqw / var(--n, 2)))/1.15 'Noto Sans JP', sans-serif; }
.kr-ttl{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.kr-ttl-jp{ font:700 40px/1.1 'Noto Sans JP', sans-serif; letter-spacing:.08em; }
.kr-ttl small{ font:600 11px 'Work Sans', sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.kr-steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.kr-step{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 6px; border-radius:999px; font:500 13px 'Work Sans', sans-serif; color:var(--ink);
  background:color-mix(in srgb, var(--ink) 5%, var(--card)); border:1px solid var(--border); }
.kr-step i{ width:22px; height:22px; border-radius:999px; background:var(--ink); color:var(--card); display:grid; place-items:center; font:700 12px 'Work Sans', sans-serif; font-style:normal; }
@media (prefers-reduced-motion:no-preference){
  .kr-fcard{ transition:transform .35s cubic-bezier(.2,.8,.3,1.2); animation:kr-fanin .6s cubic-bezier(.2,.8,.3,1.1) backwards; }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .kr-hero:hover .kr-fcard{ transform:translate(calc(var(--x) * var(--sp, 1) * 1.1), calc(var(--y) - 6px)) rotate(calc(var(--r) * 1.25)); }
}
@keyframes kr-fanin{ from{ transform:translate(0, 40px) rotate(0); opacity:0; } }
.kr .kr-pic{ display:grid; place-items:center; border-radius:8px; background:var(--kr-pic); overflow:hidden; }
.kr .kr-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.kr .kr-pic-none{ font:600 15px 'Noto Sans JP', sans-serif; color:var(--ink-soft); padding:4px; text-align:center; }
.kr-bar{ position:relative; flex:none; display:flex; align-items:center; gap:12px; height:60px; margin:8px 12px 8px; padding:5px 6px 5px 12px; border-radius:14px; overflow:hidden;
  background:color-mix(in srgb, var(--kr-c) 9%, var(--card)); border:1px solid color-mix(in srgb, var(--kr-c) 30%, var(--border)); }
.kr-left{ flex:none; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.kr-pips-row{ display:flex; align-items:center; gap:8px; }
.kr-pips{ display:flex; gap:5px; align-items:center; }
.kr-pc{ width:15px; height:20px; border-radius:3px; border:1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); display:grid; place-items:center; font:700 9.5px/1 'Work Sans', sans-serif; color:transparent; position:relative; }
.kr-pc-cur{ border-color:var(--kr-c); background:color-mix(in srgb, var(--kr-c) 12%, transparent); transform:translateY(-1px); box-shadow:0 4px 10px color-mix(in srgb, var(--kr-c) 30%, transparent); }
.kr-pc-done{ background:var(--success); border-color:var(--success); color:#fff; }
.kr-pc-gold{ background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.kr-pc-slip{ background:color-mix(in srgb, var(--success) 55%, var(--card)); border-color:color-mix(in srgb, var(--success) 70%, var(--card)); color:#fff; }
.kr-pc-miss{ background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:color-mix(in srgb, var(--accent) 60%, transparent); color:var(--accent); }
.kr-clock{ font:600 14px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.kr-streak{ font:700 11px 'Work Sans', sans-serif; color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, var(--card)); border:1px solid color-mix(in srgb, var(--gold) 50%, var(--border)); padding:1px 7px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kr-streak[hidden]{ display:none; }
.kr-s-long{ display:none; }
.kr-say{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; overflow:hidden; }
.kr-say-one{ display:block; font:700 24px/1.2 'Work Sans', sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.kr-jpl{ font:700 20px 'Noto Sans JP', sans-serif; color:var(--kr-c); margin-right:10px; }
.kr-ok-t{ color:var(--success); margin-right:10px; }
.kr-bad-t{ color:var(--accent); margin-right:6px; }
.kr-tm-t{ margin-left:12px; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums; }
.kr-pile{ flex:none; display:flex; align-items:center; gap:8px; padding:4px 10px 4px 8px; border-radius:10px; border:1px solid var(--border); background:var(--card); }
.kr-pile-col{ position:relative; width:28px; height:28px; }
.kr-pile-col:empty::before{ content:""; position:absolute; left:2px; top:1px; width:20px; height:26px; border-radius:4px; border:1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.kr-pile-col i{ position:absolute; bottom:0; width:20px; height:26px; border-radius:4px; background:var(--kr-card); border:1px solid var(--kr-card-edge); box-shadow:0 1px 0 var(--kr-card-edge), inset 0 0 0 2.5px var(--kr-card), inset 0 0 0 3.5px color-mix(in srgb, var(--kr-c) 45%, transparent); }
.kr-pile b{ font:700 15px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; min-width:1ch; }
.kr-strike{ flex:none; display:flex; gap:4px; }
.kr-strike i{ width:12px; height:12px; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.kr-strike i.kr-on{ background:var(--accent); border-color:var(--accent); }
.kr-rwrap{ position:relative; flex:none; }
.kr-replay{ width:46px; height:46px; border-radius:999px; border:0; background:var(--kr-c); color:var(--kr-on-c); display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 12px color-mix(in srgb, var(--kr-c) 30%, transparent); }
.kr-replay .kr-ic{ width:24px; height:24px; }
.kr-replay:disabled{ opacity:.4; cursor:default; }
.kr-ring{ position:absolute; inset:-5px; border-radius:999px; pointer-events:none; --rc:var(--gold);
  background:conic-gradient(var(--rc) calc(var(--p, 0) * 1turn), color-mix(in srgb, var(--ink) 12%, transparent) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px)); }
.kr-ring[data-kind="ok"]{ --rc:var(--success); }
.kr-ring[data-kind="over"]{ --rc:var(--muted); }
.kr-ready{ flex:none; border:0; cursor:pointer; background:var(--kr-c); color:var(--kr-on-c); font:700 18px 'Work Sans', sans-serif; padding:0 34px; height:46px; border-radius:999px; box-shadow:0 4px 12px color-mix(in srgb, var(--kr-c) 30%, transparent); }
.kr-studying .kr-rwrap, .kr-studying .kr-strike{ display:none; }
.kr-board{ flex:1; min-height:0; margin:0 12px 12px; padding:8px; border-radius:14px;
  background:repeating-linear-gradient(90deg, var(--kr-tatami) 0 7px, var(--kr-tatami-line) 7px 8px);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); gap:8px; }
.kr-slot{ position:relative; min-height:0; min-width:0; perspective:800px; }
.kr-slot.kr-empty{ border:2px dashed color-mix(in srgb, var(--ink) 16%, transparent); border-radius:12px; }
.kr-card{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transform-style:preserve-3d; }
.kr-face{ position:absolute; inset:0; border-radius:12px; background:var(--kr-card); border:1px solid var(--kr-card-edge);
  box-shadow:0 2px 0 var(--kr-card-edge), 0 4px 10px rgba(0,0,0,.08);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3px; gap:0; overflow:hidden; container-type:size; }
.kr-face::after{ content:""; position:absolute; inset:2px; border-radius:10px; border:1.5px solid color-mix(in srgb, var(--kr-c) 45%, transparent); pointer-events:none; }
.kr-kanji .kr-face{ padding:7px; }
.kr-kanji .kr-face::after{ inset:5px; border-radius:8px; }
.kr-back{ transform:rotateY(180deg); padding:0; }
.kr-back::after{ display:none; }
.kr-cover{ position:absolute; inset:0; display:grid; place-items:center; background-size:26px 13px; }
.kr-cover b{ font-size:13px; padding:4px 8px; border-radius:6px; }
.kr-down .kr-card{ transform:rotateY(180deg); }
.kr-art.kr-pic{ flex:none; width:min(100cqw - 2px, 100cqh - 2px); height:min(100cqw - 2px, 100cqh - 2px); }
.kr .kr-kj{ white-space:nowrap; }
.kr-art.kr-kj{ font:600 min(calc(84cqw / var(--n, 2)), 34cqh, 46px)/1.15 'Noto Sans JP', sans-serif; text-align:center; }
.kr-cap{ font:600 clamp(12px, 10cqw, 17px)/1.2 'Work Sans', sans-serif; color:var(--ink); max-width:100%; padding:0 4px; text-align:center; text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:0; opacity:0; }
.kr-cap.kr-long{ font-size:clamp(11px, 8.5cqw, 15px); line-height:1.15; }
:is(.kr-studying, .kr-hinted) .kr-cap{ max-height:24px; opacity:1; margin-top:3px; }
:is(.kr-studying, .kr-hinted) .kr-cap.kr-long{ max-height:40px; }
:is(.kr-studying, .kr-hinted) .kr-art.kr-pic{ width:min(100cqw - 2px, 100cqh - 26px); height:min(100cqw - 2px, 100cqh - 26px); }
:is(.kr-studying, .kr-hinted) .kr-face:has(.kr-cap.kr-long) .kr-art.kr-pic{ width:min(100cqw - 2px, 100cqh - 42px); height:min(100cqw - 2px, 100cqh - 42px); }
.kr-key{ position:absolute; top:7px; left:8px; z-index:1; font:600 11px/1 'Work Sans', sans-serif; color:var(--ink-soft); background:var(--kr-card); border:1px solid var(--kr-card-edge); border-radius:5px; padding:3px 5px; font-variant-numeric:tabular-nums; }
@media (hover:none){ .kr-key{ display:none; } }
@media (hover:hover){ .kr-playing:not(.kr-studying) .kr-card:hover .kr-face{ border-color:var(--kr-c); } }
.kr-card.kr-bad .kr-face{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--kr-card)); }
.kr-card.kr-hit .kr-face{ border-color:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 45%, transparent); }
.kr-card.kr-show .kr-face{ border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 50%, transparent); }
.kr-plus, .kr-speed{ position:absolute; left:50%; transform:translateX(-50%); z-index:4; pointer-events:none; white-space:nowrap; font:700 15px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; opacity:0; }
.kr-plus{ top:30%; color:var(--accent); }
.kr-speed{ top:38%; color:var(--success); background:var(--card); border:1.5px solid color-mix(in srgb, var(--success) 50%, var(--border)); padding:3px 10px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.14); }
.kr-speed.kr-gold{ color:var(--gold); border-color:color-mix(in srgb, var(--gold) 60%, var(--border)); }
.kr-ripple{ position:absolute; left:50%; top:50%; width:100%; aspect-ratio:1; border-radius:50%; border:3px solid var(--success); transform:translate(-50%, -50%) scale(.4); opacity:0; pointer-events:none; z-index:3; }
.kr-ripple.kr-gold{ border-color:var(--gold); box-shadow:0 0 18px color-mix(in srgb, var(--gold) 50%, transparent); }
@media (prefers-reduced-motion:reduce){
  .kr-plus, .kr-speed{ opacity:1; }
  .kr-card.kr-gone{ opacity:0; }
}
@media (prefers-reduced-motion:no-preference){
  .kr-card{ transition:transform .55s cubic-bezier(.3,.7,.3,1); }
  .kr-pc{ transition:transform .25s, background .25s, border-color .25s; }
  .kr-pc.kr-land{ animation:kr-land .35s cubic-bezier(.2,.8,.3,1.4); }
  .kr-slot.kr-dealt{ animation:kr-deal .4s cubic-bezier(.2,.8,.3,1.1) backwards; }
  .kr-card.kr-bad{ animation:kr-shake .45s; }
  .kr-card.kr-gone{ animation:kr-take .42s cubic-bezier(.4,0,.6,1) forwards; pointer-events:none; }
  .kr-plus{ animation:kr-up .9s ease-out forwards; }
  .kr-speed{ animation:kr-rise 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
  .kr-ripple{ animation:kr-ripple .6s cubic-bezier(.2,.7,.3,1) forwards; }
  .kr-pile.kr-bump{ animation:kr-bump .35s cubic-bezier(.2,.8,.3,1.4); }
  .kr-streak.kr-pop, .kr-rv{ animation:kr-pop .32s cubic-bezier(.2,.8,.3,1.2); }
  .kr-mc-card{ animation:kr-deal .4s cubic-bezier(.2,.8,.3,1.1) backwards; }
  .kr-lc-in{ transition:transform .5s cubic-bezier(.3,.7,.3,1); }
  .kr-cap{ transition:opacity .3s ease, max-height .35s ease, margin .35s ease; }
  .kr-art.kr-pic{ transition:width .35s ease, height .35s ease; }
}
@keyframes kr-land{ 0%{ transform:scale(.6) rotate(-10deg); } 100%{ transform:none; } }
@keyframes kr-deal{ from{ transform:translateY(16px) scale(.92); opacity:0; } }
@keyframes kr-shake{ 20%{ transform:translateX(-6px) rotate(-2deg); } 40%{ transform:translateX(6px) rotate(2deg); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
@keyframes kr-take{ to{ transform:translateY(-18px) scale(.8); opacity:0; } }
@keyframes kr-up{ from{ opacity:1; } to{ transform:translate(-50%, -26px); opacity:0; } }
@keyframes kr-rise{ 0%{ opacity:0; transform:translate(-50%, 8px) scale(.8); } 18%{ opacity:1; transform:translate(-50%, 0) scale(1.08); } 30%{ opacity:1; transform:translate(-50%, 0) scale(1); } 75%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%, -28px); } }
@keyframes kr-ripple{ 0%{ opacity:.9; } 100%{ transform:translate(-50%, -50%) scale(1.35); opacity:0; border-width:1px; } }
@keyframes kr-bump{ 40%{ transform:scale(1.12); } }
@keyframes kr-pop{ from{ transform:scale(.9); opacity:.3; } }
.kr-reveal{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:16px; background:color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.kr-rv{ width:min(320px, 100%); max-height:100%; overflow:hidden; background:var(--card); border:1px solid var(--border); border-top:4px solid var(--gold); border-radius:16px; padding:16px 18px 14px; box-shadow:0 14px 34px rgba(0,0,0,.22); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.kr-rv-tag{ font:600 11px 'Work Sans', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.kr-rv-art.kr-pic{ width:min(150px, 30cqh); height:min(150px, 30cqh); border-radius:12px; flex:none; }
.kr-rv-art.kr-kj{ font:700 56px/1.15 'Noto Sans JP', sans-serif; }
.kr-rv-jp{ display:flex; align-items:center; gap:10px; font:700 30px/1.2 'Noto Sans JP', sans-serif; }
.kr-rv-spk{ width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--kr-c); display:grid; place-items:center; cursor:pointer; }
.kr-rv-spk .kr-ic{ width:18px; height:18px; }
.kr-rv-en{ font:500 16px 'Work Sans', sans-serif; color:var(--ink-soft); }
.kr-rv-x{ font:500 13px 'Work Sans', sans-serif; color:var(--ink-soft); padding-top:6px; border-top:1.5px dashed var(--border); width:100%; }
.kr-rv-x b{ color:var(--accent); font-weight:600; }
.kr-rv .kr-go{ width:100%; margin-top:4px; }
.kr-ended{ padding-top:14px; }
.kr-sum{ flex:1; min-height:0; margin:0 14px 14px; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card); display:flex; flex-direction:column; gap:10px; justify-content:center; overflow:hidden; }
.kr-sum-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kr-sum h3{ margin:0; font:700 18px 'Work Sans', sans-serif; }
.kr-sum-h span{ font:500 13px 'Work Sans', sans-serif; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.kr-sum-h span b{ color:var(--ink); font-weight:700; }
.kr-fan{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 8px; padding:6px 0 4px; }
.kr-mc{ width:78px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.kr-mc-card{ container-type:inline-size; position:relative; width:78px; height:96px; border-radius:9px; background:var(--kr-card); border:1px solid var(--kr-card-edge); box-shadow:0 2px 0 var(--kr-card-edge), 0 4px 10px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; transform:rotate(var(--r, 0deg)); }
.kr-mc-card::after{ content:""; position:absolute; inset:4px; border-radius:6px; border:1.5px solid color-mix(in srgb, var(--kr-c) 45%, transparent); pointer-events:none; }
.kr-mc-a.kr-pic{ width:58%; aspect-ratio:1; border-radius:6px; }
.kr-mc-a.kr-kj{ font:600 min(22px, calc(80cqw / var(--n, 2))) / 1.1 'Noto Sans JP', sans-serif; }
.kr-mc-tm{ font:700 12px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; color:var(--success); }
.kr-mc-gold .kr-mc-card{ border-color:var(--gold); box-shadow:0 2px 0 var(--gold), 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.kr-mc-gold .kr-mc-tm, .kr-mc-slip .kr-mc-tm{ color:var(--gold); }
.kr-mc-miss .kr-mc-card{ opacity:.45; filter:grayscale(1); }
.kr-mc-miss .kr-mc-tm, .kr-mc-miss .kr-mc-wd{ color:var(--accent); }
.kr-mc-wd{ font:600 13px 'Noto Sans JP', sans-serif; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-left-over{ display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:8px; border-top:1.5px dashed var(--border); }
.kr-left-l{ font:600 11px 'Work Sans', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.kr-lrow{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.kr-lc{ position:relative; width:96px; height:58px; padding:0; border:0; background:none; cursor:pointer; perspective:600px; color:inherit; font:inherit; }
.kr-lc-in{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(180deg); }
.kr-lc.kr-open .kr-lc-in{ transform:none; }
.kr-lc-f, .kr-lc-b{ position:absolute; inset:0; border-radius:8px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.kr-lc-f{ background:var(--kr-card); border:1px solid var(--kr-card-edge); box-shadow:0 2px 0 var(--kr-card-edge); }
.kr-lc-f b{ font:700 15px/1.2 'Noto Sans JP', sans-serif; }
.kr-lc-f small{ font:500 11px 'Work Sans', sans-serif; color:var(--ink-soft); max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-lc-b{ transform:rotateY(180deg); background-size:18px 9px; }
@media (hover:hover){ .kr-lc:hover .kr-lc-f{ border-color:var(--kr-c); } }
.kr-sum .kr-go{ width:100%; margin-top:8px; }
@container (min-width:800px){
  .kr-intro{ gap:20px; }
  .kr-hero{ width:560px; height:210px; }
  .kr-fcard{ width:108px; height:140px; margin-left:-54px; bottom:24px; --sp:1.25; }
  .kr-fa.kr-kj{ font-size:min(32px, calc(78cqw / var(--n, 2))); }
  .kr-fcard-bk b{ font-size:13px; }
  .kr-ttl-jp{ font-size:50px; }
  .kr-ttl small{ font-size:12.5px; }
  .kr-step{ font-size:15px; padding:7px 15px 7px 7px; }
  .kr-step i{ width:26px; height:26px; font-size:13px; }
  .kr-go-big{ padding:20px 76px; font-size:22px; }
  .kr-sum{ padding:22px 26px; gap:16px; }
  .kr-sum h3{ font-size:22px; }
  .kr-sum-h span{ font-size:15px; }
  .kr-mc{ width:104px; }
  .kr-mc-card{ width:104px; height:130px; }
  .kr-mc-a.kr-kj{ font-size:min(30px, calc(80cqw / var(--n, 2))); }
  .kr-mc-tm{ font-size:14px; }
  .kr-mc-wd{ font-size:16px; }
  .kr-fan{ gap:14px 14px; }
  .kr-lc{ width:128px; height:74px; }
  .kr-lc-f b{ font-size:19px; }
  .kr-lc-f small{ font-size:12.5px; }
  .kr-left-l{ font-size:12px; }
  .kr-sum .kr-go{ padding:15px; font-size:18px; }
  .kr-rv{ width:min(380px, 100%); }
  .kr-rv-art.kr-pic{ width:min(190px, 34cqh); height:min(190px, 34cqh); }
}
@container (min-width:521px) and (max-height:480px){
  .kr-intro{ gap:12px; padding:14px 16px; }
  .kr-hero{ height:140px; }
  .kr-fcard{ width:80px; height:104px; margin-left:-40px; bottom:14px; }
  .kr-ttl-jp{ font-size:36px; }
  .kr-go-big{ padding:15px 60px; }
}
.qp-page{ --qp-karuta-h:var(--qp-stage-h); }
@media (max-width:560px){
  .qp-page{ --qp-karuta-h:max(var(--qp-stage-h), min(780px, calc(100vh - 78px))); }
  @supports (height:100svh){ .qp-page{ --qp-karuta-h:max(var(--qp-stage-h), min(780px, calc(100svh - 78px))); } }
}
@media (max-width:560px) and (max-height:620px){
  .qp-page{ --qp-karuta-h:max(var(--qp-stage-h), calc(100vh - 64px)); }
  @supports (height:100svh){ .qp-page{ --qp-karuta-h:max(var(--qp-stage-h), calc(100svh - 64px)); } }
}
.qp-page :is(#qpStage, .rf-stage).stage[data-activity="karuta"]{ height:var(--qp-karuta-h); padding:0; }
.karuta-page #krStage{ display:flex; flex-direction:column; box-sizing:border-box; height:var(--qp-karuta-h); padding:0; }
.karuta-page #krStage[hidden]{ display:none; }
@media (max-width:560px){
  .qp-page{ --qp-type-h:max(240px, min(780px, calc(100vh - 78px - var(--kb-h, 38vh)))); }
  @supports (height:100svh){
    .qp-page{ --qp-type-h:max(240px, min(780px, calc(100svh - 78px - var(--kb-h, 38svh)))); }
  }
}
@media (max-width:560px) and (max-height:620px){
  .qp-page{ --qp-type-h:max(220px, calc(100vh - 64px - var(--kb-h, 38vh))); }
  @supports (height:100svh){
    .qp-page{ --qp-type-h:max(220px, calc(100svh - 64px - var(--kb-h, 38svh))); }
  }
}
@media (max-width:560px){
.qp-page :is(#qpStage, .rf-stage)[data-activity],
  .qp-page :is(#qpStage, .rf-stage).qp-is-start,
  .qp-page :is(#qpStage, .rf-stage).qp-is-help{ --qp-stage-h:var(--qp-karuta-h); }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"], [data-activity="complete-word"], [data-activity="yokai"]){ --qp-stage-h:var(--qp-type-h); }
  .yokai-page #ymStage{ height:var(--qp-type-h); }
.qp-page.choice-page{ padding-bottom:0; }
  .qp-page :is(#qpStage, .rf-stage){ margin-bottom:8px; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"], [data-activity="listening"]) .choice-option{ min-height:clamp(56px, calc(var(--qp-stage-h) * 0.115), 84px); }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"], [data-activity="listening"]) .choice-text{ font-size:24px; line-height:34px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="mc-jp-en"], [data-activity="mc-en-jp"], [data-activity="listening"]) .choice-text.choice-text-ja{ font-size:30px; line-height:40px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .listen-play{ width:clamp(64px, calc(var(--qp-stage-h) * 0.19), 136px); height:clamp(64px, calc(var(--qp-stage-h) * 0.19), 136px); }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listening"] .listen-play svg{ width:42%; height:42%; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-grid{ gap:8px; --answers-one-column:1; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-sentence{ --fit-one-line:32px; --fit-two-lines:26px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-option{ min-height:clamp(56px, calc(var(--qp-stage-h) * 0.105), 80px); padding:8px 16px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-text{ font-size:30px; line-height:40px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .choice-key{ width:26px; height:26px; font-size:13px; }
.qp-page :is(#qpStage, .rf-stage)[data-activity="matching"]{ display:flex; flex-direction:column; box-sizing:border-box; height:var(--qp-karuta-h); }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="matching"] .match-board{ flex:1 1 auto; min-height:0; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="matching"] .match-col{ min-height:0; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="matching"] .match-tile{ flex:1 1 0; min-height:0; }
.qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="complete-word"]){ padding-top:34px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] #promptTag:not(.is-blocked){ display:none; }
}
@media (max-width:560px) and (min-height:700px){
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="missing-word"], [data-activity="missing-kanji"], [data-activity="sentence-reading"]) .mw-english{ --fit-max:19px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="matching"] .match-text{ font-size:17px; line-height:23px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="matching"] .match-text-ja{ font-size:22px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="truefalse"] .tf-text-ja{ font-size:68px; line-height:92px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="truefalse"] .tf-text-furi{ line-height:68px; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="truefalse"] .tf-link{ height:40px; font-size:19px; line-height:40px; }
}
@media (max-width:560px) and (max-height:620px){
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] #playCap{ display:none; }
  .qp-page :is(#qpStage, .rf-stage)[data-activity="listen-write"] > .listen-prompt{ gap:4px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="complete-word"]){ padding-top:30px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"], [data-activity="complete-word"]) .kana-answer-row .kana-input{ height:52px; font-size:20px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"], [data-activity="complete-word"]) .kana-answer-row .kana-input::placeholder{ font-size:17px; }
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="listen-write"], [data-activity="complete-word"]) .kana-feedback{ min-height:62px; }
}
@media (max-width:380px) and (max-height:620px){
  .qp-page :is(#qpStage, .rf-stage):is([data-activity="writing"], [data-activity="complete-word"]){ padding-top:10px; --qp-fit-w:calc(100% - 68px); }
}
@container (max-width:520px){
  .kr-intro{ gap:10px; padding:14px 12px 16px; }
  .kr-hero{ height:126px; }
  .kr-fcard{ --sp:.68; width:72px; height:94px; margin-left:-36px; bottom:12px; }
  .kr-fa.kr-kj{ font-size:min(22px, calc(78cqw / var(--n, 2))); }
  .kr-ttl-jp{ font-size:32px; }
  .kr-step{ padding:4px 10px 4px 4px; gap:6px; font-size:12.5px; }
  .kr-step i{ width:19px; height:19px; font-size:11px; }
  .kr-go-big{ padding:14px 52px; font-size:18px; }
  .kr-bar{ height:52px; margin:6px 8px 6px; padding:4px 5px 4px 9px; gap:8px; }
  .kr-pc{ width:11px; height:15px; font-size:7.5px; border-radius:2.5px; }
  .kr-pips{ gap:3px; }
  .kr-clock{ font-size:12.5px; }
  .kr-say-one{ font-size:18px; }
  .kr-jpl{ display:block; font-size:12.5px; margin:0; }
  .kr-tm-t{ margin-left:8px; }
  .kr-ok-t{ margin-right:6px; }
.kr-pile, .kr-streak, .kr-strike{ display:none; }
  .kr-streak[hidden]{ display:none; }
  .kr-replay{ width:42px; height:42px; }
  .kr-replay .kr-ic{ width:22px; height:22px; }
  .kr-ready{ padding:0 18px; height:42px; font-size:16px; }
  .kr-studying .kr-left{ display:none; }
  .kr-studying .kr-say-one{ font-size:16px; line-height:1.2; }
  .kr-studying .kr-jpl{ font-size:11.5px; }
  .kr-board{ gap:6px; padding:6px; margin:0 8px 8px; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-template-rows:repeat(3, minmax(0, 1fr)); }
  .kr-slot{ grid-column:span 2; }
  .kr-slot:nth-child(7){ grid-column:2 / span 2; }
  .kr-slot:nth-child(8){ grid-column:4 / span 2; }
  .kr-ended{ padding-top:10px; }
  .kr-sum{ margin:0 10px 10px; padding:12px; gap:8px; }
  .kr-sum h3{ font-size:16px; }
.kr-fan{ gap:8px 5px; flex-wrap:nowrap; }
  .kr-mc{ flex:1 1 0; min-width:0; width:auto; max-width:54px; }
  .kr-mc-card{ width:100%; height:auto; aspect-ratio:54 / 70; }
  .kr-lrow{ flex-wrap:nowrap; width:100%; }
  .kr-lc{ flex:1 1 0; min-width:0; max-width:84px; }
  .kr-mc-a.kr-kj{ font-size:min(17px, calc(80cqw / var(--n, 2))); }
  .kr-mc-tm{ font-size:11px; }
  .kr-mc-wd{ font-size:11.5px; }
  .kr-lc{ width:auto; height:52px; }
  .kr-sum .kr-go{ padding:12px; }
}
@container (max-width:520px) and (min-height:550px){
  .kr-board{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(4, minmax(0, 1fr)); }
  .kr-slot, .kr-slot:nth-child(7), .kr-slot:nth-child(8){ grid-column:auto; }
}
.ss{
  --ss-c:var(--success);
  --ss-on-c:#fff;
  --ss-belt:#D4CCBA; --ss-slat:#BDB39C; --ss-rail:#A99F88;
  --ss-wood:#C99B66; --ss-wood-top:#B5844F;
  --ss-plate:#FFFFFF; --ss-plate-edge:#D3CBB9; --ss-plate-line:#E8E2D4;
  --ss-bubble:#FFFFFF; --ss-paper:#FFFFFF; --ss-noren:#2E4A78; --ss-noren-ink:#F6F1E4;
  --ss-well:color-mix(in srgb, var(--ink) 5%, var(--card));
  --ss-rice:#FBF8F1; --ss-nori:#26332D; --ss-nori-top:#34453D; --ss-salmon:#F2895A; --ss-tuna:#C73B4B;
  --ss-egg:#F2C94C; --ss-shrimp:#F5A38D; --ss-shrimp-d:#DD775E;
  --ss-face:#2A2522; --ss-mouth:#A3443F; --ss-blush:#F4A6A0;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  container-type:size;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
}
.ss.ss-kanji{ --ss-c:var(--info); }
:root[data-theme="dark"] .ss{
  --ss-on-c:#141824;
  --ss-belt:#343B50; --ss-slat:#454D66; --ss-rail:#262C3D;
  --ss-wood:#6B5139; --ss-wood-top:#8A6A48;
  --ss-plate:#F2EEE4; --ss-plate-edge:#A9A292; --ss-plate-line:#DDD6C6;
  --ss-bubble:#2C3246; --ss-paper:#2A3042; --ss-noren:#3A5A92; --ss-noren-ink:#F2ECDD;
  --ss-well:color-mix(in srgb, #000 18%, var(--card));
}
.ss:focus{ outline:none; }
.ss [lang="ja"]{ font-family:'Noto Sans JP', sans-serif; }
.ss button{ font-family:inherit; }
.ss .ss-ic{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ss .ss-ic-fill{ fill:currentColor; stroke:none; }
.ss .ss-sr, .ss .ss-say-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ss-go{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; background:var(--ss-c); color:var(--ss-on-c);
  font:700 16px 'Work Sans', sans-serif; padding:13px 26px; border-radius:12px;
  box-shadow:0 6px 22px color-mix(in srgb, var(--ss-c) 32%, transparent);
}
.ss-go:focus-visible, .ss-plate:focus-visible .ss-pic, .ss-tab:focus-visible, .ss-strip-btn:focus-visible,
.ss-pause:focus-visible, .ss-spk:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.ss-go .ss-ic{ width:20px; height:20px; }
.ss-g{
  --ss-pw:176px; --ss-sv:140px; --ss-pic:156px; --ss-lane-h:252px; --ss-cust:120px;
  --ss-cap-h:40px; --ss-cap-f:13px; --ss-cap-fl:11.5px;
--ss-word:46px; --ss-word-w:min(360px, calc(100cqw - 364px));
  --ss-tilt:0deg;
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative;
}
.ss-hud{ flex:none; display:flex; align-items:center; gap:12px; padding:12px 14px 10px 16px; }
.ss-tip{ flex:1; text-align:center; font:500 12.5px 'Work Sans', sans-serif; color:var(--ink-soft); }
.ss-pause{
  width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:var(--card);
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:auto; padding:0;
}
@media (hover:hover){ .ss-pause:hover{ color:var(--ink); } }
.ss-pips{
  display:flex; gap:2px; align-items:center; padding:3px 10px 3px 6px; border-radius:999px;
  background:var(--ss-well); border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.ss-pip{ position:relative; width:36px; height:22px; display:block; flex:none; }
.ss-pip svg{ position:absolute; left:0; bottom:0; width:36px; height:auto; overflow:visible; }
.ss-pip .ss-pip-ring{ fill:none; stroke:color-mix(in srgb, var(--ink) 26%, transparent); stroke-width:1.6; stroke-dasharray:3 2.5; }
.ss-pip-cur .ss-pip-ring{ stroke:var(--ss-c); stroke-width:2.2; stroke-dasharray:none; }
.ss-pip-cur::after{ content:""; position:absolute; left:10%; right:10%; bottom:1px; height:6px; border-radius:50%; background:var(--ss-c); opacity:.35; filter:blur(4px); }
.ss-pip-miss svg{ opacity:.45; }
.ss-pip .ss-pip-x{ stroke:var(--accent); stroke-width:2; stroke-linecap:round; fill:none; }
.ss-pip-n{ margin-left:6px; font:600 13px 'Work Sans', sans-serif; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ss-pip-n b{ color:var(--ink); font-weight:700; }
.ss-belt{ position:relative; flex:none; height:var(--ss-lane-h); background:var(--ss-rail); overflow:hidden; touch-action:pan-y; }
.ss-surf{
  position:absolute; inset:6px 0;
  background:repeating-linear-gradient(90deg, var(--ss-slat) 0 2px, var(--ss-belt) 2px 20px);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.18), inset 0 -2px 4px rgba(0,0,0,.12);
}
.ss-lane{ position:absolute; inset:0; }
.ss-dragging .ss-belt{ cursor:grabbing; }
.ss-paused .ss-surf{ opacity:.55; }
.ss-slot{ position:absolute; left:0; top:0; bottom:0; width:var(--ss-pw); display:flex; align-items:center; justify-content:center;
  will-change:transform; z-index:2; }
.ss-plate{
  position:relative; width:100%; padding:0; margin:0; border:0; background:none; color:inherit; font:inherit;
  cursor:pointer; touch-action:pan-y; -webkit-tap-highlight-color:transparent;
}
.ss-plate:focus-visible{ outline:none; }
.ss-pl-in{ display:flex; flex-direction:column; align-items:center; transform:rotate(var(--ss-tilt)); transform-origin:50% 30%; }
.ss-sushi{ width:var(--ss-sv); max-width:100%; height:auto; display:block; filter:drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.ss-pic{
  margin-top:-4px; width:min(100%, var(--ss-pic)); aspect-ratio:1 / 1; overflow:hidden; border-radius:10px;
  background:var(--card); border:3px solid var(--ss-plate); box-sizing:border-box;
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.22); transition:border-color .12s;
}
.ss-pic img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.ss-pic-none{ font:600 15px 'Noto Sans JP', sans-serif; color:var(--ink-soft); padding:6px; text-align:center; }
@media (hover:hover){ .ss-plate:hover .ss-pic{ border-color:var(--ss-c); } }
.ss-plate.ss-bad .ss-pic{ border-color:var(--accent); }
.ss-plate.ss-hint .ss-pic{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
.ss-plate.ss-bad .ss-pl-in{ animation:ssShake .45s; }
@keyframes ssShake{ 20%{ transform:translateX(-5px) rotate(-3deg); } 40%{ transform:translateX(5px) rotate(3deg); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
.ss-flying .ss-pic{ display:none; }
.ss-cap{ display:none; }
.ss-told .ss-pic{ width:calc(min(100%, var(--ss-pic)) - var(--ss-cap-h)); border-radius:10px 10px 0 0; border-bottom-width:0; }
.ss-told .ss-cap{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:100%; height:var(--ss-cap-h); padding:1px 4px;
  background:var(--card); color:var(--ink); border:2px solid var(--ss-plate); border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.22); text-align:center; overflow:hidden;
  font:600 var(--ss-cap-f)/1.15 'Work Sans', sans-serif; transition:border-color .12s;
}
.ss-told .ss-cap-long{ font-size:var(--ss-cap-fl); }
.ss-told .ss-cap-ja{ font-family:'Noto Sans JP', sans-serif; font-size:calc(var(--ss-cap-f) + 1px); }
.ss-told .ss-cap-ja.ss-cap-long{ font-size:var(--ss-cap-f); }
.ss-flying .ss-cap{ display:none; }
@media (hover:hover){ .ss-told .ss-plate:hover .ss-cap{ border-color:var(--ss-c); } }
.ss-plate.ss-bad .ss-cap{ border-color:var(--accent); }
.ss-plate.ss-hint .ss-cap{ border-color:var(--gold); }
.ss-tab{
  position:absolute; right:0; top:0; bottom:0; width:70px; z-index:5; border:0; cursor:pointer;
  touch-action:manipulation; background:var(--ss-c); color:var(--ss-on-c);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font:700 13px 'Work Sans', sans-serif; border-radius:16px 0 0 16px; padding:0;
  box-shadow:-8px 0 16px rgba(0,0,0,.2); transition:filter .1s;
}
.ss-tab .ss-ic{ width:30px; height:30px; stroke-width:2.6; transition:transform .12s cubic-bezier(.2,.8,.3,1.4); }
.ss-tab:active{ filter:brightness(.92); box-shadow:-4px 0 10px rgba(0,0,0,.2); }
.ss-tab.ss-tap{ filter:brightness(1.12); }
.ss-tab.ss-tap .ss-ic{ transform:translateX(5px); }
.ss-shelf{ flex:none; height:50px; position:relative; z-index:1; background:linear-gradient(var(--ss-wood-top), var(--ss-wood));
  box-shadow:0 6px 10px -6px rgba(0,0,0,.35); overflow:hidden; }
.ss-shelf::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:rgba(0,0,0,.18); }
.ss-shelf-g{ position:absolute; bottom:4px; display:flex; align-items:flex-end; gap:12px; }
.ss-shelf-g.ss-g1{ left:6%; }
.ss-shelf-g.ss-g2{ left:62%; gap:16px; }
.ss-shelf-g i{ display:block; height:34px; }
.ss-shelf-g svg{ height:100%; width:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.ss-floor{ flex:1 1 auto; position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:minmax(0, 1fr);
  align-items:end; gap:14px; padding:10px 22px 0; min-height:0; }
.ss-counter{ position:absolute; left:0; right:0; bottom:0; height:34px; background:var(--ss-wood); border-top:5px solid var(--ss-wood-top); z-index:2; }
.ss-seat{ display:flex; align-items:flex-end; gap:12px; min-width:0; min-height:0; }
.ss-cust{ flex:none; width:var(--ss-cust); position:relative; z-index:1; margin-bottom:20px; transform:rotate(-3deg); }
.ss-cust > svg{ display:block; width:100%; height:auto;
filter:drop-shadow(0 0 0 #fff) drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff)
         drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.ss-cust > svg path, .ss-cust > svg ellipse, .ss-cust > svg circle, .ss-cust > svg rect{
  stroke:#2A2522; stroke-width:1.6; stroke-linejoin:round; paint-order:stroke; }
.ss-waiting .ss-bubble{ visibility:hidden; }
.ss-arrive .ss-cust > svg{ animation:ssCustIn .5s cubic-bezier(.2,.9,.3,1.25) both; }
.ss-arrive .ss-bubble{ animation:ssPop .34s .28s cubic-bezier(.2,.8,.3,1.3) both; }
@keyframes ssCustIn{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes ssPop{ from{ transform:scale(.85); opacity:.3; } to{ transform:none; opacity:1; } }
.ss-bubble{
  position:relative; z-index:3; align-self:center; margin-bottom:30px; justify-self:start; max-width:460px;
  background:var(--ss-bubble); border:2.5px solid var(--ss-c); border-radius:18px; padding:14px 14px 14px 22px;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--ss-c) 20%, transparent), 0 0 26px color-mix(in srgb, var(--ss-c) 38%, transparent),
             0 6px 18px rgba(0,0,0,.14);
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px 12px; min-width:0;
}
.ss-bubble::before{ content:""; position:absolute; left:-9px; top:50%; width:16px; height:16px; background:var(--ss-bubble);
  border-left:2.5px solid var(--ss-c); border-bottom:2.5px solid var(--ss-c); transform:translateY(-50%) rotate(45deg); }
.ss-bubble.ss-pop{ animation:ssPop .32s cubic-bezier(.2,.8,.3,1.3); }
.ss-say{ display:flex; align-items:baseline; gap:4px 6px; flex-wrap:wrap; min-width:0; text-align:left; }
.ss-say b{ font:700 36px/1.15 'Noto Sans JP', sans-serif; white-space:nowrap; }
.ss-say b{ font-size:min(var(--ss-word, 36px), calc(var(--ss-word-w, 300px) / var(--n, 4))); }
.ss-say b.ss-got{ color:var(--success); text-decoration:line-through; text-decoration-thickness:2px; opacity:.7; }
.ss-say b.ss-hid{ color:var(--muted); letter-spacing:.12em; font-family:'Noto Sans JP', sans-serif; }
.ss-say .ss-to, .ss-say .ss-q{ font:500 16px 'Noto Sans JP', sans-serif; font-style:normal; color:var(--ink-soft); }
.ss-nobr{ display:inline-flex; align-items:baseline; gap:2px; white-space:nowrap; }
.ss-say .ss-please{ flex-basis:100%; margin-top:-2px; font:500 13px 'Noto Sans JP', sans-serif; letter-spacing:.04em;
  color:var(--ink-soft); white-space:nowrap; text-align:left; }
.ss-spk{ width:44px; height:44px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--ss-c);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.ss-spk .ss-ic{ width:18px; height:18px; }
.ss-spk.ss-spk-big{ width:50px; height:50px; background:var(--ss-c); color:var(--ss-on-c); border-color:var(--ss-c); }
.ss-spk.ss-spk-big .ss-ic{ width:22px; height:22px; }
.ss-pat{ grid-column:1 / -1; height:5px; border-radius:999px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; }
.ss-pat i{ display:block; height:100%; background:var(--ss-c); border-radius:inherit; transform-origin:left; }
.ss-pat i.ss-low{ background:var(--gold); }
.ss-pat i.ss-crit{ background:var(--accent); }
.ss-set-tag, .ss-vip-tag{ position:absolute; top:-11px; font:700 11.5px 'Noto Sans JP', sans-serif; padding:2px 9px; border-radius:999px; white-space:nowrap; color:var(--ss-on-c); }
.ss-set-tag{ right:14px; background:var(--teal); }
.ss-vip-tag{ left:14px; background:var(--gold); }
.ss-bubble.ss-vip{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent), 0 6px 18px rgba(0,0,0,.12); }
.ss-bubble.ss-vip::before{ border-color:var(--gold); }
.ss-react{ position:absolute; left:0; bottom:100%; margin-bottom:6px; z-index:6; white-space:nowrap; background:var(--ss-bubble);
  border:1px solid var(--border); border-radius:12px; padding:4px 10px; font:700 15px 'Noto Sans JP', sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.14); pointer-events:none; transform:rotate(3deg); }
.ss-react-good{ color:var(--success); }
.ss-react-bad{ color:var(--accent); }
.ss-react-sad{ color:var(--ink-soft); }
.ss-coin{ position:absolute; z-index:8; pointer-events:none; font:700 14px 'Work Sans', sans-serif; color:var(--gold);
  font-variant-numeric:tabular-nums; white-space:nowrap; transform:translateX(-50%); }
.ss-stack{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:24px; }
.ss-stack-col{ display:flex; flex-direction:column-reverse; align-items:center; min-height:14px; }
.ss-sp, .ss-stack .ss-empty{ display:block; width:46px; height:14px; border-radius:50%; box-sizing:border-box; }
.ss-sp{ background:var(--ss-plate); border:2.5px solid; box-shadow:0 2px 0 var(--ss-plate-edge); margin-bottom:-7px; }
.ss-stack-col .ss-sp:first-child{ margin-bottom:0; }
.ss-stack .ss-empty{ border:1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.ss-stack small{ font:600 12px 'Work Sans', sans-serif; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ss-menu{ position:absolute; inset:-30px 16px 4px; z-index:5; display:grid; grid-template-columns:auto minmax(0, 1fr);
  grid-template-rows:auto minmax(0, 1fr); align-items:center; gap:6px 12px; background:var(--ss-paper);
  border:1px solid var(--border); border-radius:16px; padding:8px 14px 8px 10px; box-shadow:0 6px 18px rgba(0,0,0,.14);
--ss-mi-w:calc((100cqw - 124px) / 3 - 58px); }
.ss-menu.ss-menu-out{ opacity:0; transition:opacity .25s ease; pointer-events:none; }
.ss-menu-h{ grid-row:1 / 3; writing-mode:vertical-rl; align-self:stretch; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--ss-c); color:var(--ss-on-c); border-radius:10px; padding:6px; }
.ss-menu-h b{ font:700 13.5px/1 'Noto Sans JP', sans-serif; letter-spacing:.03em; }
.ss-menu-h small{ display:none; font:600 12px 'Work Sans', sans-serif; opacity:.9; }
.ss-how{ margin:0; font:500 19px/1.25 'Work Sans', sans-serif; color:var(--ink); text-wrap:balance; }
.ss-how b{ font-weight:700; }
.ss-key{ font-style:normal; display:inline-flex; align-items:center; gap:4px; vertical-align:1px; white-space:nowrap;
  background:var(--ss-c); color:var(--ss-on-c); border-radius:999px; padding:1px 11px 2px; font-weight:700; }
.ss-key .ss-ic{ width:16px; height:16px; stroke-width:2.6; }
.ss-how-p{ display:none; }
.ss-menu-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 14px;
  min-width:0; align-self:center; }
.ss-mi{ display:flex; align-items:center; gap:10px; min-width:0; }
.ss-mi-pic{ flex:none; width:44px; height:44px; box-sizing:border-box; border-radius:9px; overflow:hidden; display:grid; place-items:center;
  background:var(--card); border:2px solid var(--ss-plate); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.ss-mi-pic img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.ss-mi-pic .ss-pic-none{ font-size:11px; padding:2px; }
.ss-mi-t{ display:flex; flex-direction:column; min-width:0; text-align:left; }
.ss-mi-t b{ font:700 20px/1.15 'Noto Sans JP', sans-serif; white-space:nowrap; font-size:min(20px, calc(var(--ss-mi-w) / var(--n, 4))); }
.ss-mi-t small{ font:500 12px/1.2 'Work Sans', sans-serif; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ss-mi-t small[lang="ja"]{ font-family:'Noto Sans JP', sans-serif; font-size:13px; }
.ss-menu-on .ss-seat, .ss-menu-on .ss-stack{ visibility:hidden; }
.ss-menu-on .ss-tab{ box-shadow:0 0 0 4px color-mix(in srgb, var(--ss-c) 35%, transparent), 0 0 28px color-mix(in srgb, var(--ss-c) 60%, transparent); }
.ss-menu-on .ss-strip-t{ background:var(--ss-c); color:var(--ss-on-c); white-space:nowrap; font-size:min(16px, 4.6cqw);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ss-c) 35%, transparent), 0 0 18px color-mix(in srgb, var(--ss-c) 55%, transparent); }
.ss-hand{ position:absolute; z-index:8; width:56px; height:56px; pointer-events:none; right:8px;
  top:calc(48px + var(--ss-lane-h, 252px) / 2 + 4px); opacity:0; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.ss-hand svg{ width:100%; height:100%; display:block; fill:#fff; stroke:#26314A; stroke-width:.7; }
@keyframes ssWalkIn{ from{ transform:translateX(-62cqw) rotate(-3deg); } to{ transform:rotate(-3deg); } }
@keyframes ssStep{ from{ transform:translateY(0) rotate(-4deg); } to{ transform:translateY(-8px) rotate(4deg); } }
.ss-strip{ display:none; flex:none; background:var(--ss-rail); position:relative; z-index:3; touch-action:pan-y; }
.ss-strip-btn{
  width:100%; height:58px; border:0; border-radius:0; cursor:pointer; touch-action:pan-y; padding:0;
  display:flex; align-items:center; justify-content:center; gap:14px; color:var(--ink);
  background:repeating-linear-gradient(90deg, var(--ss-slat) 0 2px, var(--ss-belt) 2px 20px);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.2);
}
.ss-strip-t{ font:700 16px 'Work Sans', sans-serif; background:var(--card); padding:6px 14px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.ss-chev{ display:inline-flex; gap:3px; }
.ss-chev i{ display:block; width:10px; height:10px; border-right:3px solid var(--ss-c); border-top:3px solid var(--ss-c); transform:rotate(45deg); border-radius:2px; opacity:.45; }
.ss-chev i:nth-child(2){ opacity:.7; }
.ss-chev i:nth-child(3){ opacity:1; }
.ss-strip-btn.ss-tap{ filter:brightness(1.06); }
.ss-welcome{ position:absolute; left:50%; top:calc(54px + var(--ss-lane-h, 252px) + 18px); z-index:9; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--ss-noren); color:var(--ss-noren-ink);
  padding:10px 26px 8px; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.25); white-space:nowrap; transform:translateX(-50%); opacity:0; }
.ss-welcome b{ font:700 30px 'Noto Sans JP', sans-serif; letter-spacing:.04em; }
.ss-welcome small{ font:600 12px 'Work Sans', sans-serif; opacity:.8; }
.ss-intro{ flex:1 1 auto; display:flex; flex-direction:column; position:relative; min-height:0; }
.ss-i-belt{ flex:none; height:84px; position:relative; overflow:hidden; background:var(--ss-rail); }
.ss-i-track{ position:absolute; left:0; top:50%; display:flex; gap:26px; padding-left:13px; transform:translateY(-50%); width:max-content; }
.ss-i-track svg{ width:96px; height:auto; display:block; filter:drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.ss-i-noren{ position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:3px; padding-top:7px; width:236px; height:104px; box-sizing:border-box; }
.ss-i-noren::before{ content:""; position:absolute; left:-8px; right:-8px; top:0; height:7px; border-radius:4px; background:var(--ss-wood-top); }
.ss-i-noren span{ flex:1; background:var(--ss-noren); color:var(--ss-noren-ink); border-radius:0 0 6px 6px; display:flex; justify-content:center;
  padding-top:16px; font:700 26px 'Noto Sans JP', sans-serif; box-shadow:0 6px 12px rgba(0,0,0,.22); }
.ss-i-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:20px; padding:30px 28px 8px; }
.ss-i-title{ text-align:center; }
.ss-i-title h2{ margin:0; font:700 30px/1.1 'Work Sans', sans-serif; letter-spacing:-.02em; color:var(--ink); }
.ss-i-title p{ margin:6px 0 0; font:500 14.5px 'Work Sans', sans-serif; color:var(--ink-soft); }
.ss-i-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; counter-reset:ssst; }
.ss-i-steps li{ counter-increment:ssst; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:14px 12px; border-radius:14px; background:var(--ss-well); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.ss-i-steps li::before{ content:counter(ssst); position:absolute; top:10px; left:12px; width:22px; height:22px; border-radius:999px;
  background:var(--ss-c); color:var(--ss-on-c); font:700 12px/22px 'Work Sans', sans-serif; text-align:center; }
.ss-i-steps li > b{ font:600 15px 'Work Sans', sans-serif; }
.ss-i-steps li > span{ font:500 12.5px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); }
.ss-i-ill{ height:70px; display:grid; place-items:center; margin-bottom:4px; }
.ss-m-bub{ position:relative; background:var(--ss-bubble); border:1px solid var(--border); border-radius:12px; padding:6px 12px;
  display:flex; flex-direction:column; align-items:flex-start; box-shadow:0 3px 8px rgba(0,0,0,.1); }
.ss-m-bub b{ font:700 20px/1.1 'Noto Sans JP', sans-serif; white-space:nowrap; }
.ss-m-bub small{ font:500 10.5px 'Noto Sans JP', sans-serif; color:var(--ink-soft); white-space:nowrap; }
.ss-m-next{ width:46px; height:62px; border-radius:12px 0 0 12px; background:var(--ss-c); color:var(--ss-on-c); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; font:700 10px 'Work Sans', sans-serif; box-shadow:-4px 0 10px rgba(0,0,0,.15); }
.ss-m-next .ss-ic{ width:20px; height:20px; stroke-width:2.6; }
.ss-m-pic{ display:flex; flex-direction:column; align-items:center; width:72px; }
.ss-m-pic .ss-sushi{ width:64px; }
.ss-m-pic .ss-pic{ width:44px; border-width:2px; border-radius:7px; margin-top:-3px; border-color:var(--ss-c); }
.ss-i-start{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 20px 22px; }
.ss-go-big{ font-size:22px; padding:18px 84px; border-radius:999px; gap:12px; }
.ss-go-big .ss-ic{ width:22px; height:22px; }
.ss-i-meta{ font:500 12.5px 'Work Sans', sans-serif; color:var(--muted); font-variant-numeric:tabular-nums; }
.ss-i-meta kbd{ font:500 11px 'Work Sans', sans-serif; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:0 5px; color:var(--ink-soft); }
@media (hover:none){ .ss-i-meta .ss-k{ display:none; } }
.ss-end{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:16px; box-sizing:border-box;
  background:color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ss-end[hidden]{ display:none; }
.ss-receipt{ width:min(340px, 100%); box-sizing:border-box; text-align:left; background:var(--ss-paper); border:1px solid var(--border); border-bottom:0;
  border-radius:6px 6px 0 0; padding:18px; box-shadow:0 14px 34px rgba(0,0,0,.22); position:relative; color:var(--ink); }
.ss-receipt::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px;
  background:radial-gradient(circle at 6px 0, var(--ss-paper) 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; }
.ss-r-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1.5px dashed var(--border); padding-bottom:10px; }
.ss-r-head b{ font:700 22px 'Noto Sans JP', sans-serif; display:block; }
.ss-r-head small{ font:500 12px 'Work Sans', sans-serif; color:var(--muted); white-space:nowrap; }
.ss-r-plates{ display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; max-width:50%; }
.ss-r-plates i{ display:block; width:22px; height:9px; border-radius:50%; border:2px solid; background:var(--ss-plate); box-sizing:border-box; }
.ss-receipt ul{ list-style:none; margin:12px 0 10px; padding:0; display:flex; flex-direction:column; gap:7px; }
.ss-receipt li{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:10px; align-items:baseline; font:500 14px 'Work Sans', sans-serif; }
.ss-r-jp{ font:600 16px 'Noto Sans JP', sans-serif; white-space:nowrap; }
.ss-r-mean{ color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-r-mean.ss-r-jpm{ font-family:'Noto Sans JP', sans-serif; }
.ss-star{ color:var(--gold); }
.ss-yen{ font:500 13px 'Work Sans', sans-serif; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:40px; text-align:right; }
.ss-ok{ color:var(--success); font-weight:700; }
.ss-ok2{ color:var(--gold); font-weight:600; font-size:12.5px; white-space:nowrap; }
.ss-no{ color:var(--muted); font-size:12.5px; }
.ss-r-sum{ display:flex; justify-content:space-between; gap:10px; font:600 14px 'Work Sans', sans-serif; padding-top:2px; font-variant-numeric:tabular-nums; }
.ss-r-sum.ss-first{ border-top:1.5px dashed var(--border); padding-top:9px; }
.ss-r-sum > span{ color:var(--ink-soft); font-weight:500; }
.ss-r-sum.ss-total b{ font-size:17px; }
.ss-r-sum .ss-neg{ color:var(--accent); }
.ss-receipt .ss-go{ width:100%; margin-top:16px; }
@media (prefers-reduced-motion:no-preference){
  .ss-pip-cur svg{ animation:ssBob 1.4s ease-in-out infinite; }
  .ss-pip-cur::after{ animation:ssGlow 1.4s ease-in-out infinite; }
  .ss-pip-just svg{ animation:ssPipPop .45s cubic-bezier(.2,.9,.3,1.5); }
  .ss-spk.ss-spk-big{ animation:ssPing 1.6s infinite; }
  .ss-react{ animation:ssReact 1.3s ease forwards; }
  .ss-coin{ animation:ssCoin 1s ease forwards; }
  .ss-welcome{ animation:ssWelcome 1.7s ease forwards; }
  .ss-receipt{ animation:ssPop .35s cubic-bezier(.2,.8,.3,1.2); }
  .ss-sp-new{ animation:ssPipPop .35s cubic-bezier(.2,.9,.3,1.5); }
  .ss-i-track{ animation:ssSlide 28s linear infinite; }
  .ss-i-belt .ss-surf{ animation:ssSlats 1.2s linear infinite; }
  .ss-strip-btn.ss-tap .ss-chev i{ animation:ssChev .35s ease; }
  .ss-strip-btn.ss-tap .ss-chev i:nth-child(2){ animation-delay:.05s; }
  .ss-strip-btn.ss-tap .ss-chev i:nth-child(3){ animation-delay:.1s; }
  .ss-menu{ animation:ssMenuIn .3s ease both; }
  .ss-menu-on .ss-tab, .ss-menu-on .ss-strip-t{ animation:ssGo 1.6s ease-in-out infinite; }
  .ss-hand{ animation:ssTap 3.4s ease-in-out 1s infinite; }
  .ss-menu-on .ss-lane{ animation:ssNudge 3.4s ease-in-out 1s infinite; }
  .ss-walk .ss-cust{ animation:ssWalkIn 1.15s cubic-bezier(.3,.6,.35,1) both; }
  .ss-walk .ss-cust > svg{ animation:ssStep .23s ease-in-out 5 alternate; }
}
@keyframes ssTap{ 0%, 34%{ opacity:0; transform:translate(22px, 26px); } 46%{ opacity:1; transform:none; }
  54%{ transform:scale(.84); } 62%{ transform:none; } 84%{ opacity:1; } 96%, 100%{ opacity:0; } }
@keyframes ssNudge{ 0%, 55%, 100%{ transform:none; } 66%{ transform:translateX(34px); } 76%{ transform:translateX(-6px); }
  84%{ transform:translateX(2px); } 90%{ transform:none; } }
@keyframes ssMenuIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes ssGo{ 50%{ filter:brightness(1.12); transform:scale(1.03); } }
@keyframes ssBob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes ssGlow{ 0%, 100%{ opacity:.2; } 50%{ opacity:.5; } }
@keyframes ssPipPop{ 0%{ transform:translateY(-10px) scale(.6); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes ssPing{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ss-c) 45%, transparent); } 70%{ box-shadow:0 0 0 12px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@keyframes ssReact{ 0%{ transform:translateY(6px) scale(.8) rotate(3deg); opacity:0; } 15%{ transform:rotate(3deg); opacity:1; } 75%{ opacity:1; } 100%{ transform:translateY(-6px) rotate(3deg); opacity:0; } }
@keyframes ssCoin{ from{ transform:translate(-50%, 0); opacity:1; } to{ transform:translate(-50%, -34px); opacity:0; } }
@keyframes ssWelcome{ 0%{ transform:translate(-50%, 10px) scale(.7); opacity:0; } 14%{ transform:translate(-50%, 0) scale(1.06); opacity:1; }
  22%{ transform:translate(-50%, 0) scale(1); } 78%{ opacity:1; } 100%{ transform:translate(-50%, -10px); opacity:0; } }
@keyframes ssSlide{ from{ transform:translate(0, -50%); } to{ transform:translate(-50%, -50%); } }
@keyframes ssSlats{ to{ background-position:20px 0; } }
@keyframes ssChev{ 50%{ transform:translate(5px) rotate(45deg); opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .ss-pl-in{ transform:none; }
  .ss-cust{ transform:none; }
  .ss-arrive .ss-cust > svg, .ss-arrive .ss-bubble, .ss-bubble.ss-pop, .ss-plate.ss-bad .ss-pl-in{ animation:none; }
  .ss-react{ transform:none; }
}
.qp-page :is(#qpStage, .rf-stage).stage[data-activity="sushi"]{ height:var(--qp-karuta-h); padding:0; }
.sushi-page{ --qp-sushi-h:var(--qp-karuta-h); }
.sushi-page #ssStage{ display:flex; flex-direction:column; box-sizing:border-box; height:var(--qp-sushi-h); padding:0; overflow:hidden; }
.sushi-page #ssStage[hidden]{ display:none; }
@container (min-width:800px){
  .ss-g{ --ss-cust:128px; }
}
@container (min-width:561px) and (max-height:500px){
  .ss-g{ --ss-pw:150px; --ss-sv:116px; --ss-pic:118px; --ss-lane-h:196px; --ss-cust:104px; --ss-cap-h:36px; --ss-cap-f:11.5px; --ss-cap-fl:10px; }
  .ss-shelf{ display:none; }
  .ss-g{ --ss-word:38px; }
  .ss-bubble{ margin-bottom:24px; padding:11px 12px 11px 18px; }
  .ss-i-body{ padding-top:22px; gap:14px; }
  .ss-i-belt{ height:70px; }
  .ss-i-noren{ height:86px; }
  .ss-i-ill{ height:58px; }
.ss-menu{ top:8px; }
  .ss-receipt ul{ gap:3px; margin:8px 0 6px; }
  .ss-receipt li{ font-size:13px; }
  .ss-receipt .ss-r-jp{ font-size:14.5px; }
}
@container (min-width:561px) and (max-width:799px) and (min-height:501px){
  .ss-menu-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ss-menu{ --ss-mi-w:calc((100cqw - 110px) / 2 - 58px); }
}
@container (max-width:560px){
.ss-g{ --ss-pw:min(158px, calc((100cqw - 20px) / 2.1)); --ss-sv:120px; --ss-pic:148px; --ss-lane-h:228px; --ss-cust:112px; }
  .ss-tab{ display:none; }
  .ss-strip{ display:block; }
  .ss-tip{ display:none; }
  .ss-hud{ padding:10px 10px 8px 12px; }
  .ss-pip{ width:28px; height:18px; }
  .ss-pip svg{ width:28px; }
  .ss-pips{ padding:2px 8px 2px 4px; }
  .ss-pip-n{ font-size:12px; margin-left:4px; }
  .ss-shelf{ height:38px; }
  .ss-shelf-g i{ height:27px; }
  .ss-shelf-g{ gap:8px; }
  .ss-shelf-g.ss-g1{ left:5%; }
  .ss-shelf-g.ss-g2{ left:auto; right:8%; }
  .ss-floor{ padding:10px 12px 0; gap:10px; grid-template-columns:minmax(0, 1fr); }
  .ss-stack{ display:none; }
  .ss-bubble{ padding:9px 9px 9px 13px; gap:6px 8px; margin-bottom:26px; }
.ss-g{ --ss-word:30px; --ss-word-w:calc(100cqw - 196px); }
  .ss-say .ss-to, .ss-say .ss-q{ font-size:13px; }
  .ss-say .ss-please{ font-size:12px; }
  .ss-spk{ width:38px; height:38px; }
  .ss-spk.ss-spk-big{ width:42px; height:42px; }
  .ss-react{ font-size:13px; padding:3px 8px; }
  .ss-welcome b{ font-size:22px; }
  .ss-welcome{ padding:8px 18px 6px; top:calc(48px + var(--ss-lane-h, 228px) + 12px); }
  .ss-i-belt{ height:64px; }
  .ss-i-track svg{ width:72px; }
  .ss-i-track{ gap:20px; }
  .ss-i-noren{ width:176px; height:70px; }
  .ss-i-noren span{ font-size:19px; padding-top:10px; }
  .ss-i-body{ padding:22px 14px 4px; gap:12px; }
  .ss-i-title h2{ font-size:24px; }
  .ss-i-title p{ font-size:13px; }
  .ss-i-steps{ grid-template-columns:1fr; gap:6px; }
  .ss-i-steps li{ display:grid; grid-template-columns:76px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:10px;
    text-align:left; align-items:center; padding:7px 10px 7px 30px; }
  .ss-i-steps li::before{ top:50%; left:8px; transform:translateY(-50%); width:18px; height:18px; font-size:10.5px; line-height:18px; }
  .ss-i-ill{ grid-row:1 / 3; height:52px; margin:0; transform:scale(.78); }
  .ss-i-steps li > b{ font-size:14px; align-self:end; }
  .ss-i-steps li > span{ font-size:12px; align-self:start; }
  .ss-i-start{ padding:6px 14px 14px; }
  .ss-go-big{ width:100%; max-width:330px; padding:16px 20px; font-size:20px; }
.ss-menu{ inset:8px 10px 4px; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto minmax(0, 1fr); align-items:stretch;
    gap:8px; padding:10px; }
  .ss-menu-h{ grid-row:auto; writing-mode:horizontal-tb; gap:8px; padding:6px 10px; }
  .ss-how{ font-size:16px; text-align:center; }
  .ss-how-c{ display:none; }
  .ss-how-p{ display:inline; }
  .ss-hand{ right:auto; left:calc(50% - 6px); top:auto; bottom:2px; width:50px; height:50px; }
  .ss-menu-h b{ font-size:15px; letter-spacing:.06em; }
  .ss-menu-h small{ display:inline; }
  .ss-menu-list{ gap:8px 6px; align-content:center; }
  .ss-mi{ flex-direction:column; gap:3px; text-align:center; }
  .ss-mi-t{ align-items:center; text-align:center; max-width:100%; }
  .ss-mi-pic{ width:min(84px, 24cqw); height:min(84px, 24cqw); }
  .ss-mi-t b{ font-size:min(17px, calc((33cqw - 18px) / var(--n, 4))); }
.ss-mi-t b.ss-mi-2{ white-space:normal; line-break:anywhere; line-height:1.05;
    font-size:min(17px, calc((33cqw - 18px) / (var(--n2, 4) + .5))); }
  .ss-mi-t small{ font-size:11px; }
}
@container (max-width:560px){
  .ss-bubble{ min-width:0; max-width:100%; box-sizing:border-box; }
  .ss-bubble.ss-set .ss-say b{ font-size:min(28px, 7.4cqw, calc(var(--ss-word-w) / var(--n, 4))); }
}
@container (max-width:560px) and (min-height:560px){
  .ss-bubble.ss-set .ss-say b{ font-size:min(32px, 8cqw, calc(var(--ss-word-w) / var(--n, 4))); }
}
@container (max-width:560px) and (min-height:560px){
  .ss-seat{ flex-direction:column-reverse; align-items:center; justify-content:flex-end; gap:6px; }
  .ss-seat .ss-bubble{ align-self:center; justify-self:auto; margin-bottom:0; padding:12px 14px 12px 18px; min-width:220px; max-width:100%; box-sizing:border-box; }
  .ss-seat .ss-bubble::before{ left:50%; top:auto; bottom:-9px; transform:translateX(-50%) rotate(-45deg); }
  .ss-g{ --ss-word:40px; --ss-word-w:calc(100cqw - 102px); }
  .ss-say .ss-to, .ss-say .ss-q{ font-size:14px; }
  .ss-cust{ margin-bottom:16px; }
  .ss-react{ left:50%; margin-left:-40px; }
}
@container (max-width:560px) and (min-height:560px) and (max-height:700px){
  .ss-g{ --ss-word:36px; --ss-cust:86px; }
  .ss-cust{ margin-bottom:18px; }
  .ss-seat .ss-bubble{ padding-block:8px; }
}
@container (max-width:560px) and (max-height:700px){
  .ss-menu{ gap:5px; padding:7px 8px; }
  .ss-menu-h{ padding:4px 10px; }
  .ss-menu-h b{ font-size:14px; }
.ss-how{ font-size:14px; }
  .ss-how-below{ display:none; }
  .ss-menu-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px 8px; }
  .ss-mi{ flex-direction:row; gap:8px; text-align:left; }
  .ss-mi-t{ align-items:flex-start; text-align:left; }
  .ss-mi-pic{ width:38px; height:38px; }
  .ss-mi-t b{ font-size:min(16px, calc((50cqw - 78px) / var(--n, 4))); }
  .ss-mi-t b.ss-mi-2{ font-size:min(16px, calc((50cqw - 78px) / (var(--n2, 4) + .5))); }
}
@container (max-width:560px) and (min-height:560px){
  .ss-menu{ top:-30px; }
}
@container (max-width:560px) and (max-height:559px){
  .ss-g{ --ss-pw:min(124px, calc((100cqw - 20px) / 2.1)); --ss-sv:100px; --ss-pic:104px; --ss-lane-h:176px; --ss-cust:92px;
    --ss-cap-h:38px; --ss-cap-f:11px; --ss-cap-fl:9.5px; }
  .ss-shelf{ display:none; }
  .ss-cust{ margin-bottom:18px; }
  .ss-i-steps li > span, .ss-i-title p{ display:none; }
  .ss-i-steps li{ grid-template-rows:auto; padding-block:4px; }
  .ss-i-ill{ grid-row:1; height:44px; transform:scale(.68); }
  .ss-i-steps li > b{ align-self:center; }
  .ss-i-belt{ height:52px; }
  .ss-i-track svg{ width:60px; }
  .ss-i-noren{ height:56px; width:156px; }
  .ss-i-noren span{ font-size:16px; padding-top:8px; }
  .ss-i-body{ padding-top:18px; gap:8px; }
  .ss-receipt{ padding:12px 14px; }
  .ss-receipt ul{ gap:1px; margin:6px 0 4px; }
  .ss-receipt li{ font-size:12px; }
  .ss-r-jp{ font-size:13px; }
  .ss-r-head b{ font-size:18px; }
  .ss-r-head{ padding-bottom:6px; }
  .ss-r-sum{ font-size:12.5px; padding-top:1px; }
  .ss-r-sum.ss-first{ padding-top:5px; }
  .ss-receipt .ss-go{ margin-top:8px; padding:10px 18px; font-size:15px; }
.ss-menu{ bottom:2px; }
  .ss-mi-pic{ width:34px; height:34px; }
  .ss-mi-t small{ -webkit-line-clamp:1; }
}
@container (max-width:560px) and (max-height:430px){
  .ss-g{ --ss-pw:min(112px, calc((100cqw - 20px) / 2.1)); --ss-sv:88px; --ss-pic:92px; --ss-lane-h:156px; --ss-cust:76px;
    --ss-cap-h:36px; --ss-cap-f:10.5px; --ss-cap-fl:9px; }
  .ss-strip-btn{ height:50px; }
  .ss-g{ --ss-word:26px; }
  .ss-bubble{ margin-bottom:22px; }
  .ss-i-body{ padding-top:14px; gap:6px; }
  .ss-i-title h2{ font-size:21px; }
}
.ym{
  --ym-c:var(--success);
  --ym-on-c:#fff;
  --ym-boss:#C2402B;
  --ym-well:color-mix(in srgb, var(--ink) 5%, var(--card));
  --ym-dim:1;
  position:relative; flex:1 1 auto; min-height:0; width:100%; height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  container:ym / size;
  font-family:'Work Sans', sans-serif; color:var(--ink);
  -webkit-user-select:none; user-select:none;
}
.ym[hidden]{ display:none; }
.ym-kanji{ --ym-c:var(--info); }
:root[data-theme="dark"] .ym{ --ym-on-c:#141824; --ym-boss:#E86A52; --ym-well:color-mix(in srgb, #000 18%, var(--card)); --ym-dim:.9; }
.ym [lang="ja"], .ym-in{ font-family:'Noto Sans JP', sans-serif; }
.ym-ic{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ym-ic-fill{ fill:currentColor; stroke:none; }
.ym-g{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative; }
.ym-g[hidden]{ display:none; }
.ym-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ym-hud{ display:flex; align-items:center; gap:12px; padding:10px 12px 8px 14px; flex:none; background:var(--card); border-bottom:1px solid var(--border); position:relative; z-index:6; }
.ym-hud[hidden]{ display:none; }
.ym-pips{ display:flex; gap:4px; align-items:center; padding:4px 10px 4px 6px; border-radius:999px; background:var(--ym-well); border:1px solid var(--border); flex:none; }
.ym-pips[hidden]{ display:none; }
.ym-pip{ width:22px; height:22px; border-radius:999px; display:grid; place-items:center; box-sizing:border-box;
  border:1.6px dashed color-mix(in srgb, var(--ink) 28%, transparent); font:600 11px 'Work Sans', sans-serif; color:var(--ink-soft); flex:none; }
.ym-pip[hidden]{ display:none; }
.ym-pip-cur{ border:2px solid var(--ym-c); animation:ymPipBob 1.4s ease-in-out infinite; }
@keyframes ymPipBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
.ym-pip-ok{ border:0; background:var(--ym-c); color:var(--ym-on-c); }
.ym-pip-gold{ border:0; background:var(--gold); color:var(--ym-on-c); }
.ym-pip-miss{ border:0; background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); }
.ym-pip-boss{ display:flex; align-items:center; gap:3px; padding:2px 3px 2px 6px; margin-left:2px; border-radius:999px;
  background:color-mix(in srgb, var(--ym-boss) 14%, transparent); border:1.5px solid color-mix(in srgb, var(--ym-boss) 55%, transparent); }
.ym-pip-boss[hidden]{ display:none; }
.ym-pip-boss > b{ font-weight:600; font-size:11px; color:var(--ym-boss); margin-right:1px; }
.ym-pip-n{ margin-left:4px; font-weight:600; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ym-pip-n b{ color:var(--ink); }
.ym-tip{ flex:1; text-align:center; font-weight:500; font-size:12.5px; color:var(--ink-soft); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ym-pause{ width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:auto; flex:none; padding:0; }
.ym-pause[hidden]{ display:none; }
.ym-pause:hover{ color:var(--ink); }
.ym-pause:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.ym-field{ flex:1 1 auto; position:relative; overflow:hidden; min-height:0; --ym-ww:92px; --ym-pic:86px; --ym-goal:15%; filter:brightness(var(--ym-dim)); }
.ym-scene, .ym-scene > *{ position:absolute; }
.ym-scene{ inset:0; background:linear-gradient(#141936 0%, #2B2552 38%, #3A2F5C 46%); }
.ym-moon{ right:9%; top:9%; width:58px; height:58px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #FFF6D8, #F3D98C 70%); box-shadow:0 0 40px 10px rgba(255,236,170,.25); }
.ym-stars{ inset:0 0 60% 0; opacity:.8; background-image:radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 34% 8%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 56% 22%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 71% 12%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 46% 30%, #fff 50%, transparent), radial-gradient(1.1px 1.1px at 24% 34%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 84% 32%, #fff 50%, transparent); }
.ym-hills{ left:0; right:0; top:22%; height:22%; width:100%; }
.ym-ground{ left:0; right:0; top:40%; bottom:0; background:linear-gradient(#2E2848, #3C3456 40%, #463D60); }
.ym-path{ left:0; right:0; top:56%; bottom:0; opacity:.9; clip-path:polygon(0 18%, 100% 0, 100% 100%, 0 100%);
  background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.12) 46px 50px), linear-gradient(#5B5174, #4F4669); }
.ym-string{ left:0; right:0; top:0; height:24%; width:100%; }
.ym-trees{ left:0; right:0; top:16%; height:28%; width:100%; }
.ym-sc-snow{ background:linear-gradient(#1C2846 0%, #34476B 40%, #4A5E82 46%); }
.ym-sc-snow .ym-moon{ opacity:.65; box-shadow:0 0 50px 16px rgba(220,230,255,.18); }
.ym-sc-snow .ym-ground{ background:linear-gradient(#C9D6E8, #DCE5F0 40%, #E4EBF4); }
.ym-sc-snow .ym-path{ background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(70,90,120,.12) 46px 50px), linear-gradient(#B7C5D9, #AEBCD1); }
.ym-sc-sakura{ background:linear-gradient(#2E2450 0%, #6A4E86 24%, #D99AAE 44%); }
.ym-sc-sakura .ym-moon{ width:46px; height:46px; background:radial-gradient(circle at 40% 40%, #FFF6F0, #F6D6DA 70%); }
.ym-sc-sakura .ym-ground{ background:linear-gradient(#5A4670, #66527C 40%, #6E5A84); }
.ym-sc-sakura .ym-path{ background:radial-gradient(3px 2px at 20% 30%, #F4B6C8 60%, transparent), radial-gradient(3px 2px at 60% 70%, #F4B6C8 60%, transparent), radial-gradient(3px 2px at 85% 40%, #FAD3DF 60%, transparent), radial-gradient(3px 2px at 40% 85%, #FAD3DF 60%, transparent), repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.1) 46px 50px), linear-gradient(#8C789E, #806C94);
  background-size:120px 60px, 140px 70px, 110px 50px, 160px 80px, auto, auto; }
.ym-sc-autumn{ background:linear-gradient(#2A2046 0%, #7E3A50 26%, #E8894A 44%); }
.ym-sun{ right:14%; top:22%; width:76px; height:76px; border-radius:50%; background:radial-gradient(circle, #FFE1A6, #FFB45E 70%); box-shadow:0 0 50px 14px rgba(255,170,90,.35); }
.ym-sc-autumn .ym-ground{ background:linear-gradient(#4A2E36, #573538 40%, #5E3A3A); }
.ym-sc-autumn .ym-path{ background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.12) 46px 50px), linear-gradient(#7E5A50, #745248); }
.ym-fall{ inset:0; overflow:hidden; pointer-events:none; }
.ym-fall i{ position:absolute; top:-24px; font-style:normal; font-size:var(--s); line-height:1; animation:ymFall linear infinite; }
.ym-f-snow{ width:var(--s); height:var(--s); border-radius:50%; background:#fff; opacity:.85; }
.ym-f-sakura{ width:var(--s); height:calc(var(--s) * .7); border-radius:60% 0 60% 0; background:#F7BACB; }
@keyframes ymFall{ from{ transform:translate(0,0) rotate(0); } to{ transform:translate(var(--dx), 640px) rotate(var(--rot)); } }
.ym-lant{ animation:ymGlow 2.6s ease-in-out infinite; }
@keyframes ymGlow{ 50%{ opacity:.75; } }
.ym-goal{ position:absolute; left:0; bottom:0; width:var(--ym-goal); height:100%; z-index:2; pointer-events:none; }
.ym-goal svg{ position:absolute; left:0; bottom:0; width:100%; height:100%; overflow:visible; }
.ym-shake{ animation:ymGoalShake .45s; }
@keyframes ymGoalShake{ 20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); } }
.ym-field.ym-quake{ animation:ymQuake .45s ease; }
@keyframes ymQuake{ 15%{ transform:translate(-4px,2px); } 35%{ transform:translate(4px,-2px); } 55%{ transform:translate(-3px,1px); } 75%{ transform:translate(2px,-1px); } }
.ym-paused .ym-body, .ym-paused .ym-head, .ym-paused .ym-wisp, .ym-paused .ym-scene *, .ym-paused .ym-sign .ym-pic, .ym-paused .ym-sign .ym-kj, .ym-paused .ym-pip-cur{ animation-play-state:paused !important; }
.ym-walker{ position:absolute; left:0; top:0; width:var(--ym-ww); z-index:3; will-change:transform; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.ym-walker[hidden]{ display:none; }
.ym-body{ width:100%; }
.ym-body svg{ display:block; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.ym-body svg :is(path,rect,circle,ellipse,polygon):not(.ym-nl){ stroke:#2A2522; stroke-width:1.5; stroke-linejoin:round; paint-order:stroke; }
.ym-mv-hop .ym-body{ animation:ymHop .62s ease-in-out infinite; }
.ym-mv-walk .ym-body{ animation:ymWalk .5s ease-in-out infinite; }
.ym-mv-float .ym-body{ animation:ymFloat 1.6s ease-in-out infinite; }
.ym-mv-waddle .ym-body{ animation:ymWaddle .7s ease-in-out infinite; }
.ym-mv-wave .ym-body{ animation:ymWave 1.3s ease-in-out infinite; transform-origin:50% 0; }
.ym-mv-stomp .ym-body{ animation:ymStomp 1s ease-in-out infinite; }
.ym-mv-wriggle .ym-body{ animation:ymWriggle .9s ease-in-out infinite; }
@keyframes ymHop{ 0%,100%{ transform:translateY(0) rotate(0); } 40%{ transform:translateY(-10px) rotate(-4deg); } 60%{ transform:translateY(-10px) rotate(3deg); } }
@keyframes ymWalk{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-4px) rotate(2deg); } }
@keyframes ymFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes ymWaddle{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg) translateY(-2px); } }
@keyframes ymWave{ 0%,100%{ transform:skewX(-6deg) translateY(0); } 50%{ transform:skewX(6deg) translateY(-6px); } }
@keyframes ymStomp{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 30%{ transform:translateY(-6px) rotate(0); } 50%{ transform:translateY(0) rotate(2deg) scaleY(.97); } }
@keyframes ymWriggle{ 0%,100%{ transform:skewY(-4deg) translateY(0); } 50%{ transform:skewY(4deg) translateY(-4px); } }
.ym-unlit .ym-sign .ym-pic, .ym-unlit .ym-sign .ym-kj{ background:#1A1530 !important; border-color:#3A3156; position:relative; color:transparent; }
.ym-unlit .ym-sign .ym-pic > *{ visibility:hidden; }
.ym-unlit .ym-sign .ym-pic::after, .ym-unlit .ym-sign .ym-kj::after{ content:"？"; position:absolute; inset:0; display:grid; place-items:center; font:600 calc(var(--ym-pic) * .45) 'Noto Sans JP', sans-serif; color:#5E5480; }
.ym-unlit .ym-sign .ym-en, .ym-unlit .ym-sign .ym-hint{ visibility:hidden; }
.ym-unlit .ym-body{ filter:brightness(.55) saturate(.6); }
.ym-lit .ym-sign .ym-pic, .ym-lit .ym-sign .ym-kj{ animation:ymLitUp .8s ease; }
.ym-lit .ym-body{ filter:drop-shadow(0 0 14px rgba(255,200,90,.7)); }
@keyframes ymLitUp{ 0%{ box-shadow:0 0 0 0 rgba(255,210,100,.95), 0 3px 8px rgba(0,0,0,.3); transform:scale(.9); } 40%{ box-shadow:0 0 0 10px rgba(255,210,100,.5), 0 0 30px 8px rgba(255,210,100,.8); transform:scale(1.08); } 100%{ box-shadow:0 3px 8px rgba(0,0,0,.3); transform:none; } }
.ym-dash .ym-body{ animation-duration:.24s; }
.ym-dash::before{ content:""; position:absolute; right:-18px; bottom:22%; width:26px; height:20px; opacity:.8; background:repeating-linear-gradient(0deg, rgba(255,255,255,.7) 0 2px, transparent 2px 7px); }
.ym-flying .ym-body{ animation:ymFlap .3s ease-in-out infinite; }
@keyframes ymFlap{ 0%,100%{ transform:translateY(0) scaleX(1); } 50%{ transform:translateY(-4px) scaleX(1.06); } }
.ym-flying::after{ content:""; position:absolute; left:-30px; top:60%; width:30px; height:14px; transform:rotate(-30deg); background:repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 2px, transparent 2px 6px); }
.ym-disguised .ym-body{ animation:ymWaddle .9s ease-in-out infinite; }
.ym-signs{ display:flex; gap:8px; align-items:flex-end; margin-bottom:4px; }
.ym-signs[hidden]{ display:none; }
.ym-sign{ display:flex; flex-direction:column; align-items:center; gap:3px; transition:transform .2s, opacity .2s; }
.ym-sign[hidden]{ display:none; }
.ym-pic{ width:var(--ym-pic); height:var(--ym-pic); border-radius:10px; border:3px solid #fff; background:#F3E9DD; overflow:hidden; display:grid; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.3); box-sizing:border-box; }
.ym-pic[hidden]{ display:none; }
.ym-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.ym-pic-none{ font:600 calc(var(--ym-pic) * .4) 'Noto Sans JP', sans-serif; color:#B9AE98; }
.ym-en{ width:max-content; max-width:calc(var(--ym-ww) + 64px); padding:2px 8px; border-radius:7px; background:#fff; color:#26314A; font:600 15px/1.2 'Work Sans', sans-serif;
  text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.25); text-wrap:balance; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; box-sizing:border-box; }
.ym-en[hidden]{ display:none; }
.ym-en.ym-long{ font-size:14px; max-width:calc(var(--ym-ww) + 80px); }
.ym-kj{ min-width:var(--ym-pic); height:var(--ym-pic); padding:0 8px; border-radius:10px; background:#FFFDF7; color:#26314A; border:3px solid #fff; display:grid; place-items:center;
  font-weight:600; font-size:calc(var(--ym-pic) * .5); box-shadow:0 3px 8px rgba(0,0,0,.3); white-space:nowrap; box-sizing:border-box; }
.ym-kj[hidden]{ display:none; }
.ym-hint{ padding:1px 7px; border-radius:6px; background:#26314A; color:#fff; font-weight:600; font-size:16px; letter-spacing:.12em; white-space:nowrap; }
.ym-sign.ym-match .ym-pic, .ym-sign.ym-match .ym-kj{ box-shadow:0 0 0 3px #F6CF45, 0 3px 8px rgba(0,0,0,.3); }
.ym-near .ym-sign .ym-pic, .ym-near .ym-sign .ym-kj{ animation:ymWarn .5s ease-in-out infinite; }
@keyframes ymWarn{ 50%{ box-shadow:0 0 0 4px #E0573A, 0 3px 8px rgba(0,0,0,.3); } }
.ym-sign.ym-done{ transform:translateY(-24px) scale(.4) rotate(-20deg); opacity:0; }
.ym-walker.ym-boss{ width:calc(var(--ym-ww) * 1.55); }
.ym-boss .ym-signs{ gap:10px; }
.ym-boss .ym-en{ max-width:calc(var(--ym-ww) + 60px); }
.ym-boss .ym-en.ym-long{ max-width:calc(var(--ym-ww) + 76px); }
.ym-boss-tag{ display:flex; align-items:center; gap:6px; margin:2px 0 -2px; padding:2px 10px 2px 8px; border-radius:999px; background:#2A1A22; color:#FFE9D6;
  font-weight:600; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,.35); white-space:nowrap; position:relative; z-index:1; }
.ym-boss-tag[hidden]{ display:none; }
.ym-boss-tag i{ font-style:normal; color:#FF7A5C; letter-spacing:1px; font-size:12px; }
.ym-boss-tag i.ym-lost{ color:#6B5560; }
.ym-hurt .ym-body{ animation:ymHurt .45s ease; }
@keyframes ymHurt{ 0%{ filter:brightness(2) saturate(.2); transform:translateX(10px) rotate(4deg); } 60%{ transform:translateX(-3px); } 100%{ filter:none; transform:none; } }
.ym-tail{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .7s cubic-bezier(.5,0,.8,.5), opacity .6s .1s; }
.ym-tail.ym-fall{ transform:translateY(30px) rotate(calc((var(--i) - 4) * 12deg)); opacity:0; }
.ym-head{ transform-box:view-box; transform-origin:50px 88px; animation:ymSway 2.4s ease-in-out infinite; animation-delay:calc(var(--i) * -.8s); }
@keyframes ymSway{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.ym-head.ym-down{ animation:none; transform:rotate(var(--dr, 50deg)) translateY(16px); opacity:0; transition:transform .5s cubic-bezier(.5,0,.8,.4), opacity .4s .25s; }
.ym-aura{ position:absolute; left:50%; bottom:38%; width:0; height:0; pointer-events:none; z-index:2; }
.ym-wisp{ position:absolute; left:-9px; top:-12px; width:18px; height:24px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 65%, #F2FBFF 0 20%, #7FC8FF 45%, rgba(90,169,240,0) 72%); filter:drop-shadow(0 0 6px #7FC8FF); animation:ymOrbit 3.2s linear infinite; }
.ym-wisp:nth-child(2){ animation-delay:-1.07s; }
.ym-wisp:nth-child(3){ animation-delay:-2.13s; }
@keyframes ymOrbit{ from{ transform:rotate(0deg) translateX(calc(var(--ym-ww) * .95)) rotate(0deg) scale(1); } 50%{ transform:rotate(180deg) translateX(calc(var(--ym-ww) * .95)) rotate(-180deg) scale(.75); } to{ transform:rotate(360deg) translateX(calc(var(--ym-ww) * .95)) rotate(-360deg) scale(1); } }
.ym-boss.ym-injured .ym-body{ animation-duration:1.3s; }
.ym-b-oni.ym-injured .ym-body{ animation-name:ymLimp; }
@keyframes ymLimp{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 20%{ transform:translateY(-3px) rotate(3deg); } 38%{ transform:translateY(2px) rotate(7deg); } 55%{ transform:translateY(1px) rotate(5deg); } 78%{ transform:translateY(-5px) rotate(-2deg); } }
.ym-b-kyubi.ym-injured .ym-body{ animation-name:ymStagger; animation-duration:1.5s; }
@keyframes ymStagger{ 0%,100%{ transform:translate(0,4px) rotate(-5deg); } 30%{ transform:translate(-4px,6px) rotate(-8deg); } 50%{ transform:translate(2px,2px) rotate(4deg); } 75%{ transform:translate(4px,6px) rotate(7deg); } }
.ym-b-kyubi.ym-injured .ym-wisp:nth-child(n+2){ opacity:0; transition:opacity .6s; }
.ym-b-kyubi.ym-injured .ym-wisp{ filter:drop-shadow(0 0 3px #7FC8FF); opacity:.7; }
.ym-b-namazu.ym-injured .ym-body{ animation-name:ymFlop; animation-duration:1.1s; }
@keyframes ymFlop{ 0%,100%{ transform:rotate(4deg) translateY(2px); } 25%{ transform:rotate(14deg) translateY(-6px); } 45%{ transform:rotate(2deg) translateY(3px) scaleY(.94); } 70%{ transform:rotate(10deg) translateY(-2px); } }
.ym-b-orochi.ym-injured .ym-body{ animation-name:ymDrag; animation-duration:1.8s; }
@keyframes ymDrag{ 0%,100%{ transform:translateY(3px) rotate(-3deg); } 50%{ transform:translateY(0) rotate(3deg) scaleY(.96); } }
.ym-b-orochi.ym-injured .ym-head:not(.ym-down){ animation-duration:3.8s; }
.ym-warn{ position:absolute; left:50%; top:30%; z-index:7; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none;
  background:#2A1A22; color:#FFE9D6; padding:12px 26px 10px; border-radius:14px; border:2px solid #FF7A5C; box-shadow:0 0 0 6px rgba(255,122,92,.18), 0 14px 30px rgba(0,0,0,.4);
  animation:ymWarnIn 2s ease forwards; white-space:nowrap; }
.ym-warn[hidden]{ display:none; }
.ym-warn b{ font-weight:600; font-size:30px; color:#FF7A5C; letter-spacing:.06em; }
.ym-warn small{ font-weight:600; font-size:12.5px; }
@keyframes ymWarnIn{ 0%{ transform:translate(-50%,-50%) scale(.6); opacity:0; } 12%{ transform:translate(-50%,-50%) scale(1.08); opacity:1; } 20%{ transform:translate(-50%,-50%) scale(1); } 82%{ opacity:1; } 100%{ transform:translate(-50%,-60%); opacity:0; } }
.ym-gust{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.ym-gust i{ position:absolute; left:0; height:3px; border-radius:3px; opacity:0; background:linear-gradient(90deg, transparent, rgba(225,238,255,.9) 45%, transparent); box-shadow:0 0 3px rgba(40,60,100,.35); animation:ymGust .65s ease-out forwards; }
@keyframes ymGust{ 0%{ transform:translateX(-100%); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(var(--fw)); opacity:0; } }
.ym-blown .ym-body{ rotate:14deg; transition:rotate .15s ease-out; }
.ym-body{ transition:rotate .3s ease-in; }
.ym-fx{ position:absolute; z-index:5; pointer-events:none; left:0; top:0; }
.ym-puff{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.85); }
.ym-puff-big{ width:34px; height:34px; }
.ym-throw-gold{ filter:drop-shadow(0 0 8px #F6CF45); }
.ym-fxt{ position:absolute; z-index:6; pointer-events:none; transform:translate(-50%,-50%); white-space:nowrap; font:600 20px 'Noto Sans JP', sans-serif; color:#FFE9D6; text-shadow:0 2px 0 rgba(0,0,0,.5); }
.ym-pop{ position:absolute; z-index:6; pointer-events:none; transform:translate(-50%,-100%); white-space:nowrap; display:flex; flex-direction:column; align-items:center; gap:2px; animation:ymPopUp 1.15s ease forwards; }
.ym-pop[hidden]{ display:none; }
.ym-pop b{ font-weight:600; font-size:22px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45), 0 0 10px rgba(0,0,0,.35); }
.ym-pop small{ font:600 11px 'Work Sans', sans-serif; padding:2px 8px; border-radius:999px; background:#F6CF45; color:#3B2A07; }
@keyframes ymPopUp{ 0%{ transform:translate(-50%,-80%) scale(.6); opacity:0; } 15%{ transform:translate(-50%,-100%) scale(1.08); opacity:1; } 70%{ opacity:1; } 100%{ transform:translate(-50%,-150%); opacity:0; } }
.ym-bar{ flex:none; display:flex; align-items:center; gap:10px; padding:10px 12px 12px; background:var(--card); border-top:1px solid var(--border); position:relative; z-index:6; }
.ym-bar[hidden]{ display:none; }
.ym-ofuda{ --g:0; position:relative; width:30px; height:46px; flex:none; border-radius:2px; background:#F7F1E2; border:1.5px solid #B3432F; box-sizing:border-box;
  box-shadow:inset 0 0 0 2px #F7F1E2, inset 0 0 0 3px rgba(179,67,47,.45), 0 0 calc(var(--g) * 22px) calc(var(--g) * 6px) rgba(255,176,50, var(--g));
  display:flex; flex-direction:column; align-items:center; padding-top:2px; overflow:hidden; transition:box-shadow .15s, transform .15s; margin-left:4px; }
.ym-ofuda[hidden]{ display:none; }
.ym-ofuda::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,214,110,.9), rgba(255,214,110,0) 75%); opacity:var(--g); transition:opacity .15s; pointer-events:none; }
.ym-ofuda b{ font:600 12px/1 'Noto Sans JP', sans-serif; color:#B3432F; position:relative; z-index:1; }
.ym-ofuda i{ font:600 11px/1.05 'Noto Sans JP', sans-serif; font-style:normal; color:#26314A; writing-mode:vertical-rl; white-space:nowrap; margin-top:3px; position:relative; z-index:1; max-height:30px; overflow:hidden; }
.ym-ofuda.ym-off i{ color:#A89E8E; }
.ym-ofuda.ym-off{ animation:ymOfShake .3s; }
@keyframes ymOfShake{ 25%{ transform:translateX(-2px) rotate(-4deg); } 75%{ transform:translateX(2px) rotate(4deg); } }
.ym-ofuda.ym-fire{ animation:ymOfFire .45s ease; }
@keyframes ymOfFire{ 0%{ transform:none; } 35%{ transform:translateY(-8px) scale(1.18) rotate(-6deg); filter:brightness(1.3); } 100%{ transform:none; } }
.ym-ofuda.ym-gold{ background:#FBE29A; border-color:#B98B2E; }
.ym-ofuda.ym-gold b{ color:#8A6312; }
.ym-in{ flex:1; min-width:0; height:46px; border-radius:12px; border:2px solid var(--border); background:var(--bg); color:var(--ink); padding:0 14px; font-size:22px; font-weight:500;
  outline:none; transition:border-color .12s, box-shadow .12s; box-sizing:border-box; -webkit-appearance:none; appearance:none; -webkit-user-select:text; user-select:text; }
.ym-in::-webkit-search-cancel-button{ display:none; }
.ym-in:focus{ border-color:var(--ym-c); box-shadow:0 0 0 3px color-mix(in srgb, var(--ym-c) 22%, transparent); }
.ym-in::placeholder{ font:500 15px 'Work Sans', sans-serif; color:var(--muted); }
.ym-in.ym-hit{ border-color:var(--success); }
.ym-skip{ flex:none; height:46px; padding:0 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--ink-soft); font:600 13px 'Work Sans', sans-serif; cursor:pointer; display:flex; align-items:center; gap:6px; }
.ym-skip[hidden]{ display:none; }
.ym-skip:hover{ color:var(--ink); }
.ym-skip:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.ym-skip kbd, .ym-meta kbd{ font:600 10.5px 'Work Sans', sans-serif; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:0 5px; color:var(--ink-soft); }
@media (hover:none){ .ym-skip kbd, .ym-k{ display:none; } }
.ym-ov{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:14px; background:color-mix(in srgb, #0E1220 42%, transparent); box-sizing:border-box; }
.ym-ov[hidden]{ display:none; }
.ym-card{ width:min(420px, 100%); max-height:100%; overflow:hidden; background:var(--card); color:var(--ink); border:1px solid var(--border); border-radius:18px; padding:20px 20px 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.35); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; box-sizing:border-box; animation:ymCardIn .3s cubic-bezier(.2,.8,.3,1.2); }
.ym-card[hidden]{ display:none; }
@keyframes ymCardIn{ from{ transform:translateY(10px) scale(.95); opacity:0; } to{ transform:none; opacity:1; } }
.ym-card h2{ margin:0; font:600 26px/1.15 'Work Sans', sans-serif; text-wrap:balance; }
.ym-card h2 small{ display:block; font:600 13px 'Work Sans', sans-serif; color:var(--ink-soft); margin-top:6px; }
.ym-card h2 small[lang="ja"]{ font-family:'Noto Sans JP', sans-serif; }
.ym-card p{ margin:0; font:500 13.5px/1.45 'Work Sans', sans-serif; color:var(--ink-soft); }
.ym-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; width:100%; }
.ym-steps[hidden]{ display:none; }
.ym-steps li{ background:var(--ym-well); border-radius:12px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; font:600 12.5px/1.3 'Work Sans', sans-serif; }
.ym-steps li[hidden]{ display:none; }
.ym-steps li i{ font-style:normal; font-size:22px; line-height:1; }
.ym-go{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; background:var(--ym-c); color:var(--ym-on-c);
  font:600 16px 'Work Sans', sans-serif; padding:13px 26px; border-radius:12px; box-shadow:0 6px 22px color-mix(in srgb, var(--ym-c) 32%, transparent); }
.ym-go[hidden]{ display:none; }
.ym-go:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.ym-go-big{ font-size:20px; padding:15px 64px; border-radius:999px; }
.ym-meta{ font:500 12px 'Work Sans', sans-serif; color:var(--muted); }
.ym-learn-list{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.ym-learn-list[hidden]{ display:none; }
.ym-learn-item{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; max-width:180px; }
.ym-learn-item[hidden]{ display:none; }
.ym-pic-big{ --ym-pic:96px; border-radius:16px; }
.ym-two .ym-pic-big{ --ym-pic:76px; }
.ym-pic-kj{ background:#FFFDF7; color:#26314A; font-weight:600; font-size:calc(var(--ym-pic) * .45); padding:0 6px; width:auto; min-width:var(--ym-pic); white-space:nowrap; }
.ym-ans{ font-weight:600; font-size:34px; line-height:1.1; }
.ym-two .ym-ans{ font-size:26px; }
.ym-sub{ font:500 14px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); }
.ym-tagline{ font:600 12px 'Work Sans', sans-serif; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.ym-res{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:5px; }
.ym-res[hidden]{ display:none; }
.ym-res li{ display:grid; grid-template-columns:32px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:5px 10px; border-radius:10px; background:var(--ym-well); text-align:left; }
.ym-res li[hidden]{ display:none; }
.ym-res li.ym-row-boss{ background:color-mix(in srgb, var(--ym-boss) 10%, var(--ym-well)); }
.ym-mini{ width:32px; height:32px; border-radius:7px; overflow:hidden; background:#F3E9DD; display:grid; place-items:center; }
.ym-mini[hidden]{ display:none; }
.ym-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.ym-mini-kj{ background:#FFFDF7; color:#26314A; font-weight:600; font-size:13px; width:auto; min-width:32px; padding:0 3px; white-space:nowrap; }
.ym-w{ font-weight:600; font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ym-w-en{ font:500 12px 'Work Sans', sans-serif; color:var(--ink-soft); margin-left:6px; }
.ym-row-mark{ font-weight:600; font-size:12px; color:var(--ym-boss); }
.ym-res li:not(.ym-row-boss) .ym-st{ grid-column:4; }
.ym-st{ font:600 12px 'Work Sans', sans-serif; white-space:nowrap; }
.ym-st-gold{ color:var(--gold); }
.ym-st-ok{ color:var(--success); }
.ym-st-miss{ color:var(--accent); }
.qp-page :is(#qpStage, .rf-stage).stage[data-activity="yokai"]{ padding:0; overflow:hidden; }
.yokai-page #ymStage{ display:flex; flex-direction:column; box-sizing:border-box; height:var(--qp-stage-h); padding:0; overflow:hidden; }
.yokai-page #ymStage[hidden]{ display:none; }
@container ym (max-width:560px){
  .ym-field{ --ym-ww:64px; --ym-pic:62px; --ym-goal:19%; }
  .ym-moon{ width:40px; height:40px; }
  .ym-en{ font-size:13.5px; padding:1px 6px; max-width:calc(var(--ym-ww) + 56px); }
  .ym-en.ym-long{ font-size:12.5px; max-width:calc(var(--ym-ww) + 66px); }
  .ym-pic, .ym-kj{ border-width:2px; border-radius:8px; }
  .ym-hint{ font-size:14px; padding:0 5px; }
  .ym-boss .ym-en{ max-width:calc(var(--ym-ww) + 44px); }
  .ym-boss .ym-en.ym-long{ max-width:calc(var(--ym-ww) + 56px); }
  .ym-boss-tag{ font-size:11px; padding:1px 8px 1px 6px; }
}
@container ym (max-width:480px){
  .ym-tip{ display:none; }
  .ym-hud{ padding:8px 10px 6px 10px; }
  .ym-pip{ width:18px; height:18px; font-size:10px; }
  .ym-pips{ gap:3px; padding:3px 8px 3px 4px; }
  .ym-warn b{ font-size:22px; }
  .ym-warn{ padding:8px 16px 7px; }
  .ym-warn small{ font-size:11px; }
  .ym-bar{ padding:8px 10px 10px; gap:8px; }
  .ym-ofuda{ width:26px; height:40px; }
  .ym-ofuda i{ max-height:26px; font-size:10px; }
  .ym-in{ height:42px; font-size:20px; }
  .ym-skip{ height:42px; padding:0 10px; }
  .ym-card{ padding:16px 14px 14px; gap:10px; }
  .ym-card h2{ font-size:22px; }
  .ym-steps li{ font-size:11.5px; padding:8px 4px; }
  .ym-go-big{ width:100%; padding:13px 20px; font-size:18px; }
}
.ym-res{ flex:0 1 auto; min-height:0; overflow-y:auto; }
@container ym (max-height:470px){
  .ym-card{ padding:14px 16px 12px; gap:8px; }
  .ym-card h2{ font-size:21px; }
  .ym-card h2 small{ margin-top:3px; font-size:12px; }
  .ym-res{ gap:3px; }
  .ym-res li{ padding:3px 8px; gap:8px; grid-template-columns:26px minmax(0,1fr) auto auto; }
  .ym-mini{ width:26px; height:26px; }
  .ym-w{ font-size:15px; }
  .ym-go{ padding:10px 22px; font-size:15px; }
  .ym-go-big{ padding:12px 48px; font-size:18px; }
  .ym-intro p{ font-size:12.5px; }
  .ym-steps li{ padding:7px 6px; }
}
@container ym (max-height:400px){
  .ym-field{ --ym-ww:58px; --ym-pic:52px; }
  .ym-hint{ font-size:13px; }
.ym-walker.ym-boss{ --ym-pic:42px; }
  .ym-boss .ym-en, .ym-boss .ym-en.ym-long{ font-size:10.5px; }
  .ym-boss .ym-hint{ font-size:11px; }
  .ym-steps, .ym-intro p{ display:none; }
  .ym-res li{ padding:2px 8px; grid-template-columns:22px minmax(0,1fr) auto auto; }
  .ym-mini{ width:22px; height:22px; }
  .ym-w{ font-size:14px; }
  .ym-w-en{ font-size:11px; }
  .ym-card h2{ font-size:19px; }
  .ym-pic-big{ --ym-pic:60px; }
  .ym-two .ym-pic-big{ --ym-pic:52px; }
  .ym-ans{ font-size:24px; }
  .ym-card{ gap:6px; padding-top:10px; padding-bottom:10px; }
}
@container ym (max-height:320px){
  .ym-field{ --ym-ww:48px; --ym-pic:44px; }
  .ym-pic-big{ --ym-pic:50px; }
  .ym-two .ym-pic-big{ --ym-pic:44px; }
.ym-en{ font-size:11px; line-height:1.15; padding:1px 5px; max-width:calc(var(--ym-ww) + 84px); }
  .ym-en.ym-long{ font-size:11px; max-width:calc(var(--ym-ww) + 124px); }
  .ym-boss .ym-en, .ym-boss .ym-en.ym-long{ font-size:9.5px; max-width:calc(var(--ym-ww) * 1.55 + 60px); }
  .ym-hint{ font-size:12px; }
  .ym-boss .ym-hint{ font-size:10px; }
.ym-walker.ym-boss{ --ym-pic:28px; }
.ym-walker:not(.ym-boss) .ym-sign:has(.ym-long):has(.ym-hint){ --ym-pic:32px; }
  .ym-card{ gap:4px; padding-top:8px; padding-bottom:8px; }
  .ym-card h2{ font-size:17px; }
  .ym-card h2 small{ display:none; }
  .ym-res{ gap:2px; }
  .ym-res li{ padding:1px 8px; grid-template-columns:20px minmax(0,1fr) auto auto; }
  .ym-mini{ width:20px; height:20px; }
  .ym-w{ font-size:13px; }
  .ym-w-en{ font-size:10.5px; }
  .ym-go{ padding:8px 20px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .ym-body, .ym-head, .ym-wisp, .ym-scene *, .ym-pop, .ym-card, .ym-warn, .ym-pic, .ym-kj, .ym-pip-cur,
  .ym-field.ym-quake, .ym-shake, .ym-ofuda.ym-fire, .ym-ofuda.ym-off{ animation:none !important; }
  .ym-fall{ display:none; }
  .ym-sign{ transition:none; }
  .ym-near .ym-sign .ym-pic, .ym-near .ym-sign .ym-kj{ box-shadow:0 0 0 4px #E0573A, 0 3px 8px rgba(0,0,0,.3); }
}
.bk-section-title{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.bk-shelf{ margin-bottom:26px; }
.bk-group + .bk-group{ margin-top:26px; }
.bk-shelf[hidden], .bk-empty[hidden]{ display:none; }
.bk-empty{ margin:0; color:var(--ink-soft); }
.bk-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 14px;
}
@media (min-width:700px){
  .bk-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.bk-card{
  display:block;
  min-width:0;
  text-decoration:none;
  color:var(--ink);
}
.bk-card:hover .bk-cover{ border-color:var(--ink-soft); }
.bk-card:focus-visible{ outline:none; }
.bk-card:focus-visible .bk-cover{ outline:2px solid var(--info); outline-offset:2px; }
.bk-cover{
  position:relative;
  display:block;
  aspect-ratio:3 / 4;
  max-width:100%;
  overflow:hidden;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  container-type:inline-size;
}
.bk-cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bk-cover.is-missing{ background:linear-gradient(160deg, var(--gold-soft), var(--sakura-soft)); }
.bk-cover.is-missing .bk-cover-img{ display:none; }
.bk-cover-title{
  position:absolute;
  left:6%;
  right:6%;
  margin:0;
  text-align:center;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:600;
  font-size:20px;
  font-size:11.5cqw;
  line-height:1.95;
  color:#000;
  -webkit-text-stroke:0.09em #fff;
  paint-order:stroke fill;
  overflow-wrap:anywhere;
}
.bk-cover-title rt{
  -webkit-text-stroke:0.09em #fff;
  paint-order:stroke fill;
}
.bk-pos-top .bk-cover-title{ top:5%; }
.bk-pos-center .bk-cover-title{ top:50%; transform:translateY(-50%); }
.bk-pos-bottom .bk-cover-title{ bottom:5%; }
.bk-one-line .bk-cover-title{
  font-size:min(11.5cqw, 86cqw / var(--bk-title-len, 9));
  white-space:nowrap;
  overflow-wrap:normal;
}
.bk-see-through .bk-cover-title,
.bk-see-through .bk-cover-title rt{
  color:var(--ink);
  -webkit-text-stroke-color:var(--card);
}
.bk-unit-badge{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border);
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:11px;
  color:var(--ink);
}
.bk-reader-body{ overflow:hidden; }
.bk-reader{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-rows:auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head head  head"
    "prev pager next"
    "where where where"
    "audio audio audio";
  column-gap:24px;             
height:calc(100vh - var(--sn-top-h, 0px) - var(--sn-bot-h, 0px));
  height:calc(100dvh - var(--sn-top-h, 0px) - var(--sn-bot-h, 0px));
  max-width:900px;
  margin:0 auto;
  padding:8px 16px 10px;
  box-sizing:border-box;
}
.bk-head{ grid-area:head; min-width:0; margin-bottom:0; position:relative; }
.bk-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:6px;
}
.bk-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:'Noto Sans JP', sans-serif;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
.bk-tools{
  --m:var(--info);
  --well:color-mix(in srgb, var(--ink) 5%, var(--card));
  display:flex;
  flex:none;
  align-items:center;
  gap:18px;
}
:root[data-theme="dark"] .bk-tools{ --well:color-mix(in srgb, #000 18%, var(--card)); }
.bk-tools[hidden]{ display:none; }
.bk-tools button:focus-visible{ outline:2px solid var(--m); outline-offset:2px; }
.bk-tool-group{ display:flex; align-items:center; gap:8px; }
.bk-tool-label{
  font:600 13px 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
#zoomLabel{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.bk-tools .set-seg button{ padding:6px 14px; font-size:13px; }
.bk-step{
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border-radius:12px;
  background:var(--well);
  border:1px solid var(--border);
}
.bk-step button{
  padding:6px 12px;
  border:0;
  border-radius:9px;
  background:var(--card);
  color:var(--ink);
  font:600 13px/1.25 'Work Sans', sans-serif;
  box-shadow:0 1px 3px rgba(0,0,0,0.18), inset 0 0 0 1px var(--border);
  cursor:pointer;
}
.bk-step button:disabled{
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  cursor:default;
}
.bk-zoom-val{
  min-width:3.4em;
  text-align:center;
  font:600 13px/1.25 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.bk-tools-btn{
  display:none;
  grid-area:aa;
  align-self:center;
  align-items:center;
  justify-content:center;
  width:40px;
  height:38px;
  padding:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--ink-soft);
  font:600 15px 'Work Sans', sans-serif;
  cursor:pointer;
}
.bk-tools-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.bk-tools-btn[hidden]{ display:none; }
.bk-tools-btn[aria-expanded="true"]{ background:var(--bg); color:var(--ink); }
.bk-books{
  display:none;
  grid-area:books;
  align-self:center;
  align-items:center;
  justify-content:center;
  width:40px;
  height:38px;
  box-sizing:border-box;
  padding:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  text-decoration:none;
}
.bk-books[hidden]{ display:none; }
.bk-btn-lbl, .bk-btn-chev{ display:none; }
.bk-books svg{ width:22px; height:22px; flex:none; }
.bk-books:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.bk-books-menu{
  position:absolute;
  z-index:900;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:170px;
  box-sizing:border-box;
  padding:6px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.bk-books-menu[hidden]{ display:none; }
.bk-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:10px;
  color:var(--ink);
  font:600 15px 'Work Sans', sans-serif;
  text-decoration:none;
}
.bk-menu-item[hidden]{ display:none; }
.bk-menu-item svg{ width:22px; height:22px; flex:none; }
.bk-menu-item:hover{ background:var(--bg); }
.bk-menu-item:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.bk-pager{
  grid-area:pager;
  min-height:0;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  container-type:size;
}
.bk-pager::-webkit-scrollbar{ display:none; }
.bk-pager[hidden]{ display:none; }
.bk-page{
  flex:0 0 100%;
  min-width:0;
  height:100%;
  box-sizing:border-box;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.bk-page-inner{
  margin:auto 0;
  align-self:center;
  width:100%;
  max-width:680px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.bk-page:not(.bk-title-page) .bk-page-inner{ flex:1 0 auto; margin:0; }
.bk-page:not(.bk-title-page) .bk-text{ margin:auto 0; }
.bk-text{
  width:100%;
  font-family:'Noto Sans JP', sans-serif;
  font-size:calc(19px * var(--bk-zoom, 1));
  line-height:2.15;
  color:var(--ink);
}
.bk-para{ margin:0 0 0.55em; }
.bk-para:last-child{ margin-bottom:0; }
.bk-quote{ text-indent:-0.5em; }
.bk-text .wc-tok{
  margin:0;
  padding:0;
  line-height:inherit;
  border-bottom:none;
  border-radius:2px;
}
.bk-text rt, .bk-cover-title rt{ font-size:0.5em; }
.bk-figure{
  margin:0 0 18px;
  width:100%;
  display:flex;
  justify-content:center;
}
.bk-figure[hidden]{ display:none; }
.bk-pic{
  display:block;
  width:auto;
  height:auto;
  max-width:min(100%, 560px);
  max-height:min(42cqh, 420px);
  border-radius:10px;
}
.bk-nav{ display:contents; }
.bk-nav[hidden]{ display:none; }
.bk-reader #prevBtn{ grid-area:prev; align-self:center; }
.bk-reader #nextBtn{ grid-area:next; align-self:center; }
.bk-arrow{
  width:56px;
  height:56px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.bk-arrow svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bk-arrow:hover:not(:disabled){ border-color:var(--ink-soft); }
.bk-arrow:disabled{ opacity:0.35; cursor:default; }
.bk-where{
  grid-area:where;
  justify-self:center;
  padding-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:min(50vw, 260px);
}
.bk-where-text{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--ink-soft);
}
.bk-scrub{
  position:relative;
  display:block;
  width:100%;
  height:4px;
  cursor:pointer;
  touch-action:none;
  outline:none;
}
.bk-scrub::before{ content:""; position:absolute; left:-12px; right:-12px; top:-20px; bottom:-20px; }
.bk-progress{
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  display:block;
  height:6px;
  border-radius:3px;
  background:var(--border);
  overflow:hidden;
  pointer-events:none;
}
.bk-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--gold);
  transition:width 0.2s ease;
}
.bk-ticks{ position:absolute; inset:0; pointer-events:none; }
.bk-tick{
  position:absolute;
  top:-0.5px;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink-soft) 55%, var(--border));
}
.bk-thumb{
  position:absolute;
  top:50%;
  left:0;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px var(--bg), 0 1px 4px rgba(0,0,0,0.45);
  transition:left 0.2s ease;
  pointer-events:none;
}
.bk-scrub:focus-visible .bk-thumb{ outline:2px solid var(--accent); outline-offset:3px; }
.bk-scrub.is-dragging .bk-progress-fill,
.bk-scrub.is-dragging .bk-thumb{ transition:none; }
.bk-scrub.is-dragging .bk-thumb{ transform:scale(1.15); }
.bk-scrub-tip{
  position:absolute;
  bottom:calc(100% + 30px);
  left:0;
  z-index:5;
  transform:translateX(-50%);
  padding:5px 10px;
  border-radius:8px;
  background:var(--ink);
  color:var(--bg);
  font:600 13px 'Work Sans', sans-serif;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}
.bk-scrub-tip[hidden]{ display:none; }
.bk-scrub-tip small{ display:block; font-weight:500; font-size:11px; opacity:0.8; }
.bk-audio{
  grid-area:audio;
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:8px;
}
.bk-audio[hidden]{ display:none; }
.bk-play{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.bk-play:hover{ border-color:var(--ink-soft); }
.bk-play svg{ width:18px; height:18px; fill:currentColor; }
.bk-time{
  flex:0 0 auto;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--ink-soft);
  min-width:4.4em;
  text-align:right;
}
.bk-seek{
  flex:1 1 auto;
  min-width:0;
  height:18px;
  margin:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.bk-seek:focus{ outline:none; }
.bk-seek:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.bk-seek::-webkit-slider-runnable-track{
  height:4px;
  border-radius:2px;
  background:var(--border);
}
.bk-seek::-moz-range-track{
  height:4px;
  border-radius:2px;
  background:var(--border);
}
.bk-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;          
  border-radius:50%;
  border:none;
  background:var(--gold);
}
.bk-seek::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  border:none;
  background:var(--gold);
}
.bk-missing{ grid-area:pager; align-self:start; margin:48px auto; text-align:center; }
.bk-missing[hidden]{ display:none; }
.bk-missing .pill{ display:inline-block; text-decoration:none; }
.wc-pop-card{
  display:block;
  margin-top:10px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:13.5px;
  cursor:pointer;
}
.wc-pop-card:hover{ border-color:var(--ink-soft); }
@media (min-width:700px){
  .bk-text{ font-size:calc(22px * var(--bk-zoom, 1)); }
  .bk-page{ padding:28px 32px; }
}
.bk-cover-title .wc-tok{
  margin:0;
  padding:0;
  border:none;
  border-radius:4px;
  font-weight:inherit;
}
.bk-reader{ width:100%; }
.bk-nobr{ display:inline-block; max-width:100%; text-indent:0; }
@media (hover:hover) and (pointer:fine){
  .bk-pager{ cursor:grab; }
.bk-pager.is-side{ cursor:pointer; }
}
.bk-pager.is-dragging{
  scroll-snap-type:none;
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
}
.bk-text{ font-size:min(calc(19px * var(--bk-zoom, 1)), calc((100cqw - 32px) / 8.5)); }
@media (min-width:700px){
  .bk-text{ font-size:min(calc(22px * var(--bk-zoom, 1)), calc((100cqw - 64px) / 8.5)); }
}
.bk-tool-group[hidden]{ display:none; }
.bk-bubble-page .bk-comic{ margin:auto 0; }
.bk-bubble-page{ --bk-pad-y:24px; padding-top:12px; padding-bottom:12px; }
.bk-bubble-page .bk-page-inner{ max-width:none; }
.bk-comic{
  --bk-ar:0.722;
  position:relative;
  width:min(100%, calc((100cqh - var(--bk-pad-y, 24px) - 2px) * var(--bk-ar) * var(--bk-page-zoom, 1)));
  container-type:inline-size;
  font-family:'Noto Sans JP', sans-serif;
  color:#1a1a1a;
}
.bk-comic-pic{ display:block; width:100%; height:auto; border-radius:10px; }
.bk-bubble{
  position:absolute;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
font-size:calc(var(--bk-fs, 5.2) * 1cqw);
  text-spacing-trim:space-all;
  line-height:1.9;
}
.bk-bubble[hidden]{ display:none; }
.bk-comic .wc-tok{
  margin:0;
  padding:0;
  line-height:inherit;
  border-bottom:none;
  border-radius:2px;
}
.bk-comic .wc-tok:hover, .bk-comic .wc-tok.open{ background:#DCE4F0; }
.bk-comic rt{ font-size:0.5em; }
.bk-comic.is-missing{ width:100%; color:var(--ink); }
.bk-comic.is-missing .bk-comic-pic{ display:none; }
.bk-comic.is-missing .bk-bubble{
  position:static;
  display:block;
  width:auto !important;
  height:auto !important;
  margin:0 0 0.55em;
  font-size:19px;
  line-height:2.15;
  white-space:normal;
}
.bk-comic.is-missing .wc-tok:hover, .bk-comic.is-missing .wc-tok.open{ background:var(--info-soft); }
.bk-pager, .bk-boards{
  --paper:#FBF7EE;
  --bg:#F6F1E4;
  --card:#FFFDF7;
  --ink:#26314A;
  --ink-soft:#5A6684;
  --accent:#B3432F;
  --accent-soft:#EADBC9;
  --muted:#8C8672;
  --border:#E3DAC5;
  --gold:#B98B2E;
  --gold-soft:#EFE1BE;
  --info:#4A6FA5;
  --info-soft:#DCE4F0;
  --teal:#2F8A8A;
  --teal-soft:#DCEAEA;
}
.bk-pager{
  color:var(--ink);
  background:var(--paper);
  border:0;
  border-radius:3px 6px 6px 3px;
  box-shadow:
    inset 18px 0 22px -16px rgba(60, 40, 10, 0.35),
    2px 0 0 0 #EFE8DA, 3px 0 0 0 #CFC6B4, 5px 0 0 0 #F2ECDF,
    6px 0 0 0 #CBC1AE, 8px 0 0 0 #ECE5D6, 9px 0 0 0 #C6BCA8,
    0 14px 34px rgba(0, 0, 0, 0.35);
}
.bk-pic{
  border-radius:0;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 0.6%, #000 99.4%, transparent),
    linear-gradient(to bottom, transparent, #000 0.8%, #000 99.2%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 0.6%, #000 99.4%, transparent),
    linear-gradient(to bottom, transparent, #000 0.8%, #000 99.2%, transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.bk-comic-pic{ border-radius:0; mix-blend-mode:multiply; }
.bk-pager.is-curl{
  position:relative;
  overflow:hidden;
  scroll-snap-type:none;
  touch-action:pan-y pinch-zoom;
}
.bk-pager.is-curl .bk-page{
  position:absolute;
  inset:0;
  background:var(--paper);
  touch-action:pan-y pinch-zoom;
}
.bk-pager.is-curl .bk-page:not(.is-shown){ visibility:hidden; }
.bk-pager.is-curl::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  box-shadow:inset 18px 0 22px -16px rgba(60, 40, 10, 0.35);
}
.bk-curl-flap{
  position:absolute;
  inset:0;
  pointer-events:none;
  filter:drop-shadow(-1px 1px 5px rgba(40, 25, 5, 0.28));
}
.bk-curl-sheet{ position:absolute; inset:0; background:var(--paper); transform-origin:0 0; }
.bk-pager.is-curl .bk-curl-ghost{ overflow:hidden; opacity:0.07; }
.bk-curl-band{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; }
.bk-boards{
  grid-area:pager;
  position:relative;
  z-index:10;
  min-height:0;
}
.bk-boards[hidden]{ display:none; }
.bkb-shade-clip{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.bkb-shade{ position:absolute; left:0; top:0; bottom:0; width:0; }
.bkb-layer{
  position:absolute;
  left:0;
  top:calc(-1 * var(--ot));
  right:calc(-1 * var(--or));
  bottom:calc(-1 * var(--ob));
  z-index:2;
  perspective:var(--persp);
  touch-action:pan-y pinch-zoom;
}
.bkb-layer[hidden]{ display:none; }
.bkb-board{ position:absolute; inset:0; transform-origin:0 50%; transform-style:preserve-3d; }
.bkb-front-layer .bkb-board{ will-change:transform; }
.bkb-closer .bkb-board{ will-change:transform; }
.bkb-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:0 5px 5px 0; }
.bkb-face.bkb-front{ box-shadow:2px 2px 0 0 color-mix(in srgb, var(--bc) 60%, #000), 0 18px 36px rgba(0, 0, 0, var(--sh, .40)); }
.bkb-face.bkb-front.bkb-soft{ border-radius:0 2px 2px 0; box-shadow:1px 1px 0 0 color-mix(in srgb, var(--bc) 72%, #000), 0 14px 30px rgba(0, 0, 0, var(--sh, .36)); }
.bkb-face.bkb-front.bkb-rev{ border-radius:5px 0 0 5px; box-shadow:-2px 2px 0 0 color-mix(in srgb, var(--bc) 60%, #000), 0 18px 36px rgba(0, 0, 0, .40); }
.bkb-face.bkb-front.bkb-rev.bkb-soft{ border-radius:2px 0 0 2px; }
.bkb-face.bkb-back{ transform:rotateY(180deg); border-radius:5px 0 0 5px; overflow:hidden; background:var(--bc); }
.bkb-fshade, .bkb-bshade{ position:absolute; inset:0; z-index:9; background:#000; opacity:0; pointer-events:none; border-radius:inherit; }
.bkb-cl-front{ background:var(--bc); }
.bkb-cl-page{ position:absolute; left:0; top:var(--ot); right:var(--or); bottom:var(--ob); overflow:hidden; container-type:size; isolation:isolate; background:var(--paper); }
.bkb-cl-page > .bk-page{ position:absolute; inset:0; background:var(--paper); }
.bkb-cl-page::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 18px 0 22px -16px rgba(60, 40, 10, 0.35); }
.bkb-closer .bkb-face.bkb-back{ background:none; overflow:visible; box-shadow:-2px 2px 0 0 color-mix(in srgb, var(--bc) 60%, #000), 0 18px 36px rgba(0, 0, 0, var(--sh, .40)); }
.bkb-closer .bkb-face.bkb-back > .bkb-rev{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.bkb-bf{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; background-color:var(--bc); }
.bkb-bf-cloth, .bkb-bf-twotone, .bkb-qspine, .bkb-pspine{ background-image:
  linear-gradient(118deg, rgba(255,255,255,.12), rgba(255,255,255,0) 42%, rgba(0,0,0,.14)),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 3px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, rgba(0,0,0,0) 1px 3px); }
.bkb-bf-printed{ background-image:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(0,0,0,.05)); }
.bkb-bf-printed::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.20) 30%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 46%); }
.bkb-qspine{ position:absolute; top:0; bottom:0; left:0; z-index:1; width:var(--qs); background-color:color-mix(in srgb, var(--bc) 38%, #1C1410);
  box-shadow:2px 0 0 #C9A043, 3px 0 4px rgba(0,0,0,.30); }
.bkb-pspine{ position:absolute; top:0; bottom:0; left:0; z-index:1; width:var(--ps); background-color:color-mix(in srgb, var(--bc) 78%, #000);
  box-shadow:1px 0 0 rgba(0,0,0,.35), 3px 0 5px rgba(0,0,0,.20); }
.bkb-bf-stitched{ background-image:
  repeating-linear-gradient(33deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 6px),
  repeating-linear-gradient(-58deg, rgba(0,0,0,.05) 0 1px, rgba(0,0,0,0) 1px 8px),
  linear-gradient(120deg, rgba(255,255,255,.08), rgba(0,0,0,.10)); }
.bkb-stitch{ position:absolute; left:0; top:0; z-index:2; height:100%; overflow:visible; }
.bkb-stitch .bkb-sh line{ stroke:rgba(0,0,0,.35); stroke-width:2.6; stroke-linecap:round; }
.bkb-stitch .bkb-th line{ stroke:#EFE6CF; stroke-width:2.2; stroke-linecap:round; }
.bkb-stitch circle{ fill:rgba(0,0,0,.5); }
.bkb-hinge{ position:absolute; top:0; bottom:0; left:0; z-index:2; width:calc(var(--hg) + 8px); pointer-events:none; background:
  linear-gradient(to right, rgba(0,0,0,.34) 0, rgba(255,255,255,.14) 3px, rgba(0,0,0,0) 9px, rgba(0,0,0,0) calc(var(--hg) - 4px),
    rgba(0,0,0,.30) calc(var(--hg) - 1px), rgba(0,0,0,.30) var(--hg), rgba(255,255,255,.20) calc(var(--hg) + 1px), rgba(255,255,255,0) calc(var(--hg) + 8px)); }
.bkb-rev .bkb-hinge, .bkb-rev .bkb-qspine, .bkb-rev .bkb-pspine, .bkb-rev .bkb-stitch{ left:auto; right:0; transform:scaleX(-1); }
.bkb-hinge.bkb-r{ left:auto; right:0; transform:scaleX(-1); }
.bkb-pat-seigaiha{ --p1:color-mix(in srgb, var(--bc) 22%, #FBF7EE); --p2:color-mix(in srgb, var(--bc) 62%, #FBF7EE); }
.bkb-pat-shippo{ --p1:color-mix(in srgb, var(--bc) 16%, #FBF7EE); --p2:color-mix(in srgb, var(--bc) 66%, #FBF7EE); }
.bkb-pat-ichimatsu{ --p1:var(--bc); --p2:color-mix(in srgb, var(--bc) 42%, #161616); }
.bkb-bf-pattern.bkb-pat-seigaiha, .bkb-ep{ background-color:var(--p1);
  background-image:
    radial-gradient(circle at 100% 150%, var(--p1) 24%, var(--p2) 24%, var(--p2) 28%, var(--p1) 28%, var(--p1) 36%, var(--p2) 36%, var(--p2) 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, var(--p1) 24%, var(--p2) 24%, var(--p2) 28%, var(--p1) 28%, var(--p1) 36%, var(--p2) 36%, var(--p2) 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, var(--p2) 10%, var(--p1) 10%, var(--p1) 23%, var(--p2) 23%, var(--p2) 30%, var(--p1) 30%, var(--p1) 43%, var(--p2) 43%, var(--p2) 50%, var(--p1) 50%, var(--p1) 63%, var(--p2) 63%, var(--p2) 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, var(--p2) 5%, var(--p1) 5%, var(--p1) 15%, var(--p2) 15%, var(--p2) 20%, var(--p1) 20%, var(--p1) 29%, var(--p2) 29%, var(--p2) 34%, var(--p1) 34%, var(--p1) 44%, var(--p2) 44%, var(--p2) 49%, transparent 49%, transparent),
    radial-gradient(circle at 0 50%, var(--p2) 5%, var(--p1) 5%, var(--p1) 15%, var(--p2) 15%, var(--p2) 20%, var(--p1) 20%, var(--p1) 29%, var(--p2) 29%, var(--p2) 34%, var(--p1) 34%, var(--p1) 44%, var(--p2) 44%, var(--p2) 49%, transparent 49%, transparent);
  background-size:48px 24px; }
.bkb-ep{ --p1:color-mix(in srgb, var(--bc) 14%, #FBF7EE); --p2:color-mix(in srgb, var(--bc) 30%, #FBF7EE); position:absolute; inset:0; background-size:56px 28px; }
.bkb-bf-pattern.bkb-pat-shippo{ background-color:var(--p1); background-size:40px 40px; background-image:
  radial-gradient(circle at 100% 100%, transparent 47%, var(--p2) 48% 52%, transparent 53%),
  radial-gradient(circle at 0 0, transparent 47%, var(--p2) 48% 52%, transparent 53%),
  radial-gradient(circle at 100% 0, transparent 47%, var(--p2) 48% 52%, transparent 53%),
  radial-gradient(circle at 0 100%, transparent 47%, var(--p2) 48% 52%, transparent 53%); }
.bkb-bf-pattern.bkb-pat-ichimatsu{ background:repeating-conic-gradient(var(--p1) 0 25%, var(--p2) 0 50%) 0 0 / 44px 44px; }
.bkb-plate{ position:absolute; box-sizing:border-box; z-index:2; }
.bkb-plate > .bk-cover{ position:absolute; inset:0; width:auto; max-width:none; aspect-ratio:auto; border:0; border-radius:0; }
.bkb-plate-mat{ border:5px solid #F3ECDB; border-radius:2px; box-shadow:0 1px 1px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.30); }
.bkb-plate-print > .bk-cover{ background:transparent; }
.bkb-plate-print .bk-see-through .bk-cover-title,
.bkb-plate-print .bk-see-through .bk-cover-title rt{ -webkit-text-stroke-color:var(--bc); }
.bkb-obi{ position:absolute; box-sizing:border-box; left:0; right:0; bottom:0; z-index:3; height:calc(64px * var(--u)); display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:0 calc(26px * var(--u)) 0 calc(var(--sx, 22px) + 20px * var(--u));
  font-family:'Work Sans', sans-serif; line-height:1.5; white-space:nowrap; box-shadow:0 -2px 10px rgba(0,0,0,.20); }
.bkb-obi[hidden]{ display:none; }
.bkb-rev .bkb-obi{ padding:0 calc(var(--sx, 22px) + 20px * var(--u)) 0 calc(26px * var(--u)); }
.bkb-obi-paper{ background:#FFFDF7; color:#26314A; border-top:3px solid #B98B2E; }
.bkb-obi-paper .bkb-obi-a{ font-weight:600; font-size:calc(21px * var(--u)); }
.bkb-obi-paper .bkb-obi-b{ font-weight:500; font-size:calc(15px * var(--u)); color:#5A6684; }
.bkb-obi-colour{ background:var(--oc); color:var(--oct); justify-content:center; }
.bkb-obi-colour::before{ content:""; position:absolute; left:0; right:0; top:6px; bottom:6px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; opacity:.35; }
.bkb-obi-colour .bkb-obi-a, .bkb-obi-colour .bkb-obi-b{ font-weight:600; font-size:calc(19px * var(--u)); }
.bkb-obi-colour i{ font-style:normal; margin:0 .55em; opacity:.7; }
.bkb-obi-ink{ background:#1F2638; color:#E9CF8A; border-top:2px solid #C9A043; border-bottom:2px solid #C9A043; }
.bkb-obi-ink .bkb-obi-a{ font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:calc(16px * var(--u)); }
.bkb-obi-ink .bkb-obi-b{ font-weight:500; font-size:calc(15px * var(--u)); color:#D8CBA6; }
.bkb-label{ position:absolute; left:50%; top:var(--lt, 50%); z-index:4; box-sizing:content-box; width:min(440px, 84%);
  transform:translate(-50%, -50%) scale(var(--fit, 1)); padding:calc(22px * var(--u)) calc(20px * var(--u));
  display:flex; flex-direction:column; align-items:center; gap:calc(20px * var(--u));
  background:var(--paper); color:var(--ink); border:1px solid var(--border); border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.05), 0 10px 26px rgba(60, 40, 10, .26); font-size:15px; line-height:1.5; }
.bkb-label[hidden]{ display:none; }
.bkb-owari{ margin:0; font-family:'Noto Sans JP', sans-serif; font-weight:500; font-size:calc(34px * var(--u)); letter-spacing:.42em;
  display:flex; align-items:center; gap:.4em; color:var(--ink); }
.bkb-owari::before, .bkb-owari::after{ content:""; width:calc(48px * var(--u)); height:1px; background:#CFC4AE; }
.bkb-owari::after{ margin-left:-.42em; }
.bkb-okz{ box-sizing:content-box; width:100%; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  padding:calc(10px * var(--u)) 4px calc(8px * var(--u)); font-family:'Noto Sans JP', sans-serif; color:var(--ink); }
.bkb-okz-t{ margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--border); font-weight:600; font-size:calc(18px * var(--u)); line-height:2; }
.bkb-okz-t .wc-tok{ margin:0; padding:0; border:none; border-radius:2px; font-weight:inherit; line-height:inherit; }
.bkb-okz dl{ margin:0; display:grid; }
.bkb-okz dl div{ display:grid; grid-template-columns:4.6em minmax(0, 1fr); align-items:end; font-size:calc(15px * var(--u)); line-height:2.1; }
.bkb-okz dt{ color:var(--ink-soft); }
.bkb-okz dd{ margin:0; }
.bkb-okz rt{ font-size:.55em; }
.bkb-okz-pub{ margin:6px 0 0; padding-top:6px; border-top:1px solid var(--border); font-family:'Work Sans', sans-serif; font-size:calc(13px * var(--u)); color:var(--ink-soft); }
.bkb-end-btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.bkb-pill{ font:500 13px 'Work Sans', sans-serif; padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:var(--paper);
  color:var(--ink-soft); cursor:pointer; text-decoration:none; }
.bkb-pill:hover{ border-color:var(--ink-soft); color:var(--ink); }
.bkb-pill:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.bkb-box-in{ position:absolute; left:0; top:0; width:100%; height:100%; transform-style:preserve-3d; transform-origin:50% 50%; }
.bkb-box-face{ position:absolute; left:0; top:0; width:100%; height:100%; }
.bkb-bx-spine{ position:absolute; top:0; box-sizing:border-box; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:9% 0 7%; line-height:1.5; }
.bkb-bx-cloth{ background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 3px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, rgba(0,0,0,0) 1px 3px); }
.bkb-bx-title, .bkb-bx-author{ position:relative; z-index:1; writing-mode:vertical-rl; font-family:'Noto Sans JP', sans-serif; white-space:nowrap; }
.bkb-bx-title{ font-weight:600; letter-spacing:.06em; }
.bkb-bx-author{ font-weight:500; font-size:.8em; opacity:.85; }
.bkb-bx-shade{ position:absolute; inset:0; z-index:2; background:#000; opacity:0; pointer-events:none; }
.bk-page.bkb-page{ position:relative; padding:0; overflow:hidden; }
.bkb-page > .bkb-face{ border-radius:0; box-shadow:none; }
.bkb-layer:focus, #pager > .bk-page:focus{ outline:none; }
@media (hover:hover) and (pointer:fine){
  .bkb-layer{ cursor:grab; }
.bk-boards.is-side .bkb-layer{ cursor:pointer; }
  .bk-boards.is-dragging .bkb-layer{ cursor:grabbing; }
}
@media (min-width:700px){
  body.bk-reader-body > .sn-top{ display:none; }
  .bk-reader{
    --sn-top-h:0px;
    position:relative;
    padding-top:24px;
    grid-template-rows:minmax(0, 1fr) auto auto;
    grid-template-areas:
      "prev  pager next"
      "where where where"
      "audio audio audio";
  }
.bk-where{ padding-top:20px; width:min(400px, calc(100% - 320px)); gap:9px; }
  .bk-where-text{ font-size:15px; font-weight:500; }
  .bk-thumb{ width:20px; height:20px; margin:-10px 0 0 -10px; }
  .bk-pager{
    box-shadow:
      inset 18px 0 22px -16px rgba(60, 40, 10, 0.35),
      1px 0 0 1px #EFE8DA, 2px 0 0 2px #CFC6B4, 3px 0 0 3px #F2ECDF,
      4px 0 0 4px #CBC1AE, 5px 0 0 5px #ECE5D6, 6px 0 0 6px #C6BCA8,
      0 14px 34px rgba(0, 0, 0, 0.35);
  }
.bk-title{ display:none; }
  .bk-head{ grid-area:where; justify-self:end; align-self:start; width:0; height:0; }
  .bk-bar{ display:block; margin:0; }
.bk-tools{
    position:absolute;
    right:0;
    bottom:2px;
    z-index:900;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    width:max-content;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
  }
  .bk-tools.is-open{ display:flex; }
.bk-tools[hidden]{ display:none; }
  .bk-tool-group{ flex-direction:column; align-items:stretch; }
  .bk-tool-label{ font-size:14px; color:var(--ink); }
  #zoomLabel{ position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; }
  .bk-step button, .bk-zoom-val{ flex:1; }
.bk-tools-btn, .bk-books{
    display:inline-flex;
    grid-area:where;
    align-self:center;
    gap:8px;
    width:auto;
    height:44px;
    margin-top:20px;
    padding:0 16px 0 12px;
    color:var(--ink);
    font:600 15px 'Work Sans', sans-serif;
  }
  .bk-books{ justify-self:start; text-decoration:none; }
  .bk-tools-btn{ justify-self:end; padding:0 16px 0 14px; }
  .bk-btn-lbl{ display:inline; }
  .bk-btn-chev{ display:inline; margin-right:-2px; font-size:20px; line-height:1; color:var(--ink-soft); }
  .bk-books svg{ width:24px; height:24px; }
  .bk-tools-btn[hidden], .bk-books[hidden]{ display:none; }
.bk-books-menu{ grid-area:where; left:0; bottom:calc(100% + 2px); }
  .bk-books-menu.is-hover{ min-width:0; bottom:calc(100% - 12px); }
  .bk-books-menu.is-hover #menuShelf{ display:none; }
}
@media (max-width:699px){
body.bk-reader-body{ padding-bottom:0; }
  body.bk-reader-body > .sn-bot{ display:none; }
  .bk-reader{
    height:100vh;
    height:100dvh;
    padding:8px 16px env(safe-area-inset-bottom, 0px);
  }
  .bk-bar{ display:flex; margin-bottom:0; }
  .bk-title{ display:none; }
  .bk-tools-btn{ display:inline-flex; }
  .bk-books{ display:inline-flex; }
.bk-reader{ position:relative; }
  .bk-books-menu{ grid-area:books; left:0; bottom:calc(100% + 10px); }
.bk-tools{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:900;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:16px;
    box-sizing:border-box;
    padding:20px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    background:var(--card);
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,0.35);
  }
  .bk-tools.is-open{ display:flex; }
.bk-tools[hidden]{ display:none; }
.bk-tool-group{ flex-direction:column; align-items:stretch; gap:8px; width:min(100%, 420px); }
  .bk-tool-label{ font-size:15px; color:var(--ink); }
  #zoomLabel{ position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; }
  .bk-tools .set-seg button{ padding:9px 8px; font-size:14px; }
  .bk-step button{ flex:1; padding:9px 8px; font-size:14px; }
  .bk-zoom-val{ flex:1; font-size:14px; }
.bk-audio{ display:none; }
.bk-pager{ margin:0 -16px 8px; border-left:0; border-right:0; border-radius:0; }
.bk-boards{ margin:0 -16px 8px; }
.bk-bubble-page{ padding:12px 4px; }
.bk-reader{
    column-gap:10px;
    grid-template-columns:auto auto minmax(0, 1fr) auto auto;
    grid-template-rows:auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head  head head  head  head"
      "pager pager pager pager pager"
      "prev  books where aa    next";
  }
  .bk-nav::before{
    content:"";
    grid-row:3;
    grid-column:1 / -1;
    margin:0 -16px calc(-1 * env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--card) 92%, transparent);
    border-top:1px solid var(--border);
  }
  .bk-where{ width:auto; min-width:0; justify-self:stretch; padding-top:0; margin:0; align-self:center; }
.bk-where{ gap:10px; }
  .bk-where-text{ font-size:14px; font-weight:500; }
  .bk-thumb{ box-shadow:0 0 0 3px var(--card), 0 1px 4px rgba(0,0,0,0.45); }
.bk-scrub::before{ left:-4px; right:-4px; }
.bk-reader #prevBtn, .bk-reader #nextBtn{ margin:7px 0; }
  .bk-arrow{ width:40px; height:40px; }
  .bk-arrow svg{ width:22px; height:22px; }
@media (max-width:340px){
    .bk-reader{ column-gap:6px; }
    .bk-scrub::before{ left:-2px; right:-2px; }
  }
}
.ig-tip{
  position:fixed;
  z-index:1400;
  max-width:min(260px, calc(100vw - 16px));
  padding:10px 14px;
  background:var(--ink);
  color:var(--card);
  font-size:14px;
  line-height:1.4;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events:none;
}
.ig-tip[hidden]{ display:none; }
.ig-backdrop{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10, 12, 20, 0.55);
}
.ig-backdrop[hidden]{ display:none; }
.ig-dialog{
  width:100%;
  max-width:400px;
  padding:22px 22px 18px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 12px 36px rgba(0, 0, 0, 0.3);
}
.ig-title{ margin:0 0 10px; font-size:20px; }
.ig-body p{ margin:0 0 10px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.ig-body b{ color:var(--ink); }
.ig-body .ig-note{ font-size:13px; color:var(--muted); }
.ig-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:16px; }
.ig-btn{
  font:inherit;
  font-size:15px;
  font-weight:600;
  padding:10px 20px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.ig-btn:hover{ border-color:var(--ink-soft); }
.ig-confirm{ background:var(--accent); border-color:var(--accent); color:var(--card); }
.ig-confirm:hover{ border-color:var(--accent); filter:brightness(1.08); }
.ig-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ig-toast, .lb-toast{
  position:fixed;
  z-index:1250;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 32px);
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 10px 10px 18px;
  background:var(--ink);
  color:var(--card);
  font-size:15px;
  line-height:1.4;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.3);
}
.ig-toast[hidden], .lb-toast[hidden]{ display:none; }
.ig-toast b{ font-family:'Noto Sans JP', sans-serif; }
.ig-toast-undo, .lb-toast-go, .lb-toast-close{
  flex:none;
  font:inherit;
  font-weight:700;
  padding:6px 16px;
  border-radius:999px;
  border:1.5px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.ig-toast-undo[hidden]{ display:none; }
.ig-toast-undo:focus-visible, .lb-toast-go:focus-visible, .lb-toast-close:focus-visible{ outline:2px solid var(--card); outline-offset:2px; }
.lb-toast-close{ border-color:transparent; padding:6px 10px; }
@media (max-width:560px){
  .ig-toast, .lb-toast{ bottom:auto; top:12px; font-size:14px; }
  .lb-toast{ flex-wrap:wrap; }
}
.pp-page h2{
  font-family:'Work Sans', sans-serif;
  font-size:19px;
  font-weight:600;
  margin:0 0 14px;
}
.pp-page h3{
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  margin:0 0 10px;
  color:var(--ink);
}
.pp-jp{ font-family:'Noto Sans JP', sans-serif; }
.pp-dim{ color:var(--muted); }
.pp-section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
}
.pp-message{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  color:var(--ink-soft);
  line-height:1.5;
}
.pp-message p{ margin:0; }
.pp-message[hidden]{ display:none; }
.pp-message code{ font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums; font-size:13px; }
.pp-picker-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:-8px 0 18px;
  font-size:14px;
  color:var(--ink-soft);
}
.pp-picker-row[hidden]{ display:none; }
.pp-dash-link{
  margin-left:auto;
  flex-shrink:0;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}
.pp-dash-link:hover{ background:var(--bg); }
.pp-picker-row select{
  flex:1 1 auto;
  min-width:0;
  max-width:360px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
}
.pp-gate{
  display:block;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
}
.pp-gate[hidden]{ display:none; }
.pp-gate p{ margin:0 0 12px; color:var(--ink-soft); line-height:1.5; }
.pp-gate-row{ display:flex; gap:10px; }
.pp-gate-row input{
  flex:1 1 auto;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
}
.pp-open-btn{
  padding:10px 20px;
  border-radius:10px;
  border:none;
  background:var(--info);
  color:#fff;
  font-family:'Work Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
:root[data-theme="dark"] .pp-open-btn{ color:#15171f; }
.pp-gate .pp-gate-error{ color:var(--crimson); margin:12px 0 0; }
.pp-gate-error[hidden]{ display:none; }
.pp-activity-head{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:10px 16px; margin-bottom:14px;
}
.pp-activity-head .pp-periods{ margin-bottom:0; }
.pp-who{ min-width:0; }
.pp-name{ font-size:22px; font-weight:600; margin:0; line-height:1.25; overflow-wrap:anywhere; }
.pp-username{ font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-soft); margin:2px 0 0; }
.pp-username[hidden]{ display:none; }
.pp-last{ font-size:14px; color:var(--ink-soft); margin:2px 0 0; }
.pp-periods, .pp-subjects{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
@media (max-width:380px){ .pp-periods{ gap:6px; } .pp-periods .pill{ padding:8px 10px; } }
.pp-figures{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:16px;
}
.pp-fig{
  background:var(--bg);
  border-radius:12px;
  padding:12px;
  min-width:0;
}
.pp-fig strong{ display:block; font-size:22px; font-weight:600; }
.pp-fig span{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.pp-tip{
  position:fixed; z-index:1200; max-width:260px; pointer-events:none;
  padding:5px 9px; border-radius:6px; font-size:12px; line-height:1.35;
  background:var(--ink); color:var(--card); box-shadow:0 2px 8px rgba(0, 0, 0, .25);
}
.pp-tip[hidden]{ display:none; }
.pp-fig strong .pp-trend{
  display:inline-block; margin:0 0 0 6px; font-size:13px; font-weight:700;
  vertical-align:middle; position:relative; top:-2px; cursor:default;
}
.pp-fig .pp-trend-up{ color:var(--success); }
.pp-fig .pp-trend-down{ color:var(--crimson); }
.pp-fig .pp-trend-same{ color:var(--gold); }
.pp-mix-caption{
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}
.pp-mix-bar{ display:flex; gap:2px; height:14px; border-radius:999px; overflow:hidden; background:var(--bg); }
.pp-mix-seg{ flex-basis:0; min-width:6px; cursor:default; }
.pp-mix-seg:hover, .pp-mix-seg:focus-visible{ filter:brightness(1.15); outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
.pp-mix-empty{ font-size:12px; color:var(--muted); padding-left:10px; line-height:14px; }
.pp-mix-vocab{ background:var(--teal); }
.pp-mix-kanji{ background:var(--info); }
.pp-mix-kana{ background:var(--gold); }
.pp-mix-conjugation{ background:var(--plum); }
.pp-mix-key{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink-soft); }
.pp-mix-key li{ display:flex; align-items:center; gap:6px; cursor:default; }
.pp-mix-key b{ color:var(--ink); font-weight:600; }
.pp-mix-dot{ width:10px; height:10px; border-radius:3px; flex:none; }
.pp-mix-detail{ min-height:1.4em; margin:6px 0 0; font-size:13px; color:var(--ink); }
.pp-note{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:12px 0 0; }
.pp-guest-note{ margin:0 0 16px; }
.pp-guest-note[hidden]{ display:none; }
.pp-days{ display:flex; flex-direction:column; gap:18px; }
.pp-days-cal{ width:100%; max-width:420px; }
.pp-calendar{ display:flex; flex-direction:column; gap:4px; max-width:420px; }
.pp-cal-row{ display:grid; grid-template-columns:48px repeat(7, minmax(0, 1fr)); gap:4px; align-items:center; }
.pp-cal-head span{ text-align:center; font-size:11px; color:var(--muted); }
.pp-cal-row .pp-cal-week{ font-size:11px; color:var(--muted); text-align:left; white-space:nowrap; }
.pp-cell{
  display:block;
  aspect-ratio:1;
  border-radius:4px;
  background:var(--bg);
  border:1px solid var(--border);
}
.pp-cell.pp-future{ background:none; border-color:transparent; }
.pp-cell.pp-l1{ background:var(--teal-soft); border-color:var(--teal); }
.pp-cell.pp-l2{ background:color-mix(in srgb, var(--teal) 25%, var(--card)); border-color:transparent; }
.pp-cell.pp-l3{ background:color-mix(in srgb, var(--teal) 55%, var(--card)); border-color:transparent; }
.pp-cell.pp-l4{ background:var(--teal); border-color:transparent; }
.pp-cell.pp-l5{ background:color-mix(in srgb, var(--teal) 55%, var(--ink)); border-color:transparent; }
.pp-cell.pp-best{ background:var(--gold); border-color:transparent; }
.pp-cell.pp-second{ background:#b9c1cc; border-color:transparent; }
.pp-cell.pp-best, .pp-cell.pp-second{ display:grid; place-items:center; }
.pp-star{ width:45%; height:45%; fill:#fff; filter:drop-shadow(0 0 1px rgba(0, 0, 0, .35)); }
.pp-legend-gap{ width:10px; }
.pp-cell.pp-today{ outline:2px solid var(--ink-soft); outline-offset:1px; }
button.pp-cell{ padding:0; width:100%; font:inherit; cursor:pointer; }
button.pp-cell:hover{ border-color:var(--ink-soft); }
button.pp-cell:focus-visible{ outline:2px solid var(--info); outline-offset:1px; }
.pp-cell.pp-open{ outline:2px solid var(--info); outline-offset:1px; }
.pp-day{ background:var(--bg); border-radius:14px; padding:14px 16px; min-width:0; }
.pp-day[hidden]{ display:none; }
.pp-day-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.pp-day-head h3{ margin:0; font-size:16px; }
.pp-day-close{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--ink-soft);
  font-size:18px; line-height:1; cursor:pointer;
}
.pp-day-close:hover{ color:var(--ink); border-color:var(--ink-soft); }
.pp-day .pp-figures.pp-day-figures{ grid-template-columns:repeat(3, minmax(0, 1fr)); margin-bottom:12px; }
.pp-day .pp-fig{ background:var(--card); }
.pp-day .pp-fig strong{ font-size:18px; }
.pp-day-block{ margin-top:12px; }
.pp-day-block h3{ margin:0 0 6px; }
.pp-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pp-chips li{
  font-size:13px; padding:4px 10px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); overflow-wrap:anywhere;
}
.pp-chips.pp-chips-small{ gap:4px; }
.pp-chips.pp-chips-small li{ font-size:12px; padding:2px 8px; display:inline-flex; align-items:center; gap:5px; }
.pp-chips-small .pp-mix-dot{ width:7px; height:7px; border-radius:50%; }
.pp-more{
  margin-top:6px; padding:3px 10px; font:inherit; font-size:12px; color:var(--info);
  background:transparent; border:1px solid var(--border); border-radius:999px; cursor:pointer;
}
.pp-more:hover{ border-color:var(--info); }
.pp-day-line{ margin:0; font-size:13px; line-height:1.45; }
.pp-day-line b{ font-weight:600; }
.pp-day .pp-mix-key{ font-size:12px; margin-top:8px; }
.pp-day .pp-mix-detail{ font-size:12px; }
.pp-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:11px; color:var(--muted); margin:10px 0 0; }
.pp-legend .pp-cell{ width:12px; height:12px; }
.pp-book + .pp-book{ margin-top:18px; }
.pp-book-sum{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; color:var(--ink-soft); margin:0 0 10px; }
.pp-units{ list-style:none; margin:0; padding:0; }
.pp-unit{
  width:100%;
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"title letter" "bar bar" "facts facts";
  gap:6px 10px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid var(--border);
}
.pp-unit-title{ grid-area:title; font-weight:500; }
.pp-unit-title::after{
  content:''; display:inline-block; width:6px; height:6px; margin:0 0 3px 8px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .15s;
}
.pp-unit[aria-expanded="true"] .pp-unit-title::after{ transform:rotate(-135deg); margin-bottom:-1px; }
.pp-unit:hover .pp-unit-title{ color:var(--info); }
.pp-unit:focus-visible{ outline:2px solid var(--info); outline-offset:2px; border-radius:6px; }
.pp-unit-words{ padding:4px 0 16px; }
.pp-unit-words.kanji-stat-list{
  grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
  gap:6px;
}
.pp-unit-words .kanji-stat-item{ gap:2px; padding:6px 8px 7px; border-width:2px; }
.pp-unit-words .grade-badge{ top:6px; right:6px; width:17px; height:17px; font-size:10px; }
.pp-unit-words .kanji-stat-word-row{ gap:0 6px; padding-right:20px; flex-wrap:wrap; }
.pp-unit-words .kanji-stat-char{ max-width:100%; white-space:normal; overflow:visible; }
.pp-unit-words .kanji-stat-char{ font-size:16px; line-height:1.3; }
.pp-unit-words .kanji-stat-romaji{ font-size:11px; }
.pp-unit-words .vw-stat-english{
  margin:0; font-size:12px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pp-unit-words .kanji-stat-progress-row{ gap:6px; flex-wrap:nowrap; margin-top:2px; }
.pp-unit-words .kanji-stat-progress-row .kana-stat-result{ width:auto; text-align:right; }
.pp-unit-words .kanji-stat-bar-track{ height:5px; }
.pp-unit-words .kana-stat-result{ font-size:11px; white-space:nowrap; }
.pp-unit-words .kana-stat-result .kana-stat-pct{ display:none; }
.pp-unit-words .kana-stat-unpracticed{ font-size:11px; }
.pp-unit-words .kanji-stat-char.pp-conj-name{ font-size:13px; line-height:1.3; font-weight:500; }
.pp-unit-words .pp-tag-ignored{ align-self:flex-start; font-size:10px; padding:0 6px; }
.pp-unit-words .pp-ignored .kanji-stat-word-row, .pp-unit-words .pp-ignored .kanji-stat-progress-row{ opacity:.6; }
.pp-unit-letter{ grid-area:letter; }
.pp-unit .pp-bar{ grid-area:bar; }
.pp-unit-facts{ grid-area:facts; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--ink-soft); }
.pp-fact.pp-done{ color:var(--success); font-weight:600; }
.pp-fact.pp-done::before{ content:'\2713\00a0'; }
.pp-bar{
  display:flex;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--border);
}
.pp-seg{ display:block; height:100%; }
.pp-seg.grade-f{ background:var(--accent); }
.pp-seg.grade-d{ background:var(--grade-d); }
.pp-seg.grade-c{ background:var(--gold); }
.pp-seg.grade-b{ background:var(--grade-b); }
.pp-seg.grade-a{ background:var(--success); }
.pp-seg.pp-seg-new{ background:var(--border); }
.pp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:var(--muted);
}
.pp-badge.grade-f{ background:var(--accent); }
.pp-badge.grade-d{ background:var(--grade-d); }
.pp-badge.grade-c{ background:var(--gold); }
.pp-badge.grade-b{ background:var(--grade-b); }
.pp-badge.grade-a{ background:var(--success); }
:root[data-theme="dark"] .pp-badge.grade-f, :root[data-theme="dark"] .pp-badge.grade-d,
:root[data-theme="dark"] .pp-badge.grade-c, :root[data-theme="dark"] .pp-badge.grade-b,
:root[data-theme="dark"] .pp-badge.grade-a{ color:#15171f; }
.pp-badge.pp-badge-new, .pp-badge.pp-badge-none{ background:transparent; color:var(--muted); border:1px solid var(--border); font-weight:500; }
.pp-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:18px;
}
.pp-card{
  display:block;
  min-width:0;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
  text-decoration:none;
}
.pp-card-link:hover{ border-color:var(--ink-soft); }
.pp-card-title{ font-weight:600; margin:0 0 4px; font-size:14px; }
.pp-card-count{ font-size:12px; color:var(--ink-soft); margin:0 0 8px; }
.pp-card-count strong{ color:var(--ink); }
.pp-attention{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; }
.pp-att-list{ list-style:none; margin:0; padding:0; }
.pp-att{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"word right" "sub right";
  gap:2px 10px;
  align-items:center;
  padding:8px 0;
  border-top:1px solid var(--border);
}
.pp-att-word{ grid-area:word; font-size:17px; font-weight:500; overflow-wrap:anywhere; }
.pp-att-sub{ grid-area:sub; font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere; }
.pp-att-right{ grid-area:right; display:flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.pp-arrow{ color:var(--muted); }
.pp-miss{ color:var(--crimson); font-weight:600; }
.pp-tag{
  display:inline-block;
  font-size:11px;
  padding:1px 7px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--ink-soft);
  white-space:nowrap;
}
.pp-tag.pp-tag-ignored{ border-color:var(--muted); }
.pp-empty{ color:var(--muted); font-size:14px; margin:0; list-style:none; }
.lb-time{
  display:inline-flex; align-items:center; gap:5px; width:max-content;
  margin-top:6px; padding:4px 10px; border-radius:999px;
  font:700 13px 'Work Sans', sans-serif; letter-spacing:0; text-transform:none;
  background:var(--gold); color:#221a08; white-space:nowrap;
}
.lb-time svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lb-goal-left .lb-time{ display:flex; margin:6px 0 0 auto; }
.lb-goal .lb-goal-left > b{ display:inline; margin-right:3px; }
.lbs-reset .lb-time{ margin:6px auto 0; }
.lbc-title small .lb-time{ margin:0; vertical-align:2px; font-size:12px; padding:3px 9px; }
.pp-weeks-link{ display:flex; justify-content:flex-end; margin:-6px 0 12px; }
.pp-weeks-link[hidden]{ display:none; }
.pp-weeks-avg{ margin:0 0 12px; font-size:15px; color:var(--ink-soft); }
.pp-figures-link .pp-fig{ cursor:pointer; transition:box-shadow .15s; }
@media (hover:hover){ .pp-figures-link .pp-fig:hover{ box-shadow:inset 0 0 0 1px var(--info); } }
.pp-goal-over{ color:var(--success); font-weight:600; }
.pp-goal-under{ color:var(--ink-soft); }
.pp-goal-col-short{ display:none; }
.pp-weeks-avg b{ color:var(--ink); font-weight:700; }
.pp-weeks-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.pp-weeks-head h2{ margin:0; }
.pp-weeks-all .pp-weeks-head{ justify-content:flex-start; }
.pp-weeks-more, .pp-weeks-back{
  font:inherit; font-size:14px; font-weight:600; color:var(--info);
  background:none; border:0; padding:6px 2px; cursor:pointer; white-space:nowrap;
}
.pp-weeks-more:hover, .pp-weeks-back:hover{ text-decoration:underline; }
#ppBody.pp-weeks-open > :not(#ppWeeksAll){ display:none !important; }
#ppBody:not(.pp-weeks-open) > #ppWeeksAll{ display:none; }
.pp-weeks-table{
  width:100%; border-collapse:collapse; font-size:14px;
  font-family:'Work Sans', sans-serif; font-variant-numeric:tabular-nums;
}
.pp-weeks-table th, .pp-weeks-table td{ padding:9px 6px; text-align:right; border-bottom:1px solid var(--border); }
.pp-weeks-table th:first-child{ text-align:left; padding-left:0; }
.pp-weeks-table td:last-child{ padding-right:0; white-space:nowrap; }
.pp-weeks-table thead th{ font-size:12px; font-weight:600; color:var(--ink-soft); padding-top:0; }
.pp-weeks-table tbody th{ font-weight:500; }
.pp-weeks-table tbody tr:last-child > *{ border-bottom:0; }
.pp-weeks-now > *{ background:var(--info-soft); }
.pp-weeks-now > :first-child{ border-radius:8px 0 0 8px; padding-left:10px !important; }
.pp-weeks-now > :last-child{ border-radius:0 8px 8px 0; padding-right:10px !important; }
.pp-weeks-dates{ display:block; font-size:12px; font-weight:400; color:var(--ink-soft); }
.pp-goal-met{ color:var(--success); font-weight:600; white-space:nowrap; }
.pp-goal-met svg{
  width:14px; height:14px; vertical-align:-2px; margin-right:3px;
  fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
.pp-weeks-wrap + .pp-empty{ margin-top:12px; }
@media (max-width:520px){
.pp-weeks-table thead tr, .pp-weeks-table tbody tr{
display:grid; grid-template-columns:1.3fr 1fr 1.1fr 0.7fr 1.5fr; column-gap:6px; padding:0 10px;
  }
.pp-weeks-table tr > :nth-child(5){ text-align:center; }
  .pp-weeks-table .pp-goal-col-long{ display:none; }
  .pp-weeks-table .pp-goal-col-short{ display:inline; }
  .pp-weeks-table thead th:first-child{ display:none; }
  .pp-weeks-table tbody th{ grid-column:1 / -1; padding:9px 0 2px; border:0; }
  .pp-weeks-table th, .pp-weeks-table td{ padding:2px 0 9px; border:0; }
  .pp-weeks-table thead th{ padding:0 0 6px; }
  .pp-weeks-table tbody tr{ border-top:1px solid var(--border); }
  .pp-weeks-table td:last-child{ padding-right:0; }
  .pp-weeks-now{ background:var(--info-soft); border-radius:8px; border-top:0 !important; }
  .pp-weeks-now > *{ background:none; }
  .pp-weeks-now > :first-child, .pp-weeks-now > :last-child{ padding-left:0 !important; padding-right:0 !important; }
  .pp-weeks-now + tr{ border-top:0; }
  .pp-weeks-dates{ display:inline; margin-left:6px; }
}
@media (min-width:760px){
  .pp-figures{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pp-figures.pp-figures-6{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.pp-days{ flex-direction:row; align-items:flex-start; gap:24px; }
  .pp-days-cal{ flex:0 0 420px; }
  .pp-day{ flex:1 1 auto; }
  .pp-cards{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .pp-attention{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }
  .pp-unit{
    grid-template-columns:90px 34px minmax(0, 1fr) 250px;
    grid-template-areas:"title letter bar facts";
  }
  .pp-unit-facts{ justify-content:flex-end; }
}
:root{ --lb-mix:65%; }
:root[data-theme="dark"]{ --lb-mix:100%; }
.lb-page{
  --sec:var(--gold);
  --sec-book:color-mix(in srgb, var(--gold) var(--lb-mix), var(--ink));
  --c:var(--gold);
}
.lb-page[data-board="days"]{ --c:var(--success); }
.lb-page[data-board="streak"]{ --c:var(--accent); }
.lb-page[data-board="aranks"]{ --c:var(--plum); }
.lb-page[data-board="newwords"]{ --c:var(--teal); }
.lb-page, .lb-home, .qp-lb{
  --c-fill:color-mix(in srgb, var(--c, var(--gold)) var(--lb-mix), var(--ink));
  --lb-gold-text:color-mix(in srgb, var(--gold) var(--lb-mix), var(--ink));
}
.lb-page .sec-tabs{
  padding-right:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.lb-page .sec-tabs::-webkit-scrollbar{ display:none; }
.lb-tabs .sec-tab{ padding:10px 16px; gap:7px; }
.lb-tabs .sec-tab[aria-selected="true"]{ color:var(--c-fill); }
.lb-tabs .sec-tab[aria-selected="true"]::before{ background:var(--c); }
.lb-dot{
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--c);
  opacity:.85;
}
@media (min-width:700px) and (max-width:900px){
  .lb-tabs .sec-tab{ padding:10px 9px; gap:6px; }
}
.lb-tabs .sec-tab{ flex:none; }
@media (max-width:699px){
  .lb-page .sec-head{ padding-bottom:14px; }
  .lb-tabs{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:6px;
    overflow:visible;
  }
  .lb-tabs .sec-tab{ grid-column:span 2; }
  .lb-tabs .sec-tab:nth-child(n+4){ grid-column:span 3; }
  .lb-tabs .sec-tab{
    justify-content:center;
    gap:5px;
    min-width:0;
    padding:8px 4px;
    border:1px solid var(--border);
    border-radius:999px;
    background:color-mix(in srgb, var(--card) 70%, transparent);
    font-size:12px;
  }
  .lb-tabs .sec-tab[aria-selected="true"]{
    background:var(--c-fill);
    border-color:var(--c-fill);
    color:var(--card);
  }
  .lb-tabs .sec-tab[aria-selected="true"]::before{ display:none; }
  .lb-tabs .sec-tab[aria-selected="true"] .lb-dot{ background:var(--card); opacity:1; }
  .lb-dot{ width:6px; height:6px; }
}
@media (max-width:370px){
  .lb-tabs .sec-tab{ font-size:11px; padding:8px 2px; }
  .lb-tabs .lb-dot{ display:none; }
}
.lb-panel{ padding:18px 16px 16px; }
.lb-goal{
  margin-bottom:18px;
  padding:16px 18px;
  border:1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
  border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 20%, var(--card)), color-mix(in srgb, var(--gold) 6%, var(--card)));
}
.lb-goal[hidden]{ display:none; }
.lb-goal.is-reached{
  border-color:color-mix(in srgb, var(--success) 45%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, var(--success) 26%, var(--card)), color-mix(in srgb, var(--success) 8%, var(--card)));
}
.lb-goal-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px 16px;
}
.lb-goal-kick{
  display:block;
  font:600 11px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lb-gold-text);
}
.lb-goal.is-reached .lb-goal-kick{ color:color-mix(in srgb, var(--success) var(--lb-mix), var(--ink)); }
.lb-goal-num{ margin-top:4px; font-variant-numeric:tabular-nums; }
.lb-goal-num b{ font:700 30px/1.1 'Work Sans', sans-serif; }
.lb-goal-num > span{ font:600 16px 'Work Sans', sans-serif; color:var(--ink-soft); }
.lb-goal-left{
  font:500 12px 'Work Sans', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.lb-goal-left b{
  display:block;
  font:700 20px 'Work Sans', sans-serif;
  letter-spacing:0;
  color:var(--ink);
}
.lb-bar{
  position:relative;
  height:14px;
  margin-top:12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
}
.lb-bar-fill, .lb-bar-me{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:999px;
}
.lb-bar-fill{ background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, var(--card)), var(--gold)); }
.lb-bar-me{ background:var(--success); }
.lb-bar-me[hidden], .lb-bar-tick[hidden]{ display:none; }
.is-reached .lb-bar-fill{ background:color-mix(in srgb, var(--success) 45%, var(--card)); }
.is-reached .lb-bar-me{ box-shadow:0 0 0 2px var(--card); }
.lb-bar-tick{
  position:absolute;
  top:-4px;
  bottom:-4px;
  width:2px;
  margin-left:-1px;
  border-radius:1px;
  background:var(--ink);
  opacity:.55;
}
.lb-bar-bonus{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--success) 22%, transparent) 0 4px, transparent 4px 8px);
}
.lb-bar-bonus[hidden], .lb-bar-tick.is-last[hidden]{ display:none; }
.lb-bar-tick.is-goal{ width:3px; margin-left:-1.5px; background:var(--success); opacity:1; }
.is-stretch .lb-bar-fill{ background:linear-gradient(90deg, color-mix(in srgb, var(--success) 55%, var(--card)), var(--success)); }
:is(.lbs-goal, .lb-goal).is-reached.is-beaten{
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 30%, var(--card)), color-mix(in srgb, var(--success) 14%, var(--card)));
}
.lb-goal.is-beaten{ border-color:color-mix(in srgb, var(--gold) 45%, var(--border)); }
:is(.lbs-goal, .lb-goal).is-reached.is-beaten :is(.lbs-goal-kick, .lb-goal-kick){ color:var(--lb-gold-text); }
.lb-goal-done{ color:color-mix(in srgb, var(--success) var(--lb-mix), var(--ink)); font-weight:600; }
.lb-goal-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin-top:10px;
  font:500 13px 'Work Sans', sans-serif;
}
.lb-goal-foot:empty{ display:none; }
.lb-goal-foot > span:not(.lb-faces){ display:inline-flex; align-items:center; gap:6px; }
.lb-key i{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--success);
}
.lb-av{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1.5px solid color-mix(in srgb, var(--a) 55%, var(--border));
  border-radius:50%;
  background:color-mix(in srgb, var(--a) 20%, var(--card));
  color:color-mix(in srgb, var(--a) var(--lb-mix), var(--ink));
  font:700 15px 'Work Sans', 'Noto Sans JP', sans-serif;
}
.lb-av-sm{ width:24px; height:24px; font-size:11px; }
.lb-av-xs{ width:22px; height:22px; font-size:10px; }
.lb-av-ghost{
  border-style:dashed;
  border-color:var(--muted);
  background:transparent;
  color:var(--muted);
}
.lb-faces{ display:inline-flex; }
.lb-faces .lb-av{ border:2px solid var(--card); }
.lb-faces .lb-av + .lb-av{ margin-left:-6px; }
.lb-board-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px 16px;
  margin:0 0 12px;
}
.lb-board-head h2{ margin:0; font:700 20px/1.2 'Work Sans', sans-serif; }
.lb-board-head p{ margin:3px 0 0; font:400 13px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); }
.lb-period{
  flex:none;
  display:inline-flex;
  padding:2px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
}
.lb-period[hidden]{ display:none; }
.lb-period button{
  padding:5px 11px;
  border:0;
  border-radius:999px;
  background:none;
  color:var(--ink-soft);
  font:600 11px 'Work Sans', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.lb-period button[aria-checked="true"]{ background:var(--c-fill); color:var(--card); }
.lb-period button:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.lb-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.lb-row{
  display:grid;
  grid-template-columns:32px 36px minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 14px 10px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.lb-me{
  border-color:color-mix(in srgb, var(--c, var(--gold)) 70%, var(--border));
  background:color-mix(in srgb, var(--c, var(--gold)) 13%, var(--card));
}
.lb-ghost{
  border:1.5px dashed color-mix(in srgb, var(--c, var(--gold)) 70%, var(--border));
  background:transparent;
}
.lb-place{
  justify-self:center;
  font:600 15px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.lb-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:13px;
  color:var(--card);
}
.lb-top-1{ background:color-mix(in srgb, var(--gold) var(--lb-mix), var(--ink)); }
.lb-top-2{ background:color-mix(in srgb, var(--info) var(--lb-mix), var(--ink)); }
.lb-top-3{ background:color-mix(in srgb, var(--accent) var(--lb-mix), var(--ink)); }
.lb-name{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  min-width:0;
  font:600 16px 'Work Sans', 'Noto Sans JP', sans-serif;
}
.lb-name-text{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-you{
  flex:none;
  padding:2px 7px;
  border-radius:999px;
  background:var(--c-fill);
  color:var(--card);
  font:600 10px 'Work Sans', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.lb-ghost .lb-you{ background:transparent; border:1px dashed var(--muted); color:var(--ink-soft); }
.lb-dots{ flex-basis:100%; display:flex; gap:4px; }
.lb-dots i{ width:8px; height:8px; border-radius:50%; background:var(--border); }
.lb-dots i.on{ background:var(--success); }
.lb-val{ text-align:right; font-variant-numeric:tabular-nums; }
.lb-val b{ display:block; font:700 19px/1.15 'Work Sans', sans-serif; }
.lb-val small{
  display:block;
  font:500 10px 'Work Sans', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.lb-ghost .lb-val small{ max-width:6.5em; margin-left:auto; line-height:1.25; }
.lb-gap{
  text-align:center;
  font:600 12px 'Work Sans', sans-serif;
  letter-spacing:.2em;
  color:var(--muted);
}
.lb-empty, .lb-state{
  margin:24px 0 12px;
  text-align:center;
  font:500 14px 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.lb-empty[hidden], .lb-state[hidden], #lbBoard[hidden]{ display:none; }
.lb-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
  margin-top:10px;
  padding:10px 14px;
  border-radius:12px;
  background:color-mix(in srgb, var(--c, var(--gold)) 10%, var(--card));
  font:500 13px 'Work Sans', sans-serif;
}
.lb-cta[hidden]{ display:none; }
.lb-signup{
  flex:none;
  padding:8px 14px;
  border:0;
  border-radius:999px;
  background:var(--info);
  color:#fff;
  font:600 13px 'Work Sans', sans-serif;
  text-decoration:none;
  cursor:pointer;
}
.lb-signup:hover{ filter:brightness(1.08); }
.lb-foot{
  margin:14px 0 0;
  text-align:center;
  font:500 12px 'Work Sans', sans-serif;
  color:var(--muted);
}
.lb-row.lb-slim{
  grid-template-columns:22px 24px minmax(0, 1fr) auto;
  gap:8px;
  padding:4px 8px;
  border-color:transparent;
  border-radius:9px;
  background:color-mix(in srgb, var(--card) 70%, transparent);
}
.lb-row.lb-slim.lb-me{
  border-color:transparent;
  background:color-mix(in srgb, var(--gold) 20%, var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 65%, transparent);
}
.lb-row.lb-slim.lb-ghost{ border:1.5px dashed color-mix(in srgb, var(--gold) 65%, var(--border)); background:transparent; }
.lb-slim .lb-place{ font-size:12px; }
.lb-slim .lb-name{ font-size:14px; }
.lb-slim .lb-you{ padding:1px 6px; font-size:9px; }
.lb-slim .lb-val b{ font-size:14px; }
@media (max-width:560px){
  .lb-panel{ padding:12px 10px 10px; }
  .lb-goal{ padding:14px; }
  .lb-goal-num b{ font-size:24px; }
  .lb-goal-left{ text-align:left; }
  .lb-goal-left b{ display:inline; font-size:15px; }
  .lb-goal-left .lb-time{ margin-left:0; }
  .lb-board-head{ flex-direction:column; align-items:flex-start; }
  .lb-row{ grid-template-columns:28px 32px minmax(0, 1fr) auto; gap:8px; padding:9px 12px 9px 8px; }
  .lb-row .lb-av:not(.lb-av-sm){ width:32px; height:32px; font-size:14px; }
  .lb-val b{ font-size:17px; }
}
.lb-home[hidden]{ display:none; }
.lb-side{ display:none; }
.lb-card{
  margin-top:12px;
  border:1px solid var(--border);
  border-bottom:3px solid var(--gold);
  border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--card)), color-mix(in srgb, var(--gold) 4%, var(--card)));
}
.lbc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 0;
}
.lbc-title{ font:700 18px 'Work Sans', sans-serif; color:var(--ink); text-decoration:none; }
.lbc-title small{
  margin-left:6px;
  font:600 10px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lb-gold-text);
}
.lbc-right{ flex:none; display:inline-flex; align-items:center; gap:6px; }
.lbc-all{ margin-left:6px; font:600 13px 'Work Sans', sans-serif; color:var(--lb-gold-text); text-decoration:none; white-space:nowrap; }
@media (hover:hover){ .lbc-all:hover{ text-decoration:underline; } }
.lbc-body{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
  padding:10px 14px 12px;
}
.lbc-left{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.lb-card .lbs-goal{ margin:0; }
.lbc-note{ font:500 12.5px/1.35 'Work Sans', sans-serif; color:var(--ink-soft); }
.lbc-list{ gap:3px; }
@media (min-width:700px){
  .lbc-body{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:start; }
.lbc-body.lbc-alone{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:699px){
.lbc-title small{ display:block; margin:2px 0 0; }
}
@media (max-width:640px){
  .lb-card{ margin:10px -12px 0; }
}
.lb-side{
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb, var(--gold) 4%, var(--bg));
  overflow:hidden;
}
.lbs-head{
  flex:none;
  display:grid;
  grid-template-columns:26px minmax(0, 1fr) 26px;
  align-items:center;
  gap:6px;
  padding:16px 10px 14px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at -8% 120%, color-mix(in srgb, var(--gold) 34%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 70% -30%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 55%),
    var(--card);
  text-align:center;
}
.lbs-head-text{ display:grid; color:var(--ink); text-decoration:none; }
.lbs-kick{
  font:600 11px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lb-gold-text);
}
.lbs-title{ font:700 26px/1.1 'Work Sans', sans-serif; }
.lbs-reset{
  margin-top:4px;
  font:500 11px 'Work Sans', sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.lb-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:color-mix(in srgb, var(--card) 70%, transparent);
  color:var(--ink-soft);
  cursor:pointer;
}
@media (hover:hover){ .lb-step:hover{ color:var(--ink); border-color:var(--ink-soft); } }
.lb-step:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.lb-step svg{
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lbs-goal{
  flex:none;
  margin:12px 12px 4px;
  padding:12px 14px 13px;
  border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 20%, var(--card)), color-mix(in srgb, var(--gold) 6%, var(--card)));
}
.lbs-goal.is-reached{
  background:linear-gradient(135deg, color-mix(in srgb, var(--success) 26%, var(--card)), color-mix(in srgb, var(--success) 8%, var(--card)));
}
.lbs-goal-kick{
  display:block;
  font:600 11px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lb-gold-text);
}
.lbs-goal.is-reached .lbs-goal-kick{ color:color-mix(in srgb, var(--success) var(--lb-mix), var(--ink)); }
.lbs-goal-num{ display:block; margin-top:4px; font-variant-numeric:tabular-nums; }
.lbs-goal-num b{ font:700 30px/1 'Work Sans', sans-serif; }
.lbs-goal-num span{ font:600 15px 'Work Sans', sans-serif; color:var(--ink-soft); }
.lbs-goal .lb-bar{ height:10px; margin-top:10px; }
.lbs-goal .lb-bar-tick{ top:-3px; bottom:-3px; }
.lbs-goal-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  font:500 12px 'Work Sans', sans-serif;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.lbs-goal-foot + .lbs-goal-foot{ margin-top:5px; }
.lbs-goal-foot b{ color:var(--ink); font-weight:700; }
.lbs-goal-mine{ display:inline-flex; align-items:center; gap:6px; }
.lbs-goal-mine i{ width:9px; height:9px; border-radius:3px; background:var(--success); }
.lbs-goal.lbs-mini{ display:none; padding:9px 12px 10px; }
.lbs-mini-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lbs-mini .lbs-goal-num{ margin:0; }
.lbs-mini .lbs-goal-num b{ font-size:17px; }
.lbs-mini .lbs-goal-num span{ font-size:12.5px; }
.lbs-mini .lb-bar{ height:7px; margin-top:7px; }
.lbs-mini .lbs-goal-foot{ flex-wrap:wrap; gap:2px 10px; margin-top:7px; font-size:11.5px; }
@media (max-width:699px){
  .lb-card .lbs-goal:not(.lbs-mini){ display:none; }
  .lb-card .lbs-goal.lbs-mini{ display:block; }
}
.lbs-early{
  flex:none;
  margin:8px 12px 0;
  padding:12px;
  border:1.5px dashed var(--border);
  border-radius:12px;
  font:500 13px/1.4 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.lbs-list{ flex:1 1 0; min-height:0; overflow:hidden; gap:2px; padding:8px 8px 4px; }
.lbs-list > li{ flex:none; }
.lbs-list .lb-dots{ flex-basis:auto; gap:3px; }
.lbs-list .lb-dots i{ width:6px; height:6px; }
.lbs-note{ flex:none; }
.lbs-join{
  margin:4px 8px 0;
  padding:9px 10px;
  border:1.5px dashed var(--border);
  border-radius:9px;
  font:500 12.5px/1.35 'Work Sans', sans-serif;
  color:var(--ink-soft);
}
.lbs-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 12px 0;
  font:500 12.5px 'Work Sans', sans-serif;
}
.lbs-cta .lb-signup{ padding:7px 12px; font-size:12px; }
.lbc-note.lbs-join, .lbc-note.lbs-cta{ margin:0; }
.lbs-all{
  flex:none;
  display:block;
  padding:12px 18px 16px;
  font:600 13px 'Work Sans', sans-serif;
  color:var(--lb-gold-text);
  text-decoration:none;
}
.lbs-all:hover{ text-decoration:underline; }
.lb-slim .lb-top{ width:20px; height:20px; font-size:11px; }
.lb-home{ position:relative; }
.lb-card{ overflow:clip; }
.lb-old{ position:absolute; inset:0; pointer-events:none; }
.lb-side > .lb-old{ display:flex; flex-direction:column; }
.lb-old :is(.lbs-head, .lbc-top, .lbs-all){ visibility:hidden; }
[data-lb-dir]{ --lb-dir:1; }
[data-lb-dir="prev"]{ --lb-dir:-1; }
@keyframes lb-board-in{ from{ opacity:0; transform:translateX(calc(var(--lb-dir) * 48px)); } }
@keyframes lb-board-out{ to{ opacity:0; transform:translateX(calc(var(--lb-dir) * -48px)); } }
@media (prefers-reduced-motion:no-preference){
  [data-lb-dir] > :is(.lbs-goal, .lbs-early, .lbs-list, .lbs-note, .lbc-body){ animation:lb-board-in .22s ease-out both; }
  [data-lb-dir] > .lb-old > :is(.lbs-goal, .lbs-early, .lbs-list, .lbs-note, .lbc-body){ animation:lb-board-out .16s ease-in both; }
}
@media (prefers-reduced-motion:reduce){
  [data-lb-dir] > .lb-old{ display:none; }
}
@media (min-width:1260px){
  .home-layout{
    display:grid;
    grid-template-columns:900px 300px;
    column-gap:24px;
    justify-content:center;
    align-items:start;
    padding:0 18px;
  }
  .home-layout .wrap.wrap-home{ margin:0; padding-left:0; padding-right:0; }
.lb-side{ display:flex; flex-direction:column; align-self:stretch; contain:size; margin:24px 0 4rem; }
  .lb-side[hidden]{ display:none; }
  .lb-card{ display:none; }
}
@media (min-width:1680px){
  .home-layout{
    grid-template-columns:minmax(0, 1fr) 900px minmax(0, 1fr);
    column-gap:0;
    padding:0 160px 0 0;
  }
  .home-layout .wrap.wrap-home{ grid-column:2; }
  .lb-side{ grid-column:3; justify-self:start; width:300px; margin-left:24px; }
}
.qp-lb{
  position:relative;
  margin-top:14px;
  padding:12px 12px 10px;
  border:1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--card)), color-mix(in srgb, var(--gold) 4%, var(--card)));
  text-align:left;
}
.qp-lb[hidden]{ display:none; }
.qp-lb.is-loading{ min-height:236px; }
.qp-lb-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.qp-lb-plus{ display:grid; gap:2px; font:500 13px 'Work Sans', sans-serif; }
.qp-lb-plus b{ font:700 15px 'Work Sans', sans-serif; font-variant-numeric:tabular-nums; }
.qp-lb-kick{
  font:600 10px 'Work Sans', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lb-gold-text);
}
.qp-lb-chip{
  flex:none;
  padding:4px 9px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 9%, transparent);
  font:700 12px 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  opacity:0;
  transform:scale(.8);
  transition:opacity .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.qp-lb-chip.is-in{ opacity:1; transform:none; }
.qp-lb-chip-up{ background:color-mix(in srgb, var(--success) 16%, transparent); color:color-mix(in srgb, var(--success) var(--lb-mix), var(--ink)); }
.qp-lb-chip-gold{ background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--lb-gold-text); }
.qp-lb-msg{ margin:8px 0 8px; font:600 14px/1.3 'Work Sans', sans-serif; }
.qp-lb-msg b{ color:var(--lb-gold-text); }
.qp-lb-list{ gap:3px; }
.qp-lb-list .lb-row{ min-height:34px; transition:transform .55s cubic-bezier(.3, .8, .3, 1); }
.qp-lb-list .lb-me{ position:relative; z-index:1; }
.qp-lb-goal{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font:500 12px 'Work Sans', sans-serif;
}
.qp-lb-goal-line{ display:flex; justify-content:space-between; gap:8px; font-variant-numeric:tabular-nums; }
.qp-lb-goal-line > span:first-child{ font-weight:600; }
.qp-lb-goal.is-reached .qp-lb-goal-line > span:first-child{ color:color-mix(in srgb, var(--success) var(--lb-mix), var(--ink)); }
.qp-lb-bar{
  position:relative;
  height:8px;
  margin:6px 0;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
  overflow:hidden;
}
.qp-lb-bar i{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:999px;
  transition:width .7s ease-out;
}
.qp-lb-bar-all{ background:color-mix(in srgb, var(--gold) 55%, var(--card)); }
.qp-lb-bar-me{ background:var(--success); }
.qp-lb-goal.is-reached .qp-lb-bar-all{ background:color-mix(in srgb, var(--success) 40%, var(--card)); }
.qp-lb-bar .qp-lb-bar-bonus{
  left:auto;
  right:0;
  border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--success) 22%, transparent) 0 4px, transparent 4px 8px);
  transition:none;
}
.qp-lb-bar .qp-lb-bar-tick{ width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); opacity:.55; transition:none; }
.qp-lb-bar .qp-lb-bar-tick.is-goal{ width:3px; margin-left:-1.5px; background:var(--success); opacity:1; }
.qp-lb-goal.is-stretch .qp-lb-bar-all{ background:color-mix(in srgb, var(--success) 70%, var(--card)); }
.qp-lb-goal.is-beaten .qp-lb-goal-line > span:first-child{ color:var(--lb-gold-text); }
.qp-lb-key{ display:flex; align-items:center; gap:6px; color:var(--ink-soft); }
.qp-lb-key i{ width:8px; height:8px; border-radius:2px; background:var(--success); }
.qp-lb-guest{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-soft); }
.qp-lb-guest .lb-signup{ padding:6px 12px; font-size:12px; }
.qp-lb-pushed{
  margin:8px 0 0;
  padding:7px 10px;
  border-radius:8px;
  background:color-mix(in srgb, var(--success) 14%, transparent);
  color:color-mix(in srgb, var(--success) var(--lb-mix), var(--ink));
  font:600 13px 'Work Sans', sans-serif;
}
.qp-lb-pushed[hidden]{ display:none; }
.qp-lb-foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font:500 12px 'Work Sans', sans-serif;
  color:var(--muted);
}
.qp-lb-foot a{ color:var(--lb-gold-text); font-weight:600; text-decoration:none; }
.qp-lb-foot a:hover{ text-decoration:underline; }
.qp-lb-skeleton{ display:grid; gap:6px; margin-top:12px; }
.qp-lb-skeleton i{ display:block; height:30px; border-radius:9px; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.qp-lb-fx{ position:absolute; pointer-events:none; z-index:5; }
@media (prefers-reduced-motion: reduce){
  .qp-lb-chip, .qp-lb-bar i, .qp-lb-list .lb-row{ transition:none; }
}
:root{ --irr:#C8323A; }
:root[data-theme="dark"]{ --irr:#F2666B; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --irr:#F2666B; } }
.wcd-head{ margin:0 0 8px; font-size:15px; font-weight:600; color:var(--ink); }
.wcd-forms{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; align-items:baseline; }
.wcd-forms[hidden]{ display:none; }
.wcd-forms dt{ font-size:13px; color:var(--ink-soft); }
.wcd-forms dd{ margin:0; font-family:'Noto Sans JP', sans-serif; font-size:18px; white-space:nowrap; }
.wcd-end{ font-style:normal; color:var(--teal); }
.wcd-irr .wcd-end{ color:var(--irr); }
.wcd-key{ display:flex; align-items:center; gap:6px; margin:10px 0 0; font-size:12.5px; color:var(--ink-soft); }
.wcd-key[hidden]{ display:none; }
.wcd-key b{ width:10px; height:10px; border-radius:50%; background:var(--irr); flex:none; }
.wcd-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.wcd-tags[hidden]{ display:none; }
.wcd-tag{ padding:2px 10px; border:1px solid var(--teal); border-radius:999px; font-size:13px; color:var(--ink); background:var(--teal-soft); }
.wcd-head-tag{ display:inline-block; margin-left:0.4em; vertical-align:middle; white-space:nowrap; text-transform:none; letter-spacing:normal; line-height:1.3; }
.wcd-tag-kana{ border-style:dashed; border-color:var(--ink-soft); background:transparent; color:var(--ink-soft); }
.wcd-note, .wcd-line, .wcd-tip{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--ink); }
.wcd-tip{ margin-top:0; }
.wcd-tip{ --tip-mean:#FCE38A; --tip-mean-ink:#3A2A05; }
:root[data-theme="dark"] .wcd-tip{ --tip-mean:#FAC775; --tip-mean-ink:#412402; }
.wcd-tip-sound{ font-weight:700; color:var(--teal); }
.wcd-tip-mean{ background:var(--tip-mean); color:var(--tip-mean-ink); padding:0 0.15em; border-radius:0.15em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.wcd-ranks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px; align-items:center; }
.wcd-ranks[hidden]{ display:none; }
.wcd-ranks li{ display:contents; }
.wcd-rank-name, .wcd-rank-count{ font-size:13px; color:var(--ink); }
.wcd-rank-count{ color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums; }
.wcd-bar{ height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.wcd-bar b{ display:block; height:100%; background:var(--teal); }
.wc-pic-play{ cursor:pointer; }
.wc-pic-play:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.wc-overlay.wc-desk{ container-type:size; padding:0; width:var(--wc-vw, auto); height:var(--wc-vh, auto); }
.wc-desk .wc-panel{
  --u:1;
  position:relative;
  width:min(calc(var(--wc-vw, 100cqw) - 2 * min(64px, var(--wc-vw, 100cqw) * 0.06)), calc(var(--wc-vh, 100cqh) * 0.92 * 1.72));
  height:calc(var(--wc-vh, 100cqh) * 0.92);
  max-height:none;
  border-radius:calc(28px * var(--u));
  box-shadow:0 30px 80px rgba(0, 0, 0, 0.4);
}
@container (max-width:759px){ .wc-desk .wc-panel{ width:min(calc(var(--wc-vw, 100cqw) * 0.94), calc(var(--wc-vh, 100cqh) * 0.92 * 1.72)); } }
.wc-desk .wc-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:calc(64px * var(--u));
  padding:0 calc(30px * var(--u));
}
.wc-desk .wc-close{
  grid-column:1;
  justify-self:start;
  gap:calc(10px * var(--u));
  padding:calc(8px * var(--u)) 0;
  font-size:calc(18px * var(--u));
  font-weight:600;
  letter-spacing:0.12em;
  color:var(--ink);
}
.wc-desk .wc-close svg{ width:calc(22px * var(--u)); height:calc(22px * var(--u)); color:var(--accent); stroke-width:2.6; }
.wcx-status,
.wcx-unit{ display:none; }
.wc-desk .wcx-status{ display:flex; grid-column:2; justify-self:center; align-items:center; }
.wc-desk .wcx-unit{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  grid-column:3;
  justify-self:end;
  line-height:1.05;
  white-space:nowrap;
  font:600 calc(21px * var(--u)) 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.wc-desk .wcp-cu{ font-size:calc(15px * var(--u)); }
.wcx-unit em{ font-style:normal; text-transform:none; color:var(--teal); }
.wcx-unit em i{ font-style:normal; color:var(--muted); }
.wcx-new{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:calc(8px * var(--u));
  padding:calc(9px * var(--u)) calc(18px * var(--u)) calc(9px * var(--u)) calc(13px * var(--u));
  border-radius:999px;
  background:linear-gradient(135deg, #F4C152 0%, #EC8358 52%, #DC5F8C 100%);
  color:#fff;
  font:800 calc(17px * var(--u)) 'Nunito', 'Work Sans', sans-serif;
  letter-spacing:0.09em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(90, 30, 10, 0.3);
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 20px rgba(236, 131, 88, 0.4), 0 0 28px rgba(244, 193, 82, 0.25);
}
.wcx-new svg{ width:calc(19px * var(--u)); height:calc(19px * var(--u)); fill:#FFF5D2; }
@media (prefers-reduced-motion:no-preference){
  .wcx-new{ animation:wcx-pop 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) both; }
  .wcx-new svg{ animation:wcx-twinkle 2.4s ease-in-out infinite; }
  .wcx-new::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    transform:translateX(-130%);
    animation:wcx-sheen 3.4s ease-in-out 0.7s infinite;
  }
}
@keyframes wcx-pop{ 0%{ transform:scale(0.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes wcx-twinkle{ 0%, 100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.28) rotate(25deg); } }
@keyframes wcx-sheen{ 0%{ transform:translateX(-130%); } 35%, 100%{ transform:translateX(130%); } }
.wcx-g-a{ --gc:var(--success); }
.wcx-g-b{ --gc:var(--info); }
.wcx-g-c{ --gc:var(--gold); }
.wcx-g-d{ --gc:var(--grade-d); }
.wcx-g-f{ --gc:var(--accent); }
.wcx-rank{
  display:inline-flex;
  align-items:center;
  gap:calc(11px * var(--u));
  min-width:calc(180px * var(--u));
  padding:calc(4.5px * var(--u)) calc(20px * var(--u)) calc(4.5px * var(--u)) calc(4.5px * var(--u));
  border-radius:999px;
  background:color-mix(in srgb, var(--gc) 17%, var(--card));
  border:1.5px solid color-mix(in srgb, var(--gc) 60%, transparent);
  box-shadow:0 4px 16px color-mix(in srgb, var(--gc) 22%, transparent);
  color:var(--ink);
  font:inherit;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
}
.wcx-rank:hover{ filter:brightness(1.08); }
.wcx-rank:focus-visible{ outline:2px solid var(--gc); outline-offset:3px; }
.wcx-rank > b{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(34px * var(--u));
  height:calc(34px * var(--u));
  border-radius:50%;
  background:var(--gc);
  color:var(--card);
  font:800 calc(18px * var(--u)) 'Work Sans', sans-serif;
}
.wcx-rank-lines{ display:flex; flex-direction:column; gap:calc(2px * var(--u)); }
.wcx-rank-top,
.wcx-rank-bot{
  display:flex;
  align-items:center;
  gap:calc(9px * var(--u));
  white-space:nowrap;
  font:600 calc(14.4px * var(--u)) 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
}
.wcx-rk{ font-weight:800; font-size:calc(13.5px * var(--u)); letter-spacing:0.1em; text-transform:uppercase; color:var(--gc); }
.wcx-dot{ width:calc(3.6px * var(--u)); height:calc(3.6px * var(--u)); border-radius:50%; background:color-mix(in srgb, var(--ink) 35%, transparent); }
.wcx-tally{ color:var(--ink-soft); font-weight:500; }
.wcx-tally strong{ color:var(--ink); font-weight:800; font-size:1.12em; }
.wcx-rank-bar{
  position:relative;
  flex:none;
  width:calc(99px * var(--u));
  height:calc(6.3px * var(--u));
  border-radius:99px;
  background:color-mix(in srgb, var(--ink) 14%, transparent);
  overflow:hidden;
}
.wcx-rank-bar i{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--gc); }
.wcx-cap{ font-size:calc(12.6px * var(--u)); color:var(--ink-soft); }
.wcx-cap.hot{ color:var(--gc); }
.wc-desk .wc-scroll{
  flex-direction:row;
  padding:calc(18px * var(--u));
  overflow:hidden;
}
.wcx{
  --fit:1;
  --fitE:1;
  --wk:1;
  --pic:400px;
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  gap:calc(24px * var(--u));
  padding:calc(33px * var(--u));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(22px * var(--u));
  overflow:hidden;
}
.wcx-main{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:calc(15px * var(--u));
  overflow:hidden;
}
.wcx-side{ position:relative; flex:none; width:var(--pic); }
.wcx-panel{
  min-width:0;
  border:1px solid var(--border);
  border-radius:calc(18px * var(--u));
  padding:calc(18px * var(--u)) calc(21px * var(--u));
}
.wcx-wordpanel{ flex:none; background:color-mix(in srgb, var(--teal) 6%, var(--card)); }
.wcx-no-ex .wcx-wordpanel{ flex:1; }
.wcx-ex{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.wcx-ex-body{ margin:auto 0; }
.wcx-head{ margin:calc(12px * var(--u)) 0 0; font:inherit; }
.wcx-word{
  display:inline-block;
  font-family:'Noto Sans JP', sans-serif;
  font-size:calc(150px * var(--u) * var(--fit) * var(--wk));
  font-weight:500;
  line-height:1.05;
  white-space:nowrap;
  color:var(--ink);
}
button.wcx-word{
  position:relative;
  margin:0;
  padding:0;
  border:0;
  border-radius:calc(12px * var(--u));
  background:none;
  text-align:left;
  cursor:pointer;
}
button.wcx-word:hover,
button.wcx-word.wcx-open{ background:color-mix(in srgb, var(--ink) 6%, transparent); }
button.wcx-word:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.wcx-en{
  margin:calc(8px * var(--u)) 0 0;
  font:600 calc(52.9px * var(--u) * var(--fit)) 'Work Sans', sans-serif;
  line-height:1.15;
  color:var(--info);
  text-wrap:balance;
}
.wcx-extra{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:calc(12px * var(--u)) calc(14px * var(--u));
  margin-top:calc(18px * var(--u));
}
.wcx-extra.wcx-has-kanji{ align-items:flex-end; }
.wcx-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(14px * var(--u)); }
.wcx-has-kanji .wcx-pills{ flex:1; justify-content:center; }
.wc-desk .wc-kanji-row{
  display:inline-flex;
  flex:none;
  gap:calc(14px * var(--u));
  font-size:calc(63.4px * var(--u));
  line-height:1;
}
.wc-desk .wc-kanji,
.wc-desk .wc-kanji-row .wc-kanji:not(:only-child){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:calc(96px * var(--u));
  min-width:calc(96px * var(--u));
  padding:0 0.2em;
  letter-spacing:0;
  border-radius:calc(16px * var(--u));
  box-shadow:0 0 calc(18px * var(--u)) color-mix(in srgb, var(--teal) 45%, transparent),
             inset 0 0 calc(14px * var(--u)) color-mix(in srgb, var(--teal) 25%, transparent);
}
.wcx-pill{
  display:inline-flex;
  align-items:center;
  gap:calc(10px * var(--u));
  padding:calc(8.75px * var(--u)) calc(20px * var(--u)) calc(8.75px * var(--u)) calc(15px * var(--u));
  border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--pc) 50%, transparent);
  background:color-mix(in srgb, var(--pc) 12%, var(--card));
  color:var(--pc);
  font:600 calc(20px * var(--u)) 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.wcx-pill:hover,
.wcx-pill.wcx-open{ background:color-mix(in srgb, var(--pc) 20%, var(--card)); }
.wcx-pill:focus-visible{ outline:2px solid var(--pc); outline-offset:2px; }
.wcx-pill svg{
  flex:none;
  width:calc(22.5px * var(--u));
  height:calc(22.5px * var(--u));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wcx-pill-info{ --pc:var(--gold); }
.wcx-pill-tip{ --pc:var(--plum); }
.wcx-pills{ opacity:0.35; transition:opacity 0.25s ease; }
.wcx-wordpanel:hover .wcx-pills,
.wcx-wordpanel:has(:focus-visible) .wcx-pills,
.wcx-wordpanel:has(.wcx-open) .wcx-pills{ opacity:1; }
.wc-desk .wcx-ex .wc-label{
  margin:0;
  font:600 calc(14px * var(--u)) 'Work Sans', sans-serif;
  letter-spacing:0.12em;
}
.wc-desk .wcx-ex .wc-sentence{
  margin:calc(8px * var(--u)) 0 0;
  font-size:calc(36px * var(--u) * var(--fitE));
  line-height:1.85;
}
.wc-desk .wcx-ex .wc-tok{ position:relative; line-height:1.3; margin:0 0.22em 0 0; }
.wc-desk .wcx-ex .wc-nobr{ margin-right:0.22em; max-width:none; white-space:nowrap; }
.wc-desk .wcx-ex .wc-nobr > .wc-tok:not(:last-child){ margin-right:0.04em; }
.wc-desk .wcx-ex .wc-sentence-en{
  margin:calc(4px * var(--u)) 0 0;
  font-size:calc(26.45px * var(--u) * var(--fitE));
  line-height:1.4;
  text-wrap:balance;
opacity:0.35;
  transition:opacity 0.25s ease;
}
.wcx-ex:hover .wc-sentence-en,
.wcx-ex:has(:focus-visible) .wc-sentence-en{ opacity:1; }
.wc-desk [data-tip]:hover::after,
.wc-desk .wcx-ex .wc-tok[data-piece]:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  top:calc(100% + 6px * var(--u));
  transform:translateX(-50%);
  z-index:5;
  padding:calc(5px * var(--u)) calc(10px * var(--u));
  border-radius:8px;
  background:rgba(14, 17, 26, 0.92);
  color:#EDE9DD;
  font:600 calc(13px * var(--u)) / 1.2 'Work Sans', sans-serif;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  pointer-events:none;
}
.wc-desk .wcx-ex .wc-tok[data-piece]:hover::after{ content:"Click for meaning"; }
.wc-desk.wc-overlay .wcx-detail-open [data-tip]:hover::after,
.wc-desk.wc-overlay .wcx-detail-open .wc-tok:hover::after,
.wc-desk.wc-overlay .wc-tok.open::after,
.wc-desk.wc-overlay .wcx-open::after{ display:none; }
.wc-desk .wc-pic{
  width:var(--pic);
  height:var(--pic);
  max-width:none;
  aspect-ratio:auto;
  margin:0;
  border-radius:calc(20px * var(--u));
}
.wc-desk .wc-pic-empty{ font-size:calc(15px * var(--u)); }
.wc-desk .wc-pic-empty svg{ width:calc(64px * var(--u)); height:calc(64px * var(--u)); }
.wc-desk .wc-pic-play .wc-pic-img{ transition:opacity 0.15s ease, filter 0.2s; }
.wc-desk .wc-pic-play:hover .wc-pic-img{ filter:brightness(1.05); }
.wc-desk .wc-pic-play:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
.wcx-voices{
  position:absolute;
  right:calc(18px * var(--u));
  top:calc(var(--pic) - 70px * var(--u));
  display:flex;
  gap:calc(10px * var(--u));
}
.wc-desk .wcx-voices .wc-audio-btn{
  height:calc(52px * var(--u));
  padding:0 calc(22px * var(--u)) 0 calc(17px * var(--u));
  gap:calc(9px * var(--u));
  border:0;
  background:rgba(14, 17, 26, 0.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:rgba(255, 255, 255, 0.9);
  font:600 calc(19px * var(--u)) 'Work Sans', sans-serif;
  opacity:0;
  transition:background-color 0.15s, opacity 0.2s;
}
.wc-desk .wcx-voices .wc-audio-btn svg{ width:calc(22px * var(--u)); height:calc(22px * var(--u)); }
.wc-desk .wcx-voices .wc-audio-btn:hover{ background:rgba(14, 17, 26, 0.72); }
.wcx-side:hover .wcx-voices .wc-audio-btn,
.wcx-side:has(:focus-visible) .wcx-voices .wc-audio-btn,
.wc-desk .wcx-voices .wc-audio-btn.playing{ opacity:1; }
.wc-desk .wcx-voices .wc-audio-btn.playing{ background:color-mix(in srgb, var(--teal) 70%, rgba(14, 17, 26, 0.6)); color:#fff; }
.wc-desk .wc-foot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:calc(12px * var(--u));
  height:calc(88px * var(--u));
  padding:0 calc(24px * var(--u));
}
.wc-desk .wc-foot[hidden]{ display:none; }
.wc-desk .wc-foot > *{ grid-row:1; }
.wc-desk .wc-nav{ width:calc(60px * var(--u)); height:calc(60px * var(--u)); background:var(--bg); }
.wc-desk .wc-nav[hidden]{ display:none; }
.wc-desk .wc-nav svg{ width:calc(22px * var(--u)); height:calc(22px * var(--u)); }
.wc-desk .wc-nav[data-step="-1"]{ grid-column:1; justify-self:start; }
.wc-desk .wc-nav[data-step="1"]{ grid-column:3; justify-self:end; }
.wc-desk .wc-kback{
  grid-column:1;
  justify-self:start;
  height:calc(64px * var(--u));
  min-height:0;
  padding:0 calc(30px * var(--u)) 0 calc(20px * var(--u));
  gap:calc(10px * var(--u));
  border-radius:12px;
  font-size:calc(22px * var(--u));
}
.wc-desk .wc-kback[hidden]{ display:none; }
.wc-desk .wc-kback svg{ width:calc(24px * var(--u)); height:calc(24px * var(--u)); }
.wc-desk .wc-hint,
.wc-desk .wc-marks{ grid-column:2; }
.wc-desk .wc-hint{ font-size:calc(13px * var(--u)); }
.wc-desk .wc-marks{ gap:calc(36px * var(--u)); }
.wc-desk .wc-marks[hidden]{ display:none; }
.wc-desk .wc-mark{
  min-height:0;
  height:calc(54px * var(--u));
  padding:0 calc(20px * var(--u));
  gap:calc(10px * var(--u));
  border-radius:12px;
  background:var(--bg);
  font-size:calc(18px * var(--u));
  white-space:nowrap;
}
.wc-desk .wc-mark[hidden]{ display:none; }
.wc-desk .wc-mark svg{ width:calc(20px * var(--u)); height:calc(20px * var(--u)); }
.wc-desk .wc-primary{
  grid-column:3;
  justify-self:end;
  flex:none;
  height:calc(64px * var(--u));
  padding:0 calc(36px * var(--u));
  font-size:calc(22px * var(--u));
  font-weight:700;
  background:var(--success);
  color:var(--card);
}
.wc-desk .wc-primary:hover{ background:color-mix(in srgb, var(--success) 85%, var(--ink)); }
.wc-desk .wc-primary[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .wc-desk .wc-primary{ animation:wcx-breathe 2.6s ease-in-out infinite; }
}
@keyframes wcx-breathe{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.wc-desk .wc-foot:has(.wc-nav[data-step="1"]:not([hidden])) .wc-primary{ margin-right:calc(72px * var(--u)); }
.wcx-detail{
  --pk:1.6;
  position:absolute;
  z-index:20;
  box-sizing:border-box;
  min-width:min(calc(300px * var(--u) * var(--pk)), calc(100% - 32px * var(--u)));
  max-width:min(calc(460px * var(--u) * var(--pk)), calc(100% - 32px * var(--u)));
  padding:calc(18px * var(--u) * var(--pk)) calc(20px * var(--u) * var(--pk));
  border:1px solid var(--border);
  border-radius:calc(16px * var(--u) * var(--pk));
  background:color-mix(in srgb, var(--card) 93%, var(--ink) 7%);
  box-shadow:0 18px 50px rgba(0, 0, 0, 0.45);
  color:var(--ink);
  font-family:'Work Sans', 'Noto Sans JP', sans-serif;
}
.wcx-detail-x{
  position:absolute;
  top:calc(10px * var(--u) * var(--pk));
  right:calc(10px * var(--u) * var(--pk));
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(30px * var(--u) * var(--pk));
  height:calc(30px * var(--u) * var(--pk));
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.wcx-detail-x:hover{ background:color-mix(in srgb, var(--ink) 10%, transparent); }
.wcx-detail-x svg{ width:calc(16px * var(--u) * var(--pk)); height:calc(16px * var(--u) * var(--pk)); }
.wcx-detail .wcd-head{
  margin:0 calc(34px * var(--u) * var(--pk)) calc(12px * var(--u) * var(--pk)) 0;
  font:700 calc(13px * var(--u) * var(--pk)) 'Work Sans', 'Noto Sans JP', sans-serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.wcx-detail .wcd-forms{ gap:calc(8px * var(--u) * var(--pk)) calc(22px * var(--u) * var(--pk)); }
.wcx-detail .wcd-forms dt{ font:600 calc(15px * var(--u) * var(--pk)) 'Work Sans', sans-serif; }
.wcx-detail .wcd-forms dd{ font-size:calc(30px * var(--u) * var(--pk)); font-weight:500; }
.wcx-detail .wcd-key{
  gap:calc(8px * var(--u) * var(--pk));
  margin-top:calc(14px * var(--u) * var(--pk));
  padding-top:calc(10px * var(--u) * var(--pk));
  border-top:1px solid var(--border);
  font-size:calc(13px * var(--u) * var(--pk));
}
.wcx-detail .wcd-key b{ width:calc(10px * var(--u) * var(--pk)); height:calc(10px * var(--u) * var(--pk)); }
.wcx-detail .wcd-tags{ gap:calc(8px * var(--u) * var(--pk)); }
.wcx-detail .wcd-tag{
  padding:calc(5px * var(--u) * var(--pk)) calc(13px * var(--u) * var(--pk));
  border-width:1.5px;
  font:600 calc(16px * var(--u) * var(--pk)) 'Work Sans', 'Noto Sans JP', sans-serif;
}
.wcx-detail .wcd-note,
.wcx-detail .wcd-line,
.wcx-detail .wcd-tip{
  margin-top:calc(12px * var(--u) * var(--pk));
  font-size:calc(18px * var(--u) * var(--pk));
  line-height:1.55;
}
.wcx-detail .wcd-tip{ margin-top:0; }
.wcx-detail .wcd-ranks{
  grid-template-columns:auto calc(140px * var(--u) * var(--pk)) auto;
  gap:calc(10px * var(--u) * var(--pk)) calc(14px * var(--u) * var(--pk));
}
.wcx-detail .wcd-rank-name,
.wcx-detail .wcd-rank-count{ font:600 calc(15px * var(--u) * var(--pk)) 'Work Sans', sans-serif; }
.wcx-detail .wcd-rank-name{ color:var(--ink-soft); }
.wcx-detail .wcd-bar{ height:calc(8px * var(--u) * var(--pk)); }
@media (prefers-reduced-motion:reduce){
  .wcx-pills,
  .wc-desk .wcx-ex .wc-sentence-en,
  .wc-desk .wcx-voices .wc-audio-btn,
  .wc-desk .wc-pic-play .wc-pic-img{ transition:none; }
}
.wc-kcard .wc-panel,
.kcx{
  --ac:var(--sakura);
  --acs:color-mix(in srgb, var(--ac) 15%, var(--card));
  --rad:var(--gold);
  --wm:var(--info);
}
.kcx{
  white-space:normal;
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  gap:calc(24px * var(--u));
  padding:calc(33px * var(--u));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(22px * var(--u));
  overflow:hidden;
  color:var(--ink);
}
.kcx-left{
  flex:none;
  width:42%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:calc(15px * var(--u));
}
.kcx-wordpanel{
  --fw:1;
  --fm:1.25;
  --fp:1;
  --bh:0px;
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:calc(18px * var(--u)) calc(21px * var(--u));
  border:1px solid var(--border);
  border-radius:calc(18px * var(--u));
  background:color-mix(in srgb, var(--ac) 6%, var(--card));
}
.kcx-wordpanel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--bh);
  background:color-mix(in srgb, var(--bg) 75%, var(--card));
  box-shadow:0 calc(8px * var(--u)) calc(16px * var(--u)) calc(-5px * var(--u)) rgba(0, 0, 0, 0.55);
  border-bottom:1px solid rgba(255, 255, 255, 0.06);
  pointer-events:none;
}
.kcx-wordpanel > *{ position:relative; z-index:1; }
.kcx-head{ margin:0; font:inherit; }
.kcx-word{
  --ws:82px;
  display:inline-flex;
  align-items:flex-end;
  font-family:'Noto Sans JP', sans-serif;
  font-size:calc(var(--ws) * var(--u) * var(--fw));
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.kcx-word.kcx-len-1{ --ws:124px; }
.kcx-word.kcx-len-2{ --ws:112px; }
.kcx-word.kcx-len-3{ --ws:96px; }
.kcx-seg{ display:inline-flex; flex-direction:column; align-items:center; }
.kcx-rd{
  display:block;
  margin-bottom:0.12em;
  font-size:0.38em;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0.03em;
  white-space:nowrap;
  color:var(--ac);
}
.kcx-seg:not(.kcx-seg-k) .kcx-rd{ visibility:hidden; }
.kcx-ch{ display:block; white-space:nowrap; }
.kcx-kana,
.kcx-k{ display:inline-block; padding:0 0.02em 0.16em; line-height:1; }
.kcx-k{
  position:relative;
  margin:0;
  border:0;
  border-radius:0.08em;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:background-color 0.15s;
}
.kcx-k:hover{ background:color-mix(in srgb, var(--ac) 10%, transparent); }
.kcx-k:focus-visible{ outline:3px solid var(--ac); outline-offset:2px; }
.kcx-k.kcx-sel::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:0.05em;
  min-height:4px;
  border-radius:99px;
  background:var(--ac);
  box-shadow:0 0 calc(14px * var(--u)) color-mix(in srgb, var(--ac) 70%, transparent);
}
.kcx-mean{
  margin:calc(14px * var(--u)) 0 0;
  font:600 calc(36px * var(--u) * var(--fm)) 'Work Sans', sans-serif;
  line-height:1.15;
  color:var(--wm);
  text-wrap:balance;
}
.kcx-pills{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:calc(10px * var(--u));
  max-width:100%;
  margin-top:calc(20px * var(--u));
}
.kcx-pill{
  --pc:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:calc(8px * var(--u) * var(--fp, 1));
  padding:calc(7px * var(--u) * var(--fp, 1)) calc(16px * var(--u) * var(--fp, 1)) calc(7px * var(--u) * var(--fp, 1)) calc(12px * var(--u) * var(--fp, 1));
  border:1.5px solid color-mix(in srgb, var(--pc) 50%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--pc) 12%, var(--card));
  color:var(--pc);
  font:600 calc(17px * var(--u) * var(--fp, 1)) 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.kcx-pill svg{
  flex:none;
  width:calc(18px * var(--u) * var(--fp, 1));
  height:calc(18px * var(--u) * var(--fp, 1));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.kcx-pill:hover,
.kcx-pill.wcx-open{ background:color-mix(in srgb, var(--pc) 20%, var(--card)); }
.kcx-pill:focus-visible{ outline:2px solid var(--pc); outline-offset:2px; }
.kcx-pill-tip{ --pc:var(--plum); }
.kcx-pill-pic{ --pc:var(--teal); }
.kcx-pill-mix{ --pc:var(--accent); }
.kcx .wcx-ex{ --fitE:1; flex:none; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.kcx .wcx-ex .wcx-ex-body{ margin:0; }
.kcx .wcx-ex .wc-label{ margin:0; font:600 calc(13px * var(--u)) 'Work Sans', sans-serif; letter-spacing:0.12em; }
.kcx .wcx-ex .wc-sentence{
  margin:calc(6px * var(--u)) 0 0;
  font-size:calc(30px * var(--u) * var(--fitE));
  line-height:1.75;
}
.kcx .wcx-ex .wc-sentence-en{ font-size:calc(20px * var(--u) * min(max(var(--fitE), 1), 1.3)); }
.kcx .wc-tok.wc-target{ background:var(--acs); border-bottom-color:var(--ac); border-radius:6px 6px 0 0; }
.kcx-kpanel{
  --fit:1;
  --bf:1;
  --mf:1;
  --pf:1;
  --gx:1;
  --eg:0px;
  --kbx:360px;
  flex:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:calc(18px * var(--u)) calc(21px * var(--u));
  border:1px solid color-mix(in srgb, var(--ac) 35%, var(--border));
  border-radius:calc(18px * var(--u));
  background:color-mix(in srgb, var(--ac) 7%, var(--card));
}
.kcx-kbody{ flex:1; min-height:0; display:flex; align-items:center; gap:calc(34px * var(--u)); }
.kcx-draw{ flex:none; width:var(--kbx); display:flex; flex-direction:column; gap:calc(14px * var(--u)); }
.kcx-tabs{ --tz:1; display:flex; flex-wrap:nowrap; gap:calc(10px * var(--u) * var(--tz)); width:var(--kbx); }
.kcx-tab{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:calc(12px * var(--u) * var(--tz));
  padding:calc(6px * var(--u) * var(--tz)) calc(24px * var(--u) * var(--tz)) calc(6px * var(--u) * var(--tz)) calc(14px * var(--u) * var(--tz));
  border:1.5px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-soft);
  font:600 calc(23px * var(--u) * var(--tz)) 'Work Sans', sans-serif;
  white-space:nowrap;
}
button.kcx-tab{ cursor:pointer; }
button.kcx-tab:hover{ border-color:var(--ac); }
button.kcx-tab:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; }
.kcx-tabs-solo .kcx-tab{ cursor:default; }
.kcx-tk{ font:500 calc(44px * var(--u) * var(--tz)) 'Noto Sans JP', sans-serif; line-height:1.2; color:var(--ink); }
.kcx-tab.kcx-sel{
  border-color:var(--ac);
  background:var(--acs);
  color:var(--ink);
  box-shadow:0 0 calc(14px * var(--u)) color-mix(in srgb, var(--ac) 35%, transparent);
}
.kcx-compact .kcx-tab:not(.kcx-sel) .kcx-tt{ display:none; }
.kcx-compact .kcx-tab:not(.kcx-sel){ padding-right:calc(14px * var(--u) * var(--tz)); }
.kcx-bare .kcx-tab .kcx-tt{ display:none; }
.kcx-bare .kcx-tab{ padding-right:calc(14px * var(--u) * var(--tz)); }
.kcx-box{
  position:relative;
  display:block;
  width:var(--kbx);
  height:var(--kbx);
  margin:0;
  padding:0;
  border:2px solid color-mix(in srgb, var(--ac) 55%, var(--border));
  border-radius:calc(16px * var(--u));
  background:var(--card);
  overflow:hidden;
  cursor:pointer;
}
.kcx-box:hover{ border-color:var(--ac); }
.kcx-box:focus-visible{ outline:3px solid var(--ac); outline-offset:3px; }
.kcx-svg{ position:absolute; inset:0; width:100%; height:100%; }
.kcx-guide line{ stroke:color-mix(in srgb, var(--ink) 15%, transparent); stroke-width:0.6; stroke-dasharray:2.2 2; }
.kcx-ghost,
.kcx-ink{ fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.kcx-ghost path{ stroke:color-mix(in srgb, var(--ink) 11%, transparent); }
.kcx-ink path{ stroke:var(--ink); transition:stroke 0.25s; }
.kcx-ink path.kcx-cur{ stroke:var(--ac); }
.kcx-ink path.kcx-hl{ stroke:var(--rad); }
.kcx-ghost path.kcx-hl{ stroke:color-mix(in srgb, var(--rad) 45%, transparent); }
.kcx-nums text{ font:600 7px 'Work Sans', sans-serif; fill:var(--muted); }
.kcx-nums text.kcx-cur{ fill:var(--ac); font-weight:800; }
.kcx-hint{
  position:absolute;
  left:50%;
  bottom:calc(10px * var(--u));
  transform:translateX(-50%);
  padding:2px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--card) 85%, transparent);
  color:var(--muted);
  font:600 calc(13px * var(--u)) 'Work Sans', sans-serif;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s;
}
.kcx-box:hover .kcx-hint{ opacity:1; }
.kcx-is-step .kcx-hint{ visibility:hidden; }
.kcx-ctl{ display:flex; align-items:center; gap:calc(10px * var(--u)); }
.kcx-kb{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:calc(48px * var(--u));
  height:calc(48px * var(--u));
  padding:0 calc(12px * var(--u));
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-soft);
  font:700 calc(15px * var(--u)) 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.kcx-kb svg{ width:calc(22px * var(--u)); height:calc(22px * var(--u)); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kcx-kb svg.kcx-fill{ fill:currentColor; stroke:none; }
.kcx-kb:hover{ border-color:var(--ac); color:var(--ink); }
.kcx-kb:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; }
.kcx-count{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(3px * var(--u));
  width:calc(74px * var(--u));
  line-height:1;
  font:600 calc(14px * var(--u)) 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.kcx-count b{ font-size:calc(26px * var(--u)); font-weight:800; color:var(--ink); }
.kcx-count b.kcx-ac{ color:var(--ac); }
.kcx-count small{ font:600 calc(13px * var(--u)) 'Work Sans', sans-serif; letter-spacing:0.04em; color:var(--muted); }
.kcx-slot{ display:grid; }
.kcx-slot > .kcx-kb{ grid-area:1 / 1; visibility:hidden; }
.kcx-is-rest:not(.kcx-is-first) .kcx-sx,
.kcx-is-play .kcx-sx,
.kcx-is-step .kcx-sx,
.kcx-is-plain .kcx-renum,
.kcx-is-rest.kcx-is-first .kcx-renum{ visibility:inherit; }
.kcx-grow{ flex:1; }
.kcx-facts{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:calc(30px * var(--u) * var(--fit) + var(--eg));
  padding:2px 4px 2px 2px;
  overflow:hidden;
}
.kcx-lbl{
  margin:0;
  font:600 calc(15px * var(--u) * var(--fit)) 'Work Sans', sans-serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.kcx-kmean{
  flex:none;
  margin:0;
  overflow:hidden;
  font:700 calc(56px * var(--u) * var(--fit) * var(--mf)) 'Work Sans', sans-serif;
  line-height:1.1;
  padding-bottom:0.08em;   
  color:var(--ink);
}
.kcx-m{ white-space:nowrap; }
.kcx-mwrap .kcx-m{ white-space:normal; }
.kcx-inword{
  position:relative;
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(4px * var(--u));
  padding:calc(16px * var(--u) * var(--gx)) calc(26px * var(--u)) calc(18px * var(--u) * var(--gx));
  border:1px solid color-mix(in srgb, var(--ac) 40%, transparent);
  border-radius:calc(16px * var(--u));
  background:color-mix(in srgb, var(--ac) 13%, var(--card));
  overflow:hidden;
  cursor:pointer;
  transition:background-color 0.2s, border-color 0.2s;
}
.kcx-inword:hover,
.kcx-inword:focus-visible,
.kcx-inword.wcx-open{ background:color-mix(in srgb, var(--ac) 20%, var(--card)); border-color:color-mix(in srgb, var(--ac) 70%, transparent); }
.kcx-inword:focus-visible{ outline:3px solid var(--ac); outline-offset:-3px; }
.kcx-iwlbl{ letter-spacing:0.08em; }
.kcx-big{
  display:inline-flex;
  align-items:center;
  gap:calc(14px * var(--u));
  font:500 calc(60px * var(--u) * var(--fit) * var(--gx) * var(--bf)) 'Noto Sans JP', sans-serif;
  line-height:1.1;
  white-space:nowrap;
  color:var(--ink);
}
.kcx-eq{ font:500 calc(32px * var(--u) * var(--fit) * var(--gx) * var(--bf)) 'Work Sans', sans-serif; color:var(--muted); }
.kcx-iwr{ font-weight:700; color:var(--ac); }
.kcx-iwinfo{
  position:absolute;
  top:calc(12px * var(--u));
  right:calc(12px * var(--u));
  width:calc(24px * var(--u) * var(--fit));
  height:calc(24px * var(--u) * var(--fit));
  color:color-mix(in srgb, var(--ac) 75%, var(--ink-soft));
  opacity:0.8;
}
.kcx-iwinfo svg{ display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.kcx-inword:hover .kcx-iwinfo,
.kcx-inword:focus-visible .kcx-iwinfo{ opacity:1; }
.kcx-rads{ flex:none; display:flex; flex-direction:column; gap:calc(12px * var(--u) * var(--fit)); }
.kcx-tiles{ display:grid; gap:calc(12px * var(--u)); width:100%; }
.kcx-tiles-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.kcx-tiles-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.kcx-tiles-1{ display:flex; align-items:center; gap:calc(16px * var(--u)); }
.kcx-tile{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(6px * var(--u) * var(--pf));
  padding:calc(12px * var(--u) * var(--pf)) calc(8px * var(--u)) calc(10px * var(--u) * var(--pf));
  border:1.5px solid color-mix(in srgb, var(--rad) 45%, transparent);
  border-radius:calc(16px * var(--u));
  background:var(--card);
  color:var(--ink);
  font:600 calc(19px * var(--u) * var(--fit) * var(--pf)) 'Work Sans', sans-serif;
  cursor:pointer;
}
.kcx-tiles-1 .kcx-tile{ flex:none; min-width:calc(130px * var(--u) * var(--pf)); }
.kcx-tile:hover{ border-color:var(--rad); }
.kcx-tile:focus-visible{ outline:2px solid var(--rad); outline-offset:2px; }
.kcx-tc{
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(68px * var(--u) * var(--fit) * var(--pf));
  height:calc(68px * var(--u) * var(--fit) * var(--pf));
  border-radius:50%;
  background:color-mix(in srgb, var(--rad) 18%, var(--card));
  color:var(--ink);
  font:600 calc(46px * var(--u) * var(--fit) * var(--pf)) 'Noto Sans JP', sans-serif;
  line-height:1;
  transition:background-color 0.2s, color 0.2s;
}
.kcx-shape{ width:74%; height:74%; }
.kcx-shape g{ fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.kcx-tn{ max-width:100%; white-space:nowrap; }
.kcx-tile.kcx-on{
  border-color:var(--rad);
  background:color-mix(in srgb, var(--rad) 18%, var(--card));
  box-shadow:0 0 calc(14px * var(--u)) color-mix(in srgb, var(--rad) 35%, transparent);
}
.kcx-tile.kcx-on .kcx-tc{ background:var(--rad); color:var(--card); }
.kcx-rnote{ margin:0; font:500 calc(19px * var(--u) * var(--fit)) 'Work Sans', sans-serif; color:var(--ink-soft); }
.kcx-mixrow{ display:flex; justify-content:flex-end; }
.kcx-mixrow .kcx-pill{
  padding:calc(9px * var(--u)) calc(20px * var(--u)) calc(9px * var(--u)) calc(15px * var(--u));
  font-size:calc(21px * var(--u) * var(--fit));
}
.kcx-mixrow .kcx-pill svg{ width:calc(22px * var(--u) * var(--fit)); height:calc(22px * var(--u) * var(--fit)); }
.wc-desk .wc-listen{
  --audc:var(--info);
  gap:calc(12px * var(--u));
  padding:0 calc(22px * var(--u));
  border:1.5px solid color-mix(in srgb, var(--audc) 50%, transparent);
  background:color-mix(in srgb, var(--audc) 12%, var(--bg));
  color:var(--audc);
  font-size:calc(19px * var(--u));
  font-weight:600;
}
.wc-desk .wc-listen[hidden]{ display:none; }
.wc-desk .wc-listen:hover{ background:color-mix(in srgb, var(--audc) 20%, var(--bg)); }
.wc-desk .wc-listen.playing{ background:var(--audc); color:var(--card); }
.wc-bars{ display:inline-flex; align-items:center; gap:calc(3px * var(--u)); height:calc(24px * var(--u)); }
.wc-bars i{ display:block; width:calc(4px * var(--u)); height:40%; border-radius:2px; background:currentColor; }
.wc-bars i:nth-child(2){ height:75%; }
.wc-bars i:nth-child(3){ height:100%; }
.wc-bars i:nth-child(4){ height:60%; }
.wc-bars i:nth-child(5){ height:35%; }
@media (prefers-reduced-motion:no-preference){
  .wc-listen.playing .wc-bars i{ animation:wc-bar 0.5s ease-in-out infinite alternate; }
  .wc-listen.playing .wc-bars i:nth-child(2){ animation-delay:-0.2s; }
  .wc-listen.playing .wc-bars i:nth-child(3){ animation-delay:-0.4s; }
  .wc-listen.playing .wc-bars i:nth-child(4){ animation-delay:-0.1s; }
  .wc-listen.playing .wc-bars i:nth-child(5){ animation-delay:-0.3s; }
}
@keyframes wc-bar{ from{ height:20%; } to{ height:100%; } }
.wc-kcard .wcx-detail{ --pk:1.45; max-height:calc(100% - 32px * var(--u)); overflow:auto; }
.wc-kcard .wcx-detail[data-kind="k-more"],
.wc-kcard .wcx-detail[data-kind="k-mix"]{ width:min(calc(531px * var(--u) * var(--pk)), calc(100% - 32px * var(--u))); max-width:none; }
.wc-kcard .wcx-detail[data-kind="k-pic"]{ width:min(calc(440px * var(--u) * var(--pk)), calc(100% - 32px * var(--u))); max-width:none; }
.wc-kcard .wcx-detail[data-kind="k-tip"]{ min-width:0; max-width:none; }
.wcx-detail .kcx-lbl{ display:block; margin:0 0 calc(10px * var(--u) * var(--pk)); font-size:calc(13px * var(--u) * var(--pk)); }
.kcx-hk{ letter-spacing:0; text-transform:none; }
.kcx-msec + .kcx-msec{ margin-top:calc(18px * var(--u) * var(--pk)); padding-top:calc(16px * var(--u) * var(--pk)); border-top:1px solid var(--border); }
.kcx-also{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(10px * var(--u) * var(--pk)); }
.kcx-also-w{
  display:inline-flex;
  align-items:center;
  gap:calc(10px * var(--u) * var(--pk));
  padding:calc(4px * var(--u) * var(--pk)) calc(16px * var(--u) * var(--pk));
  border:1px solid var(--border);
  border-radius:calc(12px * var(--u) * var(--pk));
  background:var(--card);
  color:var(--ink);
  font:500 calc(31px * var(--u) * var(--pk)) 'Noto Sans JP', sans-serif;
  cursor:pointer;
}
.kcx-also-w:hover{ border-color:var(--ac); }
.kcx-also-w:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; }
.kcx-also-w small{ font:500 calc(18px * var(--u) * var(--pk)) 'Work Sans', sans-serif; color:var(--ink-soft); }
.kcx-hit{ font-weight:700; color:var(--ac); }
.kcx-au{
  padding:calc(2px * var(--u) * var(--pk)) calc(8px * var(--u) * var(--pk));
  border:1.5px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius:999px;
  font:700 calc(12px * var(--u) * var(--pk)) 'Work Sans', sans-serif;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--muted);
}
.kcx-also-w.kcx-later{ border-style:dashed; border-color:color-mix(in srgb, var(--gold) 55%, transparent); }
.kcx-later .kcx-au,
.kcx-au.kcx-later{ color:var(--gold); border-color:color-mix(in srgb, var(--gold) 60%, transparent); }
.kcx-also-group + .kcx-also-group{ margin-top:calc(12px * var(--u) * var(--pk)); }
.kcx-sublbl{ margin:0 0 calc(8px * var(--u) * var(--pk)); font:600 calc(14px * var(--u) * var(--pk)) 'Work Sans', sans-serif; color:var(--ink-soft); }
.kcx-also-rest[hidden]{ display:none; }
.kcx-also-more{
  padding:calc(6px * var(--u) * var(--pk)) calc(14px * var(--u) * var(--pk));
  border:1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius:999px;
  background:none;
  color:var(--gold);
  font:700 calc(16px * var(--u) * var(--pk)) 'Work Sans', sans-serif;
  cursor:pointer;
}
.kcx-also-more:hover{ background:color-mix(in srgb, var(--gold) 12%, transparent); }
.kcx-also-more:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.kcx-none{ font-size:calc(16px * var(--u) * var(--pk)); color:var(--muted); }
.kcx-rdrow{ display:grid; grid-template-columns:calc(100px * var(--u) * var(--pk)) 1fr; align-items:center; gap:calc(12px * var(--u) * var(--pk)); margin-bottom:calc(12px * var(--u) * var(--pk)); }
.kcx-rdrow .kcx-lbl{ margin:0; }
.kcx-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(8px * var(--u) * var(--pk)); }
.kcx-chip{
  display:inline-flex;
  align-items:baseline;
  padding:calc(2px * var(--u) * var(--pk)) calc(14px * var(--u) * var(--pk));
  border:1.5px solid color-mix(in srgb, var(--ink-soft) 40%, transparent);
  border-radius:999px;
  font:500 calc(24px * var(--u) * var(--pk)) 'Noto Sans JP', sans-serif;
  line-height:1.4;
  white-space:nowrap;
}
.kcx-oku{ font-weight:400; color:var(--muted); }
.kcx-chip-used{ border-color:var(--ac); background:var(--ac); color:var(--card); font-weight:600; }
.kcx-chip-used .kcx-oku{ color:color-mix(in srgb, var(--card) 70%, transparent); }
.kcx-used{ margin-left:calc(7px * var(--u) * var(--pk)); font:700 calc(11px * var(--u) * var(--pk)) 'Work Sans', sans-serif; letter-spacing:0.08em; text-transform:uppercase; }
.kcx-spnote{ margin-left:calc(4px * var(--u) * var(--pk)); font:500 calc(16px * var(--u) * var(--pk)) 'Work Sans', 'Noto Sans JP', sans-serif; color:var(--ink-soft); }
.kcx-tip{ margin:0; font:400 calc(21px * var(--u) * var(--pk)) / 1.55 'Work Sans', 'Noto Sans JP', sans-serif; color:var(--ink); }
.kcx-tipk{ font-weight:600; color:var(--ac); }
.kcx-tipname{ font-weight:600; color:var(--rad); }
.kcx-tiprad{
  margin:0 -0.1em;
  padding:0 0.1em;
  border:0;
  border-radius:0.25em;
  background:none;
  font:inherit;
  font-weight:600;
  text-decoration:underline dotted color-mix(in srgb, var(--rad) 70%, transparent);
  text-underline-offset:0.2em;
  cursor:pointer;
}
.kcx-tiprad:hover{ background:color-mix(in srgb, var(--rad) 16%, transparent); }
.kcx-tiprad:focus-visible{ outline:2px solid var(--rad); outline-offset:1px; }
.kcx-tiprad.kcx-on{ background:var(--rad); color:var(--card); text-decoration:none; }
.kcx-pic{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1;
  border-radius:calc(14px * var(--u) * var(--pk));
  overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, var(--card));
}
.kcx-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.kcx-pic-empty{ visibility:hidden; font-size:calc(16px * var(--u) * var(--pk)); color:var(--muted); }
.kcx-pic-none .kcx-pic-empty{ visibility:inherit; }
.kcx-mini{ display:grid; grid-template-columns:44% 1fr; align-items:center; gap:calc(20px * var(--u) * var(--pk)); }
.wcx-detail:has(> .kcx-mini){ width:min(calc(460px * var(--u) * var(--pk)), calc(100% - 32px * var(--u))); }
.kcx-mini-text{ --mz:1; min-width:0; }
.kcx-mini-text p{ margin:0; }
.kcx-mini-w{ font:500 calc(84px * var(--u) * var(--pk) * var(--mz)) 'Noto Sans JP', sans-serif; line-height:1.15; white-space:nowrap; }
.kcx-mini-f{ margin-top:calc(6px * var(--u) * var(--pk) * var(--mz)) !important; font:500 calc(36px * var(--u) * var(--pk) * var(--mz)) 'Noto Sans JP', sans-serif; color:var(--ac); white-space:nowrap; }
.kcx-mini-e{ margin-top:calc(14px * var(--u) * var(--pk) * var(--mz)) !important; font:600 calc(36px * var(--u) * var(--pk) * var(--mz)) 'Work Sans', sans-serif; line-height:1.25; color:var(--wm); overflow-wrap:anywhere; }
.kcx-backlink{
  display:inline-flex;
  align-items:center;
  gap:calc(6px * var(--u) * var(--pk));
  margin:0 0 calc(10px * var(--u) * var(--pk));
  padding:calc(4px * var(--u) * var(--pk)) calc(10px * var(--u) * var(--pk)) calc(4px * var(--u) * var(--pk)) calc(4px * var(--u) * var(--pk));
  border:0;
  border-radius:999px;
  background:none;
  color:var(--info);
  font:600 calc(15px * var(--u) * var(--pk)) 'Work Sans', 'Noto Sans JP', sans-serif;
  cursor:pointer;
}
.kcx-backlink:hover{ background:color-mix(in srgb, var(--info) 12%, transparent); }
.kcx-backlink:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.kcx-backlink svg{ width:calc(16px * var(--u) * var(--pk)); height:calc(16px * var(--u) * var(--pk)); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kcx-lkrow + .kcx-lkrow{ margin-top:calc(14px * var(--u) * var(--pk)); padding-top:calc(14px * var(--u) * var(--pk)); border-top:1px solid var(--border); }
.kcx-lkcmp{ display:flex; align-items:center; gap:calc(22px * var(--u) * var(--pk)); margin-bottom:calc(12px * var(--u) * var(--pk)); }
.kcx-lkcmp > span{ display:flex; flex-direction:column; align-items:center; font:600 calc(16px * var(--u) * var(--pk)) 'Work Sans', sans-serif; color:var(--ink-soft); }
.kcx-lkcmp b{ font:500 calc(72px * var(--u) * var(--pk)) 'Noto Sans JP', sans-serif; line-height:1.15; color:var(--ink); }
.kcx-lkcmp b.kcx-lk-this{ color:var(--ac); }
.kcx-lkcmp .kcx-vs{ font-size:calc(18px * var(--u) * var(--pk)); color:var(--muted); }
.kcx-lktip{ margin:0; font:400 calc(21px * var(--u) * var(--pk)) / 1.55 'Work Sans', 'Noto Sans JP', sans-serif; }
.kcx-lkw{ margin:calc(8px * var(--u) * var(--pk)) 0 0; font:500 calc(15px * var(--u) * var(--pk)) 'Work Sans', 'Noto Sans JP', sans-serif; color:var(--muted); }
:root:not([data-theme="dark"]) .wc-kcard .wc-panel{
  --sakura:#A8435E;
  --gold:#8E650F;
  --info:#365A8E;
  --teal:#1C6B6B;
  --plum:#64448F;
  --accent:#9E3524;
  --muted:#5F5A48;
  --border:#CDBF9F;
}
:root:not([data-theme="dark"]) .kcx-lbl,
:root:not([data-theme="dark"]) .kcx .wc-label,
:root:not([data-theme="dark"]) .kcx-count small,
:root:not([data-theme="dark"]) .kcx-eq{ color:var(--ink-soft); }
:root:not([data-theme="dark"]) .kcx-iwinfo{ color:var(--ac); opacity:1; }
:root:not([data-theme="dark"]) .kcx-kpanel{ background:color-mix(in srgb, var(--ac) 4%, var(--card)); }
:root:not([data-theme="dark"]) .kcx-inword{ background:color-mix(in srgb, var(--ac) 7%, var(--card)); }
:root:not([data-theme="dark"]) .kcx-inword:hover,
:root:not([data-theme="dark"]) .kcx-inword:focus-visible,
:root:not([data-theme="dark"]) .kcx-inword.wcx-open{ background:color-mix(in srgb, var(--ac) 16%, var(--card)); }
:root:not([data-theme="dark"]) .kcx-wordpanel::before{
  background:color-mix(in srgb, var(--bg) 70%, var(--card));
  box-shadow:0 calc(6px * var(--u)) calc(13px * var(--u)) calc(-5px * var(--u)) rgba(60, 50, 30, 0.25);
}
:root:not([data-theme="dark"]) .kcx-nums text{ fill:var(--ink-soft); }
:root:not([data-theme="dark"]) .kcx-nums text.kcx-cur{ fill:var(--ac); }
:root:not([data-theme="dark"]) .kcx .wcx-ex .wc-sentence-en{ opacity:0.55; }
:root:not([data-theme="dark"]) .kcx .wcx-ex:hover .wc-sentence-en,
:root:not([data-theme="dark"]) .kcx .wcx-ex:has(:focus-visible) .wc-sentence-en{ opacity:1; }
:root:not([data-theme="dark"]) .kcx-tile{ border-color:color-mix(in srgb, var(--rad) 65%, transparent); }
:root:not([data-theme="dark"]) .kcx-tile:hover,
:root:not([data-theme="dark"]) .kcx-tile.kcx-on{ border-color:var(--rad); }
@media (prefers-reduced-motion:reduce){
  .kcx-k,
  .kcx-inword,
  .kcx-tc,
  .kcx-hint,
  .kcx-ink path{ transition:none; }
}
.wc-overlay.wc-phone{ bottom:auto; height:100%; height:100dvh; }
.wc-phone .wc-panel{ --u:1; position:relative; background:var(--bg); }
.wc-phone .wc-bar{
  display:flex;
  align-items:center;
  gap:calc(6px * var(--u));
  height:calc(52px * var(--u));
  padding:0 calc(10px * var(--u)) 0 calc(12px * var(--u));
}
.wc-phone .wc-close{
  flex:none;
  justify-content:center;
  width:calc(40px * var(--u));
  height:calc(40px * var(--u));
  margin:0 calc(-8px * var(--u));
  padding:0;
  border-radius:50%;
  color:var(--accent);
}
.wc-phone .wc-close:active{ background:color-mix(in srgb, var(--accent) 15%, transparent); }
.wc-phone .wc-close svg{ width:calc(24px * var(--u)); height:calc(24px * var(--u)); stroke-width:2.6; }
.wc-phone .wc-close-text{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.wc-phone .wcx-status{ display:flex; align-items:center; min-width:0; margin:0 auto; }
.wc-phone .wcx-unit{
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.05;
  white-space:nowrap;
  font:600 calc(13.5px * var(--u)) 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.wcp-cu{
  display:flex;
  align-items:baseline;
  font-size:calc(10.5px * var(--u));
  letter-spacing:0.1em;
  color:var(--muted);
}
.wcp-cu b{
  margin-left:0.15em;
  font-weight:800;
  font-size:1.3em;
  letter-spacing:0;
  color:color-mix(in srgb, var(--uc, var(--muted)) 70%, var(--ink));
}
:root[data-theme="dark"] .wcp-cu b{ color:var(--uc, var(--muted)); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wcp-cu b{ color:var(--uc, var(--muted)); } }
.wc-phone .wcx-unit em{ margin-left:0; font-size:calc(15px * var(--u)); }
.wc-phone .wcx-new{
  gap:calc(6px * var(--u));
  padding:calc(6px * var(--u)) calc(13px * var(--u)) calc(6px * var(--u)) calc(10px * var(--u));
  font-size:calc(13px * var(--u));
  letter-spacing:0.08em;
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(236, 131, 88, 0.4), 0 0 20px rgba(244, 193, 82, 0.22);
}
.wc-phone .wcx-new svg{ width:calc(15px * var(--u)); height:calc(15px * var(--u)); }
.wc-phone .wcx-rank{
  gap:calc(7px * var(--u));
  min-width:0;
  padding:calc(2px * var(--u)) calc(12px * var(--u)) calc(2px * var(--u)) calc(3px * var(--u));
  box-shadow:none;
  white-space:nowrap;
}
.wc-phone .wcx-rank > b{ width:calc(23px * var(--u)); height:calc(23px * var(--u)); font-size:calc(13px * var(--u)); }
.wcp-rank-col{ display:flex; flex-direction:column; align-items:center; gap:calc(2px * var(--u)); }
.wcp-tally{
  font:600 calc(14px * var(--u)) 'Work Sans', sans-serif;
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:var(--ink-soft);
}
.wcp-tally strong{ color:var(--ink); font-weight:800; }
.wc-phone .wcx-rank-bar{ display:block; width:calc(72px * var(--u)); height:calc(5px * var(--u)); }
.wc-phone .wc-scroll{ padding:0; overflow-x:hidden; background:var(--card); }
.wcp{
  --t:1;
  --tw:1;
  --tm:1;
  --wk:1;
  --mg:1;
  --kk:1;
  --ks:1;
  --P:200px;
  --k:calc(var(--u) * var(--t));
  --bp:calc(12px * var(--u));
  --gap:calc(10px * var(--u));
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  min-width:0;
  padding:var(--bp);
  background:var(--card);
  user-select:none;
  -webkit-user-select:none;
}
.wcp.wcp-measuring{ flex-grow:0; }
.wcp-measuring .wcp-ex{ flex-grow:0; }
.wcp.wc-slide-next{ animation:wc-slide-next 0.22s ease; }
.wcp.wc-slide-prev{ animation:wc-slide-prev 0.22s ease; }
@media (prefers-reduced-motion:reduce){
  .wcp.wc-slide-next,
  .wcp.wc-slide-prev{ animation:none; }
}
.wcp-band{
  margin:calc(-1 * var(--bp)) calc(-1 * var(--bp)) 0;
  padding:calc(10px * var(--u)) var(--bp) calc(9px * var(--u));
  background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 24%, var(--card)), color-mix(in srgb, var(--gold) 7%, var(--card)));
  border-bottom:2px solid color-mix(in srgb, var(--gold) 60%, transparent);
}
.wcp-wline{
  display:flex;
  align-items:center;
  column-gap:calc(10px * var(--u));
  min-width:0;
  margin:0;
  font:inherit;
}
.wcp-wcenter .wcp-wline{ justify-content:center; }
.wcp-word{
  display:block;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:calc(10px * var(--u));
  background:none;
  font-family:'Noto Sans JP', sans-serif;
  font-size:calc(50px * var(--u) * var(--tw) * var(--wk));
  font-weight:500;
  line-height:1.08;
  white-space:nowrap;
  text-align:left;
  color:var(--ink);
}
button.wcp-word{ cursor:pointer; }
button.wcp-word:active,
button.wcp-word.wcx-open{ background:color-mix(in srgb, var(--ink) 8%, transparent); }
button.wcp-word:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.wcp-en{
  margin:0;
  min-width:0;
  font:600 calc(max(18px, 22px * var(--u) * var(--tm)) * var(--mg)) 'Work Sans', sans-serif;
  line-height:1.2;
  color:var(--info);
  text-wrap:balance;
}
.wcp .wc-kanji-row{ display:inline-flex; flex:none; gap:calc(8px * var(--u)); line-height:1; }
.wcp .wc-kanji,
.wcp .wc-kanji-row .wc-kanji:not(:only-child){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 0.22em;
  letter-spacing:0;
  border-radius:calc(11px * var(--u));
  box-shadow:0 0 calc(14px * var(--u)) color-mix(in srgb, var(--teal) 45%, transparent),
             inset 0 0 calc(11px * var(--u)) color-mix(in srgb, var(--teal) 25%, transparent);
}
.wcp .kc{ display:inline-block; line-height:1; }
.wcp-xrow .wc-kanji-row{ font-size:calc(30px * var(--k) * var(--kk)); }
.wcp-xrow .wc-kanji{ height:calc(46px * var(--k) * var(--kk)); min-width:calc(46px * var(--k) * var(--kk)); }
.wcp-wline > .wc-kanji-row{ margin-left:auto; font-size:calc(50px * var(--u) * var(--tw) * 0.6); }
.wcp-wline .wc-kanji{ height:calc(50px * var(--u) * var(--tw)); min-width:0; padding:0 0.3em; }
.wcp-wline > .wcp-k1{ margin-right:0.5em; }
.wcp-more{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:calc(6px * var(--u));
  padding:calc(6px * var(--u)) calc(13px * var(--u)) calc(6px * var(--u)) calc(9px * var(--u));
  border:1.5px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--gold) 12%, var(--card));
  color:var(--gold);
  font:600 calc(13.5px * var(--u)) 'Work Sans', sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.wcp-more:active,
.wcp-more.wcx-open{ background:color-mix(in srgb, var(--gold) 20%, var(--card)); }
.wcp-more:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.wcp-more svg{
  flex:none;
  width:calc(16px * var(--u));
  height:calc(16px * var(--u));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.wcp-first .wcp-main{ display:flex; flex-direction:column; gap:var(--gap); }
.wcp-first .wcp-col{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:calc(18px * var(--u));
  row-gap:calc(10px * var(--u));
}
.wcp-first .wcp-en{ flex:0 1 auto; }
.wcp-first .wcp-xrow{ display:flex; flex:1 0 auto; align-items:center; column-gap:calc(18px * var(--u)); }
.wcp-first .wcp-xrow > .wc-kanji-row{ margin:0 auto; }
.wcp-first .wcp-xrow > .wcp-more:only-child{ margin-left:auto; }
.wcp-mxwrap .wcp-xrow > .wc-kanji-row{ margin-left:0; }
.wcp-beside .wcp-main{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:calc(12px * var(--u));
  align-items:start;
  margin-top:calc(2px * var(--u));
}
.wcp-beside .wcp-col{ min-width:0; }
.wcp-beside .wcp-xrow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(10px * var(--u));
  margin-top:calc(10px * var(--u));
}
.wcp .wc-pic{
  flex:none;
  width:var(--P);
  height:var(--P);
  max-width:none;
  aspect-ratio:auto;
  margin:0 auto;
  border-radius:calc(16px * var(--u));
}
.wcp-beside .wc-pic{ margin:0; }
.wcp .wc-pic-empty{ gap:4px; font-size:calc(11px * var(--u)); text-align:center; }
.wcp .wc-pic-empty svg{ width:calc(36px * var(--u)); height:calc(36px * var(--u)); }
.wcp .wc-pic-img{ -webkit-user-drag:none; }
.wcp-badge{
  position:absolute;
  right:calc(8px * var(--u));
  bottom:calc(8px * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(34px * var(--u));
  height:calc(34px * var(--u));
  border-radius:50%;
  background:rgba(14, 17, 26, 0.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:#fff;
  pointer-events:none;
}
.wcp-badge svg,
.wcp-played svg{
  width:calc(18px * var(--u));
  height:calc(18px * var(--u));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-pic.playing .wcp-badge{ box-shadow:0 0 0 3px rgba(255, 255, 255, 0.55); }
.wcp-played{
  position:absolute;
  left:50%;
  top:50%;
  display:inline-flex;
  align-items:center;
  gap:calc(6px * var(--u));
  padding:calc(7px * var(--u)) calc(14px * var(--u));
  border-radius:999px;
  background:rgba(14, 17, 26, 0.72);
  color:#fff;
  font:700 calc(14px * var(--u)) 'Work Sans', sans-serif;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.wcp-flash .wcp-played{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .wcp-flash .wcp-played{ animation:wcp-played 1.1s ease-out forwards; }
}
@keyframes wcp-played{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(0.85); }
  15%, 65%{ opacity:1; transform:translate(-50%, -50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -50%); }
}
.wcp-ex{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  padding-top:var(--gap);
  border-top:1px solid var(--border);
}
.wcp-ex-body{ margin:auto 0; }
.wcp-ex .wc-label{
  margin:0;
  font:600 calc(11px * var(--u)) 'Work Sans', sans-serif;
  letter-spacing:0.12em;
}
.wcp-ex .wc-sentence{
  margin:calc(2px * var(--u)) 0 0;
  font-size:calc(21px * var(--k) * var(--ks));
  line-height:1.75;
}
.wcp-ex .wc-tok{ display:inline-block; line-height:1.3; margin:0 0.22em 0 0; padding:0 0.04em 1px; }
.wcp-ex .wc-tok.wc-target{ padding:0 0.08em; border-radius:6px 6px 0 0; }
.wcp-ex .wc-nobr{ margin-right:0.22em; max-width:none; white-space:nowrap; }
.wcp-ex .wc-nobr > .wc-tok:not(:last-child){ margin-right:0.04em; }
.wcp-ex .wc-sentence-en{
  margin:calc(3px * var(--u)) 0 0;
  font-size:calc(15px * var(--k));
  line-height:1.4;
  text-wrap:balance;
}
.wc-phone .wc-foot{
  box-sizing:content-box;
  gap:calc(8px * var(--u));
  height:calc(62px * var(--u));
  padding:0 calc(10px * var(--u)) env(safe-area-inset-bottom, 0px);
}
.wc-phone .wc-foot[hidden]{ display:none; }
.wc-phone .wc-nav{ width:calc(46px * var(--u)); height:calc(46px * var(--u)); background:var(--bg); }
.wc-phone .wc-nav[hidden]{ display:none; }
.wc-phone .wc-nav svg{ width:calc(20px * var(--u)); height:calc(20px * var(--u)); }
.wc-phone .wc-kback{
  flex:none;
  height:calc(42px * var(--u));
  min-height:0;
  padding:0 calc(12px * var(--u)) 0 calc(8px * var(--u));
  gap:calc(4px * var(--u));
  border-radius:12px;
  font-size:calc(14.5px * var(--u));
}
.wc-phone .wc-kback[hidden]{ display:none; }
.wc-phone .wc-kback svg{ width:calc(18px * var(--u)); height:calc(18px * var(--u)); }
.wc-phone .wc-hint{ font-size:calc(11px * var(--u)); }
.wc-phone .wc-marks{ gap:calc(8px * var(--u)); margin:0 auto; }
.wc-phone .wc-marks[hidden]{ display:none; }
.wc-phone .wc-mark{
  width:auto;
  min-height:0;
  height:calc(42px * var(--u));
  gap:calc(6px * var(--u));
  padding:0 calc(13px * var(--u));
  border-radius:12px;
  background:var(--bg);
  font-size:calc(14.5px * var(--u));
  white-space:nowrap;
}
.wc-phone .wc-mark[hidden]{ display:none; }
.wc-phone .wc-mark svg{ width:calc(18px * var(--u)); height:calc(18px * var(--u)); }
.wc-phone .wc-mark .wc-mark-text,
.wc-phone .wc-mark .wc-mark-short{ display:none; }
.wc-phone .wc-mark-star .wc-mark-text,
.wc-phone .wc-mark-ignore .wc-mark-short{ display:inline; }
.wc-phone .wc-primary{ height:calc(46px * var(--u)); padding:0 calc(18px * var(--u)); font-size:calc(15px * var(--u)); white-space:nowrap; }
.wc-phone .wc-primary[hidden]{ display:none; }
.wc-phone .wc-panel.wcx-detail-open::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:19;
  background:rgba(8, 10, 16, 0.55);
}
.wc-phone .wcx-detail{
  --pk:1;
  left:calc(14px * var(--u));
  right:calc(14px * var(--u));
  top:50%;
  min-width:0;
  max-width:none;
  max-height:86%;
  overflow-y:auto;
  padding:calc(14px * var(--u)) calc(18px * var(--u)) calc(20px * var(--u));
  border-radius:calc(18px * var(--u));
  background:var(--card);
  transform:translateY(-50%);
}
.wc-phone .wcx-detail:has(> .kcx-mini){ width:auto; }
.wc-phone .wcx-detail-x{
  top:calc(10px * var(--u));
  right:calc(10px * var(--u));
  width:calc(34px * var(--u));
  height:calc(34px * var(--u));
  background:color-mix(in srgb, var(--ink) 9%, transparent);
}
.wc-phone .wcx-detail .wcd-head{
  margin:0 calc(40px * var(--u)) calc(8px * var(--u)) 0;
  padding:calc(9px * var(--u)) 0 calc(7px * var(--u));
  font-size:calc(12px * var(--u));
  line-height:1.5;
}
.wc-phone .wcd-forms{ grid-template-columns:minmax(0, 1fr); gap:0; }
.wc-phone .wcd-forms dt{ margin-top:calc(12px * var(--u)); font:600 calc(13px * var(--u)) 'Work Sans', sans-serif; }
.wc-phone .wcd-forms dt:first-child{ margin-top:0; }
.wc-phone .wcd-forms dd{ margin-top:calc(1px * var(--u)); font-size:calc(26px * var(--u)); line-height:1.3; }
.wc-phone .wcd-tag{ padding:calc(5px * var(--u)) calc(12px * var(--u)); font:600 calc(14.5px * var(--u)) 'Work Sans', 'Noto Sans JP', sans-serif; }
.wc-phone .wcx-detail .wcd-note,
.wc-phone .wcx-detail .wcd-line,
.wc-phone .wcx-detail .wcd-tip{ font-size:calc(16px * var(--u)); }
.wc-phone .wcx-detail .wcd-tip{ margin-top:0; }
.wc-phone .wcx-detail .wcd-ranks{ grid-template-columns:auto minmax(0, 1fr) auto; }
.wcp-more-tip{
  margin-top:calc(14px * var(--u));
  padding-top:calc(12px * var(--u));
  border-top:1px solid var(--border);
}
.wcp-tip-head{
  display:flex;
  align-items:center;
  gap:calc(6px * var(--u));
  margin:0 0 calc(6px * var(--u));
  font:700 calc(12px * var(--u)) 'Work Sans', sans-serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--plum);
}
.wcp-tip-head svg{
  width:calc(16px * var(--u));
  height:calc(16px * var(--u));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-pop.wc-pop-bubble{
  min-width:0;
  max-width:min(300px, calc(100vw - 16px));
  padding:7px 12px 8px;
  border:0;
  border-radius:10px;
  background:rgba(14, 17, 26, 0.94);
  box-shadow:0 6px 18px rgba(0, 0, 0, 0.4);
  color:#EDE9DD;
}
.wc-pop-bubble::after{
  content:"";
  position:absolute;
  left:var(--ax, 50%);
  bottom:-6px;
  margin-left:-6px;
  border:6px solid transparent;
  border-bottom:0;
  border-top-color:rgba(14, 17, 26, 0.94);
}
.wc-pop-bubble.wc-pop-below::after{
  top:-6px;
  bottom:auto;
  border-top:0;
  border-bottom:6px solid rgba(14, 17, 26, 0.94);
}
.wc-pop-bubble .wc-pop-word{ font-size:19px; color:#fff; }
.wc-pop-bubble .wc-pop-reading{ font-size:13px; color:#A9AFC4; }
.wc-pop-bubble .wc-pop-en{ margin-top:2px; font-size:15px; font-weight:600; color:#EDE9DD; }
.wc-pop-bubble .wc-pop-note{ font-size:13px; color:#A9AFC4; }
.wc-pop-bubble .wc-pop-unit{ margin-top:6px; border-color:rgba(255, 255, 255, 0.2); color:#A9AFC4; }
.wc-phone .kcx.kcx-ph{
  --bp:calc(12px * var(--u));
  --gap:calc(10px * var(--u));
  --t:1;
  --k:calc(var(--u) * var(--t));
  --ks:1;
  --fw:1;
  flex:1 0 auto;
  flex-direction:column;
  gap:var(--gap);
  min-height:0;
  padding:var(--bp);
  border:0;
  border-radius:0;
  overflow:visible;
  user-select:none;
  -webkit-user-select:none;
}
.wc-phone .kcx-ph.wc-slide-next{ animation:wc-slide-next 0.22s ease; }
.wc-phone .kcx-ph.wc-slide-prev{ animation:wc-slide-prev 0.22s ease; }
@media (prefers-reduced-motion:reduce){
  .wc-phone .kcx-ph.wc-slide-next,
  .wc-phone .kcx-ph.wc-slide-prev{ animation:none; }
}
.wc-phone .kcx-band{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  margin:calc(-1 * var(--bp)) calc(-1 * var(--bp)) 0;
  padding:calc(8px * var(--u)) var(--bp) calc(10px * var(--u));
  background:color-mix(in srgb, var(--bg) 75%, var(--card));
  box-shadow:0 calc(8px * var(--u)) calc(16px * var(--u)) calc(-5px * var(--u)) rgba(0, 0, 0, 0.55);
  border-bottom:1px solid rgba(255, 255, 255, 0.06);
}
:root:not([data-theme="dark"]) .wc-phone .kcx-band{
  background:color-mix(in srgb, var(--bg) 70%, var(--card));
  box-shadow:0 calc(6px * var(--u)) calc(13px * var(--u)) calc(-5px * var(--u)) rgba(60, 50, 30, 0.25);
  border-bottom-color:rgba(255, 255, 255, 0.7);
}
.wc-phone .kcx-ph .kcx-word{ font-size:calc(56px * var(--u) * var(--fw)); }
.wc-phone .kcx-ph .kcx-k.kcx-sel::after{ min-height:3px; box-shadow:0 0 calc(10px * var(--u)) color-mix(in srgb, var(--ac) 70%, transparent); }
.wc-phone .kcx-ph .kcx-k:hover{ background:none; }
.wc-phone .kcx-ph .kcx-k:active{ background:color-mix(in srgb, var(--ac) 12%, transparent); }
.wc-phone .kcx-mline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(10px * var(--u));
  margin-top:calc(2px * var(--u));
}
.wc-phone .kcx-ph .kcx-mean{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font:600 calc(24px * var(--u)) 'Work Sans', sans-serif;
  line-height:1.15;
  text-align:left;
  color:var(--wm);
  text-wrap:balance;
}
.wc-phone .kcx-mline .kcx-pills{ flex:none; gap:calc(6px * var(--u)); margin:0; }
.wc-phone .kcx-mline .kcx-pill{
  gap:calc(6px * var(--u));
  padding:calc(6px * var(--u)) calc(13px * var(--u)) calc(6px * var(--u)) calc(9px * var(--u));
  font-size:calc(14px * var(--u));
}
.wc-phone .kcx-mline .kcx-pill svg{ width:calc(16px * var(--u)); height:calc(16px * var(--u)); }
.wc-phone .kcx-mline.kcx-mstack{ flex-direction:column; align-items:stretch; gap:calc(8px * var(--u)); }
.wc-phone .kcx-mstack .kcx-mean{ flex:none; width:100%; }
.wc-phone .kcx-mstack .kcx-pills{ align-self:center; }
.wc-phone .kcx-ph .kcx-kpanel{
  flex:none;
  display:block;
  min-height:0;
  overflow:visible;
  padding:calc(12px * var(--u));
  border-radius:calc(16px * var(--u));
}
.wc-phone .kcx-ph .kcx-kbody{ display:flex; flex-direction:column; align-items:stretch; gap:calc(10px * var(--u)); }
.wc-phone .kcx-ph .kcx-draw{ width:auto; gap:calc(10px * var(--u)); }
.wc-phone .kcx-tabrow{ display:flex; align-items:center; gap:calc(8px * var(--u)); min-width:0; }
.wc-phone .kcx-ph .kcx-tabs{ flex:none; width:auto; gap:calc(8px * var(--u) * var(--tz)); }
.wc-phone .kcx-ph .kcx-tab{
  gap:calc(8px * var(--u) * var(--tz));
  padding:calc(3px * var(--u) * var(--tz)) calc(15px * var(--u) * var(--tz)) calc(3px * var(--u) * var(--tz)) calc(9px * var(--u) * var(--tz));
  font-size:calc(14px * var(--u) * var(--tz));
}
.wc-phone .kcx-ph .kcx-tk{ font-size:calc(28px * var(--u) * var(--tz)); line-height:1.25; }
.wc-phone .kcx-ph .kcx-tab.kcx-sel{ box-shadow:0 0 calc(10px * var(--u)) color-mix(in srgb, var(--ac) 35%, transparent); }
.wc-phone .kcx-ph .kcx-compact .kcx-tab:not(.kcx-sel),
.wc-phone .kcx-ph .kcx-bare .kcx-tab{ padding-right:calc(9px * var(--u) * var(--tz)); }
.wc-phone .kcx-mixb{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(36px * var(--u));
  height:calc(36px * var(--u));
  margin-left:auto;
  padding:0;
  border:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  color:var(--accent);
  cursor:pointer;
}
.wc-phone .kcx-mixb:active,
.wc-phone .kcx-mixb.wcx-open{ background:color-mix(in srgb, var(--accent) 22%, var(--card)); }
.wc-phone .kcx-mixb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wc-phone .kcx-mixb svg{
  width:calc(18px * var(--u));
  height:calc(18px * var(--u));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-phone .kcx-split{ display:flex; align-items:center; gap:calc(10px * var(--u)); }
.wc-phone .kcx-ph .kcx-box{ flex:none; border-radius:calc(14px * var(--u)); }
.wc-phone .kcx-ph .kcx-box:hover{ border-color:color-mix(in srgb, var(--ac) 55%, var(--border)); }
.wc-phone .kcx-ph .kcx-hint{
  bottom:calc(7px * var(--u));
  padding:calc(2px * var(--u)) calc(9px * var(--u)) calc(2px * var(--u)) calc(7px * var(--u));
  border:1px solid color-mix(in srgb, var(--ac) 40%, transparent);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  color:var(--ac);
  font-size:calc(11.5px * var(--u));
}
.wc-phone .kcx-ph .kcx-hint{ transition:none; }
.wc-phone .kcx-ph .kcx-box:hover .kcx-hint{ opacity:0; }
.wc-phone .kcx-ph .kcx-is-rest .kcx-box .kcx-hint{ opacity:1; }
.wc-phone .kcx-ph .kcx-facts{
  flex:1;
  height:auto;
  justify-content:center;
  gap:calc(10px * var(--u) * var(--fit));
  padding:0;
}
.wc-phone .kcx-ph .kcx-kmean{ font-size:calc(22px * var(--u) * var(--fit) * var(--mf)); line-height:1.12; }
.wc-phone .kcx-ph .kcx-lbl{ font-size:calc(11px * var(--u)); }
.wc-phone .kcx-ph .kcx-inword{
  max-width:100%;
  gap:calc(1px * var(--u));
  padding:calc(7px * var(--u)) calc(28px * var(--u)) calc(8px * var(--u)) calc(11px * var(--u));
  border-radius:calc(12px * var(--u));
}
.wc-phone .kcx-ph .kcx-iwlbl{ font-size:calc(10.5px * var(--u)); }
.wc-phone .kcx-ph .kcx-big{ gap:calc(6px * var(--u) * var(--bf)); font-size:calc(28px * var(--u) * var(--fit) * var(--bf)); line-height:1.15; }
.wc-phone .kcx-ph .kcx-eq{ font-size:calc(15px * var(--u) * var(--fit) * var(--bf)); }
.wc-phone .kcx-ph .kcx-bwrap .kcx-big{ flex-wrap:wrap; row-gap:0; max-width:100%; white-space:normal; }
.wc-phone .kcx-ph .kcx-bwrap .kcx-iwr{ white-space:nowrap; }
.wc-phone .kcx-ph .kcx-iwinfo{ top:calc(7px * var(--u)); right:calc(7px * var(--u)); width:calc(18px * var(--u)); height:calc(18px * var(--u)); }
.wc-phone .kcx-ph .kcx-ctl{ gap:calc(6px * var(--u)); }
.wc-phone .kcx-ph .kcx-kb{
  min-width:calc(44px * var(--u));
  height:calc(44px * var(--u));
  padding:0 calc(10px * var(--u));
  font-size:calc(14px * var(--u));
}
.wc-phone .kcx-ph .kcx-kb svg{ width:calc(21px * var(--u)); height:calc(21px * var(--u)); }
.wc-phone .kcx-ph .kcx-kb:hover{ border-color:var(--border); color:var(--ink-soft); }
.wc-phone .kcx-ph .kcx-kb:active{ border-color:var(--ac); color:var(--ink); }
.wc-phone .kcx-ph .kcx-count{ gap:calc(2px * var(--u)); width:calc(52px * var(--u)); }
.wc-phone .kcx-ph .kcx-count b{ font-size:calc(20px * var(--u)); }
.wc-phone .kcx-ph .kcx-count small{ font-size:calc(11.5px * var(--u)); }
.wc-phone .kcx-ph .kcx-rads{ gap:calc(6px * var(--u)); }
.wc-phone .kcx-tiles-row{ display:grid; grid-template-columns:repeat(var(--n, 2), minmax(0, 1fr)); gap:calc(8px * var(--u)); }
.wc-phone .kcx-ph .kcx-tiles-1{ gap:calc(12px * var(--u)); }
.wc-phone .kcx-ph .kcx-tile{
  gap:calc(4px * var(--u) * var(--pf));
  padding:calc(8px * var(--u) * var(--pf)) calc(4px * var(--u)) calc(7px * var(--u) * var(--pf));
  border-radius:calc(12px * var(--u));
  font-size:calc(14px * var(--u) * var(--pf));
}
.wc-phone .kcx-ph .kcx-tiles-1 .kcx-tile{ min-width:calc(100px * var(--u) * var(--pf)); padding-left:calc(10px * var(--u)); padding-right:calc(10px * var(--u)); }
.wc-phone .kcx-ph .kcx-tile:hover{ border-color:color-mix(in srgb, var(--rad) 45%, transparent); }
.wc-phone .kcx-ph .kcx-tile.kcx-on{ border-color:var(--rad); }
.wc-phone .kcx-ph .kcx-tc{
  width:calc(46px * var(--u) * var(--pf));
  height:calc(46px * var(--u) * var(--pf));
  font-size:calc(30px * var(--u) * var(--pf));
}
.wc-phone .kcx-ph .kcx-rnote{ font-size:calc(14px * var(--u)); }
:root:not([data-theme="dark"]) .wc-phone .kcx-ph .kcx-tile:hover{ border-color:color-mix(in srgb, var(--rad) 65%, transparent); }
:root:not([data-theme="dark"]) .wc-phone .kcx-ph .kcx-tile.kcx-on{ border-color:var(--rad); }
.wc-phone .wc-listen{
  --audc:var(--info);
  border:1.5px solid color-mix(in srgb, var(--audc) 50%, transparent);
  background:color-mix(in srgb, var(--audc) 12%, var(--bg));
  color:var(--audc);
  font-weight:600;
}
.wc-phone .wc-listen[hidden]{ display:none; }
.wc-phone .wc-listen.playing{ background:var(--audc); color:var(--card); }
.wc-phone .wc-listen .wc-bars{ gap:calc(2.5px * var(--u)); height:calc(18px * var(--u)); }
.wc-phone .wc-listen .wc-bars i{ width:calc(3px * var(--u)); }
.wc-phone .wc-foot-s1 .wc-mark-star .wc-mark-text,
.wc-phone .wc-foot-s2 .wc-mark-ignore .wc-mark-short{ display:none; }
.wc-phone .wc-foot-s3 .wc-kback-more{ display:none; }
.wc-phone.wc-kcard .wcx-detail,
.wc-phone.wc-kcard .wcx-detail[data-kind]{ --pk:0.8; width:auto; min-width:0; max-width:none; max-height:82%; }
.ru-slot[hidden]{ display:none; }
.ru-banner{
  display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:10px 10px 10px 14px;
  background:var(--card); border:1px solid var(--border); border-left:4px solid var(--book, var(--teal));
  border-radius:12px; font-family:'Work Sans', sans-serif; color:var(--ink);
}
.ru-banner-text{ flex:1; min-width:0; margin:0; font-size:15px; line-height:1.45; }
.ru-banner-tag{
  display:inline-block; margin-right:8px; padding:1px 8px; border-radius:999px; vertical-align:1px;
  background:var(--book, var(--teal)); color:var(--card); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.ru-banner-lead{ font-weight:600; }
.ru-banner-open{
  background:none; border:0; padding:0 0 0 4px; font:inherit; font-weight:600; color:var(--book, var(--teal));
  cursor:pointer; white-space:nowrap;
}
.ru-banner-open:hover{ text-decoration:underline; }
.ru-x{
  flex:none; width:34px; height:34px; display:grid; place-items:center; padding:0;
  border:0; border-radius:8px; background:none; color:var(--ink-soft); cursor:pointer;
}
.ru-x:hover{ background:var(--bg); color:var(--ink); }
.ru-x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.ru-back{
  flex:none; display:inline-flex; align-items:center; gap:2px; height:34px; padding:0 10px 0 4px; margin-left:-8px;
  border:0; border-radius:8px; background:none; color:var(--ink-soft); cursor:pointer;
  font:600 14px 'Work Sans', sans-serif;
}
.ru-back[hidden]{ display:none; }
.ru-back:hover{ background:var(--bg); color:var(--ink); }
.ru-back svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ru-note{
  margin:0 0 12px; padding:10px 14px; border:1px dashed var(--border); border-radius:12px; background:var(--card);
  font-family:'Work Sans', sans-serif; font-size:14px; line-height:1.45; color:var(--ink-soft);
}
.ru-note button{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--info); text-decoration:underline; cursor:pointer; }
@media (max-width:699px){
  .ru-banner{ align-items:flex-start; }
  .ru-banner-text{ font-size:14px; }
  .ru-banner-open{ display:block; padding:4px 0 0; }
}
html.ru-lock{ overflow:hidden; }
.ru-overlay{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,0.5); font-family:'Work Sans', sans-serif;
}
.ru-overlay[hidden]{ display:none; }
.ru-card{
  position:relative; display:flex; flex-direction:column; width:100%; max-width:760px;
  max-height:calc(100dvh / var(--page-zoom, 1) - 48px); overflow:hidden;
  background:var(--card); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.ru-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--aurora-bar); }
.ru-head{ display:flex; align-items:center; gap:10px; padding:18px 14px 12px 22px; border-bottom:1px solid var(--border); }
.ru-title{ flex:1; margin:0; font-size:20px; font-weight:700; }
.ru-jp{ display:inline-block; margin-left:8px; font-family:'Noto Sans JP', sans-serif; font-size:13px; font-weight:500; color:var(--ink-soft); }
.ru-notes .ru-head{ padding-top:20px; padding-bottom:14px; }
.ru-notes .ru-title{ font-size:24px; }
.ru-notes .ru-jp{ margin-left:10px; font-size:15px; }
.ru-body{ overflow-y:auto; overscroll-behavior:contain; padding:6px 22px 18px; }
.ru-rel{ padding:20px 0; border-bottom:1px solid var(--border); }
.ru-rel:last-child{ border-bottom:0; }
.ru-date{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:22px; font-weight:700; }
.ru-new{ padding:2px 9px; border-radius:999px; background:var(--gold-soft); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.06em; }
.ru-intro{
  display:inline-block; margin:0 0 6px; padding:3px 12px; border-radius:999px;
  background:var(--gold-soft); color:color-mix(in srgb, var(--gold) 70%, var(--ink)); font-size:18px; font-weight:700;
}
.ru-sec-f{ --ru-c:var(--success); --ru-soft:var(--success-soft); }
.ru-sec-g1{ --ru-c:var(--plum); --ru-soft:var(--plum-soft); }
.ru-sec-g2{ --ru-c:var(--rust); --ru-soft:var(--rust-soft); }
.ru-sec-g3{ --ru-c:var(--indigo); --ru-soft:var(--indigo-soft); }
.ru-sec-c{ --ru-c:var(--info); --ru-soft:var(--info-soft); }
.ru-sec-b{ --ru-c:var(--gold); --ru-soft:var(--gold-soft); }
.ru-group{
  --ru-ink:color-mix(in srgb, var(--ru-c) 72%, var(--ink));
  margin:12px 0; padding:2px 14px 12px; border-radius:14px;
  background:color-mix(in srgb, var(--ru-c) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--ru-c) 24%, var(--border));
}
.ru-group.is-shut{ padding-bottom:2px; }
.ru-sec{
  display:flex; align-items:center; gap:7px; margin:12px 0 10px; color:var(--ru-ink);
  font-size:15px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.ru-group.is-shut .ru-sec{ margin-bottom:12px; }
.ru-ico{ flex:none; width:18px; height:18px; fill:none; stroke:var(--ru-c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ru-sec-btn, .ru-feat-btn{
  display:flex; align-items:center; gap:7px; width:100%; margin:0; padding:0; border:0; border-radius:6px; background:none;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; text-align:left; cursor:pointer;
}
.ru-feat-btn{ gap:10px; }
.ru-sec-btn:focus-visible, .ru-feat-btn:focus-visible{ outline:2px solid var(--info); outline-offset:2px; }
.ru-count{
  padding:0 7px; border-radius:999px; background:var(--ru-soft); color:var(--ru-ink);
  font-size:.92em; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.ru-chev{ flex:none; width:16px; height:16px; margin-left:auto; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ru-feat-btn .ru-chev{ color:var(--ink-soft); }
[aria-expanded="true"] > .ru-chev{ transform:rotate(180deg); }
.ru-feat{
  margin:0 0 8px; padding:4px 12px; border-radius:10px; background:var(--card);
  border:1px solid color-mix(in srgb, var(--ru-c) 16%, var(--border));
}
.ru-feat:last-child{ margin-bottom:0; }
.ru-feat-title{ margin:0; padding:6px 0; font-size:18px; font-weight:700; }
.ru-feat-inner{ padding:0 0 8px; }
.ru-feat p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-soft); }
.ru-feat p.ru-fun{ margin:0 0 6px; font-style:italic; font-weight:500; font-size:16.5px; line-height:1.5; color:var(--ru-ink); }
.ru-fun .ru-ja{ font-style:normal; }
.ru-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-size:14.5px; }
.ru-try{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px;
  background:var(--ru-soft); color:var(--ru-ink); border:1px solid color-mix(in srgb, var(--ru-c) 35%, transparent);
  font-weight:600; text-decoration:none;
}
.ru-try:hover{ border-color:var(--ru-c); }
.ru-pic-btn{
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card);
  font:inherit; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.ru-pic-btn:hover{ color:var(--ink); }
.ru-pic-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.ru-pic{ display:block; max-width:100%; max-height:320px; margin-top:8px; border:1px solid var(--border); border-radius:10px; }
.ru-list{ margin:0; padding-left:20px; font-size:15px; line-height:1.55; color:var(--ink-soft); }
.ru-list li{ margin:2px 0; }
.ru-list li::marker{ color:var(--ru-c); }
.ru-points{ margin-top:4px; }
.ru-ja{ font-family:'Noto Sans JP', sans-serif; }
.ru-sum{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
.ru-sum b{ font-weight:600; color:var(--ink); }
.ru-more{ margin-top:8px; padding:0; border:0; background:none; font:inherit; font-size:14.5px; font-weight:600; color:var(--info); cursor:pointer; }
.ru-older{ margin:18px 0 4px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.ru-month{ margin:8px 0; border:1px solid var(--border); border-radius:12px; }
.ru-month-btn{
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border:0; background:none;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer;
}
.ru-month-btn b{ font-size:15px; }
.ru-month-btn span{ flex:1; font-size:14px; color:var(--ink-soft); }
.ru-month-btn i{ font-style:normal; color:var(--ink-soft); }
.ru-month-btn[aria-expanded="true"] i{ transform:rotate(180deg); }
.ru-month-body{ padding:0 14px; border-top:1px solid var(--border); }
@media (prefers-reduced-motion:no-preference){
  .ru-month-btn i, .ru-chev{ transition:transform .15s; }
}
@media (max-width:699px){
  .ru-overlay{ padding:10px; }
  .ru-card{ max-height:calc(100dvh / var(--page-zoom, 1) - 20px); }
  .ru-head{ padding:16px 10px 10px 16px; }
  .ru-body{ padding:4px 16px 14px; }
  .ru-notes .ru-title{ font-size:22px; }
  .ru-date{ font-size:20px; }
  .ru-sec{ font-size:14px; }
  .ru-feat-title{ font-size:17px; }
}
.ic-card{ max-width:560px; }
.ic-body{ padding:16px 22px 22px; }
.ic-intro{ margin:0 0 14px; color:var(--ink-soft); font-size:15px; line-height:1.45; }
.ic-one{
  display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--success) 12%, var(--card)); border:1px solid color-mix(in srgb, var(--success) 40%, transparent);
  font-size:14px; color:var(--ink-soft);
}
.ic-one-t{ flex:1; }
.ic-one-t b{ display:block; color:var(--ink); font-size:15px; }
.ic-one-btn{
  flex:none; border:0; border-radius:999px; padding:9px 18px; cursor:pointer;
  background:var(--success); color:var(--card); font:600 15px 'Work Sans', sans-serif;
}
.ic-done{ color:var(--ink); font-weight:600; }
.ic-dev{ display:flex; gap:4px; margin:0 0 12px; padding:4px; background:var(--bg); border:1px solid var(--border); border-radius:11px; }
.ic-dev button{
  flex:1; padding:8px 6px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  color:var(--ink-soft); font:600 14px 'Work Sans', sans-serif;
}
.ic-dev button[aria-selected="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ic-br{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ic-br button{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border); border-radius:999px;
  background:transparent; cursor:pointer; color:var(--ink-soft); font:600 14px 'Work Sans', sans-serif;
}
.ic-br button[aria-pressed="true"]{ border-color:var(--info); color:var(--ink); background:color-mix(in srgb, var(--info) 12%, transparent); }
.ic-dev button:focus-visible, .ic-br button:focus-visible, .ic-one-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ic-you{ padding:2px 6px; border-radius:6px; background:var(--gold-soft); color:var(--gold); font-size:10.5px; font-weight:700; letter-spacing:.06em; }
.ic-steps{ list-style:none; counter-reset:ic; margin:0; padding:0; }
.ic-steps li{ counter-increment:ic; position:relative; padding:4px 0 12px 40px; font-size:15px; line-height:1.45; }
.ic-steps li::before{
  content:counter(ic); position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--border); font-size:14px; font-weight:700;
}
.ic-k{ display:inline-flex; align-items:center; justify-content:center; min-width:1.4em; padding:0 5px; border:1px solid var(--border); border-radius:6px; font-weight:700; vertical-align:baseline; }
.ic-k svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-note{ margin:6px 0 0; padding:10px 12px; border-radius:12px; background:var(--bg); color:var(--ink-soft); font-size:13.5px; line-height:1.45; }
@media (max-width:699px){
  .ic-body{ padding:14px 16px 16px; }
}
@media (min-width:1800px) and (min-height:810px){  html[data-zoom="site"]{ --page-zoom:1.15; } }
@media (min-width:1920px) and (min-height:880px){  html[data-zoom="site"]{ --page-zoom:1.25; } }
@media (min-width:2200px) and (min-height:980px){  html[data-zoom="site"]{ --page-zoom:1.4; } }
@media (min-width:2400px) and (min-height:1080px){ html[data-zoom="site"]{ --page-zoom:1.55; } }
@media (min-width:2560px) and (min-height:1150px){ html[data-zoom="site"]{ --page-zoom:1.65; } }
@media (min-width:3000px) and (min-height:1310px){ html[data-zoom="site"]{ --page-zoom:1.9; } }
@media (min-width:3440px) and (min-height:1510px){ html[data-zoom="site"]{ --page-zoom:2.2; } }
@media (min-width:3840px) and (min-height:1650px){ html[data-zoom="site"]{ --page-zoom:2.4; } }
@media (min-width:1800px) and (min-height:930px){  html[data-zoom="tall"]{ --page-zoom:1.15; } }
@media (min-width:1920px) and (min-height:1005px){ html[data-zoom="tall"]{ --page-zoom:1.25; } }
@media (min-width:2200px) and (min-height:1120px){ html[data-zoom="tall"]{ --page-zoom:1.4; } }
@media (min-width:2400px) and (min-height:1235px){ html[data-zoom="tall"]{ --page-zoom:1.55; } }
@media (min-width:2560px) and (min-height:1315px){ html[data-zoom="tall"]{ --page-zoom:1.65; } }
@media (min-width:3000px) and (min-height:1505px){ html[data-zoom="tall"]{ --page-zoom:1.9; } }
@media (min-width:3440px) and (min-height:1735px){ html[data-zoom="tall"]{ --page-zoom:2.2; } }
@media (min-width:3840px) and (min-height:1890px){ html[data-zoom="tall"]{ --page-zoom:2.4; } }
@media (min-width:1800px) and (min-height:970px){  html[data-zoom="tallest"]{ --page-zoom:1.15; } }
@media (min-width:1920px) and (min-height:1050px){ html[data-zoom="tallest"]{ --page-zoom:1.25; } }
@media (min-width:2200px) and (min-height:1170px){ html[data-zoom="tallest"]{ --page-zoom:1.4; } }
@media (min-width:2400px) and (min-height:1290px){ html[data-zoom="tallest"]{ --page-zoom:1.55; } }
@media (min-width:2560px) and (min-height:1370px){ html[data-zoom="tallest"]{ --page-zoom:1.65; } }
@media (min-width:3000px) and (min-height:1570px){ html[data-zoom="tallest"]{ --page-zoom:1.9; } }
@media (min-width:3440px) and (min-height:1815px){ html[data-zoom="tallest"]{ --page-zoom:2.2; } }
@media (min-width:3840px) and (min-height:1975px){ html[data-zoom="tallest"]{ --page-zoom:2.4; } }
@media (min-width:1800px) and (min-height:810px){
  html[data-zoom="site"]{ zoom:var(--page-zoom); }
  html[data-zoom="site"] .as-card{ max-height:calc(100vh / var(--page-zoom) - 40px); }
}
@media (min-width:1800px) and (min-height:930px){
  html[data-zoom="tall"]{ zoom:var(--page-zoom); }
  html[data-zoom="tall"] .as-card{ max-height:calc(100vh / var(--page-zoom) - 40px); }
}
@media (min-width:1800px) and (min-height:970px){
  html[data-zoom="tallest"]{ zoom:var(--page-zoom); }
  html[data-zoom="tallest"] .as-card{ max-height:calc(100vh / var(--page-zoom) - 40px); }
}