.katakana-odai {
  --ko-ink: #213c38;
  --ko-green: #236759;
  --ko-border: #cad9d1;
  box-sizing: border-box;
  max-width: 780px;
  margin: 24px auto;
  padding: clamp(18px, 4vw, 36px);
  border: 1px solid var(--ko-border);
  border-radius: 24px;
  background: #f6f8f2;
  color: var(--ko-ink);
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
}
.katakana-odai *, .katakana-odai *::before, .katakana-odai *::after { box-sizing: border-box; }
.katakana-odai [hidden] { display: none !important; }
.katakana-odai p { margin: 0; padding: 0; }
.katakana-odai .ko-header { position: relative; padding-bottom: 24px; }
.katakana-odai .ko-eyebrow { color: var(--ko-green); font-size: .8em; font-weight: 700; letter-spacing: .08em; }
.katakana-odai .ko-header h2 { margin: 8px 0 12px; padding: 0; border: 0; background: none; color: var(--ko-ink); font-size: clamp(23px, 4vw, 32px); line-height: 1.4; }
.katakana-odai .ko-header h2::before, .katakana-odai .ko-header h2::after { content: none; }
.katakana-odai .ko-badge { display: inline-block; margin-top: 14px; padding: 3px 12px; border-radius: 30px; background: #e4edcf; font-size: .8em; font-weight: 700; }
.katakana-odai .ko-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.katakana-odai label { display: block; min-width: 0; font-size: .85em; font-weight: 700; }
.katakana-odai select { display: block; width: 100%; min-height: 46px; margin: 5px 0 0; padding: 8px 28px 8px 12px; border: 1px solid var(--ko-border); border-radius: 9px; background-color: #fff; color: var(--ko-ink); font: inherit; }
.katakana-odai .ko-filter-note { margin: 10px 0 20px; color: #53645c; font-size: .75em; }
.katakana-odai .ko-card { padding: 24px 18px; border: 1px solid #e2d9bb; border-radius: 18px; background: #fff9e8; text-align: center; }
.katakana-odai .ko-word { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 16px 0; font-size: clamp(27px, 5.5vw, 46px); font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.katakana-odai .ko-concealed { color: #927331; font-size: 64px; }
.katakana-odai .ko-hint { min-height: 42px; margin-bottom: 14px; color: #625f4d; font-size: .8em; }
.katakana-odai button { min-height: 46px; margin: 0; padding: 10px 18px; border: 1px solid var(--ko-green); border-radius: 10px; background: #fff; color: var(--ko-green); font: inherit; font-weight: 700; line-height: 1.4; cursor: pointer; box-shadow: none; }
.katakana-odai button:hover:not(:disabled) { background: #e4eee5; }
.katakana-odai button.ko-primary { width: min(100%, 300px); background: var(--ko-green); color: #fff; }
.katakana-odai button.ko-primary:hover { background: #184c41; }
.katakana-odai button:disabled { border-color: #c4cdc7; color: #6e7b72; background: #edf0eb; cursor: default; }
.katakana-odai :is(button, select, summary):focus-visible { outline: 3px solid #ad641a; outline-offset: 4px; }
.katakana-odai .ko-next-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 24px; }
.katakana-odai .ko-next-row span { color: #53645c; font-size: .8em; }
.katakana-odai .ko-timer { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid var(--ko-border); border-bottom: 1px solid var(--ko-border); }
.katakana-odai .ko-timer output { text-align: center; color: var(--ko-ink); font: 700 32px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.katakana-odai .ko-timer-buttons { display: flex; gap: 8px; }
.katakana-odai .ko-timer [role="status"] { grid-column: 1 / -1; color: #934413; font-size: .85em; font-weight: 700; }
.katakana-odai .ko-timer [role="status"]:empty { display: none; }
.katakana-odai.ko-time-up .ko-timer output { color: #934413; }
.katakana-odai .ko-help { margin-top: 20px; font-size: .85em; }
.katakana-odai .ko-help summary { padding: 8px 0; cursor: pointer; font-weight: 700; }
.katakana-odai .ko-help ol { margin: 12px 0; padding-left: 1.6em; }
.katakana-odai .ko-help p { margin: 12px 0 0; }
.katakana-odai .ko-sources { margin-top: 20px; color: #53645c; font-size: .75em; overflow-wrap: anywhere; }
.katakana-odai .ko-sources a { color: var(--ko-green); text-decoration: underline; }
@media (max-width: 540px) {
  .katakana-odai .ko-timer { grid-template-columns: 1fr 1fr; }
  .katakana-odai .ko-timer-buttons { grid-column: 1 / -1; }
  .katakana-odai .ko-timer-buttons button { flex: 1; }
  .katakana-odai .ko-next-row { align-items: stretch; flex-direction: column; }
  .katakana-odai .ko-next-row span { text-align: center; }
}