/* Articles, rich-media editor and tutorial pages */
.brand-mark{background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.desktop-nav{gap:24px}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.article-summary{grid-template-columns:repeat(5,1fr)}
.article-admin-list{display:flex;flex-direction:column}
.article-admin-list>article{display:grid;grid-template-columns:118px minmax(0,1fr) 150px 150px;align-items:center;gap:18px;padding:18px 20px;border-top:1px solid #eceef3}
.article-admin-list>article:first-child{border-top:0}
.article-admin-cover{height:76px;border-radius:13px;overflow:hidden;background:linear-gradient(145deg,#312e81,#7c3aed 64%,#22d3ee);display:grid;place-items:center}
.article-admin-cover img{width:100%;height:100%;object-fit:cover}
.article-admin-cover span{color:#fff;font-size:23px;font-weight:850}
.article-admin-copy{min-width:0}
.article-admin-copy>div{display:flex;align-items:center;gap:7px}
.article-admin-copy>div span,.article-admin-copy>div em{padding:3px 7px;border-radius:6px;background:#f0efff;color:#6559dc;font-size:7px;font-style:normal;font-weight:800}
.article-admin-copy>div em{background:#fff4dc;color:#ae7412}
.article-admin-copy h3{margin:6px 0 3px;font-size:13px;line-height:1.35;color:#2e394d}
.article-admin-copy p{max-width:660px;margin:0;color:#8b95a7;font-size:8px;line-height:1.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-admin-copy small{display:block;margin-top:5px;color:#a0a8b7;font-size:7px}
.article-admin-state{display:flex;align-items:flex-start;flex-direction:column;gap:7px}
.article-admin-state small{font-size:7px;color:#9ba4b4}
.article-admin-actions{justify-content:flex-end}
.article-edit-form{grid-template-columns:minmax(0,1fr) 310px}
.article-editor-section{padding-bottom:18px}
.rich-editor{overflow:hidden;border:1px solid #dfe3eb;border-radius:14px;background:#fff;box-shadow:inset 0 1px 0 #fff}
.rich-toolbar{display:flex;align-items:center;gap:4px;padding:8px;background:#f7f8fb;border-bottom:1px solid #e6e9ef;position:sticky;top:0;z-index:2;flex-wrap:wrap}
.rich-toolbar>span{width:1px;height:22px;margin:0 3px;background:#dfe3ea}
.rich-toolbar button,.rich-toolbar select{width:auto!important;min-height:30px;margin:0!important;padding:6px 9px!important;border:1px solid transparent!important;border-radius:7px!important;background:transparent!important;color:#536077!important;font-size:9px!important;box-shadow:none!important}
.rich-toolbar button:hover,.rich-toolbar select:hover{border-color:#dcdff0!important;background:#fff!important;color:#5d52d6!important}
.rich-editor-canvas{min-height:520px;padding:38px 46px;outline:0;color:#263247;font-size:15px;line-height:1.9}
.rich-editor-canvas:empty:before{content:attr(data-placeholder);color:#a7afbc;pointer-events:none}
.rich-editor-canvas h2{font-size:26px;line-height:1.35;margin:32px 0 12px;color:#172033}
.rich-editor-canvas h3{font-size:20px;line-height:1.4;margin:26px 0 10px}
.rich-editor-canvas p{margin:0 0 16px}
.rich-editor-canvas blockquote{margin:24px 0;padding:15px 18px;border-left:4px solid #6d62df;border-radius:0 10px 10px 0;background:#f7f6ff;color:#566079}
.rich-editor-canvas pre{overflow:auto;padding:17px;border-radius:12px;background:#111827;color:#dbeafe;font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
.rich-editor-canvas figure{margin:28px 0}
.rich-editor-canvas img,.rich-editor-canvas video{width:100%;max-height:560px;object-fit:contain;border-radius:14px;background:#f1f5f9}
.rich-editor-canvas audio{width:100%}
.rich-editor-canvas figcaption{text-align:center;margin-top:8px;color:#9099a9;font-size:11px}
.rich-editor-status{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid #eceef3;background:#fafbfc;color:#939cad;font-size:8px}
.rich-editor-status b{color:#5e687b}
.article-cover-upload{display:grid;grid-template-columns:1fr 220px;gap:14px}
.article-cover-upload>img{width:220px;height:105px;object-fit:cover;border-radius:14px;border:1px solid #e0e4eb}
.article-publish-head>i{background:linear-gradient(145deg,#312e81,#7c3aed 70%,#22d3ee)!important}

.home-tutorials{padding:100px 0;background:linear-gradient(180deg,#f8fafc,#fff)}
.home-tutorials .section-head>a,.related-tutorials .section-head>a{color:#4f46e5;font-size:13px;font-weight:750}
.home-tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home-tutorial-grid article{overflow:hidden;border:1px solid #e6eaf0;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(30,41,59,.05);transition:.22s}
.home-tutorial-grid article:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(30,41,59,.11)}
.home-tutorial-cover{height:170px;display:grid;place-items:center;background:linear-gradient(145deg,#312e81,#7c3aed 65%,#22d3ee);overflow:hidden}
.home-tutorial-cover img{width:100%;height:100%;object-fit:cover}
.home-tutorial-cover span{width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:18px;background:rgba(255,255,255,.14);color:#fff;font-size:24px;font-weight:850}
.home-tutorial-grid article>div{padding:20px}
.home-tutorial-grid small{color:#7c3aed;font-size:11px;font-weight:750}
.home-tutorial-grid h3{margin:9px 0 7px;font-size:19px;line-height:1.4;letter-spacing:-.3px}
.home-tutorial-grid p{min-height:66px;margin:0;color:#718096;font-size:13px;line-height:1.7}
.home-tutorial-grid article>div>a:last-child{display:inline-flex;margin-top:15px;color:#4f46e5;font-size:12px;font-weight:750}

.tutorial-index-hero{overflow:hidden;padding:80px 0 88px;background:radial-gradient(circle at 80% 20%,rgba(34,211,238,.22),transparent 30%),linear-gradient(145deg,#111827,#28225f 64%,#3d2a78);color:#fff}
.tutorial-index-head{display:grid;grid-template-columns:1fr 360px;align-items:center;gap:80px}
.tutorial-index-head .section-kicker{color:#a5b4fc}
.tutorial-index-head h1{margin:20px 0;font-size:54px;line-height:1.14;letter-spacing:-2.6px}
.tutorial-index-head p{max-width:650px;margin:0;color:#b9c2d2;font-size:17px;line-height:1.85}
.tutorial-index-orb{position:relative;height:280px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:radial-gradient(circle,rgba(129,140,248,.28),rgba(255,255,255,.02) 65%)}
.tutorial-index-orb:before,.tutorial-index-orb:after{content:"";position:absolute;border:1px dashed rgba(255,255,255,.15);border-radius:50%}
.tutorial-index-orb:before{inset:28px}.tutorial-index-orb:after{inset:65px}
.tutorial-index-orb span{position:relative;z-index:1;width:92px;height:92px;display:grid;place-items:center;border-radius:27px;background:linear-gradient(145deg,#6366f1,#8b5cf6);font-size:38px;font-weight:850;box-shadow:0 25px 55px rgba(0,0,0,.28)}
.tutorial-index-orb i{position:absolute;z-index:2;bottom:13px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(15,23,42,.65);color:#cbd5e1;font-size:11px;font-style:normal}
.tutorial-index-section{min-height:50vh;padding:70px 0 110px;background:#fff}
.tutorial-filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px}
.tutorial-filter a{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #e2e8f0;border-radius:999px;color:#64748b;font-size:13px;font-weight:700}
.tutorial-filter a small{min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:#f1f5f9;font-size:10px}
.tutorial-filter a:hover,.tutorial-filter a.active{border-color:#0f172a;background:#0f172a;color:#fff}
.tutorial-filter a.active small{background:rgba(255,255,255,.15)}
.tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tutorial-card{overflow:hidden;border:1px solid #e6eaf0;border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(30,41,59,.05);transition:.24s}
.tutorial-card:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(30,41,59,.12)}
.tutorial-card-cover{position:relative;height:220px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#312e81,#6d28d9 62%,#0891b2)}
.tutorial-card-cover img{width:100%;height:100%;object-fit:cover}
.tutorial-cover-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent)}
.tutorial-card-cover>b{position:relative;z-index:1;width:78px;height:78px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:23px;background:rgba(255,255,255,.13);color:#fff;font-size:30px}
.tutorial-card-cover em{position:absolute;left:15px;top:15px;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.92);color:#4f46e5;font-size:10px;font-style:normal;font-weight:800}
.tutorial-card-copy{padding:22px}
.tutorial-card-copy>div{display:flex;justify-content:space-between;color:#94a3b8;font-size:10px}
.tutorial-card h2{min-height:56px;margin:11px 0 7px;font-size:20px;line-height:1.4;letter-spacing:-.4px}
.tutorial-card p{min-height:66px;margin:0;color:#64748b;font-size:13px;line-height:1.7}
.tutorial-read{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid #eef2f7;color:#4f46e5;font-size:12px;font-weight:750}
.tutorial-empty{text-align:center;padding:70px 20px;border:1px dashed #cbd5e1;border-radius:22px;background:#f8fafc}
.tutorial-empty>span{font-size:40px;color:#818cf8}
.tutorial-empty h2{margin:10px 0 3px}.tutorial-empty p{color:#64748b}

.tutorial-detail-head{padding:28px 0 70px;background:linear-gradient(180deg,#f8fafc,#f3f4ff)}
.tutorial-head-copy{max-width:840px;margin:60px auto 42px;text-align:center}
.tutorial-head-copy>span{display:inline-block;padding:7px 11px;border-radius:999px;background:#e9e7ff;color:#5b50d0;font-size:11px;font-weight:800}
.tutorial-head-copy h1{margin:20px 0 16px;font-size:52px;line-height:1.17;letter-spacing:-2.2px}
.tutorial-head-copy>p{max-width:720px;margin:0 auto;color:#64748b;font-size:17px;line-height:1.8}
.tutorial-head-copy>div{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:22px;color:#94a3b8;font-size:11px}
.tutorial-head-copy>div i{width:3px;height:3px;border-radius:50%;background:#94a3b8}
.tutorial-hero-cover{height:510px;margin:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(49,46,129,.16)}
.tutorial-hero-cover img{width:100%;height:100%;object-fit:cover}
.tutorial-body-grid{display:grid;grid-template-columns:minmax(0,760px) 300px;justify-content:center;gap:70px;padding-top:72px;padding-bottom:105px}
.tutorial-content{min-width:0;color:#334155;font-size:16px;line-height:1.95}
.tutorial-content>p{margin:0 0 21px}
.tutorial-content h2{scroll-margin-top:100px;margin:46px 0 15px;color:#111827;font-size:30px;line-height:1.35;letter-spacing:-.7px}
.tutorial-content h3{margin:34px 0 12px;color:#1e293b;font-size:23px}
.tutorial-content h4{font-size:18px}
.tutorial-content ul,.tutorial-content ol{margin:18px 0 25px;padding-left:25px}
.tutorial-content li{margin:8px 0;padding-left:4px}
.tutorial-content blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid #6366f1;border-radius:0 13px 13px 0;background:#f5f3ff;color:#535d73}
.tutorial-content blockquote p{margin:0}
.tutorial-content pre{overflow:auto;margin:25px 0;padding:20px;border-radius:14px;background:#111827;color:#dbeafe;font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace}
.tutorial-content a{color:#4f46e5;text-decoration:underline;text-underline-offset:3px}
.tutorial-content figure{margin:34px 0}
.tutorial-content figure img,.tutorial-content figure video{width:100%;max-height:620px;object-fit:contain;border-radius:18px;background:#f1f5f9;box-shadow:0 14px 38px rgba(30,41,59,.09)}
.tutorial-content figure audio{width:100%}
.tutorial-content figcaption{margin-top:10px;text-align:center;color:#94a3b8;font-size:12px}
.tutorial-content hr{margin:40px 0;border:0;border-top:1px solid #e2e8f0}
.tutorial-end{display:flex;align-items:center;gap:16px;margin-top:55px;padding:20px;border:1px solid #dfe4ed;border-radius:17px;background:#f8fafc}
.tutorial-end>span{width:45px;height:45px;display:grid;place-items:center;border-radius:13px;background:#e8e6ff;color:#5f54d5;font-weight:850}
.tutorial-end strong{font-size:14px}.tutorial-end p{margin:2px 0 0;color:#8290a4;font-size:12px}
.tutorial-side{display:flex;flex-direction:column;gap:16px}
.tutorial-side-card{position:sticky;top:100px;padding:25px;border-radius:21px;background:linear-gradient(145deg,#111827,#2c245f);color:#fff;box-shadow:0 20px 50px rgba(15,23,42,.18)}
.tutorial-side-card>span{color:#a5b4fc;font-size:10px;font-weight:800;letter-spacing:1px}
.tutorial-side-card h2{margin:12px 0 8px;font-size:22px;line-height:1.4}
.tutorial-side-card p{margin:0 0 20px;color:#aeb8c9;font-size:12px;line-height:1.7}
.tutorial-side-links{padding:21px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;display:flex;flex-direction:column;gap:10px}
.tutorial-side-links strong{margin-bottom:3px;font-size:13px}.tutorial-side-links a{color:#64748b;font-size:12px}.tutorial-side-links a:hover{color:#4f46e5}
.related-tutorials{padding:90px 0 105px;background:#fff;border-top:1px solid #edf0f5}
.related-tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-tutorial-grid>a{padding:24px;border:1px solid #e3e8ef;border-radius:19px;background:#fff;transition:.2s}
.related-tutorial-grid>a:hover{transform:translateY(-4px);border-color:#c9c7f4;box-shadow:0 18px 40px rgba(30,41,59,.08)}
.related-tutorial-grid span{color:#665cda;font-size:10px;font-weight:800}.related-tutorial-grid h3{margin:10px 0 7px;font-size:18px}.related-tutorial-grid p{min-height:64px;margin:0;color:#738196;font-size:12px;line-height:1.7}.related-tutorial-grid small{display:block;margin-top:15px;color:#4f46e5;font-weight:750}

@media(max-width:1100px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-index-head{grid-template-columns:1fr 290px;gap:40px}.tutorial-grid,.home-tutorial-grid{grid-template-columns:repeat(2,1fr)}.tutorial-body-grid{grid-template-columns:minmax(0,1fr) 280px;gap:40px}.article-admin-list>article{grid-template-columns:100px minmax(0,1fr) 135px}.article-admin-actions{grid-column:2/4;justify-content:flex-start}.article-edit-form{grid-template-columns:1fr}.article-edit-form .publish-column{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:800px){.desktop-nav{display:none}.tutorial-index-hero{padding:60px 0}.tutorial-index-head{grid-template-columns:1fr}.tutorial-index-head h1{font-size:42px}.tutorial-index-orb{display:none}.tutorial-head-copy{margin-top:40px}.tutorial-head-copy h1{font-size:40px}.tutorial-hero-cover{height:390px}.tutorial-body-grid{grid-template-columns:1fr;gap:35px}.tutorial-side-card{position:static}.related-tutorial-grid{grid-template-columns:1fr}.article-admin-list>article{grid-template-columns:90px 1fr}.article-admin-state{grid-column:2}.article-admin-actions{grid-column:2}.article-cover-upload{grid-template-columns:1fr}.article-cover-upload>img{width:100%;height:180px}.rich-editor-canvas{padding:28px 25px}.article-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr}.home-tutorials{padding:70px 0}.home-tutorial-grid,.tutorial-grid{grid-template-columns:1fr}.tutorial-index-head h1{font-size:36px;letter-spacing:-1.5px}.tutorial-index-head p{font-size:15px}.tutorial-index-section{padding:50px 0 80px}.tutorial-card-cover{height:200px}.tutorial-head-copy h1{font-size:34px;letter-spacing:-1.4px}.tutorial-head-copy>p{font-size:15px}.tutorial-head-copy>div{flex-wrap:wrap}.tutorial-hero-cover{height:260px;border-radius:19px}.tutorial-body-grid{padding-top:50px;padding-bottom:75px}.tutorial-content{font-size:15px}.tutorial-content h2{font-size:25px}.article-admin-list>article{grid-template-columns:1fr;padding:15px}.article-admin-cover{height:150px}.article-admin-state,.article-admin-actions{grid-column:1}.article-edit-form .publish-column{display:block}.rich-toolbar{max-height:112px;overflow:auto}.rich-editor-canvas{min-height:430px;padding:24px 18px;font-size:14px}.rich-editor-status{align-items:flex-start;flex-direction:column}}