.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 20px;
 background-color: #fff;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 border-radius: 8px;
}

h1 {
 color: #2c3e50;
 font-size: 2.5em;
 margin-bottom: 30px;
 text-align: center;
 line-height: 1.2;
}
h2 {
 color: #34495e;
 font-size: 1.8em;
 margin-top: 40px;
 margin-bottom: 20px;
 padding-bottom: 10px;
 border-bottom: 2px solid #eee;
}
h3 {
 color: #7f8c8d;
 font-size: 1.3em;
 margin: 15px 0;
}

.toc {
 background-color: #f8f9fa;
 padding: 20px;
 border-radius: 8px;
 margin-bottom: 30px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.toc h2 {
 margin-top: 0;
 color: #2c3e50;
 font-size: 1.5em;
}
.toc ul {
 list-style-type: none;
 padding-left: 20px;
}
.toc li {
 margin: 10px 0;
}
.toc a {
 color: #3498db;
 text-decoration: none;
 transition: color 0.3s ease;
}
.toc a:hover {
 color: #2980b9;
 text-decoration: underline;
}

.section {
 margin-bottom: 40px;
 padding-bottom: 20px;
 border-bottom: 1px solid #eee;
}

.rule-box {
 background-color: #f8f9fa;
 padding: 20px;
 border-left: 4px solid #3498db;
 margin: 15px 0;
 border-radius: 0 8px 8px 0;
 transition: transform 0.3s ease;
}
.rule-box:hover {
 transform: translateX(5px);
}
.rule-box ul, .rule-box ol {
 padding-left: 20px;
 margin: 10px 0;
}
.rule-box li {
 margin: 5px 0;
}

.formula {
 font-family: "Courier New", monospace;
 background-color: #ecf0f1;
 padding: 5px 10px;
 border-radius: 4px;
 display: inline-block;
 margin: 2px 0;
}

@media screen and (max-width: 1200px) {
 .container {
 margin: 0 20px;
 }
h1 {
 font-size: 2.2em;
 }
h2 {
 font-size: 1.6em;
 }
}
@media screen and (max-width: 992px) {
 .container {
 margin: 0 15px;
 }
h1 {
 font-size: 2em;
 }
.rule-box {
 padding: 15px;
 }
}
@media screen and (max-width: 768px) {
 body {
 font-size: 15px;
 }
.container {
 padding: 15px;
 }
h1 {
 font-size: 1.8em;
 margin-bottom: 20px;
 }
h2 {
 font-size: 1.4em;
 margin-top: 30px;
 }
h3 {
 font-size: 1.2em;
 }
.toc {
 padding: 15px;
 }
.rule-box {
 padding: 12px;
 }
.formula {
 padding: 3px 8px;
 }
}
@media screen and (max-width: 576px) {
 body {
 font-size: 14px;
 }
.container {
 margin: 0 10px;
 padding: 10px;
 }
h1 {
 font-size: 1.6em;
 }
h2 {
 font-size: 1.3em;
 margin-top: 25px;
 }
.toc {
 padding: 12px;
 }
.toc ul {
 padding-left: 15px;
 }
.rule-box {
 padding: 10px;
 margin: 10px 0;
 }
.rule-box ul, .rule-box ol {
 padding-left: 15px;
 }
}

@media print {
 body {
 font-size: 12pt;
 background: white;
 }
.container {
 max-width: 100%;
 margin: 0;
 padding: 0;
 box-shadow: none;
 }
.rule-box {
 border: 1px solid #ddd;
 page-break-inside: avoid;
 }
a {
 text-decoration: none;
 color: black;
 }
h1, h2, h3 {
 page-break-after: avoid;
 }
.toc {
 background: none;
 border: 1px solid #ddd;
 }
}

@media (prefers-reduced-motion: reduce) {
 .rule-box {
 transition: none;
 }
}