.tutorialSectionDiv1 {
display: block;
margin: 8px 0;
padding: 24px;
background: var(--card-bg);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: clamp(0.85rem, 2.5vw, 0.95rem);
line-height: 1.6;
}
.tutorialSectionDiv1 a:link, .tutorialSectionDiv1 a:visited {
color: var(--accent-purple);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid transparent;
}
.tutorialSectionDiv1 a:hover {
color: var(--accent-cyan);
border-bottom-color: var(--accent-cyan);
}
.tutorialSectionDiv1 a:focus-visible {
outline: 3px solid var(--accent-cyan);
outline-offset: 2px;
border-radius: 6px;
}
.tutorialSectionTextDiv1 {
width: 100%;
margin: 16px 0;
padding: 0;
color: var(--text-secondary);
font-size: clamp(0.85rem, 2.5vw, 0.95rem);
font-weight: 400;
line-height: 1.7;
}
.tutorialSectionTextDiv1 p {
margin-bottom: 12px;
}
.tutorialSectionTextDiv1 p:last-child {
margin-bottom: 0;
}
.tutorialSectionTitleSpan1 {
margin: 0 0 12px 0;
padding: 0 0 6px 0;
color: var(--accent-purple);
font-size: clamp(0.95rem, 2.5vw, 1.05rem);
font-weight: 700;
display: inline-block;
line-height: 1.3;
vertical-align: baseline;
}
.tutorialSubSectionTitleSpan1 {
margin: 12px 0 8px 0;
padding: 0 0 6px 0;
color: var(--text-primary);
font-weight: 700;
display: block;
border-bottom: 2px solid var(--border-subtle);
line-height: 1.3;
}
.tutorialSectionTitleSeparatorSpan1 {
margin: 0 8px;
padding: 0;
color: var(--text-muted);
font-size: clamp(1.1rem, 3vw, 1.3rem);
font-weight: 300;
display: inline-block;
vertical-align: baseline;
}
.ol_decimal_1, .ol_upper_latin_1, .ol_lower_latin_1, .ol_upper_roman_1, .ol_lower_roman_1 {
padding-left: 20px;
margin: 8px 0;
}
.ol_decimal_contents_1 {
padding-left: 28px;
margin: 8px 0;
font-size: clamp(0.85rem, 2.5vw, 0.95rem);
line-height: 1.5;
}
.ol_decimal_contents_1 .ol_lower_roman_contents_1 {
margin-top: 8px;
margin-bottom: 8px;
}
.ol_lower_latin_contents_1 {
padding-left: 24px;
margin: 6px 0;
font-size: clamp(0.75rem, 2vw, 0.85rem);
line-height: 1.4;
}
.ol_lower_roman_contents_1 {
padding-left: 24px;
margin: 6px 0;
font-size: clamp(0.8rem, 2vw, 0.9rem);
line-height: 1.5;
}
.ol_lower_roman_contents_1 .ol_lower_latin_contents_1 {
margin-top: 6px;
margin-bottom: 6px;
}
.ol_decimal_1 li, .ol_upper_latin_1 li, .ol_upper_roman_1 li, .ol_lower_roman_1 li, .ol_lower_latin_1 li {
margin: 3px 0;
padding: 2px 0;
font-size: clamp(0.8rem, 2.5vw, 0.9rem);
font-weight: 400;
color: var(--text-secondary);
line-height: 1.6;
}
.ol_decimal_contents_1 li {
margin: 4px 0;
padding: 3px 0;
font-size: clamp(0.85rem, 2.5vw, 0.95rem);
font-weight: 500;
color: var(--text-secondary);
line-height: 1.5;
}
.ol_lower_roman_contents_1 li {
margin: 3px 0;
padding: 2px 0;
font-size: clamp(0.8rem, 2vw, 0.9rem);
font-weight: 400;
color: var(--text-secondary);
line-height: 1.5;
}
.ol_lower_latin_contents_1 li {
margin: 3px 0;
padding: 2px 0;
font-size: clamp(0.75rem, 2vw, 0.85rem);
font-weight: 400;
color: var(--text-secondary);
line-height: 1.4;
}
.ol_decimal_1>li::marker, .ol_decimal_contents_1>li::marker, .ol_upper_latin_1>li::marker,
.ol_lower_latin_1>li::marker, .ol_lower_latin_contents_1>li::marker, .ol_upper_roman_1>li::marker,
.ol_lower_roman_1>li::marker, .ol_lower_roman_contents_1>li::marker {
color: var(--accent-purple);
font-weight: 700;
font-size: 1.1em;
}
.ol_decimal_contents_1>li::marker {
color: var(--accent-purple);
font-weight: 700;
font-size: 1em;
}
.ol_lower_roman_contents_1>li::marker {
color: var(--accent-purple);
font-weight: 700;
font-size: 0.95em;
}
.ol_lower_latin_contents_1>li::marker {
color: var(--accent-purple);
font-weight: 700;
font-size: 0.9em;
}
.ul_square_1, .ul_circle_1, .ul_disc_1, .ul_none_2 {
padding-left: 24px;
margin: 8px 0;
}
.ul_square_1 li, .ul_circle_1 li, .ul_disc_1 li, .ul_none_2 li {
margin: 3px 0;
padding: 2px 0;
font-size: clamp(0.8rem, 2.5vw, 0.9rem);
font-weight: 400;
color: var(--text-secondary);
line-height: 1.5;
}
.ul_square_1 li::before {
content: '■';
color: var(--accent-purple);
font-weight: bold;
position: absolute;
left: -24px;
font-size: 1.1em;
}
.ul_circle_1 li::before {
content: '○';
color: var(--accent-cyan);
font-weight: bold;
position: absolute;
left: -24px;
font-size: 1.1em;
}
.ul_disc_1 li::before {
content: '●';
color: var(--text-muted);
font-weight: bold;
position: absolute;
left: -24px;
font-size: 1.1em;
}
.ul_none_1 {
margin: 16px 0 0 12px;
padding: 0;
}
span.linkHintSpan1 {
margin: 0 3px;
padding: 3px 6px;
color: var(--text-primary);
background: var(--subtle-bg);
font-size: clamp(0.7rem, 2vw, 0.8rem);
display: inline-block;
font-weight: 600;
border: 1px solid var(--border-subtle);
}
span.spanstyle1 {
color: var(--accent-purple);
margin: 0 0 0 6px;
font-style: italic;
font-size: clamp(0.8rem, 2vw, 0.9rem);
font-weight: 600;
display: inline-block;
}
span.codeLinkSpan1 {
color: var(--accent-purple);
margin: 0 0 0 6px;
font-size: clamp(0.8rem, 2vw, 0.9rem);
font-weight: 600;
display: inline-block;
}
span.codeLinkSpan1:hover {
color: var(--accent-cyan);
}
span.highlightSpan1 {
color: var(--text-primary);
margin: 0 2px;
font-size: clamp(0.8rem, 2vw, 0.9rem);
font-weight: 600;
background: #fef3c7;
padding: 3px 6px;
display: inline-block;
border: 1px solid #f59e0b;
}
div.divstyle1 {
margin: 0 0 0 6px;
}
a.tutorialMainPageA1 {
margin: 0;
padding: 0 0 0 6px;
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-weight: 800;
color: var(--text-primary);
text-decoration: none;
display: inline-block;
vertical-align: baseline;
}
a.tutorialMainPageA1:hover {
text-decoration: none;
}
a.tutorialMainPageA1:focus-visible {
outline: 3px solid var(--accent-cyan);
outline-offset: 2px;
border-radius: 6px;
}
.img1 {
margin: 20px 0;
padding: 0;
max-width: 100%;
height: auto;
border: 1px solid var(--border-subtle);
}
.tutorialSectionHr1 {
border: none;
height: 1px;
background: var(--border-subtle);
margin: 12px 0;
}
.href1 a:link, .href1 a:visited {
color: var(--accent-purple);
text-decoration: none;
border-bottom: 1px solid transparent;
font-weight: 600;
}
.href1 a:hover {
color: var(--accent-cyan);
border-bottom-color: var(--accent-cyan);
}
.href1 a:focus-visible {
outline: 3px solid var(--accent-cyan);
outline-offset: 2px;
border-radius: 6px;
}
img {
margin: 16px 0;
padding: 0;
max-width: 100%;
height: auto;
border: 1px solid var(--border-subtle);
}
.section-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin: var(--spacing-2xl) 0;
padding: var(--spacing-lg);
background: var(--subtle-bg);
border: 1px solid var(--border-subtle);
}
.nav-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
background: var(--card-bg);
color: var(--accent-purple);
text-decoration: none;
border: 1px solid var(--border-subtle);
font-weight: 600;
min-height: 44px;
}
.nav-button:hover {
background: var(--accent-purple);
color: white;
text-decoration: none;
}
.nav-button:focus-visible {
outline: 3px solid var(--accent-cyan);
outline-offset: 3px;
}
.nav-button.disabled {
opacity: 0.5;
pointer-events: none;
}