.guide-head{padding-block:clamp(56px,7vw,104px) 0}.guide-head .prose h1{letter-spacing:-.032em;font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);font-weight:600}.guide-head .lede{margin-top:20px;font-size:1.08rem}.guide-shot{justify-items:center;gap:14px;margin:clamp(40px,5vw,64px) auto 0;display:grid}.guide-shot-row{justify-content:center;align-items:flex-end;gap:clamp(20px,4vw,48px);width:100%;display:flex}.guide-shot-row>picture{flex:0 auto;min-width:0;display:block}.guide-shot picture>img{width:100%;height:auto}.guide-shot--tv,.guide-shot--mac{width:min(760px,100vw - 32px)}.guide-shot--ipad{width:min(700px,100vw - 32px)}.guide-shot--vision{width:min(900px,100vw - 32px)}.guide-shot--vision picture>img{border-radius:18px}.guide-shot--iphone{width:min(250px,56vw)}.guide-shot--duo{width:min(320px,70vw)}.guide-shot--duo-open{width:min(700px,100vw - 32px)}.guide-shot--duo-half{width:min(640px,100vw - 32px)}.guide-shot--duo-stand{width:min(420px,80vw)}.guide-shot--pair{width:min(560px,100vw - 32px)}.guide-shot--pair picture{flex-basis:250px}.guide-shot--stack .guide-shot-row{flex-direction:column;align-items:stretch;gap:clamp(28px,4vw,44px)}.guide-shot--widget{width:min(560px,100vw - 32px)}.guide-shot--widget .guide-shot-row{border-radius:var(--r-lg);background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--violet) 20%,transparent),transparent 62%), radial-gradient(80% 110% at 100% 100%,color-mix(in srgb,var(--cyan) 14%,transparent),transparent 60%), var(--raised);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(26px,4vw,44px) 22px}.guide-shot--widget picture{flex-basis:460px}.guide-shot--widget picture>img{filter:drop-shadow(0 14px 26px #00000047)}.guide-body{padding-top:clamp(48px,6vw,72px)}.guide-part+.guide-part{margin-top:clamp(56px,7vw,96px)}.guide-body .prose h2{letter-spacing:-.016em;margin-top:0;font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem)}.guide-more{flex-wrap:wrap;gap:12px 28px;margin:2em 0 0;padding:0;list-style:none;display:flex}.guide-more li{margin:0}.guide-more .text-link{color:var(--text)}@media (hover:hover) and (pointer:fine){.guide-more .text-link:hover span{transform:translate(3px)}}.guide-others{padding-top:clamp(64px,8vw,112px)}.guide-others-inner{width:min(1040px,100vw - 32px);margin-inline:auto}.guide-others h2{letter-spacing:-.016em;font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem)}.guide-others ul{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none;display:grid}.guide-others a{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);gap:6px;height:100%;padding:20px 52px 20px 22px;text-decoration:none;transition:border-color .18s,background-color .18s;display:grid;position:relative}.guide-card-name{color:var(--text);font-family:Archivo,sans-serif;font-size:1.02rem;font-weight:650}.guide-card-line{color:var(--muted);font-size:.9rem;line-height:1.45}.guide-card-arrow{inset-inline-end:22px;color:var(--dim);transition:translate .18s cubic-bezier(.23,1,.32,1),color .18s;position:absolute;top:50%;translate:0 -50%}@media (hover:hover) and (pointer:fine){.guide-others a:hover{border-color:var(--line-2)}.guide-others a:hover .guide-card-arrow{color:var(--text);translate:4px -50%}}.guide-others a:active{background:color-mix(in srgb,var(--text) 4%,var(--panel))}@media (prefers-reduced-motion:reduce){.guide-card-arrow,.guide-more .text-link span{transition:none}}