/* Copyright (c) 2026 AlgoSpecial.com. All rights reserved. */
.tut-wrap{max-width:1120px;margin:0 auto;padding:0 18px 70px}
.tut-breadcrumb{display:flex;flex-wrap:wrap;gap:7px;color:#8ea3bb;font-size:.8rem;margin-bottom:16px}
.tut-breadcrumb a{color:#67e8f9;text-decoration:none}
.tut-hero{padding:38px 32px;border:1px solid rgba(34,211,238,.24);border-radius:20px;background:linear-gradient(135deg,#0b1220,#102033 60%,#0b1220);margin-bottom:22px}
.tut-kicker{display:inline-block;padding:5px 10px;border:1px solid rgba(94,234,212,.35);border-radius:999px;color:#5eead4;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.tut-hero h1{color:#f8fafc;font-size:clamp(1.85rem,4vw,3rem);line-height:1.14;margin:0 0 13px}
.tut-hero p{color:#a9b8cb;line-height:1.8;max-width:850px;margin:0;font-size:1.03rem}
.tut-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tut-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:9px;background:#22d3ee;color:#06131c;font-weight:800;text-decoration:none;border:1px solid #22d3ee}
.tut-btn.secondary{background:transparent;color:#e2e8f0;border-color:#3a4a63}
.tut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0}
.tut-card{display:block;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0b1424;text-decoration:none}
.tut-card:hover{border-color:#22d3ee}
.tut-card strong{display:block;color:#f8fafc;margin-bottom:5px}
.tut-card span{display:block;color:#8ea3bb;font-size:.86rem;line-height:1.65}
.tut-card em{display:inline-block;margin-top:9px;color:#5eead4;font-style:normal;font-size:.78rem;font-weight:700}
.tut-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;align-items:start}
.tut-article{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(15,23,42,.76);padding:26px}
.tut-article h1{font-size:clamp(1.8rem,3.6vw,2.7rem);color:#f8fafc;line-height:1.16;margin:0 0 12px}
.tut-article h2{color:#67e8f9;font-size:1.45rem;line-height:1.3;margin:32px 0 12px}
.tut-article h3{color:#a5f3fc;font-size:1.12rem;margin:24px 0 9px}
.tut-article p,.tut-article li{color:#b6c5d8;line-height:1.8;font-size:1.01rem}
.tut-article ul,.tut-article ol{padding-left:22px}
.tut-article li{margin:5px 0}
.tut-meta{display:flex;flex-wrap:wrap;gap:12px;color:#8ea3bb;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:15px;margin-bottom:20px}
.tut-article code{font-family:Consolas,monospace;color:#a5f3fc;background:#07101d;border-radius:4px;padding:2px 5px;font-size:.9em}
.tut-article pre{background:#050b15;border:1px solid rgba(34,211,238,.2);border-radius:10px;padding:15px;overflow:auto;margin:16px 0;line-height:1.55}
.tut-article pre code{background:none;padding:0;color:#c7f9f1;font-size:.84rem;white-space:pre}
.tut-note{padding:14px 16px;border-left:3px solid #f59e0b;border-radius:0 9px 9px 0;background:rgba(245,158,11,.08);color:#fde8b5;line-height:1.75;margin:18px 0}
.tut-toc{padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#0b1424;margin:20px 0}
.tut-toc strong{display:block;color:#f8fafc;margin-bottom:8px}
.tut-toc a{display:block;color:#67e8f9;text-decoration:none;font-size:.88rem;padding:3px 0}
.tut-aside{position:sticky;top:100px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0b1424;padding:18px}
.tut-aside h3{color:#67e8f9;font-size:.95rem;margin:0 0 9px}
.tut-aside a{display:block;color:#b6c5d8;text-decoration:none;font-size:.85rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tut-aside a:hover{color:#5eead4}
.tut-table-wrap{overflow-x:auto;margin:16px 0}
.tut-table{width:100%;border-collapse:collapse;font-size:.88rem}
.tut-table th,.tut-table td{border:1px solid rgba(255,255,255,.09);padding:9px 11px;text-align:left;vertical-align:top;color:#b6c5d8}
.tut-table th{background:rgba(34,211,238,.08);color:#e2e8f0}
.tut-faq details{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.tut-faq summary{cursor:pointer;color:#f1f5f9;font-weight:700}
.tut-faq p{margin:7px 0 0}
.tut-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.tut-links a{color:#5eead4;text-decoration:none;font-weight:600;font-size:.9rem}
.tut-disclaimer{color:#64748b;font-size:.78rem;line-height:1.7;border-top:1px solid rgba(255,255,255,.08);padding-top:15px;margin-top:24px}
.tut-code-label{display:inline-block;background:#0e7490;color:#ecfeff;border-radius:5px 5px 0 0;padding:4px 8px;font-size:.72rem;font-weight:700;margin-bottom:-16px;position:relative;top:10px}
@media(max-width:900px){.tut-layout{grid-template-columns:1fr}.tut-aside{position:static}.tut-hero{padding:30px 20px}.tut-article{padding:20px}}
@media(max-width:520px){.tut-actions{flex-direction:column}.tut-btn{width:100%}.tut-article pre{font-size:.78rem}.tut-article h2{font-size:1.3rem}}