/* Astra-owned surface and interaction refinements. Scene assets stay independent. */
:root{--radius:18px;--ease:cubic-bezier(.22,.68,0,1.01);--hairline:color-mix(in srgb,var(--line) 78%,transparent)}
body{background-image:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--mint) 40%,transparent),transparent 52rem);-webkit-font-smoothing:antialiased}
::selection{background:var(--mint);color:var(--ink)}
h1,h2{text-wrap:balance}
.ui-icon{width:18px;height:18px;flex-shrink:0;vertical-align:middle}
.header-shell{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--hairline)}
.site-header nav{gap:3px;padding:4px;border:1px solid var(--hairline);border-radius:30px;background:color-mix(in srgb,var(--surface) 65%,transparent)}
.site-header nav a{padding:8px 19px;min-height:40px;border-radius:24px;transition:background .18s,color .18s}
.site-header nav a:hover{color:var(--teal);background:color-mix(in srgb,var(--mint) 50%,transparent)}
.site-header nav a[aria-current]{box-shadow:0 1px 5px #123b3210;background:var(--mint);color:var(--teal);font-weight:700}
.theme-button{display:inline-flex;gap:8px;align-items:center;justify-content:center;background:var(--surface)}
.find-button,.theme-button,.listen-button{border-color:var(--hairline);transition:border-color .18s,background .18s,box-shadow .18s}
.theme-button:hover,.find-button:hover{border-color:var(--teal);box-shadow:0 3px 12px #123b3208}
.button{border-radius:12px;box-shadow:0 4px 10px #0b554d0c;transition:transform .18s var(--ease),box-shadow .18s,background .18s}
.button.secondary{box-shadow:none;border-color:var(--line)}
.button:active:not(:disabled){transform:translateY(0) scale(.985);box-shadow:none}
.hero-copy h1{line-height:1.1;letter-spacing:-.045em}
.hero-exhibit{border-radius:26px;box-shadow:inset 0 1px 0 #ffffffa0,0 12px 30px #254b3a08}
.hero-exhibit .exhibit-bottom b{background:#ffffff38;transition:background .2s,transform .2s}
.hero-exhibit:hover .exhibit-bottom b{background:#ffffff90;transform:translate(2px,-2px)}
.resume-card{border-color:var(--hairline);border-radius:var(--radius);box-shadow:0 3px 12px #173f3304;transition:border-color .18s,box-shadow .18s}
.resume-action{gap:12px}
.progress-strip{border-color:var(--hairline)}
.ready-grid .module-card{border-radius:22px;border-color:var(--hairline);box-shadow:0 4px 20px #173f3305}
.ready-grid .module-card:hover{box-shadow:0 14px 28px #173f3310;transform:translateY(-3px);border-color:var(--teal)}
.card-bottom{border-color:var(--hairline)}
.upcoming-modules{border-radius:16px;border-color:var(--hairline)}
.lesson-tabs{gap:8px;border:0;padding:7px;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.lesson-tabs>a{padding:12px 19px;border-radius:10px;min-height:44px;transition:background .16s,color .16s}
.lesson-tabs>a[aria-current]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 15%,transparent);background:var(--mint)}
.lesson-tabs .book-link{padding-inline:10px}
.lesson-tabs>a:hover{color:var(--teal)}
.mission,.guided-tour,.learn-card,.word-card{border-radius:var(--radius)}
.learn-card,.word-card{border-color:var(--hairline);box-shadow:0 3px 15px #173f3304}
.concept-symbol{box-shadow:inset 0 2px 3px #ffffff60,0 8px 20px #234d3c08}
.learn-card>p,.word-card p{color:var(--ink);opacity:.86}
.listen-button{background:var(--surface)}
.listen-button .ui-icon{width:16px;height:16px}
.tour-stops button{border-radius:11px;transition:background .18s,border-color .18s}
.tour-stops button[aria-pressed=true]{border-color:color-mix(in srgb,var(--teal) 50%,var(--line))}
.tour-copy{min-height:75px}

/* A quieter, readable practice desk keeps the question close to the top. */
body[data-section=practice] main{max-width:1000px}
.practice-heading{display:grid;grid-template-columns:1fr 275px;align-items:center;gap:36px;padding:26px 0 30px}
.practice-intro{padding:0}
.practice-intro h1{font-size:clamp(34px,3.4vw,46px);line-height:1.13;margin:12px 0 15px}
.practice-intro h1 br{display:block}
.practice-intro h1 em::before{content:none}
.practice-intro>p:last-child{font-size:15px}
.practice-progress{padding:20px 22px;gap:6px 12px;border:1px solid var(--hairline);border-radius:18px;background:color-mix(in srgb,var(--mint) 55%,var(--surface))}
.progress-caption{display:block;font-size:12px;letter-spacing:.12em;color:var(--teal);margin-bottom:9px;font-weight:700}
.practice-progress strong{display:block;font-size:16px;white-space:nowrap}
.practice-progress .stars{font-size:17px;gap:2px}
.practice-progress progress{height:4px;margin-top:9px}
.practice-progress>p{grid-column:1/-1;font-size:13px;margin-top:4px}
.practice-filter{padding:17px 20px;margin:0 0 24px;border:1px solid var(--hairline);border-radius:16px;background:color-mix(in srgb,var(--surface) 70%,transparent);gap:24px}
.practice-filter label,.focus-filter legend{font-size:13px;color:var(--muted);font-weight:400}
.practice-filter select{border-radius:10px;min-width:265px;background:var(--surface);font-size:14px}
.focus-filter{gap:3px}
.focus-filter button{border:0;border-radius:9px!important;background:transparent;padding:11px 15px}
.focus-filter button[aria-pressed=true]{background:var(--mint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);font-weight:700}
.deck-position{margin:0 0 13px;padding:0 3px;font-size:14px}
.question-map-button{border:0;background:transparent;font-size:14px;padding:8px 10px}
.question{border-radius:22px;padding:27px 30px;border-color:var(--hairline);box-shadow:0 8px 28px #173f3306}
.question.solved{border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.question-title{gap:20px;margin:20px 0 23px;align-items:flex-start}
.question-title h3{font-size:23px;font-weight:600;line-height:1.4;letter-spacing:-.025em}
.question-title .listen-button{margin-top:-4px}
.answers{gap:10px}
.answers button{gap:14px;border-radius:12px;min-height:60px;padding:12px 16px;background:var(--surface);font-size:16px;transition:background .15s,border-color .15s,box-shadow .15s}
.answers button:not(:disabled):hover{background:color-mix(in srgb,var(--mint) 35%,var(--surface));box-shadow:0 2px 8px #173f3306}
.answer-letter{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--muted);background:var(--bg)}
.answer-copy{flex:1}
.answer-status{width:18px;flex-shrink:0;color:var(--teal)}
.answers button.correct{background:var(--mint);border-color:color-mix(in srgb,var(--teal) 65%,var(--line));color:var(--ink)}
.answers .correct .answer-letter{color:var(--surface);background:var(--teal);border-color:var(--teal)}
.answers button.incorrect{background:var(--coral);border-color:color-mix(in srgb,#bd6748 55%,var(--line))}
.answers .incorrect .answer-status{color:var(--ink)}
.answers button:disabled{opacity:1}
.answers button:disabled:not(.correct){color:var(--muted);background:var(--bg)}
.feedback-space{display:grid;margin-top:21px}
.feedback,.feedback-measure{grid-area:1/1;display:grid;grid-template-columns:22px 1fr;gap:12px;padding:16px 18px;margin:0;border-radius:12px;background:var(--bg);color:var(--muted);font-size:15px;line-height:1.7}
.feedback-measure{visibility:hidden;pointer-events:none}
.feedback strong,.feedback-measure strong{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:2px}
.feedback-icon{color:var(--teal);padding-top:1px}
.feedback.good{background:color-mix(in srgb,var(--mint) 65%,var(--surface));color:var(--ink)}
.feedback.good strong{color:var(--teal)}
.feedback.retry{color:var(--ink)}
.question-pager{padding:18px 2px 0;gap:15px}
.question-pager .button{border-radius:11px}
.question-pager>span{font-size:13px}
.question-pager .button:disabled{opacity:.42}
dialog{border-radius:24px;border-color:var(--hairline);box-shadow:0 24px 90px #062b2840}
dialog[open]{animation:dialog-arrive .16s ease-out}
dialog::backdrop{background:#122e296e;backdrop-filter:blur(6px)}
.dialog-close{border-radius:50%;font-size:24px}
.dialog-close:hover{background:var(--mint)}
.find-result{border-radius:12px}
.site-footer{border-color:var(--hairline);margin-top:12px}
@keyframes dialog-arrive{from{opacity:.5;transform:translateY(7px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:681px) and (max-width:950px){
 .site-header{gap:10px}.site-header nav a{padding-inline:12px}.brand small{font-size:12px}.brand{font-size:13px}.brand-symbol{font-size:33px}
 .find-button span,.theme-button span{display:none}.find-button,.theme-button{width:44px;padding:10px}
 .practice-heading{gap:22px;grid-template-columns:1fr 250px}.practice-intro h1{font-size:36px}.practice-progress{padding:18px}
}
@media(max-width:680px){
 .header-shell{backdrop-filter:none}.theme-button{gap:0}.mobile-nav{background:color-mix(in srgb,var(--surface) 97%,transparent);box-shadow:0 -3px 20px #173f3305}
 .mobile-nav a{border-radius:13px}.mobile-nav a[aria-current]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 10%,transparent)}
 .hero-copy h1{font-size:38px}.hero-exhibit{border-radius:23px}.resume-card{border-radius:16px}
 .ready-grid .module-card{border-radius:20px}.ready-grid .card-copy{max-width:76%}
 .lesson-tabs{padding:6px 0;gap:5px;flex-wrap:nowrap}.lesson-tabs>a{padding:12px 14px;flex:1;text-align:center;border-radius:10px;min-height:44px}
 .lesson-tabs>a>span{margin-right:6px}.lesson-tabs .book-link{display:none}
 .practice-heading{grid-template-columns:1fr;gap:19px;padding:23px 0 19px}
 .practice-intro h1{font-size:34px;margin:11px 0 12px}.practice-intro>p:last-child{font-size:14px}
 .practice-progress{padding:15px 17px;gap:2px 13px;border-radius:14px}
 .progress-caption,.practice-progress>p{display:none}.practice-progress strong{font-size:14px}.practice-progress .stars{font-size:18px}
 .practice-progress progress{margin-top:9px}
 .practice-filter{padding:15px;margin-bottom:15px;gap:14px;border-radius:14px}
 .practice-filter>div{width:100%;gap:6px}.practice-filter select{width:100%;min-width:0;font-size:16px}
 .focus-filter{width:100%;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:5px}.focus-filter legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .focus-filter button{padding:10px 7px;min-height:44px;font-size:14px}
 .deck-position{padding:0 2px;margin-bottom:9px}.question-map-button{font-size:13px;padding-inline:7px}
 .question{padding:20px 17px;border-radius:18px}.question-meta{font-size:12px}
 .question-title{flex-direction:column;gap:10px;margin:17px 0 16px}.question-title h3{font-size:21px;line-height:1.45}
 .question-title .listen-button{margin:0;font-size:13px;min-height:44px;padding:8px 12px}
 .answers button{padding:12px;min-height:59px;gap:11px;font-size:16px}.answer-letter{width:28px;height:28px;border-radius:8px}
 .feedback-space{margin-top:17px}.feedback,.feedback-measure{padding:14px 12px;gap:8px;grid-template-columns:19px 1fr;font-size:14px;line-height:1.8}
 .feedback strong,.feedback-measure strong{font-size:14px}
 .question-pager{padding-top:16px;gap:11px}.question-pager .button{font-size:14px;min-height:48px;padding:11px 15px}
 dialog{border-radius:21px}.find-dialog,.question-dialog{border-radius:21px}
}
@media(prefers-reduced-motion:reduce){
 dialog[open]{animation:none}.module-card:hover,.ready-grid .module-card:hover,.button:hover,.button:active:not(:disabled),.hero-exhibit:hover .exhibit-bottom b{transform:none}
}