:root{--ink:#183f43;--teal:#076d70;--deep:#045457;--plum:#6f3a82;--gold:#b77b19;--mist:#edf5f5;--ivory:#fffdf8;--line:#c9dcdc;--muted:#52696b;--shadow:0 18px 48px rgba(24,63,67,.11)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:linear-gradient(145deg,var(--ivory),var(--mist));font:1rem/1.6 Inter,Aptos,"Segoe UI",Arial,sans-serif}a{color:var(--deep);text-underline-offset:.2em}:focus-visible{outline:4px solid #f3b43f;outline-offset:3px}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem max(1rem,calc((100% - 1040px)/2));background:#fff;border-bottom:1px solid var(--line)}.demo-brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;font:700 1.35rem Georgia,serif}.demo-brand img{width:46px;height:46px;object-fit:contain}.demo-back{font-weight:800}.demo-main{width:min(calc(100% - 2rem),1040px);margin:0 auto;padding:clamp(2rem,6vw,4.5rem) 0}.eyebrow{margin:0 0 .5rem;color:var(--plum);font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}h1,h2{font-family:Georgia,"Times New Roman",serif;color:var(--deep);line-height:1.12}h1{margin:0 0 .65rem;font-size:clamp(2rem,5vw,3.6rem)}h2{margin:.2rem 0 .5rem;font-size:clamp(1.5rem,3vw,2.15rem)}.lede{max-width:720px;margin:0 0 1.5rem;color:var(--muted);font-size:1.08rem}.demo-shell{padding:clamp(1rem,3vw,2rem);background:#fff;border:1px solid var(--line);border-top:6px solid var(--teal);border-radius:22px;box-shadow:var(--shadow)}.source{margin:1rem 0;padding:1rem;background:#f7f0f8;border-left:5px solid var(--plum);border-radius:10px}.source p{margin:0}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.demo-card{display:grid;gap:.4rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:13px}.demo-card strong{line-height:1.35}.demo-card select{width:100%;padding:.7rem;border:2px solid #aec5c6;border-radius:9px;background:#fff;color:var(--ink);font:inherit}.builder-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.builder-row select{width:100%;padding:.75rem;border:2px solid #aec5c6;border-radius:10px;background:#fff;color:var(--ink);font:inherit}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1rem}.actions button{padding:.75rem 1rem;border:2px solid var(--teal);border-radius:10px;background:var(--teal);color:#fff;font:inherit;font-weight:850;cursor:pointer}.actions .secondary{color:var(--deep);background:#fff}.feedback{min-height:1.7rem;font-weight:800}.feedback.good{color:#176243}.feedback.bad{color:#a52f3b}.correct{border-color:#2d8868!important;background:#eefaf4!important}.incorrect{border-color:#c05b62!important;background:#fff2f2!important}details{margin-top:1rem;padding:.8rem 1rem;background:#fff7df;border-radius:10px}summary{cursor:pointer;font-weight:850}.demo-note{margin-top:1.25rem;color:var(--muted);font-size:.9rem}.demo-footer{padding:2rem 1rem;color:#e8f3f3;background:#123f43;text-align:center}
@media(max-width:700px){.demo-grid,.builder-row{grid-template-columns:1fr}.demo-header{align-items:flex-start}.demo-back{font-size:.9rem}}