:root{--pg-black:#171717;--pg-violet:#6730FF;--pg-magenta:#FF3168;--pg-cyan:#2EEFDC;--pg-grey:#F1F5F9}.version{margin-left:auto;color:#767a87;font-size:10px}.guide{height:calc(100% - 82px);padding:30px;overflow:auto;background:#fff}.guide-intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.guide-intro small,.usage small,.rules small,.tokens small{color:var(--pg-violet);font-size:9px;font-weight:700;letter-spacing:.1em}.guide-intro h2{margin:5px 0 0;font-size:34px}.guide-intro>p{max-width:520px;margin:0;color:#656976;font-size:13px;line-height:1.55}.palette-layout{display:grid;grid-template-columns:1fr 2.35fr;gap:14px;padding:14px;border-radius:24px;background:var(--pg-grey)}.palette-copy{padding:28px 25px;display:flex;flex-direction:column}.palette-copy>span{font-size:10px}.palette-copy h3{margin:auto 0 18px;font-size:31px;line-height:1.08}.palette-copy>p{max-width:360px;color:#4f535e;line-height:1.55}.palette-copy dl{margin:22px 0 0}.palette-copy dl div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #dce2e8;font-size:10px}.palette-copy dd{margin:0;font-weight:700}.swatches{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:260px 235px;gap:9px}.swatch{padding:24px;border-radius:17px;display:flex;flex-direction:column}.swatch h3{margin:0;font-size:25px}.swatch p{max-width:260px;font-size:11px;line-height:1.45;opacity:.76}.swatch footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between}.swatch button{padding:7px 9px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-size:9px}.swatch code{font-size:12px}.black{grid-column:span 3;background:var(--pg-black);color:#fff}.violet{grid-column:span 3;background:var(--pg-violet);color:#fff}.magenta,.cyan,.grey{grid-column:span 2}.magenta{background:var(--pg-magenta);color:#fff}.cyan{background:var(--pg-cyan);color:var(--pg-black)}.grey{border:1px solid var(--pg-black);background:var(--pg-grey);color:var(--pg-black)}.usage{margin-top:45px}.usage header h2,.rules h2,.tokens h2{margin:6px 0 20px;font-size:24px}.role-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.role-grid article{min-height:210px;padding:18px;border:1px solid #e5e5ea;border-radius:16px}.role-dot{width:16px;height:16px;display:block;border-radius:50%}.black-bg{background:var(--pg-black)}.violet-bg{background:var(--pg-violet)}.magenta-bg{background:var(--pg-magenta)}.cyan-bg{background:var(--pg-cyan);border:1px solid #1ebcaf}.grey-bg{background:var(--pg-grey);border:1px solid #dbe1e7}.role-grid h3{margin:18px 0 5px;font-size:14px}.role-grid p{min-height:38px;color:#737783;font-size:10px;line-height:1.4}.role-grid button,.role-grid div{margin-top:20px;padding:10px;border-radius:9px;font-size:9px;font-weight:700}.demo-primary{border:0;background:var(--pg-black);color:#fff}.demo-ai{background:#eee9ff;color:#4e20bf}.demo-alert{background:#ffe6ed;color:#c6174c}.demo-success{background:#d9fffa;color:#086c61}.demo-surface{background:var(--pg-grey);color:#626773}.rules{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:45px}.rules article{padding:25px;border-radius:18px;background:var(--pg-grey)}.rules .dont{background:var(--pg-black);color:#fff}.rules ul{margin:0;padding-left:18px}.rules li{margin:10px 0;font-size:11px}.tokens{margin:45px 0 20px;padding:25px;border:1px solid #e5e5ea;border-radius:18px}.tokens pre{margin:0;padding:18px;border-radius:12px;background:#111;color:#f4f4f6;overflow:auto;font-size:12px;line-height:1.6}
@media(max-width:1050px){.palette-layout{grid-template-columns:1fr}.palette-copy h3{margin:25px 0 15px}.role-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.version{display:none}.guide{height:auto;padding:20px 14px}.guide-intro{display:block}.guide-intro h2{font-size:28px}.guide-intro>p{margin-top:14px}.palette-layout{padding:8px}.palette-copy{padding:20px 14px}.swatches{display:block}.swatch{min-height:210px;margin-top:8px}.role-grid{grid-template-columns:1fr}.rules{grid-template-columns:1fr}.role-grid article{min-height:170px}}