.lqp-page{--lqp-accent:var(--data-good)}.lqp-hero{padding:24px 0 10px}.lqp-eyebrow{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-weight:600}.lqp-hero h1{letter-spacing:-.035em;margin:0 0 18px;font-size:clamp(34px,5vw,60px);font-weight:600;line-height:1.08}.lqp-intro{max-width:820px;font-size:var(--fs-lg);margin:0;line-height:1.6}.lqp-facts{color:var(--muted);font-size:var(--fs-sm);margin:14px 0 26px;line-height:1.6}.lqp-tool{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--panel);scroll-margin-top:90px;overflow:hidden}.lqp-tool.is-dragging{outline:3px solid var(--lqp-accent);outline-offset:3px}.lqp-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;display:flex}.lqp-upload{flex-wrap:wrap;align-items:center;gap:12px;min-width:0;display:flex}.lqp-upload>span{color:var(--muted);font-size:var(--fs-xs)}.lqp-upload .button{cursor:pointer}.lqp-upload:focus-within label{outline:2px solid var(--focus);outline-offset:3px}.lqp-editor{grid-template-columns:minmax(0,1fr) 300px;display:grid}.lqp-preview-area{background:var(--surface-2);flex-direction:column;min-width:0;display:flex}.lqp-previews{flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px;display:grid}.lqp-previews figure{border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;min-width:0;margin:0;display:flex;overflow:hidden}.lqp-previews figcaption{background:var(--panel);font-size:var(--fs-sm);flex-direction:column;gap:6px;padding:12px;font-weight:600;display:flex}.lqp-previews figcaption span+span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;font-weight:400}.lqp-stage{flex:1;justify-content:center;align-items:center;min-height:310px;padding:12px;display:flex}.lqp-stage,.lqp-example-image{background-color:#edf0e9;background-image:conic-gradient(#d1d8ce 25%, transparent 0 50%, #d1d8ce 0 75%, transparent 0);background-size:20px 20px}.lqp-previews[data-preview-background=white] .lqp-stage{background:#fff}.lqp-previews[data-preview-background=black] .lqp-stage{background:#111}.lqp-stage img{object-fit:contain;background:0 0;width:100%;height:auto;max-height:330px;display:block}.lqp-preview-footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-size:12px;display:flex}.lqp-backgrounds{align-items:center;gap:10px;display:flex}.lqp-backgrounds button{cursor:pointer;border:1px solid #879080;border-radius:50%;width:28px;height:28px;padding:0}.lqp-backgrounds [data-png-quality-background=checker]{background:conic-gradient(#c7cfc5 25%, #f2f4ef 0 50%, #c7cfc5 0 75%, #f2f4ef 0);background-size:12px 12px}.lqp-backgrounds [data-png-quality-background=white]{background:#fff}.lqp-backgrounds [data-png-quality-background=black]{background:#111}.lqp-backgrounds button[aria-pressed=true]{outline:2px solid var(--lqp-accent);outline-offset:2px}.lqp-controls{border-left:1px solid var(--line);min-width:0;padding:20px}.lqp-control-heading{align-items:center;gap:8px;margin-bottom:18px;display:flex}.lqp-control-heading h2{font-size:var(--fs-base);margin:0;font-weight:600}.lqp-format{color:var(--lqp-accent);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;margin-left:auto}.lqp-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px;display:grid}.lqp-presets .preset{max-width:none;min-height:60px;padding:10px 8px;line-height:1.3}.lqp-presets [data-preset=low-res]{background:linear-gradient(135deg, #ffffffb8, #ffffff1f), conic-gradient(from 90deg, #dca897 25%, #edcda5 0 50%, #b7c9ce 0 75%, #d6bcae 0) 0 0 / 28px 28px}.lqp-control+.lqp-control{margin-top:20px}.lqp-control label{font-size:var(--fs-sm);justify-content:space-between;gap:10px;margin-bottom:9px;display:flex}.lqp-control output{color:var(--lqp-accent);font-variant-numeric:tabular-nums;white-space:nowrap}.lqp-control input{width:100%;accent-color:var(--lqp-accent);margin:0}.lqp-control p,.lqp-export p{color:var(--muted);margin:8px 0 0;font-size:12px;line-height:1.55}.lqp-export{border-top:1px solid var(--line);text-align:center;gap:12px;margin-top:24px;padding-top:20px;display:grid}.lqp-action-slot{min-width:0}.lqp-action-bar{background:var(--panel)}.lqp-export-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.lqp-export-actions .button{white-space:normal;flex-direction:column;gap:5px;min-width:0;min-height:62px;padding:9px 5px;font-size:12px;line-height:1.2}.lqp-export-actions .icon{flex-shrink:0;width:17px;height:17px}.lqp-export-actions .mobile-export-actions>.button{width:100%}.lqp-export p.lqp-export-status{overflow-wrap:anywhere;margin:8px 0 0}.lqp-export-status:empty{display:none}.lqp-tool [hidden]{display:none!important}.lqp-text-button{min-height:36px;color:var(--ink);font:inherit;font-size:var(--fs-xs);text-underline-offset:4px;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;padding:4px 0;text-decoration:underline;display:inline-flex}.lqp-text-button:hover{color:var(--link)}.lqp-tool button:disabled{opacity:.5;cursor:not-allowed}.lqp-message{border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs);margin:0;padding:12px 18px;line-height:1.5}.lqp-message.is-error{color:var(--danger)}.lqp-guide-nav{border-block:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:0 24px;margin-top:28px;padding:8px 0;display:flex}.lqp-guide-nav a{min-height:44px;color:var(--ink);font-size:var(--fs-sm);text-underline-offset:4px;align-items:center;display:inline-flex}.lqp-guide-nav a:hover{color:var(--link)}.lqp-guide-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}.lqp-page>.seo-section,.lqp-page .seo-section h2[id]{scroll-margin-top:12px}.lqp-use-cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px;display:grid}.lqp-use-case{border-top:2px solid var(--line-strong);min-width:0;padding-top:18px}.lqp-use-case h3,.lqp-transparency-guide h3{font-size:var(--fs-lg);margin:0 0 12px;font-weight:600;line-height:1.35}.lqp-use-case p,.lqp-transparency-guide p,.lqp-guide-note{color:var(--muted);font-size:var(--fs-sm);margin:0;line-height:1.75}.lqp-use-case p.lqp-use-tip{border-left:2px solid var(--lqp-accent);background:var(--panel);margin-top:16px;padding:12px 14px}.lqp-use-tip strong,.lqp-guide-note strong{color:var(--ink);font-weight:600}.lqp-effect-table{table-layout:fixed;border-collapse:collapse;width:100%;font-size:var(--fs-sm);text-align:left;line-height:1.65}.lqp-effect-table th,.lqp-effect-table td{border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;padding:16px}.lqp-effect-table thead th{background:var(--panel);font-weight:600}.lqp-effect-table th:first-child{width:16%}.lqp-effect-table th:nth-child(2){width:32%}.lqp-effect-table tbody th{font-weight:600}.lqp-effect-table td{color:var(--muted)}.lqp-guide-note{max-width:90ch;padding-top:4px}.lqp-transparency-guide{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;display:grid}.lqp-transparency-guide article{border-top:1px solid var(--line-strong);min-width:0;padding-top:16px}.lqp-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:22px 0 0;padding:0;list-style:none;display:grid}.lqp-steps li{border-top:1px solid var(--line-strong);padding-top:16px}.lqp-steps li>span{color:var(--lqp-accent);font-size:var(--fs-sm)}.lqp-steps h3{font-size:var(--fs-base);margin:12px 0 8px}.lqp-steps p,.lqp-explainer p{color:var(--muted);font-size:var(--fs-sm);margin:8px 0 0;line-height:1.7}.lqp-example-section{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:32px;display:grid}.lqp-example-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.lqp-example-pair figure{min-width:0;margin:0}.lqp-example-image{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.lqp-example-image img{width:100%;height:auto;display:block}.lqp-example-pair figcaption{color:var(--muted);font-size:var(--fs-xs);margin-top:10px}.lqp-explainer{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;display:grid}.lqp-explainer h2{font-size:var(--fs-xl);margin:0 0 12px}.lqp-explainer h3{font-size:var(--fs-lg);margin:0 0 12px}.lqp-related{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.lqp-related>a{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);padding:16px;text-decoration:none;display:block}.lqp-related>a:hover{border-color:var(--line-strong);background:var(--surface-2)}.lqp-related h3{font-size:var(--fs-base);margin:0 0 8px}.lqp-related p{color:var(--muted);font-size:var(--fs-sm);margin:0;line-height:1.5}@media (width<=960px){.lqp-editor{grid-template-columns:minmax(0,1fr) 280px}.lqp-previews{gap:10px;padding:12px}.lqp-stage{min-height:250px;padding:8px}}@media (width<=760px){.lqp-toolbar{flex-wrap:wrap;gap:8px;padding:14px}.lqp-editor{grid-template-columns:minmax(0,1fr)}.lqp-controls{border-top:1px solid var(--line);border-left:0}.lqp-stage{min-height:180px}.lqp-previews figcaption{padding:10px 8px;font-size:12px}.lqp-previews figcaption span+span{font-size:11px}.lqp-preview-footer{padding:14px}.lqp-presets .preset{font-size:var(--fs-sm)}.lqp-export-actions .button{flex-direction:row;gap:7px;min-height:48px}.lqp-steps,.lqp-example-section,.lqp-explainer,.lqp-related{grid-template-columns:minmax(0,1fr);gap:22px}.lqp-use-cases,.lqp-transparency-guide{grid-template-columns:minmax(0,1fr);gap:24px}.lqp-effect-table,.lqp-effect-table tbody{display:block}.lqp-effect-table thead{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lqp-effect-table tr{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:16px;padding:16px;display:block}.lqp-effect-table tbody tr:last-child{margin-bottom:0}.lqp-effect-table tbody th,.lqp-effect-table td{border:0;width:auto;padding:0;display:block}.lqp-effect-table tbody th:first-child{width:auto}.lqp-effect-table tbody th{font-size:var(--fs-base);margin-bottom:14px}.lqp-effect-table td+td{margin-top:14px}.lqp-effect-table td:before{color:var(--ink);font-size:var(--fs-xs);content:attr(data-label);margin-bottom:3px;font-weight:600;display:block}.lqp-hero h1{font-size:clamp(32px,8vw,46px)}.lqp-intro{font-size:var(--fs-base)}}@media (width<=720px){.lqp-export-actions .desktop-copy-action{display:none}.lqp-export{margin-top:16px;padding-top:12px;display:block}.lqp-action-slot{min-height:0}.lqp-export>.lqp-text-button{min-height:44px}.lqp-export>p{margin-top:6px}.lqp-action-bar{padding:10px 0}.lqp-action-bar.is-docked{z-index:100;padding:10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));border-top:1px solid var(--line-strong);box-shadow:0 -5px 20px var(--shadow);position:fixed;bottom:0;left:0;right:0}.lqp-mobile-export-docked .back-to-top{visibility:hidden;pointer-events:none}.lqp-controls{scroll-margin-bottom:100px}.lqp-control input{scroll-margin-block:100px 140px}}@media (width<=360px){.lqp-stage{min-height:135px}.lqp-controls{padding:16px}.lqp-presets .preset{padding-inline:7px;font-size:12px}.lqp-export-actions .button{font-size:11px}}
