.tut-intro{text-align:center;max-width:720px;color:var(--muted);margin:0 auto 20px;font-size:1.02rem;line-height:1.6}.tut-intro strong{color:var(--text,#eaf6ee)}.tut-roles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;max-width:820px;margin:0 auto 28px;display:grid}.tut-role{border:1px solid var(--line);background:var(--panel-grad);box-shadow:var(--card-shadow);border-radius:14px;align-items:center;gap:10px;padding:10px 12px;display:flex}.tut-role-badge{font-size:1.3rem;line-height:1}.tut-role-txt{flex-direction:column;gap:1px;display:flex}.tut-role-name{color:var(--accent);font-size:.92rem;font-weight:800}.tut-role-desc{color:var(--muted);font-size:.76rem;line-height:1.35}.tut-timeline{max-width:820px;margin:0 auto;padding-left:8px;position:relative}.tut-timeline:before{content:"";background:linear-gradient(to bottom, color-mix(in srgb, var(--accent) 55%, transparent), var(--line) 85%);width:2px;position:absolute;top:14px;bottom:14px;left:26px}.tut-step{grid-template-columns:56px 1fr;gap:14px;margin-bottom:18px;display:grid;position:relative}.tut-step:last-child{margin-bottom:0}.tut-dot{z-index:1;color:#06140d;background:var(--grad-accent);width:52px;height:52px;box-shadow:var(--glow-accent), 0 6px 16px #0006;border:2px solid color-mix(in srgb, var(--accent) 60%, #fff 10%);border-radius:50%;place-items:center;font-size:1.15rem;font-weight:900;display:grid;position:relative}.tut-card{border:1px solid var(--line);background:var(--panel-grad);box-shadow:var(--card-shadow);border-radius:16px;padding:16px 18px;transition:border-color .18s,transform .18s}.tut-card:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line));transform:translateY(-1px)}.tut-head{flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin-bottom:6px;display:flex}.tut-title{color:var(--text,#eaf6ee);font-size:1.12rem;font-weight:800}.tut-who{text-transform:uppercase;letter-spacing:.04em;background:color-mix(in srgb, var(--accent) 16%, transparent);border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line));color:var(--accent);border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:700}.tut-body{color:var(--muted);margin:0 0 10px;font-size:.95rem;line-height:1.6}.tut-body strong{color:var(--text,#eaf6ee)}.tut-list{flex-direction:column;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.tut-list li{color:var(--muted);padding-left:22px;font-size:.9rem;line-height:1.5;position:relative}.tut-list li:before{content:"✓";color:var(--accent);font-weight:900;position:absolute;top:0;left:0}.tut-actions{flex-wrap:wrap;gap:8px;display:flex}.tut-btn{border:1px solid var(--line);background:var(--panel);color:var(--text,#eaf6ee);border-radius:10px;align-items:center;gap:6px;padding:8px 13px;font-size:.86rem;font-weight:700;text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s;display:inline-flex}.tut-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 45%, transparent)}.tut-btn.primary{background:var(--grad-accent);color:#06140d;border-color:#0000}.tut-btn.primary:hover{color:#06140d;box-shadow:var(--glow-accent)}.tut-outro{border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));background:var(--panel-grad);max-width:820px;box-shadow:var(--card-shadow);text-align:center;border-radius:16px;margin:28px auto 0;padding:18px 20px}.tut-outro h2{color:var(--accent);margin:0 0 6px;font-size:1.1rem}.tut-outro p{color:var(--muted);margin:0 0 12px;line-height:1.6}@media (max-width:540px){.tut-step{grid-template-columns:44px 1fr;gap:10px}.tut-timeline:before{left:21px}.tut-dot{width:42px;height:42px;font-size:1rem}.tut-card{padding:13px 14px}}.tut-hero{text-align:center;border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line));background:radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), linear-gradient(180deg, #ffffff0d, #fff0 40%), var(--panel-grad);max-width:860px;box-shadow:var(--card-shadow), inset 0 1px 0 #ffffff14;border-radius:22px;margin:6px auto 26px;padding:26px 22px 24px}.tut-hero-eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-size:.78rem;font-weight:800;display:inline-block}.tut-hero-title{margin:0 0 10px;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:900;line-height:1.1}.tut-hero-sub{max-width:640px;color:var(--muted);margin:0 auto;font-size:1rem;line-height:1.6}.tut-hero-sub strong{color:var(--text,#eaf6ee)}.tut-section-h{max-width:860px;color:var(--text,#eaf6ee);align-items:center;gap:8px;margin:26px auto 12px;font-size:1.04rem;font-weight:900;display:flex}.tut-features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:860px;margin:0 auto 8px;display:grid}.tut-feat{--tone:var(--accent);border:1px solid color-mix(in srgb, #fff 8%, var(--line));background:linear-gradient(180deg, #ffffff0f, #fff0 42%), var(--panel-grad);box-shadow:var(--card-shadow), inset 0 1px 0 #ffffff17, inset 0 -10px 26px #00000038;border-radius:16px;align-items:flex-start;gap:12px;padding:14px 15px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.tut-feat:before{content:"";background:var(--tone);width:4px;position:absolute;top:0;bottom:0;left:0}.tut-feat:hover{border-color:var(--tone);box-shadow:0 18px 40px -14px var(--tone);transform:translateY(-3px)}.tut-feat.tone-accent{--tone:var(--accent)}.tut-feat.tone-pop{--tone:var(--pop,var(--accent))}.tut-feat-ico{background:linear-gradient(160deg, #ffffff2e, #fff0 50%), linear-gradient(160deg, color-mix(in srgb, var(--tone) 26%, transparent), color-mix(in srgb, var(--tone) 8%, transparent));border:1px solid color-mix(in srgb, var(--tone) 40%, var(--line));width:42px;height:42px;box-shadow:inset 0 1px 0 #ffffff40, inset 0 0 18px -8px var(--tone);border-radius:12px;flex:none;place-items:center;font-size:1.35rem;display:grid}.tut-feat-txt{flex-direction:column;gap:3px;min-width:0;display:flex}.tut-feat-name{color:var(--text,#eaf6ee);font-size:.98rem;font-weight:900}.tut-feat-desc{color:var(--muted);font-size:.82rem;line-height:1.4}.tut-role,.tut-card,.tut-outro{background-image:linear-gradient(180deg, #ffffff0d, #fff0 42%), var(--panel-grad);border-color:color-mix(in srgb, #fff 7%, var(--line));box-shadow:var(--card-shadow), inset 0 1px 0 #ffffff12}