.tutorials{background:#fff}.tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.tutorial-card{min-height:250px;padding:27px;border:1px solid var(--line);background:#f8fbfd;display:flex;flex-direction:column;transition:.25s}.tutorial-card:hover{border-color:#75bdec;transform:translateY(-4px);box-shadow:0 16px 40px rgba(24,61,92,.08)}.tutorial-card span{font:600 10px var(--mono);letter-spacing:.08em;color:var(--blue)}.tutorial-card h3{font-size:19px;line-height:1.55;margin:22px 0 10px}.tutorial-card p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}.tutorial-card b{font-size:12px;color:#1576b9;margin-top:auto;padding-top:20px}.tutorial-featured{grid-column:span 2;background:var(--ink);color:#fff;border-color:var(--ink)}.tutorial-featured p{color:#9bb1c4}.tutorial-featured b{color:var(--cyan)}.download-note{margin-top:16px;padding:14px 18px;background:#0b1d2e;border-left:3px solid var(--cyan);display:flex;gap:15px;font-size:11px;line-height:1.7;color:#829db2}.download-note b{color:#dcefff;white-space:nowrap}
.content-page{background:#f4f8fb;min-height:100vh}.page-hero{background:var(--ink);color:#fff;padding:75px 0 65px}.breadcrumb{font:10px var(--mono);color:#7190a7;margin-bottom:22px}.breadcrumb a{color:#8ecdf6}.page-hero h1{max-width:900px;font-size:44px;line-height:1.3;margin:0 0 17px}.page-hero p{max-width:760px;color:#9db3c5;line-height:1.8}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:35px;padding:55px 0 85px}.article-body,.article-side,.simple-body{background:#fff;border:1px solid var(--line)}.article-body{padding:45px 52px}.article-body h2{font-size:25px;margin:38px 0 14px}.article-body h2:first-child{margin-top:0}.article-body h3{font-size:18px;margin:28px 0 10px}.article-body p,.article-body li,.simple-body p,.simple-body li{font-size:14px;line-height:2;color:#50677b}.article-body code{font:12px var(--mono);background:#eaf5fc;color:#156da9;padding:3px 6px}.article-body pre{background:#071a2a;color:#84d9ff;padding:18px;overflow:auto;font:12px/1.8 var(--mono)}.article-note{border-left:3px solid var(--blue);background:#eef7fd;padding:14px 17px!important}.article-side{align-self:start;padding:25px;position:sticky;top:95px}.article-side h3{font-size:15px;margin:0 0 17px}.article-side a{display:block;border-top:1px solid var(--line);padding:13px 0;font-size:12px;line-height:1.55;color:#446177}.article-side .side-download{background:var(--blue);color:#fff;text-align:center;border:0;margin-top:18px;padding:12px}.article-meta{display:flex;gap:18px;color:#7893a8;font:10px var(--mono)}.simple-wrap{padding:55px 0 85px}.simple-body{padding:45px 52px;max-width:900px;margin:auto}.simple-body h2{margin:32px 0 10px}.simple-body h2:first-child{margin-top:0}
@media(max-width:1050px){.article-layout{grid-template-columns:1fr}.article-side{position:static}.tutorial-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.tutorial-grid{grid-template-columns:1fr}.tutorial-featured{grid-column:auto}.tutorial-card{min-height:220px}.article-body,.simple-body{padding:30px 22px}.page-hero{padding:55px 0}.page-hero h1{font-size:33px}.article-layout{padding:35px 0 60px}.article-meta{flex-wrap:wrap}.download-note{display:block}.download-note b{display:block;margin-bottom:5px}}