html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:Arial,sans-serif;touch-action:manipulation}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}video,canvas{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}canvas{pointer-events:none}.glass{background:rgba(5,15,30,.76);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.35)}.top{position:fixed;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;z-index:3;border-radius:16px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}.top h1,.top p,.drawer h2,.drawer p{margin:0}.top h1{font-size:16px}.top p{font-size:10px;color:#b7c5d8;margin-top:3px}.top b{font-size:11px;color:#8fffd4}.hands{position:fixed;top:76px;left:8px;right:8px;z-index:3;border-radius:15px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.hands div{background:rgba(255,255,255,.055);border-radius:10px;padding:7px;text-align:center}.hands small{display:block;color:#9fb0c4;font-size:9px}.hands strong{display:block;margin-top:3px;font-size:13px;color:#8fffd4}.counters{position:fixed;top:143px;left:8px;z-index:3;border-radius:14px;padding:7px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:130px}.counters div{display:flex;justify-content:space-between;background:rgba(255,255,255,.055);border-radius:8px;padding:5px 7px;font-size:17px}.counters b{font-size:15px;color:#5ee7ff}.controls{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:4;border-radius:16px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}button{min-height:44px;border:none;border-radius:11px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:12px}.primary{background:#00c896;color:#001c14}button:disabled{opacity:.45}.banner{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.86);opacity:0;z-index:8;padding:12px 18px;border-radius:999px;background:#00d39b;color:#001b14;font-weight:900;font-size:19px;white-space:nowrap;transition:.15s}.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,390px);z-index:10;border-radius:18px 0 0 18px;display:flex;flex-direction:column;transform:translateX(105%);transition:.22s}.drawer.open{transform:translateX(0)}.drawerHead{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid rgba(255,255,255,.1)}.drawerHead h2{font-size:17px}.drawerHead p{font-size:9px;color:#aebdd0;margin-top:3px}.drawerHead button{width:38px;font-size:22px}.drawerBody{overflow:auto;padding:10px;padding-bottom:max(20px,env(safe-area-inset-bottom))}.drawer label{display:grid;grid-template-columns:1fr 1fr 58px;gap:8px;align-items:center;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.07);font-size:11px;color:#c5d3e4}.drawer input[type=range],.drawer select{width:100%}.drawer output{text-align:right;color:#8fffd4}.drawer label.check{grid-template-columns:22px 1fr}.drawer label.check input{width:18px;height:18px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px 4px}@media(min-width:700px){.top,.hands,.controls{left:50%;right:auto;width:min(760px,calc(100% - 20px));transform:translateX(-50%)}.counters{left:calc(50% - 370px)}}