/* Each visible card animates its own artwork; text remains stable and readable. */
.reading-section { background:#edf1e6; }
.reading-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.reading-tabs { display:flex; flex-wrap:wrap; gap:8px; }.reading-tabs button { padding:11px 18px; min-height:44px; border:1px solid #b9c5ac; border-radius:28px; background:transparent; color:#34402e; font-size:14px; }.reading-tabs button[aria-pressed=true] { background:#253e2e; color:#fff; border-color:#253e2e; }
#reading-motion { border:0; border-bottom:1px solid #a7b49c; padding:10px 0; min-height:44px; background:transparent; color:#4e5e46; font-size:12px; }
.reading-demo { border:1px solid #d6dfcb; background:#f9fbf6; border-radius:20px; overflow:hidden; }
.reading-panel { display:grid; grid-template-columns:1fr 1.05fr; gap:40px; padding:48px; align-items:center; min-height:460px; }
.reading-panel+.reading-panel { border-top:1px solid #d6dfcb; }.reading-ready .reading-panel { border-top:0; }
.reading-label { font-size:10px; letter-spacing:.12em; color:#65745b; }.home-public .reading-explanation h3 { font-size:clamp(30px,3.2vw,42px); line-height:1.1; letter-spacing:-.045em; margin:20px 0; }.reading-explanation>p { max-width:400px; font-size:15px; color:#58664e; }.reading-explanation .reading-hint { font-size:12px; margin-top:18px; }
.reading-action { margin-top:22px; min-height:44px; padding:10px 18px; background:#253e2e; border:0; border-radius:24px; color:#fff; font-size:13px!important; }.reading-explanation .reading-feedback { font-size:13px; margin-top:18px; color:#294b31; min-height:24px; }
.reading-paper { min-width:0; min-height:355px; background:#fff; border:1px solid #dce3d4; border-radius:12px; padding:24px; box-shadow:0 14px 34px #283f2010; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.reading-paper-tag,.reading-paper-foot { font-size:9px; letter-spacing:.12em; color:#637455; }.reading-paper-foot { text-align:center; margin-top:22px; letter-spacing:.04em; }
.reading-house { height:175px; width:100%; margin:10px 0; overflow:visible; }.reading-house path { fill:none; stroke:#65864c; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.reading-house .reading-ground { stroke:#c2ceaf; }.reading-house .reading-sun { fill:#e5cf77; }
.reading-syllables { display:flex; justify-content:center; gap:20px; transition:gap .55s ease; }.reading-syllables span { font-size:36px; letter-spacing:.08em; padding:4px 14px; background:#edf2e4; border-radius:8px; color:#29442e; transition:background .55s,border-radius .55s; }.reading-joined .reading-syllables { gap:0; }.reading-joined .reading-syllables span { background:#d9e7be; border-radius:0; }.reading-joined .reading-syllables span:first-child { border-radius:8px 0 0 8px; padding-right:0; }.reading-joined .reading-syllables span:last-child { border-radius:0 8px 8px 0; padding-left:0; }
.reading-counter { display:flex; align-items:center; gap:18px; margin-top:24px; }.reading-counter button { width:44px; height:44px; background:white; border:1px solid #b9c5ac; border-radius:50%; font-size:22px; }.reading-counter button:disabled { opacity:.4; cursor:default; }.reading-counter output { min-width:70px; font-size:15px; text-align:center; }
#reading-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0 0; min-height:216px; align-content:center; }.reading-group { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:18px 12px; border:1px solid #b8cba3; border-radius:12px; background:#f0f5e8; }.reading-group i { aspect-ratio:1; background:#729256; border-radius:50%; }
.reading-checklist { display:grid; gap:12px; margin:26px 0; }.reading-checklist label { display:flex; align-items:center; gap:12px; min-height:50px; cursor:pointer; }.reading-checklist input { width:21px; height:21px; accent-color:#527338; flex-shrink:0; }.reading-checklist span { font-size:14px; color:#34472e; }.reading-checklist b { font-size:10px; font-weight:400; color:#6d7c61; margin-right:8px; }.reading-checklist input:checked+span { color:#567345; text-decoration:line-through; }.reading-progress { background:#e9eedf; border-radius:20px; height:7px; overflow:hidden; }.reading-progress>span { display:block; width:var(--reading-progress,0%); height:100%; background:#698948; transition:width .4s ease; }
.home-public .reading-disclaimer { max-width:850px; font-size:11px; line-height:1.7; color:#64705b; margin-top:18px; }
.reading-step-art { display:block; width:100%; height:120px; margin:20px 0 0; padding:12px; border-radius:12px; background:#e3e9d8; }.reading-step-art path,.reading-step-art rect,.reading-step-art circle { fill:none; stroke:#6b8057; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.reading-step-art .reading-solid { fill:#c9d7b1; stroke:none; }
.reading-in-view .reading-draw { animation:reading-ink 1.2s ease both; stroke-dasharray:650; }.reading-in-view .reading-delay { animation-delay:.18s; }.reading-in-view .reading-paper { animation:reading-arrive .7s ease both; }.reading-in-view .reading-group { animation:reading-arrive .5s ease both; }.reading-in-view .reading-group:nth-child(2) { animation-delay:.08s; }.reading-in-view .reading-group:nth-child(3) { animation-delay:.16s; }.reading-in-view .reading-group:nth-child(4) { animation-delay:.24s; }
.reading-in-view .reading-step-art { animation:reading-arrive .65s ease both; }.reading-in-view .reading-checklist label { animation:reading-arrive .5s ease both; }.reading-in-view .reading-checklist label:nth-child(2) { animation-delay:.12s; }.reading-in-view .reading-checklist label:nth-child(3) { animation-delay:.24s; }
.home-public.reading-ready .results-bar-fill { animation:none; }.home-public.reading-ready .reading-in-view .results-bar-fill { animation:results-grow .8s ease both; }
@keyframes reading-ink { from { stroke-dashoffset:650; } to { stroke-dashoffset:0; } }
@keyframes reading-arrive { from { opacity:.45; transform:translateY(14px); } to { opacity:1; transform:none; } }
.reading-paused :is(.reading-draw,.reading-paper,.reading-group,.reading-step-art,.reading-checklist label,.results-bar-fill),.reading-paused .reading-in-view * { animation:none!important; transition:none!important; }.reading-paused .reading-syllables,.reading-paused .reading-syllables span,.reading-paused .reading-progress>span { transition:none; }
@media(max-width:700px) { .reading-panel { grid-template-columns:1fr; padding:26px 20px; gap:28px; }.reading-paper { min-height:300px; padding:20px; }.reading-house { height:145px; }.reading-explanation>p { font-size:14px; }.reading-toolbar { gap:6px; }.reading-tabs { gap:6px; }.reading-tabs button { font-size:12px; padding:10px 12px; }.reading-step-art { height:100px; }.reading-syllables span { font-size:30px; } #reading-groups { min-height:170px; }.reading-group { padding:14px 8px; gap:5px; } }
@media(prefers-reduced-motion:reduce) { .reading-section *, .reading-step-art, .reading-draw { animation:none!important; transition:none!important; } }
@media print { .reading-toolbar,.reading-action,.reading-counter { display:none!important; }.reading-ready .reading-panel[hidden] { display:grid!important; }.reading-panel { break-inside:avoid; }.reading-demo { overflow:visible; } }

/* Illustrated cards rebuild on re-entry and move only while in the viewport. */
.reading-motion-card { position:relative; transform:translateY(var(--reading-drift,0px)); }
.reading-card-icon { display:block; width:76px; height:76px; flex-shrink:0; margin:0 0 22px; overflow:visible; }
.reading-card-icon :is(path,circle,rect) { fill:none; stroke:#67824e; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.home-services .reading-card-icon { margin:2px 0 24px; }.home-services .home-card-number { position:absolute; top:30px; right:28px; margin:0; }
.home-portal .reading-card-icon { width:66px; height:66px; margin-bottom:26px; }.home-diagnostic .reading-card-icon { margin-bottom:24px; }
.reading-in-view .reading-trace { stroke-dasharray:1; animation:reading-build 6s ease-in-out var(--trace-delay,0s) infinite both; }
.reading-in-view .reading-solid { stroke-dasharray:none; animation:reading-seed 4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.reading-in-view .reading-card-icon { animation:reading-float 4.6s ease-in-out infinite; }
.reading-in-view .reading-step-art { animation:reading-arrive .7s ease both; }
.reading-in-view.reading-paper { animation:reading-arrive .8s ease both; }
.reading-in-view .reading-sun { stroke-dasharray:none; animation:reading-sunrise 5s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.reading-in-view .reading-syllables span { animation:reading-letter 4.2s ease-in-out infinite; }.reading-in-view .reading-syllables span:nth-child(2) { animation-delay:.25s; }
.reading-in-view .reading-group i { animation:reading-piece 3.6s ease-in-out infinite; }.reading-in-view .reading-group i:nth-child(2) { animation-delay:.18s; }.reading-in-view .reading-group i:nth-child(3) { animation-delay:.36s; }.reading-in-view .reading-group i:nth-child(4) { animation-delay:.54s; }
.reading-in-view .reading-checklist label { border-radius:8px; animation:reading-guide 6s ease-in-out infinite; }.reading-in-view .reading-checklist label:nth-child(2) { animation-delay:2s; }.reading-in-view .reading-checklist label:nth-child(3) { animation-delay:4s; }
.reading-in-view.home-diagnostic li { animation:reading-guide 6s ease-in-out infinite; border-radius:4px; }.reading-in-view.home-diagnostic li:nth-child(2) { animation-delay:2s; }.reading-in-view.home-diagnostic li:nth-child(3) { animation-delay:4s; }
.reading-in-view[data-home-service],.reading-in-view.home-portal { animation:reading-card-arrive .8s ease both; }
@keyframes reading-build { 0% { stroke-dashoffset:1; opacity:.45; } 28%,82% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:1; opacity:.45; } }
@keyframes reading-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(2deg); } }
@keyframes reading-letter { 0%,25%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes reading-seed { 0%,100% { transform:scale(.88); } 50% { transform:scale(1.06); } }
@keyframes reading-sunrise { 0%,100% { transform:translateY(3px) scale(.92); } 50% { transform:translateY(-5px) scale(1.08); } }
@keyframes reading-piece { 0%,65%,100% { transform:scale(1); } 22% { transform:translateY(-5px) scale(1.12); background:#9bad69; } }
@keyframes reading-guide { 0%,36%,100% { background:transparent; } 14%,25% { background:#dfe9cd; } }
@keyframes reading-card-arrive { from { opacity:.65; translate:0 18px; } to { opacity:1; translate:0 0; } }
.reading-paused .reading-motion-card { transform:none!important; animation:none!important; translate:none!important; }
.reading-paused .reading-motion-card * { animation:none!important; transition:none!important; stroke-dashoffset:0!important; }
.reading-page-hidden .reading-motion-card,.reading-page-hidden .reading-motion-card * { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) { .reading-motion-card,.reading-motion-card * { animation:none!important; transition:none!important; transform:none!important; translate:none!important; stroke-dashoffset:0!important; } }
@media print { .reading-motion-card,.reading-motion-card * { animation:none!important; transform:none!important; translate:none!important; stroke-dashoffset:0!important; } }