body {
    background-color: #f8fbf8;
    padding: 20px;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1 {
    font-size: 42px;
    margin: 0;
    color: #333;
}

h2 {
    font-size: 36px;
    margin: 0;
    color: #333;
}

h3 {
    font-size: 24px;
    margin: 0;
    color: #333;
}

p {
    font-size: 16px;
    color: #323030;
}

/* Main layout */
.main-layout {
    padding: 20px;
}

.side-panel {
    vertical-align: top;
    padding-left: 20px;
}

/* Canvas container */
#canvas-container {
    position: relative;
}

#MainGLCanvas {
    border: 1px solid #ccc;
    display: block;
}

/* Slider table */
.slider-table {
    margin-top: 10px;
}

.slider-table input[type="range"] {
    width: 450px;
}

.slider-table input[type="text"] {
    width: 50px;
}

/* Yaw - Blue */
.yaw-label {
    color: rgb(47, 123, 174);
    background-color: #000;
    padding: 5px 10px;
}

/* Pitch - Green */
.pitch-label {
    color: rgb(44, 159, 44);
    background-color: #000;
    padding: 5px 10px;
}

/* Roll - Red */
.roll-label {
    color: rgb(255, 80, 80);
    background-color: #000;
    padding: 5px 10px;
}

/* Matrix styling */
table.matrix {
    border-spacing: 5px;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    font-size: 20px;
    text-align: center;
}

td.matrix {
    width: 50px;
}

/* Column colors for combined rotation matrix (legacy, kept for reference) */
td.col1 {
    width: 50px;
    color: #FF0000;
}

td.col2 {
    width: 50px;
    color: #00b500;
}

td.col3 {
    width: 50px;
    color: #0000FF;
}

/* Row colors for [BN] matrix - match body axes and gimbal colors */
/* Row 1 (b̂₁, X-axis) → Red (matches roll φ, red gimbal ring) */
td.row1 {
    width: 50px;
    color: #FF0000;
}

/* Row 2 (b̂₂, Y-axis) → Green (matches pitch θ, green gimbal ring) */
td.row2 {
    width: 50px;
    color: #00b500;
}

/* Row 3 (b̂₃, Z-axis) → Blue (matches yaw ψ, blue gimbal ring) */
td.row3 {
    width: 50px;
    color: #0000FF;
}

/* T1(φ) Roll matrix entries - Red */
#cphi1, #cphi2, #sphipos, #sphineg {
    color: rgb(255, 80, 80);
}

/* T2(θ) Pitch matrix entries - Green */
#ctheta1, #ctheta2, #sthetapos, #sthetaneg {
    color: rgb(44, 159, 44);
}

/* T3(ψ) Yaw matrix entries - Blue */
#cpsi1, #cpsi2, #spsipos, #spsineg {
    color: rgb(47, 123, 174);
}

.matrix-layout {
    border-spacing: 10px;
}

/* Button styling */
button {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
}

button:hover {
    opacity: 0.9;
    background-color: #e0e0e0;
}

button:active {
    opacity: 0.6;
}

/* Orientation table */
.orientation-table {
    margin: 10px 0;
}

.orientation-table td {
    padding: 5px;
}

.orientation-table input[type="text"] {
    width: 50px;
}

/* Animation controls */
#animateButton {
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    font-size: 16px;
}

#animateButton:hover {
    background-color: #45a049;
}

/* Checkbox styling */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Links */
a {
    color: #2196F3;
}

a:hover {
    text-decoration: underline;
}

/* Horizontal rule */
hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #ccc;
}

/* Directions list */
ul {
    line-height: 1.8;
}

li {
    margin-bottom: 5px;
}