@font-face{font-family:Montserrat;src:url('/assets/Montserrat.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--accent:#9b78ff;--bg:#101112;--text:#f1f0ed;--muted:#969794;--line:#2a2b2c;font-family:Montserrat,Arial,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:32px;color-scheme:dark}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:7px}a:hover{color:var(--accent)}img{max-width:100%}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;left:20px;top:-80px;padding:16px;background:#fff;color:#111;z-index:9}.skip:focus{top:10px}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px}.wordmark{font-size:29px;font-weight:850;letter-spacing:4px;display:flex;align-items:center}.wordmark span{color:var(--accent)}.wordmark i{font-size:8px;font-style:normal;font-weight:500;letter-spacing:2px;max-width:80px;line-height:1.8;border-left:1px solid #444;padding-left:18px;margin-left:16px}.header nav{display:flex;gap:30px;font-size:12px;font-weight:550}.header-cta{border:1px solid #454544;border-radius:50px;padding:13px 21px;font-size:12px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:12px}.live-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 20px var(--accent)}.version{margin-left:8px;color:var(--muted);border:1px solid #333;padding:5px 8px;border-radius:20px;letter-spacing:1px}.hero{position:relative;padding-top:65px;padding-bottom:66px;isolation:isolate}.hero h1{font-size:clamp(70px,8.3vw,120px);line-height:1.03;letter-spacing:-7px;font-weight:650;margin:44px 0 44px;position:relative;z-index:1;max-width:870px}.hero em,.closing em{font-style:normal;color:var(--accent)}.hero-bottom{display:flex;gap:50px;align-items:center;position:relative;z-index:2}.hero-bottom p{font-size:14px;line-height:1.9;color:#b7b8b5;max-width:360px;margin:0}.button{display:inline-flex;gap:28px;justify-content:space-between;align-items:center;border-radius:50px;padding:20px 28px;font-size:13px;font-weight:650;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);color:#16131e;filter:brightness(1.09)}.primary{background:var(--accent);color:#15111f}.button span{font-size:20px;font-weight:400}.micro{display:block;font-size:10px;margin-top:14px;text-align:center;color:var(--muted)}.scroll-link{margin-left:auto;align-self:flex-end;font-size:11px;color:#a2a2a1;white-space:nowrap}.hero-art{position:absolute;right:0;top:76px;width:440px;height:425px;z-index:-1;pointer-events:none}.orb{position:absolute;width:340px;height:340px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 25%,transparent),transparent 68%);right:-40px;top:15px;filter:blur(25px)}.giant-d{position:absolute;right:-10px;top:-40px;font-size:420px;line-height:1;font-weight:900;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 32%,transparent);transform:rotate(-14deg);mask-image:linear-gradient(#000 20%,transparent)}.floating-stat{position:absolute;right:26px;top:202px;padding:25px 30px;background:linear-gradient(130deg,#27232eaa,#151517cc);backdrop-filter:blur(14px);border:1px solid #56505d66;border-radius:16px;transform:rotate(8deg);box-shadow:0 30px 70px #0007;animation:float 6s ease-in-out infinite}.floating-stat small{display:block;font-size:9px;letter-spacing:2px;color:#b3a8c9}.floating-stat strong{font-size:62px;letter-spacing:-4px;display:block;font-weight:600;color:#f0e9ff}.floating-stat span{font-size:9px;color:#c3bdcc}.section-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.muted{font-size:11px;color:var(--muted);line-height:1.8}.demo-shell{border:1px solid #343236;border-radius:18px;background:linear-gradient(135deg,#202024,#141516);overflow:hidden;box-shadow:0 30px 80px #0003}.demo-toolbar{border-bottom:1px solid #343236;padding:21px 30px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#b1acb8}.demo-toolbar>span{display:flex;align-items:center;gap:10px}.demo-toolbar b{color:var(--accent);font-size:8px}.demo-body{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:55px 65px}.demo-intro small{font-size:9px;letter-spacing:2px;color:var(--accent)}h2{font-weight:600}.demo-intro h2{font-size:32px;line-height:1.25;letter-spacing:-1px;margin:20px 0}.demo-intro p{font-size:12px;color:#a5a3a9;line-height:1.9;max-width:310px}.demo-label{display:block;font-size:8px;color:#77767c;margin-top:30px}.player-demo{border:1px solid color-mix(in srgb,var(--accent) 32%,#25252b);border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,#18191c),#16171a);box-shadow:0 20px 50px #0005;transform:rotate(-2deg);transition:background .3s,border-color .3s}.player-head{display:flex;align-items:center;gap:13px;padding:24px 21px;border-bottom:1px solid #ffffff0d}.avatar{height:43px;width:43px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(130deg,var(--accent),#2c2c37);border-radius:11px;font-weight:700}.player-head b{font-size:13px}.player-head small{font-size:7px;display:block;color:#83828b;margin-top:7px;letter-spacing:1px}.elo{margin-left:auto;font-size:11px;color:#b4b1bb;white-space:nowrap}.elo i{font-size:9px;font-style:normal;border:2px solid #ed3333;padding:6px 4px;border-radius:50%;margin-left:9px;color:white}.metrics{display:flex;justify-content:space-between;padding:24px 21px 15px;gap:9px}.metrics small{color:#8e8a98;font-size:8px;display:block;margin-bottom:7px}.metrics b{font-size:19px;font-weight:600}.player-footer{display:flex;gap:9px;align-items:center;padding:0 21px 20px;font-size:8px;color:#8e8a98}.player-footer b{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;color:#e3ddeb}.form-bars{display:flex;gap:3px}.form-bars i{height:4px;width:8px;background:#49c89d}.form-bars .loss{background:#ed798f}.demo-details{border-top:1px solid #ffffff0d;font-size:10px}.demo-details summary{padding:14px 21px;color:#b4aabd}.demo-details>div{padding:0 21px 17px;display:grid;gap:10px}.demo-details>div span{display:flex;justify-content:space-between}.demo-details small{font-size:8px;color:#9b96a3;line-height:1.7}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}details[open]>summary>span{transform:rotate(45deg)}summary>span{transition:transform .2s}.features{padding-block:110px}.section-title{font-size:clamp(36px,4vw,54px);line-height:1.16;letter-spacing:-2px;margin:35px 0 45px}.section-title>span{color:#858582}.feature-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}.feature{border:1px solid var(--line);border-radius:16px;padding:37px 40px;background:linear-gradient(145deg,#1b1c1d,#151617);min-width:0}.feature-index{font-size:9px;color:#8c8b90;letter-spacing:1.5px}.feature h3{font-size:28px;line-height:1.25;letter-spacing:-1px;font-weight:550;margin:30px 0 18px}.feature p{color:#a7a7a3;font-size:12px;line-height:1.9;max-width:425px}.rating-art{display:flex;align-items:center;gap:18px;margin:35px 0}.rating-mark{font-weight:800;font-size:48px;color:var(--accent)}.rating-art strong{font-size:68px;letter-spacing:-4px;font-weight:550}.rating-art>span:last-child{font-size:8px;letter-spacing:1px}.rating-art small{display:block;color:#92908f;font-size:9px;letter-spacing:0;margin-top:7px}.fineprint{display:block;font-size:9px;color:#777875;line-height:1.8}.map-bars{display:grid;gap:19px;margin:40px 0 30px}.map-bars>span{display:grid;grid-template-columns:65px 1fr 35px;gap:13px;align-items:center;font-size:9px}.map-bars i{height:4px;background:#343038;position:relative;border-radius:4px}.map-bars i:before{content:'';position:absolute;height:100%;width:var(--bar);background:var(--accent);border-radius:4px}.map-bars b{text-align:right;font-size:11px;font-weight:500}.switch-demo{margin:32px 0 24px;padding:19px;border:1px solid #38333f;border-radius:10px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.visual-switch{width:35px;height:20px;border-radius:30px;background:var(--accent);position:relative}.visual-switch:after{content:'';position:absolute;background:#202023;border-radius:50%;height:14px;width:14px;right:3px;top:3px}.level-art{display:flex;gap:10px;align-items:center;margin:35px 0 6px}.level-art>*{display:grid;place-items:center;flex:1;height:54px;border:1px solid #323334;border-radius:8px;color:#777;font-size:17px}.level-art strong{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.level-art b{color:#d5d0e0}.design{background:#e9e7e2;color:#202121;overflow:hidden}.design-grid{display:grid;grid-template-columns:1fr 1fr;gap:130px;padding-block:90px;align-items:center}.design .section-title{font-size:56px}.design p{font-size:13px;color:#646462;line-height:1.9;max-width:410px}.design .eyebrow{color:#787473}.swatches{display:flex;gap:13px;margin:30px 0 20px}.swatches button{border:0;background:var(--swatch);width:34px;height:34px;border-radius:50%;cursor:pointer;position:relative}.swatches button[aria-pressed=true]:after{content:'';position:absolute;inset:-5px;border:1px solid #686360;border-radius:50%}.design .muted{color:#777}.appearance-frame{position:relative;border:1px solid #414147;border-radius:19px;overflow:hidden;background:#0d1016;box-shadow:0 25px 60px #20182f30;transform:rotate(3deg);max-width:355px;margin-inline:auto}.appearance-frame img{display:block;height:450px;object-fit:cover;object-position:top;width:100%}.appearance-frame>span{display:block;background:#15171c;padding:18px;text-align:center;font-size:8px;letter-spacing:2px;color:#a5a0b2}.install{padding-block:110px}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.install p{font-size:12px;color:#a3a4a1;line-height:1.9;max-width:430px}.install .button{margin-top:22px}.text-link{display:block;font-size:11px;color:#bcb9c6;margin-top:22px}.steps{padding:20px 0 0;margin:0;list-style:none}.steps li{display:flex;gap:25px;border-bottom:1px solid var(--line);padding:25px 0}.steps li>span{font-size:12px;color:var(--accent);padding-top:4px}.steps h3{font-size:18px;letter-spacing:-.3px;margin:0 0 8px;font-weight:550}.steps p{margin:0;font-size:11px}.steps code{font-family:inherit;color:#ddd;font-size:10px;overflow-wrap:anywhere}.faq{border-top:1px solid var(--line);padding-block:80px}.faq-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;margin-top:20px}.faq details{border-bottom:1px solid var(--line)}.faq summary{padding:24px 0;font-size:13px;font-weight:550;line-height:1.6}.faq summary span{color:var(--accent);font-size:20px}.faq details p{font-size:12px;line-height:1.9;color:#a7a8a4;margin:0 0 25px}.faq details a{color:var(--accent);text-decoration:underline}.closing{padding-block:75px 100px;border-top:1px solid var(--line);text-align:center;background:radial-gradient(ellipse at 50% 110%,#9b78ff12,transparent 65%)}.closing .eyebrow{justify-content:center;color:#969198}.closing h2{font-size:clamp(40px,5.5vw,74px);line-height:1.15;letter-spacing:-3px;margin:30px 0 35px}.closing .text-link{margin-top:25px}footer{border-top:1px solid var(--line);padding-block:35px}.footer-top{display:flex;align-items:center;gap:35px}.footer-top p{font-size:11px;color:#959692}.footer-top>a:last-child{margin-left:auto;font-size:10px;letter-spacing:1px}.footer-bottom{border-top:1px solid #262728;display:flex;gap:30px;margin-top:30px;padding-top:25px;color:#757673;font-size:9px}.footer-bottom>span:last-child{margin-left:auto}@keyframes float{50%{transform:translateY(-12px) rotate(5deg)}}
@media(min-width:1600px){.hero-art{right:30px}.hero h1{font-size:124px}}
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.header nav{gap:18px}.hero h1{font-size:90px}.hero-art{opacity:.65;right:0;transform:scale(.85);transform-origin:top right}.hero-bottom{gap:28px}.demo-body{padding:40px;gap:35px}.design-grid{gap:70px}.install-grid{gap:50px}.faq-grid{gap:40px}.footer-bottom{gap:18px}.rating-art{gap:12px}.rating-art strong{font-size:56px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:86px;gap:15px}.header nav{display:none}.wordmark{font-size:25px}.wordmark i{display:none}.header-cta{font-size:10px;padding:12px 16px}.hero{padding-top:38px;padding-bottom:45px}.hero .eyebrow{font-size:7px;letter-spacing:1px;gap:8px}.version{font-size:7px;margin-left:0}.hero h1{font-size:clamp(54px,10.5vw,78px);letter-spacing:-3px;margin:35px 0;line-height:1.1}.hero-art{top:60px;right:-2px;opacity:.28;width:270px;height:270px;transform:none}.giant-d{font-size:270px;right:0;top:0}.orb{width:230px;height:230px;right:0}.floating-stat{display:none}.hero-bottom{flex-wrap:wrap;gap:25px}.hero-bottom p{font-size:12px;line-height:1.9;width:100%;max-width:none}.hero-bottom>div{width:100%}.hero-bottom .button{width:100%}.scroll-link{display:none}.section-top{margin-bottom:20px}.section-top>.muted{display:none}.eyebrow{font-size:8px;letter-spacing:1.4px}.demo-toolbar{padding:16px;font-size:7px;letter-spacing:1px}.demo-body{grid-template-columns:1fr;padding:28px 20px;gap:30px}.demo-intro h2{font-size:28px}.demo-intro p{max-width:none;font-size:11px}.demo-label{margin-top:20px}.player-demo{transform:none}.player-head{padding:20px 15px;gap:10px}.player-head b{font-size:11px}.elo{font-size:10px}.metrics{padding:20px 15px 14px}.metrics b{font-size:17px}.player-footer{padding-inline:15px}.features{padding-block:65px}.section-title{font-size:34px;letter-spacing:-1.4px;margin:28px 0 32px}.feature-grid{grid-template-columns:1fr;gap:13px}.feature{padding:29px 25px}.feature h3{font-size:26px;margin-top:25px}.feature p{font-size:11px}.rating-art{margin:25px 0}.rating-art strong{font-size:60px}.rating-art>span:last-child{font-size:7px}.rating-art small{font-size:8px}.design-grid{grid-template-columns:1fr;gap:42px;padding-block:60px}.design .section-title{font-size:40px}.design p{font-size:12px}.appearance-frame{max-width:320px;transform:rotate(2deg);width:calc(100% - 15px)}.appearance-frame img{height:390px}.install{padding-block:65px}.install-grid{grid-template-columns:1fr;gap:24px}.install .button{width:100%;font-size:12px}.steps{padding-top:0}.steps li{gap:20px;padding:22px 0}.faq{padding-block:55px}.faq-grid{grid-template-columns:1fr;gap:0}.faq summary{font-size:12px}.closing{padding-block:60px}.closing h2{font-size:39px;letter-spacing:-1.7px}.closing .button{width:100%}.footer-top{flex-wrap:wrap;gap:10px 20px}.footer-top p{width:100%;order:3;margin-bottom:0}.footer-bottom{flex-wrap:wrap;gap:15px 20px;line-height:1.6}.footer-bottom>span:first-child{width:100%}.footer-bottom>span:last-child{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.hero-art{overflow:clip;overflow-clip-margin:0}.appearance-frame img{object-position:top}
.button.unavailable{border:1px solid #49424f;background:#29242f;color:#aaa1b5;cursor:not-allowed;font-family:inherit}.button.unavailable:hover{transform:none;filter:none;color:#aaa1b5}
@property --preview-accent{syntax:'<color>';inherits:true;initial-value:#9b78ff}.appearance-frame{width:355px;transition:--preview-accent .4s ease,border-color .4s;--preview-accent:#9b78ff;border-color:color-mix(in srgb,var(--preview-accent) 35%,#303039);color:#eef0f6;font-family:Montserrat,Arial,sans-serif}.live-top{height:52px;border-bottom:1px solid #292d39;display:flex;align-items:center;justify-content:space-between;padding:15px}.live-top b{letter-spacing:2px;font-size:16px}.live-top b span,.live-preview b span{color:var(--preview-accent)}.live-top small{font-size:5px;color:#aeb4c4}.live-layout{display:grid;grid-template-columns:70px 1fr}.live-layout aside{border-right:1px solid #292d39;padding:10px 5px;display:grid;gap:5px}.live-layout aside>span{text-align:center;padding:9px 2px;font-size:17px;color:#aeb4c4;border-radius:7px}.live-layout aside small{display:block;font-size:5px;margin-top:6px}.live-layout aside .active{background:color-mix(in srgb,var(--preview-accent) 16%,transparent);color:#f5f2ff}.live-main{padding:20px 12px}.live-main>small{font-size:6px;letter-spacing:1.2px;color:#aeb4c4}.live-main h3{font-size:18px;margin:8px 0 17px}.live-card{border:1px solid color-mix(in srgb,var(--preview-accent) 28%,#282d39);border-radius:12px;padding:13px 10px;margin-top:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-accent) 11%,#12151c),#101319)}.live-card h4{font-size:12px;margin:0 0 13px}.live-dots{display:flex;gap:10px;margin-bottom:20px}.live-dots i{width:17px;height:17px;border-radius:50%;background:var(--preview-accent)}.live-dots .chosen{outline:1px solid #eee;outline-offset:3px}.live-preview{padding:14px 9px;background:#0c1016;border-radius:8px;display:flex;align-items:center;gap:8px;font-size:6px}.live-preview b{letter-spacing:1px;font-size:7px}.live-button{margin-left:auto;border-radius:6px;padding:9px 10px;background:var(--preview-accent);color:#10131a;font-size:7px}.live-card p{font-size:7px;margin:0 0 18px;color:#aeb4c4}.live-field{display:flex;align-items:center;justify-content:space-between;font-size:8px;margin:15px 0;color:#aeb4c4}.live-field b{font-weight:500;padding:10px 15px;border:1px solid #303645;border-radius:7px;color:white}.live-custom{width:29px;height:20px;background:var(--preview-accent);border:4px solid #272b38;border-radius:4px}@media(max-width:760px){.appearance-frame{width:calc(100% - 15px)}}
/* One animated palette for the site and the live extension preview. */
@property --accent{syntax:'<color>';inherits:true;initial-value:#9b78ff}
:root{transition:--accent .4s ease}
.closing{background:radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%)}
.floating-stat{background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 15%,#16171bcc),#151517cc);border-color:color-mix(in srgb,var(--accent) 30%,#333)}
.floating-stat strong{color:color-mix(in srgb,var(--accent) 18%,#fff)}
.feature .switch-demo{border-color:color-mix(in srgb,var(--accent) 22%,#292b30)}
@media(prefers-reduced-motion:reduce){:root,.appearance-frame{transition:none!important}}
/* Gentle feedback without delaying controls or animating layout on hover. */
a,.wordmark span{transition:color .32s ease,background-color .32s ease,border-color .32s ease}
.button{transition:transform .28s ease,background-color .35s ease,color .35s ease,filter .28s ease}
.swatches button{transition:transform .25s ease,box-shadow .25s ease}
.swatches button:hover{transform:translateY(-2px)}
.primary,.live-button{color:var(--accent-ink,#10131a)}
.primary:hover{color:var(--accent-ink,#10131a)}
.visual-switch{border:0;padding:0;flex-shrink:0;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;background:#41434e}
.visual-switch[aria-checked=true]{background:var(--accent)}
.visual-switch:after{right:auto;left:3px;transform:translateX(0);transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s ease;background:#dedee8}
.visual-switch[aria-checked=true]:after{transform:translateX(15px);background:var(--accent-ink,#202023)}
.custom-swatch{width:34px;height:34px;position:relative;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:conic-gradient(#ee75a5,#ffd26b,#c6db71,#43b7c4,#9b78ff,#ee75a5);color:#fff;transition:transform .25s ease;flex-shrink:0}
.custom-swatch:hover{transform:translateY(-2px)}
.custom-swatch>span{display:grid;place-items:center;background:#1c1d26;border-radius:50%;width:23px;height:23px;font-size:18px;line-height:1;pointer-events:none}
.custom-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.custom-swatch:focus-within{outline:2px solid #686360;outline-offset:5px}
.custom-swatch.selected:after{content:'';position:absolute;inset:-5px;border:1px solid #686360;border-radius:50%;pointer-events:none}
.custom-swatch.selected>span{background:var(--custom);color:var(--accent-ink,#10131a)}
summary{user-select:none;transition:color .25s ease}
summary:hover{color:var(--accent)}
details:not(.is-expanded)>summary>span{transform:rotate(0)}
details.is-expanded>summary>span{transform:rotate(45deg)}
.demo-body{align-items:start}.player-demo{align-self:start}
:root{scrollbar-gutter:stable}
/* Inline picker: centered vector-like plus, no operating-system dialog. */
.swatches{position:relative;align-items:center;z-index:3}
.palette-wrap{width:34px;height:34px;flex-shrink:0}
.swatches .custom-swatch{display:grid;place-items:center;padding:3px;border:0;background:conic-gradient(from 20deg,#e778a8,#e9c871,#85c6a2,#61a9d0,#9a83df,#e778a8);box-shadow:0 1px 3px #26222d18}
.custom-swatch>.palette-plus{width:28px;height:28px;border-radius:50%;background:#252630;position:relative;display:block;color:#fff}
.palette-plus:before,.palette-plus:after{content:'';position:absolute;top:50%;left:50%;width:12px;height:1.5px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.palette-plus:after{transform:translate(-50%,-50%) rotate(90deg)}
.custom-swatch.selected>.palette-plus{background:var(--custom);color:var(--accent-ink,#fff)}
.custom-swatch[aria-expanded=true]{box-shadow:0 0 0 4px #ffffff80,0 0 0 5px #8d8999}
.colour-panel{position:absolute;left:0;top:52px;width:min(300px,100%);padding:18px;background:#17191f;color:#edf0f5;border:1px solid #41414d;border-radius:18px;box-shadow:0 18px 45px #17122135;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.96);transform-origin:28px 0;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;--hue:256;--chosen:#9b78ff}
.palette-wrap.open .colour-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.palette-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.palette-heading b{font-size:12px;font-weight:600}
.swatches .palette-close{width:26px;height:26px;background:#292b34;color:#babdca;border-radius:8px;font-size:19px;line-height:1;padding:0;display:grid;place-items:center}
.colour-plane{height:125px;position:relative;border-radius:9px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--hue) 100% 50%);touch-action:none;cursor:crosshair;border:0}
.colour-plane>i{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0005;pointer-events:none}
.hue-label,.colour-sliders label{font-size:9px;color:#aaaebb;display:grid;gap:7px;margin-top:14px}
.colour-panel input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:20px;margin:0;padding:0 7px;border:0;border-radius:0;background:transparent;cursor:pointer;--track:linear-gradient(to right,#656876,#a8acbb)}
.colour-panel #colour-hue{--track:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.colour-panel input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:999px;background:var(--track)}
.colour-panel input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border:2px solid #fff;border-radius:50%;background:var(--chosen);box-shadow:0 1px 3px #0006}
.colour-panel input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:var(--track)}
.colour-panel input[type=range]::-moz-range-thumb{box-sizing:border-box;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--chosen);box-shadow:0 1px 3px #0006}
.colour-panel #colour-saturation{--track:linear-gradient(to right,#ddd,hsl(var(--hue) 100% 50%))}
.colour-panel #colour-value{--track:linear-gradient(to right,#101116,#fff)}
.colour-panel #colour-hue::-webkit-slider-thumb{background:hsl(var(--hue) 100% 50%)}
.colour-panel #colour-hue::-moz-range-thumb{background:hsl(var(--hue) 100% 50%)}
.colour-sliders{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hex-field{display:flex;align-items:center;gap:10px;margin-top:16px;padding:9px;border:1px solid #373a47;border-radius:9px;font-size:9px;color:#999fab}
.hex-field>i{width:20px;height:20px;background:var(--chosen);border:1px solid #ffffff25;border-radius:5px;flex-shrink:0}
.hex-field input{width:100%;min-width:0;border:0;outline-offset:4px;background:transparent;color:#edf0f5;font:500 12px Montserrat,Arial,sans-serif;letter-spacing:1px}
.hex-field input[aria-invalid=true]{color:#ff9eb0}
.player-demo{transform-origin:top center}.demo-details,.faq details{overflow-anchor:none}.demo-shell{overflow-anchor:none}
@media(prefers-reduced-motion:reduce){.colour-panel{transition:none}}
.design{overflow:visible}
@media(min-width:761px){.colour-panel{top:auto;bottom:52px;transform-origin:28px 100%;transform:translateY(8px) scale(.96)}}