.thermometer-container {flex:1;display:flex;justify-content:center;align-items:center;position:relative;}.thermometer {width:60px;height:70%;background:rgba(255, 255, 255, 0.1);border-radius:30px;position:relative;overflow:hidden;box-shadow:inset 0 0 10px rgba(0, 0, 0, 0.3);transition:box-shadow 0.3s ease;}.thermometer.dragging {box-shadow:inset 0 0 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 69, 0, 0.3);}.thermometer-toucharea {position:absolute;width:120px; height:100%;left:50%;transform:translateX(-50%);z-index:10;cursor:grab;}.thermometer-gradient {position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(to top,#7CFC00 0%,#9ACD32 10%, #FFFF00 30%, #FFA500 50%, #FF4500 70%, #FF0000 85%, #2B0042 100% );transform-origin:bottom;transform:scaleY(0.01);z-index:-1;will-change:transform;transition:transform 0.1s ease-out;border-radius:0 0 30px 30px;}#level-markers-container {position:absolute;height:70%; width:150px;right:0;top:15%; pointer-events:none;z-index:5;}.level-marker {position:absolute;width:60px;height:3px;background-color:#FFD700;left:0;transform:scaleX(0);transform-origin:left;animation:extendMarker 0.5s forwards ease-out;pointer-events:none;z-index:5;}@keyframes extendMarker {from{transform:scaleX(0); }to{transform:scaleX(1); }}.current-level-indicator {width:70px;height:4px;box-shadow:0 0 10px rgba(255, 255, 255, 0.7);z-index:10;animation:pulse-width 1.5s infinite alternate;}@keyframes pulse-width {from{transform:scaleX(1); }to{transform:scaleX(1.2); }}.level-text {position:absolute;left:70px; font-size:0.8rem;transform:translateY(-50%);white-space:nowrap;opacity:0;animation:fadeIn 0.5s forwards ease-out 0.2s;pointer-events:none;color:rgba(255, 255, 255, 0.9);text-shadow:0 0 5px rgba(0, 0, 0, 0.5);}@keyframes fadeIn {from{opacity:0; transform:translateY(-50%) translateX(-10px); }to{opacity:1; transform:translateY(-50%) translateX(0); }}.scoville-value {position:absolute;background-color:rgba(0, 0, 0, 0.8);padding:0.5rem 1rem;border-radius:20px;font-size:1rem;font-weight:bold;color:white;opacity:0;transform:translateY(10px);transition:opacity 0.3s, transform 0.3s, background-color 0.3s;pointer-events:none;box-shadow:0 2px 8px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:50;max-width:150px;text-align:center;left:70px; }.scoville-value.visible {opacity:1;transform:translateY(0);}.scoville-value::before {content:'';position:absolute;top:50%;left:-10px;width:10px;height:2px;background-color:rgba(255, 255, 255, 0.5);transform:translateY(-50%);}.thermometer-tooltip {position:absolute;background-color:rgba(0, 0, 0, 0.8);color:white;padding:0.5rem 1rem;border-radius:5px;font-size:0.9rem;opacity:0;transition:opacity 0.2s, transform 0.2s;pointer-events:none;z-index:200;white-space:nowrap;box-shadow:0 2px 8px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);transform:translateX(0);}.thermometer-tooltip.visible {opacity:1;transform:translateX(5px);}.thermometer-tooltip::after {content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-style:solid;border-color:transparent rgba(0, 0, 0, 0.8) transparent transparent;}@media (max-width:767px) {.thermometer {width:50px;height:60%;}#level-markers-container {height:60%; top:20%; width:120px;}.level-marker {width:40px;}.level-text {left:50px;font-size:0.7rem;}.scoville-value {left:60px;font-size:0.9rem;padding:0.4rem 0.8rem;}}@media (min-width:768px) {.thermometer-container {flex:1;justify-content:center;margin-right:0;position:relative;}.thermometer {height:80%;width:70px;}#level-markers-container {height:80%; top:10%; width:180px;}.level-marker {width:80px;}.level-text {left:90px;font-size:0.9rem;}.scoville-value {left:100px;padding:0.6rem 1.2rem;font-size:1.1rem;}.thermometer-gradient {animation:pulse-glow 2s infinite alternate;}@keyframes pulse-glow {0%{filter:brightness(1); }100%{filter:brightness(1.1); }}.level-marker, .level-text {opacity:1;visibility:visible;}.main-content {flex-direction:row;justify-content:center;align-items:center;}}.thermometer-canvas {max-height:100%;width:auto;display:block;}