@keyframes float{0%,to{transform:translate(0,0)}50%{transform:translate(30px,20px)}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(59,130,246,.4)}50%{box-shadow:0 0 0 8px transparent}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:root{--blue-600:#2563eb;--blue-500:#3b82f6;--blue-400:#60a5fa;--blue-100:#dbeafe;--blue-50:#eff6ff;--violet-600:#7c3aed;--violet-500:#8b5cf6;--violet-400:#a78bfa;--violet-100:#ede9fe;--emerald-600:#059669;--emerald-500:#10b981;--emerald-100:#d1fae5;--amber-600:#d97706;--amber-500:#f59e0b;--amber-100:#fef3c7;--red-600:#dc2626;--red-500:#ef4444;--red-100:#fee2e2;--rose-500:#f43f5e;--rose-100:#ffe4e6;--cyan-500:#06b6d4;--cyan-100:#cffafe;--code-bg:#1e293b;--code-text:#e2e8f0;--code-keyword:#c084fc;--code-string:#34d399;--code-comment:#64748b;--code-number:#f59e0b;--code-function:#60a5fa;--gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--primary:var(--blue-500);--primary-dark:var(--blue-600);--primary-light:var(--blue-400);--primary-bg:var(--blue-50);--success:var(--emerald-500);--success-bg:var(--emerald-100);--warning:var(--amber-500);--warning-bg:var(--amber-100);--danger:var(--red-500);--danger-bg:var(--red-100);--bg-base:#ffffff;--bg-secondary:var(--gray-50);--bg-tertiary:var(--gray-100);--bg-overlay:rgba(0, 0, 0, 0.04);--text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-500);--text-muted:var(--gray-400);--border-light:var(--gray-200);--border-base:var(--gray-300);--border-dark:var(--gray-400);--shadow-xs:0 1px 2px rgba(0, 0, 0, 0.04);--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);--shadow-base:0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.03);--shadow-md:0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.04);--shadow-lg:0 20px 25px rgba(0, 0, 0, 0.06), 0 8px 10px rgba(0, 0, 0, 0.04);--shadow-xl:0 25px 50px rgba(0, 0, 0, 0.1);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-full:9999px;--font-sans:'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;--text-xs:0.6875rem;--text-sm:0.8125rem;--text-base:0.9375rem;--text-lg:1.0625rem;--text-xl:1.1875rem;--text-2xl:1.375rem;--text-3xl:1.6875rem;--text-4xl:2rem;--leading-tight:1.3;--leading-normal:1.7;--leading-relaxed:1.8;--tracking-tight:-0.025em;--tracking-normal:0;--tracking-wide:0.025em;--ease-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);--ease-base:200ms cubic-bezier(0.4, 0, 0.2, 1);--ease-slow:300ms cubic-bezier(0.4, 0, 0.2, 1);--ease-slower:400ms cubic-bezier(0.4, 0, 0.2, 1);--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal:400;--z-toast:500}body.dark{--primary:var(--blue-400);--primary-dark:var(--blue-500);--primary-light:var(--blue-600);--primary-bg:rgba(59, 130, 246, 0.15);--bg-base:#0f1117;--bg-secondary:#161822;--bg-tertiary:#1e2030;--bg-overlay:rgba(255, 255, 255, 0.04);--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-tertiary:#94a3b8;--text-muted:#64748b;--border-light:#1e293b;--border-base:#334155;--border-dark:#475569;--shadow-xs:0 1px 2px rgba(0, 0, 0, 0.3);--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.35);--shadow-base:0 4px 6px rgba(0, 0, 0, 0.4);--shadow-md:0 10px 15px rgba(0, 0, 0, 0.45);--shadow-lg:0 20px 25px rgba(0, 0, 0, 0.5);--shadow-xl:0 25px 50px rgba(0, 0, 0, 0.6)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html{-webkit-text-size-adjust:100%;overflow-x:clip}html{scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--ease-base),color var(--ease-base);text-rendering:optimizeLegibility;word-wrap:break-word}a{color:inherit;text-decoration:none;transition:color var(--ease-fast)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:0 0}img{max-width:100%;height:auto;display:block}p{line-height:var(--leading-relaxed);margin-bottom:var(--sp-4)}.comparison-highlight__content p:last-child,.tutorial-content blockquote p:last-child,.tutorial-info p:last-child,blockquote.citation p:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child{margin-bottom:0}h1,h2,h4,h5,h6{color:var(--text-primary)}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight);margin-bottom:var(--sp-4)}.action-btn,.back-to-top,.btn,.code-block-wrapper,.feature-item,.hero__bg::after,.hero__bg::before,.p-card,.perf-card,.pricing-card{will-change:transform}h1,h2{font-size:var(--text-4xl);font-weight:800}h2{font-size:var(--text-2xl)}.tutorial-step__body h3,h3{font-size:var(--text-xl);margin-top:var(--sp-6)}h1,h2,h3{letter-spacing:var(--tracking-tight)}h3{color:var(--text-primary);border-left:3px solid var(--primary);padding-left:var(--sp-3)}h4{font-size:var(--text-base)}h5,h6{font-size:var(--text-sm);font-weight:600}h6{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.tutorial-step__body h3{font-weight:700;color:var(--primary);border-left:none;padding-left:0;margin-bottom:var(--sp-3)}b,h3,h4,strong{font-weight:700}em,i{font-style:italic}small{font-size:.875em}:lang(zh){line-height:1.8}:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) h4{line-height:1.4}ol,ul{list-style:none}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--sp-6)}@media (max-width:768px){.container{padding:0 var(--sp-4)}}.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-light);transition:background var(--ease-base),border-color var(--ease-base);overflow:visible}body.dark .header{background:rgba(15,17,23,.92)}.nav{justify-content:space-between;height:64px}.nav,.nav__brand a,.nav__menu{display:flex;align-items:center}.nav__brand a{gap:var(--sp-2);font-size:var(--text-xl);font-weight:800;color:var(--primary);letter-spacing:var(--tracking-tight)}.nav__menu{gap:var(--sp-1);overflow-x:visible}.nav__menu::-webkit-scrollbar{display:none}.nav__main-link{display:inline-flex;align-items:center;gap:4px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);line-height:1.4;transition:all var(--ease-fast)}.nav__dropdown-arrow{display:inline-block;font-size:.7em;transition:transform var(--ease-fast)}.nav__dropdown:hover .nav__dropdown-arrow{transform:rotate(180deg)}.nav__dropdown{position:relative}.nav__dropdown-menu,.nav__dropdown-menu::before{position:absolute;left:50%;background:var(--bg-base)}.nav__dropdown-menu{top:calc(100% + 8px);transform:translateX(-50%) translateY(4px);min-width:180px;border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-2);opacity:0;visibility:hidden;transition:all var(--ease-fast);z-index:var(--z-dropdown)}.nav__dropdown-menu::before{content:"";top:-6px;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;border-left:1px solid var(--border-light);border-top:1px solid var(--border-light)}.nav__dropdown.open .nav__dropdown-menu,.nav__dropdown:hover .nav__dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.nav__dropdown-menu li a,.nav__toggle span{display:block;transition:all var(--ease-fast)}.nav__dropdown-menu li a{padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm);color:var(--text-secondary);border-radius:var(--radius-md);line-height:1.4}.nav__dropdown-menu a.nav__divider{pointer-events:none;font-size:11px;color:var(--text-tertiary);padding:4px 12px;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border);margin:4px 0 2px;cursor:default;opacity:.6}.nav__dropdown-menu a.nav__divider:hover{background:0 0;color:var(--text-tertiary)}.nav__dropdown-menu li a:hover,.nav__main-link:hover{color:var(--text-primary);background:var(--bg-secondary)}.nav__main-link.active{color:var(--primary);background:var(--primary-bg);font-weight:600}.nav__cps-link{background:linear-gradient(135deg,var(--blue-500),var(--violet-500));color:#fff!important;font-weight:600!important;border-radius:var(--radius-full);padding:var(--sp-2) var(--sp-5)!important;box-shadow:0 2px 8px rgba(59,130,246,.3);transition:all var(--ease-fast)!important}.nav__cps-link:hover{background:linear-gradient(135deg,var(--blue-600),var(--violet-600))!important;box-shadow:0 4px 12px rgba(59,130,246,.4);transform:translateY(-1px)}.nav__toggle,.theme-toggle{justify-content:center;align-items:center;width:36px;height:36px}.theme-toggle{display:flex;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-lg);transition:all var(--ease-fast);margin-left:var(--sp-2)}.theme-toggle:hover{color:var(--text-primary);background:var(--bg-secondary)}.nav__toggle{display:none;flex-direction:column;gap:5px}.nav__toggle span{width:20px;height:2px;background:var(--text-primary);border-radius:var(--radius-xs)}.nav__toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.nav__toggle.active span:nth-child(2){opacity:0}.nav__toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}@media (max-width:768px){.nav__toggle{display:flex}.nav__menu{position:fixed;top:64px;left:0;right:0;background:var(--bg-base);flex-direction:column;align-items:stretch;padding:var(--sp-4);gap:var(--sp-1);box-shadow:var(--shadow-lg);border-bottom:1px solid var(--border-light);transform:translateY(-100%);opacity:0;visibility:hidden;transition:all var(--ease-slow);max-height:calc(100vh - 64px);overflow-y:auto}.nav__menu.active{transform:translateY(0);opacity:1;visibility:visible}.nav__main-link{display:block;padding:var(--sp-3) var(--sp-4);font-size:var(--text-base)}.theme-toggle{margin-left:0;align-self:flex-end}.nav__dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--border-light);border-radius:0;margin-left:var(--sp-4);margin-top:var(--sp-2);padding:var(--sp-2);display:none;background:0 0}.nav__dropdown-menu::before{display:none}.nav__dropdown.open .nav__dropdown-menu{display:block}.nav__dropdown-arrow{float:right}}.hero{position:relative;margin-top:64px;padding:var(--sp-20) var(--sp-6) var(--sp-16);text-align:center;background:linear-gradient(135deg,var(--blue-600) 0%,var(--violet-500) 50%,var(--rose-500) 100%);color:#fff;overflow:hidden}.hero::before,.hero__bg{position:absolute;inset:0}.hero::before{content:"";background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.08)0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.06)0,transparent 50%),url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.hero__bg{z-index:0;overflow:hidden}.hero__bg::after,.hero__bg::before{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:float 8s ease-in-out infinite}.hero__bg::before{width:400px;height:400px;background:var(--blue-400);top:-100px;left:-100px}.hero__bg::after{width:300px;height:300px;background:var(--violet-400);bottom:-50px;right:-50px;animation-delay:-4s}.hero__content{position:relative;z-index:1;max-width:720px;margin:0 auto}.hero h1{font-size:var(--text-4xl);font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.25;margin-bottom:var(--sp-4)}.hero__subtitle{font-size:var(--text-lg);font-weight:500;opacity:.9;margin-bottom:var(--sp-3);line-height:1.5}.hero__desc{font-size:var(--text-sm);opacity:.75;max-width:560px;margin:0 auto var(--sp-8);line-height:1.8}.hero__stats{display:flex;justify-content:center;gap:var(--sp-10);margin-bottom:var(--sp-8)}.hero__stat{display:flex;flex-direction:column;align-items:center}.hero__stat-num{font-size:var(--text-2xl);font-weight:800;line-height:1;margin-bottom:var(--sp-1)}.hero__stat-label{font-size:var(--text-xs);opacity:.75;text-transform:uppercase;letter-spacing:var(--tracking-wide)}.hero__cta{display:flex;justify-content:center;gap:var(--sp-4);flex-wrap:wrap}@media (max-width:768px){.hero{padding:var(--sp-16) var(--sp-4) var(--sp-12)}.hero h1{font-size:var(--text-3xl)}.hero__subtitle{font-size:var(--text-base)}.hero__stats{gap:var(--sp-6)}.hero__stat-num{font-size:var(--text-xl)}}@media (max-width:480px){.hero h1{font-size:var(--text-2xl)}.hero__stats{flex-direction:column;gap:var(--sp-4)}.hero__cta{flex-direction:column;align-items:center}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:12px 28px;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;line-height:1.4;white-space:nowrap;transition:all var(--ease-fast);border:1.5px solid transparent}.btn:active{transform:scale(.98)}.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn--primary:hover,.btn--white:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.btn--white{background:#fff;color:var(--blue-600);border-color:#fff}.btn--white:hover{background:var(--gray-50)}.btn--ghost,.btn--outline{background:0 0;color:#fff;border-color:rgba(255,255,255,.4)}.btn--outline:hover{background:rgba(255,255,255,.1);border-color:#fff}.btn--ghost{border-color:rgba(255,255,255,.3)}.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}.btn--accent{background:linear-gradient(135deg,var(--blue-500),var(--violet-500));color:#fff}.btn--accent:hover{box-shadow:0 4px 14px rgba(59,130,246,.35);transform:translateY(-1px)}.btn--sm{padding:8px 18px;font-size:var(--text-xs);border-radius:var(--radius-md)}.btn-link{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--text-sm);font-weight:600;color:var(--primary);transition:color var(--ease-fast)}.btn-link:hover,.footer__info a:hover,.tutorial-header__breadcrumb a:hover{color:var(--primary-dark);text-decoration:underline}.btn-link--primary{color:var(--blue-600)}.btn-link--primary:hover{color:var(--violet-600)}.section{padding:var(--sp-16)0}.section--alt{background:var(--bg-secondary);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.section__header{text-align:center;max-width:640px;margin:0 auto var(--sp-10)}.section__title{font-size:var(--text-2xl);font-weight:800;color:var(--text-primary);letter-spacing:var(--tracking-tight);margin-bottom:var(--sp-3);line-height:1.3}.section__desc{font-size:var(--text-sm);color:var(--text-tertiary);line-height:1.8}@media (max-width:768px){.section{padding:var(--sp-12)0}.section__title{font-size:var(--text-xl)}}.sub-tabs{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-8);padding:var(--sp-1);background:var(--bg-tertiary);border-radius:var(--radius-lg);width:fit-content;margin-left:auto;margin-right:auto}.sub-tab{padding:var(--sp-3) var(--sp-6);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--text-tertiary);transition:all var(--ease-fast)}.sub-tab.active,.sub-tab:hover{color:var(--text-primary)}.sub-tab.active{background:var(--bg-base);font-weight:600;box-shadow:var(--shadow-xs)}.sub-tab-content{display:none}.sub-tab-content.active{display:block}@media (max-width:640px){.sub-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.sub-tab{white-space:nowrap;flex-shrink:0}}.table-controls{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-6);flex-wrap:wrap}.table-search,.table-sort{padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-base);color:var(--text-primary);font-size:var(--text-sm);line-height:1.5;transition:all var(--ease-fast)}.table-search{flex:1;min-width:200px}.table-search:focus,.table-sort:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}@media (max-width:640px){.table-controls{flex-direction:column}.table-search,.table-sort{width:100%}}.table-wrapper{background:var(--bg-base);border-radius:var(--radius-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);overflow:hidden}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:1.6}.comparison-table thead th{padding:var(--sp-4) var(--sp-5);text-align:left;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-tertiary);background:var(--bg-secondary);border-bottom:2px solid var(--border-light);white-space:nowrap;line-height:1.4}.comparison-table tbody tr{border-bottom:1px solid var(--border-light);transition:background var(--ease-fast)}.comparison-table tbody tr:last-child{border-bottom:none}.comparison-table tbody tr:hover{background:var(--bg-overlay)}.comparison-table tbody td{padding:var(--sp-5) var(--sp-5);vertical-align:middle;color:var(--text-secondary);line-height:1.6}.highlight-row{background:linear-gradient(90deg,var(--primary-bg),transparent)}.highlight-row:hover{background:linear-gradient(90deg,var(--primary-bg),var(--bg-secondary))}.platform-icon,.platform-name{display:flex;align-items:center}.platform-name{gap:var(--sp-3);line-height:1.3}.platform-icon{justify-content:center;width:40px;height:40px;background:var(--bg-tertiary);border-radius:var(--radius-md);font-size:1.25rem;flex-shrink:0}.platform-name strong{font-size:var(--text-sm);font-weight:700;color:var(--text-primary)}.platform-name small,.platform-name strong,.price{display:block;line-height:1.3}.platform-name small{margin-top:3px}.price{font-size:var(--text-sm);font-weight:700;color:var(--primary)}.no-link,.platform-name small,td small{font-size:var(--text-xs);color:var(--text-muted)}td small{display:block;margin-top:4px;line-height:1.3}.no-link{font-style:italic}@media (max-width:768px){.comparison-table{font-size:var(--text-xs)}.comparison-table tbody td,.comparison-table thead th{padding:var(--sp-3) var(--sp-4)}.platform-icon{width:32px;height:32px;font-size:1rem}}.badge,.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;line-height:1.6;white-space:nowrap}.badge--blue{background:var(--blue-100);color:var(--blue-600)}.badge--green{background:var(--emerald-100);color:var(--emerald-600)}.badge--orange{background:var(--warning-bg);color:var(--amber-600)}.badge--red{background:var(--danger-bg);color:var(--red-600)}.badge--purple{background:var(--violet-100);color:var(--violet-600)}.badge--teal{background:var(--cyan-100);color:var(--cyan-500)}.badge--gray{background:var(--bg-tertiary);color:var(--text-muted)}.tag--blue{background:var(--blue-100);color:var(--blue-600)}.tag--green{background:var(--emerald-100);color:var(--emerald-600)}.tag--orange{background:var(--warning-bg);color:var(--amber-600)}.tag--red{background:var(--danger-bg);color:var(--red-600)}.tag--purple{background:var(--violet-100);color:var(--violet-600)}.tag--teal{background:var(--cyan-100);color:var(--cyan-500)}.tag--accent{background:linear-gradient(135deg,var(--blue-500),var(--violet-500));color:#fff}body.dark .badge--blue,body.dark .tag--blue{background:rgba(59,130,246,.15);color:var(--blue-400)}body.dark .badge--green,body.dark .tag--green{background:rgba(16,185,129,.15);color:var(--emerald-500)}body.dark .badge--orange,body.dark .tag--orange{background:rgba(245,158,11,.15);color:var(--amber-500)}body.dark .badge--red,body.dark .tag--red{background:rgba(239,68,68,.15);color:var(--red-500)}body.dark .badge--purple,body.dark .tag--purple{background:rgba(139,92,246,.15);color:var(--violet-400)}body.dark .badge--teal,body.dark .tag--teal{background:rgba(6,182,212,.15);color:var(--cyan-500)}body.dark .badge--gray{background:var(--bg-tertiary);color:var(--text-muted)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--sp-6)}.p-card{background:var(--bg-base);border-radius:var(--radius-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);overflow:hidden;transition:all var(--ease-slow);display:flex;flex-direction:column;height:100%}.p-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.p-card--cps{border:2px solid var(--primary);position:relative}.p-card--cps::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-500),var(--violet-500))}.p-card__head,.p-card__icon{display:flex;align-items:center}.p-card__head{gap:var(--sp-4);padding:var(--sp-6);border-bottom:1px solid var(--border-light)}.p-card__icon{justify-content:center;width:48px;height:48px;background:var(--bg-tertiary);border-radius:var(--radius-lg);font-size:1.5rem;flex-shrink:0}.p-card__title{flex:1;font-size:var(--text-lg);font-weight:700;color:var(--text-primary);line-height:1.3}.tier{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border-light);transition:background var(--ease-fast)}.pricing-card__features li:last-child,.tier:last-child{border-bottom:none}.tier--featured{background:var(--primary-bg)}.tier__info{flex:1}.pricing-card__price small,.tier__name{font-size:var(--text-sm);line-height:1.3}.tier__name{font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}.perf-card__content code,.tier__usage{font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.6}.tier__price{text-align:right;flex-shrink:0;margin-left:var(--sp-6)}.tier__price-val{font-size:var(--text-base);font-weight:800;color:var(--primary);line-height:1.3}.p-card__tools h4,.tier__price-note{font-size:var(--text-xs);color:var(--text-muted);line-height:1.3}.tier__price-note{margin-top:4px}.p-card__notice{margin:var(--sp-4) var(--sp-6);padding:var(--sp-4) var(--sp-5);background:var(--warning-bg);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--amber-600);line-height:1.7}body.dark .p-card__notice,body.dark blockquote.note{background:rgba(245,158,11,.1)}.p-card__tools{padding:var(--sp-4) var(--sp-6) var(--sp-6)}.p-card__tools h4{font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--sp-3)}.tool-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.tool-chip{display:inline-block;padding:var(--sp-1) var(--sp-3);background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);transition:all var(--ease-fast);line-height:1.5}.tool-chip:hover{background:var(--bg-tertiary);border-color:var(--border-base)}.p-card__cta{padding:var(--sp-4) var(--sp-6) var(--sp-6);margin-top:auto;border-top:1px solid var(--border-light)}.p-card__cta+.p-card__cta{border-top:none;padding-top:0}.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);background:linear-gradient(135deg,var(--blue-500),var(--violet-500));color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;transition:all var(--ease-fast);box-shadow:0 2px 8px rgba(59,130,246,.25)}.action-btn:hover{box-shadow:0 4px 16px rgba(59,130,246,.35);transform:translateY(-1px)}.action-btn--full{display:flex;width:100%;padding:var(--sp-4)0;text-align:center}@media (max-width:768px){.card-grid{grid-template-columns:1fr}.tier{flex-direction:column;gap:var(--sp-2)}.tier__price{text-align:left;margin-left:0}}@media (max-width:480px){.p-card__head,.tier{padding:var(--sp-4)}.p-card__cta,.p-card__notice,.p-card__tools{padding-left:var(--sp-4);padding-right:var(--sp-4);margin-left:var(--sp-4);margin-right:var(--sp-4)}}.comparison-highlight{background:linear-gradient(135deg,var(--primary-bg),var(--violet-100));border:1px solid var(--blue-100);border-radius:var(--radius-xl);padding:var(--sp-8);margin-bottom:var(--sp-8)}body.dark .comparison-highlight{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));border-color:rgba(59,130,246,.2)}.comparison-highlight__title{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-3);line-height:1.4}.comparison-highlight__content{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.8}.comparison-highlight__content p{margin-bottom:var(--sp-3);line-height:1.8}.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-6);margin-top:var(--sp-10)}.feature-item{display:flex;gap:var(--sp-4);padding:var(--sp-6);background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:all var(--ease-slow)}.feature-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature-item__icon{font-size:1.75rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--primary-bg);border-radius:var(--radius-lg);flex-shrink:0}.feature-item__content h4,.perf-card__header h3{font-size:var(--text-base);font-weight:700;color:var(--text-primary);line-height:1.4}.feature-item__content h4{margin-bottom:var(--sp-2)}.feature-item__content p,.perf-card__content p,.perf-card__content ul li,.pricing-card__features li{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.8}@media (max-width:640px){.feature-list{grid-template-columns:1fr}.feature-item{flex-direction:column;align-items:flex-start}}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-6);margin-top:var(--sp-10)}.pricing-card{background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--sp-8);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--ease-slow);position:relative}.perf-card:hover,.pricing-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.pricing-card--featured{border:2px solid var(--primary)}.pricing-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue-500),var(--violet-500));color:#fff;padding:var(--sp-1) var(--sp-4);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700}.pricing-card__icon{font-size:2rem;margin-bottom:var(--sp-4)}.pricing-card__name{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-3);line-height:1.3}.pricing-card__price{font-size:var(--text-2xl);font-weight:800;color:var(--primary);margin-bottom:var(--sp-6);line-height:1.2}.pricing-card__price small{font-weight:500;color:var(--text-muted)}.pricing-card__features{text-align:left;margin-bottom:var(--sp-6)}.pricing-card__features li{padding:var(--sp-2)0;border-bottom:1px solid var(--border-light);line-height:1.6}@media (max-width:640px){.pricing-grid{grid-template-columns:1fr}}.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6);margin-top:var(--sp-10)}@media (max-width:900px){.cards-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}.perf-card{background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:all var(--ease-slow)}.perf-card__content,.perf-card__header{margin-bottom:var(--sp-6)}.perf-card__content p,.perf-card__content ul li{margin-bottom:var(--sp-3)}.perf-card__content pre{background:#0d1117;color:#e6edf3;border-radius:8px;padding:var(--sp-4);overflow-x:auto;margin:var(--sp-3)0;border:1px solid rgba(88,166,255,.1);font-size:13px;line-height:1.6}.perf-card__content code{font-family:var(--font-mono);color:var(--text-primary)}.perf-card__content ul{padding-left:var(--sp-4);margin:var(--sp-3)0}.perf-card__content ul li{margin-bottom:var(--sp-2);list-style:disc}.perf-card__header{display:flex;align-items:center;gap:var(--sp-3)}.perf-card__icon{font-size:1.5rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:var(--radius-md);flex-shrink:0}.perf-card__header h3{flex:1}.perf-card__score{text-align:center;padding:var(--sp-6);background:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--sp-6)}.perf-card__num{display:block;font-size:var(--text-4xl);font-weight:800;color:var(--primary);line-height:1;margin-bottom:var(--sp-2)}.perf-card__label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.perf-card__bars{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--sp-6)}.perf-bar{display:flex;align-items:center;gap:var(--sp-3)}.perf-bar__label{width:80px;font-size:var(--text-sm);color:var(--text-secondary);flex-shrink:0}.perf-bar__track{flex:1;height:8px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.perf-bar__fill{height:100%;background:linear-gradient(90deg,var(--blue-500),var(--violet-500));border-radius:var(--radius-full);transition:width var(--ease-slower)}.perf-card__cta{text-align:center;padding-top:var(--sp-4);border-top:1px solid var(--border-light)}.perf-card__details{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-secondary);border-radius:var(--radius-md)}@media (max-width:768px){.cards-grid{grid-template-columns:1fr}.perf-bar{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}.perf-bar__label{width:auto}.perf-bar__track{width:100%}}.cta-banner{background:linear-gradient(135deg,var(--blue-600) 0%,var(--violet-500) 100%);border-radius:var(--radius-2xl);padding:var(--sp-12) var(--sp-10);text-align:center;color:#fff;overflow:hidden;max-width:720px;margin:0 auto}.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.12)0,transparent 60%),url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E")}.cta-banner h3{font-size:var(--text-2xl);font-weight:800;letter-spacing:var(--tracking-tight);margin-bottom:var(--sp-3)}.cta-banner p{font-size:var(--text-sm);opacity:.85;margin-bottom:var(--sp-6)}.cta-banner,.cta-banner .btn,.cta-banner h3,.cta-banner p{position:relative}@media (max-width:640px){.cta-banner{padding:var(--sp-8) var(--sp-6)}.cta-banner h3{font-size:var(--text-xl)}}.faq-list{max-width:720px;margin:0 auto}.faq-item{background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-lg);margin-bottom:var(--sp-3);overflow:hidden;transition:all var(--ease-fast);box-shadow:var(--shadow-xs)}.faq-item:hover{box-shadow:var(--shadow-sm)}.faq-item__q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--sp-5) var(--sp-6);font-size:var(--text-sm);font-weight:600;color:var(--text-primary);text-align:left;transition:color var(--ease-fast);line-height:1.5}.faq-item__icon,.faq-item__q:hover,.footer__info a{color:var(--primary)}.faq-item__icon{font-size:var(--text-lg);transition:transform var(--ease-slow);flex-shrink:0;margin-left:var(--sp-4);line-height:1}.faq-item.active .faq-item__icon{transform:rotate(45deg)}.faq-item__a{max-height:0;overflow:hidden;transition:max-height var(--ease-slower)}.faq-item.active .faq-item__a{max-height:400px}.faq-item__a p,.footer__info h4,.footer__info p{font-size:var(--text-sm);line-height:1.8}.faq-item__a p{padding:0 var(--sp-6) var(--sp-5);color:var(--text-secondary)}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-light);padding:var(--sp-12)0 var(--sp-6)}.footer__content{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-8);margin-bottom:var(--sp-8)}.footer__info h4{font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-3);line-height:1.4}.footer__info p{color:var(--text-tertiary);margin-bottom:var(--sp-2)}.footer__info a{font-weight:500;transition:color var(--ease-fast)}.footer__bottom{padding-top:var(--sp-6);border-top:1px solid var(--border-light);text-align:center}.footer__bottom p{font-size:var(--text-xs);color:var(--text-muted)}@media (max-width:640px){.footer__content{grid-template-columns:1fr;gap:var(--sp-6)}}.code-block-wrapper{position:relative;margin:28px 0;border-radius:14px;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.15));padding:2px;transition:all .3s ease}.code-block-wrapper:hover{background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(139,92,246,.25));box-shadow:0 8px 32px rgba(59,130,246,.15)}.code-block-wrapper .copy-btn{position:absolute;top:50px;right:12px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(30,35,50,.9);border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;padding:0;backdrop-filter:blur(8px)}.code-block-wrapper .copy-btn:hover{background:rgba(59,130,246,.3);border-color:rgba(59,130,246,.5);transform:scale(1.05)}.code-block-wrapper .copy-btn:active{transform:scale(.95)}.code-block-wrapper .copy-btn svg{width:16px;height:16px;stroke:#8b949e;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}.code-block-wrapper .copy-btn:hover svg{stroke:#58a6ff}.code-block-wrapper .copy-btn.copied{background:rgba(40,200,64,.2);border-color:rgba(40,200,64,.4)}.code-block-wrapper .copy-btn.copied svg{stroke:#28c840}.tutorial-content pre,pre.code-block{background:linear-gradient(180deg,#1a1f2e 0,#0d1117 30px,#0d1117 100%);color:#c9d1d9;border-radius:0 0 12px 12px;padding:0;margin:0;overflow:hidden;font-family:"JetBrains Mono","Fira Code","SF Mono","Cascadia Code",var(--font-mono);font-size:13.5px;line-height:1.75;position:relative;border:0;contain:content;box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03)}.code-block-wrapper pre,.code-block-wrapper pre.code-block{margin:0}.code-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(180deg,#252d3d 0,#1e2433 100%);border-bottom:1px solid rgba(255,255,255,.05);border-radius:12px 12px 0 0}.code-dots{display:flex;gap:8px}.code-dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0-2px 4px rgba(0,0,0,.2)}.code-dot--red{background:linear-gradient(135deg,#ff5f57,#e53935)}.code-dot--yellow{background:linear-gradient(135deg,#febc2e,#f59e0b)}.code-dot--green{background:linear-gradient(135deg,#28c840,#10b981)}.code-lang{font-size:12px;color:#6e7681;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.tutorial-content pre code,pre.code-block code{display:block;padding:20px 20px 24px;overflow-x:auto;font-family:inherit;font-size:inherit;color:inherit;background:0 0;line-height:1.75}.tutorial-content pre code::-webkit-scrollbar,.tutorial-content pre::-webkit-scrollbar{height:6px}.tutorial-content pre code::-webkit-scrollbar-track,.tutorial-content pre::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:3px}.tutorial-content pre code::-webkit-scrollbar-thumb,.tutorial-content pre::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:3px}.tutorial-content pre code::-webkit-scrollbar-thumb:hover,.tutorial-content pre::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#60a5fa,#a78bfa)}.code-keyword{color:#ff7b72;font-weight:500}.code-string{color:#a5d6ff}.code-number{color:#79c0ff}.code-comment{color:#8b949e;font-style:italic}.code-function{color:#d2a8ff}.code-operator{color:#ff7b72}.code-variable{color:#ffa657}.code-tag{color:#7ee787}.code-attr,.code-property{color:#79c0ff}.code-value{color:#a5d6ff}.code-class{color:#ffa657}.code-punctuation{color:#c9d1d9}.code-built-in{color:#79c0ff}.tutorial-content code:not(pre code),code.inline{font-family:"JetBrains Mono","Fira Code",var(--font-mono);font-size:.875em;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(139,92,246,.08));color:#58a6ff;padding:3px 8px;border-radius:6px;font-weight:500;border:1px solid rgba(88,166,255,.15);backdrop-filter:blur(4px)}body.dark .tutorial-content code:not(pre code),body.dark code.inline{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.15));color:#79c0ff;border-color:rgba(88,166,255,.2)}body.dark .tutorial-content pre,body.dark pre.code-block{background:linear-gradient(180deg,#1a1f2e 0,#0d1117 30px,#0d1117 100%);color:#c9d1d9}body.dark .code-block-wrapper{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1))}body.dark .code-block-wrapper:hover{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.15));box-shadow:0 8px 32px rgba(59,130,246,.1)}.collapsible,.collapsible-content{background:var(--bg-secondary);margin-bottom:0}.collapsible{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border:1px solid var(--border-light);border-radius:10px;cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--text-primary);transition:all .25s ease;user-select:none}.collapsible:hover{background:var(--bg-tertiary);border-color:var(--primary)}.collapsible::after{content:"";display:block;width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg) translateY(-2px);transition:transform .25s ease;flex-shrink:0}.collapsible.open::after{transform:rotate(225deg) translateY(2px)}.collapsible-content{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease;padding:0 20px;border:1px solid transparent;border-top:none;border-radius:0 0 10px 10px}.collapsible-content.open{max-height:1000px;padding:20px;border-color:var(--border-light);border-top:none}.tutorial-content blockquote,blockquote.citation{margin:var(--sp-6)0;padding:var(--sp-5) var(--sp-6);border-left:4px solid var(--primary);background:var(--bg-secondary);border-radius:0 var(--radius-md) var(--radius-md)0;font-style:italic;color:var(--text-secondary)}.tutorial-content blockquote p,blockquote.citation p{margin-bottom:var(--sp-2);line-height:1.8}.tutorial-content blockquote cite,blockquote.citation cite{display:block;font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--sp-3);font-style:normal;font-weight:500}.tutorial-content blockquote cite::before,blockquote.citation cite::before{content:"— "}blockquote.note{border-left-color:var(--amber-500);background:var(--warning-bg)}blockquote.success{border-left-color:var(--emerald-500);background:var(--emerald-100)}blockquote.warning{border-left-color:var(--red-500);background:var(--red-100)}body.dark blockquote.success{background:rgba(16,185,129,.1)}body.dark blockquote.warning{background:rgba(239,68,68,.1)}.back-to-top{position:fixed;bottom:var(--sp-6);right:var(--sp-6);width:52px;height:52px;background:var(--primary);color:transparent;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;line-height:.5;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--ease-slow);z-index:var(--z-sticky);border:0;cursor:pointer;padding:0}.back-to-top::after{content:"";display:block;width:16px;height:16px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-135deg);margin:0 auto}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--primary-dark);box-shadow:var(--shadow-lg);transform:translateY(-3px)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}.mb-4,.tutorial-header h1{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}.hidden{display:none}.visible{display:block}.cell-platform{display:flex;align-items:center;gap:var(--sp-3);line-height:1.4}.cell-platform__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-tertiary);border-radius:var(--radius-md);font-size:1.25rem;flex-shrink:0}.cell-platform__name{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);line-height:1.3}.cell-platform__sub,.cell-price{font-size:var(--text-xs);color:var(--text-muted);line-height:1.3}.cell-price{font-size:var(--text-sm);font-weight:800;color:var(--primary)}.cell-note,.cell-promo{font-size:var(--text-xs);line-height:1.4}.cell-promo{color:var(--amber-600);font-weight:600}.cell-note{color:var(--text-muted);font-style:italic}.row-highlight{background:linear-gradient(90deg,var(--primary-bg),transparent)!important}.row-highlight:hover{background:linear-gradient(90deg,var(--primary-bg),var(--bg-secondary))!important}.animate-pulse{animation:pulse 2s infinite}.animate-fadeIn{animation:fadeIn .4s ease-out}.tutorial-layout{display:flex;gap:var(--sp-10);align-items:flex-start}.tutorial-content{flex:1;max-width:780px;min-width:0;overflow-x:hidden}.tutorial-sidebar{position:sticky;top:80px;width:280px;flex-shrink:0;height:fit-content;max-height:calc(100vh - 100px);overflow-y:auto}.tutorial-header{margin-bottom:var(--sp-10);padding-bottom:var(--sp-6);border-bottom:1px solid var(--border-light)}.tutorial-header__breadcrumb{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--sp-4)}.tutorial-header__breadcrumb a{color:var(--primary);transition:color var(--ease-fast)}.tutorial-header h1{font-size:var(--text-3xl);font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.3}.tutorial-header__meta{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--text-sm);color:var(--text-muted);flex-wrap:wrap}.tutorial-header__meta-item{display:flex;align-items:center;gap:var(--sp-2)}.tutorial-step{margin-bottom:var(--sp-10);padding-bottom:var(--sp-8);border-bottom:1px solid var(--border-light);scroll-margin-top:80px}.tutorial-step:last-child{border-bottom:none}.tutorial-step__header{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}.tutorial-step__number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,var(--blue-500),var(--violet-500));color:#fff;font-size:var(--text-lg);font-weight:800;border-radius:var(--radius-full);flex-shrink:0}.tutorial-step__title{font-size:var(--text-xl);font-weight:700;color:var(--text-primary);margin:0;line-height:1.3}.tutorial-step__body{padding-left:56px}.tutorial-content li,.tutorial-content p{font-size:var(--text-base);color:var(--text-secondary);line-height:1.9;margin-bottom:var(--sp-5)}.tutorial-content h3,.tutorial-content h4{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);margin:var(--sp-8)0 var(--sp-4);line-height:1.4}.tutorial-content h4{font-size:var(--text-base);margin:var(--sp-6)0 var(--sp-3)}.tutorial-content ol,.tutorial-content ul{padding-left:var(--sp-6);margin-bottom:var(--sp-5)}.tutorial-content li{line-height:1.8;margin-bottom:var(--sp-2)}.tutorial-content ul li{list-style:disc}.tutorial-content ol li{list-style:decimal}.tutorial-info{background:var(--primary-bg);border-left:4px solid var(--primary);border-radius:0 var(--radius-md) var(--radius-md)0;padding:var(--sp-5) var(--sp-6);margin:var(--sp-6)0}.tutorial-info--warning{background:var(--warning-bg);border-left-color:var(--amber-500)}.tutorial-info--success{background:var(--emerald-100);border-left-color:var(--emerald-500)}.tutorial-info p,.tutorial-info__title{font-size:var(--text-sm);margin-bottom:var(--sp-2)}.tutorial-info__title{font-weight:700;line-height:1.4}.tutorial-info p{line-height:1.7}.tutorial-promo{background:linear-gradient(135deg,var(--primary-bg),var(--violet-100));border:1px solid var(--blue-100);border-radius:var(--radius-xl);padding:var(--sp-6) var(--sp-8);margin:var(--sp-8)0;display:flex;align-items:center;gap:var(--sp-6)}.tutorial-promo__icon{font-size:2rem;flex-shrink:0}.tutorial-promo__content{flex:1}.tutorial-promo__title{font-size:var(--text-base);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-2);line-height:1.4}.tutorial-promo__desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--sp-3)}body.dark .tutorial-info--warning{background:rgba(245,158,11,.1);border-left-color:var(--amber-500);color:#fbbf24}body.dark .tutorial-info--success{background:rgba(16,185,129,.1);border-left-color:var(--emerald-500);color:#34d399}body.dark .tutorial-info--warning .tutorial-info__title{color:#fbbf24}body.dark .tutorial-info--success .tutorial-info__title{color:#34d399}body.dark .tutorial-info{background:rgba(59,130,246,.1);border-left-color:var(--primary);color:#93c5fd}body.dark .tutorial-info p{color:#93c5fd}body.dark .tutorial-info .tutorial-info__title{color:#bfdbfe}body.dark .tutorial-promo{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));border-color:rgba(59,130,246,.2)}.sidebar-nav{background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow-sm)}.sidebar-nav__title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-light)}.sidebar-nav__list{list-style:none;padding:0;margin:0}.sidebar-nav__item{margin-bottom:var(--sp-1)}.sidebar-nav__link{display:block;padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm);color:var(--text-secondary);border-radius:var(--radius-md);transition:all var(--ease-fast);line-height:1.4}.sidebar-nav__link:hover{background:var(--bg-secondary);color:var(--text-primary)}.sidebar-nav__link.active{background:var(--primary-bg);color:var(--primary);font-weight:600}.sidebar-toc{background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--sp-4);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4)}.sidebar-toc__title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-light)}.sidebar-toc__list{list-style:none;padding:0;margin:0}.sidebar-toc__item{margin-bottom:var(--sp-2)}.sidebar-toc__link{display:block;font-size:var(--text-sm);color:var(--text-muted);padding:var(--sp-1)0;transition:color var(--ease-fast);line-height:1.4;border-left:2px solid var(--border-light);padding-left:var(--sp-3)}.sidebar-toc__link:hover{color:var(--primary)}.sidebar-toc__link.active{color:var(--primary);font-weight:600;border-left-color:var(--primary)}.tutorial-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--border-light)}.tutorial-nav__item{display:flex;flex-direction:column;padding:var(--sp-5) var(--sp-6);background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:all var(--ease-fast)}.content-nav__link:hover,.tutorial-nav__item:hover{box-shadow:var(--shadow-md);border-color:var(--primary)}.tutorial-nav__label{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.tutorial-nav__title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.tutorial-nav__item--next{text-align:right;align-items:flex-end}.content-wrapper{max-width:900px;margin:0 auto}.content-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--border-light)}.content-nav__item{display:flex}.content-nav__link{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);background:var(--bg-base);border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:all var(--ease-fast);flex:1}.content-nav__arrow{font-size:var(--text-xl);color:var(--primary);flex-shrink:0}.content-nav__content{display:flex;flex-direction:column;gap:var(--sp-1)}.content-nav__label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.content-nav__title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.content-nav__item:last-child .content-nav__link{justify-content:flex-end;text-align:right}@media (max-width:1024px){.tutorial-layout{gap:var(--sp-6)}.tutorial-sidebar{width:240px}}@media (max-width:768px){.tutorial-sidebar{display:none}.tutorial-layout{gap:var(--sp-6)}.tutorial-content{max-width:100%;width:100%}}@media (max-width:640px){.tutorial-layout{min-height:auto}.tutorial-content{overflow-x:hidden;max-width:100%}.tutorial-header h1{font-size:var(--text-2xl)}.tutorial-step__body{padding-left:0}.tutorial-step__header{flex-wrap:wrap}.tutorial-promo{flex-direction:column;text-align:center;padding:var(--sp-5)}.table-responsive{margin:0 calc(var(--sp-4)*-1);padding:0 var(--sp-4)}.content-nav,.tutorial-nav{grid-template-columns:1fr}.content-nav__link{padding:var(--sp-4)}}.cms-post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}.cms-post-grid .card{transition:transform .3s ease,box-shadow .3s ease}.cms-post-grid .card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.15)}.bg-warp-fixed{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;background-size:cover;background-position:center;background-attachment:fixed}.badge-ripro{position:absolute;top:var(--sp-2);left:var(--sp-2);z-index:10;padding:4px 10px;font-size:12px;font-weight:600;border-radius:4px;background:rgba(59,130,246,.9);color:#fff}.badge-ripro--vip{background:linear-gradient(135deg,#f59e0b,#d97706)}.badge-ripro--hot{background:linear-gradient(135deg,#ef4444,#dc2626)}.badge-ripro--new{background:linear-gradient(135deg,#10b981,#059669)}@media (max-width:991px){.d-lg-block,.d-lg-flex{display:none!important}}@media (min-width:992px){.d-md-none{display:none!important}}@media (max-width:767px){.d-md-block{display:none!important}}.shadow-hover{transition:box-shadow .3s ease,transform .3s ease}.shadow-hover:hover{box-shadow:0 8px 30px rgba(59,130,246,.25);transform:translateY(-2px)}.shadow-lg-custom{box-shadow:0 10px 40px rgba(0,0,0,.12)}.catbox{background:var(--bg-elevated);border-radius:12px;overflow:hidden;margin-bottom:var(--sp-4)}.catbox-title{border-bottom:1px solid var(--border);font-weight:600;font-size:var(--text-lg);color:var(--text-primary)}.catbox-content,.catbox-title{padding:var(--sp-4)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.avatar--sm{width:32px;height:32px}.avatar--lg{width:56px;height:56px}.avatar-border{border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}.bg-btns{display:flex;gap:var(--sp-2);flex-wrap:wrap}.animate-fade-in{animation:fadeInUp .5s ease forwards}.animate-delay-1{animation-delay:.1s}.animate-delay-2{animation-delay:.2s}.animate-delay-3{animation-delay:.3s}.animate-delay-4{animation-delay:.4s}.glass{background:rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3)}body.dark .glass{background:rgba(15,17,23,.8);border-color:rgba(255,255,255,.1)}.gradient-border{position:relative;background:var(--bg-elevated);border-radius:12px}.gradient-border::before{content:"";position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.tips-badge{position:absolute;top:var(--sp-2);left:var(--sp-2);z-index:5;padding:4px 8px;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:4px;letter-spacing:.5px}.tips-badge--top{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.tips-badge--vip{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff}.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;cursor:pointer;padding:4px}.burger span{display:block;width:100%;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s ease}@media (max-width:991px){.burger{display:flex}}.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.burger.active span:nth-child(2){opacity:0}.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}