:root{font-family:system-ui,-apple-system,sans-serif;color:#223b39;background:#faf8f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1120px;margin:auto;padding:24px 36px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfd4}header a{font-size:36px;font-weight:850;color:#245c53;text-decoration:none;letter-spacing:-2px}header a span{display:block;font-size:10px;letter-spacing:2px;color:#536b65;margin-top:3px}button,input,select{font:inherit}button{min-height:58px;border:2px solid transparent;border-radius:18px;padding:14px 24px;background:#245c53;color:white;font-weight:750;cursor:pointer}button:hover{filter:brightness(.95)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #b54e1e;outline-offset:4px}button:disabled{opacity:.5;cursor:not-allowed}.quiet{background:transparent;border-color:#b8c6bd;color:#245c53}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:#526963;margin:24px 0 12px}h1{font-size:clamp(30px,4.5vw,52px);line-height:1.12;letter-spacing:-1.5px;max-width:800px;margin:14px 0}h2{font-size:25px}p{line-height:1.65;font-size:18px}.intro{color:#52645e;max-width:650px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0}.card{border:1px solid #d9ded4;background:white;border-radius:26px;padding:28px;text-align:left;color:#223b39;min-height:265px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 5px 0 #e6e8de}.card b{font-size:23px;margin:24px 0 8px}.card small{font-size:16px;line-height:1.5;font-weight:450}.symbol{font-size:42px;border-radius:20px;width:85px;height:85px;display:grid;place-items:center;background:#e0eee6;color:#245c53}.card:nth-child(2) .symbol{background:#fff0c9;color:#765317}.card:nth-child(3) .symbol{background:#f4e5db;color:#874829}.hint{background:#efeee4;padding:20px 24px;border-radius:18px;font-size:16px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.toolbar h2{flex:1;margin:0}.panel{background:white;border:1px solid #dde1d6;border-radius:26px;padding:28px;margin:24px 0}.choices{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:32px 0}.choice{font-size:70px;color:#245c53;background:#e8f1e9;min-width:150px;min-height:150px;border:2px solid #bdd4c6}.choice.word{font-size:clamp(22px,4vw,40px);max-width:100%;overflow-wrap:anywhere}.prompt{font-size:26px;text-align:center}.feedback{min-height:40px;font-size:21px;text-align:center;font-weight:700;color:#245c53}.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;max-width:370px;margin:20px auto}.dot{width:34px;height:34px;border-radius:50%;background:#b16b32}.field{display:grid;gap:8px;margin:22px 0;max-width:650px}label{font-weight:750}input,select{width:100%;padding:16px;border-radius:12px;border:2px solid #9cac9e;background:white;color:#223b39;min-height:56px}input[type=checkbox]{width:26px;min-height:26px}.check{display:flex;align-items:center;gap:14px}.letters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.letters button{font-size:26px;min-width:64px}.model{font-size:clamp(26px,5vw,48px);text-align:center;letter-spacing:8px;overflow-wrap:anywhere}.canvas-wrap{border:2px solid #a5b7aa;border-radius:20px;overflow:hidden;background:#fffef9}canvas{width:100%;height:auto;display:block;touch-action:none;aspect-ratio:2/1}.small{font-size:14px;color:#53665c}.error{color:#913e26}footer{font-size:11px;letter-spacing:1px;color:#59695f;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #dedfd4;margin-top:25px}#notice{max-width:1050px;margin:0 auto;color:#913e26;padding:0 24px}dialog{border:0;border-radius:24px;max-width:520px;width:90%;padding:30px}dialog::backdrop{background:#203c39b3}@media(max-width:650px){header,main,footer{padding:20px}.cards{grid-template-columns:1fr;gap:16px}.card{min-height:150px;padding:20px;display:grid;grid-template-columns:85px 1fr;column-gap:20px}.card b{margin:8px 0}.card .symbol{grid-row:span 2}.panel{padding:18px}.choice{min-width:110px;min-height:110px;font-size:55px}footer{flex-direction:column}.toolbar button{padding:12px 16px}h1{letter-spacing:-.8px}}
[hidden]{display:none!important}

/* Elementi didattici grandi; il colore affianca forma, testo e voce. */
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.card:nth-child(4) .symbol{background:#eee5ff;color:#66368e}
.card:nth-child(5) .symbol{background:#dceefa;color:#185f8c}
.choice{font-size:clamp(100px,14vw,160px);min-width:210px;min-height:220px;line-height:1.15;background:#e8f0ff;color:#174da6;border-color:#174da6}
.choice:nth-child(2n){background:#fff0df;color:#963a13;border-color:#963a13}
.choice:disabled{opacity:1;cursor:default}
.choice.word{font-size:clamp(36px,6vw,64px);min-height:150px}
.dots{gap:20px;max-width:520px}
.dot{width:70px;height:70px;flex:0 0 70px;background:#2457b3;border:2px solid #173f85}
.dot:nth-child(3n+2){background:#aa421a;border-color:#7b3113}
.dot:nth-child(3n){background:#703ca4;border-color:#4f247c}
.prompt{font-size:clamp(28px,4vw,38px);font-weight:750}
.feedback{font-size:26px}.feedback.incorrect{color:#963a13}
.letters button{font-size:40px;min-width:80px;min-height:80px;background:#174da6}
.letters button:nth-child(3n+2){background:#963a13}.letters button:nth-child(3n){background:#66368e}
.model{font-size:clamp(38px,7vw,72px)}
.shape-choice{display:grid;place-items:center;min-width:250px;min-height:250px;padding:24px}
.shape{display:block;width:170px;height:170px;background:currentColor}
.circle{border-radius:50%}.triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}
.rectangle{width:200px;height:115px}
.association{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin:10px 0;font-size:clamp(38px,6vw,64px);line-height:1.2}
.big-letter{font-size:clamp(120px,20vw,180px);font-weight:850;color:#174da6}
.link-word{font-size:30px;color:#53665c}.association strong{color:#963a13}
.picture{text-align:center;font-size:clamp(140px,25vw,220px);line-height:1.3;margin:20px 0}
@media(max-width:650px){.cards{grid-template-columns:1fr}.choices{gap:16px}.choice{min-width:125px;min-height:155px;padding:12px;font-size:100px}.choice.word{min-width:0;width:100%;font-size:36px}.shape-choice{min-width:220px;min-height:220px}.shape{width:155px;height:155px}.rectangle{width:180px;height:105px}.dot{width:60px;height:60px;flex-basis:60px}.dots{gap:16px}.association{gap:16px}}

/* Le forme restano isolate: nessun bordo, sfondo o ombra del pulsante. */
.shape-choices .shape-choice,.shape-choices .shape-choice:nth-child(2n){background:transparent;border:0;border-radius:0;box-shadow:none}
.shape-choices .shape-choice:hover{background:transparent;filter:none}
.shape-choices .shape-choice:focus-visible{outline:0}
.shape-choice:focus-visible .shape{outline:4px dashed #223b39;outline-offset:10px;filter:drop-shadow(0 0 5px #223b39)}
textarea{font:inherit;width:100%;padding:16px;min-height:160px;resize:vertical;border:2px solid #9cac9e;border-radius:12px;background:white;color:#223b39;font-size:18px;line-height:1.5}
textarea:focus-visible{outline:4px solid #b54e1e;outline-offset:4px}
.special-lesson .choices{flex-direction:column}
.special-lesson .choice.word{font-size:clamp(64px,10vw,110px);width:100%;line-height:1.25;min-height:180px}
.special-lesson .letters button{font-size:clamp(70px,11vw,110px);min-width:120px;min-height:140px}
.special-lesson .model{font-size:clamp(64px,10vw,110px);letter-spacing:4px;line-height:1.3}
.special-lesson canvas{aspect-ratio:10/7}
.letter-reference{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px;margin:20px 0}
.letter-reference span{font-size:110px;line-height:1.1}.letter-reference strong{font-size:32px;color:#963a13}

.target-letter{display:block;font-size:clamp(140px,22vw,230px);font-weight:850;color:#174da6;line-height:1.05;margin:14px 0}
audio{display:block;width:100%;max-width:700px;margin:18px 0;min-height:54px}.record-item{border-top:1px solid #b8c6bd;padding:20px 0}.audio-lesson{display:block;width:100%;margin:16px 0;font-size:28px;text-align:left}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.choice{min-width:0;min-height:145px;font-size:clamp(70px,10vw,120px);padding:12px}
.special-lesson .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.special-lesson .choice.word{font-size:clamp(32px,5vw,68px);min-height:140px}
.shape-choice{min-width:0;min-height:180px}.shape{width:120px;height:120px}.rectangle{width:145px;height:85px}
.target-letter{font-size:clamp(110px,15vw,155px);margin:5px 0}.letter-reference{margin:8px 0}.letter-reference span{font-size:80px}
.guided-sheet{max-width:min(540px,65vh);margin:auto;border:2px solid #a5b7aa;border-radius:20px;overflow:hidden;background:#fffef9}.guided-sheet canvas{aspect-ratio:1}
@media(max-width:500px){.shape{width:90px;height:90px}.rectangle{width:105px;height:65px}.shape-choice{min-height:125px}.special-lesson .choice.word{font-size:32px}.choice{min-height:110px}}
@media(min-width:700px) and (max-height:950px){main:has(.choices){padding-top:10px}.panel:has(.choices){margin:10px 0;padding:14px}.choices{margin:12px 0}.prompt{margin:10px 0;font-size:28px}.toolbar{margin:10px 0}.feedback{margin:8px 0;min-height:30px}.target-letter{font-size:110px}.letter-reference span{font-size:64px}.choice{min-height:125px}.dots{margin:8px auto}.dot{width:45px;height:45px;flex-basis:45px}}
/* Sui tablet il modello occupa la colonna sinistra e le quattro risposte la destra. */
@media(min-width:700px){
 .panel:has(>.choices):not(.special-lesson){display:grid;grid-template-columns:minmax(190px,0.85fr) minmax(300px,1.15fr);column-gap:24px;align-items:center}
 .panel:has(>.choices):not(.special-lesson)>.prompt,.panel:has(>.choices):not(.special-lesson)>.toolbar,.panel:has(>.choices):not(.special-lesson)>.letter-reference,.panel:has(>.choices):not(.special-lesson)>.dots,.panel:has(>.choices):not(.special-lesson)>#listen{grid-column:1}
 .panel:has(>.choices):not(.special-lesson)>.choices{grid-column:2;grid-row:1 / span 4;align-self:center}
 .panel:has(>.choices):not(.special-lesson)>.feedback{grid-column:1 / -1}
 .panel:has(>.choices):not(.special-lesson)>#next{grid-column:2}
 .panel:has(>.choices):not(.special-lesson)>.picture{grid-column:1;font-size:120px;margin:4px 0}
 .panel:has(>.choices) .dot{width:42px;height:42px;flex-basis:42px}
}