:root{--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,"Liberation Mono",monospace;--bg:#fbfafd;--bg-soft:#f3f0fa;--surface:#fff;--surface-2:#f6f4fb;--text:#221d33;--text-muted:#5e5876;--border:#e8e4f2;--border-strong:#d8d2e8;--primary:#7c3aed;--primary-strong:#6d28d9;--primary-soft:#f1eafe;--accent:#c026d3;--gold:#f59e0b;--success:#16a34a;--success-soft:#e8f7ee;--warning:#d97706;--warning-soft:#fdf3e3;--danger:#dc2626;--danger-soft:#fdeaea;--shadow-sm:0 1px 2px #1c14330d,0 4px 14px -6px #1c143314;--shadow-md:0 2px 6px #1c14330f,0 14px 34px -12px #1c143329;--shadow-lg:0 6px 16px #1c143314,0 28px 60px -20px #1c143340;--radius-sm:8px;--radius:12px;--radius-lg:18px;--radius-xl:26px;--grad-brand:linear-gradient(135deg,#7c3aed,#c026d3 55%,#f59e0b);--header-h:68px}[data-theme=dark]{--bg:#131019;--bg-soft:#17131f;--surface:#1c1726;--surface-2:#251f33;--text:#f1edf9;--text-muted:#a79fbd;--border:#2d2740;--border-strong:#3a3352;--primary:#9d6bff;--primary-strong:#b08cff;--primary-soft:#2a2140;--accent:#e156ee;--gold:#fbbf24;--success:#4ade80;--success-soft:#14351f;--warning:#fbbf24;--warning-soft:#3a2c10;--danger:#f87171;--danger-soft:#3d1717;--shadow-sm:0 1px 2px #00000059,0 4px 14px -6px #0006;--shadow-md:0 2px 6px #0006,0 14px 34px -12px #00000080;--shadow-lg:0 6px 16px #00000073,0 28px 60px -20px #0009}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}body{font-family:var(--font-sans);color:var(--text);background:var(--bg);flex-direction:column;min-height:100dvh;margin:0;font-size:1rem;line-height:1.65;transition:background-color .3s,color .3s;display:flex;overflow-x:clip}main{flex:1 0 auto;width:100%}img,svg,video,canvas{max-width:100%;height:auto;display:block}h1,h2,h3,h4,h5,h6{letter-spacing:-.015em;margin:0 0 .6em;font-weight:700;line-height:1.22}p{margin:0 0 1em}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}ul,ol{margin:0 0 1em;padding-left:1.3em}button{font-family:inherit}input,select,textarea{color:inherit;font-family:inherit;font-size:1rem}code,kbd,pre,samp{font-family:var(--font-mono);font-size:.92em}::selection{background:#7c3aed40}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}hr{border:0;border-top:1px solid var(--border);margin:2rem 0}[hidden]{display:none!important}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:300;background:var(--primary);color:#fff;border-radius:0 0 10px 10px;padding:.6rem 1rem;font-weight:600;transition:top .2s;position:fixed;top:-60px;left:1rem}.skip-link:focus{text-decoration:none;top:0}*{scrollbar-width:thin;scrollbar-color:var(--border-strong)transparent}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}::-webkit-scrollbar-track{background:0 0}.container{width:100%;max-width:1160px;margin-inline-start:auto;margin-inline-end:auto;padding-inline-start:clamp(1rem,4vw,2rem);padding-inline-end:clamp(1rem,4vw,2rem)}.section{padding-block-start:clamp(3.4rem,8vw,6.2rem);padding-block-end:clamp(3.4rem,8vw,6.2rem)}.section--alt{background:var(--bg-soft)}.section--tight{padding-block-start:clamp(2.2rem,5vw,3.6rem);padding-block-end:clamp(2.2rem,5vw,3.6rem)}.section-head{text-align:center;max-width:730px;margin:0 auto clamp(2.2rem,5vw,3.4rem)}.section-head--left{text-align:left;margin-inline-start:0;margin-inline-end:0}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);border-radius:999px;align-items:center;gap:.45rem;margin-bottom:1.1rem;padding:.35rem .85rem;font-size:.8rem;font-weight:700;display:inline-flex}.section-title{margin-bottom:.5em;font-size:clamp(1.7rem,3.6vw,2.5rem)}.section-lead{color:var(--text-muted);margin-bottom:0;font-size:1.08rem}.grid{gap:1.25rem;display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.mono{font-family:var(--font-mono)}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.2rem}.mb-0{margin-bottom:0}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.78rem 1.35rem;font-size:.95rem;font-weight:600;line-height:1.2;text-decoration:none;transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s,color .18s;display:inline-flex}.btn:hover{text-decoration:none}.btn:active{transform:translateY(1px)scale(.99)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 20px -8px #7c3aed8c}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px #7c3aedb3}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}.btn-ghost{color:var(--text-muted);background:0 0}.btn-ghost:hover{color:var(--text);background:var(--surface-2)}.btn-sm{border-radius:10px;padding:.5rem .85rem;font-size:.85rem}.btn-lg{border-radius:14px;padding:.95rem 1.7rem;font-size:1.03rem}.btn-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.badge{letter-spacing:.04em;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);border-radius:999px;align-items:center;gap:.35rem;padding:.22rem .6rem;font-size:.74rem;font-weight:700;display:inline-flex}.badge-pass{background:var(--success-soft);color:var(--success)}.badge-fail{background:var(--danger-soft);color:var(--danger)}.chips{flex-wrap:wrap;gap:.5rem;display:flex}.chip{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;align-items:center;gap:.45rem;padding:.38rem .8rem;font-size:.82rem;font-weight:500;transition:border-color .18s,color .18s,background-color .18s;display:inline-flex}.chip:hover{border-color:var(--primary);color:var(--primary)}.chip[aria-pressed=true]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.6rem;transition:transform .22s,box-shadow .22s,border-color .22s}.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-4px)}.card h3{margin-bottom:.45em;font-size:1.08rem}.card p{color:var(--text-muted);margin-bottom:0;font-size:.95rem}.card-icon{background:var(--primary-soft);width:46px;height:46px;color:var(--tint,var(--primary));border-radius:14px;place-items:center;margin-bottom:1.05rem;display:grid}.card-icon svg{width:22px;height:22px}.link-arrow{align-items:center;gap:.3rem;font-weight:600;display:inline-flex}.link-arrow:after{content:"→";transition:transform .18s}.link-arrow:hover:after{transform:translate(3px)}.callout{background:var(--primary-soft);border-radius:var(--radius);align-items:flex-start;gap:.8rem;padding:1rem 1.2rem;font-size:.95rem;display:flex}.callout--warn{background:var(--warning-soft)}.callout p{margin:0}.callout p a{color:inherit;font-weight:600}.site-header{z-index:100;background:var(--bg);background:color-mix(in srgb,var(--bg)82%,transparent);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #0000;transition:border-color .25s,background-color .3s;position:sticky;top:0}.site-header.is-scrolled{border-bottom-color:var(--border);box-shadow:0 6px 24px -18px #1c14334d}.nav-wrap{height:var(--header-h);align-items:center;gap:1.5rem;display:flex}.brand{color:var(--text);align-items:center;gap:.6rem;font-weight:700;text-decoration:none;display:inline-flex}.brand:hover{text-decoration:none}.brand-mark{border-radius:8px;flex-shrink:0;box-shadow:0 4px 12px -4px #7c3aed80}.brand-name{letter-spacing:-.02em;font-size:1.16rem}.brand-accent{background:var(--grad-brand);color:#0000;-webkit-background-clip:text;background-clip:text}.nav-links{align-items:center;gap:1.45rem;margin-left:.6rem;display:flex}.nav-links a{color:var(--text-muted);padding:.35rem 0;font-size:.94rem;font-weight:500;transition:color .18s;position:relative}.nav-links a:after{content:"";background:var(--grad-brand);border-radius:2px;height:2px;transition:right .22s;position:absolute;bottom:-2px;left:0;right:100%}.nav-links a:hover{color:var(--text);text-decoration:none}.nav-links a:hover:after,.nav-links a[aria-current=page]:after{right:0}.nav-links a[aria-current=page]{color:var(--primary);font-weight:600}.nav-actions{align-items:center;gap:.65rem;margin-left:auto;display:flex}.theme-toggle{border:1px solid var(--border);background:var(--surface);width:38px;height:38px;color:var(--text-muted);cursor:pointer;border-radius:10px;place-items:center;transition:color .18s,border-color .18s;display:grid}.theme-toggle:hover{color:var(--primary);border-color:var(--primary)}.icon-moon,[data-theme=dark] .icon-sun{display:none}[data-theme=dark] .icon-moon{display:block}.nav-toggle{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;gap:5px;width:40px;height:38px;padding:0 9px;display:none}.nav-toggle span{background:var(--text);border-radius:2px;width:100%;height:2px;transition:transform .22s,opacity .22s;display:block}.nav-toggle[aria-expanded=true] span:first-child{transform:translateY(7px)rotate(45deg)}.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.mobile-menu{border-top:1px solid var(--border);background:var(--bg);box-shadow:var(--shadow-lg)}.mobile-menu nav{flex-direction:column;padding-block-start:.8rem;padding-block-end:1.1rem;display:flex}.mobile-menu a{color:var(--text);border-bottom:1px solid var(--border);padding:.8rem .25rem;font-weight:600;text-decoration:none}.mobile-menu a:last-child{border-bottom:0}.mobile-menu a[aria-current=page]{color:var(--primary)}.site-footer{color:#b9b2cc;background:#171220;border-top:1px solid #ffffff0f;margin-top:auto;padding:clamp(2.6rem,6vw,4rem) 0 1.6rem;font-size:.93rem}[data-theme=dark] .site-footer{background:#0e0b14}.footer-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:2rem;padding-bottom:2.4rem;display:grid}.site-footer .brand{color:#fff;margin-bottom:.9rem}.footer-brand p{color:#9a93af;max-width:34ch;margin:0}.footer-heading{color:#fff;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem;font-size:.82rem}.footer-col{flex-direction:column;gap:.55rem;display:flex}.footer-col a{color:#b9b2cc;text-decoration:none}.footer-col a:hover{color:#fff;text-decoration:underline}.footer-bottom{border-top:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;padding-top:1.4rem;display:flex}.footer-bottom p{color:#8b84a2;margin:0;font-size:.86rem}.page-hero{border-bottom:1px solid var(--border);background:radial-gradient(620px 280px at 12% -10%,#7c3aed17,#0000 70%),radial-gradient(560px 260px at 88% -20%,#c026d314,#0000 70%);padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2rem,4.5vw,3.2rem);position:relative;overflow:clip}.page-hero .page-title{margin:.7rem 0 .55rem;font-size:clamp(2rem,4.6vw,3rem)}.page-lead{color:var(--text-muted);max-width:720px;margin:0;font-size:1.1rem}.breadcrumb{font-size:.85rem}.breadcrumb ol{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.breadcrumb li{color:var(--text-muted);align-items:center;gap:.4rem;display:flex}.breadcrumb li+li:before{content:"/";color:var(--border-strong)}.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--primary)}.breadcrumb [aria-current=page]{color:var(--text);font-weight:600}.prose{max-width:780px;font-size:1.02rem}.prose--wide{max-width:860px}.prose h2{margin:2.2em 0 .7em;padding-top:.2em;font-size:1.55rem}.prose h3{margin:1.7em 0 .55em;font-size:1.2rem}.prose h2:first-child{margin-top:0}.prose p,.prose ul,.prose ol{color:var(--text)}.prose li{margin-bottom:.45em}.prose ul li::marker{color:var(--primary)}.prose blockquote{border-left:3px solid var(--primary);background:var(--surface-2);border-radius:0 var(--radius)var(--radius)0;color:var(--text-muted);margin:1.6em 0;padding:.9em 1.3em}.prose blockquote p{margin:0}.prose code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:.1em .4em;font-size:.88em}.prose pre{color:#e6e1f2;border-radius:var(--radius);background:#191524;padding:1.1rem 1.3rem;font-size:.86rem;line-height:1.6;overflow-x:auto}.prose pre code{color:inherit;background:0 0;border:0;padding:0}.prose table{border-collapse:collapse;width:100%;margin:1.5em 0;font-size:.93rem}.prose th,.prose td{text-align:left;border:1px solid var(--border);padding:.6rem .8rem}.prose th{background:var(--surface-2);font-weight:700}.prose img{border-radius:var(--radius);margin:1.5em 0}.hero{position:relative;overflow:clip}.hero-bg{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.orb{filter:blur(75px);opacity:.45;border-radius:50%;animation:16s ease-in-out infinite orbfloat;position:absolute}.orb-1{background:#7c3aed;width:420px;height:420px;top:-140px;left:-80px}.orb-2{opacity:.3;background:#ec4899;width:360px;height:360px;animation-delay:-5s;bottom:-120px;right:6%}.orb-3{opacity:.22;background:#f59e0b;width:300px;height:300px;animation-delay:-9s;top:20%;right:-90px}.hero-inner{grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(2rem,5vw,4rem);padding-block-start:clamp(3.2rem,7vw,5.6rem);padding-block-end:clamp(3rem,6vw,5rem);display:grid;position:relative}.hero-badge{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:.5rem;margin-bottom:1.4rem;padding:.42rem 1rem;font-size:.82rem;font-weight:600;display:inline-flex}.hero-badge .dot{background:var(--success);width:8px;height:8px;box-shadow:0 0 0 3px var(--success-soft);border-radius:50%}.hero-title{letter-spacing:-.03em;margin-bottom:.45em;font-size:clamp(2.45rem,6vw,4.05rem);font-weight:800}.grad-text{background:var(--grad-brand);color:#0000;-webkit-background-clip:text;background-clip:text}.hero-sub{color:var(--text-muted);max-width:54ch;margin-bottom:1.9rem;font-size:1.13rem}.hero-actions{flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem;display:flex}.hero-note{color:var(--text-muted);flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.86rem;display:flex}.hero-note span{align-items:center;gap:.4rem;display:inline-flex}.hero-note svg{width:15px;height:15px;color:var(--success);flex-shrink:0}.hero-stage{perspective:1500px;-webkit-user-select:none;user-select:none;height:500px;position:relative}.stage-glow{filter:blur(28px);background:radial-gradient(50% 55% at 50% 58%,#7c3aed47,#0000 72%);animation:6s ease-in-out infinite glowpulse;position:absolute;top:14%;bottom:14%;left:8%;right:8%}.stage-cards{transform-style:preserve-3d;transform:rotateX(calc(6deg + var(--my,0)*-9deg))rotateY(calc(var(--mx,0)*16deg));transition:transform .3s cubic-bezier(.2,.7,.3,1);position:absolute;top:0;bottom:0;left:0;right:0}.float-card{width:var(--w,148px);height:var(--h,188px);transform-style:preserve-3d;transform:translate3d(var(--x),var(--y),var(--z,0px));position:absolute}.float-inner{background:linear-gradient(155deg,var(--c),var(--c2));width:100%;height:100%;animation:floaty var(--fd,7s)ease-in-out var(--fdel,0s)infinite;will-change:transform;border-radius:20px;flex-direction:column;justify-content:flex-end;padding:15px;display:flex;box-shadow:inset 0 1px #ffffff59,0 34px 60px -22px #1c143373}.float-lines{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.float-lines span{background:#ffffff80;border-radius:3px;height:6px;display:block}.float-lines span:nth-child(2){background:#ffffff52;width:65%}.float-hex{font-family:var(--font-mono);color:#fff;text-shadow:0 1px 8px #0000004d;letter-spacing:.02em;font-size:.82rem;font-weight:700}.fc-1{--c:#7c3aed;--c2:#a78bfa;--x:6%;--y:12%;--z:60px;--tx:5deg;--ty:-14deg;--fd:6.5s}.fc-2{--c:#ec4899;--c2:#f9a8d4;--x:38%;--y:2%;--z:110px;--tx:-4deg;--ty:9deg;--fd:7.5s;--fdel:-2s;--w:170px;--h:210px}.fc-3{--c:#f59e0b;--c2:#fde68a;--x:70%;--y:14%;--z:40px;--tx:6deg;--ty:16deg;--fd:6s;--fdel:-4s}.fc-4{--c:#14b8a6;--c2:#5eead4;--x:0%;--y:56%;--z:30px;--tx:-6deg;--ty:12deg;--fd:8s;--fdel:-1.5s;--w:138px;--h:172px}.fc-5{--c:#6366f1;--c2:#a5b4fc;--x:33%;--y:52%;--z:140px;--tx:3deg;--ty:-7deg;--fd:7s;--fdel:-3.2s}.fc-6{--c:#f43f5e;--c2:#fda4af;--x:62%;--y:60%;--z:70px;--tx:-5deg;--ty:-13deg;--fd:6.8s;--fdel:-5s;--w:140px;--h:176px}.fc-7{--c:#06b6d4;--c2:#67e8f9;--x:84%;--y:42%;--z:20px;--tx:7deg;--ty:20deg;--fd:7.8s;--fdel:-2.6s;--w:126px;--h:158px}.strip-section{padding-block-start:clamp(1.8rem,4vw,3rem);padding-block-end:0}.strip-wrap{padding-block-start:1.2rem;padding-block-end:1.2rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.strip-track{will-change:transform;width:max-content;animation:36s linear infinite marquee;display:flex}.strip-wrap:hover .strip-track,.strip-wrap:focus-within .strip-track{animation-play-state:paused}.strip-set{gap:.9rem;padding-right:.9rem;display:flex}.strip-chip{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;font-family:var(--font-mono);color:var(--text);border-radius:999px;flex-shrink:0;align-items:center;gap:.65rem;padding:.5rem .95rem .5rem .5rem;font-size:.82rem;font-weight:600;transition:border-color .18s,transform .18s;display:inline-flex}.strip-chip:hover{border-color:var(--primary);transform:translateY(-2px)}.strip-dot{background:var(--c);border-radius:50%;flex-shrink:0;width:32px;height:32px;box-shadow:inset 0 0 0 2px #ffffff59,0 5px 12px -3px #1c143359}.step-card{padding-top:2.2rem;position:relative}.step-num{background:var(--grad-brand);color:#fff;border-radius:12px;place-items:center;width:38px;height:38px;font-size:1.05rem;font-weight:800;display:grid;position:absolute;top:-1.15rem;left:1.5rem;box-shadow:0 8px 18px -6px #7c3aed8c}.theory-card .mini-swatches{gap:6px;height:52px;margin:1rem 0 1.1rem;display:flex}.theory-card .mini-swatch{border-radius:10px;flex:1;box-shadow:inset 0 0 0 1px #0000000f}.demo-shell{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface-2);box-shadow:var(--shadow-md);padding:clamp(.8rem,2.5vw,1.6rem)}.demo-chrome{align-items:center;gap:6px;padding:.2rem .3rem .8rem;display:flex}.demo-chrome i{background:var(--border-strong);border-radius:50%;width:10px;height:10px}.demo-chrome i:first-child{background:#f87171}.demo-chrome i:nth-child(2){background:#fbbf24}.demo-chrome i:nth-child(3){background:#34d399}.demo-site{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:#1e1b2e;background:#fff;font-size:.95rem;overflow:hidden}.demo-nav{background:#ffffffeb;border-bottom:1px solid #1e1b2e14;align-items:center;gap:1rem;padding:.8rem 1.2rem;display:flex}.demo-brand{color:var(--d1,#7c3aed);font-size:1rem;font-weight:800}.demo-nav-links{color:#6b6580;gap:.9rem;margin-left:auto;font-size:.82rem;display:flex}.demo-nav-btn{background:var(--d1,#7c3aed);color:#fff;border-radius:8px;margin-left:.8rem;padding:.38rem .8rem;font-size:.78rem;font-weight:600}.demo-hero{background:linear-gradient(135deg,var(--d4,#f5f3ff),#fff 78%);grid-template-columns:1.15fr .85fr;align-items:center;gap:1.4rem;padding:clamp(1.4rem,4vw,2.6rem) 1.4rem;display:grid}.demo-hero-badge{background:color-mix(in srgb,var(--d3,#f59e0b)18%,#fff);color:color-mix(in srgb,var(--d3,#f59e0b)80%,#000);border-radius:999px;margin-bottom:.7rem;padding:.22rem .6rem;font-size:.7rem;font-weight:700;display:inline-block}.demo-hero h3{color:var(--d5,#1e1b2e);margin-bottom:.4em;font-size:clamp(1.25rem,3vw,1.7rem)}.demo-hero p{color:#5e5876;max-width:42ch;margin-bottom:1.1rem;font-size:.9rem}.demo-hero-actions{flex-wrap:wrap;gap:.6rem;display:flex}.demo-btn-primary{background:var(--d1,#7c3aed);color:#fff;border-radius:10px;padding:.55rem 1.1rem;font-size:.85rem;font-weight:600}.demo-btn-ghost{border:1.5px solid var(--d2,#ec4899);color:var(--d2,#ec4899);border-radius:10px;padding:.5rem 1.05rem;font-size:.85rem;font-weight:600}.demo-hero-art{background:radial-gradient(90px 90px at 30% 25%,color-mix(in srgb,var(--d2,#ec4899)75%,#fff),transparent 75%),radial-gradient(120px 120px at 75% 70%,color-mix(in srgb,var(--d1,#7c3aed)70%,#fff),transparent 78%),radial-gradient(70px 70px at 60% 20%,color-mix(in srgb,var(--d3,#f59e0b)65%,#fff),transparent 76%),color-mix(in srgb,var(--d5,#1e1b2e)92%,#fff);border-radius:16px;min-height:150px}.demo-cards{background:#fff;grid-template-columns:repeat(3,1fr);gap:.9rem;padding:1.2rem 1.4rem 1.4rem;display:grid}.demo-card{background:#fff;border:1px solid #1e1b2e17;border-radius:12px;padding:.95rem}.demo-card--featured{background:color-mix(in srgb,var(--d1,#7c3aed)7%,#fff);border-color:color-mix(in srgb,var(--d1,#7c3aed)35%,#fff)}.demo-chip{background:color-mix(in srgb,var(--d3,#f59e0b)18%,#fff);color:color-mix(in srgb,var(--d3,#f59e0b)75%,#000);border-radius:999px;margin-bottom:.55rem;padding:.18rem .55rem;font-size:.68rem;font-weight:700;display:inline-block}.demo-card b{color:var(--d5,#1e1b2e);margin-bottom:.3rem;font-size:.86rem;display:block}.demo-card p{color:#6b6580;margin:0;font-size:.78rem}.demo-footer{background:var(--d5,#1e1b2e);color:#ffffffbf;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.4rem;font-size:.78rem;display:flex}.demo-footer-links{gap:1rem;display:flex}.demo-footer-links span{background:#ffffff38;border-radius:3px;width:42px;height:6px}.demo-cta-note{text-align:center;color:var(--text-muted);margin-top:1.1rem;font-size:.86rem}.faq-list{max-width:780px;margin-inline-start:auto;margin-inline-end:auto}.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:.8rem;transition:border-color .2s;overflow:hidden}.faq-item[open]{border-color:var(--primary)}.faq-item summary{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.25rem;font-weight:600;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";background:var(--primary-soft);width:26px;height:26px;color:var(--primary);border-radius:8px;flex-shrink:0;place-items:center;font-weight:700;transition:transform .2s;display:grid}.faq-item[open] summary:after{content:"−";transform:rotate(180deg)}.faq-item .faq-a{color:var(--text-muted);padding:0 1.25rem 1.15rem}.faq-item .faq-a p:last-child{margin-bottom:0}.tool-wrap{max-width:1080px;margin-inline-start:auto;margin-inline-end:auto}.tool-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(1.3rem,3.5vw,2rem)}.tool-panel-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;margin-bottom:1.2rem;display:flex}.tool-panel-head h2{margin:0;font-size:1.3rem}.tool-hint{color:var(--text-muted);margin:0;font-size:.88rem}.tool-hint a{font-weight:600}.label{color:var(--text);margin-bottom:.45rem;font-size:.86rem;font-weight:600;display:block}.field{flex-direction:column;display:flex}.field-actions{flex-flow:wrap;align-items:flex-end;gap:.6rem}.input,.select,.textarea{background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius);padding:.7rem .95rem;font-size:.95rem;transition:border-color .18s,box-shadow .18s}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary)18%,transparent);outline:none}.textarea{resize:vertical;min-height:74px;line-height:1.5}.select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted)50%),linear-gradient(135deg,var(--text-muted)50%,transparent 50%);cursor:pointer;background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-repeat:no-repeat;background-size:5px 5px;padding-right:2.2rem}.form-hint{color:var(--text-muted);margin:.7rem 0 0;font-size:.82rem}.color-field{align-items:stretch;gap:.55rem;display:flex}.color-field input[type=color]{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer;flex-shrink:0;width:46px;height:100%;min-height:44px;padding:4px}.color-field input[type=text]{font-family:var(--font-mono)}.tool-controls{grid-template-columns:1fr 1fr auto;align-items:end;gap:1rem;margin-top:1.2rem;display:grid}.prompt-row{gap:.7rem;display:grid}.prompt-examples{margin-top:.8rem}.palette-block{margin-top:clamp(1.8rem,4vw,2.6rem)}.palette-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;display:flex}.palette-head h2{margin:0 0 .15rem;font-size:1.35rem}.palette-meta{color:var(--text-muted);margin:0;font-size:.88rem}.palette-grid{grid-template-columns:repeat(5,1fr);gap:.9rem;display:grid}.swatch-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;animation:.35s backwards cardin;position:relative;overflow:hidden}.swatch-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.swatch-card.is-locked{border-color:var(--primary)}.swatch-color{cursor:pointer;background:var(--sw,#ccc);border:0;width:100%;height:132px;padding:0;transition:filter .15s;display:block;position:relative}.swatch-color:hover{filter:brightness(1.04)}.swatch-color:after{content:"Click to copy";color:var(--swtext,#fff);opacity:0;background:#0000002e;place-items:center;font-size:.78rem;font-weight:600;transition:opacity .18s;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.swatch-color:hover:after{opacity:1}.swatch-card.is-locked .swatch-color:after{content:"Locked — click to copy"}.lock-btn{z-index:2;cursor:pointer;width:32px;height:32px;color:var(--swtext,#fff);-webkit-backdrop-filter:blur(6px);background:#ffffff38;border:0;border-radius:9px;place-items:center;transition:background-color .18s,transform .18s;display:grid;position:absolute;top:10px;right:10px}.lock-btn:hover{background:#ffffff57;transform:scale(1.08)}.lock-btn svg{width:15px;height:15px}.lock-btn .icon-unlock{display:block}.lock-btn .icon-lock{display:none}.swatch-card.is-locked .lock-btn{color:#1e1b2e;background:#ffffffd9}.swatch-card.is-locked .lock-btn .icon-unlock{display:none}.swatch-card.is-locked .lock-btn .icon-lock{display:block}.swatch-body{padding:.8rem .85rem .9rem}.color-row{justify-content:space-between;align-items:center;gap:.5rem;padding:.18rem 0;display:flex}.color-row+.color-row{border-top:1px dashed var(--border)}.color-row .code-label{letter-spacing:.08em;color:var(--text-muted);font-size:.68rem;font-weight:700}.color-row .code-value{font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:600;overflow:hidden}.color-row .code-group{flex-direction:column;min-width:0;display:flex}.icon-btn{border:1px solid var(--border);background:var(--surface);width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:8px;flex-shrink:0;place-items:center;transition:color .15s,border-color .15s,background-color .15s;display:grid}.icon-btn:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}.icon-btn svg{width:14px;height:14px}.icon-btn.is-copied{color:var(--success);border-color:var(--success);background:var(--success-soft)}.swatch-foot{gap:.4rem;padding:0 .85rem .85rem;display:flex}.swatch-foot .icon-btn{flex:1;justify-content:center;align-items:center;gap:.35rem;height:30px;font-size:.74rem;font-weight:600;display:flex}.swatch-edit{z-index:5;background:var(--surface);border-top:1px solid var(--border);flex-direction:column;gap:.55rem;padding:.8rem;animation:.22s slideup;display:flex;position:absolute;top:auto;bottom:0;left:0;right:0;box-shadow:0 -14px 30px -18px #1c143366}.swatch-edit .color-field input[type=color]{min-height:40px}.swatch-edit-actions{gap:.45rem;display:flex}.swatch-edit-actions .btn{flex:1;padding:.5rem .6rem;font-size:.82rem}.tool-tip{text-align:center;color:var(--text-muted);margin-top:1.1rem;font-size:.84rem}.tool-tip kbd{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:.1em .45em;font-size:.78em}.studio{margin-top:clamp(2.4rem,5vw,3.4rem)}.studio>h2{margin-bottom:1.2rem;font-size:clamp(1.5rem,3vw,2rem)}.tab-list{border-bottom:1px solid var(--border);scrollbar-width:none;gap:.3rem;padding-bottom:2px;display:flex;overflow-x:auto}.tab-list::-webkit-scrollbar{display:none}.tab{cursor:pointer;color:var(--text-muted);background:0 0;border:0;border-radius:10px 10px 0 0;flex-shrink:0;padding:.72rem 1.05rem;font-size:.92rem;font-weight:600;transition:color .18s,background-color .18s,box-shadow .18s}.tab:hover{color:var(--text);background:var(--surface-2)}.tab[aria-selected=true]{color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 -2px 0 var(--primary)}.tab-panel{padding-top:1.5rem}.tab-panel[hidden]{display:none}.panel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.1rem,3vw,1.6rem)}.shade-picker{margin-bottom:1.4rem}.shade-picker .chip{border-radius:12px;padding:.3rem}.shade-picker .chip i{background:var(--c);border-radius:9px;width:30px;height:30px;display:block}.shades-grid{grid-template-columns:repeat(11,1fr);gap:.55rem;display:grid}.shade-chip{cursor:pointer;text-align:left;height:108px;box-shadow:var(--shadow-sm);border:0;border-radius:12px;flex-direction:column;justify-content:space-between;padding:0;transition:transform .16s,box-shadow .16s;display:flex;overflow:hidden}.shade-chip:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.shade-chip .step{opacity:.85;padding:.4rem .5rem 0;font-size:.7rem;font-weight:700}.shade-chip .hex{font-family:var(--font-mono);word-break:break-all;padding:0 .5rem .45rem;font-size:.68rem;font-weight:600}.shades-note{color:var(--text-muted);margin-top:1.1rem;font-size:.84rem}.contrast-grid{grid-template-columns:1fr auto 1fr;align-items:start;gap:1rem;display:grid}.swap-btn{align-self:center;margin-top:1.6rem}.contrast-result{grid-template-columns:auto 1fr;align-items:center;gap:1.4rem;margin-top:1.5rem;display:grid}.ratio-box{text-align:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem 1.6rem}.ratio-box .ratio{font-family:var(--font-mono);letter-spacing:-.02em;font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800}.ratio-box .ratio-label{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;font-weight:600}.contrast-rows{flex-direction:column;gap:.55rem;display:flex}.result-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .95rem;font-size:.9rem;display:flex}.result-row .row-badges{gap:.4rem;display:flex}.contrast-sample{border-radius:var(--radius-lg);border:1px solid var(--border);margin-top:1.4rem;padding:1.5rem}.contrast-sample .sample-large{margin-bottom:.4rem;font-size:1.55rem;font-weight:800}.contrast-sample .sample-normal{margin-bottom:1rem;font-size:.95rem}.contrast-sample .sample-btn{border:2px solid;border-radius:10px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:inline-block}.contrast-explain{color:var(--text-muted);margin-top:1.2rem;font-size:.93rem}.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:var(--surface-2);padding:clamp(1.8rem,5vw,3rem) 1.5rem;transition:border-color .2s,background-color .2s}.dropzone:hover,.dropzone.is-dragover{border-color:var(--primary);background:var(--primary-soft)}.dropzone svg{width:42px;height:42px;color:var(--primary);margin:0 auto .8rem}.dropzone .dz-title{margin-bottom:.3rem;font-weight:700}.dropzone .dz-sub{color:var(--text-muted);margin:0;font-size:.88rem}.extract-state{text-align:center;color:var(--text-muted);padding:1.4rem}.spinner{border:3px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;width:34px;height:34px;margin:0 auto .8rem;animation:.8s linear infinite spin}.extract-grid{flex-wrap:wrap;gap:.8rem;margin-top:1.3rem;display:flex}.extract-chip{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);width:112px;box-shadow:var(--shadow-sm);overflow:hidden}.extract-chip .ec-color{height:64px}.extract-chip .ec-body{justify-content:space-between;align-items:center;gap:.35rem;padding:.5rem .6rem;display:flex}.extract-chip .ec-hex{font-family:var(--font-mono);text-overflow:ellipsis;font-size:.74rem;font-weight:700;overflow:hidden}.extract-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;margin-top:1.3rem;display:flex}.extract-meta p{color:var(--text-muted);margin:0;font-size:.84rem}.gradient-controls{grid-template-columns:repeat(3,1fr) auto;align-items:end;gap:1rem;display:grid}.angle-row{align-items:center;gap:.8rem;display:flex}.angle-row input[type=range]{accent-color:var(--primary);flex:1}.angle-row output{font-family:var(--font-mono);text-align:right;min-width:44px;font-size:.85rem}.gradient-preview{border-radius:var(--radius-lg);border:1px solid var(--border);height:230px;margin-top:1.3rem}.gradient-code{margin-top:1.2rem;position:relative}.code-block{color:#e6e1f2;border-radius:var(--radius);font-family:var(--font-mono);white-space:pre;background:#191524;margin:0;padding:1rem 1.2rem;font-size:.85rem;overflow-x:auto}.code-block .copy-corner{position:absolute;top:.55rem;right:.55rem}.gradient-presets{margin-top:1.2rem}.gradient-presets .chip{border-radius:10px;padding:.28rem}.gradient-presets .chip i{border-radius:7px;width:44px;height:22px;display:block}.preview-mock .demo-site{font-size:.9rem}.preview-note{color:var(--text-muted);margin-top:1rem;font-size:.85rem}.export-grid{grid-template-columns:1fr 1fr;gap:1.2rem;display:grid}.export-group h3{margin-bottom:.8rem;font-size:1.02rem}.export-group .btn-row .btn{padding:.55rem 1rem;font-size:.85rem}.token-table{border-collapse:collapse;width:100%;margin-bottom:1.1rem;font-size:.88rem}.token-table th,.token-table td{text-align:left;border-bottom:1px solid var(--border);padding:.48rem .7rem}.token-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;font-size:.74rem}.token-table td{font-family:var(--font-mono)}.token-swatch{vertical-align:middle;border-radius:6px;width:22px;height:22px;display:inline-block;box-shadow:inset 0 0 0 1px #00000014}.saved-list{flex-direction:column;gap:.8rem;display:flex}.saved-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);flex-wrap:wrap;align-items:center;gap:.9rem;padding:.9rem 1.1rem;display:flex}.saved-swatches{border-radius:10px;flex-shrink:0;display:flex;overflow:hidden}.saved-swatches i{width:30px;height:40px;display:block}.saved-info{flex:1;min-width:180px}.saved-info b{font-size:.95rem;display:block}.saved-info span{color:var(--text-muted);font-size:.78rem;font-family:var(--font-mono)}.saved-actions{gap:.45rem;margin-left:auto;display:flex}.empty-state{text-align:center;color:var(--text-muted);border:2px dashed var(--border-strong);border-radius:var(--radius-lg);padding:2.6rem 1.5rem}.empty-state svg{opacity:.6;width:40px;height:40px;margin:0 auto .8rem}.empty-state p{margin:0}.toast-region{z-index:400;pointer-events:none;flex-direction:column;align-items:center;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;bottom:1.3rem;left:50%;transform:translate(-50%)}.toast{color:#fff;background:#1d1829;border-radius:12px;align-items:center;gap:.55rem;padding:.72rem 1.15rem;font-size:.9rem;font-weight:500;animation:.28s cubic-bezier(.2,.9,.3,1.2) toastin;display:flex;box-shadow:0 16px 40px -12px #00000080}.toast.is-leaving{animation:.25s forwards toastout}.toast .t-icon{color:#4ade80;place-items:center;display:grid}.toast .t-icon svg{width:16px;height:16px}.toast--error .t-icon{color:#f87171}.nf-hero{text-align:center;padding:clamp(3.4rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);position:relative;overflow:clip}.nf-code{letter-spacing:-.05em;background:var(--grad-brand);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(5.5rem,20vw,11rem);font-weight:800;line-height:1;animation:8s ease-in-out infinite alternate hueShift}.nf-orbs i{filter:blur(60px);opacity:.4;border-radius:50%;animation:12s ease-in-out infinite orbfloat;position:absolute}.nf-orbs i:first-child{background:#7c3aed;width:260px;height:260px;top:-60px;left:8%}.nf-orbs i:nth-child(2){background:#ec4899;width:220px;height:220px;animation-delay:-4s;bottom:-40px;right:10%}.nf-orbs i:nth-child(3){opacity:.3;background:#f59e0b;width:180px;height:180px;animation-delay:-8s;top:30%;right:30%}.nf-swatches{justify-content:center;gap:.6rem;margin:1.6rem 0 2.2rem;display:flex}.nf-swatches i{width:44px;height:60px;box-shadow:var(--shadow-md);border-radius:12px;animation:4.5s ease-in-out infinite floaty}.nf-swatches i:nth-child(odd){animation-delay:-2.2s}@keyframes floaty{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-16px)rotate(1.6deg)}}@keyframes orbfloat{0%,to{transform:translate(0)scale(1)}33%{transform:translate(34px,-26px)scale(1.07)}66%{transform:translate(-26px,22px)scale(.95)}}@keyframes marquee{to{transform:translate(-50%)}}@keyframes glowpulse{0%,to{opacity:.75}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastin{0%{opacity:0;transform:translateY(14px)scale(.94)}to{opacity:1;transform:none}}@keyframes toastout{to{opacity:0;transform:translateY(10px)scale(.95)}}@keyframes cardin{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:none}}@keyframes slideup{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes hueShift{0%{filter:hue-rotate()}to{filter:hue-rotate(40deg)}}.js .reveal{opacity:0;transition:opacity .65s,transform .65s;transform:translateY(20px)}.js .reveal.is-visible{opacity:1;transform:none}.hero.is-offscreen .orb,.hero.is-offscreen .stage-glow,.hero.is-offscreen .float-inner,.strip-track.is-offscreen{animation-play-state:paused}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.js .reveal{opacity:1;transform:none}.strip-track{flex-wrap:wrap;width:auto;animation:none}.strip-set[aria-hidden=true]{display:none}.stage-cards{transform:rotateX(6deg)rotateY(0)}.float-inner,.orb,.stage-glow{animation:none}}html.force-reduced .js .reveal,html.force-reduced .reveal{opacity:1!important;transform:none!important}html.force-reduced .float-inner,html.force-reduced .orb,html.force-reduced .strip-track,html.force-reduced .stage-glow,html.force-reduced .nf-code,html.force-reduced .nf-swatches i{animation:none!important}@media (max-width:1080px){.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-brand{grid-column:1/-1}}@media (max-width:1024px){.hero-inner{grid-template-columns:1fr}.hero-stage{width:100%;max-width:620px;height:400px;margin-inline-start:auto;margin-inline-end:auto}.palette-grid{grid-template-columns:repeat(3,1fr)}.tool-controls{grid-template-columns:1fr 1fr}.field-actions{grid-column:1/-1}.gradient-controls{grid-template-columns:1fr 1fr}.export-grid{grid-template-columns:1fr}}@media (max-width:960px){.nav-links,.nav-cta{display:none}.nav-toggle{display:flex}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.hero-stage{perspective:1100px;height:340px}.orb{filter:blur(45px)}.stage-glow{filter:blur(16px)}.float-card{--w:112px!important;--h:142px!important}.fc-5{display:none}.demo-hero{grid-template-columns:1fr}.demo-hero-art{min-height:120px}.demo-cards{grid-template-columns:1fr 1fr}.contrast-grid{grid-template-columns:1fr}.swap-btn{margin:0 auto;transform:rotate(90deg)}.contrast-result{grid-template-columns:1fr}.shades-grid{grid-template-columns:repeat(6,1fr)}.shade-chip{height:92px}.tool-controls,.grid-2{grid-template-columns:1fr}}@media (max-width:640px){.fc-7{display:none}.palette-grid{grid-template-columns:repeat(2,1fr)}.grid-3,.grid-4,.gradient-controls{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}.demo-nav-links{display:none}}@media (max-width:420px){.shades-grid{grid-template-columns:repeat(4,1fr)}.demo-cards{grid-template-columns:1fr}.hero-actions .btn{width:100%}.swatch-color{height:110px}}