:root {
  --writing-ink: #18201f;
  --writing-paper: #fffdf8;
  --writing-line: #d8ddd9;
  --writing-accent: #bf3f2f;
  --writing-blue: #2f78aa;
}

.writing-practice-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
  color: var(--writing-ink);
}

.writing-practice-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid #dfe6e2;
  border-radius: 24px;
  background: linear-gradient(135deg, #eef5f1, #fff8ed);
}

.writing-practice-hero h1 { margin: 7px 0 10px; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; }
.writing-practice-hero p { max-width: 720px; margin: 0; line-height: 1.75; }
.writing-language-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.writing-language-switch button,
.writing-category-tabs button,
.writing-mode-tabs button,
.writing-character-grid button,
.writing-actions button,
.writing-clear-button {
  min-height: 44px;
  border: 1px solid #cbd5d0;
  border-radius: 12px;
  background: #fff;
  color: var(--writing-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.writing-language-switch button { min-width: 48px; padding: 9px 12px; }
.writing-language-switch button[aria-pressed="true"] { border-color: var(--writing-accent); color: var(--writing-accent); }

.writing-category-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.writing-category-tabs button { display: grid; gap: 4px; padding: 16px; text-align: left; }
.writing-category-tabs button span { color: #68726e; font-size: .82rem; }
.writing-category-tabs button[aria-pressed="true"] { border: 2px solid var(--writing-accent); background: #fff2ed; }

.writing-practice-shell { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px; }
.writing-picker,
.writing-workspace { border: 1px solid #dfe6e2; border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(24, 32, 31, .07); }
.writing-picker { padding: 20px; }
.writing-picker h2 { margin: 0 0 14px; font-size: 1.1rem; }
.writing-character-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.writing-character-grid { max-height: 60vh; overflow-y: auto; padding: 2px; scrollbar-gutter: stable; }
.writing-character-gap { min-width: 0; }
.writing-character-grid.is-yoon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.writing-group-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.writing-group-tabs[hidden] { display: none; }
.writing-group-tabs button { border: 1px solid #d8ddd9; border-radius: 8px; padding: 8px; background: white; color: #334b5a; cursor: pointer; min-height: 44px; }
.writing-group-tabs button[aria-pressed="true"] { border-color: var(--writing-blue); background: #eef7fc; font-weight: 700; }
.writing-group-tabs small { color: #64706b; }
.writing-illustration[hidden] { display: none; }
.writing-card-header:has(.writing-illustration[hidden]) { grid-template-columns: minmax(0, 1fr); }
.writing-character-grid button { display: grid; place-items: center; padding: 5px; }
.writing-character-grid button > span { font-size: 1.45rem; }
.writing-character-grid button small { min-height: 13px; color: #c08a16; font-size: .62rem; letter-spacing: -1px; }
.writing-character-grid button[aria-pressed="true"] { border: 2px solid var(--writing-blue); background: #eef7fc; }
.writing-privacy { margin: 18px 0 12px; color: #64706b; font-size: .82rem; line-height: 1.6; }
.writing-clear-button { width: 100%; padding: 10px; color: #7c2f25; }

.writing-workspace { padding: clamp(18px, 3vw, 32px); }
.writing-card-header { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; }
.writing-illustration { display: grid; place-items: center; min-height: 140px; border-radius: 18px; background: #f1f7f9; }
.writing-illustration svg { width: 130px; height: 130px; }
.writing-character-display { display: flex; gap: 18px; align-items: center; }
.writing-character-display > strong { font-size: clamp(4rem, 10vw, 7rem); line-height: 1; }
.writing-character-display h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.writing-character-display p { margin: 4px 0; color: #53615c; }
.writing-character-display [data-writing-reading] { color: #334b5a; font-weight: 700; }

.writing-mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 14px; }
.writing-mode-tabs button { padding: 10px; }
.writing-mode-tabs button[aria-pressed="true"] { border-color: var(--writing-accent); background: var(--writing-accent); color: #fff; }

.writing-board-wrap { display: grid; place-items: center; }
.writing-board {
  width: min(100%, 620px);
  aspect-ratio: 1;
  border: 1px solid #d8ddd9;
  border-radius: 18px;
  background: var(--writing-paper);
  touch-action: none;
  user-select: none;
}
.writing-grid { fill: none; stroke: #e4e8e5; stroke-width: 8; stroke-dasharray: 20 20; }
.writing-board.is-pair { aspect-ratio: 2; }
.writing-board.is-pair .writing-grid { stroke-width: 4; }
.writing-board.is-pair .writing-user-stroke { stroke-width: 21; }
.writing-board.is-pair .writing-start-dot { stroke-width: 4; }
.writing-guide { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.8; }
.writing-guide--waiting { stroke: #e1e6e3; }
.writing-guide--current { stroke: #cadde9; }
.writing-guide--done { stroke: #d7e7d5; }
.writing-user-stroke { fill: none; stroke: #245f89; stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; }
.writing-user-stroke--accepted { stroke: #397a55; }
.writing-start-dot { fill: var(--writing-blue); stroke: #fff; stroke-width: 8; }

.writing-board.is-demonstrating .writing-guide {
  stroke: var(--writing-blue);
  /* A gap longer than the normalized path prevents the next dash's round cap
     from appearing at the far end before that stroke has been drawn. */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: writing-stroke-demo .75s ease forwards;
}
@keyframes writing-stroke-demo {
  from { opacity: 1; stroke-dashoffset: 1; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

.writing-feedback { min-height: 52px; margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: #eef5f1; line-height: 1.55; font-weight: 750; }
.writing-technique-tip { margin: 10px 0 0; color: #53615c; font-size: .93rem; line-height: 1.7; }
.writing-result-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
.writing-stars { color: #c58a08; font-size: 1.65rem; letter-spacing: 3px; }
.writing-best { color: #5d6864; font-size: .9rem; }
.writing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.writing-actions button { padding: 10px 16px; }
.writing-actions button:first-child,
.writing-actions button[data-writing-next] { border-color: var(--writing-accent); background: var(--writing-accent); color: #fff; }
.writing-actions button:disabled { cursor: not-allowed; opacity: .5; }
.page-writing-practice button:focus-visible,
.page-writing-practice a:focus-visible { outline: 3px solid #a83225; outline-offset: 3px; }

@media (max-width: 760px) {
  .writing-practice-page { width: min(100% - 20px, 1180px); padding-top: 12px; }
  .writing-practice-hero { grid-template-columns: 1fr; padding: 24px 18px; }
  .writing-category-tabs { grid-template-columns: 1fr; gap: 8px; }
  .writing-category-tabs button { grid-template-columns: 1fr auto; align-items: center; }
  .writing-practice-shell { grid-template-columns: 1fr; }
  .writing-card-header { grid-template-columns: 105px minmax(0, 1fr); gap: 12px; }
  .writing-illustration { min-height: 105px; }
  .writing-illustration svg { width: 92px; height: 92px; }
  .writing-character-display { gap: 10px; }
  .writing-mode-tabs { grid-template-columns: 1fr; }
  .writing-mode-tabs button { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .writing-board.is-demonstrating .writing-guide { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

.writing-study-layout { display:grid; grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr); gap:20px; align-items:start; }
.writing-model-panel { min-width:0; padding:14px; background:#fffdf7; border:1px solid #ded8c8; border-radius:12px; }
.writing-model-panel[hidden] { display:none; }
.writing-study-layout:has(.writing-model-panel[hidden]) { grid-template-columns:1fr; }
.writing-model-panel h3 { margin:0 0 10px; font-size:.95rem; color:#485d4f; }
.writing-model-panel svg { display:block; width:100%; background:white; border:1px solid #ddd; border-radius:3px; }
.writing-complete-model { max-width:200px; margin:0 auto 16px; }
.writing-stroke-sequence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.writing-stroke-sequence figure { margin:0; }
.writing-stroke-sequence figcaption { font-size:.75rem; text-align:center; margin-top:3px; color:#725b44; }
.writing-source { color:#617168; font-size:.75rem; line-height:1.6; }
.writing-kanji-guide { flex-basis:100%; margin:0 0 6px; font-size:.85rem; line-height:1.65; color:#53615c; }
.writing-kanji-info { margin:0 0 16px; padding:10px 14px; border-left:3px solid #7d9b85; background:#f2f6f2; font-size:.9rem; line-height:1.7; }
.writing-kanji-info[hidden] { display:none; }
.writing-kanji-info p { margin:0; }
.writing-kanji-info p + p { margin-top:4px; font-size:.82rem; color:#53615c; }
.writing-card-header { grid-template-columns:80px minmax(0,1fr); }
.writing-illustration { min-height:80px; }
.writing-illustration svg { width:72px; height:72px; }
.writing-character-display > strong { font-size:3.5rem; }
@media(max-width:1000px) {
 .writing-study-layout { grid-template-columns:1fr; }
 .writing-model-panel { display:grid; grid-template-columns:100px 1fr; gap:8px 16px; align-items:start; }
 .writing-model-panel h3 { grid-row:1; }
 .writing-complete-model,.writing-stroke-sequence { grid-row:2; margin:0; }
 .writing-stroke-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); }
}