*{box-sizing:border-box;margin:0;padding:0}:root{--p:#7457d9;--pd:#493783;--text:#3e4050;--muted:#747686;--line:#ece8f4;--bg:#f8f7fc}body{font-family:Poppins,sans-serif;background:var(--bg);color:var(--text)}.page{max-width:1250px;margin:auto;padding:34px}.hero{padding:34px;border-radius:30px;background:linear-gradient(130deg,#eee8ff,#fff0f5 55%,#e9f8f3)}.hero span,.preview>span{color:var(--p);font-size:.7rem;font-weight:700;letter-spacing:.08em}.hero h1{margin-top:8px;font-size:2.2rem;color:var(--pd)}.hero p{margin-top:10px;color:var(--muted)}.layout{margin-top:24px;display:grid;grid-template-columns:.8fr 1.2fr;gap:22px}.panel{padding:26px;border:1px solid var(--line);border-radius:25px;background:#fff}.panel h2{margin-bottom:20px}.panel label{display:block;margin:15px 0 7px;font-size:.74rem;font-weight:600}.panel select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#faf9fd}.source-note,.standard,.example,.page-source{margin-top:20px;padding:17px;border-radius:15px}.source-note{background:#fff6dc}.standard{background:#f3effd}.example{background:#e9f8f3}.page-source{background:#faf9fd}.source-note p,.standard p,.example p{margin-top:6px;color:var(--muted);font-size:.72rem;line-height:1.6}.preview h3{margin-top:20px;font-size:.9rem}.preview ul{margin-top:8px;padding-left:20px}.preview li,.preview>p{margin-top:7px;font-size:.76rem;line-height:1.65}.page-source strong{font-size:.68rem;color:var(--p)}@media(max-width:760px){.layout{grid-template-columns:1fr}.page{padding:18px}.hero h1{font-size:1.7rem}}