*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#81a8a0;font-family:Arial,Helvetica,sans-serif;color:#f8f5dd}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:31px;left:35px;display:flex;align-items:center;gap:13px;pointer-events:none;text-shadow:0 2px 18px #153c3690}header h1{margin:0;font-family:Georgia,serif;font-size:25px;letter-spacing:.26em;font-weight:400}header p{font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin:7px 0 0;opacity:.85}.sigil{font-size:35px;font-weight:200;opacity:.82}.corner{position:absolute;right:34px;top:43px;font-size:9px;letter-spacing:.16em;text-shadow:0 1px 8px #173b35;pointer-events:none}.live{display:inline-block;width:5px;height:5px;border-radius:50%;background:#e0eeba;margin:0 9px 1px 0;box-shadow:0 0 8px #daf9a0}.divider{opacity:.5;margin:0 9px}nav{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#092a27b0;backdrop-filter:blur(18px);padding:6px;border:1px solid #eaffeb27;border-radius:8px;white-space:nowrap;box-shadow:0 8px 30px #07362620}button{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}nav button{font-size:10px;letter-spacing:.035em;padding:10px 13px;border-radius:4px;color:#e0ebdccc;transition:background .15s}nav button:hover{background:#f2f6d91c}nav button.selected{background:#edf2d5;color:#153b34}.navsep{height:20px;width:1px;background:#d4ecd72a;margin:0 4px}#settingsToggle,#pause{font-size:18px;padding:6px 11px}#settings{position:absolute;right:30px;bottom:97px;width:275px;background:#092b27e8;border:1px solid #eaffeb30;backdrop-filter:blur(22px);border-radius:8px;padding:19px 20px;color:#e1ecdb;font-size:11px;box-shadow:0 15px 45px #032c373d}.paneltitle{font-size:10px;letter-spacing:.15em;display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}#closeSettings{font-size:20px;line-height:10px;opacity:.6}label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0}select{background:#183d35;color:#e8efd9;border:1px solid #c9dbc736;border-radius:4px;padding:6px;font-size:10px;max-width:133px}input[type=range]{width:125px;accent-color:#ccdca3}#settings p{font-size:9px;line-height:1.9;opacity:.5;border-top:1px solid #cee9d124;padding-top:12px}summary{font-size:9px;cursor:pointer;opacity:.6}pre{font:9px/1.6 monospace;white-space:pre-wrap;color:#c1d8bd}#hint{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.13em;opacity:.65;text-shadow:0 1px 7px #123e27;pointer-events:none}#hint span{margin:0 9px}#error{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#102d29;color:#e9edd9;padding:40px;line-height:1.6}#error[hidden],#settings[hidden]{display:none}.hide-ui header,.hide-ui .corner,.hide-ui nav,.hide-ui #hint,.hide-ui #settings{display:none}@media(max-width:850px){header{top:20px;left:22px}header h1{font-size:21px}.corner{display:none}nav{bottom:29px;max-width:calc(100% - 20px);overflow:auto;gap:1px}nav button{font-size:9px;padding:10px 9px}#settings{right:15px;bottom:87px}}