.vocab-demo-card{padding:clamp(18px,3vw,32px);margin:0 0 24px;border:2px solid #e4b953;border-radius:24px;background:#fff9e7;color:#244330;box-shadow:0 8px 24px #0001}
.vocab-demo-card h2{font-size:clamp(23px,2.5vw,34px);margin:14px 0 10px}
.vocab-demo-card p{max-width:78ch;line-height:1.5}
.vocab-demo-badge{background:#2f7d4f;color:white;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:800}
.vocab-demo-card select{display:inline-block;max-width:100%;margin:10px 14px 14px 8px;padding:12px;border:1px solid #adc4a9;border-radius:12px;background:white;color:#244330;font-size:16px}
#vocabDemoPlay{padding:14px 22px;border:0;border-radius:12px;background:#2f7d4f;color:white;font-size:18px;font-weight:800;cursor:pointer}
.vocab-demo-detail{font-size:14px;color:#526152}.vocab-demo-card a{color:#24633d;font-weight:750}
.demo-locked{opacity:.5;position:relative;cursor:not-allowed}.demo-locked:after{content:'🔒';position:absolute;right:6px;top:6px;font-size:13px;pointer-events:none}
.demo-fixed{opacity:.8;cursor:default}.demo-locked button,.demo-fixed input{cursor:inherit}.vocab-demo-result{font-size:14px;text-align:center;margin:16px auto;max-width:50ch}
@media(max-width:600px){.vocab-demo-card label,.vocab-demo-card select,#vocabDemoPlay{display:block;width:100%;margin-left:0;box-sizing:border-box}}
.vocab-demo-controls{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 8px}.vocab-demo-controls label{display:flex;flex-direction:column;gap:6px;font-weight:750;flex:1 1 210px;min-width:0}.vocab-demo-controls select{display:block;width:100%;margin:0 0 12px;box-sizing:border-box;min-height:48px}
.vocab-demo-tutorials{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.vocab-demo-tutorials button{border:1px solid #adc4a9;background:white;color:#244330;border-radius:12px;min-height:44px;padding:10px 16px;font-size:15px;font-weight:750;cursor:pointer}.vocab-demo-tutorials button:focus-visible,#vocabDemoPlay:focus-visible{outline:3px solid #244330;outline-offset:3px}