*{box-sizing:border-box}html,body{color:#f2f4f7;background:#15181d;height:100%;margin:0;font:600 15px/1.4 system-ui,sans-serif}#app{flex-direction:column;height:100dvh;display:flex}header{background:#0d0f12;border-bottom:3px solid #c8102e;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}h1{letter-spacing:.5px;margin:0 8px 0 0;font-size:20px}select,button{font:inherit;color:#fff;cursor:pointer;background:#262b33;border:1px solid #444b57;border-radius:8px;padding:7px 11px}button.on{background:#c8102e;border-color:#c8102e}nav{gap:6px;margin-left:auto;display:flex}#view{flex:1;min-height:0;position:relative}#gl{position:absolute;inset:0}#gl canvas{touch-action:none;width:100%;height:100%;display:block}#hint{color:#cfd5dd;pointer-events:none;font-size:13px;position:absolute;top:8px;left:12px}#colours{flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px);display:flex;position:absolute;bottom:12px;left:12px}#colours button{align-items:center;gap:6px;padding:5px 9px;font-size:13px;display:flex}#colours i{border:1px solid #888;border-radius:50%;width:16px;height:16px;display:inline-block}aside{background:#0d0f12f0;border:1px solid #444b57;border-radius:12px;width:340px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);padding:12px 16px;position:absolute;top:12px;right:12px;overflow:auto}aside h2{color:#ff4d63;margin:0 0 8px;font-size:18px}aside .x{padding:2px 10px;position:absolute;top:8px;right:8px}table{border-collapse:collapse;width:100%}td{vertical-align:top;border-bottom:1px solid #2c323b;padding:4px 2px}td:first-child{color:#aab2bd;width:45%}.opt{text-align:left;width:100%;margin:6px 0;display:block}.ok{background:#1d6b3a!important}.bad{background:#7a1c26!important}footer{color:#aab2bd;background:#0d0f12;padding:6px 12px;font-size:11.5px;font-weight:500}#fallback{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}#dbg{background:#000a;padding:4px;font:11px monospace;position:absolute;bottom:60px;right:8px}@media (width<=600px),(height<=500px){h1{font-size:17px}nav{margin-left:0}body{font-size:16px}aside{width:auto;max-height:60%;inset:auto 8px 8px}#hint{display:none}}[hidden]{display:none!important}.labels{pointer-events:none;position:absolute;inset:0}.lbl{white-space:nowrap;background:#0d0f12d9;border:1px solid #c8102e;border-radius:6px;padding:2px 7px;font-size:12px}#loading{text-align:center;width:100%;position:absolute;top:45%}aside a{color:#ff8a99}aside ul{padding-left:18px;font-size:13px}
