.da-practice {
    --navy: #0A2D57;
    --green: #2E8B57;
    --blue: #4A90E2;
    --paper: #F8F9FA;
    --ink: #2C3E50;
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 1rem 3rem;
    color: var(--ink);
    font-family: Inter, sans-serif;
}
.da-practice [hidden] { display: none !important; }
.da-hero {
    padding: .9rem 1.5rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius:28px;
    background:
        radial-gradient(circle at 15% 15%,rgba(134,239,172,.45),transparent 28%),
        radial-gradient(circle at 85% 80%,rgba(187,247,208,.35),transparent 30%),
        linear-gradient(135deg,#052e16 0%,#14532d 48%,#15803d 100%);
    box-shadow:0 25px 55px rgba(20,83,45,.25);
    color: #fff;
    text-align: center;
}
.da-hero h1 { margin: 0; color: #fff; font-size: clamp(1.6rem,4vw,2.25rem); font-weight: 800; line-height: 1.2; }
.da-hero-links { display: flex; min-height: 44px; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin-top: .3rem; }
.da-hero-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0;
    border: 0;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .18em;
}
.da-status { min-height: 1.5rem; margin: .75rem 0; text-align: center; }
.da-status.is-error { padding: .75rem; border: 2px solid #b42318; border-radius: .7rem; background: #fff1f0; color: #7a271a; }
.da-status button { min-height: 44px; margin-left: .4rem; }
.da-chooser-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.da-count,
.da-settings fieldset,
.da-mixed fieldset { margin: 0; padding: .4rem .75rem; border: 1px solid #cbd5e1; border-radius: .75rem; }
.da-count label,
.da-settings label,
.da-mixed label { display: inline-flex; min-height: 44px; align-items: center; gap: .3rem; margin-right: .65rem; }
.da-levels {
    display: grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap: .8rem;
    margin: 1rem 0;
}
.da-practice .da-levels button {
    display: flex;
    height:185px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .45rem;
    padding: 1.2rem;
    border:1px solid #dbe4f0;
    border-radius:20px;
    background:linear-gradient(145deg,#fff,#f1f5f9);
    box-shadow:0 8px 18px rgba(15,23,42,.06);
    color: #172554;
    text-align: left;
}
.da-level-number {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4338ca;
    font-weight: 600;
}
.da-level-label { color: #64748b; font-size: .68rem; font-weight: 600; letter-spacing: .08em; }
.da-level-example { display: block; color: #172554; font-weight: 600; }
.da-level-description { display: block; color: #334155; font-size: .84rem; font-weight: 600; line-height: 1.4; }
.da-practice .da-levels button:hover,
.da-practice .da-levels button:focus-visible { border-color: var(--green); box-shadow: 0 12px 25px rgba(20,83,45,.14); transform: translateY(-2px); }
.da-settings,
.da-mixed { margin: .8rem 0; border-top: 1px solid #d5dee8; }
.da-settings summary,
.da-mixed summary { min-height: 44px; padding: .7rem 0; cursor: pointer; font-weight: 700; }
.da-settings fieldset + fieldset { margin-top: .65rem; }
.da-mixed form { padding: .8rem; border-radius: .8rem; background: var(--paper); }
.da-mixed button,
.da-practice button { min-height:44px; padding: .65rem 1rem; border: 2px solid #ccd5df; border-radius: .75rem; background: #fff; color: var(--navy); font-weight: 700; cursor: pointer; }
.da-primary,
.da-mixed button { border-color: var(--green) !important; background: var(--green) !important; color: #fff !important; }
.da-practice button:focus-visible,
.da-practice input:focus-visible,
.da-practice select:focus-visible,
.da-practice summary:focus-visible,
.da-practice a:focus-visible { outline: 3px solid #FF8C00; outline-offset: 3px; }
.da-practice [data-da-practice] {
    position: relative;
    min-height:clamp(430px,62vh,680px);
    display:grid;
    grid-template-rows: 1fr auto;
    place-items:center;
    padding: 4rem 1.5rem 1.5rem;
    border-radius: 20px;
    background: #f8fafc;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.da-exit{position:absolute; top: .75rem; right: .75rem; z-index: 2; background: transparent !important; }
.da-card{width:min(100%,760px); box-sizing: border-box; margin: 0; padding: clamp(1.25rem,4vw,2.4rem); border: 1px solid #dbe4f0; border-radius: 20px; background: #fff; box-shadow: 0 16px 38px rgba(15,23,42,.1); text-align: center; }
.da-card[role=button] { cursor: pointer; }
.da-card[role=button]:focus-visible { outline: 4px solid #FF8C00; outline-offset: 3px; }
.da-card-meta { display: flex; justify-content: space-between; color: #52616f; font-size: .9rem; font-weight: 700; }
.da-prompt { min-width: 0; margin: 1.5rem 0; font-size: clamp(1.15rem,3vw,1.65rem); line-height: 1.55; overflow-wrap: anywhere; }
.da-prompt mjx-container,
.da-feedback mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.da-response { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1rem 0; }
.da-response label { display: flex; min-width: 130px; flex-direction: column; gap: .35rem; font-weight: 700; text-align: left; }
.da-response input,
.da-response select { min-height: 44px; box-sizing: border-box; padding: .65rem; border: 2px solid #9cabb9; border-radius: .65rem; background: #fff; color: var(--ink); font: inherit; }
.da-feedback { margin-top: 1rem; padding: 1rem; border-radius: .8rem; }
.da-feedback p { margin: .5rem 0; }
.da-working { min-width: 0; max-width: 100%; font-size: clamp(1rem,3vw,1.35rem); text-align: left; }
.da-working p { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.da-working p > span { display: block; }
.da-working mjx-container { display: block !important; max-width: 100%; margin: .25rem 0 !important; overflow: visible !important; font-size: .95em !important; }
.da-feedback.is-correct { border: 2px solid #2E8B57; background: #ecf8f1; color: #174d32; }
.da-feedback.is-wrong { border: 2px solid #b42318; background: #fff1f0; color: #7a271a; }
.da-next { display: block; margin: 1rem auto 0; }
.da-completion { padding: 2rem; border-radius: 1.25rem; background: var(--paper); text-align: center; }
.da-completion div { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.da-noscript { padding: 1rem; border: 2px solid #b42318; }
.da-practice[data-mode=classroom] .da-card { min-height: 340px; display: flex; flex-direction: column; justify-content: flex-start; }
.da-practice[data-mode=classroom] .da-prompt,
.da-practice[data-mode=classroom] .da-feedback { font-size: clamp(1.35rem,4vw,2.2rem); }
@media(max-width:700px) {
    .da-practice { padding: 12px .75rem 2rem; }
    .da-hero { padding: 2rem 1rem; border-radius: 20px; }
    .da-hero h1 { font-size: 1.25rem; }
    .da-chooser-heading { align-items: flex-start; flex-direction: column; }
    .da-levels { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .da-practice .da-levels button { height: 172px; padding: .9rem; }
    .da-practice [data-da-practice] {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: .75rem;
    }
    .da-practice [data-da-practice] .da-exit {
        position: static;
        align-self: flex-end;
        margin-bottom: 1rem;
    }
    .da-card { padding: 1rem; }
    .da-practice[data-mode=classroom] .da-card { min-height: 0; }
    .da-response { flex-direction: column; }
    .da-response label { width: 100%; }
    .da-response input,
    .da-response select { width: 100%; }
}
@media(max-width:360px) {
    .da-levels { grid-template-columns:1fr; }
    .da-practice .da-levels button { height: 185px; }
    .da-hero { padding-inline: .75rem; }
    .da-hero h1 { font-size: 1.1rem; }
    .da-hero-links { gap: .25rem; font-size: .9rem; }
}