:root { --guide-ink:#1d1d1f; --guide-paper:#f5f5f7; --guide-line:#d2d2d7; --guide-blue:#0071e3; --guide-dark:#1d1d1f; --guide-muted:#6e6e73; font-family:"SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--guide-ink); background:var(--guide-paper); }
button,input { font:inherit; }
button { cursor:pointer; }
.guide-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.guide-header { display:flex; align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 48px)); height:52px; margin:0 auto; }
.guide-brand,.guide-back { color:var(--guide-ink); font-size:14px; font-weight:650; text-decoration:none; }.guide-back { color:var(--guide-blue); font-weight:500; }
.guide-hero { padding:72px 0 100px; background:#fff; }.guide-hero-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:58px; }.guide-eyebrow { margin:0 0 13px; color:#6e6e73; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.guide-hero h1,.guide-section-heading h2,.guide-catalog-heading h2,.detail-copy h2 { margin:0; font-weight:650; letter-spacing:-.07em; }.guide-hero h1 { font-size:clamp(50px,6vw,82px); line-height:.95; }.guide-hero h1 em { color:var(--guide-blue); font-style:normal; }.guide-hero-copy>p:not(.guide-eyebrow) { max-width:370px; margin:22px 0 27px; color:var(--guide-muted); font-size:17px; line-height:1.55; }.guide-button { display:inline-flex; padding:12px 18px; border-radius:999px; background:var(--guide-dark); color:#fff; font-size:14px; font-weight:600; text-decoration:none; gap:11px; }.guide-hero-image { position:relative; min-height:445px; margin:0; overflow:hidden; border-radius:30px; background:#d8d8dc; }.guide-hero-image img,.major-card>img,.detail-image img { width:100%; height:100%; object-fit:cover; }.guide-hero-image>img { position:absolute; inset:0; }.guide-hero-image:after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.69)); content:""; }.guide-hero-image figcaption { position:absolute; z-index:1; bottom:28px; left:29px; display:grid; color:#fff; gap:8px; }.guide-hero-image figcaption span { font-size:11px; font-weight:700; letter-spacing:.08em; }.guide-hero-image figcaption strong { font-size:25px; line-height:1.13; letter-spacing:-.045em; }
.guide-intro { padding:37px 0; border-top:1px solid #e5e5e7; border-bottom:1px solid #e5e5e7; background:#fff; }.guide-intro>div { display:grid; grid-template-columns:210px 1fr; gap:25px; }.guide-intro p:last-child { max-width:500px; margin:0; font-size:16px; line-height:1.55; }.guide-majors { padding:110px 0; }.guide-section-heading { display:grid; gap:18px; margin-bottom:43px; }.guide-section-heading h2,.guide-catalog-heading h2 { font-size:clamp(43px,5vw,70px); line-height:.95; }.major-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:14px; }.major-card { position:relative; display:flex; overflow:hidden; padding:20px; border:0; border-radius:25px; background:#d8d8dc; color:#fff; text-align:left; isolation:isolate; }.major-card>img { position:absolute; z-index:-2; inset:0; transition:transform .5s ease; }.major-card:hover>img { transform:scale(1.05); }.major-card-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.75)); }.major-card-index { position:absolute; top:18px; left:20px; font-size:11px; font-weight:700; letter-spacing:.1em; }.major-card-copy { display:flex; align-self:flex-end; flex-direction:column; }.major-card-copy strong { font-size:23px; letter-spacing:-.04em; }.major-card-copy small { max-width:250px; margin-top:5px; font-size:11px; line-height:1.4; }.major-card-icons { display:flex; margin-top:10px; gap:5px; }.major-card .app-icon { width:25px; height:25px; border:1px solid rgba(255,255,255,.4); }.major-card-1 { grid-column:span 2; grid-row:span 2; }.major-card-1 .major-card-copy strong { font-size:34px; }.major-card-2,.major-card-5,.major-card-8 { grid-column:span 2; }
.major-detail { padding:62px 0 94px; background:var(--guide-dark); color:#fff; }.detail-back { padding:0; border:0; background:transparent; color:#d2d2d7; font-size:14px; }.detail-spotlight { display:grid; grid-template-columns:1fr 1fr; min-height:440px; margin-top:25px; overflow:hidden; border-radius:30px; background:#2c2c2e; }.detail-image { min-height:360px; }.detail-copy { display:flex; align-items:center; justify-content:center; padding:48px; flex-direction:column; }.detail-copy .guide-eyebrow { width:min(100%,15.5ch); color:#b3bdc9; }.detail-copy h2 { width:min(100%,15.5ch); max-width:15.5ch; font-size:clamp(29px,2.55vw,43px); line-height:1.2; text-wrap:balance; }.detail-app-label { margin:38px 0 16px; color:#c6c6c9; font-size:14px; font-weight:650; }.detail-app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.guide-app-card { position:relative; display:grid; grid-template-columns:auto 1fr; min-height:145px; align-items:start; padding:21px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#2c2c2e; color:#fff; text-align:left; gap:16px; }.guide-app-card:hover { background:#39393b; }.app-icon { display:block; width:58px; height:58px; border-radius:22%; object-fit:cover; }.guide-app-card span { display:flex; padding-right:18px; flex-direction:column; color:#c6c6c9; font-size:13px; line-height:1.5; }.guide-app-card strong { margin-bottom:6px; color:#fff; font-size:18px; }.guide-app-card i { position:absolute; top:17px; right:18px; color:#a7a7ac; font-style:normal; }
.guide-apps { padding:120px 0; background:#fff; }.guide-catalog-heading { display:grid; grid-template-columns:1fr .65fr; align-items:end; gap:55px; margin-bottom:39px; }.guide-catalog-heading>p { max-width:350px; margin:0 0 5px; color:var(--guide-muted); font-size:15px; line-height:1.55; }.guide-search { display:flex; height:67px; align-items:center; padding:0 20px; border:1px solid var(--guide-line); border-radius:19px; background:var(--guide-paper); gap:13px; }.guide-search span { font-size:26px; transform:rotate(-20deg); }.guide-search input { width:100%; border:0; background:transparent; font-size:17px; outline:0; }.guide-result-count { margin:22px 0 13px; color:var(--guide-muted); font-size:13px; }.app-results { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }.app-results .guide-app-card { min-height:108px; border-color:#e5e5e7; background:#fff; color:var(--guide-ink); }.app-results .guide-app-card:hover { background:#f8f8fa; }.app-results .guide-app-card strong { color:var(--guide-ink); }.app-results .guide-app-card span { color:var(--guide-muted); }.app-results .app-icon { width:48px; height:48px; }
.app-drawer-layer { position:fixed; z-index:10; inset:0; }.app-drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }.app-drawer { position:absolute; top:0; right:0; width:min(490px,100%); height:100%; overflow:auto; padding:42px 34px; background:#fff; box-shadow:-24px 0 64px rgba(0,0,0,.18); }.drawer-close { position:absolute; top:17px; right:17px; width:34px; height:34px; border:0; border-radius:50%; background:#eeeef0; font-size:25px; line-height:1; }.app-drawer>.app-icon { width:72px; height:72px; margin-bottom:24px; }.app-drawer h2 { margin:0 0 15px; font-size:38px; letter-spacing:-.055em; }.drawer-lead { color:#515154; font-size:18px; line-height:1.5; }.app-drawer section { margin-top:28px; border-top:1px solid #e5e5e7; padding-top:20px; }.app-drawer h3 { margin:0 0 11px; font-size:15px; }.app-drawer li { margin:0 0 8px; color:#515154; font-size:14px; line-height:1.5; }.app-drawer blockquote { margin:0; color:#515154; font-size:15px; line-height:1.6; }.drawer-link { display:inline-block; margin-top:27px; color:var(--guide-blue); font-size:15px; text-decoration:none; }
@media (max-width:850px) { .guide-hero-layout,.detail-spotlight,.guide-catalog-heading { grid-template-columns:1fr; }.guide-hero { padding-top:34px; }.guide-hero-image { min-height:390px; }.guide-intro>div { grid-template-columns:1fr; gap:6px; }.major-grid { grid-template-columns:repeat(2,1fr); }.major-card,.major-card-1,.major-card-2,.major-card-5,.major-card-8 { grid-column:span 1; grid-row:span 1; }.major-card-1 .major-card-copy strong { font-size:23px; }.detail-copy { padding:32px 25px 38px; }.detail-copy h2 { font-size:31px; }.app-results { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .guide-shell,.guide-header { width:min(100% - 32px,1180px); }.guide-header { height:48px; }.guide-back { font-size:12px; }.guide-hero { padding:38px 0 58px; }.guide-hero h1 { font-size:51px; }.guide-hero-image { min-height:320px; margin-top:4px; border-radius:23px; }.guide-hero-image figcaption { bottom:20px; left:20px; }.guide-hero-image figcaption strong { font-size:21px; }.guide-majors,.guide-apps { padding:76px 0; }.major-grid { grid-auto-rows:210px; gap:9px; }.major-card { padding:15px; border-radius:18px; }.major-card-index { top:14px; left:15px; }.major-card-copy strong { font-size:19px; }.major-card-copy small { font-size:10px; }.detail-spotlight { border-radius:22px; }.detail-image { min-height:270px; }.detail-copy h2 { max-width:14.5ch; font-size:30px; }.detail-app-grid,.app-results { grid-template-columns:1fr; }.guide-app-card { min-height:135px; }.guide-catalog-heading { gap:18px; }.guide-catalog-heading h2,.guide-section-heading h2 { font-size:48px; }.app-drawer { padding:42px 24px; } }