:root{
 --ink:#22243b;--muted:#6a6d85;--accent:#5b50e6;--accent-dark:#4238bb;
 --wash:#f4f2ff;--line:#e8e8f2;--paper:#fff;--canvas:#fff;
 background:#fff;
}
body{background:#fff}
header{background:#fff;border-bottom-color:#eeeef6}
.brand-icon{background:linear-gradient(135deg,#4869f7,#a04fea);box-shadow:0 5px 14px #6256ee22}
.brand{color:var(--ink)}
nav a:hover,footer a:hover{color:var(--accent)}
nav .pill{background:#f4f1ff;color:#6550c9;border-color:#e6dfff}
.hero{
 background:radial-gradient(ellipse at 95% 12%,#fff2e9 0,transparent 36%),
 radial-gradient(ellipse at 60% 0,#f0edff 0,transparent 46%),#fff;
}
.eyebrow{color:#6153cf}
.eyebrow .dot{background:#ff926c;box-shadow:0 0 0 4px #fff0e9}
h1{color:#22243b}
h1 em{
 color:#6550de;background:linear-gradient(100deg,#4274ec 0%,#8455de 55%,#e96b92 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.privacy-note{color:#70728a}
.workspace>.panel{background:#fff;border-color:#e8e8f2;box-shadow:0 8px 30px #30386b07;position:relative}
.workspace>.panel:before{
 content:"";position:absolute;left:24px;right:24px;top:0;height:4px;border-radius:0 0 5px 5px;
 background:linear-gradient(90deg,#ffad79,#ed7b9a);
}
.workspace>.panel:nth-child(2):before{background:linear-gradient(90deg,#4f83f4,#8e65ec)}
.workspace>.panel:nth-child(3):before{background:linear-gradient(90deg,#a56be4,#ef84b4)}
.step{color:#756c9a}
.workspace>.panel:first-child .step{color:#b85e35}
.workspace>.panel:nth-child(2) .step{color:#5267c6}
.workspace>.panel:last-child .step{color:#9550aa}
.type-button{background:#fff;border-color:#e6e8f4}
.type-button span{color:#6178ce}
.type-button:nth-child(3n+2) span{color:#a765cb}
.type-button:nth-child(3n) span{color:#d47b5f}
.type-button.active{background:#f2f0ff;border-color:#7c70ed;box-shadow:0 0 0 1px #7c70ed}
.type-button:hover{background:#f8f7ff}
.preview-panel{background:#fff!important}
.preview-top .pill{background:#eef4ff;color:#5a72b6;border-color:#e0e9fb}
.preview-surface{
 background-color:#fafbff;
 background-image:linear-gradient(45deg,#eef0f8 25%,transparent 25%),
 linear-gradient(-45deg,#eef0f8 25%,transparent 25%),
 linear-gradient(45deg,transparent 75%,#eef0f8 75%),
 linear-gradient(-45deg,transparent 75%,#eef0f8 75%);
 border-color:#e8ebf6;
}
input,textarea,select{background:#fcfcff;border-color:#e6e7f1;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:#8a7de8;outline-color:#e9e4ff}
input[type=checkbox],input[type=range]{accent-color:#7360e3}
.button{background:linear-gradient(110deg,#586ded,#8660df);color:#fff;border-color:transparent;box-shadow:0 4px 12px #655be51c}
.button:hover{background:linear-gradient(110deg,#435bdb,#754bd2)}
.button.secondary{background:#f0edff;color:#6450c4;border-color:#e5dfff;box-shadow:none}
.button.ghost{background:#fff;color:#615489;border-color:#e7e2f4;box-shadow:none}
.button.ghost:hover,.button.secondary:hover{background:#f4f1ff}
.status{color:#4f57ab}
.status.warn{color:#99681d}.status.error{color:#bd435f}
.preset{background:#fff;border-color:#e7e7f1;transition:transform .15s,box-shadow .15s}
.preset:hover{transform:translateY(-2px);box-shadow:0 5px 12px #48457512}
.preset.active{background:#f7f4ff;border-color:#9981e8;box-shadow:0 0 0 1px #9981e8}
.preset i{box-shadow:0 3px 8px #20243b16}
.divider{border-color:#ededf5}
.cards .card{border-color:#e9e7f3;background:#fff;box-shadow:0 5px 22px #403d6e05;border-top:3px solid #c0b3f2}
.cards .card:nth-child(3n+2){border-top-color:#a6c2fa}
.cards .card:nth-child(3n){border-top-color:#fac4ad}
.card .number{color:#7c66b6}
footer{border-color:#ededf5}
.article p,.article li{color:#53576e}.article pre{background:#f5f2ff}
@media(prefers-reduced-motion:reduce){.preset{transition:none}.preset:hover{transform:none}}

.qr-showcase{max-width:1400px;margin:12px auto 0;padding:12px 24px 28px}
.qr-showcase-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.qr-showcase h2{font-size:28px;letter-spacing:-1px;line-height:1.2;margin:10px 0}
.qr-showcase-heading .hint{font-size:13px;margin-bottom:0}
.qr-showcase-motion{flex-shrink:0;gap:6px;min-width:130px}
.qr-showcase-window{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);padding:10px 0 18px}
.qr-showcase-track{display:flex;width:max-content;animation:qr-showcase-drift 85s linear infinite;will-change:transform}
.qr-showcase-group{display:flex;gap:20px;padding-right:20px}
.qr-showcase-card{flex:0 0 228px;width:228px;border:1px solid #eae5f5;border-radius:20px;padding:16px;background:linear-gradient(160deg,#f9f4ff,#fff 70%);box-shadow:0 6px 18px #60518008}
.qr-showcase-card:nth-child(3n+2){background:linear-gradient(160deg,#eef6ff,#fff 70%);border-color:#e0eaf8}
.qr-showcase-card:nth-child(3n){background:linear-gradient(160deg,#fff0e7,#fff 70%);border-color:#f5e5da}
.qr-showcase-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.qr-showcase-label h3{font-size:14px;letter-spacing:-.25px;margin:0;color:#39364e}
.qr-showcase-number{font-size:10px;letter-spacing:.08em;color:#9671b9;background:#f0e7fb;border-radius:8px;padding:5px 7px}
.qr-showcase-card:nth-child(3n+2) .qr-showcase-number{color:#557fc1;background:#e5eefc}
.qr-showcase-card:nth-child(3n) .qr-showcase-number{color:#bd7456;background:#ffe4d7}
.qr-showcase-art{height:196px;background:#fff;border:1px solid #f0ecf5;border-radius:14px;display:grid;place-items:center;padding:8px}
.qr-showcase-art img{display:block;width:100%;height:100%;max-width:100%;max-height:178px;object-fit:contain}
.qr-showcase-card p{font-size:12px;line-height:1.5;color:#787086;margin:12px 0 8px;min-height:36px}
.qr-showcase-style{font-size:10px;color:#a282b5;letter-spacing:.01em}
.qr-showcase-note{text-align:center;font-size:11px;color:#9290a2;margin:5px 0 0}
.qr-showcase[data-paused="true"] .qr-showcase-track,.qr-showcase:hover .qr-showcase-track{animation-play-state:paused}
@keyframes qr-showcase-drift{to{transform:translateX(-50%)}}
@media(max-width:600px){.qr-showcase{padding:8px 16px 20px}.qr-showcase-heading{align-items:start;gap:12px}.qr-showcase h2{font-size:24px}.qr-showcase-motion{min-width:0;padding:8px 10px!important;font-size:10px!important;margin-top:3px}.qr-showcase-card{flex-basis:208px;width:208px;padding:14px}.qr-showcase-art{height:178px}.qr-showcase-art img{max-height:162px}.qr-showcase-heading .hint{font-size:12px}.qr-showcase-window{mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)}}
@media(prefers-reduced-motion:reduce){.qr-showcase-track{animation:none;will-change:auto}.qr-showcase-group[aria-hidden="true"]{display:none}.qr-showcase-window{overflow-x:auto;mask-image:none;scrollbar-width:thin}.qr-showcase-motion{display:none}}