/* DoneQuote onboarding prototype · demo only */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--font-heading:"Satoshi Variable";--font-sans:"DM Sans";--orange:hsl(21 90% 48%);--qshadow:#FFFFFF8C 0 .75px 0 inset,#00000008 0 .75px 0,#3C1E0A29 0 6px 15px -9px;--ring:#f59e0b}
@font-face{font-family:"Satoshi Variable";src:url(satoshi.woff2) format("woff2");font-weight:100 900}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:#e8e0d6;color:var(--color-foreground);font-family:var(--font-sans),sans-serif;overflow-x:hidden;overflow-y:auto}
h1,h2,h3,h4,p{margin:0}button{font:inherit;cursor:pointer}
#stage{position:absolute;left:50%;top:0;width:1440px;height:900px;transform-origin:top center;overflow:hidden}
#app{position:relative;width:1440px;height:900px}
#app:focus{outline:0}
/* left: quote canvas */
#left{position:absolute;left:0;top:0;width:720px;height:900px;z-index:2;background:var(--color-background);overflow:hidden;transition:transform .5s var(--ease-in-out),opacity .4s var(--ease-out)}
.fullscreen #left,.centered #left{transform:translateX(-100%);opacity:0}
#canvas{width:720px;height:900px;overflow:auto;scrollbar-width:none;padding:40px 24px 80px;scroll-behavior:smooth}
#canvas::-webkit-scrollbar{display:none}
#doc{display:flex;flex-direction:column;gap:20px;width:672px;font-size:11.5px;line-height:1.5}
/* right: orange column with the card */
#right{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;transform:translateX(360px);transition:transform .5s var(--ease-in-out);background:radial-gradient(ellipse 90% 70% at 50% 100%,#ff9a3d 0%,var(--orange) 70%)}
#logo{width:168px;height:36px;flex-shrink:0}.fullscreen #right,.centered #right{transform:translateX(0)}
#card{width:480px;background:#fff;border-radius:8px;box-shadow:#FFFFFF8C 0 .75px 0 inset,#00000008 0 .75px 0,#7A2E0040 0 24px 60px -12px;overflow:hidden;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.fullscreen #card{width:1000px}
#card-inner{display:flex;flex-direction:column;gap:28px;padding:44px 40px;text-align:center;transition:opacity .16s var(--ease-out),transform .16s var(--ease-out)}#card-inner.leaving{opacity:0;transform:translateY(-6px)}#card-inner.arrive{animation:arrive .24s var(--ease-out)}
.fullscreen #card-inner{padding:0;display:flex;flex-direction:row;gap:0;text-align:left}
@keyframes arrive{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.title{font:700 36px/40px var(--font-heading),sans-serif;letter-spacing:-1px;text-wrap:balance}
.lead{font-size:15px;line-height:22px;color:#7e6b5d}
.col{display:flex;flex-direction:column;gap:12px;width:100%}
/* controls */
.input{display:flex;align-items:center;width:100%;height:52px;padding:0 16px;background:#fff;border:1px solid #dccfc3;border-radius:8px;font-size:16px;color:var(--color-foreground);outline:0}
.input:focus{border-color:#e66b10;box-shadow:0 0 0 3px #ed721018}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;padding:0 20px;border:1px solid #e6600a;border-bottom-color:#c44e08;border-radius:8px;color:#fff;background:linear-gradient(#ff831d,#ee6007);box-shadow:inset 0 1px 0 #ffffff66,0 3px 5px #cc520014;font-size:15px;font-weight:500;white-space:nowrap;transition:transform .12s,box-shadow .16s}
@media(hover:hover) and (pointer:fine){.cta:hover{box-shadow:inset 0 1px 0 #ffffff66,0 4px 10px #cc520027}.opt:hover{border-color:#b7a999}}.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.6;cursor:default}
.quiet{background:none;border:0;color:#8a6c57;font-size:14px;padding:6px}
.search{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 14px;background:#fffdf9;border:1px solid #dccfc3;border-radius:8px;color:#a18a79;font-size:14px}
.search input{border:0;outline:0;background:transparent;font:inherit;color:var(--color-foreground);width:100%}
.options{display:flex;flex-direction:column;gap:8px;width:100%}
.opt{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;padding:16px;background:#fff;border:1px solid #e0dad7;border-radius:8px;text-align:left;transition:border-color .15s,box-shadow .15s}
.opt.sub{padding:20px}
.opt.selected{border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 20%,transparent)}
.opt .t{display:flex;flex-direction:column;gap:6px;flex:1}.opt b{font-size:14px;line-height:20px;font-weight:600}.opt span{font-size:14px;line-height:22px;color:var(--color-muted-foreground)}
.opt .dot{flex-shrink:0;width:20px;height:20px;border-radius:10px;border:2px solid #c9bfb7}
.opt.selected .dot{border:0;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/12px no-repeat}
.opt.hidden{display:none}
.terms{display:flex;flex-direction:column;gap:22px;text-align:left}.term{display:flex;align-items:center;gap:16px}
.term i{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;border-radius:8px;background:#ffe9c8;color:#a85b13}.term b{display:block;font-size:16px;font-weight:600;margin-bottom:3px}.term p{font-size:14px;color:#886b54}
.log{display:flex;flex-direction:column;gap:8px;width:100%;padding:0 24px;text-align:left}
.log div{display:flex;align-items:center;gap:12px;font-size:16px;line-height:24px;color:#a18a79;transition:color .3s}.log div.on{color:#392619}
.log i{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;border-radius:10px;border:2px solid #d6c6b6}
.log div.busy i{border:2px solid #f2d5aa;border-top-color:#e6600a;animation:spin 1s linear infinite}
.log div.on i{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23228443' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/18px no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}
/* fullscreen offer + account */
.offer{display:flex;flex-direction:column;gap:20px;flex:1;padding:44px 44px 40px;border-right:.75px solid #e0dad7}
.offer .title{text-align:left}
.ten{display:flex;align-items:center;gap:14px;padding:18px 22px;background:#fff2d9;border:1px solid #f2d5aa;border-radius:8px;font:700 34px/36px var(--font-heading),sans-serif}
.ten s{color:#a18a79}.ten svg{color:#a85b13}
.after{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding-top:22px;border-top:.75px solid #e0dad7}
.after-row{display:grid;grid-template-columns:104px 1fr;gap:12px;font-size:14px;line-height:21px;color:#5e4a3c}.after-row b{font-weight:600;color:var(--color-foreground)}
.plans{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:#e6600a;font-size:14px;font-weight:600;text-decoration:none}.plans svg{color:#e6600a}
.account{display:flex;flex-direction:column;gap:14px;flex:1;padding:44px 44px 36px;background:#FCFBFB}
.account h3{font:700 24px/30px var(--font-heading),sans-serif;letter-spacing:-.5px}.account .lead{font-size:14px;line-height:20px}
.google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;background:#fff;border:1px solid #dccfc3;border-radius:8px;font-size:14px;font-weight:500;margin-top:6px}
.or{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.06em;color:#a18a79}.or:before,.or:after{content:"";flex:1;height:.75px;background:#e0dad7}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:14px;font-weight:500}.field .input{height:44px;font-size:15px}
.small{font-size:12px;line-height:17px;color:#a18a79;text-align:center}.center{text-align:center}
/* ---------- quote document ---------- */
.sec{width:100%}
.shell{position:relative;padding:1.5px;border-radius:7.5px;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease-out)}
.qcard{position:relative;background:#FCFBFB;border:.75px solid #E0DAD7;border-radius:6px;padding:24px;box-shadow:var(--qshadow);transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out),opacity .4s var(--ease-out),filter .4s var(--ease-out)}
.ghost{transition:opacity .4s var(--ease-out),filter .4s var(--ease-out)}
.sec.hi .shell{transform:scale(1.015)}
.busy .sec:not(.hi) .qcard,.busy .sec:not(.hi) .ghost{opacity:.45;filter:blur(1.5px)}
.qcard h2{font:700 26px/32px var(--font-heading),sans-serif;letter-spacing:-.65px;margin-bottom:16px}
.qcard p+p{margin-top:8px}
.sec .empty{display:none}.sec.empty .real{display:none}.sec.empty .empty{display:flex}
.ghost{flex-direction:column;gap:14px;width:100%;padding:20px 24px;border:1.5px dashed #d6c6b6;border-radius:6px}
.ghost h2{font:700 22px/28px var(--font-heading),sans-serif;letter-spacing:-.5px;color:#cdbfb2;margin:0}
.bar{height:9px;border-radius:4px;background:#eee7df;flex-shrink:0}.bar.l{background:#f3eee8}.bar.h7{height:7px}.bar.h10{height:10px}.bar.h11{height:11px}
.row{display:flex;align-items:center;gap:12px;width:100%}.col2{display:flex;flex-direction:column;gap:5px;flex:1}
.gtable{display:flex;flex-direction:column;border:1px solid #eee7df;border-radius:6px;overflow:hidden}
.gtable .gh{display:flex;justify-content:space-between;padding:8px 12px;background:#f6f2ee}.gtable .gr{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid #eee7df}
.circ{width:22px;height:22px;border-radius:11px;border:1.5px dashed #d6c6b6;flex-shrink:0}.sq{width:32px;height:32px;border-radius:7px;background:#eee7df;flex-shrink:0}
/* highlighted (R6): pulsing 1.5px ring + comet */
.sec.hi .shell:before{content:"";position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from 0deg,#0000 0deg,#0000 290deg,#e6600a22 290deg,#e6600a 350deg,#ff9a3d 360deg);animation:spin 3.5s linear infinite}
.sec.hi .qcard{animation:ring 2.6s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:var(--qshadow),0 0 0 1.5px #f59e0b33}50%{box-shadow:var(--qshadow),0 0 0 1.5px #f59e0bcc}}
.sec.landed .qcard{animation:land .3s var(--ease-out)}
@keyframes land{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cover */
.cover .qcard{padding:0;overflow:hidden}
.cover .photo{position:relative;height:252px;overflow:hidden;border-bottom:.75px solid #E0DAD7;transition:height .5s var(--ease-out)}
.cover .photo:after{content:"";position:absolute;inset:0;background:url(painting.jpg) center top/cover;opacity:1;transform:scale(1);transition:opacity .45s var(--ease-out) .12s,transform .6s var(--ease-out) .12s}
.cover.no-photo .photo{height:72px;padding:12px}.cover.no-photo .photo:after{opacity:0;transform:scale(1.04)}
.cover .photo:before{content:"Photo";display:flex;align-items:center;justify-content:center;height:100%;border:1.5px dashed #d6c6b6;border-radius:4px;color:#a18a79;font-size:13px;opacity:0;transition:opacity .2s var(--ease-out)}.cover.no-photo .photo:before{opacity:1}
.cover .body{padding:24px}.cover h2{margin-bottom:0}
.cover.no-title h2{color:#cdbfb2}
.parties{display:flex;gap:27px;margin-top:20px;padding-top:12px;border-top:.75px solid var(--color-border)}
.parties>div{flex:1;display:flex;flex-direction:column;gap:3px}.parties small{font-size:9.75px;line-height:12px;color:var(--color-muted-foreground)}.parties span{font-size:11.25px;line-height:16.5px;font-weight:500;color:#000}
.cover.no-from .from span{display:inline-flex;align-items:center;height:18px;padding:0 6px;border:1px dashed #d6c6b6;border-radius:3px;color:#a18a79;font-size:10px;font-weight:400;width:fit-content}
.flash{}
/* pricing */
.group-title{font-size:12px;font-weight:600;margin:18px 0 8px}.group-title em{font-style:normal;font-weight:400;color:#9b8979}
.pricing-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #eee7df;border-radius:7px;overflow:hidden;font-size:10.5px;line-height:15px;table-layout:fixed}
.pricing-table th{font-weight:400;color:#978879;background:#f4f1ee;padding:7px 6px;text-align:left}.pricing-table th:first-child{width:52%;padding-left:12px}
.pricing-table td{border-bottom:1px solid #f0eae3;padding:9px 6px;vertical-align:top}.pricing-table td:first-child{padding-left:12px}
.pricing-table td:last-child,.pricing-table th:last-child{text-align:right;padding-right:12px}.pricing-table td small{display:block;color:#8e8074;font-size:10px}
.pricing-table tr:last-child td{border-bottom:0}.subtotal td{color:#897568;text-align:right!important;font-size:10px;padding:7px 12px}.subtotal b{margin-left:12px;color:#332217}.optional td{color:#a2968b}
.totals{width:240px;margin:22px 0 0 auto;font-size:11px}.totals div{display:flex;justify-content:space-between;gap:30px;padding:2px 0}.totals div:not(.total){color:#968577}.totals .total{font-weight:600;font-size:12px}
.definition{display:flex;flex-direction:column}.definition>div{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #eee7df}.definition>div:last-child{border:0;padding-bottom:0}.definition dt{color:#8f7a68}.definition dd{margin:0}
.phases>div{display:flex;gap:14px;margin:14px 0}.phases span{font-weight:600}.phases strong{display:block;font-size:12px}.phases p{font-size:11px;color:#98816e}
.contact{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eee7df}.avatar{width:32px;height:32px;background:#f5f0e9;border:1px solid #e8dfd2;display:flex;align-items:center;justify-content:center;border-radius:7px;color:#aa9685}.contact small{display:block;color:#9b8471}
/* ---------- chat (AI intake) ---------- */
#chat{display:flex;flex-direction:column;gap:12px;width:672px;padding:20px 20px 16px;margin:0 0 20px;background:#f7f1ea;border:.75px solid #E0DAD7;border-radius:10px}
#chat.hidden{display:none}
.chatmode #doc{display:none}.chatmode #canvas{display:flex;align-items:center;justify-content:center}
.chatmode #chat{width:560px;margin:0}
.chead{display:flex;align-items:center;justify-content:space-between;padding:0 4px 14px;border-bottom:.75px solid #E0DAD7}.chead b{font:700 17px/22px var(--font-heading),sans-serif;display:block}.chead small{font-size:12px;color:#7e6b5d}.chead em{font-style:normal;font-size:11px;color:#a18a79}
.bub{display:flex;width:100%}.bub.c{justify-content:flex-end}.bub>div{max-width:80%;padding:12px 16px;font-size:14px;line-height:21px;animation:land .24s var(--ease-out)}
.bub.c>div{border-radius:14px 14px 4px 14px;background:var(--orange);color:#fff}.bub.a>div{border-radius:14px 14px 14px 4px;background:#fff;border:.75px solid #E0DAD7;box-shadow:var(--qshadow)}
.chint{display:flex;justify-content:center;padding:28px 0;font-size:13px;color:#a18a79}
.composer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 8px 8px 16px;background:#fff;border:1px solid #dccfc3;border-radius:8px;font-size:14px;line-height:20px}
.composer.hot{border-color:#e6600a}.composer .ph{color:#a18a79}
.send{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:0;border-radius:6px;background:var(--orange);color:#fff}
.composer.hot .send{box-shadow:0 0 0 1.5px #f59e0bcc,0 0 0 5px #f59e0b22;animation:ring 2.6s ease-in-out infinite}
.working{display:flex;width:fit-content;padding:1.5px;border-radius:7.5px;position:relative;overflow:hidden;isolation:isolate}
.working:before{content:"";position:absolute;inset:-200%;z-index:-1;background:conic-gradient(from 0deg,#0000 0deg,#0000 290deg,#e6600a22 290deg,#e6600a 350deg,#ff9a3d 360deg);animation:spin 3.5s linear infinite}
.working>div{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border-radius:6px;font-size:13px;color:#5e3516;box-shadow:0 0 0 1.5px #f59e0bcc}
.working i{width:14px;height:14px;border-radius:7px;border:2px solid #f2d5aa;border-top-color:#e6600a;animation:spin 1s linear infinite}
.chip{display:flex;align-items:center;justify-content:space-between;width:672px;padding:12px 16px;margin-bottom:16px;background:#f7f1ea;border:.75px solid #E0DAD7;border-radius:8px;animation:land .24s var(--ease-out)}
.chip .who{display:flex;align-items:center;gap:10px}.chip .av{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:14px;background:var(--orange);color:#fff;font-size:12px;font-weight:600}
.chip b{display:block;font-size:13px;line-height:18px}.chip small{font-size:12px;color:#7e6b5d}.chip .ok{display:flex;align-items:center;gap:6px;font-size:12px;color:#228443}
/* presenter bar */
@media(prefers-reduced-motion:reduce){.cover .photo{transition-duration:.15s}.cover .photo:after{transform:none;transition:opacity .15s}.sec.hi .shell{transform:none}.busy .sec:not(.hi) .qcard,.busy .sec:not(.hi) .ghost{filter:none}.sec.hi .shell:before,.sec.hi .qcard,.composer.hot .send,.log div.busy i,.bub.typing i{animation:none}.sec.hi .qcard{box-shadow:var(--qshadow),0 0 0 1.5px #f59e0bcc}#left,#right,#card,#card-inner{transition-property:opacity;transition-duration:.15s}.fullscreen #left,.centered #left{transform:none}#right{transform:none!important}.pop,.sec.landed .qcard,.bub>div,.chip,#card-inner.arrive{animation:fade .15s ease both}@keyframes fade{from{opacity:0}to{opacity:1}}}

/* ---------- v2 additions ---------- */
.hidden{display:none!important}
/* busy: the left side is generating, the card steps back */
.busy #card{opacity:.3;transform:scale(.98);pointer-events:none}
/* reveal one by one */
.pending{opacity:0;visibility:hidden}
.pop{animation:popin .26s var(--ease-out) both}
@keyframes popin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* scrollable list */
.options.scroll{max-height:328px;overflow:auto;padding:3px;margin:-3px;scrollbar-width:thin;scrollbar-color:#dcb795 transparent}
/* intro / planning copy */
.qcard p.muted{color:#8f7a68;margin:0 0 12px}
#q-intro p{margin:0 0 8px}
/* option icons in the table */
.pricing-table i.radio,.pricing-table i.check{display:inline-block;width:11px;height:11px;margin:0 6px -1px 0;border:1.5px solid #b8a89a;border-radius:50%;vertical-align:baseline;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.pricing-table i.check{border-radius:2px}
.pricing-table i.radio.on{border-color:#e6600a;box-shadow:inset 0 0 0 2.5px #fff;background:#e6600a}
.pricing-table i.check.on{border-color:#e6600a;background:#e6600a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/8px no-repeat}
/* illustration for choices and upsells */
.illus{display:flex;flex-direction:column;gap:10px;width:200px;margin:0 auto;padding:18px 20px;background:#fff8ed;border:1px solid #ecc89e;border-radius:8px}
.ill-row{display:flex;align-items:center;gap:12px}
.ill-radio,.ill-check{width:18px;height:18px;border:2px solid #c9bfb7;border-radius:50%;flex-shrink:0}
.ill-check{border-radius:4px}
.ill-radio.on{border-color:#e6600a;box-shadow:inset 0 0 0 3px #fff;background:#e6600a}
.ill-check.on{border-color:#e6600a;background:#e6600a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/11px no-repeat}
.ill-bar{height:8px;border-radius:4px;background:#e9d9c4}.ill-bar.w1{width:90px}.ill-bar.w2{width:60px}.ill-bar.w3{width:110px}
/* chat v2 */
.chatmode #canvas{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.chatmode #chat{width:560px;margin:0;max-height:820px;overflow:auto;scrollbar-width:none}
#msgs{display:flex;flex-direction:column;gap:12px}
.bub.typing>div{display:flex;gap:5px;align-items:center;padding:14px 16px}
.bub.typing i{width:6px;height:6px;border-radius:3px;background:#c9bfb7;animation:blink 1.2s infinite}.bub.typing i:nth-child(2){animation-delay:.2s}.bub.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
#chat .chip{width:100%;margin:4px 0 0}
/* ---------- intake widgets ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px 44px;animation:land .24s var(--ease-out)}
.chip-opt{padding:8px 14px;font-size:13px;line-height:18px;color:#392619;background:#fff;border:1px solid #dccfc3;border-radius:999px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.chip-opt.on{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 20%,transparent)}
.widget{padding:2px 0 4px 44px;animation:land .24s var(--ease-out)}
.slider{display:flex;align-items:center;gap:14px;width:320px;padding:12px 14px;background:#fff;border:1px solid #dccfc3;border-radius:8px}
.slider .track{position:relative;flex:1;height:6px;border-radius:3px;background:#eee7df}
.slider .fill{position:absolute;left:0;top:0;bottom:0;width:25%;border-radius:3px;background:var(--orange);transform-origin:left;transition:transform .5s var(--ease-out)}
.slider .knob{position:absolute;top:50%;left:25%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;border:2px solid var(--orange);box-shadow:0 1px 3px #3c1e0a33;transition:transform .5s var(--ease-out)}
.slider .val{width:52px;font-size:13px;text-align:right}
.widget.go .fill{transform:scaleX(2)}.widget.go .knob{transform:translateX(80px)}
@media(prefers-reduced-motion:reduce){.chips,.widget{animation:fade .15s ease both}.slider .fill,.slider .knob{transition-duration:.15s}}