.color-playground{background:#f3eef9}.palette-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}.palette-controls button,.palette-controls label{background:#fff;border:1px solid #d9cee5;border-radius:12px;padding:10px 18px;color:#493461;font:inherit;font-size:14px}.palette-controls button{cursor:pointer}.palette-controls button[aria-pressed=true]{background:#533582;color:white;border-color:#533582}.palette-controls label{display:flex;align-items:center;gap:10px;padding:6px 12px}.palette-controls input{border:0;width:28px;height:30px;padding:0;background:none}.money-demo{--demo-accent:#8051c9;--demo-sidebar:#30204e;background:#f8f7fb;border:1px solid #dfd6e9;border-radius:20px;overflow:hidden;box-shadow:0 22px 60px #39235512;color:#30263c;font-family:system-ui,sans-serif}.money-demo>header{display:flex;justify-content:space-between;align-items:center;background:var(--demo-sidebar);color:white;padding:18px 25px}.money-demo>header span{font-size:12px;opacity:.8}.demo-body{display:flex;min-height:460px}.demo-body nav{width:130px;flex-shrink:0;background:var(--demo-sidebar);color:#fff;padding:22px 12px;display:flex;flex-direction:column;gap:10px}.demo-body nav>span,.demo-body nav>button{padding:13px 12px;font-size:13px}.demo-body button{font:inherit;cursor:pointer}.demo-body nav button{color:inherit;background:none;border:1px solid #ffffff40;border-radius:10px;text-align:left}.demo-body nav button b{float:right}.demo-selected{background:#ffffff1c;border-radius:10px}.demo-body aside{width:230px;flex-shrink:0;background:white;padding:16px 20px;border-right:1px solid #e5ddec}.demo-body aside[hidden]{display:none}.demo-body aside h3{margin:0 0 18px}.demo-body aside h3 button{float:right;border:0;background:#f4f0fa;border-radius:7px}.demo-person{padding:15px 0;border-bottom:1px solid #e5ddec;font-size:13px}.demo-person small{display:block;color:#178259;margin-top:7px}.demo-body aside p{font-size:13px;padding:7px 0}.demo-body aside p span{float:right}.demo-content{flex:1;min-width:0;padding:28px}.demo-content>small{font-weight:650;font-size:12px}.demo-content>small span{color:#80758b;font-weight:400}.demo-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.demo-title h3{font-size:26px;margin:15px 0 22px}.demo-title>span{font-size:11px;border:1px solid #e0d8e8;padding:6px 10px;border-radius:7px;background:#fff}.demo-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-stats article,.demo-chart{background:white;padding:20px;border:1px solid #e7e0ed;border-radius:13px}.demo-stats small{display:block;font-size:11px;color:#786c84}.demo-stats strong{display:block;font-size:26px;letter-spacing:-1px;margin-top:5px}.positive{color:#16825b}.negative{color:#c54c60}.demo-chart{margin-top:16px}.demo-chart>strong{font-size:14px}.demo-chart p{font-size:12px;color:#84778d;margin:4px 0}.demo-bars{display:flex;height:125px;align-items:end;gap:5%;padding:12px 3% 0}.demo-bars i{flex:1;height:var(--bar);background:var(--demo-accent);border-radius:6px 6px 0 0;opacity:.85}.demo-days{display:flex;justify-content:space-around;font-size:10px;color:#82758d;padding-top:9px}.demo-disclaimer{font-size:11px;color:#786b84}.hero-demo{margin:0;padding:12px;background:#f3eef9}.hero-demo .money-demo{height:680px}.hero-demo .demo-body{min-height:620px}.hero-demo .demo-chart{margin-top:25px}.hero-demo .demo-bars{height:230px}.hero-demo .demo-content{padding:35px}.hero-demo .demo-title h3{font-size:30px}.hero-demo .demo-body aside{width:240px}.hero-demo *{box-sizing:border-box}.easy-start .feature-icon{font-size:15px}.landing-preview-caption{color:#ded0ee!important}
@media(max-width:700px){.demo-body{position:relative;min-height:440px}.demo-body nav{width:84px;padding:16px 6px}.demo-body nav>span,.demo-body nav>button{font-size:10px;padding:12px 5px}.demo-content{padding:16px 12px}.demo-content>small{font-size:10px}.demo-content>small span{display:block}.demo-title h3{font-size:20px}.demo-title>span{display:none}.demo-stats{grid-template-columns:1fr;gap:7px}.demo-stats article{display:flex;justify-content:space-between;align-items:center;padding:10px}.demo-stats strong{font-size:19px;margin:0}.demo-chart{padding:12px}.demo-bars{height:90px}.demo-body aside{position:absolute;z-index:2;inset:0 auto 0 84px;width:220px;box-shadow:10px 0 30px #30204e20}.money-demo>header{padding:14px;font-size:14px}.money-demo>header span{font-size:10px}.palette-controls{gap:7px}.palette-controls button{padding:8px 12px}.palette-controls label{font-size:12px}}