/* Hallmark · genre: playful · macrostructure: Catalogue / Workbench / Long Document
 * design-system: design.md · designed-as-app · studied: yes · DNA-source: user screenshot */
body{font-family:var(--font-body)}a{color:var(--color-accent-dark)}.skip-link{position:absolute;top:-100px;right:16px;z-index:20;background:var(--color-white);padding:var(--space-md)}.skip-link:focus{top:8px}
.site-header{max-width:none;gap:var(--space-lg);padding:var(--space-md) max(var(--space-lg),calc((100vw - 1080px)/2));flex-wrap:wrap}.site-header nav{gap:var(--space-sm);flex-wrap:wrap}.site-header nav a{color:var(--color-white);text-decoration:none;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-key);white-space:nowrap;min-height:44px}.site-header nav a:hover,.site-header nav a[aria-current=page]{background:var(--color-accent-dark)}.menu-toggle{display:none;color:var(--color-white);border:1px solid currentColor;min-height:44px}.site-footer{max-width:1050px;margin:var(--space-2xl) auto 0;padding:var(--space-lg);font-size:var(--text-small);align-items:flex-start;flex-wrap:wrap;line-height:2}.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg)}.site-footer a{white-space:nowrap}.site-footer p{margin:0}.site-footer .copyright{flex-basis:100%}.site-footer .brand{font-size:24px;color:var(--color-ink)}
.catalog-intro{padding-block:var(--space-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}.catalog-intro h1{font-size:var(--text-title);margin:0 0 var(--space-sm)}.catalog-intro p{margin:0;max-width:650px;color:var(--color-muted)}.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:var(--radius-key);min-height:44px;white-space:nowrap;padding:var(--space-sm) var(--space-lg);font-weight:700}.catalog-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);padding-block:var(--space-md);font-size:var(--text-small)}.catalog-summary p{margin:0}.catalog{background:var(--color-catalog);padding:var(--space-xl);border-radius:var(--radius-card)}.lesson-group+.lesson-group{margin-top:var(--space-2xl)}.lesson-group h2{color:var(--color-white);font-size:24px;margin-bottom:var(--space-lg)}.lesson-card{background:var(--color-white);border-radius:12px;margin-bottom:var(--space-lg);overflow:hidden;color:var(--color-ink)}.lesson-card:last-child{margin-bottom:0}.lesson-content{padding:var(--space-lg);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-md);align-items:center}.lesson-number{border:1px solid var(--color-line);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:var(--text-small)}.lesson-copy h3{font-size:20px;margin:0;font-weight:700}.lesson-details{display:flex;gap:var(--space-md);font-size:var(--text-small);color:var(--color-muted);flex-wrap:wrap}.lesson-stats{font-size:var(--text-small);margin:var(--space-sm) 0 0}.lesson-stats:empty{display:none}.lesson-start{background:var(--color-tint);min-width:108px;color:var(--color-accent-dark)}.lesson-start:hover{filter:brightness(.96)}.is-next .lesson-start{background:var(--color-gold);color:var(--color-gold-ink)}.is-complete{background:var(--color-complete)}.is-complete .lesson-start{background:var(--color-white);color:var(--color-green)}.is-complete .lesson-number{border-color:var(--color-green);color:var(--color-green)}.lesson-segments{display:flex;gap:3px;padding:0 5px 4px;height:12px;direction:rtl}.lesson-segment{flex:1;background:var(--color-card-line)}.lesson-segment.filled{background:var(--color-green)}.learning-note{margin-block:var(--space-xl);padding:var(--space-lg);border-inline-start:4px solid var(--color-accent);background:var(--color-white)}.learning-note p{margin-bottom:0}.share-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);margin-block:var(--space-xl)}.share-row p{margin:0}.article-page{max-width:800px;min-height:55vh;padding-block:var(--space-2xl)}.article-page h1{font-size:var(--text-title);margin-top:0}.article-page h2{font-size:23px;margin-top:var(--space-xl)}.article-page p,.article-page li{line-height:2}.article-page a{overflow-wrap:anywhere}.article-page li{margin-block:var(--space-sm)}.contact-address{font-size:clamp(20px,4vw,30px);direction:ltr;display:inline-block}.notice{background:var(--color-tint);padding:var(--space-md);border-radius:var(--radius-key)}.practice-nav{max-width:1050px;margin:auto;padding:var(--space-sm) var(--space-lg);display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap}.practice-nav a{font-size:var(--text-small)}.sound-toggle{margin-inline-start:auto;background:var(--color-white);border:1px solid var(--color-line);font-size:var(--text-small);min-height:44px}.lesson-celebration{border:2px solid var(--color-green);padding-block:var(--space-2xl)}.lesson-celebration .stars{animation:stars-in .4s var(--ease-out)}.completion-kicker{color:var(--color-green);font-weight:700}.result-home{margin-top:var(--space-lg);display:inline-block}.result-summary{display:flex;justify-content:center;gap:var(--space-xl);flex-wrap:wrap;margin-block:var(--space-lg)}.result-summary div{display:flex;flex-direction:column}.result-summary strong{font-size:24px;color:var(--color-green)}.result-summary span{font-size:var(--text-small)}.practice-page .result-actions{flex-wrap:wrap}.practice-page #resultTitle:focus{outline:none}.practice-page .keyboard-help{line-height:1.8}.practice-page main>footer{margin-bottom:var(--space-lg)}
@keyframes stars-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.catalog-intro{align-items:flex-start;flex-direction:column}.catalog{padding:var(--space-md);border-radius:16px}.lesson-content{padding:var(--space-md);gap:var(--space-sm)}.lesson-copy h3{font-size:17px}.lesson-start{min-width:80px;padding-inline:var(--space-md)}.lesson-number{width:28px;height:28px}.lesson-details{font-size:12px;gap:var(--space-sm)}.lesson-group h2{font-size:21px}.site-header{padding:var(--space-md)}.menu-toggle{display:block}.site-header nav{display:none;flex-basis:100%;flex-direction:column}.site-header nav.is-open{display:flex}.site-footer nav{gap:var(--space-sm) var(--space-md)}.site-footer{padding:var(--space-md)}.article-page{padding-block:var(--space-lg)}}
@media(max-width:400px){.lesson-content{grid-template-columns:auto minmax(0,1fr)}.lesson-start{grid-column:2;justify-self:start}.lesson-number{align-self:start}.lesson-copy h3{font-size:17px}.catalog{padding:var(--space-sm)}.catalog .lesson-group h2{padding-inline:var(--space-sm)}.result-summary{gap:var(--space-md)}}
@media(prefers-reduced-motion:reduce){.lesson-celebration .stars{animation:none}}

.site-header :focus-visible,header :focus-visible{outline-color:var(--color-white)}