.ex-hero{background:linear-gradient(120deg,#e6f4ff,#eee8fb);padding:2rem;border:1px solid #d9e7f5;border-radius:24px;margin-bottom:1.5rem}.ex-hero p{max-width:760px}.ex-cover{background:#e9e4f7;color:#466b9b;font-size:2.5rem;padding:1rem 1.5rem}.ex-stage{padding:clamp(1rem,3vw,2rem);min-height:300px}.ex-options{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}.ex-options button{min-width:90px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}.ex-symbol,.ex-design{width:86px;height:86px;max-width:100%}.ex-design{width:120px;height:120px}.ex-options button.selected{outline:3px solid #6d53a3;background:#e8e1f7;color:#173b63}.ex-words{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}.ex-words span{padding:1rem 1.4rem;background:#edf5fc;border-radius:14px;font-size:1.3rem}.ex-words small{display:block;color:#58739a;font-size:.8rem}.ex-reading{white-space:pre-wrap;font-size:1.15rem;line-height:1.8;background:#f0f6fd;padding:1.4rem;border-radius:14px;margin:1rem 0;max-width:850px}.ex-board{display:grid;gap:.4rem;max-width:440px;margin:1.2rem auto}.ex-board-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ex-board-4{grid-template-columns:repeat(4,minmax(0,1fr))}.ex-cell{aspect-ratio:1;min-width:0;min-height:60px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;background:#f1f6fc;border:1px solid #bed3e7;border-radius:10px;padding:.25rem}.ex-cell .ex-symbol{width:60px;height:60px}.ex-cell small{width:100%;text-align:center;font-size:.75rem}.ex-step-number{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#e0d6f3;margin:.1rem}.ex-pairs{display:flex;flex-wrap:wrap;gap:1rem}.ex-pairs div{min-width:130px;background:#f2f6fd;padding:1rem;border-radius:14px}.ex-pairs dt{font-weight:700}.ex-pairs dd{margin:0;padding-top:.5rem;color:#6f529e}.ex-example{display:flex;gap:1.5rem;flex-wrap:wrap;margin:1rem 0}.ex-example h3{font-size:.9rem}.ex-design-controls fieldset{border:1px solid #c8dbed;border-radius:14px;margin:1rem 0;padding:1rem}.ex-target{display:flex;justify-content:center;gap:2rem;margin:2rem 0}.ex-target .ex-symbol{width:110px;height:110px}.ex-sequence{padding:1rem;background:#f0f5fa;border-radius:12px;min-height:3rem}.ex-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}.ex-summary div{border:1px solid #d9e5f0;border-radius:14px;padding:1rem}.ex-summary strong{display:block;font-size:1.5rem;color:#17699d}.ex-summary span{font-size:.85rem}.ex-record{padding:.7rem 0;border-bottom:1px solid #dce8f2}.ex-record p{overflow-wrap:anywhere}.ex-stage textarea{width:100%;box-sizing:border-box}.ex-stage button:focus-visible{outline:3px solid #7355b0;outline-offset:3px}@media(max-width:650px){.ex-hero{padding:1.2rem}.ex-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ex-options{gap:.45rem}.ex-options button{min-width:70px}.ex-design{width:95px;height:95px}.ex-board{max-width:340px}.ex-cell .ex-symbol{width:48px;height:48px}}@media(prefers-reduced-motion:reduce){.ex-stage *{animation:none!important;transition:none!important}}