/* ChanceOda: a lightweight, responsive editing demonstration. */
.co-demo{margin:0;border:1px solid #d7e3da;border-radius:14px;background:#fff;box-shadow:0 18px 50px #164b2c0a;overflow:hidden;color:#214733;font-family:inherit}
.co-demo *{box-sizing:border-box}.co-demo-window{position:relative;overflow:hidden}.co-demo-bar{height:58px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #dfe7e0;background:#fff;font-size:12px}.co-demo-bar-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.co-demo-bar-brand>strong{font-size:16px;letter-spacing:-.7px}.co-demo-bar-brand>span:last-child{color:#6d7d71}.co-demo-mark{color:#03b753;font-size:27px;line-height:1;font-weight:700}.co-demo-divider{height:14px;width:1px;background:#d9e2d9;margin:0 6px}.co-demo-device{display:flex;align-items:center;gap:7px;color:#5f7767}.co-demo-device svg,.co-demo-save svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.co-demo-save{display:flex;align-items:center;gap:6px;background:#008c3c;color:#fff;padding:10px 15px;border-radius:6px;font-size:11px;font-weight:600;min-width:103px;justify-content:center;transition:background .3s,transform .2s}.co-demo[data-scene="saving"] .co-demo-save{transform:scale(.96);background:#075831}.co-demo[data-scene="saved"] .co-demo-save{background:#e4f5e8;color:#087a37}
.co-demo-workbench{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:436px}.co-demo-inspector{background:#fbfcfa;border-right:1px solid #e2e9e0;padding:20px 17px;display:flex;flex-direction:column}.co-demo-panel-title{font-size:11px;font-weight:650;display:flex;justify-content:space-between}.co-demo-panel-title>span{color:#9aa99b}.co-demo-tools{display:flex;justify-content:space-between;gap:6px;margin:18px 0 20px}.co-demo-tools>span{display:grid;place-items:center;width:31px;height:31px;font-size:16px;border-radius:5px;color:#8d9d8f}.co-demo-tools .is-active{background:#e5f4e8;color:#148642;font-weight:700}.co-demo-field-label{font-size:9px;color:#849288;margin:0 0 9px}.co-demo-element{display:flex;align-items:center;gap:9px;margin-bottom:24px;font-size:11px}.co-demo-element>span{font-size:18px;background:#edf3eb;border:1px solid #dce6d9;border-radius:4px;width:29px;height:31px;display:grid;place-items:center}.co-demo-element small{display:block;font-size:8px;color:#97a296;margin-top:3px}.co-demo-element i{margin-left:auto;font-style:normal;color:#0d9443;font-size:11px}.co-demo-input{height:32px;border:1px solid #dfe6dc;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:0 8px}.co-demo-input>span{color:#84987f}.co-demo-input-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:7px 0 23px}.co-demo-input-row .co-demo-input{font-size:9px;color:#82907e}.co-demo-input-row b{font-size:11px;color:#3a5239}.co-demo-swatches{display:flex;align-items:center;gap:8px}.co-demo-swatches i{width:19px;height:19px;border-radius:50%;background:#194c32;box-shadow:0 0 0 2px #fff,0 0 0 3px #c9dacc}.co-demo-swatches i:nth-child(2){background:#03c75a;box-shadow:none}.co-demo-swatches i:nth-child(3){background:#cde4b8;box-shadow:none}.co-demo-swatches i:nth-child(4){background:#f5f3e8;box-shadow:inset 0 0 0 1px #e2e4d7}.co-demo-swatches>span{color:#789572;font-size:18px}.co-demo-panel-tip{margin-top:auto;padding-top:34px;font-size:10px;line-height:1.8;color:#94a18e}.co-demo-panel-tip>span,.co-demo-panel-tip>strong{display:block}.co-demo-panel-tip>strong{color:#6c8364;font-weight:500}
.co-demo-stage{position:relative;min-width:0;padding:24px 28px 26px;background:#edf2ec;display:flex;align-items:center;justify-content:center}.co-demo-page{width:100%;background:#fff;box-shadow:0 7px 24px #25472b0a;overflow:hidden;border:1px solid #e2e9df}.co-demo-site-nav{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #eceee6;gap:12px}.co-demo-site-nav>strong{font-family:Georgia,serif;font-size:26px;letter-spacing:-1.5px;line-height:1;color:#22482f}.co-demo-site-nav>strong>span{font-family:Arial,sans-serif;font-size:9px;vertical-align:top;margin-left:2px;line-height:1.8;letter-spacing:0}.co-demo-site-nav>div{display:flex;gap:25px;color:#6d786a;font-size:8px}.co-demo-site-nav>i{font-style:normal;font-size:17px}.co-demo-page-hero{display:grid;grid-template-columns:1fr 45%;min-height:332px}.co-demo-page-copy{position:relative;padding:37px 26px 20px;display:flex;flex-direction:column;min-width:0;background:#fafbf5}.co-demo-eyebrow{font-size:8px;letter-spacing:1.3px;font-weight:500;color:#758467;margin-bottom:24px;white-space:nowrap}.co-demo-text-box{position:relative;align-self:flex-start;max-width:100%;outline:1px solid transparent;outline-offset:7px}.co-demo-page-title{display:block;font-size:clamp(26px,2.9vw,39px);letter-spacing:-1.5px;line-height:1.35;font-weight:650;white-space:nowrap;min-height:2.7em;color:#21442e}.co-demo-page-copy>p{font-size:11px;line-height:1.8;color:#8a947e;margin:19px 0 19px;font-weight:400;letter-spacing:-.2px}.co-demo-page-cta{display:flex;align-items:center;gap:25px;align-self:flex-start;font-size:9px;border-bottom:1px solid #afc0a0;padding-bottom:8px;color:#415f34}.co-demo-page-cta>b{font-size:13px;font-weight:500}.co-demo-page-index{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:27px;font-size:6px;letter-spacing:1px;color:#95a088}.co-demo-page-index>i{width:22px;height:1px;background:#bfcbb6}.co-demo-text-toolbar{position:absolute;left:-8px;top:-34px;padding:6px 9px;display:flex;gap:10px;align-items:center;border:1px solid #d5e7d7;border-radius:5px;background:#fff;box-shadow:0 3px 10px #2447270c;color:#1c7a3d;font-size:11px;opacity:0;transition:opacity .2s;white-space:nowrap}.co-demo-text-toolbar>span{font-size:8px;color:#78916e}.co-demo-text-toolbar>b{border-left:1px solid #e0e8dd;padding-left:9px;font-size:10px}.co-demo-handle{position:absolute;bottom:-10px;right:-10px;width:6px;height:6px;background:#fff;border:1px solid #03b453;opacity:0}.co-demo[data-phase="text"] .co-demo-text-box{outline-color:#03b453}.co-demo[data-phase="text"] .co-demo-text-toolbar,.co-demo[data-phase="text"] .co-demo-handle{opacity:1}.co-demo[data-scene="select"] .co-demo-page-title span{background:#c7edcb;box-shadow:2px 0 #c7edcb}.co-demo[data-scene="typing"] .co-demo-page-title span:last-child:after{content:"";display:inline-block;height:.88em;border-right:2px solid #079f46;margin-left:2px;vertical-align:-.06em;animation:co-demo-caret .65s steps(1) infinite}.co-demo-art{position:relative;overflow:hidden;min-width:0;background:#dde8cf;align-self:stretch}.co-demo-art>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.co-demo-art-edit{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;background:#fff;border:1px solid #cde2ca;border-radius:5px;padding:8px 12px;box-shadow:0 4px 15px #25472718;opacity:0;transition:opacity .2s}.co-demo[data-phase="image"] .co-demo-art{outline:2px solid #03b453;outline-offset:-2px}.co-demo[data-phase="image"] .co-demo-art-edit{opacity:1}
.co-demo-image-picker{position:absolute;top:70px;right:43px;z-index:3;width:276px;padding:18px;background:#fff;border:1px solid #d4e3d3;border-radius:10px;box-shadow:0 16px 42px #1c43252b;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.co-demo-image-picker>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:12px}.co-demo-image-picker>div:first-child>span{font-size:19px;font-weight:300;color:#819a7b}.co-demo-image-picker>p{font-size:9px;color:#809079;margin:8px 0 15px}.co-demo-image-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.co-demo-image-options>div{position:relative;border:1px solid #e1e8db;border-radius:5px;padding:4px;background:#f9fbf6}.co-demo-image-options img{display:block;width:100%;height:116px;object-fit:cover;border-radius:3px}.co-demo-image-options span{display:block;font-size:9px;color:#64755a;text-align:center;padding:8px 0 3px}.co-demo-image-options i{display:none;position:absolute;top:8px;right:8px;width:18px;height:18px;background:#008c3c;color:#fff;font-size:11px;font-style:normal;border-radius:50%;text-align:center;line-height:18px}.co-demo-image-picker>small{display:block;margin-top:12px;font-size:8px;color:#97a28f}.co-demo[data-scene="library"] .co-demo-image-picker,.co-demo[data-scene="chosen"] .co-demo-image-picker{opacity:1;visibility:visible}.co-demo[data-scene="chosen"] [data-demo-image-choice]{border-color:#00ad4d;box-shadow:0 0 0 1px #00ad4d}.co-demo[data-scene="chosen"] .co-demo-image-options i{display:block}.co-demo-toast{position:absolute;bottom:40px;left:50%;transform:translate(-50%,8px);display:flex;align-items:center;gap:11px;background:#fff;box-shadow:0 8px 35px #1c482527;border:1px solid #d3e6d2;border-radius:9px;padding:15px 20px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;z-index:4}.co-demo-toast>i{font-style:normal;background:#e8f7e6;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;color:#05863d;font-size:13px}.co-demo-toast strong,.co-demo-toast span{display:block}.co-demo-toast strong{font-size:12px;font-weight:650}.co-demo-toast span{font-size:9px;color:#87967d;margin-top:4px}.co-demo[data-scene="saved"] .co-demo-toast{opacity:1;transform:translate(-50%,0)}
.co-demo-cursor{position:absolute;top:0;left:0;z-index:5;width:27px;pointer-events:none;opacity:0;will-change:transform}.co-demo[data-ready="true"] .co-demo-cursor{opacity:1}.co-demo-cursor svg{position:relative;display:block;width:27px;height:32px;fill:#10452b;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #173c2520)}.co-demo-cursor>span{position:absolute;top:29px;left:21px;border-radius:0 6px 6px 6px;background:#0c6b36;color:#fff;font-size:9px;padding:5px 8px;white-space:nowrap;box-shadow:0 2px 5px #16492a15}.co-demo-cursor>i{position:absolute;z-index:-1;left:-12px;top:-12px;width:30px;height:30px;border-radius:50%;background:#03c75a25;box-shadow:0 0 0 1px #03c75a40;opacity:0;transform:scale(.5)}.co-demo.is-clicking .co-demo-cursor>i{animation:co-demo-click .5s ease-out both}
.co-demo figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:#fff;border-top:1px solid #dfe7dc}.co-demo-caption-copy{display:flex;align-items:center;gap:10px}.co-demo-live-dot{height:6px;width:6px;border-radius:50%;background:#03bc53;box-shadow:0 0 0 4px #edf9e9;flex-shrink:0}.co-demo-caption-copy strong{display:block;font-size:12px;font-weight:600;letter-spacing:-.2px}.co-demo-caption-copy small{display:block;font-size:10px;color:#8b9983;margin-top:5px}.co-demo-example{align-self:flex-start;font-size:8px;border:1px solid #dce8d6;border-radius:3px;padding:3px 5px;color:#819076;margin-top:-1px;white-space:nowrap}.co-demo-controls{display:flex;align-items:center;gap:16px}.co-demo-controls[hidden]{display:none}.co-demo-steps{display:flex;align-items:center;gap:9px}.co-demo-steps>button{position:relative;font-family:inherit;background:none;border:0;color:#92a187;font-size:10px;font-weight:500;padding:8px 0;white-space:nowrap;cursor:pointer}.co-demo-steps>button>span{font-size:8px;margin-right:4px;color:#a4b399}.co-demo-steps>button.is-active{color:#087d36;font-weight:650}.co-demo-steps>button.is-active>span{color:#03a34a}.co-demo-steps>button.is-active:after{content:"";position:absolute;left:0;bottom:1px;height:2px;width:var(--step-progress,0%);max-width:100%;background:#03b951;border-radius:1px}.co-demo-steps>i{font-size:9px;color:#c2cdb9;font-style:normal}.co-demo-pause{font-family:inherit;display:grid;place-items:center;flex-shrink:0;border:1px solid #dbe7d5;color:#316442;background:#f8fbf5;width:29px;height:29px;border-radius:50%;font-size:12px;cursor:pointer;line-height:1}.co-demo-pause:hover{background:#e9f5e3}.co-demo.is-paused *{animation-play-state:paused!important}
@keyframes co-demo-click{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.7)}}@keyframes co-demo-caret{50%{opacity:0}}
@media(min-width:1450px){.co-demo-page-hero{min-height:390px}.co-demo-page-copy{padding:49px 38px 27px}.co-demo-eyebrow{margin-bottom:29px}.co-demo-page-title{font-size:43px}.co-demo-page-copy>p{font-size:12px}.co-demo-workbench{grid-template-columns:210px minmax(0,1fr)}.co-demo-inspector{padding:24px 22px}.co-demo-stage{padding:28px 35px}.co-demo-site-nav{height:59px;padding:0 37px}}
@media(max-width:1100px){.co-demo-workbench{grid-template-columns:155px minmax(0,1fr);min-height:399px}.co-demo-inspector{padding:20px 12px}.co-demo-stage{padding:21px}.co-demo-page-copy{padding:32px 19px 20px}.co-demo-page-title{font-size:clamp(24px,2.9vw,32px);letter-spacing:-1.1px}.co-demo-eyebrow{font-size:6px;letter-spacing:1px}.co-demo-page-hero{min-height:314px;grid-template-columns:1fr 44%}.co-demo-site-nav{padding:0 19px;height:48px}.co-demo-site-nav>div{gap:14px;font-size:7px}.co-demo figcaption{gap:15px;padding:17px 20px}.co-demo-example{display:none}.co-demo-caption-copy strong{font-size:11px}.co-demo-caption-copy small{font-size:9px}.co-demo-steps{gap:6px}.co-demo-controls{gap:10px}.co-demo-image-picker{right:33px;width:255px}}
@media(max-width:850px){.co-demo-workbench{grid-template-columns:1fr;min-height:0}.co-demo-inspector{display:none}.co-demo-page-title{font-size:36px}.co-demo-page-copy{padding:36px 26px 23px}.co-demo-page-hero{min-height:347px}.co-demo-page-index{font-size:7px}.co-demo-eyebrow{font-size:8px}.co-demo-page-copy>p{font-size:12px}.co-demo figcaption{flex-wrap:wrap;gap:15px}.co-demo-controls{margin-left:auto}.co-demo-page-cta{font-size:10px}}
@media(max-width:560px){.co-demo{border-radius:9px}.co-demo-bar{height:49px;padding:0 12px;gap:10px}.co-demo-bar-brand{gap:5px;font-size:8px}.co-demo-bar-brand>strong{font-size:12px;letter-spacing:-.5px}.co-demo-mark{font-size:21px}.co-demo-divider{height:10px;margin:0 3px}.co-demo-device{display:none}.co-demo-save{padding:8px 9px;min-width:78px;font-size:9px;gap:3px}.co-demo-save svg{width:13px;height:13px}.co-demo-stage{padding:13px 10px}.co-demo-site-nav{height:42px;padding:0 14px}.co-demo-site-nav>strong{font-size:21px}.co-demo-site-nav>div{font-size:6px;gap:12px}.co-demo-site-nav>i{font-size:13px}.co-demo-page-hero{grid-template-columns:1fr 43%;min-height:258px}.co-demo-page-copy{padding:26px 13px 16px}.co-demo-eyebrow{font-size:5px;letter-spacing:.7px;margin-bottom:22px}.co-demo-page-title{font-size:clamp(16px,4.7vw,26px);letter-spacing:-.7px;line-height:1.45;min-height:2.9em}.co-demo-text-box{outline-offset:4px}.co-demo-text-toolbar{top:-25px;left:-5px;padding:4px 6px;font-size:8px;gap:5px}.co-demo-text-toolbar>span{font-size:6px}.co-demo-text-toolbar>b{font-size:8px;padding-left:5px}.co-demo-handle{right:-7px;bottom:-7px}.co-demo-page-copy>p{font-size:8px;line-height:1.9;margin:17px 0}.co-demo-page-cta{font-size:7px;gap:10px;padding-bottom:5px}.co-demo-page-cta>b{font-size:10px}.co-demo-page-index{font-size:4px;letter-spacing:.4px;gap:5px;padding-top:25px}.co-demo-page-index>i{width:15px}.co-demo-art-edit{font-size:6px;top:9px;padding:6px 8px}.co-demo-image-picker{width:217px;top:63px;right:18px;padding:14px}.co-demo-image-picker>div:first-child{font-size:11px}.co-demo-image-picker>p{font-size:8px;margin-bottom:11px}.co-demo-image-options img{height:97px}.co-demo-image-options span{font-size:8px}.co-demo-image-picker>small{font-size:7px;margin-top:9px}.co-demo-cursor svg{width:23px;height:28px}.co-demo-cursor>span{font-size:7px;top:25px;left:18px;padding:4px 6px}.co-demo-toast{padding:12px 14px;gap:8px;bottom:26px}.co-demo-toast strong{font-size:10px}.co-demo-toast span{font-size:8px}.co-demo-toast>i{width:24px;height:24px;font-size:11px}.co-demo figcaption{padding:16px 15px;display:block}.co-demo-caption-copy{gap:10px}.co-demo-caption-copy strong{font-size:11px}.co-demo-caption-copy small{font-size:9px;margin-top:5px}.co-demo-example{display:block;margin-left:auto;font-size:7px}.co-demo-controls{margin-top:13px;justify-content:space-between;gap:9px;border-top:1px solid #edf1e8;padding-top:9px}.co-demo-steps{gap:9px}.co-demo-steps>button{font-size:9px}.co-demo-steps>button>span{font-size:7px;margin-right:3px}.co-demo-pause{height:27px;width:27px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.co-demo *{animation:none!important;transition:none!important}.co-demo.is-paused .co-demo-cursor{opacity:0}}