/* Hallmark: approved playful identity; preserve reference catalogue and training workbench. */
:root{--brand-ink:#183d55;--brand-blue:#148ccc;--brand-deep:#086aab;--brand-paper:#fffdf8;--brand-yellow:#ffd34e;--brand-font:'Noto Sans Arabic',Tahoma,sans-serif;--brand-motion:160ms}
body{background:var(--brand-paper)}
header{background:var(--brand-deep)}
.brand{display:grid;grid-template-columns:48px auto;column-gap:10px;align-items:center;text-decoration:none;line-height:1.2;font-family:var(--brand-font)}
.brand-mark{grid-row:1 / 3;display:block;width:48px;height:48px}.brand-name{font-size:30px;line-height:1.3}.brand span{grid-column:2;font-size:11px;line-height:1.8}
.site-header nav a[aria-current=page]{background:rgba(255,255,255,.16);text-decoration:underline;text-underline-offset:7px}
.site-footer{border-top:1px solid var(--color-line);padding-block:var(--space-xl)}.site-footer .brand{display:inline-grid;color:var(--brand-ink);margin-bottom:var(--space-sm)}
.catalog-intro{padding-block:var(--space-2xl);gap:var(--space-xl)}.intro-copy{flex:1}.catalog-intro h1{font-size:clamp(36px,5vw,58px);line-height:1.55;color:var(--brand-ink);font-family:var(--brand-font);margin-block:var(--space-sm) var(--space-md)}
.catalog-intro .brand-eyebrow{font-weight:700;color:var(--brand-deep);font-size:14px}.intro-copy>p:last-child{max-width:540px;line-height:2}
.intro-action{width:300px;flex-shrink:0;text-align:center}.intro-action .primary{width:100%;background:var(--brand-yellow);color:var(--brand-ink);box-shadow:0 4px 0 #c99a20}.catalog-intro .start-note{font-size:12px;margin-top:var(--space-md)}
.key-art{height:160px;position:relative;direction:ltr;margin-bottom:var(--space-lg)}.art-key{position:absolute;width:76px;height:80px;border-radius:18px;display:grid;place-items:center;font:700 42px var(--brand-font);box-shadow:0 7px 0 var(--brand-deep);background:var(--brand-blue);color:white;top:45px}.key-ba{left:14px;transform:rotate(-12deg)}.key-ta{left:105px;top:16px;transform:rotate(5deg);background:var(--brand-yellow);color:var(--brand-ink);box-shadow:0 7px 0 #c99a20}.key-ha{left:196px;transform:rotate(13deg)}.art-spark{position:absolute;left:32px;top:0;font-size:34px;color:var(--brand-yellow)}.art-trail{position:absolute;bottom:-15px;left:133px;font-size:40px;color:var(--brand-blue);transform:rotate(-18deg)}
.catalog{background:var(--brand-blue)}.lesson-group h2{display:flex;align-items:center;gap:var(--space-md)}.journey-icon{width:30px;height:30px;flex-shrink:0}.lesson-card{box-shadow:0 3px 0 rgba(0,50,80,.12)}.lesson-start{transition:transform var(--brand-motion) var(--ease-out),background var(--brand-motion)}
.button-link,button{transition:transform var(--brand-motion) var(--ease-out)}.button-link:active,button:active{transform:translateY(2px)}.lesson-start:hover{transform:translateX(-3px)}
.lesson-celebration{background:var(--brand-paper);border-color:var(--brand-yellow)}.lesson-celebration #resultTitle{color:var(--brand-ink)}.lesson-celebration .stars{animation:brand-cheer 650ms var(--ease-out) both}
@keyframes brand-cheer{0%{opacity:0;transform:scale(.7) rotate(-5deg)}65%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.practice-page .key.active{animation:key-cue 150ms ease-out}
@keyframes key-cue{from{box-shadow:inset 0 0 0 3px var(--brand-yellow)}to{box-shadow:inset 0 0 0 0 transparent}}
@media(max-width:700px){.catalog-intro{flex-direction:row;flex-wrap:wrap;padding-block:var(--space-lg)}.intro-copy{flex-basis:100%}.catalog-intro h1 br{display:none}.catalog-intro h1{font-size:36px}.intro-action{width:100%;display:grid;grid-template-columns:1fr;justify-items:start;text-align:right}.key-art{display:none}.intro-action .primary{width:auto;min-width:200px}.site-header .brand{grid-template-columns:40px auto}.site-header .brand-mark{width:40px;height:40px}.brand-name{font-size:26px}.practice-page header .brand span{display:none}}
@media(prefers-reduced-motion:reduce){.button-link,button,.lesson-start{transition:none}.lesson-celebration .stars,.practice-page .key.active{animation:none}.lesson-start:hover,.button-link:active,button:active{transform:none}}

.intro-buttons{display:flex;gap:12px;width:100%;align-items:stretch}.intro-action .intro-buttons .button-link{flex:1;min-width:0;width:auto;padding:12px 10px;display:flex;align-items:center;justify-content:center;font-size:16px}.speed-entry{background:#086aab;color:white;border-radius:8px;box-shadow:0 4px 0 #064e80;text-decoration:none}.speed-entry:hover{background:#07598f}.intro-buttons a:focus-visible{outline:3px solid #183d55;outline-offset:5px}