#mx-demo .user-guide{max-width:1400px;margin:auto;padding:24px;color:#192c42}#mx-demo .guide-header{display:flex;justify-content:space-between;gap:24px;padding:28px;background:linear-gradient(120deg,#e8f3ff,#f6fafb);border:1px solid #d5e3ee;border-radius:18px}#mx-demo .guide-header h1{font-size:clamp(28px,4vw,40px);margin:8px 0}#mx-demo .guide-header p{max-width:760px;line-height:1.7}#mx-demo .guide-header label,#mx-demo .guide-controls label{display:grid;gap:8px;font-weight:600}#mx-demo .guide-header select,#mx-demo .guide-controls input{padding:12px;border:1px solid #b8c9d9;border-radius:9px;background:white;color:#192c42;font:inherit}#mx-demo .guide-back{display:block;margin-top:16px}#mx-demo .guide-controls{display:grid;grid-template-columns:minmax(230px,1fr) 2fr;gap:24px;margin:24px 0}#mx-demo .guide-controls fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}#mx-demo .guide-controls legend{margin-bottom:8px;font-weight:600}#mx-demo .guide-controls button{padding:10px 14px;border:1px solid #b8c9d9;border-radius:30px;background:white;color:#192c42;cursor:pointer}#mx-demo .guide-controls button[aria-pressed=true]{background:#173e68;color:white;border-color:#173e68}#mx-demo .guide-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:26px;align-items:start}#mx-demo .guide-index{max-height:78vh;overflow:auto;padding-right:10px;position:sticky;top:15px}#mx-demo .guide-index button{display:block;width:100%;text-align:left;padding:14px;margin-bottom:8px;background:white;border:1px solid #d7e1e9;border-radius:10px;color:#192c42;cursor:pointer}#mx-demo .guide-index button strong{display:block;font-size:15px}#mx-demo .guide-index button span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.5;margin-top:6px;color:#52657a}#mx-demo .guide-index button[aria-current=true]{border-color:#286ca6;background:#edf6ff;box-shadow:inset 3px 0 #286ca6}#mx-demo .guide-layout article{background:white;border:1px solid #d7e1e9;border-radius:16px;padding:clamp(20px,4vw,42px);min-width:0;line-height:1.85;overflow-wrap:anywhere}#mx-demo .guide-layout article h2{font-size:28px;line-height:1.3;margin:12px 0 20px}#mx-demo .guide-layout article h3{font-size:19px;margin:22px 0 10px}#mx-demo .guide-layout article li{padding-left:8px;margin-bottom:16px}#mx-demo .guide-article-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#52657a}#mx-demo .guide-summary{font-size:18px}#mx-demo .guide-note,#mx-demo .guide-example{padding:4px 20px 12px;background:#f1f6fa;border-left:3px solid #4183b5;border-radius:5px;margin-top:24px}#mx-demo .guide-example{background:#f3f8f3;border-color:#51946a}#mx-demo .user-guide :focus-visible{outline:3px solid #3679b8;outline-offset:3px}@media(max-width:760px){#mx-demo .user-guide{padding:12px}#mx-demo .guide-header{display:block;padding:20px}#mx-demo .guide-header>div+div{margin-top:20px}#mx-demo .guide-controls,#mx-demo .guide-layout{grid-template-columns:1fr}#mx-demo .guide-index{position:static;max-height:320px;border-bottom:1px solid #d7e1e9}#mx-demo .guide-layout article h2{font-size:24px}}@media print{#mx-demo .guide-index,#mx-demo .guide-controls,#mx-demo .guide-header select,#mx-demo .guide-back{display:none}#mx-demo .guide-layout{display:block}#mx-demo .guide-layout article{border:0}#mx-demo .guide-header{background:white}#mx-demo .user-guide{padding:0}}

#mx-demo .guide-index button strong{color:inherit;min-width:0} #mx-demo .guide-header label,#mx-demo .guide-controls label{display:grid}