.hero h1.paste-title{font-size:clamp(50px,6vw,84px);line-height:1}.code-desktop{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;background:linear-gradient(140deg,#1e2d3e,#466170)}.code-editor{position:absolute;inset:12% 4% 7%;display:grid;grid-template-columns:18% 38% 44%;background:#edebe6;color:#25272b;border-radius:8px;overflow:hidden}.code-sidebar{padding:14% 10%;background:#dededa;display:flex;flex-direction:column;gap:5%;font-size:1.6cqw}.code-sidebar>strong{font-size:1.3cqw;color:#777}.code-sidebar>span{padding:8%}.code-sidebar .active{background:#713f5b20;border-radius:5px;color:#713f5b}.code-settings{padding:8%;position:relative;border-right:1px solid #0001}.code-tabs{display:flex;justify-content:space-between;gap:5%;font-size:1.35cqw;padding-bottom:8%;border-bottom:1px solid #0002}.code-step{position:absolute;left:8%;right:8%;top:19%}.code-step h3{font-size:3cqw;line-height:1.1;margin:0 0 15%}.code-step label{display:block;font-size:1.55cqw;font-weight:600;margin:8% 0 5%}.code-step p{font-size:1.5cqw;background:#fff;border-radius:5px;padding:6%;overflow-wrap:anywhere}.code-step small{font-size:1.35cqw;line-height:1.6;display:block;color:#616264}.code-swatches{display:flex;gap:8%;margin-bottom:12%}.code-swatches i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#1b2140}.code-swatches i:nth-child(2){background:#713f5b}.code-swatches i:nth-child(3){background:#fff;border:1px solid #bbb}.code-formats{padding:10% 0;font-weight:600;font-size:2.2cqw;color:#713f5b}.code-preview{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:9%;gap:8%}.code-preview img{width:100%;aspect-ratio:1;background:#fff;object-fit:contain}.code-verified{font-size:1.3cqw;line-height:1.5;color:#315a37;margin:0;text-align:center}.code-export-label{font-size:1.4cqw;background:#713f5b;color:#fff;padding:6% 9%;border-radius:6px}.content-step{animation:codeContent 15s infinite}.appearance-step{animation:codeAppearance 15s infinite}.export-step{animation:codeExport 15s infinite}.code-verified{animation:codeVerified 15s infinite}.code-demo.paused *,.code-demo.offscreen-demo *{animation-play-state:paused!important}.code-demo.static-demo *{animation:none!important}.code-demo.static-demo .content-step,.code-demo.static-demo .appearance-step{display:none}.code-demo.static-demo .export-step,.code-demo.static-demo .code-verified{opacity:1}.code-demo figcaption{font-size:16px}.code-types{padding-top:40px;padding-bottom:40px}.code-types h2{font:600 clamp(32px,4vw,48px)/1.1 'Barlow Condensed',sans-serif}.code-types dl{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 40px}.code-types dt{font-size:21px;font-weight:600;margin-bottom:9px}.code-types dd{margin:0;color:#bec5ba;font-size:17px;line-height:1.6}.paste-distribution{font-size:15px;line-height:1.6;color:#c3cbbf;max-width:720px}.paste-distribution a{color:#ffbc57;text-decoration:underline}@keyframes codeContent{0%,25%,98%,100%{opacity:1}29%,94%{opacity:0}}@keyframes codeAppearance{0%,25%,62%,100%{opacity:0}29%,58%{opacity:1}}@keyframes codeExport{0%,62%,98%,100%{opacity:0}66%,94%{opacity:1}}@keyframes codeVerified{0%,35%,98%,100%{opacity:0}45%,94%{opacity:1}}@media(max-width:800px){.hero h1.paste-title{font-size:clamp(46px,11vw,68px)}.code-desktop{aspect-ratio:4/3}.code-editor{inset:15% 4% 5%;grid-template-columns:50% 50%}.code-sidebar{display:none}.code-settings{padding:8%}.code-tabs{font-size:2cqw}.code-step{top:20%}.code-step h3{font-size:4.1cqw;margin-bottom:10%}.code-step label{font-size:2.5cqw;margin:5% 0}.code-step p{font-size:2.4cqw;padding:5%}.code-step small{font-size:2cqw;line-height:1.4}.code-swatches{margin-bottom:6%}.code-swatches i{width:4cqw;height:4cqw}.code-formats{font-size:3.5cqw}.code-preview{padding:8%;gap:6%}.code-verified{font-size:2.3cqw}.code-export-label{font-size:2.2cqw;text-align:center}.code-types dl{grid-template-columns:1fr 1fr;gap:24px}.code-types{padding-top:30px;padding-bottom:30px}}@media(max-width:390px){.code-types dl{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.code-demo *{animation:none!important}.code-demo .content-step,.code-demo .appearance-step{display:none}.code-demo .export-step,.code-demo .code-verified{opacity:1}}
@media(max-width:800px){.code-desktop{aspect-ratio:1/1}.code-editor{inset:12% 4% 5%}.code-preview{min-height:0;padding:9%;gap:5%}.code-preview img{max-height:56%;width:100%;object-fit:contain}.code-step{top:17%}.code-step h3{margin-bottom:10%}.code-step p{margin:7% 0}.code-step label{margin:7% 0 4%}}
@media(max-width:800px){.code-demo .macbook-frame .macbook-screen.code-desktop{aspect-ratio:1/1!important}}