@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
 
 body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #1e293b; }
 
 .modal {
     transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
 }
 .highlight-container {
     display: inline-block;
     cursor: pointer;
     line-height: 1.6;
     border-width: 3px;
     border-color: blue;
 }

 .highlight-granular {
     padding: 1px 0;
     border-radius: 2px;
     transition: background-color 0.3s ease;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); 
     position: relative;
 }

 .highlight-structural {
     padding: 1px 0;
     border-bottom: 2px dashed #94a3b8; 
     cursor: default;
 }

 .tooltip {
     position: absolute;
     z-index: 50;
     max-width: 300px;
     pointer-events: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .structural-link:hover {
     text-decoration: underline;
     color: #f59e0b; /* Amber-500 hover */
 }
 
 .range-amber::-webkit-slider-thumb {
     background-color: #f59e0b;
 }
 
 .range-amber::-moz-range-thumb {
     background-color: #f59e0b;
 }
 
 .loading-spinner {
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top: 4px solid #fff;
     border-radius: 50%;
     width: 16px;
     height: 16px;
     animation: spin 1s linear infinite;
     display: inline-block;
     margin-right: 8px;
 }
 
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }