.tutorial-main{
padding:0 0 80px
}
.tutorial-content{
max-width:800px;
margin:0 auto;
padding:40px 0
}
.tutorial-header{
margin-bottom:48px;
text-align:center
}
.tutorial-header h1{
font-size:2.25rem;
font-weight:700;
color:var(--primary);
margin-bottom:16px;
line-height:1.25
}
.tutorial-meta{
font-size:1.05rem;
color:var(--text-light);
line-height:1.6
}
.tutorial-section{
margin-bottom:40px
}
.tutorial-section h2{
font-size:1.5rem;
font-weight:600;
color:var(--primary);
margin-bottom:20px;
padding-bottom:12px;
border-bottom:2px solid var(--border)
}
.tutorial-section h3{
font-size:1.2rem;
font-weight:600;
color:var(--primary-light);
margin:28px 0 16px
}
.tutorial-section p{
font-size:1rem;
line-height:1.8;
color:var(--text);
margin-bottom:16px
}
.tutorial-section ul,
.tutorial-section ol{
margin:20px 0;
padding-left:28px
}
.tutorial-section li{
margin-bottom:12px;
line-height:1.7;
color:var(--text)
}
.tutorial-section strong{
color:var(--primary);
font-weight:600
}
.tutorial-section code{
background:var(--bg-alt);
border:1px solid var(--border);
padding:2px 8px;
border-radius:4px;
font-family:'SF Mono','Consolas',monospace;
font-size:0.875rem
}
.tutorial-section pre{
background:var(--primary);
color:#e2e8f0;
padding:20px 24px;
border-radius:var(--radius-lg);
overflow-x:auto;
margin:24px 0;
font-size:0.9rem;
line-height:1.6
}
.tutorial-section pre code{
background:none;
border:none;
padding:0;
color:inherit
}
.tutorial-cta{
background:linear-gradient(135deg,var(--bg-alt) 0%,var(--bg-dark) 100%);
border:1px solid var(--border);
border-radius:var(--radius-xl);
padding:40px;
text-align:center;
margin-top:48px
}
.tutorial-cta h3{
font-size:1.35rem;
font-weight:600;
color:var(--primary);
margin-bottom:12px
}
.tutorial-cta p{
color:var(--text-light);
margin-bottom:24px;
font-size:1rem
}
.legal-content .tutorial-section ul{
list-style:disc
}
.legal-content .tutorial-section ul li{
color:var(--text)
}
.tip-box{
background:linear-gradient(135deg,#ecfdf5,#d1fae5);
border-left:4px solid var(--accent);
padding:20px 24px;
border-radius:var(--radius);
margin:24px 0
}
.tip-box h4{
color:var(--accent-dark);
margin-bottom:8px;
font-size:1rem;
font-weight:600
}
.tip-box p{
margin-bottom:0;
color:var(--text)
}
.warning-box{
background:linear-gradient(135deg,#fffbeb,#fef3c7);
border-left:4px solid var(--warning);
padding:20px 24px;
border-radius:var(--radius);
margin:24px 0
}
.warning-box h4{
color:#92400e;
margin-bottom:8px;
font-size:1rem;
font-weight:600
}
.warning-box p{
margin-bottom:0;
color:var(--text)
}
.tutorial-nav{
display:flex;
justify-content:space-between;
margin-top:48px;
padding-top:32px;
border-top:1px solid var(--border)
}
.tutorial-nav a{
display:flex;
align-items:center;
gap:8px;
color:var(--accent);
font-weight:500
}
.tutorial-nav a:hover{
color:var(--accent-dark)
}
@media(max-width:768px){
.tutorial-content{
padding:24px 0
}
.tutorial-header{
margin-bottom:32px
}
.tutorial-header h1{
font-size:1.75rem
}
.tutorial-section h2{
font-size:1.25rem
}
.tutorial-cta{
padding:32px 24px
}
.tutorial-cta h3{
font-size:1.15rem
}
}