.listing-guide{container-type:inline-size;max-width:896px;min-width:0}
.listing-guide *{box-sizing:border-box;min-width:0}
.listing-guide header h1{font-size:clamp(26px,3vw,38px);line-height:1.45}
.listing-guide .listing-intro{font-size:18px;line-height:1.8;color:#f1f5f9}
.listing-guide .listing-contents{display:flex;flex-wrap:wrap;gap:16px 24px;padding:20px 0;margin-bottom:32px;border-block:1px solid var(--cu-a20,rgba(6,182,212,.2));font-size:14px}
.listing-guide a{overflow-wrap:anywhere}
.listing-guide a:hover{color:white}
.listing-guide a:focus-visible,.listing-table:focus-visible{outline:2px solid var(--cu-accent,#67e8f9);outline-offset:5px}
.listing-guide h2[id],.listing-guide h3[id]{scroll-margin-top:125px}
.listing-guide p{max-width:72ch}
.listing-guide ul,.listing-guide ol{list-style:revert;margin:24px 0 32px;padding-left:24px}
.listing-guide li{padding-left:4px;margin-bottom:12px}
.listing-guide .listing-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:32px 0 48px;align-items:start}
.listing-guide .listing-visual-note{font-size:14px;color:#cbd5e1;margin-top:32px}
.listing-guide .listing-figure{margin:0}
.listing-guide .listing-crop{position:relative;display:block;overflow:hidden;width:100%;margin:0 auto 18px;border-radius:12px;isolation:isolate}
.listing-guide .listing-content .listing-crop img{position:absolute;display:block;max-width:none;height:auto;margin:0;border-radius:0}
.listing-guide figcaption{font-size:14px;line-height:1.75;color:#cbd5e1}
.listing-guide .listing-quote{max-width:360px;margin:32px auto 44px}
.listing-guide .listing-quote img{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:16px}
.listing-guide .listing-table{max-width:100%;overflow-x:auto;margin:32px 0;scrollbar-width:thin}
.listing-guide .listing-table table{display:table;width:100%;min-width:590px;border-collapse:collapse;font-size:14px;line-height:1.7}
.listing-guide .listing-table th,.listing-guide .listing-table td{padding:16px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--cu-a20,rgba(6,182,212,.2))}
.listing-guide .listing-table th{color:#a5f3fc;font-weight:500}
.listing-guide .listing-table p{margin:0}
.listing-guide .listing-sources{margin-top:56px;font-size:15px}
.listing-guide .listing-next{margin-top:56px;padding-top:12px;border-top:1px solid var(--cu-a20,rgba(6,182,212,.2))}
.listing-guide .listing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:28px 0 40px}
.listing-guide .listing-actions .lg-btn{display:inline-flex;padding:14px 22px;align-items:center;justify-content:center;text-decoration:none;white-space:normal}
.listing-guide .listing-related{display:flex;flex-direction:column;gap:18px;font-size:15px}
@container(max-width:600px){.listing-guide .listing-examples{grid-template-columns:1fr}.listing-guide .listing-figure{max-width:360px;margin-inline:auto}.listing-guide h2{font-size:19px}.listing-guide .listing-table table{min-width:0}.listing-guide .listing-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.listing-guide .listing-table tr{display:block;margin-bottom:20px;border-bottom:1px solid var(--cu-a20,rgba(6,182,212,.2))}.listing-guide .listing-table td{display:block;border:0;padding:8px 0}.listing-guide .listing-table td:first-child{color:#a5f3fc;font-weight:500}.listing-guide .listing-table td:nth-child(2)::before{content:'Purpose: ';color:#f1f5f9}.listing-guide .listing-table td:nth-child(3)::before{content:'Best use: ';color:#f1f5f9}.listing-guide .listing-table td p{display:inline}}