*{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%);display:flex;align-items:center;gap:10px}.scale-labels{display:flex;flex-direction:column;justify-content:space-between;height:350px;writing-mode:vertical-rl;text-orientation:mixed}.scale-labels .label{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px}.scale-labels .basic{color:#4a90d9}.scale-labels .acidic{color:#e74c3c}.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:-30px;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-size:12px;font-weight:700}.indicator{position:absolute;left:50px;display:flex;align-items:center;gap:5px;transition:top .3s ease-out}.indicator-arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:15px solid #2c3e50}.indicator-value{background:#2c3e50;padding:8px 15px;border-radius:8px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 15px #0000004d}.indicator-value .label{color:#95a5a6;font-size:12px;text-transform:uppercase}.indicator-value #ph-value{color:#fff;font-size:24px;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-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}#reset-litmus-btn{background:#9b59b6;box-shadow:0 4px 15px #9b59b666}#reset-litmus-btn:hover{background:#8e44ad;transform:translateY(-2px);box-shadow:0 6px 20px #9b59b680}#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:15px}.scale-bar{height:250px}#volume-display{right:15px}}