@import"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Urbanist:wght@400;500;600;700;800&display=swap";:root{--bg: #f3f3f3;--panel: #ffffff;--panel-soft: #f7f7f7;--text: #111111;--muted: #4e4e4e;--line: #d8d8d8;--brand: #111111;--brand-deep: #000000;--shadow: 0 14px 36px rgba(0, 0, 0, .06);font-family:Urbanist,sans-serif;color:var(--text);background:linear-gradient(180deg,#fcfcfc,#f1f1f1);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin-top:0}code,pre{font-family:Source Code Pro,monospace}pre{margin:0;white-space:pre-wrap;word-break:break-word}.page{width:min(1380px,calc(100% - 28px));margin:0 auto;padding:20px 0 48px}.page-header{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.95fr);gap:20px;margin-bottom:22px}.page-header__main,.topic-nav__box,.lesson-section{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.page-header__main{padding:28px}.page-header__eyebrow,.topic-nav__label,.lesson-section__tag,.header-example__label,.ad-box__label,.code-card__label{color:var(--brand-deep);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.page-header h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1;margin-bottom:12px}.page-header__intro{color:var(--muted);font-size:1.05rem;line-height:1.75;max-width:60ch}.header-example{padding:22px;background:linear-gradient(180deg,#111,#252525);color:#f5f5f5;border:1px solid #111111;border-radius:22px;box-shadow:var(--shadow)}.header-example__label{color:#d9d9d9;margin-bottom:12px}.header-example pre,.header-example code{color:#f5f5f5}.tutorial-layout{display:grid;grid-template-columns:270px minmax(0,1fr) 320px;gap:20px;align-items:start}.topic-nav,.ad-sidebar{position:sticky;top:20px}.topic-nav__box{padding:18px}.topic-nav nav{display:grid;gap:8px;margin-top:14px}.topic-nav__link{display:block;padding:12px 14px;border-radius:14px;background:var(--panel-soft);border:1px solid #ececec;font-weight:600;transition:.2s ease}.topic-nav__link:hover{border-color:#111;background:#f0f0f0;color:#000}.lesson-content{display:grid;gap:18px}.lesson-section{padding:24px}.lesson-section__header{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}.lesson-section h2{font-size:clamp(1.65rem,3vw,2.2rem);margin-bottom:0}.lesson-section p{color:var(--muted);line-height:1.8;font-size:1rem}.lesson-list{margin:16px 0 0;padding-left:20px;color:var(--text)}.lesson-list li{margin-bottom:10px;line-height:1.7}.code-card{margin-top:18px;border-radius:18px;overflow:hidden;border:1px solid #2a2a2a}.code-card__label{margin:0;padding:12px 16px;background:#f1f1f1;border-bottom:1px solid #d8d8d8}.code-card pre{padding:18px;background:#111;color:#f3f3f3}.compare-table{margin-top:18px;border:1px solid var(--line);border-radius:16px;overflow:hidden}.compare-table__head,.compare-table__row{display:grid;grid-template-columns:1fr 1fr}.compare-table__head{background:#f3f3f3;font-weight:800}.compare-table__head span,.compare-table__row span{padding:14px 16px;border-bottom:1px solid var(--line)}.compare-table__row span:first-child,.compare-table__head span:first-child{border-right:1px solid var(--line)}.ad-slot{display:block;width:100%;min-height:600px}.ad-link{display:block;width:100%;text-decoration:none}.ad-image{display:block;width:100%;height:auto;border-radius:24px;box-shadow:var(--shadow)}.ad-slot--demo{border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}.demo-ad{min-height:564px;border-radius:18px;padding:22px;background:linear-gradient(180deg,#111,#2b2b2b);color:#fff;display:flex;flex-direction:column}.demo-ad__label{color:#d4d4d4;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}.demo-ad h3{font-size:2rem;line-height:1.05;margin-bottom:14px}.demo-ad__text{color:#e8e8e8;line-height:1.75;margin-bottom:20px}.demo-ad__visual{flex:1;border-radius:16px;background:radial-gradient(circle at top right,rgba(255,255,255,.22),transparent 24%),linear-gradient(135deg,#f0f0f0,#cfcfcf);min-height:280px;margin-bottom:20px}.demo-ad__button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:#fff;color:#111;font-weight:800;text-decoration:none}@media (max-width: 1180px){.tutorial-layout{grid-template-columns:240px minmax(0,1fr)}.ad-sidebar{grid-column:1 / -1;position:static}.ad-slot,.demo-ad{min-height:240px}}@media (max-width: 920px){.page-header,.tutorial-layout{grid-template-columns:1fr}.topic-nav,.ad-sidebar{position:static}.topic-nav nav{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.page{width:min(100% - 16px,100%);padding-top:14px}.page-header__main,.header-example,.topic-nav__box,.lesson-section{padding:16px;border-radius:16px}.topic-nav nav{grid-template-columns:1fr}.lesson-section h2{font-size:1.5rem}}