/* Color and interaction layer shared by both lessons. */
:root{--ink:#262445;--muted:#686580;--paper:#f7f5ff;--line:#dfdbee;--lav:#e9e0ff;--green:#bcf3df;--orange:#ffded6;--shadow:0 9px 28px #4b32910b;--primary:#6544d5;--primary-dark:#412a96;--mint:#aaf2d8;--coral:#ff987f}
body{background:linear-gradient(135deg,#f8f6ff,#f4f8ff)}
header{border-top:4px solid var(--primary)}
.brand-icon{background:var(--primary);box-shadow:0 3px 0 var(--primary-dark)}
.header-note,.aside-bottom small,footer,.statbar,.save-note{color:var(--muted)}
aside{background:#f0edfa}.dot{background:#c95742}
.hero{background:linear-gradient(120deg,#443192 0%,#6544bd 100%);color:#fff;border:1px solid #7455c8;box-shadow:0 10px 28px #5033a51b}
.hero .eyebrow{color:#e2d8ff}.hero p{color:#eee8ff}.hero h1{color:#fff}.hero em{color:var(--mint)}
.orbit{border-color:#b9a4ea66}.note{background:#f0e9ff;box-shadow:9px 12px 0 #33216d55;border:1px solid #fff6}.note small,.note p,.note-footer{color:var(--ink)}.note-footer{border-color:#cfc1ec}
.hero .btn{background:var(--mint);color:#183f38;border-color:#9ee0c7;box-shadow:0 4px 0 #65b49c}
.hero .btn:hover{background:#c5ffe8;box-shadow:0 6px 0 #65b49c}
.card.writing{background:linear-gradient(145deg,#fff,#e9fcf4);border-color:#abdcca;border-top:5px solid #65c8a6}
.card.speaking{background:linear-gradient(145deg,#fff,#fff0eb);border-color:#f2c4b8;border-top:5px solid var(--coral)}
.subject{background:#bbefd9;color:#245447}.speaking .subject{background:#ffd2c5;color:#713a32}
.lesson-icon{background:#c9f5e4;color:#28644f}.speaking .lesson-icon{background:#ffdfd4;color:#8c4333}
.card p{color:#5f6074}.card-meta{color:#646277}.card-bottom{border-color:#d4dedb}.speaking .card-bottom{border-color:#efd7d0}
.progress-box{border-color:#d8d0ee}progress{accent-color:var(--primary)}progress::-webkit-progress-bar{background:#e6dff6}progress::-webkit-progress-value{background:var(--primary)}progress::-moz-progress-bar{background:var(--primary)}
nav a{color:#56516e}nav a:hover{background:#e4dbfa}nav a.active{background:var(--primary);color:#fff;box-shadow:0 3px 0 var(--primary-dark)}
.btn{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-dark);min-height:44px}
button.quiet,.btn.secondary{background:#fff;border-color:#cfc5e7;color:#433567;box-shadow:0 3px 0 #d7cde9;min-height:40px}
.btn:hover{background:#7150df;box-shadow:0 6px 0 var(--primary-dark);transform:translateY(-2px)}
button.quiet:hover,.btn.secondary:hover{background:#f1ebff;box-shadow:0 5px 0 #cbbfe3;transform:translateY(-2px)}
.question-tabs button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 0 var(--primary-dark)}
.callout{background:#e5f8f0;border-color:#409e7d;color:#284e43}.callout.purple{background:#eee7ff;border-color:#8b68d9;color:#49356b}.callout.amber{background:#fff0e7;border-color:#e78963;color:#714832}
.tag{color:#4b4281}.prompt{background:#eee8fb;color:#35305c}
textarea{background:#fdfcff;border-color:#d3cae5;color:var(--ink)}textarea::placeholder{color:#79718b}textarea:focus{background:#fff;border-color:var(--primary)}
.option{background:#fff;border-color:#ddd6eb}.option:hover{background:#f5f0ff;border-color:#b9a5e1}.option:has(input:checked){background:#eee6ff;border-color:var(--primary);box-shadow:inset 4px 0 0 var(--primary)}
.option input,input[type=checkbox]{accent-color:var(--primary)}.feedback{color:#91531e}.feedback.correct{color:#267151}
.order-row select,#speech-length{background:#f6f0ff;border:1px solid #cfc4e6;color:#433567;border-radius:8px;padding:8px}
details[open]{border-color:#b7a2dd}summary:hover{color:var(--primary)}
.stage-links a:hover{background:#f0e8ff;border-color:#bba4e6}#toast{background:#423078}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #bd553b;outline-offset:4px}
/* Pressed feedback works for mouse, touch and keyboard activation. */
:where(button,a.btn,a.card,nav a,.stage-links a,summary,.option){touch-action:manipulation;transition:transform 100ms ease,box-shadow 100ms ease,background-color 100ms ease,filter 100ms ease}
:where(button,a.btn){position:relative;isolation:isolate;overflow:hidden}
:where(button,a.btn)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:currentColor;z-index:-1}
:is(button,a.btn):is(:active,.is-pressed,.just-clicked){transform:translateY(3px) scale(.985);box-shadow:0 1px 0 var(--primary-dark);filter:brightness(.94)}
:is(button.quiet,.btn.secondary):is(:active,.is-pressed,.just-clicked){box-shadow:0 1px 0 #c3b6df;background:#e9defc}
.hero .btn:is(:active,.is-pressed,.just-clicked){box-shadow:0 1px 0 #65b49c;background:#9be3c7}
:is(a.card,nav a,.stage-links a,summary,.option):is(:active,.is-pressed){transform:translateY(2px) scale(.99);filter:brightness(.95)}
:where(button,a.btn).just-clicked::after{animation:tap-highlight 300ms ease-out}
@keyframes tap-highlight{0%{opacity:.18}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){:where(button,a.btn,a.card,nav a,.stage-links a,summary,.option){transition:none!important;animation:none!important;transform:none!important}:where(button,a.btn).just-clicked::after{animation:none;opacity:.10}}
@media print{body,aside,.hero,.card.writing,.card.speaking{background:#fff;color:#222}.hero h1,.hero em,.hero p{color:#222}button,.btn{box-shadow:none}}