body {
  margin: 0;
  font-family: Georgia, serif;
  background-color: #fcfbf6;
  color: #222;
}

/* Testing Cinzel for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

.site-header {
  background-color: #F7F2DF;
  color: #333;
  text-align: center;
  padding: 1rem 0;
  position: relative;
}





.site-header h1 {
  margin: 0;
  font-size: 2rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
}

/* Navigation styles moved to header.html */

/* Navigation link styles moved to header.html */

.site-footer {
  margin-top: 2rem;
  padding: 2rem 1rem;
  background-color: #F7F2DF;
  color: #333;
  position: relative;
}





.footer-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer-contact h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.1rem;
}

.footer-contact p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.footer-contact a {
  color: #333;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-copyright {
  text-align: right;
  font-size: 0.9rem;
}

/* Footer logo removed */

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-copyright {
    text-align: center;
  }
  
  /* Footer logo removed */
}

.main-content {
  padding: 2rem;
  max-width: 800px;
  margin: auto;
}

.tools-wrapper {
  display: flex;
  min-height: 80vh;
}

.sidebar {
  width: 260px;
  background-color: #F7F2DF;
  color: #333;
  padding: 1rem;
  position: relative;
}





.sidebar h2 {
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 0.5rem 0;
}

.sidebar a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

/* Sidebar link hover styles moved to layout.css for consistency */

.tag {
  font-size: 0.8rem;
  font-weight: bold;
  margin-left: 0.25rem;
}

.beta {
  color: gold;
}

.soon {
  color: orange;
}

.main-panel {
  flex: 1;
  padding: 2rem;
}

.notice {
  background-color: #fff4d1;
  padding: 1rem;
  border-left: 6px solid gold;
  margin-bottom: 1rem;
}

/* styles.css - Shared calculator styling */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8f9fa;
  color: #333;
  margin: 0;
  padding: 2rem;
}

form {
  max-width: 600px;
  margin: auto;
}

fieldset {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

legend {
  font-size: 1.25rem;
  font-weight: bold;
  color: #2c3e50;
}

label {
  display: inline-block;
  width: 230px;
  margin-bottom: 0.5rem;
  vertical-align: top;
}

input[type="number"],
select {
  width: 120px;
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #333;
}

button {
  background-color: #333;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  font-family: 'Cinzel', serif;
  font-weight: 500;
}

button:hover {
  background-color: #555;
}

.results {
  margin-top: 1rem;
  background: #eef5ff;
  border-left: 4px solid #007bff;
  padding: 1rem;
  font-size: 1rem;
  color: #1b1b1b;
  border-radius: 4px;
}

/* --- Responsive Images and SVGs --- */
img, svg {
  max-width: 100%;
  height: auto;
}

/* --- Responsive Layout and Navigation --- */
@media (max-width: 700px) {
  .site-header nav {
    display: block;
    text-align: left;
  }
  .site-header nav a, .dropdown-content a {
    display: block;
    padding: 16px;
    font-size: 1.1em;
    margin: 0;
  }
  .main-content, .main-panel {
    padding: 1rem;
    max-width: 100%;
  }
  .tools-wrapper {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    padding: 0.5rem;
  }
  .dropdown-content {
    position: static;
    box-shadow: none;
    min-width: 100%;
  }
  .site-header h1 {
    font-size: 1.3rem;
  }
}

/* --- Accessibility: Larger Touch Targets for Buttons/Links --- */
.site-header nav a, .dropdown-content a, button {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

/* --- Responsive Number Line Block --- */
.number-line-block {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  padding: 0.5em 0;
}
.number-line-block svg {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 320px;
}
@media (max-width: 600px) {
  .number-line-block svg {
    min-width: 0;
    font-size: 0.95em;
  }
}

/* --- Responsive Prescription Block --- */
.prescription-block {
  max-width: 100%;
  overflow-x: auto;
}
.prescription-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prescription-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.prescription-label, .prescription-value, .eye-label {
  min-width: 48px;
  text-align: center;
  font-size: 1em;
}
@media (max-width: 700px) {
  .number-line-block svg {
    max-width: 100vw;
  }
  .prescription-content {
    gap: 0.25rem;
  }
  .prescription-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .prescription-label, .prescription-value, .eye-label {
    min-width: 36px;
    font-size: 0.95em;
  }
}

.prescription-grid-wrapper {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.5em 0;
}
.prescription-grid {
  display: grid;
  grid-template-columns: 60px repeat(5, minmax(60px, 1fr));
  gap: 0.2em;
  align-items: center;
  width: 100%;
  min-width: 380px;
  box-sizing: border-box;
}
.prescription-header {
  font-weight: bold;
  background: #f8f9fa;
  text-align: center;
  padding: 0.4em 0.2em;
  font-size: 1em;
}
.prescription-row-label {
  font-weight: bold;
  text-align: right;
  padding-right: 0.5em;
  background: #f4f4f4;
}
.prescription-value {
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  font-size: 1em;
  padding: 0.3em 0.2em;
  word-break: break-word;
}
@media (max-width: 600px) {
  .prescription-grid {
    font-size: 0.85em;
    grid-template-columns: 44px repeat(5, minmax(40px, 1fr));
    min-width: 0;
  }
  .prescription-header, .prescription-row-label, .prescription-value {
    padding: 0.15em 0.1em;
    font-size: 0.85em;
  }
}

@media (max-width: 400px) {
  .prescription-grid {
    font-size: 0.7em;
    grid-template-columns: 28px repeat(5, minmax(20px, 1fr));
    min-width: 0;
  }
  .prescription-header, .prescription-row-label, .prescription-value {
    padding: 0.1em 0.05em;
    font-size: 0.7em;
    min-width: 24px;
  }
}

/* Navigation styles moved to header.html */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); /* 1/2 of 420px (original ~280px) */
  gap: 2rem;
  margin-top: 2rem;
}

.article-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 220px;
  max-width: 210px; /* Limit card width to 1/2 of previous size */
  width: 100%;
}

.article-title {
  font-weight: bold;
}

@media (max-width: 600px) {
  .articles-grid {
    grid-template-columns: 1fr 1fr;
  }
  .article-card {
    max-width: 100%;
  }
}

/* About Us Page Styles */
.meet-our-opticians {
  margin-top: 3rem;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.btn-primary {
  display: inline-block;
  background: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  margin-top: 1rem;
}

.btn-primary:hover {
  background: #0056b3;
  text-decoration: none;
}

.about-placeholder {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

.about-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Staff Grid Styles */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.staff-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.staff-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid #007bff;
}

.staff-name {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  color: #333;
}

.staff-title {
  font-size: 1rem;
  color: #007bff;
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.staff-bio {
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

.staff-specialties,
.staff-certifications {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0;
}

.no-staff {
  text-align: center;
  padding: 3rem;
  color: #666;
  font-style: italic;
}

@media (max-width: 600px) {
  .staff-grid {
    grid-template-columns: 1fr;
  }
  
  .staff-card {
    padding: 1rem;
  }
  
  .staff-photo {
    width: 120px;
    height: 120px;
  }
}

/* Signed Multiplication Tool Styles */
.multiplication-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.multiplication-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
  border-left: 4px solid #007bff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.2rem;
}

.difficulty {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
}

.difficulty.beginner {
  background: #dcfce7;
  color: #166534;
}

.difficulty.intermediate {
  background: #fef3c7;
  color: #92400e;
}

.difficulty.advanced {
  background: #fee2e2;
  color: #991b1b;
}

.expression-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.expression-section h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1rem;
}

.result {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.result-value {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: bold;
}

.result-value.positive {
  background: #dcfce7;
  color: #166534;
}

.result-value.negative {
  background: #fee2e2;
  color: #991b1b;
}

.visual-section {
  margin-bottom: 1.5rem;
}

.visual-section h4 {
  margin: 0 0 1rem 0;
  color: #333;
  font-size: 1rem;
}

.arrow-container {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow-x: auto;
}

.visual-explanation {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.description {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f0f9ff;
  border-left: 3px solid #0ea5e9;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #e5e7eb;
  color: #374151;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
}

.loading-message {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

.no-examples {
  text-align: center;
  padding: 2rem;
  color: #666;
}

@media (max-width: 600px) {
  .multiplication-grid {
    grid-template-columns: 1fr;
  }
  
  .multiplication-card {
    padding: 1rem;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .arrow-container {
    padding: 0.5rem;
  }
}

/* Simplified Signed Multiplication Block Styles */
.multiplication-block {
  margin: 2rem 0;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.multiplication-block .expression {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #1f2937;
}

.multiplication-block .arrow-container {
  display: block;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 6px;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  min-height: 60px;
}

/* Responsive adjustments for simplified block */
@media (max-width: 768px) {
  .multiplication-block {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .multiplication-block .expression {
    font-size: 1.25rem;
  }
  
  .multiplication-block .arrow-container {
    padding: 0.5rem;
  }
  
  .multiplication-block .arrow-container svg {
  width: 100%;
  height: auto;
  max-height: 80px;
  display: block;
}
}

@media (max-width: 480px) {
  .multiplication-block .arrow-container {
    padding: 0.25rem;
  }
  
  .multiplication-block .expression {
    font-size: 1.1rem;
  }
}

/* Signed Multiplication Table Block Styles */
.multiplication-table-block {
  margin: 2rem 0;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.multiplication-table-block .main-equation {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: #1f2937;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 8px;
  border: 2px solid #cbd5e1;
}

.multiplication-table-block .sign-rule-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.multiplication-table-block h4 {
  margin-bottom: 1rem;
  color: #374151;
  font-size: 1.1rem;
}

.table-with-labels {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.column-label {
  position: absolute;
  top: -25px;
  font-weight: 600;
  font-size: 1rem;
  color: #3b82f6;
  background: #dbeafe;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #3b82f6;
  transform: translateX(-50%);
  z-index: 10;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-label {
  position: absolute;
  left: -35px;
  font-weight: 600;
  font-size: 1rem;
  color: #3b82f6;
  background: #dbeafe;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #3b82f6;
  transform: translateY(-50%);
  z-index: 10;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.multiplication-table {
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 0.8rem;
  max-width: 100%;
  overflow-x: auto;
}

.multiplication-table th,
.multiplication-table td {
  border: 1px solid #d1d5db;
  padding: 0.25rem 0.5rem;
  text-align: center;
  min-width: 2rem;
}

.multiplication-table th {
  background-color: #f3f4f6;
  font-weight: 600;
}

.multiplication-table .highlight-row {
  background-color: rgba(219, 234, 254, 0.6);
}

.multiplication-table .highlight-column {
  background-color: rgba(219, 234, 254, 0.6);
}

.multiplication-table .highlight-cell {
  background-color: #3b82f6 !important;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.sign-rule-grid {
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: bold;
}

.sign-rule-grid th,
.sign-rule-grid td {
  border: 2px solid #374151;
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 3rem;
}

.sign-rule-grid th {
  background-color: #f3f4f6;
  color: #374151;
}

.sign-rule-grid .highlight-input-sign {
  background-color: rgba(219, 234, 254, 0.8);
  color: #1f2937;
  font-weight: 600;
}

.sign-rule-grid .positive-result {
  background-color: rgba(34, 197, 94, 0.2);
  color: #166534;
}

.sign-rule-grid .negative-result {
  background-color: rgba(239, 68, 68, 0.2);
  color: #991b1b;
}

.sign-rule-grid .highlight-result-sign {
  background-color: #3b82f6;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.table-explanation {
  margin-top: 1rem;
  font-size: 1rem;
  color: #374151;
  text-align: center;
  padding: 0.5rem;
  background: #f9fafb;
  border-radius: 4px;
  border-left: 4px solid #3b82f6;
}

.sign-rule-explanation {
  margin-top: 1rem;
  text-align: center;
}

.sign-rule-text {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #f0f9ff;
  border-radius: 4px;
  border-left: 4px solid #0ea5e9;
}

.sign-rule-general {
  font-size: 0.9rem;
  color: #6b7280;
  font-style: italic;
  margin: 0;
  padding: 0.5rem;
  background: #fef3c7;
  border-radius: 4px;
  border-left: 4px solid #f59e0b;
}

.division-hint {
  font-size: 0.85rem;
  color: #7c3aed;
  font-style: italic;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  border-left: 4px solid #8b5cf6;
}

/* Responsive adjustments for table block */
@media (max-width: 768px) {
  .multiplication-table-block .main-equation {
    font-size: 1.5rem;
    padding: 0.75rem;
  }
  
  .multiplication-table-block .sign-rule-section {
    padding: 1rem;
    margin-top: 1.5rem;
  }
  
  .sign-rule-grid {
    font-size: 1rem;
  }
  
  .sign-rule-grid th,
  .sign-rule-grid td {
    padding: 0.5rem 0.75rem;
  }
  
  .sign-rule-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .multiplication-table-block {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .multiplication-table-block .main-equation {
    font-size: 1.25rem;
    padding: 0.5rem;
  }
  
  .multiplication-table-block .sign-rule-section {
    padding: 0.75rem;
    margin-top: 1rem;
  }
  
  .sign-rule-text {
    font-size: 0.8rem;
  }
}

/* Place Value Table Block Styles */
.place-value-table-block {
  margin: 2rem 0;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.place-value-title {
  margin-bottom: 1rem;
  color: #374151;
  font-size: 1.2rem;
  text-align: center;
}

.place-value-container {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  overflow-x: auto;
}

.place-value-table {
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 600;
  min-width: 400px;
}

.place-value-table th,
.place-value-table td {
  border: 2px solid #d1d5db;
  padding: 0.75rem 0.5rem;
  text-align: center;
  min-width: 60px;
}

.place-value-table th {
  background-color: #f3f4f6;
  color: #374151;
  font-weight: 700;
  font-size: 0.9rem;
}

.place-value-table .place-header {
  background-color: #e5e7eb;
  color: #1f2937;
}

.place-value-table .decimal-point {
  background-color: #fef3c7;
  color: #92400e;
  font-weight: 700;
  font-size: 1.2rem;
  min-width: 30px;
}

.place-value-table .digit-cell {
  background-color: #f9fafb;
  color: #6b7280;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.place-value-table .digit-cell.has-digit {
  color: #1f2937;
  font-weight: 700;
}

/* Highlight colors */
.place-value-table .highlight-blue {
  background-color: #dbeafe;
  color: #1e40af;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.place-value-table .highlight-green {
  background-color: #dcfce7;
  color: #166534;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.place-value-table .highlight-orange {
  background-color: #fed7aa;
  color: #c2410c;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.place-value-table .highlight-purple {
  background-color: #e9d5ff;
  color: #7c3aed;
  box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
}

.place-value-table .highlight-red {
  background-color: #fecaca;
  color: #991b1b;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.place-value-description {
  margin-top: 1rem;
  text-align: center;
  color: #6b7280;
  font-style: italic;
  font-size: 0.9rem;
}

/* Responsive adjustments for place value table */
@media (max-width: 768px) {
  .place-value-table-block {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .place-value-table {
    font-size: 0.9rem;
    min-width: 300px;
  }
  
  .place-value-table th,
  .place-value-table td {
    padding: 0.5rem 0.3rem;
    min-width: 45px;
  }
  
  .place-value-table th {
    font-size: 0.8rem;
  }
  
  .place-value-table .decimal-point {
    font-size: 1rem;
    min-width: 25px;
  }
  
  .place-value-table .digit-cell {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .place-value-table-block {
    padding: 0.75rem;
    margin: 1rem 0;
  }
  
  .place-value-table {
    font-size: 0.8rem;
    min-width: 250px;
  }
  
  .place-value-table th,
  .place-value-table td {
    padding: 0.4rem 0.2rem;
    min-width: 35px;
  }
  
  .place-value-table th {
    font-size: 0.7rem;
  }
  
  .place-value-table .decimal-point {
    font-size: 0.9rem;
    min-width: 20px;
  }
  
  .place-value-table .digit-cell {
    font-size: 0.9rem;
  }
  
  .place-value-title {
    font-size: 1rem;
  }
  
  .place-value-description {
    font-size: 0.8rem;
  }
}

/* Rounding Number Line Component */
.rounding-number-line-block {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rounding-title {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: 1.25rem;
  text-align: center;
}

.rounding-number-line-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.number-line {
  position: relative;
  height: 80px;
  background: #f9fafb;
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  align-items: center;
}

.line-segment {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 3px;
  background: #d1d5db;
  transform: translateY(-50%);
}

.lower-bound,
.upper-bound {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #6b7280;
  font-size: 0.9rem;
}

.lower-bound {
  left: 5%;
}

.upper-bound {
  right: 5%;
}

.input-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.marker-dot {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.marker-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  background: #ffffff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.rounding-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
}

.rounding-arrow.left {
  flex-direction: row-reverse;
}

.rounding-arrow.right {
  flex-direction: row;
}

.arrow-head {
  width: 0;
  height: 0;
  border-style: solid;
}

.rounding-arrow.left .arrow-head {
  border-width: 8px 12px 8px 0;
  border-color: transparent;
  border-right-color: currentColor;
}

.rounding-arrow.right .arrow-head {
  border-width: 8px 0 8px 12px;
  border-color: transparent;
  border-left-color: currentColor;
}

.arrow-shaft {
  height: 3px;
  width: 20px;
  background: currentColor;
}

.rounding-shading {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  z-index: 1;
}

.rounding-result {
  text-align: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 4px solid #3b82f6;
}

.rounding-result p {
  margin: 0.5rem 0;
}

.rounding-result strong {
  color: #1e40af;
  font-size: 1.1rem;
}

.rounding-explanation {
  color: #6b7280;
  font-size: 0.9rem;
  font-style: italic;
}

.rounding-description {
  margin-top: 1rem;
  text-align: center;
  color: #6b7280;
  font-style: italic;
  font-size: 0.9rem;
}

.rounding-explanation-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-width: 300px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.rounding-number-line-block[data-tooltip="true"]:hover .rounding-explanation-tooltip {
  opacity: 1;
  visibility: visible;
}

.tooltip-content p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.tooltip-content strong {
  color: #1e40af;
}

/* Color schemes for rounding number line */
.rounding-number-line-block.blue .marker-dot,
.rounding-number-line-block.blue .rounding-arrow,
.rounding-number-line-block.blue .rounding-shading {
  color: #3b82f6;
}

.rounding-number-line-block.blue .rounding-shading {
  background: rgba(59, 130, 246, 0.1);
}

.rounding-number-line-block.blue .rounding-result {
  border-left-color: #3b82f6;
}

.rounding-number-line-block.blue .rounding-result strong {
  color: #1e40af;
}

.rounding-number-line-block.green .marker-dot,
.rounding-number-line-block.green .rounding-arrow,
.rounding-number-line-block.green .rounding-shading {
  color: #10b981;
}

.rounding-number-line-block.green .rounding-shading {
  background: rgba(16, 185, 129, 0.1);
}

.rounding-number-line-block.green .rounding-result {
  border-left-color: #10b981;
}

.rounding-number-line-block.green .rounding-result strong {
  color: #065f46;
}

.rounding-number-line-block.orange .marker-dot,
.rounding-number-line-block.orange .rounding-arrow,
.rounding-number-line-block.orange .rounding-shading {
  color: #f59e0b;
}

.rounding-number-line-block.orange .rounding-shading {
  background: rgba(245, 158, 11, 0.1);
}

.rounding-number-line-block.orange .rounding-result {
  border-left-color: #f59e0b;
}

.rounding-number-line-block.orange .rounding-result strong {
  color: #92400e;
}

.rounding-number-line-block.purple .marker-dot,
.rounding-number-line-block.purple .rounding-arrow,
.rounding-number-line-block.purple .rounding-shading {
  color: #8b5cf6;
}

.rounding-number-line-block.purple .rounding-shading {
  background: rgba(139, 92, 246, 0.1);
}

.rounding-number-line-block.purple .rounding-result {
  border-left-color: #8b5cf6;
}

.rounding-number-line-block.purple .rounding-result strong {
  color: #5b21b6;
}

.rounding-number-line-block.red .marker-dot,
.rounding-number-line-block.red .rounding-arrow,
.rounding-number-line-block.red .rounding-shading {
  color: #ef4444;
}

.rounding-number-line-block.red .rounding-shading {
  background: rgba(239, 68, 68, 0.1);
}

.rounding-number-line-block.red .rounding-result {
  border-left-color: #ef4444;
}

.rounding-number-line-block.red .rounding-result strong {
  color: #991b1b;
}

/* Responsive adjustments for rounding number line */
@media (max-width: 768px) {
  .rounding-number-line-block {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .number-line {
    height: 70px;
    padding: 0.75rem;
  }
  
  .lower-bound,
  .upper-bound {
    font-size: 0.8rem;
  }
  
  .marker-label {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
  
  .rounding-result {
    padding: 0.75rem;
  }
  
  .rounding-result strong {
    font-size: 1rem;
  }
  
  .rounding-explanation {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .rounding-number-line-block {
    padding: 0.75rem;
    margin: 1rem 0;
  }
  
  .number-line {
    height: 60px;
    padding: 0.5rem;
  }
  
  .lower-bound,
  .upper-bound {
    font-size: 0.75rem;
  }
  
  .lower-bound {
    left: 2%;
  }
  
  .upper-bound {
    right: 2%;
  }
  
  .line-segment {
    left: 8%;
    right: 8%;
  }
  
  .marker-dot {
    width: 10px;
    height: 10px;
  }
  
  .marker-label {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
  }
  
  .rounding-result {
    padding: 0.5rem;
  }
  
  .rounding-result strong {
    font-size: 0.9rem;
  }
  
  .rounding-explanation {
    font-size: 0.75rem;
  }
  
  .rounding-title {
    font-size: 1.1rem;
  }
  
  .rounding-description {
    font-size: 0.8rem;
  }
}

/* Fraction Visualizer Component */
.fraction-visualizer-block {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fraction-title {
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  text-align: center;
}

.fraction-visualization-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
}

/* Circle Visualization */
.fraction-circle {
  max-width: 200px;
  height: auto;
}

.fraction-circle.small {
  max-width: 150px;
}

.fraction-circle.large {
  max-width: 250px;
}

.circle-segment {
  transition: fill 0.3s ease;
}

.circle-segment.filled {
  opacity: 1;
}

.circle-segment.empty {
  opacity: 0.3;
}

/* Bar Visualization */
.fraction-bar {
  display: flex;
  width: 100%;
  max-width: 300px;
  height: 40px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}

.fraction-bar.small {
  max-width: 200px;
  height: 30px;
}

.fraction-bar.large {
  max-width: 400px;
  height: 50px;
}

.bar-segment {
  flex: 1;
  border-right: 1px solid #d1d5db;
  transition: background-color 0.3s ease;
}

.bar-segment:last-child {
  border-right: none;
}

.bar-segment.filled {
  opacity: 1;
}

.bar-segment.empty {
  opacity: 0.3;
}

/* Grid Visualization */
.fraction-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1px;
  width: 200px;
  height: 200px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}

.fraction-grid.small {
  width: 150px;
  height: 150px;
}

.fraction-grid.large {
  width: 250px;
  height: 250px;
}

.grid-cell {
  background-color: #f3f4f6;
  transition: background-color 0.3s ease;
}

.grid-cell.filled {
  opacity: 1;
}

.grid-cell.empty {
  opacity: 0.3;
}

/* Fraction Info */
.fraction-info {
  text-align: center;
  margin: 1rem 0;
}

.fraction-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.decimal-text {
  font-size: 1.1rem;
  color: #6b7280;
  font-style: italic;
}

.fraction-description {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 1rem;
  text-align: center;
}

/* Color Schemes */
.fraction-visualizer-block.blue {
  border-color: #3b82f6;
}

.fraction-visualizer-block.blue .fraction-title {
  color: #1e40af;
}

.fraction-visualizer-block.blue .circle-segment.filled,
.fraction-visualizer-block.blue .bar-segment.filled,
.fraction-visualizer-block.blue .grid-cell.filled {
  background-color: #3b82f6;
  fill: #3b82f6;
}

.fraction-visualizer-block.green {
  border-color: #10b981;
}

.fraction-visualizer-block.green .fraction-title {
  color: #065f46;
}

.fraction-visualizer-block.green .circle-segment.filled,
.fraction-visualizer-block.green .bar-segment.filled,
.fraction-visualizer-block.green .grid-cell.filled {
  background-color: #10b981;
  fill: #10b981;
}

.fraction-visualizer-block.orange {
  border-color: #f59e0b;
}

.fraction-visualizer-block.orange .fraction-title {
  color: #92400e;
}

.fraction-visualizer-block.orange .circle-segment.filled,
.fraction-visualizer-block.orange .bar-segment.filled,
.fraction-visualizer-block.orange .grid-cell.filled {
  background-color: #f59e0b;
  fill: #f59e0b;
}

.fraction-visualizer-block.purple {
  border-color: #8b5cf6;
}

.fraction-visualizer-block.purple .fraction-title {
  color: #5b21b6;
}

.fraction-visualizer-block.purple .circle-segment.filled,
.fraction-visualizer-block.purple .bar-segment.filled,
.fraction-visualizer-block.purple .grid-cell.filled {
  background-color: #8b5cf6;
  fill: #8b5cf6;
}

.fraction-visualizer-block.red {
  border-color: #ef4444;
}

.fraction-visualizer-block.red .fraction-title {
  color: #991b1b;
}

.fraction-visualizer-block.red .circle-segment.filled,
.fraction-visualizer-block.red .bar-segment.filled,
.fraction-visualizer-block.red .grid-cell.filled {
  background-color: #ef4444;
  fill: #ef4444;
}

/* CSS Variables for dynamic colors */
:root {
  --blue-fill: #3b82f6;
  --green-fill: #10b981;
  --orange-fill: #f59e0b;
  --purple-fill: #8b5cf6;
  --red-fill: #ef4444;
  --empty-fill: #f3f4f6;
  --segment-border: #d1d5db;
}

/* Responsive Design */
@media (max-width: 768px) {
  .fraction-visualizer-block {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .fraction-title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
  
  .fraction-visualization-container {
    margin: 1rem 0;
  }
  
  .fraction-circle {
    max-width: 150px;
  }
  
  .fraction-circle.large {
    max-width: 200px;
  }
  
  .fraction-bar {
    max-width: 250px;
    height: 35px;
  }
  
  .fraction-bar.large {
    max-width: 300px;
    height: 40px;
  }
  
  .fraction-grid {
    width: 150px;
    height: 150px;
  }
  
  .fraction-grid.large {
    width: 200px;
    height: 200px;
  }
  
  .fraction-text {
    font-size: 1.25rem;
  }
  
  .decimal-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .fraction-visualizer-block {
    padding: 0.75rem;
    margin: 1rem 0;
  }
  
  .fraction-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .fraction-visualization-container {
    margin: 0.75rem 0;
  }
  
  .fraction-circle {
    max-width: 120px;
  }
  
  .fraction-circle.large {
    max-width: 150px;
  }
  
  .fraction-bar {
    max-width: 200px;
    height: 30px;
  }
  
  .fraction-bar.large {
    max-width: 250px;
    height: 35px;
  }
  
  .fraction-grid {
    width: 120px;
    height: 120px;
  }
  
  .fraction-grid.large {
    width: 150px;
    height: 150px;
  }
  
  .fraction-text {
    font-size: 1.1rem;
  }
  
  .decimal-text {
    font-size: 0.9rem;
  }
  
  .fraction-description {
    font-size: 0.9rem;
  }
}

/* Decimal Fraction Converter Block Styles */
.decimal-fraction-converter-block {
  margin: 2rem 0;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.converter-title {
  margin-bottom: 1rem;
  color: #374151;
  font-size: 1.2rem;
  text-align: center;
}

.converter-description {
  margin-bottom: 1.5rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}

.converter-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.decimal-input-group,
.fraction-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 200px;
}

.decimal-input-group label,
.fraction-input-group label {
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
}

.decimal-input,
.fraction-input {
  padding: 0.75rem;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.decimal-input:focus,
.fraction-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.conversion-arrow {
  font-size: 1.5rem;
  color: #6b7280;
  font-weight: bold;
  margin: 0 1rem;
}

.validation-message {
  font-size: 0.8rem;
  color: #dc2626;
  display: none;
  margin-top: 0.25rem;
}

.result-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.result-display {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.decimal-result,
.fraction-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 6px;
  min-width: 150px;
}

.result-label {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 600;
}

.result-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
}

.conversion-steps {
  margin-top: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 6px;
  border-left: 4px solid #3b82f6;
}

.step-group {
  margin-bottom: 1rem;
}

.step-group:last-child {
  margin-bottom: 0;
}

.step-group h5 {
  margin-bottom: 0.5rem;
  color: #374151;
  font-size: 1rem;
  font-weight: 600;
}

.step-group p {
  margin: 0.25rem 0;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
}

.step-group em {
  color: #059669;
  font-style: normal;
  font-weight: 600;
}

/* Layout variations */
.decimal-fraction-converter-block.vertical .input-section {
  flex-direction: column;
  gap: 1.5rem;
}

.decimal-fraction-converter-block.vertical .conversion-arrow {
  transform: rotate(90deg);
  margin: 0.5rem 0;
}

/* Color schemes */
.decimal-fraction-converter-block.blue {
  border-left: 4px solid #3b82f6;
}

.decimal-fraction-converter-block.blue .converter-title {
  color: #1e40af;
}

.decimal-fraction-converter-block.blue .decimal-input:focus,
.decimal-fraction-converter-block.blue .fraction-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.decimal-fraction-converter-block.blue .conversion-steps {
  border-left-color: #3b82f6;
}

.decimal-fraction-converter-block.green {
  border-left: 4px solid #10b981;
}

.decimal-fraction-converter-block.green .converter-title {
  color: #047857;
}

.decimal-fraction-converter-block.green .decimal-input:focus,
.decimal-fraction-converter-block.green .fraction-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.decimal-fraction-converter-block.green .conversion-steps {
  border-left-color: #10b981;
}

.decimal-fraction-converter-block.orange {
  border-left: 4px solid #f59e0b;
}

.decimal-fraction-converter-block.orange .converter-title {
  color: #d97706;
}

.decimal-fraction-converter-block.orange .decimal-input:focus,
.decimal-fraction-converter-block.orange .fraction-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.decimal-fraction-converter-block.orange .conversion-steps {
  border-left-color: #f59e0b;
}

.decimal-fraction-converter-block.purple {
  border-left: 4px solid #8b5cf6;
}

.decimal-fraction-converter-block.purple .converter-title {
  color: #7c3aed;
}

.decimal-fraction-converter-block.purple .decimal-input:focus,
.decimal-fraction-converter-block.purple .fraction-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.decimal-fraction-converter-block.purple .conversion-steps {
  border-left-color: #8b5cf6;
}

.decimal-fraction-converter-block.red {
  border-left: 4px solid #ef4444;
}

.decimal-fraction-converter-block.red .converter-title {
  color: #dc2626;
}

.decimal-fraction-converter-block.red .decimal-input:focus,
.decimal-fraction-converter-block.red .fraction-input:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.decimal-fraction-converter-block.red .conversion-steps {
  border-left-color: #ef4444;
}

/* Responsive design */
@media (max-width: 768px) {
  .decimal-fraction-converter-block {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .converter-title {
    font-size: 1.1rem;
  }
  
  .input-section {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .conversion-arrow {
    transform: rotate(90deg);
    margin: 0.5rem 0;
  }
  
  .decimal-input-group,
  .fraction-input-group {
    min-width: 100%;
  }
  
  .result-display {
    flex-direction: column;
    gap: 1rem;
  }
  
  .decimal-result,
  .fraction-result {
    min-width: auto;
  }
  
  .conversion-steps {
    padding: 0.75rem;
  }
  
  .step-group h5 {
    font-size: 0.9rem;
  }
  
  .step-group p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .decimal-fraction-converter-block {
    padding: 0.75rem;
    margin: 1rem 0;
  }
  
  .converter-title {
    font-size: 1rem;
  }
  
  .converter-description {
    font-size: 0.8rem;
  }
  
  .decimal-input,
  .fraction-input {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  
  .decimal-input-group label,
  .fraction-input-group label {
    font-size: 0.8rem;
  }
  
  .result-value {
    font-size: 1rem;
  }
  
  .conversion-steps {
    padding: 0.5rem;
  }
  
  .step-group h5 {
    font-size: 0.8rem;
  }
  
  .step-group p {
    font-size: 0.75rem;
  }
}

/* Percent Visualizer Block */
.percent-visualizer-block {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.percent-visualizer-block:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.visualizer-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #1f2937;
}

.visualizer-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #6b7280;
  margin: 0 0 1.5rem 0;
}

.visualizer-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Input Section */
.input-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.input-section label {
  font-weight: 600;
  color: #374151;
  font-size: 1rem;
}

.percent-input {
  width: 120px;
  padding: 0.75rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.percent-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.percent-symbol {
  font-size: 1.2rem;
  font-weight: 600;
  color: #6b7280;
}

/* Visualizations */
.visualizations {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
}

/* Grid Visualization */
.percent-grid {
  display: grid;
  gap: 2px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  background: #f9fafb;
}

.percent-grid.grid-small {
  grid-template-columns: repeat(10, 8px);
  grid-template-rows: repeat(10, 8px);
}

.percent-grid.grid-medium {
  grid-template-columns: repeat(10, 12px);
  grid-template-rows: repeat(10, 12px);
}

.percent-grid.grid-large {
  grid-template-columns: repeat(10, 16px);
  grid-template-rows: repeat(10, 16px);
}

.grid-square {
  border-radius: 2px;
  transition: all 0.3s ease;
}

.grid-square.filled {
  background: #3b82f6;
  border: 1px solid #2563eb;
}

.grid-square.empty {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

/* Circle Visualization */
.percent-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-svg {
  width: 120px;
  height: 120px;
}

.circle-background {
  stroke: #e5e7eb;
  fill: none;
}

.circle-progress {
  stroke: #3b82f6;
  fill: none;
  transition: stroke-dashoffset 0.5s ease;
}

.circle-text {
  font-size: 1.2rem;
  font-weight: 600;
  fill: #1f2937;
  font-family: 'Cinzel', serif;
}

/* Progress Bar Visualization */
.percent-progress-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 200px;
}

.progress-bar-container {
  width: 100%;
  height: 20px;
  background: #f3f4f6;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
}

.progress-bar-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.5s ease;
  border-radius: 8px;
}

.progress-label {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
}

/* Equivalents Section */
.percent-equivalents {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.equivalent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.equivalent-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.equivalent-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  font-family: 'Cinzel', serif;
}

/* Layout Variations */
.percent-visualizer-block.horizontal .visualizer-container {
  flex-direction: row;
  align-items: flex-start;
}

.percent-visualizer-block.horizontal .visualizations {
  flex: 1;
}

.percent-visualizer-block.vertical .visualizations {
  flex-direction: column;
  align-items: center;
}

.percent-visualizer-block.grid-first .visualizations {
  order: 1;
}

.percent-visualizer-block.circle-first .visualizations {
  order: 1;
}

.percent-visualizer-block.progress-first .visualizations {
  order: 1;
}

/* Color Schemes */
.percent-visualizer-block.blue .visualizer-title {
  color: #1e40af;
}

.percent-visualizer-block.blue .percent-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.percent-visualizer-block.blue .grid-square.filled {
  background: #3b82f6;
  border-color: #2563eb;
}

.percent-visualizer-block.blue .circle-progress {
  stroke: #3b82f6;
}

.percent-visualizer-block.blue .progress-bar-fill {
  background: #3b82f6;
}

.percent-visualizer-block.green .visualizer-title {
  color: #059669;
}

.percent-visualizer-block.green .percent-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.percent-visualizer-block.green .grid-square.filled {
  background: #10b981;
  border-color: #059669;
}

.percent-visualizer-block.green .circle-progress {
  stroke: #10b981;
}

.percent-visualizer-block.green .progress-bar-fill {
  background: #10b981;
}

.percent-visualizer-block.orange .visualizer-title {
  color: #ea580c;
}

.percent-visualizer-block.orange .percent-input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.percent-visualizer-block.orange .grid-square.filled {
  background: #f97316;
  border-color: #ea580c;
}

.percent-visualizer-block.orange .circle-progress {
  stroke: #f97316;
}

.percent-visualizer-block.orange .progress-bar-fill {
  background: #f97316;
}

.percent-visualizer-block.purple .visualizer-title {
  color: #7c3aed;
}

.percent-visualizer-block.purple .percent-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.percent-visualizer-block.purple .grid-square.filled {
  background: #8b5cf6;
  border-color: #7c3aed;
}

.percent-visualizer-block.purple .circle-progress {
  stroke: #8b5cf6;
}

.percent-visualizer-block.purple .progress-bar-fill {
  background: #8b5cf6;
}

.percent-visualizer-block.red .visualizer-title {
  color: #dc2626;
}

.percent-visualizer-block.red .percent-input:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.percent-visualizer-block.red .grid-square.filled {
  background: #ef4444;
  border-color: #dc2626;
}

.percent-visualizer-block.red .circle-progress {
  stroke: #ef4444;
}

.percent-visualizer-block.red .progress-bar-fill {
  background: #ef4444;
}

.percent-visualizer-block.teal .visualizer-title {
  color: #0f766e;
}

.percent-visualizer-block.teal .percent-input:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.percent-visualizer-block.teal .grid-square.filled {
  background: #14b8a6;
  border-color: #0f766e;
}

.percent-visualizer-block.teal .circle-progress {
  stroke: #14b8a6;
}

.percent-visualizer-block.teal .progress-bar-fill {
  background: #14b8a6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .percent-visualizer-block {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  
  .visualizer-title {
    font-size: 1.25rem;
  }
  
  .visualizations {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .percent-grid.grid-large {
    grid-template-columns: repeat(10, 14px);
    grid-template-rows: repeat(10, 14px);
  }
  
  .circle-svg {
    width: 100px;
    height: 100px;
  }
  
  .percent-equivalents {
    flex-direction: column;
    gap: 1rem;
  }
  
  .equivalent-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .percent-visualizer-block {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .visualizer-title {
    font-size: 1.125rem;
  }
  
  .visualizer-description {
    font-size: 0.875rem;
  }
  
  .input-section {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .percent-input {
    width: 100%;
  }
  
  .percent-grid.grid-medium {
    grid-template-columns: repeat(10, 10px);
    grid-template-rows: repeat(10, 10px);
  }
  
  .percent-grid.grid-large {
    grid-template-columns: repeat(10, 12px);
    grid-template-rows: repeat(10, 12px);
  }
  
  .circle-svg {
    width: 80px;
    height: 80px;
  }
  
  .circle-text {
    font-size: 1rem;
  }
  
  .progress-bar-container {
    height: 16px;
  }
  
  .progress-label {
    font-size: 0.875rem;
  }
  
  .equivalent-label {
    font-size: 0.75rem;
  }
  
  .equivalent-value {
    font-size: 1rem;
  }
}

/* Lens Transmission Demo Block */
.lens-transmission-demo-block {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.lens-transmission-demo-block:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.demo-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #333;
}

.demo-description {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
}

.slider-label {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}

.transmission-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e0e0e0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.transmission-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4a90e2;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.transmission-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4a90e2;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.transmission-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  background: #f8f9fa;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.demo-visualization {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.lens-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Lens Styles */
.lens-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  border: 3px solid #333;
  transition: opacity 0.3s ease;
}

.lens-detailed {
  position: relative;
  width: 100px;
  height: 60px;
}

.lens-surface {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  border-radius: 50%;
  border: 3px solid #333;
  transition: opacity 0.3s ease;
}

.lens-edge {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #666;
  border-radius: 50%;
  pointer-events: none;
}

.lens-reflection {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 20px;
  height: 15px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

.lens-sunglasses {
  position: relative;
  width: 120px;
  height: 40px;
}

.lens-left,
.lens-right {
  position: absolute;
  width: 45px;
  height: 35px;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  border-radius: 50%;
  border: 2px solid #333;
  transition: opacity 0.3s ease;
}

.lens-left {
  left: 0;
}

.lens-right {
  right: 0;
}

.sunglasses-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid #333;
  border-radius: 20px;
  pointer-events: none;
}

.lens-eyeglasses {
  position: relative;
  width: 120px;
  height: 40px;
}

.eyeglasses-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #333;
  border-radius: 20px;
  pointer-events: none;
}

.eyeglasses-bridge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 4px;
  background: #333;
  border-radius: 2px;
  pointer-events: none;
}

.light-blocking-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  background: #f8f9fa;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.transmission-explanation {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.transmission-explanation h5 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #333;
}

.transmission-explanation p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

/* Layout Variations */
.lens-transmission-demo-block.horizontal .demo-container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.lens-transmission-demo-block.horizontal .slider-container {
  flex: 1;
  max-width: 200px;
}

.lens-transmission-demo-block.horizontal .demo-visualization {
  flex: 1;
}

.lens-transmission-demo-block.compact .demo-container {
  gap: 1rem;
}

.lens-transmission-demo-block.compact .demo-title {
  font-size: 1.2rem;
}

.lens-transmission-demo-block.expanded .demo-container {
  gap: 2rem;
}

.lens-transmission-demo-block.expanded .demo-title {
  font-size: 1.6rem;
}

/* Size Variations */
.lens-transmission-demo-block.small .lens-circle,
.lens-transmission-demo-block.small .lens-detailed {
  transform: scale(0.8);
}

.lens-transmission-demo-block.small .lens-sunglasses,
.lens-transmission-demo-block.small .lens-eyeglasses {
  transform: scale(0.8);
}

.lens-transmission-demo-block.large .lens-circle,
.lens-transmission-demo-block.large .lens-detailed {
  transform: scale(1.2);
}

.lens-transmission-demo-block.large .lens-sunglasses,
.lens-transmission-demo-block.large .lens-eyeglasses {
  transform: scale(1.2);
}

/* Color Schemes */
.lens-transmission-demo-block.gray .demo-title {
  color: #555;
}

.lens-transmission-demo-block.gray .transmission-slider::-webkit-slider-thumb,
.lens-transmission-demo-block.gray .transmission-slider::-moz-range-thumb {
  background: #666;
}

.lens-transmission-demo-block.gray .lens-circle,
.lens-transmission-demo-block.gray .lens-surface,
.lens-transmission-demo-block.gray .lens-left,
.lens-transmission-demo-block.gray .lens-right {
  background: linear-gradient(135deg, #666, #555);
}

.lens-transmission-demo-block.blue .demo-title {
  color: #2563eb;
}

.lens-transmission-demo-block.blue .transmission-slider::-webkit-slider-thumb,
.lens-transmission-demo-block.blue .transmission-slider::-moz-range-thumb {
  background: #2563eb;
}

.lens-transmission-demo-block.blue .lens-circle,
.lens-transmission-demo-block.blue .lens-surface,
.lens-transmission-demo-block.blue .lens-left,
.lens-transmission-demo-block.blue .lens-right {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.lens-transmission-demo-block.green .demo-title {
  color: #059669;
}

.lens-transmission-demo-block.green .transmission-slider::-webkit-slider-thumb,
.lens-transmission-demo-block.green .transmission-slider::-moz-range-thumb {
  background: #059669;
}

.lens-transmission-demo-block.green .lens-circle,
.lens-transmission-demo-block.green .lens-surface,
.lens-transmission-demo-block.green .lens-left,
.lens-transmission-demo-block.green .lens-right {
  background: linear-gradient(135deg, #059669, #047857);
}

.lens-transmission-demo-block.brown .demo-title {
  color: #92400e;
}

.lens-transmission-demo-block.brown .transmission-slider::-webkit-slider-thumb,
.lens-transmission-demo-block.brown .transmission-slider::-moz-range-thumb {
  background: #92400e;
}

.lens-transmission-demo-block.brown .lens-circle,
.lens-transmission-demo-block.brown .lens-surface,
.lens-transmission-demo-block.brown .lens-left,
.lens-transmission-demo-block.brown .lens-right {
  background: linear-gradient(135deg, #92400e, #78350f);
}

.lens-transmission-demo-block.pink .demo-title {
  color: #be185d;
}

.lens-transmission-demo-block.pink .transmission-slider::-webkit-slider-thumb,
.lens-transmission-demo-block.pink .transmission-slider::-moz-range-thumb {
  background: #be185d;
}

.lens-transmission-demo-block.pink .lens-circle,
.lens-transmission-demo-block.pink .lens-surface,
.lens-transmission-demo-block.pink .lens-left,
.lens-transmission-demo-block.pink .lens-right {
  background: linear-gradient(135deg, #be185d, #a21caf);
}

.lens-transmission-demo-block.yellow .demo-title {
  color: #ca8a04;
}

.lens-transmission-demo-block.yellow .transmission-slider::-webkit-slider-thumb,
.lens-transmission-demo-block.yellow .transmission-slider::-moz-range-thumb {
  background: #ca8a04;
}

.lens-transmission-demo-block.yellow .lens-circle,
.lens-transmission-demo-block.yellow .lens-surface,
.lens-transmission-demo-block.yellow .lens-left,
.lens-transmission-demo-block.yellow .lens-right {
  background: linear-gradient(135deg, #ca8a04, #a16207);
}

/* Responsive Design */
@media (max-width: 768px) {
  .lens-transmission-demo-block {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .demo-title {
    font-size: 1.2rem;
  }
  
  .demo-container {
    gap: 1rem;
  }
  
  .lens-detailed {
    width: 80px;
    height: 48px;
  }
  
  .lens-sunglasses,
  .lens-eyeglasses {
    width: 100px;
    height: 35px;
  }
  
  .lens-left,
  .lens-right {
    width: 38px;
    height: 30px;
  }
  
  .lens-transmission-demo-block.horizontal .demo-container {
    flex-direction: column;
  }
  
  .lens-transmission-demo-block.horizontal .slider-container {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .lens-transmission-demo-block {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }
  
  .demo-title {
    font-size: 1.1rem;
  }
  
  .demo-description {
    font-size: 0.85rem;
  }
  
  .slider-container {
    max-width: 250px;
  }
  
  .transmission-slider {
    height: 6px;
  }
  
  .transmission-slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }
  
  .transmission-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }
  
  .transmission-value {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
  }
  
  .lens-detailed {
    width: 70px;
    height: 42px;
  }
  
  .lens-sunglasses,
  .lens-eyeglasses {
    width: 90px;
    height: 30px;
  }
  
  .lens-left,
  .lens-right {
    width: 32px;
    height: 25px;
  }
  
  .light-blocking-label {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  
  .transmission-explanation {
    padding: 0.75rem;
  }
  
  .transmission-explanation h5 {
    font-size: 1rem;
  }
  
  .transmission-explanation p {
    font-size: 0.8rem;
  }
}

/* PEMDAS Visualizer Block */
.pemdas-visualizer-block {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.pemdas-visualizer-block:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.visualizer-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #333;
  text-align: center;
}

.visualizer-description {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 1.5rem 0;
  text-align: center;
  line-height: 1.5;
}

.visualizer-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.expression-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-label {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.expression-input {
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  background: #f9f9f9;
  transition: all 0.3s ease;
}

.expression-input:focus {
  outline: none;
  border-color: #007bff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.pemdas-rules {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.pemdas-rules h5 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  margin: 0 0 0.75rem 0;
  color: #333;
  text-align: center;
}

.pemdas-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pemdas-item {
  font-size: 0.9rem;
  color: #555;
  padding: 0.25rem 0;
  border-left: 3px solid #007bff;
  padding-left: 0.75rem;
}

.evaluation-container {
  text-align: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.original-expression {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.final-result {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  color: #007bff;
  font-weight: 600;
}

.pemdas-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.control-btn {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.control-btn:active {
  transform: translateY(0);
}

.pemdas-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.pemdas-step {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  position: relative;
}

.pemdas-step:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pemdas-step.current-step {
  border-color: #007bff;
  background: #f0f8ff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.pemdas-step.error-step {
  border-color: #dc3545;
  background: #fff5f5;
}

.step-number {
  position: absolute;
  top: -8px;
  left: 1rem;
  background: #007bff;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.step-operation {
  font-weight: 600;
  color: #007bff;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.step-expression {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
}

.step-result {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  color: #28a745;
  font-weight: 600;
  padding: 0.5rem;
  background: #f8fff9;
  border-radius: 4px;
  border-left: 3px solid #28a745;
}

.step-explanation {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
  font-style: italic;
}

.error-message {
  color: #dc3545;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
}

/* Layout Variations */
.pemdas-visualizer-block.horizontal .visualizer-container {
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
}

.pemdas-visualizer-block.horizontal .pemdas-steps {
  flex: 1;
}

.pemdas-visualizer-block.horizontal .evaluation-container {
  flex: 0 0 300px;
}

.pemdas-visualizer-block.compact .visualizer-container {
  gap: 1rem;
}

.pemdas-visualizer-block.compact .pemdas-step {
  padding: 0.75rem;
}

.pemdas-visualizer-block.expanded .visualizer-container {
  gap: 2rem;
}

.pemdas-visualizer-block.expanded .pemdas-step {
  padding: 1.5rem;
}

/* Size Variations */
.pemdas-visualizer-block.small {
  padding: 1rem;
}

.pemdas-visualizer-block.small .visualizer-title {
  font-size: 1.2rem;
}

.pemdas-visualizer-block.small .expression-input {
  font-size: 0.9rem;
  padding: 0.5rem;
}

.pemdas-visualizer-block.small .pemdas-step {
  padding: 0.75rem;
}

.pemdas-visualizer-block.large {
  padding: 2rem;
}

.pemdas-visualizer-block.large .visualizer-title {
  font-size: 1.8rem;
}

.pemdas-visualizer-block.large .expression-input {
  font-size: 1.1rem;
  padding: 1rem;
}

.pemdas-visualizer-block.large .pemdas-step {
  padding: 1.5rem;
}

/* Color Schemes */
.pemdas-visualizer-block.blue .visualizer-title {
  color: #007bff;
}

.pemdas-visualizer-block.blue .expression-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.pemdas-visualizer-block.blue .control-btn {
  background: #007bff;
}

.pemdas-visualizer-block.blue .control-btn:hover {
  background: #0056b3;
}

.pemdas-visualizer-block.blue .step-number {
  background: #007bff;
}

.pemdas-visualizer-block.blue .step-operation {
  color: #007bff;
}

.pemdas-visualizer-block.blue .pemdas-step.current-step {
  border-color: #007bff;
  background: #f0f8ff;
}

.pemdas-visualizer-block.green .visualizer-title {
  color: #28a745;
}

.pemdas-visualizer-block.green .expression-input:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.pemdas-visualizer-block.green .control-btn {
  background: #28a745;
}

.pemdas-visualizer-block.green .control-btn:hover {
  background: #1e7e34;
}

.pemdas-visualizer-block.green .step-number {
  background: #28a745;
}

.pemdas-visualizer-block.green .step-operation {
  color: #28a745;
}

.pemdas-visualizer-block.green .pemdas-step.current-step {
  border-color: #28a745;
  background: #f0fff4;
}

.pemdas-visualizer-block.purple .visualizer-title {
  color: #6f42c1;
}

.pemdas-visualizer-block.purple .expression-input:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.pemdas-visualizer-block.purple .control-btn {
  background: #6f42c1;
}

.pemdas-visualizer-block.purple .control-btn:hover {
  background: #5a32a3;
}

.pemdas-visualizer-block.purple .step-number {
  background: #6f42c1;
}

.pemdas-visualizer-block.purple .step-operation {
  color: #6f42c1;
}

.pemdas-visualizer-block.purple .pemdas-step.current-step {
  border-color: #6f42c1;
  background: #f8f5ff;
}

.pemdas-visualizer-block.orange .visualizer-title {
  color: #fd7e14;
}

.pemdas-visualizer-block.orange .expression-input:focus {
  border-color: #fd7e14;
  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.1);
}

.pemdas-visualizer-block.orange .control-btn {
  background: #fd7e14;
}

.pemdas-visualizer-block.orange .control-btn:hover {
  background: #e8690b;
}

.pemdas-visualizer-block.orange .step-number {
  background: #fd7e14;
}

.pemdas-visualizer-block.orange .step-operation {
  color: #fd7e14;
}

.pemdas-visualizer-block.orange .pemdas-step.current-step {
  border-color: #fd7e14;
  background: #fff8f0;
}

.pemdas-visualizer-block.red .visualizer-title {
  color: #dc3545;
}

.pemdas-visualizer-block.red .expression-input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.pemdas-visualizer-block.red .control-btn {
  background: #dc3545;
}

.pemdas-visualizer-block.red .control-btn:hover {
  background: #c82333;
}

.pemdas-visualizer-block.red .step-number {
  background: #dc3545;
}

.pemdas-visualizer-block.red .step-operation {
  color: #dc3545;
}

.pemdas-visualizer-block.red .pemdas-step.current-step {
  border-color: #dc3545;
  background: #fff5f5;
}

.pemdas-visualizer-block.teal .visualizer-title {
  color: #20c997;
}

.pemdas-visualizer-block.teal .expression-input:focus {
  border-color: #20c997;
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.1);
}

.pemdas-visualizer-block.teal .control-btn {
  background: #20c997;
}

.pemdas-visualizer-block.teal .control-btn:hover {
  background: #1a9f7a;
}

.pemdas-visualizer-block.teal .step-number {
  background: #20c997;
}

.pemdas-visualizer-block.teal .step-operation {
  color: #20c997;
}

.pemdas-visualizer-block.teal .pemdas-step.current-step {
  border-color: #20c997;
  background: #f0fffd;
}

/* Responsive Design */
@media (max-width: 768px) {
  .pemdas-visualizer-block {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .visualizer-title {
    font-size: 1.3rem;
  }
  
  .visualizer-container {
    gap: 1rem;
  }
  
  .pemdas-visualizer-block.horizontal .visualizer-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .pemdas-visualizer-block.horizontal .evaluation-container {
    flex: none;
  }
  
  .pemdas-controls {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .control-btn {
    min-width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  
  .step-expression,
  .step-result {
    font-size: 0.9rem;
  }
  
  .step-explanation {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .pemdas-visualizer-block {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }
  
  .visualizer-title {
    font-size: 1.1rem;
  }
  
  .visualizer-description {
    font-size: 0.85rem;
  }
  
  .expression-input {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  
  .pemdas-rules h5 {
    font-size: 1rem;
  }
  
  .pemdas-item {
    font-size: 0.8rem;
  }
  
  .original-expression {
    font-size: 1rem;
  }
  
  .final-result {
    font-size: 0.95rem;
  }
  
  .pemdas-step {
    padding: 0.75rem;
  }
  
  .step-number {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }
  
  .step-operation {
    font-size: 0.8rem;
  }
  
  .step-expression,
  .step-result {
    font-size: 0.85rem;
    padding: 0.4rem;
  }
  
  .step-explanation {
    font-size: 0.75rem;
    padding: 0.4rem;
  }
  
  .control-btn {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* Metric Ruler Demo Block */
.metric-ruler-demo-block {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.metric-ruler-demo-block:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.ruler-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.ruler-description {
  margin: 0 0 1rem 0;
  color: #666;
  line-height: 1.5;
}

.ruler-controls {
  margin-bottom: 1rem;
}

.unit-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #555;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.3s ease;
}

.toggle-slider:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider {
  background: #4CAF50;
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.ruler-wrapper {
  position: relative;
  margin: 1rem 0;
  padding: 1rem 0;
}

.ruler-container {
  position: relative;
  width: 100%;
  height: 60px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
}

.ruler-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to right, #e9ecef 1px, transparent 1px),
    linear-gradient(to bottom, #e9ecef 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.3;
}

.ruler-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #333;
  transform: translateY(-50%);
}

.ruler-line.thin {
  height: 1px;
}

.ruler-line.thick {
  height: 3px;
}

.ruler-ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.major-tick {
  position: absolute;
  top: 0;
  width: 2px;
  background: #333;
  transform: translateX(-50%);
}

.minor-tick {
  position: absolute;
  top: 10px;
  width: 1px;
  background: #666;
  transform: translateX(-50%);
}

.tick-number {
  position: absolute;
  top: 25px;
  font-size: 0.75rem;
  color: #333;
  transform: translateX(-50%);
  font-weight: 500;
}

.ruler-interaction-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: crosshair;
  z-index: 10;
}

.measurement-display {
  margin-top: 1rem;
  text-align: center;
}

.current-measurement {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.measurement-value {
  color: #007bff;
}

.measurement-unit {
  color: #666;
  font-weight: 400;
}

.both-units {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.ruler-tooltip {
  position: fixed;
  background: #333;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ruler Styles */
.metric-ruler-demo-block.standard .ruler-line {
  background: #333;
}

.metric-ruler-demo-block.minimal .ruler-line {
  background: #999;
}

.metric-ruler-demo-block.minimal .major-tick {
  background: #999;
}

.metric-ruler-demo-block.minimal .minor-tick {
  background: #ccc;
}

.metric-ruler-demo-block.bold .ruler-line {
  background: #000;
  height: 3px;
}

.metric-ruler-demo-block.bold .major-tick {
  background: #000;
  width: 3px;
}

.metric-ruler-demo-block.bold .tick-number {
  font-weight: 700;
}

.metric-ruler-demo-block.colorful .ruler-line {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
}

.metric-ruler-demo-block.colorful .major-tick {
  background: #ff6b6b;
}

.metric-ruler-demo-block.colorful .minor-tick {
  background: #4ecdc4;
}

/* Size Variations */
.metric-ruler-demo-block.small {
  padding: 1rem;
}

.metric-ruler-demo-block.small .ruler-container {
  height: 40px;
}

.metric-ruler-demo-block.small .ruler-title {
  font-size: 1.1rem;
}

.metric-ruler-demo-block.small .current-measurement {
  font-size: 1.2rem;
}

.metric-ruler-demo-block.large {
  padding: 2rem;
}

.metric-ruler-demo-block.large .ruler-container {
  height: 80px;
}

.metric-ruler-demo-block.large .ruler-title {
  font-size: 1.5rem;
}

.metric-ruler-demo-block.large .current-measurement {
  font-size: 2rem;
}

/* Color Schemes */
.metric-ruler-demo-block.bw .ruler-title {
  color: #333;
}

.metric-ruler-demo-block.bw .measurement-value {
  color: #333;
}

.metric-ruler-demo-block.blue .ruler-title {
  color: #007bff;
}

.metric-ruler-demo-block.blue .measurement-value {
  color: #007bff;
}

.metric-ruler-demo-block.blue .ruler-line {
  background: #007bff;
}

.metric-ruler-demo-block.blue .major-tick {
  background: #007bff;
}

.metric-ruler-demo-block.green .ruler-title {
  color: #28a745;
}

.metric-ruler-demo-block.green .measurement-value {
  color: #28a745;
}

.metric-ruler-demo-block.green .ruler-line {
  background: #28a745;
}

.metric-ruler-demo-block.green .major-tick {
  background: #28a745;
}

.metric-ruler-demo-block.purple .ruler-title {
  color: #6f42c1;
}

.metric-ruler-demo-block.purple .measurement-value {
  color: #6f42c1;
}

.metric-ruler-demo-block.purple .ruler-line {
  background: #6f42c1;
}

.metric-ruler-demo-block.purple .major-tick {
  background: #6f42c1;
}

.metric-ruler-demo-block.orange .ruler-title {
  color: #fd7e14;
}

.metric-ruler-demo-block.orange .measurement-value {
  color: #fd7e14;
}

.metric-ruler-demo-block.orange .ruler-line {
  background: #fd7e14;
}

.metric-ruler-demo-block.orange .major-tick {
  background: #fd7e14;
}

.metric-ruler-demo-block.red .ruler-title {
  color: #dc3545;
}

.metric-ruler-demo-block.red .measurement-value {
  color: #dc3545;
}

.metric-ruler-demo-block.red .ruler-line {
  background: #dc3545;
}

.metric-ruler-demo-block.red .major-tick {
  background: #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
  .metric-ruler-demo-block {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .ruler-title {
    font-size: 1.1rem;
  }
  
  .ruler-container {
    height: 50px;
  }
  
  .current-measurement {
    font-size: 1.3rem;
  }
  
  .tick-number {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .metric-ruler-demo-block {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }
  
  .ruler-title {
    font-size: 1rem;
  }
  
  .ruler-description {
    font-size: 0.9rem;
  }
  
  .ruler-container {
    height: 40px;
  }
  
  .current-measurement {
    font-size: 1.1rem;
  }
  
  .tick-number {
    font-size: 0.65rem;
  }
  
  .toggle-label {
    font-size: 0.8rem;
  }
  
  .toggle-slider {
    width: 35px;
    height: 18px;
  }
  
  .toggle-slider:before {
    width: 14px;
    height: 14px;
  }
  
  .toggle-label input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(17px);
  }
}

/* Coordinate Plane Plotter Block */
.coordinate-plane-plotter-block {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.coordinate-plane-plotter-block:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.plotter-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.plotter-description {
  margin: 0 0 1rem 0;
  color: #666;
  line-height: 1.5;
}

.coordinate-wrapper {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.coordinate-plane {
  max-width: 100%;
  height: auto;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.coordinate-controls {
  margin: 1rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.point-input,
.equation-input {
  margin-bottom: 1rem;
}

.point-input:last-child,
.equation-input:last-child {
  margin-bottom: 0;
}

.point-input h5,
.equation-input h5 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.input-group input[type="number"],
.input-group input[type="text"] {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 80px;
}

.input-group input[type="number"]:focus,
.input-group input[type="text"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.input-group select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  background: white;
  min-width: 100px;
}

.input-group button {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.input-group button:hover {
  background: #0056b3;
}

.coordinate-instructions {
  margin-top: 1rem;
  padding: 1rem;
  background: #e7f3ff;
  border-radius: 4px;
  border-left: 4px solid #007bff;
}

.coordinate-instructions p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: #333;
}

.coordinate-instructions strong {
  color: #007bff;
}

.coordinate-tooltip {
  position: fixed;
  background: #333;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Plane Styles */
.coordinate-plane-plotter-block.standard .coordinate-plane {
  border-color: #333;
}

.coordinate-plane-plotter-block.minimal .coordinate-plane {
  border-color: #999;
}

.coordinate-plane-plotter-block.minimal .coordinate-plane line {
  stroke-width: 0.5;
}

.coordinate-plane-plotter-block.bold .coordinate-plane {
  border-width: 2px;
  border-color: #000;
}

.coordinate-plane-plotter-block.bold .coordinate-plane line {
  stroke-width: 2;
}

.coordinate-plane-plotter-block.colorful .coordinate-plane {
  border-color: #ff6b6b;
}

.coordinate-plane-plotter-block.colorful .coordinate-plane line {
  stroke: #4ecdc4;
}

/* Size Variations */
.coordinate-plane-plotter-block.small {
  padding: 1rem;
}

.coordinate-plane-plotter-block.small .coordinate-wrapper {
  padding: 0.5rem;
}

.coordinate-plane-plotter-block.small .plotter-title {
  font-size: 1.1rem;
}

.coordinate-plane-plotter-block.large {
  padding: 2rem;
}

.coordinate-plane-plotter-block.large .coordinate-wrapper {
  padding: 1.5rem;
}

.coordinate-plane-plotter-block.large .plotter-title {
  font-size: 1.5rem;
}

/* Color Schemes */
.coordinate-plane-plotter-block.classic .plotter-title {
  color: #333;
}

.coordinate-plane-plotter-block.classic .input-group button {
  background: #333;
}

.coordinate-plane-plotter-block.classic .input-group button:hover {
  background: #555;
}

.coordinate-plane-plotter-block.blue .plotter-title {
  color: #007bff;
}

.coordinate-plane-plotter-block.blue .input-group button {
  background: #007bff;
}

.coordinate-plane-plotter-block.blue .input-group button:hover {
  background: #0056b3;
}

.coordinate-plane-plotter-block.blue .coordinate-instructions {
  background: #e7f3ff;
  border-left-color: #007bff;
}

.coordinate-plane-plotter-block.green .plotter-title {
  color: #28a745;
}

.coordinate-plane-plotter-block.green .input-group button {
  background: #28a745;
}

.coordinate-plane-plotter-block.green .input-group button:hover {
  background: #1e7e34;
}

.coordinate-plane-plotter-block.green .coordinate-instructions {
  background: #e7f7e7;
  border-left-color: #28a745;
}

.coordinate-plane-plotter-block.purple .plotter-title {
  color: #6f42c1;
}

.coordinate-plane-plotter-block.purple .input-group button {
  background: #6f42c1;
}

.coordinate-plane-plotter-block.purple .input-group button:hover {
  background: #5a2d91;
}

  .coordinate-plane-plotter-block.purple .coordinate-instructions {
    background: #f3e7ff;
    border-left-color: #6f42c1;
  }

  .coordinate-plane-plotter-block.warm .plotter-title {
    color: #fd7e14;
  }

  .coordinate-plane-plotter-block.warm .input-group button {
    background: #fd7e14;
  }

  .coordinate-plane-plotter-block.warm .input-group button:hover {
    background: #e55a00;
  }

  .coordinate-plane-plotter-block.warm .coordinate-instructions {
    background: #fff3e7;
    border-left-color: #fd7e14;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .coordinate-plane-plotter-block {
      padding: 1rem;
      margin: 1rem 0;
    }
    
    .plotter-title {
      font-size: 1.1rem;
    }
    
    .coordinate-wrapper {
      padding: 0.5rem;
    }
    
    .input-group {
      flex-direction: column;
      align-items: stretch;
    }
    
    .input-group input[type="number"],
    .input-group input[type="text"],
    .input-group select {
      min-width: auto;
      width: 100%;
    }
    
    .input-group button {
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .coordinate-plane-plotter-block {
      padding: 0.75rem;
      margin: 0.75rem 0;
    }
    
    .plotter-title {
      font-size: 1rem;
    }
    
    .plotter-description {
      font-size: 0.9rem;
    }
    
    .coordinate-wrapper {
      padding: 0.25rem;
    }
    
    .coordinate-controls {
      padding: 0.75rem;
    }
    
    .point-input h5,
    .equation-input h5 {
      font-size: 0.9rem;
    }
    
    .input-group input[type="number"],
    .input-group input[type="text"],
    .input-group select {
      font-size: 0.8rem;
      padding: 0.4rem;
    }
    
    .input-group button {
      font-size: 0.8rem;
      padding: 0.4rem 0.75rem;
    }
    
    .coordinate-instructions {
      padding: 0.75rem;
    }
    
    .coordinate-instructions p {
      font-size: 0.8rem;
    }
  }

  /* Pythagorean Triangle Block */
  .pythagorean-triangle-block {
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .pythagorean-triangle-block:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .triangle-title {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-align: center;
  }

  .triangle-description {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    text-align: center;
  }

  .triangle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
  }

  .triangle-svg {
    max-width: 100%;
    height: auto;
  }

  .pythagorean-formula {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
  }

  .pythagorean-formula h5 {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-align: center;
  }

  .formula-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .formula {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2c3e50;
  }

  .substitution {
    font-size: 1rem;
    color: #495057;
  }

  .calculation {
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
  }

  .pythagorean-calculations {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
  }

  .pythagorean-calculations h5 {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-align: center;
  }

  .calculation-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .step {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.75rem;
  }

  .step strong {
    color: #2c3e50;
    font-weight: 600;
  }

  .step-detail {
    color: #495057;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    font-family: 'Courier New', monospace;
  }

  .pythagorean-controls {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
  }

  .pythagorean-controls h5 {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-align: center;
  }

  .pythagorean-controls .input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
  }

  .pythagorean-controls label {
    color: #495057;
    font-weight: 500;
    margin-right: 0.5rem;
  }

  .pythagorean-controls input[type="number"] {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
  }

  .pythagorean-controls input[type="number"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }

  .pythagorean-controls button {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .pythagorean-controls button:hover {
    background: #0056b3;
  }

  .pythagorean-instructions {
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
  }

  .pythagorean-instructions p {
    color: #2c3e50;
    font-size: 0.95rem;
    margin: 0 0 0.5rem 0;
  }

  .pythagorean-instructions ul {
    color: #495057;
    font-size: 0.9rem;
    margin: 0;
    padding-left: 1.5rem;
  }

  .pythagorean-instructions li {
    margin: 0.25rem 0;
  }

  /* Triangle Style Variations */
  .pythagorean-triangle-block.standard .triangle-svg {
    filter: none;
  }

  .pythagorean-triangle-block.minimal .triangle-svg {
    opacity: 0.8;
  }

  .pythagorean-triangle-block.bold .triangle-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  .pythagorean-triangle-block.colorful .triangle-svg {
    filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3));
  }

  .pythagorean-triangle-block.educational .triangle-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 123, 255, 0.3));
  }

  /* Size Variations */
  .pythagorean-triangle-block.small {
    padding: 1rem;
    margin: 1rem 0;
  }

  .pythagorean-triangle-block.small .triangle-title {
    font-size: 1.2rem;
  }

  .pythagorean-triangle-block.small .triangle-wrapper {
    padding: 0.5rem;
  }

  .pythagorean-triangle-block.large {
    padding: 2rem;
    margin: 2rem 0;
  }

  .pythagorean-triangle-block.large .triangle-title {
    font-size: 1.6rem;
  }

  .pythagorean-triangle-block.large .triangle-wrapper {
    padding: 1.5rem;
  }

  /* Color Scheme Variations */
  .pythagorean-triangle-block.classic .triangle-title {
    color: #2c3e50;
  }

  .pythagorean-triangle-block.classic .pythagorean-controls button {
    background: #007bff;
  }

  .pythagorean-triangle-block.classic .pythagorean-controls button:hover {
    background: #0056b3;
  }

  .pythagorean-triangle-block.blue .triangle-title {
    color: #007bff;
  }

  .pythagorean-triangle-block.blue .pythagorean-controls button {
    background: #007bff;
  }

  .pythagorean-triangle-block.blue .pythagorean-controls button:hover {
    background: #0056b3;
  }

  .pythagorean-triangle-block.blue .pythagorean-instructions {
    background: #e7f3ff;
    border-left-color: #007bff;
  }

  .pythagorean-triangle-block.green .triangle-title {
    color: #28a745;
  }

  .pythagorean-triangle-block.green .pythagorean-controls button {
    background: #28a745;
  }

  .pythagorean-triangle-block.green .pythagorean-controls button:hover {
    background: #1e7e34;
  }

  .pythagorean-triangle-block.green .pythagorean-instructions {
    background: #e7f7ed;
    border-left-color: #28a745;
  }

  .pythagorean-triangle-block.purple .triangle-title {
    color: #6f42c1;
  }

  .pythagorean-triangle-block.purple .pythagorean-controls button {
    background: #6f42c1;
  }

  .pythagorean-triangle-block.purple .pythagorean-controls button:hover {
    background: #5a2d91;
  }

  .pythagorean-triangle-block.purple .pythagorean-instructions {
    background: #f3e7ff;
    border-left-color: #6f42c1;
  }

  .pythagorean-triangle-block.warm .triangle-title {
    color: #fd7e14;
  }

  .pythagorean-triangle-block.warm .pythagorean-controls button {
    background: #fd7e14;
  }

  .pythagorean-triangle-block.warm .pythagorean-controls button:hover {
    background: #e55a00;
  }

  .pythagorean-triangle-block.warm .pythagorean-instructions {
    background: #fff3e7;
    border-left-color: #fd7e14;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .pythagorean-triangle-block {
      padding: 1rem;
      margin: 1rem 0;
    }
    
    .triangle-title {
      font-size: 1.2rem;
    }
    
    .triangle-wrapper {
      padding: 0.5rem;
    }
    
    .pythagorean-controls .input-group {
      flex-direction: column;
      align-items: stretch;
    }
    
    .pythagorean-controls input[type="number"] {
      width: 100%;
    }
    
    .pythagorean-controls button {
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .pythagorean-triangle-block {
      padding: 0.75rem;
      margin: 0.75rem 0;
    }
    
    .triangle-title {
      font-size: 1.1rem;
    }
    
    .triangle-description {
      font-size: 0.9rem;
    }
    
    .triangle-wrapper {
      padding: 0.25rem;
    }
    
    .pythagorean-formula,
    .pythagorean-calculations,
    .pythagorean-controls {
      padding: 0.75rem;
    }
    
    .pythagorean-formula h5,
    .pythagorean-calculations h5,
    .pythagorean-controls h5 {
      font-size: 1rem;
    }
    
    .formula {
      font-size: 1rem;
    }
    
    .substitution {
      font-size: 0.9rem;
    }
    
    .calculation {
      font-size: 0.8rem;
    }
    
    .step {
      padding: 0.5rem;
    }
    
    .step-detail {
      font-size: 0.8rem;
    }
    
    .pythagorean-controls input[type="number"] {
      font-size: 0.8rem;
      padding: 0.4rem;
    }
    
    .pythagorean-controls button {
      font-size: 0.8rem;
      padding: 0.4rem 0.75rem;
    }
    
    .pythagorean-instructions {
      padding: 0.75rem;
    }
    
    .pythagorean-instructions p {
      font-size: 0.85rem;
    }
    
      .pythagorean-instructions ul {
    font-size: 0.8rem;
  }
}

/* Trigonometry Triangle Visualizer Block */
.trig-triangle-block {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.trig-triangle-block:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.triangle-title {
  color: #2c3e50;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  text-align: center;
}

.triangle-description {
  color: #6c757d;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.triangle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.triangle-svg {
  max-width: 100%;
  height: auto;
}

.sohcahtoa-formula {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}

.sohcahtoa-formula h5 {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  text-align: center;
}

.formula-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.formula-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.formula {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
}

.trig-calculations {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}

.trig-calculations h5 {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  text-align: center;
}

.calculation-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.step {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 0.75rem;
}

.step strong {
  color: #2c3e50;
  font-weight: 600;
}

.trig-controls {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}

.trig-controls h5 {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  text-align: center;
}

.trig-controls .input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.trig-controls label {
  color: #495057;
  font-weight: 500;
  margin-right: 0.5rem;
}

.trig-controls input[type="range"] {
  width: 150px;
  margin: 0 0.5rem;
}

.trig-controls input[type="number"] {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.9rem;
}

.trig-controls input[type="number"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.trig-controls #angle-value {
  color: #007bff;
  font-weight: 600;
  font-size: 0.9rem;
}

.trig-instructions {
  background: #e7f3ff;
  border-left: 4px solid #007bff;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
}

.trig-instructions p {
  color: #2c3e50;
  font-size: 0.95rem;
  margin: 0 0 0.5rem 0;
}

.trig-instructions ul {
  color: #495057;
  font-size: 0.9rem;
  margin: 0;
  padding-left: 1.5rem;
}

.trig-instructions li {
  margin: 0.25rem 0;
}

/* Triangle Style Variations */
.trig-triangle-block.standard .triangle-svg {
  filter: none;
}

.trig-triangle-block.minimal .triangle-svg {
  opacity: 0.8;
}

.trig-triangle-block.bold .triangle-svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.trig-triangle-block.colorful .triangle-svg {
  filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3));
}

.trig-triangle-block.educational .triangle-svg {
  filter: drop-shadow(0 2px 4px rgba(0, 123, 255, 0.3));
}

/* Size Variations */
.trig-triangle-block.small {
  padding: 1rem;
  margin: 1rem 0;
}

.trig-triangle-block.small .triangle-title {
  font-size: 1.2rem;
}

.trig-triangle-block.small .triangle-wrapper {
  padding: 0.5rem;
}

.trig-triangle-block.large {
  padding: 2rem;
  margin: 2rem 0;
}

.trig-triangle-block.large .triangle-title {
  font-size: 1.6rem;
}

.trig-triangle-block.large .triangle-wrapper {
  padding: 1.5rem;
}

/* Color Scheme Variations */
.trig-triangle-block.classic .triangle-title {
  color: #2c3e50;
}

.trig-triangle-block.classic .trig-controls input[type="range"] {
  accent-color: #007bff;
}

.trig-triangle-block.classic .trig-controls input[type="number"]:focus {
  border-color: #007bff;
}

.trig-triangle-block.blue .triangle-title {
  color: #007bff;
}

.trig-triangle-block.blue .trig-controls input[type="range"] {
  accent-color: #007bff;
}

.trig-triangle-block.blue .trig-controls input[type="number"]:focus {
  border-color: #007bff;
}

.trig-triangle-block.blue .trig-instructions {
  background: #e7f3ff;
  border-left-color: #007bff;
}

.trig-triangle-block.green .triangle-title {
  color: #28a745;
}

.trig-triangle-block.green .trig-controls input[type="range"] {
  accent-color: #28a745;
}

.trig-triangle-block.green .trig-controls input[type="number"]:focus {
  border-color: #28a745;
}

.trig-triangle-block.green .trig-instructions {
  background: #e7f7ed;
  border-left-color: #28a745;
}

.trig-triangle-block.purple .triangle-title {
  color: #6f42c1;
}

.trig-triangle-block.purple .trig-controls input[type="range"] {
  accent-color: #6f42c1;
}

.trig-triangle-block.purple .trig-controls input[type="number"]:focus {
  border-color: #6f42c1;
}

.trig-triangle-block.purple .trig-instructions {
  background: #f3e7ff;
  border-left-color: #6f42c1;
}

.trig-triangle-block.warm .triangle-title {
  color: #fd7e14;
}

.trig-triangle-block.warm .trig-controls input[type="range"] {
  accent-color: #fd7e14;
}

.trig-triangle-block.warm .trig-controls input[type="number"]:focus {
  border-color: #fd7e14;
}

.trig-triangle-block.warm .trig-instructions {
  background: #fff3e7;
  border-left-color: #fd7e14;
}

/* Responsive Design */
@media (max-width: 768px) {
  .trig-triangle-block {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .triangle-title {
    font-size: 1.2rem;
  }
  
  .triangle-wrapper {
    padding: 0.5rem;
  }
  
  .trig-controls .input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .trig-controls input[type="range"] {
    width: 100%;
  }
  
  .trig-controls input[type="number"] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .trig-triangle-block {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }
  
  .triangle-title {
    font-size: 1.1rem;
  }
  
  .triangle-description {
    font-size: 0.9rem;
  }
  
  .triangle-wrapper {
    padding: 0.25rem;
  }
  
  .sohcahtoa-formula,
  .trig-calculations,
  .trig-controls {
    padding: 0.75rem;
  }
  
  .sohcahtoa-formula h5,
  .trig-calculations h5,
  .trig-controls h5 {
    font-size: 1rem;
  }
  
  .formula {
    font-size: 1rem;
  }
  
  .step {
    padding: 0.5rem;
  }
  
  .trig-controls input[type="range"] {
    font-size: 0.8rem;
  }
  
  .trig-controls input[type="number"] {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
  
  .trig-controls #angle-value {
    font-size: 0.8rem;
  }
  
  .trig-instructions {
    padding: 0.75rem;
  }
  
  .trig-instructions p {
    font-size: 0.85rem;
  }
  
  .trig-instructions ul {
    font-size: 0.8rem;
  }
}