:root { --color-primary: #0077cc; --color-secondary: #34495e; --color-background: #f4f7f9; --color-paper: #ffffff; --color-light-highlight: #e6f7ff; --color-border: #e0e6ed; --color-form-border: #bdc3c7; --color-focus: #ffaa00; --shadow-subtle: 0 6px 15px rgba(0, 0, 0, 0.08); } body {
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.65;
color: var(--color-secondary);
background-color: var(--color-background);
margin: 0; 
}
.tutorial-container {
max-width: 960px; margin: 48px auto; padding: 30px 40px; 
background-color: var(--color-paper);
border-radius: 12px;
box-shadow: var(--shadow-subtle);
} .tutorial-container h1, .tutorial-container h2, .tutorial-container h3, .tutorial-container h4 {
color: var(--color-primary);
margin-top: 1.75em;
margin-bottom: 0.75em;
font-weight: 600;
}
.tutorial-container h1 { 
font-size: 2.5em; 
text-align: center; margin-bottom: 1.5em; 
color: var(--color-secondary);
}
.tutorial-container h2 { 
font-size: 1.9em; 
border-bottom: 2px solid var(--color-border);
padding-bottom: 0.6em; 
}
.tutorial-container h3 { 
font-size: 1.55em; 
color: var(--color-primary); 
}
.tutorial-container h4 { 
font-size: 1.25em; 
color: #7f8c8d;
font-style: italic;
margin-top: 1.2em;
}
.tutorial-container .lead,
.tutorial-container .text-center {
text-align: center !important;
} .tutorial-container ul {
list-style-type: none; 
padding-left: 0;
margin-bottom: 1.5em;
}
.tutorial-container ul li {
padding-left: 1.2em;
position: relative;
margin-bottom: 0.5em;
}
.tutorial-container ul li::before {
content: "›";
color: var(--color-primary);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.tutorial-container .highlight {
background-color: var(--color-light-highlight);
padding: 15px 20px;
border-left: 6px solid var(--color-primary);
margin: 1.5em 0;
border-radius: 6px;
font-style: italic;
} .tutorial-container .card {
margin-bottom: 2em;
padding: 0; border: 1px solid var(--color-border);
border-radius: 8px;
background-color: var(--color-light-highlight) !important; }
.tutorial-container .card-body {
background-color: transparent;
padding: 20px;
}
.tutorial-container .disclaimer {
font-size: 0.9em;
color: #95a5a6;
margin-top: 3em;
border-top: 1px dashed var(--color-border);
padding-top: 1.5em;
text-align: center;
} .tutorial-container .btn-primary {
display: inline-block;
padding: 10px 20px;
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.tutorial-container .btn-primary:hover {
background-color: #005a99;
border-color: #005a99;
}  .tutorial-container .form-check-input { width: 20px;
height: 20px;
margin-top: 0.25em;
border: 2px solid var(--color-form-border); background-color: var(--color-paper);
cursor: pointer; -webkit-appearance: none;
-moz-appearance: none;
appearance: none; 
} .tutorial-container .form-check-input:focus {
border-color: var(--color-focus);
box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.4); 
outline: none;
} .tutorial-container .form-check-input[type="checkbox"] {
border-radius: 4px;
}
.tutorial-container .form-check-input[type="checkbox"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
} .tutorial-container .form-check-input[type="radio"] {
border-radius: 50%; }
.tutorial-container .form-check-input[type="radio"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e") !important;
} .tutorial-container .form-check-label {
padding-left: 0.5em; 
cursor: pointer;
}