.color-demo{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:25;font:14px/1.5 Arial,sans-serif;color:#302b24}.color-demo-toggle{border:1px solid #e3d9c8;border-left:0;border-radius:0 14px 14px 0;padding:14px 9px;background:white;box-shadow:0 5px 20px #00000018;display:flex;flex-direction:column;align-items:center;gap:7px;font-weight:bold;min-width:45px}.color-demo-toggle>span:first-child{font-size:23px}.color-demo-toggle>span:last-child{writing-mode:vertical-rl}.color-demo-panel{position:absolute;left:54px;top:50%;transform:translateY(-50%);width:280px;max-height:85vh;overflow:auto;background:white;border:1px solid #e3d9c8;border-radius:18px;padding:22px;box-shadow:0 15px 45px #00000025}.color-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.color-demo-heading h2{font-size:19px;margin:0;letter-spacing:0}.color-demo-heading button{font-size:25px;padding:0 5px}.color-demo-panel p{font-size:12px;color:#706b63}.demo-color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0}.demo-color-row input{width:52px;height:40px;padding:3px;border:1px solid #e3d9c8;border-radius:8px;background:white;cursor:pointer}.demo-color-row code{font-size:11px;display:block;margin-top:2px;color:#706b63}.demo-presets{display:grid;gap:8px;margin:15px 0}.demo-presets button,.demo-reset{border:1px solid #e3d9c8;border-radius:9px;padding:10px 12px;text-align:left;font-size:13px;display:flex;align-items:center;gap:8px}.demo-presets i{width:15px;height:15px;border-radius:50%;flex-shrink:0}.demo-reset{width:100%;justify-content:center;font-weight:bold;background:#f7f4ee}.demo-status{margin:12px 0 0;min-height:18px}.color-demo button:focus-visible,.color-demo input:focus-visible{outline:3px solid #555;outline-offset:3px}@media(max-width:600px){.color-demo-panel{left:46px;width:min(275px,calc(100vw - 58px));padding:18px}.color-demo-toggle{min-width:37px;padding:12px 7px}.color-demo-toggle>span:last-child{font-size:11px}}@media print{.color-demo{display:none!important}}