:root{--ink:#e6ebf4;--dim:#97a3b8;--panel-bg:#10141bdb;--panel-border:#8ca0be40}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--ink);background:#14171c;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.storm-canvas{cursor:grab;touch-action:none;position:fixed;inset:0}.storm-canvas:active{cursor:grabbing}.layer{display:block;position:absolute;inset:0}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;box-shadow:0 6px 24px #0006}.hud{pointer-events:none;position:absolute;top:14px;left:16px}.hud h1{letter-spacing:1.5px;margin:0;font-size:14px}.hud .sub{color:var(--dim);margin-top:2px;font-size:11px}.layer-menu{flex-direction:column;gap:4px;min-width:130px;padding:6px;display:flex;position:absolute;top:14px;right:14px}.layer-menu button{all:unset;cursor:pointer;color:var(--dim);text-align:right;border-radius:6px;padding:6px 10px;font-size:12px}.layer-menu button:hover{color:var(--ink);background:#ffffff14}.layer-menu button.active{color:var(--ink);background:#e65a3c40}.layer-menu button.gear{border-top:1px solid var(--panel-border);border-radius:0 0 6px 6px;margin-top:2px}.settings{width:230px;color:var(--dim);flex-direction:column;gap:10px;padding:12px 14px;font-size:11px;display:flex;position:absolute;top:190px;right:14px}.settings label{flex-direction:column;gap:3px;display:flex}.settings label.row{flex-direction:row;align-items:center;gap:8px}.settings input[type=range]{accent-color:#e05a3c;width:100%}.settings hr{border:none;border-top:1px solid var(--panel-border);width:100%;margin:2px 0}.legend{width:240px;padding:8px 12px 7px;position:absolute;bottom:74px;right:14px}.legend-title{color:var(--dim);margin-bottom:5px;font-size:10px}.legend-bar{border-radius:4px;height:8px}.legend-ticks{color:var(--dim);justify-content:space-between;margin-top:3px;font-size:9px;display:flex}.timeline{align-items:center;gap:12px;width:min(760px,100vw - 40px);padding:8px 14px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.play-btn{all:unset;cursor:pointer;color:#fff;text-align:center;background:#e05a3c;border-radius:50%;flex-shrink:0;width:30px;height:30px;font-size:11px;line-height:30px}.timeline-body{flex:1}.timeline-body input[type=range]{accent-color:#e05a3c;width:100%}.timeline-ticks{color:var(--dim);justify-content:space-between;margin-top:1px;font-size:9px;display:flex}.timeline-ticks span{text-align:center;flex:1;min-height:11px}.timeline-ticks span.active{color:var(--ink)}.timeline-current{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;min-width:118px;font-size:11px}