/* Shared study colors: real structural parts, with a softer palette in each theme. */
:root { --part-0:#ad5e55; --part-1:#92703b; --part-2:#4e7974; --part-3:#7d6793; --part-4:#657b4c; }
:root[data-theme="dark"] { --part-0:#d99e96; --part-1:#d6ba82; --part-2:#99c8be; --part-3:#bdacd4; --part-4:#b0c796; }
.observation-card { max-width:800px; margin:0 auto; padding:24px 28px; background:var(--white); border:1px solid var(--line); border-radius:24px; }
.observation-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.observation-heading h1 { font-size:27px; margin:9px 0 4px; line-height:1.2; }
.observation-heading p { color:var(--muted); font-family:var(--jp); font-size:17px; margin:0; }
.stroke-demo { display:block; width:min(100%,360px); aspect-ratio:1; margin:12px auto; overflow:visible; }
.stroke-demo path { fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; visibility:hidden; }
.stroke-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin:8px 0 12px; }
.stroke-legend>span { display:flex; align-items:center; gap:8px; color:var(--part-color); border:1px solid currentColor; border-radius:9px; padding:7px 11px; font-size:12px; }
.stroke-legend b { font-family:var(--jp); font-size:23px; font-weight:400; }
.stroke-legend small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.stroke-controls { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.stroke-controls button { background:var(--green-light); color:var(--green); border:1px solid var(--line); border-radius:9px; min-height:40px; padding:8px 12px; font-size:11px; }
.stroke-playback-status { color:var(--muted); font-size:11px; min-width:100px; text-align:center; }
.stroke-strip { display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; padding:12px 2px 5px; scrollbar-width:thin; }
.stroke-strip button { flex:0 0 58px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--muted); padding:3px; }
.stroke-strip button[aria-current="step"] { border-color:var(--green); background:var(--green-light); }
.stroke-strip svg { width:100%; height:43px; display:block; margin:0; fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.stroke-strip small { display:block; font-size:9px; margin-top:1px; }
.observe-next { display:flex; justify-content:center; width:100%; max-width:350px; margin:17px auto 0; }
.answer-reference .stroke-demo { width:min(100%,260px); height:auto; margin:8px auto; stroke-width:2.8; }
.answer-reference .stroke-strip svg { width:100%; height:43px; margin:0; stroke-width:3.5; }
.answer-reference .stroke-legend { margin-bottom:12px; }
.target-kanji.answer-character { font-size:24px; line-height:1; margin:14px 0 0; }
.kanji-info>.answer-reference { border-top:0; margin-top:10px; padding-top:0; margin-bottom:22px; }
.review-reading { font-size:25px; font-family:var(--jp); color:var(--green); line-height:1.5; }
.review-hints { font-size:12px; line-height:1.7; color:var(--muted); scroll-margin-bottom:20px; }
.review-hints:empty { display:none; }
.review-hints ol { padding:12px 12px 12px 30px; margin:14px 0 0; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.review-hints li+li { margin-top:6px; }
.hint-silhouette { display:block; width:88px; height:88px; margin:8px auto; filter:blur(9px); opacity:.65; fill:none; stroke:var(--writing-ink); stroke-width:4; stroke-linecap:round; }
.review-session .canvas-tools { flex-wrap:wrap; gap:10px 20px; }
.library-group { margin:28px 0 34px; }
.library-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.library-group-heading h2 { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:500; margin:0; }
.library-group-heading h2 span { font-family:var(--jp); font-size:30px; background:var(--green-light); border-radius:10px; min-width:45px; padding:4px; text-align:center; }
.library-group-heading>small { font-size:11px; color:var(--muted); }
#radical-filter { max-width:100%; }
@media(max-width:650px) {
  .observation-card { padding:17px; border-radius:19px; }
  .observation-heading h1 { font-size:22px; margin:6px 0 3px; }
  .observation-heading p { font-size:14px; }
  .observation-heading .mode-tag { font-size:9px; }
  .observation-card .stroke-demo { width:min(100%,26svh); margin:6px auto; }
  .stroke-legend { gap:6px; margin:5px 0 8px; }
  .stroke-legend>span { padding:4px 8px; font-size:10px; gap:6px; }
  .stroke-legend b { font-size:20px; }
  .stroke-legend small { font-size:8px; margin-top:1px; }
  .stroke-controls { gap:6px; }
  .stroke-controls button { min-height:38px; padding:6px 8px; font-size:10px; }
  .stroke-playback-status { min-width:0; font-size:10px; flex-basis:100%; }
  .stroke-strip { gap:6px; padding-top:8px; }
  .stroke-strip button { flex-basis:48px; }
  .stroke-strip svg,.answer-reference .stroke-strip svg { height:34px; }
  .observe-next { margin-top:12px; min-height:44px; }
  .review-session .canvas-tools { gap:8px 13px; }
  .review-session .mobile-practice-prompt:has(.review-task) { max-height:120px; margin-bottom:12px; }
  .review-session .review-task { font-size:20px; margin:0 0 5px; }
  .review-reading { font-size:22px; }
  .review-hints { scroll-margin-bottom:90px; }
  .library-group-heading h2 { font-size:14px; gap:9px; }
  .library-group-heading>small { font-size:10px; }
}