.ux-hero{background:#fdfbf7;padding-block:clamp(56px,7vw,96px);position:relative;overflow:hidden}.ux-hero:before{content:"";background-image:linear-gradient(#0e0e100b 1px,#0000 1px),linear-gradient(90deg,#0e0e100b 1px,#0000 1px);background-size:36px 36px;position:absolute;inset:0}.ux-hero .container-wide{position:relative}.canvas-mock{min-height:360px;font-family:var(--ff-head);position:relative}.frame{background:#fff;border:1.5px solid #b7b3a8;border-radius:10px;padding:14px;position:absolute;box-shadow:0 16px 40px #0e0e101a}.frame .flabel{color:#8a867a;letter-spacing:.06em;font-size:.64rem;font-weight:600;position:absolute;top:-22px;left:0}.frame .fbar{background:#e9e5da;border-radius:4px;height:8px;margin-bottom:8px}.frame .fbtn{background:#1b4dff;border-radius:6px;width:60%;height:22px;margin-top:10px}.sticky-note{background:#fff3a3;border-radius:3px;max-width:150px;padding:12px 14px;font-size:.7rem;font-weight:500;line-height:1.5;position:absolute;transform:rotate(-3deg);box-shadow:0 8px 20px #0e0e1024}.sticky-note.pink{background:#ffd6e0;transform:rotate(2.5deg)}.ux-cursor{z-index:3;align-items:center;gap:6px;display:flex;position:absolute}.ux-cursor svg{fill:#e6332a;width:16px;height:16px}.ux-cursor span{color:#fff;font-size:.62rem;font-weight:600;font-family:var(--ff-head);background:#e6332a;border-radius:99px;padding:4px 9px}.ux-steps{counter-reset:ux;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);display:grid}@media (width<=980px){.ux-steps{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.ux-steps{grid-template-columns:1fr}}.uxs{counter-increment:ux;border:1px solid var(--line);background:#fff;border-radius:16px;padding:28px;position:relative}.uxs:before{content:"0" counter(ux);font-family:var(--ff-head);letter-spacing:-.04em;color:var(--bg-soft-2);font-size:2.4rem;font-weight:800;line-height:1;position:absolute;top:14px;right:20px}.uxs h3{margin-bottom:10px;font-size:1.05rem;position:relative}.uxs p{color:var(--muted);font-size:.86rem;line-height:1.6;position:relative}.tokens{color:#fff;border-radius:var(--r-xl);background:#0e0e10;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,48px);display:grid}@media (width<=860px){.tokens{grid-template-columns:1fr}}.tokens h3{color:#fff}.tokens p{color:#ffffffb8}.tok-code{background:#000;border:1px solid #ffffff24;border-radius:12px;padding:22px 24px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.9}.tok-code .tk{color:#ffd6e0}.tok-code .tv{color:#a5e8ff}.tok-code .tc{color:#666}.ux-fact{border-bottom:1px solid var(--line);align-items:baseline;gap:16px;padding:20px 4px;display:flex}.ux-fact b{font-family:var(--ff-head);flex:none;min-width:180px;font-size:1.15rem}.ux-fact span{color:var(--muted);font-size:.94rem}a{color:inherit}a:hover{color:var(--primary)}.ux-pal{z-index:2;gap:10px;width:138px;display:grid;position:absolute;top:10%;left:0}.ux-chip{background:#fff;border:1.5px solid #b7b3a8;border-radius:10px;align-items:center;gap:8px;padding:10px 12px;font-size:.68rem;font-weight:600;transition:opacity .3s;display:flex;box-shadow:0 8px 18px #0e0e1014}.ux-chip i{background:var(--bg-soft-2);border:1px solid #b7b3a8;border-radius:3px;flex:none;width:16px;height:12px}.ux-chip.used{opacity:.3}.ux-frame2{background:#fff;border:1.5px solid #b7b3a8;border-radius:12px;width:min(330px,66%);padding:12px;position:absolute;top:2%;right:0;box-shadow:0 20px 44px #0e0e101f}.ux-fhead{gap:5px;margin-bottom:10px;display:flex}.ux-fhead i{background:#e9e5da;border-radius:50%;width:8px;height:8px}.ux-slot{color:#a49f92;letter-spacing:.1em;border:1.5px dashed #cfcabb;border-radius:8px;place-items:center;min-height:46px;margin-bottom:9px;font-size:.6rem;transition:all .3s;display:grid;position:relative;overflow:hidden}.ux-slot .fill{opacity:0;transition:.45s var(--ease);position:absolute;inset:0;transform:translateY(10px)}.ux-slot.done{border:1.5px solid #1b4dff}.ux-slot.done .fill{opacity:1;transform:none}.ux-slot.done>span{visibility:hidden}.f-nav{align-items:center;gap:6px;padding:9px 10px;display:flex}.f-nav b{background:#0e0e10;border-radius:4px;width:34px;height:8px}.f-nav i{background:#e9e5da;border-radius:3px;width:22px;height:6px}.f-nav i:last-child{background:#1b4dff;border-radius:7px;width:34px;height:14px;margin-left:auto}.f-hero{background:linear-gradient(135deg,#1b4dff,#5b3df5);place-items:center;height:100%;display:grid}.f-hero div{width:70%}.f-hero i{background:#ffffffd9;border-radius:4px;height:8px;margin-bottom:6px;display:block}.f-hero i:last-child{background:#ffffff80;width:55%}.f-cards{grid-template-columns:repeat(3,1fr);gap:7px;padding:8px;display:grid}.f-cards i{background:#f1efe8;border:1px solid #e0dcd0;border-radius:5px;height:34px}.ux-ghost2{z-index:8;opacity:0;transition:left .85s cubic-bezier(.5,0,.3,1),top .85s cubic-bezier(.5,0,.3,1),opacity .25s;position:absolute}.ux-toast2{opacity:0;font-size:.7rem;font-weight:600;font-family:var(--ff-head);background:#fff3a3;border-radius:3px;padding:11px 15px;transition:all .4s;position:absolute;bottom:0;left:24%;transform:rotate(-2deg)translateY(10px);box-shadow:0 10px 24px #0e0e1029}.ux-toast2.on{opacity:1;transform:rotate(-2deg)}@media (prefers-reduced-motion:reduce){.ux-cursor,.ux-ghost2{display:none!important}.ux-slot{border-style:solid}.ux-slot .fill{opacity:1;transform:none}.ux-slot>span{visibility:hidden}}.ux-w .bg-soft{background-color:#fdfbf7;background-image:linear-gradient(#0e0e100a 1px,#0000 1px),linear-gradient(90deg,#0e0e100a 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:36px 36px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box}.ux-w .eyebrow{color:#0e0e10;background:#fff3a3;border-radius:3px;padding:7px 14px;transform:rotate(-1.2deg);box-shadow:0 4px 10px #0e0e1014}