/* Shared typography, responsive wrapping, and the interactive color-wheel showcase. */
html,body{max-width:100%;overflow-x:clip}
body{word-break:normal;overflow-wrap:normal}
:where(h1,h2,h3){text-wrap:balance;word-break:normal;overflow-wrap:normal}
:where(p,li,summary){text-wrap:pretty;word-break:normal;overflow-wrap:break-word}
:where(button,.primary,.secondary,.site-header nav a,.tier-name span){white-space:nowrap;word-break:keep-all}
.site-header nav{flex-wrap:nowrap;gap:clamp(12px,1.8vw,26px)}
.site-header nav a{flex:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions>*{flex:0 0 auto;min-width:0;text-align:center}
.hero-actions .primary,.hero-actions .secondary{white-space:nowrap;word-break:keep-all}
.hero-actions .primary span{display:inline;margin:0 0 0 8px;padding-left:9px}
.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px}
.feature-wide{grid-column:auto!important}
.feature{min-width:0;min-height:320px}
.feature[hidden]{display:none!important}
.section-lede{max-width:720px;margin:20px 0 0;color:#77747f;font-size:16px;line-height:1.8}
.feature-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.feature-filters button{padding:9px 16px;border:1px solid #dedbe7;border-radius:999px;background:#ffffffb8;color:#5d5867;font-size:13px;font-weight:800;transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease}
.feature-filters button:hover{transform:translateY(-2px)}
.feature-filters button.active{border-color:#7961ed;background:#7961ed;color:white;box-shadow:0 8px 22px #7355e933}
.feature .num{letter-spacing:.06em}
.feature-chip-row{display:flex;gap:7px;margin-top:24px}
.feature-chip-row span{padding:6px 10px;border:1px solid #e5e2ee;border-radius:999px;color:#736f7b;font-size:11px;font-weight:800}
.feature-ratio-art{display:flex;height:74px;overflow:hidden;margin-top:24px;border-radius:14px;box-shadow:0 10px 28px #39314c18}
.feature-ratio-art i:nth-child(1){flex:6;background:#8774bd}.feature-ratio-art i:nth-child(2){flex:3;background:#9eb3a9}.feature-ratio-art i:nth-child(3){flex:1;background:#d2b7a2}
.palette-card-mini{margin-top:20px;padding:13px;border:1px solid #ffffff1c;border-radius:17px;background:#24222a;color:#f6f3fb;box-shadow:0 14px 30px #18151e20}
.palette-card-swatches{display:flex;height:clamp(80px,8vw,116px);overflow:hidden;border-radius:11px}
.palette-card-swatches i:nth-child(1){flex:6;background:#829783}.palette-card-swatches i:nth-child(2){flex:3;background:#c0b39b}.palette-card-swatches i:nth-child(3){flex:1;background:#a6837f}
.palette-card-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
.palette-card-labels span{display:block;min-width:0}.palette-card-labels b{display:block;overflow:hidden;color:#f5f1fa;font:800 10px/1.35 Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}.palette-card-labels small{display:block;margin-top:3px;color:#aaa5b1;font-size:9px;line-height:1.35;white-space:nowrap}
.go-three-preview{display:flex;gap:6px;margin-top:8px}.go-three-preview span{flex:1;min-width:0;padding:7px 5px;border:1px solid #e4e0eb;border-radius:8px;color:#514b5c;font-size:10px;font-weight:800;text-align:center;white-space:nowrap}
.feature-wheel-art{position:relative;width:104px;height:104px;margin-top:20px;border:7px solid #ffffffb0;border-radius:50%;background:conic-gradient(#f27c9e,#f4bf72,#b9d578,#68c9bc,#719de4,#a18ae7,#db78bd,#f27c9e);box-shadow:0 0 0 1px #8b7ac533,0 10px 24px #44385a20}
.feature-wheel-art:after{position:absolute;inset:25%;content:"";border:1px solid #fff8;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,#eeeaf7 56%,#b9afca)}
.feature-wheel-art i,.feature-wheel-art b{position:absolute;z-index:2;width:13px;height:13px;border:2px solid white;border-radius:50%;background:#7156cb;box-shadow:0 2px 8px #20153166}
.feature-wheel-art i{left:44%;top:5%}.feature-wheel-art b:first-of-type{right:8%;top:48%;background:#e391a8}.feature-wheel-art b:last-of-type{left:9%;bottom:16%;background:#8fb8a3}
.feature-label-art{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding:12px;border:1px solid #e6e2ec;border-radius:14px;background:#faf9fc}
.feature-label-art i{width:32px;height:32px;border-radius:9px;background:#a77d87}.feature-label-art b{font-size:13px}.feature-label-art small{width:100%;color:#85808c;font-size:10px}
.project-mini{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:8px;margin-top:23px;padding:12px;border:1px solid #514b62;border-radius:15px;background:#272431;color:#f5f1ff}
.project-mini span,.project-mini b{grid-column:1/-1;font-size:11px}.project-mini i{height:42px;border-radius:9px;background:#a77d87}.project-mini i:nth-of-type(2){background:#81978a}.project-mini i:nth-of-type(3){background:#c7b48e}.project-mini b{color:#c9baff}
.library-mini{display:flex;align-items:center;gap:9px;margin-top:24px;padding:12px;border:1px solid #e5e1ec;border-radius:14px;background:#fbfaff;color:#4c4658;font-size:11px;font-weight:800}
.library-mini i{width:28px;height:28px;border-radius:8px;background:linear-gradient(140deg,#8068db,#bba8ff)}.library-mini b{margin-left:auto;color:#6c58bf;font-size:10px}
.tier-hint{max-width:100%;line-height:1.55}
.wheel-showcase{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(32px,5vw,76px);padding:clamp(72px,9vw,128px) max(24px,calc((100% - 1200px)/2));background:#eeecf4;overflow:hidden}
.wheel-story-copy{max-width:460px}
.wheel-story-copy h2{margin:0;font-size:clamp(40px,4.8vw,62px);line-height:1.02;letter-spacing:-.065em}
.wheel-story-copy>p:not(.eyebrow){max-width:440px;margin:22px 0;color:#6f6a79;font-size:15px;line-height:1.85}
.wheel-story-steps{display:flex;flex-wrap:wrap;gap:16px;margin-top:25px;color:#615c6d;font-size:12px;font-weight:800}
.wheel-story-steps span{display:inline-flex;align-items:center;gap:7px}.wheel-story-steps b{display:grid;width:23px;height:23px;place-items:center;border-radius:50%;background:#ded8fa;color:#6e58ca;font-size:10px}
.wheel-legal-note{display:block;margin-top:22px;color:#8c8794;font-size:10px;line-height:1.55}
.wheel-demo-shell{min-width:0;padding:clamp(16px,2vw,26px);border:1px solid #ffffffc9;border-radius:28px;background:linear-gradient(145deg,#ffffffc9,#eeebf7b7);box-shadow:0 28px 80px #34285220,inset 0 1px 0 #fff;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.wheel-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3px 16px;border-bottom:1px solid #dcd7e8;color:#514b5d;font-size:12px;font-weight:900}
.wheel-demo-head span{display:flex;align-items:center;gap:8px}.wheel-demo-head i{width:8px;height:8px;border-radius:50%;background:#8870ec;box-shadow:0 0 12px #8e78f7}
.wheel-demo-head small{color:#928b9e;font-size:10px;font-weight:600}
.wheel-demo-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(200px,.75fr);align-items:center;gap:clamp(12px,2vw,28px);padding-top:16px}
.marketing-wheel{position:relative;width:min(100%,410px);aspect-ratio:1;margin:auto;border-radius:50%;isolation:isolate;touch-action:none;filter:drop-shadow(0 18px 32px #493b6425)}
.marketing-wheel-color{position:absolute;inset:3%;overflow:hidden;border:1px solid #ffffffa8;border-radius:50%;background:conic-gradient(from -15deg,#f25e81,#ffad58,#f4e56c,#95d475,#63c8b2,#63a6de,#837be0,#bd6bd4,#f25e81);box-shadow:0 0 0 6px #ffffff7a,0 0 0 7px #bdb5ce66,inset 0 0 28px #fff8}
.marketing-wheel-color:before{position:absolute;inset:0;content:"";border-radius:50%;background:radial-gradient(circle,#fff 0%,#fff8 24%,#fff0 58%,#11102136 100%)}
.marketing-wheel-color:after{position:absolute;inset:0;content:"";border-radius:50%;background:repeating-conic-gradient(from -15deg,transparent 0deg 29.4deg,#ffffff9c 29.4deg 29.9deg);-webkit-mask:radial-gradient(circle,transparent 0 56%,#000 57% 100%);mask:radial-gradient(circle,transparent 0 56%,#000 57% 100%);opacity:.56}
.marketing-wheel-grid{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.marketing-wheel-grid circle{fill:none;stroke:#fff;stroke-opacity:.32;stroke-width:1}.marketing-wheel-grid path{fill:none;stroke:#fff;stroke-opacity:.42;stroke-width:1}
.marketing-wheel-inner{position:absolute;inset:32%;z-index:3;display:grid;place-items:center;border:1px solid #ffffffa8;border-radius:50%;background:radial-gradient(circle at 34% 25%,#554c6aef,#211d2bef 78%);box-shadow:0 12px 34px #201a2c55,inset 0 1px 0 #ffffff7a;color:#fff;text-align:center;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.marketing-wheel-inner>div{display:flex;flex-direction:column;align-items:center;min-width:0}.marketing-wheel-inner small{margin-bottom:7px;color:#d4cdea;font-size:10px}.marketing-wheel-inner i{width:36px;height:36px;margin-bottom:7px;border:2px solid #fffe;border-radius:50%;background:#7051b8;box-shadow:0 0 0 4px #ffffff1d}.marketing-wheel-inner b{font-size:12px}.marketing-wheel-inner span{margin-top:4px;color:#d0c7e9;font:10px Consolas,monospace}
.marketing-wheel-point{position:absolute;z-index:4;left:50%;top:50%;width:19px;height:19px;padding:0;border:3px solid white;border-radius:50%;background:var(--point-color,#7051b8);box-shadow:0 3px 12px #1611246b,0 0 0 2px #34294f78;transform:translate(-50%,-50%);touch-action:none;transition:box-shadow .2s ease,scale .2s ease;cursor:grab}
.marketing-wheel-point:active{scale:1.18;cursor:grabbing}.marketing-wheel-point:focus-visible{outline:3px solid #fff;outline-offset:4px}.point-main{width:21px;height:21px;z-index:5}.point-assist{--point-color:#91b7a0}.point-accent{--point-color:#dbaabd;width:16px;height:16px}
.wheel-demo-controls{min-width:0;padding:10px 0;color:#302c37}
.wheel-current-color{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #ffffffd9;border-radius:16px;background:#ffffffa3;box-shadow:0 8px 24px #31284a0b}
.wheel-current-color>i{width:42px;height:42px;flex:none;border:2px solid white;border-radius:50%;background:#7051b8;box-shadow:0 0 0 2px #cfc6e3,0 4px 12px #2b21441c}
.wheel-current-color span{min-width:0}.wheel-current-color small{display:block;color:#898394;font-size:9px;line-height:1.4}.wheel-current-color b{display:block;margin-top:3px;font-size:11px}.wheel-current-color strong{color:#6953bd}
.wheel-current-hex{display:flex;justify-content:space-between;gap:8px;margin-top:9px;padding:10px 11px;border:1px solid #e5e1ec;border-radius:12px;color:#7e7887;font-size:10px}.wheel-current-hex b{color:#51476c;font:700 10px Consolas,monospace}
.wheel-mode-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px;padding:4px;border:1px solid #e3deed;border-radius:13px;background:#f7f5fa}
.wheel-mode-pills button{min-width:0;padding:9px 4px;border:0;border-radius:9px;background:transparent;color:#736d7d;font-size:10px;font-weight:800;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.wheel-mode-pills button.active{background:#fff;color:#6750bc;box-shadow:0 3px 12px #31294a14}
.wheel-harmony-caption{margin:10px 2px;color:#777182;font-size:10px}
.wheel-palette-lines{display:grid;gap:7px;margin-top:11px}
.wheel-palette-lines>div{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #e8e4ee;border-radius:12px;background:#ffffffa8}
.wheel-palette-lines>div>i{width:27px;height:27px;flex:none;border:1px solid #ffffff;border-radius:9px;background:#a888b8;box-shadow:0 2px 6px #25202f1c}
.wheel-palette-lines span{min-width:0}.wheel-palette-lines small{display:block;color:#938d9b;font-size:9px}.wheel-palette-lines b{display:block;margin-top:2px;color:#484152;font:700 10px Consolas,monospace}
.wheel-palette-lines strong{margin-left:auto;color:#736985;font-size:10px;white-space:nowrap}
.wheel-mini-ratio{display:flex;height:34px;overflow:hidden;margin-top:11px;border:1px solid #ffffff;border-radius:11px;background:#fff;box-shadow:0 5px 15px #32284c11}.wheel-mini-ratio i:nth-child(1){flex:6;background:#7051b8}.wheel-mini-ratio i:nth-child(2){flex:3;background:#a888b8}.wheel-mini-ratio i:nth-child(3){flex:1;background:#b88f88}
.wheel-drag-hint{margin:9px 0 0;color:#8d8795;font-size:9px;text-align:center}
.feature-grid .feature,.tier-card{transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease,border-color .32s ease}
.feature-grid .feature:hover,.tier-card:hover{transform:translateY(-5px)}
.hero-art{padding-bottom:52px}
.hero-capability-rail{position:absolute;right:0;bottom:4px;left:0;z-index:3;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px}
.hero-capability-rail span{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #ffffffa8;border-radius:999px;background:#ffffff83;color:#615b6d;font-size:10px;font-weight:800;box-shadow:0 6px 16px #3e315a0c;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hero-capability-rail span i{color:#795fdd;font-size:8px;font-style:normal}
.hero-capability-rail .rail-heading{border-color:transparent;background:transparent;box-shadow:none;color:#898292;font-size:9px;letter-spacing:.04em}
.hero-mini-search{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 8px;border:1px solid #44404c;border-radius:9px;background:#24222a;color:#9e9aa7;font-size:9px}
.hero-mini-search span{display:flex;align-items:center;gap:5px}.hero-mini-search span i{color:#b9a7ff;font-size:15px;font-style:normal}
.hero-mini-search b{margin-left:auto;color:#f1edf7;font:700 10px Consolas,monospace}
.hero-mini-search button{padding:5px 9px;border:0;border-radius:6px;background:#7c63ff;color:#fff;font-size:9px;font-weight:800}
.hero-palette-strip{display:flex;align-items:center;gap:5px;margin-top:8px;padding:6px 8px;border:1px solid #403c47;border-radius:8px;background:#24222a;color:#c7c2cf;font-size:8px}
.hero-palette-strip>span{margin-right:auto;color:#aaa5b1;font-weight:700}
.hero-palette-strip>i{width:17px;height:17px;border-radius:5px;background:#7051b8}.hero-palette-strip>i:nth-of-type(2){background:#9f8fc5}.hero-palette-strip>i:nth-of-type(3){background:#c3ad9d}
.hero-palette-strip>b{margin-left:3px;color:#d7d0ff;font-size:8px;white-space:nowrap}
.feature-dark .hero-capability-rail span{color:#f1edf8}
.feature-search-results{display:flex;gap:8px;margin-top:13px}
.feature-search-results>span{display:flex;justify-content:space-between;flex:1;gap:6px;padding:9px 10px;border:1px solid #e5e1e9;border-radius:9px;color:#514c59;font-size:11px;font-weight:800}
.feature-search-results b{color:#8168e7}
.scroll-reveal{opacity:0;transform:translateY(18px) scale(.99);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.scroll-reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
.feature-grid .feature.filter-enter{animation:featureFilterEnter .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(min(var(--filter-index,0),5)*35ms)}
@keyframes featureFilterEnter{from{opacity:.35;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.design-compare-switch{position:fixed;right:18px;bottom:18px;z-index:100;display:none;align-items:center;gap:5px;padding:6px;border:1px solid #ffffffb5;border-radius:999px;background:#ffffffb5;box-shadow:0 12px 36px #17132124;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
html[data-design] .design-compare-switch{display:flex}
.design-compare-switch span{padding:0 7px;color:#777181;font-size:10px;font-weight:800;white-space:nowrap}
.design-compare-switch a{padding:8px 11px;border:1px solid transparent;border-radius:999px;color:#625c6d;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
.design-compare-switch a[aria-current="page"]{border-color:#ffffff;background:#7d65e8;color:white;box-shadow:0 4px 12px #7155db55}
.design-compare-switch .design-b[aria-current="page"]{background:#30263f}

/* Option A — luminous lavender glass: light, airy, and editorial. */
html[data-design="glass-a"]{--paper:#f2eff8;--ink:#1d1926;--muted:#716b7c;--line:#ffffffa8;--violet:#7960e8;scroll-behavior:smooth}
html[data-design="glass-a"] body{background:radial-gradient(ellipse at 15% 6%,#fdfcff 0,transparent 38%),radial-gradient(ellipse at 84% 18%,#e4dcff 0,transparent 36%),linear-gradient(180deg,#f4f1fa,#f1eff7 47%,#f7f5fa);color:#1d1926}
html[data-design="glass-a"] .site-header{position:sticky;top:12px;z-index:40;width:min(calc(100% - 32px),1320px);height:66px;margin:12px auto 0;padding:0 22px;border:1px solid #ffffffd4;border-radius:22px;background:#ffffffa8;box-shadow:0 12px 38px #2d224716,inset 0 1px 0 #fff;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
html[data-design="glass-a"] .site-header nav a{color:#625d6d}
html[data-design="glass-a"] .site-header nav a:hover{color:#735be0}
html[data-design="glass-a"] .hero{position:relative;isolation:isolate;padding-top:76px}
html[data-design="glass-a"] .hero:before{position:absolute;z-index:-1;inset:18px 0 4px;content:"";border:1px solid #ffffffa8;border-radius:38px;background:linear-gradient(125deg,#ffffff78,#ffffff22 58%,#dcd3ff55);box-shadow:0 28px 70px #4235650c;backdrop-filter:blur(20px)}
html[data-design="glass-a"] .hero h1 em{color:#765ee6}
html[data-design="glass-a"] .hero-text,html[data-design="glass-a"] .fine-print{color:#6f697b}
html[data-design="glass-a"] .primary{background:linear-gradient(130deg,#846af2,#6e55d6);box-shadow:0 12px 28px #7a60e63c}
html[data-design="glass-a"] .secondary{border-color:#ffffffd4;background:#ffffff9c;color:#35303f;box-shadow:0 5px 16px #2a22320a;backdrop-filter:blur(14px)}
html[data-design="glass-a"] .header-action{border:1px solid #ffffff50;background:linear-gradient(130deg,#393047,#201b2b);box-shadow:0 7px 18px #271f3433}
html[data-design="glass-a"] .panel-window{transform:rotate(-1.6deg);border:1px solid #ffffff57;background:linear-gradient(145deg,#282433ed,#17151de8);box-shadow:0 32px 76px #31264a43,0 0 0 9px #ffffff42;backdrop-filter:blur(26px)}
html[data-design="glass-a"] .hero-mini-search{border-color:#ffffff24;background:#ffffff0a}
html[data-design="glass-a"] .hero-palette-strip{border-color:#ffffff23;background:#ffffff0a}
html[data-design="glass-a"] .orb-one{background:#bcabff;opacity:.65}html[data-design="glass-a"] .orb-two{background:#e6d9ff;opacity:.9}
html[data-design="glass-a"] .trust{width:min(calc(100% - 56px),1150px);margin:12px auto;border:1px solid #ffffffbd;border-radius:20px;background:#ffffff87;box-shadow:0 14px 36px #352c4610;backdrop-filter:blur(18px)}
html[data-design="glass-a"] .story-stage{border:1px solid #ffffffb5;box-shadow:0 32px 80px #31254322}
html[data-design="glass-a"] .palette-showcase{position:relative;isolation:isolate;margin:0 24px;border:1px solid #ffffffbd;border-radius:38px;background:linear-gradient(135deg,#f5f2fae8,#e8e3f2d9);box-shadow:0 24px 70px #392d4d14;backdrop-filter:blur(24px)}
html[data-design="glass-a"] .palette-showcase>div>p:not(.eyebrow){color:#6e6879}
html[data-design="glass-a"] .palette-tab{border-color:#d9d2e9;background:#ffffff88;color:#625b70}
html[data-design="glass-a"] .palette-tab.active{border-color:#7960e8;background:linear-gradient(130deg,#8872f0,#7057d7);color:#fff}
html[data-design="glass-a"] .palette-art{border:1px solid #ffffff9e;background:linear-gradient(145deg,#312c3b,#211e29);box-shadow:0 26px 58px #3429412c}
html[data-design="glass-a"] .wheel-showcase{margin-top:40px;border:1px solid #ffffffb8;border-radius:40px;background:radial-gradient(ellipse at 85% 15%,#ded5ff92,transparent 38%),linear-gradient(135deg,#f9f7fc,#ece8f5);box-shadow:0 20px 64px #3b2a5710}
html[data-design="glass-a"] .wheel-demo-shell{background:linear-gradient(145deg,#ffffffc9,#f4f1faad);box-shadow:0 28px 80px #35254d20,inset 0 1px 0 #fff}
html[data-design="glass-a"] .content-section,html[data-design="glass-a"] .faq-section{position:relative}
html[data-design="glass-a"] .feature{border-color:#ffffffd0;border-radius:24px;background:#ffffffa6;box-shadow:0 18px 48px #392c5612,inset 0 1px 0 #fff;backdrop-filter:blur(20px)}
html[data-design="glass-a"] .feature[data-tier="plus"],html[data-design="glass-a"] .feature[data-tier="ultra"]{border-color:#ffffff2b;background:linear-gradient(145deg,#302a3ce8,#211e2ce8);color:#fff;box-shadow:0 20px 48px #241c3630}
html[data-design="glass-a"] .feature[data-tier="plus"] p,html[data-design="glass-a"] .feature[data-tier="ultra"] p{color:#d2cdda}
html[data-design="glass-a"] .feature[data-tier="plus"] .num,html[data-design="glass-a"] .feature[data-tier="ultra"] .num{color:#c7baff}
html[data-design="glass-a"] .feature[data-tier="plus"] .feature-chip-row span,html[data-design="glass-a"] .feature[data-tier="ultra"] .feature-chip-row span{border-color:#ffffff36;color:#e3dff0}
html[data-design="glass-a"] .feature[data-tier="plus"] .feature-label-art,html[data-design="glass-a"] .feature[data-tier="ultra"] .feature-label-art{border-color:#ffffff29;background:#ffffff0c;color:#fff}
html[data-design="glass-a"] .feature[data-tier="plus"] .feature-label-art small,html[data-design="glass-a"] .feature[data-tier="ultra"] .feature-label-art small{color:#c5bfce}
html[data-design="glass-a"] .feature[data-tier="go"]{background:#ffffffd9;color:#211d2a}
html[data-design="glass-a"] .feature[data-tier="go"] p{color:#746e7e}
html[data-design="glass-a"] .workflow-section{margin:0 24px;border:1px solid #ffffffaa;border-radius:38px;background:#e9e5f0b8;backdrop-filter:blur(18px)}
html[data-design="glass-a"] .tier-card{border-color:#ffffffc9;border-radius:24px;background:#ffffffae;box-shadow:0 18px 46px #33274312,inset 0 1px 0 #fff;backdrop-filter:blur(20px)}
html[data-design="glass-a"] .tier-card-plus{border-color:#ffffff32;background:linear-gradient(145deg,#302a3ce8,#211e2ce8);color:#fff;box-shadow:0 18px 48px #261d3840}
html[data-design="glass-a"] .tier-card-plus .tier-name span,html[data-design="glass-a"] .tier-card-plus .tier-subtitle,html[data-design="glass-a"] .tier-card-plus li{color:#d2cdda}
html[data-design="glass-a"] .tier-card-plus .tier-state{background:#ffffff15;color:#e4def0}
html[data-design="glass-a"] .tier-card-ultra{border-color:#ffffff38;background:linear-gradient(145deg,#302a3ce8,#201d2be8);color:#fff}
html[data-design="glass-a"] .faq-section details{border-color:#ded8e8}
html[data-design="glass-a"] footer{margin-top:40px;border-top:1px solid #ffffff30;background:linear-gradient(135deg,#25202f,#17151f);color:#cac4d4}
html[data-design="glass-a"] dialog{border:1px solid #ffffff;background:#faf9fcf0;backdrop-filter:blur(22px)}

/* Option B — nocturne glass: deeper violet, sharper highlights, and a stronger product mood. */
html[data-design="glass-b"]{--paper:#100d19;--ink:#f5f1ff;--muted:#b0a9bc;--line:#ffffff20;--violet:#9b84ff;scroll-behavior:smooth;color-scheme:dark}
html[data-design="glass-b"]{background-color:#100d19;background-image:radial-gradient(ellipse 84vw 78vh at 16% 3%,rgba(76,50,123,.28),transparent 78%),radial-gradient(ellipse 68vw 56vh at 88% 26%,rgba(73,50,107,.2),transparent 78%);background-attachment:fixed;background-repeat:no-repeat}
html[data-design="glass-b"] body{background:transparent!important;color:#f5f1ff}
html[data-design="glass-b"] .site-header{position:sticky;top:12px;z-index:40;width:min(calc(100% - 32px),1320px);height:66px;margin:12px auto 0;padding:0 22px;border:1px solid #ffffff27;border-radius:22px;background:#211b2cbb;box-shadow:0 14px 40px #08061155,inset 0 1px 0 #ffffff27;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
html[data-design="glass-b"] .brand,html[data-design="glass-b"] .site-header nav a{color:#f1edfa}
html[data-design="glass-b"] .site-header nav a:hover{color:#c4b5ff}
html[data-design="glass-b"] .language-switch{border-color:#ffffff35;background:#ffffff0c;color:#ece5ff}
html[data-design="glass-b"] .hero{position:relative;isolation:isolate;padding-top:76px}
html[data-design="glass-b"] .hero:before{position:absolute;z-index:-1;inset:18px 0 4px;content:"";border:1px solid #ffffff1f;border-radius:38px;background:linear-gradient(125deg,#31284282,#18142255 62%,#6045a32d);box-shadow:0 28px 80px #09070f55,inset 0 1px 0 #ffffff20;backdrop-filter:blur(20px)}
html[data-design="glass-b"] .hero h1,html[data-design="glass-b"] .section-heading h2,html[data-design="glass-b"] .story-intro h2,html[data-design="glass-b"] .wheel-story-copy h2,html[data-design="glass-b"] .workflow-section h2,html[data-design="glass-b"] .pricing-heading h2,html[data-design="glass-b"] .faq-section h2{color:#fbf9ff}
html[data-design="glass-b"] .hero h1 em{color:#aa96ff}
html[data-design="glass-b"] .hero-text,html[data-design="glass-b"] .fine-print,html[data-design="glass-b"] .section-lede{color:#bcb4cc}
html[data-design="glass-b"] .eyebrow{color:#b5a2ff}
html[data-design="glass-b"] .primary{background:linear-gradient(130deg,#a28bff,#7658de);box-shadow:0 12px 32px #835fe65c}
html[data-design="glass-b"] .secondary{border-color:#ffffff40;background:#ffffff0d;color:#f2edfb;box-shadow:inset 0 1px 0 #ffffff18;backdrop-filter:blur(14px)}
html[data-design="glass-b"] .header-action{border:1px solid #ffffff38;background:#f8f4ff;color:#271d3a;box-shadow:0 8px 22px #07050d66}
html[data-design="glass-b"] .panel-window{transform:rotate(1.2deg);border:1px solid #ffffff4a;background:linear-gradient(145deg,#332b40ef,#18151fe8);box-shadow:0 32px 84px #08050f88,0 0 0 8px #ffffff13;backdrop-filter:blur(28px)}
html[data-design="glass-b"] .hero-mini-search{border-color:#ffffff27;background:#ffffff0a}
html[data-design="glass-b"] .hero-palette-strip{border-color:#ffffff25;background:#ffffff0a}
html[data-design="glass-b"] .orb-one{background:#9267ff;opacity:.65}html[data-design="glass-b"] .orb-two{background:#543c8d;opacity:.9}
html[data-design="glass-b"] .trust{width:min(calc(100% - 56px),1150px);margin:12px auto;border:1px solid #ffffff20;border-radius:20px;background:#211b2d9e;color:#d8d1e2;box-shadow:0 14px 36px #09070f35;backdrop-filter:blur(20px)}
html[data-design="glass-b"] .trust span:before{background:#ad98ff;box-shadow:0 0 12px #9a7cff}
html[data-design="glass-b"] .story-intro>p:not(.eyebrow),html[data-design="glass-b"] .story-steps p{color:#b3acbf}
html[data-design="glass-b"] .story-stage{border:1px solid #ffffff20;background:linear-gradient(145deg,#292334,#17141e);box-shadow:0 32px 84px #05040b88}
html[data-design="glass-b"] .palette-showcase{position:relative;isolation:isolate;margin:0 24px;border:1px solid #ffffff20;border-radius:38px;background:radial-gradient(ellipse at 15% 5%,#563d8545,transparent 40%),linear-gradient(135deg,#211b2d,#17131f);box-shadow:0 26px 80px #05040b77;backdrop-filter:blur(24px)}
html[data-design="glass-b"] .palette-showcase>div>p:not(.eyebrow){color:#bcb4c9}
html[data-design="glass-b"] .palette-tab{border-color:#ffffff32;background:#ffffff09;color:#d8d0e5}
html[data-design="glass-b"] .palette-tab.active{border-color:#ad98ff;background:linear-gradient(130deg,#a48cff,#7658de);color:#fff;box-shadow:0 6px 20px #926dff4f}
html[data-design="glass-b"] .palette-art{border:1px solid #ffffff27;background:linear-gradient(145deg,#342b43,#1a1722);box-shadow:0 26px 66px #07050e88}
html[data-design="glass-b"] .wheel-showcase{margin-top:40px;border:1px solid #ffffff20;border-radius:40px;background:radial-gradient(ellipse at 84% 8%,#7252bc45,transparent 37%),linear-gradient(135deg,#211a2d,#15121d);box-shadow:0 24px 74px #06040c88}
html[data-design="glass-b"] .wheel-story-copy>p:not(.eyebrow){color:#bcb3ca}
html[data-design="glass-b"] .wheel-story-steps{color:#d8d0e4}
html[data-design="glass-b"] .wheel-story-steps b{background:#44365d;color:#c7b7ff}
html[data-design="glass-b"] .wheel-legal-note{color:#a299af}
html[data-design="glass-b"] .wheel-demo-shell{border-color:#ffffff2b;background:linear-gradient(145deg,#30283de0,#1a1624db);box-shadow:0 28px 82px #05030b91,inset 0 1px 0 #ffffff2c}
html[data-design="glass-b"] .wheel-demo-head{border-color:#ffffff20;color:#e4dcf1}
html[data-design="glass-b"] .wheel-demo-head small{color:#aaa0b9}
html[data-design="glass-b"] .wheel-demo-controls{color:#f3eef9}
html[data-design="glass-b"] .wheel-current-color{border-color:#ffffff20;background:#ffffff0c}
html[data-design="glass-b"] .wheel-current-color small,html[data-design="glass-b"] .wheel-current-hex,html[data-design="glass-b"] .wheel-harmony-caption{color:#aaa1b8}
html[data-design="glass-b"] .wheel-current-hex{border-color:#ffffff20;background:#ffffff08}
html[data-design="glass-b"] .wheel-current-hex b{color:#e5dcf7}
html[data-design="glass-b"] .wheel-mode-pills{border-color:#ffffff1b;background:#15121d}
html[data-design="glass-b"] .wheel-mode-pills button{color:#aaa1b9}
html[data-design="glass-b"] .wheel-mode-pills button.active{background:#47385e;color:#d9cdff;box-shadow:inset 0 0 0 1px #b39aff66}
html[data-design="glass-b"] .wheel-palette-lines>div{border-color:#ffffff1d;background:#ffffff09}
html[data-design="glass-b"] .wheel-palette-lines small,html[data-design="glass-b"] .wheel-drag-hint{color:#aaa1b8}
html[data-design="glass-b"] .wheel-palette-lines b,html[data-design="glass-b"] .wheel-palette-lines strong{color:#eee8f6}
html[data-design="glass-b"] .wheel-mini-ratio{border-color:#ffffff42}
html[data-design="glass-b"] .content-section,html[data-design="glass-b"] .faq-section{color:#f5f1ff}
html[data-design="glass-b"] .feature{border-color:#ffffff21;border-radius:24px;background:linear-gradient(145deg,#2b2437c9,#1e1928c9);color:#f3eef9;box-shadow:0 18px 48px #07050e4f,inset 0 1px 0 #ffffff16;backdrop-filter:blur(22px)}
html[data-design="glass-b"] .feature[data-tier="go"]{border-color:#ffffffd0;background:#f7f5fc;color:#211d2a}
html[data-design="glass-b"] .feature[data-tier="go"] p{color:#746e7e}
html[data-design="glass-b"] .feature[data-tier="go"] .num{color:#735bd9}
html[data-design="glass-b"] .feature p{color:#beb6ca}
html[data-design="glass-b"] .feature .num{color:#b9a6ff}
html[data-design="glass-b"] .feature-chip-row span{border-color:#ffffff24;color:#d7d0df}
html[data-design="glass-b"] .feature-label-art{border-color:#ffffff20;background:#ffffff0a;color:#fff}
html[data-design="glass-b"] .feature-label-art small{color:#bdb4c9}
html[data-design="glass-b"] .workflow-section{margin:0 24px;border:1px solid #ffffff20;border-radius:38px;background:linear-gradient(135deg,#251e32,#18141f);color:#f7f2ff;backdrop-filter:blur(20px)}
html[data-design="glass-b"] .workflow-section li{border-color:#ffffff20}
html[data-design="glass-b"] .workflow-section p{color:#b7afc3}
html[data-design="glass-b"] .tier-card{border-color:#ffffff21;border-radius:24px;background:linear-gradient(145deg,#2a2435e3,#1d1927e3);color:#f6f2fc;box-shadow:0 18px 46px #07050e55,inset 0 1px 0 #ffffff17;backdrop-filter:blur(20px)}
html[data-design="glass-b"] .tier-card-plus{border-color:#9c83f4;background:linear-gradient(145deg,#332945f0,#211a2de8);box-shadow:0 18px 52px #865fe638}
html[data-design="glass-b"] .tier-card-ultra{border-color:#c9b9ff70;background:linear-gradient(145deg,#382b4d,#20192c)}
html[data-design="glass-b"] .tier-name span,html[data-design="glass-b"] .tier-subtitle,html[data-design="glass-b"] .tier-card li{color:#c8c1d1}
html[data-design="glass-b"] .tier-state{background:#ffffff12;color:#e2dbea}
html[data-design="glass-b"] .tier-state-pending{background:#4a3c63;color:#e4d9ff}
html[data-design="glass-b"] .pricing-footnote,html[data-design="glass-b"] .pricing-heading>p:last-child{color:#aaa1b6}
html[data-design="glass-b"] .faq-section details{border-color:#ffffff21}
html[data-design="glass-b"] .faq-section summary{color:#f1ecf8}
html[data-design="glass-b"] .faq-section details p{color:#bcb4c8}
html[data-design="glass-b"] footer{margin-top:40px;border-top:1px solid #ffffff21;background:linear-gradient(135deg,#1d1727,#100d18);color:#b8afc4}
html[data-design="glass-b"] dialog{border:1px solid #ffffff2e;background:#211b2ef0;color:#f5f1ff;backdrop-filter:blur(24px)}
html[data-design="glass-b"] dialog>p:not(.eyebrow){color:#c4bbd2}
html[data-design="glass-b"] .wechat-id{background:#ffffff0d}
html[data-design="glass-b"] .dialog-close{color:#d2c8df}
html[data-design="glass-b"] .feature-filters button{border-color:#ffffff25;background:#ffffff0a;color:#ded7e9}
html[data-design="glass-b"] .feature-filters button.active{border-color:#a58cff;background:#8a6ce8;color:#fff}

/* Final pass: readable copy, consistent glass surfaces, and a true light/dark theme switch. */
html[data-design] .feature,html[data-design] .tier-card,html[data-design] .panel-window,html[data-design] .match-panel,html[data-design] .wheel-demo-shell,html[data-design] .palette-art,html[data-design] .label-sheet,html[data-design] .wheel-current-color,html[data-design] .wheel-current-hex,html[data-design] .wheel-palette-lines>div,html[data-design] .palette-card-mini{position:relative;isolation:isolate;backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:inset 0 1px 0 #ffffff24,0 20px 54px #14101f20}
html[data-design] :is(.feature,.tier-card,.panel-window,.match-panel,.wheel-demo-shell,.palette-art,.label-sheet,.wheel-current-color,.wheel-current-hex,.wheel-palette-lines>div,.palette-card-mini)::before{position:absolute;z-index:1;inset:0;content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent 15%,#ffffff14 40%,#ffffff05 52%,transparent 68%);background-size:230% 100%;mix-blend-mode:screen;opacity:.58;animation:liquidGlint 9s ease-in-out infinite}
html[data-design] :is(.feature,.tier-card,.panel-window,.match-panel,.wheel-demo-shell,.palette-art,.label-sheet,.wheel-current-color,.wheel-current-hex,.wheel-palette-lines>div,.palette-card-mini)>*{position:relative;z-index:2}
@keyframes liquidGlint{0%,100%{background-position:140% 0}50%{background-position:-40% 0}}
.feature-grid .feature,.tier-card{transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.feature-grid .feature:hover,.tier-card:hover{transform:translateY(-4px) scale(1.012)}
.go-top-results{display:grid;gap:7px;margin-top:19px}
.go-top-results>div{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid #dedbe5;border-radius:10px;background:#f6f4fa;color:#272332}
.go-top-results i{width:19px;height:19px;border-radius:6px;background:#6e58c7}.go-top-results>div:nth-child(2) i{background:#7966c1}.go-top-results>div:nth-child(3) i{background:#654fa5}.go-top-results b{font-size:11px}.go-top-results small{color:#4f4958;font-size:10px;white-space:nowrap}.go-top-results>div:nth-child(4) i{background:#5a4699}.go-top-results>div:nth-child(5) i{background:#8574c9}
html[data-design="glass-a"] .section-lede,html[data-design="glass-a"] .story-intro>p:not(.eyebrow),html[data-design="glass-a"] .palette-showcase>div>p:not(.eyebrow),html[data-design="glass-a"] .label-copy>p:not(.eyebrow),html[data-design="glass-a"] .workflow-section p,html[data-design="glass-a"] .tier-subtitle,html[data-design="glass-a"] .tier-card li,html[data-design="glass-a"] .faq-section details p{color:#514b5b}
html[data-design="glass-a"] .feature[data-tier="go"] p{color:#514b5b}
html[data-design="glass-a"] .feature-match-example small,html[data-design="glass-a"] .feature-match-example em{color:#4e4859}
html[data-design="glass-a"] .label-demo-hint{color:#514b5b}
html[data-design="glass-a"] .label-flow{color:#211d2a}
html[data-design="glass-a"] .labels-scene{border:1px solid #ffffffc9;border-radius:30px;background:linear-gradient(145deg,#e6e0f1c9,#d8d0e7a8);box-shadow:0 24px 64px #35264c1c;backdrop-filter:blur(24px) saturate(1.4)}
html[data-design="glass-a"] .label-sheet{border-color:#ffffffed;border-radius:20px;background:#fcfbfff2;color:#211d2a;box-shadow:0 24px 54px #27203220,inset 0 1px 0 #fff;opacity:1;transform:scale(.88) rotate(1deg);backdrop-filter:blur(20px)}
html[data-design="glass-a"] .label-sheet .sheet-top,html[data-design="glass-a"] .label-sheet .big-label b,html[data-design="glass-a"] .label-sheet .pill-label,html[data-design="glass-a"] .label-sheet .cmf-mini b{color:#211d2a}
html[data-design="glass-a"] .label-sheet .big-label span,html[data-design="glass-a"] .label-sheet .cmf-mini p{color:#4b4553}
html[data-design="glass-a"] .label-origin{border:1px solid #ffffff;background:#fff;color:#211d2a;border-radius:12px}
html[data-design="glass-a"] .label-origin b{color:#211d2a;line-height:1.25}
html[data-design="glass-a"] .wheel-story-copy>p:not(.eyebrow),html[data-design="glass-a"] .wheel-legal-note,html[data-design="glass-a"] .wheel-current-color small,html[data-design="glass-a"] .wheel-current-hex,html[data-design="glass-a"] .wheel-harmony-caption,html[data-design="glass-a"] .wheel-palette-lines small,html[data-design="glass-a"] .wheel-drag-hint{color:#514b5b}
html[data-design="glass-a"] .feature[data-tier="plus"],html[data-design="glass-a"] .feature[data-tier="ultra"]{color:#fff;background:linear-gradient(145deg,#302a3cea,#211e2cea)}
html[data-design="glass-a"] .feature[data-tier="plus"] h3,html[data-design="glass-a"] .feature[data-tier="ultra"] h3{color:#fff}
html[data-design="glass-a"] .feature[data-tier="plus"] p,html[data-design="glass-a"] .feature[data-tier="ultra"] p{color:#e0dce8}
html[data-design="glass-a"] .feature[data-tier="plus"] .tier-hint,html[data-design="glass-a"] .feature[data-tier="ultra"] .tier-hint{color:#d4cde0}
html[data-design="glass-a"] .tier-card-plus,html[data-design="glass-a"] .tier-card-ultra{background:linear-gradient(145deg,#302a3cea,#211e2cea);color:#fff}
html[data-design="glass-a"] .tier-card-plus .tier-subtitle,html[data-design="glass-a"] .tier-card-plus li,html[data-design="glass-a"] .tier-card-ultra .tier-subtitle,html[data-design="glass-a"] .tier-card-ultra li{color:#e0dce8}
html[data-design="glass-a"] .tier-card-ultra{border-color:#b7a5ff;box-shadow:inset 0 1px 0 #fff5,0 0 0 1px #a789ff55,0 22px 60px #815ee43b}
html[data-design="glass-a"] .workflow-section li{margin:0 0 12px;padding:16px;border:1px solid #ffffffd6;border-radius:17px;background:#ffffff91;box-shadow:inset 0 1px 0 #fff,0 10px 26px #382c4a0d;backdrop-filter:blur(18px)}
html[data-design="glass-a"] .faq-section details{margin:8px 0;padding:16px 18px;border:1px solid #ffffffd6;border-radius:16px;background:#ffffffa6;box-shadow:inset 0 1px 0 #fff,0 12px 28px #382c4a0b;backdrop-filter:blur(18px)}
html[data-design="glass-a"] .faq-section details:last-child{border-bottom:1px solid #ffffffd6}
html[data-design="glass-a"] .palette-tab{border-radius:14px;background:#ffffff80;box-shadow:inset 0 1px 0 #fff8;backdrop-filter:blur(16px)}
html[data-design="glass-a"] .hero-text,html[data-design="glass-a"] .fine-print,html[data-design="glass-a"] .site-header nav a,html[data-design="glass-a"] .trust,html[data-design="glass-a"] .tier-name span,html[data-design="glass-a"] .feature-filters button:not(.active),html[data-design="glass-a"] .wheel-mode-pills button:not(.active),html[data-design="glass-a"] .design-compare-switch span,html[data-design="glass-a"] .design-compare-switch a:not([aria-current="page"]){color:#4d4757}
html[data-design="glass-a"] .wheel-mode-pills button.active{color:#493594}
html[data-design="glass-b"] .feature[data-tier="go"]{background:#f7f5fcf2;color:#211d2a}
html[data-design="glass-b"] .feature[data-tier="go"] p{color:#514b5b}
html[data-design="glass-b"] .feature[data-tier="plus"],html[data-design="glass-b"] .feature[data-tier="ultra"]{background:linear-gradient(145deg,#302a3cea,#211e2cea);color:#fff}
html[data-design="glass-b"] .feature[data-tier="plus"] h3,html[data-design="glass-b"] .feature[data-tier="ultra"] h3{color:#fff}
html[data-design="glass-b"] .feature[data-tier="plus"] p,html[data-design="glass-b"] .feature[data-tier="ultra"] p{color:#e0dce8}
html[data-design="glass-b"] .tier-card-plus,html[data-design="glass-b"] .tier-card-ultra{background:linear-gradient(145deg,#302a3cea,#211e2cea);color:#fff}
html[data-design="glass-b"] .tier-card-plus .tier-subtitle,html[data-design="glass-b"] .tier-card-plus li,html[data-design="glass-b"] .tier-card-ultra .tier-subtitle,html[data-design="glass-b"] .tier-card-ultra li{color:#e0dce8}
html[data-design="glass-b"] .tier-card-ultra{border-color:#b7a5ff;box-shadow:inset 0 1px 0 #fff5,0 0 0 1px #a789ff66,0 22px 62px #815ee454}
html[data-design="glass-b"] .feature-match-example small,html[data-design="glass-b"] .feature-match-example em{color:#514b5b}
html[data-design="glass-b"] .workflow-section li{margin:0 0 12px;padding:16px;border:1px solid #ffffff22;border-radius:17px;background:#ffffff0b;box-shadow:inset 0 1px 0 #ffffff15,0 12px 30px #09070f32;backdrop-filter:blur(20px)}
html[data-design="glass-b"] .faq-section details{margin:8px 0;padding:16px 18px;border:1px solid #ffffff22;border-radius:16px;background:#ffffff0a;box-shadow:inset 0 1px 0 #ffffff14,0 12px 30px #09070f32;backdrop-filter:blur(20px)}
html[data-design="glass-b"] .faq-section details:last-child{border-bottom:1px solid #ffffff22}
html[data-design="glass-b"] .palette-tab{border-radius:14px;box-shadow:inset 0 1px 0 #ffffff16;backdrop-filter:blur(16px)}
html[data-design="glass-b"] .labels-scene{border:1px solid #ffffff28;border-radius:30px;background:linear-gradient(145deg,#30283de0,#1a1624db);box-shadow:0 28px 74px #05030b77,inset 0 1px 0 #ffffff24;backdrop-filter:blur(26px) saturate(1.4)}
html[data-design="glass-b"] .label-sheet{border-color:#ffffffd9;border-radius:20px;background:#f5f2faf2;color:#211d2a;box-shadow:0 24px 54px #07050e66,inset 0 1px 0 #fff;opacity:1;transform:scale(.88) rotate(1deg);backdrop-filter:blur(20px)}
html[data-design="glass-b"] .label-sheet .sheet-top,html[data-design="glass-b"] .label-sheet .big-label b,html[data-design="glass-b"] .label-sheet .pill-label,html[data-design="glass-b"] .label-sheet .cmf-mini b{color:#211d2a}
html[data-design="glass-b"] .label-sheet .big-label span,html[data-design="glass-b"] .label-sheet .cmf-mini p{color:#4b4553}
html[data-design="glass-b"] .label-origin{border:1px solid #ffffff;background:#f5f2fa;color:#211d2a;border-radius:12px}
html[data-design="glass-b"] .label-origin b{color:#211d2a;line-height:1.25}
html[data-design="glass-b"] .label-copy h2{color:#fbf9ff}
html[data-design="glass-b"] .label-copy>p:not(.eyebrow),html[data-design="glass-b"] .label-demo-hint{color:#d1cada}
html[data-design="glass-b"] .flow-list span{color:#f0ecf6}
html[data-design="glass-b"] .flow-list b{background:#3e3356;color:#d4c6ff}
html[data-design="glass-b"] .wheel-story-copy>p:not(.eyebrow),html[data-design="glass-b"] .wheel-legal-note,html[data-design="glass-b"] .wheel-current-color small,html[data-design="glass-b"] .wheel-current-hex,html[data-design="glass-b"] .wheel-harmony-caption,html[data-design="glass-b"] .wheel-palette-lines small,html[data-design="glass-b"] .wheel-drag-hint{color:#d1cada}
html[data-design="glass-b"] .wheel-current-hex b,html[data-design="glass-b"] .wheel-palette-lines b{color:#f2eef8}
html[data-design] .feature[data-tier="ultra"]{border-color:#b7a5ff;box-shadow:inset 0 1px 0 #fff5,0 0 0 1px #a789ff44,0 22px 58px #815ee430}
.ai-canvas{border:1px solid #ffffffb8;box-shadow:0 18px 54px #17121f25}
.canvas-art{background:radial-gradient(circle at 50% 38%,#f9f7fc 0,#eeebf4 50%,#e4dfea 100%)}
.label-sheet{min-height:460px;opacity:1;transform:scale(.88) rotate(1deg)}
.label-origin{z-index:5}
@media(max-width:560px){.go-top-results>div{padding:7px 8px}.palette-card-mini{padding:10px}.palette-card-swatches{height:96px}.palette-card-labels{gap:4px}.palette-card-labels b{font-size:9px}.palette-card-labels small{font-size:8px}.match-panel,.story-stage .match-panel{right:12px;left:12px;top:auto;bottom:14px;width:auto;min-width:0;padding:13px;transform:none!important}.story-stage{min-height:760px!important}.story-stage .ai-canvas{top:58px!important;right:12px!important;bottom:285px!important;left:12px!important}.story-stage .stage-caption{top:14px;left:14px;font-size:11px}.panel-match-note{font-size:10px}.panel-label span{font-size:8px}.labels-scene{padding:20px!important}.label-sheet{min-height:400px;transform:scale(.92) rotate(1deg);transform-origin:top center}.label-flow{min-height:auto!important;padding-top:72px!important;padding-bottom:48px!important}.cmf-mini{right:12px;bottom:16px;width:48%}.label-origin{left:14%;top:12%;transform:rotate(-3deg) scale(.84)}}
@media(prefers-reduced-motion:reduce){html[data-design] :is(.feature,.tier-card,.panel-window,.match-panel,.wheel-demo-shell,.palette-art,.label-sheet,.wheel-current-color,.wheel-current-hex,.wheel-palette-lines>div,.palette-card-mini)::before{animation:none;background-position:center}}

@media(max-width:1050px){
  .site-header nav{gap:12px}.site-header nav a{font-size:12px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wheel-showcase{grid-template-columns:1fr;gap:32px}
  .wheel-story-copy{max-width:720px}
  .wheel-demo-grid{grid-template-columns:minmax(250px,.95fr) minmax(230px,.75fr)}
  .wheel-demo-shell{max-width:850px;width:100%;margin:auto}
}
@media(max-width:800px){
  .site-header nav{display:none}
  .hero-capability-rail{bottom:0}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .feature{min-height:300px}
  .wheel-showcase{margin:28px 16px 0;padding:58px 22px;border-radius:30px}
  .wheel-demo-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .marketing-wheel{width:min(100%,400px)}
  .wheel-demo-controls{max-width:520px;width:100%;margin:auto}
}
@media(max-width:560px){
  .site-header{top:8px;width:calc(100% - 20px);margin-top:8px;padding:0 13px}
  .header-tools{margin-left:auto}
  .hero{padding:38px 16px 45px}
  .hero:before{inset:8px 4px 0!important;border-radius:26px!important}
  .hero-actions{display:grid;grid-template-columns:1fr;align-items:stretch}
  .hero-actions .primary,.hero-actions .secondary{width:100%;white-space:nowrap;padding:13px 10px;font-size:13px}
  .hero-actions .primary span{display:inline;margin-left:5px;padding-left:6px;font-size:11px}
  .hero-art{min-height:370px}
  .hero-capability-rail{gap:5px;padding:0 4px;bottom:-6px}
  .hero-capability-rail .rail-heading{display:none}
  .hero-capability-rail span:not(.rail-heading){padding:7px 8px;font-size:9px}
  .trust{width:calc(100% - 28px);gap:13px;overflow-x:auto;white-space:nowrap}
  .section-heading h2,.story-intro h2,.palette-showcase h2,.wheel-story-copy h2{font-size:clamp(34px,9.3vw,44px)}
  .section-lede{font-size:14px}
  .feature-grid{grid-template-columns:1fr!important;gap:12px}
  .feature{min-height:0;padding:22px}
  .feature h3{margin-top:22px}
  .feature-filters{gap:6px;margin-top:20px}
  .feature-filters button{padding:8px 12px;font-size:11px}
  .wheel-showcase{margin:18px 10px 0;padding:45px 14px;border-radius:25px}
  .wheel-demo-shell{padding:13px;border-radius:21px}
  .wheel-demo-grid{padding-top:13px}
  .marketing-wheel{width:min(100%,350px)}
  .marketing-wheel-inner{inset:31%}
  .marketing-wheel-inner small{font-size:9px}
  .marketing-wheel-inner i{width:30px;height:30px}
  .marketing-wheel-inner b{font-size:10px}
  .wheel-current-color{padding:9px}.wheel-mode-pills button{font-size:9px}
  .wheel-showcase .showcase-plan-link{font-size:11px}
  .palette-showcase,.workflow-section{margin-right:10px!important;margin-left:10px!important;border-radius:25px!important}
  .design-compare-switch{right:9px;bottom:9px;padding:4px;gap:2px}
  .design-compare-switch span{display:none}
  .design-compare-switch a{padding:8px 10px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Liquid-glass micro-surfaces: chips, controls, compact result rows, and swatches. */
html[data-design] :is(.feature-filters button,.feature-chip-row span,.go-three-preview span,.hero-capability-rail span:not(.rail-heading),.palette-tab,.wheel-mode-pills button,.design-compare-switch a,.feature-search-results>*,.top-five-preview>div,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search,.hero-mini-search,.hero-palette-strip){
  position:relative;
  isolation:isolate;
  border:1px solid #ffffff70;
  background-color:#ffffff38;
  background-image:linear-gradient(145deg,#ffffff45 0%,#ffffff12 42%,#ffffff05 72%,#ffffff20 100%);
  box-shadow:inset 0 1px 0 #ffffffa1,inset 0 -1px 0 #ffffff24,0 5px 16px #32254d12;
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
html[data-design] :is(.feature-filters button,.palette-tab,.wheel-mode-pills button,.design-compare-switch a){overflow:hidden}
html[data-design] :is(.feature-filters button,.palette-tab,.wheel-mode-pills button,.design-compare-switch a):hover{transform:translateY(-1px);border-color:#ffffffc2;box-shadow:inset 0 1px 0 #fff,0 8px 20px #34244d20}
html[data-design] :is(.feature-filters button,.palette-tab,.wheel-mode-pills button,.design-compare-switch a):active{transform:translateY(0) scale(.975);box-shadow:inset 0 2px 5px #17102024}
html[data-design] :is(.feature-filters button,.palette-tab,.wheel-mode-pills button,.design-compare-switch a):focus-visible{outline:2px solid #a894ff;outline-offset:2px}
html[data-design] :is(.feature-filters button.active,.palette-tab.active,.wheel-mode-pills button.active,[aria-current="page"]){border-color:#c9bcff;background-color:#795ff0;color:#fff;box-shadow:inset 0 1px 0 #ffffffa8,inset 0 0 0 1px #ffffff28,0 7px 20px #7355e942}
html[data-design="glass-a"] :is(.feature-filters button:not(.active),.feature-chip-row span,.go-three-preview span,.hero-capability-rail span:not(.rail-heading),.palette-tab:not(.active),.wheel-mode-pills button:not(.active),.design-compare-switch a:not([aria-current="page"]),.feature-search-results>*,.top-five-preview>div,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search,.hero-mini-search,.hero-palette-strip){
  border-color:#ffffffdb;
  background-color:#ffffff76;
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff8c, 0 6px 18px #36284e12;
}
html[data-design="glass-a"] :is(.feature-chip-row span,.go-three-preview span,.feature-search-results>*,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.tier-state,.panel-search){color:#383243}
html[data-design="glass-a"] :is(.feature-search-results small,.go-top-results small,.top-five-preview em,.tier-state small){color:#595365}
html[data-design="glass-b"] :is(.feature-filters button:not(.active),.feature-chip-row span,.go-three-preview span,.hero-capability-rail span:not(.rail-heading),.palette-tab:not(.active),.wheel-mode-pills button:not(.active),.design-compare-switch a:not([aria-current="page"]),.feature-search-results>*,.top-five-preview>div,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search,.hero-mini-search,.hero-palette-strip){
  border-color:#ffffff28;
  background-color:#ffffff0b;
  background-image:linear-gradient(145deg,#ffffff18 0%,#ffffff08 44%,#ffffff03 75%,#bca8ff0c 100%);
  box-shadow:inset 0 1px 0 #ffffff28,inset 0 -1px 0 #ffffff0b,0 7px 20px #09060f44;
  color:#f3effa;
}
html[data-design="glass-b"] :is(.feature-chip-row span,.go-three-preview span,.feature-search-results>*,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search){color:#f3effa}
html[data-design="glass-b"] :is(.feature-search-results small,.go-top-results small,.top-five-preview em,.tier-state small,.feature-label-art small){color:#cbc3d6}
html[data-design] .feature:is([data-tier="plus"],[data-tier="ultra"]) :is(.top-five-preview>div,.feature-label-art,.project-mini,.library-mini,.batch-mini){border-color:#ffffff24;background-color:#ffffff0b;background-image:linear-gradient(145deg,#ffffff18,#ffffff06 58%,#ffffff0a);box-shadow:inset 0 1px 0 #ffffff28,inset 0 -1px 0 #ffffff08,0 6px 16px #08060f38;color:#f3effa}
html[data-design] .feature:is([data-tier="plus"],[data-tier="ultra"]) :is(.feature-label-art small,.top-five-preview em){color:#cbc3d6}
html[data-design] :is(.feature-bars i,.feature-ratio-art i,.palette-ratio i,.palette-card-swatches i,.palette-card-mini .palette-card-swatches i,.feature-label-art>i,.project-mini>i,.batch-mini>i,.hero-palette-strip>i,.match-row>i,.panel-match>i,.go-top-results>div>i,.top-five-preview>div>i,.wheel-palette-lines>div>i,.marketing-wheel-point,.feature-wheel-art i,.feature-wheel-art b){
  background-image:linear-gradient(145deg,#ffffff65 0%,#ffffff16 35%,transparent 65%,#00000014 100%);
  box-shadow:inset 0 1px 0 #ffffff8a,inset 0 -1px 0 #0000001c,0 3px 10px #17102020;
}
html[data-design] :is(.feature-bars i,.feature-ratio-art i,.palette-ratio i,.palette-card-swatches i,.feature-label-art>i,.project-mini>i,.batch-mini>i,.hero-palette-strip>i,.match-row>i,.panel-match>i,.go-top-results>div>i,.top-five-preview>div>i,.wheel-palette-lines>div>i){border:1px solid #ffffff45}
html[data-design] .palette-card-labels span{padding:5px 6px;border:1px solid #ffffff36;border-radius:10px;background:linear-gradient(145deg,#ffffff16,#ffffff05);box-shadow:inset 0 1px 0 #ffffff40}
html[data-design="glass-a"] .palette-card-labels span{border-color:#ffffff88;background:linear-gradient(145deg,#ffffff54,#ffffff16)}
html[data-design="glass-b"] .palette-card-labels span{border-color:#ffffff22;background:linear-gradient(145deg,#ffffff12,#ffffff04)}
html[data-design] .panel-window :is(.match-row,.panel-match,.favorite-toggle){position:relative;isolation:isolate;border:1px solid #ffffff22;background:linear-gradient(145deg,#ffffff14,#ffffff06 60%,#ffffff0a);box-shadow:inset 0 1px 0 #ffffff28,inset 0 -1px 0 #ffffff08,0 5px 14px #08060d30;backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25)}
html[data-design] .panel-window .favorite-toggle:hover{transform:translateY(-1px);border-color:#bba9ff88;box-shadow:inset 0 1px 0 #ffffff44,0 6px 16px #0b07145c}
html[data-design="glass-a"] .feature-match-example{border-color:#ffffffd6;background:linear-gradient(145deg,#ffffffae,#ffffff64);box-shadow:inset 0 1px 0 #fff,0 8px 22px #34254c12;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-design="glass-b"] .feature-match-example{border-color:#ffffff24;background:linear-gradient(145deg,#ffffff16,#ffffff08);box-shadow:inset 0 1px 0 #ffffff25,0 8px 22px #09070f36;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media(prefers-reduced-motion:reduce){html[data-design] :is(.feature-filters button,.palette-tab,.wheel-mode-pills button,.design-compare-switch a){transition:none}}

/* Softer glass pass: keep the material on frames, not on the content itself. */
html[data-design] :is(.feature,.tier-card,.panel-window,.match-panel,.wheel-demo-shell,.palette-art,.label-sheet,.wheel-current-color,.wheel-current-hex,.wheel-palette-lines>div,.palette-card-mini,.site-header,.palette-showcase,.wheel-showcase,.workflow-section,.faq-section details,.labels-scene,.design-compare-switch)::before{display:none!important}
html[data-design] :is(.feature,.tier-card,.panel-window,.match-panel,.wheel-demo-shell,.palette-art,.label-sheet,.wheel-current-color,.wheel-current-hex,.wheel-palette-lines>div,.palette-card-mini,.site-header,.palette-showcase,.wheel-showcase,.workflow-section,.faq-section details,.labels-scene,.design-compare-switch){
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  box-shadow:0 14px 38px #21183112,inset 0 0 0 1px #ffffff0c;
}
html[data-design] :is(.feature-filters button,.feature-chip-row span,.go-three-preview span,.hero-capability-rail span:not(.rail-heading),.palette-tab,.wheel-mode-pills button,.design-compare-switch a,.feature-search-results>*,.top-five-preview>div,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search,.hero-mini-search,.hero-palette-strip,.panel-window .match-row,.panel-window .panel-match,.panel-window .favorite-toggle){
  background-image:none;
  box-shadow:0 3px 14px #2118310b;
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
}
html[data-design="glass-a"] :is(.feature-filters button:not(.active),.feature-chip-row span,.go-three-preview span,.hero-capability-rail span:not(.rail-heading),.palette-tab:not(.active),.wheel-mode-pills button:not(.active),.design-compare-switch a:not([aria-current="page"]),.feature-search-results>*,.top-five-preview>div,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search,.hero-mini-search,.hero-palette-strip){
  border-color:#d9d3e3;
  background-color:#f8f6fcbb;
  box-shadow:0 4px 16px #34264b0b;
}
html[data-design="glass-b"] :is(.feature-filters button:not(.active),.feature-chip-row span,.go-three-preview span,.hero-capability-rail span:not(.rail-heading),.palette-tab:not(.active),.wheel-mode-pills button:not(.active),.design-compare-switch a:not([aria-current="page"]),.feature-search-results>*,.top-five-preview>div,.go-top-results>div,.wheel-palette-lines>div,.feature-label-art,.library-mini,.project-mini,.batch-mini,.tier-state,.panel-search,.hero-mini-search,.hero-palette-strip){
  border-color:#ffffff20;
  background-color:#ffffff0b;
  box-shadow:0 4px 18px #07050c2b;
}
html[data-design] :is(.feature-filters button.active,.palette-tab.active,.wheel-mode-pills button.active,.design-compare-switch a[aria-current="page"]){
  border:1px solid #8975d86b;
  background-color:#7b63ed1b;
  background-image:none;
  color:#5643aa;
  box-shadow:0 4px 16px #624caf14;
}
html[data-design="glass-b"] :is(.feature-filters button.active,.palette-tab.active,.wheel-mode-pills button.active,.design-compare-switch a[aria-current="page"]){border-color:#b09bff4d;background-color:#a88cff24;color:#eee8ff;box-shadow:0 4px 18px #06040b38}
html[data-design] :is(.feature-bars i,.feature-ratio-art i,.palette-ratio i,.palette-card-swatches i,.feature-label-art>i,.project-mini>i,.batch-mini>i,.hero-palette-strip>i,.match-row>i,.panel-match>i,.go-top-results>div>i,.top-five-preview>div>i,.wheel-palette-lines>div>i,.marketing-wheel-point,.feature-wheel-art i,.feature-wheel-art b){background-image:none;box-shadow:none}
html[data-design] :is(.feature-bars i,.feature-ratio-art i,.palette-ratio i,.palette-card-swatches i,.feature-label-art>i,.project-mini>i,.batch-mini>i,.hero-palette-strip>i,.match-row>i,.panel-match>i,.go-top-results>div>i,.top-five-preview>div>i,.wheel-palette-lines>div>i){border-color:#ffffff30}
html[data-design] .palette-card-labels span{background:none;box-shadow:none}
html[data-design="glass-a"] .palette-card-labels span{background:#ffffff12}
html[data-design="glass-b"] .palette-card-labels span{background:#ffffff08}
/* Match the real Illustrator export: equal labels live inside the 60/30/10 color bands. */
html[data-design] .palette-card-mini{padding:12px}
html[data-design] .palette-card-swatches{height:clamp(100px,11vw,142px);border-radius:10px}
html[data-design] .palette-card-swatches i{position:relative;display:block;min-width:0}
html[data-design] .palette-card-swatches i:nth-child(1){background:#859587}
html[data-design] .palette-card-swatches i:nth-child(2){background:#bbb299}
html[data-design] .palette-card-swatches i:nth-child(3){background:#a38780}
html[data-design] .palette-card-swatches i>span{position:absolute;right:8px;bottom:8px;display:block;width:max-content;max-width:none;transform:rotate(90deg);transform-origin:bottom right;color:#16151a;font:normal 700 7px/1.2 "Microsoft YaHei","PingFang SC",sans-serif;letter-spacing:0;white-space:nowrap;text-shadow:none}
html[data-design] .palette-card-swatches i:nth-child(3)>span{right:50%;transform:translateX(50%) rotate(90deg);transform-origin:bottom center}
/* Keep recognition samples flat and tier-neutral; use the card frame for plan identity. */
html[data-design] :is(.feature-bars i,.feature-ratio-art i,.palette-ratio i,.palette-card-swatches i,.feature-label-art>i,.project-mini>i,.batch-mini>i,.hero-palette-strip>i,.match-row .swatch,.panel-current>i,.panel-match>i,.go-top-results>div>i,.top-five-preview>div>i,.wheel-palette-lines>div>i,.marketing-wheel-point,.feature-wheel-art i,.feature-wheel-art b){background-image:none!important;border:0!important;box-shadow:none!important;filter:none!important}
html[data-design] :is(.feature[data-tier="ultra"],.tier-card-ultra){border-color:#b9a8ff78!important;box-shadow:0 14px 38px #21183118,inset 0 1px 4px #dfd3ff60,0 0 18px #9675ff1c!important}
@media(max-width:560px){
  html[data-design] .story-track{height:auto!important}
  html[data-design] .story-stage{position:relative!important;top:auto!important;display:flex;flex-direction:column;gap:12px;height:auto!important;min-height:0!important;padding:58px 12px 14px;overflow:hidden}
  html[data-design] .story-stage .ai-canvas,html[data-design] .story-stage[data-step] .ai-canvas{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:100%!important;height:clamp(240px,68vw,310px);min-height:240px;margin:0;transform:none!important}
  html[data-design] .story-stage .match-panel{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0;padding:12px;transform:none!important;transform-origin:center!important;animation:none!important}
  html[data-design] .story-stage .stage-caption{top:12px;right:12px;left:13px;font-size:11px}
  html[data-design] .story-stage .stage-note{display:none!important}
  html[data-design] .palette-card-mini{padding:9px}
  html[data-design] .palette-card-swatches{height:100px}
  html[data-design] .palette-card-swatches i>span{right:6px;bottom:6px;font-size:7px}
}

/* Product-faithful CMF card labels and tier/feature differentiation. */
html[data-design] .palette-ratio{position:relative;height:clamp(210px,24vw,275px);isolation:isolate}
html[data-design] .palette-ratio>i{position:relative;display:block;flex:0 0 auto}
html[data-design] .palette-ratio>i:nth-child(1){width:60%}
html[data-design] .palette-ratio>i:nth-child(2){width:30%}
html[data-design] .palette-ratio>i:nth-child(3){width:10%}
html[data-design] .palette-band-label{position:absolute;right:18px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:max-content;transform:rotate(90deg);transform-origin:bottom right;color:#fff;text-align:left;white-space:nowrap}
html[data-design] .palette-band-label b{font-size:11px;line-height:1.2;font-weight:800}
html[data-design] .palette-band-role{font-size:10px;line-height:1.2;font-style:normal;font-weight:700}
html[data-design] .palette-ratio>i:nth-child(3) .palette-band-label{right:50%;transform:translateX(50%) rotate(90deg);transform-origin:bottom center;align-items:center;text-align:center}
html[data-design="glass-b"] .palette-art{background:linear-gradient(145deg,#282334,#1b1823);border-color:#ffffff24}
html[data-design] .feature-collection-art,html[data-design] .feature-generated-art{position:relative;isolation:isolate;margin-top:20px;padding:13px;border:1px solid #ffffff32;border-radius:16px;background:linear-gradient(145deg,#ffffff12,#ffffff06);box-shadow:0 8px 24px #08060f25,inset 0 1px 2px #ffffff14;color:#f4f0fa}
html[data-design] .collection-art-head,html[data-design] .collection-art-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
html[data-design] .collection-art-head b{font-size:11px}
html[data-design] .collection-art-head small,html[data-design] .collection-art-foot span{color:#c7bfd4;font-size:9px}
html[data-design] .collection-art-swatches{display:flex;align-items:center;gap:7px;margin-top:10px}
html[data-design] .collection-art-swatches i{width:27px;height:27px;border-radius:8px;background:#9b656d}
html[data-design] .collection-art-swatches i:nth-child(2){background:#5e756d}
html[data-design] .collection-art-swatches i:nth-child(3){background:#c8af87}
html[data-design] .collection-art-swatches i:nth-child(4){background:#7891a4}
html[data-design] .collection-art-swatches span{display:grid;width:27px;height:27px;place-items:center;border:1px solid #ffffff27;border-radius:8px;color:#e2d8f5;font-size:9px;font-weight:800}
html[data-design] .collection-art-foot{margin-top:9px;padding-top:8px;border-top:1px solid #ffffff1d}
html[data-design] .collection-art-foot b{color:#d5c7ff;font-size:9px}
html[data-design] .generated-art-ratio{display:flex;height:42px;overflow:hidden;border-radius:8px}
html[data-design] .generated-art-ratio i:nth-child(1){flex:6;background:#9b656d}
html[data-design] .generated-art-ratio i:nth-child(2){flex:3;background:#5e756d}
html[data-design] .generated-art-ratio i:nth-child(3){flex:1;background:#c8af87}
html[data-design] .generated-art-copy{display:flex;flex-direction:column;gap:3px;margin-top:9px}
html[data-design] .generated-art-copy b{color:#fff;font-size:11px;letter-spacing:.02em}
html[data-design] .generated-art-copy small{color:#c7bfd4;font-size:9px}
html[data-design] .generated-art-mark{position:absolute;right:13px;bottom:13px;display:grid;width:25px;height:25px;place-items:center;border:1px solid #d0bdff5c;border-radius:8px;background:#a98cff17;color:#e2d6ff;font-size:9px;font-weight:900}
html[data-design] .feature[data-tier="ultra"],html[data-design] .tier-card-ultra{position:relative;border-color:#c1aaff!important;background:linear-gradient(145deg,#3b2e53f5,#241c34f5)!important;box-shadow:0 17px 48px #714dbd35,inset 0 1px 4px #e2d2ff70,0 0 23px #a27bff2b!important}
html[data-design] .feature[data-tier="ultra"]::after,html[data-design] .tier-card-ultra::after{position:absolute;z-index:1;top:0;right:22px;left:22px;height:2px;content:"";border-radius:0 0 50% 50%;background:linear-gradient(90deg,transparent,#9e7af0aa,#d7c8ff,#9e7af0aa,transparent);filter:blur(.5px);pointer-events:none}
html[data-design] .feature[data-tier="ultra"] .num{color:#e0d3ff}
html[data-design="glass-a"] .feature[data-tier="ultra"]{border-color:#c6b1ff!important}
html[data-design="glass-b"] .feature[data-tier="ultra"],html[data-design="glass-b"] .tier-card-ultra{background:linear-gradient(145deg,#372852f5,#21192ff5)!important}
@media(max-width:560px){
  html[data-design] .palette-ratio{height:210px}
  html[data-design] .palette-band-label{right:9px;bottom:10px}
  html[data-design] .palette-band-label b{font-size:9px}
  html[data-design] .palette-band-role{font-size:8px}
  html[data-design] .palette-ratio>i:nth-child(3) .palette-band-label{right:50%}
  html[data-design] .feature-collection-art,html[data-design] .feature-generated-art{padding:11px}
  html[data-design] .collection-art-swatches{gap:5px}
  html[data-design] .collection-art-swatches i,html[data-design] .collection-art-swatches span{width:24px;height:24px}
}

/* Clear Pantone captions outside the 60/30/10 swatches: readable at card and phone sizes. */
html[data-design] .palette-art .palette-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
html[data-design] .palette-art .palette-labels span{display:block;min-width:0;color:#f7f4fa}
html[data-design] .palette-art .palette-labels b{display:block;overflow-wrap:anywhere;color:#fff;font:800 10px/1.3 Inter,"Microsoft YaHei",sans-serif;letter-spacing:0;white-space:normal}
html[data-design] .palette-art .palette-labels em{display:block;margin-top:3px;color:#c9c2d1;font:500 9px/1.3 Inter,"Microsoft YaHei",sans-serif;font-style:normal}
html[data-design] .palette-card-mini{padding:12px}
html[data-design] .palette-card-swatches{display:flex;height:clamp(88px,9vw,116px);overflow:hidden;border-radius:10px}
html[data-design] .palette-card-swatches i{min-width:0;flex:var(--ratio,1)}
html[data-design] .palette-card-swatches i:nth-child(1){flex:6;background:#859587}
html[data-design] .palette-card-swatches i:nth-child(2){flex:3;background:#bbb299}
html[data-design] .palette-card-swatches i:nth-child(3){flex:1;background:#a38780}
html[data-design] .palette-card-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px}
html[data-design] .palette-card-labels span{display:block;min-width:0;color:#f5f2f8}
html[data-design] .palette-card-labels b{display:block;overflow:hidden;font:700 7px/1.25 Inter,"Microsoft YaHei",sans-serif;letter-spacing:0;overflow-wrap:anywhere;white-space:normal}
html[data-design] .palette-card-labels em{display:block;margin-top:3px;color:#c8c1d0;font:500 7px/1.25 Inter,"Microsoft YaHei",sans-serif;font-style:normal;white-space:nowrap}
html[data-design="glass-a"] .palette-card-labels span{color:#312d38}
html[data-design="glass-a"] .palette-card-labels em{color:#6e6877}
html[data-design="glass-b"] .palette-art .palette-labels span,html[data-design="glass-b"] .palette-card-labels span{color:#f7f4fa}
@media(max-width:560px){
  html[data-design] .palette-art .palette-labels{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  html[data-design] .palette-art .palette-labels b{font-size:8px;line-height:1.35}
  html[data-design] .palette-art .palette-labels em{font-size:8px}
  html[data-design] .palette-card-mini{padding:9px}
  html[data-design] .palette-card-swatches{height:88px}
  html[data-design] .palette-card-labels{gap:4px}
  html[data-design] .palette-card-labels b{font-size:6px}
  html[data-design] .palette-card-labels em{font-size:6px}
}
/* Larger invisible hit targets make both harmony handles draggable on touch screens. */
html[data-design] .marketing-wheel-point{width:36px!important;height:36px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
html[data-design] .marketing-wheel-point::before{position:absolute;inset:9px;content:"";border:2px solid #fff;border-radius:50%;background:var(--point-color,#7051b8);box-shadow:0 3px 12px #1611246b,0 0 0 2px #34294f78;transition:transform .18s ease,box-shadow .18s ease}
html[data-design] .marketing-wheel-point.point-main::before{inset:7px}
html[data-design] .marketing-wheel-point.point-accent::before{inset:10px}
html[data-design] .marketing-wheel-point:hover::before,html[data-design] .marketing-wheel-point:active::before{transform:scale(1.16);box-shadow:0 4px 14px #16112488,0 0 0 3px #ffffff8a}
html[data-design] .marketing-wheel-point:focus-visible{outline:2px solid #765cf2;outline-offset:1px}
html[data-design] .marketing-wheel-point[aria-disabled="true"]{cursor:not-allowed;opacity:.86}
html[data-design] #palette-wheel{scroll-margin-top:96px}
/* Make the project-tier surface unmistakably premium while keeping Plus neutral. */
html[data-design] .feature[data-tier="ultra"],html[data-design] .tier-card-ultra{border:1.5px solid #d0bdff!important;background:radial-gradient(ellipse at 50% 0%,#7854b745,transparent 54%),linear-gradient(145deg,#403151,#231d31)!important;box-shadow:0 26px 64px #714dbd48,inset 0 1px 0 #f1eaffaa,inset 0 0 0 1px #a783f044,0 0 32px #a27bff38!important}
html[data-design] .feature[data-tier="ultra"]::before{display:none!important}
html[data-design] .feature[data-tier="ultra"] .num{display:flex;align-items:center;gap:8px}
html[data-design] .feature[data-tier="ultra"] .num::after{display:inline-flex;align-items:center;min-height:19px;padding:0 8px;content:"PROJECT";border:1px solid #e1d5ff80;border-radius:999px;background:#b496ff20;color:#eee5ff;font:800 7px/1 Inter,sans-serif;letter-spacing:.09em}
html[data-design] .feature[data-tier="ultra"]::after,html[data-design] .tier-card-ultra::after{height:3px;background:linear-gradient(90deg,transparent,#a987ff,#f1e9ff,#a987ff,transparent);filter:blur(.25px);box-shadow:0 0 14px #b796ff90}
html[data-design] .feature[data-tier="ultra"] .num,html[data-design] .tier-card-ultra .tier-name{color:#e7dbff!important}

/* Public site ships the dark glass treatment only; Go cards stay in the same dark family. */
html[data-design="glass-b"] .feature[data-tier="go"]{border-color:#d3c4f052!important;background:linear-gradient(145deg,#40364feF,#2e273aeF)!important;color:#f8f5ff!important;box-shadow:inset 0 1px 0 #ffffff2c,0 18px 48px #08050f4d!important}
html[data-design="glass-b"] .feature[data-tier="go"] h3{color:#f8f5ff!important}
html[data-design="glass-b"] .feature[data-tier="go"] p{color:#c9c1d3!important}
html[data-design="glass-b"] .feature[data-tier="go"] .num{color:#c2b1ff!important}
html[data-design="glass-b"] .feature[data-tier="go"] .num{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border:1px solid #d8caff4d;border-radius:999px;background:linear-gradient(135deg,#c8b8ff26,#ffffff0a);box-shadow:inset 0 1px 0 #ffffff28;color:#e1d7ff!important;letter-spacing:.08em}
html[data-design="glass-b"] .feature[data-tier="go"] :is(.feature-chip-row span,.go-three-preview span,.feature-search-results>span,.go-top-results>div,.palette-card-mini){border-color:#ffffff24!important;background-color:#ffffff0a!important;color:#f0eafa!important}
html[data-design="glass-b"] .feature[data-tier="go"] :is(.feature-search-results>span,.go-top-results>div){box-shadow:inset 0 1px 0 #ffffff12,0 4px 14px #08050f30!important}
html[data-design="glass-b"] .feature[data-tier="go"] .go-top-results small{color:#c5bdcf!important}
html[data-design="glass-b"] .feature[data-tier="go"] .palette-card-labels span{color:#f3eef8!important}
html[data-design="glass-b"] .feature[data-tier="go"] .palette-card-labels em{color:#c9c1d1!important}

/* Soft cursor light for desktop pointers; stays behind all readable content. */
html[data-design="glass-b"] body{isolation:isolate}
html[data-design="glass-b"] body>main,html[data-design="glass-b"] body>footer{position:relative;z-index:1}
html[data-design="glass-b"] .cursor-glow{position:fixed;z-index:0;left:50%;top:50%;width:440px;height:440px;border-radius:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(164,135,255,.19) 0%,rgba(128,94,229,.11) 24%,rgba(102,73,180,.045) 45%,transparent 70%);filter:blur(18px);mix-blend-mode:screen;transition:left .2s cubic-bezier(.2,.65,.3,1),top .2s cubic-bezier(.2,.65,.3,1),opacity .3s ease}
html[data-design="glass-b"] .cursor-glow.is-visible{opacity:.82}
@media(max-width:700px),(prefers-reduced-motion:reduce){html[data-design="glass-b"] .cursor-glow{display:none!important}}

/* Responsive story layout: never use a scaled, oversized floating match panel on narrow viewports. */
@media(max-width:700px){
  html[data-design] .story-track{height:300svh!important}
  html[data-design] .story-stage{position:sticky!important;top:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important;height:100svh!important;min-height:0!important;padding:48px 12px 10px!important;overflow:hidden!important}
  html[data-design] .story-stage .ai-canvas,html[data-design] .story-stage[data-step] .ai-canvas{position:relative!important;inset:auto!important;flex:0 0 clamp(190px,30svh,260px)!important;width:100%!important;height:clamp(190px,30svh,260px)!important;min-height:0!important;margin:0!important;transform:none!important}
  html[data-design] .story-stage .canvas-media{width:min(92%,360px)!important;max-width:92%!important;max-height:100%!important;transform:translateY(-3%) scale(.9)!important}
  html[data-design] .story-stage .match-panel{position:relative!important;inset:auto!important;flex:1 1 auto!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:0!important;margin:0!important;padding:9px!important;transform:none!important;transform-origin:center!important;animation:none!important;overflow:auto!important}
  html[data-design] .story-stage .panel-brand{padding-bottom:7px!important}
  html[data-design] .story-stage .panel-current{margin:7px 0!important}
  html[data-design] .story-stage .panel-current>i{width:34px!important;height:34px!important}
  html[data-design] .story-stage .panel-match{min-height:28px!important;margin-top:4px!important;padding:4px 6px!important}
  html[data-design] .story-stage .panel-match>i{width:18px!important;height:18px!important}
  html[data-design] .story-stage .panel-search{margin-top:7px!important;padding:6px!important}
  html[data-design] .story-stage .demo-action-status{margin:5px 0 0!important}
  html[data-design] .story-stage .stage-caption{top:9px!important;right:12px!important;left:12px!important;font-size:10px!important}
  html[data-design] .story-stage .stage-note{display:none!important}
}

/* Tier hierarchy: Go is quiet dark glass, Plus gets a restrained violet edge,
   and Ultra keeps its existing premium treatment. */
html[data-design="glass-b"] :is(.feature[data-tier="go"],.tier-card:not(.tier-card-plus):not(.tier-card-ultra)){
  border:1px solid rgba(211,196,240,.18)!important;
  background:linear-gradient(145deg,rgba(57,49,68,.82),rgba(37,32,46,.9))!important;
  color:#f8f5ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 44px rgba(7,5,12,.34)!important
}
html[data-design="glass-b"] :is(.feature[data-tier="go"],.tier-card:not(.tier-card-plus):not(.tier-card-ultra)) h3{color:#f8f5ff!important}
html[data-design="glass-b"] :is(.feature[data-tier="go"],.tier-card:not(.tier-card-plus):not(.tier-card-ultra)) p{color:#cec7d7!important}
html[data-design="glass-b"] .feature[data-tier="go"] .num{color:#d0c2ff!important}
html[data-design="glass-b"] :is(.feature[data-tier="plus"],.tier-card-plus){
  border-color:rgba(176,145,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(154,119,255,.12),0 0 22px rgba(142,105,255,.14),0 20px 48px rgba(8,5,16,.28)!important
}

/* Keep the color sample itself clean: remove only the frame around Ultra's swatch row. */
html[data-design="glass-b"] .feature[data-tier="ultra"] .batch-mini{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important
}

/* Desktop demo: keep the app mockup on the right of the canvas at every zoom. */
@media(min-width:701px){
  html[data-design] .story-stage .ai-canvas,
  html[data-design] .story-stage[data-step] .ai-canvas{
    left:32px!important;right:38%!important;transform:none!important
  }
  html[data-design] .story-stage .match-panel{
    position:absolute!important;left:auto!important;right:clamp(16px,2.8vw,36px)!important;
    top:103px!important;bottom:auto!important;width:clamp(220px,28%,340px)!important;
    min-width:0!important;transform:none!important;transform-origin:top right!important
  }
}
@media(min-width:701px) and (max-width:850px){
  html[data-design] .story-stage .ai-canvas,
  html[data-design] .story-stage[data-step] .ai-canvas{right:39%!important}
  html[data-design] .story-stage .match-panel{right:14px!important;width:clamp(220px,34%,280px)!important}
}

/* A global cursor halo, layered behind page content and suppressed over visual demos. */
html[data-design="glass-b"] body{position:relative;isolation:isolate}
html[data-design="glass-b"] body> :not(.cursor-glow){position:relative;z-index:1}
html[data-design="glass-b"] .cursor-glow{z-index:0;width:480px;height:480px;opacity:0;background:radial-gradient(circle,rgba(164,135,255,.16) 0%,rgba(128,94,229,.085) 27%,rgba(102,73,180,.025) 48%,transparent 72%);filter:blur(24px);mix-blend-mode:screen}
html[data-design="glass-b"] .cursor-glow.is-visible{opacity:.72}
html[data-design="glass-b"] .cursor-glow-host{isolation:isolate}
html[data-design="glass-b"] .cursor-glow-host>.cursor-glow{position:fixed;z-index:0}
html[data-design="glass-b"] .cursor-glow-host>:not(.cursor-glow){position:relative;z-index:1}
@media(hover:none),(prefers-reduced-motion:reduce){html[data-design="glass-b"] .cursor-glow{display:none!important}}
@media(max-width:700px) and (hover:hover) and (prefers-reduced-motion:no-preference){html[data-design="glass-b"] .cursor-glow{display:block!important}}

/* Make the free/paid tiers unmistakable: neutral charcoal Go, violet-lit Plus. */
html[data-design="glass-b"] :is(.feature[data-tier="go"],.tier-card:not(.tier-card-plus):not(.tier-card-ultra)){
  border-color:rgba(225,218,239,.16)!important;
  background:linear-gradient(150deg,rgba(43,40,49,.96),rgba(27,25,32,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 42px rgba(0,0,0,.34)!important
}
html[data-design="glass-b"] .feature[data-tier="go"] .num{
  border-color:rgba(226,220,236,.18)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important;
  color:#e4deeb!important
}
html[data-design="glass-b"] :is(.feature[data-tier="plus"],.tier-card-plus){
  border-color:rgba(183,151,255,.66)!important;
  background:radial-gradient(ellipse at 50% 0%,rgba(133,96,207,.2),transparent 60%),linear-gradient(150deg,#342a43,#211a2d)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(169,133,255,.15),0 0 20px rgba(147,108,255,.16),0 20px 48px rgba(8,5,16,.3)!important
}
html[data-design="glass-b"] .feature[data-tier="plus"] .num,html[data-design="glass-b"] .tier-card-plus .tier-name{
  display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;
  border:1px solid rgba(195,172,255,.5);border-radius:999px;
  background:linear-gradient(135deg,rgba(176,145,255,.24),rgba(176,145,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);color:#e5d9ff!important
}
/* Ultra sits one clear step above Plus: richer amethyst glass and a stronger halo. */
html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra){
  border:1.5px solid rgba(218,199,255,.48)!important;
  background:radial-gradient(ellipse at 50% 0%,rgba(164,116,244,.38),transparent 57%),linear-gradient(145deg,#44345d,#241a36)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 30px rgba(169,130,255,.13),0 0 0 1px rgba(176,136,255,.3),0 0 30px rgba(135,89,231,.28),0 24px 62px rgba(5,3,10,.42)!important
}
html[data-design="glass-b"] .feature[data-tier="ultra"]::after,html[data-design="glass-b"] .tier-card-ultra::after{
  position:absolute!important;inset:0!important;top:0;right:0;left:0;height:auto!important;
  padding:2.5px;border-radius:inherit;pointer-events:none;z-index:3!important;
  background:conic-gradient(from var(--ultra-border-turn,0deg),transparent 0deg 210deg,rgba(164,126,255,.05) 226deg,rgba(164,126,255,.24) 245deg,rgba(199,169,255,.68) 267deg,rgba(255,252,255,1) 288deg,rgba(195,157,255,.94) 300deg,rgba(176,135,255,.62) 320deg,rgba(164,126,255,.28) 338deg,rgba(164,126,255,.06) 354deg,transparent 360deg)!important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  filter:blur(1.05px) drop-shadow(0 0 5px rgba(176,139,255,.72)) drop-shadow(0 0 12px rgba(145,101,238,.38));opacity:.88;box-shadow:none!important;animation:ultraBorderTravel 8s linear infinite
}
html[data-design="glass-b"] .feature[data-tier="ultra"]::before,html[data-design="glass-b"] .tier-card-ultra::before{
  z-index:3!important;inset:0!important;padding:2px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--ultra-border-turn-reverse,180deg),transparent 0deg 218deg,rgba(166,129,255,.04) 234deg,rgba(166,129,255,.18) 252deg,rgba(205,179,255,.54) 276deg,rgba(255,252,255,.88) 294deg,rgba(183,145,255,.7) 310deg,rgba(164,126,255,.28) 330deg,rgba(164,126,255,.05) 348deg,transparent 360deg)!important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  filter:blur(1.6px) drop-shadow(0 0 7px rgba(176,139,255,.62)) drop-shadow(0 0 16px rgba(145,101,238,.3));opacity:.72;animation:ultraBorderTravelReverse 11s linear infinite
}
@property --ultra-border-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --ultra-border-turn-reverse{syntax:"<angle>";inherits:false;initial-value:180deg}
@keyframes ultraBorderTravel{to{--ultra-border-turn:360deg}}
@keyframes ultraBorderTravelReverse{to{--ultra-border-turn-reverse:540deg}}
html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active::after{opacity:1;filter:blur(1.2px) drop-shadow(0 0 7px rgba(164,126,255,.82)) drop-shadow(0 0 15px rgba(145,101,238,.48))}
html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active::before{opacity:.9;filter:blur(1.8px) drop-shadow(0 0 9px rgba(164,126,255,.68)) drop-shadow(0 0 18px rgba(145,101,238,.38))}
html[data-design="glass-b"] .feature[data-tier="ultra"] .num,html[data-design="glass-b"] .tier-card-ultra .tier-name{color:#f0e5ff!important}

/* Pointer-reactive Ultra glass: local light follows the mouse; tilt eases back on leave. */
@property --ultra-glow-x{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --ultra-glow-y{syntax:"<percentage>";inherits:false;initial-value:45%}
@keyframes ultraSmokeDrift{
  from{transform:translate3d(-1.4%,.8%,0) scale(.98);filter:blur(22px) saturate(1.05)}
  to{transform:translate3d(1.6%,-1.2%,0) scale(1.05);filter:blur(27px) saturate(1.28)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra){
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .62s cubic-bezier(.2,.72,.22,1),box-shadow .45s ease,border-color .45s ease!important
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-glow{
    position:absolute!important;z-index:1!important;inset:0!important;display:block!important;
    border-radius:inherit;clip-path:inset(0 round 24px);pointer-events:none;opacity:0;
    background:radial-gradient(ellipse 32% 25% at var(--ultra-glow-x,50%) var(--ultra-glow-y,45%),rgba(217,193,255,.32) 0%,rgba(172,124,255,.19) 30%,rgba(133,91,218,.08) 56%,transparent 78%);
    filter:blur(13px);mix-blend-mode:screen;
    transition:opacity .58s cubic-bezier(.2,.7,.2,1),--ultra-glow-x .4s cubic-bezier(.2,.7,.2,1),--ultra-glow-y .4s cubic-bezier(.2,.7,.2,1)
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active>.ultra-card-glow{opacity:.82}
  html[data-design="glass-b"] .tier-card-ultra>.ultra-card-glow{
    background:radial-gradient(ellipse 24% 19% at var(--ultra-glow-x,50%) var(--ultra-glow-y,45%),rgba(217,193,255,.28) 0%,rgba(172,124,255,.16) 34%,rgba(133,91,218,.06) 60%,transparent 80%)
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-glow-trail{
    position:absolute!important;z-index:1!important;inset:0!important;display:block!important;
    border-radius:inherit;clip-path:inset(0 round 24px);pointer-events:none;opacity:0;
    background:radial-gradient(ellipse 30% 24% at var(--ultra-glow-x,50%) var(--ultra-glow-y,45%),rgba(209,181,255,.24) 0%,rgba(166,119,255,.13) 35%,rgba(133,91,218,.06) 59%,transparent 80%);
    filter:blur(calc(16px + var(--glow-trail-index,1) * 5px));mix-blend-mode:screen;
    transform:translate(calc(var(--glow-trail-index,1) * -2px),calc(var(--glow-trail-index,1) * 3px)) scale(calc(1 + var(--glow-trail-index,1) * .025));
    transition:opacity .72s cubic-bezier(.2,.7,.2,1),--ultra-glow-x calc(.18s + var(--glow-trail-index,1) * .11s) cubic-bezier(.2,.7,.2,1),--ultra-glow-y calc(.18s + var(--glow-trail-index,1) * .11s) cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active>.ultra-card-glow-trail{opacity:var(--glow-trail-opacity,.24)}
  html[data-design="glass-b"] .tier-card-ultra>.ultra-card-glow-trail{
    background:radial-gradient(ellipse 22% 18% at var(--ultra-glow-x,50%) var(--ultra-glow-y,45%),rgba(209,181,255,.2) 0%,rgba(166,119,255,.1) 38%,rgba(133,91,218,.04) 62%,transparent 80%)
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-smoke{
    position:absolute!important;z-index:1!important;inset:0!important;display:block!important;
    border-radius:inherit;clip-path:inset(0 round 24px);pointer-events:none;opacity:0;
    background:
      radial-gradient(ellipse 28% 19% at var(--ultra-glow-x,50%) var(--ultra-glow-y,45%),rgba(202,163,255,.36),transparent 78%),
      radial-gradient(ellipse 21% 32% at calc(var(--ultra-glow-x,50%) + 6%) calc(var(--ultra-glow-y,45%) - 4%),rgba(137,101,207,.25),transparent 80%),
      radial-gradient(ellipse 18% 25% at calc(var(--ultra-glow-x,50%) - 7%) calc(var(--ultra-glow-y,45%) + 7%),rgba(187,139,255,.2),transparent 82%);
    filter:blur(22px) saturate(1.15);mix-blend-mode:screen;will-change:transform,filter;
    animation:ultraSmokeDrift 7s ease-in-out infinite alternate paused;
    transition:opacity .82s cubic-bezier(.2,.7,.2,1)
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active>.ultra-card-smoke{opacity:.62;animation-play-state:running}
  html[data-design="glass-b"] .tier-card-ultra>.ultra-card-smoke{
    background:
      radial-gradient(ellipse 22% 16% at var(--ultra-glow-x,50%) var(--ultra-glow-y,45%),rgba(202,163,255,.26),transparent 82%),
      radial-gradient(ellipse 17% 26% at calc(var(--ultra-glow-x,50%) + 5%) calc(var(--ultra-glow-y,45%) - 4%),rgba(137,101,207,.16),transparent 84%),
      radial-gradient(ellipse 15% 21% at calc(var(--ultra-glow-x,50%) - 6%) calc(var(--ultra-glow-y,45%) + 6%),rgba(187,139,255,.13),transparent 86%)
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-lightning{
    position:absolute!important;z-index:2!important;inset:0!important;display:block!important;
    border-radius:inherit;clip-path:inset(0 round 24px);pointer-events:none;opacity:0;mix-blend-mode:screen;
    transition:opacity .48s ease
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra) .ultra-lightning-canvas{
    position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none
  }
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active>.ultra-card-lightning{opacity:1}
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra).ultra-pointer-active{
    transform:perspective(1100px) rotateX(var(--ultra-tilt-y,0deg)) rotateY(var(--ultra-tilt-x,0deg)) translateY(-5px) scale(1.012)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 34px rgba(190,157,255,.2),0 0 0 1px rgba(199,172,255,.75),0 0 48px rgba(154,108,255,.52),0 28px 68px rgba(5,3,10,.46)!important
  }
}
@media (prefers-reduced-motion:reduce){
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra){transition:none!important;transform:none!important}
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)::after,html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)::before{animation:none!important}
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-glow,
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-glow-trail,
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-smoke,
  html[data-design="glass-b"] :is(.feature[data-tier="ultra"],.tier-card-ultra)>.ultra-card-lightning{display:none!important;animation:none!important}
}

/* Cohesive page canvas, compact scroll demos, and one shared content grid. */
html[data-design="glass-b"] :is(.palette-showcase,.wheel-showcase,.workflow-section){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important
}
html[data-design="glass-b"] .palette-showcase{
  width:min(100%,1240px)!important;
  max-width:1240px!important;
  min-height:clamp(700px,110svh,920px)!important;
  margin:0 auto!important;
  padding-inline:28px!important
}
html[data-design="glass-b"] .wheel-showcase{
  width:min(100%,1240px)!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding-inline:28px!important
}
html[data-design="glass-b"] .workflow-section{
  width:min(100%,1240px)!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:clamp(72px,7vw,105px) 28px!important;
  gap:clamp(32px,6vw,90px)!important
}
html[data-design="glass-b"] .story-track{height:190svh!important}
html[data-design="glass-b"] .label-flow{min-height:clamp(760px,125svh,1100px)!important}
@media(max-width:800px){
  html[data-design="glass-b"] .palette-showcase{min-height:auto!important;padding:64px 22px!important}
  html[data-design="glass-b"] .wheel-showcase{padding:64px 22px!important}
  html[data-design="glass-b"] .workflow-section{padding:64px 22px!important}
  html[data-design="glass-b"] .story-track{height:190svh!important}
}
@media(max-width:560px){
  html[data-design="glass-b"] .palette-showcase,
  html[data-design="glass-b"] .wheel-showcase,
  html[data-design="glass-b"] .workflow-section{width:100%!important;margin:0 auto!important;padding-inline:16px!important}
  html[data-design="glass-b"] .label-flow,
  html[data-design="glass-b"] .story-section,
  html[data-design="glass-b"] .content-section,
  html[data-design="glass-b"] .faq-section{padding-inline:16px!important}
  html[data-design="glass-b"] .labels-scene{margin:0!important}
}

/* Align the navigation, hero, and supporting rail on one desktop grid. */
html[data-design="glass-b"] .site-header{
  position:fixed!important;
  top:12px!important;
  left:50%;
  transform:translateX(-50%);
  z-index:100!important;
  width:min(calc(100% - 40px),1320px)!important;
  margin:0!important;
}
html[data-design="glass-b"]{scroll-padding-top:92px}
html[data-design="glass-b"] body{padding-top:78px}
@media(min-width:801px){
  html[data-design="glass-b"] .hero{
    width:min(calc(100% - 40px),1320px);
    max-width:1320px;
  }
  html[data-design="glass-b"] .site-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    column-gap:20px;
    position:fixed!important;
    top:12px!important;
    left:50%;
    transform:translateX(-50%);
    z-index:100!important;
  }
  html[data-design="glass-b"] .site-header nav{justify-self:center}
  html[data-design="glass-b"] .site-header .header-tools{justify-self:end}
  html[data-design="glass-b"] .hero{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:30px;
    margin-top:8px;
    padding:68px 40px 72px;
  }
  html[data-design="glass-b"] .hero::before{inset:0!important}
  html[data-design="glass-b"] .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1.85fr) minmax(0,.95fr) minmax(0,.8fr);
    align-items:stretch;
    gap:8px;
    width:100%;
    max-width:650px;
  }
  html[data-design="glass-b"] .hero-actions>*{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    padding:12px 8px;
    font-size:clamp(12px,.96vw,15px);
    line-height:1.35;
  }
  html[data-design="glass-b"] .hero-art{min-height:510px}
  html[data-design="glass-b"] .hero-art .panel-window{width:min(100%,490px)}
  html[data-design="glass-b"] .trust{
    width:min(calc(100% - 40px),1320px);
    max-width:1320px;
  }
  html[data-design="glass-b"] .story-section{
    width:min(calc(100% - 40px),1320px);
    max-width:1320px;
    padding:116px 0 0;
  }
  html[data-design="glass-b"] .story-intro{column-gap:48px;row-gap:8px}
  html[data-design="glass-b"] .story-intro .eyebrow{grid-column:1;grid-row:1}
  html[data-design="glass-b"] .story-intro h2{grid-column:1;grid-row:2}
  html[data-design="glass-b"] .story-intro>p:not(.eyebrow){grid-column:2;grid-row:2}
}
@media(max-width:800px){
  html[data-design="glass-b"] body{padding-top:62px}
  html[data-design="glass-b"] .site-header{
    position:fixed!important;top:8px!important;left:50%;transform:translateX(-50%);
    z-index:100!important;width:calc(100% - 20px)!important;margin:0!important
  }
}
@media(min-width:801px) and (max-width:1120px){
  html[data-design="glass-b"] .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-design="glass-b"] .hero-actions .primary{grid-column:1/-1}
}

/* Keep the product preview gently floating without moving the readable copy. */
@keyframes heroPreviewFloat{
  0%,100%{transform:translateY(0) rotate(1.2deg)}
  50%{transform:translateY(-9px) rotate(.6deg)}
}
@keyframes heroOrbFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  html[data-design="glass-b"] .hero-art .panel-window{animation:heroPreviewFloat 8s ease-in-out infinite}
  html[data-design="glass-b"] .hero-art .orb-one{animation:heroOrbFloat 7s ease-in-out infinite}
  html[data-design="glass-b"] .hero-art .orb-two{animation:heroOrbFloat 9s ease-in-out -3s infinite}
}

/* The sticky demo should retain its rounded frame and use more of its width. */
html[data-design="glass-b"] .story-stage{
  border-radius:30px!important;
  isolation:isolate;
}
html[data-design="glass-b"] .story-stage::after{
  border-radius:inherit!important;
  border-color:#ffffff24;
}
@media(min-width:901px){
  html[data-design="glass-b"] .story-stage .ai-canvas,
  html[data-design="glass-b"] .story-stage[data-step] .ai-canvas{
    right:34%!important;
    border-radius:20px!important;
  }
  html[data-design="glass-b"] .story-stage .match-panel{
    top:88px!important;
    right:26px!important;
    width:clamp(300px,30%,380px)!important;
    border-radius:20px!important;
  }
}
@media(max-width:700px){
  html[data-design="glass-b"] .story-stage{border-radius:22px!important}
}

/* Make the CMF label reveal and its sample Pantone code easier to notice. */
html[data-design="glass-b"] .labels-scene{top:94px!important}
html[data-design="glass-b"] .label-sheet{transition:opacity .62s ease,transform .95s cubic-bezier(.18,.82,.22,1),box-shadow .7s ease!important;transform-style:preserve-3d}
html[data-design="glass-b"] .label-sheet .big-label .label-code{
  display:inline-flex;width:max-content;max-width:100%;margin-top:6px;padding:3px 7px;border:1px solid #8066c52e;border-radius:6px;
  background:linear-gradient(100deg,#8870c51c,#8870c508);color:#5c478c;font-size:9px;font-weight:900;letter-spacing:.035em
}
/* Keep the CMF note in document flow so it cannot cover the Pantone / HEX line. */
html[data-design="glass-b"] .label-sheet .cmf-mini{
  position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;margin:18px 0 0!important
}
html[data-design="glass-b"] .labels-scene[data-label-step="0"] .label-sheet{
  opacity:.22;transform:perspective(900px) scale(.52) rotateY(-20deg) rotateZ(-7deg) translate3d(-22px,24px,0);
  box-shadow:0 10px 22px #07050e30,inset 0 1px 0 #fff
}
html[data-design="glass-b"] .labels-scene[data-label-step="1"] .label-sheet{
  opacity:1;transform:perspective(1100px) scale(.84) rotateY(9deg) rotateZ(3deg) translate3d(16px,7px,0);
  box-shadow:0 26px 58px #07050e70,inset 0 1px 0 #fff
}
html[data-design="glass-b"] .labels-scene[data-label-step="2"] .label-sheet{
  opacity:1;transform:perspective(1100px) scale(.97) rotateY(-3deg) rotateZ(-1deg) translate3d(0,-3px,0)
}
html[data-design="glass-b"] .labels-scene[data-label-step="3"] .label-sheet{
  opacity:1;transform:perspective(1100px) scale(1.015) rotateY(0) rotateZ(0) translate3d(0,-5px,0)
}
html[data-design="glass-b"] .labels-scene[data-label-step="1"] .label-origin{
  opacity:0;transform:translate3d(-66px,-54px,0) scale(.42) rotate(-14deg);transition:transform .86s cubic-bezier(.18,.82,.22,1),opacity .48s ease
}
html[data-design="glass-b"] .labels-scene:is([data-label-step="2"],[data-label-step="3"]) .label-origin{
  opacity:0;transform:translate3d(-74px,-62px,0) scale(.36) rotate(-16deg)
}
html[data-design="glass-b"] .labels-scene .pill-label,
html[data-design="glass-b"] .labels-scene .cmf-mini,
html[data-design="glass-b"] .labels-scene .label-float{transition:opacity .7s ease,transform .78s cubic-bezier(.18,.82,.22,1)}
html[data-design="glass-b"] .labels-scene .pill-label,
html[data-design="glass-b"] .labels-scene .cmf-mini,
html[data-design="glass-b"] .labels-scene .label-float{transform:translate3d(0,28px,0) scale(.86) rotate(2deg)}
html[data-design="glass-b"] .labels-scene[data-label-step="2"] .pill-label{transform:translate3d(0,0,0) scale(1) rotate(0)}
html[data-design="glass-b"] .labels-scene[data-label-step="3"] .pill-label,
html[data-design="glass-b"] .labels-scene[data-label-step="3"] .cmf-mini,
html[data-design="glass-b"] .labels-scene[data-label-step="3"] .label-float{transform:translate3d(0,0,0) scale(1) rotate(0)}
@keyframes labelTokenFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
html[data-design="glass-b"] .labels-scene[data-label-step="3"] .label-float.one{animation:labelTokenFloat 3.6s ease-in-out infinite}
html[data-design="glass-b"] .labels-scene[data-label-step="3"] .label-float.two{animation:labelTokenFloat 4.2s ease-in-out -1.3s infinite}
@media(prefers-reduced-motion:reduce){
  html[data-design="glass-b"] .labels-scene .label-sheet,
  html[data-design="glass-b"] .labels-scene .label-origin,
  html[data-design="glass-b"] .labels-scene .pill-label,
  html[data-design="glass-b"] .labels-scene .cmf-mini,
  html[data-design="glass-b"] .labels-scene .label-float{animation:none!important;transition:none!important}
}
@media(max-width:800px){html[data-design="glass-b"] .labels-scene{top:82px!important}}

/* Let the version filters catch a soft, pointer-following violet glint too. */
html[data-design="glass-b"] .feature-filters button[data-feature-filter]{
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .24s ease,border-color .34s ease,box-shadow .38s ease,background-color .34s ease
}
html[data-design="glass-b"] .feature-filters button[data-feature-filter]::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90px circle at var(--filter-glow-x,50%) var(--filter-glow-y,50%),rgba(182,151,255,.28),rgba(142,105,235,.12) 42%,transparent 78%);
  opacity:0;transition:opacity .42s ease
}
html[data-design="glass-b"] .feature-filters button[data-feature-filter]:hover,
html[data-design="glass-b"] .feature-filters button[data-feature-filter]:focus-visible{
  border-color:rgba(192,169,255,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 12px rgba(148,112,245,.24),0 0 24px rgba(148,112,245,.14)!important
}
html[data-design="glass-b"] .feature-filters button[data-feature-filter]:hover::before,
html[data-design="glass-b"] .feature-filters button[data-feature-filter]:focus-visible::before{opacity:1}
@media(prefers-reduced-motion:reduce){
  html[data-design="glass-b"] .feature-filters button[data-feature-filter],
  html[data-design="glass-b"] .feature-filters button[data-feature-filter]::before{transition:none}
}

/* One shared page grid: keep every main section, card row, and navigation rail aligned. */
html[data-design="glass-b"] :is(.hero,.trust,.story-section,.content-section,.palette-showcase,.wheel-showcase,.label-flow,.workflow-section,.buy-section,.faq-section){
  width:min(calc(100% - 40px),1320px)!important;
  max-width:1320px!important;
  margin-inline:auto!important
}
html[data-design="glass-b"] :is(.content-section,.faq-section,.palette-showcase,.wheel-showcase,.label-flow,.workflow-section){padding-inline:0!important}
html[data-design="glass-b"] footer{padding-inline:max(20px,calc((100% - 1320px)/2))!important}
@media(max-width:800px){
  html[data-design="glass-b"] :is(.hero,.trust,.story-section,.content-section,.palette-showcase,.wheel-showcase,.label-flow,.workflow-section,.buy-section,.faq-section){
    width:calc(100% - 20px)!important;max-width:1320px!important;margin-inline:auto!important
  }
  html[data-design="glass-b"] :is(.content-section,.faq-section,.palette-showcase,.wheel-showcase,.label-flow,.workflow-section){padding-inline:0!important}
  html[data-design="glass-b"] footer{padding-inline:10px!important}
}

/* Pricing cards stay clear of the fixed nav and get a more noticeable, soft float. */
html[data-design="glass-b"] .buy-section{
  position:relative;
  isolation:isolate;
  scroll-margin-top:112px;
  padding-top:26px;
}
html[data-design="glass-b"] .buy-section::before{
  position:absolute;
  z-index:-1;
  inset:-70px -7% -40px;
  content:"";
  pointer-events:none;
  background:
    radial-gradient(ellipse 38% 42% at 18% 35%,rgba(119,78,192,.2),transparent 76%),
    radial-gradient(ellipse 35% 48% at 82% 55%,rgba(151,112,232,.22),transparent 75%),
    radial-gradient(ellipse 24% 34% at 54% 12%,rgba(99,69,152,.16),transparent 78%);
  filter:blur(36px);
  opacity:.9;
  transform:translate3d(-3%,0,0) scale(.96);
  animation:pricingAuraDrift 11s ease-in-out infinite alternate;
}
@keyframes pricingAuraDrift{
  0%{transform:translate3d(-5%,-2%,0) scale(.92)}
  50%{transform:translate3d(3%,3%,0) scale(1.08)}
  100%{transform:translate3d(6%,-3%,0) scale(.98)}
}
@keyframes pricingCardFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  html[data-design="glass-b"] .tier-card{animation:pricingCardFloat 6.4s ease-in-out infinite}
  html[data-design="glass-b"] .tier-card-plus{animation-delay:-2.1s}
  html[data-design="glass-b"] .tier-card-ultra{animation-delay:-4.2s}
}
@media(max-width:800px){
  html[data-design="glass-b"] .buy-section{scroll-margin-top:78px;padding-top:14px}
  html[data-design="glass-b"] .buy-section::before{inset:-42px -4% -24px;filter:blur(28px)}
}
@media(prefers-reduced-motion:reduce){
  html[data-design="glass-b"] .buy-section::before,
  html[data-design="glass-b"] .tier-card{animation:none!important}
}