:root{
  --paper:#ECEFF4;
  --paper-2:#F4F6FA;
  --card:#FFFFFF;
  --ink:#161F33;
  --indigo:#2F477A;
  --indigo-soft:#5E76A8;
  --persimmon:#BC4E2E;
  --persimmon-tint:#F4E1D9;
  --line:#CAD3E0;
  --line-soft:#DEE4EE;
  --muted:#616B7B;
  --display:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --ui:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:44px 24px 80px;}

header h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,5vw,44px);
  margin:0;
  letter-spacing:-0.01em;
}
header .jp{
  display:block;
  font-size:clamp(16px,2.6vw,22px);
  color:var(--indigo);
  font-weight:600;
  margin-top:8px;
  letter-spacing:0.05em;
}
header p{max-width:600px;color:var(--muted);font-size:16px;margin:18px 0 0;}
header p b{color:var(--ink);}

.label{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--indigo-soft);
  margin:34px 0 12px;
}

/* verb picker */
.verbs{display:flex;gap:8px;flex-wrap:wrap;}
.verb-pill{
  font-family:var(--ui);
  border:1px solid var(--line);
  background:var(--card);
  border-radius:100px;
  padding:9px 15px;
  cursor:pointer;
  font-size:15px;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  transition:border-color .15s,background .15s;
}
.verb-pill .kj{font-family:var(--display);font-weight:600;font-size:17px;}
.verb-pill .gl{font-size:12px;color:var(--muted);}
.verb-pill:hover{border-color:var(--indigo-soft);}
.verb-pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);}
.verb-pill[aria-pressed="true"] .kj,
.verb-pill[aria-pressed="true"] .gl{color:#fff;}
.verb-pill:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;}

/* THE STAGE */
.stage{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:30px 34px 34px;
  margin-top:14px;
  box-shadow:0 20px 40px -30px rgba(22,31,51,.5);
}
.stage .eyebrow{
  font-size:13px;
  letter-spacing:0.05em;
  color:var(--persimmon);
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:4px;
}
.stage .func{font-size:13px;color:var(--muted);margin-bottom:20px;}
.sentence{
  font-family:var(--display);
  font-size:clamp(26px,4.6vw,40px);
  line-height:1.35;
  font-weight:600;
  letter-spacing:0.02em;
}
.verb{
  color:var(--persimmon);
  border-radius:5px;
  padding:0 2px;
}
@keyframes pop{from{background:var(--persimmon-tint);}to{background:transparent;}}
.verb.flash{animation:pop .55s ease;}
@media (prefers-reduced-motion:reduce){.verb.flash{animation:none;}}

.reading{font-size:14px;color:var(--muted);margin-top:10px;}
.reading b{color:var(--indigo);font-weight:700;font-family:var(--display);}

.stage-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.toggles{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end;}
.romaji-line{
  font-size:15px;
  color:var(--indigo);
  margin-top:8px;
  letter-spacing:0.02em;
}
.fg-toggle{
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  border:1px solid var(--indigo);
  background:transparent;
  color:var(--indigo);
  border-radius:100px;
  padding:6px 14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  transition:background .15s,color .15s;
}
.fg-toggle[aria-pressed="true"]{background:var(--indigo);color:#fff;}
.fg-toggle:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;}
.fg-toggle .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.speaker-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.voice-select{
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  border:1px solid var(--indigo);
  color:var(--indigo);
  background:transparent;
  border-radius:100px;
  padding:6px 12px;
  cursor:pointer;
  max-width:170px;
}
.voice-select:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;}
.voice-check[hidden]{display:none;}
.voice-check{
  font-size:12px;
  color:var(--muted);
  display:inline-flex;
  gap:6px;
  align-items:center;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:5px;
  padding:5px 10px;
}
.voice-check button{
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  border:1px solid var(--indigo);
  background:transparent;
  color:var(--indigo);
  border-radius:100px;
  padding:2px 10px;
  cursor:pointer;
}
.voice-check button:hover{background:var(--indigo);color:#fff;}
.sentence ruby{ruby-position:over;}
.sentence rt{
  font-family:var(--ui);
  font-size:0.4em;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
  user-select:none;
  margin-bottom:2px;
}

.translation{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:clamp(18px,3vw,24px);
  font-weight:500;
}
.ending-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:5px;
  padding:8px 14px;
  font-size:14px;
  color:var(--muted);
}
.ending-chip b{color:var(--ink);font-family:var(--display);font-size:16px;font-weight:600;}

/* voice note */
.voice-note{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}
.voice-note summary{
  cursor:pointer;
  font-weight:600;
  color:var(--indigo-soft);
}
.voice-note p{margin:10px 0 0;}
.voice-note ul{margin:8px 0 0;padding-left:18px;}
.voice-note li{margin-bottom:5px;}
.voice-note b{color:var(--ink);}

/* controls */
.controls{margin-top:30px;}
.seg{
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:100px;
  overflow:hidden;
  background:var(--card);
}
.seg .romaji{
  font-size:11px;
  font-weight:500;
  opacity:.65;
  margin-left:3px;
}
.seg button{
  font-family:var(--ui);
  border:0;
  background:transparent;
  padding:10px 22px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  color:var(--ink);
  transition:background .15s,color .15s;
}
.seg button[aria-pressed="true"]{background:var(--indigo);color:#fff;}
.seg button:focus-visible{outline:2px solid var(--indigo);outline-offset:-2px;}

.glabel{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  margin:22px 0 8px;
}
.forms{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px;
}
.form-btn{
  font-family:var(--ui);
  border:1px solid var(--line);
  background:var(--card);
  border-radius:6px;
  padding:12px 10px;
  cursor:pointer;
  text-align:center;
  transition:border-color .15s,transform .12s;
}
.form-btn .en{display:block;font-size:15px;font-weight:600;}
.form-btn .ja{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-family:var(--display);}
.form-btn:hover{border-color:var(--indigo-soft);}
.form-btn[aria-pressed="true"]{
  border-color:var(--persimmon);
  background:var(--persimmon-tint);
}
.form-btn[aria-pressed="true"] .ja{color:var(--persimmon);}
.form-btn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;}

.note{margin-top:14px;font-size:13px;color:var(--muted);}

footer{
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}
footer b{color:var(--ink);}

@media (max-width:560px){
  .stage{
    position:sticky;
    z-index:20;
    top:max(8px,env(safe-area-inset-top));
    padding:24px 20px 26px;
  }
  .stage-top{flex-direction:column;gap:12px;}
  .toggles{width:100%;justify-content:flex-start;}
  .seg button{padding:10px 16px;}
  .speaker-row{align-items:stretch;}
  #pronSeg{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    width:100%;
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }
  #pronSeg button{
    grid-column:span 2;
    min-width:0;
    padding:9px 6px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--card);
    line-height:1.25;
    white-space:nowrap;
  }
  #pronSeg button:nth-last-child(-n+2){grid-column:span 3;}
  #pronSeg button[aria-pressed="true"]{background:var(--indigo);}
  #pronSeg .romaji{display:block;margin:3px 0 0;line-height:1.1;}
  .voice-select{width:100%;max-width:none;}
  .voice-check{width:100%;}
}