.tut-hero{padding:130px 24px 60px;background:var(--k-cream);border-bottom:3px solid var(--k-ink);position:relative;overflow:hidden}.tut-hero:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:var(--k-lemon);top:-160px;right:-140px;z-index:0;animation:splat-morph 12s ease-in-out infinite}.tut-hero-inner{max-width:780px;margin:0 auto;position:relative;z-index:2}.tut-crumbs{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--k-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}.tut-crumbs a{color:var(--k-muted);transition:color .15s}.tut-crumbs a:hover{color:var(--k-ink)}.tut-crumbs .sep{opacity:.35}.tut-meta{display:flex;gap:20px;font-family:var(--font-mono);font-size:12px;color:var(--k-muted);letter-spacing:.05em;margin:24px 0 0;flex-wrap:wrap}.tut-meta span:before{content:"◈ ";opacity:.5}.tut-hero h1{font-family:var(--font-display);font-size:clamp(34px,4.5vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--k-ink);margin-bottom:18px}.tut-hero h1 .hl{background:var(--k-lemon);padding:0 6px}.tut-hero-lead{font-size:19px;line-height:1.55;color:var(--k-ink);opacity:.82;max-width:640px}.tut-body{padding:60px 24px 100px;background:var(--k-paper)}.tut-body-inner{max-width:780px;margin:0 auto;font-size:17px;line-height:1.7;color:var(--k-ink)}.tut-body-inner h2{font-family:var(--font-display);font-size:clamp(28px,3.2vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:60px 0 20px;color:var(--k-ink)}.tut-body-inner h2:first-child{margin-top:0}.tut-body-inner h2 .hl{background:var(--k-lemon);padding:0 5px}.tut-body-inner h3{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:40px 0 14px;color:var(--k-ink)}.tut-body-inner p{margin:0 0 20px}.tut-body-inner p b{background:var(--k-lemon);padding:0 3px;font-weight:700}.tut-body-inner code{font-family:var(--font-mono);background:var(--k-cream);padding:2px 7px;border-radius:4px;border:1px solid rgba(10,26,15,.12);font-size:14px;font-weight:600}.tut-body-inner ul{list-style:none;margin:0 0 24px;padding:0}.tut-body-inner ul li{padding:8px 0 8px 24px;position:relative}.tut-body-inner ul li:before{content:"●";position:absolute;left:0;color:var(--k-coral);font-size:12px;top:12px}.tut-body-inner ol{margin:0 0 24px;padding-left:24px}.tut-body-inner ol li{padding:6px 0 6px 8px}.tut-body-inner .tut-tbl{width:100%;margin:24px 0;background:var(--k-white);border:2.5px solid var(--k-ink);border-radius:var(--r-md);box-shadow:5px 5px 0 var(--k-ink);overflow:hidden;border-collapse:collapse;font-size:15px}.tut-body-inner .tut-tbl thead th{padding:14px 16px;background:var(--k-ink);color:var(--k-cream);font-family:var(--font-display);font-weight:800;text-align:left;border-right:1px solid rgba(232,255,59,.15)}.tut-body-inner .tut-tbl thead th:last-child{border-right:none}.tut-body-inner .tut-tbl tbody td{padding:12px 16px;border-bottom:1px solid rgba(10,26,15,.08);border-right:1px solid rgba(10,26,15,.05);vertical-align:top}.tut-body-inner .tut-tbl tbody tr:last-child td{border-bottom:none}.tut-body-inner .tut-tbl tbody td:first-child{font-family:var(--font-display);font-weight:800;background:var(--k-cream)}.tut-callout{margin:30px 0;padding:18px 22px;background:var(--k-lemon-soft);border-left:4px solid var(--k-lemon);border-radius:4px;font-size:15.5px;line-height:1.55}.tut-callout b{color:var(--k-green-dark)}.tut-img{display:block;width:100%;height:auto;margin:32px 0;border:3px solid var(--k-ink);border-radius:var(--r-md);box-shadow:6px 6px 0 var(--k-ink);background:var(--k-white)}.tut-img-cap{display:block;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--k-muted);letter-spacing:.04em;margin:-18px 0 32px}.tut-hero-img{display:block;width:100%;height:auto;margin:30px 0 0;border:3px solid var(--k-ink);border-radius:var(--r-md);box-shadow:6px 6px 0 var(--k-ink)}.tut-cta-box{margin:40px 0;padding:28px 30px;background:var(--k-ink);color:var(--k-cream);border:3px solid var(--k-ink);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--k-lemon);text-align:center}.tut-cta-box h3{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--k-cream);margin-bottom:8px}.tut-cta-box p{font-size:15px;color:#f5efe0bf;margin-bottom:20px}@media(max-width:900px){.tut-hero{padding:100px 18px 40px}.tut-body{padding:40px 18px 60px}.tut-body-inner{font-size:16px}.tut-body-inner .tut-tbl{font-size:13px}.tut-body-inner .tut-tbl thead th,.tut-body-inner .tut-tbl tbody td{padding:10px 12px}}
