@font-face{font-family:Montserrat;src:url('/fonts/montserrat-400.woff2')}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#14171c;color:#eff0f2;font:16px/1.65 system-ui,sans-serif}header,main,footer{max-width:1240px;margin:auto;padding:0 36px}header{height:105px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252a31}a{color:inherit;text-decoration:none}a:hover{color:#a3c8e8}a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #a3c8e8;outline-offset:5px}.brand{font:13px Montserrat,sans-serif;letter-spacing:3px}nav{display:flex;gap:30px;font-size:13px;color:#b8bec7}.eyebrow{font:10px Montserrat,sans-serif;letter-spacing:2px;color:#a8afb9;margin:38px 0 28px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:35px;align-items:center;padding:25px 0 54px}.kicker{color:#a3c8e8;font-size:15px}h1{font:clamp(34px,4.4vw,60px)/1.18 Montserrat,sans-serif;letter-spacing:-2px;margin:15px 0 26px}h1 em{font-style:normal;color:#929ba8}.intro{max-width:500px;color:#c1c7cf;font-size:18px}.tags{display:flex;gap:20px;font-size:12px;color:#a3c8e8;margin-top:28px}.drawing svg{width:100%}.drawing p{text-align:center;font-size:9px;letter-spacing:1.8px;color:#8b95a2}.setup{display:grid;grid-template-columns:1fr 1.2fr 1fr auto;gap:24px;align-items:center;border-block:1px solid #252a31;padding:28px 0}label{display:block;font-size:12px;color:#aab2be}select{display:block;width:100%;padding:12px 24px;margin:7px 0;background:transparent;border:0;border-bottom:1px solid #454e5a;border-radius:0;color:#f1f2f3;font:14px system-ui;min-height:46px}.compat strong{font-size:14px;color:#a3c8e8}.compat p{font-size:12px;margin:6px 0;color:#abb3bf}.primary{display:inline-block;background:#a3c8e8;color:#16181c;padding:14px 22px;border-radius:5px;font-size:14px;font-weight:600}.primary:hover{background:#c9e1f4;color:#16181c}.small{font-size:12px;color:#a5aebb;line-height:1.65}.small a{text-decoration:underline}.editorial{display:grid;grid-template-columns:1fr 1.3fr;gap:90px;margin:84px 0 50px}.editorial .eyebrow{margin-top:0}h2{font:32px/1.3 Montserrat,sans-serif;letter-spacing:-.7px}p{color:#c1c7cf}h3{font-size:16px;font-weight:500}.scenes{display:grid;grid-template-columns:1fr 1fr;gap:24px}.scenes a{overflow:hidden}.scenes img{width:100%;height:290px;object-fit:cover;border-radius:6px;display:block;background:#24282f}.scenes span{display:flex;justify-content:space-between;font-size:13px;margin-top:12px}.scenes b{font-weight:400;color:#a3c8e8}dl{margin:0;display:grid;grid-template-columns:1fr 1fr}dt,dd{padding:13px 0;border-bottom:1px solid #252a31;font-size:14px}dt{color:#aab3be}dd{margin:0;text-align:right}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-block:1px solid #252a31;padding:28px 0}.notes p,.notes a{font-size:14px}.notes a{color:#a3c8e8}.buying label{max-width:290px}.store{display:flex;justify-content:space-between;padding:22px 0;border-bottom:1px solid #252a31}.store span{font-size:12px;color:#a3c8e8}.faq{max-width:800px;margin:85px 0}details{border-bottom:1px solid #252a31;padding:18px 0}summary{cursor:pointer}details p{font-size:14px}footer{padding-top:30px;padding-bottom:35px;border-top:1px solid #252a31;display:flex;justify-content:space-between;align-items:center;font-size:12px}.skip{position:absolute;left:20px;top:-80px;background:#14171c;padding:12px}.skip:focus{top:0}@media(max-width:850px){.setup{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr}.drawing{max-width:470px;margin:auto}.editorial{gap:35px}.notes{gap:20px}.scenes img{height:220px}}@media(max-width:560px){header,main,footer{padding-left:22px;padding-right:22px}header{height:82px}nav a:not(:last-child){display:none}.hero{padding-top:0}.eyebrow{font-size:9px}.setup{gap:16px}.compat{grid-column:1/-1}.primary{text-align:center;grid-column:1/-1}.editorial{grid-template-columns:1fr;gap:16px;margin-top:55px}.scenes,.notes{grid-template-columns:1fr}.scenes img{height:260px}.scenes span{gap:8px}.store{gap:18px}footer{flex-wrap:wrap;gap:15px}h2{font-size:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
select option{background:#14171c;color:#eff0f2}#lensViewer{height:460px;width:100%;cursor:grab;touch-action:none;border-radius:8px}#lensViewer:active{cursor:grabbing}#lensViewer:focus-visible{outline:2px solid #a3c8e8;outline-offset:3px}#lensViewer canvas{display:block;width:100%;height:100%}.viewer-tools{display:flex;justify-content:center;align-items:center;gap:16px;color:#a1adbc;font-size:9px;letter-spacing:1px}.viewer-tools button{background:transparent;border:0;border-bottom:1px solid #454e5a;color:#bdcbd9;padding:8px;cursor:pointer}.viewer-tools button:focus-visible{outline:2px solid #a3c8e8}.drawing{width:100%}@media(max-width:560px){#lensViewer{height:390px}}

.viewer-tools{min-height:40px;text-align:center;transition:opacity .45s ease;pointer-events:none}.viewer-tools.used{opacity:0}#viewerStatus[hidden]{display:none}@media(prefers-reduced-motion:reduce){.viewer-tools{transition:none}}

/* Align picker values to their labels; reserve space only for the chevron. */
select{padding-left:0;padding-right:24px}
/* Additional breathing room at each section boundary. */
main>section:not(.hero){padding-top:48px}
main>.setup,main>.notes{padding-top:76px}
#specs>dl{padding-top:30px}
@media(max-width:560px){#specs>dl{padding-top:0}}

/* Align introductory copy with the heading beneath its eyebrow. */
.editorial:not(#specs):not(.buying)>div+div{padding-top:28px}
@media(max-width:560px){.editorial:not(#specs):not(.buying)>div+div{padding-top:0}}

.related{margin:72px 0}.related nav{display:grid;grid-template-columns:1fr 1fr;gap:24px}.related a{padding:22px 0;border-bottom:1px solid #252a31;color:#a3c8e8}.related small{display:block;color:#a5aebb}@media(max-width:560px){.related nav{grid-template-columns:1fr}.hero h1{overflow-wrap:anywhere}}

/* Shared retailer buttons across every lens guide. */
.store{align-items:center;gap:16px;min-height:52px;padding:14px 20px;margin-bottom:12px;border:1px solid transparent;border-radius:6px;background:#a3c8e8;color:#14171c;font-size:15px;font-weight:600}
.store span{color:#263d51;text-align:right;font-weight:400}
.store:hover{background:#c9e1f4;color:#14171c}
.store:focus-visible{outline:2px solid #d8ecff;outline-offset:4px}

/* Text buttons fit their labels instead of stretching across their parent. */
.primary,.buying .store{width:fit-content;max-width:100%;padding-inline:24px;justify-self:start;align-self:flex-start}
.buying .store{display:flex;justify-content:flex-start;gap:16px}
.buying .store span{min-width:0;text-align:left}

/* Both buying notes share a row, independently of the controls above. */
.buying{row-gap:16px}
.buying>.buying-market-note,.buying>.buying-retailer-note{margin:0;align-self:center}
.buying>.buying-market-note{grid-column:1;grid-row:2}
.buying>.buying-retailer-note{grid-column:2;grid-row:2}
@media(max-width:560px){
.buying>div:first-child{grid-row:1}
.buying>.buying-market-note{grid-column:1;grid-row:2}
.buying>div:nth-child(2){grid-row:3;margin-top:16px}
.buying>.buying-retailer-note{grid-column:1;grid-row:4}
}

/* The setup divider closes the entire selection and comparison block. */
.setup{border-bottom:0}
main>p:has(#compare)+p.small{padding-bottom:32px;border-bottom:1px solid #252a31}

/* Stacked actions share the widest intrinsic button width, not the column. */
.buy-buttons{display:grid;width:max-content;max-width:100%;gap:12px}
.buy-buttons #stores{display:contents}
.buying .buy-buttons .store{width:auto;max-width:100%;justify-self:stretch;margin-bottom:0}