/* Experimental Mac tour: a single live sidebar replaces the captured sidebar. */
.tour-layout{display:block}
.mac-shell{--sidebar:208px;position:relative;overflow:hidden;border:1px solid #ffb16b35;border-radius:22px;background:#202023;box-shadow:0 20px 60px #0003}
.mac-sidebar{position:absolute;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;background:#1d1d20;border-right:1px solid #37373b}
.mac-traffic{display:flex;gap:8px;padding:20px 18px 18px;flex:none}
.mac-traffic i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.mac-traffic i:nth-child(2){background:#febc2e}.mac-traffic i:nth-child(3){background:#28c840}
#section-nav{display:block;border:0;padding:0 10px 18px;overflow:auto;scrollbar-width:thin;flex:1;min-height:0}
#section-nav h3{margin:18px 10px 6px;font-size:10px}#section-nav h3:first-child{margin-top:0}
#section-nav .section-button{padding:8px 10px;font-size:13px;margin:1px 0;gap:8px;line-height:1.25}
.mac-shell .screen-button{display:block;position:relative;width:calc(100% - var(--sidebar));margin:0 0 0 var(--sidebar);padding:0;border:0;border-radius:0;aspect-ratio:2196 / 1816;overflow:hidden;background:#202023;box-shadow:none;backdrop-filter:none}
.mac-shell .screen-button img{display:block;width:119.5811%;max-width:none;height:auto;margin-left:-19.5811%;border-radius:0}
.mac-shell .screen-button:focus-visible{outline-offset:-4px}
#feature .thumbnails{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
#feature .thumbnail{width:160px}#feature .thumbnail span{min-height:0}
@media(max-width:1000px){.mac-shell{--sidebar:180px}#section-nav .section-button{font-size:12px;padding:7px 8px}}
@media(max-width:800px){.mac-sidebar{display:none}.mac-shell{--sidebar:0px;border-radius:14px}.mobile-picker{display:block}.mac-shell .screen-button{width:100%;margin:0}#feature .thumbnail{width:calc(50% - 6px)}}

/* More breathing room around the app window. */
.mac-surround{padding:22px;border:1px solid #ffb16b30;border-radius:45px;background:radial-gradient(ellipse at 20% 0%,#ffad6340,transparent 65%),linear-gradient(135deg,#ff942f20,#ff942f0a);box-shadow:inset 0 1px 0 #ffe0c018,0 14px 40px #00000018;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.hero-image,.ios-shot button{padding:20px}
.ios-shot button{border-radius:39px}
@media(max-width:800px){.mac-surround{padding:14px;border-radius:29px}}
@media(max-width:600px){.hero-image,.ios-shot button{padding:14px}.ios-shot button{border-radius:33px}}

/* Stronger labels in the integrated Mac sidebar. */
#section-nav .section-button{font-weight:600}
#section-nav h3{font-weight:700}

#section-nav .menu-icon{display:block;width:18px;height:18px;flex:0 0 18px;background:currentColor;mask:var(--menu-icon) center/contain no-repeat;-webkit-mask:var(--menu-icon) center/contain no-repeat}
#section-nav .section-button{gap:10px}

/* Native window chrome, with a decorative sidebar control. */
.mac-traffic{align-items:center}
.mac-traffic i{width:12px;height:12px;flex:0 0 12px;background:#ff5f57}
.mac-traffic i:nth-child(2){background:#febc2e}
.mac-traffic i:nth-child(3){background:#28c840}
.sidebar-decoration{margin-left:auto;width:20px;height:20px;color:#d2d2d4;display:block}
.sidebar-decoration svg{display:block;width:100%;height:100%}
.mac-shell{border:0;border-radius:14px}
.mac-sidebar{border-right:0}
.mac-shell .screen-button{aspect-ratio:auto;overflow:visible;background:transparent}
.mac-shell .screen-button img{width:100%;height:auto;margin:0;max-width:100%;border:0}

/* White sidebar labels in every selection state. */
#section-nav .section-button,#section-nav .section-button:hover,#section-nav .section-button[aria-pressed=true],#section-nav h3{color:#fff}