*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;background:#1a1a2e}#app{width:100vw;height:100vh;position:relative}#canvas-container{width:100%;height:100%;position:absolute;top:0;left:0}#canvas-container canvas{display:block}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#ui-overlay>*{pointer-events:auto}#ph-scale{position:absolute;left:30px;top:50%;transform:translateY(-50%)}.scale-bar{position:relative;width:40px;height:350px;border-radius:20px;overflow:visible}.scale-gradient{width:100%;height:100%;border-radius:20px;background:linear-gradient(to bottom,#9b59b6,#3498db,#2ecc71,#f1c40f,#e67e22,#e74c3c);box-shadow:0 0 20px #0000004d}.scale-ticks{position:absolute;right:-28px;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:#ffffffb3;font-size:11px;font-weight:600}.indicator{position:absolute;left:50px;display:flex;align-items:center;gap:0;transition:top .3s ease-out}.indicator-arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:12px solid #2c3e50;transition:border-right-color .3s ease}.indicator-value{background:#2c3e50;padding:8px 14px;border-radius:8px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px #0000004d;transition:background .3s ease}.indicator-value .label{color:#95a5a6;font-size:12px;text-transform:uppercase}.indicator-value #ph-value{color:#fff;font-size:22px;font-weight:700}#volume-display{position:absolute;right:30px;top:50%;transform:translateY(-50%);background:#2c3e50;padding:20px 25px;border-radius:12px;text-align:center;box-shadow:0 4px 20px #0000004d}#volume-display .label{display:block;color:#95a5a6;font-size:12px;text-transform:uppercase;margin-bottom:5px}#volume-display #volume-value{color:#fff;font-size:36px;font-weight:700}#volume-display .unit{color:#3498db;font-size:18px;margin-left:5px}#substance-info{position:absolute;right:30px;top:50%;transform:translateY(calc(-50% + 90px));background:#2c3e50e6;padding:10px 18px;border-radius:8px;text-align:center;box-shadow:0 4px 15px #0000004d;min-width:100px}#substance-name{display:block;color:#ecf0f1;font-size:14px;font-weight:700}#substance-detail{display:block;color:#7f8c8d;font-size:11px;margin-top:3px}#substance-selector{position:absolute;top:30px;left:50%;transform:translate(-50%);background:#2c3e50;padding:15px 25px;border-radius:12px;display:flex;align-items:center;gap:15px;box-shadow:0 4px 20px #0000004d}#substance-selector label{color:#95a5a6;font-size:14px;text-transform:uppercase}#substance-select{background:#34495e;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:16px;cursor:pointer;outline:none;min-width:180px}#substance-select:hover{background:#4a6785}#substance-select option{background:#34495e;padding:10px}#control-panel{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:15px}#control-panel button{color:#fff;border:none;padding:15px 25px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease}#reset-btn{background:#3498db;box-shadow:0 4px 15px #3498db66}#reset-btn:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 6px 20px #3498db80}#control-panel button:active{transform:translateY(0)}#instructions{position:absolute;bottom:30px;right:30px;background:#2c3e50e6;padding:20px;border-radius:12px;max-width:280px;box-shadow:0 4px 20px #0000004d}#instructions h3{color:#3498db;font-size:14px;text-transform:uppercase;margin-bottom:10px;letter-spacing:1px}#instructions ul{list-style:none}#instructions li{color:#bdc3c7;font-size:13px;margin-bottom:8px;padding-left:15px;position:relative}#instructions li:before{content:">";position:absolute;left:0;color:#3498db}#instructions strong{color:#ecf0f1}#tooltip{position:absolute;background:#2c3e50;color:#fff;padding:8px 15px;border-radius:6px;font-size:14px;pointer-events:none;z-index:100;box-shadow:0 4px 15px #0000004d;transition:opacity .2s ease}#tooltip.hidden{opacity:0;visibility:hidden}@media (max-width: 768px){#instructions{display:none}#ph-scale{left:10px}.scale-bar{height:250px;width:30px;border-radius:15px}#volume-display{right:15px}}