/* Illustrated Teaching DNA introduction; existing exam demonstrations stay untouched. */
.pf-dna-wow{background:linear-gradient(145deg,#f4faf9,#fffdf7);color:#153e4b}
.pf-dna-wow *{box-sizing:border-box}
.pf-dna-hook{max-width:900px;margin-bottom:28px}
.pf-dna-hook p{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.85;margin:0 0 14px}
.pf-dna-hook p.pf-dna-hook-core{font-size:clamp(1.45rem,2.9vw,2rem);font-weight:600;line-height:1.6;margin-bottom:0;text-wrap:balance}
.pf-dna-hook-core strong{color:#086879;text-decoration:underline;text-decoration-color:#b6e3dd;text-underline-offset:7px;text-decoration-thickness:4px}
.pf-dna-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:center;margin-bottom:28px}
.pf-dna-scene{margin:0;min-width:0}
.pf-dna-scene img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid #d9e6df;box-shadow:0 10px 25px #2a4e5912}
.pf-dna-scene figcaption{font-size:.76rem;line-height:1.7;color:#5a7074;margin-top:8px}
.pf-dna-step-label{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:#0b667a}
.pf-dna-full-sentence h3{font-size:1.15rem;margin:8px 0 12px;line-height:1.6}
.pf-dna-full-sentence .pf-dna-sentence{font-family:'Space Grotesk','IBM Plex Sans Thai',sans-serif;font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:500;line-height:1.85;overflow-wrap:anywhere;margin:0}
.pf-dna-full-sentence .pf-dna-example-note{font-size:.8rem;color:#5a7074;margin:14px 0 0}
.pf-dna-steps{display:grid;gap:14px}
.pf-dna-step{border:1px solid #b7d9df;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 4px 0 #e1eeec}
.pf-dna-step>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:16px 20px;list-style:none;cursor:pointer;font-weight:700;color:#14546a;line-height:1.6}
.pf-dna-step>summary::-webkit-details-marker{display:none}
.pf-dna-step>summary::after{content:none}
.pf-dna-step>summary small{display:inline-block;margin-right:14px;font-size:.75rem;color:#466a73;font-family:'Space Grotesk',sans-serif}
.pf-dna-step>summary:focus-visible{outline:3px solid #0b6c80;outline-offset:-4px;border-radius:16px}
.pf-dna-step>summary:hover,.pf-dna-step[open]>summary{background:#edf8fa}
.pf-dna-expand{font-size:1.5rem;flex:none;line-height:1}
.pf-dna-step[open]>summary .pf-dna-expand{transform:rotate(180deg)}
.pf-dna-step-body{padding:20px;border-top:1px solid #d9e8e8}
.pf-dna-step-body h4{font-size:1rem;line-height:1.7;margin:0 0 12px}
.pf-dna-step-body p{line-height:1.85;margin:0 0 16px;color:#415e67}
.pf-dna-chunks{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 4px;margin:16px 0 22px;max-width:100%}
.pf-dna-unit{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%;min-width:0}
.pf-dna-separator{flex:none;line-height:1.7;color:#6a7c80;font-size:1.15rem}
.pf-dna-chunk{min-width:0;font-size:1.15rem;line-height:1.7;padding:0 8px 4px;border-bottom:2px solid currentColor}
.pf-dna-chunk strong{font-weight:700;overflow-wrap:anywhere}
.pf-dna-chunk small{display:block;font-size:.8rem;font-weight:400;line-height:1.7;color:#4e676e;margin-top:4px}
.pf-dna-step-body .pf-dna-clause{padding:12px 16px;border-left:3px solid #c5a75c;background:#fffbef;font-size:1.05rem;line-height:1.8;overflow-wrap:anywhere}
.pf-dna-step-body .pf-dna-translation{font-size:1rem;color:#264f5b;margin:0}
.pf-dna-takeaway{margin-top:24px;padding:18px 22px;border:1px solid #e5d6ae;border-radius:17px;background:#fff8e8}
.pf-dna-takeaway h3{font-size:1rem;margin:0 0 7px;line-height:1.6;color:#655329}
.pf-dna-takeaway p{margin:0;line-height:1.85;color:#584e36}
@media(max-width:800px){.pf-dna-story{grid-template-columns:minmax(0,1fr);gap:20px}.pf-dna-scene{max-width:660px}.pf-dna-full-sentence{max-width:68ch}.pf-dna-hook{margin-bottom:22px}}
@media(max-width:600px){.pf-dna-wow{padding-block:36px}.pf-dna-scene img{border-radius:17px}.pf-dna-step>summary{padding:14px}.pf-dna-step>summary small{display:block;margin:0 0 3px}.pf-dna-step-body{padding:16px 14px}.pf-dna-chunks{gap:12px 2px}.pf-dna-unit{gap:4px}.pf-dna-chunk{font-size:1.05rem;padding-inline:5px}.pf-dna-chunk small{font-size:.78rem}.pf-dna-takeaway{padding:16px;margin-top:20px}}
/* Tap to Understand: one compact sentence row and independent meaning panels. */
.pf-dna-step-one{margin-bottom:20px}
.pf-dna-banner{display:flex;align-items:center;gap:16px;min-height:64px;margin:0;padding:14px 20px;background:#e6f5fa;color:#14546a;font-size:1.05rem;font-weight:700;line-height:1.6}
.pf-dna-step-one .pf-dna-story{margin:0;padding:20px;gap:24px}
.pf-dna-step .pf-dna-banner-number{display:inline-block;flex:none;padding:4px 10px;margin:0 12px 0 0;border-radius:9px;background:#d0edf5;color:#14546a;font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;line-height:1.7}
.pf-dna-banner .pf-dna-banner-number{margin-right:0}
#pf-dna-main{border-color:#b6ded1;box-shadow:0 4px 0 #e0eee7}
#pf-dna-main>summary,#pf-dna-main>summary:hover{background:#e8f7ee;color:#205c49}
#pf-dna-main .pf-dna-banner-number{background:#cdebdc;color:#205c49}
#pf-dna-detail{border-color:#ead1aa;box-shadow:0 4px 0 #f6ecdd}
#pf-dna-detail>summary,#pf-dna-detail>summary:hover{background:#fff3df;color:#715126}
#pf-dna-detail .pf-dna-banner-number{background:#f1dcb8;color:#715126}
.pf-dna-step-body .pf-dna-tap-invite{font-size:.94rem;margin:0 0 12px}
.pf-dna-chunks{gap:8px 5px;align-items:center;margin:12px 0 16px}
.pf-dna-unit{gap:7px;align-items:center}
.pf-dna-separator{align-self:center}
.pf-dna-chunk{display:inline-block;max-width:100%;min-height:46px;border:1px solid currentColor;border-radius:11px;padding:8px 12px;font:600 1.05rem/1.55 'Space Grotesk','IBM Plex Sans Thai',sans-serif;background:#f5faf9;cursor:pointer;white-space:normal;text-align:left;overflow-wrap:anywhere;box-shadow:0 2px 0 #284c5410}
.pf-dna-chunk.pf-subject,.pf-dna-chunk.pf-object{background:#edf8f0}
.pf-dna-chunk.pf-verb{background:#edf5ff}
.pf-dna-chunk.pf-modifier{background:#fff8e9}
.pf-dna-chunk:hover{box-shadow:0 3px 8px #284c5420}
.pf-dna-chunk[aria-expanded="true"]{box-shadow:inset 0 0 0 1px currentColor,0 3px 8px #284c5415}
.pf-dna-chunk:focus-visible,.pf-dna-reset:focus-visible{outline:3px solid #0b6c80;outline-offset:3px}
.pf-dna-meanings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.pf-dna-meaning{border:1px solid #d3e5e1;border-radius:13px;background:#f8fcfa;padding:16px;min-width:0;overflow-wrap:anywhere}
.pf-dna-meaning.pf-verb{background:#f3f8ff;border-color:#cfdfed}
.pf-dna-meaning.pf-modifier{background:#fffbf2;border-color:#ebdfc8}
.pf-dna-meaning h4{font-size:1rem;margin:0 0 8px}
.pf-dna-meaning p{margin:0;font-size:.94rem;line-height:1.75}
.pf-dna-combined{background:#fff7e4;border:1px solid #eddfb9;border-radius:13px;padding:15px 18px;margin-top:16px;color:#4d502e}
.pf-dna-combined span{font-size:.85rem}
.pf-dna-combined p{font-size:1.1rem;font-weight:600;margin:5px 0 0;color:#164c5a}
.pf-dna-reset{font:inherit;font-size:.86rem;color:#0b667a;background:none;border:1px solid #bdd5db;border-radius:9px;min-height:44px;padding:8px 12px;margin:16px 0;cursor:pointer}
.pf-dna-wow [hidden]{display:none!important}
@media(max-width:600px){.pf-dna-banner{padding:14px;font-size:1rem;gap:10px}.pf-dna-step-one .pf-dna-story{padding:14px;gap:16px}.pf-dna-step>summary small.pf-dna-banner-number{display:inline-block;margin:0 7px 0 0;font-size:.7rem;padding:4px 7px}.pf-dna-chunks{gap:8px 2px}.pf-dna-unit{gap:4px}.pf-dna-chunk{font-size:.94rem;padding:8px 9px;min-height:44px}.pf-dna-meaning{padding:14px}.pf-dna-meanings{grid-template-columns:minmax(0,1fr)}}
.pf-dna-step{scroll-margin-top:100px}